@komensal/ui 0.15.0 → 0.16.1

package/dist/index.js

@@ -1,134 +1,43 @@
-// src/components/add-tile.tsx
-import * as React from "react";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/utils/color.ts
-function isLightColor(hex) {
-  const normalized = hex.replace("#", "");
-  const r = parseInt(normalized.slice(0, 2), 16);
-  const g = parseInt(normalized.slice(2, 4), 16);
-  const b = parseInt(normalized.slice(4, 6), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.6;
-}
-
-// src/utils/format.ts
-var DEFAULT_CURRENCY = "COP";
-var DEFAULT_LOCALE = "es-CO";
-function capitalize(value) {
-  if (!value) return "";
-  const trimmed = value.trimStart();
-  if (trimmed.length === 0) return value;
-  return trimmed.charAt(0).toLocaleUpperCase("es") + trimmed.slice(1);
-}
-function formatNumber(value, locale = DEFAULT_LOCALE) {
-  return new Intl.NumberFormat(locale, { style: "decimal" }).format(value);
-}
-function formatPrice(value, locale = DEFAULT_LOCALE, currency = DEFAULT_CURRENCY) {
-  return new Intl.NumberFormat(locale, {
-    currency,
-    maximumFractionDigits: 0,
-    style: "currency"
-  }).format(value);
-}
-
-// src/utils/styles.ts
-var inputSurface = cn(
-  "w-full rounded-[10px] px-3 text-base font-normal",
-  "border-border bg-surface text-foreground border",
-  "transition-all duration-200 ease-in-out",
-  "placeholder:text-icon-muted placeholder:text-sm placeholder:leading-none placeholder:font-normal",
-  "disabled:bg-inactive disabled:text-inactive-text disabled:border-inactive disabled:placeholder:text-inactive-text disabled:cursor-not-allowed"
-);
-var inputBase = cn("flex !h-[50px] items-center justify-between gap-[10px]", inputSurface);
-var inputPlaceholder = cn("text-icon-muted text-sm leading-none font-normal");
-var inputDisabled = cn("cursor-not-allowed opacity-50");
-var inputCompact = cn(
-  "border-border bg-surface text-foreground focus:border-primary focus:ring-ring h-9 w-full rounded-lg border px-2.5 text-sm focus:ring-2 focus:outline-none"
-);
-var inputFocus = cn(
-  "focus:outline-none focus-visible:outline-none",
-  "focus-visible:ring-ring focus-visible:border-primary focus-visible:ring-2",
-  "data-[state=open]:ring-ring data-[state=open]:border-primary data-[state=open]:ring-2"
-);
-
-// src/utils/tag-emoji.ts
-var TAG_EMOJI_RULES = [
-  { emoji: "\u{1F336}\uFE0F", keywords: ["picante", "picoso", "spicy"] },
-  { emoji: "\u{1F95C}", keywords: ["nuez", "nueces", "mani", "cacahuate", "frutos secos"] },
-  { emoji: "\u{1F331}", keywords: ["vegano", "vegetariano", "vegan"] },
-  { emoji: "\u{1F33E}", keywords: ["sin gluten", "gluten free"] },
-  { emoji: "\u{1F95B}", keywords: ["lacteos", "leche", "lactosa"] },
-  { emoji: "\u{1F990}", keywords: ["marisco", "camaron"] },
-  { emoji: "\u{1F525}", keywords: ["popular", "top ventas"] },
-  { emoji: "\u{1F195}", keywords: ["nuevo", "new"] },
-  { emoji: "\u{1F36C}", keywords: ["dulce"] },
-  { emoji: "\u{1F9CA}", keywords: ["frio", "helado"] }
-];
-function getTagEmoji(tag) {
-  const normalized = normalize(tag);
-  const match = TAG_EMOJI_RULES.find((rule) => rule.keywords.some((keyword) => normalized.includes(keyword)));
-  return match?.emoji ?? null;
-}
-function normalize(text) {
-  return text.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
-}
-
-// src/utils/toast-emitter.ts
-var emitToast = null;
-var toast = {
-  error(options) {
-    emit("destructive", options);
-  },
-  info(options) {
-    emit("info", options);
-  },
-  success(options) {
-    emit("success", options);
-  },
-  wait(options) {
-    emit("wait", options);
-  },
-  warning(options) {
-    emit("warning", options);
-  }
-};
-function registerToastEmitter(fn) {
-  emitToast = fn;
-}
-function emit(type, options) {
-  if (!emitToast) return;
-  if (typeof options === "string") {
-    emitToast(type, { title: options });
-  } else {
-    emitToast(type, options);
-  }
-}
-
-// src/utils/url.ts
-function isSafeUrl(url) {
-  try {
-    const parsed = new URL(url, "https://placeholder.invalid");
-    return parsed.protocol === "http:" || parsed.protocol === "https:";
-  } catch {
-    return false;
-  }
-}
-
-// src/utils/z-index.ts
-var zPopover = "z-50";
-var zDialogOverlay = "z-60";
-var zDialogContent = "z-70";
-var zPopoverAboveDialog = "z-100";
-var zToast = "z-4000";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormFieldShell,
+  FormItem,
+  FormMessage,
+  GoogleMapPicker,
+  Label,
+  LabelField,
+  MapPickerField,
+  capitalize,
+  cn,
+  focusRing,
+  formatNumber,
+  formatPrice,
+  getTagEmoji,
+  inputBase,
+  inputCompact,
+  inputDisabled,
+  inputFocus,
+  inputPlaceholder,
+  inputSurface,
+  isLightColor,
+  isSafeUrl,
+  registerToastEmitter,
+  toast,
+  useFormField,
+  zDialogContent,
+  zDialogOverlay,
+  zPopover,
+  zPopoverAboveDialog,
+  zToast
+} from "./chunk-5VBG6IKL.js";
+import {
+  ui_default
+} from "./chunk-FDVY36KS.js";
 
 // src/components/add-tile.tsx
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AddTile = React.forwardRef(
   ({ className, icon, label, labelClassName, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -165,22 +74,27 @@ var variantIcons = {
   success: CheckCircleIcon,
   warning: WarningIcon
 };
+var variantRoles = {
+  destructive: "alert",
+  info: "status",
+  success: "status",
+  warning: "alert"
+};
 var Alert = ({ children, className, variant = "destructive", ...props }) => {
   const styles = variantStyles[variant];
   const Icon = variantIcons[variant];
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      "aria-live": "polite",
       className: cn(
         "flex items-center justify-center gap-2 rounded-[10px] px-4 py-3 text-sm",
         styles.container,
         className
       ),
-      role: "alert",
+      role: variantRoles[variant],
       ...props,
       children: [
-        /* @__PURE__ */ jsx2(Icon, { className: cn("h-5 w-5 shrink-0", styles.icon) }),
+        /* @__PURE__ */ jsx2(Icon, { "aria-hidden": true, className: cn("h-5 w-5 shrink-0", styles.icon) }),
         /* @__PURE__ */ jsx2("span", { children })
       ]
     }
@@ -208,64 +122,9 @@ var AuthHeader = ({
 // src/components/breadcrumb.tsx
 import * as React3 from "react";
 
-// src/components/skeleton.tsx
-import * as React2 from "react";
-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__ */ 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-semibold" : "text-muted font-normal", children: item.label })
-  ] }, `${item.label}-${index}`);
-}) }));
-Breadcrumb.displayName = "Breadcrumb";
-
-// src/components/button.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import * as React5 from "react";
-
-// src/components/spinner.tsx
-import clsx2 from "clsx";
-
 // src/lib/i18n.ts
 import i18n from "i18next";
 import { initReactI18next, useTranslation } from "react-i18next";
