@maxsteinwender/sort-ui 1.2.0 → 1.4.1

package/dist/index.mjs

@@ -1,12 +1,12 @@
 "use client";
-import * as React78 from 'react';
+import * as React80 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { Slot } from '@radix-ui/react-slot';
+import { Slot, Slottable } from '@radix-ui/react-slot';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import * as RechartsPrimitive from 'recharts';
@@ -118,7 +118,7 @@ var accordionItemVariants = cva(
     }
   }
 );
-var AccordionItem = React78.forwardRef((_a, ref) => {
+var AccordionItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Item,
@@ -129,7 +129,7 @@ var AccordionItem = React78.forwardRef((_a, ref) => {
   );
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React78.forwardRef((_a, ref) => {
+var AccordionTrigger = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
@@ -151,7 +151,7 @@ var AccordionTrigger = React78.forwardRef((_a, ref) => {
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React78.forwardRef((_a, ref) => {
+var AccordionContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
@@ -196,7 +196,7 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React78.forwardRef((_a, ref) => {
+var Alert = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -208,7 +208,7 @@ var Alert = React78.forwardRef((_a, ref) => {
   );
 });
 Alert.displayName = "Alert";
-var AlertTitle = React78.forwardRef((_a, ref) => {
+var AlertTitle = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "h5",
@@ -219,7 +219,7 @@ var AlertTitle = React78.forwardRef((_a, ref) => {
   );
 });
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React78.forwardRef((_a, ref) => {
+var AlertDescription = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -231,8 +231,8 @@ var AlertDescription = React78.forwardRef((_a, ref) => {
 });
 AlertDescription.displayName = "AlertDescription";
 function useDevWarnIconOnlyAriaLabel(isIconOnly, ariaLabel, ariaLabelledBy, componentName) {
-  const warnedRef = React78.useRef(false);
-  React78.useEffect(() => {
+  const warnedRef = React80.useRef(false);
+  React80.useEffect(() => {
     if (process.env.NODE_ENV === "production") return;
     if (warnedRef.current) return;
     if (!isIconOnly) return;
@@ -250,8 +250,9 @@ var buttonVariants = 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
@@ -306,6 +307,10 @@ var buttonBadgeVariants = 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: {
@@ -320,7 +325,7 @@ var buttonBadgeVariants = cva(
   }
 );
 var badgeColorMap = {
-  default: "inverse",
+  default: "on-primary",
   destructive: "inverse",
   secondary: "neutral",
   outline: "neutral",
@@ -346,7 +351,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",
@@ -354,7 +359,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",
@@ -362,7 +367,7 @@ var loadingTextColorMap = {
   "ghost-muted": "text-sui-text-muted"
 };
 var loadingShadowVariants = /* @__PURE__ */ new Set(["default", "outline", "destructive"]);
-var Button = React78.forwardRef(
+var Button = React80.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 ? Slot : "button";
@@ -433,7 +438,7 @@ Button.displayName = "Button";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React78.forwardRef((_a, ref) => {
+var AlertDialogOverlay = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Overlay,
@@ -448,7 +453,7 @@ var AlertDialogOverlay = React78.forwardRef((_a, ref) => {
   );
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React78.forwardRef((_a, ref) => {
+var AlertDialogContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
@@ -499,7 +504,7 @@ var AlertDialogFooter = (_a) => {
   );
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React78.forwardRef((_a, ref) => {
+var AlertDialogTitle = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Title,
@@ -510,7 +515,7 @@ var AlertDialogTitle = React78.forwardRef((_a, ref) => {
   );
 });
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React78.forwardRef((_a, ref) => {
+var AlertDialogDescription = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Description,
@@ -521,7 +526,7 @@ var AlertDialogDescription = React78.forwardRef((_a, ref) => {
   );
 });
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React78.forwardRef((_a, ref) => {
+var AlertDialogAction = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Action,
@@ -532,7 +537,7 @@ var AlertDialogAction = React78.forwardRef((_a, ref) => {
   );
 });
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React78.forwardRef((_a, ref) => {
+var AlertDialogCancel = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Cancel,
@@ -547,6 +552,228 @@ var AlertDialogCancel = React78.forwardRef((_a, ref) => {
   );
 });
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+var attachmentVariants = 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.createContext({
+  size: "default",
+  state: "done"
+});
+var Attachment = React80.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__ */ jsx(AttachmentContext.Provider, { value: { size: resolvedSize, state: resolvedState }, children: /* @__PURE__ */ 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.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant = "icon", children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
+    const { size } = React80.useContext(AttachmentContext);
+    return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { size, state } = React80.useContext(AttachmentContext);
+  const isShimmering = state === "uploading" || state === "processing";
+  return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  const { state } = React80.useContext(AttachmentContext);
+  const icon = stateIcon[state];
+  return /* @__PURE__ */ 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__ */ jsx("i", { className: cn(icon, "leading-none"), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children })
+      ]
+    })
+  );
+});
+AttachmentDescription.displayName = "AttachmentDescription";
+var AttachmentActions = React80.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("relative flex items-center gap-1 shrink-0", className)
+    }, props)
+  );
+});
+AttachmentActions.displayName = "AttachmentActions";
+var AttachmentAction = React80.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, size = "2xs", onClick } = _b, props = __objRest(_b, ["className", "size", "onClick"]);
+    return /* @__PURE__ */ 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.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ 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",
@@ -571,11 +798,11 @@ var awayIconSize = {
   "lg": "14px",
   "default": "16px"
 };
-var StatusBadge = React78.forwardRef(
+var StatusBadge = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant, size = "default", src, className } = _b, props = __objRest(_b, ["variant", "size", "src", "className"]);
-    const [imgError, setImgError] = React78.useState(false);
-    React78.useEffect(() => {
+    const [imgError, setImgError] = React80.useState(false);
+    React80.useEffect(() => {
       setImgError(false);
     }, [src]);
     const sizeClass = containerSize[size];
@@ -788,12 +1015,12 @@ function extractInitials(value) {
   }
   return trimmed.slice(0, 2).toUpperCase();
 }
-var AvatarContext = React78.createContext({
+var AvatarContext = React80.createContext({
   size: "md",
   shape: "circular",
   color: "gray"
 });
-var Avatar = React78.forwardRef((_a, ref) => {
+var Avatar = React80.forwardRef((_a, ref) => {
   var _b = _a, {
     className,
     size = "md",
@@ -947,7 +1174,7 @@ var Avatar = React78.forwardRef((_a, ref) => {
   ) });
 });
 Avatar.displayName = "Avatar";
-var AvatarImage = React78.forwardRef((_a, ref) => {
+var AvatarImage = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AvatarPrimitive.Image,
@@ -958,10 +1185,10 @@ var AvatarImage = React78.forwardRef((_a, ref) => {
   );
 });
 AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React78.forwardRef((_a, ref) => {
+var AvatarFallback = React80.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.useContext(AvatarContext);
+  const { size, shape, color } = React80.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";
@@ -1011,7 +1238,7 @@ var avatarButtonVariants = cva(
     }
   }
 );
-var AvatarButton = React78.forwardRef(
+var AvatarButton = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1105,7 +1332,7 @@ var paddingBySize = {
   "2xl": "pr-sui-10",
   "3xl": "pr-sui-12"
 };
-var AvatarGroup = React78.forwardRef(
+var AvatarGroup = React80.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";
@@ -1147,7 +1374,7 @@ var AvatarGroup = React78.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AvatarUpload = React78.forwardRef(
+var AvatarUpload = React80.forwardRef(
   ({
     src,
     alt = "",
@@ -1240,7 +1467,7 @@ var controlButtonVariants = cva(
     }
   }
 );
-var ControlButton = React78.forwardRef(
+var ControlButton = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1411,12 +1638,12 @@ function Badge(_a) {
     })
   );
 }
-var Breadcrumb = React78.forwardRef((_a, ref) => {
+var Breadcrumb = React80.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx("nav", __spreadValues({ ref, "aria-label": "breadcrumb" }, props));
 });
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React78.forwardRef((_a, ref) => {
+var BreadcrumbList = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ol",
@@ -1430,7 +1657,7 @@ var BreadcrumbList = React78.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React78.forwardRef((_a, ref) => {
+var BreadcrumbItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "li",
@@ -1441,7 +1668,7 @@ var BreadcrumbItem = React78.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React78.forwardRef((_a, ref) => {
+var BreadcrumbLink = React80.forwardRef((_a, ref) => {
   var _b = _a, { asChild, className } = _b, props = __objRest(_b, ["asChild", "className"]);
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
@@ -1457,7 +1684,7 @@ var BreadcrumbLink = React78.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React78.forwardRef((_a, ref) => {
+var BreadcrumbPage = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "span",
@@ -1529,7 +1756,7 @@ function BreadcrumbDivider({ variant }) {
     variant === "dot" && /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-sui-text-muted" })
   ] });
 }
-var SortBreadcrumb = React78.forwardRef(
+var SortBreadcrumb = React80.forwardRef(
   ({ items, variant = "slash", className }, ref) => {
     return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx(
       "ol",
@@ -1540,7 +1767,7 @@ var SortBreadcrumb = React78.forwardRef(
         ),
         children: items.map((item, index) => {
           const isLast = index === items.length - 1;
-          return /* @__PURE__ */ jsxs(React78.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React80.Fragment, { children: [
             /* @__PURE__ */ jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsx(
               SortBreadcrumbItem,
               __spreadProps(__spreadValues({}, item), {
@@ -1632,7 +1859,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.forwardRef(
+var ButtonGroup = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "lg", orientation = "horizontal", className, children } = _b, props = __objRest(_b, ["size", "orientation", "className", "children"]);
     const isVertical = orientation === "vertical";
@@ -1651,9 +1878,9 @@ var ButtonGroup = React78.forwardRef(
           className
         )
       }, props), {
-        children: React78.Children.map(children, (child, index) => {
-          if (React78.isValidElement(child)) {
-            return React78.cloneElement(
+        children: React80.Children.map(children, (child, index) => {
+          if (React80.isValidElement(child)) {
+            return React80.cloneElement(
               child,
               {
                 showSeparator: index > 0,
@@ -1723,7 +1950,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.forwardRef(
+var ButtonGroupItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -1811,7 +2038,7 @@ var filterButtonVariants = 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.forwardRef(
+var FilterButton = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2001,7 +2228,7 @@ var underlineOffsetMap = {
   md: "after:bottom-0",
   lg: "after:bottom-0"
 };
-var LinkButton = React78.forwardRef(
+var LinkButton = React80.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 ? Slot : "button";
@@ -2015,6 +2242,19 @@ var LinkButton = React78.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.isValidElement(children) ? children : null;
+    const content = asChildTarget ? /* @__PURE__ */ jsx(Slottable, { children: React80.cloneElement(
+      asChildTarget,
+      void 0,
+      /* @__PURE__ */ jsx("span", { className: underlineClassName, style: underlineStyle, children: asChildTarget.props.children })
+    ) }) : /* @__PURE__ */ jsx("span", { className: underlineClassName, style: underlineStyle, children });
     return /* @__PURE__ */ jsxs(
       Comp,
       __spreadProps(__spreadValues({
@@ -2034,19 +2274,7 @@ var LinkButton = React78.forwardRef(
       }, props), {
         children: [
           leadIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0 text-md leading-none [&_svg]:size-4", iconColor), children: leadIcon }),
-          /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0 text-md leading-none [&_svg]:size-4", iconColor), children: tailIcon })
         ]
       })
@@ -2084,7 +2312,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.forwardRef(
+var SocialButton = React80.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 ? Slot : "button";
@@ -2289,8 +2517,8 @@ function CalendarDayButton(_a) {
     "modifiers"
   ]);
   const defaultClassNames = getDefaultClassNames();
-  const ref = React78.useRef(null);
-  React78.useEffect(() => {
+  const ref = React80.useRef(null);
+  React80.useEffect(() => {
     var _a2;
     if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [modifiers.focused]);
@@ -2362,7 +2590,7 @@ var cardVariants = cva(
     }
   }
 );
-var Card = React78.forwardRef(
+var Card = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, interactive, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "interactive", "asChild"]);
     const Comp = asChild ? Slot : "div";
@@ -2385,7 +2613,7 @@ var Card = React78.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React78.forwardRef((_a, ref) => {
+var CardHeader = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2396,7 +2624,7 @@ var CardHeader = React78.forwardRef((_a, ref) => {
   );
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React78.forwardRef((_a, ref) => {
+var CardTitle = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2410,7 +2638,7 @@ var CardTitle = React78.forwardRef((_a, ref) => {
   );
 });
 CardTitle.displayName = "CardTitle";
-var CardDescription = React78.forwardRef((_a, ref) => {
+var CardDescription = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2421,12 +2649,12 @@ var CardDescription = React78.forwardRef((_a, ref) => {
   );
 });
 CardDescription.displayName = "CardDescription";
-var CardContent = React78.forwardRef((_a, ref) => {
+var CardContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React78.forwardRef((_a, ref) => {
+var CardFooter = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2437,7 +2665,7 @@ var CardFooter = React78.forwardRef((_a, ref) => {
   );
 });
 CardFooter.displayName = "CardFooter";
-var CardCover = React78.forwardRef(
+var CardCover = React80.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__ */ jsx(
@@ -2458,17 +2686,17 @@ var CardCover = React78.forwardRef(
 );
 CardCover.displayName = "CardCover";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React78.createContext(null);
+var ChartContext = React80.createContext(null);
 function useChart() {
-  const context = React78.useContext(ChartContext);
+  const context = React80.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React78.forwardRef((_a, ref) => {
+var ChartContainer = React80.forwardRef((_a, ref) => {
   var _b = _a, { id, className, children, config } = _b, props = __objRest(_b, ["id", "className", "children", "config"]);
-  const uniqueId = React78.useId();
+  const uniqueId = React80.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2515,7 +2743,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
-var ChartTooltipContent = React78.forwardRef(
+var ChartTooltipContent = React80.forwardRef(
   ({
     active,
     payload,
@@ -2532,7 +2760,7 @@ var ChartTooltipContent = React78.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React78.useMemo(() => {
+    const tooltipLabel = React80.useMemo(() => {
       var _a;
       if (hideLabel || !(payload == null ? void 0 : payload.length)) {
         return null;
@@ -2629,7 +2857,7 @@ var ChartTooltipContent = React78.forwardRef(
 );
 ChartTooltipContent.displayName = "ChartTooltip";
 var ChartLegend = RechartsPrimitive.Legend;
-var ChartLegendContent = React78.forwardRef(
+var ChartLegendContent = React80.forwardRef(
   ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!(payload == null ? void 0 : payload.length)) {
@@ -2748,7 +2976,7 @@ var checkboxVariants = cva(
     }
   }
 );
-var Checkbox = React78.forwardRef((_a, ref) => {
+var Checkbox = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, variant, checked, indeterminate } = _b, props = __objRest(_b, ["className", "variant", "checked", "indeterminate"]);
   return /* @__PURE__ */ jsxs(
     CheckboxPrimitive.Root,
@@ -2870,7 +3098,7 @@ var checkboxCardVariants = cva(
     }
   }
 );
-var CheckboxCard = React78.forwardRef(
+var CheckboxCard = React80.forwardRef(
   ({
     title,
     description,
@@ -2884,7 +3112,7 @@ var CheckboxCard = React78.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React80.useId();
     const checkboxId = `checkbox-card-${generatedId}`;
     const titleId = `checkbox-card-title-${generatedId}`;
     const descriptionId = `checkbox-card-desc-${generatedId}`;
@@ -2906,7 +3134,7 @@ var CheckboxCard = React78.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
@@ -2980,10 +3208,10 @@ var CheckboxCard = React78.forwardRef(
   }
 );
 CheckboxCard.displayName = "CheckboxCard";
-var CheckboxList = React78.forwardRef(
+var CheckboxList = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React78.Children.toArray(children);
+    const items = React80.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -3025,7 +3253,7 @@ var checkboxWithTextVariants = cva(
     }
   }
 );
-var CheckboxWithText = React78.forwardRef(
+var CheckboxWithText = React80.forwardRef(
   ({
     label,
     description,
@@ -3038,7 +3266,7 @@ var CheckboxWithText = React78.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React80.useId();
     const checkboxId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -3122,10 +3350,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"
 };
@@ -3186,7 +3414,7 @@ var labelClasses2 = {
   md: "text-sm font-medium leading-5",
   sm: "text-xs font-medium leading-4"
 };
-var Chip = React78.forwardRef(
+var Chip = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -3215,7 +3443,7 @@ var Chip = React78.forwardRef(
       "className",
       "onClick"
     ]);
-    const [internalSelected, setInternalSelected] = React78.useState(false);
+    const [internalSelected, setInternalSelected] = React80.useState(false);
     const isControlled = controlledSelected !== void 0;
     const selected = isControlled ? controlledSelected : internalSelected;
     const handleClick = (e) => {
@@ -3313,7 +3541,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.forwardRef((_a, ref) => {
+var TooltipContent = React80.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__ */ jsxs(
     TooltipPrimitive.Content,
@@ -3349,7 +3577,7 @@ var underlineTabsListVariants = cva(
     }
   }
 );
-var UnderlineTabsList = React78.forwardRef((_a, ref) => {
+var UnderlineTabsList = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, layout, size } = _b, props = __objRest(_b, ["className", "layout", "size"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.List,
@@ -3396,7 +3624,7 @@ var underlineTabItemVariants = cva(
     }
   }
 );
-var UnderlineTabItem = React78.forwardRef(
+var UnderlineTabItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3434,7 +3662,7 @@ var UnderlineTabItem = React78.forwardRef(
 );
 UnderlineTabItem.displayName = "UnderlineTabItem";
 var DEFAULT_LANGUAGES = ["React", "JavaScript", "TypeScript", "Next.js"];
-var CodeBlock = React78.forwardRef(
+var CodeBlock = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3464,10 +3692,10 @@ var CodeBlock = React78.forwardRef(
       "showLineNumbers"
     ]);
     var _a2, _b2, _c, _d, _e, _f;
-    const [activeTab, setActiveTab] = React78.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
-    const [copied, setCopied] = React78.useState(false);
+    const [activeTab, setActiveTab] = React80.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
+    const [copied, setCopied] = React80.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.useCallback(() => {
+    const handleCopy = React80.useCallback(() => {
       if (onCopy) {
         onCopy();
       } else {
@@ -3658,7 +3886,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React78.forwardRef((_a, ref) => {
+var DialogOverlay = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
@@ -3672,7 +3900,7 @@ var DialogOverlay = React78.forwardRef((_a, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React78.forwardRef((_a, ref) => {
+var DialogContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -3731,7 +3959,7 @@ var DialogFooter = (_a) => {
   );
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React78.forwardRef((_a, ref) => {
+var DialogTitle = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Title,
@@ -3745,7 +3973,7 @@ var DialogTitle = React78.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React78.forwardRef((_a, ref) => {
+var DialogDescription = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Description,
@@ -3756,7 +3984,7 @@ var DialogDescription = React78.forwardRef((_a, ref) => {
   );
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var Command = React78.forwardRef((_a, ref) => {
+var Command = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1,
@@ -3774,7 +4002,7 @@ var CommandDialog = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsx(Dialog, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-card max-w-[560px]", children: /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+var CommandInput = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-sui-border-default px-3", "cmdk-input-wrapper": "", children: [
     /* @__PURE__ */ jsx("i", { className: "ri-search-line mr-2 shrink-0 text-icon-default-muted" }),
@@ -3791,7 +4019,7 @@ var CommandInput = React78.forwardRef((_a, ref) => {
   ] });
 });
 CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React78.forwardRef((_a, ref) => {
+var CommandList = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.List,
@@ -3802,7 +4030,7 @@ var CommandList = React78.forwardRef((_a, ref) => {
   );
 });
 CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React78.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React80.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   __spreadValues({
     ref,
@@ -3810,7 +4038,7 @@ var CommandEmpty = React78.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }, props)
 ));
 CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React78.forwardRef((_a, ref) => {
+var CommandGroup = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.Group,
@@ -3824,7 +4052,7 @@ var CommandGroup = React78.forwardRef((_a, ref) => {
   );
 });
 CommandGroup.displayName = Command$1.Group.displayName;
-var CommandSeparator = React78.forwardRef((_a, ref) => {
+var CommandSeparator = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.Separator,
@@ -3835,7 +4063,7 @@ var CommandSeparator = React78.forwardRef((_a, ref) => {
   );
 });
 CommandSeparator.displayName = Command$1.Separator.displayName;
-var CommandItem = React78.forwardRef((_a, ref) => {
+var CommandItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.Item,
@@ -3898,7 +4126,7 @@ var sliderHandleVariants = cva(
     }
   }
 );
-var SliderHandle = React78.forwardRef(
+var SliderHandle = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, state, value, showTooltip = false } = _b, props = __objRest(_b, ["className", "state", "value", "showTooltip"]);
     const isDisabled = state === "disabled";
@@ -3961,7 +4189,7 @@ function buildHistogramPath(data, width, height) {
   path += ` L ${width} ${height} Z`;
   return path;
 }
-var DataRangeSlider = React78.forwardRef(
+var DataRangeSlider = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3992,18 +4220,18 @@ var DataRangeSlider = React78.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React78.useState(null);
-    const [focusedHandle, setFocusedHandle] = React78.useState(null);
-    const clipId = React78.useId();
+    const trackRef = React80.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React80.useState(null);
+    const [focusedHandle, setFocusedHandle] = React80.useState(null);
+    const clipId = React80.useId();
     const [rangeMin, rangeMax] = value;
     const pctMin = percent(rangeMin, min, max);
     const pctMax = percent(rangeMax, min, max);
-    const fmt = React78.useCallback(
+    const fmt = React80.useCallback(
       (v) => formatValue ? formatValue(v) : `${v}`,
       [formatValue]
     );
-    const getValueFromPointer = React78.useCallback(
+    const getValueFromPointer = React80.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -4014,7 +4242,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React78.useCallback(
+    const closestHandle = React80.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -4022,7 +4250,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React78.useCallback(
+    const updateValue = React80.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp(newVal, min, rangeMax);
@@ -4034,7 +4262,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React78.useCallback(
+    const handlePointerDown = React80.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -4046,7 +4274,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React78.useCallback(
+    const handlePointerMove = React80.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -4054,10 +4282,10 @@ var DataRangeSlider = React78.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React78.useCallback(() => {
+    const handlePointerUp = React80.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React78.useCallback(
+    const makeKeyHandler = React80.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -4085,7 +4313,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React78.useMemo(() => {
+    const tickLabels = React80.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -4096,7 +4324,7 @@ var DataRangeSlider = React78.forwardRef(
     }, [pointLabels, pointCount, min, max, fmt]);
     const chartWidth = 320;
     const chartHeight = 32;
-    const histogramPath = React78.useMemo(
+    const histogramPath = React80.useMemo(
       () => buildHistogramPath(data, chartWidth, chartHeight),
       [data]
     );
@@ -4160,7 +4388,7 @@ var DataRangeSlider = React78.forwardRef(
                   /* @__PURE__ */ 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}%` }
                     }
                   ),
@@ -4243,7 +4471,7 @@ DataRangeSlider.displayName = "DataRangeSlider";
 var labelVariants = cva(
   "text-sm font-medium leading-5 text-sui-text-default"
 );
-var Label = React78.forwardRef((_a, ref) => {
+var Label = React80.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__ */ jsxs(
@@ -4304,7 +4532,7 @@ var inputContainerVariants = cva(
     }
   }
 );
-var InputField = React78.forwardRef(
+var InputField = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4367,15 +4595,15 @@ var InputField = React78.forwardRef(
       "spellCheck",
       "autoComplete"
     ]);
-    const generatedId = React78.useId();
+    const generatedId = React80.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.useRef(null);
-    React78.useImperativeHandle(ref, () => innerRef.current, []);
-    const [internalHasValue, setInternalHasValue] = React78.useState(false);
+    const innerRef = React80.useRef(null);
+    React80.useImperativeHandle(ref, () => innerRef.current, []);
+    const [internalHasValue, setInternalHasValue] = React80.useState(false);
     const hasValue = clearable ? typeof value === "string" ? value.length > 0 : internalHasValue : false;
     const handleChange = (e) => {
       if (clearable && value === void 0) {
@@ -4587,8 +4815,7 @@ var InputField = React78.forwardRef(
                 ),
                 children: tailAddon
               }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom" })
+            )
           ]
         }
       ),
@@ -4607,7 +4834,7 @@ var InputField = React78.forwardRef(
   }
 );
 InputField.displayName = "InputField";
-var DataRangeSliderInput = React78.forwardRef(
+var DataRangeSliderInput = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4727,7 +4954,7 @@ var DataRangeSliderInput = React78.forwardRef(
 DataRangeSliderInput.displayName = "DataRangeSliderInput";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React78.forwardRef((_a, ref) => {
+var PopoverContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
@@ -4750,7 +4977,7 @@ function DatePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78.useState(false);
+  const [open, setOpen] = React80.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4791,7 +5018,7 @@ function DateRangePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78.useState(false);
+  const [open, setOpen] = React80.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4842,7 +5069,7 @@ function DatePickerWithPresets({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78.useState(false);
+  const [open, setOpen] = React80.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4963,7 +5190,7 @@ function RequirementItem({ label, met }) {
     )
   ] });
 }
-var InputCaption = React78.forwardRef(
+var InputCaption = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "default",
@@ -5054,9 +5281,9 @@ var InputCaption = React78.forwardRef(
             className
           )
         }, props), {
-          children: React78.Children.map(children, (child) => {
-            if (!React78.isValidElement(child)) return child;
-            return React78.cloneElement(child, {
+          children: React80.Children.map(children, (child) => {
+            if (!React80.isValidElement(child)) return child;
+            return React80.cloneElement(child, {
               className: cn(
                 "flex-1",
                 child.props.className
@@ -5332,38 +5559,38 @@ function DatePickerInput({
   disabled = false,
   className
 }) {
-  const [calendarOpen, setCalendarOpen] = React78.useState(false);
+  const [calendarOpen, setCalendarOpen] = React80.useState(false);
   const hasError = !!error;
   const helperText = hasError ? error : caption;
   const singleSegments = dateToSegments(date);
-  const [singleDay, setSingleDay] = React78.useState(singleSegments.day);
-  const [singleMonth, setSingleMonth] = React78.useState(singleSegments.month);
-  const [singleYear, setSingleYear] = React78.useState(singleSegments.year);
+  const [singleDay, setSingleDay] = React80.useState(singleSegments.day);
+  const [singleMonth, setSingleMonth] = React80.useState(singleSegments.month);
+  const [singleYear, setSingleYear] = React80.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.useState(startSegments.day);
-  const [startMonth, setStartMonth] = React78.useState(startSegments.month);
-  const [startYear, setStartYear] = React78.useState(startSegments.year);
-  const [endDay, setEndDay] = React78.useState(endSegments.day);
-  const [endMonth, setEndMonth] = React78.useState(endSegments.month);
-  const [endYear, setEndYear] = React78.useState(endSegments.year);
-  const singleDayRef = React78.useRef(null);
-  const singleMonthRef = React78.useRef(null);
-  const singleYearRef = React78.useRef(null);
-  const startDayRef = React78.useRef(null);
-  const startMonthRef = React78.useRef(null);
-  const startYearRef = React78.useRef(null);
-  const endDayRef = React78.useRef(null);
-  const endMonthRef = React78.useRef(null);
-  const endYearRef = React78.useRef(null);
-  const calendarIconRef = React78.useRef(null);
-  React78.useEffect(() => {
+  const [startDay, setStartDay] = React80.useState(startSegments.day);
+  const [startMonth, setStartMonth] = React80.useState(startSegments.month);
+  const [startYear, setStartYear] = React80.useState(startSegments.year);
+  const [endDay, setEndDay] = React80.useState(endSegments.day);
+  const [endMonth, setEndMonth] = React80.useState(endSegments.month);
+  const [endYear, setEndYear] = React80.useState(endSegments.year);
+  const singleDayRef = React80.useRef(null);
+  const singleMonthRef = React80.useRef(null);
+  const singleYearRef = React80.useRef(null);
+  const startDayRef = React80.useRef(null);
+  const startMonthRef = React80.useRef(null);
+  const startYearRef = React80.useRef(null);
+  const endDayRef = React80.useRef(null);
+  const endMonthRef = React80.useRef(null);
+  const endYearRef = React80.useRef(null);
+  const calendarIconRef = React80.useRef(null);
+  React80.useEffect(() => {
     const s = dateToSegments(date);
     setSingleDay(s.day);
     setSingleMonth(s.month);
     setSingleYear(s.year);
   }, [date]);
-  React78.useEffect(() => {
+  React80.useEffect(() => {
     const s = dateToSegments(dateRange == null ? void 0 : dateRange.from);
     setStartDay(s.day);
     setStartMonth(s.month);
@@ -5373,7 +5600,7 @@ function DatePickerInput({
     setEndMonth(e.month);
     setEndYear(e.year);
   }, [dateRange]);
-  const handleSingleSegmentChange = React78.useCallback(
+  const handleSingleSegmentChange = React80.useCallback(
     (day, month, year) => {
       const d = segmentsToDate(day, month, year);
       if (day.length === 2 && month.length === 2 && year.length === 4) {
@@ -5384,7 +5611,7 @@ function DatePickerInput({
     },
     [onDateChange]
   );
-  const handleRangeSegmentChange = React78.useCallback(
+  const handleRangeSegmentChange = React80.useCallback(
     (sd, sm, sy, ed, em, ey) => {
       const from = segmentsToDate(sd, sm, sy);
       const to = segmentsToDate(ed, em, ey);
@@ -5459,7 +5686,7 @@ function DatePickerInput({
       setCalendarOpen(false);
     }
   };
-  const inputId = React78.useId();
+  const inputId = React80.useId();
   return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
     /* @__PURE__ */ jsxs(Popover, { open: calendarOpen, onOpenChange: setCalendarOpen, children: [
@@ -5645,7 +5872,7 @@ var lineVariants = cva("h-px min-w-0 flex-1 border-t border-sui-border-default",
     lineStyle: "solid"
   }
 });
-var Divider = React78.forwardRef(
+var Divider = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5720,7 +5947,7 @@ var Divider = React78.forwardRef(
   }
 );
 Divider.displayName = "Divider";
-var MenuSearchInput = React78.forwardRef(
+var MenuSearchInput = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5742,15 +5969,15 @@ var MenuSearchInput = React78.forwardRef(
       "id"
     ]);
     var _a2, _b2;
-    const internalRef = React78.useRef(null);
+    const internalRef = React80.useRef(null);
     const inputRef = ref || internalRef;
-    const [internalValue, setInternalValue] = React78.useState(
+    const [internalValue, setInternalValue] = React80.useState(
       defaultValue || ""
     );
     const isControlled = value !== void 0;
     const currentValue = isControlled ? String(value) : internalValue;
     const hasValue = currentValue.length > 0;
-    const generatedId = React78.useId();
+    const generatedId = React80.useId();
     const inputId = id || generatedId;
     const handleChange = (e) => {
       var _a3;
@@ -5769,7 +5996,7 @@ var MenuSearchInput = React78.forwardRef(
         (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
       }
     };
-    const [isFocused, setIsFocused] = React78.useState(false);
+    const [isFocused, setIsFocused] = React80.useState(false);
     const showShortcut = !!shortcutKey && !hasValue && !isFocused && !disabled;
     const handleFocus = (e) => {
       var _a3;
@@ -5883,7 +6110,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React78.forwardRef((_a, ref) => {
+var DropdownMenuSubTrigger = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.SubTrigger,
@@ -5907,7 +6134,7 @@ var DropdownMenuSubTrigger = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React78.forwardRef((_a, ref) => {
+var DropdownMenuSubContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.SubContent,
@@ -5922,7 +6149,7 @@ var DropdownMenuSubContent = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React78.forwardRef((_a, ref) => {
+var DropdownMenuContent = React80.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__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
@@ -5960,7 +6187,7 @@ var DropdownMenuContent = React78.forwardRef((_a, ref) => {
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React78.forwardRef((_a, ref) => {
+var DropdownMenuItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, variant = "default" } = _b, props = __objRest(_b, ["className", "inset", "variant"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
@@ -5981,7 +6208,7 @@ var DropdownMenuItem = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React78.forwardRef((_a, ref) => {
+var DropdownMenuCheckboxItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.CheckboxItem,
@@ -6003,7 +6230,7 @@ var DropdownMenuCheckboxItem = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React78.forwardRef((_a, ref) => {
+var DropdownMenuRadioItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.RadioItem,
@@ -6024,7 +6251,7 @@ var DropdownMenuRadioItem = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React78.forwardRef((_a, ref) => {
+var DropdownMenuLabel = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Label,
@@ -6039,7 +6266,7 @@ var DropdownMenuLabel = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React78.forwardRef((_a, ref) => {
+var DropdownMenuSeparator = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Separator,
@@ -6068,7 +6295,7 @@ var DropdownMenuShortcut = (_a) => {
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var DropdownMenuCaption = React78.forwardRef((_a, ref) => {
+var DropdownMenuCaption = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "p",
@@ -6083,7 +6310,7 @@ var DropdownMenuCaption = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCaption.displayName = "DropdownMenuCaption";
-var DropdownMenuUserbar = React78.forwardRef((_a, ref) => {
+var DropdownMenuUserbar = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, name, email, avatar, badge } = _b, props = __objRest(_b, ["className", "name", "email", "avatar", "badge"]);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -6108,7 +6335,7 @@ var DropdownMenuUserbar = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuUserbar.displayName = "DropdownMenuUserbar";
-var DropdownMenuLargeItem = React78.forwardRef((_a, ref) => {
+var DropdownMenuLargeItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, label, caption, icon, badge, tailIcon } = _b, props = __objRest(_b, ["className", "label", "caption", "icon", "badge", "tailIcon"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.Item,
@@ -6149,7 +6376,7 @@ var emptyStateVariants = cva(
     }
   }
 );
-var EmptyState = React78.forwardRef(
+var EmptyState = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6215,7 +6442,7 @@ function EmptyStateText({
     /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-sui-text-muted w-full", children: description })
   ] });
 }
-var FileUploadArea = React78.forwardRef(
+var FileUploadArea = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6240,8 +6467,8 @@ var FileUploadArea = React78.forwardRef(
       "onDrop",
       "onDragOver"
     ]);
-    const [isDragOver, setIsDragOver] = React78.useState(false);
-    const handleDragOver = React78.useCallback(
+    const [isDragOver, setIsDragOver] = React80.useState(false);
+    const handleDragOver = React80.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6250,10 +6477,10 @@ var FileUploadArea = React78.forwardRef(
       },
       [disabled, onDragOver]
     );
-    const handleDragLeave = React78.useCallback(() => {
+    const handleDragLeave = React80.useCallback(() => {
       setIsDragOver(false);
     }, []);
-    const handleDrop = React78.useCallback(
+    const handleDrop = React80.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6262,11 +6489,11 @@ var FileUploadArea = React78.forwardRef(
       },
       [disabled, onDrop]
     );
-    const handleClick = React78.useCallback(() => {
+    const handleClick = React80.useCallback(() => {
       if (disabled) return;
       onClick == null ? void 0 : onClick();
     }, [disabled, onClick]);
-    const handleKeyDown = React78.useCallback(
+    const handleKeyDown = React80.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -6342,7 +6569,7 @@ var FileUploadArea = React78.forwardRef(
                     "span",
                     {
                       className: cn(
-                        disabled ? "text-sui-text-hint" : "text-primary"
+                        disabled ? "text-sui-text-hint" : "text-sui-text-informative"
                       ),
                       children: linkText
                     }
@@ -6382,7 +6609,7 @@ var progressBarVariants = cva(
   }
 );
 var SEGMENT_COUNT = 10;
-var ProgressBar = React78.forwardRef(
+var ProgressBar = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6404,7 +6631,7 @@ var ProgressBar = React78.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.useId();
+    const generatedId = React80.useId();
     const labelId = `${generatedId}-label`;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -6442,7 +6669,7 @@ var ProgressBar = React78.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
@@ -6462,7 +6689,7 @@ var ProgressBar = React78.forwardRef(
                 children: /* @__PURE__ */ jsx(
                   ProgressPrimitive2.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}%` }
                   }
                 )
@@ -6490,7 +6717,7 @@ var statusLabel = {
   uploading: "Uploading...",
   failed: "Error"
 };
-var FileUploadCard = React78.forwardRef(
+var FileUploadCard = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6702,7 +6929,7 @@ var lineColorMap = {
   warning: "bg-sui-bg-basic-orange-accent",
   error: "bg-sui-bg-basic-red-accent"
 };
-var InlineTips = React78.forwardRef(
+var InlineTips = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6833,7 +7060,7 @@ function validateFile(file, accept, maxSize) {
   }
   return null;
 }
-var FileUpload = React78.forwardRef(
+var FileUpload = React80.forwardRef(
   ({
     files = [],
     onFilesAdded,
@@ -6854,16 +7081,16 @@ var FileUpload = React78.forwardRef(
     icon,
     className
   }, ref) => {
-    const inputRef = React78.useRef(null);
-    const [errors, setErrors] = React78.useState([]);
-    const [thumbnails, setThumbnails] = React78.useState(
+    const inputRef = React80.useRef(null);
+    const [errors, setErrors] = React80.useState([]);
+    const [thumbnails, setThumbnails] = React80.useState(
       {}
     );
-    const thumbnailsRef = React78.useRef(thumbnails);
-    React78.useEffect(() => {
+    const thumbnailsRef = React80.useRef(thumbnails);
+    React80.useEffect(() => {
       thumbnailsRef.current = thumbnails;
     }, [thumbnails]);
-    React78.useEffect(() => {
+    React80.useEffect(() => {
       if (!autoPreview) return;
       setThumbnails((prev) => {
         let next = prev;
@@ -6894,7 +7121,7 @@ var FileUpload = React78.forwardRef(
         return changed ? next : prev;
       });
     }, [files, autoPreview]);
-    React78.useEffect(() => {
+    React80.useEffect(() => {
       return () => {
         for (const url of Object.values(thumbnailsRef.current)) {
           URL.revokeObjectURL(url);
@@ -6902,7 +7129,7 @@ var FileUpload = React78.forwardRef(
       };
     }, []);
     const resolvedDescription = description != null ? description : generateDescription(accept, maxSize, maxFiles);
-    const processFiles = React78.useCallback(
+    const processFiles = React80.useCallback(
       (fileList) => {
         const newFiles = Array.from(fileList);
         const validationErrors = [];
@@ -6930,11 +7157,11 @@ var FileUpload = React78.forwardRef(
       },
       [files.length, maxFiles, accept, maxSize, onFilesAdded]
     );
-    const handleClick = React78.useCallback(() => {
+    const handleClick = React80.useCallback(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.click();
     }, []);
-    const handleInputChange = React78.useCallback(
+    const handleInputChange = React80.useCallback(
       (e) => {
         if (e.target.files && e.target.files.length > 0) {
           processFiles(e.target.files);
@@ -6943,7 +7170,7 @@ var FileUpload = React78.forwardRef(
       },
       [processFiles]
     );
-    const handleDrop = React78.useCallback(
+    const handleDrop = React80.useCallback(
       (e) => {
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
           processFiles(e.dataTransfer.files);
@@ -6951,10 +7178,10 @@ var FileUpload = React78.forwardRef(
       },
       [processFiles]
     );
-    const dismissError = React78.useCallback((index) => {
+    const dismissError = React80.useCallback((index) => {
       setErrors((prev) => prev.filter((_, i) => i !== index));
     }, []);
-    const handlePaste = React78.useCallback(
+    const handlePaste = React80.useCallback(
       (e) => {
         var _a;
         if (disabled || !pasteEnabled) return;
@@ -6975,7 +7202,7 @@ var FileUpload = React78.forwardRef(
       },
       [disabled, pasteEnabled, processFiles]
     );
-    const handleCancel = React78.useCallback(
+    const handleCancel = React80.useCallback(
       (id) => {
         const uploadFile = files.find((f) => f.id === id);
         if (uploadFile == null ? void 0 : uploadFile.abortController) {
@@ -7092,7 +7319,7 @@ var ariaSortMap = {
   desc: "descending",
   none: "none"
 };
-var GridTableHeaderItem = React78.forwardRef(
+var GridTableHeaderItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7194,7 +7421,7 @@ var gridTableRowVariants = cva(
     }
   }
 );
-var GridTableRow = React78.forwardRef(
+var GridTableRow = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsx(
@@ -7210,7 +7437,7 @@ var GridTableRow = React78.forwardRef(
   }
 );
 GridTableRow.displayName = "GridTableRow";
-var GridTableCell = React78.forwardRef(
+var GridTableCell = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, bordered = true, children } = _b, props = __objRest(_b, ["className", "bordered", "children"]);
     return /* @__PURE__ */ jsx(
@@ -7254,7 +7481,7 @@ var gridTableSlotItemVariants = cva(
     }
   }
 );
-var GridTableSlotItem = React78.forwardRef(
+var GridTableSlotItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7402,7 +7629,7 @@ var stepperNumberVariants = cva(
     }
   }
 );
-var StepperNumber = React78.forwardRef(
+var StepperNumber = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size, color, number = "1" } = _b, props = __objRest(_b, ["className", "size", "color", "number"]);
     return /* @__PURE__ */ jsxs(
@@ -7441,7 +7668,7 @@ var stepperIconVariants = cva(
     }
   }
 );
-var StepperIcon = React78.forwardRef(
+var StepperIcon = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "dot-large", icon } = _b, props = __objRest(_b, ["className", "variant", "icon"]);
     return /* @__PURE__ */ jsxs(
@@ -7472,17 +7699,23 @@ var textBlockVariants = cva("flex w-full flex-col gap-1", {
     align: "left"
   }
 });
-var horizontalStepperItemVariants = cva("flex w-full flex-col gap-4", {
-  variants: {
-    position: {
-      top: "",
-      bottom: ""
+var horizontalStepperItemVariants = 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__ */ jsx(
     "div",
@@ -7495,7 +7728,7 @@ function ConnectorLine({ success }) {
     }
   );
 }
-var HorizontalStepperItem = React78.forwardRef(
+var HorizontalStepperItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7620,7 +7853,7 @@ var HorizontalStepperItem = React78.forwardRef(
   }
 );
 HorizontalStepperItem.displayName = "HorizontalStepperItem";
-var HorizontalStepper = React78.forwardRef(
+var HorizontalStepper = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7695,7 +7928,7 @@ var HorizontalStepper = React78.forwardRef(
   }
 );
 HorizontalStepper.displayName = "HorizontalStepper";
-var Input = React78.forwardRef(
+var Input = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type, spellCheck, autoComplete } = _b, props = __objRest(_b, ["className", "type", "spellCheck", "autoComplete"]);
     return /* @__PURE__ */ jsx(
@@ -7788,7 +8021,7 @@ var inputButtonVariants = 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.forwardRef(
+var InputButton = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7920,7 +8153,7 @@ var InputButton = React78.forwardRef(
   }
 );
 InputButton.displayName = "InputButton";
-var InputStepper = React78.forwardRef(
+var InputStepper = React80.forwardRef(
   ({ onIncrement, onDecrement, disabled, className }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -7977,7 +8210,7 @@ var InputStepper = React78.forwardRef(
   }
 );
 InputStepper.displayName = "InputStepper";
-var NavigationMenu = React78.forwardRef((_a, ref) => {
+var NavigationMenu = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Root,
@@ -7996,7 +8229,7 @@ var NavigationMenu = React78.forwardRef((_a, ref) => {
   );
 });
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React78.forwardRef((_a, ref) => {
+var NavigationMenuList = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.List,
@@ -8014,7 +8247,7 @@ var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = 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.forwardRef((_a, ref) => {
+var NavigationMenuTrigger = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Trigger,
@@ -8037,7 +8270,7 @@ var NavigationMenuTrigger = React78.forwardRef((_a, ref) => {
   );
 });
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React78.forwardRef((_a, ref) => {
+var NavigationMenuContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Content,
@@ -8052,7 +8285,7 @@ var NavigationMenuContent = React78.forwardRef((_a, ref) => {
 });
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React78.forwardRef((_a, ref) => {
+var NavigationMenuViewport = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Viewport,
@@ -8066,7 +8299,7 @@ var NavigationMenuViewport = React78.forwardRef((_a, ref) => {
   ) });
 });
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React78.forwardRef((_a, ref) => {
+var NavigationMenuIndicator = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Indicator,
@@ -8128,16 +8361,16 @@ var pageItemVariants = 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.forwardRef(
+var PageItem = React80.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 ? Slot : "button";
@@ -8172,7 +8405,7 @@ var Pagination = (_a) => {
   );
 };
 Pagination.displayName = "Pagination";
-var PaginationContent = React78.forwardRef((_a, ref) => {
+var PaginationContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -8183,7 +8416,7 @@ var PaginationContent = React78.forwardRef((_a, ref) => {
   );
 });
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React78.forwardRef((_a, ref) => {
+var PaginationItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("li", __spreadValues({ ref, className: cn("", className) }, props));
 });
@@ -8304,7 +8537,7 @@ function getPageRange(currentPage, totalPages, maxVisible) {
   }
   return pages;
 }
-var Paginator = React78.forwardRef(
+var Paginator = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8484,7 +8717,236 @@ var Paginator = React78.forwardRef(
   }
 );
 Paginator.displayName = "Paginator";
-var Progress = React78.forwardRef((_a, ref) => {
+var CoverImage = ({
+  src,
+  className,
+  imageClassName
+}) => /* @__PURE__ */ jsx("div", { className: cn("relative overflow-clip", className), children: src ? /* @__PURE__ */ jsx(
+  "img",
+  {
+    src,
+    alt: "",
+    className: cn("absolute inset-0 size-full object-cover", imageClassName)
+  }
+) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-sui-bg-muted" }) });
+var TitleRow = ({ title, price }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between font-medium text-md leading-6 text-sui-text-default", children: [
+  /* @__PURE__ */ jsx("span", { children: title }),
+  price && /* @__PURE__ */ jsx("span", { children: price })
+] });
+var DateRow = ({
+  date,
+  prefix = "Added"
+}) => date ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm font-normal leading-5 text-sui-text-muted", children: [
+  /* @__PURE__ */ jsx("span", { children: prefix }),
+  /* @__PURE__ */ jsx("span", { children: date })
+] }) : null;
+var TagList = ({ tags }) => /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, { size: "sm", children: tag }, tag)) });
+var ProductCard = React80.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__ */ jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn("flex flex-col gap-3", className)
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/2] w-full overflow-clip rounded-lg border border-sui-border-darker shadow-card", children: [
+              /* @__PURE__ */ jsx(CoverImage, { src: image, className: "absolute inset-0", imageClassName: "rounded-lg" }),
+              rating && rating > 0 ? /* @__PURE__ */ 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__ */ jsx("i", { className: "ri-star-fill text-xs leading-none text-icon-default-muted", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "pl-0.5 pr-1 text-xs font-medium leading-4 text-sui-text-subtle", children: rating })
+              ] }) : null,
+              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx(TitleRow, { title, price }),
+              date && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm font-normal leading-5 text-sui-text-muted", children: [
+                /* @__PURE__ */ jsx("span", { children: "Added" }),
+                /* @__PURE__ */ jsx("span", { children: date })
+              ] })
+            ] })
+          ]
+        })
+      );
+    }
+    if (variant === "featured") {
+      return /* @__PURE__ */ 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__ */ jsx("div", { className: "relative aspect-[3/2] w-full overflow-clip rounded-sm border border-sui-border-darker", children: /* @__PURE__ */ jsx(CoverImage, { src: image, className: "absolute inset-0" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx(TitleRow, { title, price }),
+                /* @__PURE__ */ jsx(DateRow, { date })
+              ] }),
+              /* @__PURE__ */ jsx(Divider, {}),
+              tags && tags.length > 0 && /* @__PURE__ */ jsx(TagList, { tags }),
+              /* @__PURE__ */ jsxs(Button, { size: "md", className: "w-full", onClick: onCta, children: [
+                /* @__PURE__ */ jsx("i", { className: "ri-shopping-cart-2-line", "aria-hidden": "true" }),
+                ctaLabel
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+          ]
+        })
+      );
+    }
+    if (variant === "detailed") {
+      return /* @__PURE__ */ 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__ */ jsx("div", { className: "relative aspect-[5/3] w-full shrink-0 border-b border-sui-border-darker", children: /* @__PURE__ */ jsx(CoverImage, { src: image, className: "absolute inset-0" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx(TitleRow, { title, price }),
+                /* @__PURE__ */ jsx(DateRow, { date })
+              ] }),
+              /* @__PURE__ */ jsx(Divider, {}),
+              description && /* @__PURE__ */ jsx("p", { className: "text-sm font-normal leading-5 text-sui-text-muted", children: description }),
+              /* @__PURE__ */ jsx(Divider, {}),
+              tags && tags.length > 0 && /* @__PURE__ */ jsx(TagList, { tags }),
+              /* @__PURE__ */ jsxs(Button, { size: "md", className: "w-full", onClick: onCta, children: [
+                /* @__PURE__ */ jsx("i", { className: "ri-shopping-cart-2-line", "aria-hidden": "true" }),
+                ctaLabel
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+          ]
+        })
+      );
+    }
+    if (variant === "author") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn("flex flex-col gap-3", className)
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/2] w-full overflow-clip rounded-lg border border-sui-border-darker shadow-card", children: [
+              /* @__PURE__ */ jsx(CoverImage, { src: image, className: "absolute inset-0" }),
+              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between font-medium text-md leading-6 text-sui-text-default", children: [
+                /* @__PURE__ */ jsx("span", { children: title }),
+                price && /* @__PURE__ */ jsx("span", { children: price })
+              ] }),
+              author && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs(Avatar, { className: "size-6", children: [
+                  author.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: author.avatar, alt: author.name }),
+                  /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: author.name.slice(0, 2).toUpperCase() })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm font-normal leading-5 text-sui-text-subtle", children: [
+                  /* @__PURE__ */ jsx("span", { children: author.name }),
+                  author.category && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line text-base leading-none text-icon-default-muted", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { children: author.category })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ]
+        })
+      );
+    }
+    if (variant === "overlay") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn("relative", className)
+        }, props), {
+          children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/2] w-full overflow-clip rounded-lg border border-sui-border-darker shadow-card", children: [
+            /* @__PURE__ */ jsx(CoverImage, { src: image, className: "absolute inset-0" }),
+            /* @__PURE__ */ 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__ */ jsx(Button, { variant: "outline", size: "sm", children: "Live preview" }),
+              /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+                /* @__PURE__ */ jsx("i", { className: "ri-file-copy-line", "aria-hidden": "true" }),
+                "Copy"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[inherit] shadow-inset-bottom-strong" })
+          ] })
+        })
+      );
+    }
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn("flex items-center justify-between gap-3", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            (thumbnail || image) && /* @__PURE__ */ jsx("div", { className: "relative size-6 shrink-0 overflow-clip rounded-sm", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumbnail != null ? thumbnail : image,
+                alt: "",
+                className: "absolute inset-0 size-full object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-md leading-6 text-sui-text-default", children: title })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsxs(Tooltip2, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "2xs", className: "size-6 p-0", children: /* @__PURE__ */ jsx("i", { className: "ri-bookmark-line", "aria-hidden": "true" }) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: "Save to library" })
+            ] }),
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "2xs", className: "size-6 p-0", children: /* @__PURE__ */ jsx("i", { className: "ri-more-2-fill", "aria-hidden": "true" }) })
+          ] })
+        ]
+      })
+    ) });
+  }
+);
+ProductCard.displayName = "ProductCard";
+var Progress = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
   return /* @__PURE__ */ jsx(
     ProgressPrimitive2.Root,
@@ -8498,7 +8960,7 @@ var Progress = React78.forwardRef((_a, ref) => {
       children: /* @__PURE__ */ jsx(
         ProgressPrimitive2.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)}%)` }
         }
       )
@@ -8524,17 +8986,17 @@ var radialProgressBarVariants = cva("relative inline-flex items-center justify-c
   }
 });
 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.forwardRef(
+var RadialProgressBar = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8654,7 +9116,7 @@ var RadialProgressBar = React78.forwardRef(
   }
 );
 RadialProgressBar.displayName = "RadialProgressBar";
-var RadioGroup2 = React78.forwardRef((_a, ref) => {
+var RadioGroup2 = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
@@ -8714,7 +9176,7 @@ var radioButtonVariants = cva(
     }
   }
 );
-var RadioButton = React78.forwardRef((_a, ref) => {
+var RadioButton = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxs(
     RadioGroupPrimitive.Item,
@@ -8754,7 +9216,7 @@ var RadioButton = React78.forwardRef((_a, ref) => {
   );
 });
 RadioButton.displayName = "RadioButton";
-var RadioCardGroup = React78.forwardRef((_a, ref) => {
+var RadioCardGroup = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
@@ -8783,7 +9245,7 @@ var radioButtonCardVariants = 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"
         ],
@@ -8791,7 +9253,7 @@ var radioButtonCardVariants = 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"
@@ -8803,7 +9265,7 @@ var radioButtonCardVariants = cva(
     }
   }
 );
-var RadioButtonCard = React78.forwardRef(
+var RadioButtonCard = React80.forwardRef(
   ({
     title,
     description,
@@ -8817,7 +9279,7 @@ var RadioButtonCard = React78.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React80.useId();
     const titleId = `radio-card-title-${generatedId}`;
     const descriptionId = `radio-card-desc-${generatedId}`;
     const isHorizontal = layout === "horizontal";
@@ -8925,9 +9387,9 @@ var RadioButtonCard = React78.forwardRef(
   }
 );
 RadioButtonCard.displayName = "RadioButtonCard";
-var RadioButtonList = React78.forwardRef(
+var RadioButtonList = React80.forwardRef(
   ({ className, divider = true, value, defaultValue, onValueChange, disabled, children }, ref) => {
-    const items = React78.Children.toArray(children);
+    const items = React80.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       RadioGroup2,
       {
@@ -8971,7 +9433,7 @@ var radioButtonWithTextVariants = cva(
     }
   }
 );
-var RadioButtonWithText = React78.forwardRef(
+var RadioButtonWithText = React80.forwardRef(
   ({
     label,
     description,
@@ -8982,7 +9444,7 @@ var RadioButtonWithText = React78.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React80.useId();
     const radioId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -9037,7 +9499,7 @@ var RadioButtonWithText = React78.forwardRef(
   }
 );
 RadioButtonWithText.displayName = "RadioButtonWithText";
-var ScrollArea = React78.forwardRef((_a, ref) => {
+var ScrollArea = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
@@ -9054,7 +9516,7 @@ var ScrollArea = React78.forwardRef((_a, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React78.forwardRef((_a, ref) => {
+var ScrollBar = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsx(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
@@ -9076,7 +9538,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React78.forwardRef((_a, ref) => {
+var SelectTrigger = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
@@ -9099,7 +9561,7 @@ var SelectTrigger = React78.forwardRef((_a, ref) => {
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React78.forwardRef((_a, ref) => {
+var SelectScrollUpButton = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollUpButton,
@@ -9115,7 +9577,7 @@ var SelectScrollUpButton = React78.forwardRef((_a, ref) => {
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React78.forwardRef((_a, ref) => {
+var SelectScrollDownButton = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollDownButton,
@@ -9131,7 +9593,7 @@ var SelectScrollDownButton = React78.forwardRef((_a, ref) => {
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React78.forwardRef((_a, ref) => {
+var SelectContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     SelectPrimitive.Content,
@@ -9164,7 +9626,7 @@ var SelectContent = React78.forwardRef((_a, ref) => {
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React78.forwardRef((_a, ref) => {
+var SelectLabel = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Label,
@@ -9178,7 +9640,7 @@ var SelectLabel = React78.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React78.forwardRef((_a, ref) => {
+var SelectItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Item,
@@ -9203,7 +9665,7 @@ var SelectItem = React78.forwardRef((_a, ref) => {
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React78.forwardRef((_a, ref) => {
+var SelectSeparator = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Separator,
@@ -9214,7 +9676,7 @@ var SelectSeparator = React78.forwardRef((_a, ref) => {
   );
 });
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var SelectMenu = React78.forwardRef(
+var SelectMenu = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9245,19 +9707,19 @@ var SelectMenu = React78.forwardRef(
     ]);
     var _a2;
     const indicator = selectType === "checkbox" ? "checkbox" : selectType === "radio" ? "radio" : selectType === "default" ? "checkmark" : "none";
-    const hasChildren = React78.Children.count(children) > 0;
-    const generatedId = React78.useId();
+    const hasChildren = React80.Children.count(children) > 0;
+    const generatedId = React80.useId();
     const listId = `${generatedId}-list`;
-    const listRef = React78.useRef(null);
-    const [activeIndex, setActiveIndex] = React78.useState(-1);
+    const listRef = React80.useRef(null);
+    const [activeIndex, setActiveIndex] = React80.useState(-1);
     const activeItemId = activeIndex >= 0 ? `${listId}-item-${activeIndex}` : void 0;
-    const getItems = React78.useCallback(() => {
+    const getItems = React80.useCallback(() => {
       if (!listRef.current) return [];
       return Array.from(
         listRef.current.querySelectorAll('[role="option"]')
       );
     }, []);
-    const handleKeyDown = React78.useCallback(
+    const handleKeyDown = React80.useCallback(
       (e) => {
         var _a3;
         const items = getItems();
@@ -9340,8 +9802,8 @@ var SelectMenu = React78.forwardRef(
                 "focus-visible:outline-none"
               ),
               style: listMaxHeight ? { maxHeight: listMaxHeight } : void 0,
-              children: hasChildren ? /* @__PURE__ */ jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React78.Children.map(children, (child, index) => {
-                if (React78.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
+              children: hasChildren ? /* @__PURE__ */ jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React80.Children.map(children, (child, index) => {
+                if (React80.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
                   const itemProps = child.props;
                   const overrides = {};
                   if (indicator !== "none" && itemProps.indicator === void 0) {
@@ -9358,7 +9820,7 @@ var SelectMenu = React78.forwardRef(
                     overrides["data-active"] = "true";
                   }
                   if (Object.keys(overrides).length > 0) {
-                    return React78.cloneElement(
+                    return React80.cloneElement(
                       child,
                       overrides
                     );
@@ -9383,7 +9845,7 @@ var SelectMenu = React78.forwardRef(
   }
 );
 SelectMenu.displayName = "SelectMenu";
-var SelectMenuFooterButton = React78.forwardRef((_a, ref) => {
+var SelectMenuFooterButton = React80.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__ */ jsxs(
     "button",
@@ -9426,7 +9888,7 @@ var SelectMenuFooterButton = React78.forwardRef((_a, ref) => {
   );
 });
 SelectMenuFooterButton.displayName = "SelectMenuFooterButton";
-var SelectInput = React78.forwardRef(
+var SelectInput = React80.forwardRef(
   ({
     label,
     required,
@@ -9458,10 +9920,10 @@ var SelectInput = React78.forwardRef(
     footer,
     className
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React78.useState(false);
+    const [internalOpen, setInternalOpen] = React80.useState(false);
     const isControlled = controlledOpen !== void 0;
     const isOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = React78.useCallback(
+    const handleOpenChange = React80.useCallback(
       (next) => {
         if (disabled) return;
         if (!isControlled) setInternalOpen(next);
@@ -9469,7 +9931,7 @@ var SelectInput = React78.forwardRef(
       },
       [disabled, isControlled, onOpenChange]
     );
-    const generatedId = React78.useId();
+    const generatedId = React80.useId();
     const hasError = !!error;
     const helperText = hasError ? error : caption;
     const hasTags = tags && tags.length > 0;
@@ -9548,7 +10010,7 @@ var SelectInput = React78.forwardRef(
                   children: leadIcon
                 }
               ) : null,
-              hasTags ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(React78.Fragment, { children: [
+              hasTags ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(React80.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -9665,7 +10127,7 @@ var SelectInput = React78.forwardRef(
   }
 );
 SelectInput.displayName = "SelectInput";
-var SelectMenuItem = React78.forwardRef(
+var SelectMenuItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9829,7 +10291,7 @@ var SelectMenuItem = React78.forwardRef(
   }
 );
 SelectMenuItem.displayName = "SelectMenuItem";
-var SelectMenuLabel = React78.forwardRef(
+var SelectMenuLabel = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, caption, children } = _b, props = __objRest(_b, ["className", "caption", "children"]);
     return /* @__PURE__ */ jsxs(
@@ -9851,7 +10313,7 @@ var SelectMenuLabel = React78.forwardRef(
   }
 );
 SelectMenuLabel.displayName = "SelectMenuLabel";
-var SelectMenuDescription = React78.forwardRef((_a, ref) => {
+var SelectMenuDescription = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "p",
@@ -9865,7 +10327,7 @@ var SelectMenuDescription = React78.forwardRef((_a, ref) => {
   );
 });
 SelectMenuDescription.displayName = "SelectMenuDescription";
-var SelectMenuSeparator = React78.forwardRef((_a, ref) => {
+var SelectMenuSeparator = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -9877,7 +10339,7 @@ var SelectMenuSeparator = React78.forwardRef((_a, ref) => {
   );
 });
 SelectMenuSeparator.displayName = "SelectMenuSeparator";
-var SelectMenuLargeItem = React78.forwardRef(
+var SelectMenuLargeItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9973,7 +10435,7 @@ var SelectMenuLargeItem = React78.forwardRef(
   }
 );
 SelectMenuLargeItem.displayName = "SelectMenuLargeItem";
-var Separator3 = React78.forwardRef(
+var Separator3 = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
     return /* @__PURE__ */ jsx(
@@ -9996,7 +10458,7 @@ var Sheet = DialogPrimitive.Root;
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
 var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React78.forwardRef((_a, ref) => {
+var SheetOverlay = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
@@ -10027,7 +10489,7 @@ var sheetVariants = cva(
     }
   }
 );
-var SheetContent = React78.forwardRef((_a, ref) => {
+var SheetContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { side = "right", className, children } = _b, props = __objRest(_b, ["side", "className", "children"]);
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
@@ -10083,7 +10545,7 @@ var SheetFooter = (_a) => {
   );
 };
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React78.forwardRef((_a, ref) => {
+var SheetTitle = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Title,
@@ -10094,7 +10556,7 @@ var SheetTitle = React78.forwardRef((_a, ref) => {
   );
 });
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React78.forwardRef((_a, ref) => {
+var SheetDescription = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Description,
@@ -10107,8 +10569,8 @@ var SheetDescription = React78.forwardRef((_a, ref) => {
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React78.useState(void 0);
-  React78.useEffect(() => {
+  const [isMobile, setIsMobile] = React80.useState(void 0);
+  React80.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -10138,15 +10600,15 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React78.createContext(null);
+var SidebarContext = React80.createContext(null);
 function useSidebar() {
-  const context = React78.useContext(SidebarContext);
+  const context = React80.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React78.forwardRef(
+var SidebarProvider = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       defaultOpen = true,
@@ -10164,10 +10626,10 @@ var SidebarProvider = React78.forwardRef(
       "children"
     ]);
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React78.useState(false);
-    const [_open, _setOpen] = React78.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React80.useState(false);
+    const [_open, _setOpen] = React80.useState(defaultOpen);
     const open = openProp != null ? openProp : _open;
-    const setOpen = React78.useCallback(
+    const setOpen = React80.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -10179,10 +10641,10 @@ var SidebarProvider = React78.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React78.useCallback(() => {
+    const toggleSidebar = React80.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React78.useEffect(() => {
+    React80.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -10193,7 +10655,7 @@ var SidebarProvider = React78.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React78.useMemo(
+    const contextValue = React80.useMemo(
       () => ({
         state,
         open,
@@ -10224,7 +10686,7 @@ var SidebarProvider = React78.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React78.forwardRef(
+var Sidebar = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       side = "left",
@@ -10323,7 +10785,7 @@ var Sidebar = React78.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React78.forwardRef((_a, ref) => {
+var SidebarTrigger = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
@@ -10348,7 +10810,7 @@ var SidebarTrigger = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React78.forwardRef((_a, ref) => {
+var SidebarRail = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsx(
@@ -10373,7 +10835,7 @@ var SidebarRail = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React78.forwardRef((_a, ref) => {
+var SidebarInset = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "main",
@@ -10388,7 +10850,7 @@ var SidebarInset = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React78.forwardRef((_a, ref) => {
+var SidebarInput = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Input,
@@ -10403,7 +10865,7 @@ var SidebarInput = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React78.forwardRef((_a, ref) => {
+var SidebarHeader = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10415,7 +10877,7 @@ var SidebarHeader = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React78.forwardRef((_a, ref) => {
+var SidebarFooter = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10427,7 +10889,7 @@ var SidebarFooter = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React78.forwardRef((_a, ref) => {
+var SidebarSeparator = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Separator3,
@@ -10439,7 +10901,7 @@ var SidebarSeparator = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React78.forwardRef((_a, ref) => {
+var SidebarContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10454,7 +10916,7 @@ var SidebarContent = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React78.forwardRef((_a, ref) => {
+var SidebarGroup = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10466,7 +10928,7 @@ var SidebarGroup = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React78.forwardRef((_a, ref) => {
+var SidebarGroupLabel = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ jsx(
@@ -10483,7 +10945,7 @@ var SidebarGroupLabel = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React78.forwardRef((_a, ref) => {
+var SidebarGroupAction = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
@@ -10502,7 +10964,7 @@ var SidebarGroupAction = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React78.forwardRef((_a, ref) => {
+var SidebarGroupContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10514,7 +10976,7 @@ var SidebarGroupContent = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React78.forwardRef((_a, ref) => {
+var SidebarMenu = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -10526,7 +10988,7 @@ var SidebarMenu = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React78.forwardRef((_a, ref) => {
+var SidebarMenuItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "li",
@@ -10558,7 +11020,7 @@ var sidebarMenuButtonVariants = cva(
     }
   }
 );
-var SidebarMenuButton = React78.forwardRef(
+var SidebarMenuButton = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       asChild = false,
@@ -10609,7 +11071,7 @@ var SidebarMenuButton = React78.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React78.forwardRef((_a, ref) => {
+var SidebarMenuAction = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false, showOnHover = false } = _b, props = __objRest(_b, ["className", "asChild", "showOnHover"]);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
@@ -10632,7 +11094,7 @@ var SidebarMenuAction = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React78.forwardRef((_a, ref) => {
+var SidebarMenuBadge = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10652,10 +11114,10 @@ var SidebarMenuBadge = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React78.forwardRef((_a, ref) => {
+var SidebarMenuSkeleton = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, showIcon = false } = _b, props = __objRest(_b, ["className", "showIcon"]);
-  const id = React78.useId();
-  const width = React78.useMemo(() => {
+  const id = React80.useId();
+  const width = React80.useMemo(() => {
     const hash = id.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
     return `${hash % 40 + 50}%`;
   }, [id]);
@@ -10689,7 +11151,7 @@ var SidebarMenuSkeleton = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React78.forwardRef((_a, ref) => {
+var SidebarMenuSub = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -10705,12 +11167,12 @@ var SidebarMenuSub = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React78.forwardRef((_a, ref) => {
+var SidebarMenuSubItem = React80.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx("li", __spreadValues({ ref }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React78.forwardRef((_a, ref) => {
+var SidebarMenuSubButton = React80.forwardRef((_a, ref) => {
   var _b = _a, { asChild = false, size = "md", isActive, className } = _b, props = __objRest(_b, ["asChild", "size", "isActive", "className"]);
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
@@ -10750,7 +11212,7 @@ var sidebarCardVariants = cva(
     }
   }
 );
-var SidebarCard = React78.forwardRef(
+var SidebarCard = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsx(
@@ -10789,7 +11251,7 @@ var sidebarMenuItemVariants = cva("", {
     variant: "default"
   }
 });
-var SidebarMenuItem2 = React78.forwardRef(
+var SidebarMenuItem2 = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10974,6 +11436,198 @@ var SidebarMenuItem2 = React78.forwardRef(
   }
 );
 SidebarMenuItem2.displayName = "SidebarMenuItem";
+var DefaultLogo = () => /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-sui-bg-state-primary", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex gap-1 text-sm leading-5", centered && "justify-center"), children: [
+  /* @__PURE__ */ jsx("span", { className: "font-normal text-sui-text-muted", children: text }),
+  /* @__PURE__ */ 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.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__ */ jsx(DefaultLogo, {});
+    const isCentered = variant === "centered" || variant === "social";
+    const Header2 = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", isCentered && "items-center"), children: [
+      logoNode,
+      /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", isCentered && "items-center text-center"), children: [
+        /* @__PURE__ */ jsx("p", { className: "text-md font-semibold leading-6 text-sui-text-default", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-normal leading-5 text-sui-text-muted", children: subtitle })
+      ] })
+    ] });
+    const FormFields = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+      /* @__PURE__ */ jsx(
+        InputField,
+        {
+          label: "Email address or username",
+          placeholder: "",
+          inputStyle: "shadow",
+          type: "email",
+          autoComplete: "email"
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsx(CheckboxWithText, { label: "Remember me" })
+    ] });
+    if (variant === "simple") {
+      return /* @__PURE__ */ 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__ */ jsx(Button, { className: "w-full", size: "md", children: ctaLabel != null ? ctaLabel : "Sign In" }),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(CardFooter2, { text: footerText, linkText: footerLinkText, onClick: onFooterClick })
+          ]
+        })
+      );
+    }
+    if (variant === "centered") {
+      return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { className: "w-full", size: "md", children: ctaLabel != null ? ctaLabel : "Sign In" }),
+              showSso && /* @__PURE__ */ jsxs(Button, { variant: "secondary", className: "w-full", size: "md", children: [
+                /* @__PURE__ */ jsx("i", { className: "ri-key-2-line", "aria-hidden": "true" }),
+                "Single sign-on (SSO)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(CardFooter2, { text: footerText, linkText: footerLinkText, onClick: onFooterClick, centered: true })
+          ]
+        })
+      );
+    }
+    if (variant === "social") {
+      return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-6 border-b border-sui-border-default bg-sui-bg-card p-9", children: [
+              Header2,
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+                socialProviders.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: socialProviders.map((brand) => /* @__PURE__ */ jsx(SocialButton, { brand, variant: "secondary", className: "w-full" }, brand)) }),
+                /* @__PURE__ */ jsx(Divider, { type: "text-center", label: "or" }),
+                /* @__PURE__ */ jsx(Button, { className: "w-full", size: "md", children: ctaLabel != null ? ctaLabel : "Sign in with email" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex px-9 py-6 justify-center", children: /* @__PURE__ */ jsx(CardFooter2, { text: footerText, linkText: footerLinkText, onClick: onFooterClick, centered: true }) })
+          ]
+        })
+      );
+    }
+    return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-3 border-b border-sui-border-default bg-sui-bg-card p-9", children: [
+            Header2,
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pt-3", children: [
+              /* @__PURE__ */ jsx(
+                InputField,
+                {
+                  label: "Email address",
+                  placeholder: "",
+                  inputStyle: "shadow",
+                  type: "email",
+                  autoComplete: "email"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { className: "w-full", size: "md", children: ctaLabel != null ? ctaLabel : "Continue" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex px-9 py-6", children: /* @__PURE__ */ jsx(CardFooter2, { text: footerText, linkText: footerLinkText, onClick: onFooterClick }) })
+        ]
+      })
+    );
+  }
+);
+SignInCard.displayName = "SignInCard";
 function clamp2(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -10985,7 +11639,7 @@ function percent2(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var Slider = React78.forwardRef(
+var Slider = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11018,12 +11672,12 @@ var Slider = React78.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78.useRef(null);
-    const [isDragging, setIsDragging] = React78.useState(false);
-    const [isFocused, setIsFocused] = React78.useState(false);
+    const trackRef = React80.useRef(null);
+    const [isDragging, setIsDragging] = React80.useState(false);
+    const [isFocused, setIsFocused] = React80.useState(false);
     const pct = percent2(value, min, max);
     const displayValue = formatValue ? formatValue(value) : `${value}`;
-    const getValueFromPointer = React78.useCallback(
+    const getValueFromPointer = React80.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -11034,7 +11688,7 @@ var Slider = React78.forwardRef(
       },
       [min, max, step]
     );
-    const handlePointerDown = React78.useCallback(
+    const handlePointerDown = React80.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -11045,7 +11699,7 @@ var Slider = React78.forwardRef(
       },
       [disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerMove = React78.useCallback(
+    const handlePointerMove = React80.useCallback(
       (e) => {
         if (!isDragging || disabled) return;
         const newValue = getValueFromPointer(e.clientX);
@@ -11053,10 +11707,10 @@ var Slider = React78.forwardRef(
       },
       [isDragging, disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerUp = React78.useCallback(() => {
+    const handlePointerUp = React80.useCallback(() => {
       setIsDragging(false);
     }, []);
-    const handleKeyDown = React78.useCallback(
+    const handleKeyDown = React80.useCallback(
       (e) => {
         if (disabled) return;
         let newValue = value;
@@ -11083,7 +11737,7 @@ var Slider = React78.forwardRef(
       },
       [disabled, value, step, min, max, onValueChange]
     );
-    const tickLabels = React78.useMemo(() => {
+    const tickLabels = React80.useMemo(() => {
       if (pointLabels) return pointLabels;
       const count2 = pointCount;
       const labels = [];
@@ -11122,7 +11776,7 @@ var Slider = React78.forwardRef(
                 /* @__PURE__ */ 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}%` }
                   }
                 ),
@@ -11177,7 +11831,7 @@ Slider.displayName = "Slider";
 function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-var SliderInput = React78.forwardRef(
+var SliderInput = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11200,8 +11854,8 @@ var SliderInput = React78.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const [internalValue, setInternalValue] = React78.useState(value);
-    React78.useEffect(() => {
+    const [internalValue, setInternalValue] = React80.useState(value);
+    React80.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const commit = (newVal) => {
@@ -11308,7 +11962,7 @@ function percent3(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var SliderRange = React78.forwardRef(
+var SliderRange = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11341,15 +11995,15 @@ var SliderRange = React78.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React78.useState(null);
-    const [focusedHandle, setFocusedHandle] = React78.useState(null);
+    const trackRef = React80.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React80.useState(null);
+    const [focusedHandle, setFocusedHandle] = React80.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.useCallback(
+    const getValueFromPointer = React80.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -11360,7 +12014,7 @@ var SliderRange = React78.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React78.useCallback(
+    const closestHandle = React80.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -11368,7 +12022,7 @@ var SliderRange = React78.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React78.useCallback(
+    const updateValue = React80.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp4(newVal, min, rangeMax);
@@ -11380,7 +12034,7 @@ var SliderRange = React78.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React78.useCallback(
+    const handlePointerDown = React80.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -11392,7 +12046,7 @@ var SliderRange = React78.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React78.useCallback(
+    const handlePointerMove = React80.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -11400,10 +12054,10 @@ var SliderRange = React78.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React78.useCallback(() => {
+    const handlePointerUp = React80.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React78.useCallback(
+    const makeKeyHandler = React80.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -11431,7 +12085,7 @@ var SliderRange = React78.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React78.useMemo(() => {
+    const tickLabels = React80.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -11469,7 +12123,7 @@ var SliderRange = React78.forwardRef(
                 /* @__PURE__ */ 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}%` }
                   }
                 ),
@@ -11548,7 +12202,7 @@ var SliderRange = React78.forwardRef(
   }
 );
 SliderRange.displayName = "SliderRange";
-var SliderRangeInput = React78.forwardRef(
+var SliderRangeInput = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11682,7 +12336,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"
         }
       }
@@ -11690,7 +12344,7 @@ var Toaster = (_a) => {
   );
 };
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React78.forwardRef((_a, ref) => {
+var ToastViewport = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Viewport,
@@ -11718,7 +12372,7 @@ var toastVariants = cva(
     }
   }
 );
-var Toast = React78.forwardRef((_a, ref) => {
+var Toast = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Root,
@@ -11729,7 +12383,7 @@ var Toast = React78.forwardRef((_a, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React78.forwardRef((_a, ref) => {
+var ToastAction = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Action,
@@ -11743,7 +12397,7 @@ var ToastAction = React78.forwardRef((_a, ref) => {
   );
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React78.forwardRef((_a, ref) => {
+var ToastClose = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Close,
@@ -11760,7 +12414,7 @@ var ToastClose = React78.forwardRef((_a, ref) => {
   );
 });
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React78.forwardRef((_a, ref) => {
+var ToastTitle = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Title,
@@ -11771,7 +12425,7 @@ var ToastTitle = React78.forwardRef((_a, ref) => {
   );
 });
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React78.forwardRef((_a, ref) => {
+var ToastDescription = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Description,
@@ -11876,8 +12530,8 @@ function toast(_a) {
   };
 }
 function useToast() {
-  const [state, setState] = React78.useState(memoryState);
-  React78.useEffect(() => {
+  const [state, setState] = React80.useState(memoryState);
+  React80.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -11908,7 +12562,7 @@ function Toaster2() {
     /* @__PURE__ */ jsx(ToastViewport, {})
   ] });
 }
-var Switch = React78.forwardRef((_a, ref) => {
+var Switch = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SwitchPrimitives.Root,
@@ -11960,10 +12614,10 @@ var Switch = React78.forwardRef((_a, ref) => {
   );
 });
 Switch.displayName = "Switch";
-var SwitchList = React78.forwardRef(
+var SwitchList = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React78.Children.toArray(children);
+    const items = React80.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -11991,7 +12645,7 @@ var SwitchList = React78.forwardRef(
   }
 );
 SwitchList.displayName = "SwitchList";
-var SwitchWithText = React78.forwardRef(
+var SwitchWithText = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12008,7 +12662,7 @@ var SwitchWithText = React78.forwardRef(
       "disabled",
       "id"
     ]);
-    const generatedId = React78.useId();
+    const generatedId = React80.useId();
     const switchId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -12065,7 +12719,7 @@ var SwitchWithText = React78.forwardRef(
   }
 );
 SwitchWithText.displayName = "SwitchWithText";
-var Table = React78.forwardRef((_a, ref) => {
+var Table = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
     "table",
@@ -12076,12 +12730,12 @@ var Table = React78.forwardRef((_a, ref) => {
   ) });
 });
 Table.displayName = "Table";
-var TableHeader = React78.forwardRef((_a, ref) => {
+var TableHeader = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b [&_tr]:border-sui-border-default", className) }, props));
 });
 TableHeader.displayName = "TableHeader";
-var TableBody = React78.forwardRef((_a, ref) => {
+var TableBody = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "tbody",
@@ -12092,7 +12746,7 @@ var TableBody = React78.forwardRef((_a, ref) => {
   );
 });
 TableBody.displayName = "TableBody";
-var TableFooter = React78.forwardRef((_a, ref) => {
+var TableFooter = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "tfoot",
@@ -12106,7 +12760,7 @@ var TableFooter = React78.forwardRef((_a, ref) => {
   );
 });
 TableFooter.displayName = "TableFooter";
-var TableRow = React78.forwardRef((_a, ref) => {
+var TableRow = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "tr",
@@ -12120,7 +12774,7 @@ var TableRow = React78.forwardRef((_a, ref) => {
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = React78.forwardRef((_a, ref) => {
+var TableHead = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "th",
@@ -12134,7 +12788,7 @@ var TableHead = React78.forwardRef((_a, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React78.forwardRef((_a, ref) => {
+var TableCell = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "td",
@@ -12145,7 +12799,7 @@ var TableCell = React78.forwardRef((_a, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React78.forwardRef((_a, ref) => {
+var TableCaption = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "caption",
@@ -12181,7 +12835,7 @@ var ariaSortMap2 = {
   desc: "descending",
   none: "none"
 };
-var TableHeaderItem = React78.forwardRef(
+var TableHeaderItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12297,7 +12951,7 @@ var tableItemVariants = cva("flex items-center px-2", {
     size: "lg"
   }
 });
-var TableItem = React78.forwardRef(
+var TableItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12381,7 +13035,7 @@ var TableItem = React78.forwardRef(
   }
 );
 TableItem.displayName = "TableItem";
-var TablePagination = React78.forwardRef(
+var TablePagination = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12468,7 +13122,7 @@ var tableRowSortVariants = cva(
     }
   }
 );
-var TableRowSort = React78.forwardRef(
+var TableRowSort = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", striped, sticky, children } = _b, props = __objRest(_b, ["className", "variant", "striped", "sticky", "children"]);
     return /* @__PURE__ */ jsx(
@@ -12491,7 +13145,7 @@ var TableRowSort = React78.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.forwardRef(
+var TableSkeletonRow = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, columns, rowCount = 5, size = "sm" } = _b, props = __objRest(_b, ["className", "columns", "rowCount", "size"]);
     return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className, "aria-hidden": "true" }, props), { children: Array.from({ length: rowCount }, (_, rowIdx) => /* @__PURE__ */ jsx(TableRowSort, { variant: "default", children: columns.map((col, colIdx) => {
@@ -12541,12 +13195,12 @@ var tabListVariants = cva(
     }
   }
 );
-var TabList = React78.forwardRef((_a, ref) => {
+var TabList = React80.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.Children.map(children, (child) => {
-    if (!React78.isValidElement(child)) return child;
+  const enhancedChildren = React80.Children.map(children, (child) => {
+    if (!React80.isValidElement(child)) return child;
     const extraProps = {
       shape: childShape
     };
@@ -12554,7 +13208,7 @@ var TabList = React78.forwardRef((_a, ref) => {
       const existingClassName = child.props.className;
       extraProps.className = cn(existingClassName, childRadiusOverride);
     }
-    return React78.cloneElement(child, extraProps);
+    return React80.cloneElement(child, extraProps);
   });
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.List,
@@ -12616,7 +13270,7 @@ var tabItemVariants = cva(
     }
   }
 );
-var TabItem = React78.forwardRef((_a, ref) => {
+var TabItem = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, shape, size } = _b, props = __objRest(_b, ["className", "shape", "size"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.Trigger,
@@ -12628,35 +13282,35 @@ var TabItem = React78.forwardRef((_a, ref) => {
 });
 TabItem.displayName = "TabItem";
 var Tabs = TabsPrimitive4.Root;
-var TabsList = React78.forwardRef((_a, ref) => {
+var TabsList = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.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.List.displayName;
-var TabsTrigger = React78.forwardRef((_a, ref) => {
+var TabsTrigger = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.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.Trigger.displayName;
-var TabsContent = React78.forwardRef((_a, ref) => {
+var TabsContent = React80.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.Content,
@@ -12700,7 +13354,7 @@ var textAreaContainerVariants = cva(
     }
   }
 );
-var TextAreaField = React78.forwardRef(
+var TextAreaField = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12749,7 +13403,7 @@ var TextAreaField = React78.forwardRef(
       "spellCheck",
       "autoComplete"
     ]);
-    const generatedId = React78.useId();
+    const generatedId = React80.useId();
     const textAreaId = id || generatedId;
     const captionId = `${textAreaId}-caption`;
     const charCountId = `${textAreaId}-charcount`;
@@ -12757,8 +13411,8 @@ var TextAreaField = React78.forwardRef(
     const helperText = hasError ? error : caption;
     const hasActionBar = !!(leadActions || tailActions);
     const showCount = !!(showCharCount && maxLength);
-    const innerRef = React78.useRef(null);
-    React78.useImperativeHandle(ref, () => innerRef.current, []);
+    const innerRef = React80.useRef(null);
+    React80.useImperativeHandle(ref, () => innerRef.current, []);
     const focusTextareaOnDecorationClick = (e) => {
       var _a2;
       if (disabled) return;
@@ -12775,12 +13429,12 @@ var TextAreaField = React78.forwardRef(
       helperText ? captionId : null,
       showCount ? charCountId : null
     ].filter(Boolean).join(" ") || void 0;
-    const [charCount, setCharCount] = React78.useState(() => {
+    const [charCount, setCharCount] = React80.useState(() => {
       if (value !== void 0) return String(value).length;
       if (defaultValue !== void 0) return String(defaultValue).length;
       return 0;
     });
-    React78.useEffect(() => {
+    React80.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       }
@@ -12966,7 +13620,7 @@ var TextAreaField = React78.forwardRef(
   }
 );
 TextAreaField.displayName = "TextAreaField";
-var Textarea = React78.forwardRef((_a, ref) => {
+var Textarea = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, spellCheck } = _b, props = __objRest(_b, ["className", "spellCheck"]);
   return /* @__PURE__ */ jsx(
     "textarea",
@@ -13019,7 +13673,7 @@ var toggleVariants = cva(
     }
   }
 );
-var Toggle = React78.forwardRef((_a, ref) => {
+var Toggle = React80.forwardRef((_a, ref) => {
   var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
   return /* @__PURE__ */ jsx(
     TogglePrimitive.Root,
@@ -13031,7 +13685,7 @@ var Toggle = React78.forwardRef((_a, ref) => {
 });
 Toggle.displayName = TogglePrimitive.Root.displayName;
 function useMergedRef(...refs) {
-  return React78.useCallback((node) => {
+  return React80.useCallback((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") ref(node);
       else if (ref && "current" in ref)
@@ -13060,13 +13714,13 @@ var chipSizeMap = {
   xs: "sm",
   "2xs": "sm"
 };
-var ToggleGroupContext = React78.createContext(null);
+var ToggleGroupContext = React80.createContext(null);
 function useToggleGroup() {
-  const ctx = React78.useContext(ToggleGroupContext);
+  const ctx = React80.useContext(ToggleGroupContext);
   if (!ctx) throw new Error("ToggleGroupItem must be used within a ToggleGroup");
   return ctx;
 }
-var ToggleGroup = React78.forwardRef(
+var ToggleGroup = React80.forwardRef(
   (props, ref) => {
     const {
       type,
@@ -13081,16 +13735,16 @@ var ToggleGroup = React78.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.useState(
+    const [internalValue, setInternalValue] = React80.useState(
       defaultValue
     );
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const [rovingFocusValue, setRovingFocusValue] = React78.useState(null);
-    const itemRefs = React78.useRef(/* @__PURE__ */ new Map());
-    const itemValues = React78.useRef([]);
-    const [, notifyRegistration] = React78.useReducer((x) => x + 1, 0);
-    const isActive = React78.useCallback(
+    const [rovingFocusValue, setRovingFocusValue] = React80.useState(null);
+    const itemRefs = React80.useRef(/* @__PURE__ */ new Map());
+    const itemValues = React80.useRef([]);
+    const [, notifyRegistration] = React80.useReducer((x) => x + 1, 0);
+    const isActive = React80.useCallback(
       (itemValue) => {
         if (type === "single") return value === itemValue;
         if (type === "multiple" && Array.isArray(value)) return value.includes(itemValue);
@@ -13098,7 +13752,7 @@ var ToggleGroup = React78.forwardRef(
       },
       [type, value]
     );
-    const toggle = React78.useCallback(
+    const toggle = React80.useCallback(
       (itemValue) => {
         if (type === "single") {
           const newValue = value === itemValue ? void 0 : itemValue;
@@ -13142,7 +13796,7 @@ var ToggleGroup = React78.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React78.forwardRef(
+var ToggleGroupItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: itemValue,
@@ -13177,9 +13831,9 @@ var ToggleGroupItem = React78.forwardRef(
     const disabled = ctx.disabled || itemDisabled;
     const resolvedSize = bgSize != null ? bgSize : "lg";
     const chipSize = chipSizeMap[resolvedSize];
-    const internalRef = React78.useRef(null);
+    const internalRef = React80.useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    React78.useEffect(() => {
+    React80.useEffect(() => {
       const el = internalRef.current;
       if (!el) return;
       ctx.itemRefs.current.set(itemValue, el);
@@ -13315,8 +13969,8 @@ var ToggleGroupItem = React78.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
@@ -13396,7 +14050,7 @@ var containedInnerVariants = cva(
     "group-hover:bg-sui-bg-state-secondary-hover group-active:bg-sui-bg-state-secondary-press"
   ]
 );
-var Userbar = React78.forwardRef(
+var Userbar = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13505,7 +14159,7 @@ var Userbar = React78.forwardRef(
   }
 );
 Userbar.displayName = "Userbar";
-var VerticalStepperItem = React78.forwardRef(
+var VerticalStepperItem = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13641,7 +14295,7 @@ var VerticalStepperItem = React78.forwardRef(
   }
 );
 VerticalStepperItem.displayName = "VerticalStepperItem";
-var VerticalStepper = React78.forwardRef(
+var VerticalStepper = React80.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13683,7 +14337,10 @@ var VerticalStepper = React78.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 === " ") {
@@ -13722,4 +14379,4 @@ var VerticalStepper = React78.forwardRef(
 );
 VerticalStepper.displayName = "VerticalStepper";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarButton, AvatarFallback, AvatarGroup, AvatarImage, AvatarUpload, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, Calendar, CalendarDayButton, Card, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, CheckboxList, CheckboxWithText, Chip, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ControlButton, DataRangeSlider, DataRangeSliderInput, DatePicker, DatePickerInput, DatePickerWithPresets, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCaption, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLargeItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuUserbar, EmptyState, FileUpload, FileUploadArea, FileUploadCard, FilterButton, GridTableCell, GridTableHeaderItem, GridTableRow, GridTableSlotItem, HorizontalStepper, HorizontalStepperItem, InlineTips, Input, InputButton, InputCaption, InputField, InputStepper, Label, LinkButton, MenuSearchInput, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageItem, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Paginator, Popover, PopoverContent, PopoverTrigger, Progress, ProgressBar, RadialProgressBar, RadioButton, RadioButtonCard, RadioButtonList, RadioButtonWithText, RadioCardGroup, RadioGroup2 as RadioGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectMenu, SelectMenuDescription, SelectMenuFooterButton, SelectMenuItem, SelectMenuLabel, SelectMenuLargeItem, SelectMenuSeparator, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Toaster2 as ShadcnToaster, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarCard, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem2 as SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderHandle, SliderInput, SliderRange, SliderRangeInput, SocialButton, SortBreadcrumb, SortBreadcrumbItem, StatusBadge, StepperIcon, StepperNumber, Switch, SwitchList, SwitchWithText, TabItem, TabList, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableHeaderItem, TableItem, TablePagination, TableRow, TableRowSort, TableSkeletonRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UnderlineTabItem, UnderlineTabsList, Userbar, VerticalStepper, VerticalStepperItem, accordionItemVariants, avatarButtonVariants, avatarVariants, buttonGroupItemVariants, buttonVariants, cardVariants, checkboxCardVariants, checkboxVariants, checkboxWithTextVariants, chipVariants, controlButtonVariants, datePickerInputContainerVariants, dividerVariants2 as dividerVariants, emptyStateVariants, extractInitials, fileUploadCardVariants, filterButtonVariants, formatBytes, gridTableHeaderItemVariants, gridTableRowVariants, gridTableSlotItemVariants, horizontalStepperItemVariants, inlineTipsVariants, inputButtonVariants, inputContainerVariants, lineVariants, linkButtonVariants, navigationMenuTriggerStyle, pageItemVariants, progressBarVariants, radialProgressBarVariants, radioButtonCardVariants, radioButtonVariants, radioButtonWithTextVariants, sidebarCardVariants, sidebarMenuItemVariants, sliderHandleVariants, socialButtonVariants, stepperIconVariants, stepperNumberVariants, tabItemVariants, tabListVariants, tableHeaderItemVariants, tableItemVariants, tableRowSortVariants, textAreaContainerVariants, toggleVariants, tooltipContentVariants, underlineTabItemVariants, underlineTabsListVariants, useSidebar, userbarVariants, validateFile };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, Avatar, AvatarButton, AvatarFallback, AvatarGroup, AvatarImage, AvatarUpload, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, Calendar, CalendarDayButton, Card, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, CheckboxList, CheckboxWithText, Chip, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ControlButton, DataRangeSlider, DataRangeSliderInput, DatePicker, DatePickerInput, DatePickerWithPresets, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCaption, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLargeItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuUserbar, EmptyState, FileUpload, FileUploadArea, FileUploadCard, FilterButton, GridTableCell, GridTableHeaderItem, GridTableRow, GridTableSlotItem, HorizontalStepper, HorizontalStepperItem, InlineTips, Input, InputButton, InputCaption, InputField, InputStepper, Label, LinkButton, MenuSearchInput, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageItem, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Paginator, Popover, PopoverContent, PopoverTrigger, ProductCard, Progress, ProgressBar, RadialProgressBar, RadioButton, RadioButtonCard, RadioButtonList, RadioButtonWithText, RadioCardGroup, RadioGroup2 as RadioGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectMenu, SelectMenuDescription, SelectMenuFooterButton, SelectMenuItem, SelectMenuLabel, SelectMenuLargeItem, SelectMenuSeparator, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Toaster2 as ShadcnToaster, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarCard, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem2 as SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignInCard, Skeleton, Slider, SliderHandle, SliderInput, SliderRange, SliderRangeInput, SocialButton, SortBreadcrumb, SortBreadcrumbItem, StatusBadge, StepperIcon, StepperNumber, Switch, SwitchList, SwitchWithText, TabItem, TabList, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableHeaderItem, TableItem, TablePagination, TableRow, TableRowSort, TableSkeletonRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UnderlineTabItem, UnderlineTabsList, Userbar, VerticalStepper, VerticalStepperItem, accordionItemVariants, attachmentVariants, avatarButtonVariants, avatarVariants, buttonGroupItemVariants, buttonVariants, cardVariants, checkboxCardVariants, checkboxVariants, checkboxWithTextVariants, chipVariants, controlButtonVariants, datePickerInputContainerVariants, dividerVariants2 as dividerVariants, emptyStateVariants, extractInitials, fileUploadCardVariants, filterButtonVariants, formatBytes, gridTableHeaderItemVariants, gridTableRowVariants, gridTableSlotItemVariants, horizontalStepperItemVariants, inlineTipsVariants, inputButtonVariants, inputContainerVariants, lineVariants, linkButtonVariants, navigationMenuTriggerStyle, pageItemVariants, progressBarVariants, radialProgressBarVariants, radioButtonCardVariants, radioButtonVariants, radioButtonWithTextVariants, sidebarCardVariants, sidebarMenuItemVariants, sliderHandleVariants, socialButtonVariants, stepperIconVariants, stepperNumberVariants, tabItemVariants, tabListVariants, tableHeaderItemVariants, tableItemVariants, tableRowSortVariants, textAreaContainerVariants, toggleVariants, tooltipContentVariants, underlineTabItemVariants, underlineTabsListVariants, useSidebar, userbarVariants, validateFile };