@komensal/ui 0.13.3 → 0.13.5

package/dist/index.js

@@ -205,13 +205,21 @@ var AuthHeader = ({
 };
 
 // src/components/breadcrumb.tsx
+import * as React3 from "react";
+
+// src/components/skeleton.tsx
 import * as React2 from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var Breadcrumb = React2.forwardRef(({ className, items, ...props }, ref) => /* @__PURE__ */ jsx4("div", { className: cn("flex items-center gap-1 text-sm", className), ref, ...props, children: items.map((item, index) => {
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Skeleton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", { className: cn("bg-inactive animate-pulse rounded-md", className), ref, ...props }));
+Skeleton.displayName = "Skeleton";
+
+// src/components/breadcrumb.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Breadcrumb = React3.forwardRef(({ className, items, ...props }, ref) => /* @__PURE__ */ jsx5("div", { className: cn("flex items-center gap-1 text-sm", className), ref, ...props, children: items.map((item, index) => {
   const isLast = index === items.length - 1;
   return /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1", children: [
-    index > 0 && /* @__PURE__ */ jsx4("span", { className: "text-muted", children: "\u203A" }),
-    item.onClick && !isLast ? /* @__PURE__ */ jsx4("button", { className: "text-muted hover:text-foreground transition-colors", onClick: item.onClick, type: "button", children: item.label }) : /* @__PURE__ */ jsx4("span", { className: isLast ? "text-foreground font-medium" : "text-muted", children: item.label })
+    index > 0 && /* @__PURE__ */ jsx5("span", { className: "text-muted", children: "\u203A" }),
+    item.loading ? /* @__PURE__ */ jsx5(Skeleton, { className: "h-4 w-20" }) : item.onClick && !isLast ? /* @__PURE__ */ jsx5("button", { className: "text-muted hover:text-foreground transition-colors", onClick: item.onClick, type: "button", children: item.label }) : /* @__PURE__ */ jsx5("span", { className: isLast ? "text-foreground font-medium" : "text-muted", children: item.label })
   ] }, `${item.label}-${index}`);
 }) }));
 Breadcrumb.displayName = "Breadcrumb";
@@ -219,7 +227,7 @@ Breadcrumb.displayName = "Breadcrumb";
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import * as React4 from "react";
+import * as React5 from "react";
 
 // src/components/spinner.tsx
 import clsx2 from "clsx";
@@ -270,7 +278,7 @@ var setUiLanguage = (lng) => uiI18n.changeLanguage(lng);
 var useUiT = () => useTranslation("ui", { i18n: uiI18n }).t;
 
 // src/components/spinner.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var sizes = {
   lg: "70",
   md: "50",
