@mvn-ui/react 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React49 from 'react';
-import React49__default, { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useContext, cloneElement, useMemo, Fragment as Fragment$1 } from 'react';
+import * as React50 from 'react';
+import React50__default, { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useContext, cloneElement, useMemo, Fragment as Fragment$1 } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
@@ -43,6 +43,8 @@ import isEqual from 'react-fast-compare';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import useEmblaCarousel from 'embla-carousel-react';
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Legend, Line, BarChart as BarChart$1, Bar, PieChart as PieChart$1, Pie, Cell, AreaChart as AreaChart$1, Area, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';
+export { Area, Bar, Brush, CartesianGrid, Cell, Legend as ChartLegend, Tooltip as ChartTooltip, Line, Pie, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, ReferenceArea, ReferenceLine, ResponsiveContainer, Scatter, XAxis, YAxis, ZAxis } from 'recharts';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -286,7 +288,7 @@ var init_card = __esm({
         }
       }
     );
-    Card = React49.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    Card = React50.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -295,7 +297,7 @@ var init_card = __esm({
       }
     ));
     Card.displayName = "Card";
-    CardHeader = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardHeader = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -304,7 +306,7 @@ var init_card = __esm({
       }
     ));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -313,7 +315,7 @@ var init_card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardDescription = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -322,9 +324,9 @@ var init_card = __esm({
       }
     ));
     CardDescription.displayName = "CardDescription";
-    CardContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+    CardContent = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
     CardContent.displayName = "CardContent";
