@assure-one/design-system 1.30.0 → 1.31.0

package/dist/index.js

@@ -201,6 +201,11 @@ var systemTokens = {
     accentHover: "var(--color-accent-hover)",
     accentActive: "var(--color-accent-active)",
     accentRing: "var(--color-accent-ring)",
+    /* Stable cross-product CTA; deliberately independent of [data-brand]. */
+    suiteAction: "var(--color-suite-action)",
+    suiteActionHover: "var(--color-suite-action-hover)",
+    suiteActionActive: "var(--color-suite-action-active)",
+    fgOnSuiteAction: "var(--color-fg-on-suite-action)",
     /* Brand — ambient product family; follows the active [data-brand] scope,
        defaulting to Pro. Prefer these (and the generated bg-brand / text-brand
        / border-brand-line / text-fg-on-brand utilities) for scope-aware chrome
@@ -349,6 +354,20 @@ var systemTokens = {
       fast: "var(--duration-fast)",
       normal: "var(--duration-normal)",
       slow: "var(--duration-slow)"
+    },
+    semantic: {
+      duration: {
+        press: "var(--motion-duration-press)",
+        feedback: "var(--motion-duration-feedback)",
+        overlay: "var(--motion-duration-overlay)",
+        spatial: "var(--motion-duration-spatial)",
+        deliberate: "var(--motion-duration-deliberate)"
+      },
+      ease: {
+        enter: "var(--motion-ease-enter)",
+        exit: "var(--motion-ease-exit)",
+        move: "var(--motion-ease-move)"
+      }
     }
   },
   layout: {
@@ -2732,6 +2751,14 @@ var AspectRatio = React39.forwardRef(function AspectRatio2({ className, ratio =
   );
 });
 AspectRatio.displayName = AspectRatioPrimitive.Root.displayName;
+
+// src/lib/micro-interactions.ts
+var microInteractions = {
+  control: "transition-[color,background-color,border-color,box-shadow] duration-[var(--motion-duration-feedback)] ease-[var(--motion-ease-enter)] motion-reduce:transition-none",
+  pressable: "transition-[color,background-color,border-color,box-shadow,transform] duration-[var(--motion-duration-feedback)] ease-[var(--motion-ease-enter)] active:scale-[0.98] motion-reduce:transform-none motion-reduce:transition-none",
+  selection: "transition-[color,background-color,border-color,box-shadow] duration-[var(--motion-duration-press)] ease-[var(--motion-ease-enter)] motion-reduce:transition-none",
+  overlay: "transition-[opacity,transform] duration-[var(--motion-duration-overlay)] ease-[var(--motion-ease-enter)] motion-reduce:transform-none motion-reduce:transition-none",
+  progress: "transition-[width,height,stroke-dashoffset,background-color] duration-[var(--motion-duration-deliberate)] ease-[var(--motion-ease-enter)] motion-reduce:transition-none"};
 var spinnerVariants = cva(
   "inline-flex shrink-0 items-center justify-center [&_svg]:motion-reduce:animate-none",
   {
@@ -2777,10 +2804,10 @@ Spinner.displayName = "Spinner";
 var buttonVariants = cva(
   cn(
     "inline-flex items-center justify-center rounded-btn font-medium whitespace-nowrap cursor-pointer",
-    "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+    microInteractions.pressable,
     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
-    "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-fg-disabled",
-    "motion-reduce:transition-none",
+    "disabled:pointer-events-none [&:disabled:not([data-loading=true])]:bg-bg-disabled [&:disabled:not([data-loading=true])]:text-fg-disabled",
+    "data-[loading=true]:cursor-wait",
     "[&_svg]:size-4 [&_svg]:shrink-0"
   ),
   {
@@ -2792,14 +2819,17 @@ var buttonVariants = cva(
         success: "bg-success-fg text-fg-on-success hover:bg-success-fg-hover active:bg-success-fg-active",
         ghost: "bg-control-bg text-control-fg hover:bg-control-hover-bg hover:text-control-hover-fg",
         outline: "border border-control-border-strong bg-control-bg text-control-fg hover:bg-control-hover-bg hover:border-control-border-hover",
-        link: "bg-transparent text-accent underline-offset-4 hover:underline p-0 h-auto",
-        accent: "bg-accent text-fg-on-accent hover:bg-accent-hover active:bg-accent-active",
+        link: "bg-transparent text-accent underline-offset-4 hover:underline p-0 h-auto active:scale-100",
+        accent: "bg-suite-action text-fg-on-suite-action hover:bg-suite-action-hover active:bg-suite-action-active",
         dashed: "border-2 border-dashed border-control-border bg-control-bg text-control-muted-fg hover:border-control-border-hover hover:bg-control-hover-bg hover:text-control-hover-fg"
       },
       size: {
         sm: "h-8 px-3 text-[13px] gap-1.5",
         md: "h-10 px-4 text-sm gap-2",
         lg: "h-12 px-6 text-base gap-2",
+        compact: "h-8 px-3 text-[13px] gap-1.5",
+        default: "h-10 px-4 text-sm gap-2",
+        comfortable: "h-12 px-6 text-base gap-2",
         // Icon-only sizes. Hit target ≥ 24px (WCAG 2.5.5 floor).
         // `icon-xs` / `icon-sm` are for dense in-row action stacks where
         // `size="icon"` (40×40) would visually crowd the row.
@@ -2835,6 +2865,8 @@ var Button = forwardRef(function Button2({
     {
       ref,
       disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      "data-loading": loading || void 0,
       className: cn(buttonVariants({ variant, size }), className),
       ...props,
       children: [
@@ -3523,7 +3555,7 @@ var Checkbox = React39.forwardRef(function Checkbox2({
         className: cn(
           "peer border-rule-strong bg-surface text-brand flex size-4 shrink-0 items-center justify-center border",
           shape === "circle" ? "rounded-full" : "rounded-[4px]",
-          "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
+          microInteractions.selection,
           "hover:border-fg-4",
           "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
           "data-[state=checked]:border-brand data-[state=checked]:bg-brand-bg",
@@ -3855,9 +3887,8 @@ var DialogOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__P
     ref,
     className: cn(
       "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
-      "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
+      microInteractions.overlay,
       "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
-      "motion-reduce:transition-none",
       className
     ),
     ...props
@@ -3882,10 +3913,9 @@ var DialogContent = React39.forwardRef(({ size = "md", showCloseButton = true, c
         "rounded-card border-rule bg-surface shadow-pop border p-6",
         "font-body text-fg",
         // motion: scale + fade keyed off data-state
-        "transition-[opacity,transform] duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
+        microInteractions.overlay,
         "data-[state=closed]:-translate-x-1/2 data-[state=closed]:-translate-y-[48%] data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
         "data-[state=open]:-translate-x-1/2 data-[state=open]:-translate-y-1/2 data-[state=open]:scale-100 data-[state=open]:opacity-100",
-        "motion-reduce:transition-none",
         dialogSizeStyles[size],
         className
       ),
@@ -4429,10 +4459,9 @@ var PopoverContent = React39.forwardRef(({ className, align = "center", side = "
     sideOffset,
     className: cn(
       "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] w-72 border p-4 outline-none",
-      "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+      microInteractions.overlay,
       "data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
       "data-[state=open]:scale-100 data-[state=open]:opacity-100",
-      "motion-reduce:transition-none",
       className
     ),
     ...props
@@ -4956,8 +4985,8 @@ var chipVariants = cva(
   {
     variants: {
       variant: {
-        primary: "bg-primary/10 text-primary hover:bg-primary/15",
-        neutral: "bg-muted text-fg-2 hover:bg-muted/80"
+        primary: "bg-brand-bg text-brand hover:bg-brand-bg-hover",
+        neutral: "bg-bg-2 text-fg-2 hover:bg-bg-3"
       }
     },
     defaultVariants: {
@@ -5609,7 +5638,7 @@ IconTile.displayName = "IconTile";
 var inputVariants = cva(
   [
     "flex w-full rounded-input border bg-surface font-body text-fg",
-    "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
+    microInteractions.control,
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
@@ -5627,7 +5656,10 @@ var inputVariants = cva(
       inputSize: {
         sm: "h-8 px-2.5 py-1 text-xs",
         md: "h-9 px-3 py-2 text-[13px]",
-        lg: "h-11 px-3.5 py-2.5 text-sm"
+        lg: "h-11 px-3.5 py-2.5 text-sm",
+        compact: "h-8 px-2.5 py-1 text-[13px]",
+        default: "h-10 px-3 py-2 text-sm",
+        comfortable: "h-12 px-3.5 py-2.5 text-base"
       }
     },
     defaultVariants: {
@@ -5639,7 +5671,10 @@ var inputVariants = cva(
 var floatingLabelSize = {
   sm: "text-xs",
   md: "text-[13px]",
-  lg: "text-sm"
+  lg: "text-sm",
+  compact: "text-[13px]",
+  default: "text-sm",
+  comfortable: "text-base"
 };
 var Input = forwardRef(function Input2({
   label,
@@ -5726,7 +5761,6 @@ var Input = forwardRef(function Input2({
           onClick: () => setShowPassword((prev) => !prev),
           className: "text-fg-4 hover:text-fg absolute top-1/2 right-2.5 -translate-y-1/2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none motion-reduce:transition-none",
           "aria-label": showPassword ? "Hide password" : "Show password",
-          tabIndex: -1,
           children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "size-4", "aria-hidden": "true" })
         }
       ),
@@ -5871,7 +5905,7 @@ var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
     "div",
     {
       ref,
-      className: cn("skeleton bg-bg-3 rounded-icon animate-pulse", className),
+      className: cn("skeleton bg-bg-3 rounded-icon animate-pulse motion-reduce:animate-none", className),
       "aria-hidden": "true",
       ...props
     }
@@ -5883,7 +5917,7 @@ var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...
     "div",
     {
       className: cn(
-        "skeleton bg-bg-3 rounded-icon h-4 animate-pulse",
+        "skeleton bg-bg-3 rounded-icon h-4 animate-pulse motion-reduce:animate-none",
         i === lines - 1 && "w-3/4"
       )
     },
@@ -5897,7 +5931,7 @@ var SkeletonCircle = forwardRef(
       "div",
       {
         ref,
-        className: cn("skeleton bg-bg-3 animate-pulse rounded-full", className),
+        className: cn("skeleton bg-bg-3 animate-pulse rounded-full motion-reduce:animate-none", className),
         style: { width: size, height: size },
         "aria-hidden": "true",
         ...props
@@ -7016,11 +7050,11 @@ function CountrySelect({
             type: "button",
             disabled,
             "aria-label": "Select country code",
-            className: "rounded-input flex h-9 w-[90px] shrink-0 items-center gap-1.5 border border-input bg-input-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50",
+            className: "rounded-input flex h-9 w-[90px] shrink-0 items-center gap-1.5 border border-rule-strong bg-surface px-2.5 text-sm text-fg transition-colors focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none motion-reduce:transition-none disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
             children: [
               /* @__PURE__ */ jsx(CountryFlag, { iso: selected.iso }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: selected.dialCode }),