@@ -286,7 +294,7 @@ var variants = {
 var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary" }) => {
   const t = useUiT();
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "svg",
       {
         fill: "currentColor",
@@ -296,8 +304,8 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
         width: sizes[size],
         xmlns: "http://www.w3.org/2000/svg",
         children: /* @__PURE__ */ jsxs5("g", { className: clsx2("spinner_V8m1", className), children: [
-          /* @__PURE__ */ jsx5("circle", { cx: "50", cy: "50", fill: "none", opacity: "0.25", r: "35", stroke: "currentColor", strokeWidth: "10" }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("circle", { cx: "50", cy: "50", fill: "none", opacity: "0.25", r: "35", stroke: "currentColor", strokeWidth: "10" }),
+          /* @__PURE__ */ jsx6(
             "circle",
             {
               cx: "50",
@@ -307,7 +315,7 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
               stroke: "currentColor",
               strokeDasharray: "164.93361431346415 56.97787143782138",
               strokeWidth: "10",
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "animateTransform",
                 {
                   attributeName: "transform",
@@ -323,18 +331,18 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
         ] })
       }
     ),
-    /* @__PURE__ */ jsx5("span", { className: "sr-only", children: loadingLabel ?? t("spinner.loading") })
+    /* @__PURE__ */ jsx6("span", { className: "sr-only", children: loadingLabel ?? t("spinner.loading") })
   ] });
 };
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React3 from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import * as React4 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx7(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
   TooltipPrimitive.Content,
   {
     className: cn(
@@ -347,18 +355,18 @@ var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, ...props },
   }
 ) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var Tooltip = React3.forwardRef(
+var Tooltip = React4.forwardRef(
   ({ children, childrenClassName, className, message, sideTooltip = "top" }, ref) => {
-    return /* @__PURE__ */ jsx6(TooltipProvider, { children: /* @__PURE__ */ jsxs6(TooltipRoot, { children: [
-      /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx6("div", { className: cn("", childrenClassName), ref, children }) }),
-      /* @__PURE__ */ jsx6(TooltipContent, { className: cn("", className), side: sideTooltip, children: /* @__PURE__ */ jsx6("p", { children: message }) })
+    return /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsxs6(TooltipRoot, { children: [
+      /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7("div", { className: cn("", childrenClassName), ref, children }) }),
+      /* @__PURE__ */ jsx7(TooltipContent, { className: cn("", className), side: sideTooltip, children: /* @__PURE__ */ jsx7("p", { children: message }) })
     ] }) });
   }
 );
 Tooltip.displayName = "Tooltip";
 
 // src/components/button.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "w-full inline-flex items-center justify-center gap-[10px] whitespace-nowrap rounded-[12px] border border-transparent text-base font-semibold transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:bg-inactive disabled:text-inactive-text disabled:border-transparent cursor-pointer",
   {
@@ -384,7 +392,7 @@ var buttonVariants = cva(
         `
       },
       size: {
-        default: "h-14 px-4",
+        default: "h-10 px-4",
         icon: "h-12 w-12 p-0",
         lg: "h-14 px-12",
         sm: "h-9 px-3 text-sm",
@@ -404,7 +412,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React4.forwardRef(
+var Button = React5.forwardRef(
   ({
     asChild = false,
     children,
@@ -434,21 +442,21 @@ var Button = React4.forwardRef(
         children: [
           iconLeft,
           icon,
-          /* @__PURE__ */ jsx7("span", { className: cn("flex w-full items-center justify-center gap-2", childrenClassName), children }),
+          /* @__PURE__ */ jsx8("span", { className: cn("flex w-full items-center justify-center gap-2", childrenClassName), children }),
           iconRight,
-          isLoading && /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-sm", children: /* @__PURE__ */ jsx7(Spinner, { size: "sm" }) })
+          isLoading && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-sm", children: /* @__PURE__ */ jsx8(Spinner, { size: "sm" }) })
         ]
       }
     );
-    return tooltip ? /* @__PURE__ */ jsx7(Tooltip, { childrenClassName: "flex items-center justify-center", message: tooltip, sideTooltip, children: buttonNode }) : buttonNode;
+    return tooltip ? /* @__PURE__ */ jsx8(Tooltip, { childrenClassName: "flex items-center justify-center", message: tooltip, sideTooltip, children: buttonNode }) : buttonNode;
   }
 );
 Button.displayName = "Button";
 
 // src/components/chip.tsx
 import { cva as cva2 } from "class-variance-authority";
-import * as React5 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import * as React6 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var chipVariants = cva2(
   "focus-visible:ring-ring inline-flex cursor-pointer items-center justify-center rounded-full px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none",
   {
@@ -463,24 +471,24 @@ var chipVariants = cva2(
     }
   }
 );
-var Chip = React5.forwardRef(({ active, className, ...props }, ref) => /* @__PURE__ */ jsx8("button", { className: cn(chipVariants({ active }), className), ref, type: "button", ...props }));
+var Chip = React6.forwardRef(({ active, className, ...props }, ref) => /* @__PURE__ */ jsx9("button", { className: cn(chipVariants({ active }), className), ref, type: "button", ...props }));
 Chip.displayName = "Chip";
 
 // src/components/command.tsx
 import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { Command as CommandPrimitive } from "cmdk";
-import * as React7 from "react";
+import * as React8 from "react";
 
 // src/components/dialog.tsx
 import { XIcon } from "@phosphor-icons/react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as React6 from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import * as React7 from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React6.forwardRef(({ className, isAbsolute = false, ...props }, ref) => /* @__PURE__ */ jsx9(
+var DialogOverlay = React7.forwardRef(({ className, isAbsolute = false, ...props }, ref) => /* @__PURE__ */ jsx10(
   DialogPrimitive.Overlay,
   {
     className: cn(
@@ -493,11 +501,11 @@ var DialogOverlay = React6.forwardRef(({ className, isAbsolute = false, ...props
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React6.forwardRef(
+var DialogContent = React7.forwardRef(
   ({ children, className, closeLabel, container, isAbsolute = false, isCloseIcon = false, overlayClassName, ...props }, ref) => {
     const t = useUiT();
     return /* @__PURE__ */ jsxs8(DialogPortal, { container, children: [
-      /* @__PURE__ */ jsx9(DialogOverlay, { className: overlayClassName, isAbsolute }),
+      /* @__PURE__ */ jsx10(DialogOverlay, { className: overlayClassName, isAbsolute }),
       /* @__PURE__ */ jsxs8(
         DialogPrimitive.Content,
         {
@@ -511,8 +519,8 @@ var DialogContent = React6.forwardRef(
           children: [
             children,
             isCloseIcon && /* @__PURE__ */ jsxs8(DialogPrimitive.Close, { className: "data-[state=open]:text-muted ring-offset-surface focus:ring-ring data-[state=open]:bg-hover hover:bg-hover absolute top-5 right-5 flex h-8 w-8 min-w-8 cursor-pointer items-center justify-center rounded-full bg-transparent opacity-70 transition-all hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
-              /* @__PURE__ */ jsx9(XIcon, { className: "text-body h-4 w-4" }),
-              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: closeLabel ?? t("dialog.close") })
+              /* @__PURE__ */ jsx10(XIcon, { className: "text-body h-4 w-4" }),
+              /* @__PURE__ */ jsx10("span", { className: "sr-only", children: closeLabel ?? t("dialog.close") })
             ] })
           ]
         }
@@ -521,26 +529,26 @@ var DialogContent = React6.forwardRef(
   }
 );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx9("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx9("div", { className: cn("flex flex-col-reverse justify-center gap-2 rounded-2xl sm:flex-row", className), ...props });
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col-reverse justify-center gap-2 rounded-2xl sm:flex-row", className), ...props });
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   DialogPrimitive.Title,
   {
     className: cn("text-lg leading-none font-semibold tracking-tight", className),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx9("span", { children: props.children })
+    children: /* @__PURE__ */ jsx10("span", { children: props.children })
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(DialogPrimitive.Description, { className: cn("text-muted text-sm", className), ref, ...props, children: /* @__PURE__ */ jsx9("span", { children: props.children }) }));
+var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(DialogPrimitive.Description, { className: cn("text-muted text-sm", className), ref, ...props, children: /* @__PURE__ */ jsx10("span", { children: props.children }) }));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/command.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var Command = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var Command = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CommandPrimitive,
   {
     className: cn("bg-surface text-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
@@ -550,11 +558,11 @@ var Command = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx10(Dialog, { ...props, children: /* @__PURE__ */ jsx10(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx10(Command, { className: "**:[[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3", children }) }) });
+  return /* @__PURE__ */ jsx11(Dialog, { ...props, children: /* @__PURE__ */ jsx11(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx11(Command, { className: "**:[[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3", children }) }) });
 };
-var CommandInput = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx10(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx10(
+var CommandInput = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx11(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx11(
     CommandPrimitive.Input,
     {
       className: cn(
@@ -567,11 +575,11 @@ var CommandInput = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(CommandPrimitive.List, { className: cn("max-h-75 overflow-x-hidden overflow-y-auto", className), ref, ...props }));
+var CommandList = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(CommandPrimitive.List, { className: cn("max-h-75 overflow-x-hidden overflow-y-auto", className), ref, ...props }));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React7.forwardRef((props, ref) => /* @__PURE__ */ jsx10(CommandPrimitive.Empty, { className: "py-6 text-center text-sm", ref, ...props }));
+var CommandEmpty = React8.forwardRef((props, ref) => /* @__PURE__ */ jsx11(CommandPrimitive.Empty, { className: "py-6 text-center text-sm", ref, ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandGroup = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CommandPrimitive.Group,
   {
     className: cn(
@@ -583,9 +591,9 @@ var CommandGroup = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(CommandPrimitive.Separator, { className: cn("bg-border -mx-1 h-px", className), ref, ...props }));
+var CommandSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(CommandPrimitive.Separator, { className: cn("bg-border -mx-1 h-px", className), ref, ...props }));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandItem = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CommandPrimitive.Item,
   {
     className: cn(
@@ -598,25 +606,25 @@ var CommandItem = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx10("span", { className: cn("text-muted ml-auto text-xs tracking-widest", className), ...props });
+  return /* @__PURE__ */ jsx11("span", { className: cn("text-muted ml-auto text-xs tracking-widest", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/form.tsx
 import { Slot as Slot2 } from "@radix-ui/react-slot";
-import * as React8 from "react";
+import * as React9 from "react";
 import { Controller, FormProvider, useFormContext } from "react-hook-form";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Form = FormProvider;
-var FormFieldContext = React8.createContext(null);
+var FormFieldContext = React9.createContext(null);
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx11(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx11(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx12(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx12(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React8.useContext(FormFieldContext);
-  const itemContext = React8.useContext(FormItemContext);
+  const fieldContext = React9.useContext(FormFieldContext);
+  const itemContext = React9.useContext(FormItemContext);
   const { formState, getFieldState } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField must be used within <FormField>");
@@ -635,18 +643,18 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React8.createContext(null);
-var FormItem = React8.forwardRef(
+var FormItemContext = React9.createContext(null);
+var FormItem = React9.forwardRef(
   ({ className, ...props }, ref) => {
-    const id = React8.useId();
-    return /* @__PURE__ */ jsx11(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx11("div", { className: cn("space-y-1", className), ref, ...props }) });
+    const id = React9.useId();
+    return /* @__PURE__ */ jsx12(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx12("div", { className: cn("space-y-1", className), ref, ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
-var FormControl = React8.forwardRef(
+var FormControl = React9.forwardRef(
   ({ ...props }, ref) => {
     const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       Slot2,
       {
         "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
@@ -659,14 +667,14 @@ var FormControl = React8.forwardRef(
   }
 );
 FormControl.displayName = "FormControl";
-var FormMessage = React8.forwardRef(
+var FormMessage = React9.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { error, formMessageId } = useFormField();
     const body = error?.message ? String(error.message) : children;
     if (!body) {
       return null;
     }
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "p",
       {
         className: cn("text-destructive text-[0.8rem] font-medium", className),
@@ -685,10 +693,10 @@ import { EyeIcon, EyeSlashIcon, XIcon as XIcon2 } from "@phosphor-icons/react";
 import { useState } from "react";
 
 // src/components/input.tsx
-import * as React9 from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Input = React9.forwardRef(({ className, onKeyDown, type, ...props }, ref) => {
-  return /* @__PURE__ */ jsx12(
+import * as React10 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Input = React10.forwardRef(({ className, onKeyDown, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx13(
     "input",
     {
       className: cn(
@@ -720,14 +728,14 @@ Input.displayName = "Input";
 // src/components/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva3 } from "class-variance-authority";
-import * as React10 from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import * as React11 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var labelVariants = cva3("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-var Label = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
+var Label = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/form-fields/label-field.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var LabelField = ({ label, labelClassName, name, visualRequired }) => {
   return /* @__PURE__ */ jsxs10(
     Label,
@@ -735,16 +743,16 @@ var LabelField = ({ label, labelClassName, name, visualRequired }) => {
       className: cn("text-body mb-2 text-start text-sm leading-none font-normal tracking-normal", labelClassName),
       htmlFor: name,
       children: [
-        /* @__PURE__ */ jsx14("span", { children: label }),
+        /* @__PURE__ */ jsx15("span", { children: label }),
         " ",
-        visualRequired && /* @__PURE__ */ jsx14("span", { className: "text-destructive", children: " *" })
+        visualRequired && /* @__PURE__ */ jsx15("span", { className: "text-destructive", children: " *" })
       ]
     }
   );
 };
 
 // src/components/form-fields/form-field-shell.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var FormFieldShell = ({
   children,
   hasError,
@@ -754,7 +762,7 @@ var FormFieldShell = ({
   name,
   visualRequired
 }) => /* @__PURE__ */ jsxs11(FormItem, { className: cn("flex flex-col", mainClassName), children: [
-  /* @__PURE__ */ jsx15(
+  /* @__PURE__ */ jsx16(
     LabelField,
     {
       label,
@@ -763,12 +771,12 @@ var FormFieldShell = ({
       visualRequired
     }
   ),
-  /* @__PURE__ */ jsx15(FormControl, { children }),
-  /* @__PURE__ */ jsx15(FormMessage, {})
+  /* @__PURE__ */ jsx16(FormControl, { children }),
+  /* @__PURE__ */ jsx16(FormMessage, {})
 ] });
 
 // src/components/form-fields/input-field.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var InputField = ({
   clearLabel,
   control,
@@ -793,14 +801,14 @@ var InputField = ({
   };
   const isPassword = type === "password";
   const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     FormField,
     {
       control,
       name,
       render: ({ field, fieldState }) => {
         const hasError = !!fieldState.error;
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx17(
           FormFieldShell,
           {
             hasError,
@@ -810,7 +818,7 @@ var InputField = ({
             name,
             visualRequired,
             children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 Input,
                 {
                   ...field,
@@ -831,24 +839,24 @@ var InputField = ({
                 }
               ),
               /* @__PURE__ */ jsxs12("div", { className: "absolute inset-y-0 right-0 flex items-center space-x-2 pr-2", children: [
-                field.value && isClearable && /* @__PURE__ */ jsx16(
+                field.value && isClearable && /* @__PURE__ */ jsx17(
                   "button",
                   {
                     className: "focus:outline-none",
                     onClick: onClear,
                     title: clearLabel ?? t("inputField.clear"),
                     type: "button",
-                    children: /* @__PURE__ */ jsx16(XIcon2, { size: 18 })
+                    children: /* @__PURE__ */ jsx17(XIcon2, { size: 18 })
                   }
                 ),
-                type === "password" && /* @__PURE__ */ jsx16(
+                type === "password" && /* @__PURE__ */ jsx17(
                   "button",
                   {
                     className: "focus:outline-none",
                     onClick: togglePasswordVisibility,
                     title: isPasswordVisible ? hidePasswordLabel ?? t("inputField.hidePassword") : showPasswordLabel ?? t("inputField.showPassword"),
                     type: "button",
-                    children: isPasswordVisible ? /* @__PURE__ */ jsx16(EyeIcon, { size: 18 }) : /* @__PURE__ */ jsx16(EyeSlashIcon, { size: 20 })
+                    children: isPasswordVisible ? /* @__PURE__ */ jsx17(EyeIcon, { size: 18 }) : /* @__PURE__ */ jsx17(EyeSlashIcon, { size: 20 })
                   }
                 )
               ] })
@@ -1077,7 +1085,7 @@ function useGoogleMapPicker({
 }
 
 // src/components/google-map-picker.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
 var MapPickerContent = (props) => {
   const { disabled, hasError, mapId, placeholder } = props;
@@ -1095,7 +1103,7 @@ var MapPickerContent = (props) => {
   } = useGoogleMapPicker(props);
   return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         "input",
         {
           className: cn(inputBase, inputFocus, hasError && "border-destructive"),
@@ -1108,14 +1116,14 @@ var MapPickerContent = (props) => {
           value: inputValue
         }
       ),
-      showDropdown && suggestions.length > 0 && /* @__PURE__ */ jsx17(
+      showDropdown && suggestions.length > 0 && /* @__PURE__ */ jsx18(
         "ul",
         {
           className: cn(
             "border-border bg-surface absolute mt-1 w-full overflow-hidden rounded-[10px] border shadow-md",
             zPopover
           ),
-          children: suggestions.map((suggestion) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(
+          children: suggestions.map((suggestion) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
             "button",
             {
               className: "text-foreground hover:bg-hover w-full px-4 py-3 text-left text-sm transition-colors",
@@ -1127,7 +1135,7 @@ var MapPickerContent = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx17("div", { className: "border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5", children: /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18("div", { className: "border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5", children: /* @__PURE__ */ jsx18(
       Map2,
       {
         defaultCenter: DEFAULT_CENTER,
@@ -1138,15 +1146,15 @@ var MapPickerContent = (props) => {
         mapId: mapId ?? import.meta.env.VITE_GOOGLE_MAPS_MAP_ID ?? "DEMO_MAP_ID",
         onClick: handleMapClick,
         style: { height: "100%", width: "100%" },
-        children: position && /* @__PURE__ */ jsx17(AdvancedMarker, { draggable: !disabled, onDragEnd: handleMarkerDragEnd, position })
+        children: position && /* @__PURE__ */ jsx18(AdvancedMarker, { draggable: !disabled, onDragEnd: handleMarkerDragEnd, position })
       }
     ) })
   ] });
 };
-var GoogleMapPicker = (props) => /* @__PURE__ */ jsx17(APIProvider, { apiKey: props.apiKey ?? import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "", language: "es", region: "CO", children: /* @__PURE__ */ jsx17(MapPickerContent, { ...props }) });
+var GoogleMapPicker = (props) => /* @__PURE__ */ jsx18(APIProvider, { apiKey: props.apiKey ?? import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "", language: "es", region: "CO", children: /* @__PURE__ */ jsx18(MapPickerContent, { ...props }) });
 
 // src/components/form-fields/map-picker-field.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var MapPickerField = ({
   control,
   label,
@@ -1155,12 +1163,12 @@ var MapPickerField = ({
   name,
   visualRequired,
   ...pickerProps
-}) => /* @__PURE__ */ jsx18(
+}) => /* @__PURE__ */ jsx19(
   FormField,
   {
     control,
     name,
-    render: ({ field, fieldState }) => /* @__PURE__ */ jsx18(
+    render: ({ field, fieldState }) => /* @__PURE__ */ jsx19(
       FormFieldShell,
       {
         hasError: !!fieldState.error,
@@ -1169,7 +1177,7 @@ var MapPickerField = ({
         mainClassName,
         name,
         visualRequired,
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           GoogleMapPicker,
           {
             ...pickerProps,
@@ -1185,14 +1193,14 @@ var MapPickerField = ({
 
 // src/components/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
-import React11 from "react";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import React12 from "react";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function InputOTP({
   className,
   containerClassName,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     OTPInput,
     {
       className: cn("disabled:cursor-not-allowed", className),
@@ -1203,14 +1211,14 @@ function InputOTP({
   );
 }
 function InputOTPGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("div", { className: cn("flex items-center gap-2", className), "data-slot": "input-otp-group", ...props });
+  return /* @__PURE__ */ jsx20("div", { className: cn("flex items-center gap-2", className), "data-slot": "input-otp-group", ...props });
 }
 function InputOTPSlot({
   className,
   index,
   ...props
 }) {
-  const inputOTPContext = React11.useContext(OTPInputContext);
+  const inputOTPContext = React12.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
   return /* @__PURE__ */ jsxs14(
     "div",
@@ -1227,14 +1235,14 @@ function InputOTPSlot({
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx19("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx19("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx20("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx20("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) })
       ]
     }
   );
 }
 
 // src/components/form-fields/otp-field.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function OTPField({
   autoFocus,
   className,
@@ -1247,13 +1255,13 @@ function OTPField({
   otpLength = 6,
   visualRequired
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     FormField,
     {
       control,
       name,
       render: ({ field, fieldState }) => /* @__PURE__ */ jsxs15(FormItem, { className: cn("flex flex-col", className), children: [
-        label ? /* @__PURE__ */ jsx20(
+        label ? /* @__PURE__ */ jsx21(
           LabelField,
           {
             label,
@@ -1262,7 +1270,7 @@ function OTPField({
             visualRequired
           }
         ) : null,
-        /* @__PURE__ */ jsx20(FormControl, { children: /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(FormControl, { children: /* @__PURE__ */ jsx21(
           InputOTP,
           {
             "aria-invalid": fieldState.invalid || void 0,
@@ -1277,10 +1285,10 @@ function OTPField({
             onPaste: (e) => field.onChange(e.clipboardData.getData("text")),
             pattern: "[0-9]*",
             value: field.value ?? "",
-            children: /* @__PURE__ */ jsx20(InputOTPGroup, { children: Array.from({ length: otpLength }).map((_, i) => /* @__PURE__ */ jsx20(InputOTPSlot, { "aria-invalid": fieldState.invalid || void 0, index: i }, i)) })
+            children: /* @__PURE__ */ jsx21(InputOTPGroup, { children: Array.from({ length: otpLength }).map((_, i) => /* @__PURE__ */ jsx21(InputOTPSlot, { "aria-invalid": fieldState.invalid || void 0, index: i }, i)) })
           }
         ) }),
-        /* @__PURE__ */ jsx20(FormMessage, {})
+        /* @__PURE__ */ jsx21(FormMessage, {})
       ] })
     }
   );
@@ -1292,11 +1300,11 @@ import { cloneElement, useCallback as useCallback2, useId as useId2, useMemo as
 
 // src/components/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React12 from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import * as React13 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React12.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx21(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
+var PopoverContent = React13.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx22(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx22(
   PopoverPrimitive.Content,
   {
     align,
@@ -1312,20 +1320,20 @@ var PopoverContent = React12.forwardRef(({ align = "center", className, sideOffs
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/time-columns.tsx
-import * as React13 from "react";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import * as React14 from "react";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var TimeColumns = ({ hours, minutes, onSelectHour, onSelectMinute, value }) => {
   const [selectedHour, selectedMinute] = value ? value.split(":") : ["", ""];
-  const hourListRef = React13.useRef(null);
-  const minuteListRef = React13.useRef(null);
-  React13.useEffect(() => {
+  const hourListRef = React14.useRef(null);
+  const minuteListRef = React14.useRef(null);
+  React14.useEffect(() => {
     hourListRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
     minuteListRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
   }, []);
   return /* @__PURE__ */ jsxs16("div", { className: "divide-border flex divide-x", children: [
-    /* @__PURE__ */ jsx22("div", { className: "max-h-60 flex-1 overflow-y-auto", ref: hourListRef, children: hours.map((hour) => {
+    /* @__PURE__ */ jsx23("div", { className: "max-h-60 flex-1 overflow-y-auto", ref: hourListRef, children: hours.map((hour) => {
       const isSelected = hour === selectedHour;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         "button",
         {
           className: cn(
@@ -1340,9 +1348,9 @@ var TimeColumns = ({ hours, minutes, onSelectHour, onSelectMinute, value }) => {
         hour
       );
     }) }),
-    /* @__PURE__ */ jsx22("div", { className: "max-h-60 flex-1 overflow-y-auto", ref: minuteListRef, children: minutes.map((minute) => {
+    /* @__PURE__ */ jsx23("div", { className: "max-h-60 flex-1 overflow-y-auto", ref: minuteListRef, children: minutes.map((minute) => {
       const isSelected = minute === selectedMinute;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         "button",
         {
           className: cn(
@@ -1401,7 +1409,7 @@ function useSelectFilter(items, labelKey, valueKey) {
 }
 
 // src/components/select-input.tsx
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var SelectInput = (props) => {
   const t = useUiT();
   const {
@@ -1487,9 +1495,9 @@ var SelectInput = (props) => {
     setPrevValue(value);
     setValueItem(value);
   }
-  return /* @__PURE__ */ jsx23("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs17("div", { className: "relative flex flex-col justify-center", children: [
+  return /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs17("div", { className: "relative flex flex-col justify-center", children: [
     /* @__PURE__ */ jsxs17(Popover, { onOpenChange: setOpen, open, children: [
-      /* @__PURE__ */ jsx23(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx24(
         Button,
         {
           "aria-controls": listboxId,
@@ -1505,30 +1513,30 @@ var SelectInput = (props) => {
           children: loading ? /* @__PURE__ */ jsxs17(Fragment3, { children: [
             loadingLabel ?? t("selectInput.loading"),
             " ",
-            /* @__PURE__ */ jsx23(Spinner, {})
-          ] }) : /* @__PURE__ */ jsx23("div", { className: "relative flex h-5 w-full items-center", children: timeField ? /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center justify-center gap-5 truncate", children: [
-            valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx23("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder }),
-            /* @__PURE__ */ jsx23(ClockIcon, { className: "h-4 w-4 shrink-0 opacity-50" })
+            /* @__PURE__ */ jsx24(Spinner, {})
+          ] }) : /* @__PURE__ */ jsx24("div", { className: "relative flex h-5 w-full items-center", children: timeField ? /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center justify-center gap-5 truncate", children: [
+            valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx24("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder }),
+            /* @__PURE__ */ jsx24(ClockIcon, { className: "h-4 w-4 shrink-0 opacity-50" })
           ] }) : /* @__PURE__ */ jsxs17(Fragment3, { children: [
             /* @__PURE__ */ jsxs17("div", { className: "flex w-full max-w-[90%] items-center truncate", children: [
-              leftIcon && /* @__PURE__ */ jsx23("span", { className: "mr-2 shrink-0", children: cloneElement(leftIcon, { size: 20, strokeWidth: 1 }) }),
-              valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx23("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder })
+              leftIcon && /* @__PURE__ */ jsx24("span", { className: "mr-2 shrink-0", children: cloneElement(leftIcon, { size: 20, strokeWidth: 1 }) }),
+              valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx24("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder })
             ] }),
             /* @__PURE__ */ jsxs17("div", { className: "absolute top-0.5 right-0 flex gap-2", children: [
-              ableDeleteOption && /* @__PURE__ */ jsx23("div", { "aria-hidden": true, className: "h-4 w-4 shrink-0" }),
-              !open ? /* @__PURE__ */ jsx23(CaretDownIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx23(CaretUpIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+              ableDeleteOption && /* @__PURE__ */ jsx24("div", { "aria-hidden": true, className: "h-4 w-4 shrink-0" }),
+              !open ? /* @__PURE__ */ jsx24(CaretDownIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx24(CaretUpIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
             ] })
           ] }) })
         }
       ) }),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         PopoverContent,
         {
           className: cn("bg-surface border-border rounded-sm p-1", zPopoverAboveDialog),
           id: listboxId,
           onOpenAutoFocus: (e) => e.preventDefault(),
           style: timeField ? { maxWidth: "auto", width: "180px" } : width > 0 ? { maxWidth: "auto", minWidth: `${width}px`, width: `${width}px` } : void 0,
-          children: timeField ? /* @__PURE__ */ jsx23(
+          children: timeField ? /* @__PURE__ */ jsx24(
             TimeColumns,
             {
               hours: timeHours,
@@ -1538,7 +1546,7 @@ var SelectInput = (props) => {
               value: valueItem
             }
           ) : /* @__PURE__ */ jsxs17(Command, { className: "flex w-full flex-col gap-2", children: [
-            search && /* @__PURE__ */ jsx23(
+            search && /* @__PURE__ */ jsx24(
               Input,
               {
                 className: "mb-1 rounded-sm",
@@ -1547,11 +1555,11 @@ var SelectInput = (props) => {
                 value: query
               }
             ),
-            /* @__PURE__ */ jsx23(CommandEmpty, { className: "text-center", children: noResultsLabel ?? t("selectInput.noResults") }),
-            /* @__PURE__ */ jsx23(CommandList, { children: /* @__PURE__ */ jsx23(CommandGroup, { className: "p-0", children: filteredOptions.map((item) => {
+            /* @__PURE__ */ jsx24(CommandEmpty, { className: "text-center", children: noResultsLabel ?? t("selectInput.noResults") }),
+            /* @__PURE__ */ jsx24(CommandList, { children: /* @__PURE__ */ jsx24(CommandGroup, { className: "p-0", children: filteredOptions.map((item) => {
               const labelValue = item[labelKey];
               const valueValue = item[valueKey];
-              return /* @__PURE__ */ jsx23(
+              return /* @__PURE__ */ jsx24(
                 CommandItem,
                 {
                   className: cn(
@@ -1574,7 +1582,7 @@ var SelectInput = (props) => {
         }
       )
     ] }),
-    ableDeleteOption && !loading && !timeField && /* @__PURE__ */ jsx23(
+    ableDeleteOption && !loading && !timeField && /* @__PURE__ */ jsx24(
       "button",
       {
         "aria-label": t("selectInput.clear"),
@@ -1587,14 +1595,14 @@ var SelectInput = (props) => {
           setOpen(false);
         },
         type: "button",
-        children: /* @__PURE__ */ jsx23(XIcon3, { className: "h-4 w-4 shrink-0 opacity-50" })
+        children: /* @__PURE__ */ jsx24(XIcon3, { className: "h-4 w-4 shrink-0 opacity-50" })
       }
     )
   ] }) });
 };
 
 // src/components/form-fields/select-field.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var SelectField = ({
   ableDeleteOption,
   className,
@@ -1610,14 +1618,14 @@ var SelectField = ({
   search,
   visualRequired
 }) => {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     FormField,
     {
       control,
       name,
       render: ({ field, fieldState }) => {
         const hasError = !!fieldState.error;
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           FormFieldShell,
           {
             hasError,
@@ -1626,7 +1634,7 @@ var SelectField = ({
             mainClassName,
             name,
             visualRequired,
-            children: /* @__PURE__ */ jsx24(
+            children: /* @__PURE__ */ jsx25(
               SelectInput,
               {
                 ableDeleteOption,
@@ -1652,10 +1660,10 @@ var SelectField = ({
 
 // src/components/password-checklist.tsx
 import { CheckCircleIcon as CheckCircleIcon2, XCircleIcon } from "@phosphor-icons/react";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 var PasswordChecklist = ({ className, rules, value }) => {
   if (rules.length === 0) return null;
-  return /* @__PURE__ */ jsx25("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
+  return /* @__PURE__ */ jsx26("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
     const isMet = rule.test(value);
     const Icon = isMet ? CheckCircleIcon2 : XCircleIcon;
     return /* @__PURE__ */ jsxs18(
@@ -1666,8 +1674,8 @@ var PasswordChecklist = ({ className, rules, value }) => {
           isMet ? "text-success" : "text-inactive-text"
         ),
         children: [
-          /* @__PURE__ */ jsx25(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx25("span", { children: rule.label })
+          /* @__PURE__ */ jsx26(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx26("span", { children: rule.label })
         ]
       },
       rule.key
@@ -1675,12 +1683,6 @@ var PasswordChecklist = ({ className, rules, value }) => {
   }) });
 };
 
-// src/components/skeleton.tsx
-import * as React14 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var Skeleton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { className: cn("bg-inactive animate-pulse rounded-md", className), ref, ...props }));
-Skeleton.displayName = "Skeleton";
-
 // src/components/step-header.tsx
 import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [