@incodetech/web 0.0.0-dev-20260316-0522f9e → 0.0.0-dev-20260317-6ffceac

package/dist/{addressAutocomplete-CL7IcYGQ.js → addressAutocomplete-3u5x8ZFs.js}

@@ -1,8 +1,8 @@
 import { d, y as M, A as H, q as F } from "./vendor-preact-BXf0bkEs.js";
 import { b as K, u as l } from "./button-Ca1tRSTI.js";
 import "./uiConfig-Z6RT23Sl.js";
-import { t as Q } from "./formField-B2HDj15w.js";
-import { I as R } from "./dropdownComposed-DBm7cotT.js";
+import { t as Q } from "./formField-UWsp-7Fj.js";
+import { I as R } from "./inputComposed-BHi-MSpP.js";
 import "@incodetech/core";
 import { u as q } from "./useMediaQuery-CiSMgDyi.js";
 function G(c, f) {

package/dist/base.css

@@ -374,7 +374,13 @@
 }
 .IncodeButton.IncodeButtonLink:not(.IncodeButtonLoading):disabled {
   cursor: not-allowed;
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-m-size);
+  font-weight: var(--typography-button-m-weight);
+  line-height: var(--typography-button-m-line-height);
+  letter-spacing: var(--typography-button-m-letter-spacing);
   color: var(--color-button-tertiary-text-disabled, var(--button-tertiary-text-disabled));
+  text-decoration-line: none;
 }
 .IncodeButton.IncodeButtonLink.IncodeButtonLoading {
   pointer-events: none;
@@ -547,6 +553,8 @@
   background-color: var(--color-input-surface-active, var(--input-surface-active));
 }
 .IncodeInput[aria-invalid="true"] {
+  border-style: var(--tw-border-style);
+  border-width: 2px;
   border-color: var(--color-input-border-negative, var(--input-border-negative));
 }
 .IncodeInput[type="date"] {
@@ -628,15 +636,17 @@
   display: flex;
 }
 .IncodeInputComposedIconWrapper {
-  margin-right: var(--spacing-8, var(--spacing-8, 8px));
+  margin-right: var(--spacing-4, var(--spacing-4, 4px));
   display: inline-block;
 }
 .IncodeInputComposedError {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-normal, 400);
-  font-weight: var(--font-weight-normal, 400);
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
   font-family: inherit;
   display: inline-block;
 }
@@ -882,13 +892,66 @@
   font-family: inherit;
   display: inline-block;
 }
