@maxsteinwender/sort-ui 0.1.1 → 1.0.2

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import * as React78 from 'react';
+"use client";
+import * as React77 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -7,7 +8,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Slot } from '@radix-ui/react-slot';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { Search, Check, X, ChevronRight, Circle, ChevronDown, ChevronUp, PanelLeft, MoreHorizontal, ChevronLeft, LoaderCircle, OctagonX, TriangleAlert, Info, CircleCheck } from 'lucide-react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import * as RechartsPrimitive from 'recharts';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -21,7 +21,6 @@ import { format } from 'date-fns';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as ProgressPrimitive2 from '@radix-ui/react-progress';
-import { useFormContext, FormProvider, Controller } from 'react-hook-form';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -119,7 +118,7 @@ var accordionItemVariants = cva(
     }
   }
 );
-var AccordionItem = React78.forwardRef((_a, ref) => {
+var AccordionItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Item,
@@ -130,7 +129,7 @@ var AccordionItem = React78.forwardRef((_a, ref) => {
   );
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React78.forwardRef((_a, ref) => {
+var AccordionTrigger = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
@@ -139,7 +138,7 @@ var AccordionTrigger = React78.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
       )
@@ -152,7 +151,7 @@ var AccordionTrigger = React78.forwardRef((_a, ref) => {
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React78.forwardRef((_a, ref) => {
+var AccordionContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
@@ -184,11 +183,11 @@ var AccordionContent = React78.forwardRef((_a, ref) => {
 });
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 var alertVariants = 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"
       }
     },
@@ -197,7 +196,7 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React78.forwardRef((_a, ref) => {
+var Alert = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -209,7 +208,7 @@ var Alert = React78.forwardRef((_a, ref) => {
   );
 });
 Alert.displayName = "Alert";
-var AlertTitle = React78.forwardRef((_a, ref) => {
+var AlertTitle = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "h5",
@@ -220,7 +219,7 @@ var AlertTitle = React78.forwardRef((_a, ref) => {
   );
 });
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React78.forwardRef((_a, ref) => {
+var AlertDescription = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -239,15 +238,15 @@ var buttonVariants = cva(
     variants: {
       variant: {
         // Primary — Sort UI: bg/state/primary, text/white-default, icon/white-default
-        default: "bg-sui-bg-state-primary text-sui-text-white-default [text-shadow:var(--shadow-text)] [&_i]:text-icon-white-default [&_i]:[text-shadow:none] [&_svg]:text-icon-white-default [&_svg]:[text-shadow:none] shadow-[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"
       },
@@ -350,7 +349,7 @@ var loadingTextColorMap = {
   "ghost-muted": "text-sui-text-muted"
 };
 var loadingShadowVariants = /* @__PURE__ */ new Set(["default", "outline", "destructive"]);
-var Button = React78.forwardRef(
+var Button = React77.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"]);
@@ -421,7 +420,7 @@ Button.displayName = "Button";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React78.forwardRef((_a, ref) => {
+var AlertDialogOverlay = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Overlay,
@@ -436,7 +435,7 @@ var AlertDialogOverlay = React78.forwardRef((_a, ref) => {
   );
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React78.forwardRef((_a, ref) => {
+var AlertDialogContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
@@ -445,7 +444,7 @@ var AlertDialogContent = React78.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)
@@ -487,7 +486,7 @@ var AlertDialogFooter = (_a) => {
   );
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React78.forwardRef((_a, ref) => {
+var AlertDialogTitle = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Title,
@@ -498,18 +497,18 @@ var AlertDialogTitle = React78.forwardRef((_a, ref) => {
   );
 });
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React78.forwardRef((_a, ref) => {
+var AlertDialogDescription = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-muted-foreground", className)
+      className: cn("text-sm text-sui-text-muted", className)
     }, props)
   );
 });
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React78.forwardRef((_a, ref) => {
+var AlertDialogAction = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Action,
@@ -520,7 +519,7 @@ var AlertDialogAction = React78.forwardRef((_a, ref) => {
   );
 });
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React78.forwardRef((_a, ref) => {
+var AlertDialogCancel = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Cancel,
@@ -559,11 +558,11 @@ var awayIconSize = {
   "lg": "14px",
   "default": "16px"
 };
-var StatusBadge = React78.forwardRef(
+var StatusBadge = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant, size = "default", src, className } = _b, props = __objRest(_b, ["variant", "size", "src", "className"]);
-    const [imgError, setImgError] = React78.useState(false);
-    React78.useEffect(() => {
+    const [imgError, setImgError] = React77.useState(false);
+    React77.useEffect(() => {
       setImgError(false);
     }, [src]);
     const sizeClass = containerSize[size];
@@ -639,7 +638,7 @@ function CompanyContent({
 }
 function DotContent({ dotColor }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "absolute inset-[12.5%] rounded-full bg-background" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute inset-[12.5%] rounded-full bg-sui-bg-card" }),
     /* @__PURE__ */ jsx("span", { className: cn("absolute inset-[20.83%] rounded-full", dotColor) })
   ] });
 }
@@ -776,12 +775,12 @@ function extractInitials(value) {
   }
   return trimmed.slice(0, 2).toUpperCase();
 }
-var AvatarContext = React78.createContext({
+var AvatarContext = React77.createContext({
   size: "md",
   shape: "circular",
   color: "gray"
 });
-var Avatar = React78.forwardRef((_a, ref) => {
+var Avatar = React77.forwardRef((_a, ref) => {
   var _b = _a, {
     className,
     size = "md",
@@ -924,7 +923,7 @@ var Avatar = React78.forwardRef((_a, ref) => {
   ) });
 });
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React78.forwardRef((_a, ref) => {
+var AvatarImage = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     AvatarPrimitive.Image,
@@ -935,10 +934,10 @@ var AvatarImage = React78.forwardRef((_a, ref) => {
   );
 });
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React78.forwardRef((_a, ref) => {
+var AvatarFallback = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, fallback, children } = _b, props = __objRest(_b, ["className", "fallback", "children"]);
   var _a2, _b2, _c;
-  const { size, shape, color } = React78.useContext(AvatarContext);
+  const { size, shape, color } = React77.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";
@@ -988,7 +987,7 @@ var avatarButtonVariants = cva(
     }
   }
 );
-var AvatarButton = React78.forwardRef(
+var AvatarButton = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1082,7 +1081,7 @@ var paddingBySize = {
   "2xl": "pr-sui-10",
   "3xl": "pr-sui-12"
 };
-var AvatarGroup = React78.forwardRef(
+var AvatarGroup = React77.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";
@@ -1124,7 +1123,7 @@ var AvatarGroup = React78.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AvatarUpload = React78.forwardRef(
+var AvatarUpload = React77.forwardRef(
   ({
     src,
     alt = "",
@@ -1188,7 +1187,7 @@ var AvatarUpload = React78.forwardRef(
 );
 AvatarUpload.displayName = "AvatarUpload";
 var controlButtonVariants = 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: {
@@ -1217,7 +1216,7 @@ var controlButtonVariants = cva(
     }
   }
 );
-var ControlButton = React78.forwardRef(
+var ControlButton = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1379,26 +1378,26 @@ function Badge(_a) {
     })
   );
 }
-var Breadcrumb = React78.forwardRef((_a, ref) => {
+var Breadcrumb = React77.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx("nav", __spreadValues({ ref, "aria-label": "breadcrumb" }, props));
 });
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React78.forwardRef((_a, ref) => {
+var BreadcrumbList = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+var BreadcrumbItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "li",
@@ -1409,7 +1408,7 @@ var BreadcrumbItem = React78.forwardRef((_a, ref) => {
   );
 });
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React78.forwardRef((_a, ref) => {
+var BreadcrumbLink = React77.forwardRef((_a, ref) => {
   var _b = _a, { asChild, className } = _b, props = __objRest(_b, ["asChild", "className"]);
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
@@ -1417,21 +1416,21 @@ var BreadcrumbLink = React78.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.forwardRef((_a, ref) => {
+var BreadcrumbPage = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "span",
     __spreadValues({
       ref,
       "aria-current": "page",
-      className: cn("font-normal text-foreground", className)
+      className: cn("font-normal text-sui-text-default", className)
     }, props)
   );
 });
@@ -1449,9 +1448,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__ */ jsx(ChevronRight, {})
+      children: children != null ? children : /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line", "aria-hidden": true })
     })
   );
 };
@@ -1469,7 +1468,7 @@ var BreadcrumbEllipsis = (_a) => {
       "aria-hidden": "true",
       className: cn("flex h-9 w-9 items-center justify-center", className)
     }, props), {
-      children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx("i", { className: "ri-more-line text-base", "aria-hidden": true })
     })
   );
 };
@@ -1495,7 +1494,7 @@ function SortBreadcrumb({
       ),
       children: items.map((item, index) => {
         const isLast = index === items.length - 1;
-        return /* @__PURE__ */ jsxs(React78.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React77.Fragment, { children: [
           /* @__PURE__ */ jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsx(
             SortBreadcrumbItem,
             __spreadProps(__spreadValues({}, item), {
@@ -1584,7 +1583,7 @@ var verticalChildRadius = {
   xs: "[&>button:first-child]:rounded-t-md [&>button:last-of-type]:rounded-b-md",
   "2xs": "[&>button:first-child]:rounded-t-sm [&>button:last-of-type]:rounded-b-sm"
 };
-var ButtonGroup = React78.forwardRef(
+var ButtonGroup = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { size = "lg", orientation = "horizontal", className, children } = _b, props = __objRest(_b, ["size", "orientation", "className", "children"]);
     const isVertical = orientation === "vertical";
@@ -1603,9 +1602,9 @@ var ButtonGroup = React78.forwardRef(
           className
         )
       }, props), {
-        children: React78.Children.map(children, (child, index) => {
-          if (React78.isValidElement(child)) {
-            return React78.cloneElement(
+        children: React77.Children.map(children, (child, index) => {
+          if (React77.isValidElement(child)) {
+            return React77.cloneElement(
               child,
               {
                 showSeparator: index > 0,
@@ -1674,7 +1673,7 @@ var badgeClasses = {
   xs: "text-xs font-medium leading-4 py-sui-2",
   "2xs": "text-xs font-medium leading-4 py-0"
 };
-var ButtonGroupItem = React78.forwardRef(
+var ButtonGroupItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -1758,7 +1757,7 @@ var filterButtonVariants = cva(
 );
 var getVisualStateClasses = (selected) => selected ? "bg-sui-bg-state-secondary border border-solid border-sui-border-darker text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted shadow-default" : "bg-sui-bg-state-secondary border border-dashed border-sui-border-darker text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted";
 var SUB_BUTTON_FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-1 rounded-sm";
-var FilterButton = React78.forwardRef(
+var FilterButton = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1948,7 +1947,7 @@ var underlineOffsetMap = {
   md: "after:bottom-0",
   lg: "after:bottom-0"
 };
-var LinkButton = React78.forwardRef(
+var LinkButton = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size, asChild = false, leadIcon, tailIcon, disabled, children } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild", "leadIcon", "tailIcon", "disabled", "children"]);
     const Comp = asChild ? Slot : "button";
@@ -1994,13 +1993,13 @@ var LinkButton = React78.forwardRef(
 );
 LinkButton.displayName = "LinkButton";
 var socialButtonVariants = 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",
@@ -2015,15 +2014,15 @@ var socialButtonVariants = 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.forwardRef(
+var SocialButton = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, shape, brand, iconOnly, asChild = false, children } = _b, props = __objRest(_b, ["className", "variant", "shape", "brand", "iconOnly", "asChild", "children"]);
     const Comp = asChild ? Slot : "button";
@@ -2228,8 +2227,8 @@ function CalendarDayButton(_a) {
     "modifiers"
   ]);
   const defaultClassNames = getDefaultClassNames();
-  const ref = React78.useRef(null);
-  React78.useEffect(() => {
+  const ref = React77.useRef(null);
+  React77.useEffect(() => {
     var _a2;
     if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [modifiers.focused]);
@@ -2280,62 +2279,82 @@ function CalendarDayButton(_a) {
   );
 }
 CalendarDayButton.displayName = "CalendarDayButton";
-var Card = React78.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      ref,
-      className: cn(
-        "rounded-lg border bg-card text-card-foreground shadow-sm",
-        className
-      )
-    }, props)
-  );
-});
+var cardVariants = 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.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadValues({
+        ref,
+        className: cn(cardVariants({ variant }), className)
+      }, props)
+    );
+  }
+);
 Card.displayName = "Card";
-var CardHeader = React78.forwardRef((_a, ref) => {
+var CardHeader = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+var CardTitle = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+var CardDescription = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+var CardContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React78.forwardRef((_a, ref) => {
+var CardFooter = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2346,18 +2365,38 @@ var CardFooter = React78.forwardRef((_a, ref) => {
   );
 });
 CardFooter.displayName = "CardFooter";
+var CardCover = React77.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, flush = false, aspectRatio = "3/2", style, children } = _b, props = __objRest(_b, ["className", "flush", "aspectRatio", "style", "children"]);
+    return /* @__PURE__ */ jsx(
+      "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.createContext(null);
+var ChartContext = React77.createContext(null);
 function useChart() {
-  const context = React78.useContext(ChartContext);
+  const context = React77.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React78.forwardRef((_a, ref) => {
+var ChartContainer = React77.forwardRef((_a, ref) => {
   var _b = _a, { id, className, children, config } = _b, props = __objRest(_b, ["id", "className", "children", "config"]);
-  const uniqueId = React78.useId();
+  const uniqueId = React77.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2404,7 +2443,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
-var ChartTooltipContent = React78.forwardRef(
+var ChartTooltipContent = React77.forwardRef(
   ({
     active,
     payload,
@@ -2421,7 +2460,7 @@ var ChartTooltipContent = React78.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React78.useMemo(() => {
+    const tooltipLabel = React77.useMemo(() => {
       var _a;
       if (hideLabel || !(payload == null ? void 0 : payload.length)) {
         return null;
@@ -2518,7 +2557,7 @@ var ChartTooltipContent = React78.forwardRef(
 );
 ChartTooltipContent.displayName = "ChartTooltip";
 var ChartLegend = RechartsPrimitive.Legend;
-var ChartLegendContent = React78.forwardRef(
+var ChartLegendContent = React77.forwardRef(
   ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!(payload == null ? void 0 : payload.length)) {
@@ -2637,7 +2676,7 @@ var checkboxVariants = cva(
     }
   }
 );
-var Checkbox = React78.forwardRef((_a, ref) => {
+var Checkbox = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxs(
     CheckboxPrimitive.Root,
@@ -2758,7 +2797,7 @@ var checkboxCardVariants = cva(
     }
   }
 );
-var CheckboxCard = React78.forwardRef(
+var CheckboxCard = React77.forwardRef(
   ({
     title,
     description,
@@ -2772,7 +2811,7 @@ var CheckboxCard = React78.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const checkboxId = `checkbox-card-${generatedId}`;
     const titleId = `checkbox-card-title-${generatedId}`;
     const descriptionId = `checkbox-card-desc-${generatedId}`;
@@ -2868,10 +2907,10 @@ var CheckboxCard = React78.forwardRef(
   }
 );
 CheckboxCard.displayName = "CheckboxCard";
-var CheckboxList = React78.forwardRef(
+var CheckboxList = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React78.Children.toArray(children);
+    const items = React77.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -2913,7 +2952,7 @@ var checkboxWithTextVariants = cva(
     }
   }
 );
-var CheckboxWithText = React78.forwardRef(
+var CheckboxWithText = React77.forwardRef(
   ({
     label,
     description,
@@ -2926,7 +2965,7 @@ var CheckboxWithText = React78.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const checkboxId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -3074,7 +3113,7 @@ var labelClasses2 = {
   md: "text-sm font-medium leading-5",
   sm: "text-xs font-medium leading-4"
 };
-var Chip = React78.forwardRef(
+var Chip = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -3103,7 +3142,7 @@ var Chip = React78.forwardRef(
       "className",
       "onClick"
     ]);
-    const [internalSelected, setInternalSelected] = React78.useState(false);
+    const [internalSelected, setInternalSelected] = React77.useState(false);
     const isControlled = controlledSelected !== void 0;
     const selected = isControlled ? controlledSelected : internalSelected;
     const handleClick = (e) => {
@@ -3192,7 +3231,7 @@ var badgeStyles = [
   "bg-sui-bg-state-soft border border-sui-border-darker rounded-xs",
   "text-sui-text-subtle text-xs font-medium leading-4"
 ].join(" ");
-var TooltipContent = React78.forwardRef((_a, ref) => {
+var TooltipContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "default", weight = "subtle", shortcut, sideOffset = 4, children } = _b, props = __objRest(_b, ["className", "variant", "weight", "shortcut", "sideOffset", "children"]);
   return /* @__PURE__ */ jsxs(
     TooltipPrimitive.Content,
@@ -3228,7 +3267,7 @@ var underlineTabsListVariants = cva(
     }
   }
 );
-var UnderlineTabsList = React78.forwardRef((_a, ref) => {
+var UnderlineTabsList = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, layout, size } = _b, props = __objRest(_b, ["className", "layout", "size"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.List,
@@ -3275,7 +3314,7 @@ var underlineTabItemVariants = cva(
     }
   }
 );
-var UnderlineTabItem = React78.forwardRef(
+var UnderlineTabItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3313,7 +3352,7 @@ var UnderlineTabItem = React78.forwardRef(
 );
 UnderlineTabItem.displayName = "UnderlineTabItem";
 var DEFAULT_LANGUAGES = ["React", "JavaScript", "TypeScript", "Next.js"];
-var CodeBlock = React78.forwardRef(
+var CodeBlock = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3343,10 +3382,10 @@ var CodeBlock = React78.forwardRef(
       "showLineNumbers"
     ]);
     var _a2, _b2, _c, _d, _e, _f;
-    const [activeTab, setActiveTab] = React78.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
-    const [copied, setCopied] = React78.useState(false);
+    const [activeTab, setActiveTab] = React77.useState((_b2 = (_a2 = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a2.label) != null ? _b2 : "");
+    const [copied, setCopied] = React77.useState(false);
     const activeCode = variant === "advanced" ? (_f = (_e = (_c = tabs == null ? void 0 : tabs.find((t) => t.label === activeTab)) == null ? void 0 : _c.code) != null ? _e : (_d = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _d.code) != null ? _f : "" : code;
-    const handleCopy = React78.useCallback(() => {
+    const handleCopy = React77.useCallback(() => {
       if (onCopy) {
         onCopy();
       } else {
@@ -3537,7 +3576,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React78.forwardRef((_a, ref) => {
+var DialogOverlay = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
@@ -3551,7 +3590,7 @@ var DialogOverlay = React78.forwardRef((_a, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React78.forwardRef((_a, ref) => {
+var DialogContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -3560,14 +3599,14 @@ var DialogContent = React78.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__ */ jsxs(DialogPrimitive.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__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs(DialogPrimitive.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__ */ jsx("i", { className: "ri-close-line text-base", "aria-hidden": true }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
         ]
@@ -3610,7 +3649,7 @@ var DialogFooter = (_a) => {
   );
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React78.forwardRef((_a, ref) => {
+var DialogTitle = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Title,
@@ -3624,25 +3663,25 @@ var DialogTitle = React78.forwardRef((_a, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React78.forwardRef((_a, ref) => {
+var DialogDescription = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-muted-foreground", className)
+      className: cn("text-sm text-sui-text-muted", className)
     }, props)
   );
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var Command = React78.forwardRef((_a, ref) => {
+var Command = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1,
     __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)
@@ -3651,18 +3690,18 @@ var Command = React78.forwardRef((_a, ref) => {
 Command.displayName = Command$1.displayName;
 var CommandDialog = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx(Dialog, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ 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__ */ jsx(Dialog, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-card max-w-[560px]", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-sui-text-hint [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_i]:h-4 [&_[cmdk-input-wrapper]_i]:w-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_i]:h-4 [&_[cmdk-item]_i]:w-4", children }) }) }));
 };
-var CommandInput = React78.forwardRef((_a, ref) => {
+var CommandInput = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-sui-border-default px-3", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ jsx("i", { className: "ri-search-line mr-2 shrink-0 text-icon-default-muted" }),
     /* @__PURE__ */ jsx(
       Command$1.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)
@@ -3670,7 +3709,7 @@ var CommandInput = React78.forwardRef((_a, ref) => {
   ] });
 });
 CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React78.forwardRef((_a, ref) => {
+var CommandList = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.List,
@@ -3681,47 +3720,50 @@ var CommandList = React78.forwardRef((_a, ref) => {
   );
 });
 CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React78.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React77.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   __spreadValues({
     ref,
-    className: "py-6 text-center text-sm"
+    className: "py-6 text-center text-sm text-sui-text-subtle"
   }, props)
 ));
 CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React78.forwardRef((_a, ref) => {
+var CommandGroup = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.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 = Command$1.Group.displayName;
-var CommandSeparator = React78.forwardRef((_a, ref) => {
+var CommandSeparator = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.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 = Command$1.Separator.displayName;
-var CommandItem = React78.forwardRef((_a, ref) => {
+var CommandItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Command$1.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)
@@ -3738,7 +3780,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)
@@ -3774,7 +3816,7 @@ var sliderHandleVariants = cva(
     }
   }
 );
-var SliderHandle = React78.forwardRef(
+var SliderHandle = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, state, value, showTooltip = false } = _b, props = __objRest(_b, ["className", "state", "value", "showTooltip"]);
     const isDisabled = state === "disabled";
@@ -3837,7 +3879,7 @@ function buildHistogramPath(data, width, height) {
   path += ` L ${width} ${height} Z`;
   return path;
 }
-var DataRangeSlider = React78.forwardRef(
+var DataRangeSlider = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3868,15 +3910,15 @@ var DataRangeSlider = React78.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React78.useState(null);
-    const [focusedHandle, setFocusedHandle] = React78.useState(null);
-    const clipId = React78.useId();
+    const trackRef = React77.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React77.useState(null);
+    const [focusedHandle, setFocusedHandle] = React77.useState(null);
+    const clipId = React77.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.useCallback(
+    const getValueFromPointer = React77.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -3887,7 +3929,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React78.useCallback(
+    const closestHandle = React77.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -3895,7 +3937,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React78.useCallback(
+    const updateValue = React77.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp(newVal, min, rangeMax);
@@ -3907,7 +3949,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React78.useCallback(
+    const handlePointerDown = React77.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -3919,7 +3961,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React78.useCallback(
+    const handlePointerMove = React77.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -3927,10 +3969,10 @@ var DataRangeSlider = React78.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React78.useCallback(() => {
+    const handlePointerUp = React77.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React78.useCallback(
+    const makeKeyHandler = React77.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -3958,7 +4000,7 @@ var DataRangeSlider = React78.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React78.useMemo(() => {
+    const tickLabels = React77.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -3969,7 +4011,7 @@ var DataRangeSlider = React78.forwardRef(
     }, [pointLabels, pointCount, min, max, fmt]);
     const chartWidth = 320;
     const chartHeight = 32;
-    const histogramPath = React78.useMemo(
+    const histogramPath = React77.useMemo(
       () => buildHistogramPath(data, chartWidth, chartHeight),
       [data]
     );
@@ -4116,7 +4158,7 @@ DataRangeSlider.displayName = "DataRangeSlider";
 var labelVariants = cva(
   "text-sm font-medium leading-5 text-sui-text-default"
 );
-var Label = React78.forwardRef((_a, ref) => {
+var Label = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, required, supportText, tailIcon, children } = _b, props = __objRest(_b, ["className", "required", "supportText", "tailIcon", "children"]);
   const hasTail = !!(supportText || tailIcon);
   return /* @__PURE__ */ jsxs(
@@ -4125,7 +4167,7 @@ var Label = React78.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
       )
@@ -4177,7 +4219,7 @@ var inputContainerVariants = cva(
     }
   }
 );
-var InputField = React78.forwardRef(
+var InputField = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4228,7 +4270,7 @@ var InputField = React78.forwardRef(
       "disabled",
       "id"
     ]);
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const inputId = id || generatedId;
     const captionId = `${inputId}-caption`;
     const hasError = !!error;
@@ -4408,7 +4450,7 @@ var InputField = React78.forwardRef(
   }
 );
 InputField.displayName = "InputField";
-var DataRangeSliderInput = React78.forwardRef(
+var DataRangeSliderInput = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4528,7 +4570,7 @@ var DataRangeSliderInput = React78.forwardRef(
 DataRangeSliderInput.displayName = "DataRangeSliderInput";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React78.forwardRef((_a, ref) => {
+var PopoverContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
@@ -4537,7 +4579,7 @@ var PopoverContent = React78.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)
@@ -4551,7 +4593,7 @@ function DatePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78.useState(false);
+  const [open, setOpen] = React77.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4592,7 +4634,7 @@ function DateRangePicker({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78.useState(false);
+  const [open, setOpen] = React77.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4643,7 +4685,7 @@ function DatePickerWithPresets({
   className,
   disabled
 }) {
-  const [open, setOpen] = React78.useState(false);
+  const [open, setOpen] = React77.useState(false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
@@ -4764,7 +4806,7 @@ function RequirementItem({ label, met }) {
     )
   ] });
 }
-var InputCaption = React78.forwardRef(
+var InputCaption = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "default",
@@ -4855,9 +4897,9 @@ var InputCaption = React78.forwardRef(
             className
           )
         }, props), {
-          children: React78.Children.map(children, (child) => {
-            if (!React78.isValidElement(child)) return child;
-            return React78.cloneElement(child, {
+          children: React77.Children.map(children, (child) => {
+            if (!React77.isValidElement(child)) return child;
+            return React77.cloneElement(child, {
               className: cn(
                 "flex-1",
                 child.props.className
@@ -5127,38 +5169,38 @@ function DatePickerInput({
   disabled = false,
   className
 }) {
-  const [calendarOpen, setCalendarOpen] = React78.useState(false);
+  const [calendarOpen, setCalendarOpen] = React77.useState(false);
   const hasError = !!error;
   const helperText = hasError ? error : caption;
   const singleSegments = dateToSegments(date);
-  const [singleDay, setSingleDay] = React78.useState(singleSegments.day);
-  const [singleMonth, setSingleMonth] = React78.useState(singleSegments.month);
-  const [singleYear, setSingleYear] = React78.useState(singleSegments.year);
+  const [singleDay, setSingleDay] = React77.useState(singleSegments.day);
+  const [singleMonth, setSingleMonth] = React77.useState(singleSegments.month);
+  const [singleYear, setSingleYear] = React77.useState(singleSegments.year);
   const startSegments = dateToSegments(dateRange == null ? void 0 : dateRange.from);
   const endSegments = dateToSegments(dateRange == null ? void 0 : dateRange.to);
-  const [startDay, setStartDay] = React78.useState(startSegments.day);
-  const [startMonth, setStartMonth] = React78.useState(startSegments.month);
-  const [startYear, setStartYear] = React78.useState(startSegments.year);
-  const [endDay, setEndDay] = React78.useState(endSegments.day);
-  const [endMonth, setEndMonth] = React78.useState(endSegments.month);
-  const [endYear, setEndYear] = React78.useState(endSegments.year);
-  const singleDayRef = React78.useRef(null);
-  const singleMonthRef = React78.useRef(null);
-  const singleYearRef = React78.useRef(null);
-  const startDayRef = React78.useRef(null);
-  const startMonthRef = React78.useRef(null);
-  const startYearRef = React78.useRef(null);
-  const endDayRef = React78.useRef(null);
-  const endMonthRef = React78.useRef(null);
-  const endYearRef = React78.useRef(null);
-  const calendarIconRef = React78.useRef(null);
-  React78.useEffect(() => {
+  const [startDay, setStartDay] = React77.useState(startSegments.day);
+  const [startMonth, setStartMonth] = React77.useState(startSegments.month);
+  const [startYear, setStartYear] = React77.useState(startSegments.year);
+  const [endDay, setEndDay] = React77.useState(endSegments.day);
+  const [endMonth, setEndMonth] = React77.useState(endSegments.month);
+  const [endYear, setEndYear] = React77.useState(endSegments.year);
+  const singleDayRef = React77.useRef(null);
+  const singleMonthRef = React77.useRef(null);
+  const singleYearRef = React77.useRef(null);
+  const startDayRef = React77.useRef(null);
+  const startMonthRef = React77.useRef(null);
+  const startYearRef = React77.useRef(null);
+  const endDayRef = React77.useRef(null);
+  const endMonthRef = React77.useRef(null);
+  const endYearRef = React77.useRef(null);
+  const calendarIconRef = React77.useRef(null);
+  React77.useEffect(() => {
     const s = dateToSegments(date);
     setSingleDay(s.day);
     setSingleMonth(s.month);
     setSingleYear(s.year);
   }, [date]);
-  React78.useEffect(() => {
+  React77.useEffect(() => {
     const s = dateToSegments(dateRange == null ? void 0 : dateRange.from);
     setStartDay(s.day);
     setStartMonth(s.month);
@@ -5168,7 +5210,7 @@ function DatePickerInput({
     setEndMonth(e.month);
     setEndYear(e.year);
   }, [dateRange]);
-  const handleSingleSegmentChange = React78.useCallback(
+  const handleSingleSegmentChange = React77.useCallback(
     (day, month, year) => {
       const d = segmentsToDate(day, month, year);
       if (day.length === 2 && month.length === 2 && year.length === 4) {
@@ -5179,7 +5221,7 @@ function DatePickerInput({
     },
     [onDateChange]
   );
-  const handleRangeSegmentChange = React78.useCallback(
+  const handleRangeSegmentChange = React77.useCallback(
     (sd, sm, sy, ed, em, ey) => {
       const from = segmentsToDate(sd, sm, sy);
       const to = segmentsToDate(ed, em, ey);
@@ -5254,7 +5296,7 @@ function DatePickerInput({
       setCalendarOpen(false);
     }
   };
-  const inputId = React78.useId();
+  const inputId = React77.useId();
   return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
     /* @__PURE__ */ jsxs(Popover, { open: calendarOpen, onOpenChange: setCalendarOpen, children: [
@@ -5440,7 +5482,7 @@ var lineVariants = cva("h-px min-w-0 flex-1 border-t border-sui-border-default",
     lineStyle: "solid"
   }
 });
-var Divider = React78.forwardRef(
+var Divider = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5515,7 +5557,7 @@ var Divider = React78.forwardRef(
   }
 );
 Divider.displayName = "Divider";
-var MenuSearchInput = React78.forwardRef(
+var MenuSearchInput = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5536,15 +5578,15 @@ var MenuSearchInput = React78.forwardRef(
       "defaultValue",
       "id"
     ]);
-    const internalRef = React78.useRef(null);
+    const internalRef = React77.useRef(null);
     const inputRef = ref || internalRef;
-    const [internalValue, setInternalValue] = React78.useState(
+    const [internalValue, setInternalValue] = React77.useState(
       defaultValue || ""
     );
     const isControlled = value !== void 0;
     const currentValue = isControlled ? String(value) : internalValue;
     const hasValue = currentValue.length > 0;
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const inputId = id || generatedId;
     const handleChange = (e) => {
       var _a2;
@@ -5563,7 +5605,7 @@ var MenuSearchInput = React78.forwardRef(
         (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
       }
     };
-    const [isFocused, setIsFocused] = React78.useState(false);
+    const [isFocused, setIsFocused] = React77.useState(false);
     const showShortcut = !!shortcutKey && !hasValue && !isFocused && !disabled;
     const handleFocus = (e) => {
       var _a2;
@@ -5675,7 +5717,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React78.forwardRef((_a, ref) => {
+var DropdownMenuSubTrigger = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.SubTrigger,
@@ -5693,13 +5735,13 @@ var DropdownMenuSubTrigger = React78.forwardRef((_a, ref) => {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })
+        /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line ml-auto text-base", "aria-hidden": true })
       ]
     })
   );
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React78.forwardRef((_a, ref) => {
+var DropdownMenuSubContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.SubContent,
@@ -5714,7 +5756,7 @@ var DropdownMenuSubContent = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React78.forwardRef((_a, ref) => {
+var DropdownMenuContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4, search, searchValue, onSearchChange, onSearchClear, searchPlaceholder = "Search", children } = _b, props = __objRest(_b, ["className", "sideOffset", "search", "searchValue", "onSearchChange", "onSearchClear", "searchPlaceholder", "children"]);
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
@@ -5752,7 +5794,7 @@ var DropdownMenuContent = React78.forwardRef((_a, ref) => {
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React78.forwardRef((_a, ref) => {
+var DropdownMenuItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, variant = "default" } = _b, props = __objRest(_b, ["className", "inset", "variant"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
@@ -5773,7 +5815,7 @@ var DropdownMenuItem = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React78.forwardRef((_a, ref) => {
+var DropdownMenuCheckboxItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.CheckboxItem,
@@ -5788,14 +5830,14 @@ var DropdownMenuCheckboxItem = React78.forwardRef((_a, ref) => {
       checked
     }, props), {
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("i", { className: "ri-check-line text-base", "aria-hidden": true }) }) }),
         children
       ]
     })
   );
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React78.forwardRef((_a, ref) => {
+var DropdownMenuRadioItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.RadioItem,
@@ -5809,14 +5851,14 @@ var DropdownMenuRadioItem = React78.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("i", { className: "ri-circle-fill text-[8px] leading-none", "aria-hidden": true }) }) }),
         children
       ]
     })
   );
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React78.forwardRef((_a, ref) => {
+var DropdownMenuLabel = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Label,
@@ -5831,7 +5873,7 @@ var DropdownMenuLabel = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React78.forwardRef((_a, ref) => {
+var DropdownMenuSeparator = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Separator,
@@ -5860,7 +5902,7 @@ var DropdownMenuShortcut = (_a) => {
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var DropdownMenuCaption = React78.forwardRef((_a, ref) => {
+var DropdownMenuCaption = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "p",
@@ -5875,7 +5917,7 @@ var DropdownMenuCaption = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuCaption.displayName = "DropdownMenuCaption";
-var DropdownMenuUserbar = React78.forwardRef((_a, ref) => {
+var DropdownMenuUserbar = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, name, email, avatar, badge } = _b, props = __objRest(_b, ["className", "name", "email", "avatar", "badge"]);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -5900,7 +5942,7 @@ var DropdownMenuUserbar = React78.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuUserbar.displayName = "DropdownMenuUserbar";
-var DropdownMenuLargeItem = React78.forwardRef((_a, ref) => {
+var DropdownMenuLargeItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, label, caption, icon, badge, tailIcon } = _b, props = __objRest(_b, ["className", "label", "caption", "icon", "badge", "tailIcon"]);
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.Item,
@@ -5941,7 +5983,7 @@ var emptyStateVariants = cva(
     }
   }
 );
-var EmptyState = React78.forwardRef(
+var EmptyState = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6006,7 +6048,7 @@ function EmptyStateText({
     /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-sui-text-muted w-full", children: description })
   ] });
 }
-var FileUploadArea = React78.forwardRef(
+var FileUploadArea = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6031,8 +6073,8 @@ var FileUploadArea = React78.forwardRef(
       "onDrop",
       "onDragOver"
     ]);
-    const [isDragOver, setIsDragOver] = React78.useState(false);
-    const handleDragOver = React78.useCallback(
+    const [isDragOver, setIsDragOver] = React77.useState(false);
+    const handleDragOver = React77.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6041,10 +6083,10 @@ var FileUploadArea = React78.forwardRef(
       },
       [disabled, onDragOver]
     );
-    const handleDragLeave = React78.useCallback(() => {
+    const handleDragLeave = React77.useCallback(() => {
       setIsDragOver(false);
     }, []);
-    const handleDrop = React78.useCallback(
+    const handleDrop = React77.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -6053,11 +6095,11 @@ var FileUploadArea = React78.forwardRef(
       },
       [disabled, onDrop]
     );
-    const handleClick = React78.useCallback(() => {
+    const handleClick = React77.useCallback(() => {
       if (disabled) return;
       onClick == null ? void 0 : onClick();
     }, [disabled, onClick]);
-    const handleKeyDown = React78.useCallback(
+    const handleKeyDown = React77.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -6173,7 +6215,7 @@ var progressBarVariants = cva(
   }
 );
 var SEGMENT_COUNT = 10;
-var ProgressBar = React78.forwardRef(
+var ProgressBar = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6195,7 +6237,7 @@ var ProgressBar = React78.forwardRef(
     const clampedValue = Math.min(100, Math.max(0, value != null ? value : 0));
     const displayPercentage = `${Math.round(clampedValue)}%`;
     const filledSegments = Math.round(clampedValue / 100 * SEGMENT_COUNT);
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const labelId = `${generatedId}-label`;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -6281,7 +6323,7 @@ var statusLabel = {
   uploading: "Uploading...",
   failed: "Error"
 };
-var FileUploadCard = React78.forwardRef(
+var FileUploadCard = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6493,7 +6535,7 @@ var lineColorMap = {
   warning: "bg-sui-bg-basic-orange-accent",
   error: "bg-sui-bg-basic-red-accent"
 };
-var InlineTips = React78.forwardRef(
+var InlineTips = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -6514,7 +6556,7 @@ var InlineTips = React78.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         className: cn(inlineTipsVariants({ variant, colorStyle, className })),
-        role: "status"
+        role: variant === "error" ? "alert" : "status"
       }, props), {
         children: [
           /* @__PURE__ */ jsx(
@@ -6595,7 +6637,7 @@ function validateFile(file, accept, maxSize) {
   }
   return null;
 }
-var FileUpload = React78.forwardRef(
+var FileUpload = React77.forwardRef(
   ({
     files = [],
     onFilesAdded,
@@ -6616,10 +6658,10 @@ var FileUpload = React78.forwardRef(
     icon,
     className
   }, ref) => {
-    const inputRef = React78.useRef(null);
-    const [errors, setErrors] = React78.useState([]);
-    const thumbnailCache = React78.useRef(/* @__PURE__ */ new Map());
-    React78.useEffect(() => {
+    const inputRef = React77.useRef(null);
+    const [errors, setErrors] = React77.useState([]);
+    const thumbnailCache = React77.useRef(/* @__PURE__ */ new Map());
+    React77.useEffect(() => {
       if (!autoPreview) return;
       const cache = thumbnailCache.current;
       for (const f of files) {
@@ -6636,7 +6678,7 @@ var FileUpload = React78.forwardRef(
         }
       }
     }, [files, autoPreview]);
-    React78.useEffect(() => {
+    React77.useEffect(() => {
       const cache = thumbnailCache.current;
       return () => {
         for (const url of cache.values()) {
@@ -6646,7 +6688,7 @@ var FileUpload = React78.forwardRef(
       };
     }, []);
     const resolvedDescription = description != null ? description : generateDescription(accept, maxSize, maxFiles);
-    const processFiles = React78.useCallback(
+    const processFiles = React77.useCallback(
       (fileList) => {
         const newFiles = Array.from(fileList);
         const validationErrors = [];
@@ -6674,11 +6716,11 @@ var FileUpload = React78.forwardRef(
       },
       [files.length, maxFiles, accept, maxSize, onFilesAdded]
     );
-    const handleClick = React78.useCallback(() => {
+    const handleClick = React77.useCallback(() => {
       var _a;
       (_a = inputRef.current) == null ? void 0 : _a.click();
     }, []);
-    const handleInputChange = React78.useCallback(
+    const handleInputChange = React77.useCallback(
       (e) => {
         if (e.target.files && e.target.files.length > 0) {
           processFiles(e.target.files);
@@ -6687,7 +6729,7 @@ var FileUpload = React78.forwardRef(
       },
       [processFiles]
     );
-    const handleDrop = React78.useCallback(
+    const handleDrop = React77.useCallback(
       (e) => {
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
           processFiles(e.dataTransfer.files);
@@ -6695,10 +6737,10 @@ var FileUpload = React78.forwardRef(
       },
       [processFiles]
     );
-    const dismissError = React78.useCallback((index) => {
+    const dismissError = React77.useCallback((index) => {
       setErrors((prev) => prev.filter((_, i) => i !== index));
     }, []);
-    const handlePaste = React78.useCallback(
+    const handlePaste = React77.useCallback(
       (e) => {
         var _a;
         if (disabled || !pasteEnabled) return;
@@ -6719,7 +6761,7 @@ var FileUpload = React78.forwardRef(
       },
       [disabled, pasteEnabled, processFiles]
     );
-    const handleCancel = React78.useCallback(
+    const handleCancel = React77.useCallback(
       (id) => {
         const uploadFile = files.find((f) => f.id === id);
         if (uploadFile == null ? void 0 : uploadFile.abortController) {
@@ -6810,99 +6852,6 @@ var FileUpload = React78.forwardRef(
   }
 );
 FileUpload.displayName = "FileUpload";
-var Form = FormProvider;
-var FormFieldContext = React78.createContext(null);
-var FormField = (_a) => {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, __spreadValues({}, props)) });
-};
-var useFormField = () => {
-  const fieldContext = React78.useContext(FormFieldContext);
-  const itemContext = React78.useContext(FormItemContext);
-  const { getFieldState, formState } = 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.createContext(null);
-var FormItem = React78.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const id = React78.useId();
-  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", __spreadValues({ ref, className: cn("space-y-2", className) }, props)) });
-});
-FormItem.displayName = "FormItem";
-var FormLabel = React78.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    Label,
-    __spreadValues({
-      ref,
-      className: cn(error && "text-destructive", className),
-      htmlFor: formItemId
-    }, props)
-  );
-});
-FormLabel.displayName = "FormLabel";
-var FormControl = React78.forwardRef((_a, ref) => {
-  var props = __objRest(_a, []);
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    Slot,
-    __spreadValues({
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error
-    }, props)
-  );
-});
-FormControl.displayName = "FormControl";
-var FormDescription = React78.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    "p",
-    __spreadValues({
-      ref,
-      id: formDescriptionId,
-      className: cn("text-sm text-muted-foreground", className)
-    }, props)
-  );
-});
-FormDescription.displayName = "FormDescription";
-var FormMessage = React78.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__ */ jsx(
-    "p",
-    __spreadProps(__spreadValues({
-      ref,
-      id: formMessageId,
-      className: cn("text-sm font-medium text-destructive", className)
-    }, props), {
-      children: body
-    })
-  );
-});
-FormMessage.displayName = "FormMessage";
 var gridTableHeaderItemVariants = cva(
   "min-h-8 min-w-9 rounded-xs",
   {
@@ -6929,7 +6878,7 @@ var ariaSortMap = {
   desc: "descending",
   none: "none"
 };
-var GridTableHeaderItem = React78.forwardRef(
+var GridTableHeaderItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7031,7 +6980,7 @@ var gridTableRowVariants = cva(
     }
   }
 );
-var GridTableRow = React78.forwardRef(
+var GridTableRow = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsx(
@@ -7047,7 +6996,7 @@ var GridTableRow = React78.forwardRef(
   }
 );
 GridTableRow.displayName = "GridTableRow";
-var GridTableCell = React78.forwardRef(
+var GridTableCell = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, bordered = true, children } = _b, props = __objRest(_b, ["className", "bordered", "children"]);
     return /* @__PURE__ */ jsx(
@@ -7091,7 +7040,7 @@ var gridTableSlotItemVariants = cva(
     }
   }
 );
-var GridTableSlotItem = React78.forwardRef(
+var GridTableSlotItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7238,7 +7187,7 @@ var stepperNumberVariants = cva(
     }
   }
 );
-var StepperNumber = React78.forwardRef(
+var StepperNumber = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, size, color, number = "1" } = _b, props = __objRest(_b, ["className", "size", "color", "number"]);
     return /* @__PURE__ */ jsxs(
@@ -7277,7 +7226,7 @@ var stepperIconVariants = cva(
     }
   }
 );
-var StepperIcon = React78.forwardRef(
+var StepperIcon = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "dot-large", icon } = _b, props = __objRest(_b, ["className", "variant", "icon"]);
     return /* @__PURE__ */ jsxs(
@@ -7331,7 +7280,7 @@ function ConnectorLine({ success }) {
     }
   );
 }
-var HorizontalStepperItem = React78.forwardRef(
+var HorizontalStepperItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7456,7 +7405,7 @@ var HorizontalStepperItem = React78.forwardRef(
   }
 );
 HorizontalStepperItem.displayName = "HorizontalStepperItem";
-var HorizontalStepper = React78.forwardRef(
+var HorizontalStepper = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7531,7 +7480,7 @@ var HorizontalStepper = React78.forwardRef(
   }
 );
 HorizontalStepper.displayName = "HorizontalStepper";
-var Input = React78.forwardRef(
+var Input = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
     return /* @__PURE__ */ jsx(
@@ -7539,7 +7488,7 @@ var Input = React78.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
@@ -7622,7 +7571,7 @@ var inputButtonVariants = 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.forwardRef(
+var InputButton = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -7756,7 +7705,7 @@ var InputButton = React78.forwardRef(
   }
 );
 InputButton.displayName = "InputButton";
-var InputStepper = React78.forwardRef(
+var InputStepper = React77.forwardRef(
   ({ onIncrement, onDecrement, disabled, className }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -7813,7 +7762,7 @@ var InputStepper = React78.forwardRef(
   }
 );
 InputStepper.displayName = "InputStepper";
-var NavigationMenu = React78.forwardRef((_a, ref) => {
+var NavigationMenu = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Root,
@@ -7832,7 +7781,7 @@ var NavigationMenu = React78.forwardRef((_a, ref) => {
   );
 });
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React78.forwardRef((_a, ref) => {
+var NavigationMenuList = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.List,
@@ -7848,9 +7797,9 @@ var NavigationMenuList = React78.forwardRef((_a, ref) => {
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = 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.forwardRef((_a, ref) => {
+var NavigationMenuTrigger = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Trigger,
@@ -7862,9 +7811,9 @@ var NavigationMenuTrigger = React78.forwardRef((_a, ref) => {
         children,
         " ",
         /* @__PURE__ */ jsx(
-          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"
           }
         )
@@ -7873,14 +7822,14 @@ var NavigationMenuTrigger = React78.forwardRef((_a, ref) => {
   );
 });
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React78.forwardRef((_a, ref) => {
+var NavigationMenuContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.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)
@@ -7888,13 +7837,13 @@ var NavigationMenuContent = React78.forwardRef((_a, ref) => {
 });
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React78.forwardRef((_a, ref) => {
+var NavigationMenuViewport = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Viewport,
     __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
@@ -7902,7 +7851,7 @@ var NavigationMenuViewport = React78.forwardRef((_a, ref) => {
   ) });
 });
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React78.forwardRef((_a, ref) => {
+var NavigationMenuIndicator = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Indicator,
@@ -7913,7 +7862,7 @@ var NavigationMenuIndicator = React78.forwardRef((_a, ref) => {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-sui-border-default shadow-card" })
     })
   );
 });
@@ -7973,7 +7922,7 @@ var activeDotClasses = [
   "bg-sui-bg-basic-blue-accent",
   "hover:bg-sui-bg-basic-blue-accent"
 ].join(" ");
-var PageItem = React78.forwardRef(
+var PageItem = React77.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__ */ jsx(
@@ -8007,7 +7956,7 @@ var Pagination = (_a) => {
   );
 };
 Pagination.displayName = "Pagination";
-var PaginationContent = React78.forwardRef((_a, ref) => {
+var PaginationContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -8018,7 +7967,7 @@ var PaginationContent = React78.forwardRef((_a, ref) => {
   );
 });
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React78.forwardRef((_a, ref) => {
+var PaginationItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("li", __spreadValues({ ref, className: cn("", className) }, props));
 });
@@ -8062,7 +8011,7 @@ var PaginationPrevious = (_a) => {
       className: cn("gap-1 pl-2.5", className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("i", { className: "ri-arrow-left-s-line text-base", "aria-hidden": true }),
         /* @__PURE__ */ jsx("span", { children: "Previous" })
       ]
     })
@@ -8084,7 +8033,7 @@ var PaginationNext = (_a) => {
     }, props), {
       children: [
         /* @__PURE__ */ jsx("span", { children: "Next" }),
-        /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line text-base", "aria-hidden": true })
       ]
     })
   );
@@ -8103,7 +8052,7 @@ var PaginationEllipsis = (_a) => {
       className: cn("flex h-9 w-9 items-center justify-center", className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("i", { className: "ri-more-line text-base", "aria-hidden": true }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
       ]
     })
@@ -8139,7 +8088,7 @@ function getPageRange(currentPage, totalPages, maxVisible) {
   }
   return pages;
 }
-var Paginator = React78.forwardRef(
+var Paginator = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8319,14 +8268,14 @@ var Paginator = React78.forwardRef(
   }
 );
 Paginator.displayName = "Paginator";
-var Progress = React78.forwardRef((_a, ref) => {
+var Progress = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
   return /* @__PURE__ */ jsx(
     ProgressPrimitive2.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), {
@@ -8369,7 +8318,7 @@ var arcStrokeVarMap = {
   success: "var(--text-success)",
   failed: "var(--text-destructive)"
 };
-var RadialProgressBar = React78.forwardRef(
+var RadialProgressBar = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -8488,7 +8437,7 @@ var RadialProgressBar = React78.forwardRef(
   }
 );
 RadialProgressBar.displayName = "RadialProgressBar";
-var RadioGroup2 = React78.forwardRef((_a, ref) => {
+var RadioGroup2 = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
@@ -8548,7 +8497,7 @@ var radioButtonVariants = cva(
     }
   }
 );
-var RadioButton = React78.forwardRef((_a, ref) => {
+var RadioButton = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxs(
     RadioGroupPrimitive.Item,
@@ -8588,7 +8537,7 @@ var RadioButton = React78.forwardRef((_a, ref) => {
   );
 });
 RadioButton.displayName = "RadioButton";
-var RadioCardGroup = React78.forwardRef((_a, ref) => {
+var RadioCardGroup = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
@@ -8637,7 +8586,7 @@ var radioButtonCardVariants = cva(
     }
   }
 );
-var RadioButtonCard = React78.forwardRef(
+var RadioButtonCard = React77.forwardRef(
   ({
     title,
     description,
@@ -8650,7 +8599,7 @@ var RadioButtonCard = React78.forwardRef(
     disabled = false,
     className
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const titleId = `radio-card-title-${generatedId}`;
     const descriptionId = `radio-card-desc-${generatedId}`;
     const isHorizontal = layout === "horizontal";
@@ -8747,9 +8696,9 @@ var RadioButtonCard = React78.forwardRef(
   }
 );
 RadioButtonCard.displayName = "RadioButtonCard";
-var RadioButtonList = React78.forwardRef(
+var RadioButtonList = React77.forwardRef(
   ({ className, divider = true, value, defaultValue, onValueChange, disabled, children }, ref) => {
-    const items = React78.Children.toArray(children);
+    const items = React77.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       RadioGroup2,
       {
@@ -8793,7 +8742,7 @@ var radioButtonWithTextVariants = cva(
     }
   }
 );
-var RadioButtonWithText = React78.forwardRef(
+var RadioButtonWithText = React77.forwardRef(
   ({
     label,
     description,
@@ -8804,7 +8753,7 @@ var RadioButtonWithText = React78.forwardRef(
     className,
     id
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const radioId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -8859,7 +8808,7 @@ var RadioButtonWithText = React78.forwardRef(
   }
 );
 RadioButtonWithText.displayName = "RadioButtonWithText";
-var ScrollArea = React78.forwardRef((_a, ref) => {
+var ScrollArea = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
@@ -8876,7 +8825,7 @@ var ScrollArea = React78.forwardRef((_a, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React78.forwardRef((_a, ref) => {
+var ScrollBar = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
   return /* @__PURE__ */ jsx(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
@@ -8898,30 +8847,30 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React78.forwardRef((_a, ref) => {
+var SelectTrigger = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.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__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-icon-default-muted" }) })
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line text-base text-icon-default-muted", "aria-hidden": true }) })
       ]
     })
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React78.forwardRef((_a, ref) => {
+var SelectScrollUpButton = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollUpButton,
@@ -8932,12 +8881,12 @@ var SelectScrollUpButton = React78.forwardRef((_a, ref) => {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-icon-default-muted" })
+      children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-up-s-line text-base text-icon-default-muted", "aria-hidden": true })
     })
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React78.forwardRef((_a, ref) => {
+var SelectScrollDownButton = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollDownButton,
@@ -8948,12 +8897,12 @@ var SelectScrollDownButton = React78.forwardRef((_a, ref) => {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-icon-default-muted" })
+      children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line text-base text-icon-default-muted", "aria-hidden": true })
     })
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React78.forwardRef((_a, ref) => {
+var SelectContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     SelectPrimitive.Content,
@@ -8986,7 +8935,7 @@ var SelectContent = React78.forwardRef((_a, ref) => {
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React78.forwardRef((_a, ref) => {
+var SelectLabel = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Label,
@@ -9000,7 +8949,7 @@ var SelectLabel = React78.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React78.forwardRef((_a, ref) => {
+var SelectItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Item,
@@ -9018,14 +8967,14 @@ var SelectItem = React78.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("i", { className: "ri-check-line text-base", "aria-hidden": true }) }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx("span", { className: "pl-5", children }) })
       ]
     })
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React78.forwardRef((_a, ref) => {
+var SelectSeparator = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Separator,
@@ -9036,7 +8985,7 @@ var SelectSeparator = React78.forwardRef((_a, ref) => {
   );
 });
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var SelectMenu = React78.forwardRef(
+var SelectMenu = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9067,19 +9016,19 @@ var SelectMenu = React78.forwardRef(
     ]);
     var _a2;
     const indicator = selectType === "checkbox" ? "checkbox" : selectType === "radio" ? "radio" : selectType === "default" ? "checkmark" : "none";
-    const hasChildren = React78.Children.count(children) > 0;
-    const generatedId = React78.useId();
+    const hasChildren = React77.Children.count(children) > 0;
+    const generatedId = React77.useId();
     const listId = `${generatedId}-list`;
-    const listRef = React78.useRef(null);
-    const [activeIndex, setActiveIndex] = React78.useState(-1);
+    const listRef = React77.useRef(null);
+    const [activeIndex, setActiveIndex] = React77.useState(-1);
     const activeItemId = activeIndex >= 0 ? `${listId}-item-${activeIndex}` : void 0;
-    const getItems = React78.useCallback(() => {
+    const getItems = React77.useCallback(() => {
       if (!listRef.current) return [];
       return Array.from(
         listRef.current.querySelectorAll('[role="option"]')
       );
     }, []);
-    const handleKeyDown = React78.useCallback(
+    const handleKeyDown = React77.useCallback(
       (e) => {
         var _a3;
         const items = getItems();
@@ -9162,8 +9111,8 @@ var SelectMenu = React78.forwardRef(
                 "focus-visible:outline-none"
               ),
               style: listMaxHeight ? { maxHeight: listMaxHeight } : void 0,
-              children: hasChildren ? /* @__PURE__ */ jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React78.Children.map(children, (child, index) => {
-                if (React78.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
+              children: hasChildren ? /* @__PURE__ */ jsx("div", { className: "flex flex-col px-1", role: "presentation", children: React77.Children.map(children, (child, index) => {
+                if (React77.isValidElement(child) && child.type.displayName === "SelectMenuItem") {
                   const itemProps = child.props;
                   const overrides = {};
                   if (indicator !== "none" && itemProps.indicator === void 0) {
@@ -9180,7 +9129,7 @@ var SelectMenu = React78.forwardRef(
                     overrides["data-active"] = "true";
                   }
                   if (Object.keys(overrides).length > 0) {
-                    return React78.cloneElement(
+                    return React77.cloneElement(
                       child,
                       overrides
                     );
@@ -9205,7 +9154,7 @@ var SelectMenu = React78.forwardRef(
   }
 );
 SelectMenu.displayName = "SelectMenu";
-var SelectMenuFooterButton = React78.forwardRef((_a, ref) => {
+var SelectMenuFooterButton = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, icon = "ri-add-line", children = "Add new", disabled } = _b, props = __objRest(_b, ["className", "icon", "children", "disabled"]);
   return /* @__PURE__ */ jsxs(
     "button",
@@ -9248,7 +9197,7 @@ var SelectMenuFooterButton = React78.forwardRef((_a, ref) => {
   );
 });
 SelectMenuFooterButton.displayName = "SelectMenuFooterButton";
-var SelectInput = React78.forwardRef(
+var SelectInput = React77.forwardRef(
   ({
     label,
     required,
@@ -9280,10 +9229,10 @@ var SelectInput = React78.forwardRef(
     footer,
     className
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React78.useState(false);
+    const [internalOpen, setInternalOpen] = React77.useState(false);
     const isControlled = controlledOpen !== void 0;
     const isOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = React78.useCallback(
+    const handleOpenChange = React77.useCallback(
       (next) => {
         if (disabled) return;
         if (!isControlled) setInternalOpen(next);
@@ -9291,7 +9240,7 @@ var SelectInput = React78.forwardRef(
       },
       [disabled, isControlled, onOpenChange]
     );
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const hasError = !!error;
     const helperText = hasError ? error : caption;
     const hasTags = tags && tags.length > 0;
@@ -9317,6 +9266,7 @@ var SelectInput = React78.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,
@@ -9370,7 +9320,7 @@ var SelectInput = React78.forwardRef(
                   children: leadIcon
                 }
               ) : null,
-              hasTags ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(React78.Fragment, { children: [
+              hasTags ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(React77.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -9432,6 +9382,7 @@ var SelectInput = React78.forwardRef(
         /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
           PopoverPrimitive.Content,
           __spreadProps(__spreadValues({
+            id: `${generatedId}-listbox`,
             align: "start",
             sideOffset: 6,
             className: cn(
@@ -9484,7 +9435,7 @@ var SelectInput = React78.forwardRef(
   }
 );
 SelectInput.displayName = "SelectInput";
-var SelectMenuItem = React78.forwardRef(
+var SelectMenuItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9531,7 +9482,16 @@ var SelectMenuItem = React78.forwardRef(
       }, props), {
         children: [
           /* @__PURE__ */ jsxs("span", { className: "flex size-5 shrink-0 items-center justify-center", children: [
-            indicator === "checkmark" && selected && /* @__PURE__ */ jsx(Check, { className: cn("size-4", disabled ? "text-icon-default-disabled" : "text-icon-default-subtle") }),
+            indicator === "checkmark" && selected && /* @__PURE__ */ 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__ */ jsx(
               "span",
               {
@@ -9544,13 +9504,13 @@ var SelectMenuItem = React78.forwardRef(
                   disabled && "border-sui-border-default bg-[var(--bg-checkbox-disabled)] !shadow-none"
                 ),
                 children: selected && /* @__PURE__ */ jsx(
-                  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
+                    )
                   }
                 )
               }
@@ -9639,7 +9599,7 @@ var SelectMenuItem = React78.forwardRef(
   }
 );
 SelectMenuItem.displayName = "SelectMenuItem";
-var SelectMenuLabel = React78.forwardRef(
+var SelectMenuLabel = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, caption, children } = _b, props = __objRest(_b, ["className", "caption", "children"]);
     return /* @__PURE__ */ jsxs(
@@ -9661,7 +9621,7 @@ var SelectMenuLabel = React78.forwardRef(
   }
 );
 SelectMenuLabel.displayName = "SelectMenuLabel";
-var SelectMenuDescription = React78.forwardRef((_a, ref) => {
+var SelectMenuDescription = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "p",
@@ -9675,7 +9635,7 @@ var SelectMenuDescription = React78.forwardRef((_a, ref) => {
   );
 });
 SelectMenuDescription.displayName = "SelectMenuDescription";
-var SelectMenuSeparator = React78.forwardRef((_a, ref) => {
+var SelectMenuSeparator = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -9687,7 +9647,7 @@ var SelectMenuSeparator = React78.forwardRef((_a, ref) => {
   );
 });
 SelectMenuSeparator.displayName = "SelectMenuSeparator";
-var SelectMenuLargeItem = React78.forwardRef(
+var SelectMenuLargeItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -9758,10 +9718,11 @@ var SelectMenuLargeItem = React78.forwardRef(
             )
           ] }),
           selected && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
-            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"
               )
             }
@@ -9782,7 +9743,7 @@ var SelectMenuLargeItem = React78.forwardRef(
   }
 );
 SelectMenuLargeItem.displayName = "SelectMenuLargeItem";
-var Separator3 = React78.forwardRef(
+var Separator3 = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
     return /* @__PURE__ */ jsx(
@@ -9805,7 +9766,7 @@ var Sheet = DialogPrimitive.Root;
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
 var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React78.forwardRef((_a, ref) => {
+var SheetOverlay = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
@@ -9821,7 +9782,7 @@ var SheetOverlay = React78.forwardRef((_a, ref) => {
 });
 SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var sheetVariants = 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: {
@@ -9836,7 +9797,7 @@ var sheetVariants = cva(
     }
   }
 );
-var SheetContent = React78.forwardRef((_a, ref) => {
+var SheetContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { side = "right", className, children } = _b, props = __objRest(_b, ["side", "className", "children"]);
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
@@ -9848,8 +9809,8 @@ var SheetContent = React78.forwardRef((_a, ref) => {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsxs(DialogPrimitive.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__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs(DialogPrimitive.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__ */ jsx("i", { className: "ri-close-line text-base", "aria-hidden": true }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
         ]
@@ -9892,32 +9853,32 @@ var SheetFooter = (_a) => {
   );
 };
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React78.forwardRef((_a, ref) => {
+var SheetTitle = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.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.Title.displayName;
-var SheetDescription = React78.forwardRef((_a, ref) => {
+var SheetDescription = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Description,
     __spreadValues({
       ref,
-      className: cn("text-sm text-muted-foreground", className)
+      className: cn("text-sm text-sui-text-muted", className)
     }, props)
   );
 });
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React78.useState(void 0);
-  React78.useEffect(() => {
+  const [isMobile, setIsMobile] = React77.useState(void 0);
+  React77.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -9937,7 +9898,7 @@ function Skeleton(_a) {
   return /* @__PURE__ */ jsx(
     "div",
     __spreadValues({
-      className: cn("animate-pulse rounded-md bg-muted", className)
+      className: cn("animate-pulse rounded-md bg-sui-bg-subtle", className)
     }, props)
   );
 }
@@ -9947,15 +9908,15 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React78.createContext(null);
+var SidebarContext = React77.createContext(null);
 function useSidebar() {
-  const context = React78.useContext(SidebarContext);
+  const context = React77.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React78.forwardRef(
+var SidebarProvider = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       defaultOpen = true,
@@ -9973,10 +9934,10 @@ var SidebarProvider = React78.forwardRef(
       "children"
     ]);
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React78.useState(false);
-    const [_open, _setOpen] = React78.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React77.useState(false);
+    const [_open, _setOpen] = React77.useState(defaultOpen);
     const open = openProp != null ? openProp : _open;
-    const setOpen = React78.useCallback(
+    const setOpen = React77.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -9988,10 +9949,10 @@ var SidebarProvider = React78.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React78.useCallback(() => {
+    const toggleSidebar = React77.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React78.useEffect(() => {
+    React77.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -10002,7 +9963,7 @@ var SidebarProvider = React78.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React78.useMemo(
+    const contextValue = React77.useMemo(
       () => ({
         state,
         open,
@@ -10033,7 +9994,7 @@ var SidebarProvider = React78.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React78.forwardRef(
+var Sidebar = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       side = "left",
@@ -10132,7 +10093,7 @@ var Sidebar = React78.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React78.forwardRef((_a, ref) => {
+var SidebarTrigger = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
@@ -10150,14 +10111,14 @@ var SidebarTrigger = React78.forwardRef((_a, ref) => {
       }
     }, props), {
       children: [
-        /* @__PURE__ */ jsx(PanelLeft, {}),
+        /* @__PURE__ */ jsx("i", { className: "ri-layout-left-line text-base", "aria-hidden": true }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     })
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React78.forwardRef((_a, ref) => {
+var SidebarRail = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsx(
@@ -10182,14 +10143,14 @@ var SidebarRail = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React78.forwardRef((_a, ref) => {
+var SidebarInset = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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
       )
@@ -10197,7 +10158,7 @@ var SidebarInset = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React78.forwardRef((_a, ref) => {
+var SidebarInput = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Input,
@@ -10205,14 +10166,14 @@ var SidebarInput = React78.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.forwardRef((_a, ref) => {
+var SidebarHeader = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10224,7 +10185,7 @@ var SidebarHeader = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React78.forwardRef((_a, ref) => {
+var SidebarFooter = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10236,7 +10197,7 @@ var SidebarFooter = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React78.forwardRef((_a, ref) => {
+var SidebarSeparator = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     Separator3,
@@ -10248,7 +10209,7 @@ var SidebarSeparator = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React78.forwardRef((_a, ref) => {
+var SidebarContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10263,7 +10224,7 @@ var SidebarContent = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React78.forwardRef((_a, ref) => {
+var SidebarGroup = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10275,7 +10236,7 @@ var SidebarGroup = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React78.forwardRef((_a, ref) => {
+var SidebarGroupLabel = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ jsx(
@@ -10292,7 +10253,7 @@ var SidebarGroupLabel = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React78.forwardRef((_a, ref) => {
+var SidebarGroupAction = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false } = _b, props = __objRest(_b, ["className", "asChild"]);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
@@ -10311,7 +10272,7 @@ var SidebarGroupAction = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React78.forwardRef((_a, ref) => {
+var SidebarGroupContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10323,7 +10284,7 @@ var SidebarGroupContent = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React78.forwardRef((_a, ref) => {
+var SidebarMenu = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -10335,7 +10296,7 @@ var SidebarMenu = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React78.forwardRef((_a, ref) => {
+var SidebarMenuItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "li",
@@ -10353,7 +10314,7 @@ var sidebarMenuButtonVariants = 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",
@@ -10367,7 +10328,7 @@ var sidebarMenuButtonVariants = cva(
     }
   }
 );
-var SidebarMenuButton = React78.forwardRef(
+var SidebarMenuButton = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       asChild = false,
@@ -10418,7 +10379,7 @@ var SidebarMenuButton = React78.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React78.forwardRef((_a, ref) => {
+var SidebarMenuAction = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, asChild = false, showOnHover = false } = _b, props = __objRest(_b, ["className", "asChild", "showOnHover"]);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
@@ -10441,7 +10402,7 @@ var SidebarMenuAction = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React78.forwardRef((_a, ref) => {
+var SidebarMenuBadge = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -10461,9 +10422,9 @@ var SidebarMenuBadge = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React78.forwardRef((_a, ref) => {
+var SidebarMenuSkeleton = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, showIcon = false } = _b, props = __objRest(_b, ["className", "showIcon"]);
-  const width = React78.useMemo(() => {
+  const width = React77.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -10496,7 +10457,7 @@ var SidebarMenuSkeleton = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React78.forwardRef((_a, ref) => {
+var SidebarMenuSub = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "ul",
@@ -10512,12 +10473,12 @@ var SidebarMenuSub = React78.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React78.forwardRef((_a, ref) => {
+var SidebarMenuSubItem = React77.forwardRef((_a, ref) => {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx("li", __spreadValues({ ref }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React78.forwardRef((_a, ref) => {
+var SidebarMenuSubButton = React77.forwardRef((_a, ref) => {
   var _b = _a, { asChild = false, size = "md", isActive, className } = _b, props = __objRest(_b, ["asChild", "size", "isActive", "className"]);
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
@@ -10557,7 +10518,7 @@ var sidebarCardVariants = cva(
     }
   }
 );
-var SidebarCard = React78.forwardRef(
+var SidebarCard = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, children } = _b, props = __objRest(_b, ["className", "variant", "children"]);
     return /* @__PURE__ */ jsx(
@@ -10596,7 +10557,7 @@ var sidebarMenuItemVariants = cva("", {
     variant: "default"
   }
 });
-var SidebarMenuItem2 = React78.forwardRef(
+var SidebarMenuItem2 = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10792,7 +10753,7 @@ function percent2(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var Slider = React78.forwardRef(
+var Slider = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -10825,12 +10786,12 @@ var Slider = React78.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78.useRef(null);
-    const [isDragging, setIsDragging] = React78.useState(false);
-    const [isFocused, setIsFocused] = React78.useState(false);
+    const trackRef = React77.useRef(null);
+    const [isDragging, setIsDragging] = React77.useState(false);
+    const [isFocused, setIsFocused] = React77.useState(false);
     const pct = percent2(value, min, max);
     const displayValue = formatValue ? formatValue(value) : `${value}`;
-    const getValueFromPointer = React78.useCallback(
+    const getValueFromPointer = React77.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -10841,7 +10802,7 @@ var Slider = React78.forwardRef(
       },
       [min, max, step]
     );
-    const handlePointerDown = React78.useCallback(
+    const handlePointerDown = React77.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -10852,7 +10813,7 @@ var Slider = React78.forwardRef(
       },
       [disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerMove = React78.useCallback(
+    const handlePointerMove = React77.useCallback(
       (e) => {
         if (!isDragging || disabled) return;
         const newValue = getValueFromPointer(e.clientX);
@@ -10860,10 +10821,10 @@ var Slider = React78.forwardRef(
       },
       [isDragging, disabled, getValueFromPointer, onValueChange, value]
     );
-    const handlePointerUp = React78.useCallback(() => {
+    const handlePointerUp = React77.useCallback(() => {
       setIsDragging(false);
     }, []);
-    const handleKeyDown = React78.useCallback(
+    const handleKeyDown = React77.useCallback(
       (e) => {
         if (disabled) return;
         let newValue = value;
@@ -10890,7 +10851,7 @@ var Slider = React78.forwardRef(
       },
       [disabled, value, step, min, max, onValueChange]
     );
-    const tickLabels = React78.useMemo(() => {
+    const tickLabels = React77.useMemo(() => {
       if (pointLabels) return pointLabels;
       const count2 = pointCount;
       const labels = [];
@@ -10984,7 +10945,7 @@ Slider.displayName = "Slider";
 function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-var SliderInput = React78.forwardRef(
+var SliderInput = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11007,8 +10968,8 @@ var SliderInput = React78.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const [internalValue, setInternalValue] = React78.useState(value);
-    React78.useEffect(() => {
+    const [internalValue, setInternalValue] = React77.useState(value);
+    React77.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const commit = (newVal) => {
@@ -11115,7 +11076,7 @@ function percent3(value, min, max) {
   if (max === min) return 0;
   return (value - min) / (max - min) * 100;
 }
-var SliderRange = React78.forwardRef(
+var SliderRange = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11148,15 +11109,15 @@ var SliderRange = React78.forwardRef(
       "formatValue",
       "onValueChange"
     ]);
-    const trackRef = React78.useRef(null);
-    const [draggingHandle, setDraggingHandle] = React78.useState(null);
-    const [focusedHandle, setFocusedHandle] = React78.useState(null);
+    const trackRef = React77.useRef(null);
+    const [draggingHandle, setDraggingHandle] = React77.useState(null);
+    const [focusedHandle, setFocusedHandle] = React77.useState(null);
     const [rangeMin, rangeMax] = value;
     const pctMin = percent3(rangeMin, min, max);
     const pctMax = percent3(rangeMax, min, max);
     const fmt = (v) => formatValue ? formatValue(v) : `${v}`;
     const displayValue = `${fmt(rangeMin)} \u2013 ${fmt(rangeMax)}`;
-    const getValueFromPointer = React78.useCallback(
+    const getValueFromPointer = React77.useCallback(
       (clientX) => {
         const track = trackRef.current;
         if (!track) return 0;
@@ -11167,7 +11128,7 @@ var SliderRange = React78.forwardRef(
       },
       [min, max, step]
     );
-    const closestHandle = React78.useCallback(
+    const closestHandle = React77.useCallback(
       (pointerValue) => {
         const distMin = Math.abs(pointerValue - rangeMin);
         const distMax = Math.abs(pointerValue - rangeMax);
@@ -11175,7 +11136,7 @@ var SliderRange = React78.forwardRef(
       },
       [rangeMin, rangeMax]
     );
-    const updateValue = React78.useCallback(
+    const updateValue = React77.useCallback(
       (handle, newVal) => {
         if (handle === 0) {
           const clamped = clamp4(newVal, min, rangeMax);
@@ -11187,7 +11148,7 @@ var SliderRange = React78.forwardRef(
       },
       [min, max, rangeMin, rangeMax, onValueChange]
     );
-    const handlePointerDown = React78.useCallback(
+    const handlePointerDown = React77.useCallback(
       (e) => {
         if (disabled) return;
         e.preventDefault();
@@ -11199,7 +11160,7 @@ var SliderRange = React78.forwardRef(
       },
       [disabled, getValueFromPointer, closestHandle, updateValue]
     );
-    const handlePointerMove = React78.useCallback(
+    const handlePointerMove = React77.useCallback(
       (e) => {
         if (draggingHandle === null || disabled) return;
         const newVal = getValueFromPointer(e.clientX);
@@ -11207,10 +11168,10 @@ var SliderRange = React78.forwardRef(
       },
       [draggingHandle, disabled, getValueFromPointer, updateValue]
     );
-    const handlePointerUp = React78.useCallback(() => {
+    const handlePointerUp = React77.useCallback(() => {
       setDraggingHandle(null);
     }, []);
-    const makeKeyHandler = React78.useCallback(
+    const makeKeyHandler = React77.useCallback(
       (handle) => (e) => {
         if (disabled) return;
         const currentVal = handle === 0 ? rangeMin : rangeMax;
@@ -11238,7 +11199,7 @@ var SliderRange = React78.forwardRef(
       },
       [disabled, rangeMin, rangeMax, step, min, max, updateValue]
     );
-    const tickLabels = React78.useMemo(() => {
+    const tickLabels = React77.useMemo(() => {
       if (pointLabels) return pointLabels;
       const labels = [];
       for (let i = 0; i < pointCount; i++) {
@@ -11355,7 +11316,7 @@ var SliderRange = React78.forwardRef(
   }
 );
 SliderRange.displayName = "SliderRange";
-var SliderRangeInput = React78.forwardRef(
+var SliderRangeInput = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11479,25 +11440,25 @@ var Toaster = (_a) => {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ jsx(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ jsx("i", { className: "ri-checkbox-circle-fill text-base", "aria-hidden": true }),
+        info: /* @__PURE__ */ jsx("i", { className: "ri-information-line text-base", "aria-hidden": true }),
+        warning: /* @__PURE__ */ jsx("i", { className: "ri-alert-line text-base", "aria-hidden": true }),
+        error: /* @__PURE__ */ jsx("i", { className: "ri-error-warning-line text-base", "aria-hidden": true }),
+        loading: /* @__PURE__ */ 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.Provider;
-var ToastViewport = React78.forwardRef((_a, ref) => {
+var ToastViewport = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Viewport,
@@ -11516,8 +11477,8 @@ var toastVariants = 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: {
@@ -11525,7 +11486,7 @@ var toastVariants = cva(
     }
   }
 );
-var Toast = React78.forwardRef((_a, ref) => {
+var Toast = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Root,
@@ -11536,38 +11497,38 @@ var Toast = React78.forwardRef((_a, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React78.forwardRef((_a, ref) => {
+var ToastAction = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.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.Action.displayName;
-var ToastClose = React78.forwardRef((_a, ref) => {
+var ToastClose = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.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__ */ jsx(X, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx("i", { className: "ri-close-line text-base", "aria-hidden": true })
     })
   );
 });
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React78.forwardRef((_a, ref) => {
+var ToastTitle = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Title,
@@ -11578,7 +11539,7 @@ var ToastTitle = React78.forwardRef((_a, ref) => {
   );
 });
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React78.forwardRef((_a, ref) => {
+var ToastDescription = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Description,
@@ -11683,8 +11644,8 @@ function toast(_a) {
   };
 }
 function useToast() {
-  const [state, setState] = React78.useState(memoryState);
-  React78.useEffect(() => {
+  const [state, setState] = React77.useState(memoryState);
+  React77.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -11715,7 +11676,7 @@ function Toaster2() {
     /* @__PURE__ */ jsx(ToastViewport, {})
   ] });
 }
-var Switch = React78.forwardRef((_a, ref) => {
+var Switch = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     SwitchPrimitives.Root,
@@ -11767,10 +11728,10 @@ var Switch = React78.forwardRef((_a, ref) => {
   );
 });
 Switch.displayName = "Switch";
-var SwitchList = React78.forwardRef(
+var SwitchList = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, divider = true, children } = _b, props = __objRest(_b, ["className", "divider", "children"]);
-    const items = React78.Children.toArray(children);
+    const items = React77.Children.toArray(children);
     return /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -11798,7 +11759,7 @@ var SwitchList = React78.forwardRef(
   }
 );
 SwitchList.displayName = "SwitchList";
-var SwitchWithText = React78.forwardRef(
+var SwitchWithText = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -11815,7 +11776,7 @@ var SwitchWithText = React78.forwardRef(
       "disabled",
       "id"
     ]);
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const switchId = id || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -11872,7 +11833,7 @@ var SwitchWithText = React78.forwardRef(
   }
 );
 SwitchWithText.displayName = "SwitchWithText";
-var Table = React78.forwardRef((_a, ref) => {
+var Table = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
     "table",
@@ -11883,12 +11844,12 @@ var Table = React78.forwardRef((_a, ref) => {
   ) });
 });
 Table.displayName = "Table";
-var TableHeader = React78.forwardRef((_a, ref) => {
+var TableHeader = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b", className) }, props));
+  return /* @__PURE__ */ jsx("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b [&_tr]:border-sui-border-default", className) }, props));
 });
 TableHeader.displayName = "TableHeader";
-var TableBody = React78.forwardRef((_a, ref) => {
+var TableBody = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "tbody",
@@ -11899,21 +11860,21 @@ var TableBody = React78.forwardRef((_a, ref) => {
   );
 });
 TableBody.displayName = "TableBody";
-var TableFooter = React78.forwardRef((_a, ref) => {
+var TableFooter = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+var TableRow = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "tr",
@@ -11927,21 +11888,21 @@ var TableRow = React78.forwardRef((_a, ref) => {
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = React78.forwardRef((_a, ref) => {
+var TableHead = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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.forwardRef((_a, ref) => {
+var TableCell = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     "td",
@@ -11952,13 +11913,13 @@ var TableCell = React78.forwardRef((_a, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React78.forwardRef((_a, ref) => {
+var TableCaption = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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)
   );
 });
@@ -11988,7 +11949,7 @@ var ariaSortMap2 = {
   desc: "descending",
   none: "none"
 };
-var TableHeaderItem = React78.forwardRef(
+var TableHeaderItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12104,7 +12065,7 @@ var tableItemVariants = cva("flex items-center px-2", {
     size: "lg"
   }
 });
-var TableItem = React78.forwardRef(
+var TableItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12188,7 +12149,7 @@ var TableItem = React78.forwardRef(
   }
 );
 TableItem.displayName = "TableItem";
-var TablePagination = React78.forwardRef(
+var TablePagination = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12215,6 +12176,8 @@ var TablePagination = React78.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
@@ -12273,7 +12236,7 @@ var tableRowSortVariants = cva(
     }
   }
 );
-var TableRowSort = React78.forwardRef(
+var TableRowSort = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant = "default", striped, sticky, children } = _b, props = __objRest(_b, ["className", "variant", "striped", "sticky", "children"]);
     return /* @__PURE__ */ jsx(
@@ -12296,7 +12259,7 @@ var TableRowSort = React78.forwardRef(
 TableRowSort.displayName = "TableRowSort";
 var textWidths = ["w-20", "w-28", "w-24", "w-32", "w-16", "w-26", "w-22", "w-30"];
 var skeletonBg = "bg-sui-bg-basic-gray-alpha-4";
-var TableSkeletonRow = React78.forwardRef(
+var TableSkeletonRow = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, columns, rowCount = 5, size = "sm" } = _b, props = __objRest(_b, ["className", "columns", "rowCount", "size"]);
     return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className, "aria-hidden": "true" }, props), { children: Array.from({ length: rowCount }, (_, rowIdx) => /* @__PURE__ */ jsx(TableRowSort, { variant: "default", children: columns.map((col, colIdx) => {
@@ -12346,12 +12309,12 @@ var tabListVariants = cva(
     }
   }
 );
-var TabList = React78.forwardRef((_a, ref) => {
+var TabList = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "pill", shape = "pill", layout, children } = _b, props = __objRest(_b, ["className", "variant", "shape", "layout", "children"]);
   const childShape = variant === "segmented" && shape === "rounded" ? "rounded" : shape;
   const childRadiusOverride = variant === "segmented" && shape === "rounded" ? "rounded-sm" : void 0;
-  const enhancedChildren = React78.Children.map(children, (child) => {
-    if (!React78.isValidElement(child)) return child;
+  const enhancedChildren = React77.Children.map(children, (child) => {
+    if (!React77.isValidElement(child)) return child;
     const extraProps = {
       shape: childShape
     };
@@ -12359,7 +12322,7 @@ var TabList = React78.forwardRef((_a, ref) => {
       const existingClassName = child.props.className;
       extraProps.className = cn(existingClassName, childRadiusOverride);
     }
-    return React78.cloneElement(child, extraProps);
+    return React77.cloneElement(child, extraProps);
   });
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.List,
@@ -12421,7 +12384,7 @@ var tabItemVariants = cva(
     }
   }
 );
-var TabItem = React78.forwardRef((_a, ref) => {
+var TabItem = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, shape, size } = _b, props = __objRest(_b, ["className", "shape", "size"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.Trigger,
@@ -12433,42 +12396,42 @@ var TabItem = React78.forwardRef((_a, ref) => {
 });
 TabItem.displayName = "TabItem";
 var Tabs = TabsPrimitive4.Root;
-var TabsList = React78.forwardRef((_a, ref) => {
+var TabsList = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.List,
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex h-10 items-center justify-center rounded-md bg-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.List.displayName;
-var TabsTrigger = React78.forwardRef((_a, ref) => {
+var TabsTrigger = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.Trigger,
     __spreadValues({
       ref,
       className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-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.Trigger.displayName;
-var TabsContent = React78.forwardRef((_a, ref) => {
+var TabsContent = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive4.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)
@@ -12505,7 +12468,7 @@ var textAreaContainerVariants = cva(
     }
   }
 );
-var TextAreaField = React78.forwardRef(
+var TextAreaField = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -12550,7 +12513,7 @@ var TextAreaField = React78.forwardRef(
       "defaultValue",
       "onChange"
     ]);
-    const generatedId = React78.useId();
+    const generatedId = React77.useId();
     const textAreaId = id || generatedId;
     const captionId = `${textAreaId}-caption`;
     const charCountId = `${textAreaId}-charcount`;
@@ -12563,12 +12526,12 @@ var TextAreaField = React78.forwardRef(
       helperText ? captionId : null,
       showCount ? charCountId : null
     ].filter(Boolean).join(" ") || void 0;
-    const [charCount, setCharCount] = React78.useState(() => {
+    const [charCount, setCharCount] = React77.useState(() => {
       if (value !== void 0) return String(value).length;
       if (defaultValue !== void 0) return String(defaultValue).length;
       return 0;
     });
-    React78.useEffect(() => {
+    React77.useEffect(() => {
       if (value !== void 0) {
         setCharCount(String(value).length);
       }
@@ -12747,13 +12710,13 @@ var TextAreaField = React78.forwardRef(
   }
 );
 TextAreaField.displayName = "TextAreaField";
-var Textarea = React78.forwardRef((_a, ref) => {
+var Textarea = React77.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ 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
@@ -12799,7 +12762,7 @@ var toggleVariants = cva(
     }
   }
 );
-var Toggle = React78.forwardRef((_a, ref) => {
+var Toggle = React77.forwardRef((_a, ref) => {
   var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
   return /* @__PURE__ */ jsx(
     TogglePrimitive.Root,
@@ -12811,7 +12774,7 @@ var Toggle = React78.forwardRef((_a, ref) => {
 });
 Toggle.displayName = TogglePrimitive.Root.displayName;
 function useMergedRef(...refs) {
-  return React78.useCallback((node) => {
+  return React77.useCallback((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") ref(node);
       else if (ref && "current" in ref)
@@ -12840,13 +12803,13 @@ var chipSizeMap = {
   xs: "sm",
   "2xs": "sm"
 };
-var ToggleGroupContext = React78.createContext(null);
+var ToggleGroupContext = React77.createContext(null);
 function useToggleGroup() {
-  const ctx = React78.useContext(ToggleGroupContext);
+  const ctx = React77.useContext(ToggleGroupContext);
   if (!ctx) throw new Error("ToggleGroupItem must be used within a ToggleGroup");
   return ctx;
 }
-var ToggleGroup = React78.forwardRef(
+var ToggleGroup = React77.forwardRef(
   (props, ref) => {
     const {
       type,
@@ -12861,16 +12824,16 @@ var ToggleGroup = React78.forwardRef(
     const controlledValue = "value" in props ? props.value : void 0;
     const defaultValue = "defaultValue" in props ? props.defaultValue : void 0;
     const onValueChange = "onValueChange" in props ? props.onValueChange : void 0;
-    const [internalValue, setInternalValue] = React78.useState(
+    const [internalValue, setInternalValue] = React77.useState(
       defaultValue
     );
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const [rovingFocusValue, setRovingFocusValue] = React78.useState(null);
-    const itemRefs = React78.useRef(/* @__PURE__ */ new Map());
-    const itemValues = React78.useRef([]);
-    const [, notifyRegistration] = React78.useReducer((x) => x + 1, 0);
-    const isActive = React78.useCallback(
+    const [rovingFocusValue, setRovingFocusValue] = React77.useState(null);
+    const itemRefs = React77.useRef(/* @__PURE__ */ new Map());
+    const itemValues = React77.useRef([]);
+    const [, notifyRegistration] = React77.useReducer((x) => x + 1, 0);
+    const isActive = React77.useCallback(
       (itemValue) => {
         if (type === "single") return value === itemValue;
         if (type === "multiple" && Array.isArray(value)) return value.includes(itemValue);
@@ -12878,7 +12841,7 @@ var ToggleGroup = React78.forwardRef(
       },
       [type, value]
     );
-    const toggle = React78.useCallback(
+    const toggle = React77.useCallback(
       (itemValue) => {
         if (type === "single") {
           const newValue = value === itemValue ? void 0 : itemValue;
@@ -12922,7 +12885,7 @@ var ToggleGroup = React78.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React78.forwardRef(
+var ToggleGroupItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value: itemValue,
@@ -12957,9 +12920,9 @@ var ToggleGroupItem = React78.forwardRef(
     const disabled = ctx.disabled || itemDisabled;
     const resolvedSize = bgSize != null ? bgSize : "lg";
     const chipSize = chipSizeMap[resolvedSize];
-    const internalRef = React78.useRef(null);
+    const internalRef = React77.useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    React78.useEffect(() => {
+    React77.useEffect(() => {
       const el = internalRef.current;
       if (!el) return;
       ctx.itemRefs.current.set(itemValue, el);
@@ -13176,7 +13139,7 @@ var containedInnerVariants = cva(
     "group-hover:bg-sui-bg-state-secondary-hover group-active:bg-sui-bg-state-secondary-press"
   ]
 );
-var Userbar = React78.forwardRef(
+var Userbar = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13285,7 +13248,7 @@ var Userbar = React78.forwardRef(
   }
 );
 Userbar.displayName = "Userbar";
-var VerticalStepperItem = React78.forwardRef(
+var VerticalStepperItem = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13421,7 +13384,7 @@ var VerticalStepperItem = React78.forwardRef(
   }
 );
 VerticalStepperItem.displayName = "VerticalStepperItem";
-var VerticalStepper = React78.forwardRef(
+var VerticalStepper = React77.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -13502,4 +13465,4 @@ var VerticalStepper = React78.forwardRef(
 );
 VerticalStepper.displayName = "VerticalStepper";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarButton, AvatarFallback, AvatarGroup, AvatarImage, AvatarUpload, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, CheckboxList, CheckboxWithText, Chip, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ControlButton, DataRangeSlider, DataRangeSliderInput, DatePicker, DatePickerInput, DatePickerWithPresets, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCaption, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLargeItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuUserbar, EmptyState, FileUpload, FileUploadArea, FileUploadCard, FilterButton, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridTableCell, GridTableHeaderItem, GridTableRow, GridTableSlotItem, HorizontalStepper, HorizontalStepperItem, InlineTips, Input, InputButton, InputCaption, InputField, InputStepper, Label, LinkButton, MenuSearchInput, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageItem, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Paginator, Popover, PopoverContent, PopoverTrigger, Progress, ProgressBar, RadialProgressBar, RadioButton, RadioButtonCard, RadioButtonList, RadioButtonWithText, RadioCardGroup, RadioGroup2 as RadioGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectMenu, SelectMenuDescription, SelectMenuFooterButton, SelectMenuItem, SelectMenuLabel, SelectMenuLargeItem, SelectMenuSeparator, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Toaster2 as ShadcnToaster, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarCard, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem2 as SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderHandle, SliderInput, SliderRange, SliderRangeInput, SocialButton, SortBreadcrumb, SortBreadcrumbItem, StatusBadge, StepperIcon, StepperNumber, Switch, SwitchList, SwitchWithText, TabItem, TabList, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableHeaderItem, TableItem, TablePagination, TableRow, TableRowSort, TableSkeletonRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UnderlineTabItem, UnderlineTabsList, Userbar, VerticalStepper, VerticalStepperItem, accordionItemVariants, avatarButtonVariants, avatarVariants, buttonGroupItemVariants, buttonVariants, checkboxCardVariants, checkboxVariants, checkboxWithTextVariants, chipVariants, controlButtonVariants, datePickerInputContainerVariants, dividerVariants, emptyStateVariants, extractInitials, fileUploadCardVariants, filterButtonVariants, formatBytes, gridTableHeaderItemVariants, gridTableRowVariants, gridTableSlotItemVariants, horizontalStepperItemVariants, inlineTipsVariants, inputButtonVariants, inputContainerVariants, lineVariants, linkButtonVariants, navigationMenuTriggerStyle, pageItemVariants, progressBarVariants, radialProgressBarVariants, radioButtonCardVariants, radioButtonVariants, radioButtonWithTextVariants, sidebarCardVariants, sidebarMenuItemVariants, sliderHandleVariants, socialButtonVariants, stepperIconVariants, stepperNumberVariants, tabItemVariants, tabListVariants, tableHeaderItemVariants, tableItemVariants, tableRowSortVariants, textAreaContainerVariants, toggleVariants, tooltipContentVariants, underlineTabItemVariants, underlineTabsListVariants, useFormField, useSidebar, userbarVariants, validateFile };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarButton, AvatarFallback, AvatarGroup, AvatarImage, AvatarUpload, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, Calendar, CalendarDayButton, Card, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, CheckboxList, CheckboxWithText, Chip, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ControlButton, DataRangeSlider, DataRangeSliderInput, DatePicker, DatePickerInput, DatePickerWithPresets, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCaption, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLargeItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuUserbar, EmptyState, FileUpload, FileUploadArea, FileUploadCard, FilterButton, GridTableCell, GridTableHeaderItem, GridTableRow, GridTableSlotItem, HorizontalStepper, HorizontalStepperItem, InlineTips, Input, InputButton, InputCaption, InputField, InputStepper, Label, LinkButton, MenuSearchInput, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageItem, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Paginator, Popover, PopoverContent, PopoverTrigger, Progress, ProgressBar, RadialProgressBar, RadioButton, RadioButtonCard, RadioButtonList, RadioButtonWithText, RadioCardGroup, RadioGroup2 as RadioGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectMenu, SelectMenuDescription, SelectMenuFooterButton, SelectMenuItem, SelectMenuLabel, SelectMenuLargeItem, SelectMenuSeparator, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Toaster2 as ShadcnToaster, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarCard, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem2 as SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderHandle, SliderInput, SliderRange, SliderRangeInput, SocialButton, SortBreadcrumb, SortBreadcrumbItem, StatusBadge, StepperIcon, StepperNumber, Switch, SwitchList, SwitchWithText, TabItem, TabList, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableHeaderItem, TableItem, TablePagination, TableRow, TableRowSort, TableSkeletonRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UnderlineTabItem, UnderlineTabsList, Userbar, VerticalStepper, VerticalStepperItem, accordionItemVariants, avatarButtonVariants, avatarVariants, buttonGroupItemVariants, buttonVariants, cardVariants, checkboxCardVariants, checkboxVariants, checkboxWithTextVariants, chipVariants, controlButtonVariants, datePickerInputContainerVariants, dividerVariants, emptyStateVariants, extractInitials, fileUploadCardVariants, filterButtonVariants, formatBytes, gridTableHeaderItemVariants, gridTableRowVariants, gridTableSlotItemVariants, horizontalStepperItemVariants, inlineTipsVariants, inputButtonVariants, inputContainerVariants, lineVariants, linkButtonVariants, navigationMenuTriggerStyle, pageItemVariants, progressBarVariants, radialProgressBarVariants, radioButtonCardVariants, radioButtonVariants, radioButtonWithTextVariants, sidebarCardVariants, sidebarMenuItemVariants, sliderHandleVariants, socialButtonVariants, stepperIconVariants, stepperNumberVariants, tabItemVariants, tabListVariants, tableHeaderItemVariants, tableItemVariants, tableRowSortVariants, textAreaContainerVariants, toggleVariants, tooltipContentVariants, underlineTabItemVariants, underlineTabsListVariants, useSidebar, userbarVariants, validateFile };