-    CardFooter = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -367,7 +369,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React49.forwardRef(
+var Button = React50.forwardRef(
   ({
     className,
     variant,
@@ -417,7 +419,7 @@ var Button = React49.forwardRef(
   }
 );
 Button.displayName = "Button";
-var IconButton = React49.forwardRef(
+var IconButton = React50.forwardRef(
   ({ icon, size = "icon", className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Button, { ref, size, className, ...props, children: icon });
   }
@@ -439,10 +441,10 @@ function ButtonGroup({
       "data-orientation": orientation,
       className: cn(
         "inline-flex",
+        className,
         isVertical ? "flex-col" : "flex-row",
         // Join children and normalize border radius so the group looks contiguous
-        isVertical ? "[&>*]:rounded-none [&>*]:-mt-px [&>:first-child]:mt-0 [&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md" : "[&>*]:rounded-none [&>*]:-ml-px [&>:first-child]:ml-0 [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md",
-        className
+        isVertical ? "[&>*]:rounded-none [&>*]:-mt-px [&>:first-child]:mt-0 [&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md" : "[&>*]:rounded-none [&>*]:-ml-px [&>:first-child]:ml-0 [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md"
       ),
       ...props
     }
@@ -511,7 +513,7 @@ var inputVariants = cva(
     }
   }
 );
-var Input = React49.forwardRef(
+var Input = React50.forwardRef(
   ({
     className,
     containerClassName,
@@ -529,12 +531,12 @@ var Input = React49.forwardRef(
     value,
     ...props
   }, ref) => {
-    const [showPassword, setShowPassword] = React49.useState(false);
-    const [internalValue, setInternalValue] = React49.useState(value || "");
-    const generatedId = React49.useId();
+    const [showPassword, setShowPassword] = React50.useState(false);
+    const [internalValue, setInternalValue] = React50.useState(value || "");
+    const generatedId = React50.useId();
     const inputId = id || generatedId;
     const hasError = !!error;
-    React49.useEffect(() => {
+    React50.useEffect(() => {
       setInternalValue(value || "");
     }, [value]);
     const handleClear = () => {
@@ -553,8 +555,8 @@ var Input = React49.forwardRef(
           children: label
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none [&_svg]:size-4", children: leftIcon }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+        leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 text-muted-foreground pointer-events-none flex items-center justify-center [&_svg]:size-4", children: leftIcon }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -579,7 +581,7 @@ var Input = React49.forwardRef(
             ...props
           }
         ),
-        (showClearButton || showPasswordToggle || rightIcon) && /* @__PURE__ */ jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [
+        (showClearButton || showPasswordToggle || rightIcon) && /* @__PURE__ */ jsxs("div", { className: "absolute right-3 flex items-center gap-1", children: [
           showClearButton && /* @__PURE__ */ jsx(
             "button",
             {
@@ -600,7 +602,7 @@ var Input = React49.forwardRef(
               children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4" })
             }
           ),
-          rightIcon && !showPasswordToggle && !showClearButton && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground [&_svg]:size-4", children: rightIcon })
+          rightIcon && !showPasswordToggle && !showClearButton && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex items-center justify-center [&_svg]:size-4", children: rightIcon })
         ] })
       ] }),
       error && /* @__PURE__ */ jsx(
@@ -643,7 +645,7 @@ var labelVariants = cva(
     }
   }
 );
-var Label = React49.forwardRef(({ className, variant, required, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React50.forwardRef(({ className, variant, required, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -684,7 +686,7 @@ var textareaVariants = cva(
     }
   }
 );
-var Textarea = React49.forwardRef(
+var Textarea = React50.forwardRef(
   ({
     className,
     containerClassName,
@@ -702,8 +704,8 @@ var Textarea = React49.forwardRef(
     id,
     ...props
   }, ref) => {
-    const internalRef = React49.useRef(null);
-    const [charCount, setCharCount] = React49.useState(0);
+    const internalRef = React50.useRef(null);
+    const [charCount, setCharCount] = React50.useState(0);
     const textareaRef = (node) => {
       internalRef.current = node;
       if (typeof ref === "function") {
@@ -712,14 +714,14 @@ var Textarea = React49.forwardRef(
         ref.current = node;
       }
     };
-    React49.useEffect(() => {
+    React50.useEffect(() => {
       if (autoResize && internalRef.current) {
         const textarea = internalRef.current;
         textarea.style.height = "auto";
         textarea.style.height = `${textarea.scrollHeight}px`;
       }
     }, [value, autoResize]);
-    const handleChange = React49.useCallback(
+    const handleChange = React50.useCallback(
       (e) => {
         if (showCount || maxLength) {
           setCharCount(e.target.value.length);
@@ -728,13 +730,13 @@ var Textarea = React49.forwardRef(
       },
       [onChange, showCount, maxLength]
     );
-    React49.useEffect(() => {
+    React50.useEffect(() => {
       if (showCount || maxLength) {
         setCharCount(String(value || "").length);
       }
     }, [value, showCount, maxLength]);
     const hasError = !!error;
-    const generatedId = React49.useId();
+    const generatedId = React50.useId();
     const textareaId = id || generatedId;
     return /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-2", containerClassName), children: [
       label && /* @__PURE__ */ jsx(
@@ -795,10 +797,10 @@ Textarea.displayName = "Textarea";
 
 // src/components/ui/select/index.tsx
 init_utils();
-var Select = React49.forwardRef(
+var Select = React50.forwardRef(
   ({ children, value, onValueChange, ...props }, _ref) => {
-    const [internalValue, setInternalValue] = React49.useState(value ?? "");
-    React49.useEffect(() => {
+    const [internalValue, setInternalValue] = React50.useState(value ?? "");
+    React50.useEffect(() => {
       setInternalValue(value ?? "");
     }, [value]);
     const handleValueChange = (newValue) => {
@@ -835,7 +837,7 @@ var triggerVariants = cva(
     }
   }
 );
-var SelectTrigger = React49.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React50.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -848,7 +850,7 @@ var SelectTrigger = React49.forwardRef(({ className, children, variant, ...props
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -861,7 +863,7 @@ var SelectScrollUpButton = React49.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -874,7 +876,7 @@ var SelectScrollDownButton = React49.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React49.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React50.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -902,7 +904,7 @@ var SelectContent = React49.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -914,7 +916,7 @@ var SelectLabel = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React50.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -930,7 +932,7 @@ var SelectItem = React49.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -957,8 +959,8 @@ var checkboxVariants = cva(
     }
   }
 );
-var Checkbox = React49.forwardRef(({ className, size, label, description, indeterminate, ...props }, ref) => {
-  const generatedId = React49.useId();
+var Checkbox = React50.forwardRef(({ className, size, label, description, indeterminate, ...props }, ref) => {
+  const generatedId = React50.useId();
   const checkboxId = props.id || generatedId;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
     /* @__PURE__ */ jsx(
@@ -1006,7 +1008,7 @@ var radioGroupVariants = cva("grid gap-2", {
     orientation: "vertical"
   }
 });
-var RadioGroup = React49.forwardRef(
+var RadioGroup = React50.forwardRef(
   ({
     className,
     orientation = "vertical",
@@ -1019,8 +1021,8 @@ var RadioGroup = React49.forwardRef(
     children,
     ...props
   }, ref) => {
-    const generatedId = React49.useId();
-    const defaultRenderItem = React49.useCallback(
+    const generatedId = React50.useId();
+    const defaultRenderItem = React50.useCallback(
       (item) => /* @__PURE__ */ jsxs(
         "div",
         {
@@ -1078,7 +1080,7 @@ var RadioGroup = React49.forwardRef(
   }
 );
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React49.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React50.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -1096,7 +1098,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/components/ui/switch/index.tsx
 init_utils();
-var Switch = React49.forwardRef(({ className, ...props }, ref) => {
+var Switch = React50.forwardRef(({ className, offNode, onNode, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     SwitchPrimitives.Root,
     {
@@ -1109,13 +1111,17 @@ var Switch = React49.forwardRef(({ className, ...props }, ref) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         SwitchPrimitives.Thumb,
         {
           className: cn(
-            "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+            "group pointer-events-none relative flex items-center justify-center h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
             "data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-          )
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute opacity-0 group-data-[state=checked]:opacity-100 transition-all duration-200", children: onNode }),
+            /* @__PURE__ */ jsx("span", { className: "absolute opacity-100 group-data-[state=checked]:opacity-0 transition-all duration-200", children: offNode })
+          ]
         }
       )
     }
@@ -1146,7 +1152,7 @@ var toggleVariants = cva(
     }
   }
 );
-var Toggle = React49.forwardRef(({ className, variant, size, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var Toggle = React50.forwardRef(({ className, variant, size, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   TogglePrimitive.Root,
   {
     ref,
@@ -1192,9 +1198,9 @@ var toggleGroupItemVariants = cva(
     }
   }
 );
-var ToggleGroup = React49.forwardRef(
+var ToggleGroup = React50.forwardRef(
   ({ className, size, items, itemClassName, renderItem, children, ...props }, ref) => {
-    const defaultRenderItem = React49.useCallback(
+    const defaultRenderItem = React50.useCallback(
       (item) => /* @__PURE__ */ jsxs(
         ToggleGroupPrimitive.Item,
         {
@@ -1224,7 +1230,7 @@ var ToggleGroup = React49.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React49.forwardRef(({ className, size, children, ...props }, ref) => {
+var ToggleGroupItem = React50.forwardRef(({ className, size, children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -1239,7 +1245,7 @@ ToggleGroupItem.displayName = "ToggleGroupItem";
 
 // src/components/ui/slider/index.tsx
 init_utils();
-var Slider = React49.forwardRef(
+var Slider = React50.forwardRef(
   ({
     className,
     showValue,
@@ -1298,7 +1304,7 @@ var inputGroupVariants = cva("flex items-stretch w-full", {
     size: "default"
   }
 });
-var InputGroup = React49.forwardRef(
+var InputGroup = React50.forwardRef(
   ({
     className,
     size,
@@ -1334,9 +1340,9 @@ var InputGroup = React49.forwardRef(
             }
           ),
           leftElement && /* @__PURE__ */ jsx("div", { className: "inline-flex items-center", children: leftElement }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: React49.Children.map(children, (child) => {
-            if (React49.isValidElement(child)) {
-              return React49.cloneElement(child, {
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: React50.Children.map(children, (child) => {
+            if (React50.isValidElement(child)) {
+              return React50.cloneElement(child, {
                 className: cn(
                   child.props.className,
                   (leftAddon || leftElement) && "rounded-l-none border-l-0",
@@ -1367,7 +1373,7 @@ InputGroup.displayName = "InputGroup";
 
 // src/components/ui/input-otp/index.tsx
 init_utils();
-var InputOTP = React49.forwardRef(({ containerClassName, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var InputOTP = React50.forwardRef(({ containerClassName, children, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     ref,
@@ -1380,10 +1386,10 @@ var InputOTP = React49.forwardRef(({ containerClassName, children, ...props }, r
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props }));
+var InputOTPGroup = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React49.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React49.useContext(OTPInputContext);
+var InputOTPSlot = React50.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React50.useContext(OTPInputContext);
   if (!inputOTPContext) {
     console.error("InputOTPSlot must be used within InputOTP");
     return null;
@@ -1417,7 +1423,7 @@ var InputOTPSlot = React49.forwardRef(({ index, className, ...props }, ref) => {
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", className, ...props, children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4 text-muted-foreground" }) }));
+var InputOTPSeparator = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", className, ...props, children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4 text-muted-foreground" }) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/ui/form/form-utils.ts
@@ -2106,7 +2112,7 @@ var FormItem = (props) => {
   const isRequired = Array.isArray(rules) ? rules.some((rule) => rule && rule.required) : false;
   const isDisabled = !!contextDisabled;
   const requiredIndicator = requiredMark === void 0 ? /* @__PURE__ */ jsx("span", { className: "text-destructive mr-1", "aria-hidden": "true", children: "*" }) : /* @__PURE__ */ jsx("span", { className: "mr-1", "aria-hidden": "true", children: requiredMark });
-  if (!children || !React49__default.isValidElement(children)) return null;
+  if (!children || !React50__default.isValidElement(children)) return null;
   const childProps = {};
   childProps[valuePropName] = fieldValue;
   const childClass = children.props.className;
@@ -2274,7 +2280,7 @@ var fieldVariants = cva("", {
     orientation: "vertical"
   }
 });
-var Field = React49.forwardRef(
+var Field = React50.forwardRef(
   ({
     className,
     orientation,
@@ -2287,7 +2293,7 @@ var Field = React49.forwardRef(
     children,
     ...props
   }, ref) => {
-    const generatedId = React49.useId();
+    const generatedId = React50.useId();
     const fieldId = htmlFor || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -2336,7 +2342,7 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React49.forwardRef(
+var Alert = React50.forwardRef(
   ({
     className,
     variant,
@@ -2349,8 +2355,8 @@ var Alert = React49.forwardRef(
     descriptionClassName,
     ...props
   }, ref) => {
-    const [isVisible, setIsVisible] = React49.useState(true);
-    const handleDismiss = React49.useCallback(() => {
+    const [isVisible, setIsVisible] = React50.useState(true);
+    const handleDismiss = React50.useCallback(() => {
       setIsVisible(false);
       onClose?.();
     }, [onClose]);
@@ -2519,7 +2525,7 @@ var toastVariants = cva(
     }
   }
 );
-var Toast = React49.forwardRef(
+var Toast = React50.forwardRef(
   ({
     className,
     variant,
@@ -2532,8 +2538,8 @@ var Toast = React49.forwardRef(
     descriptionClassName,
     ...props
   }, ref) => {
-    const [isVisible, setIsVisible] = React49.useState(true);
-    const handleDismiss = React49.useCallback(() => {
+    const [isVisible, setIsVisible] = React50.useState(true);
+    const handleDismiss = React50.useCallback(() => {
       setIsVisible(false);
       onClose?.();
     }, [onClose]);
@@ -2629,7 +2635,7 @@ var progressVariants = cva(
     }
   }
 );
-var Progress = React49.forwardRef(
+var Progress = React50.forwardRef(
   ({
     className,
     value = 0,
@@ -2695,7 +2701,7 @@ var spinnerVariants = cva("animate-spin", {
     variant: "default"
   }
 });
-var Spinner = React49.forwardRef(
+var Spinner = React50.forwardRef(
   ({ className, size, variant, label, centered, overlay, icon, ...props }, ref) => {
     const spinnerContent = /* @__PURE__ */ jsxs(
       "div",
@@ -2726,7 +2732,7 @@ var Spinner = React49.forwardRef(
   }
 );
 Spinner.displayName = "Spinner";
-var DotsSpinner = React49.forwardRef(
+var DotsSpinner = React50.forwardRef(
   ({ className, size = "default", dotCount = 3, ...props }, ref) => {
     const dotSizeMap = {
       xs: "h-1 w-1",
@@ -2779,7 +2785,7 @@ var skeletonVariants = cva(
     }
   }
 );
-var Skeleton = React49.forwardRef(
+var Skeleton = React50.forwardRef(
   ({
     className,
     variant,
@@ -2828,7 +2834,7 @@ var Skeleton = React49.forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
-var SkeletonCard = React49.forwardRef(
+var SkeletonCard = React50.forwardRef(
   ({ className, avatar = false, lines = 3, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-4", className), ...props, children: [
       avatar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -2868,7 +2874,7 @@ var emptyVariants = cva(
     }
   }
 );
-var Empty = React49.forwardRef(
+var Empty = React50.forwardRef(
   ({
     className,
     size,
@@ -2909,7 +2915,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2921,27 +2927,45 @@ var DialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-mvn-gray-200 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-mvn-gray-100", children: [
-          /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "\uB2EB\uAE30" })
-        ] })
-      ]
-    }
-  )
-] }));
+var DialogContent = React50.forwardRef(
+  ({
+    className,
+    children,
+    showClose = true,
+    closeClassName,
+    customClose,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-mvn-gray-200 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showClose && (customClose ? customClose : /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              className: cn(
+                "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-mvn-gray-100",
+                closeClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ))
+        ]
+      }
+    )
+  ] })
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
@@ -2949,10 +2973,7 @@ var DialogHeader = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn(
-      "flex flex-col space-y-1.5 text-left",
-      className
-    ),
+    className: cn("flex flex-col space-y-1.5 text-left", className),
     ...props
   }
 );
@@ -2971,7 +2992,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -2983,7 +3004,7 @@ var DialogTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -2998,7 +3019,7 @@ init_utils();
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -3010,7 +3031,7 @@ var AlertDialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -3053,7 +3074,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -3062,7 +3083,7 @@ var AlertDialogTitle = React49.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -3071,7 +3092,7 @@ var AlertDialogDescription = React49.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -3080,7 +3101,7 @@ var AlertDialogAction = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -3100,7 +3121,7 @@ var Sheet = DialogPrimitive.Root;
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
 var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetOverlay = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     className: cn(
@@ -3128,7 +3149,7 @@ var sheetVariants = cva(
     }
   }
 );
-var SheetContent = React49.forwardRef(({ side = "right", className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+var SheetContent = React50.forwardRef(({ side = "right", className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
   /* @__PURE__ */ jsx(SheetOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -3175,7 +3196,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetTitle = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -3184,7 +3205,7 @@ var SheetTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetDescription = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -3196,7 +3217,7 @@ SheetDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/ui/drawer/index.tsx
 init_utils();
-var DrawerContext = React49.createContext({
+var DrawerContext = React50.createContext({
   direction: "bottom"
 });
 var Drawer = ({
@@ -3215,7 +3236,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = Drawer$1.Trigger;
 var DrawerPortal = Drawer$1.Portal;
 var DrawerClose = Drawer$1.Close;
-var DrawerOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerOverlay = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Overlay,
   {
     ref,
@@ -3224,7 +3245,7 @@ var DrawerOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
-var DrawerContent = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+var DrawerContent = React50.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
   /* @__PURE__ */ jsx(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs(
     Drawer$1.Content,
@@ -3259,7 +3280,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerTitle = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Title,
   {
     ref,
@@ -3271,7 +3292,7 @@ var DrawerTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = Drawer$1.Title.displayName;
-var DrawerDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerDescription = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Description,
   {
     ref,
@@ -3286,7 +3307,7 @@ init_utils();
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React49.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React50.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -3306,20 +3327,22 @@ init_utils();
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React49.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React50.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-mvn-gray-900 px-3 py-1.5 text-xs text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md bg-mvn-gray-900 px-3 py-1.5 text-xs text-primary-50 animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var SimpleTooltip = React49.forwardRef(
+var SimpleTooltip = React50.forwardRef(
   ({
     children,
     content,
@@ -3350,7 +3373,7 @@ init_utils();
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardArrow = HoverCardPrimitive.Arrow;
-var HoverCardContent = React49.forwardRef(
+var HoverCardContent = React50.forwardRef(
   ({
     className,
     align = "center",
@@ -3394,7 +3417,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React49.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React50.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -3411,7 +3434,7 @@ var DropdownMenuSubTrigger = React49.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSubContent = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -3423,7 +3446,7 @@ var DropdownMenuSubContent = React49.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React49.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React50.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -3436,7 +3459,7 @@ var DropdownMenuContent = React49.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React50.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -3449,7 +3472,7 @@ var DropdownMenuItem = React49.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React49.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React50.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -3466,7 +3489,7 @@ var DropdownMenuCheckboxItem = React49.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React50.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -3482,7 +3505,7 @@ var DropdownMenuRadioItem = React49.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React50.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -3495,7 +3518,7 @@ var DropdownMenuLabel = React49.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -3526,7 +3549,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React49.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuSubTrigger = React50.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -3543,7 +3566,7 @@ var ContextMenuSubTrigger = React49.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSubContent = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.SubContent,
   {
     ref,
@@ -3555,7 +3578,7 @@ var ContextMenuSubContent = React49.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var ContextMenuContent = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -3567,7 +3590,7 @@ var ContextMenuContent = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuItem = React50.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -3580,7 +3603,7 @@ var ContextMenuItem = React49.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React49.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuCheckboxItem = React50.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -3597,7 +3620,7 @@ var ContextMenuCheckboxItem = React49.forwardRef(({ className, children, checked
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuRadioItem = React50.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -3613,7 +3636,7 @@ var ContextMenuRadioItem = React49.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuLabel = React50.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -3626,7 +3649,7 @@ var ContextMenuLabel = React49.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSeparator = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -3659,7 +3682,7 @@ var MenubarGroup = MenubarPrimitive.Group;
 var MenubarPortal = MenubarPrimitive.Portal;
 var MenubarSub = MenubarPrimitive.Sub;
 var MenubarRadioGroup = MenubarPrimitive.RadioGroup;
-var Menubar = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Menubar = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Root,
   {
     ref,
@@ -3671,7 +3694,7 @@ var Menubar = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarTrigger = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Trigger,
   {
     ref,
@@ -3683,7 +3706,7 @@ var MenubarTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React49.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarSubTrigger = React50.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.SubTrigger,
   {
     ref,
@@ -3700,7 +3723,7 @@ var MenubarSubTrigger = React49.forwardRef(({ className, inset, children, ...pro
   }
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarSubContent = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.SubContent,
   {
     ref,
@@ -3712,7 +3735,7 @@ var MenubarSubContent = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-var MenubarContent = React49.forwardRef(
+var MenubarContent = React50.forwardRef(
   ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     MenubarPrimitive.Content,
     {
@@ -3729,7 +3752,7 @@ var MenubarContent = React49.forwardRef(
   ) })
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarItem = React50.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Item,
   {
     ref,
@@ -3742,7 +3765,7 @@ var MenubarItem = React49.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-var MenubarCheckboxItem = React49.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarCheckboxItem = React50.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.CheckboxItem,
   {
     ref,
@@ -3759,7 +3782,7 @@ var MenubarCheckboxItem = React49.forwardRef(({ className, children, checked, ..
   }
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarRadioItem = React50.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.RadioItem,
   {
     ref,
@@ -3775,7 +3798,7 @@ var MenubarRadioItem = React49.forwardRef(({ className, children, ...props }, re
   }
 ));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarLabel = React50.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Label,
   {
     ref,
@@ -3788,7 +3811,7 @@ var MenubarLabel = React49.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-var MenubarSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarSeparator = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Separator,
   {
     ref,
@@ -3816,7 +3839,7 @@ MenubarShortcut.displayName = "MenubarShortcut";
 
 // src/components/ui/navigation-menu/index.tsx
 init_utils();
-var NavigationMenu = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var NavigationMenu = React50.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Root,
   {
     ref,
@@ -3832,7 +3855,7 @@ var NavigationMenu = React49.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuList = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.List,
   {
     ref,
@@ -3848,7 +3871,7 @@ var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-[0.9375rem] font-medium transition-colors hover:bg-mvn-gray-100 focus:bg-mvn-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-mvn-gray-100 data-[state=open]:bg-mvn-gray-100"
 );
-var NavigationMenuTrigger = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var NavigationMenuTrigger = React50.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Trigger,
   {
     ref,
@@ -3868,7 +3891,7 @@ var NavigationMenuTrigger = React49.forwardRef(({ className, children, ...props
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuContent = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -3881,7 +3904,7 @@ var NavigationMenuContent = React49.forwardRef(({ className, ...props }, ref) =>
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
+var NavigationMenuViewport = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Viewport,
   {
     className: cn(
@@ -3893,7 +3916,7 @@ var NavigationMenuViewport = React49.forwardRef(({ className, ...props }, ref) =
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuIndicator = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
@@ -3909,7 +3932,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 
 // src/components/ui/command/index.tsx
 init_utils();
-var Command = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Command = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1,
   {
     ref,
@@ -3924,7 +3947,7 @@ Command.displayName = Command$1.displayName;
 var CommandDialog = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
 };
-var CommandInput = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-mvn-gray-200 px-3", "cmdk-input-wrapper": "", children: [
+var CommandInput = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-mvn-gray-200 px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx(
     Command$1.Input,
@@ -3939,7 +3962,7 @@ var CommandInput = React49.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandList = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.List,
   {
     ref,
@@ -3948,7 +3971,7 @@ var CommandList = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React49.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React50.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   {
     ref,
@@ -3957,7 +3980,7 @@ var CommandEmpty = React49.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandGroup = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Group,
   {
     ref,
@@ -3969,7 +3992,7 @@ var CommandGroup = React49.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = Command$1.Group.displayName;
-var CommandSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandSeparator = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Separator,
   {
     ref,
@@ -3978,7 +4001,7 @@ var CommandSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = Command$1.Separator.displayName;
-var CommandItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandItem = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Item,
   {
     ref,
@@ -4009,7 +4032,7 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/ui/combobox/index.tsx
 init_utils();
-var Combobox = React49.forwardRef(
+var Combobox = React50.forwardRef(
   ({
     options,
     value,
@@ -4021,7 +4044,7 @@ var Combobox = React49.forwardRef(
     disabled,
     clearable
   }, ref) => {
-    const [open, setOpen] = React49.useState(false);
+    const [open, setOpen] = React50.useState(false);
     const selectedOption = options.find((option) => option.value === value);
     const handleClear = (e) => {
       e.stopPropagation();
@@ -4093,9 +4116,9 @@ Combobox.displayName = "Combobox";
 
 // src/components/ui/breadcrumb/index.tsx
 init_utils();
-var Breadcrumb = React49.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+var Breadcrumb = React50.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbList = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ol",
   {
     ref,
@@ -4107,7 +4130,7 @@ var BreadcrumbList = React49.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbItem = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "li",
   {
     ref,
@@ -4116,7 +4139,7 @@ var BreadcrumbItem = React49.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React49.forwardRef(({ asChild, className, ...props }, ref) => {
+var BreadcrumbLink = React50.forwardRef(({ asChild, className, ...props }, ref) => {
   const Comp = "a";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -4131,7 +4154,7 @@ var BreadcrumbLink = React49.forwardRef(({ asChild, className, ...props }, ref)
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbPage = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "span",
   {
     ref,
@@ -4198,7 +4221,7 @@ var Pagination = ({
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var PaginationContent = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ul",
   {
     ref,
@@ -4207,7 +4230,7 @@ var PaginationContent = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
+var PaginationItem = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
   className,
@@ -4314,18 +4337,18 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/ui/tabs/index.tsx
 init_utils();
-var TabsContext = React49.createContext({
+var TabsContext = React50.createContext({
   destroyInactiveTabs: true
 });
-var Tabs = React49.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
+var Tabs = React50.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
     className: cn(
       "flex items-stretch gap-0 text-muted-foreground",
-      "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-border",
+      "data-[orientation=horizontal]:w-full",
       "data-[orientation=vertical]:w-56 data-[orientation=vertical]:border-r data-[orientation=vertical]:border-border",
       "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shrink-0",
       className
@@ -4334,26 +4357,30 @@ var TabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React50.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "inline-flex min-w-0 items-center justify-center whitespace-nowrap text-sm font-medium",
+      "group inline-flex min-w-0 items-center justify-center whitespace-nowrap text-sm",
       "transition-all duration-150 text-muted-foreground hover:text-primary",
       "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "data-[orientation=horizontal]:flex-1 data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3 data-[orientation=horizontal]:border-b-2 data-[orientation=horizontal]:border-border",
+      "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3 data-[orientation=horizontal]:border-b-2 data-[orientation=horizontal]:border-transparent",
       "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-2 data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-border",
-      "data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:bg-muted/60 data-[state=active]:border-primary",
+      "data-[state=active]:text-primary data-[state=active]:border-primary",
       "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
       className
     ),
-    ...props
+    ...props,
+    children: /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsx("span", { className: "invisible font-semibold", "aria-hidden": "true", children }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center font-medium group-data-[state=active]:font-semibold", children })
+    ] })
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React49.forwardRef(({ className, ...props }, ref) => {
-  const { destroyInactiveTabs } = React49.useContext(TabsContext);
+var TabsContent = React50.forwardRef(({ className, ...props }, ref) => {
+  const { destroyInactiveTabs } = React50.useContext(TabsContext);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Content,
     {
@@ -4442,7 +4469,7 @@ var separatorVariants = cva("shrink-0 bg-line-normal", {
     variant: "default"
   }
 });
-var Separator5 = React49.forwardRef(
+var Separator5 = React50.forwardRef(
   ({
     className,
     orientation = "horizontal",
@@ -4499,7 +4526,7 @@ var AspectRatio = AspectRatioPrimitive.Root;
 
 // src/components/ui/accordion/index.tsx
 init_utils();
-var Accordion = React49.forwardRef(
+var Accordion = React50.forwardRef(
   ({
     items,
     className,
@@ -4509,7 +4536,7 @@ var Accordion = React49.forwardRef(
     renderItem,
     ...props
   }, ref) => {
-    const defaultRenderItem = React49.useCallback(
+    const defaultRenderItem = React50.useCallback(
       (item) => /* @__PURE__ */ jsxs(
         AccordionPrimitive.Item,
         {
@@ -4557,7 +4584,7 @@ Accordion.displayName = "Accordion";
 // src/components/ui/collapsible/index.tsx
 init_utils();
 var Collapsible = CollapsiblePrimitive.Root;
-var CollapsibleItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CollapsibleItem = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4569,7 +4596,7 @@ var CollapsibleItem = React49.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CollapsibleItem.displayName = "CollapsibleItem";
-var CollapsibleTrigger = React49.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsxs(
+var CollapsibleTrigger = React50.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsxs(
   CollapsiblePrimitive.Trigger,
   {
     ref,
@@ -4595,7 +4622,7 @@ var CollapsibleTrigger = React49.forwardRef(({ className, children, indicator, .
   }
 ));
 CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;
-var CollapsibleContent = React49.forwardRef(({ className, contentClassName, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var CollapsibleContent = React50.forwardRef(({ className, contentClassName, children, ...props }, ref) => /* @__PURE__ */ jsx(
   CollapsiblePrimitive.Content,
   {
     ref,
@@ -4646,13 +4673,14 @@ var ResizableHandle = ({
 
 // src/components/ui/scroll-area/index.tsx
 init_utils();
-var ScrollArea = React49.forwardRef(
+var ScrollArea = React50.forwardRef(
   ({
     className,
     children,
     orientation = "vertical",
     scrollbarClassName,
     thumbClassName,
+    type = "auto",
     ...props
   }, ref) => {
     const showVertical = orientation === "vertical" || orientation === "both";
@@ -4661,12 +4689,38 @@ var ScrollArea = React49.forwardRef(
       ScrollAreaPrimitive.Root,
       {
         ref,
+        type,
         className: cn("relative overflow-hidden", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-          showVertical && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical", className: scrollbarClassName, thumbClassName }),
-          showHorizontal && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal", className: scrollbarClassName, thumbClassName }),
+          /* @__PURE__ */ jsx(
+            ScrollAreaPrimitive.Viewport,
+            {
+              className: cn(
+                "h-full w-full rounded-[inherit]",
+                // Fix overflow based on orientation to prevent unwanted scrolling
+                orientation === "vertical" && "!overflow-x-hidden",
+                orientation === "horizontal" && "!overflow-y-hidden"
+              ),
+              children
+            }
+          ),
+          showVertical && /* @__PURE__ */ jsx(
+            ScrollBar,
+            {
+              orientation: "vertical",
+              className: scrollbarClassName,
+              thumbClassName
+            }
+          ),
+          showHorizontal && /* @__PURE__ */ jsx(
+            ScrollBar,
+            {
+              orientation: "horizontal",
+              className: scrollbarClassName,
+              thumbClassName
+            }
+          ),
           /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
         ]
       }
@@ -4674,7 +4728,7 @@ var ScrollArea = React49.forwardRef(
   }
 );
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React49.forwardRef(({ className, orientation = "vertical", thumbClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React50.forwardRef(({ className, orientation = "vertical", thumbClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -4690,7 +4744,7 @@ var ScrollBar = React49.forwardRef(({ className, orientation = "vertical", thumb
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
         className: cn(
-          "relative flex-1 rounded-full bg-line-normal hover:bg-line-strong transition-colors",
+          "relative flex-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground transition-colors",
           thumbClassName
         )
       }
@@ -4706,9 +4760,9 @@ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React49.createContext(null);
+var SidebarContext = React50.createContext(null);
 function useSidebar() {
-  const context = React49.useContext(SidebarContext);
+  const context = React50.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4723,9 +4777,9 @@ function SidebarProvider({
   children,
   ...props
 }) {
-  const [_open, _setOpen] = React49.useState(defaultOpen);
+  const [_open, _setOpen] = React50.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React49.useCallback(
+  const setOpen = React50.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4737,10 +4791,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React49.useCallback(() => {
+  const toggleSidebar = React50.useCallback(() => {
     return setOpen((open2) => !open2);
   }, [setOpen]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4751,7 +4805,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React49.useMemo(
+  const contextValue = React50.useMemo(
     () => ({
       state,
       open,
@@ -5217,7 +5271,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React49.useMemo(() => {
+  const width = React50.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -5336,24 +5390,18 @@ var tableVariants = cva("w-full caption-bottom text-sm", {
     size: "default"
   }
 });
-var Table = React49.forwardRef(({ className, variant, size, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
+var Table = React50.forwardRef(({ className, variant, size, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ jsx(
+  "table",
   {
-    className: cn("relative w-full overflow-auto", wrapperClassName),
-    children: /* @__PURE__ */ jsx(
-      "table",
-      {
-        ref,
-        className: cn(tableVariants({ variant, size, className })),
-        ...props
-      }
-    )
+    ref,
+    className: cn(tableVariants({ variant, size, className })),
+    ...props
   }
-));
+) }));
 Table.displayName = "Table";
-var TableHeader = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -5362,7 +5410,7 @@ var TableBody = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -5374,7 +5422,7 @@ var TableFooter = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -5386,7 +5434,7 @@ var TableRow = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -5398,7 +5446,7 @@ var TableHead = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -5410,7 +5458,7 @@ var TableCell = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -5456,7 +5504,8 @@ var TableBodyComponent = ({
   rowClassName,
   onRowClick,
   getRowExpandable,
-  invalidateCache
+  invalidateCache,
+  headers
 }) => {
   const resolveRowClassName = useCallback(
     (record, index) => {
@@ -5497,6 +5546,41 @@ var TableBodyComponent = ({
     }
     return flexRender(cell.column.columnDef.cell, cell.getContext());
   };
+  const { leftOffsets, rightOffsets, lastLeftId, firstRightId } = useMemo(() => {
+    if (!headers || headers.length === 0) {
+      return {
+        leftOffsets: /* @__PURE__ */ new Map(),
+        rightOffsets: /* @__PURE__ */ new Map(),
+        lastLeftId: null,
+        firstRightId: null
+      };
+    }
+    const leftPinned = headers.filter(
+      (h) => h.column.getIsPinned() === "left"
+    );
+    const rightPinned = headers.filter(
+      (h) => h.column.getIsPinned() === "right"
+    );
+    const leftMap = /* @__PURE__ */ new Map();
+    let leftAcc = 0;
+    for (const h of leftPinned) {
+      leftMap.set(h.column.id, leftAcc);
+      leftAcc += h.getSize();
+    }
+    const rightMap = /* @__PURE__ */ new Map();
+    let rightAcc = 0;
+    for (let i = rightPinned.length - 1; i >= 0; i--) {
+      const h = rightPinned[i];
+      rightMap.set(h.column.id, rightAcc);
+      rightAcc += h.getSize();
+    }
+    return {
+      leftOffsets: leftMap,
+      rightOffsets: rightMap,
+      lastLeftId: leftPinned.length > 0 ? leftPinned[leftPinned.length - 1].column.id : null,
+      firstRightId: rightPinned.length > 0 ? rightPinned[0].column.id : null
+    };
+  }, [headers]);
   const renderBaseRow = useCallback(
     (rowData, options = {}) => {
       const { ref, virtualIndex } = options;
@@ -5518,6 +5602,25 @@ var TableBodyComponent = ({
           onClick: () => onRowClick?.(rowData.original, rowData.index),
           children: rowData.getVisibleCells().map((cell) => {
             const meta = cell.column.columnDef.meta;
+            const pinPosition = cell.column.getIsPinned();
+            const pinnedStyle = meta?.width ? { width: meta.width } : {};
+            if (pinPosition === "left") {
+              const offset = leftOffsets.get(cell.column.id);
+              if (offset !== void 0) {
+                pinnedStyle.position = "sticky";
+                pinnedStyle.left = offset;
+                pinnedStyle.zIndex = 5;
+              }
+            } else if (pinPosition === "right") {
+              const offset = rightOffsets.get(cell.column.id);
+              if (offset !== void 0) {
+                pinnedStyle.position = "sticky";
+                pinnedStyle.right = offset;
+                pinnedStyle.zIndex = 5;
+              }
+            }
+            const isLastLeftPinned = cell.column.id === lastLeftId;
+            const isFirstRightPinned = cell.column.id === firstRightId;
             return /* @__PURE__ */ jsx(
               TableCell,
               {
@@ -5525,9 +5628,13 @@ var TableBodyComponent = ({
                   meta?.className,
                   meta?.align === "center" && "text-center",
                   meta?.align === "right" && "text-right",
-                  meta?.align === "left" && "text-left"
+                  meta?.align === "left" && "text-left",
+                  // Pinned cell styling
+                  pinPosition && "bg-background",
+                  isLastLeftPinned && "after:absolute after:right-0 after:top-0 after:bottom-0 after:w-[4px] after:bg-gradient-to-r after:from-black/10 after:to-transparent",
+                  isFirstRightPinned && "before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px] before:bg-gradient-to-l before:from-black/10 before:to-transparent"
                 ),
-                style: meta?.width ? { width: meta.width } : void 0,
+                style: Object.keys(pinnedStyle).length > 0 ? pinnedStyle : void 0,
                 children: onRenderedRow(cell, virtualIndex)
               },
               cell.id
@@ -5537,7 +5644,14 @@ var TableBodyComponent = ({
         `row-${rowData.index}`
       );
     },
-    [onRowClick, resolveRowClassName]
+    [
+      onRowClick,
+      resolveRowClassName,
+      leftOffsets,
+      rightOffsets,
+      lastLeftId,
+      firstRightId
+    ]
   );
   const renderExpandedRow = useCallback(
     (rowData, options = {}) => {
@@ -5641,9 +5755,8 @@ var pinOptions = [
   { value: "right", label: "Pin Right" }
 ];
 var sizingOptions = [
-  { value: "single", label: "Autosize This Column" },
-  { value: "all", label: "Autosize All Columns" },
-  { value: "reset", label: "Reset All Columns" }
+  { value: "reset-single", label: "Reset This Column" },
+  { value: "reset-all", label: "Reset All Columns" }
 ];
 var sortOptions = [
   { value: "asc", label: "Sort Ascending" },
@@ -5654,7 +5767,11 @@ var TableHeaderComponent = ({
   enableColumnOrdering,
   baseColumnOrder,
   setColumnOrder,
-  draggedColumnId
+  draggedColumnId,
+  pinnedLeftOffset,
+  pinnedRightOffset,
+  isLastLeftPinned,
+  isFirstRightPinned
 }) => {
   const column = header.column;
   const meta = column.columnDef.meta;
@@ -5725,7 +5842,17 @@ var TableHeaderComponent = ({
     [debouncedFilterChange, filterType]
   );
   const showPopover = column.getCanSort() || column.getCanPin() || column.getCanFilter() || column.getCanResize();
-  return /* @__PURE__ */ jsx(
+  const pinnedStyle = meta?.width ? { width: meta.width } : {};
+  if (pinPosition === "left" && pinnedLeftOffset !== void 0) {
+    pinnedStyle.position = "sticky";
+    pinnedStyle.left = pinnedLeftOffset;
+    pinnedStyle.zIndex = 20;
+  } else if (pinPosition === "right" && pinnedRightOffset !== void 0) {
+    pinnedStyle.position = "sticky";
+    pinnedStyle.right = pinnedRightOffset;
+    pinnedStyle.zIndex = 20;
+  }
+  return /* @__PURE__ */ jsxs(
     TableHead,
     {
       className: cn(
@@ -5734,157 +5861,212 @@ var TableHeaderComponent = ({
         meta?.align === "right" && "text-right",
         meta?.align === "left" && "text-left",
         column.getCanSort() && "select-none",
-        "bg-mvn-gray-100 text-foreground sticky top-0 z-10"
+        "bg-mvn-gray-100 text-foreground sticky top-0 z-10",
+        // Pinned column styling
+        pinPosition && "bg-background",
+        isLastLeftPinned && "after:absolute after:right-0 after:top-0 after:bottom-0 after:w-[4px] after:bg-gradient-to-r after:from-black/10 after:to-transparent",
+        isFirstRightPinned && "before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px] before:bg-gradient-to-l before:from-black/10 before:to-transparent"
       ),
-      style: meta?.width ? { width: meta.width } : void 0,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-center w-full",
-            meta?.align === "center" && "justify-center",
-            meta?.align === "right" && "justify-end",
-            meta?.align === "left" && "justify-start",
-            column.getCanSort() && "cursor-pointer"
-          ),
-          draggable: isReorderTable,
-          onDragStart: (event) => {
-            if (!isReorderTable) return;
-            event.dataTransfer.effectAllowed = "move";
-            draggedColumnId.current = column.id;
-          },
-          onDragEnd: () => {
-            draggedColumnId.current = null;
-          },
-          onDragOver: (event) => {
-            if (!isReorderTable || !draggedColumnId.current || draggedColumnId.current === column.id) {
-              return;
-            }
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "move";
-          },
-          onDrop: (event) => {
-            if (!isReorderTable) return;
-            event.preventDefault();
-            handleColumnDrop(column.id);
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex gap-2 text-[16px] font-medium", children: flexRender(column.columnDef.header, header.getContext()) }),
-            !column.id.startsWith("_mvn_") && showPopover && /* @__PURE__ */ jsx(
-              "span",
-              {
-                onClick: (event) => event.stopPropagation(),
-                className: "ml-auto",
-                children: /* @__PURE__ */ jsxs(Popover, { children: [
-                  /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TextAlignJustify, { className: "p-1 h-6 w-6" }) }),
-                  /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "size", children: [
-                    /* @__PURE__ */ jsxs(TabsList, { children: [
-                      column.getCanResize() && /* @__PURE__ */ jsx(TabsTrigger, { value: "size", children: /* @__PURE__ */ jsx(Scaling, { className: "p-1 h-6 w-6" }) }),
-                      column.getCanSort() && /* @__PURE__ */ jsx(TabsTrigger, { value: "sort", children: /* @__PURE__ */ jsx(Scaling, { className: "p-1 h-6 w-6" }) }),
-                      column.getCanPin() && /* @__PURE__ */ jsx(TabsTrigger, { value: "pin", children: /* @__PURE__ */ jsx(Pin, { className: "p-1 h-6 w-6" }) }),
-                      column.getCanFilter() && /* @__PURE__ */ jsx(TabsTrigger, { value: "filter", children: /* @__PURE__ */ jsx(ListFilter, { className: "p-1 h-6 w-6" }) })
-                    ] }),
-                    column.getCanResize() && /* @__PURE__ */ jsx(TabsContent, { value: "size", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: sizingOptions.map((option) => /* @__PURE__ */ jsx(
-                      CommandItem,
-                      {
-                        value: option.value,
-                        onSelect: () => {
-                        },
-                        children: option.label
-                      },
-                      option.value
-                    )) }) }) }) }),
-                    column.getCanSort() && /* @__PURE__ */ jsx(TabsContent, { value: "sort", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: sortOptions.map((option) => /* @__PURE__ */ jsxs(
-                      CommandItem,
-                      {
-                        value: option.value,
-                        onSelect: () => {
-                          if (option.value === sortDirection) {
-                            column.clearSorting();
-                            return;
+      style: pinnedStyle,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center w-full",
+              meta?.align === "center" && "justify-center",
+              meta?.align === "right" && "justify-end",
+              meta?.align === "left" && "justify-start",
+              column.getCanSort() && "cursor-pointer"
+            ),
+            draggable: isReorderTable,
+            onDragStart: (event) => {
+              if (!isReorderTable) return;
+              event.dataTransfer.effectAllowed = "move";
+              draggedColumnId.current = column.id;
+            },
+            onDragEnd: () => {
+              draggedColumnId.current = null;
+            },
+            onDragOver: (event) => {
+              if (!isReorderTable || !draggedColumnId.current || draggedColumnId.current === column.id) {
+                return;
+              }
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+            },
+            onDrop: (event) => {
+              if (!isReorderTable) return;
+              event.preventDefault();
+              handleColumnDrop(column.id);
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex gap-2 text-[16px] font-medium", children: flexRender(column.columnDef.header, header.getContext()) }),
+              !column.id.startsWith("_mvn_") && showPopover && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: (event) => event.stopPropagation(),
+                  className: "ml-auto",
+                  children: /* @__PURE__ */ jsxs(Popover, { children: [
+                    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TextAlignJustify, { className: "p-1 h-6 w-6" }) }),
+                    /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "size", children: [
+                      /* @__PURE__ */ jsxs(TabsList, { children: [
+                        column.getCanResize() && /* @__PURE__ */ jsx(
+                          TabsTrigger,
+                          {
+                            value: "size",
+                            className: "data-[orientation=horizontal]:p-2",
+                            children: /* @__PURE__ */ jsx(Scaling, { className: "p-1 h-6 w-6" })
                           }
-                          column.toggleSorting(option.value === "desc");
-                        },
-                        children: [
-                          option.label,
-                          /* @__PURE__ */ jsx(
-                            CheckIcon,
-                            {
-                              className: cn(
-                                "ml-auto h-4 w-4",
-                                sortDirection === option.value ? "opacity-100" : "opacity-0"
-                              )
-                            }
-                          )
-                        ]
-                      },
-                      option.value
-                    )) }) }) }) }),
-                    column.getCanPin() && /* @__PURE__ */ jsx(TabsContent, { value: "pin", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: pinOptions.map((option) => /* @__PURE__ */ jsxs(
-                      CommandItem,
-                      {
-                        value: option.value,
-                        onSelect: () => {
-                          if (option.value === pinPosition) {
-                            column.pin(false);
-                            return;
+                        ),
+                        column.getCanSort() && /* @__PURE__ */ jsx(
+                          TabsTrigger,
+                          {
+                            value: "sort",
+                            className: "data-[orientation=horizontal]:p-2",
+                            children: /* @__PURE__ */ jsx(Scaling, { className: "p-1 h-6 w-6" })
                           }
-                          if (option.value === "left" || option.value === "right") {
-                            column.pin(option.value);
+                        ),
+                        column.getCanPin() && /* @__PURE__ */ jsx(
+                          TabsTrigger,
+                          {
+                            value: "pin",
+                            className: "data-[orientation=horizontal]:p-2",
+                            children: /* @__PURE__ */ jsx(Pin, { className: "p-1 h-6 w-6" })
                           }
-                        },
-                        children: [
-                          option.label,
-                          /* @__PURE__ */ jsx(
-                            CheckIcon,
-                            {
-                              className: cn(
-                                "ml-auto h-4 w-4",
-                                pinPosition === option.value ? "opacity-100" : "opacity-0"
-                              )
+                        ),
+                        column.getCanFilter() && /* @__PURE__ */ jsx(
+                          TabsTrigger,
+                          {
+                            value: "filter",
+                            className: "data-[orientation=horizontal]:p-2",
+                            children: /* @__PURE__ */ jsx(ListFilter, { className: "p-1 h-6 w-6" })
+                          }
+                        )
+                      ] }),
+                      column.getCanResize() && /* @__PURE__ */ jsx(TabsContent, { value: "size", className: "mt-2", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: sizingOptions.map((option) => /* @__PURE__ */ jsx(
+                        CommandItem,
+                        {
+                          value: option.value,
+                          onSelect: () => {
+                            if (option.value === "reset-single") {
+                              column.resetSize();
+                            } else if (option.value === "reset-all") {
+                              header.getContext().table.resetColumnSizing();
                             }
-                          )
-                        ]
-                      },
-                      option.value
-                    )) }) }) }) }),
-                    column.getCanFilter() && /* @__PURE__ */ jsxs(TabsContent, { value: "filter", children: [
-                      /* @__PURE__ */ jsxs(
-                        Select,
+                          },
+                          children: option.label
+                        },
+                        option.value
+                      )) }) }) }) }),
+                      column.getCanSort() && /* @__PURE__ */ jsx(TabsContent, { value: "sort", className: "mt-2", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: sortOptions.map((option) => /* @__PURE__ */ jsxs(
+                        CommandItem,
                         {
-                          value: filterType,
-                          onValueChange: (selected) => {
-                            if (debounceTimeoutRef.current !== null) {
-                              window.clearTimeout(debounceTimeoutRef.current);
-                              debounceTimeoutRef.current = null;
+                          value: option.value,
+                          onSelect: () => {
+                            if (option.value === sortDirection) {
+                              column.clearSorting();
+                              return;
                             }
-                            handleFilterChange(selected, inputValue);
+                            column.toggleSorting(option.value === "desc");
                           },
                           children: [
-                            /* @__PURE__ */ jsx(SelectTrigger, { className: "mb-4", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                            /* @__PURE__ */ jsx(SelectContent, { children: TableFilterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                            option.label,
+                            /* @__PURE__ */ jsx(
+                              CheckIcon,
+                              {
+                                className: cn(
+                                  "ml-auto h-4 w-4",
+                                  sortDirection === option.value ? "opacity-100" : "opacity-0"
+                                )
+                              }
+                            )
                           ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Input,
+                        },
+                        option.value
+                      )) }) }) }) }),
+                      column.getCanPin() && /* @__PURE__ */ jsx(TabsContent, { value: "pin", className: "mt-2", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: pinOptions.map((option) => /* @__PURE__ */ jsxs(
+                        CommandItem,
                         {
-                          leftIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-                          value: inputValue,
-                          onChange: handleInputChange,
-                          clearable: true,
-                          onClear: () => column.setFilterValue({ filterType, value: "" }),
-                          placeholder: meta?.filterPlaceholder ?? "Filter\u2026"
-                        }
-                      )
-                    ] })
-                  ] }) })
-                ] })
-              }
-            )
-          ]
-        }
-      )
+                          value: option.value,
+                          onSelect: () => {
+                            if (option.value === pinPosition) {
+                              column.pin(false);
+                              return;
+                            }
+                            if (option.value === "left" || option.value === "right") {
+                              column.pin(option.value);
+                            }
+                          },
+                          children: [
+                            option.label,
+                            /* @__PURE__ */ jsx(
+                              CheckIcon,
+                              {
+                                className: cn(
+                                  "ml-auto h-4 w-4",
+                                  pinPosition === option.value ? "opacity-100" : "opacity-0"
+                                )
+                              }
+                            )
+                          ]
+                        },
+                        option.value
+                      )) }) }) }) }),
+                      column.getCanFilter() && /* @__PURE__ */ jsxs(TabsContent, { value: "filter", className: "mt-2", children: [
+                        /* @__PURE__ */ jsxs(
+                          Select,
+                          {
+                            value: filterType,
+                            onValueChange: (selected) => {
+                              if (debounceTimeoutRef.current !== null) {
+                                window.clearTimeout(debounceTimeoutRef.current);
+                                debounceTimeoutRef.current = null;
+                              }
+                              handleFilterChange(selected, inputValue);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(SelectTrigger, { className: "mb-4", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                              /* @__PURE__ */ jsx(SelectContent, { children: TableFilterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Input,
+                          {
+                            leftIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
+                            value: inputValue,
+                            onChange: handleInputChange,
+                            clearable: true,
+                            onClear: () => column.setFilterValue({ filterType, value: "" }),
+                            placeholder: meta?.filterPlaceholder ?? "Filter\u2026"
+                          }
+                        )
+                      ] })
+                    ] }) })
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        column.getCanResize() && /* @__PURE__ */ jsx(
+          "div",
+          {
+            onMouseDown: header.getResizeHandler(),
+            onTouchStart: header.getResizeHandler(),
+            onDoubleClick: () => header.column.resetSize(),
+            className: cn(
+              "absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none",
+              "hover:bg-primary/50 active:bg-primary",
+              header.column.getIsResizing() && "bg-primary"
+            ),
+            style: {
+              transform: "translateX(50%)"
+            }
+          }
+        )
+      ]
     },
     header.id
   );
@@ -5900,6 +6082,46 @@ var TableToolbarComponent = ({
   customizeToolbar
 }) => {
   const toolbarVisible = enableExport || customizeToolbar || enableGlobalFilter;
+  const [inputValue, setInputValue] = useState(globalFilter);
+  const debounceTimeoutRef = useRef(null);
+  useEffect(() => {
+    setInputValue(globalFilter);
+  }, [globalFilter]);
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current !== null) {
+        window.clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+  const debouncedSetGlobalFilter = useCallback(
+    (nextValue) => {
+      if (debounceTimeoutRef.current !== null) {
+        window.clearTimeout(debounceTimeoutRef.current);
+      }
+      debounceTimeoutRef.current = window.setTimeout(() => {
+        setGlobalFilter(nextValue);
+        debounceTimeoutRef.current = null;
+      }, 300);
+    },
+    [setGlobalFilter]
+  );
+  const handleInputChange = useCallback(
+    (event) => {
+      const nextValue = event.target.value;
+      setInputValue(nextValue);
+      debouncedSetGlobalFilter(nextValue);
+    },
+    [debouncedSetGlobalFilter]
+  );
+  const handleClear = useCallback(() => {
+    if (debounceTimeoutRef.current !== null) {
+      window.clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = null;
+    }
+    setInputValue("");
+    setGlobalFilter("");
+  }, [setGlobalFilter]);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     toolbarVisible && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       enableExport && /* @__PURE__ */ jsx(
@@ -5917,9 +6139,10 @@ var TableToolbarComponent = ({
       Input,
       {
         leftIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-        value: globalFilter,
-        onChange: (event) => setGlobalFilter(event.target.value),
+        value: inputValue,
+        onChange: handleInputChange,
         clearable: true,
+        onClear: handleClear,
         placeholder: globalFilterPlaceholder
       }
     )
@@ -6017,7 +6240,10 @@ function useTableCore({
   manualSorting,
   onFilterChange,
   getCheckboxProps,
-  selectedRowKey
+  selectedRowKey,
+  defaultColumnPinning,
+  enableColumnResizing = false,
+  columnResizeMode = "onChange"
 }) {
   const [sorting, setSorting] = useState(
     sortBy ? [{ id: sortBy, desc: sortDirection === "desc" }] : []
@@ -6031,8 +6257,8 @@ function useTableCore({
     pageSize
   });
   const [columnPinning, setColumnPinning] = useState({
-    left: [],
-    right: []
+    left: defaultColumnPinning?.left ?? [],
+    right: defaultColumnPinning?.right ?? []
   });
   const dataLength = data.length;
   const enableColumnFilters = useMemo(() => {
@@ -6292,6 +6518,8 @@ function useTableCore({
     columns: columnDefs,
     manualFiltering,
     manualSorting,
+    enableColumnResizing,
+    columnResizeMode,
     state: {
       sorting,
       columnFilters,
@@ -6408,6 +6636,8 @@ function useTableVirtualization({
     });
     return arr;
   }, [rows, expandable]);
+  const virtualRowPointersRef = useRef(virtualRowPointers);
+  virtualRowPointersRef.current = virtualRowPointers;
   const cacheBackingRef = useRef(
     /* @__PURE__ */ new Map()
   );
@@ -6441,6 +6671,12 @@ function useTableVirtualization({
     null
   );
   const measurementIdleRef = useRef(null);
+  const prefixSumCacheRef = useRef({
+    count: 0,
+    itemSizes: [],
+    offsets: [],
+    totalSize: 0
+  });
   const cleanupRaf = useCallback(() => {
     if (debounceTimeoutRef.current != null) {
       clearTimeout(debounceTimeoutRef.current);
@@ -6465,10 +6701,16 @@ function useTableVirtualization({
       measurementIdleRef.current = null;
     }
     measurementQueueRef.current.clear();
+    prefixSumCacheRef.current = {
+      count: 0,
+      itemSizes: [],
+      offsets: [],
+      totalSize: 0
+    };
   }, []);
   const estimateSize = useCallback(
     (index) => {
-      const item = virtualRowPointers[index];
+      const item = virtualRowPointersRef.current[index];
       if (!item) return baseRowEstimateSize;
       const key = item.key;
       if (item.kind === "expanded" && !rows[item.rowIndex]?.getIsExpanded()) {
@@ -6481,21 +6723,23 @@ function useTableVirtualization({
       if (cached != null) return cached;
       return item.kind === "expanded" ? expandContentEstimateSize : baseRowEstimateSize;
     },
-    [virtualRowPointers, baseRowEstimateSize, expandContentEstimateSize]
+    [baseRowEstimateSize, expandContentEstimateSize]
   );
   const recomputeVirtualWindow = useCallback(() => {
     if (!shouldVirtualize) {
       setVirtualWindow(EMPTY_WINDOW);
       return;
     }
+    const pointers = virtualRowPointersRef.current;
     const nextWindow = computeVirtualizedRows({
-      count: virtualRowPointers.length,
+      count: pointers.length,
       getScrollElement: () => tableContainerRef.current,
       estimateSize,
       overScan,
       cache: cacheRef.current,
       heightCacheByKey: heightCacheByKeyRef.current,
-      getItemKey: (index) => virtualRowPointers[index]?.key ?? ""
+      getItemKey: (index) => pointers[index]?.key ?? "",
+      prefixSumCache: prefixSumCacheRef.current
     });
     setVirtualWindow(nextWindow);
   }, [estimateSize, overScan]);
@@ -6528,7 +6772,7 @@ function useTableVirtualization({
         const { startIndex, endIndex } = virtualWindowRef.current;
         if (index < startIndex || index > endIndex) return;
       }
-      const item = virtualRowPointers[index];
+      const item = virtualRowPointersRef.current[index];
       if (!item) return;
       if (!Number.isFinite(height)) return;
       const size = normalizeVirtualSize(height);
@@ -6582,7 +6826,7 @@ function useTableVirtualization({
         const { startIndex, endIndex } = virtualWindowRef.current;
         if (index < startIndex || index > endIndex) return;
       }
-      const item = virtualRowPointers[index];
+      const item = virtualRowPointersRef.current[index];
       const key = item?.key;
       if (key != null && heightCacheByKeyRef.current.has(key) || heightCacheByIndexRef.current.has(index)) {
         return;
@@ -6602,7 +6846,7 @@ function useTableVirtualization({
       return;
     }
     cacheRef.current.forEach((index, _, key) => {
-      if (index >= virtualRowPointers.length) {
+      if (index >= virtualRowPointersRef.current.length) {
         cacheRef.current.remove(index);
         heightCacheByIndexRef.current.delete(index);
         if (key != null) heightCacheByKeyRef.current.delete(key);
@@ -6692,7 +6936,8 @@ var computeVirtualizedRows = (config) => {
     cache,
     getItemKey,
     getHorizontalScrollElement,
-    heightCacheByKey
+    heightCacheByKey,
+    prefixSumCache
   } = config;
   if (count <= 0) return EMPTY_WINDOW;
   const scrollElement = getScrollElement() ?? null;
@@ -6706,24 +6951,60 @@ var computeVirtualizedRows = (config) => {
     Math.max(rawHorizontalScrollOffset, 0),
     horizontalTotalSize - horizontalViewportSize
   ) : Math.max(rawHorizontalScrollOffset, 0);
-  const itemSizes = new Array(count);
-  const offsets = new Array(count);
-  let totalSize = 0;
-  for (let index = 0; index < count; index++) {
-    offsets[index] = totalSize;
-    const key = getItemKey(index);
-    let size = cache.get(index);
-    if (size == null && key != null) {
-      size = heightCacheByKey.get(key);
-    }
-    if (size == null) {
-      const estimate = estimateSize(index);
-      size = normalizeVirtualSize(estimate);
-    } else {
-      size = normalizeVirtualSize(size);
+  let itemSizes;
+  let offsets;
+  let totalSize;
+  const cachedCount = prefixSumCache?.count ?? 0;
+  if (prefixSumCache && cachedCount > 0 && count >= cachedCount) {
+    itemSizes = prefixSumCache.itemSizes.slice(0, cachedCount);
+    offsets = prefixSumCache.offsets.slice(0, cachedCount);
+    totalSize = prefixSumCache.totalSize;
+    if (count > cachedCount) {
+      itemSizes.length = count;
+      offsets.length = count;
+      for (let index = cachedCount; index < count; index++) {
+        offsets[index] = totalSize;
+        const key = getItemKey(index);
+        let size = cache.get(index);
+        if (size == null && key != null) {
+          size = heightCacheByKey.get(key);
+        }
+        if (size == null) {
+          const estimate = estimateSize(index);
+          size = normalizeVirtualSize(estimate);
+        } else {
+          size = normalizeVirtualSize(size);
+        }
+        itemSizes[index] = size;
+        totalSize += size;
+      }
     }
-    itemSizes[index] = size;
-    totalSize += size;
+  } else {
+    itemSizes = new Array(count);
+    offsets = new Array(count);
+    totalSize = 0;
+    for (let index = 0; index < count; index++) {
+      offsets[index] = totalSize;
+      const key = getItemKey(index);
+      let size = cache.get(index);
+      if (size == null && key != null) {
+        size = heightCacheByKey.get(key);
+      }
+      if (size == null) {
+        const estimate = estimateSize(index);
+        size = normalizeVirtualSize(estimate);
+      } else {
+        size = normalizeVirtualSize(size);
+      }
+      itemSizes[index] = size;
+      totalSize += size;
+    }
+  }
+  if (prefixSumCache) {
+    prefixSumCache.count = count;
+    prefixSumCache.itemSizes = itemSizes;
+    prefixSumCache.offsets = offsets;
+    prefixSumCache.totalSize = totalSize;
   }
   const viewportActive = clientHeight > 0;
   const scrollOffset = viewportActive ? Math.min(scrollTop, Math.max(totalSize - clientHeight, 0)) : 0;
@@ -6731,19 +7012,28 @@ var computeVirtualizedRows = (config) => {
   let visibleStartIndex = 0;
   let visibleEndIndex = 0;
   if (viewportActive && totalSize > 0) {
-    for (let index = 0; index < count; index++) {
-      if (offsets[index] + itemSizes[index] > scrollOffset) {
-        visibleStartIndex = index;
-        break;
+    let low = 0;
+    let high = count - 1;
+    while (low < high) {
+      const mid = Math.floor((low + high) / 2);
+      if (offsets[mid] + itemSizes[mid] > scrollOffset) {
+        high = mid;
+      } else {
+        low = mid + 1;
       }
     }
-    for (let index = visibleStartIndex; index < count; index++) {
-      if (offsets[index] >= viewportLimit) {
-        visibleEndIndex = Math.max(visibleStartIndex, index - 1);
-        break;
+    visibleStartIndex = low;
+    low = visibleStartIndex;
+    high = count - 1;
+    while (low < high) {
+      const mid = Math.ceil((low + high) / 2);
+      if (offsets[mid] >= viewportLimit) {
+        high = mid - 1;
+      } else {
+        low = mid;
       }
-      visibleEndIndex = index;
     }
+    visibleEndIndex = Math.max(visibleStartIndex, low);
   }
   const overScanCount = Math.max(0, Math.ceil(overScan));
   const startIndex = Math.max(0, visibleStartIndex - overScanCount);
@@ -6805,7 +7095,7 @@ function SimpleTable({
   getRowExpandable,
   onExpandedChange,
   onLazyScrollLoad,
-  scrollLoadThreshold = 5,
+  scrollLoadThreshold = 42,
   numberOfPageButtons = 5,
   onClickExport,
   baseRowEstimateSize = 42,
@@ -6823,7 +7113,8 @@ function SimpleTable({
   maxRecords,
   loadingText,
   pagingPosition = "right",
-  recordPerChunk = 100
+  recordPerChunk = 100,
+  defaultColumnPinning
 }) {
   const [internalLazyLoading, setInternalLazyLoading] = useState(false);
   const pendingLazyLoad = useRef(false);
@@ -6866,7 +7157,8 @@ function SimpleTable({
     numberOfPageButtons,
     manualSorting,
     manualFiltering,
-    onFilterChange
+    onFilterChange,
+    defaultColumnPinning
   });
   const handleLazyLoad = useCallback(async () => {
     if (!onLazyScrollLoad || pendingLazyLoad.current || resolvedLoading) return;
@@ -6890,9 +7182,13 @@ function SimpleTable({
     if (typeof maxRecords === "number" && data.length >= maxRecords) return;
     void handleLazyLoad();
   }, [recordPerChunk, data.length, handleLazyLoad, chunkCount, maxRecords]);
+  const onLoadChunkRef = useRef(onLoadChunk);
+  useEffect(() => {
+    onLoadChunkRef.current = onLoadChunk;
+  }, [onLoadChunk]);
   const rows = useMemo(
     () => table.getRowModel().rows,
-    [paginationState, sorting, columnFilters]
+    [paginationState, sorting, columnFilters, globalFilter]
   );
   const splittedRows = useMemo(
     () => rows.slice(0, chunkCount),
@@ -6931,7 +7227,7 @@ function SimpleTable({
         rafRef.current = null;
         const { scrollTop, scrollHeight, clientHeight } = container;
         if (scrollHeight - (scrollTop + clientHeight) <= scrollLoadThreshold && scrollTop !== 0 && scrollHeight > clientHeight) {
-          onLoadChunk();
+          onLoadChunkRef.current();
         }
       });
     };
@@ -6944,7 +7240,7 @@ function SimpleTable({
         rafRef.current = null;
       }
     };
-  }, [scrollLoadThreshold, onLoadChunk]);
+  }, [scrollLoadThreshold, virtualizationActive]);
   useEffect(() => {
     if (virtualizationActive) return;
     if (table.getState().pagination.pageIndex === 0) {
@@ -6953,24 +7249,51 @@ function SimpleTable({
   }, [virtualizationActive]);
   useEffect(() => {
     if (!virtualItems.length || !virtualizationActive) return;
-    const scheduleCheck = () => {
-      if (rafRef.current != null) return;
-      rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = null;
-        if (paddingBottom <= scrollLoadThreshold) {
-          onLoadChunk();
-        }
-      });
-    };
-    scheduleCheck();
-    return () => {
-      if (rafRef.current != null) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [paddingBottom]);
+    if (paddingBottom <= scrollLoadThreshold) {
+      onLoadChunkRef.current();
+    }
+  }, [paddingBottom, scrollLoadThreshold, virtualizationActive]);
   const columnCount = table.getAllLeafColumns().length;
+  const allHeaders = useMemo(() => {
+    const groups = table.getHeaderGroups();
+    if (groups.length === 0) return [];
+    return groups[0].headers;
+  }, [table]);
+  const { leftOffsets, rightOffsets, lastLeftId, firstRightId } = useMemo(() => {
+    if (!allHeaders || allHeaders.length === 0) {
+      return {
+        leftOffsets: /* @__PURE__ */ new Map(),
+        rightOffsets: /* @__PURE__ */ new Map(),
+        lastLeftId: null,
+        firstRightId: null
+      };
+    }
+    const leftPinned = allHeaders.filter(
+      (h) => h.column.getIsPinned() === "left"
+    );
+    const rightPinned = allHeaders.filter(
+      (h) => h.column.getIsPinned() === "right"
+    );
+    const leftMap = /* @__PURE__ */ new Map();
+    let leftAcc = 0;
+    for (const h of leftPinned) {
+      leftMap.set(h.column.id, leftAcc);
+      leftAcc += h.getSize();
+    }
+    const rightMap = /* @__PURE__ */ new Map();
+    let rightAcc = 0;
+    for (let i = rightPinned.length - 1; i >= 0; i--) {
+      const h = rightPinned[i];
+      rightMap.set(h.column.id, rightAcc);
+      rightAcc += h.getSize();
+    }
+    return {
+      leftOffsets: leftMap,
+      rightOffsets: rightMap,
+      lastLeftId: leftPinned.length > 0 ? leftPinned[leftPinned.length - 1].column.id : null,
+      firstRightId: rightPinned.length > 0 ? rightPinned[0].column.id : null
+    };
+  }, [allHeaders]);
   useEffect(() => {
     if (!selectable || !onSelectionChange) return;
     onSelectionChange(selectedRows);
@@ -7032,6 +7355,7 @@ function SimpleTable({
                 caption && /* @__PURE__ */ jsx(TableCaption, { children: caption }),
                 /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
                   if (header.isPlaceholder) return null;
+                  const pinPosition = header.column.getIsPinned();
                   return /* @__PURE__ */ jsx(
                     TableHeaderComponent,
                     {
@@ -7039,7 +7363,11 @@ function SimpleTable({
                       draggedColumnId,
                       enableColumnOrdering,
                       baseColumnOrder,
-                      setColumnOrder
+                      setColumnOrder,
+                      pinnedLeftOffset: pinPosition === "left" ? leftOffsets.get(header.column.id) : void 0,
+                      pinnedRightOffset: pinPosition === "right" ? rightOffsets.get(header.column.id) : void 0,
+                      isLastLeftPinned: header.column.id === lastLeftId,
+                      isFirstRightPinned: header.column.id === firstRightId
                     },
                     header.id
                   );
@@ -7062,7 +7390,8 @@ function SimpleTable({
                       renderExpandedContent,
                       virtualItems,
                       invalidateCache,
-                      getRowExpandable
+                      getRowExpandable,
+                      headers: allHeaders
                     }
                   ),
                   showInlineLoadingRow && resolvedLoading && /* @__PURE__ */ jsx(TableRow, { "data-loading-row": true, className: "pointer-events-none", children: /* @__PURE__ */ jsxs(
@@ -7123,12 +7452,12 @@ function DataTable({
   pageSize = 10,
   className
 }) {
-  const [sorting, setSorting] = React49.useState([]);
-  const [columnFilters, setColumnFilters] = React49.useState(
+  const [sorting, setSorting] = React50.useState([]);
+  const [columnFilters, setColumnFilters] = React50.useState(
     []
   );
-  const [columnVisibility, setColumnVisibility] = React49.useState({});
-  const [rowSelection, setRowSelection] = React49.useState({});
+  const [columnVisibility, setColumnVisibility] = React50.useState({});
+  const [rowSelection, setRowSelection] = React50.useState({});
   const table = useReactTable({
     data,
     columns,
@@ -7285,7 +7614,7 @@ var avatarFallbackVariants = cva(
     }
   }
 );
-var Avatar = React49.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+var Avatar = React50.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
@@ -7294,7 +7623,7 @@ var Avatar = React49.forwardRef(({ className, size, ...props }, ref) => /* @__PU
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -7303,7 +7632,7 @@ var AvatarImage = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React49.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarFallback = React50.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -7467,7 +7796,7 @@ var itemVariants = cva(
     }
   }
 );
-var Item9 = React49.forwardRef(
+var Item9 = React50.forwardRef(
   ({
     className,
     variant,
@@ -7533,7 +7862,7 @@ var Item9 = React49.forwardRef(
   }
 );
 Item9.displayName = "Item";
-var ItemGroup = React49.forwardRef(({ className, label, description, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
+var ItemGroup = React50.forwardRef(({ className, label, description, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
   (label || description) && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-0.5", children: [
     label && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
     description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: description })
@@ -7541,7 +7870,7 @@ var ItemGroup = React49.forwardRef(({ className, label, description, children, .
   children
 ] }));
 ItemGroup.displayName = "ItemGroup";
-var ItemList = React49.forwardRef(({ className, divided, spacing = "default", children, ...props }, ref) => {
+var ItemList = React50.forwardRef(({ className, divided, spacing = "default", children, ...props }, ref) => {
   const spacingClasses = {
     none: "space-y-0",
     sm: "space-y-0.5",
@@ -7564,7 +7893,7 @@ var ItemList = React49.forwardRef(({ className, divided, spacing = "default", ch
   );
 });
 ItemList.displayName = "ItemList";
-var ItemSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ItemSeparator = React50.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -7602,7 +7931,7 @@ var badgeVariants = cva(
     }
   }
 );
-var Badge = React49.forwardRef(
+var Badge = React50.forwardRef(
   ({
     className,
     variant,
@@ -7669,7 +7998,7 @@ function Calendar({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const { Card: Card2, CardHeader: CardHeader2, CardTitle: CardTitle2, CardContent: CardContent2, CardDescription: CardDescription2 } = React49.useMemo(() => {
+  const { Card: Card2, CardHeader: CardHeader2, CardTitle: CardTitle2, CardContent: CardContent2, CardDescription: CardDescription2 } = React50.useMemo(() => {
     try {
       const cardComponents = (init_card(), __toCommonJS(card_exports));
       return cardComponents;
@@ -7683,7 +8012,7 @@ function Calendar({
       };
     }
   }, []);
-  const defaultPresets = React49.useMemo(() => {
+  const defaultPresets = React50.useMemo(() => {
     if (!quickSelect && !presets) return [];
     const mode = props.mode;
     if (mode === "single") {
@@ -7691,7 +8020,7 @@ function Calendar({
         {
           label: "Today",
           value: () => /* @__PURE__ */ new Date(),
-          icon: React49.createElement(Calendar$1, { className: "h-3 w-3" })
+          icon: React50.createElement(Calendar$1, { className: "h-3 w-3" })
         },
         {
           label: "Tomorrow",
@@ -7700,7 +8029,7 @@ function Calendar({
             tomorrow.setDate(tomorrow.getDate() + 1);
             return tomorrow;
           },
-          icon: React49.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
+          icon: React50.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
         },
         {
           label: "Next Week",
@@ -7709,7 +8038,7 @@ function Calendar({
             nextWeek.setDate(nextWeek.getDate() + 7);
             return nextWeek;
           },
-          icon: React49.createElement(Calendar$1, { className: "h-3 w-3" })
+          icon: React50.createElement(Calendar$1, { className: "h-3 w-3" })
         }
       ];
     } else if (mode === "range") {
@@ -7722,7 +8051,7 @@ function Calendar({
             end.setDate(start.getDate() + 6);
             return { from: start, to: end };
           },
-          icon: React49.createElement(Calendar$1, { className: "h-3 w-3" })
+          icon: React50.createElement(Calendar$1, { className: "h-3 w-3" })
         },
         {
           label: "Next 7 Days",
@@ -7732,7 +8061,7 @@ function Calendar({
             end.setDate(start.getDate() + 7);
             return { from: start, to: end };
           },
-          icon: React49.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
+          icon: React50.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
         }
       ];
     } else {
@@ -7748,7 +8077,7 @@ function Calendar({
             }
             return dates;
           },
-          icon: React49.createElement(Calendar$1, { className: "h-3 w-3" })
+          icon: React50.createElement(Calendar$1, { className: "h-3 w-3" })
         }
       ];
     }
@@ -7759,24 +8088,24 @@ function Calendar({
     const selected = props.selected;
     const mode = props.mode;
     if (mode === "single" && selected) {
-      return React49.createElement(
+      return React50.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50"
         },
         [
-          React49.createElement(
+          React50.createElement(
             "div",
             {
               key: "header",
               className: "flex items-center gap-2 mb-1"
             },
             [
-              React49.createElement(Calendar$1, {
+              React50.createElement(Calendar$1, {
                 key: "icon",
                 className: "h-4 w-4"
               }),
-              React49.createElement(
+              React50.createElement(
                 "span",
                 {
                   key: "label",
@@ -7786,7 +8115,7 @@ function Calendar({
               )
             ]
           ),
-          React49.createElement(
+          React50.createElement(
             "p",
             {
               key: "date",
@@ -7804,24 +8133,24 @@ function Calendar({
     }
     if (mode === "range" && selected?.from) {
       const elements = [
-        React49.createElement(
+        React50.createElement(
           "div",
           {
             key: "from",
             className: "flex items-center gap-2 text-sm"
           },
           [
-            React49.createElement(
+            React50.createElement(
               "span",
               { key: "icon", className: "text-green-600" },
               "\u{1F7E2}"
             ),
-            React49.createElement(
+            React50.createElement(
               "span",
               { key: "label", className: "font-medium" },
               "From:"
             ),
-            React49.createElement(
+            React50.createElement(
               "span",
               { key: "date" },
               selected.from.toLocaleDateString()
@@ -7831,43 +8160,43 @@ function Calendar({
       ];
       if (selected.to) {
         elements.push(
-          React49.createElement(
+          React50.createElement(
             "div",
             {
               key: "to",
               className: "flex items-center gap-2 text-sm"
             },
             [
-              React49.createElement(
+              React50.createElement(
                 "span",
                 { key: "icon", className: "text-red-600" },
                 "\u{1F534}"
               ),
-              React49.createElement(
+              React50.createElement(
                 "span",
                 { key: "label", className: "font-medium" },
                 "To:"
               ),
-              React49.createElement(
+              React50.createElement(
                 "span",
                 { key: "date" },
                 selected.to.toLocaleDateString()
               )
             ]
           ),
-          React49.createElement(
+          React50.createElement(
             "div",
             {
               key: "duration",
               className: "flex items-center gap-2 pt-2 border-t text-sm"
             },
             [
-              React49.createElement(
+              React50.createElement(
                 "span",
                 { key: "icon", className: "text-mvn-blue-600" },
                 "\u23F1\uFE0F"
               ),
-              React49.createElement(
+              React50.createElement(
                 "span",
                 { key: "text" },
                 `Duration: ${Math.ceil(
@@ -7878,25 +8207,25 @@ function Calendar({
           )
         );
       }
-      return React49.createElement(
+      return React50.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50"
         },
-        React49.createElement("div", { className: "space-y-2" }, elements)
+        React50.createElement("div", { className: "space-y-2" }, elements)
       );
     }
     if (mode === "multiple" && Array.isArray(selected) && selected.length > 0) {
       const sortedDates = selected.sort((a, b) => a.getTime() - b.getTime()).slice(0, 5);
       const dateElements = sortedDates.map(
-        (date, index) => React49.createElement(
+        (date, index) => React50.createElement(
           "div",
           {
             key: index,
             className: "flex items-center justify-between p-2 bg-background rounded border"
           },
           [
-            React49.createElement(
+            React50.createElement(
               "span",
               {
                 key: "date",
@@ -7908,7 +8237,7 @@ function Calendar({
                 year: "numeric"
               })
             ),
-            React49.createElement(
+            React50.createElement(
               "button",
               {
                 key: "remove",
@@ -7929,18 +8258,18 @@ function Calendar({
         )
       );
       const elements = [
-        React49.createElement(
+        React50.createElement(
           "div",
           {
             key: "header",
             className: "flex items-center gap-2 mb-2"
           },
           [
-            React49.createElement(Star, {
+            React50.createElement(Star, {
               key: "icon",
               className: "h-4 w-4 text-yellow-500"
             }),
-            React49.createElement(
+            React50.createElement(
               "span",
               {
                 key: "label",
@@ -7950,7 +8279,7 @@ function Calendar({
             )
           ]
         ),
-        React49.createElement(
+        React50.createElement(
           "div",
           {
             key: "dates",
@@ -7961,7 +8290,7 @@ function Calendar({
       ];
       if (selected.length > 5) {
         elements.push(
-          React49.createElement(
+          React50.createElement(
             "p",
             {
               key: "more",
@@ -7971,7 +8300,7 @@ function Calendar({
           )
         );
       }
-      return React49.createElement(
+      return React50.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50 max-h-48 overflow-y-auto"
@@ -7986,7 +8315,7 @@ function Calendar({
     const elements = [];
     if ((quickSelect || presets) && activePresets.length > 0) {
       const presetButtons = activePresets.map(
-        (preset, index) => React49.createElement(
+        (preset, index) => React50.createElement(
           "button",
           {
             key: index,
@@ -7995,19 +8324,19 @@ function Calendar({
           },
           [
             preset.icon,
-            React49.createElement("span", { key: "label" }, preset.label)
+            React50.createElement("span", { key: "label" }, preset.label)
           ]
         )
       );
       elements.push(
-        React49.createElement(
+        React50.createElement(
           "div",
           {
             key: "presets",
             className: "space-y-2"
           },
           [
-            React49.createElement(
+            React50.createElement(
               "h5",
               {
                 key: "title",
@@ -8015,7 +8344,7 @@ function Calendar({
               },
               "Quick Select:"
             ),
-            React49.createElement(
+            React50.createElement(
               "div",
               {
                 key: "buttons",
@@ -8040,7 +8369,7 @@ function Calendar({
         label = "Clear Range";
       }
       elements.push(
-        React49.createElement(
+        React50.createElement(
           "button",
           {
             key: "clear",
@@ -8056,7 +8385,7 @@ function Calendar({
             disabled
           },
           [
-            React49.createElement(RotateCcw, {
+            React50.createElement(RotateCcw, {
               key: "icon",
               className: "mr-1 h-3 w-3"
             }),
@@ -8065,7 +8394,7 @@ function Calendar({
         )
       );
     }
-    return React49.createElement(
+    return React50.createElement(
       "div",
       {
         className: cn("space-y-3", sidebarClassName)
@@ -8073,7 +8402,7 @@ function Calendar({
       elements
     );
   };
-  const calendarElement = React49.createElement(DayPicker, {
+  const calendarElement = React50.createElement(DayPicker, {
     showOutsideDays,
     className: cn(
       "bg-background group/calendar p-4 border rounded-lg shadow-sm [--cell-size:theme(spacing.10)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
@@ -8175,7 +8504,7 @@ function Calendar({
     },
     components: {
       Root: ({ className: className2, rootRef, ...props2 }) => {
-        return React49.createElement("div", {
+        return React50.createElement("div", {
           "data-slot": "calendar",
           ref: rootRef,
           className: cn(className2),
@@ -8184,28 +8513,28 @@ function Calendar({
       },
       Chevron: ({ className: className2, orientation, ...props2 }) => {
         if (orientation === "left") {
-          return React49.createElement(ChevronLeft, {
+          return React50.createElement(ChevronLeft, {
             className: cn("size-4", className2),
             ...props2
           });
         }
         if (orientation === "right") {
-          return React49.createElement(ChevronRight, {
+          return React50.createElement(ChevronRight, {
             className: cn("size-4", className2),
             ...props2
           });
         }
-        return React49.createElement(ChevronDown, {
+        return React50.createElement(ChevronDown, {
           className: cn("size-4", className2),
           ...props2
         });
       },
       DayButton: CalendarDayButton,
       WeekNumber: ({ children, ...props2 }) => {
-        return React49.createElement(
+        return React50.createElement(
           "td",
           props2,
-          React49.createElement(
+          React50.createElement(
             "div",
             {
               className: "flex size-10 items-center justify-center text-center text-sm font-medium text-muted-foreground"
@@ -8220,25 +8549,25 @@ function Calendar({
   });
   if (layout === "compact") {
     if (withCard) {
-      return React49.createElement(
+      return React50.createElement(
         Card2,
         {
           className: cn("w-fit", cardClassName)
         },
-        React49.createElement(CardContent2, { className: "p-3" }, calendarElement)
+        React50.createElement(CardContent2, { className: "p-3" }, calendarElement)
       );
     }
     return calendarElement;
   }
   if (layout === "inline") {
-    const sidebarElement2 = renderDateInfo() || renderQuickActions() ? React49.createElement(
+    const sidebarElement2 = renderDateInfo() || renderQuickActions() ? React50.createElement(
       "div",
       {
         className: cn("min-w-[240px] space-y-3", sidebarClassName)
       },
       [renderDateInfo(), renderQuickActions()].filter(Boolean)
     ) : null;
-    const content = sidebarElement2 ? React49.createElement(
+    const content = sidebarElement2 ? React50.createElement(
       "div",
       {
         className: cn("flex gap-4 items-start", containerClassName)
@@ -8246,25 +8575,25 @@ function Calendar({
       [calendarElement, sidebarElement2]
     ) : calendarElement;
     if (withCard) {
-      return React49.createElement(
+      return React50.createElement(
         Card2,
         {
           className: cn("w-fit", cardClassName)
         },
         [
-          (cardTitle || cardDescription) && React49.createElement(CardHeader2, { key: "header" }, [
-            cardTitle && React49.createElement(
+          (cardTitle || cardDescription) && React50.createElement(CardHeader2, { key: "header" }, [
+            cardTitle && React50.createElement(
               CardTitle2,
               { key: "title", className: "text-base" },
               cardTitle
             ),
-            cardDescription && React49.createElement(
+            cardDescription && React50.createElement(
               CardDescription2,
               { key: "desc" },
               cardDescription
             )
           ]),
-          React49.createElement(
+          React50.createElement(
             CardContent2,
             {
               key: "content",
@@ -8277,7 +8606,7 @@ function Calendar({
     }
     return content;
   }
-  const sidebarElement = renderDateInfo() || renderQuickActions() ? React49.createElement(
+  const sidebarElement = renderDateInfo() || renderQuickActions() ? React50.createElement(
     "div",
     {
       className: cn("min-w-[240px] space-y-3", sidebarClassName)
@@ -8285,7 +8614,7 @@ function Calendar({
     [renderDateInfo(), renderQuickActions()].filter(Boolean)
   ) : null;
   if (withCard) {
-    const cardElement = React49.createElement(
+    const cardElement = React50.createElement(
       Card2,
       {
         className: cn(
@@ -8296,19 +8625,19 @@ function Calendar({
         )
       },
       [
-        (cardTitle || cardDescription) && React49.createElement(CardHeader2, { key: "header" }, [
-          cardTitle && React49.createElement(
+        (cardTitle || cardDescription) && React50.createElement(CardHeader2, { key: "header" }, [
+          cardTitle && React50.createElement(
             CardTitle2,
             { key: "title", className: "text-base" },
             cardTitle
           ),
-          cardDescription && React49.createElement(
+          cardDescription && React50.createElement(
             CardDescription2,
             { key: "desc" },
             cardDescription
           )
         ]),
-        React49.createElement(
+        React50.createElement(
           CardContent2,
           {
             key: "content",
@@ -8319,7 +8648,7 @@ function Calendar({
       ].filter(Boolean)
     );
     if (sidebarElement) {
-      return React49.createElement(
+      return React50.createElement(
         "div",
         {
           className: cn("flex gap-4 flex-wrap items-start", containerClassName)
@@ -8330,7 +8659,7 @@ function Calendar({
     return cardElement;
   }
   if (sidebarElement) {
-    return React49.createElement(
+    return React50.createElement(
       "div",
       {
         className: cn("flex gap-4 flex-wrap items-start", containerClassName)
@@ -8347,8 +8676,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React49.useRef(null);
-  React49.useEffect(() => {
+  const ref = React50.useRef(null);
+  React50.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -9964,7 +10293,7 @@ var pickerVariants = cva("w-full justify-start text-left font-normal", {
     variant: "outlined"
   }
 });
-var DatePicker = React49.forwardRef(
+var DatePicker = React50.forwardRef(
   ({
     date,
     onDateChange,
@@ -10011,7 +10340,7 @@ var DatePicker = React49.forwardRef(
   }
 );
 DatePicker.displayName = "DatePicker";
-var DateRangePicker = React49.forwardRef(
+var DateRangePicker = React50.forwardRef(
   ({
     dateRange,
     onDateRangeChange,
@@ -10069,15 +10398,15 @@ DateRangePicker.displayName = "DateRangePicker";
 
 // src/components/ui/carousel/index.tsx
 init_utils();
-var CarouselContext = React49.createContext(null);
+var CarouselContext = React50.createContext(null);
 function useCarousel() {
-  const context = React49.useContext(CarouselContext);
+  const context = React50.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
   return context;
 }
-var Carousel = React49.forwardRef(
+var Carousel = React50.forwardRef(
   ({
     orientation = "horizontal",
     opts,
@@ -10094,22 +10423,22 @@ var Carousel = React49.forwardRef(
       },
       plugins
     );
-    const [canScrollPrev, setCanScrollPrev] = React49.useState(false);
-    const [canScrollNext, setCanScrollNext] = React49.useState(false);
-    const onSelect = React49.useCallback((api2) => {
+    const [canScrollPrev, setCanScrollPrev] = React50.useState(false);
+    const [canScrollNext, setCanScrollNext] = React50.useState(false);
+    const onSelect = React50.useCallback((api2) => {
       if (!api2) {
         return;
       }
       setCanScrollPrev(api2.canScrollPrev());
       setCanScrollNext(api2.canScrollNext());
     }, []);
-    const scrollPrev = React49.useCallback(() => {
+    const scrollPrev = React50.useCallback(() => {
       api?.scrollPrev();
     }, [api]);
-    const scrollNext = React49.useCallback(() => {
+    const scrollNext = React50.useCallback(() => {
       api?.scrollNext();
     }, [api]);
-    const handleKeyDown = React49.useCallback(
+    const handleKeyDown = React50.useCallback(
       (event) => {
         if (event.key === "ArrowLeft") {
           event.preventDefault();
@@ -10121,13 +10450,13 @@ var Carousel = React49.forwardRef(
       },
       [scrollPrev, scrollNext]
     );
-    React49.useEffect(() => {
+    React50.useEffect(() => {
       if (!api || !setApi) {
         return;
       }
       setApi(api);
     }, [api, setApi]);
-    React49.useEffect(() => {
+    React50.useEffect(() => {
       if (!api) {
         return;
       }
@@ -10156,7 +10485,11 @@ var Carousel = React49.forwardRef(
           {
             ref,
             onKeyDownCapture: handleKeyDown,
-            className: cn("relative", className),
+            className: cn(
+              "relative",
+              orientation === "vertical" && "h-full",
+              className
+            ),
             role: "region",
             "aria-roledescription": "carousel",
             ...props,
@@ -10168,9 +10501,9 @@ var Carousel = React49.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React49.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React50.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden h-full", children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -10184,7 +10517,7 @@ var CarouselContent = React49.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React49.forwardRef(({ className, ...props }, ref) => {
+var CarouselItem = React50.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
@@ -10202,7 +10535,7 @@ var CarouselItem = React49.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React49.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselPrevious = React50.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs(
     Button,
@@ -10211,8 +10544,8 @@ var CarouselPrevious = React49.forwardRef(({ className, variant = "outline", siz
       variant,
       size,
       className: cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        "absolute z-10 h-8 w-8 rounded-full",
+        orientation === "horizontal" ? "left-2 top-1/2 -translate-y-[1rem]" : "top-2 left-1/2 -translate-x-[1rem] rotate-90",
         className
       ),
       disabled: !canScrollPrev,
@@ -10226,7 +10559,7 @@ var CarouselPrevious = React49.forwardRef(({ className, variant = "outline", siz
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React49.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselNext = React50.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs(
     Button,
@@ -10235,8 +10568,8 @@ var CarouselNext = React49.forwardRef(({ className, variant = "outline", size =
       variant,
       size,
       className: cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        "absolute z-10 h-8 w-8 rounded-full",
+        orientation === "horizontal" ? "right-2 top-1/2 -translate-y-[1rem]" : "bottom-2 left-1/2 -translate-x-[1rem] rotate-90",
         className
       ),
       disabled: !canScrollNext,
@@ -10265,10 +10598,10 @@ function SimpleCarousel({
   nextArrow,
   onSlideChange
 }) {
-  const [api, setApi] = React49.useState();
-  const [current, setCurrent] = React49.useState(0);
-  const [count, setCount] = React49.useState(0);
-  React49.useEffect(() => {
+  const [api, setApi] = React50.useState();
+  const [current, setCurrent] = React50.useState(0);
+  const [count, setCount] = React50.useState(0);
+  React50.useEffect(() => {
     if (!api) {
       return;
     }
@@ -10280,7 +10613,7 @@ function SimpleCarousel({
       onSlideChange?.(selectedIndex);
     });
   }, [api, onSlideChange]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!api || !autoPlay) {
       return;
     }
@@ -10294,54 +10627,65 @@ function SimpleCarousel({
     return () => clearInterval(interval);
   }, [api, autoPlay, loop]);
   const slideWidth = slidesToShow > 1 ? `${100 / slidesToShow}%` : "100%";
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxs(
-      Carousel,
-      {
-        setApi,
-        opts: {
-          align: "start",
-          loop
-        },
-        orientation,
-        className: cn("w-full mx-auto", containerClassName),
-        children: [
-          /* @__PURE__ */ jsx(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(
-            CarouselItem,
-            {
-              className: cn(itemClassName, item.className),
-              style: { flexBasis: slideWidth },
-              onClick: item.onClick,
-              children: item.content
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-full", orientation === "vertical" && "h-64", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Carousel,
+          {
+            setApi,
+            opts: {
+              align: "start",
+              loop
             },
-            item.id || index
-          )) }),
-          showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
-            prevArrow || /* @__PURE__ */ jsx(CarouselPrevious, {}),
-            nextArrow || /* @__PURE__ */ jsx(CarouselNext, {})
-          ] })
-        ]
-      }
-    ),
-    showDots && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-2 mt-4", children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: cn(
-          "h-2 w-2 rounded-full transition-colors",
-          current === index + 1 ? "bg-primary" : "bg-primary/20 hover:bg-primary/40"
+            orientation,
+            className: cn(
+              "w-full mx-auto",
+              orientation === "vertical" && "h-full",
+              containerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(
+                CarouselItem,
+                {
+                  className: cn(itemClassName, item.className),
+                  style: { flexBasis: slideWidth },
+                  onClick: item.onClick,
+                  children: item.content
+                },
+                item.id || index
+              )) }),
+              showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
+                prevArrow || /* @__PURE__ */ jsx(CarouselPrevious, {}),
+                nextArrow || /* @__PURE__ */ jsx(CarouselNext, {})
+              ] })
+            ]
+          }
         ),
-        onClick: () => api?.scrollTo(index),
-        "aria-label": `Go to slide ${index + 1}`
-      },
-      index
-    )) }),
-    count > 0 && /* @__PURE__ */ jsxs("div", { className: "py-2 text-center text-sm text-muted-foreground", children: [
-      "Slide ",
-      current,
-      " of ",
-      count
-    ] })
-  ] });
+        showDots && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-2 mt-4", children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            className: cn(
+              "h-2 w-2 rounded-full transition-colors",
+              current === index + 1 ? "bg-primary" : "bg-primary/20 hover:bg-primary/40"
+            ),
+            onClick: () => api?.scrollTo(index),
+            "aria-label": `Go to slide ${index + 1}`
+          },
+          index
+        )) }),
+        count > 0 && /* @__PURE__ */ jsxs("div", { className: "py-2 text-center text-sm text-muted-foreground", children: [
+          "Slide ",
+          current,
+          " of ",
+          count
+        ] })
+      ]
+    }
+  );
 }
 
 // src/components/ui/typography/index.tsx
@@ -10419,7 +10763,7 @@ var typeToTag = {
   list: "ul",
   "list-item": "li"
 };
-var Typography = React49.forwardRef(
+var Typography = React50.forwardRef(
   ({
     type,
     size,
@@ -10456,7 +10800,7 @@ var Typography = React49.forwardRef(
 );
 Typography.displayName = "Typography";
 function createWrapper(fixedType) {
-  return React49.forwardRef(
+  return React50.forwardRef(
     ({ ...props }, ref) => /* @__PURE__ */ jsx(Typography, { ref, type: fixedType, ...props })
   );
 }
@@ -10503,6 +10847,667 @@ var TypographyGroup = {
 // src/index.ts
 init_utils();
 
-export { Accordion, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Blockquote, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, Field, Form, FormItem, FormList, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, InlineCode, Input, InputGroup, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item9 as Item, ItemGroup, ItemList, ItemSeparator, Label, Lead, List3 as List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SimpleAvatar, SimpleCard, SimpleCarousel, SimpleTable, SimpleTabs, SimpleTooltip, Skeleton, SkeletonCard, Slider, Small, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getInitials, inputGroupVariants, inputVariants, itemVariants, labelVariants, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, requiredRule, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, urlRule, useCarousel, useForm, useSidebar, useToast, useWatch };
+// src/components/ui/charts/chart-theme.ts
+var getCSSVariable = (name) => {
+  if (typeof window === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+};
+var CHART_COLORS = {
+  primary: "var(--chart-1)",
+  secondary: "var(--chart-2)",
+  tertiary: "var(--chart-3)",
+  quaternary: "var(--chart-4)",
+  quinary: "var(--chart-5)",
+  // Semantic colors (fixed values)
+  success: "#22a55b",
+  warning: "#f59e0b",
+  error: "#ef4444",
+  info: "var(--chart-1)",
+  // Neutral - uses theme variables
+  muted: "var(--muted-foreground)",
+  foreground: "var(--foreground)",
+  background: "var(--background)",
+  grid: "var(--border)"
+};
+var CHART_PALETTE = [
+  CHART_COLORS.primary,
+  CHART_COLORS.secondary,
+  CHART_COLORS.tertiary,
+  CHART_COLORS.quaternary,
+  CHART_COLORS.quinary,
+  CHART_COLORS.success,
+  CHART_COLORS.warning,
+  CHART_COLORS.error
+];
+var getThemeColors = () => {
+  const chart1 = getCSSVariable("--chart-1");
+  const primary = getCSSVariable("--primary");
+  return {
+    primary: chart1 || primary || "#007bff",
+    chart1: chart1 || "#007bff",
+    chart2: getCSSVariable("--chart-2") || "#3d9bff",
+    chart3: getCSSVariable("--chart-3") || "#7abaff",
+    chart4: getCSSVariable("--chart-4") || "#0563c7",
+    chart5: getCSSVariable("--chart-5") || "#084f9b",
+    foreground: getCSSVariable("--foreground") || "#23252a",
+    muted: getCSSVariable("--muted-foreground") || "#616875",
+    grid: getCSSVariable("--border") || "#dbdde1",
+    background: getCSSVariable("--background") || "#fff"
+  };
+};
+var tooltipStyle = {
+  backgroundColor: "var(--popover)",
+  border: "1px solid var(--border)",
+  borderRadius: "6px",
+  padding: "8px 12px",
+  boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+  color: "var(--foreground)"
+};
+var legendStyle = {
+  fontSize: "12px",
+  color: "var(--muted-foreground, #616875)"
+};
+function LineChart({
+  data,
+  xAxisKey,
+  lines,
+  width = "100%",
+  height = 300,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin, children: [
+    showGrid && /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: CHART_COLORS.grid,
+        strokeOpacity: 0.5
+      }
+    ),
+    showXAxis && /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    showYAxis && /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {}),
+    lines.map((line, index) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: line.type ?? "monotone",
+        dataKey: line.dataKey,
+        name: line.name ?? line.dataKey,
+        stroke: line.stroke ?? CHART_PALETTE[index % CHART_PALETTE.length],
+        strokeWidth: line.strokeWidth ?? 2,
+        dot: line.dot ?? false,
+        activeDot: { r: 4 }
+      },
+      line.dataKey
+    ))
+  ] }) }) });
+}
+function BarChart({
+  data,
+  xAxisKey,
+  bars,
+  width = "100%",
+  height = 300,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  layout = "horizontal",
+  margin,
+  className
+}) {
+  const defaultMargin = layout === "vertical" ? { top: 20, right: 30, left: 60, bottom: 5 } : { top: 20, right: 30, left: 20, bottom: 5 };
+  const chartMargin = margin ?? defaultMargin;
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(BarChart$1, { data, layout, margin: chartMargin, children: [
+    showGrid && /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: CHART_COLORS.grid,
+        strokeOpacity: 0.5
+      }
+    ),
+    layout === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xAxisKey,
+          stroke: CHART_COLORS.muted,
+          fontSize: 12,
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          stroke: CHART_COLORS.muted,
+          fontSize: 12,
+          tickLine: false,
+          axisLine: false
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          type: "number",
+          domain: [0, "dataMax"],
+          stroke: CHART_COLORS.muted,
+          fontSize: 12,
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          dataKey: xAxisKey,
+          type: "category",
+          width: 80,
+          stroke: CHART_COLORS.muted,
+          fontSize: 12,
+          tickLine: false,
+          axisLine: false
+        }
+      )
+    ] }),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {}),
+    bars.map((bar, index) => {
+      const defaultRadius = layout === "vertical" ? [0, 4, 4, 0] : [4, 4, 0, 0];
+      return /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: bar.dataKey,
+          name: bar.name ?? bar.dataKey,
+          fill: bar.fill ?? CHART_PALETTE[index % CHART_PALETTE.length],
+          stackId: bar.stackId,
+          radius: bar.radius ?? defaultRadius
+        },
+        bar.dataKey
+      );
+    })
+  ] }) }) });
+}
+function PieChart({
+  data,
+  dataKey = "value",
+  nameKey = "name",
+  width = "100%",
+  height = 300,
+  showTooltip = true,
+  showLegend = true,
+  innerRadius = 0,
+  outerRadius = 80,
+  showLabel = false,
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(PieChart$1, { margin, children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data,
+        dataKey,
+        nameKey,
+        cx: "50%",
+        cy: "50%",
+        innerRadius,
+        outerRadius,
+        label: showLabel,
+        labelLine: showLabel,
+        children: data.map((entry, index) => /* @__PURE__ */ jsx(
+          Cell,
+          {
+            fill: entry.fill ?? CHART_PALETTE[index % CHART_PALETTE.length]
+          },
+          `cell-${index}`
+        ))
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {})
+  ] }) }) });
+}
+function AreaChart({
+  data,
+  xAxisKey,
+  areas,
+  width = "100%",
+  height = 300,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin, children: [
+    showGrid && /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: CHART_COLORS.grid,
+        strokeOpacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {}),
+    areas.map((area, index) => {
+      const color = area.stroke ?? CHART_PALETTE[index % CHART_PALETTE.length];
+      return /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: area.type ?? "monotone",
+          dataKey: area.dataKey,
+          name: area.name ?? area.dataKey,
+          stroke: color,
+          fill: area.fill ?? color,
+          fillOpacity: area.fillOpacity ?? 0.3,
+          stackId: area.stackId
+        },
+        area.dataKey
+      );
+    })
+  ] }) }) });
+}
+function ScatterChart({
+  series,
+  xAxisKey,
+  yAxisKey,
+  zAxisKey,
+  width = "100%",
+  height = 300,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(ScatterChart$1, { margin, children: [
+    showGrid && /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: CHART_COLORS.grid,
+        strokeOpacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        type: "number",
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        dataKey: yAxisKey,
+        type: "number",
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    zAxisKey && /* @__PURE__ */ jsx(ZAxis, { dataKey: zAxisKey, range: [60, 400] }),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 },
+        cursor: { strokeDasharray: "3 3" }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {}),
+    series.map((s, index) => /* @__PURE__ */ jsx(
+      Scatter,
+      {
+        name: s.name,
+        data: s.data,
+        fill: s.fill ?? CHART_PALETTE[index % CHART_PALETTE.length]
+      },
+      s.name
+    ))
+  ] }) }) });
+}
+function RadarChart({
+  data,
+  angleKey,
+  radars,
+  width = "100%",
+  height = 300,
+  showTooltip = true,
+  showLegend = true,
+  outerRadius = "80%",
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  domain,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(
+    RadarChart$1,
+    {
+      data,
+      margin,
+      outerRadius,
+      children: [
+        /* @__PURE__ */ jsx(PolarGrid, { stroke: CHART_COLORS.grid, strokeOpacity: 0.5 }),
+        /* @__PURE__ */ jsx(
+          PolarAngleAxis,
+          {
+            dataKey: angleKey,
+            stroke: CHART_COLORS.muted,
+            fontSize: 12
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PolarRadiusAxis,
+          {
+            stroke: CHART_COLORS.muted,
+            fontSize: 10,
+            angle: 90,
+            domain
+          }
+        ),
+        showTooltip && /* @__PURE__ */ jsx(
+          Tooltip$1,
+          {
+            contentStyle: tooltipStyle,
+            labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx(Legend, {}),
+        radars.map((radar, index) => {
+          const color = radar.stroke ?? CHART_PALETTE[index % CHART_PALETTE.length];
+          return /* @__PURE__ */ jsx(
+            Radar,
+            {
+              name: radar.name ?? radar.dataKey,
+              dataKey: radar.dataKey,
+              stroke: color,
+              fill: radar.fill ?? color,
+              fillOpacity: radar.fillOpacity ?? 0.3
+            },
+            radar.dataKey
+          );
+        })
+      ]
+    }
+  ) }) });
+}
+var THEMES = {
+  default: "default",
+  sunset: "sunset",
+  lavender: "lavender",
+  rose: "rose",
+  slate: "slate",
+  midnight: "midnight",
+  emerald: "emerald",
+  amber: "amber",
+  crimson: "crimson"
+};
+var THEME_CATALOG = [
+  {
+    name: "default",
+    label: "Default (Toss Blue)",
+    description: "Clean, professional blue theme",
+    primaryColor: "hsl(211, 100%, 50%)"
+  },
+  {
+    name: "sunset",
+    label: "Sunset",
+    description: "Warm orange for energy and creativity",
+    primaryColor: "hsl(24, 95%, 53%)"
+  },
+  {
+    name: "lavender",
+    label: "Lavender",
+    description: "Elegant purple for creative projects",
+    primaryColor: "hsl(262, 83%, 58%)"
+  },
+  {
+    name: "rose",
+    label: "Rose",
+    description: "Soft pink for modern, approachable design",
+    primaryColor: "hsl(346, 77%, 50%)"
+  },
+  {
+    name: "slate",
+    label: "Slate",
+    description: "Minimal gray for clean, professional look",
+    primaryColor: "hsl(215, 16%, 47%)"
+  },
+  {
+    name: "midnight",
+    label: "Midnight",
+    description: "Deep purple-blue optimized for dark mode",
+    primaryColor: "hsl(240, 65%, 52%)"
+  },
+  {
+    name: "emerald",
+    label: "Emerald",
+    description: "Fresh teal-green for tech-forward apps",
+    primaryColor: "hsl(160, 84%, 39%)"
+  },
+  {
+    name: "amber",
+    label: "Amber",
+    description: "Premium gold for attention-grabbing UI",
+    primaryColor: "hsl(38, 92%, 50%)"
+  },
+  {
+    name: "crimson",
+    label: "Crimson",
+    description: "Bold red for urgent, passionate design",
+    primaryColor: "hsl(0, 84%, 50%)"
+  }
+];
+function getCurrentTheme() {
+  if (typeof document === "undefined") return "default";
+  const html = document.documentElement;
+  for (const theme of Object.keys(THEMES)) {
+    if (theme !== "default" && html.classList.contains(`theme-${theme}`)) {
+      return theme;
+    }
+  }
+  return "default";
+}
+function getCurrentMode() {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+function setTheme(theme) {
+  if (typeof document === "undefined") return;
+  const html = document.documentElement;
+  for (const t of Object.keys(THEMES)) {
+    if (t !== "default") {
+      html.classList.remove(`theme-${t}`);
+    }
+  }
+  if (theme !== "default") {
+    html.classList.add(`theme-${theme}`);
+  }
+  try {
+    localStorage.setItem("mvn-theme", theme);
+  } catch {
+  }
+}
+function setMode(mode) {
+  if (typeof document === "undefined") return;
+  const html = document.documentElement;
+  if (mode === "system") {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    html.classList.toggle("dark", prefersDark);
+  } else {
+    html.classList.toggle("dark", mode === "dark");
+  }
+  try {
+    localStorage.setItem("mvn-mode", mode);
+  } catch {
+  }
+}
+function initializeTheme() {
+  if (typeof window === "undefined") return;
+  try {
+    const savedTheme = localStorage.getItem("mvn-theme");
+    const savedMode = localStorage.getItem("mvn-mode");
+    if (savedTheme && savedTheme in THEMES) {
+      setTheme(savedTheme);
+    }
+    if (savedMode) {
+      setMode(savedMode);
+    } else {
+      setMode("system");
+    }
+  } catch {
+  }
+}
+var ThemeContext = createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "default",
+  defaultMode = "system",
+  storageKey = "mvn-theme"
+}) {
+  const [theme, setThemeState] = useState(defaultTheme);
+  const [mode, setModeState] = useState(defaultMode);
+  const [resolvedMode, setResolvedMode] = useState("light");
+  useEffect(() => {
+    try {
+      const savedTheme = localStorage.getItem(storageKey);
+      const savedMode = localStorage.getItem(`${storageKey}-mode`);
+      if (savedTheme && savedTheme in THEMES) {
+        setThemeState(savedTheme);
+      }
+      if (savedMode) {
+        setModeState(savedMode);
+      }
+    } catch {
+    }
+  }, [storageKey]);
+  useEffect(() => {
+    const html = document.documentElement;
+    for (const t of Object.keys(THEMES)) {
+      if (t !== "default") {
+        html.classList.remove(`theme-${t}`);
+      }
+    }
+    if (theme !== "default") {
+      html.classList.add(`theme-${theme}`);
+    }
+    try {
+      localStorage.setItem(storageKey, theme);
+    } catch {
+    }
+  }, [theme, storageKey]);
+  useEffect(() => {
+    const html = document.documentElement;
+    const applyMode = (isDark) => {
+      html.classList.toggle("dark", isDark);
+      setResolvedMode(isDark ? "dark" : "light");
+    };
+    if (mode === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      applyMode(mediaQuery.matches);
+      const handler = (e) => applyMode(e.matches);
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    } else {
+      applyMode(mode === "dark");
+    }
+    try {
+      localStorage.setItem(`${storageKey}-mode`, mode);
+    } catch {
+    }
+  }, [mode, storageKey]);
+  const value = {
+    theme,
+    mode,
+    resolvedMode,
+    setTheme: setThemeState,
+    setMode: setModeState
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme2() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+export { Accordion, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, BarChart, Blockquote, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLORS, CHART_PALETTE, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, Field, Form, FormItem, FormList, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, InlineCode, Input, InputGroup, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item9 as Item, ItemGroup, ItemList, ItemSeparator, Label, Lead, LineChart, List3 as List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SimpleAvatar, SimpleCard, SimpleCarousel, SimpleTable, SimpleTabs, SimpleTooltip, Skeleton, SkeletonCard, Slider, Small, Spinner, Switch, THEMES, THEME_CATALOG, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getCurrentMode, getCurrentTheme, getInitials, getThemeColors, initializeTheme, inputGroupVariants, inputVariants, itemVariants, labelVariants, legendStyle, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, requiredRule, separatorVariants, setMode, setTheme, skeletonVariants, spinnerVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, tooltipStyle, urlRule, useCarousel, useForm, useSidebar, useTheme2 as useTheme, useToast, useWatch };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map