gridsmith-ui 0.2.19 → 0.3.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import { cn, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, GLASS_SURFACE } from './chunk-5XIPPVH7.js';
-import { Icon } from './chunk-H2XI6OUB.js';
+import { Icon } from './chunk-WVB3SRXW.js';
 import { __commonJS, __toESM } from './chunk-5WRI5ZAA.js';
 import * as React6 from 'react';
 import React6__default, { createContext, forwardRef, useState, useCallback, useRef, useContext, useId, useMemo, useEffect, useLayoutEffect, isValidElement, cloneElement, createElement, Fragment as Fragment$1, useDebugValue, memo, useReducer, useSyncExternalStore as useSyncExternalStore$1, useImperativeHandle } from 'react';
@@ -1545,6 +1545,17 @@ var require_core = __commonJS({
     highlight.default = highlight;
   }
 });
+function mergeRefs(...refs) {
+  const filtered = refs.filter(Boolean);
+  if (filtered.length === 0) return void 0;
+  if (filtered.length === 1) return filtered[0];
+  return (node) => {
+    for (const ref of filtered) {
+      if (typeof ref === "function") ref(node);
+      else if (ref && typeof ref === "object") ref.current = node;
+    }
+  };
+}
 function Slot({ children, ref, ...slotProps }) {
   if (!isValidElement(children)) {
     console.warn("Slot: expected a single React element child.");
@@ -1570,7 +1581,8 @@ function Slot({ children, ref, ...slotProps }) {
     }
   }
   if (ref) {
-    mergedProps.ref = ref;
+    const childRef = children.ref ?? childProps.ref;
+    mergedProps.ref = mergeRefs(ref, childRef);
   }
   return cloneElement(children, mergedProps);
 }
@@ -1719,7 +1731,7 @@ function Spinner({ size = "md", color = "default", label = "Loading", className
   );
 }
 var variantStyles = {
-  default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] border-transparent hover:bg-[var(--ds-accent-primary-hover)] hover:brightness-110",
+  default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] text-[var(--ds-text-on-primary)] border-transparent hover:bg-[var(--ds-accent-primary-hover)] hover:brightness-110",
   secondary: "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
   tertiary: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] border-transparent hover:brightness-95",
   outline: "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
@@ -2081,51 +2093,64 @@ function Label({ className, children, ...props }) {
     }
   );
 }
-function Toggle({ checked, onChange, label, disabled, error = false, "aria-labelledby": ariaLabelledBy, ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", disabled && "opacity-disabled"), children: [
-    label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        role: "switch",
-        "aria-checked": checked,
-        "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-invalid": error || void 0,
-        disabled,
-        onClick: () => !disabled && onChange(!checked),
-        ...rest,
-        className: cn(
-          "relative inline-flex shrink-0 items-center overflow-hidden",
-          "border-[length:var(--ds-border-width)]",
-          "rounded-[var(--ds-radius-full)]",
-          "transition-colors duration-[var(--ds-transition-speed)]",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          disabled ? "cursor-not-allowed" : "cursor-pointer",
-          checked ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-muted)]",
-          error ? "border-[var(--ds-status-error)]" : checked ? "border-transparent" : "border-[var(--ds-border-default)]"
-        ),
-        style: { width: 44, height: 24 },
-        children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "pointer-events-none inline-block shrink-0",
-              "bg-[var(--ds-bg-surface)]",
-              "border-[length:var(--ds-border-width)] border-transparent",
-              "rounded-[var(--ds-radius-full)]",
-              "transition-transform"
-            ),
-            style: {
-              width: 16,
-              height: 16,
-              transform: checked ? "translateX(calc(25px - var(--ds-border-width)))" : "translateX(calc(1px + var(--ds-border-width)))"
-            }
+function Toggle({ checked, onChange, label, disabled, error = false, layout = "full", "aria-labelledby": ariaLabelledBy, ...rest }) {
+  const switchButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-invalid": error || void 0,
+      disabled,
+      onClick: () => !disabled && onChange(!checked),
+      ...rest,
+      className: cn(
+        "relative inline-flex shrink-0 items-center overflow-hidden",
+        "border-[length:var(--ds-border-width)]",
+        "rounded-[var(--ds-radius-full)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        checked ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-muted)]",
+        error ? "border-[var(--ds-status-error)]" : checked ? "border-transparent" : "border-[var(--ds-border-default)]"
+      ),
+      style: { width: 44, height: 24 },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none inline-block shrink-0",
+            "bg-[var(--ds-bg-surface)]",
+            "border-[length:var(--ds-border-width)] border-transparent",
+            "rounded-[var(--ds-radius-full)]",
+            "transition-transform"
+          ),
+          style: {
+            width: 16,
+            height: 16,
+            transform: checked ? "translateX(calc(25px - var(--ds-border-width)))" : "translateX(calc(1px + var(--ds-border-width)))"
           }
