@underverse-ui/underverse 0.2.9 → 0.2.11

package/dist/index.js

@@ -2532,90 +2532,216 @@ import { createPortal as createPortal3 } from "react-dom";
 
 // ../../lib/utils/shadcn-animations.ts
 var shadcnAnimationStyles = `
+  /* ============================================
+   * DROPDOWN / POPOVER ANIMATIONS
+   * Uses spring-like cubic-bezier for natural feel
+   * ============================================ */
+  
+  [data-state="open"][data-combobox-dropdown] {
+    animation: comboboxOpen 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    transform-origin: top center;
+  }
+  
+  [data-state="closed"][data-combobox-dropdown] {
+    animation: comboboxClose 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: top center;
+  }
+  
+  @keyframes comboboxOpen {
+    0% {
+      opacity: 0;
+      transform: translateY(-8px) scale(0.96);
+    }
+    50% {
+      opacity: 0.8;
+      transform: translateY(2px) scale(1.01);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  @keyframes comboboxClose {
+    0% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(-6px) scale(0.97);
+    }
+  }
+
+  /* Generic dropdown open/close */
   [data-state="open"] {
-    animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
+    animation: slideDownAndFade 220ms cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   [data-state="closed"] {
-    animation: slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    animation: slideUpAndFade 180ms cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   @keyframes slideDownAndFade {
     from {
       opacity: 0;
-      transform: translateY(-2px);
+      transform: translateY(-4px) scale(0.98);
     }
     to {
       opacity: 1;
-      transform: translateY(0);
+      transform: translateY(0) scale(1);
     }
   }
   
   @keyframes slideUpAndFade {
     from {
       opacity: 1;
-      transform: translateY(0);
+      transform: translateY(0) scale(1);
     }
     to {
       opacity: 0;
-      transform: translateY(-2px);
+      transform: translateY(-4px) scale(0.98);
     }
   }
   
+  /* ============================================
+   * DROPDOWN ITEMS - Staggered cascade effect
+   * ============================================ */
+  
   .dropdown-item {
     opacity: 0;
-    animation: fadeInUp 200ms ease-out forwards;
+    animation: itemSlideIn 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+    will-change: opacity, transform;
   }
   
-  @keyframes fadeInUp {
-    from {
+  @keyframes itemSlideIn {
+    0% {
       opacity: 0;
-      transform: translateY(4px);
+      transform: translateX(-8px);
     }
-    to {
+    60% {
+      opacity: 0.9;
+      transform: translateX(2px);
+    }
+    100% {
       opacity: 1;
-      transform: translateY(0);
+      transform: translateX(0);
     }
   }
   
-  /* Tooltip specific animations */
+  /* Hover effect for items */
+  .dropdown-item {
+    transition: background-color 150ms ease, transform 100ms ease;
+  }
+  
+  .dropdown-item:hover {
+    transform: translateX(2px);
+  }
+  
+  .dropdown-item:active {
+    transform: scale(0.98);
+  }
+  
+  /* ============================================
+   * TOOLTIP / SIDE ANIMATIONS
+   * ============================================ */
+  
   [data-side="top"] {
-    animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
+    animation: slideFromBottom 200ms cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   [data-side="bottom"] {
-    animation: slideUpAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
+    animation: slideFromTop 200ms cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   [data-side="left"] {
-    animation: slideRightAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
+    animation: slideFromRight 200ms cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   [data-side="right"] {
-    animation: slideLeftAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
+    animation: slideFromLeft 200ms cubic-bezier(0.16, 1, 0.3, 1);
   }
   
-  @keyframes slideLeftAndFade {
+  @keyframes slideFromTop {
     from {
       opacity: 0;
-      transform: translateX(2px);
+      transform: translateY(-6px) scale(0.96);
     }
     to {
       opacity: 1;
-      transform: translateX(0);
+      transform: translateY(0) scale(1);
     }
   }
   
-  @keyframes slideRightAndFade {
+  @keyframes slideFromBottom {
     from {
       opacity: 0;
-      transform: translateX(-2px);
+      transform: translateY(6px) scale(0.96);
     }
     to {
       opacity: 1;
-      transform: translateX(0);
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  @keyframes slideFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-6px) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+  }
+  
+  @keyframes slideFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(6px) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+  }
+  
+  /* ============================================
+   * UTILITY ANIMATIONS
+   * ============================================ */
+  
+  .animate-bounce-subtle {
+    animation: bounceSubtle 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  
+  @keyframes bounceSubtle {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-4px);
+    }
+  }
+  
+  .animate-scale-in {
+    animation: scaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
     }
   }
+  
+  /* Smooth backdrop blur transition */
+  .backdrop-animate {
+    transition: backdrop-filter 200ms ease, background-color 200ms ease;
+  }
 `;
 var useShadCNAnimations = () => {
   if (typeof document !== "undefined") {
@@ -3011,25 +3137,7 @@ var SidebarSheet = ({ navigation, children, ...props }) => {
 
 // ../../components/ui/Alert.tsx
 import { useState as useState12 } from "react";
-
-// ../../components/icons/AlertIcons.tsx
-import { Info as Info2, AlertTriangle as AlertTriangle3, CheckCircle2 as CheckCircle22, OctagonX } from "lucide-react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-function InfoIcon(props) {
-  return /* @__PURE__ */ jsx18(Info2, { "aria-hidden": true, className: props.className });
-}
-function WarningIcon(props) {
-  return /* @__PURE__ */ jsx18(AlertTriangle3, { "aria-hidden": true, className: props.className });
-}
-function CheckCircleIcon(props) {
-  return /* @__PURE__ */ jsx18(CheckCircle22, { "aria-hidden": true, className: props.className });
-}
-function ErrorIcon(props) {
-  return /* @__PURE__ */ jsx18(OctagonX, { "aria-hidden": true, className: props.className });
-}
-
-// ../../components/ui/Alert.tsx
-import { X as X6 } from "lucide-react";
+import { Info as Info2, AlertTriangle as AlertTriangle3, CheckCircle as CheckCircle3, XCircle, X as X6 } from "lucide-react";
 import { useTranslations as useTranslations2 } from "next-intl";
 
 // ../../lib/constants/constants-ui/alert.ts
@@ -3043,13 +3151,13 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // ../../components/ui/Alert.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var variantIcons = {
-  default: /* @__PURE__ */ jsx19(InfoIcon, { className: "h-4 w-4 text-muted-foreground" }),
-  info: /* @__PURE__ */ jsx19(InfoIcon, { className: "h-4 w-4 text-info" }),
-  success: /* @__PURE__ */ jsx19(CheckCircleIcon, { className: "h-4 w-4 text-success" }),
-  warning: /* @__PURE__ */ jsx19(WarningIcon, { className: "h-4 w-4 text-warning" }),
-  error: /* @__PURE__ */ jsx19(ErrorIcon, { className: "h-4 w-4 text-destructive" })
+  default: /* @__PURE__ */ jsx18(Info2, { className: "h-4 w-4 text-muted-foreground" }),
+  info: /* @__PURE__ */ jsx18(Info2, { className: "h-4 w-4 text-info" }),
+  success: /* @__PURE__ */ jsx18(CheckCircle3, { className: "h-4 w-4 text-success" }),
+  warning: /* @__PURE__ */ jsx18(AlertTriangle3, { className: "h-4 w-4 text-warning" }),
+  error: /* @__PURE__ */ jsx18(XCircle, { className: "h-4 w-4 text-destructive" })
 };
 var Alert = ({ title, description, variant = "default", className, icon, dismissible = false, onClose, actions, closeAriaLabel }) => {
   const [open, setOpen] = useState12(true);
@@ -3066,19 +3174,19 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
       role: "alert",
       "aria-live": variant === "error" ? "assertive" : "polite",
       children: [
-        /* @__PURE__ */ jsx19("div", { className: "pt-1", children: icon ?? variantIcons[variant] }),
+        /* @__PURE__ */ jsx18("div", { className: "pt-1", children: icon ?? variantIcons[variant] }),
         /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsx19("p", { className: "font-semibold text-sm leading-none mb-1 text-foreground", children: title }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description }) : /* @__PURE__ */ jsx19("div", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description })),
-          actions && /* @__PURE__ */ jsx19("div", { className: "mt-2 flex flex-wrap gap-2", children: actions })
+          title && /* @__PURE__ */ jsx18("p", { className: "font-semibold text-sm leading-none mb-1 text-foreground", children: title }),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description }) : /* @__PURE__ */ jsx18("div", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description })),
+          actions && /* @__PURE__ */ jsx18("div", { className: "mt-2 flex flex-wrap gap-2", children: actions })
         ] }),
-        dismissible && /* @__PURE__ */ jsx19(
+        dismissible && /* @__PURE__ */ jsx18(
           "button",
           {
             onClick: handleClose,
             className: "rounded-md p-1 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             "aria-label": closeAriaLabel || t("closeAlert"),
-            children: /* @__PURE__ */ jsx19(X6, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx18(X6, { className: "h-4 w-4" })
           }
         )
       ]
@@ -3134,7 +3242,7 @@ var loading = new LoadingManager();
 
 // ../../components/ui/GlobalLoading.tsx
 import { useTranslations as useTranslations3 } from "next-intl";
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var GlobalLoading = ({
   className,
   backdrop = true,
@@ -3147,7 +3255,7 @@ var GlobalLoading = ({
     return unsubscribe;
   }, []);
   if (!state.isVisible) return null;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: cn(
@@ -3160,8 +3268,8 @@ var GlobalLoading = ({
       "aria-modal": true,
       "aria-label": "Loading",
       children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-center space-x-3 backdrop-blur-sm rounded-lg px-6 py-4 shadow-lg", role: "status", "aria-live": "assertive", "aria-busy": true, children: [
-        /* @__PURE__ */ jsx20(Activity2, { className: "w-6 h-6 animate-spin text-primary-background", "aria-hidden": true }),
-        state.text && /* @__PURE__ */ jsx20("span", { className: "text-base font-medium text-foreground", children: state.text })
+        /* @__PURE__ */ jsx19(Activity2, { className: "w-6 h-6 animate-spin text-primary-background", "aria-hidden": true }),
+        state.text && /* @__PURE__ */ jsx19("span", { className: "text-base font-medium text-foreground", children: state.text })
       ] })
     }
   );
@@ -3172,14 +3280,14 @@ var PageLoading = ({
 }) => {
   const t = useTranslations3("Loading");
   const defaultMessage = message || t("loadingPage");
-  return /* @__PURE__ */ jsx20("div", { className: cn(
+  return /* @__PURE__ */ jsx19("div", { className: cn(
     "min-h-screen flex items-center justify-center bg-background",
     className
   ), children: /* @__PURE__ */ jsxs17("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ jsx20(Activity2, { className: "w-8 h-8 animate-spin text-primary mx-auto" }),
+    /* @__PURE__ */ jsx19(Activity2, { className: "w-8 h-8 animate-spin text-primary mx-auto" }),
     /* @__PURE__ */ jsxs17("div", { children: [
-      /* @__PURE__ */ jsx20("p", { className: "text-lg font-medium text-foreground", children: defaultMessage }),
-      /* @__PURE__ */ jsx20("p", { className: "text-sm text-muted-foreground mt-2", children: t("pleaseWait") })
+      /* @__PURE__ */ jsx19("p", { className: "text-lg font-medium text-foreground", children: defaultMessage }),
+      /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground mt-2", children: t("pleaseWait") })
     ] })
   ] }) });
 };
@@ -3196,8 +3304,8 @@ var InlineLoading = ({
     lg: "w-8 h-8"
   };
   return /* @__PURE__ */ jsxs17("div", { className: cn("flex items-center justify-center space-x-2", className), children: [
-    /* @__PURE__ */ jsx20(Activity2, { className: cn("animate-spin text-primary", sizeClasses2[size]) }),
-    text && /* @__PURE__ */ jsx20("span", { className: "text-sm text-muted-foreground animate-pulse", children: text })
+    /* @__PURE__ */ jsx19(Activity2, { className: cn("animate-spin text-primary", sizeClasses2[size]) }),
+    text && /* @__PURE__ */ jsx19("span", { className: "text-sm text-muted-foreground animate-pulse", children: text })
   ] });
 };
 var ButtonLoading = ({
@@ -3221,10 +3329,10 @@ var ButtonLoading = ({
       ),
       children: [
         isLoading && /* @__PURE__ */ jsxs17("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: [
-          /* @__PURE__ */ jsx20(Activity2, { className: "w-4 h-4 animate-spin text-primary-foreground" }),
-          loadingText && /* @__PURE__ */ jsx20("span", { className: "ml-2 text-sm", children: loadingText })
+          /* @__PURE__ */ jsx19(Activity2, { className: "w-4 h-4 animate-spin text-primary-foreground" }),
+          loadingText && /* @__PURE__ */ jsx19("span", { className: "ml-2 text-sm", children: loadingText })
         ] }),
-        /* @__PURE__ */ jsx20("div", { className: cn(isLoading && "opacity-50 pointer-events-none"), children: child })
+        /* @__PURE__ */ jsx19("div", { className: cn(isLoading && "opacity-50 pointer-events-none"), children: child })
       ]
     }
   );
@@ -3234,7 +3342,7 @@ var ButtonLoading = ({
 import * as React15 from "react";
 import Link from "next/link";
 import { ChevronRight, Home, MoreHorizontal } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var sizeStyles5 = {
   sm: {
     text: "text-xs",
@@ -3281,16 +3389,16 @@ var Breadcrumb = ({
   }, [items.length, maxItems, collapsible]);
   const getSeparator = () => {
     if (typeof separator === "string") {
-      return /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: separator });
+      return /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground", children: separator });
     }
     if (variant === "slash") {
-      return /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "/" });
+      return /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground", children: "/" });
     }
     if (variant === "arrow") {
-      return /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "\u2192" });
+      return /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground", children: "\u2192" });
     }
     const SeparatorComponent = separator;
