@maxsteinwender/sort-ui 1.2.0 → 1.4.1

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React78 = require('react');
+var React80 = require('react');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -52,7 +52,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React78__namespace = /*#__PURE__*/_interopNamespace(React78);
+var React80__namespace = /*#__PURE__*/_interopNamespace(React80);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
@@ -161,7 +161,7 @@ var accordionItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var AccordionItem = React78__namespace.forwardRef((_a, ref) => {
+var AccordionItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Item,
@@ -172,7 +172,7 @@ var AccordionItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React78__namespace.forwardRef((_a, ref) => {
+var AccordionTrigger = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
     AccordionPrimitive__namespace.Trigger,
@@ -194,7 +194,7 @@ var AccordionTrigger = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
-var AccordionContent = React78__namespace.forwardRef((_a, ref) => {
+var AccordionContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Content,
@@ -239,7 +239,7 @@ var alertVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Alert = React78__namespace.forwardRef((_a, ref) => {
+var Alert = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -251,7 +251,7 @@ var Alert = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 Alert.displayName = "Alert";
-var AlertTitle = React78__namespace.forwardRef((_a, ref) => {
+var AlertTitle = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "h5",
@@ -262,7 +262,7 @@ var AlertTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React78__namespace.forwardRef((_a, ref) => {
+var AlertDescription = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -274,8 +274,8 @@ var AlertDescription = React78__namespace.forwardRef((_a, ref) => {
 });
 AlertDescription.displayName = "AlertDescription";
 function useDevWarnIconOnlyAriaLabel(isIconOnly, ariaLabel, ariaLabelledBy, componentName) {
-  const warnedRef = React78__namespace.useRef(false);
-  React78__namespace.useEffect(() => {
+  const warnedRef = React80__namespace.useRef(false);
+  React80__namespace.useEffect(() => {
     if (process.env.NODE_ENV === "production") return;
     if (warnedRef.current) return;
     if (!isIconOnly) return;
@@ -293,8 +293,9 @@ var buttonVariants = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        // Primary — Sort UI: bg/state/primary, text/white-default, icon/white-default
-        default: "bg-sui-bg-state-primary text-sui-text-white-default [text-shadow:var(--shadow-text)] [&_i]:text-icon-white-default [&_i]:[text-shadow:none] [&_svg]:text-icon-white-default [&_svg]:[text-shadow:none] shadow-button-default active:shadow-button-press [@media(hover:hover)]:hover:bg-sui-bg-state-primary-hover active:bg-sui-bg-state-primary-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
+        // Primary — Sort UI: bg/state/primary, text/on-primary, icon/on-primary
+        // (on-primary is theme-aware: white everywhere except Neutral Violet Dark, where the button inverts to near-white and needs dark text)
+        default: "bg-sui-bg-state-primary text-sui-text-on-primary [text-shadow:var(--shadow-text)] [&_i]:text-icon-on-primary [&_i]:[text-shadow:none] [&_svg]:text-icon-on-primary [&_svg]:[text-shadow:none] shadow-button-default active:shadow-button-press [@media(hover:hover)]:hover:bg-sui-bg-state-primary-hover active:bg-sui-bg-state-primary-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
         // Soft — Sort UI: bg/state/soft, text/subtle, icon/default-muted
         secondary: "bg-sui-bg-state-soft text-sui-text-subtle [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted [@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press disabled:bg-sui-bg-state-disabled",
         // Secondary — Sort UI: bg/state/secondary, border/darker, text/default, icon/default-muted
@@ -349,6 +350,10 @@ var buttonBadgeVariants = classVarianceAuthority.cva(
     variants: {
       color: {
         inverse: "bg-[rgba(255,255,255,0.1)] border-[rgba(255,255,255,0.2)] text-sui-text-white-default group-disabled:bg-transparent group-disabled:border-transparent group-disabled:text-sui-text-hint",
+        // Same visual treatment as `inverse`, but theme-aware — used on the Primary
+        // (default) button only, since that's the one that inverts in Neutral Violet Dark.
+        // Destructive keeps `inverse` because its red background never inverts.
+        "on-primary": "bg-[var(--overlay-on-primary)] border-[var(--overlay-on-primary-border)] text-sui-text-on-primary group-disabled:bg-transparent group-disabled:border-transparent group-disabled:text-sui-text-hint",
         neutral: "bg-transparent border-sui-border-default text-sui-text-muted group-disabled:text-sui-text-hint"
       },
       badgeSize: {
@@ -363,7 +368,7 @@ var buttonBadgeVariants = classVarianceAuthority.cva(
   }
 );
 var badgeColorMap = {
-  default: "inverse",
+  default: "on-primary",
   destructive: "inverse",
   secondary: "neutral",
   outline: "neutral",
@@ -389,7 +394,7 @@ var loadingBgMap = {
   "ghost-muted": "bg-sui-bg-state-ghost-loading"
 };
 var loadingSpinnerColorMap = {
-  default: "text-icon-white-default",
+  default: "text-icon-on-primary",
   destructive: "text-icon-white-default",
   outline: "text-icon-default-muted",
   secondary: "text-icon-default-muted",
@@ -397,7 +402,7 @@ var loadingSpinnerColorMap = {
   "ghost-muted": "text-icon-default-muted"
 };
 var loadingTextColorMap = {
-  default: "text-sui-text-white-default",
+  default: "text-sui-text-on-primary",
   destructive: "text-sui-text-white-default",
   outline: "text-sui-text-muted",
   secondary: "text-sui-text-muted",
@@ -405,7 +410,7 @@ var loadingTextColorMap = {
   "ghost-muted": "text-sui-text-muted"
 };
 var loadingShadowVariants = /* @__PURE__ */ new Set(["default", "outline", "destructive"]);
-var Button = React78__namespace.forwardRef(
+var Button = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size, shape, iconOnly, loading, leadIcon: _leadIcon, tailIcon: _tailIcon, badgeLeft: _badgeLeft, badgeRight: _badgeRight, asChild = false, children, showSeparator: _showSeparator } = _b, props = __objRest(_b, ["className", "variant", "size", "shape", "iconOnly", "loading", "leadIcon", "tailIcon", "badgeLeft", "badgeRight", "asChild", "children", "showSeparator"]);
     const Comp = asChild ? reactSlot.Slot : "button";
@@ -476,7 +481,7 @@ Button.displayName = "Button";
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogOverlay = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Overlay,
@@ -491,7 +496,7 @@ var AlertDialogOverlay = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
@@ -542,7 +547,7 @@ var AlertDialogFooter = (_a) => {
   );
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogTitle = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Title,
@@ -553,7 +558,7 @@ var AlertDialogTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogDescription = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Description,
@@ -564,7 +569,7 @@ var AlertDialogDescription = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogAction = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Action,
@@ -575,7 +580,7 @@ var AlertDialogAction = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogCancel = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Cancel,
@@ -590,6 +595,228 @@ var AlertDialogCancel = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
+var attachmentVariants = classVarianceAuthority.cva(
+  "relative flex overflow-hidden border rounded-lg bg-sui-bg-card shadow-card",
+  {
+    variants: {
+      size: {
+        default: "gap-3 p-3",
+        sm: "gap-2 p-2.5",
+        xs: "gap-1.5 p-2"
+      },
+      orientation: {
+        horizontal: "flex-row items-center",
+        vertical: "flex-col"
+      },
+      state: {
+        idle: "border-sui-border-default",
+        uploading: "border-sui-border-default",
+        processing: "border-sui-border-default",
+        error: "border-sui-border-destructive",
+        done: "border-sui-border-default"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      orientation: "horizontal",
+      state: "done"
+    }
+  }
+);
+var AttachmentContext = React80__namespace.createContext({
+  size: "default",
+  state: "done"
+});
+var Attachment = React80__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      size = "default",
+      orientation = "horizontal",
+      state = "done"
+    } = _b, props = __objRest(_b, [
+      "className",
+      "size",
+      "orientation",
+      "state"
+    ]);
+    const resolvedSize = size != null ? size : "default";
+    const resolvedState = state != null ? state : "done";
+    return /* @__PURE__ */ jsxRuntime.jsx(AttachmentContext.Provider, { value: { size: resolvedSize, state: resolvedState }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadValues({
+        ref,
+        className: cn(attachmentVariants({ size, orientation, state }), className)
+      }, props)
+    ) });
+  }
+);
+Attachment.displayName = "Attachment";
+var mediaContainerSize = {
+  default: "size-10",
+  sm: "size-8",
+  xs: "size-6"
+};
+var mediaIconSize = {
+  default: "[&_i]:text-xl [&_svg]:size-5",
+  sm: "[&_i]:text-lg [&_svg]:size-4",
+  xs: "[&_i]:text-sm [&_svg]:size-3.5"
+};
+var AttachmentMedia = React80__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant = "icon", children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
+    const { size } = React80__namespace.useContext(AttachmentContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "relative flex shrink-0 items-center justify-center overflow-hidden rounded-sm",
+          mediaContainerSize[size],
+          variant === "icon" && [
+            "bg-sui-bg-subtle border-[0.5px] border-sui-border-darker",
+            "[&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted",
+            mediaIconSize[size]
+          ],
+          variant === "image" && "[&_img]:size-full [&_img]:object-cover",
+          className
+        )
+      }, props), {
+        children
+      })
+    );
+  }
+);
+AttachmentMedia.displayName = "AttachmentMedia";
+var AttachmentContent = React80__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("relative flex flex-1 flex-col gap-0.5 justify-center min-w-0", className)
+    }, props)
+  );
+});
+AttachmentContent.displayName = "AttachmentContent";
+var titleTextSize = {
+  default: "text-sm",
+  sm: "text-sm",
+  xs: "text-xs"
+};
+var AttachmentTitle = React80__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { size, state } = React80__namespace.useContext(AttachmentContext);
+  const isShimmering = state === "uploading" || state === "processing";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    __spreadValues({
+      ref,
+      className: cn(
+        "font-medium leading-5 text-sui-text-default truncate",
+        titleTextSize[size],
+        isShimmering && "animate-pulse",
+        className
+      )
+    }, props)
+  );
+});
+AttachmentTitle.displayName = "AttachmentTitle";
+var stateIcon = {
+  uploading: "ri-loader-4-line animate-spin text-icon-informative",
+  processing: "ri-loader-4-line animate-spin text-icon-informative",
+  error: "ri-error-warning-line text-icon-destructive",
+  done: "ri-check-line text-icon-success"
+};
+var AttachmentDescription = React80__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  const { state } = React80__namespace.useContext(AttachmentContext);
+  const icon = stateIcon[state];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex items-center gap-1 text-xs leading-4 whitespace-nowrap",
+        state === "error" ? "text-sui-text-destructive" : "text-sui-text-muted",
+        className
+      )
+    }, props), {
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("i", { className: cn(icon, "leading-none"), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children })
+      ]
+    })
+  );
+});
+AttachmentDescription.displayName = "AttachmentDescription";
+var AttachmentActions = React80__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("relative flex items-center gap-1 shrink-0", className)
+    }, props)
+  );
+});
+AttachmentActions.displayName = "AttachmentActions";
+var AttachmentAction = React80__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, size = "2xs", onClick } = _b, props = __objRest(_b, ["className", "size", "onClick"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      __spreadValues({
+        ref,
+        type: "button",
+        variant: "ghost",
+        size,
+        iconOnly: true,
+        onClick: (event) => {
+          event.stopPropagation();
+          onClick == null ? void 0 : onClick(event);
+        },
+        className
+      }, props)
+    );
+  }
+);
+AttachmentAction.displayName = "AttachmentAction";
+var AttachmentTrigger = React80__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      __spreadValues({
+        ref,
+        type: asChild ? void 0 : "button",
+        className: cn(
+          "absolute inset-0 z-0 rounded-[inherit]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default",
+          className
+        )
+      }, props)
+    );
+  }
+);
+AttachmentTrigger.displayName = "AttachmentTrigger";
+var AttachmentGroup = React80__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn(
+        "flex gap-2 overflow-x-auto snap-x snap-mandatory",
+        "scroll-fade-x [--scroll-fade-size:16px]",
+        "[&>*]:snap-start",
+        className
+      )
+    }, props)
+  );
+});
+AttachmentGroup.displayName = "AttachmentGroup";
 var containerSize = {
   "2xs": "size-sui-8",
   "xs": "size-sui-10",
@@ -614,11 +841,11 @@ var awayIconSize = {
   "lg": "14px",
   "default": "16px"
 };
-var StatusBadge = React78__namespace.forwardRef(
+var StatusBadge = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant, size = "default", src, className } = _b, props = __objRest(_b, ["variant", "size", "src", "className"]);
-    const [imgError, setImgError] = React78__namespace.useState(false);
-    React78__namespace.useEffect(() => {
+    const [imgError, setImgError] = React80__namespace.useState(false);
+    React80__namespace.useEffect(() => {
       setImgError(false);
     }, [src]);
     const sizeClass = containerSize[size];
@@ -831,12 +1058,12 @@ function extractInitials(value) {
   }
   return trimmed.slice(0, 2).toUpperCase();
 }
-var AvatarContext = React78__namespace.createContext({
+var AvatarContext = React80__namespace.createContext({
   size: "md",
   shape: "circular",
   color: "gray"
 });
-var Avatar = React78__namespace.forwardRef((_a, ref) => {
+var Avatar = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, {
     className,
     size = "md",
@@ -990,7 +1217,7 @@ var Avatar = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 Avatar.displayName = "Avatar";
-var AvatarImage = React78__namespace.forwardRef((_a, ref) => {
+var AvatarImage = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Image,
@@ -1001,10 +1228,10 @@ var AvatarImage = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React78__namespace.forwardRef((_a, ref) => {
+var AvatarFallback = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, fallback, children } = _b, props = __objRest(_b, ["className", "fallback", "children"]);
   var _a2, _b2, _c;
-  const { size, shape, color } = React78__namespace.useContext(AvatarContext);
+  const { size, shape, color } = React80__namespace.useContext(AvatarContext);
   const shapeClass = shape === "rounded" ? "rounded-sm" : "rounded-full";
   const fontClass = (_a2 = initialsFontSize[size]) != null ? _a2 : "text-sm";
   const iconClass = (_b2 = iconSize[size]) != null ? _b2 : "text-lg";
@@ -1054,7 +1281,7 @@ var avatarButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var AvatarButton = React78__namespace.forwardRef(
+var AvatarButton = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1148,7 +1375,7 @@ var paddingBySize = {
   "2xl": "pr-sui-10",
   "3xl": "pr-sui-12"
 };
-var AvatarGroup = React78__namespace.forwardRef(
+var AvatarGroup = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size = "md", stacking = "last-on-top", items } = _b, props = __objRest(_b, ["className", "size", "stacking", "items"]);
     const isFirstOnTop = stacking === "first-on-top";
@@ -1190,7 +1417,7 @@ var AvatarGroup = React78__namespace.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AvatarUpload = React78__namespace.forwardRef(
+var AvatarUpload = React80__namespace.forwardRef(
   ({
     src,
     alt = "",
@@ -1283,7 +1510,7 @@ var controlButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var ControlButton = React78__namespace.forwardRef(
+var ControlButton = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1454,12 +1681,12 @@ function Badge(_a) {
     })
   );
 }
-var Breadcrumb = React78__namespace.forwardRef((_a, ref) => {
+var Breadcrumb = React80__namespace.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsxRuntime.jsx("nav", __spreadValues({ ref, "aria-label": "breadcrumb" }, props));
 });
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React78__namespace.forwardRef((_a, ref) => {
+var BreadcrumbList = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ol",
@@ -1473,7 +1700,7 @@ var BreadcrumbList = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React78__namespace.forwardRef((_a, ref) => {
+var BreadcrumbItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
@@ -1484,7 +1711,7 @@ var BreadcrumbItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React78__namespace.forwardRef((_a, ref) => {
+var BreadcrumbLink = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { asChild, className } = _b, props = __objRest(_b, ["asChild", "className"]);
   const Comp = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1500,7 +1727,7 @@ var BreadcrumbLink = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React78__namespace.forwardRef((_a, ref) => {
+var BreadcrumbPage = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -1572,7 +1799,7 @@ function BreadcrumbDivider({ variant }) {
     variant === "dot" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1 rounded-full bg-sui-text-muted" })
   ] });
 }
-var SortBreadcrumb = React78__namespace.forwardRef(
+var SortBreadcrumb = React80__namespace.forwardRef(
   ({ items, variant = "slash", className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx(
       "ol",
@@ -1583,7 +1810,7 @@ var SortBreadcrumb = React78__namespace.forwardRef(
         ),
         children: items.map((item, index) => {
           const isLast = index === items.length - 1;
-          return /* @__PURE__ */ jsxRuntime.jsxs(React78__namespace.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React80__namespace.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
               SortBreadcrumbItem,
               __spreadProps(__spreadValues({}, item), {
@@ -1675,7 +1902,7 @@ var verticalChildRadius = {
   xs: "[&>button:first-child]:rounded-t-md [&>button:last-of-type]:rounded-b-md",
   "2xs": "[&>button:first-child]:rounded-t-sm [&>button:last-of-type]:rounded-b-sm"
 };
-var ButtonGroup = React78__namespace.forwardRef(
+var ButtonGroup = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "lg", orientation = "horizontal", className, children } = _b, props = __objRest(_b, ["size", "orientation", "className", "children"]);
     const isVertical = orientation === "vertical";
@@ -1694,9 +1921,9 @@ var ButtonGroup = React78__namespace.forwardRef(
           className
         )
       }, props), {
-        children: React78__namespace.Children.map(children, (child, index) => {
-          if (React78__namespace.isValidElement(child)) {
-            return React78__namespace.cloneElement(
+        children: React80__namespace.Children.map(children, (child, index) => {
+          if (React80__namespace.isValidElement(child)) {
+            return React80__namespace.cloneElement(
               child,
               {
                 showSeparator: index > 0,
@@ -1766,7 +1993,7 @@ var badgeClasses = {
   xs: "text-xs font-medium leading-4 py-sui-2",
   "2xs": "text-xs font-medium leading-4 py-0"
 };
-var ButtonGroupItem = React78__namespace.forwardRef(
+var ButtonGroupItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -1854,7 +2081,7 @@ var filterButtonVariants = classVarianceAuthority.cva(
 );
 var getVisualStateClasses = (selected) => selected ? "bg-sui-bg-state-secondary border border-solid border-sui-border-darker text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted shadow-default" : "bg-sui-bg-state-secondary border border-dashed border-sui-border-darker text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted";
 var SUB_BUTTON_FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-1 rounded-sm";
-var FilterButton = React78__namespace.forwardRef(
+var FilterButton = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2044,7 +2271,7 @@ var underlineOffsetMap = {
   md: "after:bottom-0",
   lg: "after:bottom-0"
 };
-var LinkButton = React78__namespace.forwardRef(
+var LinkButton = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size, asChild = false, leadIcon, tailIcon, disabled, children } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild", "leadIcon", "tailIcon", "disabled", "children"]);
     const Comp = asChild ? reactSlot.Slot : "button";
@@ -2058,6 +2285,19 @@ var LinkButton = React78__namespace.forwardRef(
     );
     const iconColor = disabled ? "text-icon-default-disabled" : variant === "informative" ? "text-icon-informative" : "text-icon-default-muted";
     const underlineColor = disabled ? "var(--border-darker)" : variant === "informative" ? "var(--border-informative)" : "var(--border-darker)";
+    const underlineClassName = cn(
+      "relative",
+      "after:content-[''] after:absolute after:inset-x-0 after:h-px",
+      "after:bg-[repeating-linear-gradient(90deg,var(--link-ul)_0_2px,transparent_2px_4px)]",
+      underlineOffsetMap[resolvedSize]
+    );
+    const underlineStyle = { "--link-ul": underlineColor };
+    const asChildTarget = asChild && React80__namespace.isValidElement(children) ? children : null;
+    const content = asChildTarget ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children: React80__namespace.cloneElement(
+      asChildTarget,
+      void 0,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: underlineClassName, style: underlineStyle, children: asChildTarget.props.children })
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: underlineClassName, style: underlineStyle, children });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       __spreadProps(__spreadValues({
@@ -2077,19 +2317,7 @@ var LinkButton = React78__namespace.forwardRef(
       }, props), {
         children: [
           leadIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn("shrink-0 text-md leading-none [&_svg]:size-4", iconColor), children: leadIcon }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "relative",
-                "after:content-[''] after:absolute after:inset-x-0 after:h-px",
-                "after:bg-[repeating-linear-gradient(90deg,var(--link-ul)_0_2px,transparent_2px_4px)]",
-                underlineOffsetMap[resolvedSize]
-              ),
-              style: { "--link-ul": underlineColor },
-              children
-            }
-          ),
+          content,
           tailIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn("shrink-0 text-md leading-none [&_svg]:size-4", iconColor), children: tailIcon })
         ]
       })
@@ -2127,7 +2355,7 @@ var brandMap = {
   dropbox: { icon: "ri-dropbox-fill", label: "Dropbox", bg: "var(--social-brand-dropbox)" },
   github: { icon: "ri-github-fill", label: "Github" }
 };
-var SocialButton = React78__namespace.forwardRef(
+var SocialButton = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, shape, brand, iconOnly, asChild = false, children } = _b, props = __objRest(_b, ["className", "variant", "shape", "brand", "iconOnly", "asChild", "children"]);
     const Comp = asChild ? reactSlot.Slot : "button";
@@ -2332,8 +2560,8 @@ function CalendarDayButton(_a) {
     "modifiers"
   ]);
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const ref = React78__namespace.useRef(null);
-  React78__namespace.useEffect(() => {
+  const ref = React80__namespace.useRef(null);
+  React80__namespace.useEffect(() => {
     var _a2;
     if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [modifiers.focused]);
@@ -2405,7 +2633,7 @@ var cardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Card = React78__namespace.forwardRef(
+var Card = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, interactive, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "interactive", "asChild"]);
     const Comp = asChild ? reactSlot.Slot : "div";
@@ -2428,7 +2656,7 @@ var Card = React78__namespace.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React78__namespace.forwardRef((_a, ref) => {
+var CardHeader = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2439,7 +2667,7 @@ var CardHeader = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React78__namespace.forwardRef((_a, ref) => {
+var CardTitle = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2453,7 +2681,7 @@ var CardTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CardTitle.displayName = "CardTitle";
-var CardDescription = React78__namespace.forwardRef((_a, ref) => {
+var CardDescription = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2464,12 +2692,12 @@ var CardDescription = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CardDescription.displayName = "CardDescription";
-var CardContent = React78__namespace.forwardRef((_a, ref) => {
+var CardContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React78__namespace.forwardRef((_a, ref) => {
+var CardFooter = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2480,7 +2708,7 @@ var CardFooter = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CardFooter.displayName = "CardFooter";
-var CardCover = React78__namespace.forwardRef(
+var CardCover = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, flush = false, aspectRatio = "3/2", style, children } = _b, props = __objRest(_b, ["className", "flush", "aspectRatio", "style", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2501,17 +2729,17 @@ var CardCover = React78__namespace.forwardRef(
 );
 CardCover.displayName = "CardCover";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React78__namespace.createContext(null);
+var ChartContext = React80__namespace.createContext(null);
 function useChart() {
-  const context = React78__namespace.useContext(ChartContext);
+  const context = React80__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React78__namespace.forwardRef((_a, ref) => {
+var ChartContainer = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { id, className, children, config } = _b, props = __objRest(_b, ["id", "className", "children", "config"]);
-  const uniqueId = React78__namespace.useId();
+  const uniqueId = React80__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2558,7 +2786,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive__namespace.Tooltip;
-var ChartTooltipContent = React78__namespace.forwardRef(
+var ChartTooltipContent = React80__namespace.forwardRef(
   ({
     active,
     payload,
@@ -2575,7 +2803,7 @@ var ChartTooltipContent = React78__namespace.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React78__namespace.useMemo(() => {
+    const tooltipLabel = React80__namespace.useMemo(() => {
       var _a;
       if (hideLabel || !(payload == null ? void 0 : payload.length)) {
         return null;
@@ -2672,7 +2900,7 @@ var ChartTooltipContent = React78__namespace.forwardRef(
 );
 ChartTooltipContent.displayName = "ChartTooltip";
 var ChartLegend = RechartsPrimitive__namespace.Legend;
-var ChartLegendContent = React78__namespace.forwardRef(
+var ChartLegendContent = React80__namespace.forwardRef(
   ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!(payload == null ? void 0 : payload.length)) {
@@ -2791,7 +3019,7 @@ var checkboxVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Checkbox = React78__namespace.forwardRef((_a, ref) => {
+var Checkbox = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant, checked, indeterminate } = _b, props = __objRest(_b, ["className", "variant", "checked", "indeterminate"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     CheckboxPrimitive__namespace.Root,
@@ -2913,7 +3141,7 @@ var checkboxCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CheckboxCard = React78__namespace.forwardRef(
+var CheckboxCard = React80__namespace.forwardRef(
   ({
     title,
     description,
@@ -2927,7 +3155,7 @@ var CheckboxCard = React78__namespace.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const checkboxId = `checkbox-card-${generatedId}`;
     const titleId = `checkbox-card-title-${generatedId}`;
     const descriptionId = `checkbox-card-desc-${generatedId}`;
@@ -2949,7 +3177,7 @@ var CheckboxCard = React78__namespace.forwardRef(
       selected || isDefault ? "bg-sui-bg-card" : "bg-sui-bg-state-soft",
       // Border — always 1px border, use inset ring for selected highlight (no layout shift)
       "border",
-      selected ? "border-primary ring-1 ring-inset ring-primary" : disabled ? isDefault ? "border-sui-border-default" : "border-transparent" : isDefault ? "border-sui-border-darker" : "border-transparent",
+      selected ? "border-informative ring-1 ring-inset ring-informative" : disabled ? isDefault ? "border-sui-border-default" : "border-transparent" : isDefault ? "border-sui-border-darker" : "border-transparent",
       // Shadow (only for default or selected)
       selected || isDefault ? disabled ? "" : "shadow-card-base" : "",
       // Disabled
@@ -3023,10 +3251,10 @@ var CheckboxCard = React78__namespace.forwardRef(
   }
 );
 CheckboxCard.displayName = "CheckboxCard";
-var CheckboxList = React78__namespace.forwardRef(
+var CheckboxList = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React78__namespace.Children.toArray(children);
+    const items = React80__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -3068,7 +3296,7 @@ var checkboxWithTextVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CheckboxWithText = React78__namespace.forwardRef(
+var CheckboxWithText = React80__namespace.forwardRef(
   ({
     label,
     description,
@@ -3081,7 +3309,7 @@ var CheckboxWithText = React78__namespace.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const checkboxId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -3165,10 +3393,10 @@ var unselectedStyles = {
   ].join(" ")
 };
 var selectedStyles = {
-  // default, soft, ghost → blue selected
-  default: "bg-sui-bg-badge-blue border-sui-border-blue text-sui-bg-basic-blue-strong [&_i]:text-sui-bg-basic-blue-strong",
-  soft: "bg-sui-bg-badge-blue text-sui-bg-basic-blue-strong [&_i]:text-sui-bg-basic-blue-strong",
-  ghost: "bg-sui-bg-badge-blue text-sui-bg-basic-blue-strong [&_i]:text-sui-bg-basic-blue-strong",
+  // default, soft, ghost → informative accent selected (shifts blue → orange in Neutral Violet; bg-badge-blue has no theme-adaptive equivalent yet)
+  default: "bg-sui-bg-badge-blue border-sui-border-blue text-sui-text-informative [&_i]:text-sui-text-informative",
+  soft: "bg-sui-bg-badge-blue text-sui-text-informative [&_i]:text-sui-text-informative",
+  ghost: "bg-sui-bg-badge-blue text-sui-text-informative [&_i]:text-sui-text-informative",
   // ghost-muted → soft bg + subtle text
   "ghost-muted": "bg-sui-bg-state-soft text-sui-text-subtle [&_i]:text-icon-default-subtle"
 };
@@ -3229,7 +3457,7 @@ var labelClasses2 = {
   md: "text-sm font-medium leading-5",
   sm: "text-xs font-medium leading-4"
 };
-var Chip = React78__namespace.forwardRef(
+var Chip = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -3258,7 +3486,7 @@ var Chip = React78__namespace.forwardRef(
       "className",
       "onClick"
     ]);
-    const [internalSelected, setInternalSelected] = React78__namespace.useState(false);
+    const [internalSelected, setInternalSelected] = React80__namespace.useState(false);
     const isControlled = controlledSelected !== void 0;
     const selected = isControlled ? controlledSelected : internalSelected;
     const handleClick = (e) => {
@@ -3356,7 +3584,7 @@ var badgeStyles = [
   "bg-sui-bg-state-soft border border-sui-border-darker rounded-xs",
   "text-sui-text-subtle text-xs font-medium leading-4"
 ].join(" ");
-var TooltipContent = React78__namespace.forwardRef((_a, ref) => {
+var TooltipContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "default", weight = "subtle", shortcut, sideOffset = 4, children } = _b, props = __objRest(_b, ["className", "variant", "weight", "shortcut", "sideOffset", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     TooltipPrimitive__namespace.Content,
@@ -3392,7 +3620,7 @@ var underlineTabsListVariants = classVarianceAuthority.cva(
     }
   }
 );
-var UnderlineTabsList = React78__namespace.forwardRef((_a, ref) => {
+var UnderlineTabsList = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, layout, size } = _b, props = __objRest(_b, ["className", "layout", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
@@ -3439,7 +3667,7 @@ var underlineTabItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var UnderlineTabItem = React78__namespace.forwardRef(
+var UnderlineTabItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3477,7 +3705,7 @@ var UnderlineTabItem = React78__namespace.forwardRef(
 );
 UnderlineTabItem.displayName = "UnderlineTabItem";
 var DEFAULT_LANGUAGES = ["React", "JavaScript", "TypeScript", "Next.js"];
-var CodeBlock = React78__namespace.forwardRef(
+var CodeBlock = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3507,10 +3735,10 @@ var CodeBlock = React78__namespace.forwardRef(
       "showLineNumbers"
     ]);
     var _a2, _b2, _c, _d, _e, _f;
-    const [activeTab, setActiveTab] = React78__namespace.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
-    const [copied, setCopied] = React78__namespace.useState(false);
+    const [activeTab, setActiveTab] = React80__namespace.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
+    const [copied, setCopied] = React80__namespace.useState(false);
     const activeCode = variant === "advanced" ? (_f = (_e = (_c = tabs == null ? void 0 : tabs.find((t) => t.label === activeTab)) == null ? void 0 : _c.code) != null ? _e : (_d = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _d.code) != null ? _f : "" : code;
-    const handleCopy = React78__namespace.useCallback(() => {
+    const handleCopy = React80__namespace.useCallback(() => {
       if (onCopy) {
         onCopy();
       } else {
@@ -3701,7 +3929,7 @@ var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React78__namespace.forwardRef((_a, ref) => {
+var DialogOverlay = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -3715,7 +3943,7 @@ var DialogOverlay = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React78__namespace.forwardRef((_a, ref) => {
+var DialogContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
@@ -3774,7 +4002,7 @@ var DialogFooter = (_a) => {
   );
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React78__namespace.forwardRef((_a, ref) => {
+var DialogTitle = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
@@ -3788,7 +4016,7 @@ var DialogTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React78__namespace.forwardRef((_a, ref) => {
+var DialogDescription = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
@@ -3799,7 +4027,7 @@ var DialogDescription = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var Command = React78__namespace.forwardRef((_a, ref) => {
+var Command = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command,
@@ -3817,7 +4045,7 @@ var CommandDialog = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "overflow-hidden p-0 shadow-card max-w-[560px]", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-sui-text-hint [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_i]:h-4 [&_[cmdk-input-wrapper]_i]:w-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_i]:h-4 [&_[cmdk-item]_i]:w-4", children }) }) }));
 };
-var CommandInput = React78__namespace.forwardRef((_a, ref) => {
+var CommandInput = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-sui-border-default px-3", "cmdk-input-wrapper": "", children: [
     /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-search-line mr-2 shrink-0 text-icon-default-muted" }),
@@ -3834,7 +4062,7 @@ var CommandInput = React78__namespace.forwardRef((_a, ref) => {
   ] });
 });
 CommandInput.displayName = cmdk.Command.Input.displayName;
-var CommandList = React78__namespace.forwardRef((_a, ref) => {
+var CommandList = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.List,
@@ -3845,7 +4073,7 @@ var CommandList = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CommandList.displayName = cmdk.Command.List.displayName;
-var CommandEmpty = React78__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandEmpty = React80__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Empty,
   __spreadValues({
     ref,
@@ -3853,7 +4081,7 @@ var CommandEmpty = React78__namespace.forwardRef((props, ref) => /* @__PURE__ */
   }, props)
 ));
 CommandEmpty.displayName = cmdk.Command.Empty.displayName;
-var CommandGroup = React78__namespace.forwardRef((_a, ref) => {
+var CommandGroup = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Group,
@@ -3867,7 +4095,7 @@ var CommandGroup = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CommandGroup.displayName = cmdk.Command.Group.displayName;
-var CommandSeparator = React78__namespace.forwardRef((_a, ref) => {
+var CommandSeparator = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Separator,
@@ -3878,7 +4106,7 @@ var CommandSeparator = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CommandSeparator.displayName = cmdk.Command.Separator.displayName;
-var CommandItem = React78__namespace.forwardRef((_a, ref) => {
+var CommandItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Item,
@@ -3941,7 +4169,7 @@ var sliderHandleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SliderHandle = React78__namespace.forwardRef(
+var SliderHandle = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, state, value, showTooltip = false } = _b, props = __objRest(_b, ["className", "state", "value", "showTooltip"]);
     const isDisabled = state === "disabled";
@@ -4004,7 +4232,7 @@ function buildHistogramPath(data, width, height) {
   path += ` L ${width} ${height} Z`;
   return path;
 }
-var DataRangeSlider = React78__namespace.forwardRef(
+var DataRangeSlider = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4035,18 +4263,18 @@ var DataRangeSlider = React78__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78__namespace.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React78__namespace.useState(null);
-    const [focusedHandle, setFocusedHandle] = React78__namespace.useState(null);
-    const clipId = React78__namespace.useId();
+    const trackRef = React80__namespace.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React80__namespace.useState(null);
+    const [focusedHandle, setFocusedHandle] = React80__namespace.useState(null);
+    const clipId = React80__namespace.useId();
     const [rangeMin, rangeMax] = value;
     const pctMin = percent(rangeMin, min, max);
     const pctMax = percent(rangeMax, min, max);
-    const fmt = React78__namespace.useCallback(
+    const fmt = React80__namespace.useCallback(
       (v) => formatValue ? formatValue(v) : `${v}`,
       [formatValue]
     );
-    const getValueFromPointer = React78__namespace.useCallback(
+    const getValueFromPointer = React80__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -4057,7 +4285,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React78__namespace.useCallback(
+    const closestHandle = React80__namespace.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -4065,7 +4293,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React78__namespace.useCallback(
+    const updateValue = React80__namespace.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp(newVal, min, rangeMax);
@@ -4077,7 +4305,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React78__namespace.useCallback(
+    const handlePointerDown = React80__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -4089,7 +4317,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React78__namespace.useCallback(
+    const handlePointerMove = React80__namespace.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -4097,10 +4325,10 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React78__namespace.useCallback(() => {
+    const handlePointerUp = React80__namespace.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React78__namespace.useCallback(
+    const makeKeyHandler = React80__namespace.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -4128,7 +4356,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React78__namespace.useMemo(() => {
+    const tickLabels = React80__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -4139,7 +4367,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
     }, [pointLabels, pointCount, min, max, fmt]);
     const chartWidth = 320;
     const chartHeight = 32;
-    const histogramPath = React78__namespace.useMemo(
+    const histogramPath = React80__namespace.useMemo(
       () => buildHistogramPath(data, chartWidth, chartHeight),
       [data]
     );
@@ -4203,7 +4431,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: "absolute top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                      className: "absolute top-1/2 h-1 -translate-y-1/2 bg-informative",
                       style: { left: `${pctMin}%`, right: `${100 - pctMax}%` }
                     }
                   ),
@@ -4286,7 +4514,7 @@ DataRangeSlider.displayName = "DataRangeSlider";
 var labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-5 text-sui-text-default"
 );
-var Label = React78__namespace.forwardRef((_a, ref) => {
+var Label = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, required, supportText, tailIcon, children } = _b, props = __objRest(_b, ["className", "required", "supportText", "tailIcon", "children"]);
   const hasTail = !!(supportText || tailIcon);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4347,7 +4575,7 @@ var inputContainerVariants = classVarianceAuthority.cva(
     }
   }
 );
-var InputField = React78__namespace.forwardRef(
+var InputField = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4410,15 +4638,15 @@ var InputField = React78__namespace.forwardRef(
       "spellCheck",
       "autoComplete"
     ]);
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const inputId = id || generatedId;
     const captionId = `${inputId}-caption`;
     const hasError = !!error;
     const helperText = hasError ? error : caption;
     const hasInlineTags = !!(tags && tags.length > 0 && !hasError && !disabled);
-    const innerRef = React78__namespace.useRef(null);
-    React78__namespace.useImperativeHandle(ref, () => innerRef.current, []);
-    const [internalHasValue, setInternalHasValue] = React78__namespace.useState(false);
+    const innerRef = React80__namespace.useRef(null);
+    React80__namespace.useImperativeHandle(ref, () => innerRef.current, []);
+    const [internalHasValue, setInternalHasValue] = React80__namespace.useState(false);
     const hasValue = clearable ? typeof value === "string" ? value.length > 0 : internalHasValue : false;
     const handleChange = (e) => {
       if (clearable && value === void 0) {
@@ -4630,8 +4858,7 @@ var InputField = React78__namespace.forwardRef(
                 ),
                 children: tailAddon
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom" })
+            )
           ]
         }
       ),
@@ -4650,7 +4877,7 @@ var InputField = React78__namespace.forwardRef(
   }
 );
 InputField.displayName = "InputField";
-var DataRangeSliderInput = React78__namespace.forwardRef(
+var DataRangeSliderInput = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4770,7 +4997,7 @@ var DataRangeSliderInput = React78__namespace.forwardRef(
 DataRangeSliderInput.displayName = "DataRangeSliderInput";
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React78__namespace.forwardRef((_a, ref) => {
+var PopoverContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     PopoverPrimitive__namespace.Content,
@@ -4793,7 +5020,7 @@ function DatePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78__namespace.useState(false);
+  const [open, setOpen] = React80__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -4834,7 +5061,7 @@ function DateRangePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78__namespace.useState(false);
+  const [open, setOpen] = React80__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -4885,7 +5112,7 @@ function DatePickerWithPresets({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78__namespace.useState(false);
+  const [open, setOpen] = React80__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -5006,7 +5233,7 @@ function RequirementItem({ label, met }) {
     )
   ] });
 }
-var InputCaption = React78__namespace.forwardRef(
+var InputCaption = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "default",
@@ -5097,9 +5324,9 @@ var InputCaption = React78__namespace.forwardRef(
             className
           )
         }, props), {
-          children: React78__namespace.Children.map(children, (child) => {
-            if (!React78__namespace.isValidElement(child)) return child;
-            return React78__namespace.cloneElement(child, {
+          children: React80__namespace.Children.map(children, (child) => {
+            if (!React80__namespace.isValidElement(child)) return child;
+            return React80__namespace.cloneElement(child, {
               className: cn(
                 "flex-1",
                 child.props.className
@@ -5375,38 +5602,38 @@ function DatePickerInput({
   disabled = false,
   className
 }) {
-  const [calendarOpen, setCalendarOpen] = React78__namespace.useState(false);
+  const [calendarOpen, setCalendarOpen] = React80__namespace.useState(false);
   const hasError = !!error;
   const helperText = hasError ? error : caption;
   const singleSegments = dateToSegments(date);
-  const [singleDay, setSingleDay] = React78__namespace.useState(singleSegments.day);
-  const [singleMonth, setSingleMonth] = React78__namespace.useState(singleSegments.month);
-  const [singleYear, setSingleYear] = React78__namespace.useState(singleSegments.year);
+  const [singleDay, setSingleDay] = React80__namespace.useState(singleSegments.day);
+  const [singleMonth, setSingleMonth] = React80__namespace.useState(singleSegments.month);
+  const [singleYear, setSingleYear] = React80__namespace.useState(singleSegments.year);
   const startSegments = dateToSegments(dateRange == null ? void 0 : dateRange.from);
   const endSegments = dateToSegments(dateRange == null ? void 0 : dateRange.to);
-  const [startDay, setStartDay] = React78__namespace.useState(startSegments.day);
-  const [startMonth, setStartMonth] = React78__namespace.useState(startSegments.month);
-  const [startYear, setStartYear] = React78__namespace.useState(startSegments.year);
-  const [endDay, setEndDay] = React78__namespace.useState(endSegments.day);
-  const [endMonth, setEndMonth] = React78__namespace.useState(endSegments.month);
-  const [endYear, setEndYear] = React78__namespace.useState(endSegments.year);
-  const singleDayRef = React78__namespace.useRef(null);
-  const singleMonthRef = React78__namespace.useRef(null);
-  const singleYearRef = React78__namespace.useRef(null);
-  const startDayRef = React78__namespace.useRef(null);
-  const startMonthRef = React78__namespace.useRef(null);
-  const startYearRef = React78__namespace.useRef(null);
-  const endDayRef = React78__namespace.useRef(null);
-  const endMonthRef = React78__namespace.useRef(null);
-  const endYearRef = React78__namespace.useRef(null);
-  const calendarIconRef = React78__namespace.useRef(null);
-  React78__namespace.useEffect(() => {
+  const [startDay, setStartDay] = React80__namespace.useState(startSegments.day);
+  const [startMonth, setStartMonth] = React80__namespace.useState(startSegments.month);
+  const [startYear, setStartYear] = React80__namespace.useState(startSegments.year);
+  const [endDay, setEndDay] = React80__namespace.useState(endSegments.day);
+  const [endMonth, setEndMonth] = React80__namespace.useState(endSegments.month);
+  const [endYear, setEndYear] = React80__namespace.useState(endSegments.year);
+  const singleDayRef = React80__namespace.useRef(null);
+  const singleMonthRef = React80__namespace.useRef(null);
+  const singleYearRef = React80__namespace.useRef(null);
+  const startDayRef = React80__namespace.useRef(null);
+  const startMonthRef = React80__namespace.useRef(null);
+  const startYearRef = React80__namespace.useRef(null);
+  const endDayRef = React80__namespace.useRef(null);
+  const endMonthRef = React80__namespace.useRef(null);
+  const endYearRef = React80__namespace.useRef(null);
+  const calendarIconRef = React80__namespace.useRef(null);
+  React80__namespace.useEffect(() => {
     const s = dateToSegments(date);
     setSingleDay(s.day);
     setSingleMonth(s.month);
     setSingleYear(s.year);
   }, [date]);
-  React78__namespace.useEffect(() => {
+  React80__namespace.useEffect(() => {
     const s = dateToSegments(dateRange == null ? void 0 : dateRange.from);
     setStartDay(s.day);
     setStartMonth(s.month);
@@ -5416,7 +5643,7 @@ function DatePickerInput({
     setEndMonth(e.month);
     setEndYear(e.year);
   }, [dateRange]);
-  const handleSingleSegmentChange = React78__namespace.useCallback(
+  const handleSingleSegmentChange = React80__namespace.useCallback(
     (day, month, year) => {
       const d = segmentsToDate(day, month, year);
       if (day.length === 2 && month.length === 2 && year.length === 4) {
@@ -5427,7 +5654,7 @@ function DatePickerInput({
     },
     [onDateChange]
   );
-  const handleRangeSegmentChange = React78__namespace.useCallback(
+  const handleRangeSegmentChange = React80__namespace.useCallback(
     (sd, sm, sy, ed, em, ey) => {
       const from = segmentsToDate(sd, sm, sy);
       const to = segmentsToDate(ed, em, ey);
@@ -5502,7 +5729,7 @@ function DatePickerInput({
       setCalendarOpen(false);
     }
   };
-  const inputId = React78__namespace.useId();
+  const inputId = React80__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: calendarOpen, onOpenChange: setCalendarOpen, children: [
@@ -5688,7 +5915,7 @@ var lineVariants = classVarianceAuthority.cva("h-px min-w-0 flex-1 border-t bord
     lineStyle: "solid"
   }
 });
-var Divider = React78__namespace.forwardRef(
+var Divider = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5763,7 +5990,7 @@ var Divider = React78__namespace.forwardRef(
   }
 );
 Divider.displayName = "Divider";
-var MenuSearchInput = React78__namespace.forwardRef(
+var MenuSearchInput = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5785,15 +6012,15 @@ var MenuSearchInput = React78__namespace.forwardRef(
       "id"
     ]);
     var _a2, _b2;
-    const internalRef = React78__namespace.useRef(null);
+    const internalRef = React80__namespace.useRef(null);
     const inputRef = ref || internalRef;
-    const [internalValue, setInternalValue] = React78__namespace.useState(
+    const [internalValue, setInternalValue] = React80__namespace.useState(
       defaultValue || ""
     );
     const isControlled = value !== void 0;
     const currentValue = isControlled ? String(value) : internalValue;
     const hasValue = currentValue.length > 0;
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const inputId = id || generatedId;
     const handleChange = (e) => {
       var _a3;
@@ -5812,7 +6039,7 @@ var MenuSearchInput = React78__namespace.forwardRef(
         (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
       }
     };
-    const [isFocused, setIsFocused] = React78__namespace.useState(false);
+    const [isFocused, setIsFocused] = React80__namespace.useState(false);
     const showShortcut = !!shortcutKey && !hasValue && !isFocused && !disabled;
     const handleFocus = (e) => {
       var _a3;
@@ -5926,7 +6153,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-var DropdownMenuSubTrigger = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSubTrigger = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.SubTrigger,
@@ -5950,7 +6177,7 @@ var DropdownMenuSubTrigger = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-var DropdownMenuSubContent = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSubContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.SubContent,
@@ -5965,7 +6192,7 @@ var DropdownMenuSubContent = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-var DropdownMenuContent = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4, search, searchValue, onSearchChange, onSearchClear, searchPlaceholder = "Search", children } = _b, props = __objRest(_b, ["className", "sideOffset", "search", "searchValue", "onSearchChange", "onSearchClear", "searchPlaceholder", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Content,
@@ -6003,7 +6230,7 @@ var DropdownMenuContent = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, variant = "default" } = _b, props = __objRest(_b, ["className", "inset", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Item,
@@ -6024,7 +6251,7 @@ var DropdownMenuItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuCheckboxItem = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuCheckboxItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.CheckboxItem,
@@ -6046,7 +6273,7 @@ var DropdownMenuCheckboxItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuRadioItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.RadioItem,
@@ -6067,7 +6294,7 @@ var DropdownMenuRadioItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-var DropdownMenuLabel = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuLabel = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Label,
@@ -6082,7 +6309,7 @@ var DropdownMenuLabel = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSeparator = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Separator,
@@ -6111,7 +6338,7 @@ var DropdownMenuShortcut = (_a) => {
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var DropdownMenuCaption = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuCaption = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -6126,7 +6353,7 @@ var DropdownMenuCaption = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCaption.displayName = "DropdownMenuCaption";
-var DropdownMenuUserbar = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuUserbar = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, name, email, avatar, badge } = _b, props = __objRest(_b, ["className", "name", "email", "avatar", "badge"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -6151,7 +6378,7 @@ var DropdownMenuUserbar = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuUserbar.displayName = "DropdownMenuUserbar";
-var DropdownMenuLargeItem = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuLargeItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, label, caption, icon, badge, tailIcon } = _b, props = __objRest(_b, ["className", "label", "caption", "icon", "badge", "tailIcon"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.Item,
@@ -6192,7 +6419,7 @@ var emptyStateVariants = classVarianceAuthority.cva(
     }
   }
 );
-var EmptyState = React78__namespace.forwardRef(
+var EmptyState = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6258,7 +6485,7 @@ function EmptyStateText({
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-4 text-sui-text-muted w-full", children: description })
   ] });
 }
-var FileUploadArea = React78__namespace.forwardRef(
+var FileUploadArea = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6283,8 +6510,8 @@ var FileUploadArea = React78__namespace.forwardRef(
       "onDrop",
       "onDragOver"
     ]);
-    const [isDragOver, setIsDragOver] = React78__namespace.useState(false);
-    const handleDragOver = React78__namespace.useCallback(
+    const [isDragOver, setIsDragOver] = React80__namespace.useState(false);
+    const handleDragOver = React80__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6293,10 +6520,10 @@ var FileUploadArea = React78__namespace.forwardRef(
       },
       [disabled, onDragOver]
     );
-    const handleDragLeave = React78__namespace.useCallback(() => {
+    const handleDragLeave = React80__namespace.useCallback(() => {
       setIsDragOver(false);
     }, []);
-    const handleDrop = React78__namespace.useCallback(
+    const handleDrop = React80__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6305,11 +6532,11 @@ var FileUploadArea = React78__namespace.forwardRef(
       },
       [disabled, onDrop]
     );
-    const handleClick = React78__namespace.useCallback(() => {
+    const handleClick = React80__namespace.useCallback(() => {
       if (disabled) return;
       onClick == null ? void 0 : onClick();
     }, [disabled, onClick]);
-    const handleKeyDown = React78__namespace.useCallback(
+    const handleKeyDown = React80__namespace.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -6385,7 +6612,7 @@ var FileUploadArea = React78__namespace.forwardRef(
                     "span",
                     {
                       className: cn(
-                        disabled ? "text-sui-text-hint" : "text-primary"
+                        disabled ? "text-sui-text-hint" : "text-sui-text-informative"
                       ),
                       children: linkText
                     }
@@ -6425,7 +6652,7 @@ var progressBarVariants = classVarianceAuthority.cva(
   }
 );
 var SEGMENT_COUNT = 10;
-var ProgressBar = React78__namespace.forwardRef(
+var ProgressBar = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6447,7 +6674,7 @@ var ProgressBar = React78__namespace.forwardRef(
     const clampedValue = Math.min(100, Math.max(0, value != null ? value : 0));
     const displayPercentage = `${Math.round(clampedValue)}%`;
     const filledSegments = Math.round(clampedValue / 100 * SEGMENT_COUNT);
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const labelId = `${generatedId}-label`;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -6485,7 +6712,7 @@ var ProgressBar = React78__namespace.forwardRef(
                   {
                     className: cn(
                       "h-1 min-h-px min-w-px flex-[1_0_0] rounded-full",
-                      i < filledSegments ? "bg-sui-bg-basic-gray-accent" : "bg-sui-bg-basic-gray-alpha-10"
+                      i < filledSegments ? "bg-informative" : "bg-sui-bg-basic-gray-alpha-10"
                     )
                   },
                   i
@@ -6505,7 +6732,7 @@ var ProgressBar = React78__namespace.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   ProgressPrimitive2__namespace.Indicator,
                   {
-                    className: "h-full rounded-full bg-sui-bg-basic-gray-accent transition-all duration-300 ease-out",
+                    className: "h-full rounded-full bg-informative transition-all duration-300 ease-out",
                     style: { width: `${clampedValue}%` }
                   }
                 )
@@ -6533,7 +6760,7 @@ var statusLabel = {
   uploading: "Uploading...",
   failed: "Error"
 };
-var FileUploadCard = React78__namespace.forwardRef(
+var FileUploadCard = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6745,7 +6972,7 @@ var lineColorMap = {
   warning: "bg-sui-bg-basic-orange-accent",
   error: "bg-sui-bg-basic-red-accent"
 };
-var InlineTips = React78__namespace.forwardRef(
+var InlineTips = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6876,7 +7103,7 @@ function validateFile(file, accept, maxSize) {
   }
   return null;
 }
-var FileUpload = React78__namespace.forwardRef(
+var FileUpload = React80__namespace.forwardRef(
   ({
     files = [],
     onFilesAdded,
@@ -6897,16 +7124,16 @@ var FileUpload = React78__namespace.forwardRef(
     icon,
     className
   }, ref) => {
-    const inputRef = React78__namespace.useRef(null);
-    const [errors, setErrors] = React78__namespace.useState([]);
-    const [thumbnails, setThumbnails] = React78__namespace.useState(
+    const inputRef = React80__namespace.useRef(null);
+    const [errors, setErrors] = React80__namespace.useState([]);
+    const [thumbnails, setThumbnails] = React80__namespace.useState(
       {}
     );
-    const thumbnailsRef = React78__namespace.useRef(thumbnails);
-    React78__namespace.useEffect(() => {
+    const thumbnailsRef = React80__namespace.useRef(thumbnails);
+    React80__namespace.useEffect(() => {
       thumbnailsRef.current = thumbnails;
     }, [thumbnails]);
-    React78__namespace.useEffect(() => {
+    React80__namespace.useEffect(() => {
       if (!autoPreview) return;
       setThumbnails((prev) => {
         let next = prev;
@@ -6937,7 +7164,7 @@ var FileUpload = React78__namespace.forwardRef(
         return changed ? next : prev;
       });
     }, [files, autoPreview]);
-    React78__namespace.useEffect(() => {
+    React80__namespace.useEffect(() => {
       return () => {
         for (const url of Object.values(thumbnailsRef.current)) {
           URL.revokeObjectURL(url);
@@ -6945,7 +7172,7 @@ var FileUpload = React78__namespace.forwardRef(
       };
     }, []);
     const resolvedDescription = description != null ? description : generateDescription(accept, maxSize, maxFiles);
-    const processFiles = React78__namespace.useCallback(
+    const processFiles = React80__namespace.useCallback(
       (fileList) => {
         const newFiles = Array.from(fileList);
         const validationErrors = [];
@@ -6973,11 +7200,11 @@ var FileUpload = React78__namespace.forwardRef(
       },
       [files.length, maxFiles, accept, maxSize, onFilesAdded]
     );
-    const handleClick = React78__namespace.useCallback(() => {
+    const handleClick = React80__namespace.useCallback(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.click();
     }, []);
-    const handleInputChange = React78__namespace.useCallback(
+    const handleInputChange = React80__namespace.useCallback(
       (e) => {
         if (e.target.files && e.target.files.length > 0) {
           processFiles(e.target.files);
@@ -6986,7 +7213,7 @@ var FileUpload = React78__namespace.forwardRef(
       },
       [processFiles]
     );
-    const handleDrop = React78__namespace.useCallback(
+    const handleDrop = React80__namespace.useCallback(
       (e) => {
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
           processFiles(e.dataTransfer.files);
@@ -6994,10 +7221,10 @@ var FileUpload = React78__namespace.forwardRef(
       },
       [processFiles]
     );
-    const dismissError = React78__namespace.useCallback((index) => {
+    const dismissError = React80__namespace.useCallback((index) => {
       setErrors((prev) => prev.filter((_, i) => i !== index));
     }, []);
-    const handlePaste = React78__namespace.useCallback(
+    const handlePaste = React80__namespace.useCallback(
       (e) => {
         var _a;
         if (disabled || !pasteEnabled) return;
@@ -7018,7 +7245,7 @@ var FileUpload = React78__namespace.forwardRef(
       },
       [disabled, pasteEnabled, processFiles]
     );
-    const handleCancel = React78__namespace.useCallback(
+    const handleCancel = React80__namespace.useCallback(
       (id) => {
         const uploadFile = files.find((f) => f.id === id);
         if (uploadFile == null ? void 0 : uploadFile.abortController) {
@@ -7135,7 +7362,7 @@ var ariaSortMap = {
   desc: "descending",
   none: "none"
 };
-var GridTableHeaderItem = React78__namespace.forwardRef(
+var GridTableHeaderItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7237,7 +7464,7 @@ var gridTableRowVariants = classVarianceAuthority.cva(
     }
   }
 );
-var GridTableRow = React78__namespace.forwardRef(
+var GridTableRow = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7253,7 +7480,7 @@ var GridTableRow = React78__namespace.forwardRef(
   }
 );
 GridTableRow.displayName = "GridTableRow";
-var GridTableCell = React78__namespace.forwardRef(
+var GridTableCell = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, bordered = true, children } = _b, props = __objRest(_b, ["className", "bordered", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7297,7 +7524,7 @@ var gridTableSlotItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var GridTableSlotItem = React78__namespace.forwardRef(
+var GridTableSlotItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7445,7 +7672,7 @@ var stepperNumberVariants = classVarianceAuthority.cva(
     }
   }
 );
-var StepperNumber = React78__namespace.forwardRef(
+var StepperNumber = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size, color, number = "1" } = _b, props = __objRest(_b, ["className", "size", "color", "number"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7484,7 +7711,7 @@ var stepperIconVariants = classVarianceAuthority.cva(
     }
   }
 );
-var StepperIcon = React78__namespace.forwardRef(
+var StepperIcon = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "dot-large", icon } = _b, props = __objRest(_b, ["className", "variant", "icon"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7515,17 +7742,23 @@ var textBlockVariants = classVarianceAuthority.cva("flex w-full flex-col gap-1",
     align: "left"
   }
 });
-var horizontalStepperItemVariants = classVarianceAuthority.cva("flex w-full flex-col gap-4", {
-  variants: {
-    position: {
-      top: "",
-      bottom: ""
+var horizontalStepperItemVariants = classVarianceAuthority.cva(
+  [
+    "flex w-full flex-col gap-4",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default focus-visible:rounded-sm"
+  ].join(" "),
+  {
+    variants: {
+      position: {
+        top: "",
+        bottom: ""
+      }
+    },
+    defaultVariants: {
+      position: "top"
     }
-  },
-  defaultVariants: {
-    position: "top"
   }
-});
+);
 function ConnectorLine({ success }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -7538,7 +7771,7 @@ function ConnectorLine({ success }) {
     }
   );
 }
-var HorizontalStepperItem = React78__namespace.forwardRef(
+var HorizontalStepperItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7663,7 +7896,7 @@ var HorizontalStepperItem = React78__namespace.forwardRef(
   }
 );
 HorizontalStepperItem.displayName = "HorizontalStepperItem";
-var HorizontalStepper = React78__namespace.forwardRef(
+var HorizontalStepper = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7738,7 +7971,7 @@ var HorizontalStepper = React78__namespace.forwardRef(
   }
 );
 HorizontalStepper.displayName = "HorizontalStepper";
-var Input = React78__namespace.forwardRef(
+var Input = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type, spellCheck, autoComplete } = _b, props = __objRest(_b, ["className", "type", "spellCheck", "autoComplete"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7831,7 +8064,7 @@ var inputButtonVariants = classVarianceAuthority.cva(
   }
 );
 var iconOnlyHoverClasses = "[@media(hover:hover)]:hover:[&_i]:text-icon-default-subtle [@media(hover:hover)]:hover:[&_svg]:text-icon-default-subtle active:[&_i]:text-icon-default-subtle active:[&_svg]:text-icon-default-subtle";
-var InputButton = React78__namespace.forwardRef(
+var InputButton = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7963,7 +8196,7 @@ var InputButton = React78__namespace.forwardRef(
   }
 );
 InputButton.displayName = "InputButton";
-var InputStepper = React78__namespace.forwardRef(
+var InputStepper = React80__namespace.forwardRef(
   ({ onIncrement, onDecrement, disabled, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -8020,7 +8253,7 @@ var InputStepper = React78__namespace.forwardRef(
   }
 );
 InputStepper.displayName = "InputStepper";
-var NavigationMenu = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenu = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     NavigationMenuPrimitive__namespace.Root,
@@ -8039,7 +8272,7 @@ var NavigationMenu = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 NavigationMenu.displayName = NavigationMenuPrimitive__namespace.Root.displayName;
-var NavigationMenuList = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuList = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.List,
@@ -8057,7 +8290,7 @@ var NavigationMenuItem = NavigationMenuPrimitive__namespace.Item;
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium text-sui-text-default transition-colors [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-default focus:bg-sui-bg-state-ghost-hover focus:text-sui-text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default disabled:text-sui-text-hint disabled:pointer-events-none data-[state=open]:text-sui-text-default data-[state=open]:bg-sui-bg-state-ghost-hover"
 );
-var NavigationMenuTrigger = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuTrigger = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     NavigationMenuPrimitive__namespace.Trigger,
@@ -8080,7 +8313,7 @@ var NavigationMenuTrigger = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive__namespace.Trigger.displayName;
-var NavigationMenuContent = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Content,
@@ -8095,7 +8328,7 @@ var NavigationMenuContent = React78__namespace.forwardRef((_a, ref) => {
 });
 NavigationMenuContent.displayName = NavigationMenuPrimitive__namespace.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive__namespace.Link;
-var NavigationMenuViewport = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuViewport = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Viewport,
@@ -8109,7 +8342,7 @@ var NavigationMenuViewport = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 NavigationMenuViewport.displayName = NavigationMenuPrimitive__namespace.Viewport.displayName;
-var NavigationMenuIndicator = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuIndicator = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Indicator,
@@ -8171,16 +8404,16 @@ var pageItemVariants = classVarianceAuthority.cva(
 );
 var activeDefaultClasses = [
   "bg-sui-bg-state-ghost",
-  // Blue text/border: uses bg-basic-blue tokens because text-informative shifts to orange in Theme 2
-  "text-sui-bg-basic-blue-strong",
-  "border border-sui-bg-basic-blue-accent",
-  "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost [@media(hover:hover)]:hover:text-sui-bg-basic-blue-strong"
+  // Semantic accent tokens — shift blue → orange in Neutral Violet, matching the theme's accent color
+  "text-sui-text-informative",
+  "border border-sui-border-informative",
+  "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost [@media(hover:hover)]:hover:text-sui-text-informative"
 ].join(" ");
 var activeDotClasses = [
-  "bg-sui-bg-basic-blue-accent",
-  "[@media(hover:hover)]:hover:bg-sui-bg-basic-blue-accent"
+  "bg-informative",
+  "[@media(hover:hover)]:hover:bg-informative"
 ].join(" ");
-var PageItem = React78__namespace.forwardRef(
+var PageItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", active = false, label = "0", disabled, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled", "asChild"]);
     const Comp = asChild ? reactSlot.Slot : "button";
@@ -8215,7 +8448,7 @@ var Pagination = (_a) => {
   );
 };
 Pagination.displayName = "Pagination";
-var PaginationContent = React78__namespace.forwardRef((_a, ref) => {
+var PaginationContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -8226,7 +8459,7 @@ var PaginationContent = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React78__namespace.forwardRef((_a, ref) => {
+var PaginationItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadValues({ ref, className: cn("", className) }, props));
 });
@@ -8347,7 +8580,7 @@ function getPageRange(currentPage, totalPages, maxVisible) {
   }
   return pages;
 }
-var Paginator = React78__namespace.forwardRef(
+var Paginator = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8527,7 +8760,236 @@ var Paginator = React78__namespace.forwardRef(
   }
 );
 Paginator.displayName = "Paginator";
-var Progress = React78__namespace.forwardRef((_a, ref) => {
+var CoverImage = ({
+  src,
+  className,
+  imageClassName
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-clip", className), children: src ? /* @__PURE__ */ jsxRuntime.jsx(
+  "img",
+  {
+    src,
+    alt: "",
+    className: cn("absolute inset-0 size-full object-cover", imageClassName)
+  }
+) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-sui-bg-muted" }) });
+var TitleRow = ({ title, price }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between font-medium text-md leading-6 text-sui-text-default", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+  price && /* @__PURE__ */ jsxRuntime.jsx("span", { children: price })
+] });
+var DateRow = ({
+  date,
+  prefix = "Added"
+}) => date ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-sm font-normal leading-5 text-sui-text-muted", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { children: prefix }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { children: date })
+] }) : null;
+var TagList = ({ tags }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: "sm", children: tag }, tag)) });
+var ProductCard = React80__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      variant = "minimal",
+      title = "Product name",
+      price,
+      image,
+      date,
+      description,
+      tags,
+      author,
+      rating,
+      ctaLabel = "Add to cart",
+      onCta,
+      thumbnail
+    } = _b, props = __objRest(_b, [
+      "className",
+      "variant",
+      "title",
+      "price",
+      "image",
+      "date",
+      "description",
+      "tags",
+      "author",
+      "rating",
+      "ctaLabel",
+      "onCta",
+      "thumbnail"
+    ]);
+    if (variant === "minimal") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn("flex flex-col gap-3", className)
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-[3/2] w-full overflow-clip rounded-lg border border-sui-border-darker shadow-card", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CoverImage, { src: image, className: "absolute inset-0", imageClassName: "rounded-lg" }),
+              rating && rating > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[9px] top-[9px] flex items-center gap-0 overflow-clip rounded-md border border-sui-border-default bg-sui-bg-badge-default px-1 py-1 backdrop-blur-[2px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-star-fill text-xs leading-none text-icon-default-muted", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-0.5 pr-1 text-xs font-medium leading-4 text-sui-text-subtle", children: rating })
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TitleRow, { title, price }),
+              date && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-sm font-normal leading-5 text-sui-text-muted", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Added" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: date })
+              ] })
+            ] })
+          ]
+        })
+      );
+    }
+    if (variant === "featured") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(
+            "relative flex flex-col gap-3 rounded-xl border border-sui-border-darker bg-sui-bg-card p-4 shadow-card",
+            className
+          )
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-[3/2] w-full overflow-clip rounded-sm border border-sui-border-darker", children: /* @__PURE__ */ jsxRuntime.jsx(CoverImage, { src: image, className: "absolute inset-0" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TitleRow, { title, price }),
+                /* @__PURE__ */ jsxRuntime.jsx(DateRow, { date })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+              tags && tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TagList, { tags }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "md", className: "w-full", onClick: onCta, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-shopping-cart-2-line", "aria-hidden": "true" }),
+                ctaLabel
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+          ]
+        })
+      );
+    }
+    if (variant === "detailed") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(
+            "relative flex flex-col overflow-clip rounded-xl border border-sui-border-darker bg-sui-bg-card shadow-card",
+            className
+          )
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-[5/3] w-full shrink-0 border-b border-sui-border-darker", children: /* @__PURE__ */ jsxRuntime.jsx(CoverImage, { src: image, className: "absolute inset-0" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TitleRow, { title, price }),
+                /* @__PURE__ */ jsxRuntime.jsx(DateRow, { date })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-normal leading-5 text-sui-text-muted", children: description }),
+              /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+              tags && tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TagList, { tags }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "md", className: "w-full", onClick: onCta, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-shopping-cart-2-line", "aria-hidden": "true" }),
+                ctaLabel
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+          ]
+        })
+      );
+    }
+    if (variant === "author") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn("flex flex-col gap-3", className)
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-[3/2] w-full overflow-clip rounded-lg border border-sui-border-darker shadow-card", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CoverImage, { src: image, className: "absolute inset-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between font-medium text-md leading-6 text-sui-text-default", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+                price && /* @__PURE__ */ jsxRuntime.jsx("span", { children: price })
+              ] }),
+              author && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-6", children: [
+                  author.avatar && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: author.avatar, alt: author.name }),
+                  /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-xs", children: author.name.slice(0, 2).toUpperCase() })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-sm font-normal leading-5 text-sui-text-subtle", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: author.name }),
+                  author.category && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line text-base leading-none text-icon-default-muted", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: author.category })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ]
+        })
+      );
+    }
+    if (variant === "overlay") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn("relative", className)
+        }, props), {
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-[3/2] w-full overflow-clip rounded-lg border border-sui-border-darker shadow-card", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CoverImage, { src: image, className: "absolute inset-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex items-end justify-between bg-gradient-to-b from-transparent to-sui-bg-default pb-2.5 pt-8 px-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", children: "Live preview" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-file-copy-line", "aria-hidden": "true" }),
+                "Copy"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+          ] })
+        })
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn("flex items-center justify-between gap-3", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            (thumbnail || image) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative size-6 shrink-0 overflow-clip rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: thumbnail != null ? thumbnail : image,
+                alt: "",
+                className: "absolute inset-0 size-full object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-md leading-6 text-sui-text-default", children: title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "2xs", className: "size-6 p-0", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-bookmark-line", "aria-hidden": "true" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Save to library" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "2xs", className: "size-6 p-0", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill", "aria-hidden": "true" }) })
+          ] })
+        ]
+      })
+    ) });
+  }
+);
+ProductCard.displayName = "ProductCard";
+var Progress = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ProgressPrimitive2__namespace.Root,
@@ -8541,7 +9003,7 @@ var Progress = React78__namespace.forwardRef((_a, ref) => {
       children: /* @__PURE__ */ jsxRuntime.jsx(
         ProgressPrimitive2__namespace.Indicator,
         {
-          className: "h-full w-full flex-1 bg-primary transition-all",
+          className: "h-full w-full flex-1 bg-informative transition-all",
           style: { transform: `translateX(-${100 - (value || 0)}%)` }
         }
       )
@@ -8567,17 +9029,17 @@ var radialProgressBarVariants = classVarianceAuthority.cva("relative inline-flex
   }
 });
 var textVariantMap = {
-  default: "text-sui-text-default",
+  default: "text-sui-text-informative",
   success: "text-sui-text-success",
   failed: "text-sui-text-destructive"
 };
 var trackStrokeVar = "var(--border-default)";
 var arcStrokeVarMap = {
-  default: "var(--text-subtle)",
+  default: "hsl(var(--informative))",
   success: "var(--text-success)",
   failed: "var(--text-destructive)"
 };
-var RadialProgressBar = React78__namespace.forwardRef(
+var RadialProgressBar = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8697,7 +9159,7 @@ var RadialProgressBar = React78__namespace.forwardRef(
   }
 );
 RadialProgressBar.displayName = "RadialProgressBar";
-var RadioGroup2 = React78__namespace.forwardRef((_a, ref) => {
+var RadioGroup2 = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
@@ -8757,7 +9219,7 @@ var radioButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButton = React78__namespace.forwardRef((_a, ref) => {
+var RadioButton = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     RadioGroupPrimitive__namespace.Item,
@@ -8797,7 +9259,7 @@ var RadioButton = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 RadioButton.displayName = "RadioButton";
-var RadioCardGroup = React78__namespace.forwardRef((_a, ref) => {
+var RadioCardGroup = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
@@ -8826,7 +9288,7 @@ var radioButtonCardVariants = classVarianceAuthority.cva(
           // Shadow
           "shadow-card-base",
           // Selected: highlight border + ring
-          "data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-primary",
+          "data-[state=checked]:border-informative data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-informative",
           // Disabled
           "disabled:border-sui-border-default disabled:shadow-none"
         ],
@@ -8834,7 +9296,7 @@ var radioButtonCardVariants = classVarianceAuthority.cva(
           // Background — soft bg when unchecked, card bg when selected
           "bg-sui-bg-state-soft border border-transparent",
           // Selected: card bg + highlight border + ring
-          "data-[state=checked]:bg-sui-bg-card data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-primary",
+          "data-[state=checked]:bg-sui-bg-card data-[state=checked]:border-informative data-[state=checked]:ring-1 data-[state=checked]:ring-inset data-[state=checked]:ring-informative",
           "data-[state=checked]:shadow-card-base",
           // Disabled
           "disabled:border-transparent disabled:shadow-none"
@@ -8846,7 +9308,7 @@ var radioButtonCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButtonCard = React78__namespace.forwardRef(
+var RadioButtonCard = React80__namespace.forwardRef(
   ({
     title,
     description,
@@ -8860,7 +9322,7 @@ var RadioButtonCard = React78__namespace.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const titleId = `radio-card-title-${generatedId}`;
     const descriptionId = `radio-card-desc-${generatedId}`;
     const isHorizontal = layout === "horizontal";
@@ -8968,9 +9430,9 @@ var RadioButtonCard = React78__namespace.forwardRef(
   }
 );
 RadioButtonCard.displayName = "RadioButtonCard";
-var RadioButtonList = React78__namespace.forwardRef(
+var RadioButtonList = React80__namespace.forwardRef(
   ({ className, divider = true, value, defaultValue, onValueChange, disabled, children }, ref) => {
-    const items = React78__namespace.Children.toArray(children);
+    const items = React80__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadioGroup2,
       {
@@ -9014,7 +9476,7 @@ var radioButtonWithTextVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButtonWithText = React78__namespace.forwardRef(
+var RadioButtonWithText = React80__namespace.forwardRef(
   ({
     label,
     description,
@@ -9025,7 +9487,7 @@ var RadioButtonWithText = React78__namespace.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const radioId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -9080,7 +9542,7 @@ var RadioButtonWithText = React78__namespace.forwardRef(
   }
 );
 RadioButtonWithText.displayName = "RadioButtonWithText";
-var ScrollArea = React78__namespace.forwardRef((_a, ref) => {
+var ScrollArea = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScrollAreaPrimitive__namespace.Root,
@@ -9097,7 +9559,7 @@ var ScrollArea = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React78__namespace.forwardRef((_a, ref) => {
+var ScrollBar = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
@@ -9119,7 +9581,7 @@ ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displ
 var Select = SelectPrimitive__namespace.Root;
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React78__namespace.forwardRef((_a, ref) => {
+var SelectTrigger = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Trigger,
@@ -9142,7 +9604,7 @@ var SelectTrigger = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React78__namespace.forwardRef((_a, ref) => {
+var SelectScrollUpButton = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollUpButton,
@@ -9158,7 +9620,7 @@ var SelectScrollUpButton = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React78__namespace.forwardRef((_a, ref) => {
+var SelectScrollDownButton = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollDownButton,
@@ -9174,7 +9636,7 @@ var SelectScrollDownButton = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React78__namespace.forwardRef((_a, ref) => {
+var SelectContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
   return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Content,
@@ -9207,7 +9669,7 @@ var SelectContent = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React78__namespace.forwardRef((_a, ref) => {
+var SelectLabel = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Label,
@@ -9221,7 +9683,7 @@ var SelectLabel = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React78__namespace.forwardRef((_a, ref) => {
+var SelectItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Item,
@@ -9246,7 +9708,7 @@ var SelectItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React78__namespace.forwardRef((_a, ref) => {
+var SelectSeparator = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Separator,
@@ -9257,7 +9719,7 @@ var SelectSeparator = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
-var SelectMenu = React78__namespace.forwardRef(
+var SelectMenu = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9288,19 +9750,19 @@ var SelectMenu = React78__namespace.forwardRef(
     ]);
     var _a2;
     const indicator = selectType === "checkbox" ? "checkbox" : selectType === "radio" ? "radio" : selectType === "default" ? "checkmark" : "none";
-    const hasChildren = React78__namespace.Children.count(children) > 0;
-    const generatedId = React78__namespace.useId();
+    const hasChildren = React80__namespace.Children.count(children) > 0;
+    const generatedId = React80__namespace.useId();
     const listId = `${generatedId}-list`;
-    const listRef = React78__namespace.useRef(null);
-    const [activeIndex, setActiveIndex] = React78__namespace.useState(-1);
+    const listRef = React80__namespace.useRef(null);
+    const [activeIndex, setActiveIndex] = React80__namespace.useState(-1);
     const activeItemId = activeIndex >= 0 ? `${listId}-item-${activeIndex}` : void 0;
-    const getItems = React78__namespace.useCallback(() => {
+    const getItems = React80__namespace.useCallback(() => {
       if (!listRef.current) return [];
       return Array.from(
         listRef.current.querySelectorAll('[role="option"]')
       );
     }, []);
-    const handleKeyDown = React78__namespace.useCallback(
+    const handleKeyDown = React80__namespace.useCallback(
       (e) => {
         var _a3;
         const items = getItems();
@@ -9383,8 +9845,8 @@ var SelectMenu = React78__namespace.forwardRef(
                 "focus-visible:outline-none"
               ),
               style: listMaxHeight ? { maxHeight: listMaxHeight } : void 0,
-              children: hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React78__namespace.Children.map(children, (child, index) => {
-                if (React78__namespace.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
+              children: hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React80__namespace.Children.map(children, (child, index) => {
+                if (React80__namespace.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
                   const itemProps = child.props;
                   const overrides = {};
                   if (indicator !== "none" && itemProps.indicator === void 0) {
@@ -9401,7 +9863,7 @@ var SelectMenu = React78__namespace.forwardRef(
                     overrides["data-active"] = "true";
                   }
                   if (Object.keys(overrides).length > 0) {
-                    return React78__namespace.cloneElement(
+                    return React80__namespace.cloneElement(
                       child,
                       overrides
                     );
@@ -9426,7 +9888,7 @@ var SelectMenu = React78__namespace.forwardRef(
   }
 );
 SelectMenu.displayName = "SelectMenu";
-var SelectMenuFooterButton = React78__namespace.forwardRef((_a, ref) => {
+var SelectMenuFooterButton = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, icon = "ri-add-line", children = "Add new", disabled } = _b, props = __objRest(_b, ["className", "icon", "children", "disabled"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
@@ -9469,7 +9931,7 @@ var SelectMenuFooterButton = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuFooterButton.displayName = "SelectMenuFooterButton";
-var SelectInput = React78__namespace.forwardRef(
+var SelectInput = React80__namespace.forwardRef(
   ({
     label,
     required,
@@ -9501,10 +9963,10 @@ var SelectInput = React78__namespace.forwardRef(
     footer,
     className
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React78__namespace.useState(false);
+    const [internalOpen, setInternalOpen] = React80__namespace.useState(false);
     const isControlled = controlledOpen !== void 0;
     const isOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = React78__namespace.useCallback(
+    const handleOpenChange = React80__namespace.useCallback(
       (next) => {
         if (disabled) return;
         if (!isControlled) setInternalOpen(next);
@@ -9512,7 +9974,7 @@ var SelectInput = React78__namespace.forwardRef(
       },
       [disabled, isControlled, onOpenChange]
     );
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const hasError = !!error;
     const helperText = hasError ? error : caption;
     const hasTags = tags && tags.length > 0;
@@ -9591,7 +10053,7 @@ var SelectInput = React78__namespace.forwardRef(
                   children: leadIcon
                 }
               ) : null,
-              hasTags ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(React78__namespace.Fragment, { children: [
+              hasTags ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(React80__namespace.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -9708,7 +10170,7 @@ var SelectInput = React78__namespace.forwardRef(
   }
 );
 SelectInput.displayName = "SelectInput";
-var SelectMenuItem = React78__namespace.forwardRef(
+var SelectMenuItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9872,7 +10334,7 @@ var SelectMenuItem = React78__namespace.forwardRef(
   }
 );
 SelectMenuItem.displayName = "SelectMenuItem";
-var SelectMenuLabel = React78__namespace.forwardRef(
+var SelectMenuLabel = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, caption, children } = _b, props = __objRest(_b, ["className", "caption", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9894,7 +10356,7 @@ var SelectMenuLabel = React78__namespace.forwardRef(
   }
 );
 SelectMenuLabel.displayName = "SelectMenuLabel";
-var SelectMenuDescription = React78__namespace.forwardRef((_a, ref) => {
+var SelectMenuDescription = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -9908,7 +10370,7 @@ var SelectMenuDescription = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuDescription.displayName = "SelectMenuDescription";
-var SelectMenuSeparator = React78__namespace.forwardRef((_a, ref) => {
+var SelectMenuSeparator = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -9920,7 +10382,7 @@ var SelectMenuSeparator = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuSeparator.displayName = "SelectMenuSeparator";
-var SelectMenuLargeItem = React78__namespace.forwardRef(
+var SelectMenuLargeItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10016,7 +10478,7 @@ var SelectMenuLargeItem = React78__namespace.forwardRef(
   }
 );
 SelectMenuLargeItem.displayName = "SelectMenuLargeItem";
-var Separator3 = React78__namespace.forwardRef(
+var Separator3 = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10039,7 +10501,7 @@ var Sheet = DialogPrimitive__namespace.Root;
 var SheetTrigger = DialogPrimitive__namespace.Trigger;
 var SheetClose = DialogPrimitive__namespace.Close;
 var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React78__namespace.forwardRef((_a, ref) => {
+var SheetOverlay = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -10070,7 +10532,7 @@ var sheetVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SheetContent = React78__namespace.forwardRef((_a, ref) => {
+var SheetContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { side = "right", className, children } = _b, props = __objRest(_b, ["side", "className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
@@ -10126,7 +10588,7 @@ var SheetFooter = (_a) => {
   );
 };
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React78__namespace.forwardRef((_a, ref) => {
+var SheetTitle = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
@@ -10137,7 +10599,7 @@ var SheetTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React78__namespace.forwardRef((_a, ref) => {
+var SheetDescription = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
@@ -10150,8 +10612,8 @@ var SheetDescription = React78__namespace.forwardRef((_a, ref) => {
 SheetDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React78__namespace.useState(void 0);
-  React78__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React80__namespace.useState(void 0);
+  React80__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -10181,15 +10643,15 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React78__namespace.createContext(null);
+var SidebarContext = React80__namespace.createContext(null);
 function useSidebar() {
-  const context = React78__namespace.useContext(SidebarContext);
+  const context = React80__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React78__namespace.forwardRef(
+var SidebarProvider = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       defaultOpen = true,
@@ -10207,10 +10669,10 @@ var SidebarProvider = React78__namespace.forwardRef(
       "children"
     ]);
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React78__namespace.useState(false);
-    const [_open, _setOpen] = React78__namespace.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React80__namespace.useState(false);
+    const [_open, _setOpen] = React80__namespace.useState(defaultOpen);
     const open = openProp != null ? openProp : _open;
-    const setOpen = React78__namespace.useCallback(
+    const setOpen = React80__namespace.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -10222,10 +10684,10 @@ var SidebarProvider = React78__namespace.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React78__namespace.useCallback(() => {
+    const toggleSidebar = React80__namespace.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React78__namespace.useEffect(() => {
+    React80__namespace.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -10236,7 +10698,7 @@ var SidebarProvider = React78__namespace.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React78__namespace.useMemo(
+    const contextValue = React80__namespace.useMemo(
       () => ({
         state,
         open,
@@ -10267,7 +10729,7 @@ var SidebarProvider = React78__namespace.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React78__namespace.forwardRef(
+var Sidebar = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       side = "left",
@@ -10366,7 +10828,7 @@ var Sidebar = React78__namespace.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React78__namespace.forwardRef((_a, ref) => {
+var SidebarTrigger = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10391,7 +10853,7 @@ var SidebarTrigger = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React78__namespace.forwardRef((_a, ref) => {
+var SidebarRail = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10416,7 +10878,7 @@ var SidebarRail = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React78__namespace.forwardRef((_a, ref) => {
+var SidebarInset = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "main",
@@ -10431,7 +10893,7 @@ var SidebarInset = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React78__namespace.forwardRef((_a, ref) => {
+var SidebarInput = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
@@ -10446,7 +10908,7 @@ var SidebarInput = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React78__namespace.forwardRef((_a, ref) => {
+var SidebarHeader = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10458,7 +10920,7 @@ var SidebarHeader = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React78__namespace.forwardRef((_a, ref) => {
+var SidebarFooter = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10470,7 +10932,7 @@ var SidebarFooter = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React78__namespace.forwardRef((_a, ref) => {
+var SidebarSeparator = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Separator3,
@@ -10482,7 +10944,7 @@ var SidebarSeparator = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React78__namespace.forwardRef((_a, ref) => {
+var SidebarContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10497,7 +10959,7 @@ var SidebarContent = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React78__namespace.forwardRef((_a, ref) => {
+var SidebarGroup = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10509,7 +10971,7 @@ var SidebarGroup = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React78__namespace.forwardRef((_a, ref) => {
+var SidebarGroupLabel = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? reactSlot.Slot : "div";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10526,7 +10988,7 @@ var SidebarGroupLabel = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React78__namespace.forwardRef((_a, ref) => {
+var SidebarGroupAction = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10545,7 +11007,7 @@ var SidebarGroupAction = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React78__namespace.forwardRef((_a, ref) => {
+var SidebarGroupContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10557,7 +11019,7 @@ var SidebarGroupContent = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenu = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -10569,7 +11031,7 @@ var SidebarMenu = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
@@ -10601,7 +11063,7 @@ var sidebarMenuButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SidebarMenuButton = React78__namespace.forwardRef(
+var SidebarMenuButton = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       asChild = false,
@@ -10652,7 +11114,7 @@ var SidebarMenuButton = React78__namespace.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuAction = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false, showOnHover = false } = _b, props = __objRest(_b, ["className", "asChild", "showOnHover"]);
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10675,7 +11137,7 @@ var SidebarMenuAction = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuBadge = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10695,10 +11157,10 @@ var SidebarMenuBadge = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSkeleton = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, showIcon = false } = _b, props = __objRest(_b, ["className", "showIcon"]);
-  const id = React78__namespace.useId();
-  const width = React78__namespace.useMemo(() => {
+  const id = React80__namespace.useId();
+  const width = React80__namespace.useMemo(() => {
     const hash = id.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
     return `${hash % 40 + 50}%`;
   }, [id]);
@@ -10732,7 +11194,7 @@ var SidebarMenuSkeleton = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSub = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -10748,12 +11210,12 @@ var SidebarMenuSub = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSubItem = React80__namespace.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadValues({ ref }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSubButton = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { asChild = false, size = "md", isActive, className } = _b, props = __objRest(_b, ["asChild", "size", "isActive", "className"]);
   const Comp = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10793,7 +11255,7 @@ var sidebarCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SidebarCard = React78__namespace.forwardRef(
+var SidebarCard = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10832,7 +11294,7 @@ var sidebarMenuItemVariants = classVarianceAuthority.cva("", {
     variant: "default"
   }
 });
-var SidebarMenuItem2 = React78__namespace.forwardRef(
+var SidebarMenuItem2 = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11017,6 +11479,198 @@ var SidebarMenuItem2 = React78__namespace.forwardRef(
   }
 );
 SidebarMenuItem2.displayName = "SidebarMenuItem";
+var DefaultLogo = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-sui-bg-state-primary", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-layout-grid-fill text-md leading-none text-icon-on-primary", "aria-hidden": "true" }) });
+var CardFooter2 = ({
+  text,
+  linkText,
+  onClick,
+  centered
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-1 text-sm leading-5", centered && "justify-center"), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal text-sui-text-muted", children: text }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "font-medium text-sui-text-informative [@media(hover:hover)]:hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default rounded-sm",
+      children: linkText
+    }
+  )
+] });
+var SignInCard = React80__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      variant = "simple",
+      title = "Sign in to Sort UI",
+      subtitle = "Welcome back! Please enter your details.",
+      logo,
+      showRememberMe = true,
+      showResetPassword = true,
+      showSso = true,
+      socialProviders = ["apple", "google", "twitter"],
+      ctaLabel,
+      footerText = "New to Sort UI?",
+      footerLinkText = "Sign up",
+      onFooterClick
+    } = _b, props = __objRest(_b, [
+      "className",
+      "variant",
+      "title",
+      "subtitle",
+      "logo",
+      "showRememberMe",
+      "showResetPassword",
+      "showSso",
+      "socialProviders",
+      "ctaLabel",
+      "footerText",
+      "footerLinkText",
+      "onFooterClick"
+    ]);
+    const logoNode = logo != null ? logo : /* @__PURE__ */ jsxRuntime.jsx(DefaultLogo, {});
+    const isCentered = variant === "centered" || variant === "social";
+    const Header2 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-3", isCentered && "items-center"), children: [
+      logoNode,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", isCentered && "items-center text-center"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-md font-semibold leading-6 text-sui-text-default", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-normal leading-5 text-sui-text-muted", children: subtitle })
+      ] })
+    ] });
+    const FormFields = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputField,
+        {
+          label: "Email address or username",
+          placeholder: "",
+          inputStyle: "shadow",
+          type: "email",
+          autoComplete: "email"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputField,
+        {
+          label: "Password",
+          placeholder: "",
+          inputStyle: "shadow",
+          type: "password",
+          autoComplete: "current-password",
+          labelSupportText: showResetPassword ? "Reset password" : void 0,
+          tailIcon: showResetPassword ? void 0 : void 0
+        }
+      ),
+      showRememberMe && /* @__PURE__ */ jsxRuntime.jsx(CheckboxWithText, { label: "Remember me" })
+    ] });
+    if (variant === "simple") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(
+            "flex w-[400px] flex-col gap-6 overflow-clip rounded-xl bg-sui-bg-card",
+            "pt-9 pb-6 px-9",
+            "shadow-modal-sm",
+            className
+          )
+        }, props), {
+          children: [
+            Header2,
+            FormFields,
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", size: "md", children: ctaLabel != null ? ctaLabel : "Sign In" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(CardFooter2, { text: footerText, linkText: footerLinkText, onClick: onFooterClick })
+          ]
+        })
+      );
+    }
+    if (variant === "centered") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(
+            "flex w-[400px] flex-col gap-6 overflow-clip rounded-xl bg-sui-bg-card",
+            "pt-9 pb-6 px-9",
+            "shadow-modal-sm",
+            className
+          )
+        }, props), {
+          children: [
+            Header2,
+            FormFields,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", size: "md", children: ctaLabel != null ? ctaLabel : "Sign In" }),
+              showSso && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", className: "w-full", size: "md", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-key-2-line", "aria-hidden": "true" }),
+                "Single sign-on (SSO)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(CardFooter2, { text: footerText, linkText: footerLinkText, onClick: onFooterClick, centered: true })
+          ]
+        })
+      );
+    }
+    if (variant === "social") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(
+            "flex w-[400px] flex-col overflow-clip rounded-xl bg-sui-bg-card-subtle",
+            "shadow-modal-sm",
+            className
+          )
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b border-sui-border-default bg-sui-bg-card p-9", children: [
+              Header2,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+                socialProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: socialProviders.map((brand) => /* @__PURE__ */ jsxRuntime.jsx(SocialButton, { brand, variant: "secondary", className: "w-full" }, brand)) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Divider, { type: "text-center", label: "or" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", size: "md", children: ctaLabel != null ? ctaLabel : "Sign in with email" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex px-9 py-6 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CardFooter2, { text: footerText, linkText: footerLinkText, onClick: onFooterClick, centered: true }) })
+          ]
+        })
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "flex w-[400px] flex-col overflow-clip rounded-xl bg-sui-bg-card-subtle",
+          "shadow-modal-sm",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 border-b border-sui-border-default bg-sui-bg-card p-9", children: [
+            Header2,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 pt-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                InputField,
+                {
+                  label: "Email address",
+                  placeholder: "",
+                  inputStyle: "shadow",
+                  type: "email",
+                  autoComplete: "email"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", size: "md", children: ctaLabel != null ? ctaLabel : "Continue" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex px-9 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(CardFooter2, { text: footerText, linkText: footerLinkText, onClick: onFooterClick }) })
+        ]
+      })
+    );
+  }
+);
+SignInCard.displayName = "SignInCard";
 function clamp2(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -11028,7 +11682,7 @@ function percent2(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var Slider = React78__namespace.forwardRef(
+var Slider = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11061,12 +11715,12 @@ var Slider = React78__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78__namespace.useRef(null);
-    const [isDragging, setIsDragging] = React78__namespace.useState(false);
-    const [isFocused, setIsFocused] = React78__namespace.useState(false);
+    const trackRef = React80__namespace.useRef(null);
+    const [isDragging, setIsDragging] = React80__namespace.useState(false);
+    const [isFocused, setIsFocused] = React80__namespace.useState(false);
     const pct = percent2(value, min, max);
     const displayValue = formatValue ? formatValue(value) : `${value}`;
-    const getValueFromPointer = React78__namespace.useCallback(
+    const getValueFromPointer = React80__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -11077,7 +11731,7 @@ var Slider = React78__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const handlePointerDown = React78__namespace.useCallback(
+    const handlePointerDown = React80__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -11088,7 +11742,7 @@ var Slider = React78__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerMove = React78__namespace.useCallback(
+    const handlePointerMove = React80__namespace.useCallback(
       (e) => {
         if (!isDragging || disabled) return;
         const newValue = getValueFromPointer(e.clientX);
@@ -11096,10 +11750,10 @@ var Slider = React78__namespace.forwardRef(
       },
       [isDragging, disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerUp = React78__namespace.useCallback(() => {
+    const handlePointerUp = React80__namespace.useCallback(() => {
       setIsDragging(false);
     }, []);
-    const handleKeyDown = React78__namespace.useCallback(
+    const handleKeyDown = React80__namespace.useCallback(
       (e) => {
         if (disabled) return;
         let newValue = value;
@@ -11126,7 +11780,7 @@ var Slider = React78__namespace.forwardRef(
       },
       [disabled, value, step, min, max, onValueChange]
     );
-    const tickLabels = React78__namespace.useMemo(() => {
+    const tickLabels = React80__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const count2 = pointCount;
       const labels = [];
@@ -11165,7 +11819,7 @@ var Slider = React78__namespace.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "absolute left-0 top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                    className: "absolute left-0 top-1/2 h-1 -translate-y-1/2 bg-informative",
                     style: { width: `${pct}%` }
                   }
                 ),
@@ -11220,7 +11874,7 @@ Slider.displayName = "Slider";
 function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-var SliderInput = React78__namespace.forwardRef(
+var SliderInput = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11243,8 +11897,8 @@ var SliderInput = React78__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const [internalValue, setInternalValue] = React78__namespace.useState(value);
-    React78__namespace.useEffect(() => {
+    const [internalValue, setInternalValue] = React80__namespace.useState(value);
+    React80__namespace.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const commit = (newVal) => {
@@ -11351,7 +12005,7 @@ function percent3(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var SliderRange = React78__namespace.forwardRef(
+var SliderRange = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11384,15 +12038,15 @@ var SliderRange = React78__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78__namespace.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React78__namespace.useState(null);
-    const [focusedHandle, setFocusedHandle] = React78__namespace.useState(null);
+    const trackRef = React80__namespace.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React80__namespace.useState(null);
+    const [focusedHandle, setFocusedHandle] = React80__namespace.useState(null);
     const [rangeMin, rangeMax] = value;
     const pctMin = percent3(rangeMin, min, max);
     const pctMax = percent3(rangeMax, min, max);
     const fmt = (v) => formatValue ? formatValue(v) : `${v}`;
     const displayValue = `${fmt(rangeMin)} \u2013 ${fmt(rangeMax)}`;
-    const getValueFromPointer = React78__namespace.useCallback(
+    const getValueFromPointer = React80__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -11403,7 +12057,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React78__namespace.useCallback(
+    const closestHandle = React80__namespace.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -11411,7 +12065,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React78__namespace.useCallback(
+    const updateValue = React80__namespace.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp4(newVal, min, rangeMax);
@@ -11423,7 +12077,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React78__namespace.useCallback(
+    const handlePointerDown = React80__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -11435,7 +12089,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React78__namespace.useCallback(
+    const handlePointerMove = React80__namespace.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -11443,10 +12097,10 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React78__namespace.useCallback(() => {
+    const handlePointerUp = React80__namespace.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React78__namespace.useCallback(
+    const makeKeyHandler = React80__namespace.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -11474,7 +12128,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React78__namespace.useMemo(() => {
+    const tickLabels = React80__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -11512,7 +12166,7 @@ var SliderRange = React78__namespace.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "absolute top-1/2 h-1 -translate-y-1/2 bg-sui-bg-basic-gray-accent",
+                    className: "absolute top-1/2 h-1 -translate-y-1/2 bg-informative",
                     style: { left: `${pctMin}%`, right: `${100 - pctMax}%` }
                   }
                 ),
@@ -11591,7 +12245,7 @@ var SliderRange = React78__namespace.forwardRef(
   }
 );
 SliderRange.displayName = "SliderRange";
-var SliderRangeInput = React78__namespace.forwardRef(
+var SliderRangeInput = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11725,7 +12379,7 @@ var Toaster = (_a) => {
         classNames: {
           toast: "group toast group-[.toaster]:bg-sui-bg-default group-[.toaster]:text-sui-text-default group-[.toaster]:border-sui-border-default group-[.toaster]:shadow-modal-sm",
           description: "group-[.toast]:text-sui-text-muted",
-          actionButton: "group-[.toast]:bg-sui-bg-state-primary group-[.toast]:text-sui-text-white-default",
+          actionButton: "group-[.toast]:bg-sui-bg-state-primary group-[.toast]:text-sui-text-on-primary",
           cancelButton: "group-[.toast]:bg-sui-bg-subtle group-[.toast]:text-sui-text-muted"
         }
       }
@@ -11733,7 +12387,7 @@ var Toaster = (_a) => {
   );
 };
 var ToastProvider = ToastPrimitives__namespace.Provider;
-var ToastViewport = React78__namespace.forwardRef((_a, ref) => {
+var ToastViewport = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Viewport,
@@ -11761,7 +12415,7 @@ var toastVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toast = React78__namespace.forwardRef((_a, ref) => {
+var Toast = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Root,
@@ -11772,7 +12426,7 @@ var Toast = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives__namespace.Root.displayName;
-var ToastAction = React78__namespace.forwardRef((_a, ref) => {
+var ToastAction = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Action,
@@ -11786,7 +12440,7 @@ var ToastAction = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives__namespace.Action.displayName;
-var ToastClose = React78__namespace.forwardRef((_a, ref) => {
+var ToastClose = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Close,
@@ -11803,7 +12457,7 @@ var ToastClose = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 ToastClose.displayName = ToastPrimitives__namespace.Close.displayName;
-var ToastTitle = React78__namespace.forwardRef((_a, ref) => {
+var ToastTitle = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Title,
@@ -11814,7 +12468,7 @@ var ToastTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 ToastTitle.displayName = ToastPrimitives__namespace.Title.displayName;
-var ToastDescription = React78__namespace.forwardRef((_a, ref) => {
+var ToastDescription = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Description,
@@ -11919,8 +12573,8 @@ function toast(_a) {
   };
 }
 function useToast() {
-  const [state, setState] = React78__namespace.useState(memoryState);
-  React78__namespace.useEffect(() => {
+  const [state, setState] = React80__namespace.useState(memoryState);
+  React80__namespace.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -11951,7 +12605,7 @@ function Toaster2() {
     /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, {})
   ] });
 }
-var Switch = React78__namespace.forwardRef((_a, ref) => {
+var Switch = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SwitchPrimitives__namespace.Root,
@@ -12003,10 +12657,10 @@ var Switch = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 Switch.displayName = "Switch";
-var SwitchList = React78__namespace.forwardRef(
+var SwitchList = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React78__namespace.Children.toArray(children);
+    const items = React80__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -12034,7 +12688,7 @@ var SwitchList = React78__namespace.forwardRef(
   }
 );
 SwitchList.displayName = "SwitchList";
-var SwitchWithText = React78__namespace.forwardRef(
+var SwitchWithText = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12051,7 +12705,7 @@ var SwitchWithText = React78__namespace.forwardRef(
       "disabled",
       "id"
     ]);
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const switchId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -12108,7 +12762,7 @@ var SwitchWithText = React78__namespace.forwardRef(
   }
 );
 SwitchWithText.displayName = "SwitchWithText";
-var Table = React78__namespace.forwardRef((_a, ref) => {
+var Table = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
     "table",
@@ -12119,12 +12773,12 @@ var Table = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 Table.displayName = "Table";
-var TableHeader = React78__namespace.forwardRef((_a, ref) => {
+var TableHeader = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b [&_tr]:border-sui-border-default", className) }, props));
 });
 TableHeader.displayName = "TableHeader";
-var TableBody = React78__namespace.forwardRef((_a, ref) => {
+var TableBody = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tbody",
@@ -12135,7 +12789,7 @@ var TableBody = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 TableBody.displayName = "TableBody";
-var TableFooter = React78__namespace.forwardRef((_a, ref) => {
+var TableFooter = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tfoot",
@@ -12149,7 +12803,7 @@ var TableFooter = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 TableFooter.displayName = "TableFooter";
-var TableRow = React78__namespace.forwardRef((_a, ref) => {
+var TableRow = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
@@ -12163,7 +12817,7 @@ var TableRow = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = React78__namespace.forwardRef((_a, ref) => {
+var TableHead = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
@@ -12177,7 +12831,7 @@ var TableHead = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React78__namespace.forwardRef((_a, ref) => {
+var TableCell = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "td",
@@ -12188,7 +12842,7 @@ var TableCell = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React78__namespace.forwardRef((_a, ref) => {
+var TableCaption = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "caption",
@@ -12224,7 +12878,7 @@ var ariaSortMap2 = {
   desc: "descending",
   none: "none"
 };
-var TableHeaderItem = React78__namespace.forwardRef(
+var TableHeaderItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12340,7 +12994,7 @@ var tableItemVariants = classVarianceAuthority.cva("flex items-center px-2", {
     size: "lg"
   }
 });
-var TableItem = React78__namespace.forwardRef(
+var TableItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12424,7 +13078,7 @@ var TableItem = React78__namespace.forwardRef(
   }
 );
 TableItem.displayName = "TableItem";
-var TablePagination = React78__namespace.forwardRef(
+var TablePagination = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12511,7 +13165,7 @@ var tableRowSortVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TableRowSort = React78__namespace.forwardRef(
+var TableRowSort = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", striped, sticky, children } = _b, props = __objRest(_b, ["className", "variant", "striped", "sticky", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -12534,7 +13188,7 @@ var TableRowSort = React78__namespace.forwardRef(
 TableRowSort.displayName = "TableRowSort";
 var textWidths = ["w-20", "w-28", "w-24", "w-32", "w-16", "w-26", "w-22", "w-30"];
 var skeletonBg = "bg-sui-bg-basic-gray-alpha-4";
-var TableSkeletonRow = React78__namespace.forwardRef(
+var TableSkeletonRow = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, columns, rowCount = 5, size = "sm" } = _b, props = __objRest(_b, ["className", "columns", "rowCount", "size"]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className, "aria-hidden": "true" }, props), { children: Array.from({ length: rowCount }, (_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableRowSort, { variant: "default", children: columns.map((col, colIdx) => {
@@ -12584,12 +13238,12 @@ var tabListVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TabList = React78__namespace.forwardRef((_a, ref) => {
+var TabList = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "pill", shape = "pill", layout, children } = _b, props = __objRest(_b, ["className", "variant", "shape", "layout", "children"]);
   const childShape = variant === "segmented" && shape === "rounded" ? "rounded" : shape;
   const childRadiusOverride = variant === "segmented" && shape === "rounded" ? "rounded-sm" : void 0;
-  const enhancedChildren = React78__namespace.Children.map(children, (child) => {
-    if (!React78__namespace.isValidElement(child)) return child;
+  const enhancedChildren = React80__namespace.Children.map(children, (child) => {
+    if (!React80__namespace.isValidElement(child)) return child;
     const extraProps = {
       shape: childShape
     };
@@ -12597,7 +13251,7 @@ var TabList = React78__namespace.forwardRef((_a, ref) => {
       const existingClassName = child.props.className;
       extraProps.className = cn(existingClassName, childRadiusOverride);
     }
-    return React78__namespace.cloneElement(child, extraProps);
+    return React80__namespace.cloneElement(child, extraProps);
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
@@ -12659,7 +13313,7 @@ var tabItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TabItem = React78__namespace.forwardRef((_a, ref) => {
+var TabItem = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, shape, size } = _b, props = __objRest(_b, ["className", "shape", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Trigger,
@@ -12671,35 +13325,35 @@ var TabItem = React78__namespace.forwardRef((_a, ref) => {
 });
 TabItem.displayName = "TabItem";
 var Tabs = TabsPrimitive4__namespace.Root;
-var TabsList = React78__namespace.forwardRef((_a, ref) => {
+var TabsList = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex h-10 items-center justify-center rounded-md bg-sui-bg-subtle p-1 text-sui-text-muted",
+        "inline-flex h-10 items-center justify-center rounded-md bg-sui-bg-state-soft p-1 text-sui-text-muted",
         className
       )
     }, props)
   );
 });
 TabsList.displayName = TabsPrimitive4__namespace.List.displayName;
-var TabsTrigger = React78__namespace.forwardRef((_a, ref) => {
+var TabsTrigger = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Trigger,
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-sui-bg-default transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 disabled:text-sui-text-hint disabled:pointer-events-none data-[state=active]:bg-sui-bg-default data-[state=active]:text-sui-text-default data-[state=active]:shadow-sm",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-sui-bg-default transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 disabled:text-sui-text-hint disabled:pointer-events-none [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-default data-[state=active]:bg-sui-bg-default data-[state=active]:text-sui-text-default data-[state=active]:shadow-default",
         className
       )
     }, props)
   );
 });
 TabsTrigger.displayName = TabsPrimitive4__namespace.Trigger.displayName;
-var TabsContent = React78__namespace.forwardRef((_a, ref) => {
+var TabsContent = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Content,
@@ -12743,7 +13397,7 @@ var textAreaContainerVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TextAreaField = React78__namespace.forwardRef(
+var TextAreaField = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12792,7 +13446,7 @@ var TextAreaField = React78__namespace.forwardRef(
       "spellCheck",
       "autoComplete"
     ]);
-    const generatedId = React78__namespace.useId();
+    const generatedId = React80__namespace.useId();
     const textAreaId = id || generatedId;
     const captionId = `${textAreaId}-caption`;
     const charCountId = `${textAreaId}-charcount`;
@@ -12800,8 +13454,8 @@ var TextAreaField = React78__namespace.forwardRef(
     const helperText = hasError ? error : caption;
     const hasActionBar = !!(leadActions || tailActions);
     const showCount = !!(showCharCount && maxLength);
-    const innerRef = React78__namespace.useRef(null);
-    React78__namespace.useImperativeHandle(ref, () => innerRef.current, []);
+    const innerRef = React80__namespace.useRef(null);
+    React80__namespace.useImperativeHandle(ref, () => innerRef.current, []);
     const focusTextareaOnDecorationClick = (e) => {
       var _a2;
       if (disabled) return;
@@ -12818,12 +13472,12 @@ var TextAreaField = React78__namespace.forwardRef(
       helperText ? captionId : null,
       showCount ? charCountId : null
     ].filter(Boolean).join(" ") || void 0;
-    const [charCount, setCharCount] = React78__namespace.useState(() => {
+    const [charCount, setCharCount] = React80__namespace.useState(() => {
       if (value !== void 0) return String(value).length;
       if (defaultValue !== void 0) return String(defaultValue).length;
       return 0;
     });
-    React78__namespace.useEffect(() => {
+    React80__namespace.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       }
@@ -13009,7 +13663,7 @@ var TextAreaField = React78__namespace.forwardRef(
   }
 );
 TextAreaField.displayName = "TextAreaField";
-var Textarea = React78__namespace.forwardRef((_a, ref) => {
+var Textarea = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, spellCheck } = _b, props = __objRest(_b, ["className", "spellCheck"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
@@ -13062,7 +13716,7 @@ var toggleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toggle = React78__namespace.forwardRef((_a, ref) => {
+var Toggle = React80__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TogglePrimitive__namespace.Root,
@@ -13074,7 +13728,7 @@ var Toggle = React78__namespace.forwardRef((_a, ref) => {
 });
 Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
 function useMergedRef(...refs) {
-  return React78__namespace.useCallback((node) => {
+  return React80__namespace.useCallback((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") ref(node);
       else if (ref && "current" in ref)
@@ -13103,13 +13757,13 @@ var chipSizeMap = {
   xs: "sm",
   "2xs": "sm"
 };
-var ToggleGroupContext = React78__namespace.createContext(null);
+var ToggleGroupContext = React80__namespace.createContext(null);
 function useToggleGroup() {
-  const ctx = React78__namespace.useContext(ToggleGroupContext);
+  const ctx = React80__namespace.useContext(ToggleGroupContext);
   if (!ctx) throw new Error("ToggleGroupItem must be used within a ToggleGroup");
   return ctx;
 }
-var ToggleGroup = React78__namespace.forwardRef(
+var ToggleGroup = React80__namespace.forwardRef(
   (props, ref) => {
     const {
       type,
@@ -13124,16 +13778,16 @@ var ToggleGroup = React78__namespace.forwardRef(
     const controlledValue = "value" in props ? props.value : void 0;
     const defaultValue = "defaultValue" in props ? props.defaultValue : void 0;
     const onValueChange = "onValueChange" in props ? props.onValueChange : void 0;
-    const [internalValue, setInternalValue] = React78__namespace.useState(
+    const [internalValue, setInternalValue] = React80__namespace.useState(
       defaultValue
     );
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const [rovingFocusValue, setRovingFocusValue] = React78__namespace.useState(null);
-    const itemRefs = React78__namespace.useRef(/* @__PURE__ */ new Map());
-    const itemValues = React78__namespace.useRef([]);
-    const [, notifyRegistration] = React78__namespace.useReducer((x) => x + 1, 0);
-    const isActive = React78__namespace.useCallback(
+    const [rovingFocusValue, setRovingFocusValue] = React80__namespace.useState(null);
+    const itemRefs = React80__namespace.useRef(/* @__PURE__ */ new Map());
+    const itemValues = React80__namespace.useRef([]);
+    const [, notifyRegistration] = React80__namespace.useReducer((x) => x + 1, 0);
+    const isActive = React80__namespace.useCallback(
       (itemValue) => {
         if (type === "single") return value === itemValue;
         if (type === "multiple" && Array.isArray(value)) return value.includes(itemValue);
@@ -13141,7 +13795,7 @@ var ToggleGroup = React78__namespace.forwardRef(
       },
       [type, value]
     );
-    const toggle = React78__namespace.useCallback(
+    const toggle = React80__namespace.useCallback(
       (itemValue) => {
         if (type === "single") {
           const newValue = value === itemValue ? void 0 : itemValue;
@@ -13185,7 +13839,7 @@ var ToggleGroup = React78__namespace.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React78__namespace.forwardRef(
+var ToggleGroupItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: itemValue,
@@ -13220,9 +13874,9 @@ var ToggleGroupItem = React78__namespace.forwardRef(
     const disabled = ctx.disabled || itemDisabled;
     const resolvedSize = bgSize != null ? bgSize : "lg";
     const chipSize = chipSizeMap[resolvedSize];
-    const internalRef = React78__namespace.useRef(null);
+    const internalRef = React80__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    React78__namespace.useEffect(() => {
+    React80__namespace.useEffect(() => {
       const el = internalRef.current;
       if (!el) return;
       ctx.itemRefs.current.set(itemValue, el);
@@ -13358,8 +14012,8 @@ var ToggleGroupItem = React78__namespace.forwardRef(
             "bg-sui-bg-state-ghost text-sui-text-muted [&_svg]:text-icon-default-muted",
             "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:[&_svg]:text-icon-default-subtle",
             "active:bg-sui-bg-state-ghost-press",
-            // Selected state
-            active && "bg-sui-bg-badge-blue text-sui-bg-basic-blue-strong [&_svg]:text-sui-bg-basic-blue-strong",
+            // Selected state — bg-badge-blue has no theme-adaptive equivalent yet (stays a light-blue tint in Neutral Violet); text/icon use the semantic informative token so they shift blue → orange
+            active && "bg-sui-bg-badge-blue text-sui-text-informative [&_svg]:text-sui-text-informative",
             // Disabled
             disabled && "opacity-50 cursor-not-allowed pointer-events-none",
             // Size
@@ -13439,7 +14093,7 @@ var containedInnerVariants = classVarianceAuthority.cva(
     "group-hover:bg-sui-bg-state-secondary-hover group-active:bg-sui-bg-state-secondary-press"
   ]
 );
-var Userbar = React78__namespace.forwardRef(
+var Userbar = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13548,7 +14202,7 @@ var Userbar = React78__namespace.forwardRef(
   }
 );
 Userbar.displayName = "Userbar";
-var VerticalStepperItem = React78__namespace.forwardRef(
+var VerticalStepperItem = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13684,7 +14338,7 @@ var VerticalStepperItem = React78__namespace.forwardRef(
   }
 );
 VerticalStepperItem.displayName = "VerticalStepperItem";
-var VerticalStepper = React78__namespace.forwardRef(
+var VerticalStepper = React80__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13726,7 +14380,10 @@ var VerticalStepper = React78__namespace.forwardRef(
             "li",
             {
               "aria-current": state === "current" ? "step" : void 0,
-              className: onStepClick ? "cursor-pointer" : void 0,
+              className: cn(
+                onStepClick && "cursor-pointer",
+                onStepClick && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default focus-visible:rounded-sm"
+              ),
               onClick: onStepClick ? () => onStepClick(index) : void 0,
               onKeyDown: onStepClick ? (e) => {
                 if (e.key === "Enter" || e.key === " ") {
@@ -13783,6 +14440,15 @@ exports.AlertDialogPortal = AlertDialogPortal;
 exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.AlertTitle = AlertTitle;
+exports.Attachment = Attachment;
+exports.AttachmentAction = AttachmentAction;
+exports.AttachmentActions = AttachmentActions;
+exports.AttachmentContent = AttachmentContent;
+exports.AttachmentDescription = AttachmentDescription;
+exports.AttachmentGroup = AttachmentGroup;
+exports.AttachmentMedia = AttachmentMedia;
+exports.AttachmentTitle = AttachmentTitle;
+exports.AttachmentTrigger = AttachmentTrigger;
 exports.Avatar = Avatar;
 exports.AvatarButton = AvatarButton;
 exports.AvatarFallback = AvatarFallback;
@@ -13909,6 +14575,7 @@ exports.Paginator = Paginator;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.ProductCard = ProductCard;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;
 exports.RadialProgressBar = RadialProgressBar;
@@ -13974,6 +14641,7 @@ exports.SidebarProvider = SidebarProvider;
 exports.SidebarRail = SidebarRail;
 exports.SidebarSeparator = SidebarSeparator;
 exports.SidebarTrigger = SidebarTrigger;
+exports.SignInCard = SignInCard;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.SliderHandle = SliderHandle;
@@ -14031,6 +14699,7 @@ exports.Userbar = Userbar;
 exports.VerticalStepper = VerticalStepper;
 exports.VerticalStepperItem = VerticalStepperItem;
 exports.accordionItemVariants = accordionItemVariants;
+exports.attachmentVariants = attachmentVariants;
 exports.avatarButtonVariants = avatarButtonVariants;
 exports.avatarVariants = avatarVariants;
 exports.buttonGroupItemVariants = buttonGroupItemVariants;