-
-// src/locales/es/ui.json
-var ui_default = {
-  inputField: {
-    showPassword: "Mostrar contrase\xF1a",
-    hidePassword: "Ocultar contrase\xF1a",
-    clear: "Limpiar"
-  },
-  dialog: {
-    close: "Cerrar"
-  },
-  selectInput: {
-    placeholder: "Selecciona...",
-    loading: "Cargando...",
-    search: "Buscar...",
-    noResults: "Sin resultados.",
-    clear: "Limpiar selecci\xF3n"
-  },
-  passwordChecklist: {
-    minLength: "M\xEDnimo {{min}} caracteres",
-    hasUpperAndLower: "Una may\xFAscula y min\xFAscula",
-    hasNumber: "Un n\xFAmero",
-    hasSpecialChar: "Un car\xE1cter especial"
-  },
-  spinner: {
-    loading: "Cargando..."
-  }
-};
-
-// src/lib/i18n.ts
 var uiI18n = i18n.createInstance();
 void uiI18n.use(initReactI18next).init({
   defaultNS: "ui",
@@ -278,7 +137,48 @@ void uiI18n.use(initReactI18next).init({
 var setUiLanguage = (lng) => uiI18n.changeLanguage(lng);
 var useUiT = () => useTranslation("ui", { i18n: uiI18n }).t;
 
+// src/components/skeleton.tsx
+import * as React2 from "react";
+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) => {
+  const t = useUiT();
+  return /* @__PURE__ */ jsx5("nav", { "aria-label": t("breadcrumb.label"), ref, ...props, children: /* @__PURE__ */ jsx5("ol", { className: cn("flex items-center gap-1 text-sm", className), children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs4("li", { className: "flex items-center gap-1", children: [
+      index > 0 && /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "text-muted", children: "\u203A" }),
+      item.loading ? /* @__PURE__ */ jsx5(Skeleton, { className: "h-4 w-20" }) : item.onClick && !isLast ? /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: cn("text-muted hover:text-foreground rounded-sm transition-colors", focusRing),
+          onClick: item.onClick,
+          type: "button",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx5(
+        "span",
+        {
+          "aria-current": isLast ? "page" : void 0,
+          className: isLast ? "text-foreground font-semibold" : "text-muted font-normal",
+          children: item.label
+        }
+      )
+    ] }, `${item.label}-${index}`);
+  }) }) });
+});
+Breadcrumb.displayName = "Breadcrumb";
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React5 from "react";
+
 // src/components/spinner.tsx
+import clsx from "clsx";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var sizes = {
   lg: "70",
@@ -298,13 +198,15 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
     /* @__PURE__ */ jsx6(
       "svg",
       {
+        "aria-hidden": true,
         fill: "currentColor",
+        focusable: "false",
         height: sizes[size],
         stroke: variants[variant],
         viewBox: "0 0 100 100",
         width: sizes[size],
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsxs5("g", { className: clsx2("spinner_V8m1", className), children: [
+        children: /* @__PURE__ */ jsxs5("g", { className: clsx(className), children: [
           /* @__PURE__ */ jsx6("circle", { cx: "50", cy: "50", fill: "none", opacity: "0.25", r: "35", stroke: "currentColor", strokeWidth: "10" }),
           /* @__PURE__ */ jsx6(
             "circle",
@@ -332,7 +234,7 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
         ] })
       }
     ),
-    /* @__PURE__ */ jsx6("span", { className: "sr-only", children: loadingLabel ?? t("spinner.loading") })
+    /* @__PURE__ */ jsx6("span", { className: "sr-only", role: "status", children: loadingLabel ?? t("spinner.loading") })
   ] });
 };
 
@@ -357,10 +259,10 @@ var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props },
 ) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var Tooltip = React4.forwardRef(
-  ({ children, childrenClassName, className, message, sideTooltip = "top" }, ref) => {
+  ({ asChild = false, children, childrenClassName, className, message, sideTooltip = "top" }, ref) => {
     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 }) })
+      /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: asChild ? children : /* @__PURE__ */ jsx7("div", { className: childrenClassName, ref, children }) }),
+      /* @__PURE__ */ jsx7(TooltipContent, { className, side: sideTooltip, children: /* @__PURE__ */ jsx7("p", { children: message }) })
     ] }) });
   }
 );
@@ -369,7 +271,10 @@ Tooltip.displayName = "Tooltip";
 // src/components/button.tsx
 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-[10px] 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",
