@uisatin/ui 0.1.1 → 0.3.0

package/{chunk-B6V4VSGH.js → chunk-GMETYACH.js}

@@ -1,5 +1,5 @@
-import { KbdGroup } from './chunk-BKZBWPUH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { KbdGroup } from './chunk-57QEOCDZ.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Tooltip as Tooltip$1 } from 'radix-ui';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -14,15 +14,15 @@ function TooltipBubble({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props,
       "data-slot": "tooltip",
       className: cn(
-        "flex items-center gap-2 bg-text-default py-1 pl-2.5 text-sm leading-(--text-sm--line-height) font-medium whitespace-nowrap text-bg-canvas",
-        "[box-shadow:0_8px_12px_0_var(--effect-shadow-md),0_1px_1.5px_0_var(--effect-shadow-ambient),inset_0_1px_0_0_var(--effect-highlight-top)]",
-        shape === "rounded" ? "rounded-pill" : "rounded-lg",
-        shortcut ? "pr-1.5" : "pr-2.5",
+        "sa:flex sa:items-center sa:gap-2 sa:bg-text-default sa:py-1 sa:pl-2.5 sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-medium sa:whitespace-nowrap sa:text-bg-canvas",
+        "sa:[box-shadow:0_8px_12px_0_var(--effect-shadow-md),0_1px_1.5px_0_var(--effect-shadow-ambient),inset_0_1px_0_0_var(--effect-highlight-top)]",
+        shape === "sa:rounded" ? "sa:rounded-pill" : "sa:rounded-lg",
+        shortcut ? "sa:pr-1.5" : "sa:pr-2.5",
         className
       ),
-      ...props,
       children: [
         /* @__PURE__ */ jsx("span", { children: label }),
         shortcut && /* @__PURE__ */ jsx(KbdGroup, { keys: shortcut, tone: "inverse" })
@@ -42,7 +42,8 @@ function Tooltip({
   defaultOpen = false,
   onOpenChange,
   container,
-  className
+  className,
+  ...props
 }) {
   const [inner, setInner] = React.useState(defaultOpen);
   const open = openProp ?? inner;
@@ -66,17 +67,15 @@ function Tooltip({
         sideOffset: 8,
         collisionPadding: 8,
         className: cn(
-          "z-50 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out)",
-          "starting:opacity-0",
-          "data-[side=top]:starting:translate-y-1 data-[side=bottom]:starting:-translate-y-1",
-          "data-[side=left]:starting:translate-x-1 data-[side=right]:starting:-translate-x-1"
+          "sa:z-50 sa:transition-[opacity,translate] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:starting:opacity-0",
+          "sa:data-[side=top]:starting:translate-y-1 sa:data-[side=bottom]:starting:-translate-y-1",
+          "sa:data-[side=left]:starting:translate-x-1 sa:data-[side=right]:starting:-translate-x-1"
         ),
-        children: /* @__PURE__ */ jsx(TooltipBubble, { label, shortcut, shape, className })
+        children: /* @__PURE__ */ jsx(TooltipBubble, { ...props, label, shortcut, shape, className })
       }
     ) })
   ] }) });
 }
 
 export { Tooltip, TooltipBubble };
-//# sourceMappingURL=chunk-B6V4VSGH.js.map
-//# sourceMappingURL=chunk-B6V4VSGH.js.map

package/chunk-HK6WINL6.js

