@mvn-ui/react 0.1.4 → 0.1.6

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React50 = require('react');
+var React52 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
@@ -65,7 +65,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React50__namespace = /*#__PURE__*/_interopNamespace(React50);
+var React52__namespace = /*#__PURE__*/_interopNamespace(React52);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
@@ -337,7 +337,7 @@ var init_card = __esm({
         }
       }
     );
-    exports.Card = React50__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    exports.Card = React52__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
@@ -346,7 +346,7 @@ var init_card = __esm({
       }
     ));
     exports.Card.displayName = "Card";
-    exports.CardHeader = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    exports.CardHeader = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
@@ -355,7 +355,7 @@ var init_card = __esm({
       }
     ));
     exports.CardHeader.displayName = "CardHeader";
-    exports.CardTitle = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    exports.CardTitle = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "h3",
       {
         ref,
@@ -364,7 +364,7 @@ var init_card = __esm({
       }
     ));
     exports.CardTitle.displayName = "CardTitle";
-    exports.CardDescription = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    exports.CardDescription = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
@@ -373,9 +373,9 @@ var init_card = __esm({
       }
     ));
     exports.CardDescription.displayName = "CardDescription";
-    exports.CardContent = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+    exports.CardContent = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
     exports.CardContent.displayName = "CardContent";
-    exports.CardFooter = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    exports.CardFooter = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
@@ -386,6 +386,132 @@ var init_card = __esm({
     exports.CardFooter.displayName = "CardFooter";
   }
 });
