@incodetech/web 0.0.0-dev-20260223-3222aae → 0.0.0-dev-20260223-4e681c2

package/dist/curp-validation/curp-validation.es.js

@@ -1,16 +1,16 @@
-import { u as e, c as $, S as L, B as E, r as j, a as Y } from "../incodeModule-DPTWfWvu.js";
-import { mexicanStates as q, createCurpValidationManager as K } from "@incodetech/core/curp-validation";
-import { g as X, D as G, A as U, d as z, y as W, k as F } from "../vendor-preact-CjD4WiuC.js";
+import { u as e, c as E, S, B as N, r as be, a as ge } from "../incodeModule-DPTWfWvu.js";
+import { mexicanStates as we, createCurpValidationManager as De } from "@incodetech/core/curp-validation";
+import { g as ye, D as _, A as V, d as O, y as A, k as ce } from "../vendor-preact-CjD4WiuC.js";
 import "@incodetech/core";
 import "../instance-B-q0ZREN.js";
-import { u as B } from "../useTranslation-CD9ZxEvP.js";
-import { I as J, P as R } from "../incodeComponent-3T8Qyjnt.js";
-import { E as x } from "../errorIcon-DjGwgLyL.js";
-import { S as T } from "../successIcon-DV200b2L.js";
-import { S as Q } from "../spinner-C-EwvA9l.js";
-import { C as _ } from "../chevronDown-CU4P7j2Z.js";
-const ee = ({ class: n }) => {
-  const o = X();
+import { u as J } from "../useTranslation-CD9ZxEvP.js";
+import { I as ke, P as H } from "../incodeComponent-3T8Qyjnt.js";
+import { E as Z } from "../errorIcon-DjGwgLyL.js";
+import { S as K } from "../successIcon-DV200b2L.js";
+import { S as Le } from "../spinner-C-EwvA9l.js";
+import { C as Re } from "../chevronDown-CU4P7j2Z.js";
+const Ve = ({ class: t }) => {
+  const l = ye();
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -20,10 +20,10 @@ const ee = ({ class: n }) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       role: "img",
-      "aria-labelledby": o,
-      class: n,
+      "aria-labelledby": l,
+      class: t,
       children: [
-        /* @__PURE__ */ e("title", { id: o, children: "Calendar icon" }),
+        /* @__PURE__ */ e("title", { id: l, children: "Calendar icon" }),
         /* @__PURE__ */ e(
           "path",
           {
@@ -63,19 +63,19 @@ const ee = ({ class: n }) => {
       ]
     }
   );
-}, te = ({
-  width: n = 14,
-  height: o = 14,
-  class: s
+}, Se = ({
+  width: t = 14,
+  height: l = 14,
+  class: i
 }) => /* @__PURE__ */ e(
   "svg",
   {
-    width: n,
-    height: o,
+    width: t,
+    height: l,
     viewBox: "0 0 14 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    class: `IncodeCloseIcon ${s || ""}`,
+    class: `IncodeCloseIcon ${i || ""}`,
     "aria-hidden": "true",
     children: /* @__PURE__ */ e(
       "path",
@@ -87,195 +87,229 @@ const ee = ({ class: n }) => {
       }
     )
   }
-), ne = G((n, o) => {
-  const { class: s, type: a = "text", ...t } = n;
+), Pe = ({ size: t = 20 }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: t,
+    height: t,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    class: "IncodeSearchIcon",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ e("title", { children: "Search" }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z",
+          stroke: "var(--icon-neutral-300)",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M19 19L14.65 14.65",
+          stroke: "var(--icon-neutral-300)",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    ]
+  }
+), He = _((t, l) => {
+  const { class: i, type: o = "text", ...n } = t;
   return /* @__PURE__ */ e(
     "input",
     {
-      ...t,
-      ref: o,
-      type: a,
-      class: $("IncodeInput", s)
+      ...n,
+      ref: l,
+      type: o,
+      class: E("IncodeInput", i)
     }
   );
-}), N = G(
+}), M = _(
   ({
-    id: n,
-    label: o,
-    "aria-label": s,
-    type: a,
-    error: t,
-    showErrorIcon: d,
+    id: t,
+    label: l,
+    "aria-label": i,
+    type: o,
+    error: n,
+    showErrorIcon: h,
     helper: r,
-    showHelperIcon: C,
-    closeButton: l,
-    required: u,
-    suppressMessages: m = !1,
+    showHelperIcon: I,
+    closeButton: c,
+    required: C,
+    suppressMessages: g = !1,
     class: f,
-    value: c,
-    ...b
+    value: d,
+    ...v
   }, y) => {
-    const i = `${n}-helper`, h = `${n}-error`, I = m ? "" : [r ? i : null, t ? h : null].filter(Boolean).join(" ");
-    return /* @__PURE__ */ e("div", { class: $("IncodeInputComposed", f), children: [
-      o && /* @__PURE__ */ e(
+    const L = `${t}-helper`, k = `${t}-error`, R = g ? "" : [r ? L : null, n ? k : null].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e("div", { class: E("IncodeInputComposed", f), children: [
+      l && /* @__PURE__ */ e(
         "label",
         {
           class: "IncodeInputComposedLabel",
-          htmlFor: n,
-          "data-testid": `${n}-label`,
-          children: o
+          htmlFor: t,
+          "data-testid": `${t}-label`,
+          children: l
         }
       ),
       /* @__PURE__ */ e("div", { class: "IncodeInputComposedWrapper", children: [
         /* @__PURE__ */ e(
-          ne,
+          He,
           {
-            id: n,
-            type: a,
-            ...b,
+            id: t,
+            type: o,
+            ...v,
             ref: y,
-            required: u,
-            "data-has-value": !!(c && String(c).length > 0),
-            ...!o && s ? { "aria-label": s } : {},
-            "aria-describedby": I || void 0,
-            "aria-required": u ? "true" : void 0,
-            "aria-invalid": t ? "true" : void 0,
-            value: c
+            required: C,
+            "data-has-value": !!(d && String(d).length > 0),
+            ...!l && i ? { "aria-label": i } : {},
+            "aria-describedby": R || void 0,
+            "aria-required": C ? "true" : void 0,
+            "aria-invalid": n ? "true" : void 0,
+            value: d
           }
         ),
-        l?.show && /* @__PURE__ */ e(
+        c?.show && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
             "aria-label": "Clear",
             class: "IncodeInputComposedClearButton",
-            onClick: l.onClose,
-            "data-testid": `${n}-clear`,
-            children: /* @__PURE__ */ e(te, {})
+            onClick: c.onClose,
+            "data-testid": `${t}-clear`,
+            children: /* @__PURE__ */ e(Se, {})
           }
         )
       ] }),
-      !m && t && /* @__PURE__ */ e(
+      !g && n && /* @__PURE__ */ e(
         "div",
         {
           class: "IncodeInputComposedErrorWrapper",
-          "data-testid": `${n}-error-wrapper`,
+          "data-testid": `${t}-error-wrapper`,
           children: [
-            d && /* @__PURE__ */ e("div", { class: "IncodeInputComposedIconWrapper", children: /* @__PURE__ */ e(x, { size: 17 }) }),
-            /* @__PURE__ */ e("p", { id: h, class: "IncodeInputComposedError", children: t })
+            h && /* @__PURE__ */ e("div", { class: "IncodeInputComposedIconWrapper", children: /* @__PURE__ */ e(Z, { size: 17 }) }),
+            /* @__PURE__ */ e("p", { id: k, class: "IncodeInputComposedError", children: n })
           ]
         }
       ),
-      !m && r && !t && /* @__PURE__ */ e(
+      !g && r && !n && /* @__PURE__ */ e(
         "div",
         {
           class: "IncodeInputComposedHelperWrapper",
-          "data-testid": `${n}-helper-wrapper`,
+          "data-testid": `${t}-helper-wrapper`,
           children: [
-            C && /* @__PURE__ */ e("div", { class: "IncodeInputComposedIconWrapper", children: /* @__PURE__ */ e(T, { size: 17 }) }),
-            /* @__PURE__ */ e("p", { id: i, class: "IncodeInputComposedHelper", children: r })
+            I && /* @__PURE__ */ e("div", { class: "IncodeInputComposedIconWrapper", children: /* @__PURE__ */ e(K, { size: 17 }) }),
+            /* @__PURE__ */ e("p", { id: L, class: "IncodeInputComposedHelper", children: r })
           ]
         }
       )
     ] });
   }
-), re = ({
-  curp: n,
-  isValid: o,
-  onCurpChange: s,
-  onVerify: a,
-  onSwitchToGenerate: t,
-  disabled: d = !1,
+), Te = ({
+  curp: t,
+  isValid: l,
+  onCurpChange: i,
+  onVerify: o,
+  onSwitchToGenerate: n,
+  disabled: h = !1,
   placeholder: r,
-  continueLabel: C,
-  dontHaveLabel: l
+  continueLabel: I,
+  dontHaveLabel: c
 }) => {
-  const { t: u } = B(), m = r ?? u("curp.placeholder.curp") ?? "CURP", f = C ?? u("curp.continue") ?? "Continue", c = l ?? u("curp.dontHave") ?? "I don't have my CURP", b = u("curp.placeholder.curp") ?? "CURP";
+  const { t: C } = J(), g = r ?? C("curp.placeholder.curp") ?? "CURP", f = I ?? C("curp.continue") ?? "Continue", d = c ?? C("curp.dontHave") ?? "I don't have my CURP", v = C("curp.placeholder.curp") ?? "CURP";
   return /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpInput", children: [
     /* @__PURE__ */ e(
-      N,
+      M,
       {
         id: "curp-input",
         label: "",
-        value: n,
-        onInput: (i) => {
-          const h = i.target;
-          s(h.value.toUpperCase());
+        value: t,
+        onInput: (L) => {
+          const k = L.target;
+          i(k.value.toUpperCase());
         },
-        placeholder: m,
-        disabled: d,
+        placeholder: g,
+        disabled: h,
         maxLength: 18,
-        "aria-label": b
+        "aria-label": v
       }
     ),
-    /* @__PURE__ */ e(L, {}),
+    /* @__PURE__ */ e(S, {}),
     /* @__PURE__ */ e(
-      E,
+      N,
       {
         type: "button",
-        onClick: a,
-        disabled: !o || d,
+        onClick: o,
+        disabled: !l || h,
         "data-testid": "curp-verify",
         children: f
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      N,
       {
         type: "button",
-        onClick: t,
-        disabled: d,
+        onClick: n,
+        disabled: h,
         "data-testid": "curp-switch-to-generate",
         class: "IncodeCurpInputDontHaveButton",
-        children: c
+        children: d
       }
     )
   ] });
-}, M = G(
+}, de = _(
   ({
-    id: n,
-    label: o,
-    value: s,
-    onInput: a,
-    min: t,
-    max: d,
+    id: t,
+    label: l,
+    value: i,
+    onInput: o,
+    min: n,
+    max: h,
     placeholder: r = "mm/dd/yyyy",
-    error: C,
-    showErrorIcon: l,
-    helper: u,
-    showHelperIcon: m,
+    error: I,
+    showErrorIcon: c,
+    helper: C,
+    showHelperIcon: g,
     suppressMessages: f = !1,
-    disabled: c,
-    required: b,
+    disabled: d,
+    required: v,
     class: y,
-    "data-testid": i,
-    ...h
-  }, I) => {
-    const g = U(null), V = `${n}-helper`, P = `${n}-error`, k = f ? "" : [u ? V : null, C ? P : null].filter(Boolean).join(" "), H = (w) => {
-      g.current = w, typeof I == "function" ? I(w) : I && (I.current = w);
-    }, S = (w) => {
-      w.preventDefault();
-      const D = g.current;
-      if (!(!D || c))
-        if (D.focus(), "showPicker" in HTMLInputElement.prototype)
+    "data-testid": L,
+    ...k
+  }, R) => {
+    const F = V(null), W = `${t}-helper`, T = `${t}-error`, $ = f ? "" : [C ? W : null, I ? T : null].filter(Boolean).join(" "), ee = (P) => {
+      F.current = P, typeof R == "function" ? R(P) : R && (R.current = P);
+    }, B = (P) => {
+      P.preventDefault();
+      const s = F.current;
+      if (!(!s || d))
+        if (s.focus(), "showPicker" in HTMLInputElement.prototype)
           try {
-            D.showPicker();
+            s.showPicker();
           } catch {
-            D.click();
+            s.click();
           }
         else
-          D.click();
+          s.click();
     };
-    return /* @__PURE__ */ e("div", { class: $("IncodeDateInputComposed", y), children: [
-      o && /* @__PURE__ */ e(
+    return /* @__PURE__ */ e("div", { class: E("IncodeDateInputComposed", y), children: [
+      l && /* @__PURE__ */ e(
         "label",
         {
           class: "IncodeDateInputComposedLabel",
-          htmlFor: n,
-          "data-testid": `${n}-label`,
+          htmlFor: t,
+          "data-testid": `${t}-label`,
           children: [
-            o,
-            b && /* @__PURE__ */ e("span", { class: "IncodeDateInputComposedRequired", children: " *" })
+            l,
+            v && /* @__PURE__ */ e("span", { class: "IncodeDateInputComposedRequired", children: " *" })
           ]
         }
       ),
@@ -283,23 +317,23 @@ const ee = ({ class: n }) => {
         /* @__PURE__ */ e(
           "input",
           {
-            ref: H,
-            id: n,
+            ref: ee,
+            id: t,
             type: "date",
             class: "IncodeDateInputComposedInput",
-            value: s,
-            onInput: a,
-            min: t,
-            max: d,
+            value: i,
+            onInput: o,
+            min: n,
+            max: h,
             placeholder: r,
-            disabled: c,
-            required: b,
-            "data-has-value": !!s,
-            "data-testid": i,
-            "aria-describedby": k || void 0,
-            "aria-required": b ? "true" : void 0,
-            "aria-invalid": C ? "true" : void 0,
-            ...h
+            disabled: d,
+            required: v,
+            "data-has-value": !!i,
+            "data-testid": L,
+            "aria-describedby": $ || void 0,
+            "aria-required": v ? "true" : void 0,
+            "aria-invalid": I ? "true" : void 0,
+            ...k
           }
         ),
         /* @__PURE__ */ e(
@@ -307,200 +341,351 @@ const ee = ({ class: n }) => {
           {
             type: "button",
             class: "IncodeDateInputComposedIconButton",
-            onClick: S,
-            onTouchEnd: S,
-            disabled: c,
-            "aria-label": o ?? "Date",
+            onClick: B,
+            onTouchEnd: B,
+            disabled: d,
+            "aria-label": l ?? "Date",
             tabIndex: -1,
-            children: /* @__PURE__ */ e("span", { class: "IncodeDateInputComposedIcon", children: /* @__PURE__ */ e(ee, {}) })
+            children: /* @__PURE__ */ e("span", { class: "IncodeDateInputComposedIcon", children: /* @__PURE__ */ e(Ve, {}) })
           }
         )
       ] }),
-      !f && C && /* @__PURE__ */ e(
+      !f && I && /* @__PURE__ */ e(
         "div",
         {
           class: "IncodeDateInputComposedErrorWrapper",
-          "data-testid": `${n}-error-wrapper`,
+          "data-testid": `${t}-error-wrapper`,
           children: [
-            l && /* @__PURE__ */ e("div", { class: "IncodeDateInputComposedIconWrapper", children: /* @__PURE__ */ e(x, { size: 17 }) }),
-            /* @__PURE__ */ e("p", { id: P, class: "IncodeDateInputComposedError", children: C })
+            c && /* @__PURE__ */ e("div", { class: "IncodeDateInputComposedIconWrapper", children: /* @__PURE__ */ e(Z, { size: 17 }) }),
+            /* @__PURE__ */ e("p", { id: T, class: "IncodeDateInputComposedError", children: I })
           ]
         }
       ),
-      !f && u && !C && /* @__PURE__ */ e(
+      !f && C && !I && /* @__PURE__ */ e(
         "div",
         {
           class: "IncodeDateInputComposedHelperWrapper",
-          "data-testid": `${n}-helper-wrapper`,
+          "data-testid": `${t}-helper-wrapper`,
           children: [
-            m && /* @__PURE__ */ e("div", { class: "IncodeDateInputComposedIconWrapper", children: /* @__PURE__ */ e(T, { size: 17 }) }),
-            /* @__PURE__ */ e("p", { id: V, class: "IncodeDateInputComposedHelper", children: u })
+            g && /* @__PURE__ */ e("div", { class: "IncodeDateInputComposedIconWrapper", children: /* @__PURE__ */ e(K, { size: 17 }) }),
+            /* @__PURE__ */ e("p", { id: W, class: "IncodeDateInputComposedHelper", children: C })
           ]
         }
       )
     ] });
   }
 );
-M.displayName = "DateInputComposed";
-const O = ({
-  id: n,
-  label: o,
-  placeholder: s = "Choose an option",
-  value: a,
-  options: t,
-  onChange: d,
+de.displayName = "DateInputComposed";
+const ie = ({
+  id: t,
+  label: l,
+  placeholder: i = "Choose an option",
+  value: o,
+  options: n,
+  onChange: h,
   error: r,
-  helper: C,
-  showErrorIcon: l,
-  showHelperIcon: u,
-  suppressMessages: m = !1,
+  helper: I,
+  showErrorIcon: c,
+  showHelperIcon: C,
+  suppressMessages: g = !1,
   disabled: f = !1,
-  required: c,
-  class: b,
-  "data-testid": y
+  required: d,
+  searchable: v = !1,
+  searchPlaceholder: y = "Search...",
+  noResultsText: L = "No results found",
+  name: k,
+  tabIndex: R,
+  onKeyDown: F,
+  onBlur: W,
+  renderSelectedLabel: T,
+  siblingElement: $,
+  enterKeyHint: ee,
+  class: B,
+  "data-testid": P
 }) => {
-  const [i, h] = z(!1), [I, g] = z(-1), V = U(null), P = U(null), k = t.find((p) => p.value === a), H = `${n}-helper`, S = `${n}-error`, w = m ? "" : [C ? H : null, r ? S : null].filter(Boolean).join(" ");
-  W(() => {
-    const p = (v) => {
-      V.current && !V.current.contains(v.target) && h(!1);
-    };
-    return i && document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
-  }, [i]), W(() => {
-    i || g(-1);
-  }, [i]), W(() => {
-    i && I >= 0 && P.current && P.current.children[I]?.scrollIntoView({ block: "nearest" });
-  }, [I, i]);
-  const D = (p) => {
-    if (!f)
-      switch (p.key) {
-        case "ArrowDown":
-          p.preventDefault(), i ? g(
-            (v) => v < t.length - 1 ? v + 1 : v
-          ) : (h(!0), g(0));
-          break;
-        case "ArrowUp":
-          p.preventDefault(), i ? g((v) => v > 0 ? v - 1 : v) : (h(!0), g(t.length - 1));
-          break;
-        case "Enter":
-        case " ":
-          p.preventDefault(), i && I >= 0 && t[I] ? (d(t[I].value), h(!1)) : i || (h(!0), g(0));
-          break;
-        case "Escape":
-          p.preventDefault(), h(!1);
-          break;
-        case "Tab":
-          h(!1);
-          break;
-      }
-  }, Z = (p) => {
-    d(p), h(!1);
+  const [s, w] = O(!1), [ue, te] = O(!1), [m, p] = O(-1), [j, ne] = O(""), re = V(null), U = V(null), ae = V(null), q = V([]), Y = V(null), Q = V(""), x = V(), z = n.find((a) => a.value === o), b = v && j ? n.filter(
+    (a) => a.label.toLowerCase().includes(j.toLowerCase())
+  ) : n, X = `${t}-label`, oe = `${t}-listbox`, le = `${t}-helper`, se = `${t}-error`, pe = g ? "" : [I ? le : null, r ? se : null].filter(Boolean).join(" ");
+  A(() => {
+    if (!s) return;
+    const a = requestAnimationFrame(() => {
+      v && Y.current && Y.current.focus(), requestAnimationFrame(() => {
+        ae.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "nearest"
+        });
+      });
+    });
+    return () => cancelAnimationFrame(a);
+  }, [s, v]), A(() => {
+    s || (p(-1), ne(""));
+  }, [s]), A(() => {
+    m >= 0 && q.current[m] && q.current[m]?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [m]), A(() => () => {
+    x.current && clearTimeout(x.current);
+  }, []);
+  const he = () => {
+    f || w((a) => !a);
+  }, G = (a) => {
+    h(a), w(!1), p(-1), U.current?.focus();
+  }, Ce = () => {
+    te(!0);
+  }, Ie = (a) => {
+    te(!1), re.current?.contains(a.relatedTarget) || (w(!1), W?.());
+  }, fe = (a) => {
+    if (f) return;
+    F?.(a);
+    const { key: D } = a;
+    if (D.length === 1 && /^[a-zA-Z0-9]$/.test(D)) {
+      a.preventDefault(), x.current && clearTimeout(x.current), Q.current += D.toLowerCase();
+      const u = b.findIndex(
+        (ve) => ve.label.toLowerCase().startsWith(Q.current)
+      );
+      u !== -1 && (s || w(!0), p(u)), x.current = setTimeout(() => {
+        Q.current = "";
+      }, 500);
+      return;
+    }
+    switch (D) {
+      case "ArrowDown":
+        a.preventDefault(), s ? p(
+          (u) => u < b.length - 1 ? u + 1 : u
+        ) : (w(!0), p(0));
+        break;
+      case "ArrowUp":
+        a.preventDefault(), s ? p((u) => u > 0 ? u - 1 : u) : (w(!0), p(b.length - 1));
+        break;
+      case "Home":
+        a.preventDefault(), s && p(0);
+        break;
+      case "End":
+        a.preventDefault(), s && p(b.length - 1);
+        break;
+      case "Enter":
+        a.preventDefault(), s && m >= 0 && b[m] ? G(b[m].value) : s || w(!0);
+        break;
+      case " ":
+        a.preventDefault(), s && m >= 0 && b[m] ? G(b[m].value) : s || (w(!0), p(0));
+        break;
+      case "Escape":
+        a.preventDefault(), s && (w(!1), p(-1), U.current?.focus());
+        break;
+      case "Tab":
+        s && (w(!1), p(-1));
+        break;
+    }
+  }, me = (a) => {
+    const { key: D } = a;
+    switch (D) {
+      case "ArrowDown":
+        a.preventDefault(), p(
+          (u) => u < b.length - 1 ? u + 1 : u
+        );
+        break;
+      case "ArrowUp":
+        a.preventDefault(), p((u) => u > 0 ? u - 1 : u);
+        break;
+      case "Home":
+        a.preventDefault(), p(0);
+        break;
+      case "End":
+        a.preventDefault(), p(b.length - 1);
+        break;
+      case "Enter":
+        a.preventDefault(), m >= 0 && b[m] && G(b[m].value);
+        break;
+      case "Escape":
+        a.preventDefault(), w(!1), p(-1), U.current?.focus();
+        break;
+      case "Tab":
+        w(!1), p(-1);
+        break;
+    }
   };
-  return /* @__PURE__ */ e("div", { class: $("IncodeDropdownComposed", b), ref: V, children: [
-    o && /* @__PURE__ */ e(
-      "label",
-      {
-        class: "IncodeDropdownComposedLabel",
-        htmlFor: n,
-        "data-testid": `${n}-label`,
-        children: [
-          o,
-          c && /* @__PURE__ */ e("span", { class: "IncodeDropdownComposedRequired", children: " *" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedWrapper", children: [
-      /* @__PURE__ */ e(
-        "button",
-        {
-          type: "button",
-          id: n,
-          class: "IncodeDropdownComposedTrigger",
-          onClick: () => !f && h((p) => !p),
-          onKeyDown: D,
-          disabled: f,
-          "aria-haspopup": "listbox",
-          "aria-expanded": i ? "true" : "false",
-          "aria-label": o ?? s,
-          "aria-describedby": w || void 0,
-          "aria-required": c ? "true" : void 0,
-          "aria-invalid": r ? "true" : void 0,
-          "data-testid": y,
-          children: [
-            /* @__PURE__ */ e(
-              "span",
-              {
-                class: k ? "IncodeDropdownComposedTriggerText" : "IncodeDropdownComposedTriggerPlaceholder",
-                children: k ? k.label : s
-              }
-            ),
-            /* @__PURE__ */ e(
-              "span",
-              {
-                class: "IncodeDropdownComposedTriggerIcon",
-                "aria-hidden": "true",
-                "data-open": i,
-                children: /* @__PURE__ */ e(_, {})
-              }
-            )
-          ]
-        }
-      ),
-      i && /* @__PURE__ */ e(
-        "div",
-        {
-          ref: P,
-          class: "IncodeDropdownComposedList",
-          role: "listbox",
-          "aria-label": o ?? s,
-          children: t.map((p, v) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      class: E("IncodeDropdownComposed", B),
+      ref: re,
+      onBlur: Ie,
+      children: [
+        k && /* @__PURE__ */ e(
+          "input",
+          {
+            type: "hidden",
+            name: k,
+            value: o || "",
+            disabled: f,
+            required: d
+          }
+        ),
+        l && /* @__PURE__ */ e(
+          "label",
+          {
+            class: "IncodeDropdownComposedLabel",
+            id: X,
+            htmlFor: t,
+            "data-testid": `${t}-label`,
+            children: [
+              l,
+              d && /* @__PURE__ */ e("span", { class: "IncodeDropdownComposedRequired", children: " *" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedWrapper", children: [
+          /* @__PURE__ */ e(
             "div",
             {
-              role: "option",
-              "aria-selected": a === p.value ? "true" : "false",
-              class: "IncodeDropdownComposedOption",
-              "data-highlighted": I === v,
-              onClick: () => Z(p.value),
-              onMouseDown: (A) => A.preventDefault(),
-              onMouseEnter: () => g(v),
-              children: p.label
-            },
-            p.value
-          ))
-        }
-      )
-    ] }),
-    !m && r && /* @__PURE__ */ e(
-      "div",
-      {
-        class: "IncodeDropdownComposedErrorWrapper",
-        "data-testid": `${n}-error-wrapper`,
-        children: [
-          l && /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedIconWrapper", children: /* @__PURE__ */ e(x, { size: 17 }) }),
-          /* @__PURE__ */ e("p", { id: S, class: "IncodeDropdownComposedError", children: r })
-        ]
-      }
-    ),
-    !m && C && !r && /* @__PURE__ */ e(
-      "div",
-      {
-        class: "IncodeDropdownComposedHelperWrapper",
-        "data-testid": `${n}-helper-wrapper`,
-        children: [
-          u && /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedIconWrapper", children: /* @__PURE__ */ e(T, { size: 17 }) }),
-          /* @__PURE__ */ e("p", { id: H, class: "IncodeDropdownComposedHelper", children: C })
-        ]
-      }
-    )
-  ] });
-}, ae = ({
-  form: n,
-  isValid: o,
-  onFormChange: s,
-  onGenerate: a,
-  disabled: t = !1,
-  labels: d
+              class: E("IncodeDropdownComposedTriggerRow", {
+                IncodeDropdownComposedTriggerRowWithSibling: !!$
+              }),
+              children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    ref: U,
+                    type: "button",
+                    id: t,
+                    class: "IncodeDropdownComposedTrigger",
+                    onClick: he,
+                    onFocus: Ce,
+                    onKeyDown: fe,
+                    tabIndex: f ? -1 : R ?? 0,
+                    disabled: f,
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": s ? "true" : "false",
+                    "aria-disabled": f ? "true" : void 0,
+                    "aria-labelledby": l ? X : void 0,
+                    "aria-label": l ? void 0 : i,
+                    "aria-controls": s ? oe : void 0,
+                    "aria-activedescendant": s && m >= 0 ? `${t}-option-${m}` : void 0,
+                    "aria-invalid": r ? "true" : void 0,
+                    "aria-required": d ? "true" : void 0,
+                    "aria-describedby": pe || void 0,
+                    "data-error": r ? "true" : void 0,
+                    "data-focused": ue || s ? "true" : void 0,
+                    "data-testid": P,
+                    children: [
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          class: z ? "IncodeDropdownComposedTriggerText" : "IncodeDropdownComposedTriggerPlaceholder",
+                          children: z ? T ? T(z) : z.label : i
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          class: "IncodeDropdownComposedTriggerIcon",
+                          "aria-hidden": "true",
+                          "data-open": s,
+                          children: /* @__PURE__ */ e(Re, {})
+                        }
+                      )
+                    ]
+                  }
+                ),
+                $ && /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedSibling", children: $ })
+              ]
+            }
+          ),
+          s && /* @__PURE__ */ e(
+            "div",
+            {
+              ref: ae,
+              id: oe,
+              class: "IncodeDropdownComposedList",
+              role: "listbox",
+              "aria-labelledby": l ? X : void 0,
+              "aria-label": l ? void 0 : i,
+              "data-error": r ? "true" : void 0,
+              children: [
+                v && /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedSearchWrapper", children: /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedSearchInner", children: [
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: Y,
+                      type: "text",
+                      class: "IncodeDropdownComposedSearchInput",
+                      value: j,
+                      onInput: (a) => {
+                        ne(a.target.value), p(0);
+                      },
+                      onKeyDown: me,
+                      placeholder: y,
+                      "aria-label": y,
+                      autocomplete: "off"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      class: "IncodeDropdownComposedSearchIcon",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ e(Pe, { size: 20 })
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedOptionsScroll", children: b.length === 0 ? /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedNoResults", children: L }) : b.map((a, D) => /* @__PURE__ */ e(
+                  "div",
+                  {
+                    id: `${t}-option-${D}`,
+                    role: "option",
+                    "aria-selected": o === a.value ? "true" : "false",
+                    class: "IncodeDropdownComposedOption",
+                    "data-highlighted": m === D,
+                    ref: (u) => {
+                      q.current[D] = u;
+                    },
+                    onClick: () => G(a.value),
+                    onMouseDown: (u) => u.preventDefault(),
+                    onMouseEnter: () => p(D),
+                    children: a.label
+                  },
+                  a.value
+                )) })
+              ]
+            }
+          )
+        ] }),
+        !g && r && /* @__PURE__ */ e(
+          "div",
+          {
+            class: "IncodeDropdownComposedErrorWrapper",
+            "data-testid": `${t}-error-wrapper`,
+            children: [
+              c && /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedIconWrapper", children: /* @__PURE__ */ e(Z, { size: 17 }) }),
+              /* @__PURE__ */ e("p", { id: se, class: "IncodeDropdownComposedError", children: r })
+            ]
+          }
+        ),
+        !g && I && !r && /* @__PURE__ */ e(
+          "div",
+          {
+            class: "IncodeDropdownComposedHelperWrapper",
+            "data-testid": `${t}-helper-wrapper`,
+            children: [
+              C && /* @__PURE__ */ e("div", { class: "IncodeDropdownComposedIconWrapper", children: /* @__PURE__ */ e(K, { size: 17 }) }),
+              /* @__PURE__ */ e("p", { id: le, class: "IncodeDropdownComposedHelper", children: I })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, $e = ({
+  form: t,
+  isValid: l,
+  onFormChange: i,
+  onGenerate: o,
+  disabled: n = !1,
+  labels: h
 }) => {
-  const { t: r } = B(), l = { ...{
+  const { t: r } = J(), c = { ...{
     firstName: r("curp.labels.firstName") ?? "Your First name",
     firstLast: r("curp.labels.firstLast") ?? "Your First last name",
     secondLast: r("curp.labels.secondLast") ?? "Your Second last name",
@@ -513,227 +698,229 @@ const O = ({
     birthState: r("curp.labels.birthState") ?? "State of birth",
     statePlaceholder: r("curp.placeholder.state") ?? "Select state",
     generate: r("curp.generateCta") ?? "Generate CURP"
-  }, ...d }, u = (c) => (b) => {
-    const y = b.target;
-    s({ [c]: y.value });
-  }, m = [
-    { value: "H", label: l.male },
-    { value: "M", label: l.female },
-    { value: "X", label: l.other }
-  ], f = q.map((c) => ({
-    value: c.value,
-    label: c.label
+  }, ...h }, C = (d) => (v) => {
+    const y = v.target;
+    i({ [d]: y.value });
+  }, g = [
+    { value: "H", label: c.male },
+    { value: "M", label: c.female },
+    { value: "X", label: c.other }
+  ], f = we.map((d) => ({
+    value: d.value,
+    label: d.label
   }));
   return /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeGenerateCurpForm", children: [
     /* @__PURE__ */ e(
-      N,
+      M,
       {
         id: "curp-first-name",
-        label: l.firstName,
-        value: n.name,
-        onInput: u("name"),
-        placeholder: l.firstName,
-        disabled: t,
+        label: c.firstName,
+        value: t.name,
+        onInput: C("name"),
+        placeholder: c.firstName,
+        disabled: n,
         autoComplete: "given-name"
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      M,
       {
         id: "curp-first-last",
-        label: l.firstLast,
-        value: n.firstLastName,
-        onInput: u("firstLastName"),
-        placeholder: l.firstLast,
-        disabled: t
+        label: c.firstLast,
+        value: t.firstLastName,
+        onInput: C("firstLastName"),
+        placeholder: c.firstLast,
+        disabled: n
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      M,
       {
         id: "curp-second-last",
-        label: l.secondLast,
-        value: n.secondLastName,
-        onInput: u("secondLastName"),
-        placeholder: l.secondLast,
-        disabled: t
+        label: c.secondLast,
+        value: t.secondLastName,
+        onInput: C("secondLastName"),
+        placeholder: c.secondLast,
+        disabled: n
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      ie,
       {
         id: "curp-gender",
-        label: l.gender,
-        placeholder: l.genderPlaceholder,
-        value: n.gender,
-        options: m,
-        disabled: t,
-        onChange: (c) => s({ gender: c }),
+        label: c.gender,
+        placeholder: c.genderPlaceholder,
+        value: t.gender,
+        options: g,
+        disabled: n,
+        onChange: (d) => i({ gender: d }),
         "data-testid": "curp-gender"
       }
     ),
     /* @__PURE__ */ e(
-      M,
+      de,
       {
         id: "curp-birth-date",
-        label: l.dob,
-        value: n.birthDate,
-        onInput: u("birthDate"),
+        label: c.dob,
+        value: t.birthDate,
+        onInput: C("birthDate"),
         max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
         placeholder: r("curp.placeholder.dob") ?? "mm/dd/yyyy",
-        disabled: t,
+        disabled: n,
         "data-testid": "curp-birth-date"
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      ie,
       {
         id: "curp-birth-state",
-        label: l.birthState,
-        placeholder: l.statePlaceholder,
-        value: n.birthState,
+        label: c.birthState,
+        placeholder: c.statePlaceholder,
+        value: t.birthState,
         options: f,
-        disabled: t,
-        onChange: (c) => s({ birthState: c }),
-        "data-testid": "curp-birth-state"
+        disabled: n,
+        onChange: (d) => i({ birthState: d }),
+        "data-testid": "curp-birth-state",
+        searchable: !0
       }
     ),
+    /* @__PURE__ */ e(S, { size: 16 }),
     /* @__PURE__ */ e(
-      E,
+      N,
       {
         type: "button",
-        onClick: a,
-        disabled: !o || t,
+        onClick: o,
+        disabled: !l || n,
         "data-testid": "curp-generate",
-        children: l.generate
+        children: c.generate
       }
     )
   ] });
-}, oe = ({
-  config: n,
-  onFinish: o,
-  onError: s
+}, xe = ({
+  config: t,
+  onFinish: l,
+  onError: i
 }) => {
-  const { t: a } = B(), [t, d] = Y(() => {
-    if (!n)
+  const { t: o } = J(), [n, h] = ge(() => {
+    if (!t)
       throw new Error("CURP validation config is required");
-    return K({ config: n });
+    return De({ config: t });
   });
-  if (t.status === "idle" || t.status === "loading" || t.status === "verifying" || t.status === "generating") {
-    const r = t.status === "generating" ? a("curp.status.generating") ?? "Generating..." : a("curp.status.verifying") ?? "Verifying...";
-    return /* @__PURE__ */ e(R, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpLoading", children: /* @__PURE__ */ e(Q, { title: r, fullScreen: !1 }) }) });
+  if (n.status === "idle" || n.status === "loading" || n.status === "verifying" || n.status === "generating") {
+    const r = n.status === "generating" ? o("curp.status.generating") ?? "Generating..." : o("curp.status.verifying") ?? "Verifying...";
+    return /* @__PURE__ */ e(H, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpLoading", children: /* @__PURE__ */ e(Le, { title: r, fullScreen: !1 }) }) });
   }
-  if (t.status === "enterCurp")
+  if (n.status === "enterCurp")
     return /* @__PURE__ */ e(
-      R,
+      H,
       {
         className: "IncodeCurpValidationPage",
-        title: a("curp.enterCurp") ?? "Enter your CURP",
+        title: o("curp.enterCurp") ?? "Enter your CURP",
         children: /* @__PURE__ */ e(
-          re,
+          Te,
           {
-            curp: t.curp,
-            isValid: t.isValid,
-            onCurpChange: (r) => d.setCurp(r),
-            onVerify: () => d.verify(),
-            onSwitchToGenerate: () => d.switchToGenerate(),
-            placeholder: a("curp.placeholder.curp") ?? "CURP",
-            continueLabel: a("curp.continue") ?? "Continue",
-            dontHaveLabel: a("curp.dontHave") ?? "I don't have my CURP"
+            curp: n.curp,
+            isValid: n.isValid,
+            onCurpChange: (r) => h.setCurp(r),
+            onVerify: () => h.verify(),
+            onSwitchToGenerate: () => h.switchToGenerate(),
+            placeholder: o("curp.placeholder.curp") ?? "CURP",
+            continueLabel: o("curp.continue") ?? "Continue",
+            dontHaveLabel: o("curp.dontHave") ?? "I don't have my CURP"
           }
         )
       }
     );
-  if (t.status === "generateCurp")
+  if (n.status === "generateCurp")
     return /* @__PURE__ */ e(
-      R,
+      H,
       {
         className: "IncodeCurpValidationPage",
-        title: a("curp.generate") ?? "Generate your CURP",
+        title: o("curp.generate") ?? "Generate your CURP",
         children: /* @__PURE__ */ e(
-          ae,
+          $e,
           {
-            form: t.form,
-            isValid: t.isValid,
-            onFormChange: (r) => d.setGenerateForm(r),
-            onGenerate: () => d.generate()
+            form: n.form,
+            isValid: n.isValid,
+            onFormChange: (r) => h.setGenerateForm(r),
+            onGenerate: () => h.generate()
           }
         )
       }
     );
-  if (t.status === "confirmCurp")
+  if (n.status === "confirmCurp")
     return /* @__PURE__ */ e(
-      R,
+      H,
       {
         className: "IncodeCurpValidationPage",
-        title: a("curp.status.confirm") ?? "Confirm your CURP",
+        title: o("curp.status.confirm") ?? "Confirm your CURP",
         children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpConfirm", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "text",
               class: "IncodeCurpConfirmInput",
-              value: t.curp,
+              value: n.curp,
               readOnly: !0,
-              "aria-label": a("curp.status.generatedCurp") ?? "Generated CURP"
+              "aria-label": o("curp.status.generatedCurp") ?? "Generated CURP"
             }
           ),
-          /* @__PURE__ */ e(L, {}),
+          /* @__PURE__ */ e(S, {}),
           /* @__PURE__ */ e(
-            E,
+            N,
             {
               type: "button",
-              onClick: () => d.confirmGenerated(),
+              onClick: () => h.confirmGenerated(),
               "data-testid": "curp-confirm",
-              children: a("curp.continue") ?? "Continue"
+              children: o("curp.continue") ?? "Continue"
             }
           )
         ] })
       }
     );
-  if (t.status === "success")
-    return /* @__PURE__ */ e(R, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpSuccess", children: [
-      /* @__PURE__ */ e(T, { size: 32 }),
-      /* @__PURE__ */ e(L, { size: 16 }),
-      /* @__PURE__ */ e("h2", { class: "IncodeCurpSuccessTitle", children: a("curp.status.verified") ?? "Verified" })
+  if (n.status === "success")
+    return /* @__PURE__ */ e(H, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpSuccess", children: [
+      /* @__PURE__ */ e(K, { size: 32 }),
+      /* @__PURE__ */ e(S, { size: 16 }),
+      /* @__PURE__ */ e("h2", { class: "IncodeCurpSuccessTitle", children: o("curp.status.verified") ?? "Verified" })
     ] }) });
-  if (t.status === "failure" || t.status === "generateError") {
-    const r = t.retriesLeft > 0, C = t.status === "failure" ? a("curp.status.notVerified") ?? "Not verified" : a("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
-    return /* @__PURE__ */ e(R, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpFailure", children: [
-      /* @__PURE__ */ e(L, {}),
-      /* @__PURE__ */ e(x, { size: 32 }),
-      /* @__PURE__ */ e(L, { size: 16 }),
-      /* @__PURE__ */ e("h2", { class: "IncodeCurpFailureTitle", children: C }),
-      t.status === "generateError" && r && /* @__PURE__ */ e(F, { children: [
-        /* @__PURE__ */ e(L, { size: 12 }),
-        /* @__PURE__ */ e("p", { class: "IncodeCurpFailureHint", children: a("curp.status.checkInfo") ?? "Please check your information" })
+  if (n.status === "failure" || n.status === "generateError") {
+    const r = n.retriesLeft > 0, I = n.status === "failure" ? o("curp.status.notVerified") ?? "Not verified" : o("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
+    return /* @__PURE__ */ e(H, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpFailure", children: [
+      /* @__PURE__ */ e(S, {}),
+      /* @__PURE__ */ e(Z, { size: 32 }),
+      /* @__PURE__ */ e(S, { size: 16 }),
+      /* @__PURE__ */ e("h2", { class: "IncodeCurpFailureTitle", children: I }),
+      n.status === "generateError" && r && /* @__PURE__ */ e(ce, { children: [
+        /* @__PURE__ */ e(S, { size: 12 }),
+        /* @__PURE__ */ e("p", { class: "IncodeCurpFailureHint", children: o("curp.status.checkInfo") ?? "Please check your information" })
       ] }),
-      /* @__PURE__ */ e(L, {}),
-      r && /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(
-        E,
+      /* @__PURE__ */ e(S, {}),
+      r && /* @__PURE__ */ e(ce, { children: /* @__PURE__ */ e(
+        N,
         {
           type: "button",
-          onClick: () => d.retry(),
+          onClick: () => h.retry(),
           "data-testid": "curp-retry",
-          children: t.status === "failure" ? a("curp.status.tryAgain") ?? "Try again" : a("curp.status.edit") ?? "Edit information"
+          children: n.status === "failure" ? o("curp.status.tryAgain") ?? "Try again" : o("curp.status.edit") ?? "Edit information"
         }
       ) })
     ] }) });
   }
-  return t.status === "finished" ? (o?.(), null) : (t.status === "closed" && s?.(void 0), null);
-}, le = ({
-  config: n,
-  onFinish: o,
-  onError: s
-}) => /* @__PURE__ */ e(J, { children: n ? /* @__PURE__ */ e(
-  oe,
+  return n.status === "finished" ? (l?.(), null) : (n.status === "closed" && i?.(void 0), null);
+}, Ee = ({
+  config: t,
+  onFinish: l,
+  onError: i
+}) => /* @__PURE__ */ e(ke, { children: t ? /* @__PURE__ */ e(
+  xe,
   {
-    config: n,
-    onFinish: o,
-    onError: s
+    config: t,
+    onFinish: l,
+    onError: i
   }
 ) : null });
-j(le, "incode-curp-validation");
+be(Ee, "incode-curp-validation");
 export {
-  le as CurpValidation
+  Ee as CurpValidation
 };