-        )
-      }
-    )
-  ] });
+        }
+      )
+    }
+  );
+  if (!label) {
+    return /* @__PURE__ */ jsx("div", { className: cn(disabled && "opacity-disabled"), children: switchButton });
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        layout === "full" ? "flex items-center justify-between gap-ds-4" : "inline-flex items-center gap-ds-3",
+        disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
+        switchButton
+      ]
+    }
+  );
 }
 function Dropdown({
   options,
@@ -2144,6 +2169,7 @@ function Dropdown({
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
+  const [positioned, setPositioned] = useState(false);
   const triggerRef = useRef(null);
   const menuRef = useRef(null);
   const searchRef = useRef(null);
@@ -2169,12 +2195,16 @@ function Dropdown({
     setPos({ top, left, width });
   }, []);
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      setPositioned(false);
+      return;
+    }
     updatePos();
     setSearch("");
     requestAnimationFrame(() => {
       searchRef.current?.focus();
       updatePos();
+      setPositioned(true);
     });
     const onScroll = () => updatePos();
     window.addEventListener("scroll", onScroll, true);
@@ -2230,7 +2260,7 @@ function Dropdown({
           "rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
-          !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
           open && !error && "border-[var(--ds-input-focus-ring)] ring-2 ring-[var(--ds-input-focus-ring)]",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ds-input-focus-ring)] focus-visible:border-[var(--ds-input-focus-ring)]",
           "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
@@ -2255,7 +2285,7 @@ function Dropdown({
             "rounded-[var(--ds-radius-md)] overflow-hidden",
             "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]"
           ),
-          style: { top: pos.top, left: pos.left, minWidth: pos.width, width: "max-content", maxWidth: "calc(100vw - 16px)" },
+          style: { top: pos.top, left: pos.left, minWidth: pos.width, width: "max-content", maxWidth: "calc(100vw - 16px)", visibility: positioned ? "visible" : "hidden" },
           children: [
             searchable && /* @__PURE__ */ jsx("div", { className: "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", style: { padding: "var(--ds-space-2)" }, children: /* @__PURE__ */ jsx(
               "input",
@@ -2569,7 +2599,7 @@ function Checkbox({ checked, onChange, label, disabled = false, indeterminate =
               "border-[2px]",
               "transition-all",
               "peer-focus-visible:shadow-[var(--ds-shadow-focus)]",
-              filled ? "bg-[var(--ds-check-bg)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
+              filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
               disabled && "pointer-events-none"
             ),
             children: /* @__PURE__ */ jsx(
@@ -2683,7 +2713,7 @@ function RadioGroup({ value, onChange, options, orientation = "vertical", classN
                       selected && "border-[var(--ds-check-border)]",
                       "focus-visible:shadow-[var(--ds-shadow-focus)]"
                     ),
-                    children: selected && /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[var(--ds-accent-primary)]" })
+                    children: selected && /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]" })
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-primary)]", children: option.label })
@@ -2781,7 +2811,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
-          !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
           open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
           disabled && "opacity-disabled cursor-not-allowed",
           value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
@@ -2997,14 +3027,17 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
         onClick: () => inputRef.current?.click(),
         "aria-invalid": error || void 0,
         className: cn(
-          "flex flex-col items-center justify-center gap-ds-2 cursor-pointer",
+          "flex flex-col items-center justify-center gap-ds-2 cursor-pointer group",
           "border-2 border-dashed rounded-[var(--ds-radius-md)]",
           "transition-colors",
-          error ? "border-[var(--ds-status-error)]" : dragOver ? "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-primary)]/5" : "border-[var(--ds-border-default)] hover:border-[var(--ds-border-strong)]"
+          error ? "border-[var(--ds-status-error)]" : dragOver ? "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-primary)]/5" : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-primary)]/5"
         ),
         style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)]" }) }),
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
+            "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-primary)]/10"
+          ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-primary)] transition-colors" }) }),
           /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: "Drop files here or click to browse" }),
             /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: [
@@ -3116,7 +3149,7 @@ function SliderRange({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute h-1.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)]",
+              className: "absolute h-1.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]",
               style: {
                 left: `${isRange ? pct(low) : 0}%`,
                 width: `${isRange ? pct(high) - pct(low) : pct(low)}%`
@@ -3134,15 +3167,15 @@ function SliderRange({
               "aria-invalid": error || void 0,
               onPointerDown: handlePointerDown("low"),
               className: cn(
-                "absolute w-ds-4 h-ds-4 rounded-[var(--ds-radius-full)]",
+                "absolute w-ds-4 h-ds-4 -translate-x-1/2 rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface)] border-2",
                 error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-accent-primary)]",
                 "shadow-[var(--ds-shadow-sm)]",
-                "transition-shadow",
+                "transition-[shadow,transform] duration-200 ease-out",
                 "focus-visible:shadow-[var(--ds-shadow-focus)]",
-                !disabled && "cursor-grab active:cursor-grabbing"
+                !disabled && "cursor-grab active:cursor-grabbing hover:scale-125 active:scale-150"
               ),
-              style: { left: `${pct(low)}%`, transform: "translateX(-50%)" }
+              style: { left: `${pct(low)}%` }
             }
           ),
           /* @__PURE__ */ jsx(
@@ -3156,15 +3189,15 @@ function SliderRange({
               "aria-invalid": error || void 0,
               onPointerDown: handlePointerDown("high"),
               className: cn(
-                "absolute w-ds-4 h-ds-4 rounded-[var(--ds-radius-full)]",
+                "absolute w-ds-4 h-ds-4 -translate-x-1/2 rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface)] border-2",
                 error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-accent-primary)]",
                 "shadow-[var(--ds-shadow-sm)]",
-                "transition-shadow",
+                "transition-[shadow,transform] duration-200 ease-out",
                 "focus-visible:shadow-[var(--ds-shadow-focus)]",
-                !disabled && "cursor-grab active:cursor-grabbing"
+                !disabled && "cursor-grab active:cursor-grabbing hover:scale-125 active:scale-150"
               ),
-              style: { left: `${pct(high)}%`, transform: "translateX(-50%)" }
+              style: { left: `${pct(high)}%` }
             }
           )
         ]
