@mesob/ui 0.5.5 → 0.5.6

package/dist/components.js

@@ -1010,35 +1010,53 @@ var inputGroupAddonVariants = cva3(
 function InputGroupAddon({
   className,
   align = "inline-start",
-  type = "button",
+  as: Component = "button",
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
-    "button",
-    {
-      type,
-      "data-slot": "input-group-addon",
-      "data-align": align,
-      className: cn(inputGroupAddonVariants({ align }), className),
-      onClick: (e) => {
-        if (e.target.closest("button")) {
-          return;
-        }
-        e.currentTarget.closest("[data-slot=input-group]")?.querySelector("input, textarea, [role=combobox]")?.focus();
-      },
-      onKeyDown: (e) => {
-        if (e.key !== "Enter" && e.key !== " ") {
-          return;
-        }
-        if (e.target.closest("button")) {
-          return;
-        }
-        e.preventDefault();
-        e.currentTarget.closest("[data-slot=input-group]")?.querySelector("input, textarea, [role=combobox]")?.focus();
-      },
-      ...props
+  const isButton = Component === "button";
+  const addonClass = cn(inputGroupAddonVariants({ align }), className);
+  const shared = {
+    "data-slot": "input-group-addon",
+    "data-align": align,
+    className: addonClass
+  };
+  const handleClick = (e) => {
+    if (!isButton) {
+      return;
     }
-  );
+    if (e.target.closest("button")) {
+      return;
+    }
+    e.currentTarget.closest("[data-slot=input-group]")?.querySelector("input, textarea, [role=combobox]")?.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (!isButton) {
+      return;
+    }
+    if (e.key !== "Enter" && e.key !== " ") {
+      return;
+    }
+    if (e.target.closest("button")) {
+      return;
+    }
+    e.preventDefault();
+    e.currentTarget.closest("[data-slot=input-group]")?.querySelector("input, textarea, [role=combobox]")?.focus();
+  };
+  if (isButton) {
+    const p2 = props;
+    return /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: p2.type ?? "button",
+        ...shared,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...p2
+      }
+    );
+  }
+  const p = props;
+  return /* @__PURE__ */ jsx11("div", { ...shared, ...p });
 }
 var inputGroupButtonVariants = cva3(
   "cn-input-group-button shadow-none flex items-center",
@@ -1171,7 +1189,7 @@ function CommandInput({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx12(InputGroupAddon, { children: /* @__PURE__ */ jsx12(IconSearch, { className: "cn-command-input-icon" }) })
+    /* @__PURE__ */ jsx12(InputGroupAddon, { as: "div", children: /* @__PURE__ */ jsx12(IconSearch, { className: "cn-command-input-icon" }) })
   ] }) });
 }
 function CommandList({
@@ -2990,15 +3008,20 @@ function AppSidebar({
 }
 
 // src/components/ui/card.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { Children, isValidElement as isValidElement2 } from "react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function Card({
   className,
   children,
-  size = "default",
+  size = "md",
   padding,
   radius,
-  withBorder,
+  withBorder = true,
   variant,
+  header,
+  title,
+  actions,
+  footer,
   ...props
 }) {
   const paddingClasses = {
@@ -3017,10 +3040,14 @@ function Card({
     xl: "rounded-[var(--radius-xl)]",
     full: "rounded-full"
   };
-  return /* @__PURE__ */ jsx22(
+  const hasBelowHeader = footer != null || children != null;
+  const hasBodyAboveFooter = children != null;
+  const sectioned = header != null || footer != null || title != null || actions != null;
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       "data-slot": "card",
+      "data-sectioned": sectioned ? "" : void 0,
       "data-size": size,
       className: cn(
         "cn-card group/card flex flex-col",
@@ -3032,17 +3059,60 @@ function Card({
         className
       ),
       ...props,
-      children
+      children: [
+        cardHeaderFromProps(hasBelowHeader, header, title, actions),
+        bodySlot(children, sectioned, padding !== void 0),
+        footer != null ? /* @__PURE__ */ jsx22(
+          CardFooter,
+          {
+            className: cn(hasBodyAboveFooter && "border-border/60 border-t"),
+            children: footer
+          }
+        ) : null
+      ]
     }
   );
 }
+function isSingleCardContent(children) {
+  if (Children.count(children) !== 1) {
+    return false;
+  }
+  const only = Children.only(children);
+  return isValidElement2(only) && only.props["data-slot"] === "card-content";
+}
+function bodySlot(children, sectioned, hasRootPadding) {
+  if (children == null) {
+    return children;
+  }
+  if (isSingleCardContent(children)) {
+    return children;
+  }
+  const wrapBody = sectioned || !hasRootPadding;
+  if (!wrapBody) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx22(CardContent, { children });
+}
+function cardHeaderFromProps(hasBelowHeader, header, title, actions) {
+  const divider = hasBelowHeader && "border-border/60 border-b";
+  if (header != null) {
+    return /* @__PURE__ */ jsx22(CardHeader, { className: cn(divider), children: header });
+  }
+  if (title != null || actions != null) {
+    return /* @__PURE__ */ jsxs15(CardHeader, { className: cn(divider, "items-center"), children: [
+      title != null ? /* @__PURE__ */ jsx22(CardTitle, { children: title }) : null,
+      actions != null ? /* @__PURE__ */ jsx22(CardAction, { children: actions }) : null
+    ] });
+  }
+  return null;
+}
 function CardHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx22(
     "div",
     {
       "data-slot": "card-header",
       className: cn(
-        "cn-card-header group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        "cn-card-header group/card-header @container/card-header grid auto-rows-min has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] has-data-[slot=card-description]:[&>[data-slot=card-action]]:row-span-2",
         className
       ),
       ...props
@@ -3075,7 +3145,7 @@ function CardAction({ className, ...props }) {
     {
       "data-slot": "card-action",
       className: cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        "col-start-2 row-start-1 inline-flex shrink-0 flex-wrap items-center justify-self-end gap-2 self-center",
         className
       ),
       ...props
@@ -3105,8 +3175,8 @@ function CardFooter({ className, ...props }) {
 
 // src/components/ui/loader.tsx
 import * as React5 from "react";
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
-var OvalLoader = ({ className }) => /* @__PURE__ */ jsxs15(
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var OvalLoader = ({ className }) => /* @__PURE__ */ jsxs16(
   "svg",
   {
     viewBox: "0 0 38 38",
@@ -3119,7 +3189,7 @@ var OvalLoader = ({ className }) => /* @__PURE__ */ jsxs15(
     "aria-label": "Loading",
     children: [
       /* @__PURE__ */ jsx23("title", { children: "Loading" }),
-      /* @__PURE__ */ jsx23("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs15("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+      /* @__PURE__ */ jsx23("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs16("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
         /* @__PURE__ */ jsx23(
           "circle",
           {
@@ -3212,7 +3282,7 @@ var Loader = React5.forwardRef(
     }
     const loaderSize = getLoaderSize2(size);
     const LoaderComponent = loaders[type];
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "output",
       {
         ref,
@@ -3262,7 +3332,7 @@ function Overlay({
 }
 
 // src/components/ui/loading-overlay.tsx
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function LoadingOverlay({
   visible,
   zIndex = 1e3,
@@ -3277,7 +3347,7 @@ function LoadingOverlay({
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       "data-slot": "loading-overlay",
@@ -3357,7 +3427,7 @@ function EntityPageLoading({
 }
 
 // src/components/app/error-page-view.tsx
-import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function ErrorPageView({
   code,
   title,
@@ -3366,15 +3436,15 @@ function ErrorPageView({
   secondaryAction,
   onRetry
 }) {
-  return /* @__PURE__ */ jsxs17("div", { className: "flex min-h-svh flex-col items-center justify-center bg-background px-6 py-16 sm:px-8", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: "flex min-h-svh flex-col items-center justify-center bg-background px-6 py-16 sm:px-8", children: [
     /* @__PURE__ */ jsx28("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--color-primary)/0.08,transparent)]" }),
-    /* @__PURE__ */ jsxs17("div", { className: "relative flex w-full min-w-72 max-w-3xl shrink-0 flex-col items-center gap-8 text-center", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "relative flex w-full min-w-72 max-w-3xl shrink-0 flex-col items-center gap-8 text-center", children: [
       /* @__PURE__ */ jsx28("span", { className: "font-mono text-[7rem] font-bold leading-none tracking-tighter text-muted-foreground/50", children: code }),
-      /* @__PURE__ */ jsxs17("div", { className: "w-full space-y-2", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "w-full space-y-2", children: [
         /* @__PURE__ */ jsx28("h1", { className: "text-2xl font-semibold tracking-tight text-foreground sm:text-3xl", children: title }),
         /* @__PURE__ */ jsx28("p", { className: "w-full text-sm text-muted-foreground sm:text-base", children: description })
       ] }),
-      /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-3 sm:flex-row sm:justify-center", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "flex w-full flex-col gap-3 sm:flex-row sm:justify-center", children: [
         primaryAction,
         secondaryAction,
         onRetry && /* @__PURE__ */ jsx28(Button, { variant: "ghost", size: "lg", onClick: onRetry, children: "Try again" })
@@ -3518,7 +3588,7 @@ function Text({
 }
 
 // src/components/app/no-data-available.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var isExternal = (href) => href.startsWith("http") || href.startsWith("//") || href.startsWith("mailto:") || href.startsWith("tel:");
 function NoDataAvailable({
   title,
@@ -3538,7 +3608,7 @@ function NoDataAvailable({
     alert: IconAlertCircle
   };
   const IconComponent = iconMap[iconType];
-  return /* @__PURE__ */ jsx29(Card, { children: /* @__PURE__ */ jsx29("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+  return /* @__PURE__ */ jsx29(Card, { children: /* @__PURE__ */ jsx29("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-4 text-center", children: [
     icon || /* @__PURE__ */ jsx29(IconComponent, { size: 80, className: "text-primary", stroke: 1.5 }),
     /* @__PURE__ */ jsx29(
       Text,
@@ -3575,13 +3645,13 @@ import { forwardRef as forwardRef3 } from "react";
 
 // src/components/ui/scroll-area.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
@@ -3630,9 +3700,9 @@ function ScrollBar({
 }
 
 // src/components/display-table/display-table.tsx
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 function renderTableData(data, opts) {
-  return /* @__PURE__ */ jsxs20(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment8, { children: [
     data.caption != null && /* @__PURE__ */ jsx31(
       DisplayTableCaption,
       {
@@ -3831,7 +3901,7 @@ import { useState as useState6 } from "react";
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function AlertDialog({
   ...props
 }) {
@@ -3868,7 +3938,7 @@ function AlertDialogContent({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs21(AlertDialogPortal, { children: [
+  return /* @__PURE__ */ jsxs22(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx32(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx32(
       AlertDialogPrimitive.Popup,
@@ -3981,7 +4051,7 @@ function AlertDialogCancel({
 }
 
 // src/components/entity/entity-bulk-actions.tsx
-import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function EntityBulkActions({
   selectedCount,
   actions,
@@ -4008,9 +4078,9 @@ function EntityBulkActions({
     });
   }
   const allActions = actions ? [...actions, ...defaultActions] : defaultActions;
-  return /* @__PURE__ */ jsxs22(Fragment9, { children: [
-    /* @__PURE__ */ jsxs22(DropdownMenu, { children: [
-      /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(Fragment9, { children: [
+    /* @__PURE__ */ jsxs23(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs23(
         DropdownMenuTrigger,
         {
           render: /* @__PURE__ */ jsx33(
@@ -4028,9 +4098,9 @@ function EntityBulkActions({
           ]
         }
       ),
-      /* @__PURE__ */ jsx33(DropdownMenuPositioner, { align: "end", children: /* @__PURE__ */ jsx33(DropdownMenuContent, { children: allActions.map((action, index) => /* @__PURE__ */ jsxs22("div", { children: [
+      /* @__PURE__ */ jsx33(DropdownMenuPositioner, { align: "end", children: /* @__PURE__ */ jsx33(DropdownMenuContent, { children: allActions.map((action, index) => /* @__PURE__ */ jsxs23("div", { children: [
         action.variant === "destructive" && index > 0 && /* @__PURE__ */ jsx33(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs23(
           DropdownMenuItem,
           {
             onClick: action.onClick,
@@ -4043,22 +4113,22 @@ function EntityBulkActions({
         )
       ] }, action.label)) }) })
     ] }),
-    /* @__PURE__ */ jsx33(AlertDialog, { open: showDeleteConfirm, onOpenChange: setShowDeleteConfirm, children: /* @__PURE__ */ jsxs22(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs22(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxs22(AlertDialogTitle, { children: [
+    /* @__PURE__ */ jsx33(AlertDialog, { open: showDeleteConfirm, onOpenChange: setShowDeleteConfirm, children: /* @__PURE__ */ jsxs23(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs23(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxs23(AlertDialogTitle, { children: [
           "Delete ",
           selectedCount,
           " ",
           itemName,
           "(s)?"
         ] }),
-        /* @__PURE__ */ jsxs22(AlertDialogDescription, { children: [
+        /* @__PURE__ */ jsxs23(AlertDialogDescription, { children: [
           "This will permanently delete the selected ",
           itemName,
           "(s). This action cannot be undone."
         ] })
       ] }),
-      /* @__PURE__ */ jsxs22(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsxs23(AlertDialogFooter, { children: [
         /* @__PURE__ */ jsx33(AlertDialogCancel, { children: "Cancel" }),
         /* @__PURE__ */ jsx33(
           AlertDialogAction,
@@ -4078,7 +4148,7 @@ function EntityBulkActions({
 
 // src/components/entity/entity-delete-confirm-button.tsx
 import { IconTrash as IconTrash2 } from "@tabler/icons-react";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var defaultTriggerClassName = "size-8 opacity-0 transition-opacity group-hover:opacity-100 text-destructive hover:text-destructive";
 function DeleteConfirmButton({
   entityName,
@@ -4101,14 +4171,14 @@ function DeleteConfirmButton({
       children: /* @__PURE__ */ jsx34(IconTrash2, { className: "size-4" })
     }
   );
-  return /* @__PURE__ */ jsxs23(AlertDialog, { children: [
+  return /* @__PURE__ */ jsxs24(AlertDialog, { children: [
     /* @__PURE__ */ jsx34(AlertDialogTrigger, { render: trigger ?? defaultTrigger }),
-    /* @__PURE__ */ jsxs23(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs23(AlertDialogHeader, { children: [
+    /* @__PURE__ */ jsxs24(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs24(AlertDialogHeader, { children: [
         /* @__PURE__ */ jsx34(AlertDialogTitle, { children: resolvedTitle }),
         /* @__PURE__ */ jsx34(AlertDialogDescription, { children: resolvedDescription })
       ] }),
-      /* @__PURE__ */ jsxs23(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsxs24(AlertDialogFooter, { children: [
         /* @__PURE__ */ jsx34(AlertDialogCancel, { children: cancelLabel }),
         /* @__PURE__ */ jsx34(AlertDialogAction, { variant: "destructive", onClick: onConfirm, children: confirmLabel })
       ] })
@@ -4121,7 +4191,7 @@ import { useMesob as useMesob5 } from "@mesob/ui/providers";
 import { IconChevronDown as IconChevronDown4, IconMenu2 as IconMenu22 } from "@tabler/icons-react";
 import {
   cloneElement,
-  isValidElement as isValidElement2,
+  isValidElement as isValidElement3,
   useLayoutEffect,
   useMemo as useMemo3,
   useRef as useRef3,
@@ -4130,13 +4200,13 @@ import {
 
 // src/components/layout/page/page-go-back.tsx
 import { IconArrowLeft } from "@tabler/icons-react";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function PageGoBack({
   onBack,
   label = "Go back",
   children
 }) {
-  return /* @__PURE__ */ jsx35(TooltipProvider, { children: /* @__PURE__ */ jsxs24(Tooltip, { children: [
+  return /* @__PURE__ */ jsx35(TooltipProvider, { children: /* @__PURE__ */ jsxs25(Tooltip, { children: [
     /* @__PURE__ */ jsx35(
       TooltipTrigger,
       {
@@ -4151,7 +4221,7 @@ function PageGoBack({
 // src/components/ui/select.tsx
 import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown3, IconChevronUp } from "@tabler/icons-react";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SELECT_TRIGGER_BASE_CN = "flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0";
 var SELECT_CONTENT_BASE_CN = "cn-menu-target relative isolate z-50 max-h-[min(100dvh,var(--available-height,100dvh))] w-[var(--anchor-width,auto)] origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none";
@@ -4182,7 +4252,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -4215,7 +4285,7 @@ function SelectContent({
       alignOffset,
       alignItemWithTrigger,
       className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs25(
+      children: /* @__PURE__ */ jsxs26(
         SelectPrimitive.Popup,
         {
           "data-slot": "select-content",
@@ -4255,7 +4325,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -4317,7 +4387,7 @@ function SelectScrollDownButton({
 }
 
 // src/components/entity/entity-detail-header.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 function EntityDetailHeader({
   title,
   icon,
@@ -4444,7 +4514,7 @@ function EntityDetailHeader({
     };
     const underline = isActive ? /* @__PURE__ */ jsx37("div", { className: "cn-entity-detail-header-underline absolute bottom-0 left-0 right-0 z-20 h-0.5 bg-primary" }) : null;
     if (tab.href && LinkComponent) {
-      return /* @__PURE__ */ jsxs26(
+      return /* @__PURE__ */ jsxs27(
         LinkComponent,
         {
           href: tab.href,
@@ -4460,7 +4530,7 @@ function EntityDetailHeader({
         tab.value
       );
     }
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs27(
       "button",
       {
         type: "button",
@@ -4505,12 +4575,12 @@ function EntityDetailHeader({
   if (loading) {
     return /* @__PURE__ */ jsx37("div", { className: cn("flex flex-col gap-4", className), children: /* @__PURE__ */ jsx37(Skeleton, { className: "h-24 w-full rounded-xl" }) });
   }
-  return /* @__PURE__ */ jsxs26("div", { className: cn("flex flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsxs26(Card, { className: "overflow-hidden p-0 gap-0", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between gap-2 pl-1  pr-4 pt-4", children: [
-        /* @__PURE__ */ jsxs26("div", { className: "flex items-center  ", children: [
+  return /* @__PURE__ */ jsxs27("div", { className: cn("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxs27(Card, { className: "overflow-hidden p-0 gap-0", children: [
+      /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between gap-2 pl-1  pr-4 pt-4", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex items-center  ", children: [
           resolvedBackButton,
-          icon && (isValidElement2(icon) ? cloneElement(
+          icon && (isValidElement3(icon) ? cloneElement(
             icon,
             {
               className: cn(
@@ -4523,14 +4593,14 @@ function EntityDetailHeader({
         ] }),
         actions && /* @__PURE__ */ jsx37("div", { className: "flex items-center gap-2", children: actions })
       ] }),
-      /* @__PURE__ */ jsxs26("div", { ref: containerRef, className: "w-full px-4", children: [
-        /* @__PURE__ */ jsx37("div", { className: "mb-3 w-full sm:hidden", children: /* @__PURE__ */ jsxs26(
+      /* @__PURE__ */ jsxs27("div", { ref: containerRef, className: "w-full px-4", children: [
+        /* @__PURE__ */ jsx37("div", { className: "mb-3 w-full sm:hidden", children: /* @__PURE__ */ jsxs27(
           Select,
           {
             value: activeTab,
             onValueChange: (v) => handleTabChange(v),
             children: [
-              /* @__PURE__ */ jsxs26(SelectTrigger, { className: "h-9 w-full gap-2 [&>svg:first-child]:shrink-0", children: [
+              /* @__PURE__ */ jsxs27(SelectTrigger, { className: "h-9 w-full gap-2 [&>svg:first-child]:shrink-0", children: [
                 /* @__PURE__ */ jsx37(IconMenu22, { className: "size-4 text-muted-foreground" }),
                 /* @__PURE__ */ jsx37(SelectValue, {})
               ] }),
@@ -4538,7 +4608,7 @@ function EntityDetailHeader({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           "div",
           {
             ref: tabsListRef,
@@ -4550,8 +4620,8 @@ function EntityDetailHeader({
                 );
                 return renderTab(tab, originalIndex);
               }),
-              overflowTabs.length > 0 && /* @__PURE__ */ jsxs26(DropdownMenu, { children: [
-                /* @__PURE__ */ jsxs26(
+              overflowTabs.length > 0 && /* @__PURE__ */ jsxs27(DropdownMenu, { children: [
+                /* @__PURE__ */ jsxs27(
                   DropdownMenuTrigger,
                   {
                     ref: dropdownTriggerRef,
@@ -4582,7 +4652,7 @@ function EntityDetailHeader({
 
 // src/components/entity/entity-drawer.tsx
 import { useState as useState8 } from "react";
-import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeClasses2 = {
   sm: "w-full min-w-0 sm:!max-w-[26rem]",
   md: "w-full min-w-0 sm:!max-w-[32rem]",
@@ -4610,7 +4680,7 @@ function EntityDrawer({
     setShowConfirm(false);
     onClose();
   };
-  return /* @__PURE__ */ jsxs27(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment10, { children: [
     /* @__PURE__ */ jsx38(
       Sheet,
       {
@@ -4625,7 +4695,7 @@ function EntityDrawer({
             }
           }
         },
-        children: /* @__PURE__ */ jsxs27(
+        children: /* @__PURE__ */ jsxs28(
           SheetContent,
           {
             className: `${sizeClasses2[size]} flex min-h-0 flex-col overflow-hidden p-0`,
@@ -4638,12 +4708,12 @@ function EntityDrawer({
         )
       }
     ),
-    /* @__PURE__ */ jsx38(AlertDialog, { open: showConfirm, onOpenChange: setShowConfirm, children: /* @__PURE__ */ jsxs27(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs27(AlertDialogHeader, { children: [
+    /* @__PURE__ */ jsx38(AlertDialog, { open: showConfirm, onOpenChange: setShowConfirm, children: /* @__PURE__ */ jsxs28(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs28(AlertDialogHeader, { children: [
         /* @__PURE__ */ jsx38(AlertDialogTitle, { children: "Discard changes?" }),
         /* @__PURE__ */ jsx38(AlertDialogDescription, { children: "You have unsaved changes. Are you sure you want to discard them?" })
       ] }),
-      /* @__PURE__ */ jsxs27(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsxs28(AlertDialogFooter, { children: [
         /* @__PURE__ */ jsx38(AlertDialogCancel, { children: "Cancel" }),
         /* @__PURE__ */ jsx38(
           AlertDialogAction,
@@ -4661,7 +4731,7 @@ function EntityDrawer({
 // src/components/entity/entity-drawer-trigger.tsx
 import { IconChevronRight as IconChevronRight3, IconPencil, IconPlus } from "@tabler/icons-react";
 import { useState as useState9 } from "react";
-import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function EntityDrawerTrigger({
   mode,
   entity,
@@ -4691,7 +4761,7 @@ function EntityDrawerTrigger({
     }
   };
   const buttonLabel = label || (mode === "new" ? `New ${entity}` : `Edit ${entity}`);
-  return /* @__PURE__ */ jsxs28(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment11, { children: [
     mode === "edit" && variant === "icon" && /* @__PURE__ */ jsx39(
       Button,
       {
@@ -4814,7 +4884,7 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/entity/entity-empty-state.tsx
-import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 function EntityEmptyState({
   icon: Icon = IconPackage,
   title,
@@ -4828,8 +4898,8 @@ function EntityEmptyState({
   const defaultTitle = `No ${entityName}s yet`;
   const defaultDescription = `Get started by creating your first ${entityName}.`;
   const defaultActionLabel = `Create ${entityName}`;
-  return /* @__PURE__ */ jsxs29(Empty, { className: cn("cn-entity-empty-state w-full", className), children: [
-    /* @__PURE__ */ jsxs29(EmptyHeader, { className: "flex w-full max-w-lg flex-col items-center text-center", children: [
+  return /* @__PURE__ */ jsxs30(Empty, { className: cn("cn-entity-empty-state w-full", className), children: [
+    /* @__PURE__ */ jsxs30(EmptyHeader, { className: "flex w-full max-w-lg flex-col items-center text-center", children: [
       /* @__PURE__ */ jsx41(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx41(Icon, { className: "size-5" }) }),
       /* @__PURE__ */ jsx41(EmptyTitle, { children: title ?? defaultTitle }),
       /* @__PURE__ */ jsx41(EmptyDescription, { children: description ?? defaultDescription })
@@ -4848,7 +4918,7 @@ function EntityEmptyState({
 // src/components/entity/entity-filter.tsx
 import { IconFilter } from "@tabler/icons-react";
 import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 function EntityFilter({
   options,
   placeholder = "Filter",
@@ -4873,15 +4943,15 @@ function EntityFilter({
   const validOptions = options.filter((opt) => opt.value !== "");
   const filterLabel = displayValue === "" ? allLabel : options.find((o) => o.value === displayValue)?.label ?? placeholder;
   const showPlaceholder = displayValue === void 0;
-  return /* @__PURE__ */ jsxs30("div", { className: cn("flex w-full items-center gap-2", className), children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cn("flex w-full items-center gap-2", className), children: [
     label && /* @__PURE__ */ jsx42("span", { className: "shrink-0 text-sm text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx42("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsx42("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs31(
       Select,
       {
         value: displayValue,
         onValueChange: (v) => handleChange(v),
         children: [
-          /* @__PURE__ */ jsxs30(SelectTrigger, { className: "h-9 w-full min-w-[150px]", children: [
+          /* @__PURE__ */ jsxs31(SelectTrigger, { className: "h-9 w-full min-w-[150px]", children: [
             /* @__PURE__ */ jsx42(IconFilter, { className: "size-4" }),
             /* @__PURE__ */ jsx42(
               "span",
@@ -4894,7 +4964,7 @@ function EntityFilter({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs30(SelectContent, { children: [
+          /* @__PURE__ */ jsxs31(SelectContent, { children: [
             hasAllOption && /* @__PURE__ */ jsx42(SelectItem, { value: "", children: allLabel }, ""),
             validOptions.map((option) => /* @__PURE__ */ jsx42(SelectItem, { value: option.value, children: option.label }, option.value))
           ] })
@@ -4906,7 +4976,7 @@ function EntityFilter({
 
 // src/components/entity/entity-filter-state.tsx
 import { IconFilter as IconFilter2 } from "@tabler/icons-react";
-import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
 function EntityFilterState({
   value,
   onValueChange,
@@ -4918,13 +4988,13 @@ function EntityFilterState({
   const allLabel = options.find((o) => o.value === "")?.label ?? "All";
   const displayValue = value === "" || value === "__all__" ? "" : value;
   const label = displayValue === "" ? allLabel : options.find((o) => o.value === displayValue)?.label ?? placeholder;
-  return /* @__PURE__ */ jsx43("div", { className: cn("flex w-full items-center gap-2", className), children: /* @__PURE__ */ jsx43("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsx43("div", { className: cn("flex w-full items-center gap-2", className), children: /* @__PURE__ */ jsx43("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs32(
     Select,
     {
       value: displayValue,
       onValueChange: (v) => onValueChange(v === "" ? "" : v),
       children: [
-        /* @__PURE__ */ jsxs31(SelectTrigger, { className: "h-9 w-full min-w-[150px]", children: [
+        /* @__PURE__ */ jsxs32(SelectTrigger, { className: "h-9 w-full min-w-[150px]", children: [
           /* @__PURE__ */ jsx43(IconFilter2, { className: "size-4" }),
           /* @__PURE__ */ jsx43(
             "span",
@@ -4937,7 +5007,7 @@ function EntityFilterState({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs31(SelectContent, { children: [
+        /* @__PURE__ */ jsxs32(SelectContent, { children: [
           hasAll && /* @__PURE__ */ jsx43(SelectItem, { value: "", children: allLabel }),
           options.filter((o) => o.value !== "").map((opt) => /* @__PURE__ */ jsx43(SelectItem, { value: opt.value, children: opt.label }, opt.value))
         ] })
@@ -4952,7 +5022,7 @@ import {
   IconRotateClockwise,
   IconTrash as IconTrash3
 } from "@tabler/icons-react";
-import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 function EntityFormActions({
   mode,
   onSubmit,
@@ -4968,7 +5038,7 @@ function EntityFormActions({
 }) {
   const defaultSubmitLabel = mode === "new" ? "Create" : "Update";
   const label = submitLabel || defaultSubmitLabel;
-  return /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
     onSubmit && /* @__PURE__ */ jsx44(
       Button,
       {
@@ -4980,7 +5050,7 @@ function EntityFormActions({
         children: label
       }
     ),
-    mode === "new" && onReset && /* @__PURE__ */ jsxs32(
+    mode === "new" && onReset && /* @__PURE__ */ jsxs33(
       Button,
       {
         variant: "outline",
@@ -4993,7 +5063,7 @@ function EntityFormActions({
         ]
       }
     ),
-    mode === "edit" && onDelete && /* @__PURE__ */ jsxs32(AlertDialog, { children: [
+    mode === "edit" && onDelete && /* @__PURE__ */ jsxs33(AlertDialog, { children: [
       /* @__PURE__ */ jsx44(
         AlertDialogTrigger,
         {
@@ -5010,16 +5080,16 @@ function EntityFormActions({
           children: deleteLabel
         }
       ),
-      /* @__PURE__ */ jsxs32(AlertDialogContent, { children: [
-        /* @__PURE__ */ jsxs32(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsxs33(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsxs33(AlertDialogHeader, { children: [
           /* @__PURE__ */ jsx44(AlertDialogTitle, { children: "Are you sure?" }),
-          /* @__PURE__ */ jsxs32(AlertDialogDescription, { children: [
+          /* @__PURE__ */ jsxs33(AlertDialogDescription, { children: [
             "This will permanently delete this ",
             itemName,
             ". This action cannot be undone."
           ] })
         ] }),
-        /* @__PURE__ */ jsxs32(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsxs33(AlertDialogFooter, { children: [
           /* @__PURE__ */ jsx44(AlertDialogCancel, { children: "Cancel" }),
           /* @__PURE__ */ jsx44(AlertDialogAction, { onClick: onDelete, variant: "destructive", children: "Delete" })
         ] })
@@ -5041,7 +5111,7 @@ function EntityFormActions({
 // src/components/entity/entity-header.tsx
 import { IconChevronDown as IconChevronDown5, IconChevronUp as IconChevronUp2 } from "@tabler/icons-react";
 import { useState as useState10 } from "react";
-import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 function EntityHeader({
   title,
   icon,
@@ -5055,13 +5125,13 @@ function EntityHeader({
   const [toolbarOpen, setToolbarOpen] = useState10(false);
   const hasToolbar = [search, filter, sort, view].some(Boolean);
   const hasTitleRow = title || icon || actions;
-  const content = /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-4", children: [
-    hasTitleRow && /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+  const content = /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-4", children: [
+    hasTitleRow && /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
         icon,
         /* @__PURE__ */ jsx45("span", { className: "text-lg font-semibold", children: title })
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-3", children: [
         actions,
         hasToolbar && /* @__PURE__ */ jsx45(
           Button,
@@ -5077,7 +5147,7 @@ function EntityHeader({
         )
       ] })
     ] }),
-    hasToolbar && /* @__PURE__ */ jsxs33(
+    hasToolbar && /* @__PURE__ */ jsxs34(
       "div",
       {
         className: cn(
@@ -5087,7 +5157,7 @@ function EntityHeader({
         ),
         children: [
           /* @__PURE__ */ jsx45("div", { className: "w-full min-w-0 flex-1 md:min-w-[12rem]", children: search }),
-          /* @__PURE__ */ jsxs33("div", { className: "flex w-full shrink-0 flex-col gap-2 *:w-full md:w-auto md:flex-row md:items-center md:gap-2 md:*:w-auto", children: [
+          /* @__PURE__ */ jsxs34("div", { className: "flex w-full shrink-0 flex-col gap-2 *:w-full md:w-auto md:flex-row md:items-center md:gap-2 md:*:w-auto", children: [
             filter,
             sort,
             view
@@ -5189,7 +5259,7 @@ function TableCaption({
 }
 
 // src/components/entity/entity-loading-state.tsx
-import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 function EntityLoadingState({
   view,
   rowCount = 5,
@@ -5213,7 +5283,7 @@ function EntityLoadingState({
     return Array.from({ length: cardCount }, makeKey);
   }, [cardCount, makeKey]);
   if (view === "table") {
-    return /* @__PURE__ */ jsx47("div", { className: cn("cn-entity-loading-table", className), children: /* @__PURE__ */ jsxs34(Table, { children: [
+    return /* @__PURE__ */ jsx47("div", { className: cn("cn-entity-loading-table", className), children: /* @__PURE__ */ jsxs35(Table, { children: [
       /* @__PURE__ */ jsx47(TableHeader, { children: /* @__PURE__ */ jsx47(TableRow, { children: Array.from({ length: columnCount }).map((_, i) => /* @__PURE__ */ jsx47(TableHead, { children: /* @__PURE__ */ jsx47(Skeleton, { className: "h-4 w-24" }) }, headerKeys[i])) }) }),
       /* @__PURE__ */ jsx47(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx47(TableRow, { children: Array.from({ length: columnCount }).map((_2, colIndex) => /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Skeleton, { className: "h-4 w-full" }) }, cellKeys[rowIndex][colIndex])) }, rowKeys[rowIndex])) })
     ] }) });
@@ -5225,12 +5295,12 @@ function EntityLoadingState({
         "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
         className
       ),
-      children: Array.from({ length: cardCount }).map((_, i) => /* @__PURE__ */ jsxs34("div", { className: "cn-entity-loading-card", children: [
-        /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+      children: Array.from({ length: cardCount }).map((_, i) => /* @__PURE__ */ jsxs35("div", { className: "cn-entity-loading-card", children: [
+        /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx47(Skeleton, { className: "h-4 w-4 rounded-full" }),
           /* @__PURE__ */ jsx47(Skeleton, { className: "h-5 w-32" })
         ] }),
-        /* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs35("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ jsx47(Skeleton, { className: "h-5 w-16" }),
           /* @__PURE__ */ jsx47(Skeleton, { className: "h-5 w-16" })
         ] }),
@@ -5247,7 +5317,7 @@ import { IconSearch as IconSearch3, IconX as IconX3 } from "@tabler/icons-react"
 import { parseAsInteger as parseAsInteger2, parseAsString as parseAsString2, useQueryState as useQueryState2 } from "nuqs";
 import { useRef as useRef4 } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
 function EntitySearch({
   paramKey = "search",
   placeholder = "Search...",
@@ -5270,7 +5340,7 @@ function EntitySearch({
       ref.current.value = "";
     }
   };
-  return /* @__PURE__ */ jsxs35("div", { className: cn("relative w-full min-w-0", className), children: [
+  return /* @__PURE__ */ jsxs36("div", { className: cn("relative w-full min-w-0", className), children: [
     /* @__PURE__ */ jsx48(IconSearch3, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
     /* @__PURE__ */ jsx48(
       Input,
@@ -5298,7 +5368,7 @@ function EntitySearch({
 import { IconSearch as IconSearch4, IconX as IconX4 } from "@tabler/icons-react";
 import { useRef as useRef5 } from "react";
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
-import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
 function EntitySearchState({
   value,
   onValueChange,
@@ -5316,7 +5386,7 @@ function EntitySearchState({
       ref.current.value = "";
     }
   };
-  return /* @__PURE__ */ jsxs36("div", { className: cn("relative w-full min-w-0", className), children: [
+  return /* @__PURE__ */ jsxs37("div", { className: cn("relative w-full min-w-0", className), children: [
     /* @__PURE__ */ jsx49(IconSearch4, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
     /* @__PURE__ */ jsx49(
       Input,
@@ -5342,7 +5412,7 @@ function EntitySearchState({
 
 // src/components/layout/section/section.tsx
 import { useState as useState11 } from "react";
-import { jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
 function Section({
   title,
   children,
@@ -5361,14 +5431,14 @@ function Section({
     setOpen(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     Card,
     {
       className: cn("gap-0 p-0", className),
       "data-slot": "section",
       "data-state": open ? "open" : "closed",
       children: [
-        /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsxs38(
           "div",
           {
             className: cn(
@@ -5378,7 +5448,7 @@ function Section({
             ),
             children: [
               /* @__PURE__ */ jsx50("div", { className: "text-lg font-semibold", children: title }),
-              /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
                 open && actions,
                 /* @__PURE__ */ jsx50(
                   Button,
@@ -5395,7 +5465,7 @@ function Section({
             ]
           }
         ),
-        open ? /* @__PURE__ */ jsxs37("div", { "data-slot": "section-content", children: [
+        open ? /* @__PURE__ */ jsxs38("div", { "data-slot": "section-content", children: [
           /* @__PURE__ */ jsx50("div", { className: cn("p-4", contentClassName), children: lazy ? open && children : children }),
           footer ? /* @__PURE__ */ jsx50(
             "div",
@@ -5416,7 +5486,7 @@ import {
   IconSortAscendingLetters,
   IconSortDescendingLetters
 } from "@tabler/icons-react";
-import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 function EntitySortState({
   sort,
   order,
@@ -5426,8 +5496,8 @@ function EntitySortState({
   className
 }) {
   const sortLabel = options.find((o) => o.value === sort)?.label;
-  return /* @__PURE__ */ jsxs38("div", { className: cn("flex w-full items-center gap-0", className), children: [
-    /* @__PURE__ */ jsx51("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs38(Select, { value: sort, onValueChange: (v) => onSortChange(v), children: [
+  return /* @__PURE__ */ jsxs39("div", { className: cn("flex w-full items-center gap-0", className), children: [
+    /* @__PURE__ */ jsx51("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs39(Select, { value: sort, onValueChange: (v) => onSortChange(v), children: [
       /* @__PURE__ */ jsx51(SelectTrigger, { className: "h-9 w-full min-w-[150px] rounded-r-none border-r-0", children: /* @__PURE__ */ jsx51(
         "span",
         {
@@ -5575,7 +5645,7 @@ function EntityViewToggleState({
 }
 
 // src/components/entity/entity-section.tsx
-import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 function EntitySection({
   title,
   icon,
@@ -5621,7 +5691,7 @@ function EntitySection({
   const filterOpts = config.filterOptions ?? filterOptions;
   const sortOpts = config.sortOptions ?? sortOptions;
   const viewOpts = config.views ?? views;
-  return /* @__PURE__ */ jsx54(Section, { title, onOpenChange, actions, children: /* @__PURE__ */ jsxs39("div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ jsx54(Section, { title, onOpenChange, actions, children: /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
     showToolbar && /* @__PURE__ */ jsx54(
       EntityHeader,
       {
@@ -5728,7 +5798,7 @@ function Checkbox({
 // src/components/ui/chip.tsx
 import { IconX as IconX5 } from "@tabler/icons-react";
 import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx56, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
 var chipVariants = cva8(
   "cn-chip inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium transition-colors border",
   {
@@ -5753,7 +5823,7 @@ function Chip({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       "data-slot": "chip",
@@ -5784,7 +5854,7 @@ import {
   IconChevronsRight
 } from "@tabler/icons-react";
 import { useTranslations } from "next-intl";
-import { jsx as jsx57, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
 function addRange(pages, start, end) {
   for (let i = start; i <= end; i++) {
     pages.push(i);
@@ -5838,16 +5908,16 @@ function DataTablePagination({
   const hasSelection = selectedRows > 0;
   const rowText = hasSelection ? `${selectedRows} ${t("of")} ${totalRows} ${rowLabel} ${t("selected")}` : `${totalRows} ${rowLabel} ${t("total")}`;
   const pageText = `${t("page")} ${pageIndex + 1} ${t("of")} ${pageCount || 1}`;
-  return /* @__PURE__ */ jsxs41("div", { className: "cn-data-table-pagination flex flex-col sm:flex-row", children: [
-    /* @__PURE__ */ jsxs41("div", { className: "cn-data-table-pagination-left flex items-center justify-center sm:justify-start", children: [
-      /* @__PURE__ */ jsx57("div", { className: "cn-data-table-pagination-summary text-muted-foreground", children: /* @__PURE__ */ jsxs41("span", { children: [
+  return /* @__PURE__ */ jsxs42("div", { className: "cn-data-table-pagination flex flex-col sm:flex-row", children: [
+    /* @__PURE__ */ jsxs42("div", { className: "cn-data-table-pagination-left flex items-center justify-center sm:justify-start", children: [
+      /* @__PURE__ */ jsx57("div", { className: "cn-data-table-pagination-summary text-muted-foreground", children: /* @__PURE__ */ jsxs42("span", { children: [
         rowText,
         /* @__PURE__ */ jsx57("span", { className: "mx-2", children: "\xB7" }),
         pageText
       ] }) }),
-      /* @__PURE__ */ jsxs41("div", { className: "cn-data-table-pagination-size flex items-center", children: [
+      /* @__PURE__ */ jsxs42("div", { className: "cn-data-table-pagination-size flex items-center", children: [
         /* @__PURE__ */ jsx57("span", { className: "cn-data-table-pagination-size-label font-medium whitespace-nowrap", children: t("rowsPerPage") }),
-        /* @__PURE__ */ jsxs41(
+        /* @__PURE__ */ jsxs42(
           Select,
           {
             value: `${pageSize}`,
@@ -5866,13 +5936,13 @@ function DataTablePagination({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx57("div", { className: "cn-data-table-pagination-right flex justify-center sm:justify-end", children: /* @__PURE__ */ jsxs41(
+    /* @__PURE__ */ jsx57("div", { className: "cn-data-table-pagination-right flex justify-center sm:justify-end", children: /* @__PURE__ */ jsxs42(
       "nav",
       {
         "aria-label": "Pagination",
         className: "cn-data-table-pagination-nav flex items-center gap-1",
         children: [
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsxs42(
             Button,
             {
               variant: "outline",
@@ -5887,7 +5957,7 @@ function DataTablePagination({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsxs42(
             Button,
             {
               variant: "outline",
@@ -5932,7 +6002,7 @@ function DataTablePagination({
               pageNum
             );
           }),
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsxs42(
             Button,
             {
               variant: "outline",
@@ -5947,7 +6017,7 @@ function DataTablePagination({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs41(
+          /* @__PURE__ */ jsxs42(
             Button,
             {
               variant: "outline",
@@ -6054,7 +6124,7 @@ function RadioGroupItem({
 }
 
 // src/components/entity/entity-selector-modal.tsx
-import { jsx as jsx59, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
 var modalSizeClasses = {
   sm: "sm:max-w-[28rem]",
   md: "sm:max-w-[36rem]",
@@ -6071,7 +6141,7 @@ function EntitySelectorModal({
   footer,
   children
 }) {
-  return /* @__PURE__ */ jsx59(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsx59(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(
     DialogContent,
     {
       className: cn(
@@ -6114,7 +6184,7 @@ function useEntityPagination({
 }
 
 // src/components/entity/entity-selector.tsx
-import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs44 } from "react/jsx-runtime";
 function EntitySelectorFooter({
   onCancel,
   onSelect,
@@ -6139,9 +6209,9 @@ function EntitySelectorFooter({
       hint = ` (${selectedCount})`;
     }
   }
-  return /* @__PURE__ */ jsxs43(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs44(Fragment12, { children: [
     /* @__PURE__ */ jsx60(Button, { variant: "outline", size: "md", onClick: onCancel, children: "Cancel" }),
-    /* @__PURE__ */ jsxs43(
+    /* @__PURE__ */ jsxs44(
       Button,
       {
         variant: "default",
@@ -6301,7 +6371,7 @@ function EntitySelector({
       }
     );
   } else {
-    content = /* @__PURE__ */ jsxs43(Fragment12, { children: [
+    content = /* @__PURE__ */ jsxs44(Fragment12, { children: [
       /* @__PURE__ */ jsx60(
         EntityHeader,
         {
@@ -6344,13 +6414,13 @@ function EntitySelector({
           ) : void 0
         }
       ),
-      state2.view === "table" || !renderCard ? /* @__PURE__ */ jsxs43("div", { className: "space-y-4", children: [
-        multiple ? /* @__PURE__ */ jsxs43(DisplayTable, { withTableBorder: true, children: [
-          /* @__PURE__ */ jsx60(DisplayTableThead, { children: /* @__PURE__ */ jsxs43(DisplayTableTr, { children: [
+      state2.view === "table" || !renderCard ? /* @__PURE__ */ jsxs44("div", { className: "space-y-4", children: [
+        multiple ? /* @__PURE__ */ jsxs44(DisplayTable, { withTableBorder: true, children: [
+          /* @__PURE__ */ jsx60(DisplayTableThead, { children: /* @__PURE__ */ jsxs44(DisplayTableTr, { children: [
             /* @__PURE__ */ jsx60(DisplayTableTh, { className: "w-[50px]" }),
             columns.map((col) => /* @__PURE__ */ jsx60(DisplayTableTh, { className: col.className, children: col.header }, col.key))
           ] }) }),
-          /* @__PURE__ */ jsx60(DisplayTableTbody, { children: items.map((item) => /* @__PURE__ */ jsxs43(
+          /* @__PURE__ */ jsx60(DisplayTableTbody, { children: items.map((item) => /* @__PURE__ */ jsxs44(
             DisplayTableTr,
             {
               className: "group",
@@ -6380,12 +6450,12 @@ function EntitySelector({
                 handleRowSelectionChange(() => ({ [id]: true }));
               }
             },
-            children: /* @__PURE__ */ jsxs43(DisplayTable, { withTableBorder: true, children: [
-              /* @__PURE__ */ jsx60(DisplayTableThead, { children: /* @__PURE__ */ jsxs43(DisplayTableTr, { children: [
+            children: /* @__PURE__ */ jsxs44(DisplayTable, { withTableBorder: true, children: [
+              /* @__PURE__ */ jsx60(DisplayTableThead, { children: /* @__PURE__ */ jsxs44(DisplayTableTr, { children: [
                 /* @__PURE__ */ jsx60(DisplayTableTh, { className: "w-[50px]" }),
                 columns.map((col) => /* @__PURE__ */ jsx60(DisplayTableTh, { className: col.className, children: col.header }, col.key))
               ] }) }),
-              /* @__PURE__ */ jsx60(DisplayTableTbody, { children: items.map((item) => /* @__PURE__ */ jsxs43(
+              /* @__PURE__ */ jsx60(DisplayTableTbody, { children: items.map((item) => /* @__PURE__ */ jsxs44(
                 DisplayTableTr,
                 {
                   className: cn(
@@ -6418,7 +6488,7 @@ function EntitySelector({
             }
           }
         )
-      ] }) : /* @__PURE__ */ jsxs43("div", { className: "space-y-4", children: [
+      ] }) : /* @__PURE__ */ jsxs44("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsx60("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: items.map((item) => /* @__PURE__ */ jsx60("div", { children: renderCard(
           item,
           Boolean(rowSelection[item.id]),
@@ -6456,7 +6526,7 @@ function EntitySelector({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs43(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs44(Fragment12, { children: [
     /* @__PURE__ */ jsx60(
       "div",
       {
@@ -6492,8 +6562,8 @@ function EntitySelector({
             maxSelect
           }
         ),
-        children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-4", children: [
-          selectedItems.length > 0 && /* @__PURE__ */ jsxs43("div", { className: "cn-selector-selected-bar", children: [
+        children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-4", children: [
+          selectedItems.length > 0 && /* @__PURE__ */ jsxs44("div", { className: "cn-selector-selected-bar", children: [
             /* @__PURE__ */ jsx60("span", { className: "cn-selector-selected-bar-label", children: "Selected:" }),
             selectedItems.map((item) => /* @__PURE__ */ jsx60(
               Chip,
@@ -6522,7 +6592,7 @@ import {
   IconSortDescendingLetters as IconSortDescendingLetters2
 } from "@tabler/icons-react";
 import { parseAsInteger as parseAsInteger3, parseAsString as parseAsString3, useQueryState as useQueryState3 } from "nuqs";
-import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs45 } from "react/jsx-runtime";
 function EntitySort({
   options,
   defaultSort = "createdAt",
@@ -6547,8 +6617,8 @@ function EntitySort({
     setPage(1);
   };
   const sortLabel = options.find((o) => o.value === sort)?.label;
-  return /* @__PURE__ */ jsxs44("div", { className: cn("flex w-full items-center gap-0", className), children: [
-    /* @__PURE__ */ jsx61("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45("div", { className: cn("flex w-full items-center gap-0", className), children: [
+    /* @__PURE__ */ jsx61("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs45(
       Select,
       {
         value: sort,
@@ -6828,7 +6898,7 @@ function Image({
 }
 
 // src/components/files/file-upload.tsx
-import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
 function formatBytes(size) {
   if (!size) {
     return null;
@@ -6924,7 +6994,7 @@ function FilePreview({ item }) {
       {
         "data-slot": "file-upload-preview",
         className: "cn-file-upload-preview flex aspect-[4/3] items-center justify-center p-3",
-        children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+        children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-col items-center gap-2 text-center", children: [
           /* @__PURE__ */ jsx64(AudioIcon, { className: "text-muted-foreground size-8" }),
           /* @__PURE__ */ jsx64("span", { className: "text-muted-foreground text-xs", children: "Audio preview" })
         ] })
@@ -7062,7 +7132,7 @@ function FileUpload({
   let listContent = null;
   if (showList) {
     if (items.length > 0) {
-      listContent = /* @__PURE__ */ jsxs45(
+      listContent = /* @__PURE__ */ jsxs46(
         "div",
         {
           "data-slot": "file-upload-list",
@@ -7070,19 +7140,19 @@ function FileUpload({
           children: [
             items.map((item) => {
               const FileIcon = getFileIcon(item.type);
-              return /* @__PURE__ */ jsxs45(
+              return /* @__PURE__ */ jsxs46(
                 "div",
                 {
                   "data-slot": "file-upload-item",
                   className: "cn-file-upload-item flex flex-col gap-3 overflow-hidden",
                   children: [
                     /* @__PURE__ */ jsx64(FilePreview, { item }),
-                    /* @__PURE__ */ jsxs45("div", { className: "flex items-start justify-between gap-3 px-3 pb-3", children: [
-                      /* @__PURE__ */ jsxs45("div", { className: "flex min-w-0 items-start gap-3", children: [
+                    /* @__PURE__ */ jsxs46("div", { className: "flex items-start justify-between gap-3 px-3 pb-3", children: [
+                      /* @__PURE__ */ jsxs46("div", { className: "flex min-w-0 items-start gap-3", children: [
                         /* @__PURE__ */ jsx64("div", { className: "cn-file-upload-item-icon text-muted-foreground flex size-9 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx64(FileIcon, { className: "size-4" }) }),
-                        /* @__PURE__ */ jsxs45("div", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsxs46("div", { className: "min-w-0", children: [
                           /* @__PURE__ */ jsx64("div", { className: "truncate text-sm font-medium", children: item.name }),
-                          /* @__PURE__ */ jsxs45("div", { className: "text-muted-foreground flex flex-wrap gap-x-2 text-xs", children: [
+                          /* @__PURE__ */ jsxs46("div", { className: "text-muted-foreground flex flex-wrap gap-x-2 text-xs", children: [
                             formatBytes(item.size) ? /* @__PURE__ */ jsx64("span", { children: formatBytes(item.size) }) : null,
                             /* @__PURE__ */ jsx64("span", { children: item.source === "remote" ? "uploaded" : "local" })
                           ] })
@@ -7131,13 +7201,13 @@ function FileUpload({
       );
     }
   }
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       "data-slot": "file-upload-wrapper",
       className: cn("flex flex-col gap-4", className),
       children: [
-        /* @__PURE__ */ jsxs45(
+        /* @__PURE__ */ jsxs46(
           "label",
           {
             "data-slot": "file-upload-dropzone",
@@ -7172,15 +7242,15 @@ function FileUpload({
                   onChange: handleInputChange
                 }
               ),
-              /* @__PURE__ */ jsxs45(
+              /* @__PURE__ */ jsxs46(
                 "div",
                 {
                   "data-slot": "file-upload-prompt",
                   className: "cn-file-upload-prompt flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
                   children: [
-                    /* @__PURE__ */ jsxs45("div", { className: "cn-file-upload-prompt-main flex items-start gap-3", children: [
+                    /* @__PURE__ */ jsxs46("div", { className: "cn-file-upload-prompt-main flex items-start gap-3", children: [
                       /* @__PURE__ */ jsx64("div", { className: "cn-file-upload-icon text-muted-foreground flex size-10 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx64(IconUpload, { className: "size-4" }) }),
-                      /* @__PURE__ */ jsxs45("div", { className: "cn-file-upload-copy space-y-1", children: [
+                      /* @__PURE__ */ jsxs46("div", { className: "cn-file-upload-copy space-y-1", children: [
                         /* @__PURE__ */ jsx64(
                           "div",
                           {
@@ -7197,7 +7267,7 @@ function FileUpload({
                             children: description
                           }
                         ),
-                        accept ? /* @__PURE__ */ jsxs45(
+                        accept ? /* @__PURE__ */ jsxs46(
                           "div",
                           {
                             "data-slot": "file-upload-accept",
@@ -7255,7 +7325,7 @@ import Cropper from "react-easy-crop";
 // src/components/ui/slider.tsx
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
 import * as React8 from "react";
-import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
 function Slider({
   className,
   defaultValue,
@@ -7293,7 +7363,7 @@ function Slider({
       max,
       thumbAlignment: "edge",
       ...props,
-      children: /* @__PURE__ */ jsxs46(SliderPrimitive.Control, { className: "cn-slider relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", children: [
+      children: /* @__PURE__ */ jsxs47(SliderPrimitive.Control, { className: "cn-slider relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", children: [
         /* @__PURE__ */ jsx65(
           SliderPrimitive.Track,
           {
@@ -7400,7 +7470,7 @@ async function getCroppedImage({
 
 // src/components/files/image-crop-dialog.tsx
 import "react-easy-crop/react-easy-crop.css";
-import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
 function ImageCropDialog({
   open,
   file,
@@ -7472,9 +7542,9 @@ function ImageCropDialog({
       setSaving(false);
     }
   };
-  return /* @__PURE__ */ jsx66(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs47(DialogContent, { className: "w-[min(96vw,72rem)] max-w-none overflow-hidden p-0", children: [
+  return /* @__PURE__ */ jsx66(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs48(DialogContent, { className: "w-[min(96vw,72rem)] max-w-none overflow-hidden p-0", children: [
     /* @__PURE__ */ jsx66(DialogHeader, { className: "border-border/70 gap-1 border-b px-5 py-4 sm:px-6", children: /* @__PURE__ */ jsx66(DialogTitle, { className: "text-lg font-semibold sm:text-xl", children: title }) }),
-    /* @__PURE__ */ jsxs47("div", { className: "grid gap-0 lg:grid-cols-[minmax(0,1fr)_340px]", children: [
+    /* @__PURE__ */ jsxs48("div", { className: "grid gap-0 lg:grid-cols-[minmax(0,1fr)_340px]", children: [
       /* @__PURE__ */ jsx66("div", { className: "border-b p-4 lg:border-r lg:border-b-0 lg:p-6", children: /* @__PURE__ */ jsx66("div", { className: "bg-muted/30 relative min-h-[320px] min-w-0 overflow-hidden rounded-[var(--radius-lg)] lg:min-h-[560px]", children: previewUrl ? /* @__PURE__ */ jsx66(
         Cropper,
         {
@@ -7491,7 +7561,7 @@ function ImageCropDialog({
           objectFit: "contain"
         }
       ) : null }) }),
-      /* @__PURE__ */ jsxs47("div", { className: "flex min-w-0 flex-col gap-5 px-5 py-4 sm:px-6 sm:py-5", children: [
+      /* @__PURE__ */ jsxs48("div", { className: "flex min-w-0 flex-col gap-5 px-5 py-4 sm:px-6 sm:py-5", children: [
         /* @__PURE__ */ jsx66("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx66(
           Button,
           {
@@ -7506,13 +7576,13 @@ function ImageCropDialog({
             children: "Reset"
           }
         ) }),
-        /* @__PURE__ */ jsxs47("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs47(Label, { className: "flex items-center gap-2 text-sm font-semibold", children: [
+        /* @__PURE__ */ jsxs48("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs48(Label, { className: "flex items-center gap-2 text-sm font-semibold", children: [
               /* @__PURE__ */ jsx66(IconZoomIn, { className: "size-4" }),
               "Zoom"
             ] }),
-            /* @__PURE__ */ jsxs47(Text, { size: "sm", variant: "muted", children: [
+            /* @__PURE__ */ jsxs48(Text, { size: "sm", variant: "muted", children: [
               zoom.toFixed(2),
               "x"
             ] })
@@ -7527,21 +7597,21 @@ function ImageCropDialog({
               onValueChange: (value) => setZoom(Number(value))
             }
           ),
-          /* @__PURE__ */ jsxs47("div", { className: "flex justify-between", children: [
-            /* @__PURE__ */ jsxs47(Text, { size: "xs", variant: "muted", children: [
+          /* @__PURE__ */ jsxs48("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxs48(Text, { size: "xs", variant: "muted", children: [
               /* @__PURE__ */ jsx66(IconZoomOut, { className: "mr-1 inline size-3" }),
               "1x"
             ] }),
             /* @__PURE__ */ jsx66(Text, { size: "xs", variant: "muted", children: "3x" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs47("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs47(Label, { className: "flex items-center gap-2 text-sm font-semibold", children: [
+        /* @__PURE__ */ jsxs48("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs48(Label, { className: "flex items-center gap-2 text-sm font-semibold", children: [
               /* @__PURE__ */ jsx66(IconRotate, { className: "size-4" }),
               "Rotation"
             ] }),
-            /* @__PURE__ */ jsxs47(Text, { size: "sm", variant: "muted", children: [
+            /* @__PURE__ */ jsxs48(Text, { size: "sm", variant: "muted", children: [
               rotation,
               "\xB0"
             ] })
@@ -7569,7 +7639,7 @@ function ImageCropDialog({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs47(DialogFooter, { className: "border-border/70 flex justify-end border-t px-5 py-4 sm:px-6", children: [
+    /* @__PURE__ */ jsxs48(DialogFooter, { className: "border-border/70 flex justify-end border-t px-5 py-4 sm:px-6", children: [
       /* @__PURE__ */ jsx66(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
       /* @__PURE__ */ jsx66(Button, { onClick: handleSave, loading: saving, children: "Use image" })
     ] })
@@ -7584,7 +7654,7 @@ import {
   IconTrash as IconTrash4
 } from "@tabler/icons-react";
 import { useEffect as useEffect12, useId as useId2, useRef as useRef8, useState as useState17 } from "react";
-import { Fragment as Fragment13, jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
 function ImageUpload({
   className,
   file: fileProp,
@@ -7635,20 +7705,20 @@ function ImageUpload({
     }
     setFile(nextFile);
   };
-  return /* @__PURE__ */ jsxs48(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs49(Fragment13, { children: [
     /* @__PURE__ */ jsx67(
       "div",
       {
         "data-slot": "image-upload-wrapper",
         className: cn("flex flex-col gap-4", className),
-        children: /* @__PURE__ */ jsxs48(
+        children: /* @__PURE__ */ jsxs49(
           "div",
           {
             "data-slot": "image-upload",
             className: "cn-image-upload flex flex-col gap-4 rounded-[var(--radius-lg)] border bg-background p-4",
             children: [
-              /* @__PURE__ */ jsxs48("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
-                /* @__PURE__ */ jsxs48("div", { className: "cn-image-upload-copy space-y-1", children: [
+              /* @__PURE__ */ jsxs49("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs49("div", { className: "cn-image-upload-copy space-y-1", children: [
                   /* @__PURE__ */ jsx67(
                     "div",
                     {
@@ -7666,7 +7736,7 @@ function ImageUpload({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs48("div", { className: "cn-image-upload-toolbar flex gap-2", children: [
+                /* @__PURE__ */ jsxs49("div", { className: "cn-image-upload-toolbar flex gap-2", children: [
                   file && enableCrop ? /* @__PURE__ */ jsx67(
                     Button,
                     {
@@ -7731,7 +7801,7 @@ function ImageUpload({
                     "cn-image-upload-dropzone block cursor-pointer rounded-[var(--radius-lg)] border border-dashed p-3 transition-colors hover:bg-accent/40",
                     disabled && "cursor-not-allowed opacity-60"
                   ),
-                  children: previewUrl ? /* @__PURE__ */ jsxs48("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]", children: [
+                  children: previewUrl ? /* @__PURE__ */ jsxs49("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]", children: [
                     /* @__PURE__ */ jsx67("div", { className: "cn-image-upload-preview relative aspect-[4/3] overflow-hidden", children: /* @__PURE__ */ jsx67(
                       Image,
                       {
@@ -7740,8 +7810,8 @@ function ImageUpload({
                         className: "size-full object-cover"
                       }
                     ) }),
-                    /* @__PURE__ */ jsxs48("div", { className: "cn-image-upload-sidebar flex flex-col justify-between gap-4", children: [
-                      /* @__PURE__ */ jsxs48("div", { className: "cn-image-upload-meta space-y-1", children: [
+                    /* @__PURE__ */ jsxs49("div", { className: "cn-image-upload-sidebar flex flex-col justify-between gap-4", children: [
+                      /* @__PURE__ */ jsxs49("div", { className: "cn-image-upload-meta space-y-1", children: [
                         /* @__PURE__ */ jsx67(
                           "div",
                           {
@@ -7751,12 +7821,12 @@ function ImageUpload({
                           }
                         ),
                         /* @__PURE__ */ jsx67("div", { className: "text-muted-foreground text-xs", children: file ? `${Math.round(file.size / 1024)} KB` : "Remote preview" }),
-                        /* @__PURE__ */ jsxs48("div", { className: "text-muted-foreground text-xs", children: [
+                        /* @__PURE__ */ jsxs49("div", { className: "text-muted-foreground text-xs", children: [
                           "Accepts ",
                           accept
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsxs48("div", { className: "cn-image-upload-actions flex flex-wrap gap-2", children: [
+                      /* @__PURE__ */ jsxs49("div", { className: "cn-image-upload-actions flex flex-wrap gap-2", children: [
                         /* @__PURE__ */ jsx67(
                           Button,
                           {
@@ -7787,11 +7857,11 @@ function ImageUpload({
                         ) : null
                       ] })
                     ] })
-                  ] }) : /* @__PURE__ */ jsxs48("div", { className: "cn-image-upload-placeholder flex min-h-64 flex-col items-center justify-center gap-3 px-6 text-center", children: [
+                  ] }) : /* @__PURE__ */ jsxs49("div", { className: "cn-image-upload-placeholder flex min-h-64 flex-col items-center justify-center gap-3 px-6 text-center", children: [
                     /* @__PURE__ */ jsx67("div", { className: "cn-image-upload-placeholder-icon text-muted-foreground flex size-12 items-center justify-center", children: /* @__PURE__ */ jsx67(IconPhotoPlus, { className: "size-5" }) }),
-                    /* @__PURE__ */ jsxs48("div", { className: "cn-image-upload-placeholder-copy space-y-1", children: [
+                    /* @__PURE__ */ jsxs49("div", { className: "cn-image-upload-placeholder-copy space-y-1", children: [
                       /* @__PURE__ */ jsx67("div", { className: "text-sm font-medium", children: "Drag and drop or click to upload" }),
-                      /* @__PURE__ */ jsxs48("div", { className: "text-muted-foreground text-sm", children: [
+                      /* @__PURE__ */ jsxs49("div", { className: "text-muted-foreground text-sm", children: [
                         "Accepts ",
                         accept
                       ] }),
@@ -7839,9 +7909,9 @@ function PageContainer({ className, children }) {
 }
 
 // src/components/layout/page/page-section.tsx
-import { jsx as jsx70, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs50 } from "react/jsx-runtime";
 function PageSection({ title, className, children }) {
-  return /* @__PURE__ */ jsxs49("div", { className: cn("flex flex-col gap-4", className), children: [
+  return /* @__PURE__ */ jsxs50("div", { className: cn("flex flex-col gap-4", className), children: [
     title ? /* @__PURE__ */ jsx70("h4", { className: "font-medium text-foreground", children: title }) : null,
     children
   ] });
@@ -7854,7 +7924,7 @@ function PageSubTitle({ className, children }) {
 }
 
 // src/components/layout/page/page-title.tsx
-import { jsx as jsx72, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs51 } from "react/jsx-runtime";
 function PageTitle({
   icon,
   back,
@@ -7862,7 +7932,7 @@ function PageTitle({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "div",
     {
       className: cn(
@@ -7872,7 +7942,7 @@ function PageTitle({
       children: [
         back ?? null,
         icon ?? null,
-        /* @__PURE__ */ jsxs50("div", { className: "flex grow items-center justify-between", children: [
+        /* @__PURE__ */ jsxs51("div", { className: "flex grow items-center justify-between", children: [
           /* @__PURE__ */ jsx72("h3", { className: "font-medium", children }),
           action ?? null
         ] })
@@ -7910,6 +7980,11 @@ var Toaster = ({ ...props }) => {
         "group-[.toast]:text-muted-foreground",
         props.toastOptions?.classNames?.description
       ].filter(Boolean).join(" "),
+      title: [
+        "group-[.toast]:text-current",
+        "font-medium",
+        props.toastOptions?.classNames?.title
+      ].filter(Boolean).join(" "),
       actionButton: [
         "group-[.toast]:bg-primary",
         "group-[.toast]:text-primary-foreground",
@@ -7927,18 +8002,31 @@ var Toaster = ({ ...props }) => {
     Sonner,
     {
       theme,
+      richColors: props.richColors ?? true,
       className: "toaster group",
       icons: {
         success: /* @__PURE__ */ jsx73(IconCircleCheck, { className: "size-4" }),
         info: /* @__PURE__ */ jsx73(IconInfoCircle, { className: "size-4" }),
         warning: /* @__PURE__ */ jsx73(IconAlertTriangle, { className: "size-4" }),
         error: /* @__PURE__ */ jsx73(IconX7, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx73(IconLoader22, { className: "size-4 animate-spin" })
+        loading: /* @__PURE__ */ jsx73(IconLoader22, { className: "cn-spinner size-4 animate-spin" })
       },
       style: {
         "--normal-bg": "var(--popover)",
         "--normal-text": "var(--popover-foreground)",
         "--normal-border": "var(--border)",
+        "--success-bg": "oklch(0.962 0.044 163.31)",
+        "--success-border": "oklch(0.845 0.143 164.98)",
+        "--success-text": "oklch(0.372 0.116 166.6)",
+        "--info-bg": "oklch(0.964 0.03 240.13)",
+        "--info-border": "oklch(0.809 0.105 240.95)",
+        "--info-text": "oklch(0.402 0.097 241.53)",
+        "--warning-bg": "oklch(0.973 0.071 93.84)",
+        "--warning-border": "oklch(0.864 0.173 91.82)",
+        "--warning-text": "oklch(0.442 0.095 80.63)",
+        "--error-bg": "oklch(0.957 0.032 17.26)",
+        "--error-border": "oklch(0.808 0.114 19.57)",
+        "--error-text": "oklch(0.444 0.137 25.33)",
         "--border-radius": "var(--radius)"
       },
       toastOptions,
@@ -7948,7 +8036,7 @@ var Toaster = ({ ...props }) => {
 };
 
 // src/components/layout/shell.tsx
-import { jsx as jsx74, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
 function Shell({
   sidebar,
   headerActions,
@@ -7956,13 +8044,13 @@ function Shell({
   showToaster = true,
   contentClassName
 }) {
-  return /* @__PURE__ */ jsx74(BreadcrumbProvider, { children: /* @__PURE__ */ jsxs51(SidebarProvider, { children: [
+  return /* @__PURE__ */ jsx74(BreadcrumbProvider, { children: /* @__PURE__ */ jsxs52(SidebarProvider, { children: [
     sidebar,
-    /* @__PURE__ */ jsxs51(SidebarInset, { children: [
-      /* @__PURE__ */ jsxs51("header", { className: "cn-shell-header", children: [
-        /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs52(SidebarInset, { children: [
+      /* @__PURE__ */ jsxs52("header", { className: "cn-shell-header", children: [
+        /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx74(SidebarTrigger, { className: "-ml-1" }),
-          /* @__PURE__ */ jsxs51("div", { className: "hidden md:flex md:items-center md:gap-2", children: [
+          /* @__PURE__ */ jsxs52("div", { className: "hidden md:flex md:items-center md:gap-2", children: [
             /* @__PURE__ */ jsx74(
               Separator,
               {
@@ -8179,7 +8267,7 @@ function pad2(n) {
 }
 
 // src/components/date-time/date-picker/picker-content.tsx
-import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
 var JS_WEEKDAY_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 function weekdayHeaderLabels(firstDayOfWeek) {
   return Array.from({ length: 7 }, (_, col) => {
@@ -8249,7 +8337,7 @@ function DatePickerContent({
 }) {
   const monthShortList = calendarType === "EC" ? EC_MONTHS_SHORT : MONTHS_SHORT;
   const hasPresets = !!presets?.length;
-  return /* @__PURE__ */ jsxs52("div", { className: "flex", children: [
+  return /* @__PURE__ */ jsxs53("div", { className: "flex", children: [
     hasPresets && /* @__PURE__ */ jsx76("div", { className: "flex flex-col gap-0.5 border-r border-border py-2 pl-2 pr-1", children: presets.map((preset) => /* @__PURE__ */ jsx76(
       "button",
       {
@@ -8261,7 +8349,7 @@ function DatePickerContent({
       },
       preset.label
     )) }),
-    /* @__PURE__ */ jsxs52(
+    /* @__PURE__ */ jsxs53(
       "div",
       {
         className: cn(
@@ -8271,7 +8359,7 @@ function DatePickerContent({
           hasPresets && "min-w-0 flex-1"
         ),
         children: [
-          /* @__PURE__ */ jsxs52("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs53("div", { className: "mb-2 flex items-center justify-between", children: [
             /* @__PURE__ */ jsx76(
               "button",
               {
@@ -8313,8 +8401,8 @@ function DatePickerContent({
             const dayGridClass = withWeekNumbers ? "grid grid-cols-[2rem_repeat(7,minmax(0,1fr))]" : "grid grid-cols-7";
             const rowCount = cells.length / 7;
             const labels = weekdayHeaderLabels(firstDayOfWeek);
-            return /* @__PURE__ */ jsxs52(Fragment14, { children: [
-              !hideWeekdays && /* @__PURE__ */ jsxs52("div", { className: cn("mb-0.5", dayGridClass), children: [
+            return /* @__PURE__ */ jsxs53(Fragment14, { children: [
+              !hideWeekdays && /* @__PURE__ */ jsxs53("div", { className: cn("mb-0.5", dayGridClass), children: [
                 withWeekNumbers && /* @__PURE__ */ jsx76("div", { className: "select-none py-1.5 text-center text-xs font-medium text-muted-foreground", children: "#" }),
                 labels.map((wd, i) => {
                   const js = (firstDayOfWeek + i) % 7;
@@ -8341,7 +8429,7 @@ function DatePickerContent({
                   children: Array.from({ length: rowCount }, (_, row) => {
                     const rowCells = cells.slice(row * 7, row * 7 + 7);
                     const weekNo = getISOWeekNumber(rowCells[0].gcDate);
-                    return /* @__PURE__ */ jsxs52(
+                    return /* @__PURE__ */ jsxs53(
                       "div",
                       {
                         className: dayGridClass,
@@ -8368,7 +8456,7 @@ function DatePickerContent({
                             const showStrip = hasRange && (inRange || (rStart || rEnd) && !(rStart && rEnd));
                             return (
                               /* biome-ignore lint/a11y/useSemanticElements: calendar cell, not a form fieldset */
-                              /* @__PURE__ */ jsxs52(
+                              /* @__PURE__ */ jsxs53(
                                 "div",
                                 {
                                   role: "group",
@@ -8493,7 +8581,7 @@ function DatePickerContent({
               y
             );
           }) }),
-          /* @__PURE__ */ jsxs52("div", { className: "mt-2 flex items-center justify-end gap-1 border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsxs53("div", { className: "mt-2 flex items-center justify-end gap-1 border-t border-border pt-2", children: [
             /* @__PURE__ */ jsx76(
               "button",
               {
@@ -9374,7 +9462,7 @@ function FormMessage({ className, ...props }) {
 import { IconMinus } from "@tabler/icons-react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import * as React10 from "react";
-import { jsx as jsx79, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs54 } from "react/jsx-runtime";
 function InputOTP({
   className,
   containerClassName,
@@ -9411,7 +9499,7 @@ function InputOTPSlot({
 }) {
   const inputOTPContext = React10.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs54(
     "div",
     {
       "data-slot": "input-otp-slot",
@@ -9595,7 +9683,7 @@ function HardbreakControl({ editor }) {
 // src/components/rich-text/controls/iframe-control.tsx
 import { IconExternalLink } from "@tabler/icons-react";
 import { useState as useState19 } from "react";
-import { jsx as jsx82, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs55 } from "react/jsx-runtime";
 function IframeControl() {
   const { editor } = useRichTextEditorContext();
   const [open, setOpen] = useState19(false);
@@ -9629,7 +9717,7 @@ function IframeControl() {
     setOpen(false);
     setIframeTag("");
   };
-  return /* @__PURE__ */ jsxs54(Dialog, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs55(Dialog, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx82(
       DialogTrigger,
       {
@@ -9645,9 +9733,9 @@ function IframeControl() {
         children: /* @__PURE__ */ jsx82(IconExternalLink, { className: "size-4" })
       }
     ),
-    /* @__PURE__ */ jsxs54(DialogContent, { children: [
+    /* @__PURE__ */ jsxs55(DialogContent, { children: [
       /* @__PURE__ */ jsx82(DialogHeader, { children: /* @__PURE__ */ jsx82(DialogTitle, { children: "Insert Iframe" }) }),
-      /* @__PURE__ */ jsx82("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs54("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx82("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs55("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx82(Label, { htmlFor: "iframe-tag", children: "Iframe Tag" }),
         /* @__PURE__ */ jsx82(
           Input,
@@ -9665,7 +9753,7 @@ function IframeControl() {
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs54(DialogFooter, { children: [
+      /* @__PURE__ */ jsxs55(DialogFooter, { children: [
         /* @__PURE__ */ jsx82(Button, { variant: "outline", onClick: handleClose, children: "Cancel" }),
         /* @__PURE__ */ jsx82(Button, { onClick: handleAdd, children: "Add Iframe" })
       ] })
@@ -9676,7 +9764,7 @@ function IframeControl() {
 // src/components/rich-text/controls/image-control.tsx
 import { IconPhoto as IconPhoto2 } from "@tabler/icons-react";
 import { useState as useState20 } from "react";
-import { jsx as jsx83, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs56 } from "react/jsx-runtime";
 function ImageControl() {
   const { editor } = useRichTextEditorContext();
   const [open, setOpen] = useState20(false);
@@ -9697,7 +9785,7 @@ function ImageControl() {
     setOpen(false);
     setUrl("");
   };
-  return /* @__PURE__ */ jsxs55(Dialog, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs56(Dialog, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx83(
       DialogTrigger,
       {
@@ -9713,9 +9801,9 @@ function ImageControl() {
         children: /* @__PURE__ */ jsx83(IconPhoto2, { className: "size-4" })
       }
     ),
-    /* @__PURE__ */ jsxs55(DialogContent, { children: [
+    /* @__PURE__ */ jsxs56(DialogContent, { children: [
       /* @__PURE__ */ jsx83(DialogHeader, { children: /* @__PURE__ */ jsx83(DialogTitle, { children: "Insert Image" }) }),
-      /* @__PURE__ */ jsx83("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs55("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx83("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs56("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx83(Label, { htmlFor: "image-url", children: "Image URL" }),
         /* @__PURE__ */ jsx83(
           Input,
@@ -9733,7 +9821,7 @@ function ImageControl() {
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs55(DialogFooter, { children: [
+      /* @__PURE__ */ jsxs56(DialogFooter, { children: [
         /* @__PURE__ */ jsx83(Button, { variant: "outline", onClick: handleClose, children: "Cancel" }),
         /* @__PURE__ */ jsx83(Button, { onClick: handleAdd, children: "Add Image" })
       ] })
@@ -9750,7 +9838,7 @@ import {
   IconTableMinus,
   IconTrash as IconTrash5
 } from "@tabler/icons-react";
-import { Fragment as Fragment15, jsx as jsx84, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx84, jsxs as jsxs57 } from "react/jsx-runtime";
 function TableControl({ editor }) {
   if (!editor) {
     return null;
@@ -9758,7 +9846,7 @@ function TableControl({ editor }) {
   const handleInsertTable = () => {
     editor.chain().focus().insertTable({ rows: 2, cols: 2, withHeaderRow: true }).run();
   };
-  return /* @__PURE__ */ jsxs56(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs57(Fragment15, { children: [
     /* @__PURE__ */ jsx84(
       RichTextEditorControl,
       {
@@ -9825,7 +9913,7 @@ function TableControl({ editor }) {
 // src/components/rich-text/controls/youtube-control.tsx
 import { IconBrandYoutube } from "@tabler/icons-react";
 import { useState as useState21 } from "react";
-import { jsx as jsx85, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs58 } from "react/jsx-runtime";
 function YoutubeControl() {
   const { editor } = useRichTextEditorContext();
   const [open, setOpen] = useState21(false);
@@ -9846,7 +9934,7 @@ function YoutubeControl() {
     setOpen(false);
     setUrl("");
   };
-  return /* @__PURE__ */ jsxs57(Dialog, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs58(Dialog, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx85(
       DialogTrigger,
       {
@@ -9862,9 +9950,9 @@ function YoutubeControl() {
         children: /* @__PURE__ */ jsx85(IconBrandYoutube, { className: "size-4" })
       }
     ),
-    /* @__PURE__ */ jsxs57(DialogContent, { children: [
+    /* @__PURE__ */ jsxs58(DialogContent, { children: [
       /* @__PURE__ */ jsx85(DialogHeader, { children: /* @__PURE__ */ jsx85(DialogTitle, { children: "Insert YouTube Video" }) }),
-      /* @__PURE__ */ jsx85("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs57("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx85("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs58("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx85(Label, { htmlFor: "youtube-url", children: "YouTube URL" }),
         /* @__PURE__ */ jsx85(
           Input,
@@ -9882,7 +9970,7 @@ function YoutubeControl() {
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs57(DialogFooter, { children: [
+      /* @__PURE__ */ jsxs58(DialogFooter, { children: [
         /* @__PURE__ */ jsx85(Button, { variant: "outline", onClick: handleClose, children: "Cancel" }),
         /* @__PURE__ */ jsx85(Button, { onClick: handleAdd, children: "Add Video" })
       ] })
@@ -10008,7 +10096,7 @@ var Iframe = Node.create({
 });
 
 // src/components/rich-text/rich-text-input.tsx
-import { Fragment as Fragment16, jsx as jsx86, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx86, jsxs as jsxs59 } from "react/jsx-runtime";
 var EMPTY_KEY = "__empty__";
 function RichTextInputEditor({
   field,
@@ -10135,14 +10223,14 @@ function RichTextInputEditor({
   }, [editor, value]);
   const enabledControllersLength = enabledControllers.length;
   const isControllerEnabled = (controller) => enabledControllersLength === 0 || enabledControllers.includes(controller);
-  return /* @__PURE__ */ jsxs58("div", { className: cn("flex flex-col gap-2", className), children: [
-    label && /* @__PURE__ */ jsxs58(Label, { children: [
+  return /* @__PURE__ */ jsxs59("div", { className: cn("flex flex-col gap-2", className), children: [
+    label && /* @__PURE__ */ jsxs59(Label, { children: [
       label,
       withAsterisk && /* @__PURE__ */ jsx86("span", { className: "text-destructive", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs58(RichTextEditor, { editor, children: [
-      /* @__PURE__ */ jsxs58(RichTextEditorToolbar, { children: [
-        /* @__PURE__ */ jsxs58(RichTextEditorControlsGroup, { children: [
+    /* @__PURE__ */ jsxs59(RichTextEditor, { editor, children: [
+      /* @__PURE__ */ jsxs59(RichTextEditorToolbar, { children: [
+        /* @__PURE__ */ jsxs59(RichTextEditorControlsGroup, { children: [
           isControllerEnabled("bold") && /* @__PURE__ */ jsx86(
             RichTextEditorControl,
             {
@@ -10218,7 +10306,7 @@ function RichTextInputEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs58(RichTextEditorControlsGroup, { children: [
+        /* @__PURE__ */ jsxs59(RichTextEditorControlsGroup, { children: [
           isControllerEnabled("h1") && /* @__PURE__ */ jsx86(
             RichTextEditorControl,
             {
@@ -10260,7 +10348,7 @@ function RichTextInputEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs58(RichTextEditorControlsGroup, { children: [
+        /* @__PURE__ */ jsxs59(RichTextEditorControlsGroup, { children: [
           isControllerEnabled("bulletList") && /* @__PURE__ */ jsx86(
             RichTextEditorControl,
             {
@@ -10282,8 +10370,8 @@ function RichTextInputEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs58(RichTextEditorControlsGroup, { children: [
-          isControllerEnabled("link") && /* @__PURE__ */ jsxs58(Fragment16, { children: [
+        /* @__PURE__ */ jsxs59(RichTextEditorControlsGroup, { children: [
+          isControllerEnabled("link") && /* @__PURE__ */ jsxs59(Fragment16, { children: [
             /* @__PURE__ */ jsx86(
               RichTextEditorControl,
               {
@@ -10321,7 +10409,7 @@ function RichTextInputEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs58(RichTextEditorControlsGroup, { children: [
+        /* @__PURE__ */ jsxs59(RichTextEditorControlsGroup, { children: [
           isControllerEnabled("alignLeft") && /* @__PURE__ */ jsx86(
             RichTextEditorControl,
             {
@@ -10363,7 +10451,7 @@ function RichTextInputEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs58(RichTextEditorControlsGroup, { children: [
+        /* @__PURE__ */ jsxs59(RichTextEditorControlsGroup, { children: [
           isControllerEnabled("subscript") && /* @__PURE__ */ jsx86(
             RichTextEditorControl,
             {
@@ -10386,9 +10474,9 @@ function RichTextInputEditor({
           )
         ] }),
         editor && isControllerEnabled("hardBreak") && /* @__PURE__ */ jsx86(HardbreakControl, { editor }),
-        mode === "large" && /* @__PURE__ */ jsxs58(Fragment16, { children: [
+        mode === "large" && /* @__PURE__ */ jsxs59(Fragment16, { children: [
           isControllerEnabled("table") && /* @__PURE__ */ jsx86(RichTextEditorControlsGroup, { children: /* @__PURE__ */ jsx86(TableControl, { editor }) }),
-          /* @__PURE__ */ jsxs58(RichTextEditorControlsGroup, { children: [
+          /* @__PURE__ */ jsxs59(RichTextEditorControlsGroup, { children: [
             isControllerEnabled("image") && /* @__PURE__ */ jsx86(ImageControl, {}),
             isControllerEnabled("youtube") && /* @__PURE__ */ jsx86(YoutubeControl, {}),
             isControllerEnabled("map") && /* @__PURE__ */ jsx86(IframeControl, {})
@@ -10420,7 +10508,7 @@ function VisuallyHidden({ className, ...props }) {
 }
 
 // src/components/locale/locale-input-rich-text.tsx
-import { jsx as jsx88, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs60 } from "react/jsx-runtime";
 function LocaleInputRichText({
   label,
   required,
@@ -10438,13 +10526,13 @@ function LocaleInputRichText({
   const otherLanguages = supportedLanguages.filter(
     (lang) => lang.value !== defaultLanguage
   );
-  return /* @__PURE__ */ jsxs59(Field, { className: cn(className), children: [
-    label && /* @__PURE__ */ jsxs59(FieldLabel, { children: [
+  return /* @__PURE__ */ jsxs60(Field, { className: cn(className), children: [
+    label && /* @__PURE__ */ jsxs60(FieldLabel, { children: [
       label,
       required && /* @__PURE__ */ jsx88("span", { className: "text-destructive ml-1", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs59(FieldContent, { children: [
-      /* @__PURE__ */ jsxs59("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs60(FieldContent, { children: [
+      /* @__PURE__ */ jsxs60("div", { className: "relative", children: [
         /* @__PURE__ */ jsx88(
           Controller2,
           {
@@ -10462,7 +10550,7 @@ function LocaleInputRichText({
             )
           }
         ),
-        /* @__PURE__ */ jsxs59("div", { className: "absolute top-3 right-2 z-10 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs60("div", { className: "absolute top-3 right-2 z-10 flex items-center gap-1", children: [
           /* @__PURE__ */ jsx88(
             "button",
             {
@@ -10483,7 +10571,7 @@ function LocaleInputRichText({
           )
         ] })
       ] }),
-      expanded && otherLanguages.length > 0 && /* @__PURE__ */ jsx88("div", { className: "cn-locale-input-expanded-rich", children: otherLanguages.map((lang) => /* @__PURE__ */ jsxs59("div", { className: "space-y-2", children: [
+      expanded && otherLanguages.length > 0 && /* @__PURE__ */ jsx88("div", { className: "cn-locale-input-expanded-rich", children: otherLanguages.map((lang) => /* @__PURE__ */ jsxs60("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx88(FieldLabel, { className: "text-xs text-muted-foreground", children: lang.label }),
         /* @__PURE__ */ jsx88(
           Controller2,
@@ -10503,7 +10591,7 @@ function LocaleInputRichText({
           }
         )
       ] }, lang.value)) }),
-      /* @__PURE__ */ jsx88(Dialog, { open: fullscreen, onOpenChange: setFullscreen, children: /* @__PURE__ */ jsxs59(
+      /* @__PURE__ */ jsx88(Dialog, { open: fullscreen, onOpenChange: setFullscreen, children: /* @__PURE__ */ jsxs60(
         DialogContent,
         {
           showCloseButton: false,
@@ -10512,7 +10600,7 @@ function LocaleInputRichText({
             "!top-0 !left-0 !right-0 !bottom-0 !h-screen !w-screen !max-w-none !translate-x-0 !translate-y-0 !rounded-none"
           ),
           children: [
-            /* @__PURE__ */ jsx88(VisuallyHidden, { children: /* @__PURE__ */ jsxs59(DialogTitle, { children: [
+            /* @__PURE__ */ jsx88(VisuallyHidden, { children: /* @__PURE__ */ jsxs60(DialogTitle, { children: [
               label || "Edit content",
               " - Fullscreen editor"
             ] }) }),
@@ -10552,7 +10640,7 @@ function LocaleInputRichText({
 // src/components/locale/locale-input-text.tsx
 import { IconTextRecognition as IconTextRecognition2 } from "@tabler/icons-react";
 import { useState as useState23 } from "react";
-import { jsx as jsx89, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs61 } from "react/jsx-runtime";
 function LocaleInputText({
   label,
   required,
@@ -10569,13 +10657,13 @@ function LocaleInputText({
     (lang) => lang.value !== defaultLanguage
   );
   const defaultError = errors?.[field]?.[defaultLanguage];
-  return /* @__PURE__ */ jsxs60(Field, { className: cn(className), children: [
-    label && /* @__PURE__ */ jsxs60(FieldLabel, { children: [
+  return /* @__PURE__ */ jsxs61(Field, { className: cn(className), children: [
+    label && /* @__PURE__ */ jsxs61(FieldLabel, { children: [
       label,
       required && /* @__PURE__ */ jsx89("span", { className: "text-destructive ", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs60(FieldContent, { children: [
-      /* @__PURE__ */ jsxs60("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs61(FieldContent, { children: [
+      /* @__PURE__ */ jsxs61("div", { className: "relative", children: [
         /* @__PURE__ */ jsx89(
           Input,
           {
@@ -10598,9 +10686,9 @@ function LocaleInputText({
         )
       ] }),
       /* @__PURE__ */ jsx89(FieldError, { errors: defaultError ? [defaultError] : void 0 }),
-      expanded && otherLanguages.length > 0 && /* @__PURE__ */ jsx89("div", { className: "cn-locale-input-expanded", children: otherLanguages.map((lang) => /* @__PURE__ */ jsx89("div", { className: "space-y-1", children: /* @__PURE__ */ jsxs60("div", { className: "flex items-center gap-2", children: [
+      expanded && otherLanguages.length > 0 && /* @__PURE__ */ jsx89("div", { className: "cn-locale-input-expanded", children: otherLanguages.map((lang) => /* @__PURE__ */ jsx89("div", { className: "space-y-1", children: /* @__PURE__ */ jsxs61("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx89(FieldLabel, { className: "min-w-[60px] text-xs text-muted-foreground", children: lang.label }),
-        /* @__PURE__ */ jsxs60("div", { className: "flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsxs61("div", { className: "flex-1 space-y-1", children: [
           /* @__PURE__ */ jsx89(
             Input,
             {
@@ -10628,7 +10716,7 @@ function LocaleInputText({
 // src/components/locale/locale-input-textarea.tsx
 import { IconTextRecognition as IconTextRecognition3 } from "@tabler/icons-react";
 import { useState as useState24 } from "react";
-import { jsx as jsx90, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs62 } from "react/jsx-runtime";
 function LocaleInputTextarea({
   label,
   required,
@@ -10646,13 +10734,13 @@ function LocaleInputTextarea({
     (lang) => lang.value !== defaultLanguage
   );
   const defaultError = errors?.[field]?.[defaultLanguage];
-  return /* @__PURE__ */ jsxs61(Field, { className: cn("cn-locale-input", className), children: [
-    label && /* @__PURE__ */ jsxs61(FieldLabel, { children: [
+  return /* @__PURE__ */ jsxs62(Field, { className: cn("cn-locale-input", className), children: [
+    label && /* @__PURE__ */ jsxs62(FieldLabel, { children: [
       label,
       required && /* @__PURE__ */ jsx90("span", { className: "text-destructive ml-1", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs61(FieldContent, { children: [
-      /* @__PURE__ */ jsxs61("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs62(FieldContent, { children: [
+      /* @__PURE__ */ jsxs62("div", { className: "relative", children: [
         /* @__PURE__ */ jsx90(
           Textarea,
           {
@@ -10676,9 +10764,9 @@ function LocaleInputTextarea({
         )
       ] }),
       /* @__PURE__ */ jsx90(FieldError, { errors: defaultError ? [defaultError] : void 0 }),
-      expanded && otherLanguages.length > 0 && /* @__PURE__ */ jsx90("div", { className: "cn-locale-input-expanded", children: otherLanguages.map((lang) => /* @__PURE__ */ jsx90("div", { className: "space-y-1", children: /* @__PURE__ */ jsxs61("div", { className: "flex items-start gap-2", children: [
+      expanded && otherLanguages.length > 0 && /* @__PURE__ */ jsx90("div", { className: "cn-locale-input-expanded", children: otherLanguages.map((lang) => /* @__PURE__ */ jsx90("div", { className: "space-y-1", children: /* @__PURE__ */ jsxs62("div", { className: "flex items-start gap-2", children: [
         /* @__PURE__ */ jsx90(FieldLabel, { className: "min-w-[60px] text-xs text-muted-foreground mt-2", children: lang.label }),
-        /* @__PURE__ */ jsxs61("div", { className: "flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsxs62("div", { className: "flex-1 space-y-1", children: [
           /* @__PURE__ */ jsx90(
             Textarea,
             {
@@ -10736,7 +10824,7 @@ function LocaleText({ text, defaultLocale }) {
 }
 
 // src/components/mesob-logo.tsx
-import { jsx as jsx93, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs63 } from "react/jsx-runtime";
 function MesobLogo({
   width,
   height,
@@ -10745,7 +10833,7 @@ function MesobLogo({
   iconColor = "#fff",
   className
 }) {
-  return /* @__PURE__ */ jsxs62(
+  return /* @__PURE__ */ jsxs63(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -10816,7 +10904,7 @@ function MesobLogo({
 import { IconX as IconX9 } from "@tabler/icons-react";
 import { cva as cva9 } from "class-variance-authority";
 import { useState as useState25 } from "react";
-import { jsx as jsx94, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs64 } from "react/jsx-runtime";
 var modalContentVariants = cva9(
   cn(
     "p-0 gap-0 flex flex-col overflow-hidden",
@@ -10885,7 +10973,7 @@ function ModalContent({
   );
 }
 function ModalHeader({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs64(
     DialogHeader,
     {
       "data-slot": "modal-header",
@@ -10987,9 +11075,9 @@ function Modal({
   };
   const shouldShowHeader = title || subtitle;
   const shouldShowFooter = footer !== void 0;
-  return /* @__PURE__ */ jsxs63(ModalRoot, { open: currentOpen, onOpenChange: handleOpenChange, ...props, children: [
+  return /* @__PURE__ */ jsxs64(ModalRoot, { open: currentOpen, onOpenChange: handleOpenChange, ...props, children: [
     trigger && /* @__PURE__ */ jsx94(ModalTrigger, { render: trigger, ...triggerProps }),
-    /* @__PURE__ */ jsxs63(
+    /* @__PURE__ */ jsxs64(
       ModalContent,
       {
         size,
@@ -10997,7 +11085,7 @@ function Modal({
         className: contentProps?.className,
         ...contentProps,
         children: [
-          shouldShowHeader && /* @__PURE__ */ jsxs63(ModalHeader, { className: headerProps?.className, ...headerProps, children: [
+          shouldShowHeader && /* @__PURE__ */ jsxs64(ModalHeader, { className: headerProps?.className, ...headerProps, children: [
             title && /* @__PURE__ */ jsx94(ModalTitle, { children: title }),
             subtitle && /* @__PURE__ */ jsx94(ModalSubtitle, { children: subtitle })
           ] }),
@@ -11010,7 +11098,7 @@ function Modal({
 }
 
 // src/components/powered-by.tsx
-import { jsx as jsx95, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs65 } from "react/jsx-runtime";
 function PoweredBy({ className }) {
   return /* @__PURE__ */ jsx95(
     "div",
@@ -11019,7 +11107,7 @@ function PoweredBy({ className }) {
         "flex flex-col items-center gap-1.5 py-3 text-center",
         className
       ),
-      children: /* @__PURE__ */ jsxs64(
+      children: /* @__PURE__ */ jsxs65(
         "a",
         {
           href: "https://mesob.com",
@@ -11063,11 +11151,11 @@ function RichTextDisplay({ content, className }) {
 // src/components/theme-toggle.tsx
 import { IconMoon, IconSun } from "@tabler/icons-react";
 import { useTheme as useTheme2 } from "next-themes";
-import { jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs66 } from "react/jsx-runtime";
 function ThemeToggle({ className }) {
   const { resolvedTheme, setTheme, theme } = useTheme2();
   const isDark = (theme ?? resolvedTheme) === "dark";
-  return /* @__PURE__ */ jsxs65(
+  return /* @__PURE__ */ jsxs66(
     Button,
     {
       variant: "ghost",
@@ -11538,14 +11626,14 @@ function useDateInput(props) {
 }
 
 // src/components/date-time/date-input/date-input.tsx
-import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs67 } from "react/jsx-runtime";
 var SIZE_CLASS = {
   sm: "[&_[data-slot=input-group-control]]:min-h-8 [&_[data-slot=input-group-control]]:text-xs",
   md: "[&_[data-slot=input-group-control]]:min-h-10 [&_[data-slot=input-group-control]]:text-sm",
   lg: "[&_[data-slot=input-group-control]]:min-h-11 [&_[data-slot=input-group-control]]:text-sm",
   xl: "[&_[data-slot=input-group-control]]:min-h-12 [&_[data-slot=input-group-control]]:text-base"
 };
-var CalendarIcon = /* @__PURE__ */ jsxs66("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", "aria-hidden": true, children: [
+var CalendarIcon = /* @__PURE__ */ jsxs67("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", "aria-hidden": true, children: [
   /* @__PURE__ */ jsx99("title", { className: "sr-only", children: "Calendar" }),
   /* @__PURE__ */ jsx99(
     "path",
@@ -11558,7 +11646,7 @@ var CalendarIcon = /* @__PURE__ */ jsxs66("svg", { className: "size-4", fill: "n
     }
   )
 ] });
-var CloseIcon = /* @__PURE__ */ jsxs66("svg", { className: "size-3.5", fill: "none", viewBox: "0 0 24 24", "aria-hidden": true, children: [
+var CloseIcon = /* @__PURE__ */ jsxs67("svg", { className: "size-3.5", fill: "none", viewBox: "0 0 24 24", "aria-hidden": true, children: [
   /* @__PURE__ */ jsx99("title", { className: "sr-only", children: "Clear" }),
   /* @__PURE__ */ jsx99(
     "path",
@@ -11635,8 +11723,8 @@ var DateInput = forwardRef4(
         disabled,
         className,
         labelProps: { htmlFor: inputId },
-        children: /* @__PURE__ */ jsxs66(Popover, { open: state2.open, onOpenChange: state2.handleOpenChange, children: [
-          /* @__PURE__ */ jsx99("div", { ref: state2.triggerRef, className: "w-full", children: /* @__PURE__ */ jsxs66(
+        children: /* @__PURE__ */ jsxs67(Popover, { open: state2.open, onOpenChange: state2.handleOpenChange, children: [
+          /* @__PURE__ */ jsx99("div", { ref: state2.triggerRef, className: "w-full", children: /* @__PURE__ */ jsxs67(
             InputGroup,
             {
               disabled,
@@ -11671,7 +11759,7 @@ var DateInput = forwardRef4(
                     "aria-label": ariaLabel
                   }
                 ),
-                /* @__PURE__ */ jsxs66("span", { className: "mr-1 flex items-center gap-0.5 pr-0.5", children: [
+                /* @__PURE__ */ jsxs67("span", { className: "mr-1 flex items-center gap-0.5 pr-0.5", children: [
                   state2.showClear ? /* @__PURE__ */ jsx99(
                     InputGroupButton,
                     {
@@ -11762,7 +11850,7 @@ import { forwardRef as forwardRef6 } from "react";
 
 // src/components/date-time/datetime-picker/trigger-button.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs68 } from "react/jsx-runtime";
 var DateTimeTriggerButton = forwardRef5(function DateTimeTriggerButton2({
   displayValue,
   placeholder,
@@ -11777,7 +11865,7 @@ var DateTimeTriggerButton = forwardRef5(function DateTimeTriggerButton2({
   "aria-label": ariaLabel
 }, ref) {
   const filled = variant === "filled";
-  return /* @__PURE__ */ jsxs67(
+  return /* @__PURE__ */ jsxs68(
     "button",
     {
       ref,
@@ -11814,7 +11902,7 @@ var DateTimeTriggerButton = forwardRef5(function DateTimeTriggerButton2({
 });
 
 // src/components/date-time/datetime-picker/input-shell.tsx
-import { jsx as jsx101, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs69 } from "react/jsx-runtime";
 function DateInputShell({
   label,
   placeholder,
@@ -11861,14 +11949,26 @@ function DateInputShell({
       "aria-label": ariaLabel
     }
   );
-  const wrapper = /* @__PURE__ */ jsxs68("div", { className: cn("relative inline-block w-full", className), children: [
-    label ? /* @__PURE__ */ jsxs68("label", { className: "mb-1.5 block text-sm font-semibold text-foreground", children: [
+  const wrapper = /* @__PURE__ */ jsxs69("div", { className: cn("relative inline-block w-full", className), children: [
+    label ? /* @__PURE__ */ jsxs69("label", { className: "mb-1.5 block text-sm font-semibold text-foreground", children: [
       label,
       required || withAsterisk ? /* @__PURE__ */ jsx101("span", { className: "ml-0.5 text-destructive", "aria-hidden": true, children: "*" }) : null
     ] }) : null,
     description ? /* @__PURE__ */ jsx101("p", { className: "mb-1.5 text-xs text-muted-foreground", children: description }) : null,
-    /* @__PURE__ */ jsxs68("div", { ref: triggerRef, className: "relative", children: [
-      dropdownType === "modal" ? /* @__PURE__ */ jsx101(DialogTrigger, { children: triggerButton }) : /* @__PURE__ */ jsx101(PopoverTrigger, { className: "block w-full", children: triggerButton }),
+    /* @__PURE__ */ jsxs69("div", { ref: triggerRef, className: "relative", children: [
+      dropdownType === "modal" ? /* @__PURE__ */ jsx101(
+        DialogTrigger,
+        {
+          render: /* @__PURE__ */ jsx101("div", { "data-slot": "dialog-trigger", className: "block w-full" }),
+          children: triggerButton
+        }
+      ) : /* @__PURE__ */ jsx101(
+        PopoverTrigger,
+        {
+          render: /* @__PURE__ */ jsx101("div", { "data-slot": "popover-trigger", className: "block w-full" }),
+          children: triggerButton
+        }
+      ),
       showClear && /* @__PURE__ */ jsx101(
         "button",
         {
@@ -11879,7 +11979,7 @@ function DateInputShell({
           },
           className: "absolute right-2.5 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground hover:text-foreground",
           "aria-label": "Clear",
-          children: /* @__PURE__ */ jsxs68(
+          children: /* @__PURE__ */ jsxs69(
             "svg",
             {
               className: "size-3.5",
@@ -11905,7 +12005,7 @@ function DateInputShell({
       )
     ] }),
     error ? /* @__PURE__ */ jsx101("p", { className: "mt-1.5 text-xs text-destructive", children: error }) : null,
-    dropdownType === "modal" ? /* @__PURE__ */ jsxs68(
+    dropdownType === "modal" ? /* @__PURE__ */ jsxs69(
       DialogContent,
       {
         className: cn(
@@ -12126,7 +12226,7 @@ function DateCalendar(props) {
 import { forwardRef as forwardRef7 } from "react";
 
 // src/components/date-time/datetime-picker/dropdown-content.tsx
-import { Fragment as Fragment18, jsx as jsx104, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx104, jsxs as jsxs70 } from "react/jsx-runtime";
 var ChevronLeft2 = /* @__PURE__ */ jsx104(
   "svg",
   {
@@ -12176,9 +12276,9 @@ function TimeRow({
   const hourVal = String(hour12);
   const minVal = timeM ? pad2(Number.parseInt(timeM, 10)) : "00";
   const secVal = timeS ? pad2(Number.parseInt(timeS, 10)) : "00";
-  return /* @__PURE__ */ jsxs69("fieldset", { className: "mt-2 flex w-fit flex-wrap items-center gap-2 rounded-lg border border-input bg-muted/30 px-3 py-2.5", children: [
+  return /* @__PURE__ */ jsxs70("fieldset", { className: "mt-2 flex w-fit flex-wrap items-center gap-2 rounded-lg border border-input bg-muted/30 px-3 py-2.5", children: [
     /* @__PURE__ */ jsx104("legend", { className: "sr-only", children: "Time" }),
-    /* @__PURE__ */ jsxs69(Select, { value: hourVal, onValueChange: (v) => setHour12(Number(v), ampm), children: [
+    /* @__PURE__ */ jsxs70(Select, { value: hourVal, onValueChange: (v) => setHour12(Number(v), ampm), children: [
       /* @__PURE__ */ jsx104(
         SelectTrigger,
         {
@@ -12191,7 +12291,7 @@ function TimeRow({
       /* @__PURE__ */ jsx104(SelectContent, { ...TIME_SELECT_CONTENT_PROPS, children: HOURS_12.map((h) => /* @__PURE__ */ jsx104(SelectItem, { value: String(h), children: pad2(h) }, h)) })
     ] }),
     /* @__PURE__ */ jsx104("span", { className: "text-muted-foreground", children: ":" }),
-    /* @__PURE__ */ jsxs69(
+    /* @__PURE__ */ jsxs70(
       Select,
       {
         value: minVal,
@@ -12212,9 +12312,9 @@ function TimeRow({
         ]
       }
     ),
-    withSeconds && /* @__PURE__ */ jsxs69(Fragment18, { children: [
+    withSeconds && /* @__PURE__ */ jsxs70(Fragment18, { children: [
       /* @__PURE__ */ jsx104("span", { className: "text-muted-foreground", children: ":" }),
-      /* @__PURE__ */ jsxs69(
+      /* @__PURE__ */ jsxs70(
         Select,
         {
           value: secVal,
@@ -12286,7 +12386,7 @@ function DateTimeDropdownContent({
   hasPresets
 }) {
   const monthShortList = calendarType === "EC" ? EC_MONTHS_SHORT : MONTHS_SHORT;
-  return /* @__PURE__ */ jsxs69("div", { className: "flex", children: [
+  return /* @__PURE__ */ jsxs70("div", { className: "flex", children: [
     hasPresets && presets?.length ? /* @__PURE__ */ jsx104("div", { className: "flex flex-col gap-0.5 border-r border-border py-2 pl-2 pr-1", children: presets.map((preset) => /* @__PURE__ */ jsx104(
       "button",
       {
@@ -12297,7 +12397,7 @@ function DateTimeDropdownContent({
       },
       preset.label
     )) }) : null,
-    /* @__PURE__ */ jsxs69(
+    /* @__PURE__ */ jsxs70(
       "div",
       {
         className: cn(
@@ -12307,7 +12407,7 @@ function DateTimeDropdownContent({
           hasPresets && presets?.length && "flex-1"
         ),
         children: [
-          /* @__PURE__ */ jsxs69("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs70("div", { className: "mb-2 flex items-center justify-between", children: [
             /* @__PURE__ */ jsx104(
               "button",
               {
@@ -12338,7 +12438,7 @@ function DateTimeDropdownContent({
               }
             )
           ] }),
-          view === "days" && /* @__PURE__ */ jsxs69(Fragment18, { children: [
+          view === "days" && /* @__PURE__ */ jsxs70(Fragment18, { children: [
             /* @__PURE__ */ jsx104("div", { className: "mb-0.5 grid grid-cols-7", children: WEEKDAYS.map((wd, i) => /* @__PURE__ */ jsx104(
               "div",
               {
@@ -12435,8 +12535,8 @@ function DateTimeDropdownContent({
               onTimeSChange
             }
           ),
-          /* @__PURE__ */ jsxs69("div", { className: "mt-2 flex items-center justify-between gap-2 border-t border-border pt-2", children: [
-            /* @__PURE__ */ jsxs69("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsxs70("div", { className: "mt-2 flex items-center justify-between gap-2 border-t border-border pt-2", children: [
+            /* @__PURE__ */ jsxs70("div", { className: "flex gap-1", children: [
               /* @__PURE__ */ jsx104(
                 "button",
                 {
@@ -13079,7 +13179,7 @@ function TimeGrid({
 
 // src/components/date-time/datetime-picker/time-input.tsx
 import { useCallback as useCallback13, useEffect as useEffect18, useState as useState30 } from "react";
-import { Fragment as Fragment19, jsx as jsx108, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx108, jsxs as jsxs71 } from "react/jsx-runtime";
 function TimeInput({
   value,
   onChange,
@@ -13145,7 +13245,7 @@ function TimeInput({
     }
     commit(nh || h, nm || m, withSeconds ? ns || s : "00");
   }, [h, m, s, commit, withSeconds]);
-  return /* @__PURE__ */ jsxs70(
+  return /* @__PURE__ */ jsxs71(
     "fieldset",
     {
       className: cn(
@@ -13187,7 +13287,7 @@ function TimeInput({
             className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
           }
         ),
-        withSeconds && /* @__PURE__ */ jsxs70(Fragment19, { children: [
+        withSeconds && /* @__PURE__ */ jsxs71(Fragment19, { children: [
           /* @__PURE__ */ jsx108("span", { className: "select-none text-sm text-muted-foreground", children: ":" }),
           /* @__PURE__ */ jsx108(
             "input",
@@ -13331,7 +13431,7 @@ function useMiniCalendar(props) {
 }
 
 // src/components/date-time/mini-calendar/mini-calendar.tsx
-import { jsx as jsx110, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs72 } from "react/jsx-runtime";
 var ChevronLeft3 = /* @__PURE__ */ jsx110(
   "svg",
   {
@@ -13378,7 +13478,7 @@ function MiniCalendar({
     type: _nextType,
     ...nextSpread
   } = nextControlProps ?? {};
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs72(
     "div",
     {
       className: cn("flex w-full max-w-full items-stretch gap-0.5", className),
@@ -13424,7 +13524,7 @@ function MiniCalendar({
                 ...userRest
               } = user;
               const disabled = dayDisabled || !!userDisabled;
-              return /* @__PURE__ */ jsxs71(
+              return /* @__PURE__ */ jsxs72(
                 "button",
                 {
                   type: "button",
@@ -13498,7 +13598,7 @@ function MiniCalendar({
 }
 
 // src/components/date-time/month-picker/picker-content.tsx
-import { jsx as jsx111, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs73 } from "react/jsx-runtime";
 var ChevronLeft4 = /* @__PURE__ */ jsx111(
   "svg",
   {
@@ -13545,8 +13645,8 @@ function MonthPickerContent({
   isRangeEnd
 }) {
   const monthList = calendarType === "EC" ? EC_MONTHS_SHORT : MONTHS_SHORT;
-  return /* @__PURE__ */ jsxs72("div", { className: "min-w-[22rem] p-3", children: [
-    /* @__PURE__ */ jsxs72("div", { className: "mb-2 flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxs73("div", { className: "min-w-[22rem] p-3", children: [
+    /* @__PURE__ */ jsxs73("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx111(
         "button",
         {
@@ -13590,7 +13690,7 @@ function MonthPickerContent({
           const showStrip = hasRange && (inRange || (rStart || rEnd) && !(rStart && rEnd));
           return (
             /* biome-ignore lint/a11y/useSemanticElements: calendar cell, not a form fieldset */
-            /* @__PURE__ */ jsxs72(
+            /* @__PURE__ */ jsxs73(
               "div",
               {
                 role: "group",
@@ -13659,7 +13759,7 @@ function MonthPickerContent({
         y
       );
     }) }),
-    /* @__PURE__ */ jsxs72("div", { className: "mt-2 flex items-center justify-end gap-1 border-t border-border pt-2", children: [
+    /* @__PURE__ */ jsxs73("div", { className: "mt-2 flex items-center justify-end gap-1 border-t border-border pt-2", children: [
       /* @__PURE__ */ jsx111(
         "button",
         {
@@ -14224,8 +14324,8 @@ var MonthPickerInput = forwardRef8(function MonthPickerInput2(props, ref) {
 import { forwardRef as forwardRef9 } from "react";
 
 // src/components/date-time/time-picker/time-picker-content.tsx
-import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs73 } from "react/jsx-runtime";
-var CheckIcon = /* @__PURE__ */ jsxs73(
+import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs74 } from "react/jsx-runtime";
+var CheckIcon = /* @__PURE__ */ jsxs74(
   "svg",
   {
     className: "size-4",
@@ -14253,8 +14353,8 @@ function TimePickerContent({
   onTimeSChange,
   onConfirm
 }) {
-  return /* @__PURE__ */ jsx114("div", { className: "p-3", children: /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxs73("fieldset", { className: "flex flex-1 flex-row items-center gap-0.5 rounded border border-solid border-input bg-background px-2.5 py-0", children: [
+  return /* @__PURE__ */ jsx114("div", { className: "p-3", children: /* @__PURE__ */ jsxs74("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs74("fieldset", { className: "flex flex-1 flex-row items-center gap-0.5 rounded border border-solid border-input bg-background px-2.5 py-0", children: [
       /* @__PURE__ */ jsx114("legend", { className: "sr-only", children: "Time" }),
       /* @__PURE__ */ jsx114(
         "input",
@@ -14291,7 +14391,7 @@ function TimePickerContent({
           className: "w-7 shrink-0 border-0 bg-transparent text-center text-sm text-foreground outline-none placeholder:text-muted-foreground"
         }
       ),
-      withSeconds && /* @__PURE__ */ jsxs73(Fragment20, { children: [
+      withSeconds && /* @__PURE__ */ jsxs74(Fragment20, { children: [
         /* @__PURE__ */ jsx114("span", { className: "select-none px-1 text-sm text-muted-foreground", children: ":" }),
         /* @__PURE__ */ jsx114(
           "input",
@@ -14520,7 +14620,7 @@ var TimePicker = forwardRef9(
 );
 
 // src/components/date-time/year-picker/picker-content.tsx
-import { jsx as jsx116, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs75 } from "react/jsx-runtime";
 var ChevronLeft5 = /* @__PURE__ */ jsx116(
   "svg",
   {
@@ -14559,8 +14659,8 @@ function YearPickerContent({
   isRangeStart,
   isRangeEnd
 }) {
-  return /* @__PURE__ */ jsxs74("div", { className: "min-w-[22rem] p-3", children: [
-    /* @__PURE__ */ jsxs74("div", { className: "mb-2 flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxs75("div", { className: "min-w-[22rem] p-3", children: [
+    /* @__PURE__ */ jsxs75("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx116(
         "button",
         {
@@ -14620,7 +14720,7 @@ function YearPickerContent({
         })
       }
     ),
-    /* @__PURE__ */ jsxs74("div", { className: "mt-2 flex justify-end gap-1 border-t border-border pt-2", children: [
+    /* @__PURE__ */ jsxs75("div", { className: "mt-2 flex justify-end gap-1 border-t border-border pt-2", children: [
       /* @__PURE__ */ jsx116(
         "button",
         {
@@ -15039,7 +15139,7 @@ var YearPickerInput = forwardRef10(function YearPickerInput2(props, ref) {
 // src/components/ui/accordion.tsx
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { IconChevronDown as IconChevronDown6, IconChevronUp as IconChevronUp3 } from "@tabler/icons-react";
-import { Fragment as Fragment21, jsx as jsx119, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx119, jsxs as jsxs76 } from "react/jsx-runtime";
 var ACCORDION_ROOT_BASE_CN = "flex w-full flex-col";
 var ACCORDION_TRIGGER_BASE_CN = cn(
   "group/accordion-trigger relative flex flex-1 items-start justify-between",
@@ -15101,7 +15201,7 @@ function AccordionTrigger({
   ...props
 }) {
   const showChevron = chevron !== null;
-  return /* @__PURE__ */ jsx119(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsx119(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs76(
     AccordionPrimitive.Trigger,
     {
       "data-slot": "accordion-trigger",
@@ -15112,7 +15212,7 @@ function AccordionTrigger({
       ),
       ...props,
       children: [
-        showChevron && chevronPosition === "left" && /* @__PURE__ */ jsx119("span", { className: "mr-2 inline-flex items-center", children: chevron ?? /* @__PURE__ */ jsxs75(Fragment21, { children: [
+        showChevron && chevronPosition === "left" && /* @__PURE__ */ jsx119("span", { className: "mr-2 inline-flex items-center", children: chevron ?? /* @__PURE__ */ jsxs76(Fragment21, { children: [
           /* @__PURE__ */ jsx119(
             IconChevronDown6,
             {
@@ -15130,7 +15230,7 @@ function AccordionTrigger({
         ] }) }),
         icon && /* @__PURE__ */ jsx119("span", { className: "text-muted-foreground mr-2 inline-flex shrink-0", children: icon }),
         children,
-        showChevron && chevronPosition !== "left" && (chevron ?? /* @__PURE__ */ jsxs75(Fragment21, { children: [
+        showChevron && chevronPosition !== "left" && (chevron ?? /* @__PURE__ */ jsxs76(Fragment21, { children: [
           /* @__PURE__ */ jsx119(
             IconChevronDown6,
             {
@@ -15185,7 +15285,7 @@ function AccordionContent({
 // src/components/ui/action-icon.tsx
 import { useRender as useRender5 } from "@base-ui/react/use-render";
 import { cva as cva10 } from "class-variance-authority";
-import { Fragment as Fragment22, jsx as jsx120, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx120, jsxs as jsxs77 } from "react/jsx-runtime";
 var actionIconVariants = cva10(
   "cn-action-icon inline-flex items-center justify-center shrink-0 font-medium transition-colors cursor-pointer select-none leading-none relative overflow-hidden disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[loading]:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
@@ -15256,7 +15356,7 @@ function ActionIcon({
         color && "bg-[var(--action-icon-color)] hover:bg-[var(--action-icon-color-hover)]",
         className
       ),
-      children: /* @__PURE__ */ jsxs76(Fragment22, { children: [
+      children: /* @__PURE__ */ jsxs77(Fragment22, { children: [
         loading && /* @__PURE__ */ jsx120("span", { className: "cn-action-icon-loader absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx120(
           Spinner,
           {
@@ -15451,8 +15551,9 @@ function Anchor({
 
 // src/components/ui/angle-slider.tsx
 import { useCallback as useCallback20, useRef as useRef13, useState as useState35 } from "react";
-import { jsx as jsx124, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs78 } from "react/jsx-runtime";
 var TAU = 2 * Math.PI;
+var px = (n) => `${Math.round(n * 1e4) / 1e4}px`;
 function AngleSlider({
   className,
   value: valueProp,
@@ -15531,7 +15632,7 @@ function AngleSlider({
   const innerInset = Math.max(12, Math.round(size * 0.18));
   const thumbX = size / 2 + r * Math.cos(angleRad) - thumbOffset;
   const thumbY = size / 2 + r * Math.sin(angleRad) - thumbOffset;
-  return /* @__PURE__ */ jsxs77(
+  return /* @__PURE__ */ jsxs78(
     "div",
     {
       ref,
@@ -15548,11 +15649,11 @@ function AngleSlider({
         disabled && "pointer-events-none cursor-not-allowed opacity-50",
         className
       ),
-      style: { width: size, height: size },
+      style: { width: px(size), height: px(size) },
       onPointerDown: handlePointerDown,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs77(
+        /* @__PURE__ */ jsxs78(
           "svg",
           {
             className: "absolute inset-0 size-full",
@@ -15594,7 +15695,7 @@ function AngleSlider({
           {
             className: "cn-angle-slider-inner absolute",
             style: {
-              inset: innerInset
+              inset: px(innerInset)
             }
           }
         ),
@@ -15604,10 +15705,10 @@ function AngleSlider({
             "data-slot": "angle-slider-thumb",
             className: "cn-angle-slider-thumb absolute",
             style: {
-              width: thumbSize,
-              height: thumbSize,
-              left: thumbX,
-              top: thumbY
+              width: px(thumbSize),
+              height: px(thumbSize),
+              left: px(thumbX),
+              top: px(thumbY)
             }
           }
         ),
@@ -15622,7 +15723,7 @@ import { useMesob as useMesob8 } from "@mesob/ui/providers";
 import { IconChevronDown as IconChevronDown7 } from "@tabler/icons-react";
 import { motion } from "motion/react";
 import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo12, useRef as useRef14, useState as useState36 } from "react";
-import { jsx as jsx125, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs79 } from "react/jsx-runtime";
 function AnimatedTabs({
   tabs,
   activeTab: controlledActiveTab,
@@ -15802,13 +15903,13 @@ function AnimatedTabs({
       tab.value
     );
   };
-  return /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsxs79(
     "div",
     {
       "data-slot": "animated-tabs",
       className: cn("cn-animated-tabs flex flex-col", className),
       children: [
-        /* @__PURE__ */ jsx125("div", { ref: containerRef, className: "w-full", children: /* @__PURE__ */ jsxs78(
+        /* @__PURE__ */ jsx125("div", { ref: containerRef, className: "w-full", children: /* @__PURE__ */ jsxs79(
           "div",
           {
             ref: tabsListRef,
@@ -15819,8 +15920,8 @@ function AnimatedTabs({
                 const originalIndex = tabs.findIndex((t) => t.value === tab.value);
                 return renderTab(tab, originalIndex);
               }),
-              overflowTabs.length > 0 && /* @__PURE__ */ jsxs78(DropdownMenu, { children: [
-                /* @__PURE__ */ jsxs78(
+              overflowTabs.length > 0 && /* @__PURE__ */ jsxs79(DropdownMenu, { children: [
+                /* @__PURE__ */ jsxs79(
                   DropdownMenuTrigger,
                   {
                     ref: dropdownTriggerRef,
@@ -15912,7 +16013,7 @@ function BackgroundImage({
 // src/components/ui/badge.tsx
 import { useRender as useRender6 } from "@base-ui/react/use-render";
 import { cva as cva12 } from "class-variance-authority";
-import { Fragment as Fragment23, jsx as jsx128, jsxs as jsxs79 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx128, jsxs as jsxs80 } from "react/jsx-runtime";
 var BADGE_VARIANT_CN = {
   default: "cn-badge-variant-default",
   secondary: "cn-badge-variant-secondary",
@@ -15994,7 +16095,7 @@ function Badge({
         color && "bg-[var(--badge-color)] text-[var(--badge-color-fg)]",
         className
       ),
-      children: /* @__PURE__ */ jsxs79(Fragment23, { children: [
+      children: /* @__PURE__ */ jsxs80(Fragment23, { children: [
         leftSection,
         children,
         rightSection
@@ -16360,7 +16461,7 @@ function CalendarDayButton({
 import { IconChevronLeft as IconChevronLeft3, IconChevronRight as IconChevronRight6 } from "@tabler/icons-react";
 import useEmblaCarousel from "embla-carousel-react";
 import * as React12 from "react";
-import { jsx as jsx133, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs81 } from "react/jsx-runtime";
 var CarouselContext = React12.createContext(null);
 function useCarousel() {
   const context = React12.useContext(CarouselContext);
@@ -16501,7 +16602,7 @@ function CarouselPrevious({
   ...props
 }) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxs80(
+  return /* @__PURE__ */ jsxs81(
     Button,
     {
       "data-slot": "carousel-previous",
@@ -16529,7 +16630,7 @@ function CarouselNext({
   ...props
 }) {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxs80(
+  return /* @__PURE__ */ jsxs81(
     Button,
     {
       "data-slot": "carousel-next",
@@ -16572,7 +16673,7 @@ function Center({ className, inline, children, ...props }) {
 // src/components/ui/chart.tsx
 import * as React13 from "react";
 import * as RechartsPrimitive from "recharts";
-import { Fragment as Fragment24, jsx as jsx135, jsxs as jsxs81 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx135, jsxs as jsxs82 } from "react/jsx-runtime";
 var THEMES = { light: "", dark: ".dark" };
 var sanitizeToken = (value) => value.replace(/[^a-zA-Z0-9-_]/g, "");
 var ChartContext = React13.createContext(null);
@@ -16594,7 +16695,7 @@ function ChartContainer({
   const sanitizedUniqueId = sanitizeToken(uniqueId);
   const chartToken = id ? sanitizeToken(id) : sanitizedUniqueId;
   const chartId = `chart-${chartToken || sanitizedUniqueId}`;
-  return /* @__PURE__ */ jsx135(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsx135(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs82(
     "div",
     {
       "data-slot": "chart",
@@ -16673,7 +16774,7 @@ function ChartTooltipContent({
     return null;
   }
   const nestLabel = payload.length === 1 && indicator !== "dot";
-  return /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsxs82(
     "div",
     {
       className: cn(
@@ -16693,7 +16794,7 @@ function ChartTooltipContent({
                 "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                 indicator === "dot" && "items-center"
               ),
-              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs81(Fragment24, { children: [
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs82(Fragment24, { children: [
                 itemConfig?.icon ? /* @__PURE__ */ jsx135(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx135(
                   "div",
                   {
@@ -16712,7 +16813,7 @@ function ChartTooltipContent({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs81(
+                /* @__PURE__ */ jsxs82(
                   "div",
                   {
                     className: cn(
@@ -16720,7 +16821,7 @@ function ChartTooltipContent({
                       nestLabel ? "items-end" : "items-center"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs81("div", { className: "grid gap-1.5", children: [
+                      /* @__PURE__ */ jsxs82("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
                         /* @__PURE__ */ jsx135("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
                       ] }),
@@ -16760,7 +16861,7 @@ function ChartLegendContent({
       children: payload.filter((item) => item.type !== "none").map((item) => {
         const key = `${nameKey || item.dataKey || "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        return /* @__PURE__ */ jsxs81(
+        return /* @__PURE__ */ jsxs82(
           "div",
           {
             className: cn(
@@ -17123,7 +17224,7 @@ function hasAlpha(format) {
 import { useCallback as useCallback21, useEffect as useEffect24, useRef as useRef16, useState as useState38 } from "react";
 
 // src/components/ui/color-swatch.tsx
-import { jsx as jsx139, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs83 } from "react/jsx-runtime";
 var radiusClasses = {
   xs: "rounded-[var(--radius-xs)]",
   sm: "rounded-[var(--radius-sm)]",
@@ -17143,7 +17244,7 @@ function ColorSwatch({
   ...props
 }) {
   const sizeStyle = typeof size === "number" ? { width: size, height: size, minWidth: size, minHeight: size } : { width: size, height: size, minWidth: size, minHeight: size };
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs83(
     "div",
     {
       "data-slot": "color-swatch",
@@ -17170,7 +17271,7 @@ function ColorSwatch({
 }
 
 // src/components/ui/color-picker.tsx
-import { Fragment as Fragment25, jsx as jsx140, jsxs as jsxs83 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx140, jsxs as jsxs84 } from "react/jsx-runtime";
 var SATURATION_HEIGHT = {
   xs: 80,
   sm: 100,
@@ -17387,7 +17488,7 @@ function ColorPicker({
   const showAlpha = hasAlpha(format);
   const satHeight = SATURATION_HEIGHT[size];
   const thumbSize = THUMB_SIZE[size];
-  const pickerEl = /* @__PURE__ */ jsxs83(
+  const pickerEl = /* @__PURE__ */ jsxs84(
     "div",
     {
       className: cn(
@@ -17401,7 +17502,7 @@ function ColorPicker({
         "--cp-thumb-size": `${thumbSize}px`
       },
       children: [
-        withPicker && /* @__PURE__ */ jsxs83(Fragment25, { children: [
+        withPicker && /* @__PURE__ */ jsxs84(Fragment25, { children: [
           /* @__PURE__ */ jsx140(
             "div",
             {
@@ -17438,7 +17539,7 @@ function ColorPicker({
               )
             }
           ),
-          /* @__PURE__ */ jsxs83("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs84("div", { className: "flex flex-col gap-1", children: [
             hueLabel && /* @__PURE__ */ jsx140("span", { className: "text-muted-foreground text-xs", children: hueLabel }),
             /* @__PURE__ */ jsx140(
               HueAlphaSlider,
@@ -17456,9 +17557,9 @@ function ColorPicker({
               }
             )
           ] }),
-          showAlpha && /* @__PURE__ */ jsxs83("div", { className: "flex flex-col gap-1", children: [
+          showAlpha && /* @__PURE__ */ jsxs84("div", { className: "flex flex-col gap-1", children: [
             alphaLabel && /* @__PURE__ */ jsx140("span", { className: "text-muted-foreground text-xs", children: alphaLabel }),
-            /* @__PURE__ */ jsxs83("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs84("div", { className: "relative", children: [
               /* @__PURE__ */ jsx140(
                 "div",
                 {
@@ -17485,7 +17586,7 @@ function ColorPicker({
               )
             ] })
           ] }),
-          showAlpha && /* @__PURE__ */ jsxs83("div", { className: "flex items-center gap-2", children: [
+          showAlpha && /* @__PURE__ */ jsxs84("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx140(
               ColorSwatch,
               {
@@ -17588,7 +17689,7 @@ function ColorPicker({
 }
 
 // src/components/ui/color-input.tsx
-import { jsx as jsx141, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx141, jsxs as jsxs85 } from "react/jsx-runtime";
 var sizeClasses3 = {
   xs: "h-7 text-xs px-2",
   sm: "h-8 text-sm px-2.5",
@@ -17807,7 +17908,7 @@ var ColorInput = React14.forwardRef(
         )
       }
     ) : null;
-    const inputEl = /* @__PURE__ */ jsxs84("div", { ref: anchorRef, className: "relative w-full", children: [
+    const inputEl = /* @__PURE__ */ jsxs85("div", { ref: anchorRef, className: "relative w-full", children: [
       leftSection && /* @__PURE__ */ jsx141("div", { className: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center", children: leftSection }),
       /* @__PURE__ */ jsx141(
         Input,
@@ -17846,7 +17947,7 @@ var ColorInput = React14.forwardRef(
       ),
       rightSection && /* @__PURE__ */ jsx141("div", { className: "absolute right-0.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-auto", children: rightSection })
     ] });
-    const content = !withPopover || popoverDisabled ? inputEl : /* @__PURE__ */ jsxs84(Popover, { open: dropdownOpened, onOpenChange: setDropdownOpened, children: [
+    const content = !withPopover || popoverDisabled ? inputEl : /* @__PURE__ */ jsxs85(Popover, { open: dropdownOpened, onOpenChange: setDropdownOpened, children: [
       inputEl,
       /* @__PURE__ */ jsx141(
         PopoverContent,
@@ -17921,7 +18022,7 @@ ColorInput.displayName = "ColorInput";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
 import { IconCheck as IconCheck4, IconChevronDown as IconChevronDown9 } from "@tabler/icons-react";
 import { useMemo as useMemo13, useState as useState40 } from "react";
-import { jsx as jsx142, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx142, jsxs as jsxs86 } from "react/jsx-runtime";
 var COMBOBOX_CONTENT_BASE_CN = "cn-menu-target group/combobox-content relative max-h-[min(100dvh,var(--available-height,100dvh))] w-[var(--anchor-width,auto)] max-w-[min(100vw,var(--available-width,100vw))] min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-[var(--anchor-width,auto)]";
 var COMBOBOX_ITEM_BASE_CN = "relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 function Combobox({
@@ -17947,7 +18048,7 @@ function Combobox({
     const q = inputValue.toLowerCase();
     return options.filter((o) => o.label.toLowerCase().includes(q));
   }, [inputValue, options]);
-  return /* @__PURE__ */ jsxs85(
+  return /* @__PURE__ */ jsxs86(
     ComboboxPrimitive.Root,
     {
       "data-slot": "combobox",
@@ -17958,7 +18059,7 @@ function Combobox({
       onValueChange: (next) => onValueChange?.(next ?? null),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs85(InputGroup, { className: cn("w-auto", className), children: [
+        /* @__PURE__ */ jsxs86(InputGroup, { className: cn("w-auto", className), children: [
           /* @__PURE__ */ jsx142(
             ComboboxPrimitive.Input,
             {
@@ -17971,36 +18072,44 @@ function Combobox({
               )
             }
           ),
-          /* @__PURE__ */ jsxs85(InputGroupAddon, { align: "inline-end", children: [
-            /* @__PURE__ */ jsx142(
-              InputGroupButton,
-              {
-                size: "icon-xs",
-                variant: "ghost",
-                render: /* @__PURE__ */ jsx142(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", children: /* @__PURE__ */ jsx142(
-                  IconChevronDown9,
+          /* @__PURE__ */ jsxs86(
+            "div",
+            {
+              "data-slot": "input-group-addon",
+              "data-align": "inline-end",
+              className: "cn-input-group-addon cn-input-group-addon-align-inline-end order-last flex cursor-text items-center justify-center select-none appearance-none border-0 bg-transparent p-0 text-inherit",
+              children: [
+                /* @__PURE__ */ jsx142(
+                  InputGroupButton,
                   {
-                    "data-slot": "combobox-trigger-icon",
-                    className: "cn-combobox-trigger-icon"
+                    size: "icon-xs",
+                    variant: "ghost",
+                    render: /* @__PURE__ */ jsx142(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", children: /* @__PURE__ */ jsx142(
+                      IconChevronDown9,
+                      {
+                        "data-slot": "combobox-trigger-icon",
+                        className: "cn-combobox-trigger-icon"
+                      }
+                    ) }),
+                    disabled,
+                    className: cn(
+                      showClear && "group-has-data-[slot=combobox-clear]/input-group:hidden",
+                      "data-pressed:bg-transparent"
+                    )
+                  }
+                ),
+                showClear && /* @__PURE__ */ jsx142(
+                  ComboboxPrimitive.Clear,
+                  {
+                    "data-slot": "combobox-clear",
+                    render: /* @__PURE__ */ jsx142(InputGroupButton, { variant: "ghost", size: "icon-xs" }),
+                    disabled,
+                    children: /* @__PURE__ */ jsx142("span", { className: "sr-only", children: "Clear" })
                   }
-                ) }),
-                disabled,
-                className: cn(
-                  showClear && "group-has-data-[slot=combobox-clear]/input-group:hidden",
-                  "data-pressed:bg-transparent"
                 )
-              }
-            ),
-            showClear && /* @__PURE__ */ jsx142(
-              ComboboxPrimitive.Clear,
-              {
-                "data-slot": "combobox-clear",
-                render: /* @__PURE__ */ jsx142(InputGroupButton, { variant: "ghost", size: "icon-xs" }),
-                disabled,
-                children: /* @__PURE__ */ jsx142("span", { className: "sr-only", children: "Clear" })
-              }
-            )
-          ] })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsx142(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx142(
           ComboboxPrimitive.Positioner,
@@ -18027,7 +18136,7 @@ function Combobox({
                         className: "cn-combobox-empty",
                         children: emptyText
                       }
-                    ) : filteredOptions.map((option) => /* @__PURE__ */ jsxs85(
+                    ) : filteredOptions.map((option) => /* @__PURE__ */ jsxs86(
                       ComboboxPrimitive.Item,
                       {
                         value: option.value,
@@ -18088,7 +18197,7 @@ var containerVariants = cva16("mx-auto w-full", {
 function Container({
   className,
   size,
-  px,
+  px: px2,
   fluid,
   children,
   ...props
@@ -18099,7 +18208,7 @@ function Container({
       "data-slot": "container",
       className: cn(
         "cn-container min-w-0 transition-[max-width,padding]",
-        containerVariants({ size: fluid ? "fluid" : size, px }),
+        containerVariants({ size: fluid ? "fluid" : size, px: px2 }),
         className
       ),
       ...props,
@@ -18111,7 +18220,7 @@ function Container({
 // src/components/ui/context-menu.tsx
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
 import { IconCheck as IconCheck5, IconChevronRight as IconChevronRight7 } from "@tabler/icons-react";
-import { jsx as jsx144, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs87 } from "react/jsx-runtime";
 var CONTEXT_MENU_POSITIONER_CN = "isolate z-50 outline-none";
 var CONTEXT_MENU_CONTENT_CN = cn(
   "cn-context-menu-content cn-context-menu-content-logical cn-menu-target",
@@ -18180,7 +18289,7 @@ function ContextMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs86(
+  return /* @__PURE__ */ jsxs87(
     ContextMenuPrimitive.SubmenuTrigger,
     {
       "data-slot": "context-menu-sub-trigger",
@@ -18292,7 +18401,7 @@ function ContextMenuCheckboxItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs86(
+  return /* @__PURE__ */ jsxs87(
     ContextMenuPrimitive.CheckboxItem,
     {
       "data-slot": "context-menu-checkbox-item",
@@ -18317,7 +18426,7 @@ function ContextMenuRadioItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs86(
+  return /* @__PURE__ */ jsxs87(
     ContextMenuPrimitive.RadioItem,
     {
       "data-slot": "context-menu-radio-item",
@@ -18430,7 +18539,7 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import * as React15 from "react";
-import { jsx as jsx146, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx146, jsxs as jsxs88 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -18518,7 +18627,7 @@ function DataTable({
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues()
   });
-  return /* @__PURE__ */ jsx146("div", { "data-slot": "data-table", className: "cn-data-table", children: /* @__PURE__ */ jsxs87(Table, { children: [
+  return /* @__PURE__ */ jsx146("div", { "data-slot": "data-table", className: "cn-data-table", children: /* @__PURE__ */ jsxs88(Table, { children: [
     /* @__PURE__ */ jsx146(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx146(TableRow, { children: headerGroup.headers.map((header, index) => {
       const isFirst = index === 0;
       const isLast = index === headerGroup.headers.length - 1;
@@ -18578,13 +18687,13 @@ function DataTable({
 
 // src/components/ui/data-table/data-table-action.tsx
 import { IconChevronRight as IconChevronRight8 } from "@tabler/icons-react";
-import { jsx as jsx147, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs89 } from "react/jsx-runtime";
 function DataTableAction({
   onClick,
   disabled,
   "aria-label": ariaLabel = "Open menu"
 }) {
-  return /* @__PURE__ */ jsx147("div", { className: "cn-data-table-action flex justify-end", children: /* @__PURE__ */ jsxs88(
+  return /* @__PURE__ */ jsx147("div", { className: "cn-data-table-action flex justify-end", children: /* @__PURE__ */ jsxs89(
     Button,
     {
       variant: "ghost",
@@ -18620,12 +18729,12 @@ function DataTableColumnHeader({
 
 // src/components/ui/data-table/data-table-view-options.tsx
 import { IconSettings } from "@tabler/icons-react";
-import { jsx as jsx149, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx149, jsxs as jsxs90 } from "react/jsx-runtime";
 function DataTableViewOptions({
   table
 }) {
-  return /* @__PURE__ */ jsxs89(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs89(
+  return /* @__PURE__ */ jsxs90(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs90(
       DropdownMenuTrigger,
       {
         render: /* @__PURE__ */ jsx149(
@@ -18648,7 +18757,7 @@ function DataTableViewOptions({
       DropdownMenuContent,
       {
         className: cn("cn-data-table-view-options-content w-[150px]"),
-        children: /* @__PURE__ */ jsxs89(DropdownMenuGroup, { children: [
+        children: /* @__PURE__ */ jsxs90(DropdownMenuGroup, { children: [
           /* @__PURE__ */ jsx149(DropdownMenuLabel, { children: "Toggle columns" }),
           table.getAllColumns().filter(
             (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
@@ -18676,7 +18785,7 @@ import {
 
 // src/components/ui/drawer.tsx
 import { Dialog as DrawerPrimitive } from "@base-ui/react/dialog";
-import { jsx as jsx150, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs91 } from "react/jsx-runtime";
 function Drawer({
   ...props
 }) {
@@ -18716,9 +18825,9 @@ function DrawerContent({
   side = "bottom",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs90(DrawerPortal, { "data-slot": "drawer-portal", keepMounted: true, children: [
+  return /* @__PURE__ */ jsxs91(DrawerPortal, { "data-slot": "drawer-portal", keepMounted: true, children: [
     /* @__PURE__ */ jsx150(DrawerOverlay, {}),
-    /* @__PURE__ */ jsxs90(
+    /* @__PURE__ */ jsxs91(
       DrawerPrimitive.Popup,
       {
         "data-slot": "drawer-content",
@@ -18785,7 +18894,7 @@ function DrawerDescription({
 
 // src/components/ui/dropdown-button.tsx
 import { IconChevronDown as IconChevronDown10 } from "@tabler/icons-react";
-import { Fragment as Fragment26, jsx as jsx151, jsxs as jsxs91 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx151, jsxs as jsxs92 } from "react/jsx-runtime";
 var DROPDOWN_BUTTON_TRIGGER_SIZE_CN = {
   xs: "px-1.5",
   sm: "px-2",
@@ -18800,7 +18909,7 @@ function getButtonVariant(variant) {
   return variant;
 }
 function renderItemContent(item) {
-  return /* @__PURE__ */ jsxs91(Fragment26, { children: [
+  return /* @__PURE__ */ jsxs92(Fragment26, { children: [
     item.icon,
     /* @__PURE__ */ jsx151("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
     item.shortcut ? /* @__PURE__ */ jsx151(DropdownMenuShortcut, { children: item.shortcut }) : null
@@ -18808,7 +18917,7 @@ function renderItemContent(item) {
 }
 function renderActionItem(item, key) {
   if (item.items?.length) {
-    return /* @__PURE__ */ jsxs91(DropdownMenuSub, { children: [
+    return /* @__PURE__ */ jsxs92(DropdownMenuSub, { children: [
       /* @__PURE__ */ jsx151(DropdownMenuSubTrigger, { inset: item.inset, children: renderItemContent(item) }),
       /* @__PURE__ */ jsx151(DropdownMenuSubContent, { children: renderDropdownButtonItems(item.items) })
     ] }, key);
@@ -18890,7 +18999,7 @@ function DropdownButton({
   const variantClass = variant === "danger" ? "cn-dropdown-button-variant-danger" : "";
   const isDisabled = buttonProps.disabled || buttonProps.loading || items.length === 0;
   if (!split) {
-    return /* @__PURE__ */ jsxs91(DropdownMenu, { children: [
+    return /* @__PURE__ */ jsxs92(DropdownMenu, { children: [
       /* @__PURE__ */ jsx151(
         DropdownMenuTrigger,
         {
@@ -18921,8 +19030,8 @@ function DropdownButton({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxs91(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs91("div", { className: cn("cn-dropdown-button-shell", className), children: [
+  return /* @__PURE__ */ jsxs92(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs92("div", { className: cn("cn-dropdown-button-shell", className), children: [
       /* @__PURE__ */ jsx151(
         Button,
         {
@@ -18978,7 +19087,7 @@ function DropdownButton({
 
 // src/components/ui/file-button.tsx
 import { useRef as useRef18 } from "react";
-import { Fragment as Fragment27, jsx as jsx152, jsxs as jsxs92 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx152, jsxs as jsxs93 } from "react/jsx-runtime";
 function FileButton({
   onChange,
   accept,
@@ -18996,7 +19105,7 @@ function FileButton({
   const handleChange = (e) => {
     onChange(e.target.files);
   };
-  return /* @__PURE__ */ jsxs92(Fragment27, { children: [
+  return /* @__PURE__ */ jsxs93(Fragment27, { children: [
     /* @__PURE__ */ jsx152(
       "input",
       {
@@ -19164,7 +19273,7 @@ function FilePreviewSurface({
 }
 
 // src/components/ui/file-drop-input.tsx
-import { Fragment as Fragment28, jsx as jsx154, jsxs as jsxs93 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx154, jsxs as jsxs94 } from "react/jsx-runtime";
 function FileDropInput({
   className,
   onFilesChange,
@@ -19241,14 +19350,14 @@ function FileDropInput({
     }
     setFiles(nextFiles);
   };
-  const fileDropInputElement = /* @__PURE__ */ jsxs93(Fragment28, { children: [
-    /* @__PURE__ */ jsxs93(
+  const fileDropInputElement = /* @__PURE__ */ jsxs94(Fragment28, { children: [
+    /* @__PURE__ */ jsxs94(
       "div",
       {
         "data-slot": "file-drop-input-wrapper",
         className: cn("cn-file-drop-input-wrapper", className),
         children: [
-          /* @__PURE__ */ jsxs93(
+          /* @__PURE__ */ jsxs94(
             "label",
             {
               htmlFor: inputId,
@@ -19278,7 +19387,7 @@ function FileDropInput({
                     ...props
                   }
                 ),
-                singleItem ? /* @__PURE__ */ jsxs93(
+                singleItem ? /* @__PURE__ */ jsxs94(
                   "div",
                   {
                     "data-slot": "file-drop-input-single-preview",
@@ -19298,7 +19407,7 @@ function FileDropInput({
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsxs93(
+                      /* @__PURE__ */ jsxs94(
                         "div",
                         {
                           "data-slot": "file-drop-input-preview-actions",
@@ -19345,14 +19454,14 @@ function FileDropInput({
                       )
                     ]
                   }
-                ) : /* @__PURE__ */ jsxs93(
+                ) : /* @__PURE__ */ jsxs94(
                   "div",
                   {
                     "data-slot": "file-drop-input-prompt",
                     className: "cn-file-drop-input-prompt",
                     children: [
                       /* @__PURE__ */ jsx154(IconPhoto4, { className: "cn-file-drop-input-icon" }),
-                      /* @__PURE__ */ jsxs93("div", { children: [
+                      /* @__PURE__ */ jsxs94("div", { children: [
                         /* @__PURE__ */ jsx154("div", { className: "cn-file-drop-input-title", children: dropLabel }),
                         /* @__PURE__ */ jsx154("div", { className: "cn-file-drop-input-description", children: dropDescription })
                       ] })
@@ -19369,13 +19478,13 @@ function FileDropInput({
               className: "cn-file-drop-input-list",
               children: items.map((item) => {
                 const ItemIcon = getFileIcon2(item.type);
-                return /* @__PURE__ */ jsxs93(
+                return /* @__PURE__ */ jsxs94(
                   "div",
                   {
                     "data-slot": "file-drop-input-item",
                     className: "cn-file-drop-input-item",
                     children: [
-                      /* @__PURE__ */ jsxs93("div", { className: "cn-file-drop-input-item-left", children: [
+                      /* @__PURE__ */ jsxs94("div", { className: "cn-file-drop-input-item-left", children: [
                         /* @__PURE__ */ jsx154(ItemIcon, { className: "cn-file-drop-input-item-icon" }),
                         /* @__PURE__ */ jsx154("span", { className: "cn-file-drop-input-item-name", children: item.name }),
                         formatBytes2(item.size) ? /* @__PURE__ */ jsx154("span", { className: "cn-file-drop-input-item-size", children: formatBytes2(item.size) }) : null
@@ -19456,7 +19565,7 @@ import {
   IconX as IconX12
 } from "@tabler/icons-react";
 import { useId as useId7, useRef as useRef20, useState as useState45 } from "react";
-import { Fragment as Fragment29, jsx as jsx155, jsxs as jsxs94 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx155, jsxs as jsxs95 } from "react/jsx-runtime";
 function FileInput({
   className,
   onFilesChange,
@@ -19537,18 +19646,18 @@ function FileInput({
   const RootIcon = singleItem ? getFileIcon2(singleItem.type) : IconPaperclip;
   let metaContent = null;
   if (items.length > 1) {
-    metaContent = /* @__PURE__ */ jsxs94("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: [
+    metaContent = /* @__PURE__ */ jsxs95("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: [
       items.length,
       " files selected"
     ] });
   } else if (props.accept) {
-    metaContent = /* @__PURE__ */ jsxs94("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: [
+    metaContent = /* @__PURE__ */ jsxs95("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: [
       "Accepts ",
       props.accept
     ] });
   }
-  const fileInputElement = /* @__PURE__ */ jsxs94(Fragment29, { children: [
-    /* @__PURE__ */ jsxs94(
+  const fileInputElement = /* @__PURE__ */ jsxs95(Fragment29, { children: [
+    /* @__PURE__ */ jsxs95(
       "div",
       {
         "data-slot": "file-input-wrapper",
@@ -19577,7 +19686,7 @@ function FileInput({
               className: "cn-file-input-root",
               onClick: () => inputRef.current?.click(),
               disabled,
-              children: singleItem ? /* @__PURE__ */ jsxs94(Fragment29, { children: [
+              children: singleItem ? /* @__PURE__ */ jsxs95(Fragment29, { children: [
                 /* @__PURE__ */ jsx155(
                   "div",
                   {
@@ -19592,7 +19701,7 @@ function FileInput({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxs94("div", { "data-slot": "file-input-body", className: "cn-file-input-body", children: [
+                /* @__PURE__ */ jsxs95("div", { "data-slot": "file-input-body", className: "cn-file-input-body", children: [
                   /* @__PURE__ */ jsx155(
                     "div",
                     {
@@ -19603,7 +19712,7 @@ function FileInput({
                   ),
                   /* @__PURE__ */ jsx155("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: formatBytes2(singleItem.size) ?? "uploaded file" })
                 ] }),
-                /* @__PURE__ */ jsxs94(
+                /* @__PURE__ */ jsxs95(
                   "div",
                   {
                     "data-slot": "file-input-actions",
@@ -19642,7 +19751,7 @@ function FileInput({
                     ]
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs94(Fragment29, { children: [
+              ] }) : /* @__PURE__ */ jsxs95(Fragment29, { children: [
                 /* @__PURE__ */ jsx155(
                   "div",
                   {
@@ -19651,7 +19760,7 @@ function FileInput({
                     children: leftSection ?? /* @__PURE__ */ jsx155(RootIcon, { className: "size-4" })
                   }
                 ),
-                /* @__PURE__ */ jsxs94("div", { "data-slot": "file-input-body", className: "cn-file-input-body", children: [
+                /* @__PURE__ */ jsxs95("div", { "data-slot": "file-input-body", className: "cn-file-input-body", children: [
                   /* @__PURE__ */ jsx155(
                     "div",
                     {
@@ -19675,13 +19784,13 @@ function FileInput({
           ),
           !singleItem && items.length > 1 ? /* @__PURE__ */ jsx155("div", { "data-slot": "file-input-list", className: "cn-file-input-list", children: items.map((item) => {
             const ItemIcon = getFileIcon2(item.type);
-            return /* @__PURE__ */ jsxs94(
+            return /* @__PURE__ */ jsxs95(
               "div",
               {
                 "data-slot": "file-input-item",
                 className: "cn-file-input-item",
                 children: [
-                  /* @__PURE__ */ jsxs94("div", { className: "cn-file-input-item-left", children: [
+                  /* @__PURE__ */ jsxs95("div", { className: "cn-file-input-item-left", children: [
                     /* @__PURE__ */ jsx155(ItemIcon, { className: "cn-file-input-item-icon" }),
                     /* @__PURE__ */ jsx155("span", { className: "cn-file-input-item-name", children: item.name }),
                     formatBytes2(item.size) ? /* @__PURE__ */ jsx155("span", { className: "cn-file-input-item-size", children: formatBytes2(item.size) }) : null
@@ -20253,7 +20362,7 @@ function HoverCardContent({
 
 // src/components/ui/indicator.tsx
 import { cva as cva18 } from "class-variance-authority";
-import { jsx as jsx163, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs96 } from "react/jsx-runtime";
 var indicatorVariants = cva18(
   "cn-indicator absolute flex items-center justify-center rounded-full text-xs font-medium transition-colors",
   {
@@ -20317,7 +20426,7 @@ function Indicator({
   if (disabled) {
     return /* @__PURE__ */ jsx163("div", { className: cn(inline && "inline-block"), children });
   }
-  return /* @__PURE__ */ jsxs95(
+  return /* @__PURE__ */ jsxs96(
     "div",
     {
       "data-slot": "indicator-wrapper",
@@ -20525,7 +20634,7 @@ function ItemFooter({ className, ...props }) {
 
 // src/components/ui/json-input.tsx
 import { useState as useState47 } from "react";
-import { jsx as jsx165, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs97 } from "react/jsx-runtime";
 function JsonInput({
   className,
   value,
@@ -20578,7 +20687,7 @@ function JsonInput({
     onBlur?.(e);
   };
   const errorMessage = validationError || error;
-  return /* @__PURE__ */ jsxs96("div", { "data-slot": "json-input", className: "cn-json-input relative w-full", children: [
+  return /* @__PURE__ */ jsxs97("div", { "data-slot": "json-input", className: "cn-json-input relative w-full", children: [
     /* @__PURE__ */ jsx165(
       Textarea,
       {
@@ -20712,7 +20821,7 @@ function Mark({ className, color, ...props }) {
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
 import { IconCheck as IconCheck7, IconChevronRight as IconChevronRight9 } from "@tabler/icons-react";
-import { jsx as jsx169, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx169, jsxs as jsxs98 } from "react/jsx-runtime";
 var MENUBAR_POSITIONER_CN = "isolate z-50 outline-none";
 var MENUBAR_CONTENT_CN = cn(
   "cn-menubar-content cn-menubar-content-logical cn-menu-target",
@@ -20837,7 +20946,7 @@ function MenubarCheckboxItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs97(
+  return /* @__PURE__ */ jsxs98(
     MenuPrimitive.CheckboxItem,
     {
       "data-slot": "menubar-checkbox-item",
@@ -20862,7 +20971,7 @@ function MenubarRadioItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs97(
+  return /* @__PURE__ */ jsxs98(
     MenuPrimitive.RadioItem,
     {
       "data-slot": "menubar-radio-item",
@@ -20928,7 +21037,7 @@ function MenubarSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs97(
+  return /* @__PURE__ */ jsxs98(
     MenuPrimitive.SubmenuTrigger,
     {
       "data-slot": "menubar-sub-trigger",
@@ -20981,7 +21090,7 @@ function MenubarSubContent({
 
 // src/components/ui/money-input.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback23, useState as useState48 } from "react";
-import { jsx as jsx170, jsxs as jsxs98 } from "react/jsx-runtime";
+import { jsx as jsx170, jsxs as jsxs99 } from "react/jsx-runtime";
 var defaultCurrencies = [
   { label: "ETB", value: "etb", symbol: "Br" },
   { label: "USD", value: "usd", symbol: "$" },
@@ -21072,7 +21181,7 @@ var MoneyInput = forwardRef12(
         ref,
         "data-slot": "money-input",
         className: cn("w-full", className),
-        children: /* @__PURE__ */ jsxs98(InputGroup, { disabled, className: cn(sizes.group), children: [
+        children: /* @__PURE__ */ jsxs99(InputGroup, { disabled, className: cn(sizes.group), children: [
           /* @__PURE__ */ jsx170(
             InputGroupAddon,
             {
@@ -21095,7 +21204,7 @@ var MoneyInput = forwardRef12(
               className: "tabular-nums !pl-2"
             }
           ),
-          /* @__PURE__ */ jsx170(InputGroupAddon, { align: "inline-end", className: "py-0 pr-0", children: /* @__PURE__ */ jsx170("div", { className: "cn-money-input-currency-divider flex h-full items-center", children: /* @__PURE__ */ jsxs98(
+          /* @__PURE__ */ jsx170(InputGroupAddon, { align: "inline-end", className: "py-0 pr-0", as: "div", children: /* @__PURE__ */ jsx170("div", { className: "cn-money-input-currency-divider flex h-full items-center", children: /* @__PURE__ */ jsxs99(
             Select,
             {
               value: internalCurrency,
@@ -21127,7 +21236,7 @@ MoneyInput.displayName = "MoneyInput";
 import { Autocomplete as AutocompletePrimitive2 } from "@base-ui/react/autocomplete";
 import { IconCheck as IconCheck8, IconChevronDown as IconChevronDown11, IconX as IconX13 } from "@tabler/icons-react";
 import { useState as useState49 } from "react";
-import { jsx as jsx171, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx171, jsxs as jsxs100 } from "react/jsx-runtime";
 function MultiSelect({
   options,
   value = [],
@@ -21160,7 +21269,7 @@ function MultiSelect({
         "relative w-full data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       ),
-      children: /* @__PURE__ */ jsxs99(
+      children: /* @__PURE__ */ jsxs100(
         AutocompletePrimitive2.Root,
         {
           open: disabled ? false : open,
@@ -21177,16 +21286,16 @@ function MultiSelect({
           inline: true,
           ...props,
           children: [
-            /* @__PURE__ */ jsxs99("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx171("div", { className: "cn-combobox-chips", children: /* @__PURE__ */ jsxs99("div", { className: "flex flex-wrap gap-1", children: [
-                selectedOptions.map((option) => /* @__PURE__ */ jsxs99(
+            /* @__PURE__ */ jsxs100("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx171("div", { className: "cn-combobox-chips", children: /* @__PURE__ */ jsxs100("div", { className: "flex flex-wrap gap-1", children: [
+                selectedOptions.map((option) => /* @__PURE__ */ jsxs100(
                   "span",
                   {
                     "data-slot": "multi-select-chip",
                     className: "cn-combobox-chip",
                     children: [
                       /* @__PURE__ */ jsx171("span", { className: "flex-1", children: option.label }),
-                      /* @__PURE__ */ jsxs99(
+                      /* @__PURE__ */ jsxs100(
                         "button",
                         {
                           type: "button",
@@ -21226,7 +21335,7 @@ function MultiSelect({
               {
                 "data-slot": "multi-select-content",
                 className: cn("cn-multi-select-content cn-combobox-content"),
-                children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx171("div", { className: "cn-multi-select-empty", children: emptyText }) : filteredOptions.map((option) => /* @__PURE__ */ jsxs99(
+                children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx171("div", { className: "cn-multi-select-empty", children: emptyText }) : filteredOptions.map((option) => /* @__PURE__ */ jsxs100(
                   AutocompletePrimitive2.Item,
                   {
                     value: option.value,
@@ -21257,7 +21366,7 @@ function MultiSelect({
 // src/components/ui/native-select.tsx
 import { IconChevronDown as IconChevronDown12 } from "@tabler/icons-react";
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx172, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx172, jsxs as jsxs101 } from "react/jsx-runtime";
 function mapNativeSelectSize(size) {
   return size === "xs" || size === "sm" ? "sm" : "default";
 }
@@ -21270,7 +21379,7 @@ var NativeSelectBase = forwardRef13(
   ({ className, size = "md", data, children, rightSection, ...props }, ref) => {
     const options = data ? parseOptions(data) : null;
     const mappedSize = mapNativeSelectSize(size);
-    return /* @__PURE__ */ jsxs100(
+    return /* @__PURE__ */ jsxs101(
       "div",
       {
         "data-slot": "native-select-wrapper",
@@ -21352,7 +21461,7 @@ NativeSelect.displayName = "NativeSelect";
 // src/components/ui/nav-link.tsx
 import { useMesob as useMesob9 } from "@mesob/ui/providers";
 import { cva as cva21 } from "class-variance-authority";
-import { jsx as jsx173, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx173, jsxs as jsxs102 } from "react/jsx-runtime";
 var isExternal3 = (href) => !href || href.startsWith("http") || href.startsWith("//") || href.startsWith("mailto:") || href.startsWith("tel:");
 var navLinkVariants = cva21(
   "cn-nav-link flex items-center gap-3 px-3 py-2 text-sm font-medium transition-colors cursor-pointer",
@@ -21391,7 +21500,7 @@ function NavLink({
   const useLink = href && !isExternal3(href) && Link2;
   const Comp = useLink ? Link2 : "a";
   const linkProps = useLink ? { ...props, href, ...locale && { locale } } : { ...props, href };
-  return /* @__PURE__ */ jsxs101(
+  return /* @__PURE__ */ jsxs102(
     Comp,
     {
       "data-slot": "nav-link",
@@ -21425,14 +21534,14 @@ function NavLink({
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
 import { IconChevronDown as IconChevronDown13 } from "@tabler/icons-react";
 import { cva as cva22 } from "class-variance-authority";
-import { jsx as jsx174, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx174, jsxs as jsxs103 } from "react/jsx-runtime";
 function NavigationMenu({
   className,
   children,
   viewport = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs102(
+  return /* @__PURE__ */ jsxs103(
     NavigationMenuPrimitive.Root,
     {
       "data-slot": "navigation-menu",
@@ -21498,7 +21607,7 @@ function NavigationMenuTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs102(
+  return /* @__PURE__ */ jsxs103(
     NavigationMenuPrimitive.Trigger,
     {
       "data-slot": "navigation-menu-trigger",
@@ -21888,7 +21997,7 @@ function UnstyledButton({
 }
 
 // src/components/ui/number-input.tsx
-import { jsx as jsx178, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx178, jsxs as jsxs104 } from "react/jsx-runtime";
 var sizeClasses5 = {
   xs: "h-7",
   sm: "h-8",
@@ -21991,7 +22100,7 @@ var NumberInput = forwardRef14(
     };
     const hasWrapper = label || description || error || required || withAsterisk;
     const showControls = controls && !disabled;
-    const controlsEl = showControls ? /* @__PURE__ */ jsxs103(
+    const controlsEl = showControls ? /* @__PURE__ */ jsxs104(
       "div",
       {
         "data-slot": "number-input-controls",
@@ -22032,7 +22141,7 @@ var NumberInput = forwardRef14(
         ]
       }
     ) : null;
-    const inputEl = /* @__PURE__ */ jsxs103(InputGroup, { disabled, className: cn(sizeClasses5[size]), children: [
+    const inputEl = /* @__PURE__ */ jsxs104(InputGroup, { disabled, className: cn(sizeClasses5[size]), children: [
       leftSection && /* @__PURE__ */ jsx178(InputGroupAddon, { align: "inline-start", className: "pointer-events-none", children: leftSection }),
       /* @__PURE__ */ jsx178(
         InputGroupInput,
@@ -22052,12 +22161,13 @@ var NumberInput = forwardRef14(
           ...inputProps
         }
       ),
-      rightSection && !showControls && /* @__PURE__ */ jsx178(InputGroupAddon, { align: "inline-end", children: rightSection }),
+      rightSection && !showControls && /* @__PURE__ */ jsx178(InputGroupAddon, { align: "inline-end", as: "div", children: rightSection }),
       showControls && /* @__PURE__ */ jsx178(
         InputGroupAddon,
         {
           align: "inline-end",
           className: "cn-number-input-controls-addon",
+          as: "div",
           children: controlsEl
         }
       )
@@ -22092,7 +22202,7 @@ import {
   IconChevronRight as IconChevronRight10,
   IconDots as IconDots2
 } from "@tabler/icons-react";
-import { jsx as jsx179, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx179, jsxs as jsxs105 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
   return /* @__PURE__ */ jsx179(
     "nav",
@@ -22148,7 +22258,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs105(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
@@ -22166,7 +22276,7 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs105(
     PaginationLink,
     {
       "aria-label": "Go to next page",
@@ -22184,7 +22294,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs105(
     "span",
     {
       "aria-hidden": true,
@@ -22253,7 +22363,7 @@ function Paper({
 // src/components/ui/password-input.tsx
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
 import { forwardRef as forwardRef15, useState as useState50 } from "react";
-import { jsx as jsx181, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx181, jsxs as jsxs106 } from "react/jsx-runtime";
 var PasswordInput = forwardRef15(
   ({ className, showToggle = true, size, ...props }, ref) => {
     const [showPassword, setShowPassword] = useState50(false);
@@ -22265,7 +22375,7 @@ var PasswordInput = forwardRef15(
       xl: "h-12"
     };
     const iconButtonSize = size === "xs" || size === "sm" ? "icon-xs" : "icon-sm";
-    return /* @__PURE__ */ jsxs105(
+    return /* @__PURE__ */ jsxs106(
       InputGroup,
       {
         disabled: props.disabled,
@@ -22280,7 +22390,7 @@ var PasswordInput = forwardRef15(
               ...props
             }
           ),
-          showToggle && /* @__PURE__ */ jsx181(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx181(
+          showToggle && /* @__PURE__ */ jsx181(InputGroupAddon, { align: "inline-end", as: "div", children: /* @__PURE__ */ jsx181(
             InputGroupButton,
             {
               type: "button",
@@ -22343,7 +22453,7 @@ PasswordInputWithWrapper.displayName = "PasswordInputWithWrapper";
 
 // src/components/ui/pill.tsx
 import { cva as cva23 } from "class-variance-authority";
-import { jsx as jsx182, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx182, jsxs as jsxs107 } from "react/jsx-runtime";
 var pillVariants = cva23(
   "cn-pill inline-flex items-center gap-1 font-medium shrink-0 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-100",
   {
@@ -22387,7 +22497,7 @@ function Pill({
   disabled,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs106(
+  return /* @__PURE__ */ jsxs107(
     "span",
     {
       "data-slot": "pill",
@@ -22631,7 +22741,7 @@ function ResizableHandle({
 }
 
 // src/components/ui/ring-progress.tsx
-import { jsx as jsx186, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs108 } from "react/jsx-runtime";
 function RingProgress({
   value,
   size = 120,
@@ -22645,7 +22755,7 @@ function RingProgress({
   const radius = (size - thickness) / 2;
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - normalizedValue / 100 * circumference;
-  return /* @__PURE__ */ jsxs107(
+  return /* @__PURE__ */ jsxs108(
     "div",
     {
       "data-slot": "ring-progress",
@@ -22656,12 +22766,8 @@ function RingProgress({
       style: { width: size, height: size },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs107("svg", { width: size, height: size, className: "-rotate-90", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsxs107("title", { children: [
-            "Progress: ",
-            normalizedValue,
-            "%"
-          ] }),
+        /* @__PURE__ */ jsxs108("svg", { width: size, height: size, className: "-rotate-90", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx186("title", { children: `Progress: ${normalizedValue}%` }),
           /* @__PURE__ */ jsx186(
             "circle",
             {
@@ -22697,7 +22803,7 @@ function RingProgress({
 }
 
 // src/components/ui/semi-circle-progress.tsx
-import { jsx as jsx187, jsxs as jsxs108 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs109 } from "react/jsx-runtime";
 function SemiCircleProgress({
   className,
   value,
@@ -22711,7 +22817,7 @@ function SemiCircleProgress({
   const radius = (size - thickness) / 2;
   const circumference = Math.PI * radius;
   const strokeDashoffset = circumference - normalizedValue / 100 * circumference;
-  return /* @__PURE__ */ jsxs108(
+  return /* @__PURE__ */ jsxs109(
     "div",
     {
       "data-slot": "semi-circle-progress",
@@ -22721,7 +22827,7 @@ function SemiCircleProgress({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs108(
+        /* @__PURE__ */ jsxs109(
           "svg",
           {
             width: size,
@@ -22731,11 +22837,7 @@ function SemiCircleProgress({
             role: "img",
             "aria-label": `Progress: ${Math.round(normalizedValue)}%`,
             children: [
-              /* @__PURE__ */ jsxs108("title", { children: [
-                "Progress: ",
-                Math.round(normalizedValue),
-                "%"
-              ] }),
+              /* @__PURE__ */ jsx187("title", { children: `Progress: ${Math.round(normalizedValue)}%` }),
               /* @__PURE__ */ jsx187(
                 "path",
                 {
@@ -22886,7 +22988,7 @@ function Space({ className, h, w, style, ...props }) {
 // src/components/ui/spoiler.tsx
 import { IconChevronDown as IconChevronDown15 } from "@tabler/icons-react";
 import { useEffect as useEffect30, useRef as useRef22, useState as useState52 } from "react";
-import { jsx as jsx190, jsxs as jsxs109 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs110 } from "react/jsx-runtime";
 function Spoiler({
   maxHeight = 100,
   showLabel = "Show more",
@@ -22916,7 +23018,7 @@ function Spoiler({
       window.removeEventListener("resize", update);
     };
   }, [maxHeight]);
-  return /* @__PURE__ */ jsxs109(
+  return /* @__PURE__ */ jsxs110(
     "div",
     {
       "data-slot": "spoiler",
@@ -22942,7 +23044,7 @@ function Spoiler({
             className: "cn-spoiler-fade pointer-events-none absolute inset-x-0 bottom-0"
           }
         ),
-        shouldShowButton && /* @__PURE__ */ jsxs109(
+        shouldShowButton && /* @__PURE__ */ jsxs110(
           Button,
           {
             variant: "ghost",
@@ -23017,7 +23119,7 @@ function Stack({
 
 // src/components/ui/status-dropdown-button.tsx
 import { useCallback as useCallback25, useMemo as useMemo16, useState as useState53 } from "react";
-import { Fragment as Fragment30, jsx as jsx192, jsxs as jsxs110 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx192, jsxs as jsxs111 } from "react/jsx-runtime";
 var STATUS_MENU_SEPARATOR = "separator";
 function resolveConfirmConfig(target, entityLabel) {
   if (!target.confirm) {
@@ -23110,7 +23212,7 @@ function StatusDropdownButton({
     [value, states, transitions, groupLabel, onPick]
   );
   const current = states.find((s) => s.value === value);
-  return /* @__PURE__ */ jsxs110(Fragment30, { children: [
+  return /* @__PURE__ */ jsxs111(Fragment30, { children: [
     /* @__PURE__ */ jsx192(
       DropdownButton,
       {
@@ -23118,7 +23220,7 @@ function StatusDropdownButton({
         className,
         items,
         variant,
-        children: /* @__PURE__ */ jsxs110(
+        children: /* @__PURE__ */ jsxs111(
           "span",
           {
             className: cn(
@@ -23143,12 +23245,12 @@ function StatusDropdownButton({
             setPending(null);
           }
         },
-        children: /* @__PURE__ */ jsxs110(AlertDialogContent, { children: [
-          /* @__PURE__ */ jsxs110(AlertDialogHeader, { children: [
+        children: /* @__PURE__ */ jsxs111(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs111(AlertDialogHeader, { children: [
             /* @__PURE__ */ jsx192(AlertDialogTitle, { children: pending?.config.title ?? "Confirm?" }),
             pending?.config.description != null ? /* @__PURE__ */ jsx192(AlertDialogDescription, { children: pending.config.description }) : null
           ] }),
-          /* @__PURE__ */ jsxs110(AlertDialogFooter, { children: [
+          /* @__PURE__ */ jsxs111(AlertDialogFooter, { children: [
             /* @__PURE__ */ jsx192(AlertDialogCancel, { children: pending?.config.cancelLabel ?? "Cancel" }),
             /* @__PURE__ */ jsx192(
               AlertDialogAction,
@@ -23173,7 +23275,7 @@ function StatusDropdownButton({
 // src/components/ui/stepper.tsx
 import { IconCheck as IconCheck9 } from "@tabler/icons-react";
 import { createContext as createContext8, useContext as useContext9 } from "react";
-import { jsx as jsx193, jsxs as jsxs111 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs112 } from "react/jsx-runtime";
 var StepperContext = createContext8({
   activeStep: 0,
   orientation: "horizontal"
@@ -23218,7 +23320,7 @@ function Step({
   } else if (isActive) {
     state2 = "active";
   }
-  return /* @__PURE__ */ jsxs111(
+  return /* @__PURE__ */ jsxs112(
     "div",
     {
       "data-slot": "step",
@@ -23230,7 +23332,7 @@ function Step({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs111(
+        /* @__PURE__ */ jsxs112(
           "div",
           {
             className: cn(
@@ -23247,7 +23349,7 @@ function Step({
                   children: isCompleted ? /* @__PURE__ */ jsx193(IconCheck9, { className: "size-5" }) : /* @__PURE__ */ jsx193("span", { children: index + 1 })
                 }
               ),
-              (label || description) && /* @__PURE__ */ jsxs111(
+              (label || description) && /* @__PURE__ */ jsxs112(
                 "div",
                 {
                   className: cn(
@@ -23359,7 +23461,7 @@ function TableOfContents({
 // src/components/ui/tags-input.tsx
 import { IconX as IconX14 } from "@tabler/icons-react";
 import { useState as useState54 } from "react";
-import { jsx as jsx196, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx196, jsxs as jsxs113 } from "react/jsx-runtime";
 function TagsInput({
   className,
   value,
@@ -23417,21 +23519,21 @@ function TagsInput({
     }
     setInputValue(newValue);
   };
-  return /* @__PURE__ */ jsxs112(
+  return /* @__PURE__ */ jsxs113(
     "div",
     {
       "data-slot": "tags-input",
       className: cn("cn-tags-input cn-combobox-chips", className),
       ...props,
       children: [
-        tags.map((tag, index) => /* @__PURE__ */ jsxs112(
+        tags.map((tag, index) => /* @__PURE__ */ jsxs113(
           "span",
           {
             "data-slot": "tags-input-tag",
             className: "cn-combobox-chip",
             children: [
               tag,
-              /* @__PURE__ */ jsxs112(
+              /* @__PURE__ */ jsxs113(
                 "button",
                 {
                   type: "button",
@@ -23468,7 +23570,7 @@ function TagsInput({
 
 // src/components/ui/text-input.tsx
 import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx197, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx197, jsxs as jsxs114 } from "react/jsx-runtime";
 var TextInput = forwardRef16(
   ({
     label,
@@ -23497,13 +23599,21 @@ var TextInput = forwardRef16(
       xl: "h-12"
     };
     const hasWrapper = label || description || error || required || withAsterisk;
-    const inputElement = /* @__PURE__ */ jsxs113(
+    const inputElement = /* @__PURE__ */ jsxs114(
       InputGroup,
       {
         disabled,
         className: cn(size && groupSizeClasses[size]),
         children: [
-          leftSection && /* @__PURE__ */ jsx197(InputGroupAddon, { align: "inline-start", className: "pointer-events-none", children: leftSection }),
+          leftSection && /* @__PURE__ */ jsx197(
+            InputGroupAddon,
+            {
+              align: "inline-start",
+              className: "pointer-events-none",
+              as: "div",
+              children: leftSection
+            }
+          ),
           /* @__PURE__ */ jsx197(
             InputGroupInput,
             {
@@ -23519,6 +23629,7 @@ var TextInput = forwardRef16(
             InputGroupAddon,
             {
               align: "inline-end",
+              as: "div",
               className: cn(
                 rightSectionPointerEvents === "none" && "pointer-events-none"
               ),
@@ -24132,7 +24243,7 @@ function Transition({
 // src/components/ui/tree.tsx
 import { IconChevronRight as IconChevronRight11 } from "@tabler/icons-react";
 import { useState as useState56 } from "react";
-import { jsx as jsx204, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx204, jsxs as jsxs115 } from "react/jsx-runtime";
 function Tree({
   className,
   data,
@@ -24213,14 +24324,14 @@ function TreeNode({
     hasChildren,
     selected
   }) ?? node.label;
-  return /* @__PURE__ */ jsxs114(
+  return /* @__PURE__ */ jsxs115(
     "div",
     {
       role: "treeitem",
       tabIndex: 0,
       "aria-expanded": hasChildren ? expanded : void 0,
       children: [
-        /* @__PURE__ */ jsxs114(
+        /* @__PURE__ */ jsxs115(
           UnstyledButton,
           {
             type: "button",