@klu_dev/ui-klu-green 1.2.17 → 1.2.19

package/dist/index.js

@@ -82,6 +82,24 @@ var ChevronRightIcon = ({ className }) => /* @__PURE__ */ jsx(
     )
   }
 );
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    className,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M16.6923 7.94217L10.4423 14.1922C10.3842 14.2503 10.3153 14.2964 10.2394 14.3278C10.1636 14.3593 10.0822 14.3755 10.0001 14.3755C9.91797 14.3755 9.83664 14.3593 9.76077 14.3278C9.68489 14.2964 9.61596 14.2503 9.55792 14.1922L3.30792 7.94217C3.19064 7.82489 3.12476 7.66583 3.12476 7.49998C3.12476 7.33413 3.19064 7.17507 3.30792 7.05779C3.42519 6.94052 3.58425 6.87463 3.7501 6.87463C3.91596 6.87463 4.07502 6.94052 4.19229 7.05779L10.0001 12.8664L15.8079 7.05779C15.866 6.99972 15.9349 6.95366 16.0108 6.92224C16.0867 6.89081 16.168 6.87463 16.2501 6.87463C16.3322 6.87463 16.4135 6.89081 16.4894 6.92224C16.5653 6.95366 16.6342 6.99972 16.6923 7.05779C16.7504 7.11586 16.7964 7.1848 16.8278 7.26067C16.8593 7.33654 16.8755 7.41786 16.8755 7.49998C16.8755 7.5821 16.8593 7.66342 16.8278 7.73929C16.7964 7.81516 16.7504 7.8841 16.6923 7.94217Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
 var ShieldCheckIcon = ({ className }) => /* @__PURE__ */ jsx("div", { className: "uiklu-bg-primary300 uiklu-w-8 uiklu-h-8 uiklu-rounded-full uiklu-flex uiklu-items-center uiklu-justify-center uiklu-shrink-0", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className, children: /* @__PURE__ */ jsx(
   "path",
   {
@@ -943,6 +961,7 @@ var Icons = {
   TICKET: /* @__PURE__ */ jsx(TicketIcon, {}),
   CASH: /* @__PURE__ */ jsx(CashIcon, {}),
   CHEVRON_RIGHT: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+  CHEVRON_DOWN: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
   SHIELD_CHECK: /* @__PURE__ */ jsx(ShieldCheckIcon, {}),
   CLOSE: /* @__PURE__ */ jsx(CloseIcon, {}),
   MONEY: /* @__PURE__ */ jsx(MoneyIcon, {}),
@@ -1325,7 +1344,10 @@ var SelectContent = React4.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "uiklu-relative uiklu-z-50 uiklu-max-h-96 uiklu-w-[var(--radix-select-trigger-width)] uiklu-min-w-[var(--radix-select-trigger-width)] uiklu-overflow-hidden uiklu-rounded-[20px] uiklu-border-[1px] uiklu-border-border uiklu-bg-background uiklu-text-inputtext uiklu-font-sans uiklu-shadow-md",
+      "uiklu-relative uiklu-z-50 uiklu-max-h-96 uiklu-w-[var(--radix-select-trigger-width)]",
+      "uiklu-min-w-[var(--radix-select-trigger-width)] uiklu-overflow-hidden uiklu-rounded-[20px]",
+      "uiklu-border-[1px] uiklu-border-border uiklu-bg-background uiklu-text-inputtext",
+      "uiklu-font-sans uiklu-shadow-md",
       position === "popper" && "uiklu-translate-y-1",
       className
     ),
@@ -2077,8 +2099,8 @@ function SidebarNav({
   };
   return /* @__PURE__ */ jsx16("nav", { className: "uiklu-flex uiklu-flex-col uiklu-gap-1 uiklu-w-full", children: items.map((item) => {
     const isActive = activeTab === item.id;
-    const Icon2 = item.icon;
-    const isReactElement = React9.isValidElement(Icon2);
+    const Icon3 = item.icon;
+    const isReactElement = React9.isValidElement(Icon3);
     return /* @__PURE__ */ jsxs13(React9.Fragment, { children: [
       /* @__PURE__ */ jsxs13(
         "button",
@@ -2097,7 +2119,7 @@ function SidebarNav({
               "uiklu-items-center uiklu-justify-center",
               "uiklu-transition-colors uiklu-duration-200",
               isActive ? "uiklu-text-primary600" : "uiklu-text-primary300"
-            ), children: isReactElement ? React9.cloneElement(Icon2, { className: "uiklu-h-full uiklu-w-full" }) : /* @__PURE__ */ jsx16(Icon2, { className: "uiklu-h-full uiklu-w-full" }) }),
+            ), children: isReactElement ? React9.cloneElement(Icon3, { className: "uiklu-h-full uiklu-w-full" }) : /* @__PURE__ */ jsx16(Icon3, { className: "uiklu-h-full uiklu-w-full" }) }),
             /* @__PURE__ */ jsx16(
               "span",
               {
@@ -2566,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]",
@@ -2776,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,
@@ -2799,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);
@@ -2807,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",
@@ -2835,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;
@@ -2863,7 +2697,7 @@ var DetailCard = ({
             }
           }
         ` }),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24(
         Button,
         {
           variant: "outlinePrimary",
@@ -2873,7 +2707,7 @@ var DetailCard = ({
           children: secondaryButtonText
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24(
         Button,
         {
           variant: "primary",
@@ -2890,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]",
@@ -2910,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",
@@ -2922,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(
@@ -2944,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,
@@ -2961,7 +2795,8 @@ var TextField = React16.forwardRef(
               "uiklu-px-[10px] uiklu-py-[4px] uiklu-appearance-none uiklu-outline-none uiklu-transition-all",
               "uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-solid",
               "uiklu-overflow-hidden uiklu-text-ellipsis",
-              "uiklu-bg-gray50 uiklu-text-gray800 placeholder:uiklu-text-gray500 placeholder:uiklu-font-semibold",
+              "uiklu-bg-gray50 uiklu-text-gray800 placeholder:uiklu-text-gray500 uiklu-font-semibold",
+              "placeholder:uiklu-font-semibold",
               "disabled:uiklu-cursor-not-allowed disabled:uiklu-opacity-50",
               !error ? [
                 "uiklu-border-gray100",
@@ -2980,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: {
@@ -3000,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: {
@@ -3020,11 +2855,584 @@ 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 React16 from "react";
+import * as SelectPrimitive2 from "@radix-ui/react-select";
+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 containerSizes2 = {
+  sm: "uiklu-w-[150px]",
+  md: "uiklu-w-[250px]",
+  lg: "uiklu-w-[350px]",
+  full: "uiklu-w-full"
+};
+var labelStyles2 = {
+  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 errorSizes3 = {
+  sm: "uiklu-text-sm",
+  md: "uiklu-text-md",
+  lg: "uiklu-text-lg",
+  full: "uiklu-text-lg"
+};
+var Select2 = SelectPrimitive2.Root;
+var SelectValue = SelectPrimitive2.Value;
+var SelectGroup = SelectPrimitive2.Group;
+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",
+    containerSizes2[size]
+  ), children: [
+    /* @__PURE__ */ jsxs22(
+      "label",
+      {
+        className: cn(
+          "uiklu-label uiklu-font-sans uiklu-transition-colors uiklu-text-left",
+          "uiklu-font-normal",
+          labelStyles2[size],
+          !error ? "uiklu-text-gray600" : "uiklu-text-destructive",
+          labelClassName
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx26("span", { className: "uiklu-ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx26("div", { className: cn("uiklu-relative", containerSizes2[size]), children: /* @__PURE__ */ jsxs22(Select2, { disabled, ...props, children: [
+      /* @__PURE__ */ jsxs22(
+        SelectPrimitive2.Trigger,
+        {
+          ref,
+          className: cn(
+            "uiklu-font-sans uiklu-flex uiklu-box-border uiklu-h-[36px] uiklu-w-full",
+            "uiklu-items-center uiklu-justify-between uiklu-gap-2",
+            "uiklu-px-[10px] uiklu-py-[4px] uiklu-appearance-none uiklu-outline-none uiklu-transition-all",
+            "uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-solid uiklu-leading-normal",
+            "uiklu-bg-basewhite uiklu-text-gray800 data-[placeholder]:uiklu-text-gray800",
+            "uiklu-font-semibold",
+            "disabled:uiklu-cursor-not-allowed disabled:uiklu-opacity-50",
+            !error ? [
+              "uiklu-border-gray100",
+              "focus:uiklu-border-primary900 focus:uiklu-bg-white",
+              "focus:uiklu-shadow-[0_0_0_3px_#AFD8D8]"
+            ] : [
+              "uiklu-border-destructive uiklu-bg-white !uiklu-text-destructive",
+              "focus:uiklu-border-destructive",
+              "focus:uiklu-shadow-[0_0_0_3px_rgba(220,38,38,0.20)]"
+            ],
+            inputSizes3[size],
+            className
+          ),
+          children: [
+            /* @__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"
+            ), children: Icons.CHEVRON_DOWN }) })
+          ]
+        }
+      ),
+      children
+    ] }) }),
+    /* @__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 = React16.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx26(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx26(
+  SelectPrimitive2.Content,
+  {
+    ref,
+    className: cn(
+      "uiklu-relative uiklu-z-50 uiklu-max-h-96 uiklu-w-[var(--radix-select-trigger-width)] uiklu-min-w-[var(--radix-select-trigger-width)] uiklu-overflow-hidden uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-gray100 uiklu-bg-white uiklu-text-gray800 uiklu-font-sans uiklu-shadow-md",
+      position === "popper" && "uiklu-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: /* @__PURE__ */ jsx26(SelectPrimitive2.Viewport, { className: "uiklu-p-1", children })
+  }
+) }));
+SelectContent2.displayName = SelectPrimitive2.Content.displayName;
+var SelectItem2 = React16.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs22(
+  SelectPrimitive2.Item,
+  {
+    ref,
+    className: cn(
+      "uiklu-relative uiklu-flex uiklu-w-full 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 focus:uiklu-bg-primary/10 focus:uiklu-text-primary",
+      "uiklu-rounded-none",
+      className
+    ),
+    ...props,
+    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 React17 from "react";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+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 containerSizes3 = {
+  sm: "uiklu-w-[150px]",
+  md: "uiklu-w-[250px]",
+  lg: "uiklu-w-[350px]",
+  full: "uiklu-w-full"
+};
+var labelStyles3 = {
+  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 errorSizes4 = {
+  sm: "uiklu-text-sm",
+  md: "uiklu-text-md",
+  lg: "uiklu-text-lg",
+  full: "uiklu-text-lg"
+};
+var SearchSelectField = ({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = "Buscar...",
+  size = "full",
+  error,
+  required = false,
+  disabled = false,
+  className,
+  labelClassName
+}) => {
+  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);
+  React17.useEffect(() => {
+    if (selectedOption) {
+      setSearch(selectedOption.label);
+    } else {
+      setSearch("");
+    }
+  }, [selectedOption]);
+  const filteredOptions = options.filter(
+    (option) => option.label.toLowerCase().includes(search.toLowerCase())
+  );
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange("");
+    setSearch("");
+    setOpen(true);
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs23("div", { className: cn(
+    "uiklu-flex uiklu-flex-col uiklu-font-sans",
+    containerSizes3[size]
+  ), children: [
+    /* @__PURE__ */ jsxs23(
+      "label",
+      {
+        className: cn(
+          "uiklu-label uiklu-font-sans uiklu-transition-colors uiklu-text-left",
+          "uiklu-font-normal",
+          labelStyles3[size],
+          !error ? "uiklu-text-gray600" : "uiklu-text-destructive",
+          labelClassName
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx27("span", { className: "uiklu-ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs23(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx27(PopoverPrimitive2.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs23(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "uiklu-font-sans uiklu-flex uiklu-box-border uiklu-h-[36px] uiklu-w-full",
+            "uiklu-items-center uiklu-justify-between uiklu-gap-2",
+            "uiklu-px-[10px] uiklu-py-[4px] uiklu-transition-all",
+            "uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-solid uiklu-cursor-text uiklu-relative",
+            "uiklu-bg-basewhite uiklu-text-gray800",
+            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 focus-within:uiklu-border-destructive uiklu-bg-white",
+              "focus-within:uiklu-shadow-[0_0_0_3px_rgba(220,38,38,0.20)]"
+            ],
+            inputSizes4[size],
+            className
+          ),
+          onClick: () => {
+            inputRef.current?.focus();
+            setOpen(true);
+          },
+          children: [
+            /* @__PURE__ */ jsx27(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                className: cn(
+                  "uiklu-w-full uiklu-bg-transparent uiklu-outline-none uiklu-border-none uiklu-p-0",
+                  "uiklu-font-sans uiklu-text-gray800 uiklu-leading-normal uiklu-font-semibold",
+                  disabled && "uiklu-cursor-not-allowed",
+                  !error ? "placeholder:uiklu-text-gray800" : "uiklu-text-destructive placeholder:!uiklu-text-destructive"
+                ),
+                placeholder,
+                value: search,
+                disabled,
+                onFocus: () => setOpen(true),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOpen(true);
+                },
+                onChange: (e) => {
+                  setSearch(e.target.value);
+                  if (!open) setOpen(true);
+                }
+              }
+            ),
+            /* @__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__ */ jsx27(X3, { className: "uiklu-h-4 uiklu-w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx27(
+                "div",
+                {
+                  className: cn(
+                    "uiklu-flex uiklu-items-center uiklu-justify-center uiklu-h-4 uiklu-w-4 uiklu-shrink-0 uiklu-cursor-pointer",
+                    error ? "uiklu-text-destructive" : "uiklu-text-primary500"
+                  ),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen((prev) => !prev);
+                  },
+                  children: Icons.CHEVRON_DOWN
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx27(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx27(
+        PopoverPrimitive2.Content,
+        {
+          className: cn(
+            "uiklu-relative uiklu-z-50 uiklu-overflow-hidden uiklu-rounded-[8px] uiklu-border-[1px] uiklu-border-gray100 uiklu-bg-white uiklu-text-gray800 uiklu-font-sans uiklu-shadow-md uiklu-translate-y-1"
+          ),
+          style: {
+            width: containerRef.current ? containerRef.current.offsetWidth : "var(--radix-popover-trigger-width)"
+          },
+          align: "start",
+          sideOffset: 4,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          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__ */ jsxs23(
+              "div",
+              {
+                onClick: () => {
+                  onChange(option.value);
+                  setSearch(option.label);
+                  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-rounded-none focus:uiklu-bg-primary/10 focus:uiklu-text-primary hover:uiklu-bg-primary/10 hover:uiklu-text-primary uiklu-transition-colors",
+                  isSelected && "uiklu-bg-primary/5 uiklu-text-primary900 uiklu-font-medium"
+                ),
+                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(Check4, { className: cn(
+                    "uiklu-h-4 uiklu-w-4 uiklu-transition-opacity",
+                    isSelected ? "uiklu-opacity-100 uiklu-text-primary900" : "uiklu-opacity-0"
+                  ) }) }),
+                  /* @__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
+            );
+          }) })
+        }
+      ) })
+    ] }),
+    /* @__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,
@@ -3036,13 +3444,19 @@ export {
   Icons,
   Input,
   InputCode,
-  InputPhone,
   LoadingScreen,
   MobileMenuDrawer,
   Modal,
+  PhoneField,
   PromoBanner,
   SearchSelect,
+  SearchSelectField,
   Select,
+  SelectContent2 as SelectContent,
+  SelectField,
+  SelectGroup,
+  SelectItem2 as SelectItem,
+  SelectValue,
   SidebarTabs,
   TextField,
   ToastAction,