-.IncodePhoneInputComposed .IncodeDropdownComposedTrigger {
+.IncodePhoneInputComposed {
+  width: 100%;
+  max-width: 420px;
+  position: relative;
+}
+.IncodePhoneInputComposedLabel {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
+  font-family: var(--typography-label-family);
+  font-size: var(--typography-label-m-size);
+  font-weight: var(--typography-label-m-weight);
+  line-height: var(--typography-label-m-line-height);
+  letter-spacing: var(--typography-label-m-letter-spacing);
+  display: inline-block;
+}
+.IncodePhoneInputComposedRequired {
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+}
+.IncodePhoneInputComposedDropdown {
+  max-width: none;
+}
+.IncodePhoneInputComposedDropdown .IncodeDropdownComposedTrigger {
   flex-shrink: 0;
   width: auto;
+  min-width: 120px;
 }
-.IncodePhoneInputComposed .IncodeDropdownComposedSibling .IncodeInputComposed, .IncodePhoneInputComposed .IncodeDropdownComposedSibling .IncodeInput {
+.IncodePhoneInputComposedDropdown .IncodeDropdownComposedSibling .IncodeInputComposed, .IncodePhoneInputComposedDropdown .IncodeDropdownComposedSibling .IncodeInput {
   max-width: none;
 }
+.IncodePhoneInputComposedErrorWrapper, .IncodePhoneInputComposedHelperWrapper {
+  margin-top: var(--spacing-8, var(--spacing-8, 8px));
+  align-items: center;
+  display: flex;
+}
+.IncodePhoneInputComposedIconWrapper {
+  margin-right: var(--spacing-8, var(--spacing-8, 8px));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.IncodePhoneInputComposedError {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+  display: inline-block;
+}
+.IncodePhoneInputComposedHelper {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-default, var(--input-text-helper-default));
+  display: inline-block;
+}
 .IncodeOtpInput {
   flex-direction: column;
   flex: 1;
@@ -902,64 +965,6 @@
   width: 100%;
   display: flex;
 }
-.IncodeOtpInputBoxes {
-  justify-content: center;
-  gap: var(--spacing-4, var(--spacing-4, 4px));
-  max-width: 100%;
-  display: flex;
-}
-@media (min-width: 400px) {
-  .IncodeOtpInputBoxes {
-    gap: var(--spacing-12, var(--spacing-12, 12px));
-  }
-}
-.IncodeOtpInputBox {
-  text-align: center;
-  width: 48px;
-  height: 48px;
-  font-size: var(--text-24, var(--primitive-typography-size-24));
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-input-surface-default, var(--input-surface-default));
-  color: var(--color-input-text-field-default, var(--input-text-field-default));
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
-  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
-  --tw-duration: .2s;
-  --tw-outline-style: none;
-  outline-style: none;
-  flex-shrink: 0;
-  font-family: inherit;
-  transition-duration: .2s;
-}
-@media (min-width: 400px) {
-  .IncodeOtpInputBox {
-    width: 56px;
-    height: 56px;
-  }
-}
-.IncodeOtpInputBoxes:focus-within .IncodeOtpInputBox {
-  border-style: var(--tw-border-style);
-  border-width: 2px;
-  border-color: var(--color-input-border-active, var(--input-border-active));
-  background-color: var(--color-input-surface-active, var(--input-surface-active));
-}
-.IncodeOtpInputBoxes.IncodeOtpInputBoxesError .IncodeOtpInputBox {
-  border-color: var(--color-input-border-negative, var(--input-border-negative));
-}
-.IncodeOtpInputBox::placeholder {
-  color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
-}
-.IncodeOtpInputBox:disabled {
-  border-color: var(--color-input-border-disabled, var(--input-border-disabled));
-  background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
-  cursor: not-allowed;
-  color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
-}
 .IncodeOtpInputError {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   text-align: center;
@@ -974,14 +979,6 @@
   width: 100%;
   display: flex;
 }
-.IncodeOtpInputTimer {
-  margin: var(--spacing-0, var(--spacing-none, 0px));
-  text-align: center;
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-normal, 400);
-  font-weight: var(--font-weight-normal, 400);
-  color: var(--color-text-body-tertiary, var(--text-body-300-tertiary));
-}
 .IncodeOtpInputResendText {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   text-align: center;
@@ -1013,6 +1010,17 @@
   cursor: not-allowed;
   color: var(--color-text-body-tertiary, var(--text-body-300-tertiary));
 }
