@klu_dev/ui-klu-green 1.2.18 → 1.2.19

package/dist/index.js

@@ -2588,197 +2588,9 @@ var Checkbox = ({
   ] });
 };
 
-// src/components/ui/inputPhone/inputPhone.tsx
-import * as React13 from "react";
-import * as Popover from "@radix-ui/react-popover";
-import { Check as Check3 } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
-var DEFAULT_LADAS = [
-  { label: "MX", code: "+52" },
-  { label: "US", code: "+1" },
-  { label: "CA", code: "+1" }
-];
-var containerSizes = {
-  sm: "uiklu-h-[34px] uiklu-w-[150px]",
-  md: "uiklu-h-[34px] uiklu-w-[250px]",
-  lg: "uiklu-h-[44px] uiklu-w-[350px]",
-  full: "uiklu-h-[44px] uiklu-w-full"
-};
-var fontSizes = {
-  sm: "uiklu-text-sm",
-  md: "uiklu-text-md",
-  lg: "uiklu-text-lg",
-  full: "uiklu-text-lg"
-};
-var errorSizes2 = {
-  sm: "uiklu-text-sm",
-  md: "uiklu-text-md",
-  lg: "uiklu-text-lg",
-  full: "uiklu-text-lg"
-};
-var InputPhone = React13.forwardRef(
-  ({
-    className,
-    size = "lg",
-    error,
-    value = "",
-    onChange,
-    ladas,
-    defaultLadaIndex = 0,
-    ...props
-  }, ref) => {
-    const listaLadas = ladas && ladas.length > 0 ? ladas : DEFAULT_LADAS;
-    const [selectedIndex, setSelectedIndex] = React13.useState(defaultLadaIndex);
-    const [open, setOpen] = React13.useState(false);
-    const [searchQuery, setSearchQuery] = React13.useState("");
-    const containerRef = React13.useRef(null);
-    const currentLada = listaLadas[selectedIndex]?.code || "+52";
-    const ladasWithIndex = React13.useMemo(() => {
-      return listaLadas.map((lada, index) => ({ ...lada, originalIndex: index }));
-    }, [listaLadas]);
-    const filteredLadas = React13.useMemo(() => {
-      const query = searchQuery.toLowerCase().trim();
-      if (!query) return ladasWithIndex;
-      return ladasWithIndex.filter(
-        (lada) => lada.code.toLowerCase().includes(query) || lada.label.toLowerCase().includes(query)
-      );
-    }, [searchQuery, ladasWithIndex]);
-    const displayInputValue = React13.useMemo(() => {
-      if (value.startsWith(currentLada)) {
-        return value.slice(currentLada.length);
-      }
-      return value;
-    }, [value, currentLada]);
-    const handleInputChange = (digits, ladaCode) => {
-      const limitedDigits = digits.slice(0, 10);
-      if (onChange) {
-        onChange(limitedDigits ? `${ladaCode}${limitedDigits}` : "");
-      }
-    };
-    React13.useEffect(() => {
-      if (!open) {
-        setSearchQuery("");
-      }
-    }, [open]);
-    return /* @__PURE__ */ jsxs20("div", { className: cn(
-      "uiklu-flex uiklu-flex-col",
-      size === "full" ? "uiklu-w-full" : "uiklu-w-fit"
-    ), children: [
-      /* @__PURE__ */ jsxs20(
-        "div",
-        {
-          ref: containerRef,
-          className: cn(
-            "uiklu-relative uiklu-flex uiklu-items-center uiklu-box-border",
-            "uiklu-bg-background uiklu-rounded-[50px] uiklu-border-[1px] uiklu-border-solid uiklu-transition-all",
-            !error ? [
-              "uiklu-border-inputlight",
-              "focus-within:uiklu-border-primary900",
-              "focus-within:uiklu-shadow-[0_0_0_3px_#AFD8D8]"
-            ] : [
-              "uiklu-border-destructive",
-              "focus-within:uiklu-border-destructive",
-              "focus-within:uiklu-shadow-[0_0_0_3px_rgba(220,38,38,0.20)]"
-            ],
-            containerSizes[size]
-          ),
-          children: [
-            /* @__PURE__ */ jsxs20(Popover.Root, { open, onOpenChange: setOpen, children: [
-              /* @__PURE__ */ jsx23(Popover.Trigger, { className: "uiklu-flex uiklu-items-center uiklu-pl-6 \n            uiklu-pr-3 uiklu-h-full uiklu-bg-transparent uiklu-border-none uiklu-outline-none uiklu-cursor-pointer", children: /* @__PURE__ */ jsx23("span", { className: cn(
-                "uiklu-font-sans uiklu-font-medium uiklu-text-gray800 uiklu-select-none",
-                fontSizes[size],
-                error && "uiklu-text-destructive"
-              ), children: currentLada }) }),
-              /* @__PURE__ */ jsx23(Popover.Portal, { children: /* @__PURE__ */ jsxs20(
-                Popover.Content,
-                {
-                  sideOffset: 4,
-                  align: "start",
-                  style: {
-                    width: containerRef.current ? containerRef.current.offsetWidth : "var(--radix-popover-trigger-width)"
-                  },
-                  className: "uiklu-z-[100] uiklu-overflow-hidden uiklu-rounded-[20px] \n                uiklu-border-[1px] uiklu-border-solid uiklu-border-border uiklu-bg-background \n                uiklu-text-inputtext uiklu-font-sans uiklu-shadow-md uiklu-pt-[10px] uiklu-box-border",
-                  children: [
-                    /* @__PURE__ */ jsx23("div", { className: "uiklu-mx-2", children: /* @__PURE__ */ jsx23(
-                      "input",
-                      {
-                        type: "text",
-                        placeholder: "Buscar...",
-                        value: searchQuery,
-                        onChange: (e) => setSearchQuery(e.target.value),
-                        className: "uiklu-w-full uiklu-box-border uiklu-py-2 uiklu-px-4 \n                  uiklu-mb-2 uiklu-text-sm uiklu-border uiklu-border-solid uiklu-border-gray-200 \n                  uiklu-rounded-[50px] uiklu-outline-none focus:uiklu-border-primary900 \n                  focus:uiklu-shadow-[0_0_0_3px_#AFD8D8] uiklu-font-sans"
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx23("div", { className: "uiklu-max-h-[150px] uiklu-overflow-y-auto uiklu-overflow-x-hidden \n                uiklu-w-full uiklu-box-border uiklu-flex uiklu-flex-col uiklu-gap-[2px]", children: filteredLadas.length > 0 ? filteredLadas.map((lada) => {
-                      const isSelected = lada.originalIndex === selectedIndex;
-                      return /* @__PURE__ */ jsxs20(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            setSelectedIndex(lada.originalIndex);
-                            handleInputChange(displayInputValue, lada.code);
-                            setOpen(false);
-                          },
-                          className: cn(
-                            "uiklu-relative uiklu-flex uiklu-w-full uiklu-box-border uiklu-cursor-pointer",
-                            "uiklu-select-none uiklu-items-center uiklu-py-2.5 uiklu-pl-10 uiklu-pr-4",
-                            "uiklu-text-md uiklu-font-sans uiklu-outline-none uiklu-transition-colors",
-                            "uiklu-border-none",
-                            isSelected ? "uiklu-bg-primary/5 uiklu-text-primary uiklu-font-medium" : "uiklu-bg-transparent uiklu-text-gray800 hover:uiklu-bg-primary/10",
-                            "hover:uiklu-text-primary"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx23("span", { className: "uiklu-absolute uiklu-left-3 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 \n                          uiklu-items-center uiklu-justify-center", children: isSelected && /* @__PURE__ */ jsx23(Check3, { className: "uiklu-h-4 uiklu-w-4 uiklu-text-primary" }) }),
-                            /* @__PURE__ */ jsxs20("span", { className: "uiklu-flex-1 uiklu-truncate uiklu-text-left", children: [
-                              lada.label,
-                              " (",
-                              lada.code,
-                              ")"
-                            ] })
-                          ]
-                        },
-                        `${lada.label}-${lada.code}`
-                      );
-                    }) : /* @__PURE__ */ jsx23("div", { className: "uiklu-text-sm uiklu-text-center uiklu-py-3 uiklu-opacity-50 uiklu-font-sans", children: "Sin coincidencias" }) })
-                  ]
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx23(
-              "input",
-              {
-                ...props,
-                ref,
-                type: "tel",
-                value: displayInputValue,
-                onChange: (e) => {
-                  const cleanValue = e.target.value.replace(/[^\d]/g, "");
-                  handleInputChange(cleanValue, currentLada);
-                },
-                className: cn(
-                  "uiklu-flex-1 uiklu-h-full uiklu-bg-transparent uiklu-border-none uiklu-outline-none uiklu-font-sans",
-                  "uiklu-overflow-hidden uiklu-text-ellipsis uiklu-pl-1 uiklu-pr-6",
-                  "uiklu-text-gray800 placeholder:uiklu-text-gray500 placeholder:uiklu-opacity-100",
-                  "disabled:uiklu-cursor-not-allowed disabled:uiklu-text-gray200 disabled:placeholder:uiklu-text-gray200",
-                  fontSizes[size],
-                  error && "!uiklu-text-destructive placeholder:!uiklu-text-destructive",
-                  className
-                )
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx23("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-ml-5 uiklu-flex uiklu-items-center", errorSizes2[size]), children: error && /* @__PURE__ */ jsx23("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
-    ] });
-  }
-);
-InputPhone.displayName = "InputPhone";
-
 // src/components/ui/iconBadge/iconBadge.tsx
-import * as React14 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import * as React13 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var sizeMap = {
   sm: {
     container: "uiklu-w-[24px] uiklu-h-[24px]",
@@ -2798,15 +2610,15 @@ var IconBadge = ({
   size = "sm"
 }) => {
   const currentSize = sizeMap[size];
-  return /* @__PURE__ */ jsx24("div", { className: `uiklu-flex uiklu-items-center uiklu-justify-center uiklu-rounded-full 
-        uiklu-bg-primary300 uiklu-text-basewhite uiklu-leading-none ${currentSize.container}`, children: React14.cloneElement(icon, {
+  return /* @__PURE__ */ jsx23("div", { className: `uiklu-flex uiklu-items-center uiklu-justify-center uiklu-rounded-full 
+        uiklu-bg-primary300 uiklu-text-basewhite uiklu-leading-none ${currentSize.container}`, children: React13.cloneElement(icon, {
     className: `uiklu-block ${icon.props.className || ""} ${currentSize.icon}`.trim()
   }) });
 };
 
 // src/components/ui/detailCard/detailCard.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var DetailCard = ({
   type,
   title,
@@ -2821,7 +2633,7 @@ var DetailCard = ({
   onSecondaryAction
 }) => {
   const isSuccess = type === "success";
-  const [copied, setCopied] = useState9(false);
+  const [copied, setCopied] = useState8(false);
   const handleCopyLink = () => {
     if (trackingUrl) {
       navigator.clipboard.writeText(trackingUrl);
@@ -2829,26 +2641,26 @@ var DetailCard = ({
       setTimeout(() => setCopied(false), 2e3);
     }
   };
-  return /* @__PURE__ */ jsxs21("div", { className: "uiklu-w-[516px] uiklu-max-w-full uiklu-mx-auto uiklu-bg-basewhite \n    uiklu-border uiklu-border-gray300 uiklu-rounded-[24px] uiklu-p-[16px] uiklu-font-sans uiklu-shadow-sm", children: [
-    /* @__PURE__ */ jsx25("div", { className: "uiklu-flex uiklu-justify-center uiklu-mb-[20px]", children: isSuccess ? /* @__PURE__ */ jsx25("div", { className: "uiklu-w-[80px] uiklu-h-[80px] uiklu-rounded-full uiklu-bg-primary300 \n          uiklu-text-basewhite uiklu-flex uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx25("div", { className: "uiklu-brightness-0 uiklu-invert", children: Icons.CHECK }) }) : /* @__PURE__ */ jsx25("div", { className: "uiklu-w-[80px] uiklu-h-[80px] uiklu-rounded-full uiklu-bg-errorbg \n          uiklu-text-basewhite uiklu-flex uiklu-items-center uiklu-justify-center uiklu-overflow-hidden", children: /* @__PURE__ */ jsx25("div", { className: "uiklu-brightness-0 uiklu-invert uiklu-w-[45.5px] uiklu-h-[45.5px] \n              uiklu-flex uiklu-items-center uiklu-justify-center uiklu-relative", children: /* @__PURE__ */ jsx25("div", { className: "uiklu-absolute uiklu-top-0 uiklu-left-0 uiklu-w-[56px] uiklu-h-[56px]", children: Icons.WARNING }) }) }) }),
-    /* @__PURE__ */ jsxs21("div", { className: "uiklu-text-center uiklu-mb-[20px]", children: [
-      /* @__PURE__ */ jsx25("h2", { className: "uiklu-text-[18px] uiklu-font-bold uiklu-text-primary900 uiklu-mb-[10px]", children: title }),
-      /* @__PURE__ */ jsx25("span", { className: "uiklu-text-[40px] uiklu-font-bold uiklu-text-gray900", children: amount })
+  return /* @__PURE__ */ jsxs20("div", { className: "uiklu-w-[516px] uiklu-max-w-full uiklu-mx-auto uiklu-bg-basewhite \n    uiklu-border uiklu-border-gray300 uiklu-rounded-[24px] uiklu-p-[16px] uiklu-font-sans uiklu-shadow-sm", children: [
+    /* @__PURE__ */ jsx24("div", { className: "uiklu-flex uiklu-justify-center uiklu-mb-[20px]", children: isSuccess ? /* @__PURE__ */ jsx24("div", { className: "uiklu-w-[80px] uiklu-h-[80px] uiklu-rounded-full uiklu-bg-primary300 \n          uiklu-text-basewhite uiklu-flex uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx24("div", { className: "uiklu-brightness-0 uiklu-invert", children: Icons.CHECK }) }) : /* @__PURE__ */ jsx24("div", { className: "uiklu-w-[80px] uiklu-h-[80px] uiklu-rounded-full uiklu-bg-errorbg \n          uiklu-text-basewhite uiklu-flex uiklu-items-center uiklu-justify-center uiklu-overflow-hidden", children: /* @__PURE__ */ jsx24("div", { className: "uiklu-brightness-0 uiklu-invert uiklu-w-[45.5px] uiklu-h-[45.5px] \n              uiklu-flex uiklu-items-center uiklu-justify-center uiklu-relative", children: /* @__PURE__ */ jsx24("div", { className: "uiklu-absolute uiklu-top-0 uiklu-left-0 uiklu-w-[56px] uiklu-h-[56px]", children: Icons.WARNING }) }) }) }),
+    /* @__PURE__ */ jsxs20("div", { className: "uiklu-text-center uiklu-mb-[20px]", children: [
+      /* @__PURE__ */ jsx24("h2", { className: "uiklu-text-[18px] uiklu-font-bold uiklu-text-primary900 uiklu-mb-[10px]", children: title }),
+      /* @__PURE__ */ jsx24("span", { className: "uiklu-text-[40px] uiklu-font-bold uiklu-text-gray900", children: amount })
     ] }),
-    !isSuccess && message && /* @__PURE__ */ jsx25("p", { className: "uiklu-self-stretch uiklu-text-[14px] uiklu-font-medium \n        uiklu-text-gray700 uiklu-text-center uiklu-mb-[20px] uiklu-leading-normal", children: message }),
-    /* @__PURE__ */ jsx25("hr", { className: "uiklu-border-t uiklu-border-gray300 uiklu-w-full uiklu-my-[20px]" }),
-    /* @__PURE__ */ jsxs21("div", { className: "uiklu-mb-[20px]", children: [
-      /* @__PURE__ */ jsx25("h3", { className: "uiklu-text-[14px] uiklu-font-semibold uiklu-text-primary800 uiklu-mb-[10px]", children: summaryTitle }),
-      /* @__PURE__ */ jsx25("div", { className: "uiklu-bg-primarylight uiklu-border uiklu-border-primary50 \n        uiklu-rounded-xl uiklu-p-[10px] uiklu-space-y-3", children: summaryItems.map((item, index) => /* @__PURE__ */ jsxs21("div", { className: "uiklu-flex uiklu-justify-between", children: [
-        /* @__PURE__ */ jsx25("span", { className: "uiklu-text-gray600 uiklu-text-[14px] uiklu-font-regular", children: item.label }),
-        /* @__PURE__ */ jsx25("span", { className: "uiklu-text-gray800 uiklu-text-[14px] uiklu-font-semibold", children: item.value })
+    !isSuccess && message && /* @__PURE__ */ jsx24("p", { className: "uiklu-self-stretch uiklu-text-[14px] uiklu-font-medium \n        uiklu-text-gray700 uiklu-text-center uiklu-mb-[20px] uiklu-leading-normal", children: message }),
+    /* @__PURE__ */ jsx24("hr", { className: "uiklu-border-t uiklu-border-gray300 uiklu-w-full uiklu-my-[20px]" }),
+    /* @__PURE__ */ jsxs20("div", { className: "uiklu-mb-[20px]", children: [
+      /* @__PURE__ */ jsx24("h3", { className: "uiklu-text-[14px] uiklu-font-semibold uiklu-text-primary800 uiklu-mb-[10px]", children: summaryTitle }),
+      /* @__PURE__ */ jsx24("div", { className: "uiklu-bg-primarylight uiklu-border uiklu-border-primary50 \n        uiklu-rounded-xl uiklu-p-[10px] uiklu-space-y-3", children: summaryItems.map((item, index) => /* @__PURE__ */ jsxs20("div", { className: "uiklu-flex uiklu-justify-between", children: [
+        /* @__PURE__ */ jsx24("span", { className: "uiklu-text-gray600 uiklu-text-[14px] uiklu-font-regular", children: item.label }),
+        /* @__PURE__ */ jsx24("span", { className: "uiklu-text-gray800 uiklu-text-[14px] uiklu-font-semibold", children: item.value })
       ] }, index)) })
     ] }),
-    isSuccess && trackingUrl && /* @__PURE__ */ jsxs21("div", { className: "uiklu-mb-[20px]", children: [
-      /* @__PURE__ */ jsx25("h4", { className: "uiklu-text-[14px] uiklu-font-semibold uiklu-text-primary800 \n          uiklu-mb-[10px] uiklu-mb-1", children: "Comprobante de la transacci\xF3n" }),
-      /* @__PURE__ */ jsx25("span", { className: "uiklu-text-[14px] uiklu-text-gray600 uiklu-block uiklu-mb-[10px]", children: "Liga de seguimiento" }),
-      /* @__PURE__ */ jsxs21("div", { className: "uiklu-flex uiklu-w-full uiklu-items-center uiklu-gap-[10px]", children: [
-        /* @__PURE__ */ jsx25("div", { className: "uiklu-flex uiklu-h-[28px] uiklu-flex-1 uiklu-items-center \n             uiklu-gap-[8px] uiklu-rounded-lg uiklu-border uiklu-border-inputlight uiklu-bg-basewhite \n             uiklu-px-[10px] uiklu-py-[4px]", children: /* @__PURE__ */ jsx25(
+    isSuccess && trackingUrl && /* @__PURE__ */ jsxs20("div", { className: "uiklu-mb-[20px]", children: [
+      /* @__PURE__ */ jsx24("h4", { className: "uiklu-text-[14px] uiklu-font-semibold uiklu-text-primary800 \n          uiklu-mb-[10px] uiklu-mb-1", children: "Comprobante de la transacci\xF3n" }),
+      /* @__PURE__ */ jsx24("span", { className: "uiklu-text-[14px] uiklu-text-gray600 uiklu-block uiklu-mb-[10px]", children: "Liga de seguimiento" }),
+      /* @__PURE__ */ jsxs20("div", { className: "uiklu-flex uiklu-w-full uiklu-items-center uiklu-gap-[10px]", children: [
+        /* @__PURE__ */ jsx24("div", { className: "uiklu-flex uiklu-h-[28px] uiklu-flex-1 uiklu-items-center \n             uiklu-gap-[8px] uiklu-rounded-lg uiklu-border uiklu-border-inputlight uiklu-bg-basewhite \n             uiklu-px-[10px] uiklu-py-[4px]", children: /* @__PURE__ */ jsx24(
           "input",
           {
             type: "text",
@@ -2857,22 +2669,22 @@ var DetailCard = ({
             className: "uiklu-w-full uiklu-bg-transparent uiklu-text-[14px] uiklu-text-primary800 \n                 uiklu-truncate focus:uiklu-outline-none"
           }
         ) }),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs20(
           "button",
           {
             type: "button",
             onClick: handleCopyLink,
             className: "uiklu-flex uiklu-w-[140px] uiklu-items-center uiklu-gap-[10px] uiklu-px-4 uiklu-py-2.5\n               uiklu-border uiklu-border-primary500 uiklu-text-primary500 uiklu-bg-basewhite\n               uiklu-rounded-full  uiklu-text-[14px] uiklu-font-medium hover:uiklu-bg-basewhite\n                uiklu-transition-colors",
             children: [
-              /* @__PURE__ */ jsx25("span", { children: copied ? "Copiado" : "Copiar liga" }),
+              /* @__PURE__ */ jsx24("span", { children: copied ? "Copiado" : "Copiar liga" }),
               Icons.COPY
             ]
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "uiklu-flex uiklu-w-full uiklu-gap-[20px] contenedor-botones-flow", children: [
-      /* @__PURE__ */ jsx25("style", { children: `
+    /* @__PURE__ */ jsxs20("div", { className: "uiklu-flex uiklu-w-full uiklu-gap-[20px] contenedor-botones-flow", children: [
+      /* @__PURE__ */ jsx24("style", { children: `
           @media (max-width: 550px) {
             .contenedor-botones-flow {
               flex-direction: column-reverse !important;
@@ -2885,7 +2697,7 @@ var DetailCard = ({
             }
           }
         ` }),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24(
         Button,
         {
           variant: "outlinePrimary",
@@ -2895,7 +2707,7 @@ var DetailCard = ({
           children: secondaryButtonText
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24(
         Button,
         {
           variant: "primary",
@@ -2912,15 +2724,15 @@ var DetailCard = ({
 };
 
 // src/components/ui/textField/textField.tsx
-import * as React16 from "react";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import * as React15 from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var inputSizes2 = {
   sm: "uiklu-w-[150px] uiklu-text-[10px]",
   md: "uiklu-w-[250px] uiklu-text-[12px]",
   lg: "uiklu-w-[350px] uiklu-text-[14px]",
   full: "uiklu-w-full uiklu-text-[14px]"
 };
-var containerSizes2 = {
+var containerSizes = {
   sm: "uiklu-w-[150px]",
   md: "uiklu-w-[250px]",
   lg: "uiklu-w-[350px]",
@@ -2932,7 +2744,7 @@ var labelStyles = {
   lg: "uiklu-text-[14px] uiklu-mb-[10px]",
   full: "uiklu-text-[14px] uiklu-mb-[10px]"
 };
-var errorSizes3 = {
+var errorSizes2 = {
   sm: "uiklu-text-sm",
   md: "uiklu-text-md",
   lg: "uiklu-text-lg",
@@ -2944,17 +2756,17 @@ var iconSizes2 = {
   lg: { w: "24", h: "24" },
   full: { w: "24", h: "24" }
 };
-var TextField = React16.forwardRef(
+var TextField = React15.forwardRef(
   ({ className, type = "text", size = "full", label, error, isSearchable, onSearchClick, required, labelClassName, ...props }, ref) => {
-    const [showPassword, setShowPassword] = React16.useState(false);
+    const [showPassword, setShowPassword] = React15.useState(false);
     const isMaskable = type === "password" || props.autoComplete === "email" || props.autoComplete === "username";
     const showSearchIcon = isSearchable && !isMaskable;
     const inputType = type === "password" ? showPassword ? "text" : "password" : type;
-    return /* @__PURE__ */ jsxs22("div", { className: cn(
+    return /* @__PURE__ */ jsxs21("div", { className: cn(
       "uiklu-flex uiklu-flex-col uiklu-font-sans",
-      containerSizes2[size]
+      containerSizes[size]
     ), children: [
-      /* @__PURE__ */ jsxs22(
+      /* @__PURE__ */ jsxs21(
         "label",
         {
           className: cn(
@@ -2966,13 +2778,13 @@ var TextField = React16.forwardRef(
           ),
           children: [
             label,
-            required && /* @__PURE__ */ jsx26("span", { className: "uiklu-ml-0.5", children: "*" })
+            required && /* @__PURE__ */ jsx25("span", { className: "uiklu-ml-0.5", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs22("div", { className: cn("uiklu-relative", containerSizes2[size]), children: [
+      /* @__PURE__ */ jsxs21("div", { className: cn("uiklu-relative", containerSizes[size]), children: [
         " ",
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx25(
           "input",
           {
             ...props,
@@ -3003,14 +2815,14 @@ var TextField = React16.forwardRef(
             )
           }
         ),
-        isMaskable && /* @__PURE__ */ jsx26(
+        isMaskable && /* @__PURE__ */ jsx25(
           "button",
           {
             type: "button",
             disabled: props.disabled,
             onClick: () => setShowPassword(!showPassword),
             className: "uiklu-absolute uiklu-right-3 uiklu-top-0 uiklu-h-full uiklu-flex\n              uiklu-items-center uiklu-justify-center uiklu-bg-transparent uiklu-border-none \n              uiklu-p-0 uiklu-cursor-pointer uiklu-z-10",
-            children: /* @__PURE__ */ jsx26(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 style: {
@@ -3023,13 +2835,13 @@ var TextField = React16.forwardRef(
             )
           }
         ),
-        showSearchIcon && /* @__PURE__ */ jsx26(
+        showSearchIcon && /* @__PURE__ */ jsx25(
           "button",
           {
             type: "button",
             onClick: onSearchClick,
             className: "uiklu-absolute uiklu-right-3 uiklu-top-0 uiklu-h-full \n              uiklu-flex uiklu-items-center uiklu-justify-center uiklu-bg-transparent \n              uiklu-border-none uiklu-p-0 uiklu-cursor-pointer uiklu-z-10",
-            children: /* @__PURE__ */ jsx26(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 style: {
@@ -3043,24 +2855,24 @@ var TextField = React16.forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx26("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes3[size]), children: error && /* @__PURE__ */ jsx26("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
+      /* @__PURE__ */ jsx25("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes2[size]), children: error && /* @__PURE__ */ jsx25("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
     ] });
   }
 );
 TextField.displayName = "TextField";
 
 // src/components/ui/selectField/selectField.tsx
-import * as React17 from "react";
+import * as React16 from "react";
 import * as SelectPrimitive2 from "@radix-ui/react-select";
-import { Check as Check4 } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Check as Check3 } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var inputSizes3 = {
   sm: "uiklu-w-[150px] uiklu-text-[10px]",
   md: "uiklu-w-[250px] uiklu-text-[12px]",
   lg: "uiklu-w-[350px] uiklu-text-[14px]",
   full: "uiklu-w-full uiklu-text-[14px]"
 };
-var containerSizes3 = {
+var containerSizes2 = {
   sm: "uiklu-w-[150px]",
   md: "uiklu-w-[250px]",
   lg: "uiklu-w-[350px]",
@@ -3072,7 +2884,7 @@ var labelStyles2 = {
   lg: "uiklu-text-[14px] uiklu-mb-[10px]",
   full: "uiklu-text-[14px] uiklu-mb-[10px]"
 };
-var errorSizes4 = {
+var errorSizes3 = {
   sm: "uiklu-text-sm",
   md: "uiklu-text-md",
   lg: "uiklu-text-lg",
@@ -3081,12 +2893,12 @@ var errorSizes4 = {
 var Select2 = SelectPrimitive2.Root;
 var SelectValue = SelectPrimitive2.Value;
 var SelectGroup = SelectPrimitive2.Group;
-var SelectField = React17.forwardRef(({ className, size = "full", label, error, required, disabled, placeholder, children, labelClassName, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs23("div", { className: cn(
+var SelectField = React16.forwardRef(({ className, size = "full", label, error, required, disabled, placeholder, children, labelClassName, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs22("div", { className: cn(
     "uiklu-flex uiklu-flex-col uiklu-font-sans",
-    containerSizes3[size]
+    containerSizes2[size]
   ), children: [
-    /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsxs22(
       "label",
       {
         className: cn(
@@ -3098,12 +2910,12 @@ var SelectField = React17.forwardRef(({ className, size = "full", label, error,
         ),
         children: [
           label,
-          required && /* @__PURE__ */ jsx27("span", { className: "uiklu-ml-0.5", children: "*" })
+          required && /* @__PURE__ */ jsx26("span", { className: "uiklu-ml-0.5", children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx27("div", { className: cn("uiklu-relative", containerSizes3[size]), children: /* @__PURE__ */ jsxs23(Select2, { disabled, ...props, children: [
-      /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsx26("div", { className: cn("uiklu-relative", containerSizes2[size]), children: /* @__PURE__ */ jsxs22(Select2, { disabled, ...props, children: [
+      /* @__PURE__ */ jsxs22(
         SelectPrimitive2.Trigger,
         {
           ref,
@@ -3128,8 +2940,8 @@ var SelectField = React17.forwardRef(({ className, size = "full", label, error,
             className
           ),
           children: [
-            /* @__PURE__ */ jsx27("span", { className: "uiklu-truncate", children: /* @__PURE__ */ jsx27(SelectValue, { placeholder }) }),
-            /* @__PURE__ */ jsx27(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ jsx27("div", { className: cn(
+            /* @__PURE__ */ jsx26("span", { className: "uiklu-truncate", children: /* @__PURE__ */ jsx26(SelectValue, { placeholder }) }),
+            /* @__PURE__ */ jsx26(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ jsx26("div", { className: cn(
               "uiklu-flex uiklu-items-center uiklu-justify-center uiklu-h-4",
               "uiklu-w-4 uiklu-shrink-0 ",
               error ? "uiklu-text-destructive" : "uiklu-text-primary500"
@@ -3139,11 +2951,11 @@ var SelectField = React17.forwardRef(({ className, size = "full", label, error,
       ),
       children
     ] }) }),
-    /* @__PURE__ */ jsx27("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes4[size]), children: error && /* @__PURE__ */ jsx27("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
+    /* @__PURE__ */ jsx26("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes3[size]), children: error && /* @__PURE__ */ jsx26("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
   ] });
 });
 SelectField.displayName = "SelectField";
-var SelectContent2 = React17.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx27(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx27(
+var SelectContent2 = React16.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx26(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx26(
   SelectPrimitive2.Content,
   {
     ref,
@@ -3154,11 +2966,11 @@ var SelectContent2 = React17.forwardRef(({ className, children, position = "popp
     ),
     position,
     ...props,
-    children: /* @__PURE__ */ jsx27(SelectPrimitive2.Viewport, { className: "uiklu-p-1", children })
+    children: /* @__PURE__ */ jsx26(SelectPrimitive2.Viewport, { className: "uiklu-p-1", children })
   }
 ) }));
 SelectContent2.displayName = SelectPrimitive2.Content.displayName;
-var SelectItem2 = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+var SelectItem2 = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs22(
   SelectPrimitive2.Item,
   {
     ref,
@@ -3169,25 +2981,25 @@ var SelectItem2 = React17.forwardRef(({ className, children, ...props }, ref) =>
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx27("span", { className: "uiklu-absolute uiklu-left-2 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx27(SelectPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx27(Check4, { className: "uiklu-h-4 uiklu-w-4 uiklu-text-primary900" }) }) }),
-      /* @__PURE__ */ jsx27(SelectPrimitive2.ItemText, { children })
+      /* @__PURE__ */ jsx26("span", { className: "uiklu-absolute uiklu-left-2 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx26(SelectPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx26(Check3, { className: "uiklu-h-4 uiklu-w-4 uiklu-text-primary900" }) }) }),
+      /* @__PURE__ */ jsx26(SelectPrimitive2.ItemText, { children })
     ]
   }
 ));
 SelectItem2.displayName = SelectPrimitive2.Item.displayName;
 
 // src/components/ui/searchSelectField/searchSelectField.tsx
-import * as React18 from "react";
+import * as React17 from "react";
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
-import { Check as Check5, X as X3 } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Check as Check4, X as X3 } from "lucide-react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var inputSizes4 = {
   sm: "uiklu-w-[150px] uiklu-text-[10px]",
   md: "uiklu-w-[250px] uiklu-text-[12px]",
   lg: "uiklu-w-[350px] uiklu-text-[14px]",
   full: "uiklu-w-full uiklu-text-[14px]"
 };
-var containerSizes4 = {
+var containerSizes3 = {
   sm: "uiklu-w-[150px]",
   md: "uiklu-w-[250px]",
   lg: "uiklu-w-[350px]",
@@ -3199,7 +3011,7 @@ var labelStyles3 = {
   lg: "uiklu-text-[14px] uiklu-mb-[10px]",
   full: "uiklu-text-[14px] uiklu-mb-[10px]"
 };
-var errorSizes5 = {
+var errorSizes4 = {
   sm: "uiklu-text-sm",
   md: "uiklu-text-md",
   lg: "uiklu-text-lg",
@@ -3218,12 +3030,12 @@ var SearchSelectField = ({
   className,
   labelClassName
 }) => {
-  const [open, setOpen] = React18.useState(false);
-  const [search, setSearch] = React18.useState("");
-  const containerRef = React18.useRef(null);
-  const inputRef = React18.useRef(null);
+  const [open, setOpen] = React17.useState(false);
+  const [search, setSearch] = React17.useState("");
+  const containerRef = React17.useRef(null);
+  const inputRef = React17.useRef(null);
   const selectedOption = options.find((opt) => opt.value === value);
-  React18.useEffect(() => {
+  React17.useEffect(() => {
     if (selectedOption) {
       setSearch(selectedOption.label);
     } else {
@@ -3240,11 +3052,11 @@ var SearchSelectField = ({
     setOpen(true);
     inputRef.current?.focus();
   };
-  return /* @__PURE__ */ jsxs24("div", { className: cn(
+  return /* @__PURE__ */ jsxs23("div", { className: cn(
     "uiklu-flex uiklu-flex-col uiklu-font-sans",
-    containerSizes4[size]
+    containerSizes3[size]
   ), children: [
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs23(
       "label",
       {
         className: cn(
@@ -3256,12 +3068,12 @@ var SearchSelectField = ({
         ),
         children: [
           label,
-          required && /* @__PURE__ */ jsx28("span", { className: "uiklu-ml-0.5", children: "*" })
+          required && /* @__PURE__ */ jsx27("span", { className: "uiklu-ml-0.5", children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs24(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx28(PopoverPrimitive2.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs23(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx27(PopoverPrimitive2.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs23(
         "div",
         {
           ref: containerRef,
@@ -3288,7 +3100,7 @@ var SearchSelectField = ({
             setOpen(true);
           },
           children: [
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx27(
               "input",
               {
                 ref: inputRef,
@@ -3313,17 +3125,17 @@ var SearchSelectField = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs24("div", { className: "uiklu-flex uiklu-items-center uiklu-ml-2 uiklu-shrink-0", children: [
-              search && /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsxs23("div", { className: "uiklu-flex uiklu-items-center uiklu-ml-2 uiklu-shrink-0", children: [
+              search && /* @__PURE__ */ jsx27(
                 "button",
                 {
                   type: "button",
                   onClick: handleClear,
                   className: "uiklu-mr-1 uiklu-opacity-50 hover:uiklu-opacity-100 uiklu-transition-opacity\n                    uiklu-bg-transparent uiklu-border-none uiklu-outline-none uiklu-p-0 \n                    uiklu-cursor-pointer uiklu-flex uiklu-items-center uiklu-justify-center",
-                  children: /* @__PURE__ */ jsx28(X3, { className: "uiklu-h-4 uiklu-w-4" })
+                  children: /* @__PURE__ */ jsx27(X3, { className: "uiklu-h-4 uiklu-w-4" })
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx27(
                 "div",
                 {
                   className: cn(
@@ -3341,7 +3153,7 @@ var SearchSelectField = ({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx28(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx27(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx27(
         PopoverPrimitive2.Content,
         {
           className: cn(
@@ -3353,9 +3165,9 @@ var SearchSelectField = ({
           align: "start",
           sideOffset: 4,
           onOpenAutoFocus: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ jsx28("div", { className: "uiklu-py-1 uiklu-px-0 uiklu-max-h-96 uiklu-overflow-y-auto uiklu-overflow-x-hidden uiklu-w-full uiklu-box-border", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "uiklu-py-3 uiklu-px-4 uiklu-text-sm uiklu-text-center uiklu-opacity-50 uiklu-font-sans", children: "No se encontraron resultados" }) : filteredOptions.map((option) => {
+          children: /* @__PURE__ */ jsx27("div", { className: "uiklu-py-1 uiklu-px-0 uiklu-max-h-96 uiklu-overflow-y-auto uiklu-overflow-x-hidden uiklu-w-full uiklu-box-border", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx27("div", { className: "uiklu-py-3 uiklu-px-4 uiklu-text-sm uiklu-text-center uiklu-opacity-50 uiklu-font-sans", children: "No se encontraron resultados" }) : filteredOptions.map((option) => {
             const isSelected = value === option.value;
-            return /* @__PURE__ */ jsxs24(
+            return /* @__PURE__ */ jsxs23(
               "div",
               {
                 onClick: () => {
@@ -3368,12 +3180,12 @@ var SearchSelectField = ({
                   isSelected && "uiklu-bg-primary/5 uiklu-text-primary900 uiklu-font-medium"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx28("span", { className: "uiklu-absolute uiklu-left-2 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx28(Check5, { className: cn(
+                  /* @__PURE__ */ jsx27("span", { className: "uiklu-absolute uiklu-left-2 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 uiklu-items-center uiklu-justify-center", children: /* @__PURE__ */ jsx27(Check4, { className: cn(
                     "uiklu-h-4 uiklu-w-4 uiklu-transition-opacity",
                     isSelected ? "uiklu-opacity-100 uiklu-text-primary900" : "uiklu-opacity-0"
                   ) }) }),
-                  /* @__PURE__ */ jsx28("span", { className: "uiklu-flex-1 uiklu-truncate uiklu-min-w-0 uiklu-inline-flex uiklu-items-center uiklu-h-full uiklu-leading-normal", children: option.label }),
-                  option.extra && /* @__PURE__ */ jsx28("span", { className: "uiklu-ml-2 uiklu-shrink-0 uiklu-flex uiklu-items-center", children: option.extra })
+                  /* @__PURE__ */ jsx27("span", { className: "uiklu-flex-1 uiklu-truncate uiklu-min-w-0 uiklu-inline-flex uiklu-items-center uiklu-h-full uiklu-leading-normal", children: option.label }),
+                  option.extra && /* @__PURE__ */ jsx27("span", { className: "uiklu-ml-2 uiklu-shrink-0 uiklu-flex uiklu-items-center", children: option.extra })
                 ]
               },
               option.value
@@ -3382,9 +3194,245 @@ var SearchSelectField = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx28("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes5[size]), children: error && /* @__PURE__ */ jsx28("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
+    /* @__PURE__ */ jsx27("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes4[size]), children: error && /* @__PURE__ */ jsx27("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
   ] });
 };
+
+// src/components/ui/inputPhoneField/inputPhoneField.tsx
+import * as React18 from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { Check as Check5 } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+var DEFAULT_LADAS = [
+  { label: "MX", code: "+52" },
+  { label: "US", code: "+1" },
+  { label: "CA", code: "+1" }
+];
+var fontSizes = {
+  sm: "uiklu-text-[10px]",
+  md: "uiklu-text-[12px]",
+  lg: "uiklu-text-[14px]",
+  full: "uiklu-text-[14px]"
+};
+var containerSizes4 = {
+  sm: "uiklu-w-[150px]",
+  md: "uiklu-w-[250px]",
+  lg: "uiklu-w-[350px]",
+  full: "uiklu-w-full"
+};
+var labelStyles4 = {
+  sm: "uiklu-text-[12px] uiklu-mb-[5px]",
+  md: "uiklu-text-[13px] uiklu-mb-[7px]",
+  lg: "uiklu-text-[14px] uiklu-mb-[10px]",
+  full: "uiklu-text-[14px] uiklu-mb-[10px]"
+};
+var errorSizes5 = {
+  sm: "uiklu-text-sm",
+  md: "uiklu-text-md",
+  lg: "uiklu-text-lg",
+  full: "uiklu-text-lg"
+};
+var PhoneField = React18.forwardRef(
+  ({
+    className,
+    size = "full",
+    label,
+    error,
+    value = "",
+    onChange,
+    ladas,
+    defaultLadaIndex = 0,
+    required,
+    labelClassName,
+    placeholder,
+    ...props
+  }, ref) => {
+    const listaLadas = ladas && ladas.length > 0 ? ladas : DEFAULT_LADAS;
+    const [selectedIndex, setSelectedIndex] = React18.useState(defaultLadaIndex);
+    const [open, setOpen] = React18.useState(false);
+    const [searchQuery, setSearchQuery] = React18.useState("");
+    const containerRef = React18.useRef(null);
+    const currentLada = listaLadas[selectedIndex]?.code || "+52";
+    const ladasWithIndex = React18.useMemo(() => {
+      return listaLadas.map((lada, index) => ({ ...lada, originalIndex: index }));
+    }, [listaLadas]);
+    const filteredLadas = React18.useMemo(() => {
+      const query = searchQuery.toLowerCase().trim();
+      if (!query) return ladasWithIndex;
+      return ladasWithIndex.filter(
+        (lada) => lada.code.toLowerCase().includes(query) || lada.label.toLowerCase().includes(query)
+      );
+    }, [searchQuery, ladasWithIndex]);
+    const displayInputValue = React18.useMemo(() => {
+      if (value.startsWith(currentLada)) {
+        return value.slice(currentLada.length);
+      }
+      return value;
+    }, [value, currentLada]);
+    const handleInputChange = (digits, ladaCode) => {
+      const limitedDigits = digits.slice(0, 10);
+      if (onChange) {
+        onChange(limitedDigits ? `${ladaCode}${limitedDigits}` : "");
+      }
+    };
+    React18.useEffect(() => {
+      if (!open) {
+        setSearchQuery("");
+      }
+    }, [open]);
+    return /* @__PURE__ */ jsxs24("div", { className: cn(
+      "uiklu-flex uiklu-flex-col uiklu-font-sans",
+      containerSizes4[size]
+    ), children: [
+      /* @__PURE__ */ jsxs24(
+        "label",
+        {
+          className: cn(
+            "uiklu-label uiklu-font-sans uiklu-transition-colors uiklu-text-left",
+            "uiklu-font-normal",
+            labelStyles4[size],
+            !error ? "uiklu-text-gray600" : "uiklu-text-destructive",
+            labelClassName
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx28("span", { className: "uiklu-ml-0.5", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs24(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "uiklu-font-sans uiklu-flex uiklu-box-border uiklu-h-[36px] uiklu-w-full uiklu-items-center uiklu-relative",
+            "uiklu-bg-basewhite uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-solid uiklu-transition-all",
+            props.disabled && "uiklu-opacity-50 uiklu-pointer-events-none",
+            !error ? [
+              "uiklu-border-gray100",
+              "focus-within:uiklu-border-primary900 focus-within:uiklu-bg-white",
+              "focus-within:uiklu-shadow-[0_0_0_3px_#AFD8D8]"
+            ] : [
+              "uiklu-border-destructive uiklu-bg-white",
+              "focus-within:uiklu-border-destructive",
+              "focus-within:uiklu-shadow-[0_0_0_3px_rgba(220,38,38,0.20)]"
+            ],
+            containerSizes4[size],
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs24(Popover.Root, { open, onOpenChange: setOpen, children: [
+              /* @__PURE__ */ jsxs24(
+                Popover.Trigger,
+                {
+                  disabled: props.disabled,
+                  className: "uiklu-flex uiklu-items-center uiklu-gap-1.5 uiklu-px-[8px] uiklu-h-full \n              uiklu-bg-transparent uiklu-border-none uiklu-outline-none uiklu-cursor-pointer uiklu-shrink-0",
+                  children: [
+                    /* @__PURE__ */ jsx28("span", { className: cn(
+                      "uiklu-font-sans uiklu-font-semibold uiklu-text-gray800 uiklu-select-none uiklu-inline-flex",
+                      "uiklu-items-center uiklu-h-full uiklu-leading-normal",
+                      fontSizes[size],
+                      error && "!uiklu-text-destructive"
+                    ), children: currentLada }),
+                    /* @__PURE__ */ jsx28("div", { className: cn(
+                      "uiklu-flex uiklu-items-center uiklu-justify-center uiklu-h-4 uiklu-w-4",
+                      "uiklu-shrink-0",
+                      error ? "uiklu-text-destructive" : "uiklu-text-primary500"
+                    ), children: Icons.CHEVRON_DOWN })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx28(Popover.Portal, { children: /* @__PURE__ */ jsxs24(
+                Popover.Content,
+                {
+                  sideOffset: 4,
+                  align: "start",
+                  style: {
+                    width: containerRef.current ? containerRef.current.offsetWidth : "var(--radix-popover-trigger-width)"
+                  },
+                  className: "uiklu-z-[100] uiklu-overflow-hidden uiklu-rounded-[8px] \n                uiklu-border-[1px] uiklu-border-solid uiklu-border-gray100 uiklu-bg-white \n                uiklu-text-gray800 uiklu-font-sans uiklu-shadow-md uiklu-pt-[10px] uiklu-box-border",
+                  children: [
+                    /* @__PURE__ */ jsx28("div", { className: "uiklu-mx-2", children: /* @__PURE__ */ jsx28(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "Buscar...",
+                        value: searchQuery,
+                        onChange: (e) => setSearchQuery(e.target.value),
+                        className: "uiklu-w-full uiklu-box-border uiklu-py-1.5 uiklu-px-3 \n                    uiklu-mb-2 uiklu-text-sm uiklu-border uiklu-border-solid uiklu-border-gray100 \n                    uiklu-rounded-[4px] uiklu-outline-none focus:uiklu-border-primary900 \n                    uiklu-font-sans uiklu-bg-gray50 placeholder:uiklu-text-gray500"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx28("div", { className: "uiklu-max-h-[150px] uiklu-overflow-y-auto uiklu-overflow-x-hidden \n                uiklu-w-full uiklu-box-border uiklu-flex uiklu-flex-col uiklu-p-1", children: filteredLadas.length > 0 ? filteredLadas.map((lada) => {
+                      const isSelected = lada.originalIndex === selectedIndex;
+                      return /* @__PURE__ */ jsxs24(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setSelectedIndex(lada.originalIndex);
+                            handleInputChange(displayInputValue, lada.code);
+                            setOpen(false);
+                          },
+                          className: cn(
+                            "uiklu-relative uiklu-flex uiklu-w-full uiklu-box-border uiklu-cursor-pointer",
+                            "uiklu-select-none uiklu-items-center uiklu-py-2 uiklu-pl-8 uiklu-pr-4",
+                            "uiklu-text-sm uiklu-font-sans uiklu-outline-none uiklu-transition-colors",
+                            "uiklu-border-none uiklu-rounded-[4px]",
+                            isSelected ? "uiklu-bg-primary/5 uiklu-text-primary uiklu-font-medium" : "uiklu-bg-transparent uiklu-text-gray800 hover:uiklu-bg-primary/10",
+                            "hover:uiklu-text-primary focus:uiklu-bg-primary/10 focus:uiklu-text-primary"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx28("span", { className: "uiklu-absolute uiklu-left-2 uiklu-flex uiklu-h-3.5 uiklu-w-3.5 \n                          uiklu-items-center uiklu-justify-center uiklu-font-sans ", children: isSelected && /* @__PURE__ */ jsx28(Check5, { className: "uiklu-h-4 uiklu-w-4 uiklu-text-primary800" }) }),
+                            /* @__PURE__ */ jsxs24("span", { className: "uiklu-flex-1 uiklu-truncate uiklu-text-left\n                           uiklu-inline-flex uiklu-items-center uiklu-h-full uiklu-leading-normal", children: [
+                              lada.label,
+                              " (",
+                              lada.code,
+                              ")"
+                            ] })
+                          ]
+                        },
+                        `${lada.label}-${lada.code}`
+                      );
+                    }) : /* @__PURE__ */ jsx28("div", { className: "uiklu-text-sm uiklu-text-center uiklu-py-3 uiklu-opacity-50 uiklu-font-sans", children: "Sin coincidencias" }) })
+                  ]
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx28("div", { className: cn(
+              "uiklu-h-[20px] uiklu-w-px uiklu-border-r uiklu-border-solid",
+              !error ? "uiklu-border-gray100" : "uiklu-border-destructive/40"
+            ) }),
+            /* @__PURE__ */ jsx28(
+              "input",
+              {
+                ...props,
+                ref,
+                type: "tel",
+                value: displayInputValue,
+                placeholder,
+                onChange: (e) => {
+                  const cleanValue = e.target.value.replace(/[^\d]/g, "");
+                  handleInputChange(cleanValue, currentLada);
+                },
+                className: cn(
+                  "uiklu-flex-1 uiklu-h-full uiklu-bg-transparent uiklu-border-none",
+                  "uiklu-outline-none uiklu-font-sans uiklu-font-semibold",
+                  "uiklu-overflow-hidden uiklu-text-ellipsis uiklu-pl-[6px] uiklu-pr-[10px] uiklu-leading-normal",
+                  "uiklu-text-gray800 placeholder:uiklu-text-gray800",
+                  "disabled:uiklu-cursor-not-allowed",
+                  fontSizes[size],
+                  error && "!uiklu-text-destructive placeholder:!uiklu-text-destructive/60"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx28("div", { className: cn("uiklu-min-h-[20px] uiklu-mb-[10px] uiklu-flex uiklu-items-center", errorSizes5[size]), children: error && /* @__PURE__ */ jsx28("p", { className: "uiklu-error-message uiklu-leading-tight uiklu-text-destructive uiklu-font-sans uiklu-m-0", children: error }) })
+    ] });
+  }
+);
+PhoneField.displayName = "PhoneField";
 export {
   BackButton,
   BalanceInfo,
@@ -3396,10 +3444,10 @@ export {
   Icons,
   Input,
   InputCode,
-  InputPhone,
   LoadingScreen,
   MobileMenuDrawer,
   Modal,
+  PhoneField,
   PromoBanner,
   SearchSelect,
   SearchSelectField,