@@ -0,0 +1,95 @@
+import { bannerMesh } from './chunk-YYFAZQ25.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { ArrowRight, Xmark } from 'iconoir-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function AnnouncementBar({
+  action,
+  onDismiss,
+  dismissLabel = "Dismiss announcement",
+  sticky,
+  tone = "primary",
+  background = "plain",
+  shimmer = false,
+  children,
+  className,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const toneClass = {
+    primary: "sa:bg-action-primary-bg sa:text-action-primary-fg",
+    inverse: "sa:bg-action-inverse-bg sa:text-text-on-inverse",
+    default: "sa:bg-bg-card sa:text-text-default sa:[box-shadow:inset_0_1px_0_var(--border-subtle),inset_0_-1px_0_var(--border-subtle)]"
+  }[tone];
+  const closeClass = {
+    primary: "sa:text-action-primary-fg sa:opacity-70 sa:hover:bg-action-primary-bg-hover sa:hover:opacity-100",
+    inverse: "sa:text-text-on-inverse sa:opacity-70 sa:hover:bg-action-inverse-bg-hover sa:hover:opacity-100",
+    default: "sa:text-text-muted sa:hover:bg-bg-hover sa:hover:text-text-default"
+  }[tone];
+  const label = action && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.label,
+    /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": labels.announcement,
+      "data-slot": "announcement-bar",
+      "data-tone": tone,
+      className: cn(
+        "sa:relative sa:isolate sa:flex sa:min-h-11 sa:w-full sa:items-center sa:justify-center sa:px-12 sa:py-2 sa:text-base",
+        toneClass,
+        shimmer && "satin-sheen",
+        sticky === "top" && "sa:sticky sa:top-0 sa:z-40",
+        sticky === "bottom" && "sa:sticky sa:bottom-0 sa:z-40",
+        className
+      ),
+      ...props,
+      children: [
+        background === "mesh" && tone === "default" && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: bannerMesh.horizontal.one.light,
+            alt: "",
+            "aria-hidden": true,
+            className: "sa:pointer-events-none sa:absolute sa:inset-0 sa:-z-10 sa:size-full sa:max-w-none sa:object-cover sa:mix-blend-multiply"
+          }
+        ),
+        background === "mesh" && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: bannerMesh.horizontal.one.dark,
+            alt: "",
+            "aria-hidden": true,
+            className: "sa:pointer-events-none sa:absolute sa:inset-0 sa:-z-10 sa:size-full sa:max-w-none sa:object-cover sa:mix-blend-screen"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:flex-wrap sa:items-center sa:justify-center sa:gap-x-3 sa:gap-y-1 sa:text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "sa:m-0", children }),
+          action && (action.href ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", size: "xs", className: "sa:shrink-0 sa:no-underline", children: /* @__PURE__ */ jsx("a", { href: action.href, onClick: action.onClick, children: label }) }) : /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "xs", className: "sa:shrink-0", onClick: action.onClick, children: label }))
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": dismissLabel,
+            onClick: onDismiss,
+            className: cn(
+              "sa:absolute sa:top-1/2 sa:right-3 sa:grid sa:size-7 sa:-translate-y-1/2 sa:place-items-center sa:rounded-md sa:outline-none",
+              closeClass,
+              "sa:transition-[opacity,background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              "sa:focus-visible:opacity-100 sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+            ),
+            children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true, className: "sa:size-4 sa:[stroke-width:1.875]" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { AnnouncementBar };

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

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

package/{chunk-DO3TBNSC.js → chunk-ISYKZCPJ.js}

@@ -1,5 +1,5 @@
-import { ChartCard, defaultFormat, ChartTooltip, ChartLegendRow } from './chunk-YPJYW624.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { ChartCard, defaultFormat, ChartTooltip, ChartLegendRow } from './chunk-ZBZ3ZQRB.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -32,12 +32,12 @@ function BarCard({
   const ticks = [4, 3, 2, 1, 0].map((i) => max / 4 * i);
   const sum = data.reduce((n, d) => n + d.value, 0);
   return /* @__PURE__ */ jsxs(ChartCard, { total: total ?? defaultFormat(sum), ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-[206px] items-end gap-2 pl-8", onPointerLeave: () => setHovered(null), children: [
+    /* @__PURE__ */ jsx("div", { className: "sa:pt-2", children: /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:flex sa:h-[206px] sa:items-end sa:gap-2 sa:pl-8", onPointerLeave: () => setHovered(null), children: [
       ticks.slice(0, 4).map((_, i) => /* @__PURE__ */ jsx(
         "span",
         {
           "aria-hidden": true,
-          className: "absolute right-0 left-8 h-px border-t border-dashed border-border-subtle",
+          className: "sa:absolute sa:right-0 sa:left-8 sa:h-px sa:border-t sa:border-dashed sa:border-border-subtle",
           style: { top: TRACK / 4 * i }
         },
         i
@@ -47,7 +47,7 @@ function BarCard({
         {
           "aria-hidden": true,
           className: cn(
-            "absolute left-6 w-6 -translate-x-full text-right text-xs leading-[18px] text-text-muted",
+            "sa:absolute sa:left-6 sa:w-6 sa:-translate-x-full sa:text-right sa:text-xs sa:leading-[18px] sa:text-text-muted",
             regrow && "satin-bar-fade"
           ),
           style: { top: TRACK / 4 * i - 9 },
@@ -55,7 +55,7 @@ function BarCard({
         },
         `${redraw.n}-${i}`
       )),
-      /* @__PURE__ */ jsx("ul", { className: "contents", "aria-label": props.title, children: data.map((d, i) => {
+      /* @__PURE__ */ jsx("ul", { className: "sa:contents", "aria-label": props.title, children: data.map((d, i) => {
         const isActive = active === i;
         const dimmed = active !== null && !isActive;
         const height = d.value / max * TRACK;
@@ -67,9 +67,9 @@ function BarCard({
             onPointerEnter: () => setHovered(i),
             onFocus: () => setHovered(i),
             onBlur: () => setHovered(null),
-            className: "relative flex min-w-0 flex-1 flex-col items-center gap-1.5 rounded-md focus-visible:outline-none",
+            className: "sa:relative sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:items-center sa:gap-1.5 sa:rounded-md sa:focus-visible:outline-none",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col items-center justify-end gap-1.5", style: { height: TRACK }, children: [
+              /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:flex sa:w-full sa:flex-col sa:items-center sa:justify-end sa:gap-1.5", style: { height: TRACK }, children: [
                 isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     ChartTooltip,
@@ -79,17 +79,17 @@ function BarCard({
                       value: `${formatValue(d.value)}${unit ? ` ${unit}` : ""}`
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { ref: setAnchor, className: "text-sm leading-(--text-sm--line-height) font-medium text-text-default", children: formatValue(d.value) })
+                  /* @__PURE__ */ jsx("span", { ref: setAnchor, className: "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-medium sa:text-text-default", children: formatValue(d.value) })
                 ] }),
                 /* @__PURE__ */ jsx(
                   "span",
                   {
                     "aria-hidden": true,
                     className: cn(
-                      "w-full rounded-md transition-[background-color,outline-color] duration-(--duration-fast) ease-(--ease-out)",
+                      "sa:w-full sa:rounded-md sa:transition-[background-color,outline-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
                       // Dimmed bars stay a tint of chart/3 on the card, so the brand colour never reaches them.
-                      dimmed ? "bg-[color-mix(in_oklab,var(--chart-3)_30%,var(--bg-card))]" : "bg-chart-3",
-                      isActive && "outline outline-offset-2 outline-chart-3",
+                      dimmed ? "sa:bg-[color-mix(in_oklab,var(--sa-chart-3)_30%,var(--bg-card))]" : "sa:bg-chart-3",
+                      isActive && "sa:outline sa:outline-offset-2 sa:outline-chart-3",
                       regrow && "satin-bar-regrow"
                     ),
                     style: { height }
@@ -100,8 +100,8 @@ function BarCard({
                 "span",
                 {
                   className: cn(
-                    "text-sm leading-(--text-sm--line-height) font-medium whitespace-nowrap",
-                    isActive ? "text-text-default" : "text-text-muted",
+                    "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-medium sa:whitespace-nowrap",
+                    isActive ? "sa:text-text-default" : "sa:text-text-muted",
                     regrow && "satin-bar-fade"
                   ),
                   children: d.label
@@ -116,7 +116,7 @@ function BarCard({
     legend && /* @__PURE__ */ jsx(
       ChartLegendRow,
       {
-        color: "var(--chart-3)",
+        color: "var(--sa-chart-3)",
         label: legend.label,
         value: legend.value ?? formatValue(sum),
         note: legend.note
@@ -126,5 +126,3 @@ function BarCard({
 }
 
 export { BarCard, niceMax };
-//# sourceMappingURL=chunk-DO3TBNSC.js.map
-//# sourceMappingURL=chunk-DO3TBNSC.js.map

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

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

@@ -1,6 +1,6 @@
-import { niceMax } from './chunk-DO3TBNSC.js';
-import { ChartCard, defaultFormat, ChartTooltip } from './chunk-YPJYW624.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { niceMax } from './chunk-ISYKZCPJ.js';
+import { ChartCard, defaultFormat, ChartTooltip } from './chunk-ZBZ3ZQRB.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -71,13 +71,13 @@ function LineCard({
     setHovered(Math.max(0, Math.min(n - 1, Math.round(f * (n - 1)))));
   };
   const fmt = (v) => `${formatValue(v)}${unit ? ` ${unit}` : ""}`;
-  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? defaultFormat(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "relative pt-2 pl-8", children: [
+  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? defaultFormat(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:pt-2 sa:pl-8", children: [
     ticks.map((t, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       i < 4 && /* @__PURE__ */ jsx(
         "span",
         {
           "aria-hidden": true,
-          className: "absolute right-0 left-8 h-px border-t border-dashed border-border-subtle",
+          className: "sa:absolute sa:right-0 sa:left-8 sa:h-px sa:border-t sa:border-dashed sa:border-border-subtle",
           style: { top: 8 + TRACK / 4 * i }
         }
       ),
@@ -85,7 +85,7 @@ function LineCard({
         "span",
         {
           "aria-hidden": true,
-          className: cn("absolute left-6 w-6 -translate-x-full text-right text-xs leading-[18px] text-text-muted", fade && "satin-bar-fade"),
+          className: cn("sa:absolute sa:left-6 sa:w-6 sa:-translate-x-full sa:text-right sa:text-xs sa:leading-[18px] sa:text-text-muted", fade && "satin-bar-fade"),
           style: { top: 8 + TRACK / 4 * i - 9 },
           children: formatValue(t)
         },
@@ -98,7 +98,7 @@ function LineCard({
         role: "group",
         "aria-label": `${props.title}, ${n} points`,
         tabIndex: 0,
-        className: "relative rounded-md outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        className: "sa:relative sa:rounded-md sa:outline-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
         style: { height: TRACK },
         onPointerMove: pick,
         onPointerLeave: () => setHovered(null),
@@ -116,12 +116,12 @@ function LineCard({
               "aria-hidden": true,
               viewBox: `0 0 100 ${TRACK}`,
               preserveAspectRatio: "none",
-              className: cn("absolute inset-0 size-full overflow-visible", fade && "satin-bar-fade"),
+              className: cn("sa:absolute sa:inset-0 sa:size-full sa:overflow-visible", fade && "satin-bar-fade"),
               children: [
                 area && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "var(--chart-3)", stopOpacity: "0.28" }),
-                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "var(--chart-3)", stopOpacity: "0" })
+                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "var(--sa-chart-3)", stopOpacity: "0.28" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "var(--sa-chart-3)", stopOpacity: "0" })
                   ] }) }),
                   /* @__PURE__ */ jsx("path", { d: `${line} L 100 ${TRACK} L 0 ${TRACK} Z`, fill: `url(#${gradientId})` })
                 ] }),
@@ -142,7 +142,7 @@ function LineCard({
                   {
                     d: line,
                     fill: "none",
-                    stroke: "var(--chart-3)",
+                    stroke: "var(--sa-chart-3)",
                     strokeWidth: 2,
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
@@ -159,23 +159,23 @@ function LineCard({
               {
                 ref: setAnchor,
                 "aria-hidden": true,
-                className: "pointer-events-none absolute size-2 -translate-1/2 rounded-full border-2 border-chart-3 bg-bg-card",
+                className: "sa:pointer-events-none sa:absolute sa:size-2 sa:-translate-1/2 sa:rounded-full sa:border-2 sa:border-chart-3 sa:bg-bg-card",
                 style: { left: `${x(active)}%`, top: y(data[active].value) }
               }
             ),
             /* @__PURE__ */ jsx(ChartTooltip, { anchor, sideOffset: 6, label: data[active].tooltipLabel ?? data[active].label, value: fmt(data[active].value) }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: `${data[active].tooltipLabel ?? data[active].label}: ${fmt(data[active].value)}` })
+            /* @__PURE__ */ jsx("span", { className: "sa:sr-only", "aria-live": "polite", children: `${data[active].tooltipLabel ?? data[active].label}: ${fmt(data[active].value)}` })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "relative mt-1.5 h-5", children: data.map(
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "sa:relative sa:mt-1.5 sa:h-5", children: data.map(
       (d, i) => showLabel(i) ? /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "absolute -translate-x-1/2 text-sm leading-(--text-sm--line-height) whitespace-nowrap",
-            i === active ? "font-medium text-text-default" : "text-text-muted",
+            "sa:absolute sa:-translate-x-1/2 sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:whitespace-nowrap",
+            i === active ? "sa:font-medium sa:text-text-default" : "sa:text-text-muted",
             fade && "satin-bar-fade"
           ),
           style: { left: `${x(i)}%` },
@@ -191,5 +191,3 @@ function AreaCard(props) {
 }
 
 export { AreaCard, LineCard };
-//# sourceMappingURL=chunk-SHDFUXYV.js.map
-//# sourceMappingURL=chunk-SHDFUXYV.js.map

package/{chunk-LZMKSFCF.js → chunk-JCXI7VQL.js}

@@ -1,5 +1,5 @@
-import { ChartCard, ChartTooltip, defaultFormat, ChartLegendRow } from './chunk-YPJYW624.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { ChartCard, ChartTooltip, defaultFormat, ChartLegendRow } from './chunk-ZBZ3ZQRB.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -16,12 +16,12 @@ function ChannelCard({
   const active = hovered ?? highlight ?? null;
   const sum = data.reduce((n, d) => n + d.value, 0);
   const last = data.length - 1;
-  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? formatValue(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4", onPointerLeave: () => setHovered(null), children: [
+  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? formatValue(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:flex sa:flex-col sa:gap-4", onPointerLeave: () => setHovered(null), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         "aria-hidden": true,
-        className: "relative grid h-3.5 gap-x-0.5",
+        className: "sa:relative sa:grid sa:h-3.5 sa:gap-x-0.5",
         style: { gridTemplateColumns: data.map((d) => `minmax(0, ${Math.max(d.value, 0)}fr)`).join(" ") },
         children: data.map((d, i) => /* @__PURE__ */ jsx(
           "span",
@@ -29,10 +29,10 @@ function ChannelCard({
             ref: active === i ? setAnchor : void 0,
             onPointerEnter: () => setHovered(i),
             className: cn(
-              "relative rounded-[1.5px] transition-opacity duration-(--duration-fast) ease-(--ease-out)",
-              i === 0 && "rounded-l-[4px]",
-              i === last && "rounded-r-[4px]",
-              active !== null && active !== i && "opacity-15"
+              "sa:relative sa:rounded-[1.5px] sa:transition-opacity sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              i === 0 && "sa:rounded-l-[4px]",
+              i === last && "sa:rounded-r-[4px]",
+              active !== null && active !== i && "sa:opacity-15"
             ),
             style: { background: seriesColor(i) },
             children: active === i && /* @__PURE__ */ jsx(ChartTooltip, { anchor, sideOffset: 8, label: d.tooltipLabel ?? d.label, value: formatValue(d.value) })
@@ -44,7 +44,7 @@ function ChannelCard({
     /* @__PURE__ */ jsx(
       "ul",
       {
-        className: "flex flex-col gap-0.5 @min-[560px]:grid @min-[560px]:grid-flow-col @min-[560px]:auto-cols-fr @min-[560px]:gap-x-6",
+        className: "sa:flex sa:flex-col sa:gap-0.5 sa:@min-[560px]:grid sa:@min-[560px]:grid-flow-col sa:@min-[560px]:auto-cols-fr sa:@min-[560px]:gap-x-6",
         style: { gridTemplateRows: `repeat(${Math.ceil(data.length / 2)}, auto)` },
         "aria-label": props.title,
         children: data.map((d, i) => /* @__PURE__ */ jsx(
@@ -55,7 +55,7 @@ function ChannelCard({
             onFocus: () => setHovered(i),
             onBlur: () => setHovered(null),
             "aria-label": `${d.label}: ${formatValue(d.value)}, ${Math.round(d.value / (sum || 1) * 100)}%`,
-            className: "rounded-md focus-visible:outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+            className: "sa:rounded-md sa:focus-visible:outline-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
             children: /* @__PURE__ */ jsx(
               ChartLegendRow,
               {
@@ -75,5 +75,3 @@ function ChannelCard({
 }
 
 export { ChannelCard };
-//# sourceMappingURL=chunk-LZMKSFCF.js.map
-//# sourceMappingURL=chunk-LZMKSFCF.js.map

package/{chunk-NN6PKJWS.js → chunk-JYOZUQNU.js}

@@ -1,5 +1,5 @@
-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 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -22,15 +22,15 @@ function CookieConsent({
       "data-slot": "cookie-consent",
       "aria-label": ariaLabel,
       className: cn(
-        "flex w-fit max-w-full flex-wrap items-center gap-x-5 gap-y-3 rounded-3xl border border-border-subtle bg-bg-popover px-5 py-4 [box-shadow:0_1px_3px_0_var(--effect-shadow-ambient),0_16px_40px_-12px_var(--effect-shadow-lg)]",
-        floating && "fixed inset-x-4 bottom-4 z-50 mx-auto max-w-[calc(100vw-32px)]",
+        "sa:flex sa:w-fit sa:max-w-full sa:flex-wrap sa:items-center sa:gap-x-5 sa:gap-y-3 sa:rounded-3xl sa:border sa:border-border-subtle sa:bg-bg-popover sa:px-5 sa:py-4 sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-ambient),0_16px_40px_-12px_var(--effect-shadow-lg)]",
+        floating && "sa:fixed sa:inset-x-4 sa:bottom-4 sa:z-50 sa:mx-auto sa:max-w-[calc(100vw-32px)]",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("p", { className: "m-0 w-[280px] max-w-full min-w-0 shrink text-base text-text-muted", children }),
-        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
-          onCustomize && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "lg", shape: "rounded", className: "text-text-muted", onClick: onCustomize, children: customizeLabel }),
+        /* @__PURE__ */ jsx("p", { className: "sa:m-0 sa:w-[280px] sa:max-w-full sa:min-w-0 sa:shrink sa:text-base sa:text-text-muted", children }),
+        /* @__PURE__ */ jsxs("div", { className: "sa:ml-auto sa:flex sa:shrink-0 sa:items-center sa:gap-2", children: [
+          onCustomize && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "lg", shape: "rounded", className: "sa:text-text-muted", onClick: onCustomize, children: customizeLabel }),
           /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "lg", shape: "rounded", onClick: onReject, children: rejectLabel }),
           /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "rounded", onClick: onAccept, children: acceptLabel })
         ] })
@@ -40,5 +40,3 @@ function CookieConsent({
 }
 
 export { CookieConsent };
-//# sourceMappingURL=chunk-NN6PKJWS.js.map
-//# sourceMappingURL=chunk-NN6PKJWS.js.map

package/{chunk-LLHTVIM3.js → chunk-LB37KTJH.js}

@@ -1,10 +1,10 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { RadioGroup as RadioGroup$1 } from 'radix-ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function RadioGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(RadioGroup$1.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props });
+  return /* @__PURE__ */ jsx(RadioGroup$1.Root, { "data-slot": "radio-group", className: cn("sa:grid sa:gap-3", className), ...props });
 }
 function Radio({ className, label, description, placement = "left", id, disabled, ...props }) {
   const autoId = React.useId();
@@ -19,7 +19,7 @@ function Radio({ className, label, description, placement = "left", id, disabled
       "aria-labelledby": labelId,
       "aria-describedby": descriptionId,
       disabled,
-      className: cn("peer satin-radio", className),
+      className: cn("sa:peer satin-radio", className),
       ...props,
       children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, { className: "satin-radio-dot" })
     }
@@ -32,12 +32,12 @@ function Radio({ className, label, description, placement = "left", id, disabled
       {
         htmlFor: radioId,
         "data-slot": "radio-field",
-        className: cn("flex cursor-pointer items-start gap-2 has-disabled:cursor-not-allowed has-data-disabled:cursor-not-allowed [&>:first-child]:mt-0.5", placement === "right" && "flex-row-reverse justify-between"),
+        className: cn("sa:flex sa:cursor-pointer sa:items-start sa:gap-2 sa:has-disabled:cursor-not-allowed sa:has-data-disabled:cursor-not-allowed sa:[&>:first-child]:mt-0.5", placement === "right" && "sa:flex-row-reverse sa:justify-between"),
         children: [
           circle,
-          /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-0.5 text-base text-text-default peer-data-disabled:text-text-subtle peer-data-disabled:*:text-text-subtle", children: [
-            label && /* @__PURE__ */ jsx("span", { id: labelId, className: "block leading-5 font-medium", children: label }),
-            description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "block leading-5 text-text-muted", children: description })
+          /* @__PURE__ */ jsxs("div", { className: "sa:grid sa:min-w-0 sa:gap-0.5 sa:text-base sa:text-text-default sa:peer-data-disabled:text-text-subtle sa:peer-data-disabled:*:text-text-subtle", children: [
+            label && /* @__PURE__ */ jsx("span", { id: labelId, className: "sa:block sa:leading-5 sa:font-medium", children: label }),
+            description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "sa:block sa:leading-5 sa:text-text-muted", children: description })
           ] })
         ]
       }
@@ -46,5 +46,3 @@ function Radio({ className, label, description, placement = "left", id, disabled
 }
 
 export { Radio, RadioGroup };
-//# sourceMappingURL=chunk-LLHTVIM3.js.map
-//# sourceMappingURL=chunk-LLHTVIM3.js.map