@onesaz/ui 0.4.2 → 0.4.4

package/dist/index.js

@@ -864,31 +864,112 @@ Caption.displayName = "Caption";
 
 // src/components/button.tsx
 import * as React6 from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
 var ButtonGroupContext = React6.createContext({});
 var useButtonGroup = () => React6.useContext(ButtonGroupContext);
+var colorMap = {
+  success: {
+    contained: "bg-success-500 text-white hover:bg-success-600 dark:bg-success-600 dark:hover:bg-success-700",
+    outline: "border border-success-500 bg-transparent text-success-600 hover:bg-success-50 dark:text-success-400 dark:hover:bg-success-950",
+    secondary: "bg-success-50 text-success-700 hover:bg-success-100 dark:bg-success-950 dark:text-success-300 dark:hover:bg-success-900",
+    ghost: "text-success-600 hover:bg-success-50 dark:text-success-400 dark:hover:bg-success-950",
+    link: "text-success-600 dark:text-success-400"
+  },
+  warning: {
+    contained: "bg-warning-500 text-white hover:bg-warning-600 dark:bg-warning-600 dark:hover:bg-warning-700",
+    outline: "border border-warning-500 bg-transparent text-warning-600 hover:bg-warning-50 dark:text-warning-400 dark:hover:bg-warning-950",
+    secondary: "bg-warning-50 text-warning-700 hover:bg-warning-100 dark:bg-warning-950 dark:text-warning-300 dark:hover:bg-warning-900",
+    ghost: "text-warning-600 hover:bg-warning-50 dark:text-warning-400 dark:hover:bg-warning-950",
+    link: "text-warning-600 dark:text-warning-400"
+  },
+  error: {
+    contained: "bg-error-500 text-white hover:bg-error-600 dark:bg-error-600 dark:hover:bg-error-700",
+    outline: "border border-error-500 bg-transparent text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-950",
+    secondary: "bg-error-50 text-error-700 hover:bg-error-100 dark:bg-error-950 dark:text-error-300 dark:hover:bg-error-900",
+    ghost: "text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-950",
+    link: "text-error-600 dark:text-error-400"
+  },
+  destructive: {
+    contained: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+    outline: "border border-destructive bg-transparent text-destructive hover:bg-destructive/10",
+    secondary: "bg-destructive/10 text-destructive hover:bg-destructive/20",
+    ghost: "text-destructive hover:bg-destructive/10",
+    link: "text-destructive"
+  }
+};
+function variantToShape(variant) {
+  switch (variant) {
+    case "outline":
+      return "outline";
+    case "secondary":
+      return "secondary";
+    case "ghost":
+      return "ghost";
+    case "link":
+      return "link";
+    default:
+      return "contained";
+  }
+}
+var Spinner = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: cn("animate-spin", className),
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx6("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx6(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+        }
+      )
+    ]
+  }
+);
 var Button = React6.forwardRef(
-  ({ className, variant, size, fullWidth = false, disabled, ...props }, ref) => {
+  ({
+    className,
+    variant,
+    size,
+    color,
+    fullWidth = false,
+    disabled,
+    loading = false,
+    startIcon,
+    endIcon,
+    children,
+    ...props
+  }, ref) => {
     const groupCtx = useButtonGroup();
     const resolvedVariant = variant ?? groupCtx.variant ?? "default";
-    const resolvedSize = size ?? groupCtx.size ?? "default";
+    const resolvedSize = size ?? "default";
+    const resolvedColor = color ?? groupCtx.color ?? "default";
     const resolvedDisabled = disabled ?? groupCtx.disabled;
+    const colorOverride = resolvedColor !== "default" ? colorMap[resolvedColor][variantToShape(resolvedVariant)] : null;
+    const variantClasses3 = colorOverride ? null : {
+      "bg-accent text-accent-foreground hover:bg-accent-hover": resolvedVariant === "default",
+      "bg-destructive text-destructive-foreground hover:bg-destructive/90": resolvedVariant === "destructive",
+      "border border-input bg-background hover:bg-muted hover:text-foreground": resolvedVariant === "outline",
+      "bg-muted text-foreground hover:bg-muted/80": resolvedVariant === "secondary",
+      "hover:bg-muted hover:text-foreground": resolvedVariant === "ghost",
+      "text-accent underline-offset-4 hover:underline": resolvedVariant === "link"
+    };
+    const iconSize = resolvedSize === "sm" ? "h-3.5 w-3.5" : resolvedSize === "lg" ? "h-5 w-5" : "h-4 w-4";
     return /* @__PURE__ */ jsx6(
       "button",
       {
-        disabled: resolvedDisabled,
+        disabled: resolvedDisabled || loading,
         className: cn(
           "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
-          {
-            "bg-accent text-accent-foreground hover:bg-accent-hover": resolvedVariant === "default",
-            "bg-destructive text-destructive-foreground hover:bg-destructive/90": resolvedVariant === "destructive",
-            "border border-input bg-background hover:bg-muted hover:text-foreground": resolvedVariant === "outline",
-            "bg-muted text-foreground hover:bg-muted/80": resolvedVariant === "secondary",
-            "hover:bg-muted hover:text-foreground": resolvedVariant === "ghost",
-            "text-accent underline-offset-4 hover:underline": resolvedVariant === "link"
-          },
+          colorOverride ?? variantClasses3,
           {
             "h-10 px-4 py-2": resolvedSize === "default",
             "h-9 rounded-md px-3": resolvedSize === "sm",
@@ -896,10 +977,20 @@ var Button = React6.forwardRef(
             "h-10 w-10": resolvedSize === "icon"
           },
           fullWidth && "w-full",
+          loading && "gap-2",
+          (startIcon || endIcon) && !loading && "gap-2",
           className
         ),
         ref,
-        ...props
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx6(Spinner, { className: iconSize }),
+          children
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          startIcon && /* @__PURE__ */ jsx6("span", { className: cn("shrink-0", iconSize), children: startIcon }),
+          children,
+          endIcon && /* @__PURE__ */ jsx6("span", { className: cn("shrink-0", iconSize), children: endIcon })
+        ] })
       }
     );
   }