+var BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+function useBreakpoint(ssrFallback = "md") {
+  const [breakpoint, setBreakpoint] = React52.useState(ssrFallback);
+  React52.useEffect(() => {
+    const getBreakpoint = () => {
+      const width = window.innerWidth;
+      if (width >= BREAKPOINTS.xl) return "xl";
+      if (width >= BREAKPOINTS.lg) return "lg";
+      if (width >= BREAKPOINTS.md) return "md";
+      if (width >= BREAKPOINTS.sm) return "sm";
+      return "xs";
+    };
+    setBreakpoint(getBreakpoint());
+    let timeoutId;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => setBreakpoint(getBreakpoint()), 150);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  return breakpoint;
+}
+function useBreakpointValue(values, fallback) {
+  const breakpoint = useBreakpoint();
+  return React52.useMemo(() => {
+    const order = ["xs", "sm", "md", "lg", "xl"];
+    const currentIndex = order.indexOf(breakpoint);
+    for (let i = currentIndex; i >= 0; i--) {
+      const bp = order[i];
+      if (values[bp] !== void 0) {
+        return values[bp];
+      }
+    }
+    return fallback;
+  }, [breakpoint, values, fallback]);
+}
+
+// src/hooks/useIsMobile.ts
+function useIsMobile(ssrFallback = false) {
+  const fallbackBreakpoint = ssrFallback ? "xs" : "md";
+  const breakpoint = useBreakpoint(fallbackBreakpoint);
+  return breakpoint === "xs" || breakpoint === "sm";
+}
+function useIsTablet() {
+  const breakpoint = useBreakpoint();
+  return breakpoint === "md";
+}
+function useIsDesktop() {
+  const breakpoint = useBreakpoint();
+  return breakpoint === "lg" || breakpoint === "xl";
+}
+function useSwipeActions({
+  leftActions = [],
+  rightActions = [],
+  threshold = 80,
+  disabled = false
+} = {}) {
+  const [offsetX, setOffsetX] = React52.useState(0);
+  const [isDragging, setIsDragging] = React52.useState(false);
+  const [revealed, setRevealed] = React52.useState(null);
+  const startX = React52.useRef(0);
+  const currentOffsetX = React52.useRef(0);
+  currentOffsetX.current = offsetX;
+  const reset = React52.useCallback(() => {
+    setOffsetX(0);
+    setRevealed(null);
+  }, []);
+  const handleTouchStart = React52.useCallback(
+    (e) => {
+      if (disabled) return;
+      startX.current = e.touches[0].clientX;
+      setIsDragging(true);
+    },
+    [disabled]
+  );
+  const handleTouchMove = React52.useCallback(
+    (e) => {
+      if (disabled || !isDragging) return;
+      const currentX = e.touches[0].clientX;
+      const deltaX = currentX - startX.current;
+      const maxLeft = rightActions.length > 0 ? -threshold * 1.5 : 0;
+      const maxRight = leftActions.length > 0 ? threshold * 1.5 : 0;
+      const clampedX = Math.max(maxLeft, Math.min(maxRight, deltaX));
+      setOffsetX(clampedX);
+    },
+    [disabled, isDragging, threshold, leftActions.length, rightActions.length]
+  );
+  const handleTouchEnd = React52.useCallback(() => {
+    setIsDragging(false);
+    const offset = currentOffsetX.current;
+    if (Math.abs(offset) >= threshold) {
+      if (offset < 0 && rightActions.length > 0) {
+        setRevealed("right");
+        setOffsetX(-threshold);
+      } else if (offset > 0 && leftActions.length > 0) {
+        setRevealed("left");
+        setOffsetX(threshold);
+      } else {
+        reset();
+      }
+    } else {
+      reset();
+    }
+  }, [threshold, leftActions.length, rightActions.length, reset]);
+  const computedOffsetX = revealed === "right" ? -threshold : revealed === "left" ? threshold : offsetX;
+  return {
+    offsetX: computedOffsetX,
+    revealed,
+    isDragging,
+    handlers: {
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd
+    },
+    reset
+  };
+}
 
 // src/components/ui/button/index.tsx
 init_utils();
@@ -405,8 +531,10 @@ var buttonVariants = classVarianceAuthority.cva(
         default: "h-10 px-4 py-2.5 rounded-md text-[0.9375rem]",
         sm: "h-8 px-3 py-1.5 rounded text-sm",
         lg: "h-12 px-5 py-3 rounded-md text-base",
+        touch: "h-11 min-h-[44px] px-4 py-2.5 rounded-md text-base",
         icon: "h-10 w-10 rounded-md",
-        "icon-sm": "h-8 w-8 rounded"
+        "icon-sm": "h-8 w-8 rounded",
+        "icon-touch": "h-11 w-11 min-h-[44px] min-w-[44px] rounded-md"
       },
       fullWidth: {
         true: "w-full"
@@ -418,7 +546,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React50__namespace.forwardRef(
+var Button = React52__namespace.forwardRef(
   ({
     className,
     variant,
@@ -468,7 +596,7 @@ var Button = React50__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-var IconButton = React50__namespace.forwardRef(
+var IconButton = React52__namespace.forwardRef(
   ({ icon, size = "icon", className, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, size, className, ...props, children: icon });
   }
@@ -551,9 +679,10 @@ var inputVariants = classVarianceAuthority.cva(
         underlined: "rounded-md border-0 border-b-2 border-mvn-gray-300 px-3.5 py-2.5 hover:border-mvn-gray-400 focus:border-primary bg-transparent"
       },
       inputSize: {
-        sm: "h-8 text-sm px-2.5 py-1.5 rounded",
-        default: "h-10 text-[0.9375rem] px-3.5 py-2.5 rounded-md",
-        lg: "h-12 text-base px-4 py-3 rounded-md"
+        sm: "h-8 text-base px-2.5 py-1.5 rounded",
+        default: "h-10 text-base px-3.5 py-2.5 rounded-md",
+        lg: "h-12 text-base px-4 py-3 rounded-md",
+        touch: "h-11 min-h-[44px] text-base px-3.5 py-2.5 rounded-md"
       }
     },
     defaultVariants: {
@@ -562,7 +691,7 @@ var inputVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Input = React50__namespace.forwardRef(
+var Input = React52__namespace.forwardRef(
   ({
     className,
     containerClassName,
@@ -580,12 +709,12 @@ var Input = React50__namespace.forwardRef(
     value,
     ...props
   }, ref) => {
-    const [showPassword, setShowPassword] = React50__namespace.useState(false);
-    const [internalValue, setInternalValue] = React50__namespace.useState(value || "");
-    const generatedId = React50__namespace.useId();
+    const [showPassword, setShowPassword] = React52__namespace.useState(false);
+    const [internalValue, setInternalValue] = React52__namespace.useState(value || "");
+    const generatedId = React52__namespace.useId();
     const inputId = id || generatedId;
     const hasError = !!error;
-    React50__namespace.useEffect(() => {
+    React52__namespace.useEffect(() => {
       setInternalValue(value || "");
     }, [value]);
     const handleClear = () => {
@@ -694,7 +823,7 @@ var labelVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Label = React50__namespace.forwardRef(({ className, variant, required, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Label = React52__namespace.forwardRef(({ className, variant, required, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   LabelPrimitive__namespace.Root,
   {
     ref,
@@ -735,7 +864,7 @@ var textareaVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Textarea = React50__namespace.forwardRef(
+var Textarea = React52__namespace.forwardRef(
   ({
     className,
     containerClassName,
@@ -753,8 +882,8 @@ var Textarea = React50__namespace.forwardRef(
     id,
     ...props
   }, ref) => {
-    const internalRef = React50__namespace.useRef(null);
-    const [charCount, setCharCount] = React50__namespace.useState(0);
+    const internalRef = React52__namespace.useRef(null);
+    const [charCount, setCharCount] = React52__namespace.useState(0);
     const textareaRef = (node) => {
       internalRef.current = node;
       if (typeof ref === "function") {
@@ -763,14 +892,14 @@ var Textarea = React50__namespace.forwardRef(
         ref.current = node;
       }
     };
-    React50__namespace.useEffect(() => {
+    React52__namespace.useEffect(() => {
       if (autoResize && internalRef.current) {
         const textarea = internalRef.current;
         textarea.style.height = "auto";
         textarea.style.height = `${textarea.scrollHeight}px`;
       }
     }, [value, autoResize]);
-    const handleChange = React50__namespace.useCallback(
+    const handleChange = React52__namespace.useCallback(
       (e) => {
         if (showCount || maxLength) {
           setCharCount(e.target.value.length);
@@ -779,13 +908,13 @@ var Textarea = React50__namespace.forwardRef(
       },
       [onChange, showCount, maxLength]
     );
-    React50__namespace.useEffect(() => {
+    React52__namespace.useEffect(() => {
       if (showCount || maxLength) {
         setCharCount(String(value || "").length);
       }
     }, [value, showCount, maxLength]);
     const hasError = !!error;
-    const generatedId = React50__namespace.useId();
+    const generatedId = React52__namespace.useId();
     const textareaId = id || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full space-y-2", containerClassName), children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(
@@ -846,10 +975,10 @@ Textarea.displayName = "Textarea";
 
 // src/components/ui/select/index.tsx
 init_utils();
-var Select = React50__namespace.forwardRef(
+var Select = React52__namespace.forwardRef(
   ({ children, value, onValueChange, ...props }, _ref) => {
-    const [internalValue, setInternalValue] = React50__namespace.useState(value ?? "");
-    React50__namespace.useEffect(() => {
+    const [internalValue, setInternalValue] = React52__namespace.useState(value ?? "");
+    React52__namespace.useEffect(() => {
       setInternalValue(value ?? "");
     }, [value]);
     const handleValueChange = (newValue) => {
@@ -871,7 +1000,7 @@ Select.displayName = "Select";
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
 var triggerVariants = classVarianceAuthority.cva(
-  "flex h-10 w-full items-center justify-between text-[0.9375rem] transition-colors placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:bg-mvn-gray-100 disabled:opacity-60 [&>span]:line-clamp-1",
+  "flex w-full items-center justify-between text-[0.9375rem] transition-colors placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:bg-mvn-gray-100 disabled:opacity-60 [&>span]:line-clamp-1",
   {
     variants: {
       variant: {
@@ -879,18 +1008,25 @@ var triggerVariants = classVarianceAuthority.cva(
         filled: "rounded-md border border-transparent bg-mvn-gray-100 px-3.5 py-2.5 hover:bg-mvn-gray-200 focus:border-primary focus:bg-background",
         borderless: "rounded-md border border-transparent bg-transparent px-3.5 py-2.5 shadow-none",
         underlined: "rounded-md border-0 border-b-2 border-mvn-gray-300 px-3.5 py-2.5 hover:border-mvn-gray-400 focus:border-primary"
+      },
+      size: {
+        sm: "h-8 text-sm px-2.5",
+        default: "h-10",
+        lg: "h-12 text-base px-4",
+        touch: "h-11 min-h-[44px] text-base"
       }
     },
     defaultVariants: {
-      variant: "outlined"
+      variant: "outlined",
+      size: "default"
     }
   }
 );
-var SelectTrigger = React50__namespace.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectTrigger = React52__namespace.forwardRef(({ className, children, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Trigger,
   {
     ref,
-    className: cn(triggerVariants({ variant }), className),
+    className: cn(triggerVariants({ variant, size }), className),
     ...props,
     children: [
       children,
@@ -899,7 +1035,7 @@ var SelectTrigger = React50__namespace.forwardRef(({ className, children, varian
   }
 ));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollUpButton = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollUpButton,
   {
     ref,
@@ -912,7 +1048,7 @@ var SelectScrollUpButton = React50__namespace.forwardRef(({ className, ...props
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollDownButton = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollDownButton,
   {
     ref,
@@ -925,7 +1061,7 @@ var SelectScrollDownButton = React50__namespace.forwardRef(({ className, ...prop
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React50__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectContent = React52__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Content,
   {
     ref,
@@ -953,7 +1089,7 @@ var SelectContent = React50__namespace.forwardRef(({ className, children, positi
   }
 ) }));
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectLabel = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Label,
   {
     ref,
@@ -965,7 +1101,7 @@ var SelectLabel = React50__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React50__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectItem = React52__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Item,
   {
     ref,
@@ -981,7 +1117,7 @@ var SelectItem = React50__namespace.forwardRef(({ className, children, ...props
   }
 ));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectSeparator = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Separator,
   {
     ref,
@@ -1000,7 +1136,8 @@ var checkboxVariants = classVarianceAuthority.cva(
       size: {
         sm: "h-4 w-4 rounded",
         default: "h-[18px] w-[18px] rounded",
-        lg: "h-5 w-5 rounded-md"
+        lg: "h-5 w-5 rounded-md",
+        touch: "h-6 w-6 rounded-md"
       }
     },
     defaultVariants: {
@@ -1008,10 +1145,23 @@ var checkboxVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Checkbox = React50__namespace.forwardRef(({ className, size, label, description, indeterminate, ...props }, ref) => {
-  const generatedId = React50__namespace.useId();
+var checkboxWrapperVariants = classVarianceAuthority.cva("flex items-start", {
+  variants: {
+    size: {
+      sm: "gap-2.5",
+      default: "gap-2.5",
+      lg: "gap-3",
+      touch: "gap-3 min-h-[44px] items-center"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var Checkbox = React52__namespace.forwardRef(({ className, size, label, description, indeterminate, ...props }, ref) => {
+  const generatedId = React52__namespace.useId();
   const checkboxId = props.id || generatedId;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(checkboxWrapperVariants({ size })), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CheckboxPrimitive__namespace.Root,
       {
@@ -1057,10 +1207,40 @@ var radioGroupVariants = classVarianceAuthority.cva("grid gap-2", {
     orientation: "vertical"
   }
 });
-var RadioGroup = React50__namespace.forwardRef(
+var radioItemVariants = classVarianceAuthority.cva(
+  "aspect-square rounded-full border border-line-strong text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "h-3.5 w-3.5",
+        default: "h-4 w-4",
+        lg: "h-5 w-5",
+        touch: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var radioIndicatorVariants = classVarianceAuthority.cva("fill-primary text-primary", {
+  variants: {
+    size: {
+      sm: "h-2 w-2",
+      default: "h-2.5 w-2.5",
+      lg: "h-3 w-3",
+      touch: "h-3.5 w-3.5"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var RadioGroup = React52__namespace.forwardRef(
   ({
     className,
     orientation = "vertical",
+    size,
     items,
     itemClassName,
     renderItem,
@@ -1070,14 +1250,15 @@ var RadioGroup = React50__namespace.forwardRef(
     children,
     ...props
   }, ref) => {
-    const generatedId = React50__namespace.useId();
-    const defaultRenderItem = React50__namespace.useCallback(
+    const generatedId = React52__namespace.useId();
+    const defaultRenderItem = React52__namespace.useCallback(
       (item) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
             "flex items-start gap-3 rounded-lg border border-line-soft p-4 transition-colors hover:bg-surface-2 has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/5",
             item.disabled && "opacity-50 cursor-not-allowed",
+            size === "touch" && "min-h-[44px] items-center",
             itemClassName
           ),
           children: [
@@ -1087,8 +1268,8 @@ var RadioGroup = React50__namespace.forwardRef(
                 value: item.value,
                 id: `${generatedId}-${item.value}`,
                 disabled: item.disabled,
-                className: "aspect-square h-4 w-4 rounded-full border border-line-strong text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary mt-0.5 shrink-0",
-                children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleIcon, { className: "h-2.5 w-2.5 fill-primary text-primary" }) })
+                className: cn(radioItemVariants({ size }), "mt-0.5"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleIcon, { className: cn(radioIndicatorVariants({ size })) }) })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [
@@ -1109,7 +1290,7 @@ var RadioGroup = React50__namespace.forwardRef(
         },
         item.value
       ),
-      [generatedId, itemClassName]
+      [generatedId, itemClassName, size]
     );
     const renderFunction = renderItem || defaultRenderItem;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
@@ -1129,17 +1310,14 @@ var RadioGroup = React50__namespace.forwardRef(
   }
 );
 RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
-var RadioGroupItem = React50__namespace.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React52__namespace.forwardRef(({ className, size, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Item,
     {
       ref,
-      className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-line-strong text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
-        className
-      ),
+      className: cn(radioItemVariants({ size }), className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleIcon, { className: "h-2.5 w-2.5 fill-primary text-primary" }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleIcon, { className: cn(radioIndicatorVariants({ size })) }) })
     }
   );
 });
@@ -1147,32 +1325,49 @@ RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
 
 // src/components/ui/switch/index.tsx
 init_utils();
-var Switch = React50__namespace.forwardRef(({ className, offNode, onNode, ...props }, ref) => {
+var switchVariants = classVarianceAuthority.cva(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        default: "h-6 w-11",
+        lg: "h-7 w-[52px]",
+        touch: "h-7 w-[52px] min-h-[44px] min-w-[44px]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var thumbVariants = classVarianceAuthority.cva(
+  "group pointer-events-none relative flex items-center justify-center rounded-full bg-background shadow-lg ring-0 transition-transform",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        default: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+        lg: "h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0",
+        touch: "h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var Switch = React52__namespace.forwardRef(({ className, size, offNode, onNode, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     SwitchPrimitives__namespace.Root,
     {
       ref,
-      className: cn(
-        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-        className
-      ),
+      className: cn(switchVariants({ size }), className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        SwitchPrimitives__namespace.Thumb,
-        {
-          className: cn(
-            "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__ */ jsxRuntime.jsx("span", { className: "absolute opacity-0 group-data-[state=checked]:opacity-100 transition-all duration-200", children: onNode }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute opacity-100 group-data-[state=checked]:opacity-0 transition-all duration-200", children: offNode })
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsxs(SwitchPrimitives__namespace.Thumb, { className: cn(thumbVariants({ size })), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute opacity-0 group-data-[state=checked]:opacity-100 transition-all duration-200", children: onNode }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute opacity-100 group-data-[state=checked]:opacity-0 transition-all duration-200", children: offNode })
+      ] })
     }
   );
 });
@@ -1201,7 +1396,7 @@ var toggleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toggle = React50__namespace.forwardRef(({ className, variant, size, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var Toggle = React52__namespace.forwardRef(({ className, variant, size, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   TogglePrimitive__namespace.Root,
   {
     ref,
@@ -1247,9 +1442,9 @@ var toggleGroupItemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var ToggleGroup = React50__namespace.forwardRef(
+var ToggleGroup = React52__namespace.forwardRef(
   ({ className, size, items, itemClassName, renderItem, children, ...props }, ref) => {
-    const defaultRenderItem = React50__namespace.useCallback(
+    const defaultRenderItem = React52__namespace.useCallback(
       (item) => /* @__PURE__ */ jsxRuntime.jsxs(
         ToggleGroupPrimitive__namespace.Item,
         {
@@ -1279,7 +1474,7 @@ var ToggleGroup = React50__namespace.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React50__namespace.forwardRef(({ className, size, children, ...props }, ref) => {
+var ToggleGroupItem = React52__namespace.forwardRef(({ className, size, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -1294,7 +1489,7 @@ ToggleGroupItem.displayName = "ToggleGroupItem";
 
 // src/components/ui/slider/index.tsx
 init_utils();
-var Slider = React50__namespace.forwardRef(
+var Slider = React52__namespace.forwardRef(
   ({
     className,
     showValue,
@@ -1353,7 +1548,7 @@ var inputGroupVariants = classVarianceAuthority.cva("flex items-stretch w-full",
     size: "default"
   }
 });
-var InputGroup = React50__namespace.forwardRef(
+var InputGroup = React52__namespace.forwardRef(
   ({
     className,
     size,
@@ -1389,9 +1584,9 @@ var InputGroup = React50__namespace.forwardRef(
             }
           ),
           leftElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center", children: leftElement }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: React50__namespace.Children.map(children, (child) => {
-            if (React50__namespace.isValidElement(child)) {
-              return React50__namespace.cloneElement(child, {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: React52__namespace.Children.map(children, (child) => {
+            if (React52__namespace.isValidElement(child)) {
+              return React52__namespace.cloneElement(child, {
                 className: cn(
                   child.props.className,
                   (leftAddon || leftElement) && "rounded-l-none border-l-0",
@@ -1422,7 +1617,7 @@ InputGroup.displayName = "InputGroup";
 
 // src/components/ui/input-otp/index.tsx
 init_utils();
-var InputOTP = React50__namespace.forwardRef(({ containerClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var InputOTP = React52__namespace.forwardRef(({ containerClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   inputOtp.OTPInput,
   {
     ref,
@@ -1435,10 +1630,10 @@ var InputOTP = React50__namespace.forwardRef(({ containerClassName, children, ..
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props }));
+var InputOTPGroup = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React50__namespace.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React50__namespace.useContext(inputOtp.OTPInputContext);
+var InputOTPSlot = React52__namespace.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React52__namespace.useContext(inputOtp.OTPInputContext);
   if (!inputOTPContext) {
     console.error("InputOTPSlot must be used within InputOTP");
     return null;
@@ -1472,7 +1667,7 @@ var InputOTPSlot = React50__namespace.forwardRef(({ index, className, ...props }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "separator", className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MinusIcon, { className: "h-4 w-4 text-muted-foreground" }) }));
+var InputOTPSeparator = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "separator", className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MinusIcon, { className: "h-4 w-4 text-muted-foreground" }) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/ui/form/form-utils.ts
@@ -1907,9 +2102,9 @@ function createFormInstance(name) {
 }
 
 // src/components/ui/form/form-context.tsx
-var FormContext = React50.createContext(null);
+var FormContext = React52.createContext(null);
 function useForm(name) {
-  const ref = React50.useRef();
+  const ref = React52.useRef();
   if (!ref.current) {
     const instance = createFormInstance(name);
     ref.current = instance;
@@ -1919,17 +2114,17 @@ function useForm(name) {
   return ref.current;
 }
 function useWatch(name, formInstance) {
-  const ctx = React50.useContext(FormContext);
+  const ctx = React52.useContext(FormContext);
   const form = formInstance ?? ctx?.form;
   if (!form)
     throw new Error(
       "useWatch must be used inside Form or receive a form instance."
     );
-  const [state, setState] = React50.useState(() => ({
+  const [state, setState] = React52.useState(() => ({
     value: name === void 0 ? form.getFieldsValue() : Array.isArray(name) ? name.map((n) => form.getFieldValue(n)) : form.getFieldValue(name),
     revision: 0
   }));
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     const readValue = () => {
       if (name === void 0) return form.getFieldsValue();
       if (Array.isArray(name)) return name.map((n) => form.getFieldValue(n));
@@ -2033,7 +2228,7 @@ var maxValueRule = (max, message2) => ({
   message: message2 || `Must be at most ${max}`
 });
 var composeRules = (...rules) => rules.filter(Boolean);
-var Form = React50.forwardRef(function Form2(props, ref) {
+var Form = React52.forwardRef(function Form2(props, ref) {
   const {
     form: formProp,
     initialValues,
@@ -2045,11 +2240,11 @@ var Form = React50.forwardRef(function Form2(props, ref) {
     onFieldsChange,
     children
   } = props;
-  const createdFormRef = React50.useRef(null);
+  const createdFormRef = React52.useRef(null);
   const form = formProp || (createdFormRef.current ?? (createdFormRef.current = useForm()));
-  const initialAppliedRef = React50.useRef(false);
-  const [, forceUpdate] = React50.useState(0);
-  React50.useEffect(() => {
+  const initialAppliedRef = React52.useRef(false);
+  const [, forceUpdate] = React52.useState(0);
+  React52.useEffect(() => {
     if (!initialAppliedRef.current && initialValues) {
       form.setFieldsValue(initialValues);
       initialAppliedRef.current = true;
@@ -2112,8 +2307,8 @@ var Form = React50.forwardRef(function Form2(props, ref) {
     onValuesChange,
     onFieldsChange
   ]);
-  React50.useImperativeHandle(ref, () => ({ ...form, nativeElement: null }));
-  const handleSubmit = React50.useCallback(
+  React52.useImperativeHandle(ref, () => ({ ...form, nativeElement: null }));
+  const handleSubmit = React52.useCallback(
     (event) => {
       if (event) event.preventDefault();
       form.validateFields().then((values) => {
@@ -2139,11 +2334,11 @@ var FormItem = (props) => {
     variant = "outlined",
     requiredMark
   } = props;
-  const ctx = React50.useContext(FormContext);
+  const ctx = React52.useContext(FormContext);
   if (!ctx) throw new Error("FormItem must be used inside Form");
   const { form, disabled: contextDisabled } = ctx;
-  const [, tick] = React50.useState(0);
-  React50.useEffect(() => {
+  const [, tick] = React52.useState(0);
+  React52.useEffect(() => {
     const meta = {
       rules,
       onStoreChange: () => tick((value) => value + 1),
@@ -2161,7 +2356,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__ */ jsxRuntime.jsx("span", { className: "text-destructive mr-1", "aria-hidden": "true", children: "*" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", "aria-hidden": "true", children: requiredMark });
-  if (!children || !React50__namespace.default.isValidElement(children)) return null;
+  if (!children || !React52__namespace.default.isValidElement(children)) return null;
   const childProps = {};
   childProps[valuePropName] = fieldValue;
   const childClass = children.props.className;
@@ -2208,23 +2403,23 @@ var FormItem = (props) => {
       isRequired ? requiredIndicator : null,
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
     ] }) : null,
-    React50.cloneElement(children, childProps),
+    React52.cloneElement(children, childProps),
     help ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground mt-2", children: help }) : null,
     fieldErrors && fieldErrors.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive mt-1 text-sm font-medium", children: fieldErrors[0] }) : null
   ] });
 };
 var FormList = (props) => {
   const { name, initialValue, children } = props;
-  const ctx = React50.useContext(FormContext);
+  const ctx = React52.useContext(FormContext);
   if (!ctx) throw new Error("FormList must be used inside Form");
   const { form, disabled: contextDisabled } = ctx;
   const isDisabled = !!contextDisabled;
-  const [fields, setFields] = React50.useState([]);
-  const [errors, setErrors] = React50.useState(
+  const [fields, setFields] = React52.useState([]);
+  const [errors, setErrors] = React52.useState(
     () => form.getFieldError(name) || []
   );
-  const initializedRef = React50.useRef(false);
-  const syncFields = React50.useCallback((list) => {
+  const initializedRef = React52.useRef(false);
+  const syncFields = React52.useCallback((list) => {
     const next = list.map((_, index) => ({
       key: index,
       name: index,
@@ -2232,24 +2427,24 @@ var FormList = (props) => {
     }));
     setFields(next);
   }, []);
-  const updateState = React50.useCallback(() => {
+  const updateState = React52.useCallback(() => {
     const raw = form.getFieldValue(name);
     const list = Array.isArray(raw) ? raw : [];
     syncFields(list);
     setErrors(form.getFieldError(name) || []);
   }, [form, name, syncFields]);
-  const ensureList = React50.useCallback(() => {
+  const ensureList = React52.useCallback(() => {
     const raw = form.getFieldValue(name);
     return Array.isArray(raw) ? [...raw] : [];
   }, [form, name]);
-  const setList = React50.useCallback(
+  const setList = React52.useCallback(
     (next) => {
       form.setFieldValue(name, next);
       updateState();
     },
     [form, name, updateState]
   );
-  const add = React50.useCallback(
+  const add = React52.useCallback(
     (defaultValue, index) => {
       if (isDisabled) return;
       const list = ensureList();
@@ -2259,7 +2454,7 @@ var FormList = (props) => {
     },
     [ensureList, isDisabled, setList]
   );
-  const remove = React50.useCallback(
+  const remove = React52.useCallback(
     (index) => {
       if (isDisabled) return;
       const list = ensureList();
@@ -2271,7 +2466,7 @@ var FormList = (props) => {
     },
     [ensureList, isDisabled, setList]
   );
-  const move = React50.useCallback(
+  const move = React52.useCallback(
     (from, to) => {
       if (isDisabled) return;
       const list = ensureList();
@@ -2284,7 +2479,7 @@ var FormList = (props) => {
     },
     [ensureList, isDisabled, setList]
   );
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (initializedRef.current) return;
     if (initialValue === void 0) return;
     const current = form.getFieldValue(name);
@@ -2297,7 +2492,7 @@ var FormList = (props) => {
     }
     initializedRef.current = true;
   }, [form, name, initialValue, updateState]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     const handleChange = () => updateState();
     handleChange();
     let unsubscribe = null;
@@ -2329,7 +2524,7 @@ var fieldVariants = classVarianceAuthority.cva("", {
     orientation: "vertical"
   }
 });
-var Field = React50__namespace.forwardRef(
+var Field = React52__namespace.forwardRef(
   ({
     className,
     orientation,
@@ -2342,7 +2537,7 @@ var Field = React50__namespace.forwardRef(
     children,
     ...props
   }, ref) => {
-    const generatedId = React50__namespace.useId();
+    const generatedId = React52__namespace.useId();
     const fieldId = htmlFor || generatedId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -2391,7 +2586,7 @@ var alertVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Alert = React50__namespace.forwardRef(
+var Alert = React52__namespace.forwardRef(
   ({
     className,
     variant,
@@ -2404,8 +2599,8 @@ var Alert = React50__namespace.forwardRef(
     descriptionClassName,
     ...props
   }, ref) => {
-    const [isVisible, setIsVisible] = React50__namespace.useState(true);
-    const handleDismiss = React50__namespace.useCallback(() => {
+    const [isVisible, setIsVisible] = React52__namespace.useState(true);
+    const handleDismiss = React52__namespace.useCallback(() => {
       setIsVisible(false);
       onClose?.();
     }, [onClose]);
@@ -2467,14 +2662,14 @@ Alert.displayName = "Alert";
 
 // src/components/ui/toast/index.tsx
 init_utils();
-var ToastContext = React50.createContext(void 0);
+var ToastContext = React52.createContext(void 0);
 function ToastProvider({
   children,
   defaultDuration = 5e3,
   position = "top-right"
 }) {
-  const [toasts, setToasts] = React50.useState([]);
-  const toast2 = React50.useCallback(
+  const [toasts, setToasts] = React52.useState([]);
+  const toast2 = React52.useCallback(
     (props) => {
       const id = Math.random().toString(36).substring(7);
       const duration = props.duration ?? defaultDuration;
@@ -2493,7 +2688,7 @@ function ToastProvider({
     },
     [defaultDuration]
   );
-  const dismiss = React50.useCallback((id) => {
+  const dismiss = React52.useCallback((id) => {
     setToasts((prev) => prev.filter((toast3) => toast3.id !== id));
   }, []);
   const getPositionClasses = () => {
@@ -2540,7 +2735,7 @@ function ToastProvider({
   ] });
 }
 function useToastContext() {
-  const context = React50.useContext(ToastContext);
+  const context = React52.useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within ToastProvider");
   }
@@ -2574,7 +2769,7 @@ var toastVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toast = React50__namespace.forwardRef(
+var Toast = React52__namespace.forwardRef(
   ({
     className,
     variant,
@@ -2587,8 +2782,8 @@ var Toast = React50__namespace.forwardRef(
     descriptionClassName,
     ...props
   }, ref) => {
-    const [isVisible, setIsVisible] = React50__namespace.useState(true);
-    const handleDismiss = React50__namespace.useCallback(() => {
+    const [isVisible, setIsVisible] = React52__namespace.useState(true);
+    const handleDismiss = React52__namespace.useCallback(() => {
       setIsVisible(false);
       onClose?.();
     }, [onClose]);
@@ -2684,7 +2879,7 @@ var progressVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Progress = React50__namespace.forwardRef(
+var Progress = React52__namespace.forwardRef(
   ({
     className,
     value = 0,
@@ -2750,7 +2945,7 @@ var spinnerVariants = classVarianceAuthority.cva("animate-spin", {
     variant: "default"
   }
 });
-var Spinner = React50__namespace.forwardRef(
+var Spinner = React52__namespace.forwardRef(
   ({ className, size, variant, label, centered, overlay, icon, ...props }, ref) => {
     const spinnerContent = /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -2781,7 +2976,7 @@ var Spinner = React50__namespace.forwardRef(
   }
 );
 Spinner.displayName = "Spinner";
-var DotsSpinner = React50__namespace.forwardRef(
+var DotsSpinner = React52__namespace.forwardRef(
   ({ className, size = "default", dotCount = 3, ...props }, ref) => {
     const dotSizeMap = {
       xs: "h-1 w-1",
@@ -2834,7 +3029,7 @@ var skeletonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Skeleton = React50__namespace.forwardRef(
+var Skeleton = React52__namespace.forwardRef(
   ({
     className,
     variant,
@@ -2883,7 +3078,7 @@ var Skeleton = React50__namespace.forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
-var SkeletonCard = React50__namespace.forwardRef(
+var SkeletonCard = React52__namespace.forwardRef(
   ({ className, avatar = false, lines = 3, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-4", className), ...props, children: [
       avatar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -2923,7 +3118,7 @@ var emptyVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Empty = React50__namespace.forwardRef(
+var Empty = React52__namespace.forwardRef(
   ({
     className,
     size,
@@ -2964,7 +3159,7 @@ var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogOverlay = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     ref,
@@ -2976,7 +3171,7 @@ var DialogOverlay = React50__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React50__namespace.forwardRef(
+var DialogContent = React52__namespace.forwardRef(
   ({
     className,
     children,
@@ -3041,7 +3236,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogTitle = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -3053,7 +3248,7 @@ var DialogTitle = React50__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogDescription = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -3068,7 +3263,7 @@ init_utils();
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogOverlay = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Overlay,
   {
     className: cn(
@@ -3080,7 +3275,7 @@ var AlertDialogOverlay = React50__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Content,
@@ -3123,7 +3318,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogTitle = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
@@ -3132,7 +3327,7 @@ var AlertDialogTitle = React50__namespace.forwardRef(({ className, ...props }, r
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogDescription = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
@@ -3141,7 +3336,7 @@ var AlertDialogDescription = React50__namespace.forwardRef(({ className, ...prop
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogAction = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
@@ -3150,7 +3345,7 @@ var AlertDialogAction = React50__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogCancel = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
@@ -3170,7 +3365,7 @@ var Sheet = DialogPrimitive__namespace.Root;
 var SheetTrigger = DialogPrimitive__namespace.Trigger;
 var SheetClose = DialogPrimitive__namespace.Close;
 var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetOverlay = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     className: cn(
@@ -3198,7 +3393,7 @@ var sheetVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SheetContent = React50__namespace.forwardRef(({ side = "right", className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+var SheetContent = React52__namespace.forwardRef(({ side = "right", className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
@@ -3245,7 +3440,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetTitle = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -3254,7 +3449,7 @@ var SheetTitle = React50__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetDescription = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -3266,7 +3461,7 @@ SheetDescription.displayName = DialogPrimitive__namespace.Description.displayNam
 
 // src/components/ui/drawer/index.tsx
 init_utils();
-var DrawerContext = React50__namespace.createContext({
+var DrawerContext = React52__namespace.createContext({
   direction: "bottom"
 });
 var Drawer = ({
@@ -3285,7 +3480,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = vaul.Drawer.Trigger;
 var DrawerPortal = vaul.Drawer.Portal;
 var DrawerClose = vaul.Drawer.Close;
-var DrawerOverlay = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DrawerOverlay = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   vaul.Drawer.Overlay,
   {
     ref,
@@ -3294,7 +3489,7 @@ var DrawerOverlay = React50__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DrawerOverlay.displayName = vaul.Drawer.Overlay.displayName;
-var DrawerContent = React50__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
+var DrawerContent = React52__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     vaul.Drawer.Content,
@@ -3329,7 +3524,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DrawerTitle = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   vaul.Drawer.Title,
   {
     ref,
@@ -3341,7 +3536,7 @@ var DrawerTitle = React50__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DrawerTitle.displayName = vaul.Drawer.Title.displayName;
-var DrawerDescription = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DrawerDescription = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   vaul.Drawer.Description,
   {
     ref,
@@ -3356,7 +3551,7 @@ init_utils();
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
-var PopoverContent = React50__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React52__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -3376,7 +3571,7 @@ init_utils();
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-var TooltipContent = React50__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TooltipContent = React52__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TooltipPrimitive__namespace.Content,
   {
     ref,
@@ -3391,7 +3586,7 @@ var TooltipContent = React50__namespace.forwardRef(({ className, sideOffset = 4,
   }
 ));
 TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
-var SimpleTooltip = React50__namespace.forwardRef(
+var SimpleTooltip = React52__namespace.forwardRef(
   ({
     children,
     content,
@@ -3422,7 +3617,7 @@ init_utils();
 var HoverCard = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
 var HoverCardArrow = HoverCardPrimitive__namespace.Arrow;
-var HoverCardContent = React50__namespace.forwardRef(
+var HoverCardContent = React52__namespace.forwardRef(
   ({
     className,
     align = "center",
@@ -3466,7 +3661,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-var DropdownMenuSubTrigger = React50__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuSubTrigger = React52__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.SubTrigger,
   {
     ref,
@@ -3483,7 +3678,7 @@ var DropdownMenuSubTrigger = React50__namespace.forwardRef(({ className, inset,
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-var DropdownMenuSubContent = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuSubContent = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.SubContent,
   {
     ref,
@@ -3495,7 +3690,7 @@ var DropdownMenuSubContent = React50__namespace.forwardRef(({ className, ...prop
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-var DropdownMenuContent = React50__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuContent = React52__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Content,
   {
     ref,
@@ -3508,7 +3703,7 @@ var DropdownMenuContent = React50__namespace.forwardRef(({ className, sideOffset
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React50__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuItem = React52__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Item,
   {
     ref,
@@ -3521,7 +3716,7 @@ var DropdownMenuItem = React50__namespace.forwardRef(({ className, inset, ...pro
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuCheckboxItem = React50__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuCheckboxItem = React52__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.CheckboxItem,
   {
     ref,
@@ -3538,7 +3733,7 @@ var DropdownMenuCheckboxItem = React50__namespace.forwardRef(({ className, child
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React50__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var DropdownMenuRadioItem = React52__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.RadioItem,
   {
     ref,
@@ -3554,7 +3749,7 @@ var DropdownMenuRadioItem = React50__namespace.forwardRef(({ className, children
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-var DropdownMenuLabel = React50__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuLabel = React52__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Label,
   {
     ref,
@@ -3567,7 +3762,7 @@ var DropdownMenuLabel = React50__namespace.forwardRef(({ className, inset, ...pr
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuSeparator = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Separator,
   {
     ref,
@@ -3598,7 +3793,7 @@ var ContextMenuGroup = ContextMenuPrimitive__namespace.Group;
 var ContextMenuPortal = ContextMenuPrimitive__namespace.Portal;
 var ContextMenuSub = ContextMenuPrimitive__namespace.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive__namespace.RadioGroup;
-var ContextMenuSubTrigger = React50__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ContextMenuSubTrigger = React52__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ContextMenuPrimitive__namespace.SubTrigger,
   {
     ref,
@@ -3615,7 +3810,7 @@ var ContextMenuSubTrigger = React50__namespace.forwardRef(({ className, inset, c
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive__namespace.SubTrigger.displayName;
-var ContextMenuSubContent = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ContextMenuSubContent = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ContextMenuPrimitive__namespace.SubContent,
   {
     ref,
@@ -3627,7 +3822,7 @@ var ContextMenuSubContent = React50__namespace.forwardRef(({ className, ...props
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive__namespace.SubContent.displayName;
-var ContextMenuContent = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var ContextMenuContent = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   ContextMenuPrimitive__namespace.Content,
   {
     ref,
@@ -3639,7 +3834,7 @@ var ContextMenuContent = React50__namespace.forwardRef(({ className, ...props },
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive__namespace.Content.displayName;
-var ContextMenuItem = React50__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ContextMenuItem = React52__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ContextMenuPrimitive__namespace.Item,
   {
     ref,
@@ -3652,7 +3847,7 @@ var ContextMenuItem = React50__namespace.forwardRef(({ className, inset, ...prop
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive__namespace.Item.displayName;
-var ContextMenuCheckboxItem = React50__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ContextMenuCheckboxItem = React52__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ContextMenuPrimitive__namespace.CheckboxItem,
   {
     ref,
@@ -3669,7 +3864,7 @@ var ContextMenuCheckboxItem = React50__namespace.forwardRef(({ className, childr
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive__namespace.CheckboxItem.displayName;
-var ContextMenuRadioItem = React50__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ContextMenuRadioItem = React52__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ContextMenuPrimitive__namespace.RadioItem,
   {
     ref,
@@ -3685,7 +3880,7 @@ var ContextMenuRadioItem = React50__namespace.forwardRef(({ className, children,
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive__namespace.RadioItem.displayName;
-var ContextMenuLabel = React50__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ContextMenuLabel = React52__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ContextMenuPrimitive__namespace.Label,
   {
     ref,
@@ -3698,7 +3893,7 @@ var ContextMenuLabel = React50__namespace.forwardRef(({ className, inset, ...pro
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive__namespace.Label.displayName;
-var ContextMenuSeparator = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ContextMenuSeparator = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ContextMenuPrimitive__namespace.Separator,
   {
     ref,
@@ -3731,7 +3926,7 @@ var MenubarGroup = MenubarPrimitive__namespace.Group;
 var MenubarPortal = MenubarPrimitive__namespace.Portal;
 var MenubarSub = MenubarPrimitive__namespace.Sub;
 var MenubarRadioGroup = MenubarPrimitive__namespace.RadioGroup;
-var Menubar = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Menubar = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Root,
   {
     ref,
@@ -3743,7 +3938,7 @@ var Menubar = React50__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Menubar.displayName = MenubarPrimitive__namespace.Root.displayName;
-var MenubarTrigger = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarTrigger = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Trigger,
   {
     ref,
@@ -3755,7 +3950,7 @@ var MenubarTrigger = React50__namespace.forwardRef(({ className, ...props }, ref
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive__namespace.Trigger.displayName;
-var MenubarSubTrigger = React50__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var MenubarSubTrigger = React52__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   MenubarPrimitive__namespace.SubTrigger,
   {
     ref,
@@ -3772,7 +3967,7 @@ var MenubarSubTrigger = React50__namespace.forwardRef(({ className, inset, child
   }
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive__namespace.SubTrigger.displayName;
-var MenubarSubContent = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarSubContent = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.SubContent,
   {
     ref,
@@ -3784,7 +3979,7 @@ var MenubarSubContent = React50__namespace.forwardRef(({ className, ...props },
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive__namespace.SubContent.displayName;
-var MenubarContent = React50__namespace.forwardRef(
+var MenubarContent = React52__namespace.forwardRef(
   ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(MenubarPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     MenubarPrimitive__namespace.Content,
     {
@@ -3801,7 +3996,7 @@ var MenubarContent = React50__namespace.forwardRef(
   ) })
 );
 MenubarContent.displayName = MenubarPrimitive__namespace.Content.displayName;
-var MenubarItem = React50__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarItem = React52__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Item,
   {
     ref,
@@ -3814,7 +4009,7 @@ var MenubarItem = React50__namespace.forwardRef(({ className, inset, ...props },
   }
 ));
 MenubarItem.displayName = MenubarPrimitive__namespace.Item.displayName;
-var MenubarCheckboxItem = React50__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var MenubarCheckboxItem = React52__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   MenubarPrimitive__namespace.CheckboxItem,
   {
     ref,
@@ -3831,7 +4026,7 @@ var MenubarCheckboxItem = React50__namespace.forwardRef(({ className, children,
   }
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive__namespace.CheckboxItem.displayName;
-var MenubarRadioItem = React50__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var MenubarRadioItem = React52__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   MenubarPrimitive__namespace.RadioItem,
   {
     ref,
@@ -3847,7 +4042,7 @@ var MenubarRadioItem = React50__namespace.forwardRef(({ className, children, ...
   }
 ));
 MenubarRadioItem.displayName = MenubarPrimitive__namespace.RadioItem.displayName;
-var MenubarLabel = React50__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarLabel = React52__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Label,
   {
     ref,
@@ -3860,7 +4055,7 @@ var MenubarLabel = React50__namespace.forwardRef(({ className, inset, ...props }
   }
 ));
 MenubarLabel.displayName = MenubarPrimitive__namespace.Label.displayName;
-var MenubarSeparator = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarSeparator = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Separator,
   {
     ref,
@@ -3888,7 +4083,7 @@ MenubarShortcut.displayName = "MenubarShortcut";
 
 // src/components/ui/navigation-menu/index.tsx
 init_utils();
-var NavigationMenu = React50__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var NavigationMenu = React52__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   NavigationMenuPrimitive__namespace.Root,
   {
     ref,
@@ -3904,7 +4099,7 @@ var NavigationMenu = React50__namespace.forwardRef(({ className, children, ...pr
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive__namespace.Root.displayName;
-var NavigationMenuList = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuList = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.List,
   {
     ref,
@@ -3920,7 +4115,7 @@ var NavigationMenuItem = NavigationMenuPrimitive__namespace.Item;
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-[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 = React50__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var NavigationMenuTrigger = React52__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   NavigationMenuPrimitive__namespace.Trigger,
   {
     ref,
@@ -3940,7 +4135,7 @@ var NavigationMenuTrigger = React50__namespace.forwardRef(({ className, children
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive__namespace.Trigger.displayName;
-var NavigationMenuContent = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuContent = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.Content,
   {
     ref,
@@ -3953,7 +4148,7 @@ var NavigationMenuContent = React50__namespace.forwardRef(({ className, ...props
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive__namespace.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive__namespace.Link;
-var NavigationMenuViewport = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuViewport = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.Viewport,
   {
     className: cn(
@@ -3965,7 +4160,7 @@ var NavigationMenuViewport = React50__namespace.forwardRef(({ className, ...prop
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive__namespace.Viewport.displayName;
-var NavigationMenuIndicator = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuIndicator = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.Indicator,
   {
     ref,
@@ -3981,7 +4176,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive__namespace.Indicat
 
 // src/components/ui/command/index.tsx
 init_utils();
-var Command = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Command = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command,
   {
     ref,
@@ -3996,7 +4191,7 @@ Command.displayName = cmdk.Command.displayName;
 var CommandDialog = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
 };
-var CommandInput = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-mvn-gray-200 px-3", "cmdk-input-wrapper": "", children: [
+var CommandInput = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-mvn-gray-200 px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsxRuntime.jsx(reactIcons.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsxRuntime.jsx(
     cmdk.Command.Input,
@@ -4011,7 +4206,7 @@ var CommandInput = React50__namespace.forwardRef(({ className, ...props }, ref)
   )
 ] }));
 CommandInput.displayName = cmdk.Command.Input.displayName;
-var CommandList = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandList = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.List,
   {
     ref,
@@ -4020,7 +4215,7 @@ var CommandList = React50__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 CommandList.displayName = cmdk.Command.List.displayName;
-var CommandEmpty = React50__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandEmpty = React52__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Empty,
   {
     ref,
@@ -4029,7 +4224,7 @@ var CommandEmpty = React50__namespace.forwardRef((props, ref) => /* @__PURE__ */
   }
 ));
 CommandEmpty.displayName = cmdk.Command.Empty.displayName;
-var CommandGroup = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandGroup = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Group,
   {
     ref,
@@ -4041,7 +4236,7 @@ var CommandGroup = React50__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 CommandGroup.displayName = cmdk.Command.Group.displayName;
-var CommandSeparator = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandSeparator = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Separator,
   {
     ref,
@@ -4050,7 +4245,7 @@ var CommandSeparator = React50__namespace.forwardRef(({ className, ...props }, r
   }
 ));
 CommandSeparator.displayName = cmdk.Command.Separator.displayName;
-var CommandItem = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandItem = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Item,
   {
     ref,
@@ -4081,7 +4276,7 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/ui/combobox/index.tsx
 init_utils();
-var Combobox = React50__namespace.forwardRef(
+var Combobox = React52__namespace.forwardRef(
   ({
     options,
     value,
@@ -4093,7 +4288,7 @@ var Combobox = React50__namespace.forwardRef(
     disabled,
     clearable
   }, ref) => {
-    const [open, setOpen] = React50__namespace.useState(false);
+    const [open, setOpen] = React52__namespace.useState(false);
     const selectedOption = options.find((option) => option.value === value);
     const handleClear = (e) => {
       e.stopPropagation();
@@ -4165,9 +4360,9 @@ Combobox.displayName = "Combobox";
 
 // src/components/ui/breadcrumb/index.tsx
 init_utils();
-var Breadcrumb = React50__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+var Breadcrumb = React52__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var BreadcrumbList = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "ol",
   {
     ref,
@@ -4179,7 +4374,7 @@ var BreadcrumbList = React50__namespace.forwardRef(({ className, ...props }, ref
   }
 ));
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var BreadcrumbItem = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "li",
   {
     ref,
@@ -4188,7 +4383,7 @@ var BreadcrumbItem = React50__namespace.forwardRef(({ className, ...props }, ref
   }
 ));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React50__namespace.forwardRef(({ asChild, className, ...props }, ref) => {
+var BreadcrumbLink = React52__namespace.forwardRef(({ asChild, className, ...props }, ref) => {
   const Comp = "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
@@ -4203,7 +4398,7 @@ var BreadcrumbLink = React50__namespace.forwardRef(({ asChild, className, ...pro
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var BreadcrumbPage = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
     ref,
@@ -4270,7 +4465,7 @@ var Pagination = ({
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var PaginationContent = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "ul",
   {
     ref,
@@ -4279,7 +4474,7 @@ var PaginationContent = React50__namespace.forwardRef(({ className, ...props },
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: cn("", className), ...props }));
+var PaginationItem = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: cn("", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
   className,
@@ -4386,12 +4581,12 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/ui/tabs/index.tsx
 init_utils();
-var TabsContext = React50__namespace.createContext({
+var TabsContext = React52__namespace.createContext({
   destroyInactiveTabs: true
 });
-var Tabs = React50__namespace.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props }) }));
+var Tabs = React52__namespace.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props }) }));
 Tabs.displayName = TabsPrimitive__namespace.Root.displayName;
-var TabsList = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsList = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
@@ -4406,7 +4601,7 @@ var TabsList = React50__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React50__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsTrigger = React52__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
@@ -4428,8 +4623,8 @@ var TabsTrigger = React50__namespace.forwardRef(({ className, children, ...props
   }
 ));
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React50__namespace.forwardRef(({ className, ...props }, ref) => {
-  const { destroyInactiveTabs } = React50__namespace.useContext(TabsContext);
+var TabsContent = React52__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { destroyInactiveTabs } = React52__namespace.useContext(TabsContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.Content,
     {
@@ -4518,7 +4713,7 @@ var separatorVariants = classVarianceAuthority.cva("shrink-0 bg-line-normal", {
     variant: "default"
   }
 });
-var Separator5 = React50__namespace.forwardRef(
+var Separator5 = React52__namespace.forwardRef(
   ({
     className,
     orientation = "horizontal",
@@ -4575,7 +4770,7 @@ var AspectRatio = AspectRatioPrimitive__namespace.Root;
 
 // src/components/ui/accordion/index.tsx
 init_utils();
-var Accordion = React50__namespace.forwardRef(
+var Accordion = React52__namespace.forwardRef(
   ({
     items,
     className,
@@ -4585,7 +4780,7 @@ var Accordion = React50__namespace.forwardRef(
     renderItem,
     ...props
   }, ref) => {
-    const defaultRenderItem = React50__namespace.useCallback(
+    const defaultRenderItem = React52__namespace.useCallback(
       (item) => /* @__PURE__ */ jsxRuntime.jsxs(
         AccordionPrimitive__namespace.Item,
         {
@@ -4633,7 +4828,7 @@ Accordion.displayName = "Accordion";
 // src/components/ui/collapsible/index.tsx
 init_utils();
 var Collapsible = CollapsiblePrimitive__namespace.Root;
-var CollapsibleItem = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CollapsibleItem = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -4645,7 +4840,7 @@ var CollapsibleItem = React50__namespace.forwardRef(({ className, ...props }, re
   }
 ));
 CollapsibleItem.displayName = "CollapsibleItem";
-var CollapsibleTrigger = React50__namespace.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var CollapsibleTrigger = React52__namespace.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   CollapsiblePrimitive__namespace.Trigger,
   {
     ref,
@@ -4671,7 +4866,7 @@ var CollapsibleTrigger = React50__namespace.forwardRef(({ className, children, i
   }
 ));
 CollapsibleTrigger.displayName = CollapsiblePrimitive__namespace.Trigger.displayName;
-var CollapsibleContent = React50__namespace.forwardRef(({ className, contentClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CollapsibleContent = React52__namespace.forwardRef(({ className, contentClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CollapsiblePrimitive__namespace.Content,
   {
     ref,
@@ -4722,7 +4917,7 @@ var ResizableHandle = ({
 
 // src/components/ui/scroll-area/index.tsx
 init_utils();
-var ScrollArea = React50__namespace.forwardRef(
+var ScrollArea = React52__namespace.forwardRef(
   ({
     className,
     children,
@@ -4777,7 +4972,7 @@ var ScrollArea = React50__namespace.forwardRef(
   }
 );
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React50__namespace.forwardRef(({ className, orientation = "vertical", thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React52__namespace.forwardRef(({ className, orientation = "vertical", thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
@@ -4809,9 +5004,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 = React50__namespace.createContext(null);
+var SidebarContext = React52__namespace.createContext(null);
 function useSidebar() {
-  const context = React50__namespace.useContext(SidebarContext);
+  const context = React52__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4826,9 +5021,9 @@ function SidebarProvider({
   children,
   ...props
 }) {
-  const [_open, _setOpen] = React50__namespace.useState(defaultOpen);
+  const [_open, _setOpen] = React52__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React50__namespace.useCallback(
+  const setOpen = React52__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4840,10 +5035,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React50__namespace.useCallback(() => {
+  const toggleSidebar = React52__namespace.useCallback(() => {
     return setOpen((open2) => !open2);
   }, [setOpen]);
-  React50__namespace.useEffect(() => {
+  React52__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4854,7 +5049,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React50__namespace.useMemo(
+  const contextValue = React52__namespace.useMemo(
     () => ({
       state,
       open,
@@ -4889,7 +5084,25 @@ function Sidebar({
   children,
   ...props
 }) {
-  const { state } = useSidebar();
+  const { state, open, setOpen } = useSidebar();
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
+      SheetContent,
+      {
+        side,
+        className: cn(
+          "w-[280px] max-w-[80vw] p-0",
+          "pt-[var(--mvn-safe-area-top)]",
+          className
+        ),
+        hideClose: true,
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-sidebar text-sidebar-foreground flex h-full w-full flex-col", children })
+      }
+    ) });
+  }
   if (collapsible === "none") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -5320,7 +5533,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React50__namespace.useMemo(() => {
+  const width = React52__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5413,6 +5626,166 @@ function SidebarMenuSubButton({
   );
 }
 
+// src/components/ui/mobile-header/index.tsx
+init_utils();
+function MobileHeader({
+  logo,
+  title,
+  rightActions,
+  showSidebarTrigger = true,
+  stickyTop = true,
+  className,
+  ...props
+}) {
+  const sidebar = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      "data-slot": "mobile-header",
+      className: cn(
+        "flex items-center h-14 bg-background border-b border-border px-4 gap-3 md:hidden",
+        "pt-[var(--mvn-safe-area-top)]",
+        stickyTop && "sticky top-0 z-40",
+        className
+      ),
+      ...props,
+      children: [
+        showSidebarTrigger && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "-ml-2",
+            onClick: () => sidebar.setOpen(true),
+            "aria-label": "Open menu",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MenuIcon, { className: "h-5 w-5" })
+          }
+        ),
+        logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: logo }),
+        title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold truncate flex-1 text-foreground", children: title }),
+        rightActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0", children: rightActions })
+      ]
+    }
+  );
+}
+MobileHeader.displayName = "MobileHeader";
+
+// src/components/ui/bottom-navigation/index.tsx
+init_utils();
+function BottomNavigation({
+  items,
+  activeKey,
+  onActiveChange,
+  hideOnDesktop = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "data-slot": "bottom-navigation",
+      className: cn(
+        "fixed bottom-0 left-0 right-0 bg-background border-t border-border",
+        "flex justify-around items-center h-16",
+        "pb-[var(--mvn-safe-area-bottom)]",
+        "z-40",
+        hideOnDesktop && "md:hidden",
+        className
+      ),
+      ...props,
+      children: items.map((item) => {
+        const isActive = activeKey === item.key;
+        const Component = item.href ? "a" : "button";
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          Component,
+          {
+            href: item.href,
+            onClick: () => {
+              if (!item.disabled) {
+                item.onClick?.();
+                onActiveChange?.(item.key);
+              }
+            },
+            disabled: item.disabled,
+            className: cn(
+              "flex flex-col items-center justify-center gap-1 flex-1 h-full relative",
+              "text-muted-foreground transition-colors",
+              "min-w-[64px] min-h-[48px]",
+              "hover:text-foreground focus:outline-none focus-visible:text-foreground",
+              isActive && "text-primary",
+              item.disabled && "opacity-50 pointer-events-none"
+            ),
+            "aria-current": isActive ? "page" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative", children: [
+                item.icon,
+                item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute -top-1 -right-2 min-w-[18px] h-[18px]",
+                      "bg-destructive text-destructive-foreground",
+                      "rounded-full text-[10px] font-medium",
+                      "flex items-center justify-center px-1"
+                    ),
+                    children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium leading-tight", children: item.label })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+}
+BottomNavigation.displayName = "BottomNavigation";
+var MobileNavContext = React52__namespace.createContext(
+  null
+);
+function useMobileNav() {
+  const context = React52__namespace.useContext(MobileNavContext);
+  if (!context) {
+    throw new Error(
+      "useMobileNav must be used within MobileNavigationProvider"
+    );
+  }
+  return context;
+}
+function MobileNavigationProvider({
+  children,
+  hideBottomNavOnScroll = false
+}) {
+  const [bottomNavVisible, setBottomNavVisible] = React52__namespace.useState(true);
+  const lastScrollY = React52__namespace.useRef(0);
+  React52__namespace.useEffect(() => {
+    if (!hideBottomNavOnScroll) return;
+    const handleScroll = () => {
+      const currentY = window.scrollY;
+      const direction = currentY > lastScrollY.current ? "down" : "up";
+      if (direction === "down" && currentY > 50) {
+        setBottomNavVisible(false);
+      } else if (direction === "up") {
+        setBottomNavVisible(true);
+      }
+      lastScrollY.current = currentY;
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [hideBottomNavOnScroll]);
+  const value = React52__namespace.useMemo(
+    () => ({
+      bottomNavVisible,
+      setBottomNavVisible
+    }),
+    [bottomNavVisible]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(MobileNavContext.Provider, { value, children });
+}
+MobileNavigationProvider.displayName = "MobileNavigationProvider";
+
 // src/components/ui/table/index.tsx
 init_utils();
 
@@ -5439,7 +5812,7 @@ var tableVariants = classVarianceAuthority.cva("w-full caption-bottom text-sm",
     size: "default"
   }
 });
-var Table = React50__namespace.forwardRef(({ className, variant, size, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React52__namespace.forwardRef(({ className, variant, size, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
@@ -5448,9 +5821,9 @@ var Table = React50__namespace.forwardRef(({ className, variant, size, wrapperCl
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableBody = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
   {
     ref,
@@ -5459,7 +5832,7 @@ var TableBody = React50__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tfoot",
   {
     ref,
@@ -5471,7 +5844,7 @@ var TableFooter = React50__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableRow = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tr",
   {
     ref,
@@ -5483,7 +5856,7 @@ var TableRow = React50__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
@@ -5495,7 +5868,7 @@ var TableHead = React50__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -5507,7 +5880,7 @@ var TableCell = React50__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
@@ -5554,9 +5927,10 @@ var TableBodyComponent = ({
   onRowClick,
   getRowExpandable,
   invalidateCache,
-  headers
+  headers,
+  hasInitializedSizing
 }) => {
-  const resolveRowClassName = React50.useCallback(
+  const resolveRowClassName = React52.useCallback(
     (record, index) => {
       if (!rowClassName) return "";
       return typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName;
@@ -5595,13 +5969,11 @@ var TableBodyComponent = ({
     }
     return reactTable.flexRender(cell.column.columnDef.cell, cell.getContext());
   };
-  const { leftOffsets, rightOffsets, lastLeftId, firstRightId } = React50.useMemo(() => {
+  const { leftOffsets, rightOffsets } = React52.useMemo(() => {
     if (!headers || headers.length === 0) {
       return {
         leftOffsets: /* @__PURE__ */ new Map(),
-        rightOffsets: /* @__PURE__ */ new Map(),
-        lastLeftId: null,
-        firstRightId: null
+        rightOffsets: /* @__PURE__ */ new Map()
       };
     }
     const leftPinned = headers.filter(
@@ -5625,12 +5997,10 @@ var TableBodyComponent = ({
     }
     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
+      rightOffsets: rightMap
     };
   }, [headers]);
-  const renderBaseRow = React50.useCallback(
+  const renderBaseRow = React52.useCallback(
     (rowData, options = {}) => {
       const { ref, virtualIndex } = options;
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5652,24 +6022,31 @@ var TableBodyComponent = ({
           children: rowData.getVisibleCells().map((cell) => {
             const meta = cell.column.columnDef.meta;
             const pinPosition = cell.column.getIsPinned();
-            const pinnedStyle = meta?.width ? { width: meta.width } : {};
+            const cellStyle = {};
+            if (hasInitializedSizing) {
+              const fallbackWidth = cell.column.getSize();
+              cellStyle.width = `var(--mvn-col-${cell.column.id}-width, ${fallbackWidth}px)`;
+              cellStyle.maxWidth = `var(--mvn-col-${cell.column.id}-width, ${fallbackWidth}px)`;
+              cellStyle.overflow = "hidden";
+              cellStyle.textOverflow = "ellipsis";
+              cellStyle.whiteSpace = "nowrap";
+            }
             if (pinPosition === "left") {
               const offset = leftOffsets.get(cell.column.id);
               if (offset !== void 0) {
-                pinnedStyle.position = "sticky";
-                pinnedStyle.left = offset;
-                pinnedStyle.zIndex = 5;
+                cellStyle.position = "sticky";
+                cellStyle.left = `var(--mvn-col-${cell.column.id}-left, ${offset}px)`;
+                cellStyle.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;
+                cellStyle.position = "sticky";
+                cellStyle.right = `var(--mvn-col-${cell.column.id}-right, ${offset}px)`;
+                cellStyle.zIndex = 5;
               }
             }
-            const isLastLeftPinned = cell.column.id === lastLeftId;
-            const isFirstRightPinned = cell.column.id === firstRightId;
+            const hasStyles = Object.keys(cellStyle).length > 0;
             return /* @__PURE__ */ jsxRuntime.jsx(
               TableCell,
               {
@@ -5679,11 +6056,9 @@ var TableBodyComponent = ({
                   meta?.align === "right" && "text-right",
                   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"
+                  pinPosition && "bg-background"
                 ),
-                style: Object.keys(pinnedStyle).length > 0 ? pinnedStyle : void 0,
+                style: hasStyles ? cellStyle : void 0,
                 children: onRenderedRow(cell, virtualIndex)
               },
               cell.id
@@ -5698,11 +6073,10 @@ var TableBodyComponent = ({
       resolveRowClassName,
       leftOffsets,
       rightOffsets,
-      lastLeftId,
-      firstRightId
+      hasInitializedSizing
     ]
   );
-  const renderExpandedRow = React50.useCallback(
+  const renderExpandedRow = React52.useCallback(
     (rowData, options = {}) => {
       if (!renderExpandedContent) return null;
       const { ref, virtualIndex } = options;
@@ -5783,15 +6157,152 @@ var TableBodyComponent = ({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(React50.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(React52.Fragment, { children: [
     renderBaseRow(row),
     expandable && renderExpandedRow(row)
   ] }, row.id)) });
 };
 
+// src/components/ui/table/components/TableCardView.tsx
+init_utils();
+var CARD_BASE_CLASSES = "border border-border rounded-lg bg-card overflow-hidden transition-shadow hover:shadow-md";
+function renderCellValue(col, value, record, index) {
+  if (col.mobileRender) return col.mobileRender(value, record, index);
+  if (col.render) return col.render(value, record, index);
+  return String(value ?? "");
+}
+function TableCardView({
+  rows,
+  columns,
+  selectable,
+  expandable,
+  onRowClick,
+  rowClassName,
+  renderExpandedContent,
+  mobileCardActions,
+  emptyMessage = "No data",
+  renderMobileCard
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: emptyMessage });
+  }
+  const mobileColumns = React52__namespace.useMemo(() => {
+    return columns.filter((col) => !col.mobileHidden && (col.mobileVisible ?? true)).sort((a, b) => (a.mobilePriority ?? 99) - (b.mobilePriority ?? 99)).slice(0, 6);
+  }, [columns]);
+  const headerColumn = mobileColumns[0];
+  const bodyColumns = mobileColumns.slice(1);
+  const hasCardContent = bodyColumns.length > 0 || mobileCardActions;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: rows.map((row) => {
+    const record = row.original;
+    const isSelected = row.getIsSelected();
+    const isExpanded = row.getIsExpanded();
+    const rowClasses = typeof rowClassName === "function" ? rowClassName(record, row.index) : rowClassName;
+    const cardClassName = cn(
+      CARD_BASE_CLASSES,
+      isSelected && "ring-2 ring-primary",
+      rowClasses
+    );
+    if (renderMobileCard) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClassName, children: renderMobileCard(record, columns) }, row.id);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardClassName, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-3 p-4",
+            hasCardContent && "border-b border-border",
+            onRowClick && "cursor-pointer"
+          ),
+          onClick: () => onRowClick?.(record, row.index),
+          onKeyDown: onRowClick ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onRowClick(record, row.index);
+            }
+          } : void 0,
+          role: onRowClick ? "button" : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
+          children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                checked: isSelected,
+                onCheckedChange: (checked) => row.toggleSelected(!!checked),
+                onClick: (e) => e.stopPropagation(),
+                "aria-label": "Select row"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 font-medium text-foreground truncate", children: headerColumn && renderCellValue(
+              headerColumn,
+              row.getValue(headerColumn.key),
+              record,
+              row.index
+            ) }),
+            expandable && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  row.toggleExpanded();
+                },
+                className: "p-1 text-muted-foreground hover:text-foreground transition-colors",
+                "aria-label": isExpanded ? "Collapse" : "Expand",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.ChevronDownIcon,
+                  {
+                    className: cn(
+                      "h-5 w-5 transition-transform",
+                      isExpanded && "rotate-180"
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      bodyColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-2", children: bodyColumns.map((col) => {
+        const isFullWidth = col.mobileWidth === "full";
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex justify-between items-start gap-2",
+              isFullWidth && "flex-col"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground shrink-0", children: col.mobileLabel ?? col.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-sm text-foreground text-right",
+                    isFullWidth && "text-left w-full"
+                  ),
+                  children: renderCellValue(
+                    col,
+                    row.getValue(col.key),
+                    record,
+                    row.index
+                  )
+                }
+              )
+            ]
+          },
+          col.key
+        );
+      }) }),
+      mobileCardActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 p-4 pt-0 border-t border-border mt-2", children: mobileCardActions(record) }),
+      expandable && isExpanded && renderExpandedContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-t border-border bg-muted/50", children: renderExpandedContent(record, row) })
+    ] }, row.id);
+  }) });
+}
+TableCardView.displayName = "TableCardView";
+
 // src/components/ui/table/components/TableHeaderComponent.tsx
 init_utils();
-var TableFilterOptions = [
+var TABLE_FILTER_OPTIONS = [
   { value: "includesString", label: "Contains" },
   { value: "notContains", label: "Does not contain" },
   { value: "equals", label: "Equals" },
@@ -5799,18 +6310,10 @@ var TableFilterOptions = [
   { value: "startsWith", label: "Starts with" },
   { value: "endsWith", label: "Ends with" }
 ];
-var pinOptions = [
+var PIN_OPTIONS = [
   { value: "left", label: "Pin Left" },
   { value: "right", label: "Pin Right" }
 ];
-var sizingOptions = [
-  { value: "reset-single", label: "Reset This Column" },
-  { value: "reset-all", label: "Reset All Columns" }
-];
-var sortOptions = [
-  { value: "asc", label: "Sort Ascending" },
-  { value: "desc", label: "Sort Descending" }
-];
 var TableHeaderComponent = ({
   header,
   enableColumnOrdering,
@@ -5819,8 +6322,8 @@ var TableHeaderComponent = ({
   draggedColumnId,
   pinnedLeftOffset,
   pinnedRightOffset,
-  isLastLeftPinned,
-  isFirstRightPinned
+  hasInitializedSizing,
+  startResize
 }) => {
   const column = header.column;
   const meta = column.columnDef.meta;
@@ -5830,47 +6333,27 @@ var TableHeaderComponent = ({
   };
   const pinPosition = column.getIsPinned();
   const sortDirection = column.getIsSorted();
-  const isReorderTable = enableColumnOrdering && !column.id.startsWith("_mvn_");
-  const handleColumnDrop = (targetId) => {
-    const sourceId = draggedColumnId.current;
-    draggedColumnId.current = null;
-    if (!sourceId || sourceId === targetId) return;
-    moveColumnTo(sourceId, targetId);
-  };
-  const moveColumnTo = (sourceId, targetId) => {
-    if (!enableColumnOrdering || sourceId.startsWith("_mvn_") || targetId.startsWith("_mvn_"))
-      return;
-    setColumnOrder((previous) => {
-      const order = previous.length ? [...previous] : [...baseColumnOrder];
-      const sourceIndex = order.indexOf(sourceId);
-      const targetIndex = order.indexOf(targetId);
-      if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex)
-        return order;
-      const next = [...order];
-      next.splice(sourceIndex, 1);
-      next.splice(targetIndex, 0, sourceId);
-      return next;
-    });
-  };
-  const [inputValue, setInputValue] = React50.useState(value);
-  const debounceTimeoutRef = React50.useRef(null);
-  React50.useEffect(() => {
+  const isMvnColumn = column.id.startsWith("_mvn_");
+  const isReorderTable = enableColumnOrdering && !isMvnColumn;
+  const [inputValue, setInputValue] = React52.useState(value);
+  const debounceTimeoutRef = React52.useRef(null);
+  React52.useEffect(() => {
     setInputValue(value);
   }, [value]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     return () => {
       if (debounceTimeoutRef.current !== null) {
         window.clearTimeout(debounceTimeoutRef.current);
       }
     };
   }, []);
-  const handleFilterChange = React50.useCallback(
+  const handleFilterChange = React52.useCallback(
     (type, nextValue) => {
       column.setFilterValue({ filterType: type, value: nextValue });
     },
     [column]
   );
-  const debouncedFilterChange = React50.useCallback(
+  const debouncedFilterChange = React52.useCallback(
     (type, nextValue) => {
       if (debounceTimeoutRef.current !== null) {
         window.clearTimeout(debounceTimeoutRef.current);
@@ -5882,7 +6365,7 @@ var TableHeaderComponent = ({
     },
     [handleFilterChange]
   );
-  const handleInputChange = React50.useCallback(
+  const handleInputChange = React52.useCallback(
     (event) => {
       const nextValue = event.target.value;
       setInputValue(nextValue);
@@ -5890,33 +6373,96 @@ var TableHeaderComponent = ({
     },
     [debouncedFilterChange, filterType]
   );
-  const showPopover = column.getCanSort() || column.getCanPin() || column.getCanFilter() || column.getCanResize();
-  const pinnedStyle = meta?.width ? { width: meta.width } : {};
+  const moveColumnTo = React52.useCallback(
+    (sourceId, targetId) => {
+      if (!enableColumnOrdering || sourceId.startsWith("_mvn_") || targetId.startsWith("_mvn_")) {
+        return;
+      }
+      setColumnOrder((previous) => {
+        const order = previous.length ? [...previous] : [...baseColumnOrder];
+        const sourceIndex = order.indexOf(sourceId);
+        const targetIndex = order.indexOf(targetId);
+        if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+          return order;
+        }
+        const next = [...order];
+        next.splice(sourceIndex, 1);
+        next.splice(targetIndex, 0, sourceId);
+        return next;
+      });
+    },
+    [baseColumnOrder, enableColumnOrdering, setColumnOrder]
+  );
+  const handleColumnDrop = React52.useCallback(
+    (targetId) => {
+      const sourceId = draggedColumnId.current;
+      draggedColumnId.current = null;
+      if (!sourceId || sourceId === targetId) return;
+      moveColumnTo(sourceId, targetId);
+    },
+    [draggedColumnId, moveColumnTo]
+  );
+  const handleResizeStart = React52.useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (startResize) {
+        const minSize = column.columnDef.minSize ?? 36;
+        const maxSize = column.columnDef.maxSize ?? 9999;
+        startResize(column.id, event, header.getSize(), minSize, maxSize);
+      } else {
+        header.getResizeHandler()(event);
+      }
+    },
+    [
+      column.columnDef.minSize,
+      column.columnDef.maxSize,
+      column.id,
+      header,
+      startResize
+    ]
+  );
+  const handleFilterTypeChange = React52.useCallback(
+    (selected) => {
+      if (debounceTimeoutRef.current !== null) {
+        window.clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+      handleFilterChange(selected, inputValue);
+    },
+    [debounceTimeoutRef, handleFilterChange, inputValue]
+  );
+  const showPopover = column.getCanPin() || column.getCanFilter();
+  const cellStyle = {};
+  if (hasInitializedSizing) {
+    const fallbackWidth = Math.max(header.getSize(), 36);
+    cellStyle.width = `var(--mvn-col-${column.id}-width, ${fallbackWidth}px)`;
+    cellStyle.overflow = "hidden";
+    cellStyle.textOverflow = "ellipsis";
+    cellStyle.whiteSpace = "nowrap";
+  }
   if (pinPosition === "left" && pinnedLeftOffset !== void 0) {
-    pinnedStyle.position = "sticky";
-    pinnedStyle.left = pinnedLeftOffset;
-    pinnedStyle.zIndex = 20;
+    cellStyle.position = "sticky";
+    cellStyle.left = `var(--mvn-col-${column.id}-left, ${pinnedLeftOffset}px)`;
+    cellStyle.zIndex = 20;
   } else if (pinPosition === "right" && pinnedRightOffset !== void 0) {
-    pinnedStyle.position = "sticky";
-    pinnedStyle.right = pinnedRightOffset;
-    pinnedStyle.zIndex = 20;
+    cellStyle.position = "sticky";
+    cellStyle.right = `var(--mvn-col-${column.id}-right, ${pinnedRightOffset}px)`;
+    cellStyle.zIndex = 20;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     TableHead,
     {
       className: cn(
+        "group",
         meta?.headerClassName,
         meta?.align === "center" && "text-center",
         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",
-        // 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"
+        pinPosition && "bg-background"
       ),
-      style: pinnedStyle,
+      style: cellStyle,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -5925,8 +6471,7 @@ var TableHeaderComponent = ({
               "flex items-center w-full",
               meta?.align === "center" && "justify-center",
               meta?.align === "right" && "justify-end",
-              meta?.align === "left" && "justify-start",
-              column.getCanSort() && "cursor-pointer"
+              meta?.align === "left" && "justify-start"
             ),
             draggable: isReorderTable,
             onDragStart: (event) => {
@@ -5950,38 +6495,41 @@ var TableHeaderComponent = ({
               handleColumnDrop(column.id);
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 text-[16px] font-medium", children: reactTable.flexRender(column.columnDef.header, header.getContext()) }),
-              !column.id.startsWith("_mvn_") && showPopover && /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex gap-2 text-[16px] font-medium items-center",
+                    column.getCanSort() && "cursor-pointer"
+                  ),
+                  onClick: () => {
+                    if (draggedColumnId.current) return;
+                    if (column.getCanSort()) {
+                      column.toggleSorting();
+                    }
+                  },
+                  children: [
+                    reactTable.flexRender(column.columnDef.header, header.getContext()),
+                    sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-4 w-4 text-primary flex-shrink-0" }),
+                    sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-4 w-4 text-primary flex-shrink-0" })
+                  ]
+                }
+              ),
+              !isMvnColumn && showPopover && /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   onClick: (event) => event.stopPropagation(),
                   className: "ml-auto",
                   children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TextAlignJustify, { className: "p-1 h-6 w-6" }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: "size", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "p-1 h-4 w-4 rounded-sm cursor-pointer hover:bg-muted transition-colors" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { side: "bottom", className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: column.getCanPin() ? "pin" : "filter", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { children: [
-                        column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(
-                          TabsTrigger,
-                          {
-                            value: "size",
-                            className: "data-[orientation=horizontal]:p-2",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Scaling, { className: "p-1 h-6 w-6" })
-                          }
-                        ),
-                        column.getCanSort() && /* @__PURE__ */ jsxRuntime.jsx(
-                          TabsTrigger,
-                          {
-                            value: "sort",
-                            className: "data-[orientation=horizontal]:p-2",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Scaling, { className: "p-1 h-6 w-6" })
-                          }
-                        ),
                         column.getCanPin() && /* @__PURE__ */ jsxRuntime.jsx(
                           TabsTrigger,
                           {
                             value: "pin",
                             className: "data-[orientation=horizontal]:p-2",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: "p-1 h-6 w-6" })
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: "h-4 w-4" })
                           }
                         ),
                         column.getCanFilter() && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5989,63 +6537,18 @@ var TableHeaderComponent = ({
                           {
                             value: "filter",
                             className: "data-[orientation=horizontal]:p-2",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilter, { className: "p-1 h-6 w-6" })
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilter, { className: "h-4 w-4" })
                           }
                         )
                       ] }),
-                      column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "size", className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: sizingOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-                        CommandItem,
-                        {
-                          value: option.value,
-                          onSelect: () => {
-                            if (option.value === "reset-single") {
-                              column.resetSize();
-                            } else if (option.value === "reset-all") {
-                              header.getContext().table.resetColumnSizing();
-                            }
-                          },
-                          children: option.label
-                        },
-                        option.value
-                      )) }) }) }) }),
-                      column.getCanSort() && /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "sort", className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: sortOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      column.getCanPin() && /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "pin", className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: PIN_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
                         CommandItem,
                         {
                           value: option.value,
                           onSelect: () => {
-                            if (option.value === sortDirection) {
-                              column.clearSorting();
-                              return;
-                            }
-                            column.toggleSorting(option.value === "desc");
-                          },
-                          children: [
-                            option.label,
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              lucideReact.CheckIcon,
-                              {
-                                className: cn(
-                                  "ml-auto h-4 w-4",
-                                  sortDirection === option.value ? "opacity-100" : "opacity-0"
-                                )
-                              }
-                            )
-                          ]
-                        },
-                        option.value
-                      )) }) }) }) }),
-                      column.getCanPin() && /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "pin", className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsxRuntime.jsx(CommandList, { children: /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: pinOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-                        CommandItem,
-                        {
-                          value: option.value,
-                          onSelect: () => {
-                            if (option.value === pinPosition) {
-                              column.pin(false);
-                              return;
-                            }
-                            if (option.value === "left" || option.value === "right") {
-                              column.pin(option.value);
-                            }
+                            column.pin(
+                              option.value === pinPosition ? false : option.value
+                            );
                           },
                           children: [
                             option.label,
@@ -6067,16 +6570,10 @@ var TableHeaderComponent = ({
                           Select,
                           {
                             value: filterType,
-                            onValueChange: (selected) => {
-                              if (debounceTimeoutRef.current !== null) {
-                                window.clearTimeout(debounceTimeoutRef.current);
-                                debounceTimeoutRef.current = null;
-                              }
-                              handleFilterChange(selected, inputValue);
-                            },
+                            onValueChange: handleFilterTypeChange,
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-                              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: TableFilterOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: TABLE_FILTER_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
                             ]
                           }
                         ),
@@ -6102,17 +6599,16 @@ var TableHeaderComponent = ({
         column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            onMouseDown: header.getResizeHandler(),
-            onTouchStart: header.getResizeHandler(),
+            onMouseDown: handleResizeStart,
+            onTouchStart: handleResizeStart,
             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"
+              "absolute right-0 top-0 h-full w-4 cursor-w-resize select-none touch-none",
+              "flex items-center justify-center",
+              "opacity-0 group-hover:opacity-100 transition-opacity duration-150",
+              header.column.getIsResizing() && "opacity-100 bg-primary/10"
             ),
-            style: {
-              transform: "translateX(50%)"
-            }
+            style: { transform: "translateX(50%)" }
           }
         )
       ]
@@ -6131,19 +6627,19 @@ var TableToolbarComponent = ({
   customizeToolbar
 }) => {
   const toolbarVisible = enableExport || customizeToolbar || enableGlobalFilter;
-  const [inputValue, setInputValue] = React50.useState(globalFilter);
-  const debounceTimeoutRef = React50.useRef(null);
-  React50.useEffect(() => {
+  const [inputValue, setInputValue] = React52.useState(globalFilter);
+  const debounceTimeoutRef = React52.useRef(null);
+  React52.useEffect(() => {
     setInputValue(globalFilter);
   }, [globalFilter]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     return () => {
       if (debounceTimeoutRef.current !== null) {
         window.clearTimeout(debounceTimeoutRef.current);
       }
     };
   }, []);
-  const debouncedSetGlobalFilter = React50.useCallback(
+  const debouncedSetGlobalFilter = React52.useCallback(
     (nextValue) => {
       if (debounceTimeoutRef.current !== null) {
         window.clearTimeout(debounceTimeoutRef.current);
@@ -6155,7 +6651,7 @@ var TableToolbarComponent = ({
     },
     [setGlobalFilter]
   );
-  const handleInputChange = React50.useCallback(
+  const handleInputChange = React52.useCallback(
     (event) => {
       const nextValue = event.target.value;
       setInputValue(nextValue);
@@ -6163,7 +6659,7 @@ var TableToolbarComponent = ({
     },
     [debouncedSetGlobalFilter]
   );
-  const handleClear = React50.useCallback(() => {
+  const handleClear = React52.useCallback(() => {
     if (debounceTimeoutRef.current !== null) {
       window.clearTimeout(debounceTimeoutRef.current);
       debounceTimeoutRef.current = null;
@@ -6294,35 +6790,51 @@ function useTableCore({
   enableColumnResizing = false,
   columnResizeMode = "onChange"
 }) {
-  const [sorting, setSorting] = React50.useState(
+  const [sorting, setSorting] = React52.useState(
     sortBy ? [{ id: sortBy, desc: sortDirection === "desc" }] : []
   );
-  const [columnFilters, setColumnFilters] = React50.useState([]);
-  const [globalFilter, setGlobalFilter] = React50.useState("");
-  const [rowSelection, setRowSelection] = React50.useState({});
-  const [expanded, setExpanded] = React50.useState({});
-  const [paginationState, setPaginationState] = React50.useState({
+  const [columnFilters, setColumnFilters] = React52.useState([]);
+  const [globalFilter, setGlobalFilter] = React52.useState("");
+  const [rowSelection, setRowSelection] = React52.useState({});
+  const [expanded, setExpanded] = React52.useState({});
+  const [paginationState, setPaginationState] = React52.useState({
     pageIndex: Math.max(currentPage - 1, 0),
     pageSize
   });
-  const [columnPinning, setColumnPinning] = React50.useState({
+  const [columnPinning, setColumnPinning] = React52.useState({
     left: defaultColumnPinning?.left ?? [],
     right: defaultColumnPinning?.right ?? []
   });
+  const [columnSizing, setColumnSizing] = React52.useState(() => {
+    if (!enableColumnResizing) return {};
+    const initial = {};
+    columns.forEach((col) => {
+      if (col.size !== void 0) {
+        const key = typeof col.key === "string" ? col.key : String(col.key);
+        initial[key] = col.size;
+      }
+    });
+    return initial;
+  });
+  const [columnSizingInfo, setColumnSizingInfo] = React52.useState({});
+  const [hasInitializedSizing, setHasInitializedSizing] = React52.useState(() => {
+    if (!enableColumnResizing) return false;
+    return columns.some((col) => col.size !== void 0);
+  });
   const dataLength = data.length;
-  const enableColumnFilters = React50.useMemo(() => {
+  const enableColumnFilters = React52.useMemo(() => {
     return columns.some((column) => column.filterable === true);
   }, [columns]);
-  const enableColumnSorter = React50.useMemo(() => {
+  const enableColumnSorter = React52.useMemo(() => {
     return columns.some((column) => column.sortable === true);
   }, [columns]);
-  const pinnableColumnIds = React50.useMemo(() => {
+  const pinnableColumnIds = React52.useMemo(() => {
     return columns.filter((column) => column.pinnable === true).map(
       (column) => typeof column.key === "string" ? column.key : String(column.key)
     );
   }, [columns]);
   const enableColumnPin = pinnableColumnIds.length > 0;
-  const baseColumnOrder = React50.useMemo(() => {
+  const baseColumnOrder = React52.useMemo(() => {
     const ids = [];
     if (showIndex) ids.push("_mvn_index");
     if (expandable) ids.push("_mvn_expand");
@@ -6333,8 +6845,8 @@ function useTableCore({
     });
     return ids;
   }, [columns, selectable, expandable, showIndex]);
-  const [columnOrder, setColumnOrder] = React50.useState(baseColumnOrder);
-  React50.useEffect(() => {
+  const [columnOrder, setColumnOrder] = React52.useState(baseColumnOrder);
+  React52.useEffect(() => {
     setColumnOrder((previous) => {
       if (isEqual__default.default(previous, baseColumnOrder)) {
         return previous;
@@ -6342,7 +6854,7 @@ function useTableCore({
       return baseColumnOrder;
     });
   }, [baseColumnOrder]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (!sortBy) {
       setSorting([]);
       return;
@@ -6355,7 +6867,7 @@ function useTableCore({
       return [next];
     });
   }, [sortBy, sortDirection]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (!enableColumnFilters) return;
     if (!columns.some((column) => column.filterable && column?.defaultFilterValue))
       return;
@@ -6372,7 +6884,7 @@ function useTableCore({
       return next;
     });
   }, [columns, enableColumnFilters]);
-  const resolveRowId = React50.useCallback(
+  const resolveRowId = React52.useCallback(
     (record, index) => {
       if (typeof rowKey === "function") {
         return String(rowKey(record, index));
@@ -6382,7 +6894,7 @@ function useTableCore({
     },
     [rowKey]
   );
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     const map = {};
     selectedRowKey?.forEach((k) => {
       map[k] = true;
@@ -6394,7 +6906,7 @@ function useTableCore({
       await onFilterChange(filters);
     }
   };
-  const handleFilteringChange = React50.useCallback(
+  const handleFilteringChange = React52.useCallback(
     (updater) => {
       setColumnFilters((previous) => {
         const next = typeof updater === "function" ? updater(previous) : updater;
@@ -6404,7 +6916,7 @@ function useTableCore({
     },
     [enableColumnFilters, onFilterChange, columnFilters]
   );
-  const handleSortingChange = React50.useCallback(
+  const handleSortingChange = React52.useCallback(
     (updater) => {
       setSorting((previous) => {
         const next = typeof updater === "function" ? updater(previous) : updater;
@@ -6421,7 +6933,7 @@ function useTableCore({
     },
     [onSortChange]
   );
-  const columnDefs = React50.useMemo(() => {
+  const columnDefs = React52.useMemo(() => {
     const defs = columns.map((column) => {
       const key = typeof column.key === "string" ? column.key : String(column.key);
       return {
@@ -6433,6 +6945,9 @@ function useTableCore({
         enableColumnFilter: column.filterable === true,
         enablePinning: column.pinnable === true,
         enableResizing: column.resizable === true,
+        size: column.size,
+        minSize: column.minSize,
+        maxSize: column.maxSize,
         meta: {
           align: column.align,
           className: column.className,
@@ -6525,7 +7040,7 @@ function useTableCore({
     expandable,
     showIndex
   ]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (!pagination) return;
     setPaginationState((previous) => {
       const newPageIndex = Math.max(currentPage - 1, 0);
@@ -6539,7 +7054,7 @@ function useTableCore({
       return next;
     });
   }, [pagination, currentPage, pageSize]);
-  const handlePaginationChange = React50.useCallback(
+  const handlePaginationChange = React52.useCallback(
     (updater) => {
       if (!pagination) return;
       setPaginationState((previous) => {
@@ -6555,13 +7070,156 @@ function useTableCore({
     },
     [pagination, onPageChange]
   );
-  const tablePaginationState = React50.useMemo(() => {
+  const tablePaginationState = React52.useMemo(() => {
     if (!pagination) {
       const fallbackSize = dataLength || paginationState.pageSize || 1;
       return { pageIndex: 0, pageSize: fallbackSize };
     }
     return paginationState;
   }, [pagination, dataLength, paginationState]);
+  const tableRef = React52.useRef(null);
+  const tableContainerRef = React52.useRef(null);
+  const resizeStateRef = React52.useRef({
+    isResizing: false,
+    columnId: null,
+    startX: 0,
+    startWidth: 0,
+    minSize: 36,
+    maxSize: 9999
+  });
+  const pinnedColumnsRef = React52.useRef({ left: [], right: [] });
+  const updatePinnedOffsets = React52.useCallback(() => {
+    const container = tableContainerRef.current;
+    if (!container) return;
+    const { left, right } = pinnedColumnsRef.current;
+    const computedStyle = getComputedStyle(container);
+    let leftAcc = 0;
+    for (const col of left) {
+      container.style.setProperty(`--mvn-col-${col.id}-left`, `${leftAcc}px`);
+      const widthVar = computedStyle.getPropertyValue(
+        `--mvn-col-${col.id}-width`
+      );
+      const width = widthVar ? parseFloat(widthVar) : 0;
+      leftAcc += width;
+    }
+    let rightAcc = 0;
+    for (let i = right.length - 1; i >= 0; i--) {
+      const col = right[i];
+      container.style.setProperty(`--mvn-col-${col.id}-right`, `${rightAcc}px`);
+      const widthVar = computedStyle.getPropertyValue(
+        `--mvn-col-${col.id}-width`
+      );
+      const width = widthVar ? parseFloat(widthVar) : 0;
+      rightAcc += width;
+    }
+  }, []);
+  const handleResizeMove = React52.useCallback(
+    (event) => {
+      const state = resizeStateRef.current;
+      if (!state.isResizing || !state.columnId || !tableContainerRef.current)
+        return;
+      const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+      const delta = clientX - state.startX;
+      const newWidth = Math.max(
+        state.minSize,
+        Math.min(state.maxSize, state.startWidth + delta)
+      );
+      tableContainerRef.current.style.setProperty(
+        `--mvn-col-${state.columnId}-width`,
+        `${newWidth}px`
+      );
+      const { left, right } = pinnedColumnsRef.current;
+      const isPinned = left.some((c) => c.id === state.columnId) || right.some((c) => c.id === state.columnId);
+      if (isPinned) {
+        updatePinnedOffsets();
+      }
+    },
+    [updatePinnedOffsets]
+  );
+  const handleResizeEnd = React52.useCallback(() => {
+    const state = resizeStateRef.current;
+    if (!state.isResizing || !tableContainerRef.current) return;
+    const container = tableContainerRef.current;
+    const computedStyle = getComputedStyle(container);
+    const newSizing = {};
+    const headers = tableRef.current?.getHeaderGroups()[0]?.headers ?? [];
+    for (const header of headers) {
+      if (header.column.getCanResize()) {
+        const varName = `--mvn-col-${header.column.id}-width`;
+        const value = computedStyle.getPropertyValue(varName);
+        if (value) {
+          newSizing[header.column.id] = parseFloat(value);
+        }
+      }
+    }
+    if (Object.keys(newSizing).length > 0) {
+      setColumnSizing(newSizing);
+      if (!hasInitializedSizing) {
+        setHasInitializedSizing(true);
+      }
+    }
+    resizeStateRef.current = {
+      isResizing: false,
+      columnId: null,
+      startX: 0,
+      startWidth: 0,
+      minSize: 36,
+      maxSize: 9999
+    };
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+    document.removeEventListener("touchmove", handleResizeMove);
+    document.removeEventListener("touchend", handleResizeEnd);
+  }, [hasInitializedSizing, handleResizeMove]);
+  const startResize = React52.useCallback(
+    (columnId, event, initialWidth, minSize = 36, maxSize = 9999) => {
+      const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+      resizeStateRef.current = {
+        isResizing: true,
+        columnId,
+        startX: clientX,
+        startWidth: initialWidth,
+        minSize,
+        maxSize
+      };
+      document.addEventListener("mousemove", handleResizeMove);
+      document.addEventListener("mouseup", handleResizeEnd);
+      document.addEventListener("touchmove", handleResizeMove);
+      document.addEventListener("touchend", handleResizeEnd);
+    },
+    [handleResizeMove, handleResizeEnd]
+  );
+  React52.useEffect(() => {
+    return () => {
+      document.removeEventListener("mousemove", handleResizeMove);
+      document.removeEventListener("mouseup", handleResizeEnd);
+      document.removeEventListener("touchmove", handleResizeMove);
+      document.removeEventListener("touchend", handleResizeEnd);
+    };
+  }, [handleResizeMove, handleResizeEnd]);
+  const handleColumnSizingInfoChange = React52.useCallback(
+    (updater) => {
+      setColumnSizingInfo((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        const shouldInitializeSizing = next.isResizingColumn && !hasInitializedSizing && tableRef.current;
+        if (shouldInitializeSizing) {
+          const headers = tableRef.current.getHeaderGroups()[0]?.headers ?? [];
+          const allWidths = {};
+          for (const header of headers) {
+            if (header.column.getCanResize()) {
+              allWidths[header.column.id] = header.getSize();
+            }
+          }
+          if (Object.keys(allWidths).length > 0) {
+            setColumnSizing(allWidths);
+            setHasInitializedSizing(true);
+          }
+        }
+        return next;
+      });
+    },
+    [hasInitializedSizing]
+  );
   const table = reactTable.useReactTable({
     data,
     columns: columnDefs,
@@ -6577,7 +7235,9 @@ function useTableCore({
       ...enableColumnOrdering ? { columnOrder } : {},
       ...enableGlobalFilter ? { globalFilter } : {},
       pagination: tablePaginationState,
-      columnPinning
+      columnPinning,
+      columnSizing,
+      columnSizingInfo
     },
     onSortingChange: enableColumnSorter ? handleSortingChange : void 0,
     onColumnFiltersChange: enableColumnFilters ? handleFilteringChange : void 0,
@@ -6587,6 +7247,8 @@ function useTableCore({
     onGlobalFilterChange: enableGlobalFilter ? setGlobalFilter : void 0,
     onPaginationChange: pagination ? handlePaginationChange : void 0,
     onColumnPinningChange: enableColumnPin ? setColumnPinning : void 0,
+    onColumnSizingChange: enableColumnResizing ? setColumnSizing : void 0,
+    onColumnSizingInfoChange: enableColumnResizing ? handleColumnSizingInfoChange : void 0,
     getCoreRowModel: reactTable.getCoreRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
     getFilteredRowModel: reactTable.getFilteredRowModel(),
@@ -6598,11 +7260,23 @@ function useTableCore({
     getRowId: (originalRow, index) => resolveRowId(originalRow, index),
     getRowCanExpand: expandable ? (row) => getRowCanExpand ? getRowCanExpand(row.original) : !!renderExpandedContent : void 0
   });
-  const pageCount = React50.useMemo(
+  tableRef.current = table;
+  React52.useEffect(() => {
+    const headers = table.getHeaderGroups()[0]?.headers ?? [];
+    const leftPinned = [];
+    const rightPinned = [];
+    headers.forEach((h) => {
+      const pin = h.column.getIsPinned();
+      if (pin === "left") leftPinned.push({ id: h.column.id });
+      if (pin === "right") rightPinned.push({ id: h.column.id });
+    });
+    pinnedColumnsRef.current = { left: leftPinned, right: rightPinned };
+  }, [table, columnPinning]);
+  const pageCount = React52.useMemo(
     () => table.getPageCount(),
     [table, sorting, columnFilters]
   );
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (!enableColumnPin) {
       setColumnPinning({ left: [], right: [] });
       return;
@@ -6620,7 +7294,7 @@ function useTableCore({
       return next;
     });
   }, [enableColumnPin, pinnableColumnIds]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (!pagination) return;
     setPaginationState((previous) => {
       const lastPage = Math.max(pageCount - 1, 0);
@@ -6630,11 +7304,11 @@ function useTableCore({
       return previous;
     });
   }, [pagination, pageCount]);
-  const shouldShowPagination = React50.useCallback(
+  const shouldShowPagination = React52.useCallback(
     () => pagination && pageCount > 1,
     [pagination, pageCount]
   );
-  const pageNumbers = React50.useMemo(() => {
+  const pageNumbers = React52.useMemo(() => {
     if (!pagination || pageCount <= 0) return [];
     const windowSize = Math.max(Math.min(numberOfPageButtons, pageCount), 1);
     const half = Math.floor(windowSize / 2);
@@ -6656,7 +7330,11 @@ function useTableCore({
     pageNumbers,
     paginationState,
     sorting,
-    columnFilters
+    columnFilters,
+    hasInitializedSizing,
+    tableContainerRef,
+    startResize,
+    updatePinnedOffsets
   };
 }
 function useTableVirtualization({
@@ -6668,7 +7346,7 @@ function useTableVirtualization({
   overScan,
   shouldVirtualize
 }) {
-  const virtualRowPointers = React50.useMemo(() => {
+  const virtualRowPointers = React52.useMemo(() => {
     const arr = [];
     rows.forEach((row, index) => {
       arr.push({
@@ -6685,14 +7363,14 @@ function useTableVirtualization({
     });
     return arr;
   }, [rows, expandable]);
-  const virtualRowPointersRef = React50.useRef(virtualRowPointers);
+  const virtualRowPointersRef = React52.useRef(virtualRowPointers);
   virtualRowPointersRef.current = virtualRowPointers;
-  const cacheBackingRef = React50.useRef(
+  const cacheBackingRef = React52.useRef(
     /* @__PURE__ */ new Map()
   );
-  const heightCacheByIndexRef = React50.useRef(/* @__PURE__ */ new Map());
-  const heightCacheByKeyRef = React50.useRef(/* @__PURE__ */ new Map());
-  const cacheRef = React50.useRef({
+  const heightCacheByIndexRef = React52.useRef(/* @__PURE__ */ new Map());
+  const heightCacheByKeyRef = React52.useRef(/* @__PURE__ */ new Map());
+  const cacheRef = React52.useRef({
     get: (index) => cacheBackingRef.current.get(index)?.size,
     set: (index, size, key) => {
       cacheBackingRef.current.set(index, { size, key });
@@ -6710,23 +7388,23 @@ function useTableVirtualization({
       });
     }
   });
-  const [virtualWindow, setVirtualWindow] = React50.useState(EMPTY_WINDOW);
-  const virtualWindowRef = React50.useRef(EMPTY_WINDOW);
-  const rafRef = React50.useRef(null);
-  const debounceTimeoutRef = React50.useRef(null);
-  const measurementQueueRef = React50.useRef(/* @__PURE__ */ new Map());
-  const measurementRafRef = React50.useRef(null);
-  const measurementTimeoutRef = React50.useRef(
+  const [virtualWindow, setVirtualWindow] = React52.useState(EMPTY_WINDOW);
+  const virtualWindowRef = React52.useRef(EMPTY_WINDOW);
+  const rafRef = React52.useRef(null);
+  const debounceTimeoutRef = React52.useRef(null);
+  const measurementQueueRef = React52.useRef(/* @__PURE__ */ new Map());
+  const measurementRafRef = React52.useRef(null);
+  const measurementTimeoutRef = React52.useRef(
     null
   );
-  const measurementIdleRef = React50.useRef(null);
-  const prefixSumCacheRef = React50.useRef({
+  const measurementIdleRef = React52.useRef(null);
+  const prefixSumCacheRef = React52.useRef({
     count: 0,
     itemSizes: [],
     offsets: [],
     totalSize: 0
   });
-  const cleanupRaf = React50.useCallback(() => {
+  const cleanupRaf = React52.useCallback(() => {
     if (debounceTimeoutRef.current != null) {
       clearTimeout(debounceTimeoutRef.current);
       debounceTimeoutRef.current = null;
@@ -6757,7 +7435,7 @@ function useTableVirtualization({
       totalSize: 0
     };
   }, []);
-  const estimateSize = React50.useCallback(
+  const estimateSize = React52.useCallback(
     (index) => {
       const item = virtualRowPointersRef.current[index];
       if (!item) return baseRowEstimateSize;
@@ -6774,7 +7452,7 @@ function useTableVirtualization({
     },
     [baseRowEstimateSize, expandContentEstimateSize]
   );
-  const recomputeVirtualWindow = React50.useCallback(() => {
+  const recomputeVirtualWindow = React52.useCallback(() => {
     if (!shouldVirtualize) {
       setVirtualWindow(EMPTY_WINDOW);
       return;
@@ -6792,7 +7470,7 @@ function useTableVirtualization({
     });
     setVirtualWindow(nextWindow);
   }, [estimateSize, overScan]);
-  const scheduleRecompute = React50.useCallback(() => {
+  const scheduleRecompute = React52.useCallback(() => {
     if (!shouldVirtualize) return;
     if (debounceTimeoutRef.current != null) {
       clearTimeout(debounceTimeoutRef.current);
@@ -6811,7 +7489,7 @@ function useTableVirtualization({
     };
     debounceTimeoutRef.current = setTimeout(run, SCROLL_RESIZE_DEBOUNCE_MS);
   }, [recomputeVirtualWindow]);
-  const flushMeasurementQueue = React50.useCallback(() => {
+  const flushMeasurementQueue = React52.useCallback(() => {
     if (!shouldVirtualize) {
       measurementQueueRef.current.clear();
       return;
@@ -6840,7 +7518,7 @@ function useTableVirtualization({
     measurementQueueRef.current.clear();
     scheduleRecompute();
   }, [scheduleRecompute]);
-  const scheduleMeasurementFlush = React50.useCallback(() => {
+  const scheduleMeasurementFlush = React52.useCallback(() => {
     if (!shouldVirtualize) {
       measurementQueueRef.current.clear();
       return;
@@ -6868,7 +7546,7 @@ function useTableVirtualization({
       measurementTimeoutRef.current = setTimeout(runFlush, 16);
     }
   }, [flushMeasurementQueue]);
-  const measureElement = React50.useCallback(
+  const measureElement = React52.useCallback(
     (height, index) => {
       if (!height || !shouldVirtualize || index == null) return;
       if (shouldVirtualize) {
@@ -6885,7 +7563,7 @@ function useTableVirtualization({
     },
     [scheduleMeasurementFlush]
   );
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (!shouldVirtualize) {
       cacheRef.current.clear();
       heightCacheByIndexRef.current.clear();
@@ -6903,7 +7581,7 @@ function useTableVirtualization({
     });
     scheduleRecompute();
   }, [scheduleRecompute]);
-  const invalidateCache = React50.useCallback(
+  const invalidateCache = React52.useCallback(
     (index, key) => {
       const result = cacheRef.current.invalidateIndex?.(index);
       if (!result) return;
@@ -6914,7 +7592,7 @@ function useTableVirtualization({
     },
     [scheduleRecompute]
   );
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (!shouldVirtualize) return;
     const element = tableContainerRef.current;
     if (!element) return;
@@ -6943,11 +7621,11 @@ function useTableVirtualization({
       if (frameId != null) cancelAnimationFrame(frameId);
     };
   }, [scheduleRecompute]);
-  React50.useEffect(() => () => cleanupRaf(), [cleanupRaf]);
-  React50.useEffect(() => {
+  React52.useEffect(() => () => cleanupRaf(), [cleanupRaf]);
+  React52.useEffect(() => {
     virtualWindowRef.current = virtualWindow;
   }, [virtualWindow]);
-  const virtualItems = React50.useMemo(() => {
+  const virtualItems = React52.useMemo(() => {
     if (!shouldVirtualize) return [];
     return virtualWindow.items.map(({ index, offset, size }) => {
       const start = offset;
@@ -7163,10 +7841,16 @@ function SimpleTable({
   loadingText,
   pagingPosition = "right",
   recordPerChunk = 100,
-  defaultColumnPinning
+  defaultColumnPinning,
+  enableColumnResizing = false,
+  columnResizeMode = "onChange",
+  // Mobile props
+  mobileLayout = "auto",
+  mobileCardActions,
+  renderMobileCard
 }) {
-  const [internalLazyLoading, setInternalLazyLoading] = React50.useState(false);
-  const pendingLazyLoad = React50.useRef(false);
+  const [internalLazyLoading, setInternalLazyLoading] = React52.useState(false);
+  const pendingLazyLoad = React52.useRef(false);
   const isControlledLoading = loading !== void 0;
   const resolvedLoading = isControlledLoading ? loading : internalLazyLoading;
   const showOverlayLoading = resolvedLoading && lazyLoadIndicatorType === "overlay";
@@ -7182,7 +7866,11 @@ function SimpleTable({
     pageNumbers,
     paginationState,
     sorting,
-    columnFilters
+    columnFilters,
+    hasInitializedSizing,
+    tableContainerRef,
+    startResize,
+    updatePinnedOffsets
   } = useTableCore({
     data,
     columns,
@@ -7207,9 +7895,11 @@ function SimpleTable({
     manualSorting,
     manualFiltering,
     onFilterChange,
-    defaultColumnPinning
+    defaultColumnPinning,
+    enableColumnResizing,
+    columnResizeMode
   });
-  const handleLazyLoad = React50.useCallback(async () => {
+  const handleLazyLoad = React52.useCallback(async () => {
     if (!onLazyScrollLoad || pendingLazyLoad.current || resolvedLoading) return;
     pendingLazyLoad.current = true;
     if (!isControlledLoading) setInternalLazyLoading(true);
@@ -7221,8 +7911,10 @@ function SimpleTable({
     }
   }, [onLazyScrollLoad, resolvedLoading]);
   const virtualizationActive = data.length * (expandable ? 2 : 1) > virtualizationThreshold;
-  const [chunkCount, setChunkCount] = React50.useState(recordPerChunk);
-  const onLoadChunk = React50.useCallback(() => {
+  const isMobile = useIsMobile();
+  const shouldUseCardView = mobileLayout === "card" || mobileLayout === "auto" && isMobile;
+  const [chunkCount, setChunkCount] = React52.useState(recordPerChunk);
+  const onLoadChunk = React52.useCallback(() => {
     if (resolvedLoading || pendingLazyLoad.current) return;
     if (data.length > chunkCount) {
       setChunkCount(() => Math.min(chunkCount + recordPerChunk, data.length));
@@ -7231,25 +7923,24 @@ function SimpleTable({
     if (typeof maxRecords === "number" && data.length >= maxRecords) return;
     void handleLazyLoad();
   }, [recordPerChunk, data.length, handleLazyLoad, chunkCount, maxRecords]);
-  const onLoadChunkRef = React50.useRef(onLoadChunk);
-  React50.useEffect(() => {
+  const onLoadChunkRef = React52.useRef(onLoadChunk);
+  React52.useEffect(() => {
     onLoadChunkRef.current = onLoadChunk;
   }, [onLoadChunk]);
-  const rows = React50.useMemo(
+  const rows = React52.useMemo(
     () => table.getRowModel().rows,
-    [paginationState, sorting, columnFilters, globalFilter]
+    [paginationState, sorting, columnFilters, globalFilter, data]
   );
-  const splittedRows = React50.useMemo(
+  const splittedRows = React52.useMemo(
     () => rows.slice(0, chunkCount),
     [rows, chunkCount]
   );
-  const selectedRows = React50.useMemo(
+  const selectedRows = React52.useMemo(
     () => table.getSelectedRowModel().rows.map((row) => row.original),
     [rowSelection]
   );
   const tablePagination = table.getState().pagination;
-  const draggedColumnId = React50.useRef(null);
-  const tableContainerRef = React50.useRef(null);
+  const draggedColumnId = React52.useRef(null);
   const {
     virtualRowPointers,
     virtualItems,
@@ -7266,10 +7957,10 @@ function SimpleTable({
     overScan,
     shouldVirtualize: virtualizationActive
   });
-  const rafRef = React50.useRef(null);
-  React50.useEffect(() => {
+  const rafRef = React52.useRef(null);
+  React52.useEffect(() => {
     const container = tableContainerRef.current;
-    if (!container || virtualizationActive) return;
+    if (!container || virtualizationActive && !shouldUseCardView) return;
     const scheduleCheck = () => {
       if (rafRef.current != null) return;
       rafRef.current = requestAnimationFrame(() => {
@@ -7290,31 +7981,30 @@ function SimpleTable({
       }
     };
   }, [scrollLoadThreshold, virtualizationActive]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (virtualizationActive) return;
     if (table.getState().pagination.pageIndex === 0) {
       tableContainerRef.current?.scrollTo({ top: 0 });
     }
   }, [virtualizationActive]);
-  React50.useEffect(() => {
-    if (!virtualItems.length || !virtualizationActive) return;
+  React52.useEffect(() => {
+    if (!virtualItems.length || !virtualizationActive || shouldUseCardView)
+      return;
     if (paddingBottom <= scrollLoadThreshold) {
       onLoadChunkRef.current();
     }
   }, [paddingBottom, scrollLoadThreshold, virtualizationActive]);
   const columnCount = table.getAllLeafColumns().length;
-  const allHeaders = React50.useMemo(() => {
+  const allHeaders = React52.useMemo(() => {
     const groups = table.getHeaderGroups();
     if (groups.length === 0) return [];
     return groups[0].headers;
   }, [table]);
-  const { leftOffsets, rightOffsets, lastLeftId, firstRightId } = React50.useMemo(() => {
+  const { leftOffsets, rightOffsets } = React52.useMemo(() => {
     if (!allHeaders || allHeaders.length === 0) {
       return {
         leftOffsets: /* @__PURE__ */ new Map(),
-        rightOffsets: /* @__PURE__ */ new Map(),
-        lastLeftId: null,
-        firstRightId: null
+        rightOffsets: /* @__PURE__ */ new Map()
       };
     }
     const leftPinned = allHeaders.filter(
@@ -7338,16 +8028,29 @@ function SimpleTable({
     }
     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
+      rightOffsets: rightMap
     };
   }, [allHeaders]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
+    if (!hasInitializedSizing || !tableContainerRef.current) return;
+    const container = tableContainerRef.current;
+    const headers = table.getHeaderGroups()[0]?.headers ?? [];
+    for (const header of headers) {
+      if (header.column.getCanResize()) {
+        const width = header.getSize();
+        container.style.setProperty(
+          `--mvn-col-${header.column.id}-width`,
+          `${width}px`
+        );
+      }
+    }
+    updatePinnedOffsets();
+  }, [hasInitializedSizing, table, updatePinnedOffsets]);
+  React52.useEffect(() => {
     if (!selectable || !onSelectionChange) return;
     onSelectionChange(selectedRows);
   }, [selectable, onSelectionChange, selectedRows]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     if (!expandable || !onExpandedChange) return;
     onExpandedChange(
       table.getExpandedRowModel().rows.map((row) => row.original)
@@ -7393,13 +8096,31 @@ function SimpleTable({
         },
         children: [
           showOverlayLoading && (loadingComponent ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultLoadingComponent, { loadingText })),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          shouldUseCardView ? /* @__PURE__ */ jsxRuntime.jsx(
+            TableCardView,
+            {
+              rows: splittedRows,
+              columns,
+              selectable,
+              expandable,
+              onRowClick,
+              rowClassName,
+              renderExpandedContent,
+              mobileCardActions,
+              emptyMessage,
+              renderMobileCard
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
             Table,
             {
               variant,
               size,
               wrapperClassName: "overflow-visible",
               className: showOverlayLoading ? "pointer-events-none opacity-50" : void 0,
+              style: enableColumnResizing ? {
+                width: hasInitializedSizing ? table.getTotalSize() : void 0,
+                tableLayout: hasInitializedSizing ? "fixed" : "auto"
+              } : void 0,
               children: [
                 caption && /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }),
                 /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => {
@@ -7415,8 +8136,8 @@ function SimpleTable({
                       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
+                      hasInitializedSizing,
+                      startResize
                     },
                     header.id
                   );
@@ -7440,7 +8161,8 @@ function SimpleTable({
                       virtualItems,
                       invalidateCache,
                       getRowExpandable,
-                      headers: allHeaders
+                      headers: allHeaders,
+                      hasInitializedSizing
                     }
                   ),
                   showInlineLoadingRow && resolvedLoading && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-loading-row": true, className: "pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7501,12 +8223,12 @@ function DataTable({
   pageSize = 10,
   className
 }) {
-  const [sorting, setSorting] = React50__namespace.useState([]);
-  const [columnFilters, setColumnFilters] = React50__namespace.useState(
+  const [sorting, setSorting] = React52__namespace.useState([]);
+  const [columnFilters, setColumnFilters] = React52__namespace.useState(
     []
   );
-  const [columnVisibility, setColumnVisibility] = React50__namespace.useState({});
-  const [rowSelection, setRowSelection] = React50__namespace.useState({});
+  const [columnVisibility, setColumnVisibility] = React52__namespace.useState({});
+  const [rowSelection, setRowSelection] = React52__namespace.useState({});
   const table = reactTable.useReactTable({
     data,
     columns,
@@ -7663,7 +8385,7 @@ var avatarFallbackVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Avatar = React50__namespace.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Avatar = React52__namespace.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Root,
   {
     ref,
@@ -7672,7 +8394,7 @@ var Avatar = React50__namespace.forwardRef(({ className, size, ...props }, ref)
   }
 ));
 Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
-var AvatarImage = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AvatarImage = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Image,
   {
     ref,
@@ -7681,7 +8403,7 @@ var AvatarImage = React50__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
-var AvatarFallback = React50__namespace.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AvatarFallback = React52__namespace.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Fallback,
   {
     ref,
@@ -7845,7 +8567,7 @@ var itemVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Item9 = React50__namespace.forwardRef(
+var Item9 = React52__namespace.forwardRef(
   ({
     className,
     variant,
@@ -7911,7 +8633,7 @@ var Item9 = React50__namespace.forwardRef(
   }
 );
 Item9.displayName = "Item";
-var ItemGroup = React50__namespace.forwardRef(({ className, label, description, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
+var ItemGroup = React52__namespace.forwardRef(({ className, label, description, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
   (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 space-y-0.5", children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
     description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: description })
@@ -7919,7 +8641,7 @@ var ItemGroup = React50__namespace.forwardRef(({ className, label, description,
   children
 ] }));
 ItemGroup.displayName = "ItemGroup";
-var ItemList = React50__namespace.forwardRef(({ className, divided, spacing = "default", children, ...props }, ref) => {
+var ItemList = React52__namespace.forwardRef(({ className, divided, spacing = "default", children, ...props }, ref) => {
   const spacingClasses = {
     none: "space-y-0",
     sm: "space-y-0.5",
@@ -7942,7 +8664,7 @@ var ItemList = React50__namespace.forwardRef(({ className, divided, spacing = "d
   );
 });
 ItemList.displayName = "ItemList";
-var ItemSeparator = React50__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ItemSeparator = React52__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -7980,7 +8702,7 @@ var badgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Badge = React50__namespace.forwardRef(
+var Badge = React52__namespace.forwardRef(
   ({
     className,
     variant,
@@ -8047,7 +8769,7 @@ function Calendar({
   ...props
 }) {
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const { Card: Card2, CardHeader: CardHeader2, CardTitle: CardTitle2, CardContent: CardContent2, CardDescription: CardDescription2 } = React50__namespace.useMemo(() => {
+  const { Card: Card2, CardHeader: CardHeader2, CardTitle: CardTitle2, CardContent: CardContent2, CardDescription: CardDescription2 } = React52__namespace.useMemo(() => {
     try {
       const cardComponents = (init_card(), __toCommonJS(card_exports));
       return cardComponents;
@@ -8061,7 +8783,7 @@ function Calendar({
       };
     }
   }, []);
-  const defaultPresets = React50__namespace.useMemo(() => {
+  const defaultPresets = React52__namespace.useMemo(() => {
     if (!quickSelect && !presets) return [];
     const mode = props.mode;
     if (mode === "single") {
@@ -8069,7 +8791,7 @@ function Calendar({
         {
           label: "Today",
           value: () => /* @__PURE__ */ new Date(),
-          icon: React50__namespace.createElement(lucideReact.Calendar, { className: "h-3 w-3" })
+          icon: React52__namespace.createElement(lucideReact.Calendar, { className: "h-3 w-3" })
         },
         {
           label: "Tomorrow",
@@ -8078,7 +8800,7 @@ function Calendar({
             tomorrow.setDate(tomorrow.getDate() + 1);
             return tomorrow;
           },
-          icon: React50__namespace.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
+          icon: React52__namespace.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
         },
         {
           label: "Next Week",
@@ -8087,7 +8809,7 @@ function Calendar({
             nextWeek.setDate(nextWeek.getDate() + 7);
             return nextWeek;
           },
-          icon: React50__namespace.createElement(lucideReact.Calendar, { className: "h-3 w-3" })
+          icon: React52__namespace.createElement(lucideReact.Calendar, { className: "h-3 w-3" })
         }
       ];
     } else if (mode === "range") {
@@ -8100,7 +8822,7 @@ function Calendar({
             end.setDate(start.getDate() + 6);
             return { from: start, to: end };
           },
-          icon: React50__namespace.createElement(lucideReact.Calendar, { className: "h-3 w-3" })
+          icon: React52__namespace.createElement(lucideReact.Calendar, { className: "h-3 w-3" })
         },
         {
           label: "Next 7 Days",
@@ -8110,7 +8832,7 @@ function Calendar({
             end.setDate(start.getDate() + 7);
             return { from: start, to: end };
           },
-          icon: React50__namespace.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
+          icon: React52__namespace.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
         }
       ];
     } else {
@@ -8126,7 +8848,7 @@ function Calendar({
             }
             return dates;
           },
-          icon: React50__namespace.createElement(lucideReact.Calendar, { className: "h-3 w-3" })
+          icon: React52__namespace.createElement(lucideReact.Calendar, { className: "h-3 w-3" })
         }
       ];
     }
@@ -8137,24 +8859,24 @@ function Calendar({
     const selected = props.selected;
     const mode = props.mode;
     if (mode === "single" && selected) {
-      return React50__namespace.createElement(
+      return React52__namespace.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50"
         },
         [
-          React50__namespace.createElement(
+          React52__namespace.createElement(
             "div",
             {
               key: "header",
               className: "flex items-center gap-2 mb-1"
             },
             [
-              React50__namespace.createElement(lucideReact.Calendar, {
+              React52__namespace.createElement(lucideReact.Calendar, {
                 key: "icon",
                 className: "h-4 w-4"
               }),
-              React50__namespace.createElement(
+              React52__namespace.createElement(
                 "span",
                 {
                   key: "label",
@@ -8164,7 +8886,7 @@ function Calendar({
               )
             ]
           ),
-          React50__namespace.createElement(
+          React52__namespace.createElement(
             "p",
             {
               key: "date",
@@ -8182,24 +8904,24 @@ function Calendar({
     }
     if (mode === "range" && selected?.from) {
       const elements = [
-        React50__namespace.createElement(
+        React52__namespace.createElement(
           "div",
           {
             key: "from",
             className: "flex items-center gap-2 text-sm"
           },
           [
-            React50__namespace.createElement(
+            React52__namespace.createElement(
               "span",
               { key: "icon", className: "text-green-600" },
               "\u{1F7E2}"
             ),
-            React50__namespace.createElement(
+            React52__namespace.createElement(
               "span",
               { key: "label", className: "font-medium" },
               "From:"
             ),
-            React50__namespace.createElement(
+            React52__namespace.createElement(
               "span",
               { key: "date" },
               selected.from.toLocaleDateString()
@@ -8209,43 +8931,43 @@ function Calendar({
       ];
       if (selected.to) {
         elements.push(
-          React50__namespace.createElement(
+          React52__namespace.createElement(
             "div",
             {
               key: "to",
               className: "flex items-center gap-2 text-sm"
             },
             [
-              React50__namespace.createElement(
+              React52__namespace.createElement(
                 "span",
                 { key: "icon", className: "text-red-600" },
                 "\u{1F534}"
               ),
-              React50__namespace.createElement(
+              React52__namespace.createElement(
                 "span",
                 { key: "label", className: "font-medium" },
                 "To:"
               ),
-              React50__namespace.createElement(
+              React52__namespace.createElement(
                 "span",
                 { key: "date" },
                 selected.to.toLocaleDateString()
               )
             ]
           ),
-          React50__namespace.createElement(
+          React52__namespace.createElement(
             "div",
             {
               key: "duration",
               className: "flex items-center gap-2 pt-2 border-t text-sm"
             },
             [
-              React50__namespace.createElement(
+              React52__namespace.createElement(
                 "span",
                 { key: "icon", className: "text-mvn-blue-600" },
                 "\u23F1\uFE0F"
               ),
-              React50__namespace.createElement(
+              React52__namespace.createElement(
                 "span",
                 { key: "text" },
                 `Duration: ${Math.ceil(
@@ -8256,25 +8978,25 @@ function Calendar({
           )
         );
       }
-      return React50__namespace.createElement(
+      return React52__namespace.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50"
         },
-        React50__namespace.createElement("div", { className: "space-y-2" }, elements)
+        React52__namespace.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) => React50__namespace.createElement(
+        (date, index) => React52__namespace.createElement(
           "div",
           {
             key: index,
             className: "flex items-center justify-between p-2 bg-background rounded border"
           },
           [
-            React50__namespace.createElement(
+            React52__namespace.createElement(
               "span",
               {
                 key: "date",
@@ -8286,7 +9008,7 @@ function Calendar({
                 year: "numeric"
               })
             ),
-            React50__namespace.createElement(
+            React52__namespace.createElement(
               "button",
               {
                 key: "remove",
@@ -8307,18 +9029,18 @@ function Calendar({
         )
       );
       const elements = [
-        React50__namespace.createElement(
+        React52__namespace.createElement(
           "div",
           {
             key: "header",
             className: "flex items-center gap-2 mb-2"
           },
           [
-            React50__namespace.createElement(lucideReact.Star, {
+            React52__namespace.createElement(lucideReact.Star, {
               key: "icon",
               className: "h-4 w-4 text-yellow-500"
             }),
-            React50__namespace.createElement(
+            React52__namespace.createElement(
               "span",
               {
                 key: "label",
@@ -8328,7 +9050,7 @@ function Calendar({
             )
           ]
         ),
-        React50__namespace.createElement(
+        React52__namespace.createElement(
           "div",
           {
             key: "dates",
@@ -8339,7 +9061,7 @@ function Calendar({
       ];
       if (selected.length > 5) {
         elements.push(
-          React50__namespace.createElement(
+          React52__namespace.createElement(
             "p",
             {
               key: "more",
@@ -8349,7 +9071,7 @@ function Calendar({
           )
         );
       }
-      return React50__namespace.createElement(
+      return React52__namespace.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50 max-h-48 overflow-y-auto"
@@ -8364,7 +9086,7 @@ function Calendar({
     const elements = [];
     if ((quickSelect || presets) && activePresets.length > 0) {
       const presetButtons = activePresets.map(
-        (preset, index) => React50__namespace.createElement(
+        (preset, index) => React52__namespace.createElement(
           "button",
           {
             key: index,
@@ -8373,19 +9095,19 @@ function Calendar({
           },
           [
             preset.icon,
-            React50__namespace.createElement("span", { key: "label" }, preset.label)
+            React52__namespace.createElement("span", { key: "label" }, preset.label)
           ]
         )
       );
       elements.push(
-        React50__namespace.createElement(
+        React52__namespace.createElement(
           "div",
           {
             key: "presets",
             className: "space-y-2"
           },
           [
-            React50__namespace.createElement(
+            React52__namespace.createElement(
               "h5",
               {
                 key: "title",
@@ -8393,7 +9115,7 @@ function Calendar({
               },
               "Quick Select:"
             ),
-            React50__namespace.createElement(
+            React52__namespace.createElement(
               "div",
               {
                 key: "buttons",
@@ -8418,7 +9140,7 @@ function Calendar({
         label = "Clear Range";
       }
       elements.push(
-        React50__namespace.createElement(
+        React52__namespace.createElement(
           "button",
           {
             key: "clear",
@@ -8434,7 +9156,7 @@ function Calendar({
             disabled
           },
           [
-            React50__namespace.createElement(lucideReact.RotateCcw, {
+            React52__namespace.createElement(lucideReact.RotateCcw, {
               key: "icon",
               className: "mr-1 h-3 w-3"
             }),
@@ -8443,7 +9165,7 @@ function Calendar({
         )
       );
     }
-    return React50__namespace.createElement(
+    return React52__namespace.createElement(
       "div",
       {
         className: cn("space-y-3", sidebarClassName)
@@ -8451,7 +9173,7 @@ function Calendar({
       elements
     );
   };
-  const calendarElement = React50__namespace.createElement(reactDayPicker.DayPicker, {
+  const calendarElement = React52__namespace.createElement(reactDayPicker.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",
@@ -8553,7 +9275,7 @@ function Calendar({
     },
     components: {
       Root: ({ className: className2, rootRef, ...props2 }) => {
-        return React50__namespace.createElement("div", {
+        return React52__namespace.createElement("div", {
           "data-slot": "calendar",
           ref: rootRef,
           className: cn(className2),
@@ -8562,28 +9284,28 @@ function Calendar({
       },
       Chevron: ({ className: className2, orientation, ...props2 }) => {
         if (orientation === "left") {
-          return React50__namespace.createElement(lucideReact.ChevronLeft, {
+          return React52__namespace.createElement(lucideReact.ChevronLeft, {
             className: cn("size-4", className2),
             ...props2
           });
         }
         if (orientation === "right") {
-          return React50__namespace.createElement(lucideReact.ChevronRight, {
+          return React52__namespace.createElement(lucideReact.ChevronRight, {
             className: cn("size-4", className2),
             ...props2
           });
         }
-        return React50__namespace.createElement(lucideReact.ChevronDown, {
+        return React52__namespace.createElement(lucideReact.ChevronDown, {
           className: cn("size-4", className2),
           ...props2
         });
       },
       DayButton: CalendarDayButton,
       WeekNumber: ({ children, ...props2 }) => {
-        return React50__namespace.createElement(
+        return React52__namespace.createElement(
           "td",
           props2,
-          React50__namespace.createElement(
+          React52__namespace.createElement(
             "div",
             {
               className: "flex size-10 items-center justify-center text-center text-sm font-medium text-muted-foreground"
@@ -8598,25 +9320,25 @@ function Calendar({
   });
   if (layout === "compact") {
     if (withCard) {
-      return React50__namespace.createElement(
+      return React52__namespace.createElement(
         Card2,
         {
           className: cn("w-fit", cardClassName)
         },
-        React50__namespace.createElement(CardContent2, { className: "p-3" }, calendarElement)
+        React52__namespace.createElement(CardContent2, { className: "p-3" }, calendarElement)
       );
     }
     return calendarElement;
   }
   if (layout === "inline") {
-    const sidebarElement2 = renderDateInfo() || renderQuickActions() ? React50__namespace.createElement(
+    const sidebarElement2 = renderDateInfo() || renderQuickActions() ? React52__namespace.createElement(
       "div",
       {
         className: cn("min-w-[240px] space-y-3", sidebarClassName)
       },
       [renderDateInfo(), renderQuickActions()].filter(Boolean)
     ) : null;
-    const content = sidebarElement2 ? React50__namespace.createElement(
+    const content = sidebarElement2 ? React52__namespace.createElement(
       "div",
       {
         className: cn("flex gap-4 items-start", containerClassName)
@@ -8624,25 +9346,25 @@ function Calendar({
       [calendarElement, sidebarElement2]
     ) : calendarElement;
     if (withCard) {
-      return React50__namespace.createElement(
+      return React52__namespace.createElement(
         Card2,
         {
           className: cn("w-fit", cardClassName)
         },
         [
-          (cardTitle || cardDescription) && React50__namespace.createElement(CardHeader2, { key: "header" }, [
-            cardTitle && React50__namespace.createElement(
+          (cardTitle || cardDescription) && React52__namespace.createElement(CardHeader2, { key: "header" }, [
+            cardTitle && React52__namespace.createElement(
               CardTitle2,
               { key: "title", className: "text-base" },
               cardTitle
             ),
-            cardDescription && React50__namespace.createElement(
+            cardDescription && React52__namespace.createElement(
               CardDescription2,
               { key: "desc" },
               cardDescription
             )
           ]),
-          React50__namespace.createElement(
+          React52__namespace.createElement(
             CardContent2,
             {
               key: "content",
@@ -8655,7 +9377,7 @@ function Calendar({
     }
     return content;
   }
-  const sidebarElement = renderDateInfo() || renderQuickActions() ? React50__namespace.createElement(
+  const sidebarElement = renderDateInfo() || renderQuickActions() ? React52__namespace.createElement(
     "div",
     {
       className: cn("min-w-[240px] space-y-3", sidebarClassName)
@@ -8663,7 +9385,7 @@ function Calendar({
     [renderDateInfo(), renderQuickActions()].filter(Boolean)
   ) : null;
   if (withCard) {
-    const cardElement = React50__namespace.createElement(
+    const cardElement = React52__namespace.createElement(
       Card2,
       {
         className: cn(
@@ -8674,19 +9396,19 @@ function Calendar({
         )
       },
       [
-        (cardTitle || cardDescription) && React50__namespace.createElement(CardHeader2, { key: "header" }, [
-          cardTitle && React50__namespace.createElement(
+        (cardTitle || cardDescription) && React52__namespace.createElement(CardHeader2, { key: "header" }, [
+          cardTitle && React52__namespace.createElement(
             CardTitle2,
             { key: "title", className: "text-base" },
             cardTitle
           ),
-          cardDescription && React50__namespace.createElement(
+          cardDescription && React52__namespace.createElement(
             CardDescription2,
             { key: "desc" },
             cardDescription
           )
         ]),
-        React50__namespace.createElement(
+        React52__namespace.createElement(
           CardContent2,
           {
             key: "content",
@@ -8697,7 +9419,7 @@ function Calendar({
       ].filter(Boolean)
     );
     if (sidebarElement) {
-      return React50__namespace.createElement(
+      return React52__namespace.createElement(
         "div",
         {
           className: cn("flex gap-4 flex-wrap items-start", containerClassName)
@@ -8708,7 +9430,7 @@ function Calendar({
     return cardElement;
   }
   if (sidebarElement) {
-    return React50__namespace.createElement(
+    return React52__namespace.createElement(
       "div",
       {
         className: cn("flex gap-4 flex-wrap items-start", containerClassName)
@@ -8725,8 +9447,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const ref = React50__namespace.useRef(null);
-  React50__namespace.useEffect(() => {
+  const ref = React52__namespace.useRef(null);
+  React52__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10342,7 +11064,7 @@ var pickerVariants = classVarianceAuthority.cva("w-full justify-start text-left
     variant: "outlined"
   }
 });
-var DatePicker = React50__namespace.forwardRef(
+var DatePicker = React52__namespace.forwardRef(
   ({
     date,
     onDateChange,
@@ -10389,7 +11111,7 @@ var DatePicker = React50__namespace.forwardRef(
   }
 );
 DatePicker.displayName = "DatePicker";
-var DateRangePicker = React50__namespace.forwardRef(
+var DateRangePicker = React52__namespace.forwardRef(
   ({
     dateRange,
     onDateRangeChange,
@@ -10447,15 +11169,15 @@ DateRangePicker.displayName = "DateRangePicker";
 
 // src/components/ui/carousel/index.tsx
 init_utils();
-var CarouselContext = React50__namespace.createContext(null);
+var CarouselContext = React52__namespace.createContext(null);
 function useCarousel() {
-  const context = React50__namespace.useContext(CarouselContext);
+  const context = React52__namespace.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
   return context;
 }
-var Carousel = React50__namespace.forwardRef(
+var Carousel = React52__namespace.forwardRef(
   ({
     orientation = "horizontal",
     opts,
@@ -10472,22 +11194,22 @@ var Carousel = React50__namespace.forwardRef(
       },
       plugins
     );
-    const [canScrollPrev, setCanScrollPrev] = React50__namespace.useState(false);
-    const [canScrollNext, setCanScrollNext] = React50__namespace.useState(false);
-    const onSelect = React50__namespace.useCallback((api2) => {
+    const [canScrollPrev, setCanScrollPrev] = React52__namespace.useState(false);
+    const [canScrollNext, setCanScrollNext] = React52__namespace.useState(false);
+    const onSelect = React52__namespace.useCallback((api2) => {
       if (!api2) {
         return;
       }
       setCanScrollPrev(api2.canScrollPrev());
       setCanScrollNext(api2.canScrollNext());
     }, []);
-    const scrollPrev = React50__namespace.useCallback(() => {
+    const scrollPrev = React52__namespace.useCallback(() => {
       api?.scrollPrev();
     }, [api]);
-    const scrollNext = React50__namespace.useCallback(() => {
+    const scrollNext = React52__namespace.useCallback(() => {
       api?.scrollNext();
     }, [api]);
-    const handleKeyDown = React50__namespace.useCallback(
+    const handleKeyDown = React52__namespace.useCallback(
       (event) => {
         if (event.key === "ArrowLeft") {
           event.preventDefault();
@@ -10499,13 +11221,13 @@ var Carousel = React50__namespace.forwardRef(
       },
       [scrollPrev, scrollNext]
     );
-    React50__namespace.useEffect(() => {
+    React52__namespace.useEffect(() => {
       if (!api || !setApi) {
         return;
       }
       setApi(api);
     }, [api, setApi]);
-    React50__namespace.useEffect(() => {
+    React52__namespace.useEffect(() => {
       if (!api) {
         return;
       }
@@ -10550,7 +11272,7 @@ var Carousel = React50__namespace.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React50__namespace.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React52__namespace.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: carouselRef, className: "overflow-hidden h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10566,7 +11288,7 @@ var CarouselContent = React50__namespace.forwardRef(({ className, ...props }, re
   ) });
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React50__namespace.forwardRef(({ className, ...props }, ref) => {
+var CarouselItem = React52__namespace.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10584,7 +11306,7 @@ var CarouselItem = React50__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React50__namespace.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselPrevious = React52__namespace.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Button,
@@ -10608,7 +11330,7 @@ var CarouselPrevious = React50__namespace.forwardRef(({ className, variant = "ou
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React50__namespace.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselNext = React52__namespace.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Button,
@@ -10647,10 +11369,10 @@ function SimpleCarousel({
   nextArrow,
   onSlideChange
 }) {
-  const [api, setApi] = React50__namespace.useState();
-  const [current, setCurrent] = React50__namespace.useState(0);
-  const [count, setCount] = React50__namespace.useState(0);
-  React50__namespace.useEffect(() => {
+  const [api, setApi] = React52__namespace.useState();
+  const [current, setCurrent] = React52__namespace.useState(0);
+  const [count, setCount] = React52__namespace.useState(0);
+  React52__namespace.useEffect(() => {
     if (!api) {
       return;
     }
@@ -10662,7 +11384,7 @@ function SimpleCarousel({
       onSlideChange?.(selectedIndex);
     });
   }, [api, onSlideChange]);
-  React50__namespace.useEffect(() => {
+  React52__namespace.useEffect(() => {
     if (!api || !autoPlay) {
       return;
     }
@@ -10812,7 +11534,7 @@ var typeToTag = {
   list: "ul",
   "list-item": "li"
 };
-var Typography = React50__namespace.forwardRef(
+var Typography = React52__namespace.forwardRef(
   ({
     type,
     size,
@@ -10849,7 +11571,7 @@ var Typography = React50__namespace.forwardRef(
 );
 Typography.displayName = "Typography";
 function createWrapper(fixedType) {
-  return React50__namespace.forwardRef(
+  return React52__namespace.forwardRef(
     ({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Typography, { ref, type: fixedType, ...props })
   );
 }
@@ -10952,6 +11674,13 @@ var tooltipStyle = {
   boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
   color: "var(--foreground)"
 };
+var tooltipLabelStyle = {
+  color: "var(--foreground)",
+  fontWeight: 500
+};
+var tooltipItemStyle = {
+  color: "var(--foreground)"
+};
 var legendStyle = {
   fontSize: "12px",
   color: "var(--muted-foreground, #616875)"
@@ -11002,7 +11731,8 @@ function LineChart({
       recharts.Tooltip,
       {
         contentStyle: tooltipStyle,
-        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle
       }
     ),
     showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
@@ -11094,7 +11824,8 @@ function BarChart({
       recharts.Tooltip,
       {
         contentStyle: tooltipStyle,
-        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle
       }
     ),
     showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
@@ -11154,7 +11885,8 @@ function PieChart({
       recharts.Tooltip,
       {
         contentStyle: tooltipStyle,
-        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle
       }
     ),
     showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
@@ -11204,7 +11936,8 @@ function AreaChart({
       recharts.Tooltip,
       {
         contentStyle: tooltipStyle,
-        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle
       }
     ),
     showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
@@ -11275,7 +12008,8 @@ function ScatterChart({
       recharts.Tooltip,
       {
         contentStyle: tooltipStyle,
-        labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 },
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle,
         cursor: { strokeDasharray: "3 3" }
       }
     ),
@@ -11333,7 +12067,8 @@ function RadarChart({
           recharts.Tooltip,
           {
             contentStyle: tooltipStyle,
-            labelStyle: { color: CHART_COLORS.foreground, fontWeight: 500 }
+            labelStyle: tooltipLabelStyle,
+            itemStyle: tooltipItemStyle
           }
         ),
         showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
@@ -11482,17 +12217,17 @@ function initializeTheme() {
   } catch {
   }
 }
-var ThemeContext = React50.createContext(void 0);
+var ThemeContext = React52.createContext(void 0);
 function ThemeProvider({
   children,
   defaultTheme = "default",
   defaultMode = "system",
   storageKey = "mvn-theme"
 }) {
-  const [theme, setThemeState] = React50.useState(defaultTheme);
-  const [mode, setModeState] = React50.useState(defaultMode);
-  const [resolvedMode, setResolvedMode] = React50.useState("light");
-  React50.useEffect(() => {
+  const [theme, setThemeState] = React52.useState(defaultTheme);
+  const [mode, setModeState] = React52.useState(defaultMode);
+  const [resolvedMode, setResolvedMode] = React52.useState("light");
+  React52.useEffect(() => {
     try {
       const savedTheme = localStorage.getItem(storageKey);
       const savedMode = localStorage.getItem(`${storageKey}-mode`);
@@ -11505,7 +12240,7 @@ function ThemeProvider({
     } catch {
     }
   }, [storageKey]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     const html = document.documentElement;
     for (const t of Object.keys(THEMES)) {
       if (t !== "default") {
@@ -11520,7 +12255,7 @@ function ThemeProvider({
     } catch {
     }
   }, [theme, storageKey]);
-  React50.useEffect(() => {
+  React52.useEffect(() => {
     const html = document.documentElement;
     const applyMode = (isDark) => {
       html.classList.toggle("dark", isDark);
@@ -11550,7 +12285,7 @@ function ThemeProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme2() {
-  const context = React50.useContext(ThemeContext);
+  const context = React52.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -11660,9 +12395,11 @@ exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.AvatarGroup = AvatarGroup;
 exports.AvatarImage = AvatarImage;
+exports.BREAKPOINTS = BREAKPOINTS;
 exports.Badge = Badge;
 exports.BarChart = BarChart;
 exports.Blockquote = Blockquote;
+exports.BottomNavigation = BottomNavigation;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -11797,6 +12534,8 @@ exports.MenubarSub = MenubarSub;
 exports.MenubarSubContent = MenubarSubContent;
 exports.MenubarSubTrigger = MenubarSubTrigger;
 exports.MenubarTrigger = MenubarTrigger;
+exports.MobileHeader = MobileHeader;
+exports.MobileNavigationProvider = MobileNavigationProvider;
 exports.Muted = Muted;
 exports.NavigationMenu = NavigationMenu;
 exports.NavigationMenuContent = NavigationMenuContent;
@@ -11946,12 +12685,14 @@ exports.numberRule = numberRule;
 exports.patternRule = patternRule;
 exports.progressVariants = progressVariants;
 exports.radioGroupVariants = radioGroupVariants;
+exports.radioItemVariants = radioItemVariants;
 exports.requiredRule = requiredRule;
 exports.separatorVariants = separatorVariants;
 exports.setMode = setMode;
 exports.setTheme = setTheme;
 exports.skeletonVariants = skeletonVariants;
 exports.spinnerVariants = spinnerVariants;
+exports.switchVariants = switchVariants;
 exports.tableVariants = tableVariants;
 exports.textareaVariants = textareaVariants;
 exports.toastVariants = toastVariants;
@@ -11959,9 +12700,16 @@ exports.toggleGroupVariants = toggleGroupVariants;
 exports.toggleVariants = toggleVariants;
 exports.tooltipStyle = tooltipStyle;
 exports.urlRule = urlRule;
+exports.useBreakpoint = useBreakpoint;
+exports.useBreakpointValue = useBreakpointValue;
 exports.useCarousel = useCarousel;
 exports.useForm = useForm;
+exports.useIsDesktop = useIsDesktop;
+exports.useIsMobile = useIsMobile;
+exports.useIsTablet = useIsTablet;
+exports.useMobileNav = useMobileNav;
 exports.useSidebar = useSidebar;
+exports.useSwipeActions = useSwipeActions;
 exports.useTheme = useTheme2;
 exports.useToast = useToast;
 exports.useWatch = useWatch;