+.IncodeOtpInputComposed {
+  width: 100%;
+}
+.IncodeOtpInputComposed .IncodeOtpSingleInput input {
+  text-align: center;
+  font-family: var(--typography-input-dropdown-family);
+  font-size: var(--typography-input-dropdown-l-size);
+  font-weight: var(--typography-input-dropdown-l-weight);
+  line-height: var(--typography-input-dropdown-l-line-height);
+  letter-spacing: var(--typography-input-dropdown-l-letter-spacing);
+}
 .IncodePageContainer {
   background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
   width: 100%;

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

@@ -8,20 +8,21 @@ import { S as D } from "../successIcon-BybULRRU.js";
 import { P as p } from "../page-BVHG3h0V.js";
 import { S as k } from "../spinner-Cx3FPUCD.js";
 import { r as E } from "../incodeModule-aE-LkKwM.js";
-import { I as C, D as P } from "../dropdownComposed-DBm7cotT.js";
+import { I as C } from "../inputComposed-BHi-MSpP.js";
 import { D as F } from "../dateInputComposed-CvFmQpJ0.js";
+import { D as P } from "../dropdownComposed-B5ZuQS8C.js";
 const T = ({
   curp: s,
   isValid: d,
   onCurpChange: o,
-  onVerify: r,
+  onVerify: a,
   onSwitchToGenerate: t,
-  disabled: l = !1,
-  placeholder: a,
+  disabled: i = !1,
+  placeholder: r,
   continueLabel: m,
   dontHaveLabel: n
 }) => {
-  const { t: c } = I(), f = a ?? c("curp.placeholder.curp") ?? "CURP", g = m ?? c("curp.continue") ?? "Continue", i = n ?? c("curp.dontHave") ?? "I don't have my CURP", b = c("curp.placeholder.curp") ?? "CURP";
+  const { t: c } = I(), f = r ?? c("curp.placeholder.curp") ?? "CURP", g = m ?? c("curp.continue") ?? "Continue", l = n ?? c("curp.dontHave") ?? "I don't have my CURP", b = c("curp.placeholder.curp") ?? "CURP";
   return /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpInput", children: [
     /* @__PURE__ */ e(
       C,
@@ -34,7 +35,7 @@ const T = ({
           o(L.value.toUpperCase());
         },
         placeholder: f,
-        disabled: l,
+        disabled: i,
         maxLength: 18,
         "aria-label": b
       }
@@ -44,8 +45,8 @@ const T = ({
       h,
       {
         type: "button",
-        onClick: r,
-        disabled: !d || l,
+        onClick: a,
+        disabled: !d || i,
         "data-testid": "curp-verify",
         children: g
       }
@@ -55,10 +56,10 @@ const T = ({
       {
         type: "button",
         onClick: t,
-        disabled: l,
+        disabled: i,
         "data-testid": "curp-switch-to-generate",
         class: "IncodeCurpInputDontHaveButton",
-        children: i
+        children: l
       }
     )
   ] });
@@ -66,33 +67,33 @@ const T = ({
   form: s,
   isValid: d,
   onFormChange: o,
-  onGenerate: r,
+  onGenerate: a,
   disabled: t = !1,
-  labels: l
+  labels: i
 }) => {
-  const { t: a } = I(), n = { ...{
-    firstName: a("curp.labels.firstName") ?? "Your First name",
-    firstLast: a("curp.labels.firstLast") ?? "Your First last name",
-    secondLast: a("curp.labels.secondLast") ?? "Your Second last name",
-    gender: a("curp.labels.genderV2") ?? "Gender",
-    genderPlaceholder: a("curp.placeholder.gender") ?? "Choose gender",
-    male: a("curp.labels.maleV2") ?? "Male",
-    female: a("curp.labels.femaleV2") ?? "Female",
-    other: a("curp.labels.other") ?? "Other",
-    dob: a("curp.labels.dob") ?? "Date of birth",
-    birthState: a("curp.labels.birthState") ?? "State of birth",
-    statePlaceholder: a("curp.placeholder.state") ?? "Select state",
-    generate: a("curp.generateCta") ?? "Generate CURP"
-  }, ...l }, c = (i) => (b) => {
+  const { t: r } = I(), n = { ...{
+    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",
+    gender: r("curp.labels.genderV2") ?? "Gender",
+    genderPlaceholder: r("curp.placeholder.gender") ?? "Choose gender",
+    male: r("curp.labels.maleV2") ?? "Male",
+    female: r("curp.labels.femaleV2") ?? "Female",
+    other: r("curp.labels.other") ?? "Other",
+    dob: r("curp.labels.dob") ?? "Date of birth",
+    birthState: r("curp.labels.birthState") ?? "State of birth",
+    statePlaceholder: r("curp.placeholder.state") ?? "Select state",
+    generate: r("curp.generateCta") ?? "Generate CURP"
+  }, ...i }, c = (l) => (b) => {
     const v = b.target;
-    o({ [i]: v.value });
+    o({ [l]: v.value });
   }, f = [
     { value: "H", label: n.male },
     { value: "M", label: n.female },
     { value: "X", label: n.other }
-  ], g = G.map((i) => ({
-    value: i.value,
-    label: i.label
+  ], g = G.map((l) => ({
+    value: l.value,
+    label: l.label
   }));
   return /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeGenerateCurpForm", children: [
     /* @__PURE__ */ e(
@@ -138,7 +139,7 @@ const T = ({
         value: s.gender,
         options: f,
         disabled: t,
-        onChange: (i) => o({ gender: i }),
+        onChange: (l) => o({ gender: l }),
         "data-testid": "curp-gender"
       }
     ),
@@ -150,7 +151,7 @@ const T = ({
         value: s.birthDate,
         onInput: c("birthDate"),
         max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
-        placeholder: a("curp.placeholder.dob") ?? "mm/dd/yyyy",
+        placeholder: r("curp.placeholder.dob") ?? "mm/dd/yyyy",
         disabled: t,
         "data-testid": "curp-birth-date"
       }
@@ -164,7 +165,7 @@ const T = ({
         value: s.birthState,
         options: g,
         disabled: t,
-        onChange: (i) => o({ birthState: i }),
+        onChange: (l) => o({ birthState: l }),
         "data-testid": "curp-birth-state",
         searchable: !0
       }
@@ -174,7 +175,7 @@ const T = ({
       h,
       {
         type: "button",
-        onClick: r,
+        onClick: a,
         disabled: !d || t,
         "data-testid": "curp-generate",
         children: n.generate
@@ -186,32 +187,32 @@ const T = ({
   onFinish: d,
   onError: o
 }) => {
-  const { t: r } = I(), [t, l] = N(() => {
+  const { t: a } = I(), [t, i] = N(() => {
     if (!s)
       throw new Error("CURP validation config is required");
     return R({ config: s });
   });
   if (t.status === "idle" || t.status === "loading" || t.status === "verifying" || t.status === "generating") {
-    const a = t.status === "generating" ? r("curp.status.generating") ?? "Generating..." : r("curp.status.verifying") ?? "Verifying...";
-    return /* @__PURE__ */ e(p, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpLoading", children: /* @__PURE__ */ e(k, { title: a, fullScreen: !1 }) }) });
+    const r = t.status === "generating" ? a("curp.status.generating") ?? "Generating..." : a("curp.status.verifying") ?? "Verifying...";
+    return /* @__PURE__ */ e(p, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpLoading", children: /* @__PURE__ */ e(k, { title: r, fullScreen: !1 }) }) });
   }
   if (t.status === "enterCurp")
     return /* @__PURE__ */ e(
       p,
       {
         className: "IncodeCurpValidationPage",
-        title: r("curp.enterCurp") ?? "Enter your CURP",
+        title: a("curp.enterCurp") ?? "Enter your CURP",
         children: /* @__PURE__ */ e(
           T,
           {
             curp: t.curp,
             isValid: t.isValid,
-            onCurpChange: (a) => l.setCurp(a),
-            onVerify: () => l.verify(),
-            onSwitchToGenerate: () => l.switchToGenerate(),
-            placeholder: r("curp.placeholder.curp") ?? "CURP",
-            continueLabel: r("curp.continue") ?? "Continue",
-            dontHaveLabel: r("curp.dontHave") ?? "I don't have my CURP"
+            onCurpChange: (r) => i.setCurp(r),
+            onVerify: () => i.verify(),
+            onSwitchToGenerate: () => i.switchToGenerate(),
+            placeholder: a("curp.placeholder.curp") ?? "CURP",
+            continueLabel: a("curp.continue") ?? "Continue",
+            dontHaveLabel: a("curp.dontHave") ?? "I don't have my CURP"
           }
         )
       }
@@ -221,14 +222,14 @@ const T = ({
       p,
       {
         className: "IncodeCurpValidationPage",
-        title: r("curp.generate") ?? "Generate your CURP",
+        title: a("curp.generate") ?? "Generate your CURP",
         children: /* @__PURE__ */ e(
           w,
           {
             form: t.form,
             isValid: t.isValid,
-            onFormChange: (a) => l.setGenerateForm(a),
-            onGenerate: () => l.generate()
+            onFormChange: (r) => i.setGenerateForm(r),
+            onGenerate: () => i.generate()
           }
         )
       }
@@ -238,7 +239,7 @@ const T = ({
       p,
       {
         className: "IncodeCurpValidationPage",
-        title: r("curp.status.confirm") ?? "Confirm your CURP",
+        title: a("curp.status.confirm") ?? "Confirm your CURP",
         children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpConfirm", children: [
           /* @__PURE__ */ e(
             "input",
@@ -247,7 +248,7 @@ const T = ({
               class: "IncodeCurpConfirmInput",
               value: t.curp,
               readOnly: !0,
-              "aria-label": r("curp.status.generatedCurp") ?? "Generated CURP"
+              "aria-label": a("curp.status.generatedCurp") ?? "Generated CURP"
             }
           ),
           /* @__PURE__ */ e(u, {}),
@@ -255,9 +256,9 @@ const T = ({
             h,
             {
               type: "button",
-              onClick: () => l.confirmGenerated(),
+              onClick: () => i.confirmGenerated(),
               "data-testid": "curp-confirm",
-              children: r("curp.continue") ?? "Continue"
+              children: a("curp.continue") ?? "Continue"
             }
           )
         ] })
@@ -267,27 +268,27 @@ const T = ({
     return /* @__PURE__ */ e(p, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpSuccess", children: [
       /* @__PURE__ */ e(D, { size: 32 }),
       /* @__PURE__ */ e(u, { size: 16 }),
-      /* @__PURE__ */ e("h2", { class: "IncodeCurpSuccessTitle", children: r("curp.status.verified") ?? "Verified" })
+      /* @__PURE__ */ e("h2", { class: "IncodeCurpSuccessTitle", children: a("curp.status.verified") ?? "Verified" })
     ] }) });
   if (t.status === "failure" || t.status === "generateError") {
-    const a = t.retriesLeft > 0, m = t.status === "failure" ? r("curp.status.notVerified") ?? "Not verified" : r("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
+    const r = t.retriesLeft > 0, m = t.status === "failure" ? a("curp.status.notVerified") ?? "Not verified" : a("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
     return /* @__PURE__ */ e(p, { className: "IncodeCurpValidationPage", children: /* @__PURE__ */ e("div", { class: "IncodeCurpValidation IncodeCurpFailure", children: [
       /* @__PURE__ */ e(u, {}),
       /* @__PURE__ */ e(U, { size: 32 }),
       /* @__PURE__ */ e(u, { size: 16 }),
       /* @__PURE__ */ e("h2", { class: "IncodeCurpFailureTitle", children: m }),
-      t.status === "generateError" && a && /* @__PURE__ */ e(y, { children: [
+      t.status === "generateError" && r && /* @__PURE__ */ e(y, { children: [
         /* @__PURE__ */ e(u, { size: 12 }),
-        /* @__PURE__ */ e("p", { class: "IncodeCurpFailureHint", children: r("curp.status.checkInfo") ?? "Please check your information" })
+        /* @__PURE__ */ e("p", { class: "IncodeCurpFailureHint", children: a("curp.status.checkInfo") ?? "Please check your information" })
       ] }),
       /* @__PURE__ */ e(u, {}),
-      a && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+      r && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
         h,
         {
           type: "button",
-          onClick: () => l.retry(),
+          onClick: () => i.retry(),
           "data-testid": "curp-retry",
-          children: t.status === "failure" ? r("curp.status.tryAgain") ?? "Try again" : r("curp.status.edit") ?? "Edit information"
+          children: t.status === "failure" ? a("curp.status.tryAgain") ?? "Try again" : a("curp.status.edit") ?? "Edit information"
         }
       ) })
     ] }) });