@@ -912,28 +1003,32 @@ var iconButtonSizes = {
   lg: "h-12 w-12"
 };
 var IconButton = React6.forwardRef(
-  ({ className, variant = "ghost", size = "md", rounded = false, ...props }, ref) => {
+  ({ className, variant = "ghost", color = "default", size = "md", rounded = false, loading = false, ...props }, ref) => {
+    const colorOverride = color !== "default" ? colorMap[color][variantToShape(variant)] : null;
+    const variantClasses3 = colorOverride ? null : {
+      "bg-accent text-accent-foreground hover:bg-accent-hover": variant === "default",
+      "bg-destructive text-destructive-foreground hover:bg-destructive/90": variant === "destructive",
+      "border border-input bg-background hover:bg-muted hover:text-foreground": variant === "outline",
+      "bg-muted text-foreground hover:bg-muted/80": variant === "secondary",
+      "hover:bg-muted hover:text-foreground": variant === "ghost",
+      "text-accent underline-offset-4 hover:underline": variant === "link"
+    };
     return /* @__PURE__ */ jsx6(
       "button",
       {
+        disabled: loading,
         className: cn(
           "inline-flex items-center justify-center transition-colors cursor-pointer",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
-          {
-            "bg-accent text-accent-foreground hover:bg-accent-hover": variant === "default",
-            "bg-destructive text-destructive-foreground hover:bg-destructive/90": variant === "destructive",
-            "border border-input bg-background hover:bg-muted hover:text-foreground": variant === "outline",
-            "bg-muted text-foreground hover:bg-muted/80": variant === "secondary",
-            "hover:bg-muted hover:text-foreground": variant === "ghost",
-            "text-accent underline-offset-4 hover:underline": variant === "link"
-          },
+          colorOverride ?? variantClasses3,
           iconButtonSizes[size],
           rounded ? "rounded-full" : "rounded-md",
           className
         ),
         ref,
-        ...props
+        ...props,
+        children: loading ? /* @__PURE__ */ jsx6(Spinner, { className: "h-4 w-4" }) : props.children
       }
     );
   }
@@ -944,13 +1039,14 @@ var ButtonGroup = React6.forwardRef(
     className,
     variant,
     size,
+    color,
     orientation = "horizontal",
     disabled,
     fullWidth = false,
     children,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx6(ButtonGroupContext.Provider, { value: { variant, size, disabled }, children: /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx6(ButtonGroupContext.Provider, { value: { variant, size, color, disabled }, children: /* @__PURE__ */ jsx6(
       "div",
       {
         ref,
@@ -959,17 +1055,14 @@ var ButtonGroup = React6.forwardRef(
           "inline-flex",
           orientation === "vertical" && "flex-col",
           fullWidth && "flex w-full",
-          // Horizontal: collapse inner borders and strip inner radius
           orientation === "horizontal" && [
             "[&>*:not(:first-child)]:rounded-l-none",
             "[&>*:not(:last-child)]:rounded-r-none",
             "[&>*:not(:first-child)]:-ml-px",
-            // Bring hovered/focused button's border to front
             "[&>*]:relative",
             "[&>*:hover]:z-10",
             "[&>*:focus-visible]:z-10"
           ],
-          // Vertical: collapse inner borders and strip inner radius
           orientation === "vertical" && [
             "[&>*:not(:first-child)]:rounded-t-none",
             "[&>*:not(:last-child)]:rounded-b-none",
@@ -990,7 +1083,7 @@ ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/input.tsx
 import * as React7 from "react";
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var sizeClasses = {
   sm: "h-8 text-sm px-2.5",
   md: "h-10 text-sm px-3",
@@ -1009,7 +1102,7 @@ var Input = React7.forwardRef(
   }, ref) => {
     const hasAdornment = startAdornment || endAdornment;
     if (hasAdornment) {
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs2(
         "div",
         {
           className: cn(
@@ -1141,7 +1234,7 @@ var Label = React10.forwardRef(
 Label.displayName = "Label";
 
 // src/components/text-field.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var TextField = React11.forwardRef(
   ({
     className,
@@ -1179,17 +1272,17 @@ var TextField = React11.forwardRef(
       endAdornment: inputSlotEnd,
       ...restInputSlotProps
     } = InputProps ?? {};
-    const resolvedStartAdornment = inputSlotStart ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    const resolvedStartAdornment = inputSlotStart ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
       inputSlotStart,
       startAdornment
     ] }) : startAdornment;
-    const resolvedEndAdornment = inputSlotEnd ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    const resolvedEndAdornment = inputSlotEnd ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
       endAdornment,
       inputSlotEnd
     ] }) : endAdornment;
     const resolvedSize = size === "small" ? "sm" : size === "medium" ? "md" : size;
-    return /* @__PURE__ */ jsxs2("div", { className: cn("grid gap-1.5", fullWidth && "w-full", className), children: [
-      label && /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3("div", { className: cn("grid gap-1.5", fullWidth && "w-full", className), children: [
+      label && /* @__PURE__ */ jsxs3(
         Label,
         {
           htmlFor: id,
@@ -1240,7 +1333,7 @@ TextField.displayName = "TextField";
 
 // src/components/checkbox.tsx
 import * as React12 from "react";
-import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var Checkbox = React12.forwardRef(
   ({
     className,
@@ -1269,7 +1362,7 @@ var Checkbox = React12.forwardRef(
       onChange?.(e);
     };
     const active = isChecked || indeterminate;
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "label",
       {
         className: cn(
@@ -1348,9 +1441,9 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/switch.tsx
 import * as React13 from "react";
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var Switch = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs4("label", { className: cn("relative inline-flex items-center cursor-pointer", className), children: [
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs5("label", { className: cn("relative inline-flex items-center cursor-pointer", className), children: [
     /* @__PURE__ */ jsx13(
       "input",
       {
@@ -1382,7 +1475,7 @@ Switch.displayName = "Switch";
 // src/components/radio.tsx
 import * as React14 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var RadioGroupContext = React14.createContext({});
 var RadioGroup = React14.forwardRef(({ className, orientation = "vertical", size = "md", ...props }, ref) => {
   return /* @__PURE__ */ jsx14(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx14(
@@ -1447,9 +1540,9 @@ var Radio = React14.forwardRef(({ className, label, description, id: idProp, val
   if (!label && !description) {
     return /* @__PURE__ */ jsx14(RadioGroupItem, { ref, value, size, ...props });
   }
-  return /* @__PURE__ */ jsxs5("div", { className: cn("flex items-start gap-3", className), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex items-start gap-3", className), children: [
     /* @__PURE__ */ jsx14(RadioGroupItem, { ref, id, value, size, ...props }),
-    /* @__PURE__ */ jsxs5("div", { className: "grid gap-1", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "grid gap-1", children: [
       label && /* @__PURE__ */ jsx14(
         "label",
         {
@@ -1466,7 +1559,7 @@ Radio.displayName = "Radio";
 
 // src/components/form.tsx
 import * as React15 from "react";
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var FormControlContext = React15.createContext({});
 function useFormControl() {
   return React15.useContext(FormControlContext);
@@ -1515,7 +1608,7 @@ var FormLabel = React15.forwardRef(
     const disabled = disabledProp ?? context.disabled;
     const required = requiredProp ?? context.required;
     const id = htmlFor ?? context.id;
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "label",
       {
         ref,
@@ -1581,7 +1674,7 @@ FormGroup.displayName = "FormGroup";
 // src/components/slider.tsx
 import * as React16 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var Slider = React16.forwardRef(({
   className,
   min = 0,
@@ -1610,7 +1703,7 @@ var Slider = React16.forwardRef(({
   };
   const currentValue = internalValue[0];
   const displayValue = valueFormatter ? valueFormatter(currentValue) : currentValue.toString();
-  const sliderElement = /* @__PURE__ */ jsxs7(
+  const sliderElement = /* @__PURE__ */ jsxs8(
     SliderPrimitive.Root,
     {
       ref,
@@ -1642,19 +1735,19 @@ var Slider = React16.forwardRef(({
     right: "flex items-center gap-3"
   };
   const orderMap = {
-    top: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    top: /* @__PURE__ */ jsxs8(Fragment3, { children: [
       valueElement,
       sliderElement
     ] }),
-    bottom: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    bottom: /* @__PURE__ */ jsxs8(Fragment3, { children: [
       sliderElement,
       valueElement
     ] }),
-    left: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    left: /* @__PURE__ */ jsxs8(Fragment3, { children: [
       valueElement,
       sliderElement
     ] }),
-    right: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    right: /* @__PURE__ */ jsxs8(Fragment3, { children: [
       sliderElement,
       valueElement
     ] })
@@ -1666,7 +1759,7 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 // src/components/range-slider.tsx
 import * as React17 from "react";
 import * as SliderPrimitive2 from "@radix-ui/react-slider";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var RangeSlider = React17.forwardRef(({
   className,
   min = 0,
@@ -1701,18 +1794,18 @@ var RangeSlider = React17.forwardRef(({
   };
   const minValue = internalValue[0];
   const maxValue = internalValue[1];
-  return /* @__PURE__ */ jsxs8("div", { className: cn("w-full", className), children: [
-    showValues && valuePosition === "top" && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between mb-2", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cn("w-full", className), children: [
+    showValues && valuePosition === "top" && /* @__PURE__ */ jsxs9("div", { className: "flex justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-start", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: minLabel }),
         /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(minValue) })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-end", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: maxLabel }),
         /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(maxValue) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(
       SliderPrimitive2.Root,
       {
         ref,
@@ -1745,17 +1838,17 @@ var RangeSlider = React17.forwardRef(({
         ]
       }
     ),
-    showValues && valuePosition === "bottom" && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between mt-2", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start", children: [
+    showValues && valuePosition === "bottom" && /* @__PURE__ */ jsxs9("div", { className: "flex justify-between mt-2", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-start", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: minLabel }),
         /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(minValue) })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-end", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: maxLabel }),
         /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(maxValue) })
       ] })
     ] }),
-    showValues && /* @__PURE__ */ jsx17("div", { className: "flex justify-center mt-1", children: /* @__PURE__ */ jsxs8("span", { className: "text-xs text-muted-foreground", children: [
+    showValues && /* @__PURE__ */ jsx17("div", { className: "flex justify-center mt-1", children: /* @__PURE__ */ jsxs9("span", { className: "text-xs text-muted-foreground", children: [
       "Range: ",
       formatValue(minValue),
       " - ",
@@ -1881,7 +1974,7 @@ Badge.displayName = "Badge";
 
 // src/components/chip.tsx
 import * as React20 from "react";
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var filledClasses = {
   default: "bg-accent text-accent-foreground",
   success: "bg-success-500 text-white dark:bg-success-600",
@@ -1965,7 +2058,7 @@ var Chip = React20.forwardRef(
       }
       onKeyDown?.(e);
     };
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       Component,
       {
         ref,
@@ -2041,7 +2134,7 @@ Separator.displayName = "Separator";
 // src/components/accordion.tsx
 import * as React22 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var Accordion = AccordionPrimitive.Root;
 var AccordionItem = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   AccordionPrimitive.Item,
@@ -2055,7 +2148,7 @@ var AccordionItem = React22.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs10(
+var AccordionTrigger = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs11(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -2105,7 +2198,7 @@ AccordionContent.displayName = "AccordionContent";
 // src/components/select/index.tsx
 import * as React23 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var ChevronDownIcon = () => /* @__PURE__ */ jsx23(
   "svg",
   {
@@ -2154,7 +2247,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx23(
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
+var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs12(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2202,7 +2295,7 @@ var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
+var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs12(
   SelectPrimitive.Content,
   {
     ref,
@@ -2245,7 +2338,7 @@ var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
+var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs12(
   SelectPrimitive.Item,
   {
     ref,
@@ -2309,7 +2402,7 @@ NativeSelectOption.displayName = "NativeSelectOption";
 // src/components/dialog/index.tsx
 import * as React24 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
@@ -2327,9 +2420,9 @@ var DialogOverlay = React24.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React24.forwardRef(({ className, children, hideCloseButton = false, size = "lg", ...props }, ref) => /* @__PURE__ */ jsxs12(DialogPortal, { children: [
+var DialogContent = React24.forwardRef(({ className, children, hideCloseButton = false, size = "lg", ...props }, ref) => /* @__PURE__ */ jsxs13(DialogPortal, { children: [
   /* @__PURE__ */ jsx24(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs12(
+  /* @__PURE__ */ jsxs13(
     DialogPrimitive.Content,
     {
       ref,
@@ -2350,8 +2443,8 @@ var DialogContent = React24.forwardRef(({ className, children, hideCloseButton =
       ...props,
       children: [
         children,
-        !hideCloseButton && /* @__PURE__ */ jsxs12(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__ */ jsxs12(
+        !hideCloseButton && /* @__PURE__ */ jsxs13(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__ */ jsxs13(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -2432,7 +2525,7 @@ var DialogNamespace = Object.assign(Dialog, {
 // src/components/alert-dialog.tsx
 import * as React25 from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
@@ -2473,23 +2566,23 @@ var variantStyles = {
   }
 };
 var VariantIcons = {
-  default: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  default: ({ className }) => /* @__PURE__ */ jsxs14("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsx25("path", { d: "M12 16v-4M12 8h.01" })
   ] }),
-  destructive: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  destructive: ({ className }) => /* @__PURE__ */ jsxs14("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsx25("path", { d: "m15 9-6 6M9 9l6 6" })
   ] }),
-  success: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  success: ({ className }) => /* @__PURE__ */ jsxs14("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsx25("path", { d: "m9 12 2 2 4-4" })
   ] }),
-  warning: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  warning: ({ className }) => /* @__PURE__ */ jsxs14("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
     /* @__PURE__ */ jsx25("path", { d: "M12 9v4M12 17h.01" })
   ] }),
-  info: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  info: ({ className }) => /* @__PURE__ */ jsxs14("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsx25("path", { d: "M12 16v-4M12 8h.01" })
   ] })
@@ -2497,7 +2590,7 @@ var VariantIcons = {
 var AlertDialogContent = React25.forwardRef(({ className, variant = "default", showIcon = true, children, ...props }, ref) => {
   const IconComponent = VariantIcons[variant];
   const styles = variantStyles[variant];
-  return /* @__PURE__ */ jsxs13(AlertDialogPortal, { children: [
+  return /* @__PURE__ */ jsxs14(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx25(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx25(
       AlertDialogPrimitive.Content,
@@ -2516,7 +2609,7 @@ var AlertDialogContent = React25.forwardRef(({ className, variant = "default", s
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxs13("div", { className: "flex gap-4 items-start", children: [
+        children: /* @__PURE__ */ jsxs14("div", { className: "flex gap-4 items-start", children: [
           showIcon && /* @__PURE__ */ jsx25("div", { className: cn("shrink-0 mt-1", styles.icon), children: /* @__PURE__ */ jsx25(IconComponent, { className: "h-6 w-6" }) }),
           /* @__PURE__ */ jsx25("div", { className: "flex-1", children })
         ] })
@@ -2606,7 +2699,7 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 // src/components/spinner.tsx
 import * as React26 from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-var Spinner = React26.forwardRef(
+var Spinner2 = React26.forwardRef(
   ({ className, size = "default", ...props }, ref) => {
     return /* @__PURE__ */ jsx26(
       "div",
@@ -2630,11 +2723,11 @@ var Spinner = React26.forwardRef(
     );
   }
 );
-Spinner.displayName = "Spinner";
+Spinner2.displayName = "Spinner";
 
 // src/components/alert.tsx
 import * as React27 from "react";
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var variantConfig = {
   default: {
     root: "bg-accent/10",
@@ -2657,7 +2750,7 @@ var variantConfig = {
     iconColor: "text-error-600"
   }
 };
-var InfoIcon = () => /* @__PURE__ */ jsxs14(
+var InfoIcon = () => /* @__PURE__ */ jsxs15(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2673,7 +2766,7 @@ var InfoIcon = () => /* @__PURE__ */ jsxs14(
     ]
   }
 );
-var CheckIcon2 = () => /* @__PURE__ */ jsxs14(
+var CheckIcon2 = () => /* @__PURE__ */ jsxs15(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2689,7 +2782,7 @@ var CheckIcon2 = () => /* @__PURE__ */ jsxs14(
     ]
   }
 );
-var WarningIcon = () => /* @__PURE__ */ jsxs14(
+var WarningIcon = () => /* @__PURE__ */ jsxs15(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2705,7 +2798,7 @@ var WarningIcon = () => /* @__PURE__ */ jsxs14(
     ]
   }
 );
-var ErrorIcon = () => /* @__PURE__ */ jsxs14(
+var ErrorIcon = () => /* @__PURE__ */ jsxs15(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2744,7 +2837,7 @@ var Alert = React27.forwardRef(
   ({ className, variant = "default", onClose, icon, children, ...props }, ref) => {
     const cfg = variantConfig[variant];
     const resolvedIcon = icon === null ? null : icon ?? defaultIcons[variant];
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         ref,
@@ -2803,7 +2896,7 @@ AlertDescription.displayName = "AlertDescription";
 // src/components/tabs.tsx
 import * as React28 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
 var TabsList = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
   TabsPrimitive.List,
@@ -2860,7 +2953,7 @@ var UnderlineTabsList = React28.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 UnderlineTabsList.displayName = "UnderlineTabsList";
-var UnderlineTabsTrigger = React28.forwardRef(({ className, children, count, ...props }, ref) => /* @__PURE__ */ jsxs15(
+var UnderlineTabsTrigger = React28.forwardRef(({ className, children, count, ...props }, ref) => /* @__PURE__ */ jsxs16(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -2923,7 +3016,7 @@ var VerticalTabsList = React28.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 VerticalTabsList.displayName = "VerticalTabsList";
-var VerticalTabsTrigger = React28.forwardRef(({ className, children, icon, ...props }, ref) => /* @__PURE__ */ jsxs15(
+var VerticalTabsTrigger = React28.forwardRef(({ className, children, icon, ...props }, ref) => /* @__PURE__ */ jsxs16(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -2976,7 +3069,7 @@ VerticalTabsGroupLabel.displayName = "VerticalTabsGroupLabel";
 // src/components/tooltip.tsx
 import * as React29 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -2990,7 +3083,7 @@ var TooltipArrow = React29.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
-var TooltipContent = React29.forwardRef(({ className, sideOffset = 4, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
+var TooltipContent = React29.forwardRef(({ className, sideOffset = 4, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsxs17(
   TooltipPrimitive.Content,
   {
     ref,
@@ -3027,9 +3120,9 @@ var Tooltip = React29.forwardRef(
     className
   }, ref) => {
     if (disabled) {
-      return /* @__PURE__ */ jsx29(Fragment3, { children });
+      return /* @__PURE__ */ jsx29(Fragment4, { children });
     }
-    return /* @__PURE__ */ jsx29(TooltipProvider, { children: /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsx29(TooltipProvider, { children: /* @__PURE__ */ jsxs17(
       TooltipRoot,
       {
         delayDuration,
@@ -3056,7 +3149,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/progress.tsx
 import * as React30 from "react";
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var linearSizeClasses = {
   sm: "h-1",
   md: "h-2",
@@ -3081,7 +3174,7 @@ var LinearProgress = React30.forwardRef(
     ...props
   }, ref) => {
     const isIndeterminate = value === void 0;
-    return /* @__PURE__ */ jsxs17("div", { ref, className: cn("w-full", className), ...props, children: [
+    return /* @__PURE__ */ jsxs18("div", { ref, className: cn("w-full", className), ...props, children: [
       /* @__PURE__ */ jsx30(
         "div",
         {
@@ -3142,7 +3235,7 @@ var CircularProgress = React30.forwardRef(
     const radius = (sizeValue - thickness) / 2;
     const circumference = 2 * Math.PI * radius;
     const strokeDashoffset = isIndeterminate ? 0 : circumference - Math.min(100, Math.max(0, value)) / 100 * circumference;
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       "div",
       {
         ref,
@@ -3154,7 +3247,7 @@ var CircularProgress = React30.forwardRef(
         "aria-valuemax": 100,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsxs18(
             "svg",
             {
               className: cn(isIndeterminate && "animate-spin"),
@@ -3306,7 +3399,7 @@ var TableNamespace = Object.assign(Table, {
 
 // src/components/avatar.tsx
 import * as React32 from "react";
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 var sizeClasses4 = {
   xs: "h-6 w-6 text-xs",
   sm: "h-8 w-8 text-sm",
@@ -3361,7 +3454,7 @@ var Avatar = React32.forwardRef(
           }
         ) : fallbackElement ? fallbackElement : fallback ? /* @__PURE__ */ jsx32("span", { className: "font-medium", children: getInitials(fallback) }) : (
           // Default user icon
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -3389,7 +3482,7 @@ var AvatarGroup = React32.forwardRef(
     const childArray = React32.Children.toArray(children);
     const visibleChildren = max ? childArray.slice(0, max) : childArray;
     const remainingCount = max ? childArray.length - max : 0;
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
@@ -3425,7 +3518,7 @@ AvatarGroup.displayName = "AvatarGroup";
 
 // src/components/skeleton.tsx
 import * as React33 from "react";
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var Skeleton = React33.forwardRef(
   ({
     variant = "text",
@@ -3531,7 +3624,7 @@ var SkeletonCard = React33.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         ref,
@@ -3546,7 +3639,7 @@ var SkeletonCard = React33.forwardRef(
               animation
             }
           ),
-          /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx33(Skeleton, { variant: "text", width: "60%", animation }),
             /* @__PURE__ */ jsx33(SkeletonText, { lines, animation })
           ] })
@@ -3581,7 +3674,7 @@ SkeletonTableRow.displayName = "SkeletonTableRow";
 
 // src/components/pagination.tsx
 import * as React34 from "react";
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 var Pagination = React34.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
     "nav",
@@ -3619,7 +3712,7 @@ var PaginationLink = React34.forwardRef(
   )
 );
 PaginationLink.displayName = "PaginationLink";
-var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
+var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs21(
   Button,
   {
     ref,
@@ -3649,7 +3742,7 @@ var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
+var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs21(
   Button,
   {
     ref,
@@ -3679,7 +3772,7 @@ var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 PaginationNext.displayName = "PaginationNext";
-var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
+var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs21(
   "span",
   {
     ref,
@@ -3687,7 +3780,7 @@ var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /*
     className: cn("flex h-9 w-9 items-center justify-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs20(
+      /* @__PURE__ */ jsxs21(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -3724,7 +3817,7 @@ var PaginationNamespace = Object.assign(Pagination, {
 // src/components/combobox/index.tsx
 import * as React35 from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function isMultipleProps(props) {
   return props.multiple === true;
 }
@@ -3755,7 +3848,7 @@ function OptionItem({
   isMultiple,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "button",
     {
       type: "button",
@@ -3809,7 +3902,7 @@ function OptionItem({
             children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
           }
         ) }),
-        option.label
+        /* @__PURE__ */ jsx35("span", { className: "break-all", children: option.label })
       ]
     }
   );
@@ -3988,8 +4081,8 @@ var Combobox = React35.forwardRef(
     const maxDisplayItems = isMultiple ? props.maxDisplayItems ?? 3 : 0;
     const displayedOptions = selectedOptions.slice(0, maxDisplayItems);
     const remainingCount = selectedOptions.length - maxDisplayItems;
-    return /* @__PURE__ */ jsxs21("div", { ref: containerRef, className: "relative", children: [
-      /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs22("div", { ref: containerRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs22(
         "button",
         {
           type: "button",
@@ -3998,22 +4091,22 @@ var Combobox = React35.forwardRef(
           disabled,
           onClick: () => setOpen(!open),
           className: cn(
-            "flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-left",
+            "flex min-h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-left",
             "ring-offset-background",
             "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
             "disabled:cursor-not-allowed disabled:opacity-50",
-            isMultiple && selectedOptions.length > 0 && "h-auto",
+            isMultiple && selectedOptions.length > 0 || !isMultiple && singleValue ? "h-auto items-start justify-between" : "items-center justify-between",
             className
           ),
           children: [
             startAdornment && /* @__PURE__ */ jsx35(Adornment, { onClick: onStartAdornmentClick, className: "mr-1.5", children: startAdornment }),
-            isMultiple ? /* @__PURE__ */ jsx35("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs21(Fragment4, { children: [
-              displayedOptions.map((option) => /* @__PURE__ */ jsxs21(
+            isMultiple ? /* @__PURE__ */ jsx35("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs22(Fragment5, { children: [
+              displayedOptions.map((option) => /* @__PURE__ */ jsxs22(
                 "span",
                 {
                   className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs font-medium",
                   children: [
-                    getOptionLabel(option),
+                    /* @__PURE__ */ jsx35("span", { className: "break-all", children: getOptionLabel(option) }),
                     /* @__PURE__ */ jsx35(
                       "button",
                       {
@@ -4041,13 +4134,13 @@ var Combobox = React35.forwardRef(
                 },
                 getOptionValue(option)
               )),
-              remainingCount > 0 && /* @__PURE__ */ jsxs21("span", { className: "text-xs text-muted-foreground", children: [
+              remainingCount > 0 && /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground", children: [
                 "+",
                 remainingCount,
                 " more"
               ] })
-            ] }) }) : /* @__PURE__ */ jsx35("span", { className: cn("flex-1", !singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
-            /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
+            ] }) }) : /* @__PURE__ */ jsx35("span", { className: cn("flex-1 break-all", !singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 shrink-0", children: [
               isMultiple && selectedOptions.length > 0 && /* @__PURE__ */ jsx35(
                 "button",
                 {
@@ -4121,9 +4214,9 @@ var Combobox = React35.forwardRef(
           ]
         }
       ),
-      open && /* @__PURE__ */ jsxs21("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
-        /* @__PURE__ */ jsxs21("div", { className: "flex items-center border-b border-border px-3", children: [
-          /* @__PURE__ */ jsxs21(
+      open && /* @__PURE__ */ jsxs22("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex items-center border-b border-border px-3", children: [
+          /* @__PURE__ */ jsxs22(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -4161,7 +4254,7 @@ var Combobox = React35.forwardRef(
             }
           )
         ] }),
-        isMultiple && selectAll && filteredOptions.length > 0 && /* @__PURE__ */ jsx35("div", { className: "px-1 pt-1", children: /* @__PURE__ */ jsxs21(
+        isMultiple && selectAll && filteredOptions.length > 0 && /* @__PURE__ */ jsx35("div", { className: "px-1 pt-1", children: /* @__PURE__ */ jsxs22(
           "button",
           {
             type: "button",
@@ -4276,7 +4369,7 @@ import {
   flexRender
 } from "@tanstack/react-table";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function convertColumns(columns, checkboxSelection) {
   const tanstackColumns = [];
   if (checkboxSelection) {
@@ -4463,8 +4556,8 @@ var ColumnVisibilityDropdown = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const allColumns = table.getAllLeafColumns().filter((col) => col.id !== "__select__");
-  return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs23(
       Button,
       {
         variant: "outline",
@@ -4472,7 +4565,7 @@ var ColumnVisibilityDropdown = ({
         onClick: () => setOpen(!open),
         className: "h-9 gap-2",
         children: [
-          /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ jsxs23("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
             /* @__PURE__ */ jsx36("path", { d: "M12 3v18M3 12h18" }),
             /* @__PURE__ */ jsx36("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
             /* @__PURE__ */ jsx36("path", { d: "M3 9h18M3 15h18M9 3v18M15 3v18" })
@@ -4481,12 +4574,12 @@ var ColumnVisibilityDropdown = ({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs22("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
+    open && /* @__PURE__ */ jsxs23("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
       /* @__PURE__ */ jsx36("div", { className: "text-xs font-medium text-foreground mb-2 px-2", children: "Show/Hide Columns" }),
       /* @__PURE__ */ jsx36("div", { className: "max-h-[300px] overflow-auto", children: allColumns.map((column) => {
         const meta = column.columnDef.meta;
         const headerName = meta?.headerName || column.id;
-        return /* @__PURE__ */ jsxs22(
+        return /* @__PURE__ */ jsxs23(
           "label",
           {
             className: "flex items-center gap-2 px-2 py-1.5 hover:bg-muted rounded cursor-pointer",
@@ -4504,7 +4597,7 @@ var ColumnVisibilityDropdown = ({
           column.id
         );
       }) }),
-      /* @__PURE__ */ jsxs22("div", { className: "border-t border-border mt-2 pt-2 flex gap-2 px-2", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "border-t border-border mt-2 pt-2 flex gap-2 px-2", children: [
         /* @__PURE__ */ jsx36(
           Button,
           {
@@ -4567,8 +4660,8 @@ var DataGridPagination = ({
       }
     ) }, page)
   );
-  const infoSection = /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-4 flex-wrap", children: [
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
+  const infoSection = /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-4 flex-wrap", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
       /* @__PURE__ */ jsx36("span", { children: "Rows per page:" }),
       /* @__PURE__ */ jsx36(
         "select",
@@ -4580,7 +4673,7 @@ var DataGridPagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs23("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
       startRow,
       "\u2013",
       endRow,
@@ -4588,7 +4681,7 @@ var DataGridPagination = ({
       totalRows
     ] })
   ] });
-  const navSection = (maxVisible) => /* @__PURE__ */ jsx36(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs22(PaginationContent, { children: [
+  const navSection = (maxVisible) => /* @__PURE__ */ jsx36(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs23(PaginationContent, { children: [
     /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
       Button,
       {
@@ -4635,7 +4728,7 @@ var DataGridPagination = ({
       }
     ) })
   ] }) });
-  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2 border-t border-border bg-background", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2 border-t border-border bg-background", children: [
     infoSection,
     /* @__PURE__ */ jsx36("div", { className: "ml-auto", children: navSection(5) })
   ] });
@@ -4645,7 +4738,8 @@ var ExportDropdown = ({
   rows,
   columns,
   pinnedRows,
-  fileName = "data-export"
+  fileName = "data-export",
+  columnVisibility = {}
 }) => {
   const [open, setOpen] = React36.useState(false);
   const dropdownRef = React36.useRef(null);
@@ -4659,7 +4753,9 @@ var ExportDropdown = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const exportToCSV = () => {
-    const visibleColumns = columns.filter((col) => !col.hide && !col.disableExport && !col.hideExport);
+    const visibleColumns = columns.filter(
+      (col) => !col.disableExport && !col.hideExport && !col.hide && columnVisibility[col.field] !== false
+    );
     const headers = visibleColumns.map((col) => col.headerName || col.field);
     const csvRows = [headers.join(",")];
     const allRows = [
@@ -4703,8 +4799,8 @@ var ExportDropdown = ({
     }
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs23(
       Button,
       {
         variant: "outline",
@@ -4712,7 +4808,7 @@ var ExportDropdown = ({
         onClick: () => setOpen(!open),
         className: "h-9 gap-2",
         children: [
-          /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ jsxs23("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
             /* @__PURE__ */ jsx36("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
             /* @__PURE__ */ jsx36("polyline", { points: "7 10 12 15 17 10" }),
             /* @__PURE__ */ jsx36("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
@@ -4721,14 +4817,14 @@ var ExportDropdown = ({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs22("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[140px] rounded-md border border-border bg-popover p-1 shadow-md", children: [
-      /* @__PURE__ */ jsxs22(
+    open && /* @__PURE__ */ jsxs23("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[140px] rounded-md border border-border bg-popover p-1 shadow-md", children: [
+      /* @__PURE__ */ jsxs23(
         "button",
         {
           className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
           onClick: exportToCSV,
           children: [
-            /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsxs23("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
               /* @__PURE__ */ jsx36("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
               /* @__PURE__ */ jsx36("polyline", { points: "14 2 14 8 20 8" })
             ] }),
@@ -4736,13 +4832,13 @@ var ExportDropdown = ({
           ]
         }
       ),
-      onExport && /* @__PURE__ */ jsxs22(
+      onExport && /* @__PURE__ */ jsxs23(
         "button",
         {
           className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
           onClick: handleCustomExport,
           children: [
-            /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsxs23("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
               /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "3" }),
               /* @__PURE__ */ jsx36("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
             ] }),
@@ -4768,7 +4864,7 @@ var MoreOptionsDropdown = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   if (options.length === 0) return null;
-  return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "relative", ref: dropdownRef, children: [
     /* @__PURE__ */ jsx36(
       Button,
       {
@@ -4776,14 +4872,14 @@ var MoreOptionsDropdown = ({
         size: "icon",
         onClick: () => setOpen(!open),
         className: "h-9 w-9",
-        children: /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+        children: /* @__PURE__ */ jsxs23("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
           /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "1" }),
           /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "5", r: "1" }),
           /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "19", r: "1" })
         ] })
       }
     ),
-    open && /* @__PURE__ */ jsx36("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs22(
+    open && /* @__PURE__ */ jsx36("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs23(
       "button",
       {
         className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
@@ -4813,19 +4909,24 @@ var DataGridToolbar = ({
   onExport,
   exportFileName,
   pinnedRows,
+  columnVisibility,
   customButtons,
   moreOptions = []
 }) => {
-  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-2 px-4 py-3 border-b border-border bg-background", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-2 px-4 py-3 border-b border-border bg-background", children: [
     title && /* @__PURE__ */ jsx36("h3", { className: "text-sm font-semibold text-foreground shrink-0", children: title }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: [
       showQuickFilter && /* @__PURE__ */ jsx36(
         Input,
         {
           placeholder: "Search...",
           value: globalFilter ?? "",
           onChange: (e) => setGlobalFilter(e.target.value),
-          className: "h-9 min-w-[120px] flex-1"
+          className: "h-9 min-w-[120px] flex-1",
+          endAdornment: /* @__PURE__ */ jsxs23("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-muted-foreground", children: [
+            /* @__PURE__ */ jsx36("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ jsx36("path", { d: "m21 21-4.3-4.3" })
+          ] })
         }
       ),
       showColumnSelector && /* @__PURE__ */ jsx36(ColumnVisibilityDropdown, { table }),
@@ -4836,7 +4937,8 @@ var DataGridToolbar = ({
           rows,
           columns,
           pinnedRows,
-          fileName: exportFileName
+          fileName: exportFileName,
+          columnVisibility
         }
       ),
       customButtons,
@@ -5085,7 +5187,7 @@ var VirtualizedTableBody = ({
   }
   const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
   const paddingBottom = virtualRows.length > 0 ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
-  return /* @__PURE__ */ jsxs22("tbody", { children: [
+  return /* @__PURE__ */ jsxs23("tbody", { children: [
     paddingTop > 0 && /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
       "td",
       {
@@ -5588,7 +5690,7 @@ function DataGrid({
     if (minHeight) containerStyle.minHeight = minHeight;
     if (maxHeight) containerStyle.maxHeight = maxHeight;
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn(
@@ -5612,18 +5714,19 @@ function DataGrid({
             onExport,
             exportFileName,
             pinnedRows,
+            columnVisibility,
             customButtons,
             moreOptions
           }
         ),
-        /* @__PURE__ */ jsx36("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx36("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxs23(
           "div",
           {
             ref: tableContainerRef,
             className: "relative flex-1 overflow-auto",
             children: [
-              loading && /* @__PURE__ */ jsx36("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx36(Spinner, { size: "lg" }) }),
-              /* @__PURE__ */ jsxs22(
+              loading && /* @__PURE__ */ jsx36("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx36(Spinner2, { size: "lg" }) }),
+              /* @__PURE__ */ jsxs23(
                 "table",
                 {
                   className: "border-separate border-spacing-0 table-fixed",
@@ -5643,7 +5746,7 @@ function DataGrid({
                         column.id
                       );
                     }) }),
-                    /* @__PURE__ */ jsxs22("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
+                    /* @__PURE__ */ jsxs23("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
                       columnGroupingModel && columnGroupingModel.length > 0 && /* @__PURE__ */ jsx36(
                         ColumnGroupHeader,
                         {
@@ -5663,7 +5766,7 @@ function DataGrid({
                         const colWidth = columnWidths.get(header.column.id);
                         const effectiveWidth = colWidth?.width || header.getSize();
                         const pinnedInfo = pinnedColumnOffsets?.get(header.column.id);
-                        return /* @__PURE__ */ jsxs22(
+                        return /* @__PURE__ */ jsxs23(
                           "th",
                           {
                             title: meta?.headerName,
@@ -5691,7 +5794,7 @@ function DataGrid({
                             },
                             onClick: header.column.getToggleSortingHandler(),
                             children: [
-                              /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 min-w-0", children: [
+                              /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 min-w-0", children: [
                                 /* @__PURE__ */ jsx36("div", { className: cn(
                                   "flex-1 truncate min-w-0",
                                   align === "center" && "text-center",
@@ -5794,7 +5897,7 @@ function DataGrid({
             paginationMode
           }
         ),
-        effectiveVirtualized && !hideFooter && /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
+        effectiveVirtualized && !hideFooter && /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs23("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
           table.getFilteredRowModel().rows.length,
           " total rows (virtualized)"
         ] }) })
@@ -5807,7 +5910,7 @@ DataGrid.displayName = "DataGrid";
 // src/components/list.tsx
 import * as React37 from "react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 var List2 = React37.forwardRef(
   ({
     dividers = false,
@@ -5844,7 +5947,7 @@ var ListItem = React37.forwardRef(
     className,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs23(
+  }, ref) => /* @__PURE__ */ jsxs24(
     "li",
     {
       ref,
@@ -5942,7 +6045,7 @@ var ListItemText = React37.forwardRef(
     className,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs23(
+  }, ref) => /* @__PURE__ */ jsxs24(
     "div",
     {
       ref,
@@ -6213,7 +6316,7 @@ import {
   LabelList
 } from "recharts";
 import { accentColors as accentColors2 } from "@onesaz/tokens";
-import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var BarChart = ({
   data,
   dataKey,
@@ -6266,7 +6369,7 @@ var BarChart = ({
       )
     },
     keyConfig.dataKey
-  )) : /* @__PURE__ */ jsxs24(
+  )) : /* @__PURE__ */ jsxs25(
     Bar,
     {
       dataKey,
@@ -6304,7 +6407,7 @@ var BarChart = ({
       contentStyle: tooltip.contentStyle
     }
   ) : showTooltip ? /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
-  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs25(
     RechartsBarChart,
     {
       data,
@@ -6391,7 +6494,7 @@ var LineChart = ({
       name: name || dataKey
     }
   );
-  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsLineChart, { data, margin, children: [
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs25(RechartsLineChart, { data, margin, children: [
     showGrid && /* @__PURE__ */ jsx39(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
     xAxis && !xAxis.hide && /* @__PURE__ */ jsx39(
       XAxis,
@@ -6444,7 +6547,7 @@ var PieChart = ({
     accentColors2[accentColor][1]
   ];
   const chartColors = colors || defaultColors;
-  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs25(RechartsPieChart, { children: [
     /* @__PURE__ */ jsx39(
       Pie,
       {
@@ -6513,7 +6616,7 @@ var AreaChart = ({
       name: name || dataKey
     }
   );
-  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsAreaChart, { data, margin, children: [
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs25(RechartsAreaChart, { data, margin, children: [
     showGrid && /* @__PURE__ */ jsx39(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
     xAxis && !xAxis.hide && /* @__PURE__ */ jsx39(
       XAxis,
@@ -6556,7 +6659,7 @@ var ScatterChart = ({
   className
 }) => {
   const { accentColor } = useTheme();
-  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsScatterChart, { data, margin, children: [
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs25(RechartsScatterChart, { data, margin, children: [
     showGrid && /* @__PURE__ */ jsx39(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
     xAxis && !xAxis.hide && /* @__PURE__ */ jsx39(
       XAxis,
@@ -6597,7 +6700,7 @@ var RadarChart = ({
   className
 }) => {
   const { accentColor } = useTheme();
-  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsRadarChart, { data, children: [
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs25(RechartsRadarChart, { data, children: [
     /* @__PURE__ */ jsx39(PolarGrid, {}),
     /* @__PURE__ */ jsx39(PolarAngleAxis, { dataKey: nameKey }),
     /* @__PURE__ */ jsx39(PolarRadiusAxis, {}),
@@ -6659,8 +6762,8 @@ var DonutChart = ({
     }
   };
   const styling = { ...defaultAdvancedStyling, ...advancedStyling };
-  const gradientDefs = styling.enableGradients ? /* @__PURE__ */ jsxs24("defs", { children: [
-    styling.enableShadows && /* @__PURE__ */ jsxs24(
+  const gradientDefs = styling.enableGradients ? /* @__PURE__ */ jsxs25("defs", { children: [
+    styling.enableShadows && /* @__PURE__ */ jsxs25(
       "filter",
       {
         id: "deepInsetShadow",
@@ -6721,7 +6824,7 @@ var DonutChart = ({
         )
       }
     ),
-    styling.gradients?.map((gradient) => /* @__PURE__ */ jsxs24(
+    styling.gradients?.map((gradient) => /* @__PURE__ */ jsxs25(
       "linearGradient",
       {
         id: gradient.id,
@@ -6746,7 +6849,7 @@ var DonutChart = ({
       contentStyle: tooltip.contentStyle
     }
   ) : showTooltip ? /* @__PURE__ */ jsx39(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
-  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs25(RechartsPieChart, { children: [
     gradientDefs,
     /* @__PURE__ */ jsx39(
       Pie,
@@ -6808,7 +6911,7 @@ var ProgressCard = ({
   const bgShadowId = `progress-bg-shadow-${Math.random().toString(36).substr(2, 9)}`;
   const [startColor, endColor] = colorFn(normalizedPercentage);
   const percentageTextColor = typography.percentageColorAuto ? normalizedPercentage <= 30 ? "text-green-600" : normalizedPercentage <= 50 ? "text-blue-600" : "text-red-600" : "text-gray-900 dark:text-gray-100";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cn(
@@ -6818,16 +6921,16 @@ var ProgressCard = ({
       ),
       onClick: () => onClick?.(questionNum),
       children: [
-        /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsx39("span", { className: cn("font-bold", typography.questionFontSize, typography.questionColor), children: questionNum }),
-          /* @__PURE__ */ jsxs24("span", { className: cn("font-bold", typography.percentageFontSize, percentageTextColor), children: [
+          /* @__PURE__ */ jsxs25("span", { className: cn("font-bold", typography.percentageFontSize, percentageTextColor), children: [
             normalizedPercentage.toFixed(1),
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ jsx39("div", { className: "flex items-center", style: { width: `${donutSize + 10}px`, height: `${donutSize + 10}px` }, children: /* @__PURE__ */ jsxs24("svg", { width: donutSize + 10, height: donutSize + 10, viewBox: "0 0 100 100", children: [
-          /* @__PURE__ */ jsxs24("defs", { children: [
-            enableGradients && /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsx39("div", { className: "flex items-center", style: { width: `${donutSize + 10}px`, height: `${donutSize + 10}px` }, children: /* @__PURE__ */ jsxs25("svg", { width: donutSize + 10, height: donutSize + 10, viewBox: "0 0 100 100", children: [
+          /* @__PURE__ */ jsxs25("defs", { children: [
+            enableGradients && /* @__PURE__ */ jsxs25(
               "linearGradient",
               {
                 id: gradientId,
@@ -6841,8 +6944,8 @@ var ProgressCard = ({
                 ]
               }
             ),
-            enableShadows && /* @__PURE__ */ jsxs24(Fragment5, { children: [
-              /* @__PURE__ */ jsxs24(
+            enableShadows && /* @__PURE__ */ jsxs25(Fragment6, { children: [
+              /* @__PURE__ */ jsxs25(
                 "filter",
                 {
                   id: bgShadowId,
@@ -6973,7 +7076,7 @@ var ProgressDonut = ({
   if (!data || data.length === 0) {
     return /* @__PURE__ */ jsx39("div", { className: cn("text-gray-500", className), children: "No data provided" });
   }
-  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
+  return /* @__PURE__ */ jsx39("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx39(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs25(RechartsPieChart, { children: [
     /* @__PURE__ */ jsx39(
       Pie,
       {
@@ -7028,12 +7131,12 @@ var MultiProgressDonut = ({
     const shadowId = `progress-shadow-${index}`;
     const bgShadowId = `progress-bg-shadow-${index}`;
     const [startColor, endColor] = colorFn(percentage);
-    return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-2", children: [
+    return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-center gap-2", children: [
       item.label && /* @__PURE__ */ jsx39("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: item.label }),
-      /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs24("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
-          /* @__PURE__ */ jsxs24("defs", { children: [
-            enableGradients && /* @__PURE__ */ jsxs24(
+      /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs25("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
+          /* @__PURE__ */ jsxs25("defs", { children: [
+            enableGradients && /* @__PURE__ */ jsxs25(
               "linearGradient",
               {
                 id: gradientId,
@@ -7047,8 +7150,8 @@ var MultiProgressDonut = ({
                 ]
               }
             ),
-            enableShadows && /* @__PURE__ */ jsxs24(Fragment5, { children: [
-              /* @__PURE__ */ jsxs24(
+            enableShadows && /* @__PURE__ */ jsxs25(Fragment6, { children: [
+              /* @__PURE__ */ jsxs25(
                 "filter",
                 {
                   id: bgShadowId,
@@ -7140,7 +7243,7 @@ var MultiProgressDonut = ({
             }
           )
         ] }),
-        showPercentage && /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs24("span", { className: "text-xs font-bold text-gray-700 dark:text-gray-300", children: [
+        showPercentage && /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs25("span", { className: "text-xs font-bold text-gray-700 dark:text-gray-300", children: [
           percentage.toFixed(1),
           "%"
         ] }) })
@@ -7243,7 +7346,7 @@ var PackedBubbleChart = ({
     if (colorByValue) return colorByValue(item.value);
     return defaultColor;
   };
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       ref: containerRef,
@@ -7258,7 +7361,7 @@ var PackedBubbleChart = ({
             children: title
           }
         ),
-        /* @__PURE__ */ jsx39("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsx39("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs25(
           "g",
           {
             onClick: () => onBubbleClick?.(bubble.data),
@@ -7319,7 +7422,7 @@ var PackedBubbleChart = ({
 
 // src/components/bottom-navigation.tsx
 import * as React40 from "react";
-import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var BottomNavigationContext = React40.createContext({
   value: null,
   onChange: () => {
@@ -7354,7 +7457,7 @@ var BottomNavigationAction = React40.forwardRef(
       ctx.onChange(e, value);
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(
       "button",
       {
         ref,
@@ -7402,7 +7505,7 @@ BottomNavigationAction.displayName = "BottomNavigationAction";
 
 // src/components/breadcrumbs.tsx
 import * as React41 from "react";
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 var Breadcrumbs = React41.forwardRef(
   ({
     separator,
@@ -7444,7 +7547,7 @@ var Breadcrumbs = React41.forwardRef(
     } else {
       displayedItems = childArray;
     }
-    return /* @__PURE__ */ jsx41("nav", { ref, "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx41("ol", { className: "flex items-center gap-1.5 flex-wrap", children: displayedItems.map((child, index) => /* @__PURE__ */ jsxs26("li", { className: "flex items-center gap-1.5", children: [
+    return /* @__PURE__ */ jsx41("nav", { ref, "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx41("ol", { className: "flex items-center gap-1.5 flex-wrap", children: displayedItems.map((child, index) => /* @__PURE__ */ jsxs27("li", { className: "flex items-center gap-1.5", children: [
       index > 0 && /* @__PURE__ */ jsx41("span", { className: "flex items-center", "aria-hidden": "true", children: separatorElement }),
       child
     ] }, index)) }) });
@@ -7554,7 +7657,7 @@ var BreadcrumbEllipsis = React41.forwardRef(
       "aria-hidden": "true",
       className: cn("text-sm text-muted-foreground", className),
       ...props,
-      children: /* @__PURE__ */ jsxs26(
+      children: /* @__PURE__ */ jsxs27(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -7593,14 +7696,14 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 // src/components/dropdown-menu.tsx
 import * as React42 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React42.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs27(
+var DropdownMenuSubTrigger = React42.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs28(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -7683,7 +7786,7 @@ var DropdownMenuItem = React42.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React42.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs27(
+var DropdownMenuCheckboxItem = React42.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs28(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -7715,7 +7818,7 @@ var DropdownMenuCheckboxItem = React42.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React42.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs27(
+var DropdownMenuRadioItem = React42.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs28(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -7847,9 +7950,9 @@ Backdrop.displayName = "Backdrop";
 // src/components/snackbar.tsx
 import * as React44 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var SnackbarContent = React44.forwardRef(
-  ({ className, message, action, ...props }, ref) => /* @__PURE__ */ jsxs28(
+  ({ className, message, action, ...props }, ref) => /* @__PURE__ */ jsxs29(
     "div",
     {
       ref,
@@ -8057,7 +8160,7 @@ function SnackbarProvider({
     });
     return map;
   }, [items]);
-  return /* @__PURE__ */ jsxs28(SnackbarContext.Provider, { value: { enqueueSnackbar, closeSnackbar }, children: [
+  return /* @__PURE__ */ jsxs29(SnackbarContext.Provider, { value: { enqueueSnackbar, closeSnackbar }, children: [
     children,
     typeof document !== "undefined" && Array.from(groups.entries()).map(([posKey, posItems]) => {
       const [vertical, horizontal] = posKey.split("-");
@@ -8092,7 +8195,7 @@ var useSnackbar = () => React44.useContext(SnackbarContext);
 // src/components/drawer.tsx
 import * as React45 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var Drawer = DialogPrimitive2.Root;
 var DrawerTrigger = DialogPrimitive2.Trigger;
 var DrawerClose = DialogPrimitive2.Close;
@@ -8117,9 +8220,9 @@ var slideVariants = {
   top: "inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
   bottom: "inset-x-0 bottom-0 w-full data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
 };
-var DrawerContent = React45.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs29(DrawerPortal, { children: [
+var DrawerContent = React45.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs30(DrawerPortal, { children: [
   /* @__PURE__ */ jsx45(DrawerOverlay, {}),
-  /* @__PURE__ */ jsxs29(
+  /* @__PURE__ */ jsxs30(
     DialogPrimitive2.Content,
     {
       ref,
@@ -8133,7 +8236,7 @@ var DrawerContent = React45.forwardRef(({ side = "right", showClose = true, clas
       ...props,
       children: [
         children,
-        showClose && /* @__PURE__ */ jsxs29(
+        showClose && /* @__PURE__ */ jsxs30(
           DrawerClose,
           {
             className: cn(
@@ -8236,7 +8339,7 @@ var SheetFooter = DrawerFooter;
 
 // src/components/topbar.tsx
 import * as React46 from "react";
-import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var sizeClasses5 = {
   sm: "h-12",
   md: "h-14",
@@ -8264,7 +8367,7 @@ var TopBar = React46.forwardRef(
 TopBar.displayName = "TopBar";
 var TopBarBrand = React46.forwardRef(
   ({ className, logo, name, href, children, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs30(Fragment6, { children: [
+    const content = /* @__PURE__ */ jsxs31(Fragment7, { children: [
       logo && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: logo }),
       name && /* @__PURE__ */ jsx46("span", { className: "font-semibold text-lg", children: name }),
       children
@@ -8346,7 +8449,7 @@ TopBarDivider.displayName = "TopBarDivider";
 
 // src/components/sidebar.tsx
 import * as React47 from "react";
-import { Fragment as Fragment7, jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 var SidebarContext = React47.createContext(void 0);
 var useSidebar = () => {
   const context = React47.useContext(SidebarContext);
@@ -8444,7 +8547,7 @@ SidebarFooter.displayName = "SidebarFooter";
 var SidebarGroup = React47.forwardRef(
   ({ className, label, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+    return /* @__PURE__ */ jsxs32("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
       label && !collapsed && /* @__PURE__ */ jsx47("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
       label && collapsed && /* @__PURE__ */ jsx47("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx47("div", { className: "h-px w-4 bg-border" }) }),
       /* @__PURE__ */ jsx47("div", { className: "space-y-1", children })
@@ -8455,9 +8558,9 @@ SidebarGroup.displayName = "SidebarGroup";
 var SidebarItem = React47.forwardRef(
   ({ className, icon, active, disabled, badge, onClick, href, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    const content = /* @__PURE__ */ jsxs31(Fragment7, { children: [
+    const content = /* @__PURE__ */ jsxs32(Fragment8, { children: [
       icon && /* @__PURE__ */ jsx47("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
-      !collapsed && /* @__PURE__ */ jsxs31(Fragment7, { children: [
+      !collapsed && /* @__PURE__ */ jsxs32(Fragment8, { children: [
         /* @__PURE__ */ jsx47("span", { className: "flex-1 truncate", children }),
         badge && /* @__PURE__ */ jsx47("span", { className: "shrink-0", children: badge })
       ] })
@@ -8499,8 +8602,8 @@ var SidebarSubMenu = React47.forwardRef(
     if (collapsed) {
       return /* @__PURE__ */ jsx47(SidebarItem, { icon, className, children: label });
     }
-    return /* @__PURE__ */ jsxs31("div", { ref, className, ...props, children: [
-      /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsxs32(
         "div",
         {
           className: cn(
@@ -8552,7 +8655,7 @@ var SidebarToggle = React47.forwardRef(
         ),
         "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
         ...props,
-        children: children || /* @__PURE__ */ jsxs31(
+        children: children || /* @__PURE__ */ jsxs32(
           "svg",
           {
             className: cn("h-5 w-5 transition-transform", collapsed && "rotate-180"),
@@ -8578,7 +8681,7 @@ SidebarToggle.displayName = "SidebarToggle";
 
 // src/components/sidebar-rail.tsx
 import * as React48 from "react";
-import { Fragment as Fragment8, jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 var SidebarRailContext = React48.createContext(void 0);
 var useSidebarRail = () => {
   const context = React48.useContext(SidebarRailContext);
@@ -8775,7 +8878,7 @@ var IconRailItem = React48.forwardRef(
         setActiveRail(railId);
       }
     };
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs33(
       "button",
       {
         ref,
@@ -8811,7 +8914,7 @@ var RailPanel = React48.forwardRef(
       }
     };
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs33(
       "div",
       {
         ref,
@@ -8824,7 +8927,7 @@ var RailPanel = React48.forwardRef(
         onMouseLeave: handleMouseLeave,
         ...props,
         children: [
-          title && /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
+          title && /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
             /* @__PURE__ */ jsx48("span", { className: "font-semibold text-sm", children: title }),
             /* @__PURE__ */ jsx48(
               "button",
@@ -8833,7 +8936,7 @@ var RailPanel = React48.forwardRef(
                 onClick: () => setActiveRail(null),
                 className: "p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground cursor-pointer",
                 "aria-label": "Close panel",
-                children: /* @__PURE__ */ jsxs32(
+                children: /* @__PURE__ */ jsxs33(
                   "svg",
                   {
                     className: "h-4 w-4",
@@ -8862,7 +8965,7 @@ var RailPanel = React48.forwardRef(
 RailPanel.displayName = "RailPanel";
 var RailPanelGroup = React48.forwardRef(
   ({ className, label, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs32("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+    return /* @__PURE__ */ jsxs33("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
       label && /* @__PURE__ */ jsx48("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
       /* @__PURE__ */ jsx48("div", { className: "space-y-1", children })
     ] });
@@ -8871,7 +8974,7 @@ var RailPanelGroup = React48.forwardRef(
 RailPanelGroup.displayName = "RailPanelGroup";
 var RailPanelItem = React48.forwardRef(
   ({ className, icon, active, disabled, badge, href, children, onClick, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs32(Fragment8, { children: [
+    const content = /* @__PURE__ */ jsxs33(Fragment9, { children: [
       icon && /* @__PURE__ */ jsx48("span", { className: "shrink-0", children: icon }),
       /* @__PURE__ */ jsx48("span", { className: "flex-1 truncate", children }),
       badge && /* @__PURE__ */ jsx48("span", { className: "shrink-0", children: badge })
@@ -8903,18 +9006,18 @@ RailPanelItem.displayName = "RailPanelItem";
 
 // src/playground.tsx
 import * as React49 from "react";
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
-var Section = ({ title, children }) => /* @__PURE__ */ jsxs33("div", { className: "mb-8", children: [
+import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs34("div", { className: "mb-8", children: [
   /* @__PURE__ */ jsx49("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
   /* @__PURE__ */ jsx49("div", { className: "p-4 border border-border rounded-lg bg-background", children })
 ] });
 var ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx49(Label, { children: "Theme:" }),
-    /* @__PURE__ */ jsxs33(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
+    /* @__PURE__ */ jsxs34(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
       /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select theme" }) }),
-      /* @__PURE__ */ jsxs33(SelectContent, { children: [
+      /* @__PURE__ */ jsxs34(SelectContent, { children: [
         /* @__PURE__ */ jsx49(SelectItem, { value: "light", children: "Light" }),
         /* @__PURE__ */ jsx49(SelectItem, { value: "dark", children: "Dark" }),
         /* @__PURE__ */ jsx49(SelectItem, { value: "system", children: "System" })
@@ -8937,13 +9040,13 @@ var PlaygroundContent = () => {
     { value: "svelte", label: "Svelte" },
     { value: "solid", label: "SolidJS" }
   ];
-  return /* @__PURE__ */ jsx49("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs33("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between mb-8", children: [
+  return /* @__PURE__ */ jsx49("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs34("div", { className: "max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between mb-8", children: [
       /* @__PURE__ */ jsx49("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
       /* @__PURE__ */ jsx49(ThemeToggle, {})
     ] }),
-    /* @__PURE__ */ jsxs33(Section, { title: "Button", children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap gap-4", children: [
+    /* @__PURE__ */ jsxs34(Section, { title: "Button", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex flex-wrap gap-4", children: [
         /* @__PURE__ */ jsx49(Button, { variant: "default", children: "Default" }),
         /* @__PURE__ */ jsx49(Button, { variant: "destructive", children: "Destructive" }),
         /* @__PURE__ */ jsx49(Button, { variant: "outline", children: "Outline" }),
@@ -8951,19 +9054,19 @@ var PlaygroundContent = () => {
         /* @__PURE__ */ jsx49(Button, { variant: "ghost", children: "Ghost" }),
         /* @__PURE__ */ jsx49(Button, { variant: "link", children: "Link" })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex flex-wrap gap-4 mt-4", children: [
         /* @__PURE__ */ jsx49(Button, { size: "sm", children: "Small" }),
         /* @__PURE__ */ jsx49(Button, { size: "default", children: "Default" }),
         /* @__PURE__ */ jsx49(Button, { size: "lg", children: "Large" }),
         /* @__PURE__ */ jsx49(Button, { size: "icon", children: "\u{1F514}" })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex flex-wrap gap-4 mt-4", children: [
         /* @__PURE__ */ jsx49(Button, { disabled: true, children: "Disabled" }),
         /* @__PURE__ */ jsx49(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx49(Section, { title: "Input", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs33("div", { children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Input", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx49(Label, { htmlFor: "input-default", children: "Default Input" }),
         /* @__PURE__ */ jsx49(
           Input,
@@ -8975,17 +9078,17 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx49(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
         /* @__PURE__ */ jsx49(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx49(Label, { htmlFor: "input-type", children: "Email Input" }),
         /* @__PURE__ */ jsx49(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs33("div", { children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx49(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
         /* @__PURE__ */ jsx49(
           Textarea,
@@ -8997,34 +9100,34 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx49(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
         /* @__PURE__ */ jsx49(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Select", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs33("div", { children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Select", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx49(Label, { children: "Default Select" }),
-        /* @__PURE__ */ jsxs33(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
+        /* @__PURE__ */ jsxs34(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
           /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select an option..." }) }),
-          /* @__PURE__ */ jsxs33(SelectContent, { children: [
+          /* @__PURE__ */ jsxs34(SelectContent, { children: [
             /* @__PURE__ */ jsx49(SelectItem, { value: "option1", children: "Option 1" }),
             /* @__PURE__ */ jsx49(SelectItem, { value: "option2", children: "Option 2" }),
             /* @__PURE__ */ jsx49(SelectItem, { value: "option3", children: "Option 3" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx49(Label, { children: "Grouped Select" }),
-        /* @__PURE__ */ jsxs33(SelectNamespace, { children: [
+        /* @__PURE__ */ jsxs34(SelectNamespace, { children: [
           /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select a food..." }) }),
-          /* @__PURE__ */ jsxs33(SelectContent, { children: [
-            /* @__PURE__ */ jsxs33(SelectGroup, { children: [
+          /* @__PURE__ */ jsxs34(SelectContent, { children: [
+            /* @__PURE__ */ jsxs34(SelectGroup, { children: [
               /* @__PURE__ */ jsx49(SelectLabel, { children: "Fruits" }),
               /* @__PURE__ */ jsx49(SelectItem, { value: "apple", children: "Apple" }),
               /* @__PURE__ */ jsx49(SelectItem, { value: "banana", children: "Banana" })
             ] }),
-            /* @__PURE__ */ jsxs33(SelectGroup, { children: [
+            /* @__PURE__ */ jsxs34(SelectGroup, { children: [
               /* @__PURE__ */ jsx49(SelectLabel, { children: "Vegetables" }),
               /* @__PURE__ */ jsx49(SelectItem, { value: "carrot", children: "Carrot" }),
               /* @__PURE__ */ jsx49(SelectItem, { value: "potato", children: "Potato" })
@@ -9032,15 +9135,15 @@ var PlaygroundContent = () => {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs34("div", { children: [
         /* @__PURE__ */ jsx49(Label, { children: "Disabled Select" }),
-        /* @__PURE__ */ jsxs33(SelectNamespace, { disabled: true, children: [
+        /* @__PURE__ */ jsxs34(SelectNamespace, { disabled: true, children: [
           /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Disabled..." }) }),
           /* @__PURE__ */ jsx49(SelectContent, { children: /* @__PURE__ */ jsx49(SelectItem, { value: "none", children: "None" }) })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx49("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs33("div", { children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx49("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs34("div", { children: [
       /* @__PURE__ */ jsx49(Label, { children: "Framework" }),
       /* @__PURE__ */ jsx49(
         Combobox,
@@ -9054,8 +9157,8 @@ var PlaygroundContent = () => {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx49(
           Checkbox,
           {
@@ -9066,12 +9169,12 @@ var PlaygroundContent = () => {
         ),
         /* @__PURE__ */ jsx49(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx49(Checkbox, { id: "checkbox-disabled", disabled: true }),
         /* @__PURE__ */ jsx49(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
       ] }),
       /* @__PURE__ */ jsx49(Separator, {}),
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx49(
           Switch,
           {
@@ -9082,76 +9185,76 @@ var PlaygroundContent = () => {
         ),
         /* @__PURE__ */ jsx49(Label, { htmlFor: "switch", children: "Enable notifications" })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx49(Switch, { id: "switch-disabled", disabled: true }),
         /* @__PURE__ */ jsx49(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Badge", children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap gap-4", children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Badge", children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-wrap gap-4", children: [
       /* @__PURE__ */ jsx49(Badge, { children: "Default" }),
       /* @__PURE__ */ jsx49(Badge, { color: "success", children: "Success" }),
       /* @__PURE__ */ jsx49(Badge, { color: "warning", children: "Warning" }),
       /* @__PURE__ */ jsx49(Badge, { color: "error", variant: "outlined", children: "Error" }),
       /* @__PURE__ */ jsx49(Badge, { color: "destructive", variant: "text", children: "Destructive" })
     ] }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Card", children: /* @__PURE__ */ jsxs33("div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs33(Card, { children: [
-        /* @__PURE__ */ jsxs33(CardHeader, { children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Card", children: /* @__PURE__ */ jsxs34("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs34(Card, { children: [
+        /* @__PURE__ */ jsxs34(CardHeader, { children: [
           /* @__PURE__ */ jsx49(CardTitle, { children: "Card Title" }),
           /* @__PURE__ */ jsx49(CardDescription, { children: "Card description goes here" })
         ] }),
         /* @__PURE__ */ jsx49(CardContent, { children: /* @__PURE__ */ jsx49("p", { className: "text-foreground", children: "This is the card content area." }) }),
-        /* @__PURE__ */ jsxs33(CardFooter, { children: [
+        /* @__PURE__ */ jsxs34(CardFooter, { children: [
           /* @__PURE__ */ jsx49(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
           /* @__PURE__ */ jsx49(Button, { children: "Submit" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs33(Card, { children: [
-        /* @__PURE__ */ jsxs33(CardHeader, { children: [
+      /* @__PURE__ */ jsxs34(Card, { children: [
+        /* @__PURE__ */ jsxs34(CardHeader, { children: [
           /* @__PURE__ */ jsx49(CardTitle, { children: "Another Card" }),
           /* @__PURE__ */ jsx49(CardDescription, { children: "With different content" })
         ] }),
-        /* @__PURE__ */ jsx49(CardContent, { children: /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx49(CardContent, { children: /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx49(Label, { htmlFor: "card-input", children: "Name" }),
           /* @__PURE__ */ jsx49(Input, { id: "card-input", placeholder: "Enter name..." })
         ] }) }),
         /* @__PURE__ */ jsx49(CardFooter, { children: /* @__PURE__ */ jsx49(Button, { className: "w-full", children: "Save" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs33(Section, { title: "Dialog", children: [
+    /* @__PURE__ */ jsxs34(Section, { title: "Dialog", children: [
       /* @__PURE__ */ jsx49(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
-      /* @__PURE__ */ jsx49(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs33(DialogContent, { children: [
-        /* @__PURE__ */ jsxs33(DialogHeader, { children: [
+      /* @__PURE__ */ jsx49(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs34(DialogContent, { children: [
+        /* @__PURE__ */ jsxs34(DialogHeader, { children: [
           /* @__PURE__ */ jsx49(DialogTitle, { children: "Create New Zone" }),
           /* @__PURE__ */ jsx49(DialogDescription, { children: "Fill in the details below to create a new zone." })
         ] }),
-        /* @__PURE__ */ jsxs33("div", { className: "space-y-4 py-4", children: [
-          /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsxs34("div", { className: "space-y-4 py-4", children: [
+          /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs34("div", { children: [
               /* @__PURE__ */ jsx49(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
               /* @__PURE__ */ jsx49(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
             ] }),
-            /* @__PURE__ */ jsxs33("div", { children: [
+            /* @__PURE__ */ jsxs34("div", { children: [
               /* @__PURE__ */ jsx49(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
               /* @__PURE__ */ jsx49(Input, { id: "zone-code", placeholder: "eg :hyd022" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs33("div", { children: [
+          /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs34("div", { children: [
               /* @__PURE__ */ jsx49(Label, { children: "State *" }),
-              /* @__PURE__ */ jsxs33(SelectNamespace, { children: [
+              /* @__PURE__ */ jsxs34(SelectNamespace, { children: [
                 /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select state" }) }),
-                /* @__PURE__ */ jsxs33(SelectContent, { children: [
+                /* @__PURE__ */ jsxs34(SelectContent, { children: [
                   /* @__PURE__ */ jsx49(SelectItem, { value: "telangana", children: "TELANGANA" }),
                   /* @__PURE__ */ jsx49(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs33("div", { children: [
+            /* @__PURE__ */ jsxs34("div", { children: [
               /* @__PURE__ */ jsx49(Label, { children: "District *" }),
-              /* @__PURE__ */ jsxs33(SelectNamespace, { children: [
+              /* @__PURE__ */ jsxs34(SelectNamespace, { children: [
                 /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ jsxs33(SelectContent, { children: [
+                /* @__PURE__ */ jsxs34(SelectContent, { children: [
                   /* @__PURE__ */ jsx49(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
                   /* @__PURE__ */ jsx49(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
                 ] })
@@ -9159,34 +9262,34 @@ var PlaygroundContent = () => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs33(DialogFooter, { children: [
+        /* @__PURE__ */ jsxs34(DialogFooter, { children: [
           /* @__PURE__ */ jsx49(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
           /* @__PURE__ */ jsx49(Button, { onClick: () => setDialogOpen(false), children: "Create" })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx49(Section, { title: "Table", children: /* @__PURE__ */ jsxs33(TableNamespace, { children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Table", children: /* @__PURE__ */ jsxs34(TableNamespace, { children: [
       /* @__PURE__ */ jsx49(TableCaption, { children: "A list of recent invoices" }),
-      /* @__PURE__ */ jsx49(TableHeader, { children: /* @__PURE__ */ jsxs33(TableRow, { children: [
+      /* @__PURE__ */ jsx49(TableHeader, { children: /* @__PURE__ */ jsxs34(TableRow, { children: [
         /* @__PURE__ */ jsx49(TableHead, { children: "Invoice" }),
         /* @__PURE__ */ jsx49(TableHead, { children: "Status" }),
         /* @__PURE__ */ jsx49(TableHead, { children: "Method" }),
         /* @__PURE__ */ jsx49(TableHead, { className: "text-right", children: "Amount" })
       ] }) }),
-      /* @__PURE__ */ jsxs33(TableBody, { children: [
-        /* @__PURE__ */ jsxs33(TableRow, { children: [
+      /* @__PURE__ */ jsxs34(TableBody, { children: [
+        /* @__PURE__ */ jsxs34(TableRow, { children: [
           /* @__PURE__ */ jsx49(TableCell, { children: "INV001" }),
           /* @__PURE__ */ jsx49(TableCell, { children: /* @__PURE__ */ jsx49(Badge, { color: "success", children: "Paid" }) }),
           /* @__PURE__ */ jsx49(TableCell, { children: "Credit Card" }),
           /* @__PURE__ */ jsx49(TableCell, { className: "text-right", children: "$250.00" })
         ] }),
-        /* @__PURE__ */ jsxs33(TableRow, { children: [
+        /* @__PURE__ */ jsxs34(TableRow, { children: [
           /* @__PURE__ */ jsx49(TableCell, { children: "INV002" }),
           /* @__PURE__ */ jsx49(TableCell, { children: /* @__PURE__ */ jsx49(Badge, { color: "warning", variant: "outlined", children: "Pending" }) }),
           /* @__PURE__ */ jsx49(TableCell, { children: "PayPal" }),
           /* @__PURE__ */ jsx49(TableCell, { className: "text-right", children: "$150.00" })
         ] }),
-        /* @__PURE__ */ jsxs33(TableRow, { children: [
+        /* @__PURE__ */ jsxs34(TableRow, { children: [
           /* @__PURE__ */ jsx49(TableCell, { children: "INV003" }),
           /* @__PURE__ */ jsx49(TableCell, { children: /* @__PURE__ */ jsx49(Badge, { color: "error", variant: "outlined", children: "Failed" }) }),
           /* @__PURE__ */ jsx49(TableCell, { children: "Bank Transfer" }),
@@ -9194,7 +9297,7 @@ var PlaygroundContent = () => {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Pagination", children: /* @__PURE__ */ jsx49(PaginationNamespace, { children: /* @__PURE__ */ jsxs33(PaginationContent, { children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Pagination", children: /* @__PURE__ */ jsx49(PaginationNamespace, { children: /* @__PURE__ */ jsxs34(PaginationContent, { children: [
       /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
       /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationLink, { isActive: true, children: "1" }) }),
       /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationLink, { children: "2" }) }),
@@ -9202,31 +9305,31 @@ var PlaygroundContent = () => {
       /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationEllipsis, {}) }),
       /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationNext, { onClick: () => console.log("Next") }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ jsxs33("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx49(Spinner, { size: "sm" }),
+    /* @__PURE__ */ jsx49(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx49(Spinner2, { size: "sm" }),
         /* @__PURE__ */ jsx49("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx49(Spinner, { size: "default" }),
+      /* @__PURE__ */ jsxs34("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx49(Spinner2, { size: "default" }),
         /* @__PURE__ */ jsx49("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx49(Spinner, { size: "lg" }),
+      /* @__PURE__ */ jsxs34("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx49(Spinner2, { size: "lg" }),
         /* @__PURE__ */ jsx49("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Separator", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Separator", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx49("p", { className: "text-foreground", children: "Content above separator" }),
       /* @__PURE__ */ jsx49(Separator, {}),
       /* @__PURE__ */ jsx49("p", { className: "text-foreground", children: "Content below separator" }),
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center h-10", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center h-10", children: [
         /* @__PURE__ */ jsx49("span", { className: "text-foreground", children: "Left" }),
         /* @__PURE__ */ jsx49(Separator, { orientation: "vertical", className: "mx-4" }),
         /* @__PURE__ */ jsx49("span", { className: "text-foreground", children: "Right" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx49(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx49(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx49("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
       /* @__PURE__ */ jsx49("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
       /* @__PURE__ */ jsx49("p", { className: "text-accent", children: "text-accent - Accent color" }),
@@ -9421,7 +9524,7 @@ export {
   Snackbar,
   SnackbarContent,
   SnackbarProvider,
-  Spinner,
+  Spinner2 as Spinner,
   Stack,
   Switch,
   TableNamespace as Table,