@komensal/ui 0.9.0 → 0.10.0

package/dist/index.js

@@ -58,6 +58,13 @@ function emit(type, options) {
   }
 }
 
+// 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";
+
 // src/components/alert.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var variantStyles = {
@@ -138,7 +145,8 @@ var ui_default = {
     placeholder: "Selecciona...",
     loading: "Cargando...",
     search: "Buscar...",
-    noResults: "Sin resultados."
+    noResults: "Sin resultados.",
+    clear: "Limpiar selecci\xF3n"
   },
   passwordChecklist: {
     minLength: "M\xEDnimo {{min}} caracteres",
@@ -190,7 +198,7 @@ var Spinner = ({ className = "", loadingLabel, size = "md", variant = "primary"
         viewBox: "0 0 100 100",
         width: sizes[size],
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsxs3("g", { className: clsx2("spinner_V8m1", sizes[size], variants[variant], className), children: [
+        children: /* @__PURE__ */ jsxs3("g", { className: clsx2("spinner_V8m1", className), children: [
           /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", fill: "none", opacity: "0.25", r: "35", stroke: "currentColor", strokeWidth: "10" }),
           /* @__PURE__ */ jsx3(
             "circle",
@@ -233,7 +241,7 @@ var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props },
   TooltipPrimitive.Content,
   {
     className: cn(
-      "bg-tooltip text-tooltip-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm font-semibold shadow-sm",
+      `bg-tooltip text-tooltip-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${zPopover} overflow-hidden rounded-md px-3 py-1.5 text-sm font-semibold shadow-sm`,
       className
     ),
     ref,
@@ -340,13 +348,13 @@ var Button = React2.forwardRef(
 Button.displayName = "Button";
 
 // src/components/command.tsx
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { Command as CommandPrimitive } from "cmdk";
 import * as React4 from "react";
 
 // src/components/dialog.tsx
+import { XIcon } from "@phosphor-icons/react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
 import * as React3 from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
@@ -357,7 +365,7 @@ var DialogOverlay = React3.forwardRef(({ className, isAbsolute = false, ...props
   DialogPrimitive.Overlay,
   {
     className: cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/10 z-60 backdrop-blur-xs",
+      `data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/10 ${zDialogOverlay} backdrop-blur-xs`,
       isAbsolute ? "absolute inset-0" : "fixed inset-0",
       className
     ),
@@ -375,7 +383,7 @@ var DialogContent = React3.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%] z-70 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 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`,
             isAbsolute ? "absolute top-[50%] left-[50%]" : "fixed top-[50%] left-[50%]",
             className
           ),
@@ -384,7 +392,7 @@ var DialogContent = React3.forwardRef(
           children: [
             children,
             isCloseIcon && /* @__PURE__ */ jsxs6(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__ */ jsx6(Cross2Icon, { className: "text-body h-4 w-4" }),
+              /* @__PURE__ */ jsx6(XIcon, { className: "text-body h-4 w-4" }),
               /* @__PURE__ */ jsx6("span", { className: "sr-only", children: closeLabel ?? t("dialog.close") })
             ] })
           ]
@@ -561,7 +569,7 @@ FormMessage.displayName = "FormMessage";
 
 // src/components/form-fields/input-field.tsx
 import { useState } from "react";
-import { EyeIcon, EyeSlashIcon, XIcon } from "@phosphor-icons/react";
+import { EyeIcon, EyeSlashIcon, XIcon as XIcon2 } from "@phosphor-icons/react";
 
 // src/components/input.tsx
 import * as React6 from "react";
@@ -622,8 +630,32 @@ var LabelField = ({ label, labelClassName, name, visualRequired }) => {
   );
 };
 
-// src/components/form-fields/input-field.tsx
+// src/components/form-fields/form-field-shell.tsx
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var FormFieldShell = ({
+  children,
+  hasError,
+  label,
+  labelClassName,
+  mainClassName,
+  name,
+  visualRequired
+}) => /* @__PURE__ */ jsxs9(FormItem, { className: cn("flex flex-col", mainClassName), children: [
+  /* @__PURE__ */ jsx12(
+    LabelField,
+    {
+      label,
+      labelClassName: cn(labelClassName, hasError && "text-destructive"),
+      name,
+      visualRequired
+    }
+  ),
+  /* @__PURE__ */ jsx12(FormControl, { children }),
+  /* @__PURE__ */ jsx12(FormMessage, {})
+] });
+
+// src/components/form-fields/input-field.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var InputField = ({
   clearLabel,
   control,
@@ -648,67 +680,68 @@ var InputField = ({
   };
   const isPassword = type === "password";
   const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     FormField,
     {
       control,
       name,
       render: ({ field, fieldState }) => {
         const hasError = !!fieldState.error;
-        return /* @__PURE__ */ jsxs9(FormItem, { className: cn("flex flex-col", mainClassName), children: [
-          /* @__PURE__ */ jsx12(
-            LabelField,
-            {
-              label,
-              labelClassName: cn(labelClassName, hasError && "text-destructive"),
-              name,
-              visualRequired
-            }
-          ),
-          /* @__PURE__ */ jsx12(FormControl, { children: /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx12(
-              Input,
-              {
-                ...field,
-                autoComplete: isPassword ? "current-password" : void 0,
-                className: cn(
-                  inputClassName,
-                  hasError && "border-destructive",
-                  isPassword && "pr-10 [&::-ms-reveal]:hidden"
-                ),
-                "data-no-password-toggle": true,
-                disabled,
-                min: type === "number" ? 0 : void 0,
-                placeholder,
-                type: inputType,
-                value: field.value ?? ""
-              }
-            ),
-            /* @__PURE__ */ jsxs9("div", { className: "absolute inset-y-0 right-0 flex items-center space-x-2 pr-2", children: [
-              field.value && isClearable && /* @__PURE__ */ jsx12(
-                "button",
+        return /* @__PURE__ */ jsx13(
+          FormFieldShell,
+          {
+            hasError,
+            label,
+            labelClassName,
+            mainClassName,
+            name,
+            visualRequired,
+            children: /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx13(
+                Input,
                 {
-                  className: "focus:outline-none",
-                  onClick: onClear,
-                  title: clearLabel ?? t("inputField.clear"),
-                  type: "button",
-                  children: /* @__PURE__ */ jsx12(XIcon, { size: 18 })
+                  ...field,
+                  autoComplete: isPassword ? "current-password" : void 0,
+                  className: cn(
+                    inputClassName,
+                    hasError && "border-destructive",
+                    isPassword && "pr-10 [&::-ms-reveal]:hidden"
+                  ),
+                  "data-1p-ignore": isPassword || void 0,
+                  "data-bwignore": isPassword || void 0,
+                  "data-lpignore": isPassword || void 0,
+                  disabled,
+                  min: type === "number" ? 0 : void 0,
+                  placeholder,
+                  type: inputType,
+                  value: field.value ?? ""
                 }
               ),
-              type === "password" && /* @__PURE__ */ jsx12(
-                "button",
-                {
-                  className: "focus:outline-none",
-                  onClick: togglePasswordVisibility,
-                  title: isPasswordVisible ? hidePasswordLabel ?? t("inputField.hidePassword") : showPasswordLabel ?? t("inputField.showPassword"),
-                  type: "button",
-                  children: isPasswordVisible ? /* @__PURE__ */ jsx12(EyeIcon, { size: 18 }) : /* @__PURE__ */ jsx12(EyeSlashIcon, { size: 20 })
-                }
-              )
+              /* @__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",
+                    onClick: onClear,
+                    title: clearLabel ?? t("inputField.clear"),
+                    type: "button",
+                    children: /* @__PURE__ */ jsx13(XIcon2, { size: 18 })
+                  }
+                ),
+                type === "password" && /* @__PURE__ */ jsx13(
+                  "button",
+                  {
+                    className: "focus:outline-none",
+                    onClick: togglePasswordVisibility,
+                    title: isPasswordVisible ? hidePasswordLabel ?? t("inputField.hidePassword") : showPasswordLabel ?? t("inputField.showPassword"),
+                    type: "button",
+                    children: isPasswordVisible ? /* @__PURE__ */ jsx13(EyeIcon, { size: 18 }) : /* @__PURE__ */ jsx13(EyeSlashIcon, { size: 20 })
+                  }
+                )
+              ] })
             ] })
-          ] }) }),
-          /* @__PURE__ */ jsx12(FormMessage, {})
-        ] });
+          }
+        );
       }
     }
   );
@@ -745,6 +778,7 @@ function useGoogleMapPicker({
   locationZoom,
   onAddressResolved,
   onChange,
+  onError,
   value
 }) {
   const placesLib = useMapsLibrary("places");
@@ -752,11 +786,13 @@ function useGoogleMapPicker({
   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);
@@ -765,7 +801,15 @@ function useGoogleMapPicker({
   useEffect(() => {
     onChangeRef.current = onChange;
     onResolvedRef.current = onAddressResolved;
+    onErrorRef.current = onError;
   });
+  useEffect(
+    () => () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+    },
+    []
+  );
   useEffect(() => {
     setInputValue(value);
   }, [value]);
@@ -786,7 +830,7 @@ function useGoogleMapPicker({
     setSessionToken(new placesLib.AutocompleteSessionToken());
   }, [placesLib]);
   useEffect(() => {
-    if (!geocoder || !locationQuery || !map) return;
+    if (!geocoder || !locationQuery || !map || position) return;
     const g = geocoder;
     const ctrl = { cancelled: false };
     void (async () => {
@@ -796,14 +840,17 @@ function useGoogleMapPicker({
         const loc = results[0].geometry.location;
         map.panTo({ lat: loc.lat(), lng: loc.lng() });
         map.setZoom(locationZoom ?? CITY_ZOOM);
-      } catch {
-        return;
+      } catch (error) {
+        if (!ctrl.cancelled) {
+          console.error("[GoogleMapPicker] geocode by query failed", error);
+          onErrorRef.current?.(error);
+        }
       }
     })();
     return () => {
       ctrl.cancelled = true;
     };
-  }, [geocoder, locationQuery, locationZoom, map]);
+  }, [geocoder, locationQuery, locationZoom, map, position]);
   const fetchSuggestions = useCallback(
     async (input) => {
       if (!placesLib || input.length < 2) {
@@ -818,7 +865,9 @@ function useGoogleMapPicker({
         });
         setSuggestions(result.suggestions);
         setShowDropdown(true);
-      } catch {
+      } catch (error) {
+        console.error("[GoogleMapPicker] fetchAutocompleteSuggestions failed", error);
+        onErrorRef.current?.(error);
         setSuggestions([]);
       }
     },
@@ -839,8 +888,9 @@ function useGoogleMapPicker({
           );
           onResolvedRef.current?.({ address, lat: latLng.lat, lng: latLng.lng, ...parts });
         }
-      } catch {
-        return;
+      } catch (error) {
+        console.error("[GoogleMapPicker] reverse geocode failed", error);
+        onErrorRef.current?.(error);
       }
     },
     [geocoder]
@@ -874,7 +924,8 @@ function useGoogleMapPicker({
     if (placesLib) setSessionToken(new placesLib.AutocompleteSessionToken());
   };
   const handleBlur = () => {
-    setTimeout(() => setShowDropdown(false), 150);
+    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+    blurTimeoutRef.current = setTimeout(() => setShowDropdown(false), 150);
   };
   const handleMapClick = useCallback(
     (e) => {
@@ -910,10 +961,10 @@ function useGoogleMapPicker({
 }
 
 // src/components/google-map-picker.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
 var MapPickerContent = (props) => {
-  const { disabled, hasError, placeholder } = props;
+  const { disabled, hasError, mapId, placeholder } = props;
   const {
     handleBlur,
     handleInputChange,
@@ -926,9 +977,9 @@ var MapPickerContent = (props) => {
     showDropdown,
     suggestions
   } = useGoogleMapPicker(props);
-  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx14(
         "input",
         {
           className: cn(inputBase, inputFocus, hasError && "border-destructive"),
@@ -941,7 +992,7 @@ var MapPickerContent = (props) => {
           value: inputValue
         }
       ),
-      showDropdown && suggestions.length > 0 && /* @__PURE__ */ jsx13("ul", { className: "border-border bg-surface absolute z-50 mt-1 w-full overflow-hidden rounded-[10px] border shadow-md", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
+      showDropdown && suggestions.length > 0 && /* @__PURE__ */ jsx14("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__ */ jsx14("li", { children: /* @__PURE__ */ jsx14(
         "button",
         {
           className: "text-foreground hover:bg-hover w-full px-4 py-3 text-left text-sm transition-colors",
@@ -951,7 +1002,7 @@ var MapPickerContent = (props) => {
         }
       ) }, suggestion.placePrediction?.placeId ?? suggestion.placePrediction?.text.text)) })
     ] }),
-    /* @__PURE__ */ jsx13("div", { className: "border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5", children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14("div", { className: "border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5", children: /* @__PURE__ */ jsx14(
       Map2,
       {
         defaultCenter: DEFAULT_CENTER,
@@ -959,18 +1010,26 @@ var MapPickerContent = (props) => {
         disableDefaultUI: true,
         gestureHandling: "cooperative",
         id: PICKER_MAP_ID,
-        mapId: import.meta.env.VITE_GOOGLE_MAPS_MAP_ID ?? "DEMO_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__ */ jsx13(AdvancedMarker, { draggable: !disabled, onDragEnd: handleMarkerDragEnd, position })
+        children: position && /* @__PURE__ */ jsx14(AdvancedMarker, { draggable: !disabled, onDragEnd: handleMarkerDragEnd, position })
       }
     ) })
   ] });
 };
-var GoogleMapPicker = (props) => /* @__PURE__ */ jsx13(APIProvider, { apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "", language: "es", region: "CO", children: /* @__PURE__ */ jsx13(MapPickerContent, { ...props }) });
+var GoogleMapPicker = (props) => /* @__PURE__ */ jsx14(
+  APIProvider,
+  {
+    apiKey: props.apiKey ?? import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "",
+    language: "es",
+    region: "CO",
+    children: /* @__PURE__ */ jsx14(MapPickerContent, { ...props })
+  }
+);
 
 // src/components/form-fields/map-picker-field.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var MapPickerField = ({
   control,
   label,
@@ -979,45 +1038,44 @@ var MapPickerField = ({
   name,
   visualRequired,
   ...pickerProps
-}) => /* @__PURE__ */ jsx14(
+}) => /* @__PURE__ */ jsx15(
   FormField,
   {
     control,
     name,
-    render: ({ field, fieldState }) => /* @__PURE__ */ jsxs11(FormItem, { className: cn("flex flex-col", mainClassName), children: [
-      /* @__PURE__ */ jsx14(
-        LabelField,
-        {
-          label,
-          labelClassName: cn(labelClassName, fieldState.error && "text-destructive"),
-          name,
-          visualRequired
-        }
-      ),
-      /* @__PURE__ */ jsx14(FormControl, { children: /* @__PURE__ */ jsx14(
-        GoogleMapPicker,
-        {
-          ...pickerProps,
-          hasError: !!fieldState.error,
-          onChange: field.onChange,
-          value: field.value ?? ""
-        }
-      ) }),
-      /* @__PURE__ */ jsx14(FormMessage, {})
-    ] })
+    render: ({ field, fieldState }) => /* @__PURE__ */ jsx15(
+      FormFieldShell,
+      {
+        hasError: !!fieldState.error,
+        label,
+        labelClassName,
+        mainClassName,
+        name,
+        visualRequired,
+        children: /* @__PURE__ */ jsx15(
+          GoogleMapPicker,
+          {
+            ...pickerProps,
+            hasError: !!fieldState.error,
+            onChange: field.onChange,
+            value: field.value ?? ""
+          }
+        )
+      }
+    )
   }
 );
 
 // src/components/otp-input.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
 import React8 from "react";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function InputOTP({
   className,
   containerClassName,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     OTPInput,
     {
       className: cn("disabled:cursor-not-allowed", className),
@@ -1028,7 +1086,7 @@ function InputOTP({
   );
 }
 function InputOTPGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx15("div", { className: cn("flex items-center gap-2", className), "data-slot": "input-otp-group", ...props });
+  return /* @__PURE__ */ jsx16("div", { className: cn("flex items-center gap-2", className), "data-slot": "input-otp-group", ...props });
 }
 function InputOTPSlot({
   className,
@@ -1052,14 +1110,14 @@ function InputOTPSlot({
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx15("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx15("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx16("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx16("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) })
       ]
     }
   );
 }
 
 // src/components/form-fields/otp-field.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function OTPField({
   autoFocus,
   className,
@@ -1069,16 +1127,25 @@ function OTPField({
   label,
   labelClassName,
   name,
-  otpLength = 6
+  otpLength = 6,
+  visualRequired
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     FormField,
     {
       control,
       name,
       render: ({ field, fieldState }) => /* @__PURE__ */ jsxs13(FormItem, { className: cn("flex flex-col", className), children: [
-        label ? /* @__PURE__ */ jsx16(Label, { className: cn("text-start text-sm font-semibold", labelClassName), htmlFor: name, children: label }) : null,
-        /* @__PURE__ */ jsx16(FormControl, { children: /* @__PURE__ */ jsx16(
+        label ? /* @__PURE__ */ jsx17(
+          LabelField,
+          {
+            label,
+            labelClassName: cn(labelClassName, fieldState.invalid && "text-destructive"),
+            name,
+            visualRequired
+          }
+        ) : null,
+        /* @__PURE__ */ jsx17(FormControl, { children: /* @__PURE__ */ jsx17(
           InputOTP,
           {
             "aria-invalid": fieldState.invalid || void 0,
@@ -1093,31 +1160,31 @@ function OTPField({
             onPaste: (e) => field.onChange(e.clipboardData.getData("text")),
             pattern: "[0-9]*",
             value: field.value ?? "",
-            children: /* @__PURE__ */ jsx16(InputOTPGroup, { children: Array.from({ length: otpLength }).map((_, i) => /* @__PURE__ */ jsx16(InputOTPSlot, { "aria-invalid": fieldState.invalid || void 0, index: i }, i)) })
+            children: /* @__PURE__ */ jsx17(InputOTPGroup, { children: Array.from({ length: otpLength }).map((_, i) => /* @__PURE__ */ jsx17(InputOTPSlot, { "aria-invalid": fieldState.invalid || void 0, index: i }, i)) })
           }
         ) }),
-        /* @__PURE__ */ jsx16(FormMessage, {})
+        /* @__PURE__ */ jsx17(FormMessage, {})
       ] })
     }
   );
 }
 
 // src/components/select-input.tsx
-import { CaretDownIcon, CaretUpIcon, ClockIcon, XIcon as XIcon2 } from "@phosphor-icons/react";
-import { cloneElement, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
+import { CaretDownIcon, CaretUpIcon, ClockIcon, XIcon as XIcon3 } from "@phosphor-icons/react";
+import { cloneElement, useCallback as useCallback2, useEffect as useEffect3, useId as useId2, useMemo as useMemo3, useState as useState4 } from "react";
 
 // src/components/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React9 from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React9.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+var PopoverContent = React9.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx18(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx18(
   PopoverPrimitive.Content,
   {
     align,
     className: cn(
-      "text-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+      `text-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${zPopover} w-72 rounded-md border p-4 shadow-md outline-none`,
       className
     ),
     ref,
@@ -1163,7 +1230,7 @@ function usePopoverWidth() {
 }
 
 // src/components/select-input.tsx
-import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var SelectInput = (props) => {
   const t = useUiT();
   const {
@@ -1189,6 +1256,7 @@ 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 { ref: divRef, width } = usePopoverWidth();
@@ -1225,95 +1293,102 @@ var SelectInput = (props) => {
   useEffect3(() => {
     setValueItem(value);
   }, [value]);
-  return /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx18("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-expanded": open,
-        className: buttonClassName,
-        disabled,
-        isLoading: loading,
-        onBlur,
-        ref: divRef,
-        role: "combobox",
-        variant: "primary",
-        children: loading ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
-          loadingLabel ?? t("selectInput.loading"),
-          " ",
-          /* @__PURE__ */ jsx18(Spinner, {})
-        ] }) : /* @__PURE__ */ jsxs14("div", { className: "relative flex h-5 w-full items-center", 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 })
-          ] }),
-          timeField ? /* @__PURE__ */ jsx18("div", { className: "absolute top-0.5 right-0", children: /* @__PURE__ */ jsx18(ClockIcon, { 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(
-              XIcon2,
+  return /* @__PURE__ */ jsx19("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__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
+        Button,
+        {
+          "aria-controls": listboxId,
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          className: buttonClassName,
+          disabled,
+          isLoading: loading,
+          onBlur,
+          ref: divRef,
+          role: "combobox",
+          variant: "primary",
+          children: loading ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
+            loadingLabel ?? t("selectInput.loading"),
+            " ",
+            /* @__PURE__ */ jsx19(Spinner, {})
+          ] }) : /* @__PURE__ */ jsxs14("div", { className: "relative flex h-5 w-full items-center", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex w-full max-w-[90%] items-center truncate", children: [
+              leftIcon && /* @__PURE__ */ jsx19("span", { className: "mr-2 shrink-0", children: cloneElement(leftIcon, { size: 20, strokeWidth: 1 }) }),
+              valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx19("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder })
+            ] }),
+            timeField ? /* @__PURE__ */ jsx19("div", { className: "absolute top-0.5 right-0", children: /* @__PURE__ */ jsx19(ClockIcon, { 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__ */ jsx19("div", { "aria-hidden": true, className: "h-4 w-4 shrink-0" }),
+              !open ? /* @__PURE__ */ jsx19(CaretDownIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx19(CaretUpIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+            ] })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx19(
+        PopoverContent,
+        {
+          className: cn("bg-surface border-border rounded-sm p-1", zPopoverAboveDialog),
+          id: listboxId,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          style: { maxWidth: "auto", minWidth: `${width}px`, width: `${width}px` },
+          children: /* @__PURE__ */ jsxs14(Command, { className: "flex w-full flex-col gap-2", children: [
+            search && /* @__PURE__ */ jsx19(
+              Input,
               {
-                className: "z-100 h-4 w-4 shrink-0 opacity-50",
-                onClick: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  onChange?.("");
-                  onValueChange("");
-                  setValueItem("");
-                  setQuery("");
-                  setOpen(false);
-                }
+                className: "mb-1 rounded-sm",
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: searchPlaceholder ?? t("selectInput.search"),
+                value: query
               }
             ),
-            !open ? /* @__PURE__ */ jsx18(CaretDownIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx18(CaretUpIcon, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+            /* @__PURE__ */ jsx19(CommandEmpty, { className: "text-center", children: noResultsLabel ?? t("selectInput.noResults") }),
+            /* @__PURE__ */ jsx19(CommandList, { children: /* @__PURE__ */ jsx19(CommandGroup, { className: "p-0", children: filteredOptions.map((item) => {
+              const labelValue = item[labelKey];
+              const valueValue = item[valueKey];
+              return /* @__PURE__ */ jsx19(
+                CommandItem,
+                {
+                  className: cn(
+                    "hover:bg-hover mt-0.5 mb-0.5 flex cursor-pointer items-center gap-2 rounded-sm py-2 pl-3",
+                    valueValue === value && "bg-inactive"
+                  ),
+                  onSelect: (currentValue) => {
+                    onChange?.(currentValue);
+                    onValueChange(currentValue);
+                    setOpen(false);
+                    setTimeout(() => setQuery(""), 100);
+                  },
+                  value: valueValue,
+                  children: labelValue.trim()
+                },
+                valueValue
+              );
+            }) }) })
           ] })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ jsx18(
-      PopoverContent,
+        }
+      )
+    ] }),
+    ableDeleteOption && !loading && !timeField && /* @__PURE__ */ jsx19(
+      "button",
       {
-        className: "bg-surface border-border z-100 rounded-sm p-1",
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        style: { maxWidth: "auto", minWidth: `${width}px`, width: `${width}px` },
-        children: /* @__PURE__ */ jsxs14(Command, { className: "flex w-full flex-col gap-2", children: [
-          search && /* @__PURE__ */ jsx18(
-            Input,
-            {
-              className: "mb-1 rounded-sm",
-              onChange: (e) => setQuery(e.target.value),
-              placeholder: searchPlaceholder ?? t("selectInput.search"),
-              value: query
-            }
-          ),
-          /* @__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__ */ jsx18(
-              CommandItem,
-              {
-                className: cn(
-                  "hover:bg-hover mt-0.5 mb-0.5 flex cursor-pointer items-center gap-2 rounded-sm py-2 pl-3",
-                  valueValue === value && "bg-inactive"
-                ),
-                onSelect: (currentValue) => {
-                  onChange?.(currentValue);
-                  onValueChange(currentValue);
-                  setOpen(false);
-                  setTimeout(() => setQuery(""), 100);
-                },
-                value: valueValue,
-                children: labelValue.trim()
-              },
-              valueValue
-            );
-          }) }) })
-        ] })
+        "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",
+        onClick: () => {
+          onChange?.("");
+          onValueChange("");
+          setValueItem("");
+          setQuery("");
+          setOpen(false);
+        },
+        type: "button",
+        children: /* @__PURE__ */ jsx19(XIcon3, { className: "h-4 w-4 shrink-0 opacity-50" })
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 // src/components/form-fields/select-field.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var SelectField = ({
   ableDeleteOption,
   className,
@@ -1323,44 +1398,47 @@ var SelectField = ({
   labelClassName,
   mainClassName,
   name,
+  onChange,
   options,
   placeholder,
   search,
   visualRequired
 }) => {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     FormField,
     {
       control,
       name,
       render: ({ field, fieldState }) => {
         const hasError = !!fieldState.error;
-        return /* @__PURE__ */ jsxs15(FormItem, { className: cn("flex flex-col", mainClassName), children: [
-          /* @__PURE__ */ jsx19(
-            LabelField,
-            {
-              label,
-              labelClassName: cn(labelClassName, hasError && "text-destructive"),
-              name,
-              visualRequired
-            }
-          ),
-          /* @__PURE__ */ jsx19(FormControl, { children: /* @__PURE__ */ jsx19(
-            SelectInput,
-            {
-              ableDeleteOption,
-              className,
-              disabled,
-              error: fieldState.error,
-              items: options,
-              onChange: field.onChange,
-              placeholder,
-              search,
-              value: typeof field.value === "number" ? `${field.value}` : field.value
-            }
-          ) }),
-          /* @__PURE__ */ jsx19(FormMessage, {})
-        ] });
+        return /* @__PURE__ */ jsx20(
+          FormFieldShell,
+          {
+            hasError,
+            label,
+            labelClassName,
+            mainClassName,
+            name,
+            visualRequired,
+            children: /* @__PURE__ */ jsx20(
+              SelectInput,
+              {
+                ableDeleteOption,
+                className,
+                disabled,
+                error: fieldState.error,
+                items: options,
+                onChange: (...args) => {
+                  field.onChange(...args);
+                  onChange?.(...args);
+                },
+                placeholder,
+                search,
+                value: typeof field.value === "number" ? `${field.value}` : field.value
+              }
+            )
+          }
+        );
       }
     }
   );
@@ -1368,13 +1446,13 @@ var SelectField = ({
 
 // src/components/password-checklist.tsx
 import { CheckCircleIcon as CheckCircleIcon2, XCircleIcon } from "@phosphor-icons/react";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var PasswordChecklist = ({ className, rules, value }) => {
   if (rules.length === 0) return null;
-  return /* @__PURE__ */ jsx20("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
+  return /* @__PURE__ */ jsx21("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__ */ jsxs16(
+    return /* @__PURE__ */ jsxs15(
       "li",
       {
         className: cn(
@@ -1382,8 +1460,8 @@ var PasswordChecklist = ({ className, rules, value }) => {
           isMet ? "text-success" : "text-inactive-text"
         ),
         children: [
-          /* @__PURE__ */ jsx20(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ jsx20("span", { children: rule.label })
+          /* @__PURE__ */ jsx21(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx21("span", { children: rule.label })
         ]
       },
       rule.key
@@ -1392,22 +1470,22 @@ var PasswordChecklist = ({ className, rules, value }) => {
 };
 
 // src/components/step-header.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
-var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs17("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 })
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ jsx22("h1", { className: "text-title text-2xl font-bold", children: title }),
+  subtitle !== void 0 && /* @__PURE__ */ jsx22("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
 ] });
 
 // src/components/stepper.tsx
 import { CheckIcon } from "@phosphor-icons/react";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
-  return /* @__PURE__ */ jsx22("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx23("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__ */ jsxs18("div", { className: "flex flex-1 flex-col items-center", children: [
-      /* @__PURE__ */ jsxs18("div", { className: "flex w-full items-center", children: [
-        /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col items-center", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center", children: [
+        /* @__PURE__ */ jsx23(
           "div",
           {
             className: cn(
@@ -1417,7 +1495,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "div",
           {
             "aria-current": isActive ? "step" : void 0,
@@ -1427,10 +1505,10 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
               isActive && "bg-primary border-primary text-inverse",
               !isCompleted && !isActive && "bg-inactive border-inactive text-surface"
             ),
-            children: isCompleted ? /* @__PURE__ */ jsx22(CheckIcon, { className: "h-4 w-4" }) : index + 1
+            children: isCompleted ? /* @__PURE__ */ jsx23(CheckIcon, { className: "h-4 w-4" }) : index + 1
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "div",
           {
             className: cn(
@@ -1438,7 +1516,7 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
               isCompleted ? "bg-primary" : "bg-inactive",
               index === steps.length - 1 && "rounded-r-full"
             ),
-            children: index === 0 && /* @__PURE__ */ jsx22(
+            children: index === 0 && /* @__PURE__ */ jsx23(
               "div",
               {
                 className: cn(
@@ -1450,18 +1528,18 @@ var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx22("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
+      /* @__PURE__ */ jsx23("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
     ] }, step.label);
   }) });
 };
 
 // src/components/toast/toast.tsx
-import { CheckIcon as CheckIcon2, FileLockIcon, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon3 } from "@phosphor-icons/react";
+import { CheckIcon as CheckIcon2, FileLockIcon, InfoIcon as InfoIcon2, WarningIcon as WarningIcon2, XIcon as XIcon4 } from "@phosphor-icons/react";
 import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var EXIT_ANIMATION_MS = 200;
 var typeIcons = {
-  destructive: XIcon3,
+  destructive: XIcon4,
   info: InfoIcon2,
   success: CheckIcon2,
   wait: FileLockIcon,
@@ -1495,11 +1573,11 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
       if (exitRef.current) clearTimeout(exitRef.current);
     };
   }, [id, duration, onClose]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       "aria-live": "polite",
-      className: [
+      className: cn(
         "relative",
         leaving ? "absolute top-0 right-0 left-0" : "",
         "flex w-108.5 max-w-[calc(100vw-2rem)] items-center justify-between",
@@ -1510,20 +1588,16 @@ function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
         "transition-all duration-200 ease-out",
         styles.border,
         leaving ? "translate-y-2 opacity-0" : "translate-y-0 opacity-100"
-      ].join(" "),
+      ),
       role: "status",
       children: [
-        /* @__PURE__ */ jsx23("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx23("h4", { className: ["text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"].join(" "), children: title }) }),
-        subtitle ? /* @__PURE__ */ jsx23("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx23("div", { className: ["max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"].join(" "), children: subtitle }) }) : null,
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx24("h4", { className: cn("text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"), children: title }) }),
+        subtitle ? /* @__PURE__ */ jsx24("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx24("div", { className: cn("max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"), children: subtitle }) }) : null,
+        /* @__PURE__ */ jsx24(
           "div",
           {
-            className: [
-              "shrink-0",
-              "flex h-8 w-8 min-w-8 items-center justify-center rounded-full border-2",
-              styles.iconBorder
-            ].join(" "),
-            children: /* @__PURE__ */ jsx23(Icon, { className: ["h-5 w-5", styles.icon].join(" ") })
+            className: cn("shrink-0", "flex h-8 w-8 min-w-8 items-center justify-center rounded-full border-2", styles.iconBorder),
+            children: /* @__PURE__ */ jsx24(Icon, { className: cn("h-5 w-5", styles.icon) })
           }
         )
       ]
@@ -1533,7 +1607,7 @@ 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 useRef4, useState as useState6 } from "react";
-import { Fragment as Fragment4, jsx as jsx24 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25 } from "react/jsx-runtime";
 function ToastProvider() {
   const [toasts, setToasts] = useState6([]);
   const itemRefs = useRef4(/* @__PURE__ */ new Map());
@@ -1594,7 +1668,7 @@ function ToastProvider() {
       itemRefs.current.set(id, el);
     };
   }, []);
-  return /* @__PURE__ */ jsx24(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx24("div", { className: `fixed z-4000 ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx24("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx24("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx25("div", { className: `fixed ${zToast} ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx25("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx25("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx25(
     Toast,
     {
       duration: toast2.duration,
@@ -1622,9 +1696,9 @@ function getPositionClass(position) {
 }
 
 // src/components/wrapper.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Wrapper = ({ children, className }) => {
-  return /* @__PURE__ */ jsx25("div", { className: cn("mx-auto h-full w-full", className), children });
+  return /* @__PURE__ */ jsx26("div", { className: cn("mx-auto h-full w-full", className), children });
 };
 export {
   Alert,