-    return /* @__PURE__ */ jsx21(SeparatorComponent, { className: cn("text-muted-foreground", sizeStyles5[size].icon) });
+    return /* @__PURE__ */ jsx20(SeparatorComponent, { className: cn("text-muted-foreground", sizeStyles5[size].icon) });
   };
   const processedItems = React15.useMemo(() => {
     let finalItems = [...items];
@@ -3311,17 +3419,17 @@ var Breadcrumb = ({
   const handleCollapseToggle = () => {
     setIsCollapsed(!isCollapsed);
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx20(
     "nav",
     {
       className: cn("flex w-full items-center", sizeStyles5[size].text, className),
       "aria-label": "Breadcrumb navigation",
-      children: /* @__PURE__ */ jsx21("ol", { className: cn("flex items-center", sizeStyles5[size].spacing), children: processedItems.map((item, index) => {
+      children: /* @__PURE__ */ jsx20("ol", { className: cn("flex items-center", sizeStyles5[size].spacing), children: processedItems.map((item, index) => {
         const isLast = index === processedItems.length - 1;
         const isCollapsedIndicator = item.label === "...";
         const Icon = item.icon;
         return /* @__PURE__ */ jsxs18("li", { className: "flex items-center", children: [
-          isCollapsedIndicator ? /* @__PURE__ */ jsx21(
+          isCollapsedIndicator ? /* @__PURE__ */ jsx20(
             "button",
             {
               onClick: handleCollapseToggle,
@@ -3332,7 +3440,7 @@ var Breadcrumb = ({
                 "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
               ),
               "aria-label": "Show all breadcrumb items",
-              children: /* @__PURE__ */ jsx21(MoreHorizontal, { className: sizeStyles5[size].icon })
+              children: /* @__PURE__ */ jsx20(MoreHorizontal, { className: sizeStyles5[size].icon })
             }
           ) : item.href && !isLast && !item.disabled ? /* @__PURE__ */ jsxs18(
             Link,
@@ -3345,8 +3453,8 @@ var Breadcrumb = ({
                 "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm"
               ),
               children: [
-                Icon && /* @__PURE__ */ jsx21(Icon, { className: sizeStyles5[size].icon }),
-                /* @__PURE__ */ jsx21("span", { children: item.label })
+                Icon && /* @__PURE__ */ jsx20(Icon, { className: sizeStyles5[size].icon }),
+                /* @__PURE__ */ jsx20("span", { children: item.label })
               ]
             }
           ) : /* @__PURE__ */ jsxs18(
@@ -3359,12 +3467,12 @@ var Breadcrumb = ({
               ),
               "aria-current": isLast ? "page" : void 0,
               children: [
-                Icon && /* @__PURE__ */ jsx21(Icon, { className: sizeStyles5[size].icon }),
-                /* @__PURE__ */ jsx21("span", { children: item.label })
+                Icon && /* @__PURE__ */ jsx20(Icon, { className: sizeStyles5[size].icon }),
+                /* @__PURE__ */ jsx20("span", { children: item.label })
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ jsx21(
+          !isLast && /* @__PURE__ */ jsx20(
             "span",
             {
               className: cn("mx-1", sizeStyles5[size].spacing),
@@ -3382,7 +3490,7 @@ var Breadcrumb_default = Breadcrumb;
 
 // ../../components/ui/Tab.tsx
 import * as React16 from "react";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var sizeStyles6 = {
   sm: {
     tab: "py-1.5 px-3 text-xs",
@@ -3529,14 +3637,14 @@ var Tabs = ({
               }
             },
             children: [
-              Icon && /* @__PURE__ */ jsx22(Icon, { className: "h-4 w-4" }),
+              Icon && /* @__PURE__ */ jsx21(Icon, { className: "h-4 w-4" }),
               tab.label
             ]
           },
           tab.value
         );
       }),
-      variant === "underline" && orientation === "horizontal" && /* @__PURE__ */ jsx22(
+      variant === "underline" && orientation === "horizontal" && /* @__PURE__ */ jsx21(
         "div",
         {
           className: "absolute bottom-0 h-0.5 bg-primary transition-all duration-300 ease-out",
@@ -3544,7 +3652,7 @@ var Tabs = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx21(
       "div",
       {
         role: "tabpanel",
@@ -3562,7 +3670,7 @@ var Tabs = ({
   ] });
 };
 var SimpleTabs = ({ tabs, defaultValue, className }) => {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     Tabs,
     {
       tabs,
@@ -3574,7 +3682,7 @@ var SimpleTabs = ({ tabs, defaultValue, className }) => {
   );
 };
 var PillTabs = ({ contained = true, ...props }) => {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     Tabs,
     {
       ...props,
@@ -3588,7 +3696,7 @@ var VerticalTabs = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx22("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ jsx22("div", { className: cn(sidebarWidth, "flex-shrink-0"), children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ jsx21("div", { className: cn(sidebarWidth, "flex-shrink-0"), children: /* @__PURE__ */ jsx21(
     Tabs,
     {
       ...props,
@@ -3602,7 +3710,7 @@ var VerticalTabs = ({
 // ../../components/ui/DropdownMenu.tsx
 import React17, { useState as useState16 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var DropdownMenu = ({
   trigger,
   children,
@@ -3724,28 +3832,24 @@ var DropdownMenu = ({
       setOpen(false);
     }
   };
-  const dropdownContent = open ? /* @__PURE__ */ jsx23(
+  const dropdownContent = open ? /* @__PURE__ */ jsx22(
     "div",
     {
       "data-dropdown-menu": true,
+      "data-combobox-dropdown": true,
       ref: contentRef,
       style: {
         position: "absolute",
         top: position?.top ?? -9999,
         left: position?.left ?? -9999,
         zIndex: 9999,
-        visibility: position ? "visible" : "hidden"
+        visibility: position ? "visible" : "hidden",
+        transformOrigin: "top center"
       },
       "data-state": open ? "open" : "closed",
       role: "menu",
-      className: cn(
-        "z-[9999] min-w-40",
-        // shadcn-like enter/exit animations
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        className
-      ),
-      children: /* @__PURE__ */ jsx23(
+      className: cn("z-9999 min-w-40", className),
+      children: /* @__PURE__ */ jsx22(
         "div",
         {
           className: cn(
@@ -3766,7 +3870,7 @@ var DropdownMenu = ({
                 role: "menuitem",
                 tabIndex: -1,
                 style: {
-                  animationDelay: open ? `${index * 25}ms` : "0ms"
+                  animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
                 },
                 className: cn(
                   "dropdown-item flex w-full items-center gap-2 px-2.5 py-1.5 text-sm rounded-sm",
@@ -3777,7 +3881,7 @@ var DropdownMenu = ({
                   item.destructive && "text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
                 ),
                 children: [
-                  IconComponent && /* @__PURE__ */ jsx23(IconComponent, { className: "h-4 w-4" }),
+                  IconComponent && /* @__PURE__ */ jsx22(IconComponent, { className: "h-4 w-4" }),
                   item.label
                 ]
               },
@@ -3804,7 +3908,7 @@ var DropdownMenu = ({
     dropdownContent && typeof window !== "undefined" && createPortal5(dropdownContent, document.body)
   ] });
 };
-var DropdownMenuItem = ({ children, onClick, disabled, destructive, className }) => /* @__PURE__ */ jsx23(
+var DropdownMenuItem = ({ children, onClick, disabled, destructive, className }) => /* @__PURE__ */ jsx22(
   "button",
   {
     onClick,
@@ -3820,8 +3924,8 @@ var DropdownMenuItem = ({ children, onClick, disabled, destructive, className })
     children
   }
 );
-var DropdownMenuSeparator = ({ className }) => /* @__PURE__ */ jsx23("div", { className: cn("h-px bg-border my-1", className) });
-var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className }) => /* @__PURE__ */ jsx23(
+var DropdownMenuSeparator = ({ className }) => /* @__PURE__ */ jsx22("div", { className: cn("h-px bg-border my-1", className) });
+var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className }) => /* @__PURE__ */ jsx22(
   DropdownMenu,
   {
     trigger: /* @__PURE__ */ jsxs20(
@@ -3834,8 +3938,8 @@ var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", cla
           className
         ),
         children: [
-          /* @__PURE__ */ jsx23("span", { className: "truncate max-w-[16rem] text-foreground/90", children: value || placeholder }),
-          /* @__PURE__ */ jsx23("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "opacity-70", children: /* @__PURE__ */ jsx23("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          /* @__PURE__ */ jsx22("span", { className: "truncate max-w-64 text-foreground/90", children: value || placeholder }),
+          /* @__PURE__ */ jsx22("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "opacity-70", children: /* @__PURE__ */ jsx22("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
         ]
       }
     ),
@@ -3856,7 +3960,7 @@ import * as React18 from "react";
 import { useId as useId2 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { ChevronDown, Search as Search2, SearchX, Check as Check3, X as X7, Loader2 as Loader22 } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var getOptionLabel = (option) => {
   return typeof option === "string" ? option : option.label;
 };
@@ -3973,7 +4077,7 @@ var Combobox = ({
   }, [open, enableSearch]);
   const selectedOption = findOptionByValue(options, value);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
-  const dropdownContent = /* @__PURE__ */ jsx24(
+  const dropdownContent = /* @__PURE__ */ jsx23(
     "div",
     {
       "data-combobox-dropdown": true,
@@ -3983,20 +4087,17 @@ var Combobox = ({
         top: dropdownPosition?.top || 0,
         left: dropdownPosition?.left || 0,
         width: dropdownPosition?.width || 200,
-        zIndex: 9999
+        zIndex: 9999,
+        transformOrigin: "top center"
       },
       "data-state": open ? "open" : "closed",
       role: "listbox",
       id: `${resolvedId}-listbox`,
-      className: cn(
-        "z-[9999]",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-      ),
+      className: "z-9999",
       children: /* @__PURE__ */ jsxs21("div", { className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"), children: [
         enableSearch && /* @__PURE__ */ jsxs21("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
-          /* @__PURE__ */ jsx24(Search2, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(Search2, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
+          /* @__PURE__ */ jsx23(
             "input",
             {
               ref: inputRef,
@@ -4035,9 +4136,9 @@ var Combobox = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx24("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx24("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ jsx24("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-          /* @__PURE__ */ jsx24(Loader22, { className: "h-6 w-6 animate-spin text-primary" }),
-          /* @__PURE__ */ jsx24("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading..." })
+        /* @__PURE__ */ jsx23("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ jsx23("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ jsx23("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ jsx23(Loader22, { className: "h-6 w-6 animate-spin text-primary" }),
+          /* @__PURE__ */ jsx23("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading..." })
         ] }) }) : filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
           const itemValue = getOptionValue(item);
           const itemLabel = getOptionLabel(item);
@@ -4054,7 +4155,7 @@ var Combobox = ({
               "aria-selected": isSelected,
               onClick: () => handleSelect(item),
               style: {
-                animationDelay: open ? `${index * 25}ms` : "0ms"
+                animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
               },
               className: cn(
                 "dropdown-item group flex cursor-pointer items-center justify-between rounded-sm px-2.5 py-1.5 text-sm",
@@ -4066,24 +4167,16 @@ var Combobox = ({
                 isSelected && "bg-accent text-accent-foreground"
               ),
               children: [
-                /* @__PURE__ */ jsx24("span", { className: "truncate", children: itemLabel }),
-                isSelected && /* @__PURE__ */ jsx24(Check3, { className: "h-4 w-4 text-primary" })
+                /* @__PURE__ */ jsx23("span", { className: "truncate", children: itemLabel }),
+                isSelected && /* @__PURE__ */ jsx23(Check3, { className: "h-4 w-4 text-primary" })
               ]
             },
             `${itemValue}-${index}`
           );
-        }) : /* @__PURE__ */ jsx24("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-          /* @__PURE__ */ jsx24(SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
-          /* @__PURE__ */ jsx24("span", { className: "text-sm", children: emptyText }),
-          query && /* @__PURE__ */ jsx24(
-            "button",
-            {
-              type: "button",
-              onClick: () => setQuery(""),
-              className: "text-xs text-primary hover:underline",
-              children: "Clear search"
-            }
-          )
+        }) : /* @__PURE__ */ jsx23("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ jsx23(SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+          /* @__PURE__ */ jsx23("span", { className: "text-sm", children: emptyText }),
+          query && /* @__PURE__ */ jsx23("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
         ] }) }) }) })
       ] })
     }
@@ -4098,7 +4191,7 @@ var Combobox = ({
   const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
   return /* @__PURE__ */ jsxs21("div", { className: cn("w-full group", verticalGap), children: [
-    label && /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs21(
+    label && /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs21(
       "label",
       {
         id: labelId,
@@ -4110,7 +4203,7 @@ var Combobox = ({
         ),
         children: [
           label,
-          required && /* @__PURE__ */ jsx24("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx23("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ) }),
@@ -4144,10 +4237,10 @@ var Combobox = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx24("span", { className: cn("truncate", !displayValue && "text-muted-foreground", fontBold && "font-bold"), children: displayValue || placeholder }),
+          /* @__PURE__ */ jsx23("span", { className: cn("truncate", !displayValue && "text-muted-foreground", fontBold && "font-bold"), children: displayValue || placeholder }),
           /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 ml-2", children: [
             allowClear && value && !disabled && // FIX: Use a div instead of a nested button
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx23(
               "div",
               {
                 role: "button",
@@ -4156,18 +4249,10 @@ var Combobox = ({
                 onClick: handleClear,
                 onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleClear(e),
                 className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
-                children: /* @__PURE__ */ jsx24(X7, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ jsx23(X7, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ jsx24(
-              ChevronDown,
-              {
-                className: cn(
-                  "h-4 w-4 text-muted-foreground transition-all duration-200",
-                  open && "rotate-180 scale-110 text-primary"
-                )
-              }
-            )
+            /* @__PURE__ */ jsx23(ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-all duration-200", open && "rotate-180 scale-110 text-primary") })
           ] })
         ]
       }
@@ -4178,7 +4263,7 @@ var Combobox = ({
 
 // ../../components/ui/Pagination.tsx
 import { useTranslations as useTranslations4 } from "next-intl";
-import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var Pagination = ({
   page,
   totalPages,
@@ -4262,12 +4347,12 @@ var Pagination = ({
   };
   if (totalPages <= 1) return null;
   return /* @__PURE__ */ jsxs22("nav", { className: cn("flex flex-col gap-4", className), "aria-label": labels?.navigationLabel || t("navigationLabel"), children: [
-    showInfo && totalItems && /* @__PURE__ */ jsx25("div", { className: cn("text-sm text-muted-foreground", textAlignmentClass), children: labels?.showingResults ? labels.showingResults({ startItem: startItem || 0, endItem: endItem || 0, totalItems }) : t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
+    showInfo && totalItems && /* @__PURE__ */ jsx24("div", { className: cn("text-sm text-muted-foreground", textAlignmentClass), children: labels?.showingResults ? labels.showingResults({ startItem: startItem || 0, endItem: endItem || 0, totalItems }) : t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
     /* @__PURE__ */ jsxs22("div", { className: cn("flex items-center justify-between", {
       "flex-row-reverse": alignment === "right" || alignment === "center"
     }), children: [
       /* @__PURE__ */ jsxs22("div", { className: cn("flex items-center gap-1"), children: [
-        showFirstLast && /* @__PURE__ */ jsx25(
+        showFirstLast && /* @__PURE__ */ jsx24(
           Button_default,
           {
             variant: getButtonVariant(false),
@@ -4281,7 +4366,7 @@ var Pagination = ({
             "aria-disabled": disabled || page === 1
           }
         ),
-        showPrevNext && /* @__PURE__ */ jsx25(
+        showPrevNext && /* @__PURE__ */ jsx24(
           Button_default,
           {
             variant: getButtonVariant(false),
@@ -4292,16 +4377,16 @@ var Pagination = ({
             title: labels?.previousPage || t("previousPage"),
             "aria-label": labels?.previousPage || t("previousPage"),
             "aria-disabled": disabled || page === 1,
-            children: /* @__PURE__ */ jsx25("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
+            children: /* @__PURE__ */ jsx24("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
           }
         ),
         showPageNumbers && createPageArray().map((p, i) => {
           if (p === "...") {
-            return /* @__PURE__ */ jsx25(Button_default, { variant: "ghost", size, disabled: true, icon: MoreHorizontal2, className: "cursor-default" }, i);
+            return /* @__PURE__ */ jsx24(Button_default, { variant: "ghost", size, disabled: true, icon: MoreHorizontal2, className: "cursor-default" }, i);
           }
           const pageNumber = p;
           const isActive = page === pageNumber;
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx24(
             Button_default,
             {
               variant: getButtonVariant(isActive),
@@ -4316,7 +4401,7 @@ var Pagination = ({
             i
           );
         }),
-        showPrevNext && /* @__PURE__ */ jsx25(
+        showPrevNext && /* @__PURE__ */ jsx24(
           Button_default,
           {
             variant: getButtonVariant(false),
@@ -4327,10 +4412,10 @@ var Pagination = ({
             title: labels?.nextPage || t("nextPage"),
             "aria-label": labels?.nextPage || t("nextPage"),
             "aria-disabled": disabled || page === totalPages,
-            children: /* @__PURE__ */ jsx25("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
+            children: /* @__PURE__ */ jsx24("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
           }
         ),
-        showFirstLast && /* @__PURE__ */ jsx25(
+        showFirstLast && /* @__PURE__ */ jsx24(
           Button_default,
           {
             variant: getButtonVariant(false),
@@ -4350,7 +4435,7 @@ var Pagination = ({
           labels?.itemsPerPage || t("itemsPerPage"),
           ":"
         ] }),
-        /* @__PURE__ */ jsx25("div", { className: "w-20", children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24("div", { className: "w-20", children: /* @__PURE__ */ jsx24(
           Combobox,
           {
             options: pageSizeOptionsStrings,
@@ -4390,14 +4475,14 @@ var SimplePagination = ({
       " total items)"
     ] }),
     /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx25(Button_default, { variant, size, icon: ChevronLeft, onClick: () => onChange(Math.max(1, page - 1)), disabled: disabled || page === 1, children: "Previous" }),
+      /* @__PURE__ */ jsx24(Button_default, { variant, size, icon: ChevronLeft, onClick: () => onChange(Math.max(1, page - 1)), disabled: disabled || page === 1, children: "Previous" }),
       /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx25("span", { children: "Page" }),
-        /* @__PURE__ */ jsx25("span", { className: "font-medium text-foreground", children: page }),
-        /* @__PURE__ */ jsx25("span", { children: "of" }),
-        /* @__PURE__ */ jsx25("span", { className: "font-medium text-foreground", children: totalPages })
+        /* @__PURE__ */ jsx24("span", { children: "Page" }),
+        /* @__PURE__ */ jsx24("span", { className: "font-medium text-foreground", children: page }),
+        /* @__PURE__ */ jsx24("span", { children: "of" }),
+        /* @__PURE__ */ jsx24("span", { className: "font-medium text-foreground", children: totalPages })
       ] }),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24(
         Button_default,
         {
           variant,
@@ -4421,7 +4506,7 @@ var CompactPagination = ({
 }) => {
   if (totalPages <= 1) return null;
   return /* @__PURE__ */ jsxs22("nav", { className: cn("flex items-center gap-1", className), "aria-label": "Compact Pagination", children: [
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx24(
       Button_default,
       {
         variant,
@@ -4433,7 +4518,7 @@ var CompactPagination = ({
         "aria-label": "First page"
       }
     ),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx24(
       Button_default,
       {
         variant,
@@ -4449,7 +4534,7 @@ var CompactPagination = ({
       " / ",
       totalPages
     ] }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx24(
       Button_default,
       {
         variant,
@@ -4460,7 +4545,7 @@ var CompactPagination = ({
         title: "Next page"
       }
     ),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx24(
       Button_default,
       {
         variant,
@@ -4476,7 +4561,7 @@ var CompactPagination = ({
 
 // ../../components/ui/Section.tsx
 import React20 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Section = React20.forwardRef(
   ({
     children,
@@ -4499,7 +4584,7 @@ var Section = React20.forwardRef(
       lg: "py-12",
       xl: "py-16"
     };
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx25(
       "section",
       {
         ref,
@@ -4521,9 +4606,9 @@ var Section_default = Section;
 
 // ../../components/ui/ScrollArea.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ScrollArea = forwardRef6(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx27("div", { ref, className: cn("relative overflow-hidden bg-background", className), ...props, children: /* @__PURE__ */ jsx27("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport"), children }) });
+  return /* @__PURE__ */ jsx26("div", { ref, className: cn("relative overflow-hidden bg-background", className), ...props, children: /* @__PURE__ */ jsx26("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport"), children }) });
 });
 ScrollArea.displayName = "ScrollArea";
 
@@ -4714,7 +4799,7 @@ function formatDateWithDay(date) {
 }
 
 // ../../components/ui/DatePicker.tsx
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var DatePicker = ({
   id,
   value,
@@ -4825,7 +4910,7 @@ var DatePicker = ({
     const firstDayOfMonth = getFirstDayOfMonth(viewDate);
     const days = [];
     for (let i = 0; i < firstDayOfMonth; i++) {
-      days.push(/* @__PURE__ */ jsx28("div", { className: "w-8 h-8" }, `empty-${i}`));
+      days.push(/* @__PURE__ */ jsx27("div", { className: "w-8 h-8" }, `empty-${i}`));
     }
     for (let day = 1; day <= daysInMonth; day++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
@@ -4834,7 +4919,7 @@ var DatePicker = ({
       const totalDaysFromStart = firstDayOfMonth + day - 1;
       const rowIndex = Math.floor(totalDaysFromStart / 7);
       days.push(
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27(
           "button",
           {
             onClick: () => handleDateSelect(date),
@@ -4856,7 +4941,7 @@ var DatePicker = ({
     }
     return days;
   };
-  const datePickerContent = isOpen && dropdownPosition ? /* @__PURE__ */ jsx28(
+  const datePickerContent = isOpen && dropdownPosition ? /* @__PURE__ */ jsx27(
     "div",
     {
       "data-datepicker": true,
@@ -4886,13 +4971,13 @@ var DatePicker = ({
           style: { pointerEvents: "auto" },
           children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between mb-4", children: [
-              /* @__PURE__ */ jsx28(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ jsx28(ChevronLeft2, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsx28("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
-              /* @__PURE__ */ jsx28(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ jsx28(ChevronRight3, { className: "h-4 w-4" }) })
+              /* @__PURE__ */ jsx27(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ jsx27(ChevronLeft2, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx27("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
+              /* @__PURE__ */ jsx27(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ jsx27(ChevronRight3, { className: "h-4 w-4" }) })
             ] }),
-            /* @__PURE__ */ jsx28("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ jsx28("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)) }),
-            /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
-            /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx27("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ jsx27("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)) }),
+            /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
+            /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ jsx27(
               Button_default,
               {
                 variant: "outline",
@@ -4917,7 +5002,7 @@ var DatePicker = ({
   const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
   return /* @__PURE__ */ jsxs23("div", { className: cn("w-full group", verticalGap), children: [
-    label && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs23(
+    label && /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs23(
       "label",
       {
         id: labelId,
@@ -4929,7 +5014,7 @@ var DatePicker = ({
         ),
         children: [
           label,
-          required && /* @__PURE__ */ jsx28("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx27("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ) }),
@@ -4961,8 +5046,8 @@ var DatePicker = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx28("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? formatDateDisplay(value) : placeholder || t("placeholder") }),
-          value && /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx27("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? formatDateDisplay(value) : placeholder || t("placeholder") }),
+          value && /* @__PURE__ */ jsx27(
             "span",
             {
               role: "button",
@@ -4984,10 +5069,10 @@ var DatePicker = ({
               },
               className: "absolute right-8 inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer",
               style: { width: 20, height: 20 },
-              children: /* @__PURE__ */ jsx28(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx27(XIcon, { className: "h-3.5 w-3.5" })
             }
           ),
-          /* @__PURE__ */ jsx28(Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
+          /* @__PURE__ */ jsx27(Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
         ]
       }
     ),
@@ -5072,7 +5157,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     const nodes = [];
     const daysInMonth = getDaysInMonth(viewDate);
     const firstDay = getFirstDayOfMonth(viewDate);
-    for (let i = 0; i < firstDay; i++) nodes.push(/* @__PURE__ */ jsx28("div", { className: "w-8 h-8" }, `e-${i}`));
+    for (let i = 0; i < firstDay; i++) nodes.push(/* @__PURE__ */ jsx27("div", { className: "w-8 h-8" }, `e-${i}`));
     for (let d = 1; d <= daysInMonth; d++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
       const isSelectedStart = isSameDay2(date, tempStart);
@@ -5097,7 +5182,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         }
       }
       nodes.push(
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx27(
           "button",
           {
             onClick: () => handleSelect(date),
@@ -5127,7 +5212,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     }
     return nodes;
   };
-  const panel = isOpen && dropdownPosition ? /* @__PURE__ */ jsx28(
+  const panel = isOpen && dropdownPosition ? /* @__PURE__ */ jsx27(
     "div",
     {
       style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width || 256, zIndex: 9999 },
@@ -5144,30 +5229,30 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
           className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60 p-4 w-64"),
           children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between mb-3", children: [
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx27(
                 Button_default,
                 {
                   variant: "ghost",
                   size: "sm",
                   onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)),
                   className: "p-1 h-auto",
-                  children: /* @__PURE__ */ jsx28(ChevronLeft2, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx27(ChevronLeft2, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ jsx28("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx27("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
+              /* @__PURE__ */ jsx27(
                 Button_default,
                 {
                   variant: "ghost",
                   size: "sm",
                   onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)),
                   className: "p-1 h-auto",
-                  children: /* @__PURE__ */ jsx28(ChevronRight3, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx27(ChevronRight3, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx28("div", { className: "text-xs text-muted-foreground text-center py-1 font-medium", children: d }, d)) }),
-            /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-7", children: renderGrid() })
+            /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx27("div", { className: "text-xs text-muted-foreground text-center py-1 font-medium", children: d }, d)) }),
+            /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-7", children: renderGrid() })
           ]
         }
       )
@@ -5195,8 +5280,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
           className
         ),
         children: [
-          /* @__PURE__ */ jsx28("span", { className: cn("truncate", !tempStart && !tempEnd && "text-muted-foreground"), children: label }),
-          /* @__PURE__ */ jsx28(Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
+          /* @__PURE__ */ jsx27("span", { className: cn("truncate", !tempStart && !tempEnd && "text-muted-foreground"), children: label }),
+          /* @__PURE__ */ jsx27(Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
         ]
       }
     ),
@@ -5207,7 +5292,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
 // ../../components/ui/TimePicker.tsx
 import * as React22 from "react";
 import { Clock as Clock2, X as X8, Check as Check4 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var pad = (n) => n.toString().padStart(2, "0");
 function parseTime(input, fmt = "24", includeSeconds) {
   if (!input) return null;
@@ -5475,16 +5560,16 @@ function TimePicker({
       ),
       children: [
         /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx29(Clock2, { className: cn(sz.icon, error ? "text-destructive" : success ? "text-green-500" : "text-muted-foreground") }),
-          /* @__PURE__ */ jsx29("span", { className: cn("truncate", !value && !defaultValue && "text-muted-foreground"), children: value || defaultValue ? display : placeholder })
+          /* @__PURE__ */ jsx28(Clock2, { className: cn(sz.icon, error ? "text-destructive" : success ? "text-green-500" : "text-muted-foreground") }),
+          /* @__PURE__ */ jsx28("span", { className: cn("truncate", !value && !defaultValue && "text-muted-foreground"), children: value || defaultValue ? display : placeholder })
         ] }),
-        /* @__PURE__ */ jsx29("span", { className: cn("ml-2 transition-transform duration-200", open && "rotate-180"), children: /* @__PURE__ */ jsx29("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
+        /* @__PURE__ */ jsx28("span", { className: cn("ml-2 transition-transform duration-200", open && "rotate-180"), children: /* @__PURE__ */ jsx28("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
       ]
     }
   );
   const contentWidth = variant === "compact" ? 240 : variant === "inline" ? 320 : includeSeconds ? 340 : 300;
   const timePickerContent = /* @__PURE__ */ jsxs24("div", { className: "space-y-3", children: [
-    allowManualInput && /* @__PURE__ */ jsx29("div", { children: /* @__PURE__ */ jsx29(
+    allowManualInput && /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28(
       Input_default,
       {
         placeholder: format === "12" ? "02:30 PM" : "14:30",
@@ -5494,7 +5579,7 @@ function TimePicker({
         variant: "outlined"
       }
     ) }),
-    showPresets && /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-2 gap-2", children: Object.keys(PRESETS).map((preset) => /* @__PURE__ */ jsx29(
+    showPresets && /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: Object.keys(PRESETS).map((preset) => /* @__PURE__ */ jsx28(
       "button",
       {
         type: "button",
@@ -5508,7 +5593,7 @@ function TimePicker({
       },
       preset
     )) }),
-    customPresets && customPresets.length > 0 && /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-2 gap-2", children: customPresets.map((preset, idx) => /* @__PURE__ */ jsx29(
+    customPresets && customPresets.length > 0 && /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-2 gap-2", children: customPresets.map((preset, idx) => /* @__PURE__ */ jsx28(
       "button",
       {
         type: "button",
@@ -5524,8 +5609,8 @@ function TimePicker({
     )) }),
     /* @__PURE__ */ jsxs24("div", { className: "flex gap-3", children: [
       /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[70px]", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Hour" }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx28("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Hour" }),
+        /* @__PURE__ */ jsx28(
           "div",
           {
             ref: hourScrollRef,
@@ -5537,7 +5622,7 @@ function TimePicker({
             onFocus: () => setFocusedColumn("hour"),
             children: hours.map((h) => {
               const isSelected = format === "24" && parts.h === h || format === "12" && (parts.h % 12 || 12) === (h % 12 || 12);
-              return /* @__PURE__ */ jsx29(
+              return /* @__PURE__ */ jsx28(
                 "button",
                 {
                   type: "button",
@@ -5564,10 +5649,10 @@ function TimePicker({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx29("div", { className: "w-px bg-border/50 self-stretch my-8" }),
+      /* @__PURE__ */ jsx28("div", { className: "w-px bg-border/50 self-stretch my-8" }),
       /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[70px]", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Min" }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx28("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Min" }),
+        /* @__PURE__ */ jsx28(
           "div",
           {
             ref: minuteScrollRef,
@@ -5579,7 +5664,7 @@ function TimePicker({
             onFocus: () => setFocusedColumn("minute"),
             children: minutes.map((m) => {
               const isSelected = parts.m === m;
-              return /* @__PURE__ */ jsx29(
+              return /* @__PURE__ */ jsx28(
                 "button",
                 {
                   type: "button",
@@ -5605,11 +5690,11 @@ function TimePicker({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx29("div", { className: "w-px bg-border/50 self-stretch my-8" }),
+      /* @__PURE__ */ jsx28("div", { className: "w-px bg-border/50 self-stretch my-8" }),
       includeSeconds && /* @__PURE__ */ jsxs24(Fragment7, { children: [
         /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-w-[70px]", children: [
-          /* @__PURE__ */ jsx29("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Sec" }),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx28("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Sec" }),
+          /* @__PURE__ */ jsx28(
             "div",
             {
               ref: secondScrollRef,
@@ -5621,7 +5706,7 @@ function TimePicker({
               onFocus: () => setFocusedColumn("second"),
               children: seconds.map((s) => {
                 const isSelected = parts.s === s;
-                return /* @__PURE__ */ jsx29(
+                return /* @__PURE__ */ jsx28(
                   "button",
                   {
                     type: "button",
@@ -5647,11 +5732,11 @@ function TimePicker({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx29("div", { className: "w-px bg-border/50 self-stretch my-8" })
+        /* @__PURE__ */ jsx28("div", { className: "w-px bg-border/50 self-stretch my-8" })
       ] }),
       format === "12" && /* @__PURE__ */ jsxs24("div", { className: "w-20", children: [
-        /* @__PURE__ */ jsx29("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Period" }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx28("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Period" }),
+        /* @__PURE__ */ jsx28(
           "div",
           {
             className: "flex flex-col gap-2",
@@ -5662,7 +5747,7 @@ function TimePicker({
             onFocus: () => setFocusedColumn("period"),
             children: ["AM", "PM"].map((p) => {
               const isSelected = parts.p === p;
-              return /* @__PURE__ */ jsx29(
+              return /* @__PURE__ */ jsx28(
                 "button",
                 {
                   type: "button",
@@ -5708,12 +5793,12 @@ function TimePicker({
           },
           "aria-label": "Set current time",
           children: [
-            /* @__PURE__ */ jsx29(Clock2, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx28(Clock2, { className: "w-3.5 h-3.5" }),
             "Now"
           ]
         }
       ),
-      /* @__PURE__ */ jsx29("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx28("div", { className: "flex-1" }),
       clearable && /* @__PURE__ */ jsxs24(
         "button",
         {
@@ -5729,7 +5814,7 @@ function TimePicker({
           },
           "aria-label": "Clear selected time",
           children: [
-            /* @__PURE__ */ jsx29(X8, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx28(X8, { className: "w-3.5 h-3.5" }),
             "Clear"
           ]
         }
@@ -5738,26 +5823,26 @@ function TimePicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ jsxs24("div", { className: "w-full", ...rest, children: [
-      label && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs24("label", { className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground"), children: [
+      label && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs24("label", { className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground"), children: [
         label,
-        required && /* @__PURE__ */ jsx29("span", { className: "text-destructive ml-1", children: "*" })
+        required && /* @__PURE__ */ jsx28("span", { className: "text-destructive ml-1", children: "*" })
       ] }) }),
-      /* @__PURE__ */ jsx29("div", { className: cn("p-3 rounded-lg border border-border bg-card shadow-sm", className), children: timePickerContent })
+      /* @__PURE__ */ jsx28("div", { className: cn("p-3 rounded-lg border border-border bg-card shadow-sm", className), children: timePickerContent })
     ] });
   }
   return /* @__PURE__ */ jsxs24("div", { className: "w-full", ...rest, children: [
-    label && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ jsxs24(
+    label && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ jsxs24(
       "label",
       {
         className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground", "cursor-pointer"),
         onClick: () => !disabled && handleOpenChange(true),
         children: [
           label,
-          required && /* @__PURE__ */ jsx29("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx28("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx28(
       Popover,
       {
         trigger,
@@ -5778,14 +5863,14 @@ function TimePicker({
     ),
     (error || success || helperText) && /* @__PURE__ */ jsxs24("div", { className: cn("mt-1.5 flex items-start gap-1.5", sz.label), children: [
       error && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5 text-destructive", children: [
-        /* @__PURE__ */ jsx29(X8, { className: "w-3.5 h-3.5 flex-shrink-0" }),
-        /* @__PURE__ */ jsx29("span", { children: error })
+        /* @__PURE__ */ jsx28(X8, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsx28("span", { children: error })
       ] }),
       success && !error && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5 text-green-600", children: [
-        /* @__PURE__ */ jsx29(Check4, { className: "w-3.5 h-3.5 flex-shrink-0" }),
-        /* @__PURE__ */ jsx29("span", { children: "Valid time selected" })
+        /* @__PURE__ */ jsx28(Check4, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsx28("span", { children: "Valid time selected" })
       ] }),
-      helperText && !error && !success && /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: helperText })
+      helperText && !error && !success && /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: helperText })
     ] })
   ] });
 }
@@ -5793,7 +5878,7 @@ function TimePicker({
 // ../../components/ui/Calendar.tsx
 import * as React23 from "react";
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "lucide-react";
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function startOfMonth(d) {
   return new Date(d.getFullYear(), d.getMonth(), 1);
 }
@@ -5975,9 +6060,9 @@ function Calendar2({
     const monthDays = getMonthGrid(monthDate, weekStartsOn);
     const monthLabel = labels?.month ? labels.month(monthDate) : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" });
     return /* @__PURE__ */ jsxs25("div", { children: [
-      months > 1 && /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-center mb-2 text-sm font-semibold", children: monthLabel }),
-      showWeekdays && /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ jsx30("div", { className: cn(sz.head), children: w }, `${monthLabel}-${w}`)) }),
-      /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid), children: monthDays.map((d, idx) => {
+      months > 1 && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-center mb-2 text-sm font-semibold", children: monthLabel }),
+      showWeekdays && /* @__PURE__ */ jsx29("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ jsx29("div", { className: cn(sz.head), children: w }, `${monthLabel}-${w}`)) }),
+      /* @__PURE__ */ jsx29("div", { className: cn("grid grid-cols-7", sz.grid), children: monthDays.map((d, idx) => {
         const inMonth = d.getMonth() === monthDate.getMonth();
         const isToday2 = isSameDay(d, today);
         const selectedDay = isSelected(d);
@@ -6001,7 +6086,7 @@ function Calendar2({
             title: d.toDateString(),
             children: [
               d.getDate(),
-              dayEvents.length > 0 && /* @__PURE__ */ jsx30("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ jsx30("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
+              dayEvents.length > 0 && /* @__PURE__ */ jsx29("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ jsx29("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
             ]
           },
           `${monthLabel}-${idx}`
@@ -6033,13 +6118,13 @@ function Calendar2({
   }, [display, view, weekStartsOn, maxBound]);
   return /* @__PURE__ */ jsxs25("div", { className: cn("w-full", className), ...rest, children: [
     showHeader && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx30("button", { onClick: () => goByView(-1), disabled: prevDisabled, className: cn("p-1 rounded-md hover:bg-accent", prevDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.prev || (display === "week" ? "Previous week" : "Previous month"), children: /* @__PURE__ */ jsx30(ChevronLeft3, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ jsx30("div", { className: "text-sm font-semibold", children: display === "week" ? `${labels?.month ? labels.month(weekDays[0]) : weekDays[0].toLocaleDateString("en-US", { month: "short" })} ${weekDays[0].getDate()} \u2013 ${labels?.month ? labels.month(weekDays[6]) : weekDays[6].toLocaleDateString("en-US", { month: "short" })} ${weekDays[6].getDate()}` : labels?.month ? labels.month(view) : view.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
-      /* @__PURE__ */ jsx30("button", { onClick: () => goByView(1), disabled: nextDisabled, className: cn("p-1 rounded-md hover:bg-accent", nextDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.next || (display === "week" ? "Next week" : "Next month"), children: /* @__PURE__ */ jsx30(ChevronRight4, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ jsx29("button", { onClick: () => goByView(-1), disabled: prevDisabled, className: cn("p-1 rounded-md hover:bg-accent", prevDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.prev || (display === "week" ? "Previous week" : "Previous month"), children: /* @__PURE__ */ jsx29(ChevronLeft3, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx29("div", { className: "text-sm font-semibold", children: display === "week" ? `${labels?.month ? labels.month(weekDays[0]) : weekDays[0].toLocaleDateString("en-US", { month: "short" })} ${weekDays[0].getDate()} \u2013 ${labels?.month ? labels.month(weekDays[6]) : weekDays[6].toLocaleDateString("en-US", { month: "short" })} ${weekDays[6].getDate()}` : labels?.month ? labels.month(view) : view.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
+      /* @__PURE__ */ jsx29("button", { onClick: () => goByView(1), disabled: nextDisabled, className: cn("p-1 rounded-md hover:bg-accent", nextDisabled && "opacity-40 cursor-not-allowed hover:bg-transparent"), "aria-label": labels?.next || (display === "week" ? "Next week" : "Next month"), children: /* @__PURE__ */ jsx29(ChevronRight4, { className: "h-4 w-4" }) })
     ] }),
     display === "week" ? /* @__PURE__ */ jsxs25(Fragment9, { children: [
-      showWeekdays && /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ jsx30("div", { className: cn(sz.head), children: w }, `w-${w}`)) }),
-      /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid), children: weekDays.map((d, idx) => {
+      showWeekdays && /* @__PURE__ */ jsx29("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ jsx29("div", { className: cn(sz.head), children: w }, `w-${w}`)) }),
+      /* @__PURE__ */ jsx29("div", { className: cn("grid grid-cols-7", sz.grid), children: weekDays.map((d, idx) => {
         const inMonth = true;
         const isToday2 = isSameDay(d, today);
         const selectedDay = isSelected(d);
@@ -6062,13 +6147,13 @@ function Calendar2({
             title: d.toDateString(),
             children: [
               d.getDate(),
-              dayEvents.length > 0 && /* @__PURE__ */ jsx30("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ jsx30("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
+              dayEvents.length > 0 && /* @__PURE__ */ jsx29("span", { className: "absolute -bottom-1 inline-flex gap-0.5", children: dayEvents.slice(0, 3).map((e, i) => /* @__PURE__ */ jsx29("span", { className: "h-1.5 w-1.5 rounded-full", style: { backgroundColor: e.color || "hsl(var(--primary))" } }, i)) })
             ]
           },
           `wd-${idx}`
         );
       }) })
-    ] }) : /* @__PURE__ */ jsx30("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ jsx30(React23.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) })
+    ] }) : /* @__PURE__ */ jsx29("div", { className: cn(months > 1 ? "grid md:grid-cols-2 lg:grid-cols-3 gap-4" : ""), children: Array.from({ length: Math.max(1, months) }, (_, i) => /* @__PURE__ */ jsx29(React23.Fragment, { children: renderMonth(addMonths(view, i)) }, `cal-month-${view.getFullYear()}-${view.getMonth()}-${i}`)) })
   ] });
 }
 
@@ -6077,7 +6162,7 @@ import * as React24 from "react";
 import { useId as useId4 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { ChevronDown as ChevronDown2, Search as Search3, Check as Check5, SearchX as SearchX2, Loader2 as Loader23 } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 var MultiCombobox = ({
   id,
   options,
@@ -6223,7 +6308,7 @@ var MultiCombobox = ({
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
   return /* @__PURE__ */ jsxs26("div", { className: cn("w-full space-y-2 group", className), children: [
-    title && /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs26(
+    title && /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs26(
       "label",
       {
         className: cn(
@@ -6233,7 +6318,7 @@ var MultiCombobox = ({
         ),
         children: [
           title,
-          required && /* @__PURE__ */ jsx31("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx30("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ) }),
@@ -6249,11 +6334,11 @@ var MultiCombobox = ({
         ),
         children: [
           label,
-          required && /* @__PURE__ */ jsx31("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx30("span", { className: "text-destructive ml-1", children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx31("div", { className: "relative w-full" }),
+    /* @__PURE__ */ jsx30("div", { className: "relative w-full" }),
     /* @__PURE__ */ jsxs26(
       "button",
       {
@@ -6277,11 +6362,11 @@ var MultiCombobox = ({
           "disabled:cursor-not-allowed disabled:opacity-50"
         ),
         children: [
-          /* @__PURE__ */ jsx31("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
+          /* @__PURE__ */ jsx30("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
             const option = normalizedOptions.find((o) => o.value === itemValue);
             return /* @__PURE__ */ jsxs26("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
-              /* @__PURE__ */ jsx31("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx30("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
+              /* @__PURE__ */ jsx30(
                 "span",
                 {
                   role: "button",
@@ -6307,8 +6392,8 @@ var MultiCombobox = ({
           }) : /* @__PURE__ */ jsxs26("span", { className: "truncate text-sm", children: [
             value.length,
             " selected"
-          ] }) : /* @__PURE__ */ jsx31("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
-          /* @__PURE__ */ jsx31(
+          ] }) : /* @__PURE__ */ jsx30("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
+          /* @__PURE__ */ jsx30(
             ChevronDown2,
             {
               className: cn("opacity-50 transition-all duration-200", sizeStyles8[size].icon, open && "rotate-180 scale-110 text-primary opacity-100")
@@ -6318,30 +6403,27 @@ var MultiCombobox = ({
       }
     ),
     open && dropdownPosition && typeof window !== "undefined" ? createPortal8(
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx30(
         "div",
         {
           ref: dropdownRef,
-          "data-dropdown": "multicombobox",
+          "data-combobox-dropdown": true,
           style: {
             position: "absolute",
             top: dropdownPosition?.top || 0,
             left: dropdownPosition?.left || 0,
             width: dropdownPosition?.width || 200,
-            zIndex: 9999
+            zIndex: 9999,
+            transformOrigin: "top center"
           },
           "data-state": open ? "open" : "closed",
-          className: cn(
-            "z-[9999]",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-          ),
+          className: "z-9999",
           children: /* @__PURE__ */ jsxs26(
             "div",
             {
               className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"),
               children: [
-                showClear && value.length > 0 && /* @__PURE__ */ jsx31("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ jsx31(
+                showClear && value.length > 0 && /* @__PURE__ */ jsx30("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ jsx30(
                   "button",
                   {
                     type: "button",
@@ -6355,8 +6437,8 @@ var MultiCombobox = ({
                   }
                 ) }),
                 enableSearch && /* @__PURE__ */ jsxs26("div", { className: "relative border-b border-border/60", children: [
-                  /* @__PURE__ */ jsx31(Search3, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
-                  /* @__PURE__ */ jsx31(
+                  /* @__PURE__ */ jsx30(Search3, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
+                  /* @__PURE__ */ jsx30(
                     "input",
                     {
                       ref: inputRef,
@@ -6371,9 +6453,9 @@ var MultiCombobox = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx31("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: loading2 ? /* @__PURE__ */ jsx31("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-                  /* @__PURE__ */ jsx31(Loader23, { className: "h-6 w-6 animate-spin text-primary" }),
-                  /* @__PURE__ */ jsx31("span", { className: "text-muted-foreground", children: loadingText })
+                /* @__PURE__ */ jsx30("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: loading2 ? /* @__PURE__ */ jsx30("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+                  /* @__PURE__ */ jsx30(Loader23, { className: "h-6 w-6 animate-spin text-primary" }),
+                  /* @__PURE__ */ jsx30("span", { className: "text-muted-foreground", children: loadingText })
                 ] }) }) : filtered.length ? filtered.map((item, index) => {
                   const isSelected = value.includes(item.value);
                   const isDisabled = disabledOptions.includes(item.value);
@@ -6390,7 +6472,7 @@ var MultiCombobox = ({
                         inputRef.current?.focus();
                       },
                       style: {
-                        animationDelay: open ? `${index * 25}ms` : "0ms"
+                        animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
                       },
                       className: cn(
                         "dropdown-item flex cursor-pointer items-center justify-between rounded-sm transition-colors",
@@ -6401,12 +6483,12 @@ var MultiCombobox = ({
                       ),
                       children: [
                         item.label,
-                        isSelected && /* @__PURE__ */ jsx31(Check5, { className: sizeStyles8[size].icon })
+                        isSelected && /* @__PURE__ */ jsx30(Check5, { className: sizeStyles8[size].icon })
                       ]
                     },
                     item.value
                   );
-                }) : /* @__PURE__ */ jsx31(
+                }) : /* @__PURE__ */ jsx30(
                   "li",
                   {
                     className: cn(
@@ -6414,9 +6496,9 @@ var MultiCombobox = ({
                       size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"
                     ),
                     children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-                      /* @__PURE__ */ jsx31(SearchX2, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
-                      /* @__PURE__ */ jsx31("span", { children: emptyText }),
-                      query && /* @__PURE__ */ jsx31("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
+                      /* @__PURE__ */ jsx30(SearchX2, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+                      /* @__PURE__ */ jsx30("span", { children: emptyText }),
+                      query && /* @__PURE__ */ jsx30("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
                     ] })
                   }
                 ) })
@@ -6432,7 +6514,7 @@ var MultiCombobox = ({
 
 // ../../components/ui/RadioGroup.tsx
 import * as React25 from "react";
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 var RadioGroupContext = React25.createContext(void 0);
 var useRadioGroup = () => {
   const context = React25.useContext(RadioGroupContext);
@@ -6470,7 +6552,7 @@ var RadioGroup = React25.forwardRef(
     };
     const uniqueId = React25.useId();
     const radioName = name || `radio-group-${uniqueId}`;
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(
       RadioGroupContext.Provider,
       {
         value: {
@@ -6482,7 +6564,7 @@ var RadioGroup = React25.forwardRef(
           variant
         },
         children: /* @__PURE__ */ jsxs27("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx31(
             "div",
             {
               ref,
@@ -6499,7 +6581,7 @@ var RadioGroup = React25.forwardRef(
               children
             }
           ),
-          error && errorMessage && /* @__PURE__ */ jsx32("p", { className: "text-sm text-destructive mt-1", children: errorMessage })
+          error && errorMessage && /* @__PURE__ */ jsx31("p", { className: "text-sm text-destructive mt-1", children: errorMessage })
         ] })
       }
     );
@@ -6554,7 +6636,7 @@ var RadioGroupItem = React25.forwardRef(
           ),
           children: [
             /* @__PURE__ */ jsxs27("div", { className: "flex items-start gap-3", children: [
-              /* @__PURE__ */ jsx32(
+              /* @__PURE__ */ jsx31(
                 "button",
                 {
                   ref,
@@ -6573,22 +6655,22 @@ var RadioGroupItem = React25.forwardRef(
                     sizeStyles7[size].radio
                   ),
                   onClick: () => onValueChange?.(value),
-                  children: /* @__PURE__ */ jsx32(
+                  children: /* @__PURE__ */ jsx31(
                     "span",
                     {
                       className: cn(
                         "flex items-center justify-center w-full h-full rounded-full transition-all duration-200",
                         isSelected && "bg-primary"
                       ),
-                      children: isSelected && /* @__PURE__ */ jsx32("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
+                      children: isSelected && /* @__PURE__ */ jsx31("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
                     }
                   )
                 }
               ),
               /* @__PURE__ */ jsxs27("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
-                  Icon && /* @__PURE__ */ jsx32(Icon, { className: "h-4 w-4 text-foreground" }),
-                  /* @__PURE__ */ jsx32(
+                  Icon && /* @__PURE__ */ jsx31(Icon, { className: "h-4 w-4 text-foreground" }),
+                  /* @__PURE__ */ jsx31(
                     "label",
                     {
                       htmlFor: radioId,
@@ -6600,10 +6682,10 @@ var RadioGroupItem = React25.forwardRef(
                     }
                   )
                 ] }),
-                description && /* @__PURE__ */ jsx32("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
+                description && /* @__PURE__ */ jsx31("p", { className: "text-muted-foreground mt-1 text-xs", children: description })
               ] })
             ] }),
-            /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx31(
               "input",
               {
                 type: "radio",
@@ -6643,9 +6725,9 @@ var RadioGroupItem = React25.forwardRef(
           ),
           onClick: () => onValueChange?.(value),
           children: [
-            Icon && /* @__PURE__ */ jsx32(Icon, { className: "h-4 w-4" }),
+            Icon && /* @__PURE__ */ jsx31(Icon, { className: "h-4 w-4" }),
             label || children,
-            /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx31(
               "input",
               {
                 type: "radio",
@@ -6663,7 +6745,7 @@ var RadioGroupItem = React25.forwardRef(
       );
     }
     return /* @__PURE__ */ jsxs27("div", { className: cn("flex items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx31(
         "button",
         {
           ref,
@@ -6682,14 +6764,14 @@ var RadioGroupItem = React25.forwardRef(
             sizeStyles7[size].radio
           ),
           onClick: () => onValueChange?.(value),
-          children: /* @__PURE__ */ jsx32(
+          children: /* @__PURE__ */ jsx31(
             "span",
             {
               className: cn(
                 "flex items-center justify-center w-full h-full rounded-full transition-all duration-200",
                 isSelected && "bg-primary"
               ),
-              children: isSelected && /* @__PURE__ */ jsx32("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
+              children: isSelected && /* @__PURE__ */ jsx31("span", { className: cn("bg-primary-foreground rounded-full", sizeStyles7[size].dot) })
             }
           )
         }
@@ -6706,14 +6788,14 @@ var RadioGroupItem = React25.forwardRef(
           ),
           children: [
             /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
-              Icon && /* @__PURE__ */ jsx32(Icon, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx32("span", { children: label || children })
+              Icon && /* @__PURE__ */ jsx31(Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx31("span", { children: label || children })
             ] }),
-            description && /* @__PURE__ */ jsx32("p", { className: "text-muted-foreground mt-0.5 text-xs", children: description })
+            description && /* @__PURE__ */ jsx31("p", { className: "text-muted-foreground mt-0.5 text-xs", children: description })
           ]
         }
       ),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx31(
         "input",
         {
           type: "radio",
@@ -6733,7 +6815,7 @@ RadioGroupItem.displayName = "RadioGroupItem";
 
 // ../../components/ui/Slider.tsx
 import * as React26 from "react";
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 var SIZE_STYLES = {
   sm: {
     track: "h-1",
@@ -6795,18 +6877,18 @@ var Slider = React26.forwardRef(
     }
     return /* @__PURE__ */ jsxs28("div", { className: cn("w-full space-y-2", containerClassName), children: [
       (label || showValue) && /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
-        label && /* @__PURE__ */ jsx33("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
-        showValue && /* @__PURE__ */ jsx33("span", { className: cn("text-xs font-mono text-muted-foreground min-w-[2rem] text-right", valueClassName), children: displayValue })
+        label && /* @__PURE__ */ jsx32("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
+        showValue && /* @__PURE__ */ jsx32("span", { className: cn("text-xs font-mono text-muted-foreground min-w-[2rem] text-right", valueClassName), children: displayValue })
       ] }),
       /* @__PURE__ */ jsxs28("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ jsx33("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx32("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ jsx32(
           "div",
           {
             className: "absolute left-0 top-0 h-full bg-primary rounded-full transition-all duration-150 ease-out",
             style: { width: `${percentage}%` }
           }
         ) }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx32(
           "input",
           {
             ref,
@@ -6872,7 +6954,7 @@ Slider.displayName = "Slider";
 // ../../components/ui/OverlayControls.tsx
 import { Dot, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React27 from "react";
-import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function OverlayControls({
   mode,
   value,
@@ -7096,7 +7178,7 @@ function OverlayControls({
     setPreviewData(null);
   };
   return /* @__PURE__ */ jsxs29(Fragment10, { children: [
-    keyboardFeedback && /* @__PURE__ */ jsx34(
+    keyboardFeedback && /* @__PURE__ */ jsx33(
       "div",
       {
         className: cn(
@@ -7104,10 +7186,10 @@ function OverlayControls({
           keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) > 0 ? "justify-end pr-32" : keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) < 0 ? "justify-start pl-32" : "justify-center"
         ),
         children: /* @__PURE__ */ jsxs29("div", { className: "bg-black/50 backdrop-blur-sm rounded-xl px-6 py-4 shadow-xl border border-white/10 animate-in fade-in zoom-in duration-200", children: [
-          keyboardFeedback.type === "play" && /* @__PURE__ */ jsx34(Play, { className: "w-16 h-16 text-white", fill: "white" }),
-          keyboardFeedback.type === "pause" && /* @__PURE__ */ jsx34(Pause, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "play" && /* @__PURE__ */ jsx33(Play, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "pause" && /* @__PURE__ */ jsx33(Pause, { className: "w-16 h-16 text-white", fill: "white" }),
           keyboardFeedback.type === "seek" && /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3", children: [
-            (keyboardFeedback.value ?? 0) > 0 ? /* @__PURE__ */ jsx34(RotateCw, { className: "w-12 h-12 text-white" }) : /* @__PURE__ */ jsx34(RotateCcw, { className: "w-12 h-12 text-white" }),
+            (keyboardFeedback.value ?? 0) > 0 ? /* @__PURE__ */ jsx33(RotateCw, { className: "w-12 h-12 text-white" }) : /* @__PURE__ */ jsx33(RotateCcw, { className: "w-12 h-12 text-white" }),
             /* @__PURE__ */ jsxs29("span", { className: "text-3xl font-bold text-white", children: [
               keyboardFeedback.value && keyboardFeedback.value > 0 ? "+" : "",
               keyboardFeedback.value,
@@ -7115,21 +7197,21 @@ function OverlayControls({
             ] })
           ] }),
           keyboardFeedback.type === "volume" && /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx34(Volume2, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ jsx33(Volume2, { className: "w-12 h-12 text-white" }),
             /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1.5", children: [
               /* @__PURE__ */ jsxs29("span", { className: "text-2xl font-bold text-white", children: [
                 keyboardFeedback.value,
                 "%"
               ] }),
-              /* @__PURE__ */ jsx34("div", { className: "w-32 h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx34("div", { className: "h-full bg-white rounded-full transition-all", style: { width: `${keyboardFeedback.value}%` } }) })
+              /* @__PURE__ */ jsx33("div", { className: "w-32 h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx33("div", { className: "h-full bg-white rounded-full transition-all", style: { width: `${keyboardFeedback.value}%` } }) })
             ] })
           ] }),
-          keyboardFeedback.type === "mute" && /* @__PURE__ */ jsx34(VolumeX, { className: "w-16 h-16 text-white" }),
-          keyboardFeedback.type === "unmute" && /* @__PURE__ */ jsx34(Volume2, { className: "w-16 h-16 text-white" })
+          keyboardFeedback.type === "mute" && /* @__PURE__ */ jsx33(VolumeX, { className: "w-16 h-16 text-white" }),
+          keyboardFeedback.type === "unmute" && /* @__PURE__ */ jsx33(Volume2, { className: "w-16 h-16 text-white" })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: cn(
@@ -7140,7 +7222,7 @@ function OverlayControls({
         ),
         children: /* @__PURE__ */ jsxs29("div", { className: "px-4", children: [
           /* @__PURE__ */ jsxs29("div", { ref: sliderRef, onMouseMove: handleSliderMouseMove, onMouseLeave: handleSliderMouseLeave, className: "relative", children: [
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx33(
               Slider,
               {
                 min: 0,
@@ -7165,14 +7247,14 @@ function OverlayControls({
                 noFocus: true
               }
             ),
-            previewData && /* @__PURE__ */ jsx34("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ jsxs29("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
-              /* @__PURE__ */ jsx34("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
-              /* @__PURE__ */ jsx34("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime3(previewData.time) })
-            ] }) : /* @__PURE__ */ jsx34("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ jsx34("div", { className: "text-xs font-mono text-center", children: formatTime3(previewData.time) }) }) })
+            previewData && /* @__PURE__ */ jsx33("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ jsxs29("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
+              /* @__PURE__ */ jsx33("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
+              /* @__PURE__ */ jsx33("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime3(previewData.time) })
+            ] }) : /* @__PURE__ */ jsx33("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ jsx33("div", { className: "text-xs font-mono text-center", children: formatTime3(previewData.time) }) }) })
           ] }),
           showControlsBar && /* @__PURE__ */ jsxs29("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx33(
                 Button_default,
                 {
                   variant: "ghost",
@@ -7180,10 +7262,10 @@ function OverlayControls({
                   onClick: onTogglePlay,
                   title: playing ? "T\u1EA1m d\u1EEBng" : "Ph\xE1t",
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: playing ? /* @__PURE__ */ jsx34(Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx34(Play, { className: "w-4 h-4" })
+                  children: playing ? /* @__PURE__ */ jsx33(Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx33(Play, { className: "w-4 h-4" })
                 }
               ),
-              onSkip && /* @__PURE__ */ jsx34(
+              onSkip && /* @__PURE__ */ jsx33(
                 Button_default,
                 {
                   variant: "ghost",
@@ -7191,10 +7273,10 @@ function OverlayControls({
                   onClick: () => onSkip(-skipSeconds),
                   title: `L\xF9i ${skipSeconds}s`,
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ jsx34(RotateCcw, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ jsx33(RotateCcw, { className: "w-4 h-4" })
                 }
               ),
-              onSkip && /* @__PURE__ */ jsx34(
+              onSkip && /* @__PURE__ */ jsx33(
                 Button_default,
                 {
                   variant: "ghost",
@@ -7202,7 +7284,7 @@ function OverlayControls({
                   onClick: () => onSkip(skipSeconds),
                   title: `Tua ${skipSeconds}s`,
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ jsx34(RotateCw, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ jsx33(RotateCw, { className: "w-4 h-4" })
                 }
               ),
               (showTime ?? true) && /* @__PURE__ */ jsxs29("span", { className: "px-3 py-1 rounded-full text-xs font-mono bg-background/60 text-foreground shadow-sm border border-border whitespace-nowrap", children: [
@@ -7211,7 +7293,7 @@ function OverlayControls({
                 formatTime3(max)
               ] }),
               /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx34(
+                /* @__PURE__ */ jsx33(
                   Button_default,
                   {
                     variant: "ghost",
@@ -7219,10 +7301,10 @@ function OverlayControls({
                     onClick: onToggleMute,
                     title: muted ? "B\u1EADt ti\u1EBFng" : "T\u1EAFt ti\u1EBFng",
                     className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                    children: muted || (volume ?? 1) === 0 ? /* @__PURE__ */ jsx34(VolumeX, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx34(Volume2, { className: "w-4 h-4" })
+                    children: muted || (volume ?? 1) === 0 ? /* @__PURE__ */ jsx33(VolumeX, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx33(Volume2, { className: "w-4 h-4" })
                   }
                 ),
-                /* @__PURE__ */ jsx34("div", { className: "w-24", children: /* @__PURE__ */ jsx34(
+                /* @__PURE__ */ jsx33("div", { className: "w-24", children: /* @__PURE__ */ jsx33(
                   Slider,
                   {
                     min: 0,
@@ -7247,7 +7329,7 @@ function OverlayControls({
                   title: "Tr\u1EF1c ti\u1EBFp (v\u1EC1 Live)",
                   className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
                   children: [
-                    /* @__PURE__ */ jsx34(Dot, { className: "w-10 h-10 text-destructive" }),
+                    /* @__PURE__ */ jsx33(Dot, { className: "w-10 h-10 text-destructive" }),
                     "Tr\u1EF1c ti\u1EBFp"
                   ]
                 }
@@ -7267,7 +7349,7 @@ function OverlayControls({
                     ]
                   }
                 ),
-                rateOpen && /* @__PURE__ */ jsx34("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ jsxs29(
+                rateOpen && /* @__PURE__ */ jsx33("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ jsxs29(
                   "button",
                   {
                     onClick: () => {
@@ -7283,7 +7365,7 @@ function OverlayControls({
                   r
                 )) })
               ] }),
-              onToggleFullscreen && /* @__PURE__ */ jsx34(
+              onToggleFullscreen && /* @__PURE__ */ jsx33(
                 Button_default,
                 {
                   variant: "ghost",
@@ -7291,7 +7373,7 @@ function OverlayControls({
                   onClick: onToggleFullscreen,
                   title: "To\xE0n m\xE0n h\xECnh",
                   className: "px-3 bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
-                  children: /* @__PURE__ */ jsx34(Maximize2, { className: "w-4 h-4" })
+                  children: /* @__PURE__ */ jsx33(Maximize2, { className: "w-4 h-4" })
                 }
               )
             ] })
@@ -7305,7 +7387,7 @@ function OverlayControls({
 // ../../components/ui/CategoryTreeSelect.tsx
 import { useState as useState24 } from "react";
 import { ChevronRight as ChevronRight5, ChevronDown as ChevronDown3, Check as Check6 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1ECDn danh m\u1EE5c", disabled }) {
   const [isOpen, setIsOpen] = useState24(false);
   const [expandedNodes, setExpandedNodes] = useState24(/* @__PURE__ */ new Set());
@@ -7359,14 +7441,14 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
           ),
           style: { paddingLeft: `${level * 1.5 + 0.75}rem` },
           children: [
-            isSelected && /* @__PURE__ */ jsx35(
+            isSelected && /* @__PURE__ */ jsx34(
               "span",
               {
                 "aria-hidden": true,
                 className: "absolute left-0 top-0 bottom-0 w-1 bg-primary"
               }
             ),
-            hasChildren ? /* @__PURE__ */ jsx35(
+            hasChildren ? /* @__PURE__ */ jsx34(
               "button",
               {
                 type: "button",
@@ -7375,33 +7457,33 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
                   toggleExpand(category.id);
                 },
                 className: "p-0.5 hover:bg-accent rounded",
-                children: isExpanded ? /* @__PURE__ */ jsx35(ChevronDown3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx35(ChevronRight5, { className: "w-4 h-4" })
+                children: isExpanded ? /* @__PURE__ */ jsx34(ChevronDown3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx34(ChevronRight5, { className: "w-4 h-4" })
               }
-            ) : /* @__PURE__ */ jsx35("span", { className: "w-5" }),
+            ) : /* @__PURE__ */ jsx34("span", { className: "w-5" }),
             /* @__PURE__ */ jsxs30(
               "div",
               {
                 onClick: () => handleSelect(category.id, category),
                 className: "flex items-center gap-2 flex-1",
                 children: [
-                  /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsx34(
                     "div",
                     {
                       className: cn(
                         "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
                         isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
                       ),
-                      children: isSelected && /* @__PURE__ */ jsx35(Check6, { className: "w-3 h-3 text-primary-foreground" })
+                      children: isSelected && /* @__PURE__ */ jsx34(Check6, { className: "w-3 h-3 text-primary-foreground" })
                     }
                   ),
-                  /* @__PURE__ */ jsx35("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+                  /* @__PURE__ */ jsx34("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
                 ]
               }
             )
           ]
         }
       ),
-      hasChildren && isExpanded && /* @__PURE__ */ jsx35("div", { children: children.map((child) => renderCategory(child, level + 1)) })
+      hasChildren && isExpanded && /* @__PURE__ */ jsx34("div", { children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
   const selectedCount = value.length;
@@ -7423,14 +7505,14 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
           isOpen && "border-primary"
         ),
         children: [
-          /* @__PURE__ */ jsx35("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
-          /* @__PURE__ */ jsx35(ChevronDown3, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
+          /* @__PURE__ */ jsx34("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
+          /* @__PURE__ */ jsx34(ChevronDown3, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
         ]
       }
     ),
     isOpen && !disabled && /* @__PURE__ */ jsxs30(Fragment11, { children: [
-      /* @__PURE__ */ jsx35("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx34("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
+      /* @__PURE__ */ jsx34(
         "div",
         {
           className: cn(
@@ -7438,7 +7520,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
             "rounded-md border bg-popover text-popover-foreground shadow-md",
             "backdrop-blur-sm bg-popover/95 border-border/60"
           ),
-          children: /* @__PURE__ */ jsx35("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) })
+          children: /* @__PURE__ */ jsx34("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ jsx34("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) })
         }
       )
     ] })
@@ -7449,7 +7531,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
 import { useState as useState25, useRef as useRef10, useCallback as useCallback9 } from "react";
 import { Upload, X as X9, Image as ImageIcon, Loader2 as Loader24, Check as Check7 } from "lucide-react";
 import { useTranslations as useTranslations6 } from "next-intl";
-import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
 function ImageUpload({
   onUpload,
   onRemove,
@@ -7476,94 +7558,106 @@ function ImageUpload({
     md: "w-24 h-24",
     lg: "w-32 h-32"
   };
-  const handleDragOver = useCallback9((e) => {
-    e.preventDefault();
-    if (!disabled) {
-      setIsDragging(true);
-    }
-  }, [disabled]);
+  const handleDragOver = useCallback9(
+    (e) => {
+      e.preventDefault();
+      if (!disabled) {
+        setIsDragging(true);
+      }
+    },
+    [disabled]
+  );
   const handleDragLeave = useCallback9((e) => {
     e.preventDefault();
     setIsDragging(false);
   }, []);
-  const handleFiles = useCallback9(async (files) => {
-    if (files.length === 0) return;
-    const validFiles = files.filter((file) => {
-      if (file.size > maxSize * 1024 * 1024) {
-        addToast({
-          type: "error",
-          message: `File "${file.name}" is too large. Max size: ${maxSize}MB`
-        });
-        return false;
-      }
-      if (!file.type.startsWith("image/")) {
+  const handleFiles = useCallback9(
+    async (files) => {
+      if (files.length === 0) return;
+      const validFiles = files.filter((file) => {
+        if (file.size > maxSize * 1024 * 1024) {
+          addToast({
+            type: "error",
+            message: `File "${file.name}" is too large. Max size: ${maxSize}MB`
+          });
+          return false;
+        }
+        if (!file.type.startsWith("image/")) {
+          addToast({
+            type: "error",
+            message: `File "${file.name}" is not a valid image`
+          });
+          return false;
+        }
+        return true;
+      });
+      if (validFiles.length === 0) return;
+      setUploading(true);
+      try {
+        for (const file of validFiles) {
+          const formData = new FormData();
+          formData.append("file", file);
+          const response = {
+            id: Date.now(),
+            path: "",
+            url: URL.createObjectURL(file),
+            originalName: file.name,
+            size: file.size,
+            mimeType: file.type,
+            width: 0,
+            height: 0,
+            formattedSize: `${(file.size / 1024).toFixed(1)} KB`
+          };
+          const newImage = {
+            id: response.id,
+            path: response.path,
+            url: response.url,
+            originalName: response.originalName,
+            size: response.size,
+            mimeType: response.mimeType,
+            width: response.width,
+            height: response.height,
+            formattedSize: response.formattedSize
+          };
+          setUploadedImages((prev) => [...prev, newImage]);
+          onUpload?.(newImage);
+          addToast({
+            type: "success",
+            message: `"${file.name}" uploaded successfully`
+          });
+        }
+      } catch (error) {
+        console.error("Upload error:", error);
         addToast({
           type: "error",
-          message: `File "${file.name}" is not a valid image`
+          message: error.message || "Upload failed"
         });
-        return false;
+      } finally {
+        setUploading(false);
       }
-      return true;
-    });
-    if (validFiles.length === 0) return;
-    setUploading(true);
-    try {
-      for (const file of validFiles) {
-        const formData = new FormData();
-        formData.append("file", file);
-        const response = {
-          id: Date.now(),
-          path: "",
-          url: URL.createObjectURL(file),
-          originalName: file.name,
-          size: file.size,
-          mimeType: file.type,
-          width: 0,
-          height: 0,
-          formattedSize: `${(file.size / 1024).toFixed(1)} KB`
-        };
-        const newImage = {
-          id: response.id,
-          path: response.path,
-          url: response.url,
-          originalName: response.originalName,
-          size: response.size,
-          mimeType: response.mimeType,
-          width: response.width,
-          height: response.height,
-          formattedSize: response.formattedSize
-        };
-        setUploadedImages((prev) => [...prev, newImage]);
-        onUpload?.(newImage);
-        addToast({
-          type: "success",
-          message: `"${file.name}" uploaded successfully`
-        });
+    },
+    [maxSize, addToast, onUpload]
+  );
+  const handleDrop = useCallback9(
+    (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+      if (disabled) return;
+      const files = Array.from(e.dataTransfer.files);
+      handleFiles(files);
+    },
+    [disabled, handleFiles]
+  );
+  const handleFileSelect = useCallback9(
+    (e) => {
+      const files = Array.from(e.target.files || []);
+      handleFiles(files);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
       }
-    } catch (error) {
-      console.error("Upload error:", error);
-      addToast({
-        type: "error",
-        message: error.message || "Upload failed"
-      });
-    } finally {
-      setUploading(false);
-    }
-  }, [maxSize, addToast, onUpload]);
-  const handleDrop = useCallback9((e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    if (disabled) return;
-    const files = Array.from(e.dataTransfer.files);
-    handleFiles(files);
-  }, [disabled, handleFiles]);
-  const handleFileSelect = useCallback9((e) => {
-    const files = Array.from(e.target.files || []);
-    handleFiles(files);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  }, [handleFiles]);
+    },
+    [handleFiles]
+  );
   const handleRemoveImage = (imageId) => {
     setUploadedImages((prev) => prev.filter((img) => img.id !== Number(imageId)));
     onRemove?.(String(imageId));
@@ -7585,29 +7679,19 @@ function ImageUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          uploading && /* @__PURE__ */ jsx36("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx36(Loader24, { className: "w-6 h-6 animate-spin text-primary" }),
-            /* @__PURE__ */ jsx36("span", { className: "text-sm font-medium", children: "Uploading..." })
+          uploading && /* @__PURE__ */ jsx35("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx35(Loader24, { className: "w-6 h-6 animate-spin text-primary" }),
+            /* @__PURE__ */ jsx35("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
           /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsx36("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx36(Upload, { className: "w-6 h-6 text-primary" }) }),
+            /* @__PURE__ */ jsx35("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx35(Upload, { className: "w-6 h-6 text-primary" }) }),
             /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx36("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
-              /* @__PURE__ */ jsx36(
-                Button_default,
-                {
-                  type: "button",
-                  variant: "outline",
-                  size: "sm",
-                  onClick: handleBrowseClick,
-                  disabled: disabled || uploading,
-                  children: browseText || t("browseFiles")
-                }
-              )
+              /* @__PURE__ */ jsx35("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
+              /* @__PURE__ */ jsx35(Button_default, { type: "button", variant: "outline", size: "sm", onClick: handleBrowseClick, disabled: disabled || uploading, children: browseText || t("browseFiles") })
             ] }),
-            /* @__PURE__ */ jsx36("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
+            /* @__PURE__ */ jsx35("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
           ] }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx35(
             "input",
             {
               ref: fileInputRef,
@@ -7623,52 +7707,45 @@ function ImageUpload({
       }
     ),
     showPreview && uploadedImages.length > 0 && /* @__PURE__ */ jsxs31("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx36("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ jsxs31(
-        "div",
-        {
-          className: "relative group bg-card border border-border rounded-lg p-3",
-          children: [
-            /* @__PURE__ */ jsx36(
-              Button_default,
-              {
-                variant: "danger",
-                size: "icon",
-                className: "absolute -top-2 -right-2 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity z-10",
-                onClick: () => handleRemoveImage(image.id),
-                children: /* @__PURE__ */ jsx36(X9, { className: "w-3 h-3" })
+      /* @__PURE__ */ jsx35("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
+      /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ jsxs31("div", { className: "relative group bg-card border border-border rounded-lg p-3", children: [
+        /* @__PURE__ */ jsx35(
+          Button_default,
+          {
+            variant: "danger",
+            size: "icon",
+            className: "absolute -top-2 -right-2 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity z-10",
+            onClick: () => handleRemoveImage(image.id),
+            children: /* @__PURE__ */ jsx35(X9, { className: "w-3 h-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxs31("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
+          /* @__PURE__ */ jsx35(
+            "img",
+            {
+              src: image.url,
+              alt: image.originalName,
+              className: "w-full h-full object-cover",
+              onError: (e) => {
+                const target = e.target;
+                target.style.display = "none";
+                target.nextElementSibling?.classList.remove("hidden");
               }
-            ),
-            /* @__PURE__ */ jsxs31("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
-              /* @__PURE__ */ jsx36(
-                "img",
-                {
-                  src: image.url,
-                  alt: image.originalName,
-                  className: "w-full h-full object-cover",
-                  onError: (e) => {
-                    const target = e.target;
-                    target.style.display = "none";
-                    target.nextElementSibling?.classList.remove("hidden");
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx36("div", { className: "hidden w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx36(ImageIcon, { className: "w-8 h-8 text-muted-foreground" }) })
-            ] }),
-            /* @__PURE__ */ jsxs31("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx36("p", { className: "text-xs font-medium truncate", title: image.originalName, children: image.originalName }),
-              /* @__PURE__ */ jsx36("p", { className: "text-xs text-muted-foreground", children: image.formattedSize }),
-              image.width && image.height && /* @__PURE__ */ jsxs31("p", { className: "text-xs text-muted-foreground", children: [
-                image.width,
-                " \xD7 ",
-                image.height
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx36("div", { className: "absolute top-1 left-1 w-5 h-5 bg-success rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx36(Check7, { className: "w-3 h-3 text-success-foreground" }) })
-          ]
-        },
-        image.id
-      )) })
+            }
+          ),
+          /* @__PURE__ */ jsx35("div", { className: "hidden w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx35(ImageIcon, { className: "w-8 h-8 text-muted-foreground" }) })
+        ] }),
+        /* @__PURE__ */ jsxs31("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx35("p", { className: "text-xs font-medium truncate", title: image.originalName, children: image.originalName }),
+          /* @__PURE__ */ jsx35("p", { className: "text-xs text-muted-foreground", children: image.formattedSize }),
+          image.width && image.height && /* @__PURE__ */ jsxs31("p", { className: "text-xs text-muted-foreground", children: [
+            image.width,
+            " \xD7 ",
+            image.height
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx35("div", { className: "absolute top-1 left-1 w-5 h-5 bg-success rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx35(Check7, { className: "w-3 h-3 text-success-foreground" }) })
+      ] }, image.id)) })
     ] })
   ] });
 }
@@ -7676,7 +7753,7 @@ function ImageUpload({
 // ../../components/ui/Carousel.tsx
 import * as React29 from "react";
 import { ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight6 } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -7846,8 +7923,8 @@ function Carousel({
       "aria-roledescription": "carousel",
       tabIndex: 0,
       children: [
-        showProgress && autoScroll && /* @__PURE__ */ jsx37("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-20", children: /* @__PURE__ */ jsx37("div", { ref: progressElRef, className: "h-full bg-primary", style: { width: "0%" } }) }),
-        /* @__PURE__ */ jsx37(
+        showProgress && autoScroll && /* @__PURE__ */ jsx36("div", { className: "absolute top-0 left-0 right-0 h-1 bg-muted z-20", children: /* @__PURE__ */ jsx36("div", { ref: progressElRef, className: "h-full bg-primary", style: { width: "0%" } }) }),
+        /* @__PURE__ */ jsx36(
           "div",
           {
             className: cn("flex", isHorizontal ? "flex-row" : "flex-col", containerClassName),
@@ -7862,7 +7939,7 @@ function Carousel({
             role: "group",
             "aria-atomic": "false",
             "aria-live": autoScroll ? "off" : "polite",
-            children: React29.Children.map(children, (child, idx) => /* @__PURE__ */ jsx37(
+            children: React29.Children.map(children, (child, idx) => /* @__PURE__ */ jsx36(
               "div",
               {
                 className: cn(
@@ -7886,7 +7963,7 @@ function Carousel({
           }
         ),
         showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs32(Fragment12, { children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx36(
             Button_default,
             {
               onClick: scrollPrev,
@@ -7902,7 +7979,7 @@ function Carousel({
               "aria-label": "Previous slide"
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx36(
             Button_default,
             {
               onClick: scrollNext,
@@ -7919,7 +7996,7 @@ function Carousel({
             }
           )
         ] }),
-        showDots && totalSlides > slidesToShow && /* @__PURE__ */ jsx37(
+        showDots && totalSlides > slidesToShow && /* @__PURE__ */ jsx36(
           "div",
           {
             className: cn(
@@ -7928,7 +8005,7 @@ function Carousel({
             ),
             role: "tablist",
             "aria-label": "Carousel pagination",
-            children: Array.from({ length: maxIndex + 1 }, (_, idx) => /* @__PURE__ */ jsx37(
+            children: Array.from({ length: maxIndex + 1 }, (_, idx) => /* @__PURE__ */ jsx36(
               "button",
               {
                 onClick: () => scrollTo(idx),
@@ -7945,14 +8022,14 @@ function Carousel({
             ))
           }
         ),
-        showThumbnails && totalSlides > slidesToShow && /* @__PURE__ */ jsx37(
+        showThumbnails && totalSlides > slidesToShow && /* @__PURE__ */ jsx36(
           "div",
           {
             className: cn(
               "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-gradient-to-t from-black/50 to-transparent overflow-x-auto",
               isHorizontal ? "flex-row" : "flex-col"
             ),
-            children: React29.Children.map(children, (child, idx) => /* @__PURE__ */ jsx37(
+            children: React29.Children.map(children, (child, idx) => /* @__PURE__ */ jsx36(
               "button",
               {
                 onClick: () => scrollTo(idx),
@@ -7974,7 +8051,7 @@ function Carousel({
 
 // ../../components/ui/FallingIcons.tsx
 import React30 from "react";
-import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 var DEFAULT_COUNT = 24;
 var DEFAULT_SPEED_RANGE = [6, 14];
 var DEFAULT_SIZE_RANGE = [14, 28];
@@ -8069,8 +8146,8 @@ function FallingIcons({
       filter: `drop-shadow(0 0 ${4 * intensity}px ${glowColor}) drop-shadow(0 0 ${8 * intensity}px ${glowColor})`
     };
   }, [glow, glowColor, glowIntensity]);
-  const FallbackIcon = React30.useMemo(() => (props) => /* @__PURE__ */ jsx38("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx38("circle", { cx: "12", cy: "12", r: "10" }) }), []);
-  const TheIcon = imageUrl ? ({ className: imgClassName }) => /* @__PURE__ */ jsx38(
+  const FallbackIcon = React30.useMemo(() => (props) => /* @__PURE__ */ jsx37("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "10" }) }), []);
+  const TheIcon = imageUrl ? ({ className: imgClassName }) => /* @__PURE__ */ jsx37(
     "img",
     {
       src: imageUrl,
@@ -8089,7 +8166,7 @@ function FallingIcons({
       ),
       style: { zIndex },
       children: [
-        /* @__PURE__ */ jsx38("style", { children: `
+        /* @__PURE__ */ jsx37("style", { children: `
         @keyframes ${FallName} {
           0% { transform: translate3d(0, -10vh, 0); opacity: 0; }
           10% { opacity: 1; }
@@ -8122,7 +8199,7 @@ function FallingIcons({
           }
         }
       ` }),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx37(
           "div",
           {
             className: cn(
@@ -8148,7 +8225,7 @@ function FallingIcons({
                   const trailDelay = p.delay - (trailIndex + 1) * 0.15;
                   const trailOpacity = 1 - (trailIndex + 1) * (1 / (trailParticles.length + 1));
                   const trailScale = 1 - (trailIndex + 1) * 0.15;
-                  return /* @__PURE__ */ jsx38(
+                  return /* @__PURE__ */ jsx37(
                     "span",
                     {
                       className: cn("absolute top-0 will-change-transform pointer-events-none uv-falling-particle", colorClassName),
@@ -8162,7 +8239,7 @@ function FallingIcons({
                         opacity: trailOpacity * 0.4,
                         ["--fall"]: `${fallDist ?? (typeof window !== "undefined" ? window.innerHeight + 200 : 1200)}px`
                       },
-                      children: /* @__PURE__ */ jsx38(
+                      children: /* @__PURE__ */ jsx37(
                         "span",
                         {
                           className: "inline-block uv-sway",
@@ -8174,7 +8251,7 @@ function FallingIcons({
                             animationIterationCount: "infinite",
                             ["--amp"]: `${Math.round(p.driftAmp)}px`
                           },
-                          children: /* @__PURE__ */ jsx38(
+                          children: /* @__PURE__ */ jsx37(
                             "span",
                             {
                               className: "block",
@@ -8183,7 +8260,7 @@ function FallingIcons({
                                 height: p.size,
                                 ...glowStyles
                               },
-                              children: /* @__PURE__ */ jsx38(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
+                              children: /* @__PURE__ */ jsx37(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
                             }
                           )
                         }
@@ -8192,7 +8269,7 @@ function FallingIcons({
                     `${p.key}-trail-${trailIndex}`
                   );
                 }),
-                /* @__PURE__ */ jsx38(
+                /* @__PURE__ */ jsx37(
                   "span",
                   {
                     className: cn("absolute top-0 will-change-transform pointer-events-auto uv-falling-particle", colorClassName),
@@ -8218,7 +8295,7 @@ function FallingIcons({
                         return next;
                       });
                     },
-                    children: /* @__PURE__ */ jsx38(
+                    children: /* @__PURE__ */ jsx37(
                       "span",
                       {
                         className: "inline-block uv-sway",
@@ -8230,7 +8307,7 @@ function FallingIcons({
                           animationIterationCount: "infinite",
                           ["--amp"]: `${Math.round(p.driftAmp)}px`
                         },
-                        children: /* @__PURE__ */ jsx38(
+                        children: /* @__PURE__ */ jsx37(
                           "span",
                           {
                             className: cn(
@@ -8246,7 +8323,7 @@ function FallingIcons({
                               ["--popName"]: PopName,
                               ...glowStyles
                             },
-                            children: /* @__PURE__ */ jsx38(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
+                            children: /* @__PURE__ */ jsx37(TheIcon, { className: cn("w-full h-full text-primary/70", colorClassName) })
                           }
                         )
                       }
@@ -8265,7 +8342,7 @@ function FallingIcons({
 // ../../components/ui/List.tsx
 import * as React31 from "react";
 import { ChevronRight as ChevronRight7 } from "lucide-react";
-import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { itemPad: "px-2 py-1.5", densePad: "px-2 py-1", label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { itemPad: "px-3 py-2", densePad: "px-3 py-1.5", label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -8282,10 +8359,10 @@ var BADGE_VARIANTS = {
 var ListItemSkeleton = ({ size }) => {
   const sz = SIZE_STYLES2[size];
   return /* @__PURE__ */ jsxs34("div", { className: cn("flex items-center gap-3 animate-pulse", sz.itemPad), children: [
-    /* @__PURE__ */ jsx39("div", { className: cn("rounded-full bg-muted shrink-0", sz.avatar) }),
+    /* @__PURE__ */ jsx38("div", { className: cn("rounded-full bg-muted shrink-0", sz.avatar) }),
     /* @__PURE__ */ jsxs34("div", { className: "flex-1 space-y-2", children: [
-      /* @__PURE__ */ jsx39("div", { className: "h-4 bg-muted rounded w-3/4" }),
-      /* @__PURE__ */ jsx39("div", { className: "h-3 bg-muted rounded w-1/2" })
+      /* @__PURE__ */ jsx38("div", { className: "h-4 bg-muted rounded w-3/4" }),
+      /* @__PURE__ */ jsx38("div", { className: "h-3 bg-muted rounded w-1/2" })
     ] })
   ] });
 };
@@ -8319,12 +8396,12 @@ var ListRoot = React31.forwardRef(
       striped: "rounded-lg border border-border overflow-hidden"
     };
     if (loading2) {
-      return /* @__PURE__ */ jsx39(Comp, { ref, className: cn("group/list", variantClasses[variant], inset && "p-1.5 md:p-2", divided && "divide-y divide-border/60", className), ...rest, children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ jsx39(ListItemSkeleton, { size }, i)) });
+      return /* @__PURE__ */ jsx38(Comp, { ref, className: cn("group/list", variantClasses[variant], inset && "p-1.5 md:p-2", divided && "divide-y divide-border/60", className), ...rest, children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ jsx38(ListItemSkeleton, { size }, i)) });
     }
     if (!hasChildren && emptyText) {
-      return /* @__PURE__ */ jsx39(Comp, { ref, className: cn("group/list", variantClasses[variant], inset && "p-1.5 md:p-2", className), ...rest, children: /* @__PURE__ */ jsx39("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
+      return /* @__PURE__ */ jsx38(Comp, { ref, className: cn("group/list", variantClasses[variant], inset && "p-1.5 md:p-2", className), ...rest, children: /* @__PURE__ */ jsx38("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
     }
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx38(
       Comp,
       {
         ref,
@@ -8414,18 +8491,18 @@ var ListItem = React31.forwardRef(
           className: cn("flex items-center gap-3", padding, "group/item relative"),
           ...headerProps,
           children: [
-            avatar && /* @__PURE__ */ jsx39("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx39("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
-            Left && !avatar && /* @__PURE__ */ jsx39("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx39(Left, { className: cn(sz.icon) }) }),
+            avatar && /* @__PURE__ */ jsx38("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx38("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
+            Left && !avatar && /* @__PURE__ */ jsx38("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx38(Left, { className: cn(sz.icon) }) }),
             /* @__PURE__ */ jsxs34("div", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
-                label && /* @__PURE__ */ jsx39("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
-                badge && /* @__PURE__ */ jsx39("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
+                label && /* @__PURE__ */ jsx38("div", { className: cn(sz.label, "text-foreground font-medium truncate"), children: label }),
+                badge && /* @__PURE__ */ jsx38("span", { className: cn("px-2 py-0.5 rounded-full text-[11px] font-medium shrink-0", BADGE_VARIANTS[badgeVariant]), children: badge })
               ] }),
-              description && /* @__PURE__ */ jsx39("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
-              children && /* @__PURE__ */ jsx39("div", { className: "mt-1", children })
+              description && /* @__PURE__ */ jsx38("div", { className: cn(sz.desc, "text-muted-foreground truncate mt-0.5"), children: description }),
+              children && /* @__PURE__ */ jsx38("div", { className: "mt-1", children })
             ] }),
-            action && /* @__PURE__ */ jsx39("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
-            collapsible ? /* @__PURE__ */ jsx39(
+            action && /* @__PURE__ */ jsx38("div", { className: "opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0", children: action }),
+            collapsible ? /* @__PURE__ */ jsx38(
               "span",
               {
                 className: cn(
@@ -8433,13 +8510,13 @@ var ListItem = React31.forwardRef(
                   sz.icon,
                   isExpanded && "rotate-90"
                 ),
-                children: /* @__PURE__ */ jsx39(ChevronRight7, { className: cn(sz.icon) })
+                children: /* @__PURE__ */ jsx38(ChevronRight7, { className: cn(sz.icon) })
               }
-            ) : Right && /* @__PURE__ */ jsx39("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx39(Right, { className: cn(sz.icon) }) })
+            ) : Right && /* @__PURE__ */ jsx38("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx38(Right, { className: cn(sz.icon) }) })
           ]
         }
       ),
-      collapsible && isExpanded && expandContent && /* @__PURE__ */ jsx39("div", { className: cn("border-t border-border/50 bg-muted/20", padding, "pt-3"), children: expandContent })
+      collapsible && isExpanded && expandContent && /* @__PURE__ */ jsx38("div", { className: cn("border-t border-border/50 bg-muted/20", padding, "pt-3"), children: expandContent })
     ] });
     const baseCls = cn(
       "relative w-full",
@@ -8449,10 +8526,10 @@ var ListItem = React31.forwardRef(
     );
     if (href) {
       const A = as === "a" ? "a" : "a";
-      return /* @__PURE__ */ jsx39(A, { ref, href, className: cn(baseCls, "block"), ...rest, children: inner });
+      return /* @__PURE__ */ jsx38(A, { ref, href, className: cn(baseCls, "block"), ...rest, children: inner });
     }
     if (as === "button" && !collapsible) {
-      return /* @__PURE__ */ jsx39(
+      return /* @__PURE__ */ jsx38(
         "button",
         {
           ref,
@@ -8464,7 +8541,7 @@ var ListItem = React31.forwardRef(
       );
     }
     if (collapsible) {
-      return /* @__PURE__ */ jsx39(
+      return /* @__PURE__ */ jsx38(
         "div",
         {
           ref,
@@ -8475,7 +8552,7 @@ var ListItem = React31.forwardRef(
       );
     }
     const Comp = as;
-    return /* @__PURE__ */ jsx39(Comp, { ref, className: baseCls, ...rest, children: inner });
+    return /* @__PURE__ */ jsx38(Comp, { ref, className: baseCls, ...rest, children: inner });
   }
 );
 ListItem.displayName = "List.Item";
@@ -8485,7 +8562,7 @@ var List_default = List;
 // ../../components/ui/Watermark.tsx
 import * as React32 from "react";
 import { createPortal as createPortal9 } from "react-dom";
-import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
   draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
@@ -8740,7 +8817,7 @@ var Watermark = ({
   if (dataURL) overlayStyle.backgroundImage = `url(${dataURL})`;
   const animationClass = animate ? getAnimationClass(animationVariant, visible) : "";
   const blurClass = blur ? `backdrop-blur-[${blurAmount}px]` : "";
-  const overlay = /* @__PURE__ */ jsx40(
+  const overlay = /* @__PURE__ */ jsx39(
     "div",
     {
       role: interactive ? "button" : void 0,
@@ -8779,7 +8856,7 @@ var Watermark_default = Watermark;
 // ../../components/ui/Timeline.tsx
 import * as React33 from "react";
 import { ChevronDown as ChevronDown4 } from "lucide-react";
-import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
 var SIZE_STYLE = {
   sm: { dot: "h-2.5 w-2.5", iconDot: "h-6 w-6", padY: "py-3", densePadY: "py-2", title: "text-sm", desc: "text-xs", time: "text-[11px]", icon: "h-3.5 w-3.5" },
   md: { dot: "h-3 w-3", iconDot: "h-8 w-8", padY: "py-4", densePadY: "py-2.5", title: "text-base", desc: "text-sm", time: "text-xs", icon: "h-4 w-4" },
@@ -8805,21 +8882,21 @@ var Marker = ({ index, last, size, color, status = "default", lineColor, lineSty
   const dotColor = color ? `background:${color}` : void 0;
   const cls = color ? void 0 : STATUS_COLOR[status];
   return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col items-center", children: [
-    dot ? /* @__PURE__ */ jsx41("div", { className: "flex items-center justify-center", children: dot }) : Icon ? /* @__PURE__ */ jsx41(
+    dot ? /* @__PURE__ */ jsx40("div", { className: "flex items-center justify-center", children: dot }) : Icon ? /* @__PURE__ */ jsx40(
       "div",
       {
         className: cn("rounded-full ring-2 ring-background flex items-center justify-center", sz.iconDot, cls, active && "ring-primary/40 ring-4"),
         style: dotColor ? { background: color } : void 0,
-        children: /* @__PURE__ */ jsx41(Icon, { className: cn("text-white", sz.icon) })
+        children: /* @__PURE__ */ jsx40(Icon, { className: cn("text-white", sz.icon) })
       }
-    ) : /* @__PURE__ */ jsx41(
+    ) : /* @__PURE__ */ jsx40(
       "div",
       {
         className: cn("rounded-full ring-2 ring-background", sz.dot, cls, active && "ring-primary/40 ring-4 scale-125"),
         style: dotColor ? { background: color } : void 0
       }
     ),
-    !last && showLine && /* @__PURE__ */ jsx41(
+    !last && showLine && /* @__PURE__ */ jsx40(
       "div",
       {
         className: cn("flex-1 border-l-2", LINE_STYLE_MAP[lineStyle]),
@@ -8845,8 +8922,8 @@ var TimelineRoot = React33.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const content = items ? items.map((it, i) => /* @__PURE__ */ jsx41(TimelineItem, { ...it, className: cn(itemClassName, it.className), "data-index": i, "data-last": i === (items?.length ?? 0) - 1 }, i)) : children;
-    return /* @__PURE__ */ jsx41(TimelineContext.Provider, { value: { align, variant, size, mode, lineColor, lineStyle, itemClassName, animate, dense, showLine }, children: /* @__PURE__ */ jsx41(
+    const content = items ? items.map((it, i) => /* @__PURE__ */ jsx40(TimelineItem, { ...it, className: cn(itemClassName, it.className), "data-index": i, "data-last": i === (items?.length ?? 0) - 1 }, i)) : children;
+    return /* @__PURE__ */ jsx40(TimelineContext.Provider, { value: { align, variant, size, mode, lineColor, lineStyle, itemClassName, animate, dense, showLine }, children: /* @__PURE__ */ jsx40(
       "div",
       {
         ref,
@@ -8857,7 +8934,7 @@ var TimelineRoot = React33.forwardRef(
           className
         ),
         ...rest,
-        children: mode === "vertical" ? /* @__PURE__ */ jsx41("div", { className: "space-y-0", children: content }) : content
+        children: mode === "vertical" ? /* @__PURE__ */ jsx40("div", { className: "space-y-0", children: content }) : content
       }
     ) });
   }
@@ -8909,33 +8986,33 @@ var TimelineItem = React33.forwardRef(
       /* @__PURE__ */ jsxs36("div", { className: "flex items-start justify-between gap-2", children: [
         /* @__PURE__ */ jsxs36("div", { className: "flex-1 min-w-0", children: [
           title && /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx41("div", { className: cn("font-semibold text-foreground", sz.title), children: title }),
-            badge && /* @__PURE__ */ jsx41("span", { className: "px-2 py-0.5 rounded-full text-[10px] font-medium bg-primary/10 text-primary", children: badge })
+            /* @__PURE__ */ jsx40("div", { className: cn("font-semibold text-foreground", sz.title), children: title }),
+            badge && /* @__PURE__ */ jsx40("span", { className: "px-2 py-0.5 rounded-full text-[10px] font-medium bg-primary/10 text-primary", children: badge })
           ] }),
-          description && /* @__PURE__ */ jsx41("div", { className: cn("text-muted-foreground mt-1", sz.desc), children: description }),
-          children && /* @__PURE__ */ jsx41("div", { className: "mt-2", children })
+          description && /* @__PURE__ */ jsx40("div", { className: cn("text-muted-foreground mt-1", sz.desc), children: description }),
+          children && /* @__PURE__ */ jsx40("div", { className: "mt-2", children })
         ] }),
-        collapsible && /* @__PURE__ */ jsx41(
+        collapsible && /* @__PURE__ */ jsx40(
           "button",
           {
             type: "button",
             onClick: toggleExpanded,
             className: cn("text-muted-foreground hover:text-foreground transition-transform p-1", isExpanded && "rotate-180"),
-            children: /* @__PURE__ */ jsx41(ChevronDown4, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx40(ChevronDown4, { className: "h-4 w-4" })
           }
         )
       ] }),
-      time && /* @__PURE__ */ jsx41("div", { className: cn("mt-2 text-muted-foreground flex items-center gap-1", sz.time), children: time }),
-      collapsible && isExpanded && expandContent && /* @__PURE__ */ jsx41("div", { className: "mt-3 pt-3 border-t border-border/50 text-sm", children: expandContent })
+      time && /* @__PURE__ */ jsx40("div", { className: cn("mt-2 text-muted-foreground flex items-center gap-1", sz.time), children: time }),
+      collapsible && isExpanded && expandContent && /* @__PURE__ */ jsx40("div", { className: "mt-3 pt-3 border-t border-border/50 text-sm", children: expandContent })
     ] });
     const markerWidth = Icon || dot ? "w-auto" : "w-6";
     const leftSide = /* @__PURE__ */ jsxs36("div", { className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-left duration-500"), style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 }, children: [
-      /* @__PURE__ */ jsx41("div", { className: cn("flex-shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ jsx41(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) }),
-      /* @__PURE__ */ jsx41("div", { className: "flex-1", children: contentBox })
+      /* @__PURE__ */ jsx40("div", { className: cn("flex-shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ jsx40(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) }),
+      /* @__PURE__ */ jsx40("div", { className: "flex-1", children: contentBox })
     ] });
     const rightSide = /* @__PURE__ */ jsxs36("div", { className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-right duration-500"), style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 }, children: [
-      /* @__PURE__ */ jsx41("div", { className: "flex-1 flex justify-end", children: contentBox }),
-      /* @__PURE__ */ jsx41("div", { className: cn("flex-shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ jsx41(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) })
+      /* @__PURE__ */ jsx40("div", { className: "flex-1 flex justify-end", children: contentBox }),
+      /* @__PURE__ */ jsx40("div", { className: cn("flex-shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ jsx40(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) })
     ] });
     const horizontalItem = /* @__PURE__ */ jsxs36(
       "div",
@@ -8946,19 +9023,19 @@ var TimelineItem = React33.forwardRef(
         ),
         style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 },
         children: [
-          /* @__PURE__ */ jsx41(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: false }),
-          !isLast && ctx.showLine && /* @__PURE__ */ jsx41("div", { className: cn("h-px w-full border-t-2", LINE_STYLE_MAP[ctx.lineStyle]), style: { borderColor: ctx.lineColor || "hsl(var(--border))" } }),
+          /* @__PURE__ */ jsx40(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: false }),
+          !isLast && ctx.showLine && /* @__PURE__ */ jsx40("div", { className: cn("h-px w-full border-t-2", LINE_STYLE_MAP[ctx.lineStyle]), style: { borderColor: ctx.lineColor || "hsl(var(--border))" } }),
           contentBox
         ]
       }
     );
     if (ctx.mode === "horizontal") {
-      return /* @__PURE__ */ jsx41("div", { ref, className: cn("relative", className), ...rest, children: horizontalItem });
+      return /* @__PURE__ */ jsx40("div", { ref, className: cn("relative", className), ...rest, children: horizontalItem });
     }
     let row = leftSide;
     if (ctx.align === "right") row = rightSide;
     if (ctx.align === "alternate") row = (idx ?? 0) % 2 === 0 ? leftSide : rightSide;
-    return /* @__PURE__ */ jsx41("div", { ref, className: cn("relative", className), ...rest, children: row });
+    return /* @__PURE__ */ jsx40("div", { ref, className: cn("relative", className), ...rest, children: row });
   }
 );
 TimelineItem.displayName = "Timeline.Item";
@@ -8968,7 +9045,7 @@ var Timeline_default = Timeline;
 // ../../components/ui/ColorPicker.tsx
 import * as React34 from "react";
 import { Pipette, X as X10, Copy, Check as Check8, Palette, History } from "lucide-react";
-import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
 var clamp = (n, min, max) => Math.max(min, Math.min(max, n));
 function hexToRgb(hex) {
   const str = hex.replace(/^#/, "").trim();
@@ -9127,7 +9204,7 @@ var Swatch = ({
     md: "h-6 w-6",
     lg: "h-8 w-8"
   };
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     "button",
     {
       type: "button",
@@ -9266,7 +9343,7 @@ function ColorPicker({
       "aria-label": "Open color picker",
       children: [
         /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx41(
             "span",
             {
               className: cn(
@@ -9276,9 +9353,9 @@ function ColorPicker({
               style: { backgroundColor: withAlpha ? `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` : hexForInput }
             }
           ),
-          /* @__PURE__ */ jsx42("span", { className: "font-mono text-muted-foreground", children: text })
+          /* @__PURE__ */ jsx41("span", { className: "font-mono text-muted-foreground", children: text })
         ] }),
-        /* @__PURE__ */ jsx42(Pipette, { className: cn(size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-5 h-5" : "w-4 h-4", "text-muted-foreground") })
+        /* @__PURE__ */ jsx41(Pipette, { className: cn(size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-5 h-5" : "w-4 h-4", "text-muted-foreground") })
       ]
     }
   );
@@ -9288,7 +9365,7 @@ function ColorPicker({
     default: 320,
     full: 360
   };
-  return /* @__PURE__ */ jsx42("div", { className: cn("inline-block w-full", className), ...rest, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41("div", { className: cn("inline-block w-full", className), ...rest, children: /* @__PURE__ */ jsx41(
     Popover,
     {
       trigger,
@@ -9300,7 +9377,7 @@ function ColorPicker({
       contentClassName: cn("p-3 rounded-lg border border-border bg-card shadow-lg", contentClassName),
       children: /* @__PURE__ */ jsxs37("div", { className: "space-y-3", children: [
         variant !== "minimal" && /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx42("input", { type: "color", value: hexForInput, onChange: handleNativeChange, className: "h-9 w-9 rounded-md cursor-pointer border border-border" }),
+          /* @__PURE__ */ jsx41("input", { type: "color", value: hexForInput, onChange: handleNativeChange, className: "h-9 w-9 rounded-md cursor-pointer border border-border" }),
           /* @__PURE__ */ jsxs37(
             "button",
             {
@@ -9308,7 +9385,7 @@ function ColorPicker({
               onClick: tryEyedropper,
               className: cn("h-9 px-3 rounded-md border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5"),
               children: [
-                /* @__PURE__ */ jsx42(Pipette, { className: "w-3.5 h-3.5" }),
+                /* @__PURE__ */ jsx41(Pipette, { className: "w-3.5 h-3.5" }),
                 variant === "full" && "Pick"
               ]
             }
@@ -9323,7 +9400,7 @@ function ColorPicker({
                 copied && "bg-green-500/10 border-green-500/30"
               ),
               children: [
-                copied ? /* @__PURE__ */ jsx42(Check8, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ jsx42(Copy, { className: "w-3.5 h-3.5" }),
+                copied ? /* @__PURE__ */ jsx41(Check8, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ jsx41(Copy, { className: "w-3.5 h-3.5" }),
                 variant === "full" && (copied ? "Copied!" : "Copy")
               ]
             }
@@ -9335,14 +9412,14 @@ function ColorPicker({
               onClick: clear,
               className: "ml-auto h-9 px-2 rounded-md border border-border text-xs hover:bg-destructive/10 transition-colors flex items-center gap-1",
               children: [
-                /* @__PURE__ */ jsx42(X10, { className: "w-3.5 h-3.5" }),
+                /* @__PURE__ */ jsx41(X10, { className: "w-3.5 h-3.5" }),
                 variant === "full" && "Clear"
               ]
             }
           )
         ] }),
         /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx41(
             Input_default,
             {
               value: text,
@@ -9353,7 +9430,7 @@ function ColorPicker({
               className: "flex-1"
             }
           ),
-          variant === "minimal" && copyable && /* @__PURE__ */ jsx42(
+          variant === "minimal" && copyable && /* @__PURE__ */ jsx41(
             "button",
             {
               type: "button",
@@ -9362,17 +9439,17 @@ function ColorPicker({
                 "h-9 w-9 rounded-md border border-border hover:bg-accent/10 transition-colors flex items-center justify-center",
                 copied && "bg-green-500/10 border-green-500/30"
               ),
-              children: copied ? /* @__PURE__ */ jsx42(Check8, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ jsx42(Copy, { className: "w-3.5 h-3.5" })
+              children: copied ? /* @__PURE__ */ jsx41(Check8, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ jsx41(Copy, { className: "w-3.5 h-3.5" })
             }
           )
         ] }),
-        withAlpha && /* @__PURE__ */ jsx42("div", { className: "pt-1", children: /* @__PURE__ */ jsx42(Slider, { min: 0, max: 100, step: 1, value: alphaPct, onChange: (v) => setAlpha(v), label: "Alpha", showValue: true, formatValue: (v) => `${v}%`, size: "sm" }) }),
+        withAlpha && /* @__PURE__ */ jsx41("div", { className: "pt-1", children: /* @__PURE__ */ jsx41(Slider, { min: 0, max: 100, step: 1, value: alphaPct, onChange: (v) => setAlpha(v), label: "Alpha", showValue: true, formatValue: (v) => `${v}%`, size: "sm" }) }),
         variant !== "minimal" && /* @__PURE__ */ jsxs37("div", { children: [
           /* @__PURE__ */ jsxs37("div", { className: "text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx42(Palette, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx41(Palette, { className: "w-3.5 h-3.5" }),
             " Presets"
           ] }),
-          /* @__PURE__ */ jsx42("div", { className: "grid grid-cols-8 gap-2", children: swatches.map((c) => /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx41("div", { className: "grid grid-cols-8 gap-2", children: swatches.map((c) => /* @__PURE__ */ jsx41(
             Swatch,
             {
               color: c,
@@ -9390,10 +9467,10 @@ function ColorPicker({
         ] }),
         showRecent && recentColors.length > 0 && /* @__PURE__ */ jsxs37("div", { children: [
           /* @__PURE__ */ jsxs37("div", { className: "text-xs font-medium text-muted-foreground mb-2 flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx42(History, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx41(History, { className: "w-3.5 h-3.5" }),
             " Recent"
           ] }),
-          /* @__PURE__ */ jsx42("div", { className: "flex gap-2 flex-wrap", children: recentColors.map((c, i) => /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx41("div", { className: "flex gap-2 flex-wrap", children: recentColors.map((c, i) => /* @__PURE__ */ jsx41(
             Swatch,
             {
               color: c,
@@ -9410,11 +9487,11 @@ function ColorPicker({
           )) })
         ] }),
         showHarmony && harmony && variant !== "minimal" && /* @__PURE__ */ jsxs37("div", { children: [
-          /* @__PURE__ */ jsx42("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Harmony" }),
+          /* @__PURE__ */ jsx41("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Harmony" }),
           /* @__PURE__ */ jsxs37("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx42("span", { className: "text-xs text-muted-foreground w-24", children: "Complementary" }),
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx41("span", { className: "text-xs text-muted-foreground w-24", children: "Complementary" }),
+              /* @__PURE__ */ jsx41(
                 Swatch,
                 {
                   color: harmony.complementary,
@@ -9428,11 +9505,11 @@ function ColorPicker({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx42("span", { className: "text-xs font-mono text-muted-foreground", children: harmony.complementary })
+              /* @__PURE__ */ jsx41("span", { className: "text-xs font-mono text-muted-foreground", children: harmony.complementary })
             ] }),
             /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx42("span", { className: "text-xs text-muted-foreground w-24", children: "Triadic" }),
-              /* @__PURE__ */ jsx42("div", { className: "flex gap-2", children: harmony.triadic.map((c) => /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx41("span", { className: "text-xs text-muted-foreground w-24", children: "Triadic" }),
+              /* @__PURE__ */ jsx41("div", { className: "flex gap-2", children: harmony.triadic.map((c) => /* @__PURE__ */ jsx41(
                 Swatch,
                 {
                   color: c,
@@ -9449,8 +9526,8 @@ function ColorPicker({
               )) })
             ] }),
             /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx42("span", { className: "text-xs text-muted-foreground w-24", children: "Analogous" }),
-              /* @__PURE__ */ jsx42("div", { className: "flex gap-2", children: harmony.analogous.map((c) => /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx41("span", { className: "text-xs text-muted-foreground w-24", children: "Analogous" }),
+              /* @__PURE__ */ jsx41("div", { className: "flex gap-2", children: harmony.analogous.map((c) => /* @__PURE__ */ jsx41(
                 Swatch,
                 {
                   color: c,
@@ -9475,7 +9552,7 @@ function ColorPicker({
 
 // ../../components/ui/Grid.tsx
 import React35, { useId as useId6 } from "react";
-import { Fragment as Fragment15, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -9595,7 +9672,7 @@ var GridRoot = React35.forwardRef(
         style,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx43("style", { dangerouslySetInnerHTML: { __html: css } }),
+          /* @__PURE__ */ jsx42("style", { dangerouslySetInnerHTML: { __html: css } }),
           children
         ]
       }
@@ -9638,7 +9715,7 @@ var GridItem = React35.forwardRef(
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
     return /* @__PURE__ */ jsxs38(Fragment15, { children: [
-      animationDelay != null && /* @__PURE__ */ jsx43(
+      animationDelay != null && /* @__PURE__ */ jsx42(
         "style",
         {
           dangerouslySetInnerHTML: {
@@ -9646,7 +9723,7 @@ var GridItem = React35.forwardRef(
           }
         }
       ),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx42(
         "div",
         {
           ref,
@@ -9667,21 +9744,21 @@ var Grid_default = Grid;
 
 // ../../components/ui/ClientOnly.tsx
 import { useEffect as useEffect18, useState as useState31 } from "react";
-import { Fragment as Fragment16, jsx as jsx44 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx43 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const [hasMounted, setHasMounted] = useState31(false);
   useEffect18(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx44(Fragment16, { children: fallback });
+    return /* @__PURE__ */ jsx43(Fragment16, { children: fallback });
   }
-  return /* @__PURE__ */ jsx44(Fragment16, { children });
+  return /* @__PURE__ */ jsx43(Fragment16, { children });
 }
 
 // ../../components/ui/Loading.tsx
 import { Activity as Activity3 } from "lucide-react";
-import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
 var LoadingSpinner = ({
   size = "md",
   className,
@@ -9697,7 +9774,7 @@ var LoadingSpinner = ({
     foreground: "text-foreground",
     muted: "text-muted-foreground"
   };
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     Activity3,
     {
       className: cn(
@@ -9718,7 +9795,7 @@ var LoadingDots = ({
     foreground: "bg-foreground",
     muted: "bg-muted-foreground"
   };
-  return /* @__PURE__ */ jsx45("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx44(
     "div",
     {
       className: cn(
@@ -9740,7 +9817,7 @@ var LoadingBar = ({
   label
 }) => {
   const pct = progress ? Math.min(Math.max(progress, 0), 100) : void 0;
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       className: cn("w-full bg-muted rounded-full h-2", className),
@@ -9749,7 +9826,7 @@ var LoadingBar = ({
       "aria-valuemax": pct === void 0 ? void 0 : 100,
       "aria-valuenow": pct === void 0 ? void 0 : Math.round(pct),
       "aria-label": label || "Loading",
-      children: /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx44(
         "div",
         {
           className: cn(
@@ -9767,9 +9844,9 @@ var LoadingBar = ({
 
 // ../../components/ui/Table.tsx
 import React36 from "react";
-import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 var Table = React36.forwardRef(
-  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx46(
+  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn(
@@ -9779,7 +9856,7 @@ var Table = React36.forwardRef(
         "backdrop-blur-sm transition-all duration-300",
         containerClassName
       ),
-      children: /* @__PURE__ */ jsx46(
+      children: /* @__PURE__ */ jsx45(
         "table",
         {
           ref,
@@ -9810,7 +9887,7 @@ var TableHeader = React36.forwardRef(
   )
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var TableBody = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   "tbody",
   {
     ref,
@@ -9819,7 +9896,7 @@ var TableBody = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var TableFooter = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   "tfoot",
   {
     ref,
@@ -9831,7 +9908,7 @@ var TableFooter = React36.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var TableRow = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   "tr",
   {
     ref,
@@ -9845,7 +9922,7 @@ var TableRow = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var TableHead = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   "th",
   {
     ref,
@@ -9857,7 +9934,7 @@ var TableHead = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var TableCell = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   "td",
   {
     ref,
@@ -9866,7 +9943,7 @@ var TableCell = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var TableCaption = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   "caption",
   {
     ref,
@@ -9880,7 +9957,7 @@ TableCaption.displayName = "TableCaption";
 import { Filter as FilterIcon } from "lucide-react";
 import React37 from "react";
 import { useTranslations as useTranslations7 } from "next-intl";
-import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 function useDebounced(value, delay = 300) {
   const [debounced, setDebounced] = React37.useState(value);
   React37.useEffect(() => {
@@ -9903,6 +9980,7 @@ function DataTable({
   toolbar,
   enableColumnVisibilityToggle = true,
   enableDensityToggle = true,
+  enableHeaderAlignToggle = false,
   striped = true,
   // Mặc định bật màu nền sẽn kẽ cho các dòng
   columnDividers = false,
@@ -9910,6 +9988,7 @@ function DataTable({
   labels
 }) {
   const t = useTranslations7("Common");
+  const [headerAlign, setHeaderAlign] = React37.useState("left");
   const [visibleCols, setVisibleCols] = React37.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
   const [filters, setFilters] = React37.useState({});
   const [sort, setSort] = React37.useState(null);
@@ -9942,7 +10021,7 @@ function DataTable({
       className: "h-8 w-full text-sm"
     };
     if (col.filter.type === "text") {
-      return /* @__PURE__ */ jsx47(
+      return /* @__PURE__ */ jsx46(
         Input_default,
         {
           ...commonProps,
@@ -9957,7 +10036,7 @@ function DataTable({
     }
     if (col.filter.type === "select") {
       const options = col.filter.options || [];
-      return /* @__PURE__ */ jsx47(
+      return /* @__PURE__ */ jsx46(
         Combobox,
         {
           options: ["", ...options],
@@ -9973,7 +10052,7 @@ function DataTable({
       );
     }
     if (col.filter.type === "date") {
-      return /* @__PURE__ */ jsx47(
+      return /* @__PURE__ */ jsx46(
         DatePicker,
         {
           placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
@@ -9987,23 +10066,26 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ jsx47(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx47(
+  const renderHeader = /* @__PURE__ */ jsx46(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx46(
     TableHead,
     {
       style: { width: col.width },
       className: cn(
-        col.align === "right" && "text-right",
-        col.align === "center" && "text-center",
+        // Use column-specific align if defined, otherwise use global headerAlign
+        (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
+        (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
         columnDividers && colIdx > 0 && "border-l border-border/60"
       ),
-      children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
-        /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx47("span", { className: "truncate font-medium text-sm", children: col.title }),
-          col.sortable && /* @__PURE__ */ jsx47(
+      children: (() => {
+        const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
+        const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+        const titleContent = /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1 min-w-0 flex-shrink", children: [
+          /* @__PURE__ */ jsx46("span", { className: "truncate font-medium text-sm", children: col.title }),
+          col.sortable && /* @__PURE__ */ jsx46(
             "button",
             {
               className: cn(
-                "ml-1 p-1 rounded-sm transition-all duration-200 hover:bg-accent",
+                "p-1 rounded-sm transition-all duration-200 hover:bg-accent",
                 sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
               ),
               onClick: () => {
@@ -10017,7 +10099,7 @@ function DataTable({
               "aria-label": "Sort",
               title: `Sort by ${String(col.title)}`,
               children: /* @__PURE__ */ jsxs41("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                /* @__PURE__ */ jsx47(
+                /* @__PURE__ */ jsx46(
                   "path",
                   {
                     d: "M7 8l3-3 3 3",
@@ -10028,7 +10110,7 @@ function DataTable({
                     opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
                   }
                 ),
-                /* @__PURE__ */ jsx47(
+                /* @__PURE__ */ jsx46(
                   "path",
                   {
                     d: "M7 12l3 3 3-3",
@@ -10042,12 +10124,12 @@ function DataTable({
               ] })
             }
           )
-        ] }),
-        col.filter && /* @__PURE__ */ jsx47(
+        ] });
+        const filterContent = col.filter && /* @__PURE__ */ jsx46(
           Popover,
           {
-            placement: "bottom-start",
-            trigger: /* @__PURE__ */ jsx47(
+            placement: isRightAlign ? "bottom-end" : "bottom-start",
+            trigger: /* @__PURE__ */ jsx46(
               "button",
               {
                 className: cn(
@@ -10057,7 +10139,7 @@ function DataTable({
                 ),
                 "aria-label": "Filter",
                 title: "Filter",
-                children: /* @__PURE__ */ jsx47(FilterIcon, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx46(FilterIcon, { className: "h-4 w-4" })
               }
             ),
             children: /* @__PURE__ */ jsxs41("div", { className: "w-48 p-2 space-y-2", children: [
@@ -10066,7 +10148,7 @@ function DataTable({
                 col.title
               ] }),
               renderFilterControl(col),
-              filters[col.key] && /* @__PURE__ */ jsx47(
+              filters[col.key] && /* @__PURE__ */ jsx46(
                 "button",
                 {
                   onClick: () => {
@@ -10077,14 +10159,32 @@ function DataTable({
                       return newFilters;
                     });
                   },
-                  className: "text-xs text-muted-foreground hover:text-foreground underline mt-1",
+                  className: "text-xs text-destructive hover:underline",
                   children: "Clear filter"
                 }
               )
             ] })
           }
-        )
-      ] })
+        );
+        return /* @__PURE__ */ jsx46(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 select-none min-h-[2.5rem]",
+              isRightAlign && "justify-end",
+              isCenterAlign && "justify-center",
+              !isRightAlign && !isCenterAlign && "justify-between"
+            ),
+            children: isRightAlign ? /* @__PURE__ */ jsxs41(Fragment17, { children: [
+              filterContent,
+              titleContent
+            ] }) : /* @__PURE__ */ jsxs41(Fragment17, { children: [
+              titleContent,
+              filterContent
+            ] })
+          }
+        );
+      })()
     },
     col.key
   )) });
@@ -10129,13 +10229,13 @@ function DataTable({
   }, [processedData, curPage, curPageSize]);
   return /* @__PURE__ */ jsxs41("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ jsx47("div", { className: "text-sm text-muted-foreground", children: caption }),
+      /* @__PURE__ */ jsx46("div", { className: "text-sm text-muted-foreground", children: caption }),
       /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
-        enableDensityToggle && /* @__PURE__ */ jsx47(
+        enableDensityToggle && /* @__PURE__ */ jsx46(
           DropdownMenu_default,
           {
             trigger: /* @__PURE__ */ jsxs41(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ jsx47("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx47("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+              /* @__PURE__ */ jsx46("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx46("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
               labels?.density || t("density")
             ] }),
             items: [
@@ -10145,11 +10245,11 @@ function DataTable({
             ]
           }
         ),
-        enableColumnVisibilityToggle && /* @__PURE__ */ jsx47(
+        enableColumnVisibilityToggle && /* @__PURE__ */ jsx46(
           DropdownMenu_default,
           {
             trigger: /* @__PURE__ */ jsxs41(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ jsx47("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx47(
+              /* @__PURE__ */ jsx46("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx46(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -10167,28 +10267,42 @@ function DataTable({
                   setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
                 },
                 children: [
-                  /* @__PURE__ */ jsx47("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                  /* @__PURE__ */ jsx47("span", { className: "truncate", children: c.title })
+                  /* @__PURE__ */ jsx46("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ jsx46("span", { className: "truncate", children: c.title })
                 ]
               },
               c.key
             ))
           }
         ),
+        enableHeaderAlignToggle && /* @__PURE__ */ jsx46(
+          DropdownMenu_default,
+          {
+            trigger: /* @__PURE__ */ jsxs41(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ jsx46("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx46("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
+              labels?.headerAlign || t("headerAlign")
+            ] }),
+            items: [
+              { label: labels?.alignLeft || t("alignLeft"), onClick: () => setHeaderAlign("left") },
+              { label: labels?.alignCenter || t("alignCenter"), onClick: () => setHeaderAlign("center") },
+              { label: labels?.alignRight || t("alignRight"), onClick: () => setHeaderAlign("right") }
+            ]
+          }
+        ),
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ jsx47("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ jsxs41(
+    /* @__PURE__ */ jsx46("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ jsxs41(
       Table,
       {
         containerClassName: "border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent",
         className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-[5] [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
         children: [
-          /* @__PURE__ */ jsx47(TableHeader, { children: renderHeader }),
-          /* @__PURE__ */ jsx47(TableBody, { children: loading2 ? /* @__PURE__ */ jsx47(TableRow, { children: /* @__PURE__ */ jsx47(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx46(TableHeader, { children: renderHeader }),
+          /* @__PURE__ */ jsx46(TableBody, { children: loading2 ? /* @__PURE__ */ jsx46(TableRow, { children: /* @__PURE__ */ jsx46(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxs41("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ jsx47("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ jsx47(
+              /* @__PURE__ */ jsx46("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx46(
                 "path",
                 {
                   className: "opacity-75",
@@ -10197,12 +10311,12 @@ function DataTable({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx47("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx47(TableRow, { children: /* @__PURE__ */ jsx47(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => {
+            /* @__PURE__ */ jsx46("span", { className: "text-sm", children: "Loading..." })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx46(TableRow, { children: /* @__PURE__ */ jsx46(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => {
             const isLastRow = idx === displayedData.length - 1;
-            return /* @__PURE__ */ jsx47(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
+            return /* @__PURE__ */ jsx46(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
               const value = col.dataIndex ? row[col.dataIndex] : void 0;
-              return /* @__PURE__ */ jsx47(
+              return /* @__PURE__ */ jsx46(
                 TableCell,
                 {
                   className: cn(
@@ -10222,7 +10336,7 @@ function DataTable({
         ]
       }
     ) }),
-    totalItems > 0 && /* @__PURE__ */ jsx47("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ jsx47(
+    totalItems > 0 && /* @__PURE__ */ jsx46("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ jsx46(
       Pagination,
       {
         page: curPage,
@@ -10406,7 +10520,7 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new WeakSet()) {
   if (isPrimitive(object1) || isPrimitive(object2)) {
-    return object1 === object2;
+    return Object.is(object1, object2);
   }
   if (isDateObject(object1) && isDateObject(object2)) {
     return object1.getTime() === object2.getTime();
@@ -10428,7 +10542,7 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
     }
     if (key !== "ref") {
       const val2 = object2[key];
-      if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : val1 !== val2) {
+      if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : !Object.is(val1, val2)) {
         return false;
       }
     }
@@ -10441,48 +10555,76 @@ function useWatch(props) {
   const _defaultValue = React38.useRef(defaultValue);
   const _compute = React38.useRef(compute);
   const _computeFormValues = React38.useRef(void 0);
+  const _prevControl = React38.useRef(control);
+  const _prevName = React38.useRef(name);
   _compute.current = compute;
-  const defaultValueMemo = React38.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
-  const [value, updateValue] = React38.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
-  useIsomorphicLayoutEffect(() => control._subscribe({
-    name,
-    formState: {
-      values: true
-    },
-    exact,
-    callback: (formState) => {
-      if (!disabled) {
-        const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
-        if (_compute.current) {
-          const computedFormValues = _compute.current(formValues);
-          if (!deepEqual(computedFormValues, _computeFormValues.current)) {
-            updateValue(computedFormValues);
-            _computeFormValues.current = computedFormValues;
-          }
-        } else {
-          updateValue(formValues);
+  const [value, updateValue] = React38.useState(() => {
+    const defaultValue2 = control._getWatch(name, _defaultValue.current);
+    return _compute.current ? _compute.current(defaultValue2) : defaultValue2;
+  });
+  const getCurrentOutput = React38.useCallback((values) => {
+    const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+    return _compute.current ? _compute.current(formValues) : formValues;
+  }, [control._formValues, control._names, name]);
+  const refreshValue = React38.useCallback((values) => {
+    if (!disabled) {
+      const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+      if (_compute.current) {
+        const computedFormValues = _compute.current(formValues);
+        if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+          updateValue(computedFormValues);
+          _computeFormValues.current = computedFormValues;
         }
+      } else {
+        updateValue(formValues);
       }
     }
-  }), [control, disabled, name, exact]);
+  }, [control._formValues, control._names, disabled, name]);
+  useIsomorphicLayoutEffect(() => {
+    if (_prevControl.current !== control || !deepEqual(_prevName.current, name)) {
+      _prevControl.current = control;
+      _prevName.current = name;
+      refreshValue();
+    }
+    return control._subscribe({
+      name,
+      formState: {
+        values: true
+      },
+      exact,
+      callback: (formState) => {
+        refreshValue(formState.values);
+      }
+    });
+  }, [control, exact, name, refreshValue]);
   React38.useEffect(() => control._removeUnmounted());
-  return value;
+  const controlChanged = _prevControl.current !== control;
+  const prevName = _prevName.current;
+  const computedOutput = React38.useMemo(() => {
+    if (disabled) {
+      return null;
+    }
+    const nameChanged = !controlChanged && !deepEqual(prevName, name);
+    const shouldReturnImmediate = controlChanged || nameChanged;
+    return shouldReturnImmediate ? getCurrentOutput() : null;
+  }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
+  return computedOutput !== null ? computedOutput : value;
 }
 function useController(props) {
   const methods = useFormContext();
-  const { name, disabled, control = methods.control, shouldUnregister, defaultValue } = props;
+  const { name, disabled, control = methods.control, shouldUnregister, defaultValue, exact = true } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
   const defaultValueMemo = React38.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
     defaultValue: defaultValueMemo,
-    exact: true
+    exact
   });
   const formState = useFormState({
     control,
     name,
-    exact: true
+    exact
   });
   const _props = React38.useRef(props);
   const _previousNameRef = React38.useRef(void 0);
@@ -10699,10 +10841,11 @@ function isTraversable(value) {
 }
 function markFieldsDirty(data, fields = {}) {
   for (const key in data) {
-    if (isTraversable(data[key])) {
-      fields[key] = Array.isArray(data[key]) ? [] : {};
-      markFieldsDirty(data[key], fields[key]);
-    } else if (!isUndefined(data[key])) {
+    const value = data[key];
+    if (isTraversable(value)) {
+      fields[key] = Array.isArray(value) ? [] : {};
+      markFieldsDirty(value, fields[key]);
+    } else if (!isUndefined(value)) {
       fields[key] = true;
     }
   }
@@ -10713,14 +10856,16 @@ function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
     dirtyFieldsFromValues = markFieldsDirty(formValues);
   }
   for (const key in data) {
-    if (isTraversable(data[key])) {
+    const value = data[key];
+    if (isTraversable(value)) {
       if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
-        dirtyFieldsFromValues[key] = markFieldsDirty(data[key], Array.isArray(data[key]) ? [] : {});
+        dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {});
       } else {
-        getDirtyFields(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+        getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
       }
     } else {
-      dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+      const formValue = formValues[key];
+      dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
     }
   }
   return dirtyFieldsFromValues;
@@ -11175,7 +11320,7 @@ function createFormControl(props = {}) {
     if (field) {
       const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
       isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
-      _state.mount && _setValid();
+      _state.mount && !_state.action && _setValid();
     }
   };
   const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -11786,8 +11931,12 @@ function createFormControl(props = {}) {
       watchAll: false,
       focus: ""
     };
-    _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues;
+    _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues || !_options.shouldUnregister && !isEmptyObject(values);
     _state.watch = !!_options.shouldUnregister;
+    _state.action = false;
+    if (!keepStateOptions.keepErrors) {
+      _formState.errors = {};
+    }
     _subjects.state.next({
       submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
       isDirty: isEmptyResetValues ? false : keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
@@ -11984,11 +12133,15 @@ function useForm(props = {}) {
     }
   }, [control, formState.isDirty]);
   React38.useEffect(() => {
+    var _a;
     if (props.values && !deepEqual(props.values, _values.current)) {
       control._reset(props.values, {
         keepFieldsRef: true,
         ...control._options.resetOptions
       });
+      if (!((_a = control._options.resetOptions) === null || _a === void 0 ? void 0 : _a.keepIsValid)) {
+        control._setValid();
+      }
       _values.current = props.values;
       updateFormState((state) => ({ ...state }));
     } else {
@@ -12012,7 +12165,7 @@ function useForm(props = {}) {
 
 // ../../components/ui/Form.tsx
 import { useTranslations as useTranslations8 } from "next-intl";
-import { jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var FormConfigContext = React39.createContext({ size: "md" });
 var FormWrapper = ({
   children,
@@ -12032,14 +12185,14 @@ var FormWrapper = ({
     }
   }, [JSON.stringify(initialValues)]);
   const { validationSchema: _, ...formProps } = props;
-  return /* @__PURE__ */ jsx48(FormProvider, { ...methods, children: /* @__PURE__ */ jsx48(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx48("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+  return /* @__PURE__ */ jsx47(FormProvider, { ...methods, children: /* @__PURE__ */ jsx47(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx47("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
 var FormFieldContext = React39.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx48(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx48(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx47(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx47(Controller, { ...props }) });
 };
 var useFormField = () => {
   const fieldContext = React39.useContext(FormFieldContext);
@@ -12067,19 +12220,19 @@ var useFormField = () => {
 var FormItemContext = React39.createContext({});
 var FormItem = React39.forwardRef(({ className, ...props }, ref) => {
   const id = React39.useId();
-  return /* @__PURE__ */ jsx48(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx48("div", { ref, className: cn("space-y-2", className), ...props }) });
+  return /* @__PURE__ */ jsx47(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx47("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
 var FormLabel = React39.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   const config = React39.useContext(FormConfigContext);
   const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
-  return /* @__PURE__ */ jsx48(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
+  return /* @__PURE__ */ jsx47(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
 });
 FormLabel.displayName = "FormLabel";
 var FormControl = React39.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       ref,
@@ -12093,7 +12246,7 @@ var FormControl = React39.forwardRef(({ ...props }, ref) => {
 FormControl.displayName = "FormControl";
 var FormDescription = React39.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx48("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx47("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
 var FormMessage = React39.forwardRef(({ className, children, ...props }, ref) => {
@@ -12102,26 +12255,26 @@ var FormMessage = React39.forwardRef(({ className, children, ...props }, ref) =>
   if (!body) {
     return null;
   }
-  return /* @__PURE__ */ jsx48("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+  return /* @__PURE__ */ jsx47("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React39.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx48(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx48(
+var FormInput = React39.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx47(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx47(
   FormField,
   {
     name,
     render: ({ field }) => /* @__PURE__ */ jsxs42(FormItem, { children: [
-      /* @__PURE__ */ jsx48(FormControl, { children: /* @__PURE__ */ jsx48(Input_default, { size: props.size ?? size, ...field, ...props }) }),
-      /* @__PURE__ */ jsx48(FormMessage, {})
+      /* @__PURE__ */ jsx47(FormControl, { children: /* @__PURE__ */ jsx47(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ jsx47(FormMessage, {})
     ] })
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React39.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx48(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx48(
+var FormCheckbox = React39.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx47(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx47(
   FormField,
   {
     name,
     render: ({ field }) => /* @__PURE__ */ jsxs42(FormItem, { children: [
-      /* @__PURE__ */ jsx48(FormControl, { children: /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx47(FormControl, { children: /* @__PURE__ */ jsx47(
         Checkbox,
         {
           ref,
@@ -12135,20 +12288,20 @@ var FormCheckbox = React39.forwardRef(({ name, ...props }, ref) => /* @__PURE__
           ...props
         }
       ) }),
-      /* @__PURE__ */ jsx48(FormMessage, {})
+      /* @__PURE__ */ jsx47(FormMessage, {})
     ] })
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React39.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx48(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx48(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
+var FormSubmitButton = React39.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx47(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx47(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
 FormSubmitButton.displayName = "FormSubmitButton";
 
 // ../../components/ui/NotificationModal.tsx
 import { ExternalLink } from "lucide-react";
 import { useTranslations as useTranslations9 } from "next-intl";
-import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = useTranslations9("Common");
   if (!notification) return null;
@@ -12169,7 +12322,7 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx48(
     Modal_default,
     {
       isOpen,
@@ -12178,15 +12331,15 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       size: "md",
       children: /* @__PURE__ */ jsxs43("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
-          /* @__PURE__ */ jsx49("div", { className: cn(
+          /* @__PURE__ */ jsx48("div", { className: cn(
             "w-2 h-2 rounded-full",
             !notification.is_read ? "bg-primary" : "bg-border"
           ) }),
-          /* @__PURE__ */ jsx49("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
+          /* @__PURE__ */ jsx48("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
         ] }),
-        notification.title && /* @__PURE__ */ jsx49("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
-        notification.body && /* @__PURE__ */ jsx49("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-        /* @__PURE__ */ jsx49("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
+        notification.title && /* @__PURE__ */ jsx48("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
+        notification.body && /* @__PURE__ */ jsx48("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
+        /* @__PURE__ */ jsx48("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
         /* @__PURE__ */ jsxs43("div", { className: "flex gap-2 justify-end pt-2", children: [
           hasLink && /* @__PURE__ */ jsxs43(
             Button_default,
@@ -12196,12 +12349,12 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
               onClick: handleLinkClick,
               className: "gap-2",
               children: [
-                /* @__PURE__ */ jsx49(ExternalLink, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx48(ExternalLink, { className: "w-4 h-4" }),
                 openLinkText || t("openLink")
               ]
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx48(
             Button_default,
             {
               variant: "ghost",
@@ -12221,159 +12374,9 @@ var NotificationModal_default = NotificationModal;
 import Link2 from "next/link";
 import { usePathname } from "next/navigation";
 import { Phone } from "lucide-react";
-
-// ../../node_modules/react-icons/lib/iconBase.mjs
-import React41 from "react";
-
-// ../../node_modules/react-icons/lib/iconContext.mjs
-import React40 from "react";
-var DefaultContext = {
-  color: void 0,
-  size: void 0,
-  className: void 0,
-  style: void 0,
-  attr: void 0
-};
-var IconContext = React40.createContext && /* @__PURE__ */ React40.createContext(DefaultContext);
-
-// ../../node_modules/react-icons/lib/iconBase.mjs
-var _excluded = ["attr", "size", "title"];
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  for (var key in source) {
-    if (Object.prototype.hasOwnProperty.call(source, key)) {
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ React41.createElement(node.tag, _objectSpread({
-    key: i
-  }, node.attr), Tree2Element(node.child)));
-}
-function GenIcon(data) {
-  return (props) => /* @__PURE__ */ React41.createElement(IconBase, _extends({
-    attr: _objectSpread({}, data.attr)
-  }, props), Tree2Element(data.child));
-}
-function IconBase(props) {
-  var elem = (conf) => {
-    var {
-      attr,
-      size,
-      title
-    } = props, svgProps = _objectWithoutProperties(props, _excluded);
-    var computedSize = size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ React41.createElement("svg", _extends({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className,
-      style: _objectSpread(_objectSpread({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ React41.createElement("title", null, title), props.children);
-  };
-  return IconContext !== void 0 ? /* @__PURE__ */ React41.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
-}
-
-// ../../node_modules/react-icons/fa/index.mjs
-function FaInstagram(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" }, "child": [] }] })(props);
-}
-
-// ../../node_modules/react-icons/si/index.mjs
-function SiZalo(props) {
-  return GenIcon({ "tag": "svg", "attr": { "role": "img", "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M12.49 10.2722v-.4496h1.3467v6.3218h-.7704a.576.576 0 01-.5763-.5729l-.0006.0005a3.273 3.273 0 01-1.9372.6321c-1.8138 0-3.2844-1.4697-3.2844-3.2823 0-1.8125 1.4706-3.2822 3.2844-3.2822a3.273 3.273 0 011.9372.6321l.0006.0005zM6.9188 7.7896v.205c0 .3823-.051.6944-.2995 1.0605l-.03.0343c-.0542.0615-.1815.206-.2421.2843L2.024 14.8h4.8948v.7682a.5764.5764 0 01-.5767.5761H0v-.3622c0-.4436.1102-.6414.2495-.8476L4.8582 9.23H.1922V7.7896h6.7266zm8.5513 8.3548a.4805.4805 0 01-.4803-.4798v-7.875h1.4416v8.3548H15.47zM20.6934 9.6C22.52 9.6 24 11.0807 24 12.9044c0 1.8252-1.4801 3.306-3.3066 3.306-1.8264 0-3.3066-1.4808-3.3066-3.306 0-1.8237 1.4802-3.3044 3.3066-3.3044zm-10.1412 5.253c1.0675 0 1.9324-.8645 1.9324-1.9312 0-1.065-.865-1.9295-1.9324-1.9295s-1.9324.8644-1.9324 1.9295c0 1.0667.865 1.9312 1.9324 1.9312zm10.1412-.0033c1.0737 0 1.945-.8707 1.945-1.9453 0-1.073-.8713-1.9436-1.945-1.9436-1.0753 0-1.945.8706-1.945 1.9436 0 1.0746.8697 1.9453 1.945 1.9453z" }, "child": [] }] })(props);
-}
-
-// ../../components/ui/FloatingContacts.tsx
-import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
 function MessengerIcon(props) {
-  return /* @__PURE__ */ jsx50("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx49(
     "path",
     {
       d: "M12 2C6.477 2 2 6.145 2 11.235c0 2.93 1.35 5.542 3.464 7.25v3.515l3.344-1.836c.894.247 1.843.375 2.192.375 5.523 0 10-4.145 10-9.235S17.523 2 12 2zm.994 12.444l-2.563-2.73-5.004 2.73 5.507-5.84 2.626 2.729 4.942-2.729-5.508 5.84z",
@@ -12382,10 +12385,16 @@ function MessengerIcon(props) {
   ) });
 }
 function ZaloIcon(props) {
-  return /* @__PURE__ */ jsx50(SiZalo, { size: 20, ...props });
+  return /* @__PURE__ */ jsx49("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx49(
+    "path",
+    {
+      fill: "white",
+      d: "M24 4C12.954 4 4 12.954 4 24s8.954 20 20 20 20-8.954 20-20S35.046 4 24 4zm6.164 27.602h-4.239c-.405 0-.732-.328-.732-.732v-7.596l-2.646 7.933c-.096.288-.366.482-.67.482h-1.773c-.304 0-.574-.194-.67-.482l-2.647-7.933v7.596c0 .405-.327.732-.732.732h-2.873c-.405 0-.732-.328-.732-.732V17.134c0-.405.327-.732.732-.732h3.91c.32 0 .602.208.698.514l2.68 8.042 2.68-8.042c.096-.306.378-.514.698-.514h3.91c.405 0 .732.327.732.732v14.466c0 .404-.327.732-.732.732z"
+    }
+  ) });
 }
 function InstagramIcon(props) {
-  return /* @__PURE__ */ jsx50(FaInstagram, { size: 20, ...props });
+  return /* @__PURE__ */ jsx49("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ jsx49("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) });
 }
 function FloatingContacts({ className }) {
   const pathname = usePathname();
@@ -12421,7 +12430,7 @@ function FloatingContacts({ className }) {
     }
   ];
   return /* @__PURE__ */ jsxs44("div", { className: cn("fixed bottom-6 right-4 z-[100000]", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx49(
       Link2,
       {
         href: `tel:${hotline.replace(/\D/g, "")}`,
@@ -12432,10 +12441,10 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           "bg-[#22c55e]"
         ),
-        children: /* @__PURE__ */ jsx50(Phone, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx49(Phone, { className: "w-6 h-6" })
       }
     ),
-    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ jsx50(
+    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ jsx49(
       Link2,
       {
         href,
@@ -12447,7 +12456,7 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           bg
         ),
-        children: /* @__PURE__ */ jsx50(Icon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx49(Icon, { className: "w-6 h-6" })
       },
       key
     ))
@@ -12456,7 +12465,7 @@ function FloatingContacts({ className }) {
 
 // ../../components/ui/AccessDenied.tsx
 import { Lock, ShieldAlert, Ban } from "lucide-react";
-import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
 var VARIANT_STYLES = {
   destructive: { bg: "bg-destructive/5", border: "border-destructive/20", text: "text-destructive" },
   warning: { bg: "bg-warning/5", border: "border-warning/20", text: "text-warning" },
@@ -12477,13 +12486,13 @@ function AccessDenied({
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ jsx51(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ jsx51("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ jsx51(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+  return /* @__PURE__ */ jsx50(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx50("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ jsx50(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
     /* @__PURE__ */ jsxs45("div", { children: [
-      /* @__PURE__ */ jsx51("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ jsx51("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+      /* @__PURE__ */ jsx50("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+      /* @__PURE__ */ jsx50("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
     ] }),
-    children && /* @__PURE__ */ jsx51("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+    children && /* @__PURE__ */ jsx50("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
   ] }) });
 }
 
@@ -12491,7 +12500,7 @@ function AccessDenied({
 import { Moon, Sun, Monitor } from "lucide-react";
 import { useEffect as useEffect20, useRef as useRef12, useState as useState32 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
-import { Fragment as Fragment17, jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -12521,7 +12530,7 @@ function ThemeToggleHeadless({
     return { top, left, width };
   };
   return /* @__PURE__ */ jsxs46("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx51(
       Button_default,
       {
         variant: "ghost",
@@ -12539,13 +12548,13 @@ function ThemeToggleHeadless({
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Theme",
-        children: /* @__PURE__ */ jsx52(CurrentIcon, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx51(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs46(Fragment17, { children: [
-      typeof window !== "undefined" && createPortal10(/* @__PURE__ */ jsx52("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ jsxs46(Fragment18, { children: [
+      typeof window !== "undefined" && createPortal10(/* @__PURE__ */ jsx51("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal10(
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx51(
           "div",
           {
             className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
@@ -12553,7 +12562,7 @@ function ThemeToggleHeadless({
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
             children: /* @__PURE__ */ jsxs46("div", { className: "p-2", children: [
-              /* @__PURE__ */ jsx52("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
+              /* @__PURE__ */ jsx51("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
               themes.map((opt) => {
                 const Icon = opt.icon;
                 const active = theme === opt.value;
@@ -12573,9 +12582,9 @@ function ThemeToggleHeadless({
                     role: "menuitemradio",
                     "aria-checked": active,
                     children: [
-                      /* @__PURE__ */ jsx52(Icon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ jsx52("span", { className: "flex-1 text-left", children: opt.label }),
-                      active && /* @__PURE__ */ jsx52("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                      /* @__PURE__ */ jsx51(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx51("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ jsx51("div", { className: "w-2 h-2 rounded-full bg-primary" })
                     ]
                   },
                   opt.value
@@ -12594,7 +12603,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef13, useState as useState33 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -12617,7 +12626,7 @@ function LanguageSwitcherHeadless({
     return { top, left, width };
   };
   return /* @__PURE__ */ jsxs47("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx52(
       Button_default,
       {
         variant: "ghost",
@@ -12636,13 +12645,13 @@ function LanguageSwitcherHeadless({
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Language",
         title: labels?.heading ?? "Language",
-        children: /* @__PURE__ */ jsx53(Globe, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx52(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs47(Fragment18, { children: [
-      typeof window !== "undefined" && createPortal11(/* @__PURE__ */ jsx53("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ jsxs47(Fragment19, { children: [
+      typeof window !== "undefined" && createPortal11(/* @__PURE__ */ jsx52("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal11(
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx52(
           "div",
           {
             className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
@@ -12650,7 +12659,7 @@ function LanguageSwitcherHeadless({
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
             children: /* @__PURE__ */ jsxs47("div", { className: "p-2", children: [
-              /* @__PURE__ */ jsx53("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
+              /* @__PURE__ */ jsx52("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
               locales.map((language) => /* @__PURE__ */ jsxs47(
                 Button_default,
                 {
@@ -12664,9 +12673,9 @@ function LanguageSwitcherHeadless({
                   role: "menuitemradio",
                   "aria-checked": currentLocale === language.code,
                   children: [
-                    language.flag && /* @__PURE__ */ jsx53("span", { className: "text-lg", children: language.flag }),
-                    /* @__PURE__ */ jsx53("span", { className: "flex-1 text-left", children: language.name }),
-                    currentLocale === language.code && /* @__PURE__ */ jsx53("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    language.flag && /* @__PURE__ */ jsx52("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ jsx52("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ jsx52("div", { className: "w-2 h-2 rounded-full bg-primary" })
                   ]
                 },
                 language.code