npm - @onesaz/ui - Versions diffs - 0.4.3 → 0.4.5 - Mend

@onesaz/ui 0.4.3 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.js CHANGED Viewed

@@ -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(
@@ -1300,7 +1393,7 @@ var Checkbox = React12.forwardRef(
                 "flex items-center justify-center",
                 // Focus ring mirrors the hidden input's focus-visible state
                 "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-focus-visible:outline-none",
-                active ? "bg-accent border-accent text-accent-foreground" : "bg-background border-border text-transparent"
+                active ? "bg-accent border-accent text-accent-foreground" : "bg-background border-muted-foreground text-transparent"
               ),
               children: indeterminate ? (
                 // Dash for indeterminate
@@ -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",
@@ -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",
@@ -4007,8 +4100,8 @@ var Combobox = React35.forwardRef(
           ),
           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",
@@ -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 break-all", !singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
-            /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 shrink-0", children: [
+            /* @__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 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 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 w-[200px]",
+          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,