@@ -3259,7 +3292,7 @@ function TimePicker({
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
-          !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
           open && "border-[var(--ds-accent-primary)] ring-2 ring-[var(--ds-input-focus-ring)]",
           disabled && "opacity-disabled cursor-not-allowed",
           value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
@@ -3357,6 +3390,7 @@ function NumberInput({
 }) {
   const intervalRef = useRef(void 0);
   const timeoutRef = useRef(void 0);
+  const inputRef = useRef(null);
   const clamp = useCallback(
     (v) => Math.min(max2, Math.max(min2, v)),
     [min2, max2]
@@ -3413,7 +3447,7 @@ function NumberInput({
         "bg-[var(--ds-input-bg)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
         !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-        "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ds-input-focus-ring)] has-[:focus-visible]:border-[var(--ds-input-focus-ring)]",
+        "focus-within:ring-2 focus-within:ring-[var(--ds-input-focus-ring)] focus-within:border-[var(--ds-input-focus-ring)] focus-within:hover:border-[var(--ds-input-focus-ring)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
@@ -3424,7 +3458,11 @@ function NumberInput({
             type: "button",
             tabIndex: -1,
             disabled: disabled || atMin,
-            onMouseDown: () => !disabled && !atMin && startRepeat(decrement),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              inputRef.current?.focus();
+              !disabled && !atMin && startRepeat(decrement);
+            },
             onMouseUp: stopRepeat,
             onMouseLeave: stopRepeat,
             className: cn(
@@ -3446,6 +3484,7 @@ function NumberInput({
           /* @__PURE__ */ jsx(
             "input",
             {
+              ref: inputRef,
               id,
               type: "text",
               inputMode: "decimal",
@@ -3473,7 +3512,11 @@ function NumberInput({
             type: "button",
             tabIndex: -1,
             disabled: disabled || atMax,
-            onMouseDown: () => !disabled && !atMax && startRepeat(increment),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              inputRef.current?.focus();
+              !disabled && !atMax && startRepeat(increment);
+            },
             onMouseUp: stopRepeat,
             onMouseLeave: stopRepeat,
             className: cn(
@@ -22881,7 +22924,7 @@ function createCustomEqual(options = {}) {
   const equals2 = createCustomInternalComparator ? createCustomInternalComparator(comparator) : createInternalEqualityComparator(comparator);
   return createIsEqual({ circular, comparator, createState, equals: equals2, strict });
 }
-var mergeRefs = (...refs) => {
+var mergeRefs2 = (...refs) => {
   return (node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") {
@@ -22997,7 +23040,7 @@ var PureEditorContent = class extends React6__default.Component {
   render() {
     const { editor, innerRef, ...rest } = this.props;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
+      /* @__PURE__ */ jsx("div", { ref: mergeRefs2(innerRef, this.editorContentRef), ...rest }),
       (editor == null ? void 0 : editor.contentComponent) && /* @__PURE__ */ jsx(Portals, { contentComponent: editor.contentComponent })
     ] });
   }
@@ -82438,7 +82481,7 @@ function Table2({
         className
       ),
       children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx("thead", { className: cn(stickyHeader && "sticky top-0 z-10 bg-[var(--ds-bg-surface)]"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
+        /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
           selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
             Checkbox,
             {
@@ -83115,7 +83158,7 @@ function MonthView({
                 {
                   className: cn(
                     "text-xs w-6 h-6 flex items-center justify-center rounded-full",
-                    today ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold" : "text-[var(--ds-text-secondary)]"
+                    today ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] font-bold" : "text-[var(--ds-text-secondary)]"
                   ),
                   children: day.getDate()
                 }
@@ -84089,10 +84132,10 @@ function EmptyState({ icon, title, description, action, variant = "empty", class
   );
 }
 var dotVariant = {
-  default: "bg-[var(--ds-accent-primary)]",
-  success: "bg-[var(--ds-status-success)]",
-  warning: "bg-[var(--ds-status-warning)]",
-  error: "bg-[var(--ds-status-error)]"
+  default: "bg-[var(--ds-accent-primary)] shadow-[0_0_0_3px_var(--ds-accent-primary)]/20",
+  success: "bg-[var(--ds-status-success)] shadow-[0_0_0_3px_var(--ds-status-success)]/20",
+  warning: "bg-[var(--ds-status-warning)] shadow-[0_0_0_3px_var(--ds-status-warning)]/20",
+  error: "bg-[var(--ds-status-error)] shadow-[0_0_0_3px_var(--ds-status-error)]/20"
 };
 function Timeline({ items, orientation = "vertical", className, ref }) {
   if (orientation === "horizontal") {
@@ -84474,7 +84517,7 @@ function TreeNodeRow({
         className: cn(
           "flex items-center gap-ds-2 py-ds-1.5 px-ds-2 rounded-[var(--ds-radius-md)] cursor-pointer transition-colors",
           "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          isSelected ? "bg-[var(--ds-sidebar-item-active)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+          isSelected ? "bg-[var(--ds-tab-active-bg)] text-[var(--ds-accent-primary)] font-medium border-l-2 border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)] hover:text-[var(--ds-text-primary)]",
           node.disabled && "opacity-disabled pointer-events-none"
         ),
         style: { paddingLeft: `calc(var(--ds-space-5) * ${depth} + var(--ds-space-2))` },
@@ -84668,7 +84711,7 @@ function Carousel({
               disabled: !canPrev,
               "aria-label": "Previous slide",
               className: cn(
-                "absolute left-2 top-1/2 -translate-y-1/2 z-10",
+                "absolute left-4 top-1/2 -translate-y-1/2 z-10",
                 "flex items-center justify-center w-8 h-8",
                 "rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -84687,7 +84730,7 @@ function Carousel({
               disabled: !canNext,
               "aria-label": "Next slide",
               className: cn(
-                "absolute right-2 top-1/2 -translate-y-1/2 z-10",
+                "absolute right-4 top-1/2 -translate-y-1/2 z-10",
                 "flex items-center justify-center w-8 h-8",
                 "rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -87638,7 +87681,7 @@ function DataGrid({
           "bg-[var(--ds-bg-surface)]"
         ),
         children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-          /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: hg.headers.map((header) => {
+          /* @__PURE__ */ jsx("thead", { className: "bg-[var(--ds-bg-muted)]", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: hg.headers.map((header) => {
             const canSort = header.column.getCanSort();
             const sorted = header.column.getIsSorted();
             return /* @__PURE__ */ jsx(
@@ -93784,7 +93827,7 @@ function Pagination({ currentPage, totalPages, onPageChange, pageSize, pageSizeO
               "rounded-[var(--ds-radius-md)]",
               "border-[length:var(--ds-border-width)]",
               "transition-colors duration-[var(--ds-transition-speed)]",
-              p === currentPage ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] border-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+              p === currentPage ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] border-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
             ),
             children: p
           },
@@ -93918,7 +93961,7 @@ function StepCircle({ status, index, onClick, clickable }) {
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         clickable && "cursor-pointer",
         !clickable && "cursor-default",
-        status === "complete" && "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
+        status === "complete" && "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]",
         status === "current" && "border-2 border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)]",
         status === "error" && "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
         status === "loading" && "border-2 border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)] animate-pulse",
@@ -94768,7 +94811,6 @@ function PageHeader({
   onBack,
   actions,
   avatar,
-  stats,
   filters,
   bannerImage,
   as: Heading2 = "h1",
@@ -94850,7 +94892,6 @@ function PageHeader({
             ] }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
           ] }),
-          stats && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-6 mt-ds-3", children: stats }),
           filters && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-3 mt-ds-4", children: filters })
         ] })
       ]
@@ -96879,7 +96920,7 @@ var positionClasses = {
   "top-center": "top-ds-4 left-1/2 -translate-x-1/2",
   "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
 };
-function Toast({ variant = "default", message, visible, onDismiss, duration = 3e3, pauseOnHover = false, action, position = "bottom-right", container }) {
+function Toast({ variant = "default", message, visible, onDismiss, duration = 3e3, pauseOnHover = false, action, position = "bottom-right", mode, container }) {
   const isMobile = useBreakpoint("sm");
   const isCentered = position === "top-center" || position === "bottom-center";
   const timerRef = useRef(void 0);
@@ -96921,6 +96962,7 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 3e
       {
         role: "status",
         "aria-live": "polite",
+        "data-mode": mode,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave2,
         className: cn(