+  [
+    "w-full inline-flex items-center justify-center gap-[10px] whitespace-nowrap rounded-[10px] border border-transparent text-base font-semibold transition-all duration-300 ease-in-out focus-visible:ring-offset-2 disabled:pointer-events-none disabled:bg-inactive disabled:text-inactive-text disabled:border-transparent cursor-pointer",
+    focusRing
+  ],
   {
     defaultVariants: {
       hoverStyle: "none",
@@ -387,7 +292,7 @@ var buttonVariants = cva(
           hover:-translate-y-[1px] hover:shadow-lg
           before:content-[''] before:absolute before:top-0 before:left-[-100%]
           before:w-full before:h-full
-          before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent)]
+          before:bg-linear-to-r before:from-transparent before:via-inverse/15 before:to-transparent
           before:transition-all before:duration-300
           hover:before:left-[100%]
         `
@@ -438,16 +343,22 @@ var Button = React5.forwardRef(
       Comp,
       {
         "aria-busy": isLoading || void 0,
-        className: cn(buttonVariants({ hoverStyle, size, variant }), isLoading && "relative opacity-40", className),
+        className: cn(buttonVariants({ hoverStyle, size, variant }), isLoading && "relative", className),
         disabled: disabled === true || isLoading,
         ref,
         ...props,
         children: [
-          iconLeft,
-          icon,
-          /* @__PURE__ */ jsx8("span", { className: cn("flex w-full items-center justify-center gap-2", childrenClassName), children }),
-          iconRight,
-          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" }) })
+          isLoading ? /* @__PURE__ */ jsx8("span", { className: "invisible contents", children: iconLeft }) : iconLeft,
+          isLoading ? /* @__PURE__ */ jsx8("span", { className: "invisible contents", children: icon }) : icon,
+          /* @__PURE__ */ jsx8(
+            "span",
+            {
+              className: cn("flex w-full items-center justify-center gap-2", isLoading && "invisible", childrenClassName),
+              children
+            }
+          ),
+          isLoading ? /* @__PURE__ */ jsx8("span", { className: "invisible contents", children: iconRight }) : iconRight,
+          isLoading && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center rounded-[inherit]", children: /* @__PURE__ */ jsx8(Spinner, { size: "sm" }) })
         ]
       }
     );
@@ -461,7 +372,10 @@ import { cva as cva2 } from "class-variance-authority";
 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",
+  [
+    "inline-flex cursor-pointer items-center justify-center rounded-full px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
+    focusRing
+  ],
   {
     defaultVariants: {
       active: false
@@ -474,7 +388,16 @@ var chipVariants = cva2(
     }
   }
 );
-var Chip = React6.forwardRef(({ active, className, ...props }, ref) => /* @__PURE__ */ jsx9("button", { className: cn(chipVariants({ active }), className), ref, type: "button", ...props }));
+var Chip = React6.forwardRef(({ active, className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  "button",
+  {
+    "aria-pressed": active ?? void 0,
+    className: cn(chipVariants({ active }), className),
+    ref,
+    type: "button",
+    ...props
+  }
+));
 Chip.displayName = "Chip";
 
 // src/components/command.tsx
@@ -513,7 +436,7 @@ var DialogContent = React7.forwardRef(
         DialogPrimitive.Content,
         {
           className: cn(
-            `bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ${zDialogContent} grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 shadow-lg duration-200 outline-none`,
+            `bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ${zDialogContent} grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 shadow-lg duration-200 outline-none`,
             isAbsolute ? "absolute top-[50%] left-[50%]" : "fixed top-[50%] left-[50%]",
             className
           ),
@@ -521,10 +444,19 @@ var DialogContent = React7.forwardRef(
           ...props,
           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__ */ jsx10(XIcon, { className: "text-body h-4 w-4" }),
-              /* @__PURE__ */ jsx10("span", { className: "sr-only", children: closeLabel ?? t("dialog.close") })
-            ] })
+            isCloseIcon && /* @__PURE__ */ jsxs8(
+              DialogPrimitive.Close,
+              {
+                className: cn(
+                  "data-[state=open]:text-muted ring-offset-surface 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-visible:opacity-100 focus-visible:ring-offset-2 disabled:pointer-events-none",
+                  focusRing
+                ),
+                children: [
+                  /* @__PURE__ */ jsx10(XIcon, { "aria-hidden": true, className: "text-body h-4 w-4" }),
+                  /* @__PURE__ */ jsx10("span", { className: "sr-only", children: closeLabel ?? t("dialog.close") })
+                ]
+              }
+            )
           ]
         }
       )
@@ -541,12 +473,11 @@ var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     className: cn("text-lg leading-none font-semibold tracking-tight", className),
     ref,
-    ...props,
-    children: /* @__PURE__ */ jsx10("span", { children: props.children })
+    ...props
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-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 }) }));
+var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(DialogPrimitive.Description, { className: cn("text-muted text-sm", className), ref, ...props }));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/command.tsx
@@ -563,8 +494,8 @@ Command.displayName = CommandPrimitive.displayName;
 var CommandDialog = ({ children, ...props }) => {
   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 = 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" }),
+var CommandInput = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs9("div", { className: "border-border flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx11(MagnifyingGlassIcon, { "aria-hidden": true, className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx11(
     CommandPrimitive.Input,
     {
@@ -613,93 +544,29 @@ var CommandShortcut = ({ className, ...props }) => {
 };
 CommandShortcut.displayName = "CommandShortcut";
 
-// src/components/form.tsx
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import * as React9 from "react";
-import { Controller, FormProvider, useFormContext } from "react-hook-form";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Form = FormProvider;
-var FormFieldContext = React9.createContext(null);
-var FormField = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx12(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx12(Controller, { ...props }) });
-};
-var useFormField = () => {
-  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>");
-  }
-  if (!itemContext) {
-    throw new Error("useFormField must be used within <FormItem>");
-  }
-  const fieldState = getFieldState(fieldContext.name, formState);
-  const { id } = itemContext;
-  return {
-    formDescriptionId: `${id}-form-item-description`,
-    formItemId: `${id}-form-item`,
-    formMessageId: `${id}-form-item-message`,
-    id,
-    name: fieldContext.name,
-    ...fieldState
-  };
-};
-var FormItemContext = React9.createContext(null);
-var FormItem = React9.forwardRef(
-  ({ className, ...props }, ref) => {
-    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 = React9.forwardRef(
-  ({ ...props }, ref) => {
-    const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
-    return /* @__PURE__ */ jsx12(
-      Slot2,
-      {
-        "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-        "aria-invalid": !!error,
-        id: formItemId,
-        ref,
-        ...props
-      }
-    );
-  }
-);
-FormControl.displayName = "FormControl";
-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__ */ jsx12(
-      "p",
-      {
-        className: cn("text-destructive text-[0.8rem] font-medium", className),
-        id: formMessageId,
-        ref,
-        ...props,
-        children: body
-      }
-    );
-  }
-);
-FormMessage.displayName = "FormMessage";
-
 // src/components/form-fields/input-field.tsx
 import { EyeIcon, EyeSlashIcon, XIcon as XIcon2 } from "@phosphor-icons/react";
 import { useState } from "react";
 
 // src/components/input.tsx
-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(
+import * as React9 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var NUMBER_ALLOWED_KEYS = /* @__PURE__ */ new Set([
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "Backspace",
+  "Delete",
+  "End",
+  "Enter",
+  "Escape",
+  "Home",
+  "Tab"
+]);
+var isAllowedNumberKey = (event) => event.ctrlKey || event.metaKey || event.altKey || NUMBER_ALLOWED_KEYS.has(event.key) || /^[0-9]$/.test(event.key);
+var Input = React9.forwardRef(({ className, onKeyDown, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx12(
     "input",
     {
       className: cn(
@@ -710,15 +577,8 @@ var Input = React10.forwardRef(({ className, onKeyDown, type, ...props }, ref) =
       ),
       onKeyDown: (e) => {
         onKeyDown?.(e);
-        if (e.defaultPrevented) return;
-        const key = e.key;
-        const allowedKeys = ["Backspace", "Tab", "Enter", "Escape", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"];
-        if (allowedKeys.includes(key)) {
-          return;
-        }
-        if (!(key >= "0" && key <= "9") && type === "number") {
-          e.preventDefault();
-        }
+        if (e.defaultPrevented || type !== "number") return;
+        if (!isAllowedNumberKey(e)) e.preventDefault();
       },
       ref,
       type,
@@ -728,69 +588,24 @@ var Input = React10.forwardRef(({ className, onKeyDown, type, ...props }, ref) =
 });
 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 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 = 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 jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
-var LabelField = ({ label, labelClassName, name, visualRequired }) => {
-  return /* @__PURE__ */ jsxs10(
-    Label,
-    {
-      className: cn("text-body mb-2 text-start text-sm leading-none font-normal tracking-normal", labelClassName),
-      htmlFor: name,
-      children: [
-        /* @__PURE__ */ jsx15("span", { children: label }),
-        " ",
-        visualRequired && /* @__PURE__ */ jsx15("span", { className: "text-destructive", children: " *" })
-      ]
-    }
-  );
-};
-
-// src/components/form-fields/form-field-shell.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-var FormFieldShell = ({
-  children,
-  hasError,
-  label,
-  labelClassName,
-  mainClassName,
-  name,
-  visualRequired
-}) => /* @__PURE__ */ jsxs11(FormItem, { className: cn("flex flex-col", mainClassName), children: [
-  /* @__PURE__ */ jsx16(
-    LabelField,
-    {
-      label,
-      labelClassName: cn(labelClassName, hasError && "text-destructive"),
-      name,
-      visualRequired
-    }
-  ),
-  /* @__PURE__ */ jsx16(FormControl, { children }),
-  /* @__PURE__ */ jsx16(FormMessage, {})
-] });
-
 // src/components/form-fields/input-field.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var iconButtonClassName = cn("flex items-center justify-center rounded-sm", focusRing);
 var InputField = ({
+  autoComplete,
   clearLabel,
   control,
   disabled,
   hidePasswordLabel,
   inputClassName,
+  inputMode,
   isClearable,
   label,
   labelClassName,
   mainClassName,
+  maxLength,
   name,
+  onBlur,
   onClear,
   placeholder,
   showPasswordLabel,
@@ -804,14 +619,16 @@ var InputField = ({
   };
   const isPassword = type === "password";
   const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type;
-  return /* @__PURE__ */ jsx17(
+  const resolvedClearLabel = clearLabel ?? t("inputField.clear");
+  const passwordToggleLabel = isPasswordVisible ? hidePasswordLabel ?? t("inputField.hidePassword") : showPasswordLabel ?? t("inputField.showPassword");
+  return /* @__PURE__ */ jsx13(
     FormField,
     {
       control,
       name,
       render: ({ field, fieldState }) => {
         const hasError = !!fieldState.error;
-        return /* @__PURE__ */ jsx17(
+        return /* @__PURE__ */ jsx13(
           FormFieldShell,
           {
             hasError,
@@ -820,12 +637,13 @@ var InputField = ({
             mainClassName,
             name,
             visualRequired,
-            children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx17(
+            children: (controlProps) => /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx13(
                 Input,
                 {
                   ...field,
-                  autoComplete: isPassword ? "current-password" : void 0,
+                  ...controlProps,
+                  autoComplete: autoComplete ?? (isPassword ? "current-password" : void 0),
                   className: cn(
                     inputClassName,
                     hasError && "border-destructive",
@@ -835,31 +653,39 @@ var InputField = ({
                   "data-bwignore": isPassword || void 0,
                   "data-lpignore": isPassword || void 0,
                   disabled,
+                  inputMode,
+                  maxLength,
                   min: type === "number" ? 0 : void 0,
+                  onBlur: (event) => {
+                    field.onBlur();
+                    onBlur?.(event);
+                  },
                   placeholder,
                   type: inputType,
                   value: field.value ?? ""
                 }
               ),
-              /* @__PURE__ */ jsxs12("div", { className: "absolute inset-y-0 right-0 flex items-center space-x-2 pr-2", children: [
-                field.value && isClearable && /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsxs10("div", { className: "absolute inset-y-0 right-0 flex items-center space-x-2 pr-2", children: [
+                field.value && isClearable && /* @__PURE__ */ jsx13(
                   "button",
                   {
-                    className: "focus:outline-none",
+                    "aria-label": resolvedClearLabel,
+                    className: iconButtonClassName,
                     onClick: onClear,
-                    title: clearLabel ?? t("inputField.clear"),
+                    title: resolvedClearLabel,
                     type: "button",
-                    children: /* @__PURE__ */ jsx17(XIcon2, { size: 18 })
+                    children: /* @__PURE__ */ jsx13(XIcon2, { "aria-hidden": true, size: 18 })
                   }
                 ),
-                type === "password" && /* @__PURE__ */ jsx17(
+                isPassword && /* @__PURE__ */ jsx13(
                   "button",
                   {
-                    className: "focus:outline-none",
+                    "aria-label": passwordToggleLabel,
+                    className: iconButtonClassName,
                     onClick: togglePasswordVisibility,
-                    title: isPasswordVisible ? hidePasswordLabel ?? t("inputField.hidePassword") : showPasswordLabel ?? t("inputField.showPassword"),
+                    title: passwordToggleLabel,
                     type: "button",
-                    children: isPasswordVisible ? /* @__PURE__ */ jsx17(EyeIcon, { size: 18 }) : /* @__PURE__ */ jsx17(EyeSlashIcon, { size: 20 })
+                    children: isPasswordVisible ? /* @__PURE__ */ jsx13(EyeIcon, { "aria-hidden": true, size: 18 }) : /* @__PURE__ */ jsx13(EyeSlashIcon, { "aria-hidden": true, size: 20 })
                   }
                 )
               ] })
@@ -871,340 +697,16 @@ var InputField = ({
   );
 };
 
-// src/components/google-map-picker.tsx
-import { AdvancedMarker, APIProvider, Map as Map2 } from "@vis.gl/react-google-maps";
-
-// src/components/use-google-map-picker.ts
-import { useMap, useMapsLibrary } from "@vis.gl/react-google-maps";
-import { useCallback, useEffect, useMemo, useRef, useState as useState2 } from "react";
-var PICKER_MAP_ID = "komensal-restaurant-map";
-var SELECTED_ZOOM = 15;
-var CITY_ZOOM = 12;
-var DEBOUNCE_MS = 300;
-var BLUR_CLOSE_DELAY_MS = 150;
-var parseComponents = (components) => {
-  const find = (type) => components.find((c) => c.types.includes(type));
-  const country = find("country");
-  const department = find("administrative_area_level_1");
-  const city = find("locality") ?? find("administrative_area_level_2");
-  return {
-    city: city?.long ?? null,
-    country: country?.short ?? null,
-    countryName: country?.long ?? null,
-    department: department?.long ?? null
-  };
-};
-function useGoogleMapPicker({
-  centerOn,
-  countryCode,
-  disabled,
-  initialPosition,
-  locationQuery,
-  locationZoom,
-  onAddressResolved,
-  onChange,
-  onError,
-  value
-}) {
-  const placesLib = useMapsLibrary("places");
-  const geocodingLib = useMapsLibrary("geocoding");
-  const map = useMap(PICKER_MAP_ID);
-  const onChangeRef = useRef(onChange);
-  const onResolvedRef = useRef(onAddressResolved);
-  const onErrorRef = useRef(onError);
-  const geocoder = useMemo(
-    () => geocodingLib ? new geocodingLib.Geocoder() : null,
-    [geocodingLib]
-  );
-  const debounceRef = useRef(null);
-  const blurTimeoutRef = useRef(null);
-  const [inputValue, setInputValue] = useState2(value);
-  const [suggestions, setSuggestions] = useState2([]);
-  const [showDropdown, setShowDropdown] = useState2(false);
-  const [sessionToken, setSessionToken] = useState2();
-  const [position, setPosition] = useState2(initialPosition ?? null);
-  useEffect(() => {
-    onChangeRef.current = onChange;
-    onResolvedRef.current = onAddressResolved;
-    onErrorRef.current = onError;
-  });
-  useEffect(
-    () => () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    },
-    []
-  );
-  const [prevValue, setPrevValue] = useState2(value);
-  if (prevValue !== value) {
-    setPrevValue(value);
-    setInputValue(value);
-  }
-  useEffect(() => {
-    if (map && centerOn) {
-      map.panTo(centerOn);
-      map.setZoom(CITY_ZOOM);
-    }
-  }, [map, centerOn]);
-  useEffect(() => {
-    if (map && position) {
-      map.panTo(position);
-      map.setZoom(SELECTED_ZOOM);
-    }
-  }, [map, position]);
-  const [prevPlacesLib, setPrevPlacesLib] = useState2(placesLib);
-  if (prevPlacesLib !== placesLib) {
-    setPrevPlacesLib(placesLib);
-    if (placesLib) setSessionToken(new placesLib.AutocompleteSessionToken());
-  }
-  useEffect(() => {
-    if (!geocoder || !locationQuery || !map || position) return;
-    const g = geocoder;
-    const ctrl = { cancelled: false };
-    void (async () => {
-      try {
-        const { results } = await g.geocode({ address: locationQuery });
-        if (ctrl.cancelled || results.length === 0) return;
-        const loc = results[0].geometry.location;
-        map.panTo({ lat: loc.lat(), lng: loc.lng() });
-        map.setZoom(locationZoom ?? CITY_ZOOM);
-      } catch (error) {
-        if (!ctrl.cancelled) {
-          console.error("[GoogleMapPicker] geocode by query failed", error);
-          onErrorRef.current?.(error);
-        }
-      }
-    })();
-    return () => {
-      ctrl.cancelled = true;
-    };
-  }, [geocoder, locationQuery, locationZoom, map, position]);
-  const fetchSuggestions = useCallback(
-    async (input) => {
-      if (!placesLib || input.length < 2) {
-        setSuggestions([]);
-        return;
-      }
-      try {
-        const result = await placesLib.AutocompleteSuggestion.fetchAutocompleteSuggestions({
-          includedRegionCodes: countryCode ? [countryCode.trim().toLowerCase()] : void 0,
-          input,
-          sessionToken
-        });
-        setSuggestions(result.suggestions);
-        setShowDropdown(true);
-      } catch (error) {
-        console.error("[GoogleMapPicker] fetchAutocompleteSuggestions failed", error);
-        onErrorRef.current?.(error);
-        setSuggestions([]);
-      }
-    },
-    [placesLib, sessionToken, countryCode]
-  );
-  const reverseGeocode = useCallback(
-    async (latLng) => {
-      if (!geocoder) return;
-      try {
-        const { results } = await geocoder.geocode({ location: latLng });
-        if (results.length > 0) {
-          const result = results[0];
-          const address = result.formatted_address;
-          setInputValue(address);
-          onChangeRef.current(address);
-          const parts = parseComponents(
-            result.address_components.map((c) => ({ long: c.long_name, short: c.short_name, types: c.types }))
-          );
-          onResolvedRef.current?.({ address, lat: latLng.lat, lng: latLng.lng, ...parts });
-        }
-      } catch (error) {
-        console.error("[GoogleMapPicker] reverse geocode failed", error);
-        onErrorRef.current?.(error);
-      }
-    },
-    [geocoder]
-  );
-  const handleInputChange = (e) => {
-    const val = e.target.value;
-    setInputValue(val);
-    onChangeRef.current(val);
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => void fetchSuggestions(val), DEBOUNCE_MS);
-  };
-  const handleSelect = async (suggestion) => {
-    const prediction = suggestion.placePrediction;
-    if (!prediction) return;
-    const place = prediction.toPlace();
-    await place.fetchFields({ fields: ["formattedAddress", "location", "addressComponents"] });
-    const address = place.formattedAddress ?? prediction.text.text;
-    setInputValue(address);
-    onChangeRef.current(address);
-    setSuggestions([]);
-    setShowDropdown(false);
-    const lat = place.location?.lat() ?? null;
-    const lng = place.location?.lng() ?? null;
-    if (place.location) {
-      setPosition({ lat: place.location.lat(), lng: place.location.lng() });
-    }
-    const parts = parseComponents(
-      (place.addressComponents ?? []).map((c) => ({ long: c.longText, short: c.shortText, types: c.types }))
-    );
-    onResolvedRef.current?.({ address, lat, lng, ...parts });
-    if (placesLib) setSessionToken(new placesLib.AutocompleteSessionToken());
-  };
-  const handleBlur = () => {
-    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    blurTimeoutRef.current = setTimeout(() => setShowDropdown(false), BLUR_CLOSE_DELAY_MS);
-  };
-  const handleMapClick = useCallback(
-    (e) => {
-      if (disabled || !e.detail.latLng) return;
-      const latLng = e.detail.latLng;
-      setPosition(latLng);
-      void reverseGeocode(latLng);
-    },
-    [disabled, reverseGeocode]
-  );
-  const handleMarkerDragEnd = useCallback(
-    (e) => {
-      const latLng = e.latLng;
-      if (!latLng) return;
-      const pos = { lat: latLng.lat(), lng: latLng.lng() };
-      setPosition(pos);
-      void reverseGeocode(pos);
-    },
-    [reverseGeocode]
-  );
-  return {
-    handleBlur,
-    handleInputChange,
-    handleMapClick,
-    handleMarkerDragEnd,
-    handleSelect,
-    inputValue,
-    position,
-    setShowDropdown,
-    showDropdown,
-    suggestions
-  };
-}
-
-// src/components/google-map-picker.tsx
-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;
-  const {
-    handleBlur,
-    handleInputChange,
-    handleMapClick,
-    handleMarkerDragEnd,
-    handleSelect,
-    inputValue,
-    position,
-    setShowDropdown,
-    showDropdown,
-    suggestions
-  } = useGoogleMapPicker(props);
-  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx18(
-        "input",
-        {
-          className: cn(inputBase, inputFocus, hasError && "border-destructive"),
-          disabled,
-          onBlur: handleBlur,
-          onChange: handleInputChange,
-          onFocus: () => suggestions.length > 0 && setShowDropdown(true),
-          placeholder,
-          type: "text",
-          value: inputValue
-        }
-      ),
-      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__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
-            "button",
-            {
-              className: "text-foreground hover:bg-hover w-full px-4 py-3 text-left text-sm transition-colors",
-              onClick: () => void handleSelect(suggestion),
-              type: "button",
-              children: suggestion.placePrediction?.text.text ?? ""
-            }
-          ) }, suggestion.placePrediction?.placeId ?? suggestion.placePrediction?.text.text))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx18("div", { className: "border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5", children: /* @__PURE__ */ jsx18(
-      Map2,
-      {
-        defaultCenter: DEFAULT_CENTER,
-        defaultZoom: 5,
-        disableDefaultUI: true,
-        gestureHandling: "cooperative",
-        id: PICKER_MAP_ID,
-        mapId: mapId ?? import.meta.env.VITE_GOOGLE_MAPS_MAP_ID ?? "DEMO_MAP_ID",
-        onClick: handleMapClick,
-        style: { height: "100%", width: "100%" },
-        children: position && /* @__PURE__ */ jsx18(AdvancedMarker, { draggable: !disabled, onDragEnd: handleMarkerDragEnd, position })
-      }
-    ) })
-  ] });
-};
-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 jsx19 } from "react/jsx-runtime";
-var MapPickerField = ({
-  control,
-  label,
-  labelClassName,
-  mainClassName,
-  name,
-  visualRequired,
-  ...pickerProps
-}) => /* @__PURE__ */ jsx19(
-  FormField,
-  {
-    control,
-    name,
-    render: ({ field, fieldState }) => /* @__PURE__ */ jsx19(
-      FormFieldShell,
-      {
-        hasError: !!fieldState.error,
-        label,
-        labelClassName,
-        mainClassName,
-        name,
-        visualRequired,
-        children: /* @__PURE__ */ jsx19(
-          GoogleMapPicker,
-          {
-            ...pickerProps,
-            hasError: !!fieldState.error,
-            onChange: field.onChange,
-            value: field.value ?? ""
-          }
-        )
-      }
-    )
-  }
-);
-
 // src/components/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
-import React12 from "react";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import React10 from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function InputOTP({
   className,
   containerClassName,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx14(
     OTPInput,
     {
       className: cn("disabled:cursor-not-allowed", className),
@@ -1215,16 +717,16 @@ function InputOTP({
   );
 }
 function InputOTPGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx20("div", { className: cn("flex items-center gap-2", className), "data-slot": "input-otp-group", ...props });
+  return /* @__PURE__ */ jsx14("div", { className: cn("flex items-center gap-2", className), "data-slot": "input-otp-group", ...props });
 }
 function InputOTPSlot({
   className,
   index,
   ...props
 }) {
-  const inputOTPContext = React12.useContext(OTPInputContext);
+  const inputOTPContext = React10.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cn(
@@ -1239,14 +741,14 @@ function InputOTPSlot({
       ...props,
       children: [
         char,
-        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" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx14("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx14("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) })
       ]
     }
   );
 }
 
 // src/components/form-fields/otp-field.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function OTPField({
   autoFocus,
   className,
@@ -1259,13 +761,13 @@ function OTPField({
   otpLength = 6,
   visualRequired
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx15(
     FormField,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs15(FormItem, { className: cn("flex flex-col", className), children: [
-        label ? /* @__PURE__ */ jsx21(
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs12(FormItem, { className: cn("flex flex-col", className), children: [
+        label ? /* @__PURE__ */ jsx15(
           LabelField,
           {
             label,
@@ -1274,7 +776,7 @@ function OTPField({
             visualRequired
           }
         ) : null,
-        /* @__PURE__ */ jsx21(FormControl, { children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx15(FormControl, { children: /* @__PURE__ */ jsx15(
           InputOTP,
           {
             "aria-invalid": fieldState.invalid || void 0,
@@ -1282,17 +784,16 @@ function OTPField({
             autoFocus,
             containerClassName: cn("justify-center", containerClassName),
             disabled,
-            id: name,
             inputMode: "numeric",
             maxLength: otpLength,
             onChange: (val) => field.onChange(val),
             onPaste: (e) => field.onChange(e.clipboardData.getData("text")),
             pattern: "[0-9]*",
             value: field.value ?? "",
-            children: /* @__PURE__ */ jsx21(InputOTPGroup, { children: Array.from({ length: otpLength }).map((_, i) => /* @__PURE__ */ jsx21(InputOTPSlot, { "aria-invalid": fieldState.invalid || void 0, index: i }, i)) })
+            children: /* @__PURE__ */ jsx15(InputOTPGroup, { children: Array.from({ length: otpLength }).map((_, i) => /* @__PURE__ */ jsx15(InputOTPSlot, { "aria-invalid": fieldState.invalid || void 0, index: i }, i)) })
           }
         ) }),
-        /* @__PURE__ */ jsx21(FormMessage, {})
+        /* @__PURE__ */ jsx15(FormMessage, {})
       ] })
     }
   );
@@ -1300,15 +801,15 @@ function OTPField({
 
 // src/components/select-input.tsx
 import { CaretDownIcon, CaretUpIcon, ClockIcon, XIcon as XIcon3 } from "@phosphor-icons/react";
-import { cloneElement, useCallback as useCallback2, useId as useId2, useMemo as useMemo3, useState as useState4 } from "react";
+import { cloneElement, useCallback, useEffect as useEffect3, useId, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 
 // src/components/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React13 from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import * as React11 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React13.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx22(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx22(
+var PopoverContent = React11.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
   PopoverPrimitive.Content,
   {
     align,
@@ -1324,67 +825,90 @@ var PopoverContent = React13.forwardRef(({ align = "center", className, sideOffs
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/time-columns.tsx
-import * as React14 from "react";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import * as React12 from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var optionClassName = cn(
+  "hover:bg-hover w-full cursor-pointer rounded-sm px-2 py-1.5 text-sm focus-visible:ring-inset",
+  focusRing
+);
 var TimeColumns = ({ hours, minutes, onSelectHour, onSelectMinute, value }) => {
+  const t = useUiT();
   const [selectedHour, selectedMinute] = value ? value.split(":") : ["", ""];
-  const hourListRef = React14.useRef(null);
-  const minuteListRef = React14.useRef(null);
-  React14.useEffect(() => {
+  const hourListRef = React12.useRef(null);
+  const minuteListRef = React12.useRef(null);
+  React12.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__ */ jsx23("div", { className: "max-h-60 flex-1 overflow-y-auto", ref: hourListRef, children: hours.map((hour) => {
-      const isSelected = hour === selectedHour;
-      return /* @__PURE__ */ jsx23(
-        "button",
-        {
-          className: cn(
-            "hover:bg-hover flex w-full cursor-pointer items-center justify-center rounded-sm px-2 py-1.5 text-sm",
-            isSelected && "bg-inactive font-medium"
-          ),
-          "data-selected": isSelected,
-          onClick: () => onSelectHour(hour),
-          type: "button",
-          children: formatHour12(hour)
-        },
-        hour
-      );
-    }) }),
-    /* @__PURE__ */ jsx23("div", { className: "max-h-60 flex-1 overflow-y-auto", ref: minuteListRef, children: minutes.map((minute) => {
-      const isSelected = minute === selectedMinute;
-      return /* @__PURE__ */ jsx23(
-        "button",
-        {
-          className: cn(
-            "hover:bg-hover w-full cursor-pointer rounded-sm px-2 py-1.5 text-center text-sm",
-            isSelected && "bg-inactive font-medium"
-          ),
-          "data-selected": isSelected,
-          onClick: () => onSelectMinute(minute),
-          type: "button",
-          children: minute
-        },
-        minute
-      );
-    }) })
+  const formatHour12 = (hour) => {
+    const hourNum = Number(hour);
+    const period = hourNum >= 12 ? t("timeColumns.pm") : t("timeColumns.am");
+    const hour12 = hourNum % 12 === 0 ? 12 : hourNum % 12;
+    return `${hour12} ${period}`;
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "divide-border flex divide-x", children: [
+    /* @__PURE__ */ jsx17(
+      "div",
+      {
+        "aria-label": t("timeColumns.hours"),
+        className: "max-h-60 flex-1 overflow-y-auto",
+        ref: hourListRef,
+        role: "group",
+        children: hours.map((hour) => {
+          const isSelected = hour === selectedHour;
+          return /* @__PURE__ */ jsx17(
+            "button",
+            {
+              "aria-pressed": isSelected,
+              className: cn(
+                optionClassName,
+                "flex items-center justify-center",
+                isSelected && "bg-inactive font-medium"
+              ),
+              "data-selected": isSelected,
+              onClick: () => onSelectHour(hour),
+              type: "button",
+              children: formatHour12(hour)
+            },
+            hour
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx17(
+      "div",
+      {
+        "aria-label": t("timeColumns.minutes"),
+        className: "max-h-60 flex-1 overflow-y-auto",
+        ref: minuteListRef,
+        role: "group",
+        children: minutes.map((minute) => {
+          const isSelected = minute === selectedMinute;
+          return /* @__PURE__ */ jsx17(
+            "button",
+            {
+              "aria-pressed": isSelected,
+              className: cn(optionClassName, "text-center", isSelected && "bg-inactive font-medium"),
+              "data-selected": isSelected,
+              onClick: () => onSelectMinute(minute),
+              type: "button",
+              children: minute
+            },
+            minute
+          );
+        })
+      }
+    )
   ] });
 };
-function formatHour12(hour) {
-  const hourNum = Number(hour);
-  const period = hourNum >= 12 ? "PM" : "AM";
-  const hour12 = hourNum % 12 === 0 ? 12 : hourNum % 12;
-  return `${hour12} ${period}`;
-}
 
 // src/components/use-select-input.ts
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 var normalizeString = (str) => str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
 function usePopoverWidth() {
-  const ref = useRef3(null);
-  const [width, setWidth] = useState3(0);
-  useEffect3(() => {
+  const ref = useRef2(null);
+  const [width, setWidth] = useState2(0);
+  useEffect2(() => {
     const el = ref.current;
     if (!el) return;
     const updateWidth = () => setWidth(el.getBoundingClientRect().width);
@@ -1396,8 +920,8 @@ function usePopoverWidth() {
   return { ref, width };
 }
 function useSelectFilter(items, labelKey, valueKey) {
-  const [query, setQuery] = useState3("");
-  const normalizedItems = useMemo2(() => {
+  const [query, setQuery] = useState2("");
+  const normalizedItems = useMemo(() => {
     if (!items) return [];
     return items.map((it) => ({
       ...it,
@@ -1405,7 +929,7 @@ function useSelectFilter(items, labelKey, valueKey) {
       [valueKey]: String(it[valueKey])
     }));
   }, [items, labelKey, valueKey]);
-  const filteredOptions = useMemo2(() => {
+  const filteredOptions = useMemo(() => {
     if (!query) return normalizedItems;
     return normalizedItems.filter((el) => normalizeString(el[labelKey]).includes(normalizeString(query)));
   }, [normalizedItems, labelKey, query]);
@@ -1413,15 +937,20 @@ function useSelectFilter(items, labelKey, valueKey) {
 }
 
 // src/components/select-input.tsx
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var QUERY_RESET_DELAY_MS = 100;
 var SelectInput = (props) => {
   const t = useUiT();
   const {
     ableDeleteOption,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     className,
     disabled = false,
     error,
+    id,
     items,
     labelKey = "label",
     leftIcon,
@@ -1440,12 +969,19 @@ var SelectInput = (props) => {
     valueKey = "value"
   } = props;
   const resolvedPlaceholder = placeholder ?? t("selectInput.placeholder");
-  const listboxId = useId2();
-  const [open, setOpen] = useState4(false);
-  const [valueItem, setValueItem] = useState4(value);
+  const listboxId = useId();
+  const [open, setOpen] = useState3(false);
+  const [valueItem, setValueItem] = useState3(value);
+  const queryResetRef = useRef3(null);
+  useEffect3(
+    () => () => {
+      if (queryResetRef.current) clearTimeout(queryResetRef.current);
+    },
+    []
+  );
   const { ref: divRef, width } = usePopoverWidth();
   const { filteredOptions, normalizedItems, query, setQuery } = useSelectFilter(items, labelKey, valueKey);
-  const onValueChange = useCallback2(
+  const onValueChange = useCallback(
     (val) => {
       if (!normalizedItems.length) return;
       const item = normalizedItems.find((i) => i[valueKey] === val);
@@ -1459,13 +995,13 @@ var SelectInput = (props) => {
     },
     [normalizedItems, labelKey, valueKey, onValueChangeCallBack]
   );
-  const timeHours = useMemo3(
+  const timeHours = useMemo2(
     () => Array.from(new Set(normalizedItems.map((i) => i[valueKey].split(":")[0]))).sort(
       (a, b) => a.localeCompare(b)
     ),
     [normalizedItems, valueKey]
   );
-  const timeMinutes = useMemo3(
+  const timeMinutes = useMemo2(
     () => Array.from(new Set(normalizedItems.map((i) => i[valueKey].split(":")[1]))).sort(
       (a, b) => a.localeCompare(b)
     ),
@@ -1484,7 +1020,7 @@ var SelectInput = (props) => {
     onValueChange(newValue);
     setOpen(false);
   };
-  const buttonClassName = useMemo3(
+  const buttonClassName = useMemo2(
     () => cn(
       inputBase,
       inputFocus,
@@ -1495,53 +1031,58 @@ var SelectInput = (props) => {
     ),
     [disabled, error, className]
   );
-  const [prevValue, setPrevValue] = useState4(value);
+  const [prevValue, setPrevValue] = useState3(value);
   if (prevValue !== value) {
     setPrevValue(value);
     setValueItem(value);
   }
-  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__ */ jsx24(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs14("div", { className: "relative flex flex-col justify-center", children: [
+    /* @__PURE__ */ jsxs14(Popover, { onOpenChange: setOpen, open, children: [
+      /* @__PURE__ */ jsx18(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(
         Button,
         {
+          "aria-busy": loading || void 0,
           "aria-controls": listboxId,
+          "aria-describedby": ariaDescribedBy,
           "aria-expanded": open,
           "aria-haspopup": "listbox",
+          "aria-invalid": ariaInvalid ?? (error ? true : void 0),
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
           className: buttonClassName,
-          disabled,
-          isLoading: loading,
+          disabled: disabled || loading,
+          id,
           onBlur,
           ref: divRef,
           role: "combobox",
           variant: "primary",
-          children: loading ? /* @__PURE__ */ jsxs17(Fragment3, { children: [
+          children: loading ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
             loadingLabel ?? t("selectInput.loading"),
             " ",
-            /* @__PURE__ */ jsx24(Spinner, {})
-          ] }) : /* @__PURE__ */ jsx24("div", { className: "relative flex h-5 w-full items-center", children: timeField ? /* @__PURE__ */ jsxs17("div", { className: "text-title flex w-full items-center justify-center gap-2 truncate text-sm", children: [
-            valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx24("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder }),
-            /* @__PURE__ */ jsx24(ClockIcon, { className: "text-border h-3.5 w-3.5 shrink-0" })
-          ] }) : /* @__PURE__ */ jsxs17(Fragment3, { children: [
-            /* @__PURE__ */ jsxs17("div", { className: "flex w-full max-w-[90%] items-center truncate", children: [
-              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__ */ jsx18(Spinner, { size: "sm" })
+          ] }) : /* @__PURE__ */ jsx18("div", { className: "relative flex h-5 w-full items-center", children: timeField ? /* @__PURE__ */ jsxs14("div", { className: "text-title flex w-full items-center justify-center gap-2 truncate text-sm", children: [
+            valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx18("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder }),
+            /* @__PURE__ */ jsx18(ClockIcon, { "aria-hidden": true, className: "text-border h-3.5 w-3.5 shrink-0" })
+          ] }) : /* @__PURE__ */ jsxs14(Fragment3, { children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex w-full max-w-[90%] items-center truncate", children: [
+              leftIcon && /* @__PURE__ */ jsx18("span", { className: "mr-2 shrink-0", children: cloneElement(leftIcon, { size: 20, strokeWidth: 1 }) }),
+              valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx18("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder })
             ] }),
-            /* @__PURE__ */ jsxs17("div", { className: "absolute top-0.5 right-0 flex gap-2", children: [
-              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__ */ jsxs14("div", { className: "absolute top-0.5 right-0 flex gap-2", children: [
+              ableDeleteOption && /* @__PURE__ */ jsx18("div", { "aria-hidden": true, className: "h-4 w-4 shrink-0" }),
+              !open ? /* @__PURE__ */ jsx18(CaretDownIcon, { "aria-hidden": true, className: "ml-2 h-4 w-4 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx18(CaretUpIcon, { "aria-hidden": true, className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
             ] })
           ] }) })
         }
       ) }),
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx18(
         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__ */ jsx24(
+          children: timeField ? /* @__PURE__ */ jsx18(
             TimeColumns,
             {
               hours: timeHours,
@@ -1550,8 +1091,8 @@ var SelectInput = (props) => {
               onSelectMinute: handleSelectMinute,
               value: valueItem
             }
-          ) : /* @__PURE__ */ jsxs17(Command, { className: "flex w-full flex-col gap-2", children: [
-            search && /* @__PURE__ */ jsx24(
+          ) : /* @__PURE__ */ jsxs14(Command, { className: "flex w-full flex-col gap-2", children: [
+            search && /* @__PURE__ */ jsx18(
               Input,
               {
                 className: "mb-1 rounded-sm",
@@ -1560,11 +1101,11 @@ var SelectInput = (props) => {
                 value: query
               }
             ),
-            /* @__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) => {
+            /* @__PURE__ */ jsx18(CommandEmpty, { className: "text-center", children: noResultsLabel ?? t("selectInput.noResults") }),
+            /* @__PURE__ */ jsx18(CommandList, { children: /* @__PURE__ */ jsx18(CommandGroup, { className: "p-0", children: filteredOptions.map((item) => {
               const labelValue = item[labelKey];
               const valueValue = item[valueKey];
-              return /* @__PURE__ */ jsx24(
+              return /* @__PURE__ */ jsx18(
                 CommandItem,
                 {
                   className: cn(
@@ -1575,7 +1116,8 @@ var SelectInput = (props) => {
                     onChange?.(currentValue);
                     onValueChange(currentValue);
                     setOpen(false);
-                    setTimeout(() => setQuery(""), QUERY_RESET_DELAY_MS);
+                    if (queryResetRef.current) clearTimeout(queryResetRef.current);
+                    queryResetRef.current = setTimeout(() => setQuery(""), QUERY_RESET_DELAY_MS);
                   },
                   value: valueValue,
                   children: labelValue.trim()
@@ -1587,11 +1129,14 @@ var SelectInput = (props) => {
         }
       )
     ] }),
-    ableDeleteOption && !loading && !timeField && /* @__PURE__ */ jsx24(
+    ableDeleteOption && !loading && !timeField && /* @__PURE__ */ jsx18(
       "button",
       {
         "aria-label": t("selectInput.clear"),
-        className: "absolute top-1/2 right-9 z-10 flex h-4 w-4 -translate-y-1/2 items-center justify-center",
+        className: cn(
+          "absolute top-1/2 right-7 z-10 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full",
+          focusRing
+        ),
         onClick: () => {
           onChange?.("");
           onValueChange("");
@@ -1600,14 +1145,14 @@ var SelectInput = (props) => {
           setOpen(false);
         },
         type: "button",
-        children: /* @__PURE__ */ jsx24(XIcon3, { className: "h-4 w-4 shrink-0 opacity-50" })
+        children: /* @__PURE__ */ jsx18(XIcon3, { "aria-hidden": true, className: "h-4 w-4 shrink-0 opacity-50" })
       }
     )
   ] }) });
 };
 
 // src/components/form-fields/select-field.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SelectField = ({
   ableDeleteOption,
   className,
@@ -1623,14 +1168,14 @@ var SelectField = ({
   search,
   visualRequired
 }) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx19(
     FormField,
     {
       control,
       name,
       render: ({ field, fieldState }) => {
         const hasError = !!fieldState.error;
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx19(
           FormFieldShell,
           {
             hasError,
@@ -1639,9 +1184,10 @@ var SelectField = ({
             mainClassName,
             name,
             visualRequired,
-            children: /* @__PURE__ */ jsx25(
+            children: (controlProps) => /* @__PURE__ */ jsx19(
               SelectInput,
               {
+                ...controlProps,
                 ableDeleteOption,
                 className,
                 disabled,
@@ -1665,13 +1211,13 @@ var SelectField = ({
 
 // src/components/password-checklist.tsx
 import { CheckCircleIcon as CheckCircleIcon2, XCircleIcon } from "@phosphor-icons/react";
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var PasswordChecklist = ({ className, rules, value }) => {
   if (rules.length === 0) return null;
-  return /* @__PURE__ */ jsx26("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
+  return /* @__PURE__ */ jsx20("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(
+    return /* @__PURE__ */ jsxs15(
       "li",
       {
         className: cn(
@@ -1679,8 +1225,8 @@ var PasswordChecklist = ({ className, rules, value }) => {
           isMet ? "text-success" : "text-inactive-text"
         ),
         children: [
-          /* @__PURE__ */ jsx26(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx26("span", { children: rule.label })
+          /* @__PURE__ */ jsx20(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx20("span", { children: rule.label })
         ]
       },
       rule.key
@@ -1689,22 +1235,22 @@ var PasswordChecklist = ({ className, rules, value }) => {
 };
 
 // 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: [
-  /* @__PURE__ */ jsx27("h1", { className: "text-title text-2xl font-bold", children: title }),
-  subtitle !== void 0 && /* @__PURE__ */ jsx27("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ jsx21("h1", { className: "text-title text-2xl font-bold", children: title }),
+  subtitle !== void 0 && /* @__PURE__ */ jsx21("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
 ] });
 
 // src/components/stepper.tsx
 import { CheckIcon } from "@phosphor-icons/react";
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
-  return /* @__PURE__ */ jsx28("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx22("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
     const isCompleted = intermediate ? index <= activeIndex : index < activeIndex;
     const isActive = !intermediate && index === activeIndex;
-    return /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col items-center", children: [
-      /* @__PURE__ */ jsxs20("div", { className: "flex w-full items-center", children: [
-        /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col items-center", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center", children: [
+        /* @__PURE__ */ jsx22(
           "div",
           {
             className: cn(
@@ -1714,7 +1260,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             "aria-current": isActive ? "step" : void 0,
@@ -1722,12 +1268,12 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
               "flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-full border text-xs font-semibold transition-colors md:h-6.5 md:w-6.5",
               isCompleted && "bg-primary border-primary text-inverse",
               isActive && "bg-primary border-primary text-inverse",
-              !isCompleted && !isActive && "bg-inactive border-inactive text-surface"
+              !isCompleted && !isActive && "bg-inactive border-inactive text-inverse"
             ),
-            children: isCompleted ? /* @__PURE__ */ jsx28(CheckIcon, { className: "h-4 w-4" }) : index + 1
+            children: isCompleted ? /* @__PURE__ */ jsx22(CheckIcon, { "aria-hidden": true, className: "h-4 w-4" }) : index + 1
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             className: cn(
@@ -1735,7 +1281,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
               isCompleted ? "bg-primary" : "bg-inactive",
               index === steps.length - 1 && "rounded-r-full"
             ),
-            children: index === 0 && /* @__PURE__ */ jsx28(
+            children: index === 0 && /* @__PURE__ */ jsx22(
               "div",
               {
                 className: cn(
@@ -1747,39 +1293,40 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx28("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
+      /* @__PURE__ */ jsx22("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
     ] }, step.label);
   }) });
 };
 
 // src/components/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React15 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var Switch = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+import * as React13 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Switch = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
   SwitchPrimitive.Root,
   {
     className: cn(
-      "border-border focus-visible:ring-ring data-[state=checked]:bg-success data-[state=unchecked]:bg-inactive relative inline-flex h-[26px] w-[50px] shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+      "border-border data-[state=checked]:bg-success data-[state=unchecked]:bg-inactive relative inline-flex h-[26px] w-[50px] shrink-0 cursor-pointer items-center rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+      focusRing,
       className
     ),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx29(SwitchPrimitive.Thumb, { className: "bg-surface pointer-events-none absolute top-[3px] left-[3px] block h-[18px] w-[18px] rounded-full shadow-lg transition-transform data-[state=checked]:translate-x-6" })
+    children: /* @__PURE__ */ jsx23(SwitchPrimitive.Thumb, { className: "bg-surface pointer-events-none absolute top-[3px] left-[3px] block h-[18px] w-[18px] rounded-full shadow-lg transition-transform data-[state=checked]:translate-x-6" })
   }
 ));
 Switch.displayName = SwitchPrimitive.Root.displayName;
 
 // src/components/textarea.tsx
-import * as React16 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var Textarea = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30("textarea", { className: cn(inputSurface, inputFocus, "block h-28 resize-none py-3", className), ref, ...props }));
+import * as React14 from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Textarea = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24("textarea", { className: cn(inputSurface, inputFocus, "block h-28 resize-none py-3", className), ref, ...props }));
 Textarea.displayName = "Textarea";
 
 // src/components/toast/toast.tsx
 import { CheckIcon as CheckIcon2, FileLockIcon, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon4 } from "@phosphor-icons/react";
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var EXIT_ANIMATION_MS = 200;
 var typeIcons = {
   destructive: XIcon4,
@@ -1796,7 +1343,7 @@ var typeStyles = {
   warning: { border: "border-warning", icon: "text-warning", iconBorder: "border-warning" }
 };
 function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
-  const [leaving, setLeaving] = useState5(false);
+  const [leaving, setLeaving] = useState4(false);
   const startedAtRef = useRef4(Date.now());
   const timeoutRef = useRef4(null);
   const exitRef = useRef4(null);
@@ -1816,10 +1363,9 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
       if (exitRef.current) clearTimeout(exitRef.current);
     };
   }, [id, duration, onClose]);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
-      "aria-live": "polite",
       className: cn(
         "relative",
         leaving ? "absolute top-0 right-0 left-0" : "",
@@ -1832,19 +1378,19 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
         styles.border,
         leaving ? "translate-y-2 opacity-0" : "translate-y-0 opacity-100"
       ),
-      role: "status",
+      role: type === "destructive" ? "alert" : "status",
       children: [
-        /* @__PURE__ */ jsx31("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx31("h4", { className: cn("text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"), children: title }) }),
-        subtitle ? /* @__PURE__ */ jsx31("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx31("div", { className: cn("max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"), children: subtitle }) }) : null,
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx25("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx25("h4", { className: cn("text-base leading-normal font-semibold", "text-foreground", "line-clamp-2"), children: title }) }),
+        subtitle ? /* @__PURE__ */ jsx25("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx25("div", { className: cn("max-w-28 text-sm font-normal", "text-body"), children: subtitle }) }) : null,
+        /* @__PURE__ */ jsx25(
           "div",
           {
             className: cn(
               "shrink-0",
-              "flex h-8 w-8 min-w-8 items-center justify-center rounded-full border-2",
+              "flex size-8 min-w-8 items-center justify-center rounded-full border-2",
               styles.iconBorder
             ),
-            children: /* @__PURE__ */ jsx31(Icon, { className: cn("h-5 w-5", styles.icon) })
+            children: /* @__PURE__ */ jsx25(Icon, { "aria-hidden": true, className: cn("h-5 w-5", styles.icon) })
           }
         )
       ]
@@ -1853,13 +1399,13 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
 }
 
 // src/components/toast/toast-provider.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
-import { Fragment as Fragment4, jsx as jsx32 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo3, useRef as useRef5, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx26 } from "react/jsx-runtime";
 function ToastProvider() {
-  const [toasts, setToasts] = useState6([]);
+  const [toasts, setToasts] = useState5([]);
   const itemRefs = useRef5(/* @__PURE__ */ new Map());
   const prevRects = useRef5(/* @__PURE__ */ new Map());
-  const showToast = useCallback3((type, options) => {
+  const showToast = useCallback2((type, options) => {
     setToasts((prev) => [
       ...prev,
       {
@@ -1871,14 +1417,14 @@ function ToastProvider() {
       }
     ]);
   }, []);
-  const removeToast = useCallback3((id) => {
+  const removeToast = useCallback2((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   useEffect5(() => {
     registerToastEmitter(showToast);
     return () => registerToastEmitter(null);
   }, [showToast]);
-  const grouped = useMemo4(() => {
+  const grouped = useMemo3(() => {
     return toasts.reduce((acc, toast2) => {
       const pos = toast2.position ?? "top";
       acc[pos] = [...acc[pos] ?? [], toast2];
@@ -1905,7 +1451,7 @@ function ToastProvider() {
     });
     prevRects.current = newRects;
   }, [toasts]);
-  const setItemRef = useCallback3((id) => {
+  const setItemRef = useCallback2((id) => {
     return (el) => {
       if (!el) {
         itemRefs.current.delete(id);
@@ -1915,7 +1461,7 @@ function ToastProvider() {
       itemRefs.current.set(id, el);
     };
   }, []);
-  return /* @__PURE__ */ jsx32(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx32("div", { className: `fixed ${zToast} ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx32("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx32("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx26(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx26("div", { className: `fixed ${zToast} ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx26("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx26("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx26(
     Toast,
     {
       duration: toast2.duration,
@@ -1943,9 +1489,9 @@ function getPositionClass(position) {
 }
 
 // src/components/wrapper.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Wrapper = ({ children, className }) => {
-  return /* @__PURE__ */ jsx33("div", { className: cn("mx-auto h-full w-full", className), children });
+  return /* @__PURE__ */ jsx27("div", { className: cn("mx-auto h-full w-full", className), children });
 };
 export {
   AddTile,
@@ -2003,11 +1549,16 @@ export {
   Toast,
   ToastProvider,
   Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
   Wrapper,
   buttonVariants,
   capitalize,
   chipVariants,
   cn,
+  focusRing,
   formatNumber,
   formatPrice,
   getTagEmoji,