@incodetech/welcome 1.85.0-20251103180248.0 → 1.85.0-20251103190408.0

package/dist/onBoarding.mjs

@@ -8372,7 +8372,7 @@ class MlWasmJSApi {
     );
   }
 }
-const MlWasmJSApi$1 = MlWasmJSApi.getInstance(), version$4 = "1.85.0-20251103180248.0";
+const MlWasmJSApi$1 = MlWasmJSApi.getInstance(), version$4 = "1.85.0-20251103190408.0";
 function e$2(Be, Le) {
   return function(Ye, tt) {
     return Object.prototype.hasOwnProperty.call(Ye, tt);
@@ -26573,7 +26573,7 @@ const FlexCenter = (Be) => /* @__PURE__ */ jsx$1(Flex, { justify: "center", alig
         -webkit-appearance: none;
         -moz-appearance: textfield;
         color: ${(Be) => Be.color || Be.tokens.input.primary.text.field.default};
-        padding-right: ${(Be) => Be.tokens.spacing[9] || "44px"}; /* make room for your icon */
+        padding-right: ${(Be) => Be.tokens.spacing[9] || "44px"};
         min-height: 57px;
     }
     &[type='date']::-webkit-calendar-picker-indicator {
@@ -26590,6 +26590,7 @@ const FlexCenter = (Be) => /* @__PURE__ */ jsx$1(Flex, { justify: "center", alig
     &[type='date']:focus,
     &[type='date'][data-has-value='true'] {
         color: ${(Be) => Be.color || Be.tokens.input.primary.text.field.default};
+        outline-color: #3db0f7 !important;
     }
 `, Input$c = forwardRef(
   (Be, Le) => {
@@ -27766,161 +27767,185 @@ const FlexCenter = (Be) => /* @__PURE__ */ jsx$1(Flex, { justify: "center", alig
     helper: ht,
     showErrorIcon: gt,
     showHelperIcon: At,
-    enterKeyHint: xt,
-    tabIndex: yt,
-    onKeyDown: Ct
+    tabIndex: xt,
+    onKeyDown: yt,
+    enterKeyHint: Ct
   }, Et) => {
-    const vt = useTokens(), [kt, bt] = useState(!1), wt = useRef(null), It = useRef(null), Tt = useRef(
-      null
-    ), Rt = nt.find((Dt) => Dt.value === Ye);
-    useEffect(() => {
-      const Dt = (Ot) => {
-        wt.current && !wt.current.contains(Ot.target) && bt(!1);
-      };
-      return document.addEventListener("mousedown", Dt), document.addEventListener("touchstart", Dt), () => {
-        document.removeEventListener("mousedown", Dt), document.removeEventListener("touchstart", Dt);
-      };
-    }, []);
-    const Bt = () => {
-      bt(!kt);
-    }, Pt = (Dt) => {
-      tt == null || tt(Dt), bt(!1);
+    const vt = useTokens(), [kt, bt] = useState(!1), [wt, It] = useState(!1), Tt = useRef(null), Rt = useRef(null), Bt = useRef(null);
+    useImperativeHandle(Et, () => Rt.current), useEffect(() => {
+      kt && Bt.current && setTimeout(() => {
+        var $t;
+        ($t = Bt.current) == null || $t.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "nearest"
+        });
+      }, 100);
+    }, [kt]);
+    const Pt = nt.find(($t) => $t.value === Ye), Dt = () => {
+      bt(($t) => !$t);
+    }, Ot = ($t) => {
+      tt == null || tt($t), bt(!1);
+    }, Lt = () => {
+      It(!0);
     };
-    return /* @__PURE__ */ jsxs(Box, { wFull: !0, maxW: "420px", ref: wt, position: "relative", children: [
-      Be && /* @__PURE__ */ jsx$1(
-        Text$8,
-        {
-          fontWeight: 700,
-          as: "label",
-          color: vt.input.primary.text.label.default,
-          mb: vt.spacing[2],
-          display: "inline-block",
-          fontSize: "14px",
-          children: Be
-        }
-      ),
-      /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
-        /* @__PURE__ */ jsxs(Flex, { wFull: !0, position: "relative", align: "center", children: [
-          /* @__PURE__ */ jsx$1(
-            Box,
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        wFull: !0,
+        maxW: "420px",
+        ref: Tt,
+        position: "relative",
+        onBlur: ($t) => {
+          var qt;
+          It(!1), (qt = Tt.current) != null && qt.contains($t.relatedTarget) || bt(!1);
+        },
+        children: [
+          Be && /* @__PURE__ */ jsx$1(
+            Text$8,
             {
-              as: "input",
-              ref: (Dt) => {
-                Tt.current = Dt, typeof Et == "function" ? Et(Dt) : Et && (Et.current = Dt);
-              },
-              type: "text",
-              readOnly: !0,
-              value: (Rt == null ? void 0 : Rt.label) || "",
-              placeholder: Le,
-              wFull: !0,
-              p: vt.spacing[4],
-              pr: "48px",
-              backgroundColor: ft ? void 0 : vt.input.primary.surface.default,
-              borderWidth: "1px",
-              borderColor: ft ? vt.input.primary.border.negative : vt.input.primary.border.default,
-              borderRadius: vt.spacing[2],
-              onClick: Bt,
-              onKeyDown: Ct,
-              color: Rt ? vt.input.primary.text.field.default : vt.input.primary.text.field.placeholder,
-              fontSize: vt.typography.fontSize.lg,
-              enterKeyHint: xt,
-              tabIndex: yt,
-              style: {
-                cursor: "pointer"
-              }
+              fontWeight: 700,
+              as: "label",
+              color: vt.input.primary.text.label.default,
+              mb: vt.spacing[2],
+              display: "inline-block",
+              fontSize: "14px",
+              children: Be
             }
           ),
-          /* @__PURE__ */ jsx$1(
-            Box,
-            {
-              position: "absolute",
-              right: vt.spacing[4],
-              display: "flex",
-              align: "center",
-              onClick: Bt,
-              style: {
-                cursor: "pointer"
-              },
-              children: kt ? /* @__PURE__ */ jsx$1(UpArrow, {}) : /* @__PURE__ */ jsx$1(DownArrow, {})
-            }
-          )
-        ] }),
-        kt && /* @__PURE__ */ jsx$1(
-          Flex,
-          {
-            as: "ul",
-            position: "absolute",
-            top: "100%",
-            left: "0",
-            right: "0",
-            zIndex: 10,
-            direction: "column",
-            backgroundColor: vt.input.primary.surface.default,
-            borderWidth: "1px",
-            borderColor: ft ? vt.input.primary.border.negative : vt.input.primary.border.default,
-            overflow: "scroll",
-            ref: It,
-            maxH: "320px",
-            mt: "8px",
-            borderRadius: vt.spacing[2],
-            children: nt.map((Dt) => {
-              const Ot = Ye === Dt.value;
-              return /* @__PURE__ */ jsx$1(
-                Flex,
-                {
-                  as: "li",
-                  p: vt.spacing[4],
-                  backgroundColor: Ot ? vt.color.surface.secondary[100] : "transparent",
-                  onClick: () => Pt(Dt.value),
-                  onMouseEnter: (Lt) => {
-                    Ot || (Lt.currentTarget.style.backgroundColor = vt.color.surface.secondary[50]);
-                  },
-                  onMouseLeave: (Lt) => {
-                    Ot || (Lt.currentTarget.style.backgroundColor = "transparent");
-                  },
-                  children: /* @__PURE__ */ jsx$1(
+          /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: Rt,
+                type: "button",
+                onClick: Dt,
+                onFocus: Lt,
+                onKeyDown: yt,
+                tabIndex: xt ?? 0,
+                "aria-haspopup": "listbox",
+                "aria-expanded": kt,
+                style: {
+                  width: "100%",
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "center",
+                  padding: vt.spacing[4],
+                  paddingRight: "48px",
+                  backgroundColor: ft ? "transparent" : wt ? vt.input.primary.surface.active : vt.input.primary.surface.default,
+                  border: `1px solid ${ft ? vt.input.primary.border.negative : wt ? "transparent" : vt.input.primary.border.default}`,
+                  borderRadius: vt.spacing[2],
+                  fontSize: vt.typography.fontSize.lg,
+                  color: vt.input.primary.text.field.default,
+                  cursor: "pointer",
+                  userSelect: "none",
+                  textAlign: "left",
+                  fontFamily: "inherit",
+                  outline: wt ? "2px solid #3db0f7" : "none",
+                  outlineOffset: wt ? "2px" : "0"
+                },
+                children: [
+                  /* @__PURE__ */ jsx$1(
                     Text$8,
                     {
-                      color: vt.input.primary.text.field.default,
+                      color: Pt ? vt.input.primary.text.field.default : vt.input.primary.text.field.placeholder,
                       fontSize: vt.typography.fontSize.lg,
-                      children: Dt.label
+                      children: (Pt == null ? void 0 : Pt.label) || Le
+                    }
+                  ),
+                  /* @__PURE__ */ jsx$1(
+                    Box,
+                    {
+                      position: "absolute",
+                      right: vt.spacing[4],
+                      display: "flex",
+                      align: "center",
+                      style: { pointerEvents: "none" },
+                      children: kt ? /* @__PURE__ */ jsx$1(UpArrow, {}) : /* @__PURE__ */ jsx$1(DownArrow, {})
                     }
                   )
+                ]
+              }
+            ),
+            kt && /* @__PURE__ */ jsx$1(
+              Box,
+              {
+                ref: Bt,
+                position: "absolute",
+                top: "100%",
+                left: "0",
+                right: "0",
+                zIndex: 10,
+                backgroundColor: vt.input.primary.surface.default,
+                borderWidth: "1px",
+                borderColor: ft ? vt.input.primary.border.negative : vt.input.primary.border.default,
+                borderRadius: vt.spacing[2],
+                mt: "8px",
+                maxH: "320px",
+                overflow: "auto",
+                style: {
+                  boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
                 },
-                Dt.value
-              );
-            })
-          }
-        )
-      ] }),
-      ft && /* @__PURE__ */ jsxs(Flex, { mt: vt.spacing[2], align: "center", children: [
-        gt && /* @__PURE__ */ jsx$1(Box, { display: "inline-block", mr: vt.spacing[2], children: /* @__PURE__ */ jsx$1(ErrorIcon$1, { size: "17" }) }),
-        /* @__PURE__ */ jsx$1(
-          Text$8,
-          {
-            display: "inline-block",
-            as: "p",
-            my: "auto",
-            color: vt.input.primary.text.helper.negative,
-            children: ft
-          }
-        )
-      ] }),
-      ht && /* @__PURE__ */ jsxs(Flex, { mt: vt.spacing[2], align: "center", children: [
-        At && /* @__PURE__ */ jsx$1(Box, { display: "inline-block", mr: vt.spacing[2], children: /* @__PURE__ */ jsx$1(SuccessIcon$1, { size: "17" }) }),
-        /* @__PURE__ */ jsx$1(
-          Text$8,
-          {
-            display: "inline-block",
-            as: "p",
-            my: "auto",
-            fontWeight: 400,
-            color: vt.input.primary.text.helper.default,
-            children: ht
-          }
-        )
-      ] })
-    ] });
+                children: nt.map(($t) => /* @__PURE__ */ jsx$1(
+                  Box,
+                  {
+                    p: vt.spacing[4],
+                    onClick: () => Ot($t.value),
+                    onMouseDown: (qt) => qt.preventDefault(),
+                    style: {
+                      cursor: "pointer",
+                      backgroundColor: Ye === $t.value ? vt.color.surface.secondary[100] : "transparent"
+                    },
+                    onMouseEnter: (qt) => {
+                      Ye !== $t.value && (qt.currentTarget.style.backgroundColor = vt.color.surface.secondary[50]);
+                    },
+                    onMouseLeave: (qt) => {
+                      Ye !== $t.value && (qt.currentTarget.style.backgroundColor = "transparent");
+                    },
+                    children: /* @__PURE__ */ jsx$1(
+                      Text$8,
+                      {
+                        color: vt.input.primary.text.field.default,
+                        fontSize: vt.typography.fontSize.lg,
+                        children: $t.label
+                      }
+                    )
+                  },
+                  $t.value
+                ))
+              }
+            )
+          ] }),
+          ft && /* @__PURE__ */ jsxs(Flex, { mt: vt.spacing[2], align: "center", children: [
+            gt && /* @__PURE__ */ jsx$1(Box, { display: "inline-block", mr: vt.spacing[2], children: /* @__PURE__ */ jsx$1(ErrorIcon$1, { size: "17" }) }),
+            /* @__PURE__ */ jsx$1(
+              Text$8,
+              {
+                display: "inline-block",
+                as: "p",
+                my: "auto",
+                color: vt.input.primary.text.helper.negative,
+                children: ft
+              }
+            )
+          ] }),
+          ht && /* @__PURE__ */ jsxs(Flex, { mt: vt.spacing[2], align: "center", children: [
+            At && /* @__PURE__ */ jsx$1(Box, { display: "inline-block", mr: vt.spacing[2], children: /* @__PURE__ */ jsx$1(SuccessIcon$1, { size: "17" }) }),
+            /* @__PURE__ */ jsx$1(
+              Text$8,
+              {
+                display: "inline-block",
+                as: "p",
+                my: "auto",
+                fontWeight: 400,
+                color: vt.input.primary.text.helper.default,
+                children: ht
+              }
+            )
+          ] })
+        ]
+      }
+    );
   }
 ), Subtitle$6 = ({ children: Be, ...Le }) => {
   const Ye = useTokens();
@@ -150309,42 +150334,29 @@ const SynchronizedInputGroup = styled.div`
   }
 ), DateInput = forwardRef(
   ({ value: Be, onChange: Le, label: Ye, ...tt }, nt) => {
-    const ft = useRef(null), ht = () => {
-      var gt, At;
-      (gt = ft.current) != null && gt.showPicker ? ft.current.showPicker() : (At = ft.current) == null || At.focus();
-    };
+    const ft = useRef(null);
     return /* @__PURE__ */ jsxs(Box, { position: "relative", wFull: !0, maxW: "420px", children: [
       /* @__PURE__ */ jsx$1(
         InputComposed,
         {
-          ref: (gt) => {
-            ft.current = gt, typeof nt == "function" ? nt(gt) : nt && (nt.current = gt);
+          ref: (ht) => {
+            ft.current = ht, typeof nt == "function" ? nt(ht) : nt && (nt.current = ht);
           },
-          className: "ds-date-input",
           label: Ye,
           type: "date",
           value: Be,
           onChange: Le,
-          style: { paddingRight: "44px" },
           ...tt
         }
       ),
       /* @__PURE__ */ jsx$1(
         Box,
         {
-          as: "button",
-          type: "button",
-          onClick: ht,
           position: "absolute",
           right: "16px",
           top: "65%",
           transform: "translateY(-50%)",
-          background: "transparent",
-          border: "none",
-          p: 0,
-          cursor: "pointer",
-          "aria-label": "Open date picker",
-          style: { zIndex: 1 },
+          style: { pointerEvents: "none", zIndex: 1 },
           children: /* @__PURE__ */ jsx$1(CalendarIcon, {})
         }
       )
@@ -285140,107 +285152,96 @@ const GenerateCurp = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: 10 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Title$p, { children: tt("curp.generate") }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: 8 }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Flex,
-      {
-        direction: "column",
-        hFull: !0,
-        wFull: !0,
-        gap: 4,
-        align: "center",
-        overflow: "auto",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            InputComposed,
-            {
-              ref: Bt,
-              label: tt("curp.labels.firstName"),
-              placeholder: tt("curp.placeholder.firstName"),
-              value: nt,
-              onChange: (Xt) => ft(Xt.target.value),
-              onKeyDown: (Xt) => Ft(Xt, Pt),
-              enterKeyHint: "next"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            InputComposed,
-            {
-              ref: Pt,
-              label: tt("curp.labels.firstLast"),
-              placeholder: tt("curp.placeholder.firstLast"),
-              value: ht,
-              onChange: (Xt) => gt(Xt.target.value),
-              onKeyDown: (Xt) => Ft(Xt, Dt),
-              enterKeyHint: "next"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            InputComposed,
-            {
-              ref: Dt,
-              label: tt("curp.placeholder.firstLast"),
-              placeholder: tt("curp.placeholder.secondLast"),
-              value: At,
-              onChange: (Xt) => xt(Xt.target.value),
-              onKeyDown: (Xt) => Ft(Xt, Ot),
-              enterKeyHint: "next"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DropdownComposed,
-            {
-              ref: Ot,
-              label: tt("curp.labels.genderV2"),
-              placeholder: tt("curp.placeholder.gender"),
-              value: yt,
-              onChange: Ct,
-              options: [
-                { value: "H", label: tt("curp.labels.maleV2") },
-                { value: "M", label: tt("curp.labels.femaleV2") },
-                { value: "X", label: tt("curp.labels.other") }
-              ],
-              onKeyDown: (Xt) => Ft(Xt, Lt),
-              enterKeyHint: "next"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DateInput,
-            {
-              ref: Lt,
-              label: tt("curp.labels.dob"),
-              value: Et,
-              onChange: (Xt) => vt(Xt.target.value),
-              onKeyDown: (Xt) => Ft(Xt, Wt),
-              max: formatInputDate((/* @__PURE__ */ new Date()).toISOString()),
-              enterKeyHint: "next"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DropdownComposed,
-            {
-              ref: Wt,
-              label: tt("curp.labels.birthState"),
-              placeholder: tt("curp.placeholder.state"),
-              value: kt,
-              onChange: bt,
-              options: states,
-              onKeyDown: (Xt) => Ft(Xt, null, !0),
-              enterKeyHint: "done"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button$b,
-            {
-              disabled: !$t,
-              onClick: Ht,
-              mb: 4,
-              type: "button",
-              children: tt("curp.generateCta")
-            }
-          )
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { direction: "column", hFull: !0, wFull: !0, gap: 4, align: "center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        InputComposed,
+        {
+          ref: Bt,
+          label: tt("curp.labels.firstName"),
+          placeholder: tt("curp.placeholder.firstName"),
+          value: nt,
+          onChange: (Xt) => ft(Xt.target.value),
+          onKeyDown: (Xt) => Ft(Xt, Pt),
+          enterKeyHint: "next"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        InputComposed,
+        {
+          ref: Pt,
+          label: tt("curp.labels.firstLast"),
+          placeholder: tt("curp.placeholder.firstLast"),
+          value: ht,
+          onChange: (Xt) => gt(Xt.target.value),
+          onKeyDown: (Xt) => Ft(Xt, Dt),
+          enterKeyHint: "next"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        InputComposed,
+        {
+          ref: Dt,
+          label: tt("curp.placeholder.firstLast"),
+          placeholder: tt("curp.placeholder.secondLast"),
+          value: At,
+          onChange: (Xt) => xt(Xt.target.value),
+          onKeyDown: (Xt) => Ft(Xt, Ot),
+          enterKeyHint: "next"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DropdownComposed,
+        {
+          ref: Ot,
+          label: tt("curp.labels.genderV2"),
+          placeholder: tt("curp.placeholder.gender"),
+          value: yt,
+          onChange: Ct,
+          options: [
+            { value: "H", label: tt("curp.labels.maleV2") },
+            { value: "M", label: tt("curp.labels.femaleV2") },
+            { value: "X", label: tt("curp.labels.other") }
+          ],
+          onKeyDown: (Xt) => Ft(Xt, Lt),
+          enterKeyHint: "next"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DateInput,
+        {
+          ref: Lt,
+          label: tt("curp.labels.dob"),
+          value: Et,
+          onChange: (Xt) => vt(Xt.target.value),
+          onKeyDown: (Xt) => Ft(Xt, Wt),
+          max: formatInputDate((/* @__PURE__ */ new Date()).toISOString()),
+          enterKeyHint: "next"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DropdownComposed,
+        {
+          ref: Wt,
+          label: tt("curp.labels.birthState"),
+          placeholder: tt("curp.placeholder.state"),
+          value: kt,
+          onChange: bt,
+          options: states,
+          onKeyDown: (Xt) => Ft(Xt, null, !0),
+          enterKeyHint: "done"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button$b,
+        {
+          disabled: !$t,
+          onClick: Ht,
+          mb: 4,
+          type: "button",
+          children: tt("curp.generateCta")
+        }
+      )
+    ] })
   ] }) });
 }, EnterCurpV2 = ({ token: Be, uiConfig: Le = {}, onSuccess: Ye }) => {
   const { t: tt } = useTranslation$1(), [nt, ft] = useState(""), [ht, gt] = useState(!1), [At, xt] = useState("idle"), yt = isValidCurp(nt), Ct = async () => {
@@ -366726,7 +366727,7 @@ function SelfieModule({
           }), Et === "PERMISSION_DENIED" && ft({
             type: "PERMISSION_DENIED",
             message: "Permission denied"
-          });
+          }), gt("process");
         },
         session: { token: Le },
         captureConfig: yt,