@maxsteinwender/sort-ui 0.1.1 → 1.0.3

package/dist/index.js

@@ -1,6 +1,7 @@
+"use client";
 'use strict';
 
-var React78 = require('react');
+var React77 = require('react');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -9,7 +10,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var reactSlot = require('@radix-ui/react-slot');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
-var lucideReact = require('lucide-react');
 var reactDayPicker = require('react-day-picker');
 var RechartsPrimitive = require('recharts');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -23,7 +23,6 @@ var dateFns = require('date-fns');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var ProgressPrimitive2 = require('@radix-ui/react-progress');
-var reactHookForm = require('react-hook-form');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
@@ -53,7 +52,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React78__namespace = /*#__PURE__*/_interopNamespace(React78);
+var React77__namespace = /*#__PURE__*/_interopNamespace(React77);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
@@ -162,7 +161,7 @@ var accordionItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var AccordionItem = React78__namespace.forwardRef((_a, ref) => {
+var AccordionItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Item,
@@ -173,7 +172,7 @@ var AccordionItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React78__namespace.forwardRef((_a, ref) => {
+var AccordionTrigger = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
     AccordionPrimitive__namespace.Trigger,
@@ -182,7 +181,7 @@ var AccordionTrigger = React78__namespace.forwardRef((_a, ref) => {
       className: cn(
         "flex flex-1 items-start justify-between gap-sui-8 p-sui-24 cursor-pointer",
         "text-md font-medium leading-6 text-sui-text-default text-left",
-        "transition-all",
+        "transition-all 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",
         "[&[data-state=open]>div>i]:rotate-180",
         className
       )
@@ -195,7 +194,7 @@ var AccordionTrigger = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
-var AccordionContent = React78__namespace.forwardRef((_a, ref) => {
+var AccordionContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Content,
@@ -227,11 +226,11 @@ var AccordionContent = React78__namespace.forwardRef((_a, ref) => {
 });
 AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;
 var alertVariants = classVarianceAuthority.cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-sui-text-default",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-sui-bg-default text-sui-text-default",
         destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
       }
     },
@@ -240,7 +239,7 @@ var alertVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Alert = React78__namespace.forwardRef((_a, ref) => {
+var Alert = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -252,7 +251,7 @@ var Alert = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 Alert.displayName = "Alert";
-var AlertTitle = React78__namespace.forwardRef((_a, ref) => {
+var AlertTitle = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "h5",
@@ -263,7 +262,7 @@ var AlertTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React78__namespace.forwardRef((_a, ref) => {
+var AlertDescription = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -282,15 +281,15 @@ var buttonVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         // Primary — Sort UI: bg/state/primary, text/white-default, icon/white-default
-        default: "bg-sui-bg-state-primary text-sui-text-white-default [text-shadow:var(--shadow-text)] [&_i]:text-icon-white-default [&_i]:[text-shadow:none] [&_svg]:text-icon-white-default [&_svg]:[text-shadow:none] shadow-[0px_1px_2px_rgba(0,0,0,0.08),inset_0px_-2px_0px_rgba(0,0,0,0.20)] active:shadow-[inset_0px_2px_0px_rgba(0,0,0,0.20)] hover:bg-sui-bg-state-primary-hover active:bg-sui-bg-state-primary-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
+        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 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 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
-        outline: "bg-sui-bg-state-secondary border border-sui-border-darker text-sui-text-default [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted shadow-[0px_1px_2px_rgba(0,0,0,0.06),inset_0px_-1px_0px_rgba(0,0,0,0.08)] active:shadow-[inset_0px_1px_0px_rgba(0,0,0,0.08)] hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press disabled:bg-sui-bg-state-disabled disabled:border-sui-border-default",
+        outline: "bg-sui-bg-state-secondary border border-sui-border-darker text-sui-text-default [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted shadow-button-secondary active:shadow-button-secondary-press hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press disabled:bg-sui-bg-state-disabled disabled:border-sui-border-default",
         // Ghost — Sort UI: bg/state/ghost, text/default, icon/default-muted
         ghost: "bg-sui-bg-state-ghost text-sui-text-default [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
         // Destructive — Sort UI: bg/state/destructive, text/white-default, icon/white-default
-        destructive: "bg-sui-bg-state-destructive 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-[0px_1px_2px_rgba(0,0,0,0.08),inset_0px_-2px_0px_rgba(0,0,0,0.20)] active:shadow-[inset_0px_2px_0px_rgba(0,0,0,0.20)] hover:bg-sui-bg-state-destructive-hover active:bg-sui-bg-state-destructive-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
+        destructive: "bg-sui-bg-state-destructive 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 hover:bg-sui-bg-state-destructive-hover active:bg-sui-bg-state-destructive-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
         // Ghost Muted — Sort UI: bg/state/ghost, text/muted, icon/default-muted
         "ghost-muted": "bg-sui-bg-state-ghost text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press"
       },
@@ -393,7 +392,7 @@ var loadingTextColorMap = {
   "ghost-muted": "text-sui-text-muted"
 };
 var loadingShadowVariants = /* @__PURE__ */ new Set(["default", "outline", "destructive"]);
-var Button = React78__namespace.forwardRef(
+var Button = React77__namespace.forwardRef(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   (_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"]);
@@ -464,7 +463,7 @@ Button.displayName = "Button";
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogOverlay = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Overlay,
@@ -479,7 +478,7 @@ var AlertDialogOverlay = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
@@ -488,7 +487,7 @@ var AlertDialogContent = React78__namespace.forwardRef((_a, ref) => {
       __spreadValues({
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-sui-border-default bg-sui-bg-card p-6 shadow-modal-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
           className
         )
       }, props)
@@ -530,7 +529,7 @@ var AlertDialogFooter = (_a) => {
   );
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogTitle = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Title,
@@ -541,18 +540,18 @@ var AlertDialogTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogDescription = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-muted-foreground", className)
+      className: cn("text-sm text-sui-text-muted", className)
     }, props)
   );
 });
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogAction = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Action,
@@ -563,7 +562,7 @@ var AlertDialogAction = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React78__namespace.forwardRef((_a, ref) => {
+var AlertDialogCancel = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Cancel,
@@ -602,11 +601,11 @@ var awayIconSize = {
   "lg": "14px",
   "default": "16px"
 };
-var StatusBadge = React78__namespace.forwardRef(
+var StatusBadge = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant, size = "default", src, className } = _b, props = __objRest(_b, ["variant", "size", "src", "className"]);
-    const [imgError, setImgError] = React78__namespace.useState(false);
-    React78__namespace.useEffect(() => {
+    const [imgError, setImgError] = React77__namespace.useState(false);
+    React77__namespace.useEffect(() => {
       setImgError(false);
     }, [src]);
     const sizeClass = containerSize[size];
@@ -682,7 +681,7 @@ function CompanyContent({
 }
 function DotContent({ dotColor }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-[12.5%] rounded-full bg-background" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-[12.5%] rounded-full bg-sui-bg-card" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute inset-[20.83%] rounded-full", dotColor) })
   ] });
 }
@@ -819,12 +818,12 @@ function extractInitials(value) {
   }
   return trimmed.slice(0, 2).toUpperCase();
 }
-var AvatarContext = React78__namespace.createContext({
+var AvatarContext = React77__namespace.createContext({
   size: "md",
   shape: "circular",
   color: "gray"
 });
-var Avatar = React78__namespace.forwardRef((_a, ref) => {
+var Avatar = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, {
     className,
     size = "md",
@@ -967,7 +966,7 @@ var Avatar = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
-var AvatarImage = React78__namespace.forwardRef((_a, ref) => {
+var AvatarImage = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Image,
@@ -978,10 +977,10 @@ var AvatarImage = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
-var AvatarFallback = React78__namespace.forwardRef((_a, ref) => {
+var AvatarFallback = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, fallback, children } = _b, props = __objRest(_b, ["className", "fallback", "children"]);
   var _a2, _b2, _c;
-  const { size, shape, color } = React78__namespace.useContext(AvatarContext);
+  const { size, shape, color } = React77__namespace.useContext(AvatarContext);
   const shapeClass = shape === "rounded" ? "rounded-sm" : "rounded-full";
   const fontClass = (_a2 = initialsFontSize[size]) != null ? _a2 : "text-sm";
   const iconClass = (_b2 = iconSize[size]) != null ? _b2 : "text-lg";
@@ -1031,7 +1030,7 @@ var avatarButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var AvatarButton = React78__namespace.forwardRef(
+var AvatarButton = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1125,7 +1124,7 @@ var paddingBySize = {
   "2xl": "pr-sui-10",
   "3xl": "pr-sui-12"
 };
-var AvatarGroup = React78__namespace.forwardRef(
+var AvatarGroup = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size = "md", stacking = "last-on-top", items } = _b, props = __objRest(_b, ["className", "size", "stacking", "items"]);
     const isFirstOnTop = stacking === "first-on-top";
@@ -1167,7 +1166,7 @@ var AvatarGroup = React78__namespace.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AvatarUpload = React78__namespace.forwardRef(
+var AvatarUpload = React77__namespace.forwardRef(
   ({
     src,
     alt = "",
@@ -1231,7 +1230,7 @@ var AvatarUpload = React78__namespace.forwardRef(
 );
 AvatarUpload.displayName = "AvatarUpload";
 var controlButtonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center transition-colors 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:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_i]:pointer-events-none [&_i]:shrink-0 [&_i]:leading-none",
+  "inline-flex items-center justify-center transition-colors 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_i]:pointer-events-none [&_i]:shrink-0 [&_i]:leading-none",
   {
     variants: {
       variant: {
@@ -1260,7 +1259,7 @@ var controlButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var ControlButton = React78__namespace.forwardRef(
+var ControlButton = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1422,26 +1421,26 @@ function Badge(_a) {
     })
   );
 }
-var Breadcrumb = React78__namespace.forwardRef((_a, ref) => {
+var Breadcrumb = React77__namespace.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsxRuntime.jsx("nav", __spreadValues({ ref, "aria-label": "breadcrumb" }, props));
 });
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React78__namespace.forwardRef((_a, ref) => {
+var BreadcrumbList = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ol",
     __spreadValues({
       ref,
       className: cn(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-sui-text-muted sm:gap-2.5",
         className
       )
     }, props)
   );
 });
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React78__namespace.forwardRef((_a, ref) => {
+var BreadcrumbItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
@@ -1452,7 +1451,7 @@ var BreadcrumbItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React78__namespace.forwardRef((_a, ref) => {
+var BreadcrumbLink = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { asChild, className } = _b, props = __objRest(_b, ["asChild", "className"]);
   const Comp = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1460,21 +1459,21 @@ var BreadcrumbLink = React78__namespace.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "rounded-sm transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+        "rounded-sm transition-colors hover:text-sui-text-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sui-border-highlight",
         className
       )
     }, props)
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React78__namespace.forwardRef((_a, ref) => {
+var BreadcrumbPage = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     __spreadValues({
       ref,
       "aria-current": "page",
-      className: cn("font-normal text-foreground", className)
+      className: cn("font-normal text-sui-text-default", className)
     }, props)
   );
 });
@@ -1492,9 +1491,9 @@ var BreadcrumbSeparator = (_a) => {
     __spreadProps(__spreadValues({
       role: "presentation",
       "aria-hidden": "true",
-      className: cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)
+      className: cn("[&>svg]:w-3.5 [&>svg]:h-3.5 [&>i]:text-sm", className)
     }, props), {
-      children: children != null ? children : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {})
+      children: children != null ? children : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line", "aria-hidden": true })
     })
   );
 };
@@ -1512,7 +1511,7 @@ var BreadcrumbEllipsis = (_a) => {
       "aria-hidden": "true",
       className: cn("flex h-9 w-9 items-center justify-center", className)
     }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-line text-base", "aria-hidden": true })
     })
   );
 };
@@ -1538,7 +1537,7 @@ function SortBreadcrumb({
       ),
       children: items.map((item, index) => {
         const isLast = index === items.length - 1;
-        return /* @__PURE__ */ jsxRuntime.jsxs(React78__namespace.Fragment, { children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs(React77__namespace.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
             SortBreadcrumbItem,
             __spreadProps(__spreadValues({}, item), {
@@ -1627,7 +1626,7 @@ var verticalChildRadius = {
   xs: "[&>button:first-child]:rounded-t-md [&>button:last-of-type]:rounded-b-md",
   "2xs": "[&>button:first-child]:rounded-t-sm [&>button:last-of-type]:rounded-b-sm"
 };
-var ButtonGroup = React78__namespace.forwardRef(
+var ButtonGroup = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "lg", orientation = "horizontal", className, children } = _b, props = __objRest(_b, ["size", "orientation", "className", "children"]);
     const isVertical = orientation === "vertical";
@@ -1646,9 +1645,9 @@ var ButtonGroup = React78__namespace.forwardRef(
           className
         )
       }, props), {
-        children: React78__namespace.Children.map(children, (child, index) => {
-          if (React78__namespace.isValidElement(child)) {
-            return React78__namespace.cloneElement(
+        children: React77__namespace.Children.map(children, (child, index) => {
+          if (React77__namespace.isValidElement(child)) {
+            return React77__namespace.cloneElement(
               child,
               {
                 showSeparator: index > 0,
@@ -1717,7 +1716,7 @@ var badgeClasses = {
   xs: "text-xs font-medium leading-4 py-sui-2",
   "2xs": "text-xs font-medium leading-4 py-0"
 };
-var ButtonGroupItem = React78__namespace.forwardRef(
+var ButtonGroupItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -1801,7 +1800,7 @@ var filterButtonVariants = classVarianceAuthority.cva(
 );
 var getVisualStateClasses = (selected) => selected ? "bg-sui-bg-state-secondary border border-solid border-sui-border-darker text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted shadow-default" : "bg-sui-bg-state-secondary border border-dashed border-sui-border-darker text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted";
 var SUB_BUTTON_FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-1 rounded-sm";
-var FilterButton = React78__namespace.forwardRef(
+var FilterButton = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1991,7 +1990,7 @@ var underlineOffsetMap = {
   md: "after:bottom-0",
   lg: "after:bottom-0"
 };
-var LinkButton = React78__namespace.forwardRef(
+var LinkButton = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size, asChild = false, leadIcon, tailIcon, disabled, children } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild", "leadIcon", "tailIcon", "disabled", "children"]);
     const Comp = asChild ? reactSlot.Slot : "button";
@@ -2037,13 +2036,13 @@ var LinkButton = React78__namespace.forwardRef(
 );
 LinkButton.displayName = "LinkButton";
 var socialButtonVariants = classVarianceAuthority.cva(
-  "group inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_i]:pointer-events-none [&_i]:shrink-0 [&_i]:leading-none [&_i]:text-md [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+  "group inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors 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 [&_i]:pointer-events-none [&_i]:shrink-0 [&_i]:leading-none [&_i]:text-md [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
   {
     variants: {
       variant: {
         // --sb-bg is a runtime brand slot set via inline style — intentional, not a token violation
-        brand: "bg-[var(--sb-bg,#111115)] text-white shadow-[0px_1px_2px_rgba(0,0,0,0.08),inset_0px_-2px_0px_rgba(0,0,0,0.20)] active:shadow-[inset_0px_2px_0px_rgba(0,0,0,0.20)] hover:bg-[color-mix(in_srgb,#fff_15%,var(--sb-bg,#111115))] active:bg-[color-mix(in_srgb,#fff_25%,var(--sb-bg,#111115))]",
-        secondary: "bg-background border border-foreground/15 text-foreground shadow-[0px_1px_2px_rgba(0,0,0,0.06),inset_0px_-1px_0px_rgba(0,0,0,0.08)] active:shadow-[inset_0px_1px_0px_rgba(0,0,0,0.08)] hover:bg-foreground/[0.04] active:bg-foreground/[0.06]"
+        brand: "bg-[var(--sb-bg,var(--social-brand-default))] text-sui-text-white-default shadow-button-default active:shadow-button-press hover:bg-[color-mix(in_srgb,#fff_15%,var(--sb-bg,var(--social-brand-default)))] active:bg-[color-mix(in_srgb,#fff_25%,var(--sb-bg,var(--social-brand-default)))]",
+        secondary: "bg-sui-bg-default border border-sui-border-darker text-sui-text-default shadow-button-secondary active:shadow-button-secondary-press hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press"
       },
       shape: {
         rounded: "rounded-md",
@@ -2058,15 +2057,15 @@ var socialButtonVariants = classVarianceAuthority.cva(
 );
 var brandMap = {
   apple: { icon: "ri-apple-fill", label: "Apple" },
-  facebook: { icon: "ri-facebook-fill", label: "Facebook", bg: "#0766FF" },
+  facebook: { icon: "ri-facebook-fill", label: "Facebook", bg: "var(--social-brand-facebook)" },
   google: { icon: "ri-google-fill", label: "Google" },
   twitter: { icon: "ri-twitter-x-fill", label: "Twitter" },
-  linkedin: { icon: "ri-linkedin-fill", label: "LinkedIn", bg: "#0077B5" },
-  dribbble: { icon: "ri-dribbble-fill", label: "Dribbble", bg: "#D95889" },
-  dropbox: { icon: "ri-dropbox-fill", label: "Dropbox", bg: "#2860F5" },
+  linkedin: { icon: "ri-linkedin-fill", label: "LinkedIn", bg: "var(--social-brand-linkedin)" },
+  dribbble: { icon: "ri-dribbble-fill", label: "Dribbble", bg: "var(--social-brand-dribbble)" },
+  dropbox: { icon: "ri-dropbox-fill", label: "Dropbox", bg: "var(--social-brand-dropbox)" },
   github: { icon: "ri-github-fill", label: "Github" }
 };
-var SocialButton = React78__namespace.forwardRef(
+var SocialButton = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, shape, brand, iconOnly, asChild = false, children } = _b, props = __objRest(_b, ["className", "variant", "shape", "brand", "iconOnly", "asChild", "children"]);
     const Comp = asChild ? reactSlot.Slot : "button";
@@ -2271,8 +2270,8 @@ function CalendarDayButton(_a) {
     "modifiers"
   ]);
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const ref = React78__namespace.useRef(null);
-  React78__namespace.useEffect(() => {
+  const ref = React77__namespace.useRef(null);
+  React77__namespace.useEffect(() => {
     var _a2;
     if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [modifiers.focused]);
@@ -2323,62 +2322,82 @@ function CalendarDayButton(_a) {
   );
 }
 CalendarDayButton.displayName = "CalendarDayButton";
-var Card = React78__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    __spreadValues({
-      ref,
-      className: cn(
-        "rounded-lg border bg-card text-card-foreground shadow-sm",
-        className
-      )
-    }, props)
-  );
-});
+var cardVariants = classVarianceAuthority.cva(
+  "flex flex-col",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-sui-bg-card",
+          "border border-sui-border-darker",
+          "shadow-card",
+          "rounded-card-md"
+        ],
+        flat: [
+          "bg-transparent"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Card = React77__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadValues({
+        ref,
+        className: cn(cardVariants({ variant }), className)
+      }, props)
+    );
+  }
+);
 Card.displayName = "Card";
-var CardHeader = React78__namespace.forwardRef((_a, ref) => {
+var CardHeader = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadValues({
       ref,
-      className: cn("flex flex-col space-y-1.5 p-6", className)
+      className: cn("flex flex-col gap-1.5 p-6", className)
     }, props)
   );
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React78__namespace.forwardRef((_a, ref) => {
+var CardTitle = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadValues({
       ref,
       className: cn(
-        "text-2xl font-semibold leading-none tracking-tight",
+        "text-base font-medium leading-6 text-sui-text-default",
         className
       )
     }, props)
   );
 });
 CardTitle.displayName = "CardTitle";
-var CardDescription = React78__namespace.forwardRef((_a, ref) => {
+var CardDescription = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadValues({
       ref,
-      className: cn("text-sm text-muted-foreground", className)
+      className: cn("text-sm font-normal leading-5 text-sui-text-muted", className)
     }, props)
   );
 });
 CardDescription.displayName = "CardDescription";
-var CardContent = React78__namespace.forwardRef((_a, ref) => {
+var CardContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React78__namespace.forwardRef((_a, ref) => {
+var CardFooter = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2389,18 +2408,38 @@ var CardFooter = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CardFooter.displayName = "CardFooter";
+var CardCover = React77__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, flush = false, aspectRatio = "3/2", style, children } = _b, props = __objRest(_b, ["className", "flush", "aspectRatio", "style", "children"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "relative w-full shrink-0 overflow-hidden",
+          flush ? "rounded-t-card-md" : "rounded-card-xs border border-sui-border-darker shadow-default",
+          className
+        ),
+        style: __spreadValues({ aspectRatio }, style)
+      }, props), {
+        children
+      })
+    );
+  }
+);
+CardCover.displayName = "CardCover";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React78__namespace.createContext(null);
+var ChartContext = React77__namespace.createContext(null);
 function useChart() {
-  const context = React78__namespace.useContext(ChartContext);
+  const context = React77__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React78__namespace.forwardRef((_a, ref) => {
+var ChartContainer = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { id, className, children, config } = _b, props = __objRest(_b, ["id", "className", "children", "config"]);
-  const uniqueId = React78__namespace.useId();
+  const uniqueId = React77__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2447,7 +2486,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive__namespace.Tooltip;
-var ChartTooltipContent = React78__namespace.forwardRef(
+var ChartTooltipContent = React77__namespace.forwardRef(
   ({
     active,
     payload,
@@ -2464,7 +2503,7 @@ var ChartTooltipContent = React78__namespace.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React78__namespace.useMemo(() => {
+    const tooltipLabel = React77__namespace.useMemo(() => {
       var _a;
       if (hideLabel || !(payload == null ? void 0 : payload.length)) {
         return null;
@@ -2561,7 +2600,7 @@ var ChartTooltipContent = React78__namespace.forwardRef(
 );
 ChartTooltipContent.displayName = "ChartTooltip";
 var ChartLegend = RechartsPrimitive__namespace.Legend;
-var ChartLegendContent = React78__namespace.forwardRef(
+var ChartLegendContent = React77__namespace.forwardRef(
   ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!(payload == null ? void 0 : payload.length)) {
@@ -2680,7 +2719,7 @@ var checkboxVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Checkbox = React78__namespace.forwardRef((_a, ref) => {
+var Checkbox = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     CheckboxPrimitive__namespace.Root,
@@ -2801,7 +2840,7 @@ var checkboxCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CheckboxCard = React78__namespace.forwardRef(
+var CheckboxCard = React77__namespace.forwardRef(
   ({
     title,
     description,
@@ -2815,7 +2854,7 @@ var CheckboxCard = React78__namespace.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const checkboxId = `checkbox-card-${generatedId}`;
     const titleId = `checkbox-card-title-${generatedId}`;
     const descriptionId = `checkbox-card-desc-${generatedId}`;
@@ -2911,10 +2950,10 @@ var CheckboxCard = React78__namespace.forwardRef(
   }
 );
 CheckboxCard.displayName = "CheckboxCard";
-var CheckboxList = React78__namespace.forwardRef(
+var CheckboxList = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React78__namespace.Children.toArray(children);
+    const items = React77__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -2956,7 +2995,7 @@ var checkboxWithTextVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CheckboxWithText = React78__namespace.forwardRef(
+var CheckboxWithText = React77__namespace.forwardRef(
   ({
     label,
     description,
@@ -2969,7 +3008,7 @@ var CheckboxWithText = React78__namespace.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const checkboxId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -3117,7 +3156,7 @@ var labelClasses2 = {
   md: "text-sm font-medium leading-5",
   sm: "text-xs font-medium leading-4"
 };
-var Chip = React78__namespace.forwardRef(
+var Chip = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -3146,7 +3185,7 @@ var Chip = React78__namespace.forwardRef(
       "className",
       "onClick"
     ]);
-    const [internalSelected, setInternalSelected] = React78__namespace.useState(false);
+    const [internalSelected, setInternalSelected] = React77__namespace.useState(false);
     const isControlled = controlledSelected !== void 0;
     const selected = isControlled ? controlledSelected : internalSelected;
     const handleClick = (e) => {
@@ -3235,7 +3274,7 @@ var badgeStyles = [
   "bg-sui-bg-state-soft border border-sui-border-darker rounded-xs",
   "text-sui-text-subtle text-xs font-medium leading-4"
 ].join(" ");
-var TooltipContent = React78__namespace.forwardRef((_a, ref) => {
+var TooltipContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "default", weight = "subtle", shortcut, sideOffset = 4, children } = _b, props = __objRest(_b, ["className", "variant", "weight", "shortcut", "sideOffset", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     TooltipPrimitive__namespace.Content,
@@ -3271,7 +3310,7 @@ var underlineTabsListVariants = classVarianceAuthority.cva(
     }
   }
 );
-var UnderlineTabsList = React78__namespace.forwardRef((_a, ref) => {
+var UnderlineTabsList = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, layout, size } = _b, props = __objRest(_b, ["className", "layout", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
@@ -3318,7 +3357,7 @@ var underlineTabItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var UnderlineTabItem = React78__namespace.forwardRef(
+var UnderlineTabItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3356,7 +3395,7 @@ var UnderlineTabItem = React78__namespace.forwardRef(
 );
 UnderlineTabItem.displayName = "UnderlineTabItem";
 var DEFAULT_LANGUAGES = ["React", "JavaScript", "TypeScript", "Next.js"];
-var CodeBlock = React78__namespace.forwardRef(
+var CodeBlock = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3386,10 +3425,10 @@ var CodeBlock = React78__namespace.forwardRef(
       "showLineNumbers"
     ]);
     var _a2, _b2, _c, _d, _e, _f;
-    const [activeTab, setActiveTab] = React78__namespace.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
-    const [copied, setCopied] = React78__namespace.useState(false);
+    const [activeTab, setActiveTab] = React77__namespace.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
+    const [copied, setCopied] = React77__namespace.useState(false);
     const activeCode = variant === "advanced" ? (_f = (_e = (_c = tabs == null ? void 0 : tabs.find((t) => t.label === activeTab)) == null ? void 0 : _c.code) != null ? _e : (_d = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _d.code) != null ? _f : "" : code;
-    const handleCopy = React78__namespace.useCallback(() => {
+    const handleCopy = React77__namespace.useCallback(() => {
       if (onCopy) {
         onCopy();
       } else {
@@ -3580,7 +3619,7 @@ var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React78__namespace.forwardRef((_a, ref) => {
+var DialogOverlay = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -3594,7 +3633,7 @@ var DialogOverlay = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React78__namespace.forwardRef((_a, ref) => {
+var DialogContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
@@ -3603,14 +3642,14 @@ var DialogContent = React78__namespace.forwardRef((_a, ref) => {
       __spreadProps(__spreadValues({
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-sui-border-default bg-sui-bg-card p-6 shadow-modal-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
           className
         )
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-sui-bg-default transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-sui-bg-state-ghost-hover data-[state=open]:text-sui-text-muted", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-line text-base", "aria-hidden": true }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
           ] })
         ]
@@ -3653,7 +3692,7 @@ var DialogFooter = (_a) => {
   );
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React78__namespace.forwardRef((_a, ref) => {
+var DialogTitle = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
@@ -3667,25 +3706,25 @@ var DialogTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React78__namespace.forwardRef((_a, ref) => {
+var DialogDescription = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-muted-foreground", className)
+      className: cn("text-sm text-sui-text-muted", className)
     }, props)
   );
 });
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var Command = React78__namespace.forwardRef((_a, ref) => {
+var Command = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command,
     __spreadValues({
       ref,
       className: cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        "flex h-full w-full flex-col overflow-hidden rounded-xl bg-sui-bg-card text-sui-text-default",
         className
       )
     }, props)
@@ -3694,18 +3733,18 @@ var Command = React78__namespace.forwardRef((_a, ref) => {
 Command.displayName = cmdk.Command.displayName;
 var CommandDialog = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "overflow-hidden p-0 shadow-card max-w-[560px]", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-sui-text-hint [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_i]:h-4 [&_[cmdk-input-wrapper]_i]:w-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_i]:h-4 [&_[cmdk-item]_i]:w-4", children }) }) }));
 };
-var CommandInput = React78__namespace.forwardRef((_a, ref) => {
+var CommandInput = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-sui-border-default px-3", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-search-line mr-2 shrink-0 text-icon-default-muted" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       cmdk.Command.Input,
       __spreadValues({
         ref,
         className: cn(
-          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm text-sui-text-default outline-none placeholder:text-sui-text-hint disabled:cursor-not-allowed disabled:text-sui-text-hint disabled:pointer-events-none",
           className
         )
       }, props)
@@ -3713,7 +3752,7 @@ var CommandInput = React78__namespace.forwardRef((_a, ref) => {
   ] });
 });
 CommandInput.displayName = cmdk.Command.Input.displayName;
-var CommandList = React78__namespace.forwardRef((_a, ref) => {
+var CommandList = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.List,
@@ -3724,47 +3763,50 @@ var CommandList = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 CommandList.displayName = cmdk.Command.List.displayName;
-var CommandEmpty = React78__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandEmpty = React77__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Empty,
   __spreadValues({
     ref,
-    className: "py-6 text-center text-sm"
+    className: "py-6 text-center text-sm text-sui-text-subtle"
   }, props)
 ));
 CommandEmpty.displayName = cmdk.Command.Empty.displayName;
-var CommandGroup = React78__namespace.forwardRef((_a, ref) => {
+var CommandGroup = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Group,
     __spreadValues({
       ref,
       className: cn(
-        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        "overflow-hidden p-1 text-sui-text-default [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-sui-text-hint",
         className
       )
     }, props)
   );
 });
 CommandGroup.displayName = cmdk.Command.Group.displayName;
-var CommandSeparator = React78__namespace.forwardRef((_a, ref) => {
+var CommandSeparator = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Separator,
     __spreadValues({
       ref,
-      className: cn("-mx-1 h-px bg-border", className)
+      className: cn("-mx-1 h-px bg-sui-border-default", className)
     }, props)
   );
 });
 CommandSeparator.displayName = cmdk.Command.Separator.displayName;
-var CommandItem = React78__namespace.forwardRef((_a, ref) => {
+var CommandItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Item,
     __spreadValues({
       ref,
       className: cn(
-        "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        "relative flex cursor-default gap-2 select-none items-center rounded-md px-2 py-1.5 text-sm text-sui-text-default outline-none transition-colors",
+        "data-[selected=true]:bg-sui-bg-state-ghost-hover data-[selected=true]:text-sui-text-default",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-sui-text-hint",
+        "[&_i]:pointer-events-none [&_i]:shrink-0 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className
       )
     }, props)
@@ -3781,7 +3823,7 @@ var CommandShortcut = (_a) => {
     "span",
     __spreadValues({
       className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ml-auto text-xs tracking-widest text-sui-text-hint",
         className
       )
     }, props)
@@ -3817,7 +3859,7 @@ var sliderHandleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SliderHandle = React78__namespace.forwardRef(
+var SliderHandle = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, state, value, showTooltip = false } = _b, props = __objRest(_b, ["className", "state", "value", "showTooltip"]);
     const isDisabled = state === "disabled";
@@ -3880,7 +3922,7 @@ function buildHistogramPath(data, width, height) {
   path += ` L ${width} ${height} Z`;
   return path;
 }
-var DataRangeSlider = React78__namespace.forwardRef(
+var DataRangeSlider = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3911,15 +3953,15 @@ var DataRangeSlider = React78__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78__namespace.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React78__namespace.useState(null);
-    const [focusedHandle, setFocusedHandle] = React78__namespace.useState(null);
-    const clipId = React78__namespace.useId();
+    const trackRef = React77__namespace.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React77__namespace.useState(null);
+    const [focusedHandle, setFocusedHandle] = React77__namespace.useState(null);
+    const clipId = React77__namespace.useId();
     const [rangeMin, rangeMax] = value;
     const pctMin = percent(rangeMin, min, max);
     const pctMax = percent(rangeMax, min, max);
     const fmt = (v) => formatValue ? formatValue(v) : `${v}`;
-    const getValueFromPointer = React78__namespace.useCallback(
+    const getValueFromPointer = React77__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -3930,7 +3972,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React78__namespace.useCallback(
+    const closestHandle = React77__namespace.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -3938,7 +3980,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React78__namespace.useCallback(
+    const updateValue = React77__namespace.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp(newVal, min, rangeMax);
@@ -3950,7 +3992,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React78__namespace.useCallback(
+    const handlePointerDown = React77__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -3962,7 +4004,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React78__namespace.useCallback(
+    const handlePointerMove = React77__namespace.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -3970,10 +4012,10 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React78__namespace.useCallback(() => {
+    const handlePointerUp = React77__namespace.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React78__namespace.useCallback(
+    const makeKeyHandler = React77__namespace.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -4001,7 +4043,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React78__namespace.useMemo(() => {
+    const tickLabels = React77__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -4012,7 +4054,7 @@ var DataRangeSlider = React78__namespace.forwardRef(
     }, [pointLabels, pointCount, min, max, fmt]);
     const chartWidth = 320;
     const chartHeight = 32;
-    const histogramPath = React78__namespace.useMemo(
+    const histogramPath = React77__namespace.useMemo(
       () => buildHistogramPath(data, chartWidth, chartHeight),
       [data]
     );
@@ -4159,7 +4201,7 @@ DataRangeSlider.displayName = "DataRangeSlider";
 var labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-5 text-sui-text-default"
 );
-var Label = React78__namespace.forwardRef((_a, ref) => {
+var Label = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, required, supportText, tailIcon, children } = _b, props = __objRest(_b, ["className", "required", "supportText", "tailIcon", "children"]);
   const hasTail = !!(supportText || tailIcon);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4168,7 +4210,7 @@ var Label = React78__namespace.forwardRef((_a, ref) => {
       ref,
       className: cn(
         // peer-disabled must be on the outer label — it's the direct sibling of the peer input
-        "inline-flex items-center peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        "inline-flex items-center peer-disabled:cursor-not-allowed peer-disabled:text-sui-text-hint",
         hasTail ? "w-full justify-between" : "gap-1",
         className
       )
@@ -4220,7 +4262,7 @@ var inputContainerVariants = classVarianceAuthority.cva(
     }
   }
 );
-var InputField = React78__namespace.forwardRef(
+var InputField = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4271,7 +4313,7 @@ var InputField = React78__namespace.forwardRef(
       "disabled",
       "id"
     ]);
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const inputId = id || generatedId;
     const captionId = `${inputId}-caption`;
     const hasError = !!error;
@@ -4451,7 +4493,7 @@ var InputField = React78__namespace.forwardRef(
   }
 );
 InputField.displayName = "InputField";
-var DataRangeSliderInput = React78__namespace.forwardRef(
+var DataRangeSliderInput = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4571,7 +4613,7 @@ var DataRangeSliderInput = React78__namespace.forwardRef(
 DataRangeSliderInput.displayName = "DataRangeSliderInput";
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React78__namespace.forwardRef((_a, ref) => {
+var PopoverContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     PopoverPrimitive__namespace.Content,
@@ -4580,7 +4622,7 @@ var PopoverContent = React78__namespace.forwardRef((_a, ref) => {
       align,
       sideOffset,
       className: cn(
-        "z-50 w-72 rounded-md border-none bg-popover p-4 text-popover-foreground shadow-modal-sm outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        "z-50 w-72 rounded-xl border-none bg-sui-bg-card p-4 text-sui-text-default shadow-modal-sm outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
         className
       )
     }, props)
@@ -4594,7 +4636,7 @@ function DatePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78__namespace.useState(false);
+  const [open, setOpen] = React77__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -4635,7 +4677,7 @@ function DateRangePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78__namespace.useState(false);
+  const [open, setOpen] = React77__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -4686,7 +4728,7 @@ function DatePickerWithPresets({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78__namespace.useState(false);
+  const [open, setOpen] = React77__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -4807,7 +4849,7 @@ function RequirementItem({ label, met }) {
     )
   ] });
 }
-var InputCaption = React78__namespace.forwardRef(
+var InputCaption = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "default",
@@ -4898,9 +4940,9 @@ var InputCaption = React78__namespace.forwardRef(
             className
           )
         }, props), {
-          children: React78__namespace.Children.map(children, (child) => {
-            if (!React78__namespace.isValidElement(child)) return child;
-            return React78__namespace.cloneElement(child, {
+          children: React77__namespace.Children.map(children, (child) => {
+            if (!React77__namespace.isValidElement(child)) return child;
+            return React77__namespace.cloneElement(child, {
               className: cn(
                 "flex-1",
                 child.props.className
@@ -5170,38 +5212,38 @@ function DatePickerInput({
   disabled = false,
   className
 }) {
-  const [calendarOpen, setCalendarOpen] = React78__namespace.useState(false);
+  const [calendarOpen, setCalendarOpen] = React77__namespace.useState(false);
   const hasError = !!error;
   const helperText = hasError ? error : caption;
   const singleSegments = dateToSegments(date);
-  const [singleDay, setSingleDay] = React78__namespace.useState(singleSegments.day);
-  const [singleMonth, setSingleMonth] = React78__namespace.useState(singleSegments.month);
-  const [singleYear, setSingleYear] = React78__namespace.useState(singleSegments.year);
+  const [singleDay, setSingleDay] = React77__namespace.useState(singleSegments.day);
+  const [singleMonth, setSingleMonth] = React77__namespace.useState(singleSegments.month);
+  const [singleYear, setSingleYear] = React77__namespace.useState(singleSegments.year);
   const startSegments = dateToSegments(dateRange == null ? void 0 : dateRange.from);
   const endSegments = dateToSegments(dateRange == null ? void 0 : dateRange.to);
-  const [startDay, setStartDay] = React78__namespace.useState(startSegments.day);
-  const [startMonth, setStartMonth] = React78__namespace.useState(startSegments.month);
-  const [startYear, setStartYear] = React78__namespace.useState(startSegments.year);
-  const [endDay, setEndDay] = React78__namespace.useState(endSegments.day);
-  const [endMonth, setEndMonth] = React78__namespace.useState(endSegments.month);
-  const [endYear, setEndYear] = React78__namespace.useState(endSegments.year);
-  const singleDayRef = React78__namespace.useRef(null);
-  const singleMonthRef = React78__namespace.useRef(null);
-  const singleYearRef = React78__namespace.useRef(null);
-  const startDayRef = React78__namespace.useRef(null);
-  const startMonthRef = React78__namespace.useRef(null);
-  const startYearRef = React78__namespace.useRef(null);
-  const endDayRef = React78__namespace.useRef(null);
-  const endMonthRef = React78__namespace.useRef(null);
-  const endYearRef = React78__namespace.useRef(null);
-  const calendarIconRef = React78__namespace.useRef(null);
-  React78__namespace.useEffect(() => {
+  const [startDay, setStartDay] = React77__namespace.useState(startSegments.day);
+  const [startMonth, setStartMonth] = React77__namespace.useState(startSegments.month);
+  const [startYear, setStartYear] = React77__namespace.useState(startSegments.year);
+  const [endDay, setEndDay] = React77__namespace.useState(endSegments.day);
+  const [endMonth, setEndMonth] = React77__namespace.useState(endSegments.month);
+  const [endYear, setEndYear] = React77__namespace.useState(endSegments.year);
+  const singleDayRef = React77__namespace.useRef(null);
+  const singleMonthRef = React77__namespace.useRef(null);
+  const singleYearRef = React77__namespace.useRef(null);
+  const startDayRef = React77__namespace.useRef(null);
+  const startMonthRef = React77__namespace.useRef(null);
+  const startYearRef = React77__namespace.useRef(null);
+  const endDayRef = React77__namespace.useRef(null);
+  const endMonthRef = React77__namespace.useRef(null);
+  const endYearRef = React77__namespace.useRef(null);
+  const calendarIconRef = React77__namespace.useRef(null);
+  React77__namespace.useEffect(() => {
     const s = dateToSegments(date);
     setSingleDay(s.day);
     setSingleMonth(s.month);
     setSingleYear(s.year);
   }, [date]);
-  React78__namespace.useEffect(() => {
+  React77__namespace.useEffect(() => {
     const s = dateToSegments(dateRange == null ? void 0 : dateRange.from);
     setStartDay(s.day);
     setStartMonth(s.month);
@@ -5211,7 +5253,7 @@ function DatePickerInput({
     setEndMonth(e.month);
     setEndYear(e.year);
   }, [dateRange]);
-  const handleSingleSegmentChange = React78__namespace.useCallback(
+  const handleSingleSegmentChange = React77__namespace.useCallback(
     (day, month, year) => {
       const d = segmentsToDate(day, month, year);
       if (day.length === 2 && month.length === 2 && year.length === 4) {
@@ -5222,7 +5264,7 @@ function DatePickerInput({
     },
     [onDateChange]
   );
-  const handleRangeSegmentChange = React78__namespace.useCallback(
+  const handleRangeSegmentChange = React77__namespace.useCallback(
     (sd, sm, sy, ed, em, ey) => {
       const from = segmentsToDate(sd, sm, sy);
       const to = segmentsToDate(ed, em, ey);
@@ -5297,7 +5339,7 @@ function DatePickerInput({
       setCalendarOpen(false);
     }
   };
-  const inputId = React78__namespace.useId();
+  const inputId = React77__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: inputId, children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: calendarOpen, onOpenChange: setCalendarOpen, children: [
@@ -5483,7 +5525,7 @@ var lineVariants = classVarianceAuthority.cva("h-px min-w-0 flex-1 border-t bord
     lineStyle: "solid"
   }
 });
-var Divider = React78__namespace.forwardRef(
+var Divider = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5558,7 +5600,7 @@ var Divider = React78__namespace.forwardRef(
   }
 );
 Divider.displayName = "Divider";
-var MenuSearchInput = React78__namespace.forwardRef(
+var MenuSearchInput = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5579,15 +5621,15 @@ var MenuSearchInput = React78__namespace.forwardRef(
       "defaultValue",
       "id"
     ]);
-    const internalRef = React78__namespace.useRef(null);
+    const internalRef = React77__namespace.useRef(null);
     const inputRef = ref || internalRef;
-    const [internalValue, setInternalValue] = React78__namespace.useState(
+    const [internalValue, setInternalValue] = React77__namespace.useState(
       defaultValue || ""
     );
     const isControlled = value !== void 0;
     const currentValue = isControlled ? String(value) : internalValue;
     const hasValue = currentValue.length > 0;
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const inputId = id || generatedId;
     const handleChange = (e) => {
       var _a2;
@@ -5606,7 +5648,7 @@ var MenuSearchInput = React78__namespace.forwardRef(
         (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
       }
     };
-    const [isFocused, setIsFocused] = React78__namespace.useState(false);
+    const [isFocused, setIsFocused] = React77__namespace.useState(false);
     const showShortcut = !!shortcutKey && !hasValue && !isFocused && !disabled;
     const handleFocus = (e) => {
       var _a2;
@@ -5718,7 +5760,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-var DropdownMenuSubTrigger = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSubTrigger = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.SubTrigger,
@@ -5736,13 +5778,13 @@ var DropdownMenuSubTrigger = React78__namespace.forwardRef((_a, ref) => {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto" })
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line ml-auto text-base", "aria-hidden": true })
       ]
     })
   );
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-var DropdownMenuSubContent = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSubContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.SubContent,
@@ -5757,7 +5799,7 @@ var DropdownMenuSubContent = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-var DropdownMenuContent = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4, search, searchValue, onSearchChange, onSearchClear, searchPlaceholder = "Search", children } = _b, props = __objRest(_b, ["className", "sideOffset", "search", "searchValue", "onSearchChange", "onSearchClear", "searchPlaceholder", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Content,
@@ -5795,7 +5837,7 @@ var DropdownMenuContent = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, variant = "default" } = _b, props = __objRest(_b, ["className", "inset", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Item,
@@ -5816,7 +5858,7 @@ var DropdownMenuItem = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuCheckboxItem = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuCheckboxItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.CheckboxItem,
@@ -5831,14 +5873,14 @@ var DropdownMenuCheckboxItem = React78__namespace.forwardRef((_a, ref) => {
       checked
     }, props), {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line text-base", "aria-hidden": true }) }) }),
         children
       ]
     })
   );
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuRadioItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.RadioItem,
@@ -5852,14 +5894,14 @@ var DropdownMenuRadioItem = React78__namespace.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-circle-fill text-[8px] leading-none", "aria-hidden": true }) }) }),
         children
       ]
     })
   );
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-var DropdownMenuLabel = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuLabel = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Label,
@@ -5874,7 +5916,7 @@ var DropdownMenuLabel = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuSeparator = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Separator,
@@ -5903,7 +5945,7 @@ var DropdownMenuShortcut = (_a) => {
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var DropdownMenuCaption = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuCaption = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -5918,7 +5960,7 @@ var DropdownMenuCaption = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCaption.displayName = "DropdownMenuCaption";
-var DropdownMenuUserbar = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuUserbar = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, name, email, avatar, badge } = _b, props = __objRest(_b, ["className", "name", "email", "avatar", "badge"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -5943,7 +5985,7 @@ var DropdownMenuUserbar = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuUserbar.displayName = "DropdownMenuUserbar";
-var DropdownMenuLargeItem = React78__namespace.forwardRef((_a, ref) => {
+var DropdownMenuLargeItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, label, caption, icon, badge, tailIcon } = _b, props = __objRest(_b, ["className", "label", "caption", "icon", "badge", "tailIcon"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenuPrimitive__namespace.Item,
@@ -5984,7 +6026,7 @@ var emptyStateVariants = classVarianceAuthority.cva(
     }
   }
 );
-var EmptyState = React78__namespace.forwardRef(
+var EmptyState = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6049,7 +6091,7 @@ function EmptyStateText({
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-4 text-sui-text-muted w-full", children: description })
   ] });
 }
-var FileUploadArea = React78__namespace.forwardRef(
+var FileUploadArea = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6074,8 +6116,8 @@ var FileUploadArea = React78__namespace.forwardRef(
       "onDrop",
       "onDragOver"
     ]);
-    const [isDragOver, setIsDragOver] = React78__namespace.useState(false);
-    const handleDragOver = React78__namespace.useCallback(
+    const [isDragOver, setIsDragOver] = React77__namespace.useState(false);
+    const handleDragOver = React77__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6084,10 +6126,10 @@ var FileUploadArea = React78__namespace.forwardRef(
       },
       [disabled, onDragOver]
     );
-    const handleDragLeave = React78__namespace.useCallback(() => {
+    const handleDragLeave = React77__namespace.useCallback(() => {
       setIsDragOver(false);
     }, []);
-    const handleDrop = React78__namespace.useCallback(
+    const handleDrop = React77__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6096,11 +6138,11 @@ var FileUploadArea = React78__namespace.forwardRef(
       },
       [disabled, onDrop]
     );
-    const handleClick = React78__namespace.useCallback(() => {
+    const handleClick = React77__namespace.useCallback(() => {
       if (disabled) return;
       onClick == null ? void 0 : onClick();
     }, [disabled, onClick]);
-    const handleKeyDown = React78__namespace.useCallback(
+    const handleKeyDown = React77__namespace.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -6216,7 +6258,7 @@ var progressBarVariants = classVarianceAuthority.cva(
   }
 );
 var SEGMENT_COUNT = 10;
-var ProgressBar = React78__namespace.forwardRef(
+var ProgressBar = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6238,7 +6280,7 @@ var ProgressBar = React78__namespace.forwardRef(
     const clampedValue = Math.min(100, Math.max(0, value != null ? value : 0));
     const displayPercentage = `${Math.round(clampedValue)}%`;
     const filledSegments = Math.round(clampedValue / 100 * SEGMENT_COUNT);
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const labelId = `${generatedId}-label`;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -6324,7 +6366,7 @@ var statusLabel = {
   uploading: "Uploading...",
   failed: "Error"
 };
-var FileUploadCard = React78__namespace.forwardRef(
+var FileUploadCard = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6536,7 +6578,7 @@ var lineColorMap = {
   warning: "bg-sui-bg-basic-orange-accent",
   error: "bg-sui-bg-basic-red-accent"
 };
-var InlineTips = React78__namespace.forwardRef(
+var InlineTips = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6557,7 +6599,7 @@ var InlineTips = React78__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         className: cn(inlineTipsVariants({ variant, colorStyle, className })),
-        role: "status"
+        role: variant === "error" ? "alert" : "status"
       }, props), {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -6638,7 +6680,7 @@ function validateFile(file, accept, maxSize) {
   }
   return null;
 }
-var FileUpload = React78__namespace.forwardRef(
+var FileUpload = React77__namespace.forwardRef(
   ({
     files = [],
     onFilesAdded,
@@ -6659,10 +6701,10 @@ var FileUpload = React78__namespace.forwardRef(
     icon,
     className
   }, ref) => {
-    const inputRef = React78__namespace.useRef(null);
-    const [errors, setErrors] = React78__namespace.useState([]);
-    const thumbnailCache = React78__namespace.useRef(/* @__PURE__ */ new Map());
-    React78__namespace.useEffect(() => {
+    const inputRef = React77__namespace.useRef(null);
+    const [errors, setErrors] = React77__namespace.useState([]);
+    const thumbnailCache = React77__namespace.useRef(/* @__PURE__ */ new Map());
+    React77__namespace.useEffect(() => {
       if (!autoPreview) return;
       const cache = thumbnailCache.current;
       for (const f of files) {
@@ -6679,7 +6721,7 @@ var FileUpload = React78__namespace.forwardRef(
         }
       }
     }, [files, autoPreview]);
-    React78__namespace.useEffect(() => {
+    React77__namespace.useEffect(() => {
       const cache = thumbnailCache.current;
       return () => {
         for (const url of cache.values()) {
@@ -6689,7 +6731,7 @@ var FileUpload = React78__namespace.forwardRef(
       };
     }, []);
     const resolvedDescription = description != null ? description : generateDescription(accept, maxSize, maxFiles);
-    const processFiles = React78__namespace.useCallback(
+    const processFiles = React77__namespace.useCallback(
       (fileList) => {
         const newFiles = Array.from(fileList);
         const validationErrors = [];
@@ -6717,11 +6759,11 @@ var FileUpload = React78__namespace.forwardRef(
       },
       [files.length, maxFiles, accept, maxSize, onFilesAdded]
     );
-    const handleClick = React78__namespace.useCallback(() => {
+    const handleClick = React77__namespace.useCallback(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.click();
     }, []);
-    const handleInputChange = React78__namespace.useCallback(
+    const handleInputChange = React77__namespace.useCallback(
       (e) => {
         if (e.target.files && e.target.files.length > 0) {
           processFiles(e.target.files);
@@ -6730,7 +6772,7 @@ var FileUpload = React78__namespace.forwardRef(
       },
       [processFiles]
     );
-    const handleDrop = React78__namespace.useCallback(
+    const handleDrop = React77__namespace.useCallback(
       (e) => {
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
           processFiles(e.dataTransfer.files);
@@ -6738,10 +6780,10 @@ var FileUpload = React78__namespace.forwardRef(
       },
       [processFiles]
     );
-    const dismissError = React78__namespace.useCallback((index) => {
+    const dismissError = React77__namespace.useCallback((index) => {
       setErrors((prev) => prev.filter((_, i) => i !== index));
     }, []);
-    const handlePaste = React78__namespace.useCallback(
+    const handlePaste = React77__namespace.useCallback(
       (e) => {
         var _a;
         if (disabled || !pasteEnabled) return;
@@ -6762,7 +6804,7 @@ var FileUpload = React78__namespace.forwardRef(
       },
       [disabled, pasteEnabled, processFiles]
     );
-    const handleCancel = React78__namespace.useCallback(
+    const handleCancel = React77__namespace.useCallback(
       (id) => {
         const uploadFile = files.find((f) => f.id === id);
         if (uploadFile == null ? void 0 : uploadFile.abortController) {
@@ -6853,99 +6895,6 @@ var FileUpload = React78__namespace.forwardRef(
   }
 );
 FileUpload.displayName = "FileUpload";
-var Form = reactHookForm.FormProvider;
-var FormFieldContext = React78__namespace.createContext(null);
-var FormField = (_a) => {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, __spreadValues({}, props)) });
-};
-var useFormField = () => {
-  const fieldContext = React78__namespace.useContext(FormFieldContext);
-  const itemContext = React78__namespace.useContext(FormItemContext);
-  const { getFieldState, formState } = reactHookForm.useFormContext();
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-  if (!itemContext) {
-    throw new Error("useFormField should be used within <FormItem>");
-  }
-  const fieldState = getFieldState(fieldContext.name, formState);
-  const { id } = itemContext;
-  return __spreadValues({
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`
-  }, fieldState);
-};
-var FormItemContext = React78__namespace.createContext(null);
-var FormItem = React78__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const id = React78__namespace.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ ref, className: cn("space-y-2", className) }, props)) });
-});
-FormItem.displayName = "FormItem";
-var FormLabel = React78__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Label,
-    __spreadValues({
-      ref,
-      className: cn(error && "text-destructive", className),
-      htmlFor: formItemId
-    }, props)
-  );
-});
-FormLabel.displayName = "FormLabel";
-var FormControl = React78__namespace.forwardRef((_a, ref) => {
-  var props = __objRest(_a, []);
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactSlot.Slot,
-    __spreadValues({
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error
-    }, props)
-  );
-});
-FormControl.displayName = "FormControl";
-var FormDescription = React78__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    __spreadValues({
-      ref,
-      id: formDescriptionId,
-      className: cn("text-sm text-muted-foreground", className)
-    }, props)
-  );
-});
-FormDescription.displayName = "FormDescription";
-var FormMessage = React78__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  var _a2;
-  const { error, formMessageId } = useFormField();
-  const body = error ? String((_a2 = error == null ? void 0 : error.message) != null ? _a2 : "") : children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    __spreadProps(__spreadValues({
-      ref,
-      id: formMessageId,
-      className: cn("text-sm font-medium text-destructive", className)
-    }, props), {
-      children: body
-    })
-  );
-});
-FormMessage.displayName = "FormMessage";
 var gridTableHeaderItemVariants = classVarianceAuthority.cva(
   "min-h-8 min-w-9 rounded-xs",
   {
@@ -6972,7 +6921,7 @@ var ariaSortMap = {
   desc: "descending",
   none: "none"
 };
-var GridTableHeaderItem = React78__namespace.forwardRef(
+var GridTableHeaderItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7074,7 +7023,7 @@ var gridTableRowVariants = classVarianceAuthority.cva(
     }
   }
 );
-var GridTableRow = React78__namespace.forwardRef(
+var GridTableRow = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7090,7 +7039,7 @@ var GridTableRow = React78__namespace.forwardRef(
   }
 );
 GridTableRow.displayName = "GridTableRow";
-var GridTableCell = React78__namespace.forwardRef(
+var GridTableCell = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, bordered = true, children } = _b, props = __objRest(_b, ["className", "bordered", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7134,7 +7083,7 @@ var gridTableSlotItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var GridTableSlotItem = React78__namespace.forwardRef(
+var GridTableSlotItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7281,7 +7230,7 @@ var stepperNumberVariants = classVarianceAuthority.cva(
     }
   }
 );
-var StepperNumber = React78__namespace.forwardRef(
+var StepperNumber = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size, color, number = "1" } = _b, props = __objRest(_b, ["className", "size", "color", "number"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7320,7 +7269,7 @@ var stepperIconVariants = classVarianceAuthority.cva(
     }
   }
 );
-var StepperIcon = React78__namespace.forwardRef(
+var StepperIcon = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "dot-large", icon } = _b, props = __objRest(_b, ["className", "variant", "icon"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7374,7 +7323,7 @@ function ConnectorLine({ success }) {
     }
   );
 }
-var HorizontalStepperItem = React78__namespace.forwardRef(
+var HorizontalStepperItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7499,7 +7448,7 @@ var HorizontalStepperItem = React78__namespace.forwardRef(
   }
 );
 HorizontalStepperItem.displayName = "HorizontalStepperItem";
-var HorizontalStepper = React78__namespace.forwardRef(
+var HorizontalStepper = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7574,7 +7523,7 @@ var HorizontalStepper = React78__namespace.forwardRef(
   }
 );
 HorizontalStepper.displayName = "HorizontalStepper";
-var Input = React78__namespace.forwardRef(
+var Input = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7582,7 +7531,7 @@ var Input = React78__namespace.forwardRef(
       __spreadValues({
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-sui-border-darker bg-sui-bg-input px-3 py-2 text-base ring-offset-sui-bg-default file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-sui-text-default placeholder:text-sui-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-sui-text-hint disabled:pointer-events-none md:text-sm",
           className
         ),
         ref
@@ -7665,7 +7614,7 @@ var inputButtonVariants = classVarianceAuthority.cva(
   }
 );
 var iconOnlyHoverClasses = "hover:[&_i]:text-icon-default-subtle hover:[&_svg]:text-icon-default-subtle active:[&_i]:text-icon-default-subtle active:[&_svg]:text-icon-default-subtle";
-var InputButton = React78__namespace.forwardRef(
+var InputButton = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7799,7 +7748,7 @@ var InputButton = React78__namespace.forwardRef(
   }
 );
 InputButton.displayName = "InputButton";
-var InputStepper = React78__namespace.forwardRef(
+var InputStepper = React77__namespace.forwardRef(
   ({ onIncrement, onDecrement, disabled, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -7856,7 +7805,7 @@ var InputStepper = React78__namespace.forwardRef(
   }
 );
 InputStepper.displayName = "InputStepper";
-var NavigationMenu = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenu = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     NavigationMenuPrimitive__namespace.Root,
@@ -7875,7 +7824,7 @@ var NavigationMenu = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 NavigationMenu.displayName = NavigationMenuPrimitive__namespace.Root.displayName;
-var NavigationMenuList = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuList = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.List,
@@ -7891,9 +7840,9 @@ var NavigationMenuList = React78__namespace.forwardRef((_a, ref) => {
 NavigationMenuList.displayName = NavigationMenuPrimitive__namespace.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive__namespace.Item;
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+  "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 hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-default focus:bg-sui-bg-state-ghost-hover focus:text-sui-text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default disabled:text-sui-text-hint disabled:pointer-events-none data-[state=open]:text-sui-text-default data-[state=open]:bg-sui-bg-state-ghost-hover"
 );
-var NavigationMenuTrigger = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuTrigger = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     NavigationMenuPrimitive__namespace.Trigger,
@@ -7905,9 +7854,9 @@ var NavigationMenuTrigger = React78__namespace.forwardRef((_a, ref) => {
         children,
         " ",
         /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.ChevronDown,
+          "i",
           {
-            className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
+            className: "ri-arrow-down-s-line ml-1 text-icon-default-muted transition-transform duration-200 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -7916,14 +7865,14 @@ var NavigationMenuTrigger = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive__namespace.Trigger.displayName;
-var NavigationMenuContent = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Content,
     __spreadValues({
       ref,
       className: cn(
-        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
         className
       )
     }, props)
@@ -7931,13 +7880,13 @@ var NavigationMenuContent = React78__namespace.forwardRef((_a, ref) => {
 });
 NavigationMenuContent.displayName = NavigationMenuPrimitive__namespace.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive__namespace.Link;
-var NavigationMenuViewport = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuViewport = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Viewport,
     __spreadValues({
       className: cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg border border-sui-border-default bg-sui-bg-card text-sui-text-default shadow-modal-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       ),
       ref
@@ -7945,7 +7894,7 @@ var NavigationMenuViewport = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 NavigationMenuViewport.displayName = NavigationMenuPrimitive__namespace.Viewport.displayName;
-var NavigationMenuIndicator = React78__namespace.forwardRef((_a, ref) => {
+var NavigationMenuIndicator = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuPrimitive__namespace.Indicator,
@@ -7956,7 +7905,7 @@ var NavigationMenuIndicator = React78__namespace.forwardRef((_a, ref) => {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-sui-border-default shadow-card" })
     })
   );
 });
@@ -8016,7 +7965,7 @@ var activeDotClasses = [
   "bg-sui-bg-basic-blue-accent",
   "hover:bg-sui-bg-basic-blue-accent"
 ].join(" ");
-var PageItem = React78__namespace.forwardRef(
+var PageItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", active = false, label = "0", disabled } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8050,7 +7999,7 @@ var Pagination = (_a) => {
   );
 };
 Pagination.displayName = "Pagination";
-var PaginationContent = React78__namespace.forwardRef((_a, ref) => {
+var PaginationContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -8061,7 +8010,7 @@ var PaginationContent = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React78__namespace.forwardRef((_a, ref) => {
+var PaginationItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadValues({ ref, className: cn("", className) }, props));
 });
@@ -8105,7 +8054,7 @@ var PaginationPrevious = (_a) => {
       className: cn("gap-1 pl-2.5", className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-left-s-line text-base", "aria-hidden": true }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Previous" })
       ]
     })
@@ -8127,7 +8076,7 @@ var PaginationNext = (_a) => {
     }, props), {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Next" }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line text-base", "aria-hidden": true })
       ]
     })
   );
@@ -8146,7 +8095,7 @@ var PaginationEllipsis = (_a) => {
       className: cn("flex h-9 w-9 items-center justify-center", className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-line text-base", "aria-hidden": true }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "More pages" })
       ]
     })
@@ -8182,7 +8131,7 @@ function getPageRange(currentPage, totalPages, maxVisible) {
   }
   return pages;
 }
-var Paginator = React78__namespace.forwardRef(
+var Paginator = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8362,14 +8311,14 @@ var Paginator = React78__namespace.forwardRef(
   }
 );
 Paginator.displayName = "Paginator";
-var Progress = React78__namespace.forwardRef((_a, ref) => {
+var Progress = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ProgressPrimitive2__namespace.Root,
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+        "relative h-4 w-full overflow-hidden rounded-full bg-sui-bg-subtle",
         className
       )
     }, props), {
@@ -8412,7 +8361,7 @@ var arcStrokeVarMap = {
   success: "var(--text-success)",
   failed: "var(--text-destructive)"
 };
-var RadialProgressBar = React78__namespace.forwardRef(
+var RadialProgressBar = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8531,7 +8480,7 @@ var RadialProgressBar = React78__namespace.forwardRef(
   }
 );
 RadialProgressBar.displayName = "RadialProgressBar";
-var RadioGroup2 = React78__namespace.forwardRef((_a, ref) => {
+var RadioGroup2 = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
@@ -8591,7 +8540,7 @@ var radioButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButton = React78__namespace.forwardRef((_a, ref) => {
+var RadioButton = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     RadioGroupPrimitive__namespace.Item,
@@ -8631,7 +8580,7 @@ var RadioButton = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 RadioButton.displayName = "RadioButton";
-var RadioCardGroup = React78__namespace.forwardRef((_a, ref) => {
+var RadioCardGroup = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
@@ -8680,7 +8629,7 @@ var radioButtonCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButtonCard = React78__namespace.forwardRef(
+var RadioButtonCard = React77__namespace.forwardRef(
   ({
     title,
     description,
@@ -8693,7 +8642,7 @@ var RadioButtonCard = React78__namespace.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const titleId = `radio-card-title-${generatedId}`;
     const descriptionId = `radio-card-desc-${generatedId}`;
     const isHorizontal = layout === "horizontal";
@@ -8790,9 +8739,9 @@ var RadioButtonCard = React78__namespace.forwardRef(
   }
 );
 RadioButtonCard.displayName = "RadioButtonCard";
-var RadioButtonList = React78__namespace.forwardRef(
+var RadioButtonList = React77__namespace.forwardRef(
   ({ className, divider = true, value, defaultValue, onValueChange, disabled, children }, ref) => {
-    const items = React78__namespace.Children.toArray(children);
+    const items = React77__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadioGroup2,
       {
@@ -8836,7 +8785,7 @@ var radioButtonWithTextVariants = classVarianceAuthority.cva(
     }
   }
 );
-var RadioButtonWithText = React78__namespace.forwardRef(
+var RadioButtonWithText = React77__namespace.forwardRef(
   ({
     label,
     description,
@@ -8847,7 +8796,7 @@ var RadioButtonWithText = React78__namespace.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const radioId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -8902,7 +8851,7 @@ var RadioButtonWithText = React78__namespace.forwardRef(
   }
 );
 RadioButtonWithText.displayName = "RadioButtonWithText";
-var ScrollArea = React78__namespace.forwardRef((_a, ref) => {
+var ScrollArea = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScrollAreaPrimitive__namespace.Root,
@@ -8919,7 +8868,7 @@ var ScrollArea = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React78__namespace.forwardRef((_a, ref) => {
+var ScrollBar = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
@@ -8941,30 +8890,30 @@ ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displ
 var Select = SelectPrimitive__namespace.Root;
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React78__namespace.forwardRef((_a, ref) => {
+var SelectTrigger = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Trigger,
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "flex h-10 w-full items-center justify-between rounded-md border border-sui-border-default bg-sui-bg-card px-3 py-2 text-sm text-sui-text-default ring-offset-background",
+        "flex h-10 w-full items-center justify-between rounded-md border border-sui-border-default bg-sui-bg-card px-3 py-2 text-sm text-sui-text-default ring-offset-sui-bg-default",
         "data-[placeholder]:text-sui-text-muted",
         "focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2",
-        "disabled:cursor-not-allowed disabled:opacity-50",
+        "disabled:cursor-not-allowed disabled:text-sui-text-hint disabled:pointer-events-none",
         "[&>span]:line-clamp-1",
         className
       )
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-icon-default-muted" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-down-s-line text-base text-icon-default-muted", "aria-hidden": true }) })
       ]
     })
   );
 });
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React78__namespace.forwardRef((_a, ref) => {
+var SelectScrollUpButton = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollUpButton,
@@ -8975,12 +8924,12 @@ var SelectScrollUpButton = React78__namespace.forwardRef((_a, ref) => {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4 text-icon-default-muted" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-up-s-line text-base text-icon-default-muted", "aria-hidden": true })
     })
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React78__namespace.forwardRef((_a, ref) => {
+var SelectScrollDownButton = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollDownButton,
@@ -8991,12 +8940,12 @@ var SelectScrollDownButton = React78__namespace.forwardRef((_a, ref) => {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-icon-default-muted" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-down-s-line text-base text-icon-default-muted", "aria-hidden": true })
     })
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React78__namespace.forwardRef((_a, ref) => {
+var SelectContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
   return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Content,
@@ -9029,7 +8978,7 @@ var SelectContent = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React78__namespace.forwardRef((_a, ref) => {
+var SelectLabel = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Label,
@@ -9043,7 +8992,7 @@ var SelectLabel = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React78__namespace.forwardRef((_a, ref) => {
+var SelectItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Item,
@@ -9061,14 +9010,14 @@ var SelectItem = React78__namespace.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line text-base", "aria-hidden": true }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-5", children }) })
       ]
     })
   );
 });
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React78__namespace.forwardRef((_a, ref) => {
+var SelectSeparator = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Separator,
@@ -9079,7 +9028,7 @@ var SelectSeparator = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
-var SelectMenu = React78__namespace.forwardRef(
+var SelectMenu = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9110,19 +9059,19 @@ var SelectMenu = React78__namespace.forwardRef(
     ]);
     var _a2;
     const indicator = selectType === "checkbox" ? "checkbox" : selectType === "radio" ? "radio" : selectType === "default" ? "checkmark" : "none";
-    const hasChildren = React78__namespace.Children.count(children) > 0;
-    const generatedId = React78__namespace.useId();
+    const hasChildren = React77__namespace.Children.count(children) > 0;
+    const generatedId = React77__namespace.useId();
     const listId = `${generatedId}-list`;
-    const listRef = React78__namespace.useRef(null);
-    const [activeIndex, setActiveIndex] = React78__namespace.useState(-1);
+    const listRef = React77__namespace.useRef(null);
+    const [activeIndex, setActiveIndex] = React77__namespace.useState(-1);
     const activeItemId = activeIndex >= 0 ? `${listId}-item-${activeIndex}` : void 0;
-    const getItems = React78__namespace.useCallback(() => {
+    const getItems = React77__namespace.useCallback(() => {
       if (!listRef.current) return [];
       return Array.from(
         listRef.current.querySelectorAll('[role="option"]')
       );
     }, []);
-    const handleKeyDown = React78__namespace.useCallback(
+    const handleKeyDown = React77__namespace.useCallback(
       (e) => {
         var _a3;
         const items = getItems();
@@ -9205,8 +9154,8 @@ var SelectMenu = React78__namespace.forwardRef(
                 "focus-visible:outline-none"
               ),
               style: listMaxHeight ? { maxHeight: listMaxHeight } : void 0,
-              children: hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React78__namespace.Children.map(children, (child, index) => {
-                if (React78__namespace.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
+              children: hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React77__namespace.Children.map(children, (child, index) => {
+                if (React77__namespace.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
                   const itemProps = child.props;
                   const overrides = {};
                   if (indicator !== "none" && itemProps.indicator === void 0) {
@@ -9223,7 +9172,7 @@ var SelectMenu = React78__namespace.forwardRef(
                     overrides["data-active"] = "true";
                   }
                   if (Object.keys(overrides).length > 0) {
-                    return React78__namespace.cloneElement(
+                    return React77__namespace.cloneElement(
                       child,
                       overrides
                     );
@@ -9248,7 +9197,7 @@ var SelectMenu = React78__namespace.forwardRef(
   }
 );
 SelectMenu.displayName = "SelectMenu";
-var SelectMenuFooterButton = React78__namespace.forwardRef((_a, ref) => {
+var SelectMenuFooterButton = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, icon = "ri-add-line", children = "Add new", disabled } = _b, props = __objRest(_b, ["className", "icon", "children", "disabled"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
@@ -9291,7 +9240,7 @@ var SelectMenuFooterButton = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuFooterButton.displayName = "SelectMenuFooterButton";
-var SelectInput = React78__namespace.forwardRef(
+var SelectInput = React77__namespace.forwardRef(
   ({
     label,
     required,
@@ -9323,10 +9272,10 @@ var SelectInput = React78__namespace.forwardRef(
     footer,
     className
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React78__namespace.useState(false);
+    const [internalOpen, setInternalOpen] = React77__namespace.useState(false);
     const isControlled = controlledOpen !== void 0;
     const isOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = React78__namespace.useCallback(
+    const handleOpenChange = React77__namespace.useCallback(
       (next) => {
         if (disabled) return;
         if (!isControlled) setInternalOpen(next);
@@ -9334,7 +9283,7 @@ var SelectInput = React78__namespace.forwardRef(
       },
       [disabled, isControlled, onOpenChange]
     );
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const hasError = !!error;
     const helperText = hasError ? error : caption;
     const hasTags = tags && tags.length > 0;
@@ -9360,6 +9309,7 @@ var SelectInput = React78__namespace.forwardRef(
             role: "combobox",
             "aria-expanded": isOpen,
             "aria-haspopup": "listbox",
+            "aria-controls": `${generatedId}-listbox`,
             "aria-multiselectable": multiSelect || void 0,
             "aria-invalid": hasError || void 0,
             "aria-describedby": helperText ? `${generatedId}-caption` : void 0,
@@ -9413,7 +9363,7 @@ var SelectInput = React78__namespace.forwardRef(
                   children: leadIcon
                 }
               ) : null,
-              hasTags ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(React78__namespace.Fragment, { children: [
+              hasTags ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(React77__namespace.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -9475,6 +9425,7 @@ var SelectInput = React78__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
           PopoverPrimitive__namespace.Content,
           __spreadProps(__spreadValues({
+            id: `${generatedId}-listbox`,
             align: "start",
             sideOffset: 6,
             className: cn(
@@ -9527,7 +9478,7 @@ var SelectInput = React78__namespace.forwardRef(
   }
 );
 SelectInput.displayName = "SelectInput";
-var SelectMenuItem = React78__namespace.forwardRef(
+var SelectMenuItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9574,7 +9525,16 @@ var SelectMenuItem = React78__namespace.forwardRef(
       }, props), {
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex size-5 shrink-0 items-center justify-center", children: [
-            indicator === "checkmark" && selected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("size-4", disabled ? "text-icon-default-disabled" : "text-icon-default-subtle") }),
+            indicator === "checkmark" && selected && /* @__PURE__ */ jsxRuntime.jsx(
+              "i",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "ri-check-line text-base leading-none",
+                  disabled ? "text-icon-default-disabled" : "text-icon-default-subtle"
+                )
+              }
+            ),
             indicator === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -9587,13 +9547,13 @@ var SelectMenuItem = React78__namespace.forwardRef(
                   disabled && "border-sui-border-default bg-[var(--bg-checkbox-disabled)] !shadow-none"
                 ),
                 children: selected && /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.Check,
+                  "i",
                   {
+                    "aria-hidden": true,
                     className: cn(
-                      "size-3",
+                      "ri-check-line text-[12px] font-bold leading-none",
                       disabled ? "text-sui-text-hint" : "text-white"
-                    ),
-                    strokeWidth: 3
+                    )
                   }
                 )
               }
@@ -9682,7 +9642,7 @@ var SelectMenuItem = React78__namespace.forwardRef(
   }
 );
 SelectMenuItem.displayName = "SelectMenuItem";
-var SelectMenuLabel = React78__namespace.forwardRef(
+var SelectMenuLabel = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, caption, children } = _b, props = __objRest(_b, ["className", "caption", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9704,7 +9664,7 @@ var SelectMenuLabel = React78__namespace.forwardRef(
   }
 );
 SelectMenuLabel.displayName = "SelectMenuLabel";
-var SelectMenuDescription = React78__namespace.forwardRef((_a, ref) => {
+var SelectMenuDescription = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -9718,7 +9678,7 @@ var SelectMenuDescription = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuDescription.displayName = "SelectMenuDescription";
-var SelectMenuSeparator = React78__namespace.forwardRef((_a, ref) => {
+var SelectMenuSeparator = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -9730,7 +9690,7 @@ var SelectMenuSeparator = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SelectMenuSeparator.displayName = "SelectMenuSeparator";
-var SelectMenuLargeItem = React78__namespace.forwardRef(
+var SelectMenuLargeItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9801,10 +9761,11 @@ var SelectMenuLargeItem = React78__namespace.forwardRef(
             )
           ] }),
           selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.Check,
+            "i",
             {
+              "aria-hidden": true,
               className: cn(
-                "size-4",
+                "ri-check-line text-base leading-none",
                 disabled ? "text-icon-default-disabled" : "text-icon-default-subtle"
               )
             }
@@ -9825,7 +9786,7 @@ var SelectMenuLargeItem = React78__namespace.forwardRef(
   }
 );
 SelectMenuLargeItem.displayName = "SelectMenuLargeItem";
-var Separator3 = React78__namespace.forwardRef(
+var Separator3 = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9848,7 +9809,7 @@ var Sheet = DialogPrimitive__namespace.Root;
 var SheetTrigger = DialogPrimitive__namespace.Trigger;
 var SheetClose = DialogPrimitive__namespace.Close;
 var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React78__namespace.forwardRef((_a, ref) => {
+var SheetOverlay = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -9864,7 +9825,7 @@ var SheetOverlay = React78__namespace.forwardRef((_a, ref) => {
 });
 SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
 var sheetVariants = classVarianceAuthority.cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-sui-bg-card p-6 shadow-modal-sm transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {
@@ -9879,7 +9840,7 @@ var sheetVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SheetContent = React78__namespace.forwardRef((_a, ref) => {
+var SheetContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { side = "right", className, children } = _b, props = __objRest(_b, ["side", "className", "children"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
@@ -9891,8 +9852,8 @@ var SheetContent = React78__namespace.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-sui-bg-default transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-sui-bg-state-ghost-hover", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-line text-base", "aria-hidden": true }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
           ] })
         ]
@@ -9935,32 +9896,32 @@ var SheetFooter = (_a) => {
   );
 };
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React78__namespace.forwardRef((_a, ref) => {
+var SheetTitle = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
     __spreadValues({
       ref,
-      className: cn("text-lg font-semibold text-foreground", className)
+      className: cn("text-lg font-semibold text-sui-text-default", className)
     }, props)
   );
 });
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React78__namespace.forwardRef((_a, ref) => {
+var SheetDescription = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-muted-foreground", className)
+      className: cn("text-sm text-sui-text-muted", className)
     }, props)
   );
 });
 SheetDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React78__namespace.useState(void 0);
-  React78__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React77__namespace.useState(void 0);
+  React77__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -9980,7 +9941,7 @@ function Skeleton(_a) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     __spreadValues({
-      className: cn("animate-pulse rounded-md bg-muted", className)
+      className: cn("animate-pulse rounded-md bg-sui-bg-subtle", className)
     }, props)
   );
 }
@@ -9990,15 +9951,15 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React78__namespace.createContext(null);
+var SidebarContext = React77__namespace.createContext(null);
 function useSidebar() {
-  const context = React78__namespace.useContext(SidebarContext);
+  const context = React77__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React78__namespace.forwardRef(
+var SidebarProvider = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       defaultOpen = true,
@@ -10016,10 +9977,10 @@ var SidebarProvider = React78__namespace.forwardRef(
       "children"
     ]);
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React78__namespace.useState(false);
-    const [_open, _setOpen] = React78__namespace.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React77__namespace.useState(false);
+    const [_open, _setOpen] = React77__namespace.useState(defaultOpen);
     const open = openProp != null ? openProp : _open;
-    const setOpen = React78__namespace.useCallback(
+    const setOpen = React77__namespace.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -10031,10 +9992,10 @@ var SidebarProvider = React78__namespace.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React78__namespace.useCallback(() => {
+    const toggleSidebar = React77__namespace.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React78__namespace.useEffect(() => {
+    React77__namespace.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -10045,7 +10006,7 @@ var SidebarProvider = React78__namespace.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React78__namespace.useMemo(
+    const contextValue = React77__namespace.useMemo(
       () => ({
         state,
         open,
@@ -10076,7 +10037,7 @@ var SidebarProvider = React78__namespace.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React78__namespace.forwardRef(
+var Sidebar = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       side = "left",
@@ -10175,7 +10136,7 @@ var Sidebar = React78__namespace.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React78__namespace.forwardRef((_a, ref) => {
+var SidebarTrigger = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10193,14 +10154,14 @@ var SidebarTrigger = React78__namespace.forwardRef((_a, ref) => {
       }
     }, props), {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-layout-left-line text-base", "aria-hidden": true }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     })
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React78__namespace.forwardRef((_a, ref) => {
+var SidebarRail = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10225,14 +10186,14 @@ var SidebarRail = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React78__namespace.forwardRef((_a, ref) => {
+var SidebarInset = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     __spreadValues({
       ref,
       className: cn(
-        "relative flex w-full flex-1 flex-col bg-background",
+        "relative flex w-full flex-1 flex-col bg-sui-bg-default",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
       )
@@ -10240,7 +10201,7 @@ var SidebarInset = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React78__namespace.forwardRef((_a, ref) => {
+var SidebarInput = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
@@ -10248,14 +10209,14 @@ var SidebarInput = React78__namespace.forwardRef((_a, ref) => {
       ref,
       "data-sidebar": "input",
       className: cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        "h-8 w-full bg-sui-bg-default shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
         className
       )
     }, props)
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React78__namespace.forwardRef((_a, ref) => {
+var SidebarHeader = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10267,7 +10228,7 @@ var SidebarHeader = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React78__namespace.forwardRef((_a, ref) => {
+var SidebarFooter = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10279,7 +10240,7 @@ var SidebarFooter = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React78__namespace.forwardRef((_a, ref) => {
+var SidebarSeparator = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Separator3,
@@ -10291,7 +10252,7 @@ var SidebarSeparator = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React78__namespace.forwardRef((_a, ref) => {
+var SidebarContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10306,7 +10267,7 @@ var SidebarContent = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React78__namespace.forwardRef((_a, ref) => {
+var SidebarGroup = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10318,7 +10279,7 @@ var SidebarGroup = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React78__namespace.forwardRef((_a, ref) => {
+var SidebarGroupLabel = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? reactSlot.Slot : "div";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10335,7 +10296,7 @@ var SidebarGroupLabel = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React78__namespace.forwardRef((_a, ref) => {
+var SidebarGroupAction = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10354,7 +10315,7 @@ var SidebarGroupAction = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React78__namespace.forwardRef((_a, ref) => {
+var SidebarGroupContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10366,7 +10327,7 @@ var SidebarGroupContent = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenu = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -10378,7 +10339,7 @@ var SidebarMenu = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
@@ -10396,7 +10357,7 @@ var sidebarMenuButtonVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+        outline: "bg-sui-bg-default shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
       },
       size: {
         default: "h-8 text-sm",
@@ -10410,7 +10371,7 @@ var sidebarMenuButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SidebarMenuButton = React78__namespace.forwardRef(
+var SidebarMenuButton = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       asChild = false,
@@ -10461,7 +10422,7 @@ var SidebarMenuButton = React78__namespace.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuAction = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false, showOnHover = false } = _b, props = __objRest(_b, ["className", "asChild", "showOnHover"]);
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10484,7 +10445,7 @@ var SidebarMenuAction = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuBadge = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10504,9 +10465,9 @@ var SidebarMenuBadge = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSkeleton = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, showIcon = false } = _b, props = __objRest(_b, ["className", "showIcon"]);
-  const width = React78__namespace.useMemo(() => {
+  const width = React77__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10539,7 +10500,7 @@ var SidebarMenuSkeleton = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSub = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
@@ -10555,12 +10516,12 @@ var SidebarMenuSub = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSubItem = React77__namespace.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadValues({ ref }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React78__namespace.forwardRef((_a, ref) => {
+var SidebarMenuSubButton = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { asChild = false, size = "md", isActive, className } = _b, props = __objRest(_b, ["asChild", "size", "isActive", "className"]);
   const Comp = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10600,7 +10561,7 @@ var sidebarCardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SidebarCard = React78__namespace.forwardRef(
+var SidebarCard = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10639,7 +10600,7 @@ var sidebarMenuItemVariants = classVarianceAuthority.cva("", {
     variant: "default"
   }
 });
-var SidebarMenuItem2 = React78__namespace.forwardRef(
+var SidebarMenuItem2 = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10835,7 +10796,7 @@ function percent2(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var Slider = React78__namespace.forwardRef(
+var Slider = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10868,12 +10829,12 @@ var Slider = React78__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78__namespace.useRef(null);
-    const [isDragging, setIsDragging] = React78__namespace.useState(false);
-    const [isFocused, setIsFocused] = React78__namespace.useState(false);
+    const trackRef = React77__namespace.useRef(null);
+    const [isDragging, setIsDragging] = React77__namespace.useState(false);
+    const [isFocused, setIsFocused] = React77__namespace.useState(false);
     const pct = percent2(value, min, max);
     const displayValue = formatValue ? formatValue(value) : `${value}`;
-    const getValueFromPointer = React78__namespace.useCallback(
+    const getValueFromPointer = React77__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -10884,7 +10845,7 @@ var Slider = React78__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const handlePointerDown = React78__namespace.useCallback(
+    const handlePointerDown = React77__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -10895,7 +10856,7 @@ var Slider = React78__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerMove = React78__namespace.useCallback(
+    const handlePointerMove = React77__namespace.useCallback(
       (e) => {
         if (!isDragging || disabled) return;
         const newValue = getValueFromPointer(e.clientX);
@@ -10903,10 +10864,10 @@ var Slider = React78__namespace.forwardRef(
       },
       [isDragging, disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerUp = React78__namespace.useCallback(() => {
+    const handlePointerUp = React77__namespace.useCallback(() => {
       setIsDragging(false);
     }, []);
-    const handleKeyDown = React78__namespace.useCallback(
+    const handleKeyDown = React77__namespace.useCallback(
       (e) => {
         if (disabled) return;
         let newValue = value;
@@ -10933,7 +10894,7 @@ var Slider = React78__namespace.forwardRef(
       },
       [disabled, value, step, min, max, onValueChange]
     );
-    const tickLabels = React78__namespace.useMemo(() => {
+    const tickLabels = React77__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const count2 = pointCount;
       const labels = [];
@@ -11027,7 +10988,7 @@ Slider.displayName = "Slider";
 function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-var SliderInput = React78__namespace.forwardRef(
+var SliderInput = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11050,8 +11011,8 @@ var SliderInput = React78__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const [internalValue, setInternalValue] = React78__namespace.useState(value);
-    React78__namespace.useEffect(() => {
+    const [internalValue, setInternalValue] = React77__namespace.useState(value);
+    React77__namespace.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const commit = (newVal) => {
@@ -11158,7 +11119,7 @@ function percent3(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var SliderRange = React78__namespace.forwardRef(
+var SliderRange = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11191,15 +11152,15 @@ var SliderRange = React78__namespace.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78__namespace.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React78__namespace.useState(null);
-    const [focusedHandle, setFocusedHandle] = React78__namespace.useState(null);
+    const trackRef = React77__namespace.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React77__namespace.useState(null);
+    const [focusedHandle, setFocusedHandle] = React77__namespace.useState(null);
     const [rangeMin, rangeMax] = value;
     const pctMin = percent3(rangeMin, min, max);
     const pctMax = percent3(rangeMax, min, max);
     const fmt = (v) => formatValue ? formatValue(v) : `${v}`;
     const displayValue = `${fmt(rangeMin)} \u2013 ${fmt(rangeMax)}`;
-    const getValueFromPointer = React78__namespace.useCallback(
+    const getValueFromPointer = React77__namespace.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -11210,7 +11171,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React78__namespace.useCallback(
+    const closestHandle = React77__namespace.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -11218,7 +11179,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React78__namespace.useCallback(
+    const updateValue = React77__namespace.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp4(newVal, min, rangeMax);
@@ -11230,7 +11191,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React78__namespace.useCallback(
+    const handlePointerDown = React77__namespace.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -11242,7 +11203,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React78__namespace.useCallback(
+    const handlePointerMove = React77__namespace.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -11250,10 +11211,10 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React78__namespace.useCallback(() => {
+    const handlePointerUp = React77__namespace.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React78__namespace.useCallback(
+    const makeKeyHandler = React77__namespace.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -11281,7 +11242,7 @@ var SliderRange = React78__namespace.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React78__namespace.useMemo(() => {
+    const tickLabels = React77__namespace.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -11398,7 +11359,7 @@ var SliderRange = React78__namespace.forwardRef(
   }
 );
 SliderRange.displayName = "SliderRange";
-var SliderRangeInput = React78__namespace.forwardRef(
+var SliderRangeInput = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11522,25 +11483,25 @@ var Toaster = (_a) => {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-checkbox-circle-fill text-base", "aria-hidden": true }),
+        info: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-information-line text-base", "aria-hidden": true }),
+        warning: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-alert-line text-base", "aria-hidden": true }),
+        error: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-error-warning-line text-base", "aria-hidden": true }),
+        loading: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-loader-4-line text-base animate-spin", "aria-hidden": true })
       },
       toastOptions: {
         classNames: {
-          toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+          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",
+          cancelButton: "group-[.toast]:bg-sui-bg-subtle group-[.toast]:text-sui-text-muted"
         }
       }
     }, props)
   );
 };
 var ToastProvider = ToastPrimitives__namespace.Provider;
-var ToastViewport = React78__namespace.forwardRef((_a, ref) => {
+var ToastViewport = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Viewport,
@@ -11559,8 +11520,8 @@ var toastVariants = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
-        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground"
+        default: "border bg-sui-bg-default text-sui-text-default",
+        destructive: "destructive group border-sui-border-default bg-sui-bg-state-destructive text-sui-text-white-default"
       }
     },
     defaultVariants: {
@@ -11568,7 +11529,7 @@ var toastVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toast = React78__namespace.forwardRef((_a, ref) => {
+var Toast = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Root,
@@ -11579,38 +11540,38 @@ var Toast = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives__namespace.Root.displayName;
-var ToastAction = React78__namespace.forwardRef((_a, ref) => {
+var ToastAction = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Action,
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-sui-bg-default transition-colors hover:bg-sui-bg-state-ghost-hover focus:outline-none focus:ring-2 focus:ring-sui-border-highlight focus:ring-offset-2 disabled:text-sui-text-hint disabled:pointer-events-none group-[.destructive]:border-sui-border-default/40 group-[.destructive]:hover:border-sui-bg-state-destructive/30 group-[.destructive]:hover:bg-sui-bg-state-destructive group-[.destructive]:hover:text-sui-text-white-default group-[.destructive]:focus:ring-sui-border-highlight",
         className
       )
     }, props)
   );
 });
 ToastAction.displayName = ToastPrimitives__namespace.Action.displayName;
-var ToastClose = React78__namespace.forwardRef((_a, ref) => {
+var ToastClose = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Close,
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+        "absolute right-2 top-2 rounded-md p-1 text-sui-text-default/50 opacity-0 transition-opacity hover:text-sui-text-default focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-sui-text-white-default/70 group-[.destructive]:hover:text-sui-text-white-default group-[.destructive]:focus:ring-sui-border-highlight group-[.destructive]:focus:ring-offset-sui-bg-state-destructive",
         className
       ),
       "toast-close": ""
     }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-line text-base", "aria-hidden": true })
     })
   );
 });
 ToastClose.displayName = ToastPrimitives__namespace.Close.displayName;
-var ToastTitle = React78__namespace.forwardRef((_a, ref) => {
+var ToastTitle = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Title,
@@ -11621,7 +11582,7 @@ var ToastTitle = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 ToastTitle.displayName = ToastPrimitives__namespace.Title.displayName;
-var ToastDescription = React78__namespace.forwardRef((_a, ref) => {
+var ToastDescription = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Description,
@@ -11726,8 +11687,8 @@ function toast(_a) {
   };
 }
 function useToast() {
-  const [state, setState] = React78__namespace.useState(memoryState);
-  React78__namespace.useEffect(() => {
+  const [state, setState] = React77__namespace.useState(memoryState);
+  React77__namespace.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -11758,7 +11719,7 @@ function Toaster2() {
     /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, {})
   ] });
 }
-var Switch = React78__namespace.forwardRef((_a, ref) => {
+var Switch = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SwitchPrimitives__namespace.Root,
@@ -11810,10 +11771,10 @@ var Switch = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 Switch.displayName = "Switch";
-var SwitchList = React78__namespace.forwardRef(
+var SwitchList = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React78__namespace.Children.toArray(children);
+    const items = React77__namespace.Children.toArray(children);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -11841,7 +11802,7 @@ var SwitchList = React78__namespace.forwardRef(
   }
 );
 SwitchList.displayName = "SwitchList";
-var SwitchWithText = React78__namespace.forwardRef(
+var SwitchWithText = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11858,7 +11819,7 @@ var SwitchWithText = React78__namespace.forwardRef(
       "disabled",
       "id"
     ]);
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const switchId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -11915,7 +11876,7 @@ var SwitchWithText = React78__namespace.forwardRef(
   }
 );
 SwitchWithText.displayName = "SwitchWithText";
-var Table = React78__namespace.forwardRef((_a, ref) => {
+var Table = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
     "table",
@@ -11926,12 +11887,12 @@ var Table = React78__namespace.forwardRef((_a, ref) => {
   ) });
 });
 Table.displayName = "Table";
-var TableHeader = React78__namespace.forwardRef((_a, ref) => {
+var TableHeader = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b", className) }, props));
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b [&_tr]:border-sui-border-default", className) }, props));
 });
 TableHeader.displayName = "TableHeader";
-var TableBody = React78__namespace.forwardRef((_a, ref) => {
+var TableBody = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tbody",
@@ -11942,21 +11903,21 @@ var TableBody = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 TableBody.displayName = "TableBody";
-var TableFooter = React78__namespace.forwardRef((_a, ref) => {
+var TableFooter = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tfoot",
     __spreadValues({
       ref,
       className: cn(
-        "border-t bg-sui-bg-basic-gray-alpha-2 font-medium [&>tr]:last:border-b-0",
+        "border-t border-sui-border-default bg-sui-bg-basic-gray-alpha-2 font-medium [&>tr]:last:border-b-0",
         className
       )
     }, props)
   );
 });
 TableFooter.displayName = "TableFooter";
-var TableRow = React78__namespace.forwardRef((_a, ref) => {
+var TableRow = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
@@ -11970,21 +11931,21 @@ var TableRow = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = React78__namespace.forwardRef((_a, ref) => {
+var TableHead = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     __spreadValues({
       ref,
       className: cn(
-        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        "h-12 px-4 text-left align-middle font-medium text-sui-text-muted [&:has([role=checkbox])]:pr-0",
         className
       )
     }, props)
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React78__namespace.forwardRef((_a, ref) => {
+var TableCell = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "td",
@@ -11995,13 +11956,13 @@ var TableCell = React78__namespace.forwardRef((_a, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React78__namespace.forwardRef((_a, ref) => {
+var TableCaption = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "caption",
     __spreadValues({
       ref,
-      className: cn("mt-4 text-sm text-muted-foreground", className)
+      className: cn("mt-4 text-sm text-sui-text-muted", className)
     }, props)
   );
 });
@@ -12031,7 +11992,7 @@ var ariaSortMap2 = {
   desc: "descending",
   none: "none"
 };
-var TableHeaderItem = React78__namespace.forwardRef(
+var TableHeaderItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12147,7 +12108,7 @@ var tableItemVariants = classVarianceAuthority.cva("flex items-center px-2", {
     size: "lg"
   }
 });
-var TableItem = React78__namespace.forwardRef(
+var TableItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12231,7 +12192,7 @@ var TableItem = React78__namespace.forwardRef(
   }
 );
 TableItem.displayName = "TableItem";
-var TablePagination = React78__namespace.forwardRef(
+var TablePagination = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12258,6 +12219,8 @@ var TablePagination = React78__namespace.forwardRef(
       "div",
       __spreadProps(__spreadValues({
         ref,
+        role: "navigation",
+        "aria-label": "Pagination",
         className: cn(
           "flex items-center justify-between border-t border-sui-border-default px-2 py-3",
           className
@@ -12316,7 +12279,7 @@ var tableRowSortVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TableRowSort = React78__namespace.forwardRef(
+var TableRowSort = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", striped, sticky, children } = _b, props = __objRest(_b, ["className", "variant", "striped", "sticky", "children"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -12339,7 +12302,7 @@ var TableRowSort = React78__namespace.forwardRef(
 TableRowSort.displayName = "TableRowSort";
 var textWidths = ["w-20", "w-28", "w-24", "w-32", "w-16", "w-26", "w-22", "w-30"];
 var skeletonBg = "bg-sui-bg-basic-gray-alpha-4";
-var TableSkeletonRow = React78__namespace.forwardRef(
+var TableSkeletonRow = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, columns, rowCount = 5, size = "sm" } = _b, props = __objRest(_b, ["className", "columns", "rowCount", "size"]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className, "aria-hidden": "true" }, props), { children: Array.from({ length: rowCount }, (_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(TableRowSort, { variant: "default", children: columns.map((col, colIdx) => {
@@ -12389,12 +12352,12 @@ var tabListVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TabList = React78__namespace.forwardRef((_a, ref) => {
+var TabList = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "pill", shape = "pill", layout, children } = _b, props = __objRest(_b, ["className", "variant", "shape", "layout", "children"]);
   const childShape = variant === "segmented" && shape === "rounded" ? "rounded" : shape;
   const childRadiusOverride = variant === "segmented" && shape === "rounded" ? "rounded-sm" : void 0;
-  const enhancedChildren = React78__namespace.Children.map(children, (child) => {
-    if (!React78__namespace.isValidElement(child)) return child;
+  const enhancedChildren = React77__namespace.Children.map(children, (child) => {
+    if (!React77__namespace.isValidElement(child)) return child;
     const extraProps = {
       shape: childShape
     };
@@ -12402,7 +12365,7 @@ var TabList = React78__namespace.forwardRef((_a, ref) => {
       const existingClassName = child.props.className;
       extraProps.className = cn(existingClassName, childRadiusOverride);
     }
-    return React78__namespace.cloneElement(child, extraProps);
+    return React77__namespace.cloneElement(child, extraProps);
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
@@ -12464,7 +12427,7 @@ var tabItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TabItem = React78__namespace.forwardRef((_a, ref) => {
+var TabItem = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, shape, size } = _b, props = __objRest(_b, ["className", "shape", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Trigger,
@@ -12476,42 +12439,42 @@ var TabItem = React78__namespace.forwardRef((_a, ref) => {
 });
 TabItem.displayName = "TabItem";
 var Tabs = TabsPrimitive4__namespace.Root;
-var TabsList = React78__namespace.forwardRef((_a, ref) => {
+var TabsList = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.List,
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+        "inline-flex h-10 items-center justify-center rounded-md bg-sui-bg-subtle p-1 text-sui-text-muted",
         className
       )
     }, props)
   );
 });
 TabsList.displayName = TabsPrimitive4__namespace.List.displayName;
-var TabsTrigger = React78__namespace.forwardRef((_a, ref) => {
+var TabsTrigger = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Trigger,
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground 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 data-[state=active]:bg-sui-bg-default data-[state=active]:text-sui-text-default data-[state=active]:shadow-sm",
         className
       )
     }, props)
   );
 });
 TabsTrigger.displayName = TabsPrimitive4__namespace.Trigger.displayName;
-var TabsContent = React78__namespace.forwardRef((_a, ref) => {
+var TabsContent = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive4__namespace.Content,
     __spreadValues({
       ref,
       className: cn(
-        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "mt-2 ring-offset-sui-bg-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2",
         className
       )
     }, props)
@@ -12548,7 +12511,7 @@ var textAreaContainerVariants = classVarianceAuthority.cva(
     }
   }
 );
-var TextAreaField = React78__namespace.forwardRef(
+var TextAreaField = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12593,7 +12556,7 @@ var TextAreaField = React78__namespace.forwardRef(
       "defaultValue",
       "onChange"
     ]);
-    const generatedId = React78__namespace.useId();
+    const generatedId = React77__namespace.useId();
     const textAreaId = id || generatedId;
     const captionId = `${textAreaId}-caption`;
     const charCountId = `${textAreaId}-charcount`;
@@ -12606,12 +12569,12 @@ var TextAreaField = React78__namespace.forwardRef(
       helperText ? captionId : null,
       showCount ? charCountId : null
     ].filter(Boolean).join(" ") || void 0;
-    const [charCount, setCharCount] = React78__namespace.useState(() => {
+    const [charCount, setCharCount] = React77__namespace.useState(() => {
       if (value !== void 0) return String(value).length;
       if (defaultValue !== void 0) return String(defaultValue).length;
       return 0;
     });
-    React78__namespace.useEffect(() => {
+    React77__namespace.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       }
@@ -12790,13 +12753,13 @@ var TextAreaField = React78__namespace.forwardRef(
   }
 );
 TextAreaField.displayName = "TextAreaField";
-var Textarea = React78__namespace.forwardRef((_a, ref) => {
+var Textarea = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     __spreadValues({
       className: cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[80px] w-full rounded-md border border-sui-border-darker bg-sui-bg-input px-3 py-2 text-base ring-offset-sui-bg-default placeholder:text-sui-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-sui-text-hint disabled:pointer-events-none md:text-sm",
         className
       ),
       ref
@@ -12842,7 +12805,7 @@ var toggleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toggle = React78__namespace.forwardRef((_a, ref) => {
+var Toggle = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TogglePrimitive__namespace.Root,
@@ -12854,7 +12817,7 @@ var Toggle = React78__namespace.forwardRef((_a, ref) => {
 });
 Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
 function useMergedRef(...refs) {
-  return React78__namespace.useCallback((node) => {
+  return React77__namespace.useCallback((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") ref(node);
       else if (ref && "current" in ref)
@@ -12883,13 +12846,13 @@ var chipSizeMap = {
   xs: "sm",
   "2xs": "sm"
 };
-var ToggleGroupContext = React78__namespace.createContext(null);
+var ToggleGroupContext = React77__namespace.createContext(null);
 function useToggleGroup() {
-  const ctx = React78__namespace.useContext(ToggleGroupContext);
+  const ctx = React77__namespace.useContext(ToggleGroupContext);
   if (!ctx) throw new Error("ToggleGroupItem must be used within a ToggleGroup");
   return ctx;
 }
-var ToggleGroup = React78__namespace.forwardRef(
+var ToggleGroup = React77__namespace.forwardRef(
   (props, ref) => {
     const {
       type,
@@ -12904,16 +12867,16 @@ var ToggleGroup = React78__namespace.forwardRef(
     const controlledValue = "value" in props ? props.value : void 0;
     const defaultValue = "defaultValue" in props ? props.defaultValue : void 0;
     const onValueChange = "onValueChange" in props ? props.onValueChange : void 0;
-    const [internalValue, setInternalValue] = React78__namespace.useState(
+    const [internalValue, setInternalValue] = React77__namespace.useState(
       defaultValue
     );
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const [rovingFocusValue, setRovingFocusValue] = React78__namespace.useState(null);
-    const itemRefs = React78__namespace.useRef(/* @__PURE__ */ new Map());
-    const itemValues = React78__namespace.useRef([]);
-    const [, notifyRegistration] = React78__namespace.useReducer((x) => x + 1, 0);
-    const isActive = React78__namespace.useCallback(
+    const [rovingFocusValue, setRovingFocusValue] = React77__namespace.useState(null);
+    const itemRefs = React77__namespace.useRef(/* @__PURE__ */ new Map());
+    const itemValues = React77__namespace.useRef([]);
+    const [, notifyRegistration] = React77__namespace.useReducer((x) => x + 1, 0);
+    const isActive = React77__namespace.useCallback(
       (itemValue) => {
         if (type === "single") return value === itemValue;
         if (type === "multiple" && Array.isArray(value)) return value.includes(itemValue);
@@ -12921,7 +12884,7 @@ var ToggleGroup = React78__namespace.forwardRef(
       },
       [type, value]
     );
-    const toggle = React78__namespace.useCallback(
+    const toggle = React77__namespace.useCallback(
       (itemValue) => {
         if (type === "single") {
           const newValue = value === itemValue ? void 0 : itemValue;
@@ -12965,7 +12928,7 @@ var ToggleGroup = React78__namespace.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React78__namespace.forwardRef(
+var ToggleGroupItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: itemValue,
@@ -13000,9 +12963,9 @@ var ToggleGroupItem = React78__namespace.forwardRef(
     const disabled = ctx.disabled || itemDisabled;
     const resolvedSize = bgSize != null ? bgSize : "lg";
     const chipSize = chipSizeMap[resolvedSize];
-    const internalRef = React78__namespace.useRef(null);
+    const internalRef = React77__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    React78__namespace.useEffect(() => {
+    React77__namespace.useEffect(() => {
       const el = internalRef.current;
       if (!el) return;
       ctx.itemRefs.current.set(itemValue, el);
@@ -13219,7 +13182,7 @@ var containedInnerVariants = classVarianceAuthority.cva(
     "group-hover:bg-sui-bg-state-secondary-hover group-active:bg-sui-bg-state-secondary-press"
   ]
 );
-var Userbar = React78__namespace.forwardRef(
+var Userbar = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13328,7 +13291,7 @@ var Userbar = React78__namespace.forwardRef(
   }
 );
 Userbar.displayName = "Userbar";
-var VerticalStepperItem = React78__namespace.forwardRef(
+var VerticalStepperItem = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13464,7 +13427,7 @@ var VerticalStepperItem = React78__namespace.forwardRef(
   }
 );
 VerticalStepperItem.displayName = "VerticalStepperItem";
-var VerticalStepper = React78__namespace.forwardRef(
+var VerticalStepper = React77__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13584,6 +13547,7 @@ exports.Calendar = Calendar;
 exports.CalendarDayButton = CalendarDayButton;
 exports.Card = Card;
 exports.CardContent = CardContent;
+exports.CardCover = CardCover;
 exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
@@ -13653,13 +13617,6 @@ exports.FileUpload = FileUpload;
 exports.FileUploadArea = FileUploadArea;
 exports.FileUploadCard = FileUploadCard;
 exports.FilterButton = FilterButton;
-exports.Form = Form;
-exports.FormControl = FormControl;
-exports.FormDescription = FormDescription;
-exports.FormField = FormField;
-exports.FormItem = FormItem;
-exports.FormLabel = FormLabel;
-exports.FormMessage = FormMessage;
 exports.GridTableCell = GridTableCell;
 exports.GridTableHeaderItem = GridTableHeaderItem;
 exports.GridTableRow = GridTableRow;
@@ -13821,6 +13778,7 @@ exports.avatarButtonVariants = avatarButtonVariants;
 exports.avatarVariants = avatarVariants;
 exports.buttonGroupItemVariants = buttonGroupItemVariants;
 exports.buttonVariants = buttonVariants;
+exports.cardVariants = cardVariants;
 exports.checkboxCardVariants = checkboxCardVariants;
 exports.checkboxVariants = checkboxVariants;
 exports.checkboxWithTextVariants = checkboxWithTextVariants;
@@ -13865,7 +13823,6 @@ exports.toggleVariants = toggleVariants;
 exports.tooltipContentVariants = tooltipContentVariants;
 exports.underlineTabItemVariants = underlineTabItemVariants;
 exports.underlineTabsListVariants = underlineTabsListVariants;
-exports.useFormField = useFormField;
 exports.useSidebar = useSidebar;
 exports.userbarVariants = userbarVariants;
 exports.validateFile = validateFile;