-              /* @__PURE__ */ jsx("svg", { className: "ml-auto size-3 shrink-0 text-muted-foreground", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) })
+              /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-fg-3", children: selected.dialCode }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-auto size-3 shrink-0 text-fg-3", "aria-hidden": "true" })
             ]
           }
         ) }),
@@ -7031,7 +7065,7 @@ function CountrySelect({
             align: "start",
             sideOffset: 4,
             style: { zIndex: 9999, minWidth: 248 },
-            className: "rounded-card border border-border bg-popover shadow-xl outline-none",
+            className: "rounded-card border border-rule bg-surface shadow-xl outline-none motion-reduce:transition-none",
             onOpenAutoFocus: (e) => {
               e.preventDefault();
               searchRef.current?.focus({ preventScroll: true });
@@ -7041,11 +7075,8 @@ function CountrySelect({
               if (e.key !== "Escape") e.stopPropagation();
             },
             children: [
-              /* @__PURE__ */ jsx("div", { className: "rounded-t-card border-b border-border px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "rounded-input flex items-center gap-2 border border-input bg-input-background px-2.5", children: [
-                /* @__PURE__ */ jsxs("svg", { className: "size-3.5 shrink-0 text-muted-foreground", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-                  /* @__PURE__ */ jsx("path", { d: "m21 21-4.35-4.35" })
-                ] }),
+              /* @__PURE__ */ jsx("div", { className: "rounded-t-card border-b border-rule px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "rounded-input flex items-center gap-2 border border-rule-strong bg-surface px-2.5", children: [
+                /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5 shrink-0 text-fg-3", "aria-hidden": "true" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -7054,7 +7085,7 @@ function CountrySelect({
                     onChange: (e) => setSearch(e.target.value),
                     onKeyDown: (e) => e.stopPropagation(),
                     placeholder: "Search country or code...",
-                    className: "h-8 flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground focus:outline-none"
+                    className: "h-8 flex-1 bg-transparent text-xs text-fg placeholder:text-fg-3 focus:outline-none"
                   }
                 )
               ] }) }),
@@ -7064,7 +7095,7 @@ function CountrySelect({
                   className: "rounded-b-card max-h-56 overflow-y-auto",
                   style: { overscrollBehavior: "contain" },
                   onWheel: (e) => e.stopPropagation(),
-                  children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-3 text-center text-xs text-muted-foreground", children: "No countries found" }) : filtered.map((c) => /* @__PURE__ */ jsxs(
+                  children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-3 text-center text-xs text-fg-3", children: "No countries found" }) : filtered.map((c) => /* @__PURE__ */ jsxs(
                     "button",
                     {
                       type: "button",
@@ -7075,13 +7106,13 @@ function CountrySelect({
                         setSearch("");
                       },
                       className: cn(
-                        "flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/60",
-                        c.iso === value && "bg-primary/5"
+                        "flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-bg-2/60 motion-reduce:transition-none",
+                        c.iso === value && "bg-brand-bg"
                       ),
                       children: [
                         /* @__PURE__ */ jsx(CountryFlag, { iso: c.iso }),
-                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-xs text-foreground", children: c.name }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: c.dialCode })
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-xs text-fg", children: c.name }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-fg-3", children: c.dialCode })
                       ]
                     },
                     c.iso
@@ -7120,7 +7151,7 @@ function PhoneCountryInput({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: error })
+    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-danger-fg", children: error })
   ] });
 }
 var BARS = [
@@ -7182,7 +7213,7 @@ function PriorityIcon({ priority, size = 16, className, ...props }) {
   );
 }
 var progressBarVariants = cva(
-  "h-full rounded-full transition-[width,background-color] duration-[var(--duration-slow)] ease-[var(--ease-out-quart)]",
+  cn("h-full rounded-full", microInteractions.progress),
   {
     variants: {
       variant: {
@@ -7222,7 +7253,7 @@ var ProgressBar = forwardRef(function ProgressBar2({ value, max = 100, label, sh
           {
             className: cn(
               progressBarVariants({ variant: resolvedVariant }),
-              isIndeterminate && "absolute inset-y-0 left-0 w-1/3 animate-[progress-indeterminate_1.4s_var(--ease-out-quart)_infinite]"
+              isIndeterminate && "absolute inset-y-0 left-0 w-1/3 animate-[progress-indeterminate_1.4s_var(--ease-out-quart)_infinite] motion-reduce:animate-none"
             ),
             style: isIndeterminate ? void 0 : { width: `${percentage}%` }
           }
@@ -7239,7 +7270,7 @@ var ProgressBar = forwardRef(function ProgressBar2({ value, max = 100, label, sh
 });
 ProgressBar.displayName = "ProgressBar";
 var progressRingVariants = cva(
-  "transition-[stroke-dashoffset,stroke] duration-[var(--duration-slow)] ease-[var(--ease-out-quart)]",
+  "transition-[stroke-dashoffset,stroke] duration-[var(--duration-slow)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
   {
     variants: {
       variant: {
@@ -7324,7 +7355,7 @@ var RadioGroupItem = React39.forwardRef(function RadioGroupItem2({ className, la
       id,
       className: cn(
         "peer border-rule-strong bg-surface text-brand aspect-square size-4 shrink-0 rounded-full border",
-        "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
+        microInteractions.selection,
         "hover:border-fg-4",
         "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
         "data-[state=checked]:border-brand",
@@ -7601,7 +7632,8 @@ var RouteTransition = forwardRef(
       {
         className: cn(
           "animate-in fade-in-0 slide-in-from-bottom-2",
-          "duration-[var(--duration-normal)] ease-[var(--ease-out-quart)]"
+          "duration-[var(--duration-normal)] ease-[var(--ease-out-quart)]",
+          "motion-reduce:animate-none"
         ),
         children
       },
@@ -7672,8 +7704,7 @@ function useDebounce(value, delay = 300) {
 var searchInputVariants = cva(
   [
     "flex w-full rounded-input border border-rule-strong bg-surface font-body text-fg",
-    "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-    "motion-reduce:transition-none",
+    microInteractions.control,
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
@@ -7690,7 +7721,10 @@ var searchInputVariants = cva(
         // FilterChip at their `sm` tier in a toolbar row.
         sm: "h-8 pl-8 pr-8 text-[13px]",
         md: "h-9 pl-9 pr-9 text-[13px]",
-        lg: "h-11 pl-10 pr-10 text-sm"
+        lg: "h-11 pl-10 pr-10 text-sm",
+        compact: "h-8 pl-8 pr-8 text-[13px]",
+        default: "h-10 pl-9 pr-9 text-sm",
+        comfortable: "h-12 pl-10 pr-10 text-base"
       }
     },
     defaultVariants: {
@@ -7720,9 +7754,11 @@ var SearchInput = React39.forwardRef(
       onSearch?.(debouncedValue);
     }, [debouncedValue, onSearch]);
     const sz = inputSize ?? "md";
-    const iconLeftClass = sz === "sm" ? "left-2.5" : sz === "lg" ? "left-3" : "left-3";
-    const iconRightClass = sz === "sm" ? "right-2" : sz === "lg" ? "right-3" : "right-2.5";
-    const iconSizeClass = sz === "sm" ? "size-3.5" : "size-4";
+    const isCompact = sz === "sm" || sz === "compact";
+    const isComfortable = sz === "lg" || sz === "comfortable";
+    const iconLeftClass = isCompact ? "left-2.5" : "left-3";
+    const iconRightClass = isCompact ? "right-2" : isComfortable ? "right-3" : "right-2.5";
+    const iconSizeClass = isCompact ? "size-3.5" : "size-4";
     return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
       /* @__PURE__ */ jsx(
         SearchIcon,
@@ -7755,14 +7791,12 @@ var SearchInput = React39.forwardRef(
           onClick: () => onValueChange(""),
           className: cn(
             "rounded-pill text-fg-4 absolute top-1/2 -translate-y-1/2 p-0.5",
-            "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-            "motion-reduce:transition-none",
+            microInteractions.control,
             "hover:text-fg",
             "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
             iconRightClass
           ),
           "aria-label": "Clear search",
-          tabIndex: -1,
           children: /* @__PURE__ */ jsx(XIcon, { className: iconSizeClass, "aria-hidden": "true" })
         }
       )
@@ -9598,8 +9632,8 @@ TabsList.displayName = TabsPrimitive.List.displayName;
 var triggerVariants = cva(
   cn(
     "inline-flex items-center justify-center gap-2 text-[13px] font-medium",
-    "text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-    "motion-reduce:transition-none",
+    "text-fg-3",
+    microInteractions.selection,
     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-fg-disabled",
     "hover:text-fg"
@@ -9712,6 +9746,7 @@ var textareaVariants = cva(
   [
     "flex w-full rounded-input border bg-surface font-body text-fg",
     "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
+    "motion-reduce:transition-none",
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
@@ -10140,8 +10175,8 @@ function ToastItem({ toast, onDismiss }) {
 var itemVariants = cva(
   cn(
     "inline-flex items-center justify-center rounded-pill px-3 py-1.5 text-[13px] font-medium",
-    "text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-    "motion-reduce:transition-none",
+    "text-fg-3",
+    microInteractions.selection,
     "hover:bg-bg-2 hover:text-fg",
     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
@@ -10221,11 +10256,11 @@ var VisuallyHidden = forwardRef(
 VisuallyHidden.displayName = "VisuallyHidden";
 var TONE_DOT = {
   brand: "bg-brand",
-  info: "bg-info",
-  success: "bg-success",
-  warning: "bg-warning",
-  muted: "bg-muted-foreground/40",
-  danger: "bg-destructive"
+  info: "bg-accent-2",
+  success: "bg-success-fg",
+  warning: "bg-warning-fg",
+  muted: "bg-fg-4/40",
+  danger: "bg-danger-fg"
 };
 function ChannelTabs({ tabs, value, onChange, className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -10233,7 +10268,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
     {
       role: "tablist",
       "aria-label": "Channel",
-      className: cn("flex items-center gap-1 border-b border-border bg-card px-3 py-2", className),
+      className: cn("flex items-center gap-1 border-b border-rule bg-surface px-3 py-2", className),
       ...props,
       children: tabs.map((tab) => {
         const active = value === tab.value;
@@ -10246,9 +10281,9 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
             "aria-selected": active,
             onClick: () => onChange(tab.value),
             className: cn(
-              "flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-              active ? "border-brand bg-brand/5 text-brand" : "border-transparent text-muted-foreground hover:text-foreground"
+              "flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors motion-reduce:transition-none",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+              active ? "border-brand bg-brand/5 text-brand" : "border-transparent text-fg-3 hover:text-fg"
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -10256,7 +10291,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
                 {
                   className: cn(
                     "size-1.5 rounded-full",
-                    active ? TONE_DOT[tab.tone ?? "muted"] : "bg-muted-foreground/40"
+                    active ? TONE_DOT[tab.tone ?? "muted"] : "bg-fg-4/40"
                   ),
                   "aria-hidden": true
                 }
@@ -10267,7 +10302,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
                 {
                   className: cn(
                     "ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-semibold tabular-nums",
-                    active ? "bg-background/60" : "bg-muted text-muted-foreground"
+                    active ? "bg-bg/60" : "bg-bg-2 text-fg-3"
                   ),
                   children: count
                 }
@@ -10283,12 +10318,12 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
 ChannelTabs.displayName = "ChannelTabs";
 var TONE_STYLES = {
   brand: "bg-brand/10 text-brand border-brand/30",
-  info: "bg-info/10 text-info border-info/30",
-  primary: "bg-primary/10 text-primary border-primary/30",
-  success: "bg-success/10 text-success border-success/30",
-  warning: "bg-warning/10 text-warning border-warning/30",
-  danger: "bg-destructive/10 text-destructive border-destructive/30",
-  muted: "bg-muted text-muted-foreground border-border"
+  info: "bg-accent-tint text-accent-2 border-accent/30",
+  primary: "bg-brand-bg text-brand border-brand-line",
+  success: "bg-success-bg text-success-fg border-success-line",
+  warning: "bg-warning-bg text-warning-fg border-warning-line",
+  danger: "bg-danger-bg text-danger-fg border-danger-line",
+  muted: "bg-bg-2 text-fg-3 border-rule"
 };
 function IntentBadge({ tone = "muted", icon, children, className, ...props }) {
   return /* @__PURE__ */ jsxs(
@@ -11563,7 +11598,7 @@ var Grid = forwardRef(function Grid2({
   return /* @__PURE__ */ jsx("div", { ref, className: cn("overflow-x-auto", className), ...props, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      role: "table",
+      role: "group",
       "aria-label": ariaLabel,
       className: "grid gap-2",
       style: {
@@ -12139,6 +12174,7 @@ function QuestionOptionButton({
       className: cn(
         "group bg-surface flex w-full items-center gap-3 border text-left",
         "transition-[border-color,background-color,color,box-shadow,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+        "motion-reduce:transition-none",
         "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
         "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
         compact ? "h-10 max-w-max rounded-[10px] px-3" : "min-h-16 rounded-[12px] px-7 py-4",
@@ -12152,7 +12188,7 @@ function QuestionOptionButton({
           {
             "aria-hidden": "true",
             className: cn(
-              "grid shrink-0 place-items-center rounded-full border transition-colors duration-[var(--duration-fast)]",
+              "grid shrink-0 place-items-center rounded-full border transition-colors duration-[var(--duration-fast)] motion-reduce:transition-none",
               compact ? "size-5" : "size-4",
               selected ? "border-brand bg-brand text-fg-on-brand" : "border-rule-strong bg-surface group-hover:border-brand-line text-transparent"
             ),
@@ -12904,7 +12940,7 @@ var EngagementTimelineStep = forwardRef(
   }
 );
 EngagementTimelineStep.displayName = "EngagementTimelineStep";
-var ROW_BASE = "group/row flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1 text-left text-[12px] font-medium transition-colors duration-[120ms] motion-reduce:transition-none";
+var ROW_BASE = "group/row flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1 text-left text-[12px] font-medium transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none";
 var ROW_INACTIVE = "text-fg-2 hover:bg-surface-2 hover:text-fg";
 var ROW_ACTIVE = "bg-brand-bg text-brand font-semibold";
 var BADGE_BASE = "ml-auto min-w-[18px] rounded-full px-[5px] py-px text-center text-[10px] font-[650] tabular-nums";
@@ -12948,7 +12984,7 @@ var FolderTree = forwardRef(function FolderTree2({ nodes, activeId, onSelect, de
               toggle(node.id);
             },
             className: cn(
-              "shrink-0 text-fg-4 transition-transform duration-[150ms] motion-reduce:transition-none",
+              "shrink-0 text-fg-4 transition-transform duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
               isOpen && "rotate-90"
             ),
             children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, "aria-hidden": "true" })
@@ -13011,7 +13047,7 @@ var ClientRailItem = forwardRef(
           // Layout
           "relative flex w-full items-center gap-[11px] border-b border-rule px-[14px] py-[11px] text-left",
           // Motion
-          "transition-colors duration-[120ms] motion-reduce:transition-none",
+          "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
           // Cursor
           "cursor-pointer",
           // State — hover only when not active to avoid override
@@ -13143,7 +13179,7 @@ function CheckboxSlot({
       "div",
       {
         className: cn(
-          "shrink-0 transition-opacity duration-[120ms] motion-reduce:transition-none",
+          "shrink-0 transition-opacity duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
           selected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
           className
         ),
@@ -13170,7 +13206,7 @@ function MoreActions({ menu }) {
         type: "button",
         className: cn(
           "grid size-[30px] place-items-center rounded-[8px] text-fg-4",
-          "transition-colors duration-[120ms] motion-reduce:transition-none",
+          "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
           "group-hover:text-fg-2 hover:bg-surface hover:text-brand hover:shadow-sm"
         ),
         "aria-label": "More actions",
@@ -13210,7 +13246,7 @@ var DocumentFileRow = React39.forwardRef(
           ref,
           className: cn(
             "group flex cursor-pointer items-center gap-[13px] border-b border-rule px-[14px] py-3",
-            "transition-colors duration-[120ms] motion-reduce:transition-none hover:bg-surface-2",
+            "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none hover:bg-surface-2",
             selected && "bg-brand-bg",
             className
           ),
@@ -13277,7 +13313,7 @@ var DocumentFileCard = React39.forwardRef(
           ref,
           className: cn(
             "group relative cursor-pointer rounded-2xl border border-rule bg-surface p-3",
-            "transition-[border-color,box-shadow,transform] duration-[120ms] motion-reduce:transition-none",
+            "transition-[border-color,box-shadow,transform] duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
             "hover:-translate-y-0.5 hover:border-rule-strong hover:shadow-sm",
             selected && "border-brand bg-brand-bg",
             className
@@ -13342,7 +13378,7 @@ var DocumentFileLine = React39.forwardRef(
         ref,
         className: cn(
           "flex items-center gap-2.5 rounded-[10px] px-2.5 py-2",
-          "transition-colors duration-[120ms] motion-reduce:transition-none hover:bg-surface-2",
+          "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none hover:bg-surface-2",
           className
         ),
         ...props,
@@ -13377,7 +13413,7 @@ var DocumentFileLine = React39.forwardRef(
               onClick: onOpen,
               className: cn(
                 "grid size-7 shrink-0 place-items-center rounded-lg text-fg-4",
-                "transition-colors duration-[120ms] motion-reduce:transition-none",
+                "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
                 "hover:bg-surface hover:text-brand",
                 "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]"
               ),
@@ -13451,7 +13487,7 @@ function ChecklistItemRow({ item }) {
     "div",
     {
       className: cn(
-        "rounded-xl border px-3.5 py-2.5 shadow-quiet transition-colors duration-[120ms] motion-reduce:transition-none",
+        "rounded-xl border px-3.5 py-2.5 shadow-quiet transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
         done ? "border-success-line/70 bg-success-bg/30" : item.status === "in-review" ? "border-warning-line/70 bg-warning-bg/25" : "border-rule bg-surface"
       ),
       children: [
@@ -13603,7 +13639,7 @@ var DocumentRequestField = forwardRef(
                 className: cn(
                   "ml-auto size-[26px] rounded-[7px] grid place-items-center",
                   "text-fg-4",
-                  "transition-colors duration-[120ms] motion-reduce:transition-none",
+                  "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
                   "hover:bg-danger-bg hover:text-danger-fg",
                   "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]"
                 ),
@@ -13975,7 +14011,7 @@ var Sidebar = React39.forwardRef(function Sidebar2({
           // movement) but well short of `--duration-slow` (which feels
           // sluggish). `will-change` hints the compositor so the column
           // doesn't repaint every frame mid-transition.
-          "transition-[width,box-shadow] duration-[220ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[width,box-shadow] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "[will-change:width]",
           // Overlay (hover-peek OR programmatic peek-lock): float above the
           // canvas without reflowing layout. Driven by `data-overlay` so a
@@ -14143,7 +14179,7 @@ var SidebarBrandText = React39.forwardRef(
           // Smooth fade + width collapse on rail. Keeps the wordmark
           // legible up to the moment the column reaches rail width, then
           // fully drops out (visibility:hidden cuts hit-testing).
-          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "max-w-[160px] opacity-100",
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible",
           className
@@ -14189,7 +14225,7 @@ var SidebarSection = React39.forwardRef(
             {
               className: cn(
                 "mb-1 flex items-center justify-between px-2.5 py-1",
-                "transition-opacity duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                "transition-opacity duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
                 "opacity-100",
                 "group-data-[labels=hide]/sidebar:invisible group-data-[labels=hide]/sidebar:opacity-0"
               ),
@@ -14283,7 +14319,7 @@ var SidebarLink = React39.forwardRef(
                 // auto margin, which is why "Billing$48k" rendered glued.
                 // Single-line label clips via overflow; badge stays put.
                 "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden whitespace-nowrap",
-                "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
                 "max-w-full opacity-100",
                 "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
               ),
@@ -14315,7 +14351,7 @@ var SidebarLinkLabel = React39.forwardRef(
           // Fade + collapse instead of hard display:none so a single
           // 180ms opacity tween covers all labels in lockstep with the
           // 220ms aside-width transition — no snap on the last frame.
-          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "max-w-full opacity-100",
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible",
           className
@@ -14333,7 +14369,7 @@ var SidebarLinkAction = React39.forwardRef(
       {
         ref,
         className: cn(
-          "transition-opacity duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-opacity duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "opacity-100",
           "group-data-[labels=hide]/sidebar:invisible group-data-[labels=hide]/sidebar:opacity-0",
           className
@@ -14436,7 +14472,7 @@ var SidebarLinkGroup = React39.forwardRef(
           // word boundary; collapses cleanly with the rail-mode max-width
           // animation since both rules only constrain visible content.
           "min-w-0 flex-1 line-clamp-1",
-          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "max-w-full opacity-100",
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
         ),
@@ -14525,7 +14561,7 @@ var SidebarUser = React39.forwardRef(function SidebarUser2({ name, subtitle, ava
       {
         className: cn(
           "min-w-0 leading-tight",
-          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "max-w-full opacity-100",
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
         ),
@@ -15211,7 +15247,10 @@ var DataTableResultsCount = forwardRef(
       "span",
       {
         ref,
-        className: cn("text-fg-4 mr-1 font-sans text-[11px] tabular-nums", className),
+        className: cn(
+          "text-fg-4 mr-1 shrink-0 font-sans text-[11px] whitespace-nowrap tabular-nums",
+          className
+        ),
         ...props,
         children: [
           current.toLocaleString(),
@@ -15243,7 +15282,8 @@ var DataTableRow = forwardRef(
         ref,
         "data-state": selected ? "selected" : void 0,
         className: cn(
-          "border-rule-soft border-b transition-colors duration-[var(--duration-instant)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "border-rule-soft border-b",
+          microInteractions.selection,
           // Selected hover stays in the brand tint (G15) — when both states fire,
           // hover:bg-bg-2 was previously winning and dropping the row out of
           // the selected tint, which read as the row deselecting on hover.
@@ -16794,7 +16834,7 @@ var MessageBubble = forwardRef(function MessageBubble2({ avatar, name, timestamp
           "span",
           {
             className: cn(
-              "ml-auto opacity-0 transition-opacity",
+              "ml-auto opacity-0 transition-opacity motion-reduce:transition-none",
               "group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100"
             ),
             children: actions
@@ -16904,7 +16944,7 @@ var MessageComposer = forwardRef(
         className: cn(
           "relative flex flex-col",
           "border-rule bg-input-background rounded-xl border",
-          "transition-shadow duration-150",
+          "transition-shadow duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
           "focus-within:border-accent-ring focus-within:bg-surface focus-within:shadow-sm",
           isDisabled && "pointer-events-none opacity-60",
           className
@@ -16923,7 +16963,7 @@ var MessageComposer = forwardRef(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: "bg-bg-3 h-6 w-20 shrink-0 animate-pulse rounded-full"
+                  className: "bg-bg-3 h-6 w-20 shrink-0 animate-pulse rounded-full motion-reduce:animate-none"
                 },
                 i
               )) : chips.map((chip) => /* @__PURE__ */ jsx(
@@ -16935,7 +16975,7 @@ var MessageComposer = forwardRef(
                   className: cn(
                     "inline-flex h-6 shrink-0 items-center rounded-full px-2.5",
                     "text-[11px] font-medium text-fg-2",
-                    "bg-bg-2 transition-colors hover:bg-bg-3 hover:text-fg",
+                    "bg-bg-2 transition-colors hover:bg-bg-3 hover:text-fg motion-reduce:transition-none",
                     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]"
                   ),
                   children: chip.label
@@ -16953,17 +16993,16 @@ var MessageComposer = forwardRef(
               className: "flex shrink-0 items-center justify-between gap-2 px-2 pb-1.5 pt-1",
               children: [
                 /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: startSlot }),
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx(
                   Button,
                   {
                     size: "sm",
                     disabled: isSubmitDisabled,
+                    loading: submitting,
+                    iconLeft: /* @__PURE__ */ jsx(SendIcon, { size: 14, "aria-hidden": "true" }),
                     onClick: onSubmit,
                     className: "gap-1.5",
-                    children: [
-                      /* @__PURE__ */ jsx(SendIcon, { size: 14, "aria-hidden": "true" }),
-                      submitting ? submittingLabel : submitLabel
-                    ]
+                    children: submitting ? submittingLabel : submitLabel
                   }
                 )
               ]
@@ -18001,15 +18040,15 @@ function SuggestionPills({
     "div",
     {
       className: cn(
-        "ds-suggestion-bar flex items-center gap-2 overflow-x-auto border-t border-border/60 bg-gradient-to-b from-brand-soft/40 to-transparent px-4 py-2.5 [scrollbar-width:none]",
+        "ds-suggestion-bar flex items-center gap-2 overflow-x-auto border-t border-rule/60 bg-gradient-to-b from-brand-bg/40 to-transparent px-4 py-2.5 motion-reduce:animate-none [scrollbar-width:none]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5 text-[11px] font-medium text-fg-3", children: [
           /* @__PURE__ */ jsx(SparkleIcon, { className: "ds-suggestion-spark size-3.5 text-brand", "aria-hidden": "true" }),
           label
         ] }),
-        loading ? [0, 1].map((i) => /* @__PURE__ */ jsx("span", { className: "h-7 w-32 shrink-0 animate-pulse rounded-full bg-muted" }, i)) : suggestions.map((text, i) => /* @__PURE__ */ jsx(
+        loading ? [0, 1].map((i) => /* @__PURE__ */ jsx("span", { className: "h-7 w-32 shrink-0 animate-pulse rounded-full bg-bg-2 motion-reduce:animate-none" }, i)) : suggestions.map((text, i) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -18017,10 +18056,10 @@ function SuggestionPills({
             title: text,
             style: { animationDelay: `${i * 110}ms` },
             className: cn(
-              "ds-suggestion-pill max-w-[260px] shrink-0 truncate whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[12px] font-medium",
-              "border-brand/30 bg-brand-soft text-brand-soft-foreground shadow-[0_1px_6px_rgba(108,66,248,0.14)]",
-              "transition-all hover:-translate-y-0.5 hover:border-brand/50 hover:bg-brand/10 hover:shadow-[0_3px_10px_rgba(108,66,248,0.22)]",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              "ds-suggestion-pill max-w-[260px] shrink-0 truncate whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[12px] font-medium motion-reduce:animate-none",
+              "border-brand/30 bg-brand-bg text-brand shadow-quiet",
+              "transition-[color,background-color,border-color,box-shadow,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:-translate-y-0.5 hover:border-brand/50 hover:bg-brand-bg-hover hover:shadow-card motion-reduce:transform-none motion-reduce:transition-none",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
             ),
             children: text
           },
@@ -18068,10 +18107,10 @@ function AiDraftCard({
     ] });
   }
   if (state === "error") {
-    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-destructive/20 bg-destructive/5 p-3", className), children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error ?? "Something went wrong." }),
+    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-danger-line bg-danger-bg p-3", className), children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-danger-fg", children: error ?? "Something went wrong." }),
       (onRetry || onDismiss) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-2", children: [
-        onRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, className: "text-destructive", children: "Retry" }),
+        onRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, className: "text-danger-fg", children: "Retry" }),
         onDismiss && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onDismiss, children: "Dismiss" })
       ] })
     ] });
@@ -18080,7 +18119,7 @@ function AiDraftCard({
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", !collapsed && "mb-2"), children: [
       /* @__PURE__ */ jsx(SparkleIcon, { size: 14, className: "text-brand" }),
       /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-brand", children: title }),
-      contextLine && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: contextLine }),
+      contextLine && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-fg-3", children: contextLine }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -18089,14 +18128,23 @@ function AiDraftCard({
           "aria-expanded": !collapsed,
           "aria-label": collapsed ? "Expand AI draft" : "Collapse AI draft",
           title: collapsed ? "Show draft" : "Hide draft",
-          className: "ml-auto -mr-1 shrink-0 rounded p-1 text-brand/70 transition-colors hover:bg-brand/10 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16, className: cn("transition-transform", collapsed && "-rotate-90") })
+          className: "ml-auto -mr-1 shrink-0 rounded p-1 text-brand/70 transition-colors hover:bg-brand-bg hover:text-brand focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none motion-reduce:transition-none",
+          children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16, className: cn("transition-transform motion-reduce:transition-none", collapsed && "-rotate-90") })
         }
       )
     ] }),
     !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-      subject && /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-sm font-semibold text-foreground", children: subject }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-[140px] overflow-y-auto text-sm font-medium leading-relaxed text-foreground", children }),
+      subject && /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-sm font-semibold text-fg", children: subject }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "region",
+          "aria-label": `${title} content`,
+          tabIndex: 0,
+          className: "max-h-[140px] overflow-y-auto text-sm font-medium leading-relaxed text-fg focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+          children
+        }
+      ),
       actions && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: actions })
     ] })
   ] });
@@ -18138,36 +18186,36 @@ function EmailMessageCard({
         !isOutbound && avatar && /* @__PURE__ */ jsx("span", { className: "mt-7 shrink-0", children: avatar }),
         /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1", isOutbound ? "items-end" : "items-start"), children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: senderName }),
-            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-fg", children: senderName }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-fg-3", children: [
               "via ",
               via
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\xB7" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: time })
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-fg-3", children: "\xB7" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-fg-3", children: time })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
-                "w-full max-w-2xl overflow-hidden rounded-xl border bg-card shadow-sm",
-                isOutbound ? "border-brand/30" : "border-border"
+                "w-full max-w-2xl overflow-hidden rounded-xl border bg-surface shadow-sm",
+                isOutbound ? "border-brand/30" : "border-rule"
               ),
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 border-b border-border bg-brand/5 px-3.5 py-2.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 border-b border-rule bg-brand-bg px-3.5 py-2.5", children: [
                   /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-brand/20 bg-brand/10 text-brand", children: /* @__PURE__ */ jsx(MailIcon, { size: 16 }) }),
                   /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded px-1.5 py-px text-[10px] font-bold uppercase tracking-wider text-brand", children: "Email" }),
-                      subjectText && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-semibold text-foreground", children: subjectText })
+                      subjectText && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-semibold text-fg", children: subjectText })
                     ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1.5 text-[10px] text-muted-foreground", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1.5 text-[10px] text-fg-3", children: [
                       /* @__PURE__ */ jsxs("span", { children: [
                         "From ",
-                        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/80", children: senderName })
+                        /* @__PURE__ */ jsx("span", { className: "font-medium text-fg/80", children: senderName })
                       ] }),
                       ccCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-fg-3/60", children: "\xB7" }),
                         /* @__PURE__ */ jsxs("span", { children: [
                           "Cc ",
                           ccCount
@@ -18175,7 +18223,7 @@ function EmailMessageCard({
                       ] })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap pt-0.5 text-[10px] text-muted-foreground", children: time })
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap pt-0.5 text-[10px] text-fg-3", children: time })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                   /* @__PURE__ */ jsx(
@@ -18183,13 +18231,13 @@ function EmailMessageCard({
                     {
                       ref: bodyRef,
                       className: cn(
-                        "px-4 py-3 text-sm leading-relaxed text-foreground",
+                        "px-4 py-3 text-sm leading-relaxed text-fg",
                         clamped && "max-h-56 overflow-hidden"
                       ),
                       children
                     }
                   ),
-                  clamped && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-b from-transparent to-card" })
+                  clamped && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-b from-transparent to-surface" })
                 ] }),
                 needsClamp && /* @__PURE__ */ jsxs(
                   "button",
@@ -18197,14 +18245,14 @@ function EmailMessageCard({
                     type: "button",
                     onClick: () => setExpanded((v) => !v),
                     "aria-expanded": expanded,
-                    className: "flex w-full items-center justify-center gap-1.5 border-t border-border/60 bg-card py-1.5 text-xs font-medium text-brand transition-colors hover:bg-muted/40",
+                    className: "flex w-full items-center justify-center gap-1.5 border-t border-rule/60 bg-surface py-1.5 text-xs font-medium text-brand transition-colors hover:bg-bg-2/40 motion-reduce:transition-none",
                     children: [
                       expanded ? "Show less" : "Show full email",
-                      /* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("transition-transform", expanded && "rotate-180") })
+                      /* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("transition-transform motion-reduce:transition-none", expanded && "rotate-180") })
                     ]
                   }
                 ),
-                hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-border bg-muted/30 px-3 py-2", children: [
+                hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-rule bg-bg-2/30 px-3 py-2", children: [
                   /* @__PURE__ */ jsx("div", { className: "min-w-0", children: attachments }),
                   /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
                     status,
@@ -18232,8 +18280,8 @@ function SignatureEditor({
   className
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-rule px-3 py-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-fg", children: title }),
       onAddImage && /* @__PURE__ */ jsxs(
         Button,
         {
@@ -18251,8 +18299,8 @@ function SignatureEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-3", children: loading ? /* @__PURE__ */ jsx("div", { className: "h-32 animate-pulse rounded-md bg-muted" }) : children }),
-    (onSave || onInsert) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border px-3 py-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "p-3", children: loading ? /* @__PURE__ */ jsx("div", { className: "h-32 animate-pulse rounded-md bg-bg-2 motion-reduce:animate-none" }) : children }),
+    (onSave || onInsert) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-rule px-3 py-2", children: [
       onSave && /* @__PURE__ */ jsx(
         Button,
         {
@@ -18400,7 +18448,7 @@ function DisplayMenu({
             showDot && /* @__PURE__ */ jsx(
               "span",
               {
-                className: "absolute -right-1 -top-1 size-2 rounded-full bg-foreground",
+                className: "absolute -right-1 -top-1 size-2 rounded-full bg-fg",
                 "aria-hidden": "true"
               }
             )
@@ -18424,8 +18472,8 @@ function DisplayMenu({
           }
         },
         children: /* @__PURE__ */ jsxs("div", { ref: panelRef, className: "relative", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 border-b border-border px-2.5 py-1.5", children: [
-            /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 border-b border-rule px-2.5 py-1.5", children: [
+            /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-fg-3", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -18434,7 +18482,7 @@ function DisplayMenu({
                 onChange: (e) => setRootQuery(e.target.value),
                 placeholder: "Filter\u2026",
                 "aria-label": "Filter options and values",
-                className: "h-6 w-full bg-transparent text-[13px] text-foreground outline-none placeholder:text-muted-foreground"
+                className: "h-6 w-full bg-transparent text-[13px] text-fg outline-none placeholder:text-fg-3"
               }
             )
           ] }),
@@ -18460,19 +18508,19 @@ function DisplayMenu({
                         setOpenKey(null);
                       },
                       onClick: () => section2.onSelect(option.key),
-                      className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
+                      className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-bg-2/60 focus-visible:bg-bg-2/60 focus-visible:outline-none motion-reduce:transition-none",
                       children: [
-                        section2.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: section2.icon }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-muted-foreground", children: section2.label }),
+                        section2.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-3", "aria-hidden": "true", children: section2.icon }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-fg-3", children: section2.label }),
                         /* @__PURE__ */ jsx(
                           ChevronRightIcon,
                           {
                             size: 12,
-                            className: "shrink-0 text-muted-foreground",
+                            className: "shrink-0 text-fg-3",
                             "aria-hidden": "true"
                           }
                         ),
-                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-foreground", children: option.label }),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-fg", children: option.label }),
                         isActive && /* @__PURE__ */ jsx(CheckIcon, { size: 14, className: "shrink-0 text-brand" })
                       ]
                     },
@@ -18519,15 +18567,15 @@ function DisplayMenu({
                               }
                             },
                             className: cn(
-                              "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-foreground transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
-                              isOpen && "bg-muted/60"
+                              "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-fg transition-colors hover:bg-bg-2/60 focus-visible:bg-bg-2/60 focus-visible:outline-none motion-reduce:transition-none",
+                              isOpen && "bg-bg-2/60"
                             ),
                             children: [
-                              section.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: section.icon }),
+                              section.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-3", "aria-hidden": "true", children: section.icon }),
                               /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: section.label }),
                               section.mode === "multi" && count > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-brand-bg px-1.5 text-[11px] font-medium text-brand", children: count }),
-                              section.mode !== "multi" && valueLabel && /* @__PURE__ */ jsx("span", { className: "max-w-24 shrink-0 truncate text-[13px] text-muted-foreground", children: valueLabel }),
-                              /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, className: "shrink-0 text-muted-foreground" })
+                              section.mode !== "multi" && valueLabel && /* @__PURE__ */ jsx("span", { className: "max-w-24 shrink-0 truncate text-[13px] text-fg-3", children: valueLabel }),
+                              /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, className: "shrink-0 text-fg-3" })
                             ]
                           }
                         ),
@@ -18540,14 +18588,14 @@ function DisplayMenu({
               })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "border-t border-border p-1", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx("div", { className: "border-t border-rule p-1", children: /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "ghost",
               size: "sm",
               onClick: onReset,
               disabled: isAtDefault,
-              className: "h-7 w-full justify-start gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground",
+              className: "h-7 w-full justify-start gap-1.5 px-2 text-xs text-fg-3 hover:text-fg",
               children: [
                 /* @__PURE__ */ jsx(RotateCcwIcon, { size: 13 }),
                 "Reset to default"
@@ -18566,7 +18614,7 @@ function DisplayMenu({
                 // Column + overflow-hidden so the option list (the only flexible
                 // part) absorbs the height cap, while the search box and Clear
                 // footer stay pinned and fully visible.
-                "absolute z-50 flex flex-col overflow-hidden rounded-lg border border-border bg-popover shadow-md",
+                "absolute z-50 flex flex-col overflow-hidden rounded-lg border border-rule bg-surface shadow-md motion-reduce:transition-none",
                 // -mx-1 lets the flyout tuck against the panel so there's no
                 // dead gap for the cursor to fall through on the way over.
                 flyout.side === "left" ? "right-full -mr-1" : "left-full -ml-1"
@@ -18574,8 +18622,8 @@ function DisplayMenu({
               onMouseEnter: clearTimers,
               onMouseLeave: scheduleClose,
               children: [
-                showFlyoutSearch && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-b border-border px-2.5 py-1.5", children: [
-                  /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+                showFlyoutSearch && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-b border-rule px-2.5 py-1.5", children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-fg-3", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx(
                     "input",
                     {
@@ -18584,7 +18632,7 @@ function DisplayMenu({
                       onChange: (e) => setSectionQuery(e.target.value),
                       placeholder: `Filter ${activeSection.label.toLowerCase()}\u2026`,
                       "aria-label": `Filter ${activeSection.label}`,
-                      className: "h-6 w-full bg-transparent text-[13px] text-foreground outline-none placeholder:text-muted-foreground"
+                      className: "h-6 w-full bg-transparent text-[13px] text-fg outline-none placeholder:text-fg-3"
                     }
                   )
                 ] }),
@@ -18619,8 +18667,8 @@ function DisplayMenu({
                         }
                       },
                       className: cn(
-                        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
-                        isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-bg-2/60 focus-visible:bg-bg-2/60 focus-visible:outline-none motion-reduce:transition-none",
+                        isActive ? "text-fg" : "text-fg-3 hover:text-fg"
                       ),
                       children: [
                         isMulti && /* @__PURE__ */ jsx(
@@ -18629,7 +18677,7 @@ function DisplayMenu({
                             "aria-hidden": "true",
                             className: cn(
                               "flex size-3.5 shrink-0 items-center justify-center rounded border transition-colors",
-                              isActive ? "border-brand bg-brand text-fg-on-brand" : "border-border"
+                              isActive ? "border-brand bg-brand text-fg-on-brand" : "border-rule"
                             ),
                             children: isActive && /* @__PURE__ */ jsx(CheckIcon, { size: 10 })
                           }
@@ -18641,13 +18689,13 @@ function DisplayMenu({
                     option.key
                   );
                 }) }),
-                activeSection.mode === "multi" && activeSection.selected.size > 0 && activeSection.onClear && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-1", children: /* @__PURE__ */ jsxs(
+                activeSection.mode === "multi" && activeSection.selected.size > 0 && activeSection.onClear && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-rule p-1", children: /* @__PURE__ */ jsxs(
                   Button,
                   {
                     variant: "ghost",
                     size: "sm",
                     onClick: activeSection.onClear,
-                    className: "h-6 w-full justify-start px-2 text-[11px] text-muted-foreground hover:text-foreground",
+                    className: "h-6 w-full justify-start px-2 text-[11px] text-fg-3 hover:text-fg",
                     children: [
                       "Clear ",
                       activeSection.selected.size,
@@ -18664,8 +18712,168 @@ function DisplayMenu({
   ] });
 }
 function EmptyRow({ label = "No matches" }) {
-  return /* @__PURE__ */ jsx("p", { className: "px-2 py-3 text-center text-[11px] text-muted-foreground", children: label });
+  return /* @__PURE__ */ jsx("p", { className: "px-2 py-3 text-center text-[11px] text-fg-3", children: label });
+}
+var StickyStackContext = React39.createContext(null);
+function StickyStack({ layers, top = 0, children }) {
+  const [layerHeights, setLayerHeights] = React39.useState({});
+  const normalizedLayers = React39.useMemo(() => {
+    const names = [...layers];
+    if (new Set(names).size !== names.length) {
+      throw new Error("StickyStack layer names must be unique.");
+    }
+    return names;
+  }, [layers]);
+  const setLayerHeight = React39.useCallback((name, height) => {
+    setLayerHeights((current) => {
+      if (current[name] === height) return current;
+      return { ...current, [name]: height };
+    });
+  }, []);
+  const value = React39.useMemo(
+    () => ({ layers: normalizedLayers, layerHeights, setLayerHeight, top }),
+    [layerHeights, normalizedLayers, setLayerHeight, top]
+  );
+  return /* @__PURE__ */ jsx(StickyStackContext, { value, children });
 }
+function useStickyStack(componentName) {
+  const context = React39.use(StickyStackContext);
+  if (!context) {
+    throw new Error(`${componentName} must be rendered inside StickyStack.`);
+  }
+  return context;
+}
+function cssLength(value) {
+  return typeof value === "number" ? `${value}px` : value ?? "0px";
+}
+function stackOffset(context, layerName, includeNamedLayer) {
+  const { layers, layerHeights, top } = context;
+  let endIndex = layers.length;
+  if (layerName !== void 0) {
+    const index = layers.indexOf(layerName);
+    if (index === -1) {
+      throw new Error(`Unknown StickyStack layer "${layerName}".`);
+    }
+    endIndex = includeNamedLayer ? index + 1 : index;
+  }
+  const measuredOffset = layers.slice(0, endIndex).reduce((total, name) => total + (layerHeights[name] ?? 0), 0);
+  const base = cssLength(top);
+  return measuredOffset === 0 ? base : `calc(${base} + ${measuredOffset}px)`;
+}
+var StickyStackLayer = React39.forwardRef(
+  function StickyStackLayer2({ name, hostClassName, className, children, style, ...props }, forwardedRef) {
+    const context = useStickyStack("StickyStackLayer");
+    const { setLayerHeight } = context;
+    const top = stackOffset(context, name, false);
+    const hostRef = React39.useRef(null);
+    const layerRef = React39.useRef(null);
+    const [bounds, setBounds] = React39.useState({
+      height: 0,
+      left: 0,
+      ready: false,
+      width: 0
+    });
+    const setLayerRef = React39.useCallback(
+      (node) => {
+        layerRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    const measure = React39.useCallback(() => {
+      const host = hostRef.current;
+      const layer = layerRef.current;
+      if (!host || !layer) return;
+      const hostRect = host.getBoundingClientRect();
+      const layerRect = layer.getBoundingClientRect();
+      const next = {
+        height: Math.ceil(layerRect.height),
+        left: hostRect.left,
+        ready: hostRect.width > 0,
+        width: hostRect.width
+      };
+      setBounds(
+        (current) => current.height === next.height && current.left === next.left && current.ready === next.ready && current.width === next.width ? current : next
+      );
+      setLayerHeight(name, next.height);
+    }, [name, setLayerHeight]);
+    React39.useLayoutEffect(() => {
+      measure();
+      let frame = 0;
+      const scheduleMeasure = () => {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(measure);
+      };
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleMeasure);
+      if (hostRef.current) observer?.observe(hostRef.current);
+      if (layerRef.current) observer?.observe(layerRef.current);
+      window.addEventListener("resize", scheduleMeasure);
+      window.addEventListener("scroll", scheduleMeasure, true);
+      return () => {
+        cancelAnimationFrame(frame);
+        observer?.disconnect();
+        window.removeEventListener("resize", scheduleMeasure);
+        window.removeEventListener("scroll", scheduleMeasure, true);
+        setLayerHeight(name, 0);
+      };
+    }, [measure, name, setLayerHeight]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: hostRef,
+        className: cn("relative", hostClassName),
+        style: { height: bounds.ready ? bounds.height : void 0 },
+        "data-sticky-stack-host": name,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setLayerRef,
+            className,
+            style: {
+              ...style,
+              position: bounds.ready ? "fixed" : "sticky",
+              top,
+              left: bounds.ready ? bounds.left : void 0,
+              width: bounds.ready ? bounds.width : void 0,
+              boxSizing: "border-box",
+              zIndex: style?.zIndex ?? "var(--z-sticky)"
+            },
+            "data-sticky-stack-layer": name,
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+StickyStackLayer.displayName = "StickyStackLayer";
+var StickyStackSticky = React39.forwardRef(
+  function StickyStackSticky2({ after, className, style, ...props }, ref) {
+    const context = useStickyStack("StickyStackSticky");
+    const top = stackOffset(context, after, true);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("sticky", className),
+        style: {
+          ...style,
+          top,
+          zIndex: style?.zIndex ?? "calc(var(--z-sticky) - 1)"
+        },
+        "data-sticky-stack-sticky": "",
+        ...props
+      }
+    );
+  }
+);
+StickyStackSticky.displayName = "StickyStackSticky";
+var StickyStackSectionHeader = React39.forwardRef(function StickyStackSectionHeader2(props, ref) {
+  return /* @__PURE__ */ jsx(StickyStackSticky, { ref, "data-sticky-stack-section-header": "", ...props });
+});
+StickyStackSectionHeader.displayName = "StickyStackSectionHeader";
 function brandScope(product) {
   return { "data-brand": product };
 }
@@ -18691,6 +18899,6 @@ var BrandScope = forwardRef(function BrandScope2({ product, children, ...props }
 });
 BrandScope.displayName = "BrandScope";
 
-export { AIReceiptPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, AgreementPaneHeading, AgreementViewer, AiDraftCard, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AreaChart, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, AttentionItem, Avatar, BRAND_PRODUCTS, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, BrandScope, BrandScopeProvider, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, Button, COUNTRY_CODES, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryDivider, CategoryTag, ChannelTabs, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientRailGroupHeader, ClientRailItem, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content16 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, Dash, DashGrid, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DatePicker, DateRangePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DocumentChecklist, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentIcon, DocumentList, DocumentListSection, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentRow, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, DollarSignIcon, DonutChart, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, EmptyState, EngagementCard, EngagementTimeline, EngagementTimelineStep, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, FileChip, FileIcon, FileReturnIcon, FileTextIcon, FileTypeBadge, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FolderTree, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, IconTile, InboxIcon, InfoCircleSolidIcon, InfoIcon, Input, IntentBadge, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LandmarkIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MasterDetailLayout, MenuIcon, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MissingDocumentsPanel, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NewMenu, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PauseIcon, PdfPreview, PenSignIcon, PenToolIcon, PencilIcon, PhoneCountryInput, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, PriorityIcon, ProgressBar, ProgressRing, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QuestionnairePanel, Questions, RadioGroup3 as RadioGroup, RadioGroupItem, RankedBars, ReceiptIcon, ReplyIcon, ResponsiveDialog, RotateCcwIcon, RouteTransition, SERVICE_TONES, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, SegmentedProgress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, SpreadsheetPreview, StackedBarChart, StagePill, StarIcon, StarRating, Stat, StatusDot, StatusIcon, StatusPill, Stepper, StickyActionBar, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, SuiteProgress, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Textarea, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, cn, colors, dateToIso, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getFlagEmoji, iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, serviceToneLabel, serviceToneStyle, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, surfaces, systemTokens, textareaVariants, typography, useBrandScope, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
+export { AIReceiptPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, AgreementPaneHeading, AgreementViewer, AiDraftCard, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AreaChart, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, AttentionItem, Avatar, BRAND_PRODUCTS, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, BrandScope, BrandScopeProvider, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, Button, COUNTRY_CODES, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryDivider, CategoryTag, ChannelTabs, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientRailGroupHeader, ClientRailItem, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content16 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, Dash, DashGrid, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DatePicker, DateRangePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DocumentChecklist, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentIcon, DocumentList, DocumentListSection, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentRow, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, DollarSignIcon, DonutChart, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, EmptyState, EngagementCard, EngagementTimeline, EngagementTimelineStep, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, FileChip, FileIcon, FileReturnIcon, FileTextIcon, FileTypeBadge, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FolderTree, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, IconTile, InboxIcon, InfoCircleSolidIcon, InfoIcon, Input, IntentBadge, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LandmarkIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MasterDetailLayout, MenuIcon, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MissingDocumentsPanel, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NewMenu, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PauseIcon, PdfPreview, PenSignIcon, PenToolIcon, PencilIcon, PhoneCountryInput, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, PriorityIcon, ProgressBar, ProgressRing, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QuestionnairePanel, Questions, RadioGroup3 as RadioGroup, RadioGroupItem, RankedBars, ReceiptIcon, ReplyIcon, ResponsiveDialog, RotateCcwIcon, RouteTransition, SERVICE_TONES, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, SegmentedProgress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, SpreadsheetPreview, StackedBarChart, StagePill, StarIcon, StarRating, Stat, StatusDot, StatusIcon, StatusPill, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, SuiteProgress, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Textarea, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, cn, colors, dateToIso, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getFlagEmoji, iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, serviceToneLabel, serviceToneStyle, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, surfaces, systemTokens, textareaVariants, typography, useBrandScope, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map