@incodetech/web 0.0.0-dev-20260504-dd4a501 → 0.0.0-dev-20260504-b9c5622

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/curp-validation/curp-validation.es.js +158 -157
  2. package/dist/curp-validation/styles.css +34 -103
  3. package/dist/flow/styles.css +34 -71
  4. package/dist/themes/dark.css +1 -0
  5. package/dist/themes/light.css +1 -0
  6. package/dist/workflow/styles.css +34 -71
  7. package/package.json +2 -2
package/dist/curp-validation/curp-validation.es.js CHANGED
@@ -1,273 +1,274 @@
1
1
  import { n as e } from "../i18n-D6pCC7RL.js";
2
- import { S as t, v as n } from "../vendor-preact-D6SntenC.js";
3
- import { i as r } from "../hooks-K-ks8TCv.js";
4
- import { t as i } from "../incodeComponent-Brc9IhMv.js";
5
- import { t as a } from "../spacer-DCljE53A.js";
6
- import { t as o } from "../page-D5Mt-0zn.js";
7
- import { t as s } from "../spinner-CNteWaxs.js";
8
- import "../spinner-BiPJCr9Q.js";
9
- import { t as c } from "../button-4-ToV5B_.js";
10
- import { g as l } from "../icons-BtdVuyUn.js";
11
- import { t as u } from "../successIcon-SlKgTSty.js";
12
- import { t as d } from "../inputComposed-28d14HXP.js";
13
- import { t as f } from "../dropdownComposed-z3-qcyhl.js";
2
+ import { S as t, _ as n, l as r, v as i } from "../vendor-preact-D6SntenC.js";
3
+ import { i as a } from "../hooks-K-ks8TCv.js";
4
+ import { t as o } from "../incodeComponent-Brc9IhMv.js";
5
+ import { t as s } from "../spacer-DCljE53A.js";
6
+ import { t as c } from "../page-D5Mt-0zn.js";
7
+ import { t as l } from "../typography-BU5GeRw-.js";
8
+ import { t as u } from "../transitionSpinner-CisZoKUv.js";
9
+ import { t as d } from "../button-4-ToV5B_.js";
10
+ import { g as f } from "../icons-BtdVuyUn.js";
11
+ import { t as p } from "../successIcon-SlKgTSty.js";
12
+ import { t as m } from "../inputComposed-28d14HXP.js";
13
+ import { t as h } from "../dropdownComposed-z3-qcyhl.js";
14
14
  import "../dropdownComposed-BDHVzek1.js";
15
- import { t as p } from "../dateInputComposed-CVqyqQIV.js";
15
+ import { t as g } from "../dateInputComposed-CVqyqQIV.js";
16
16
  import "../dateInputComposed-BE3SBKOa.js";
17
- import { t as m } from "../incodeModule-BH9gV7jI.js";
18
- import { createCurpValidationManager as h, mexicanStates as g } from "@incodetech/core/curp-validation";
19
- //#region src/modules/curp-validation/curpInput.tsx
20
- var _ = ({ curp: t, isValid: r, onCurpChange: i, onVerify: o, onSwitchToGenerate: s, disabled: l = !1, placeholder: u, continueLabel: f, dontHaveLabel: p }) => {
21
- let { t: m } = e(), h = u ?? m("curp.placeholder.curp") ?? "CURP", g = f ?? m("curp.continue") ?? "Continue", _ = p ?? m("curp.dontHave") ?? "I don't have my CURP", v = m("curp.placeholder.curp") ?? "CURP";
22
- return /* @__PURE__ */ n("div", {
17
+ import { t as _ } from "../incodeModule-BH9gV7jI.js";
18
+ import { createCurpValidationManager as v, mexicanStates as y } from "@incodetech/core/curp-validation";
19
+ //#region src/shared/autoFocusTitle/autoFocusTitle.tsx
20
+ var b = ({ children: e, className: t }) => {
21
+ let a = r(null);
22
+ return n(() => {
23
+ a.current?.focus();
24
+ }, []), /* @__PURE__ */ i(l, {
25
+ ref: a,
26
+ tabIndex: -1,
27
+ className: t,
28
+ children: e
29
+ });
30
+ }, x = ({ curp: t, isValid: n, onCurpChange: r, onVerify: a, onSwitchToGenerate: o, disabled: c = !1, placeholder: l, continueLabel: u, dontHaveLabel: f }) => {
31
+ let { t: p } = e(), h = l ?? p("curp.placeholder.curp") ?? "CURP", g = u ?? p("curp.continue") ?? "Continue", _ = f ?? p("curp.dontHave") ?? "I don't have my CURP";
32
+ return /* @__PURE__ */ i("div", {
23
33
  class: "IncodeCurpValidation IncodeCurpInput",
24
34
  children: [
25
- /* @__PURE__ */ n(d, {
35
+ /* @__PURE__ */ i(m, {
26
36
  id: "curp-input",
27
- label: "",
28
37
  value: t,
29
38
  onInput: (e) => {
30
39
  let t = e.target;
31
- i(t.value.toUpperCase());
40
+ r(t.value.toUpperCase());
32
41
  },
33
42
  placeholder: h,
34
- disabled: l,
43
+ disabled: c,
35
44
  maxLength: 18,
36
- "aria-label": v
45
+ "aria-label": p("curp.placeholder.curp") ?? "CURP"
37
46
  }),
38
- /* @__PURE__ */ n(a, {}),
39
- /* @__PURE__ */ n(c, {
47
+ /* @__PURE__ */ i(s, {}),
48
+ /* @__PURE__ */ i(d, {
40
49
  type: "button",
41
- onClick: o,
42
- disabled: !r || l,
50
+ onClick: a,
51
+ disabled: !n || c,
43
52
  "data-testid": "curp-verify",
44
53
  children: g
45
54
  }),
46
- /* @__PURE__ */ n(c, {
55
+ /* @__PURE__ */ i(d, {
47
56
  type: "button",
48
- onClick: s,
49
- disabled: l,
57
+ variant: "secondary",
58
+ onClick: o,
59
+ disabled: c,
50
60
  "data-testid": "curp-switch-to-generate",
51
- class: "IncodeCurpInputDontHaveButton",
52
61
  children: _
53
62
  })
54
63
  ]
55
64
  });
56
- }, v = ({ form: t, isValid: r, onFormChange: i, onGenerate: o, disabled: s = !1, labels: l }) => {
57
- let { t: u } = e(), m = {
58
- firstName: u("curp.labels.firstName") ?? "Your First name",
59
- firstLast: u("curp.labels.firstLast") ?? "Your First last name",
60
- secondLast: u("curp.labels.secondLast") ?? "Your Second last name",
61
- gender: u("curp.labels.genderV2") ?? "Gender",
62
- genderPlaceholder: u("curp.placeholder.gender") ?? "Choose gender",
63
- male: u("curp.labels.maleV2") ?? "Male",
64
- female: u("curp.labels.femaleV2") ?? "Female",
65
- other: u("curp.labels.other") ?? "Other",
66
- dob: u("curp.labels.dob") ?? "Date of birth",
67
- birthState: u("curp.labels.birthState") ?? "State of birth",
68
- statePlaceholder: u("curp.placeholder.state") ?? "Select state",
69
- generate: u("curp.generateCta") ?? "Generate CURP",
70
- ...l
71
- }, h = (e) => (t) => {
65
+ }, S = ({ form: t, isValid: n, onFormChange: r, onGenerate: a, disabled: o = !1, labels: c }) => {
66
+ let { t: l } = e(), u = {
67
+ firstName: l("curp.labels.firstName") ?? "Your First name",
68
+ firstLast: l("curp.labels.firstLast") ?? "Your First last name",
69
+ secondLast: l("curp.labels.secondLast") ?? "Your Second last name",
70
+ gender: l("curp.labels.genderV2") ?? "Gender",
71
+ genderPlaceholder: l("curp.placeholder.gender") ?? "Choose gender",
72
+ male: l("curp.labels.maleV2") ?? "Male",
73
+ female: l("curp.labels.femaleV2") ?? "Female",
74
+ other: l("curp.labels.other") ?? "Other",
75
+ dob: l("curp.labels.dob") ?? "Date of birth",
76
+ birthState: l("curp.labels.birthState") ?? "State of birth",
77
+ statePlaceholder: l("curp.placeholder.state") ?? "Select state",
78
+ generate: l("curp.generateCta") ?? "Generate CURP",
79
+ ...c
80
+ }, f = (e) => (t) => {
72
81
  let n = t.target;
73
- i({ [e]: n.value });
74
- }, _ = [
82
+ r({ [e]: n.value });
83
+ }, p = [
75
84
  {
76
85
  value: "H",
77
- label: m.male
86
+ label: u.male
78
87
  },
79
88
  {
80
89
  value: "M",
81
- label: m.female
90
+ label: u.female
82
91
  },
83
92
  {
84
93
  value: "X",
85
- label: m.other
94
+ label: u.other
86
95
  }
87
- ], v = g.map((e) => ({
96
+ ], _ = y.map((e) => ({
88
97
  value: e.value,
89
98
  label: e.label
90
99
  }));
91
- return /* @__PURE__ */ n("div", {
100
+ return /* @__PURE__ */ i("div", {
92
101
  class: "IncodeCurpValidation IncodeGenerateCurpForm",
93
102
  children: [
94
- /* @__PURE__ */ n(d, {
103
+ /* @__PURE__ */ i(m, {
95
104
  id: "curp-first-name",
96
- label: m.firstName,
105
+ label: u.firstName,
97
106
  value: t.name,
98
- onInput: h("name"),
99
- placeholder: m.firstName,
100
- disabled: s,
107
+ onInput: f("name"),
108
+ placeholder: u.firstName,
109
+ disabled: o,
101
110
  autoComplete: "given-name"
102
111
  }),
103
- /* @__PURE__ */ n(d, {
112
+ /* @__PURE__ */ i(m, {
104
113
  id: "curp-first-last",
105
- label: m.firstLast,
114
+ label: u.firstLast,
106
115
  value: t.firstLastName,
107
- onInput: h("firstLastName"),
108
- placeholder: m.firstLast,
109
- disabled: s
116
+ onInput: f("firstLastName"),
117
+ placeholder: u.firstLast,
118
+ disabled: o
110
119
  }),
111
- /* @__PURE__ */ n(d, {
120
+ /* @__PURE__ */ i(m, {
112
121
  id: "curp-second-last",
113
- label: m.secondLast,
122
+ label: u.secondLast,
114
123
  value: t.secondLastName,
115
- onInput: h("secondLastName"),
116
- placeholder: m.secondLast,
117
- disabled: s
124
+ onInput: f("secondLastName"),
125
+ placeholder: u.secondLast,
126
+ disabled: o
118
127
  }),
119
- /* @__PURE__ */ n(f, {
128
+ /* @__PURE__ */ i(h, {
120
129
  id: "curp-gender",
121
- label: m.gender,
122
- placeholder: m.genderPlaceholder,
130
+ label: u.gender,
131
+ placeholder: u.genderPlaceholder,
123
132
  value: t.gender,
124
- options: _,
125
- disabled: s,
126
- onChange: (e) => i({ gender: e }),
133
+ options: p,
134
+ disabled: o,
135
+ onChange: (e) => r({ gender: e }),
127
136
  "data-testid": "curp-gender"
128
137
  }),
129
- /* @__PURE__ */ n(p, {
138
+ /* @__PURE__ */ i(g, {
130
139
  id: "curp-birth-date",
131
- label: m.dob,
140
+ label: u.dob,
132
141
  value: t.birthDate,
133
- onInput: h("birthDate"),
142
+ onInput: f("birthDate"),
134
143
  max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
135
- placeholder: u("curp.placeholder.dob") ?? "mm/dd/yyyy",
136
- disabled: s,
144
+ placeholder: l("curp.placeholder.dob") ?? "mm/dd/yyyy",
145
+ disabled: o,
137
146
  "data-testid": "curp-birth-date"
138
147
  }),
139
- /* @__PURE__ */ n(f, {
148
+ /* @__PURE__ */ i(h, {
140
149
  id: "curp-birth-state",
141
- label: m.birthState,
142
- placeholder: m.statePlaceholder,
150
+ label: u.birthState,
151
+ placeholder: u.statePlaceholder,
143
152
  value: t.birthState,
144
- options: v,
145
- disabled: s,
146
- onChange: (e) => i({ birthState: e }),
153
+ options: _,
154
+ disabled: o,
155
+ onChange: (e) => r({ birthState: e }),
147
156
  "data-testid": "curp-birth-state",
148
157
  searchable: !0
149
158
  }),
150
- /* @__PURE__ */ n(a, { size: 16 }),
151
- /* @__PURE__ */ n(c, {
159
+ /* @__PURE__ */ i(s, { size: 16 }),
160
+ /* @__PURE__ */ i(d, {
152
161
  type: "button",
153
- onClick: o,
154
- disabled: !r || s,
162
+ onClick: a,
163
+ disabled: !n || o,
155
164
  "data-testid": "curp-generate",
156
- children: m.generate
165
+ children: u.generate
157
166
  })
158
167
  ]
159
168
  });
160
- }, y = ({ config: i, onFinish: d, onError: f }) => {
161
- let { t: p } = e(), [m, g] = r(() => {
162
- if (!i) throw Error("CURP validation config is required");
163
- return h({ config: i });
164
- });
165
- if (m.status === "idle" || m.status === "loading" || m.status === "verifying" || m.status === "generating") return /* @__PURE__ */ n(o, {
166
- className: "IncodeCurpValidationPage",
167
- children: /* @__PURE__ */ n("div", {
168
- class: "IncodeCurpValidation IncodeCurpLoading",
169
- children: /* @__PURE__ */ n(s, {
170
- title: m.status === "generating" ? p("curp.status.generating") ?? "Generating..." : p("curp.status.verifying") ?? "Verifying...",
171
- fullScreen: !1
172
- })
173
- })
169
+ }, C = ({ config: n, onFinish: r, onError: o }) => {
170
+ let { t: l } = e(), [h, g] = a(() => {
171
+ if (!n) throw Error("CURP validation config is required");
172
+ return v({ config: n });
174
173
  });
175
- if (m.status === "enterCurp") return /* @__PURE__ */ n(o, {
174
+ if (h.status === "idle" || h.status === "loading" || h.status === "verifying" || h.status === "generating") return /* @__PURE__ */ i(u, { spinnerConfig: { title: h.status === "generating" ? l("curp.status.generating") ?? "Generating..." : l("curp.status.verifying") ?? "Verifying..." } });
175
+ if (h.status === "enterCurp") return /* @__PURE__ */ i(c, {
176
176
  className: "IncodeCurpValidationPage",
177
- title: p("curp.enterCurp") ?? "Enter your CURP",
178
- children: /* @__PURE__ */ n(_, {
179
- curp: m.curp,
180
- isValid: m.isValid,
177
+ title: l("curp.enterCurp") ?? "Enter your CURP",
178
+ children: /* @__PURE__ */ i(x, {
179
+ curp: h.curp,
180
+ isValid: h.isValid,
181
181
  onCurpChange: (e) => g.setCurp(e),
182
182
  onVerify: () => g.verify(),
183
183
  onSwitchToGenerate: () => g.switchToGenerate(),
184
- placeholder: p("curp.placeholder.curp") ?? "CURP",
185
- continueLabel: p("curp.continue") ?? "Continue",
186
- dontHaveLabel: p("curp.dontHave") ?? "I don't have my CURP"
184
+ placeholder: l("curp.placeholder.curp") ?? "CURP",
185
+ continueLabel: l("curp.continue") ?? "Continue",
186
+ dontHaveLabel: l("curp.dontHave") ?? "I don't have my CURP"
187
187
  })
188
188
  });
189
- if (m.status === "generateCurp") return /* @__PURE__ */ n(o, {
189
+ if (h.status === "generateCurp") return /* @__PURE__ */ i(c, {
190
190
  className: "IncodeCurpValidationPage",
191
- title: p("curp.generate") ?? "Generate your CURP",
192
- children: /* @__PURE__ */ n(v, {
193
- form: m.form,
194
- isValid: m.isValid,
191
+ title: l("curp.generate") ?? "Generate your CURP",
192
+ children: /* @__PURE__ */ i(S, {
193
+ form: h.form,
194
+ isValid: h.isValid,
195
195
  onFormChange: (e) => g.setGenerateForm(e),
196
196
  onGenerate: () => g.generate()
197
197
  })
198
198
  });
199
- if (m.status === "confirmCurp") return /* @__PURE__ */ n(o, {
199
+ if (h.status === "confirmCurp") return /* @__PURE__ */ i(c, {
200
200
  className: "IncodeCurpValidationPage",
201
- title: p("curp.status.confirm") ?? "Confirm your CURP",
202
- children: /* @__PURE__ */ n("div", {
201
+ title: l("curp.status.confirm") ?? "Confirm your CURP",
202
+ children: /* @__PURE__ */ i("div", {
203
203
  class: "IncodeCurpValidation IncodeCurpConfirm",
204
204
  children: [
205
- /* @__PURE__ */ n("input", {
206
- type: "text",
207
- class: "IncodeCurpConfirmInput",
208
- value: m.curp,
205
+ /* @__PURE__ */ i(m, {
206
+ id: "curp-confirm-input",
207
+ value: h.curp,
209
208
  readOnly: !0,
210
- "aria-label": p("curp.status.generatedCurp") ?? "Generated CURP"
209
+ "aria-label": l("curp.status.generatedCurp") ?? "Generated CURP",
210
+ "data-testid": "curp-confirm-input"
211
211
  }),
212
- /* @__PURE__ */ n(a, {}),
213
- /* @__PURE__ */ n(c, {
212
+ /* @__PURE__ */ i(s, {}),
213
+ /* @__PURE__ */ i(d, {
214
214
  type: "button",
215
215
  onClick: () => g.confirmGenerated(),
216
216
  "data-testid": "curp-confirm",
217
- children: p("curp.continue") ?? "Continue"
217
+ children: l("curp.continue") ?? "Continue"
218
218
  })
219
219
  ]
220
220
  })
221
221
  });
222
- if (m.status === "success") return /* @__PURE__ */ n(o, {
222
+ if (h.status === "success") return /* @__PURE__ */ i(c, {
223
223
  className: "IncodeCurpValidationPage",
224
- children: /* @__PURE__ */ n("div", {
224
+ children: /* @__PURE__ */ i("div", {
225
225
  class: "IncodeCurpValidation IncodeCurpSuccess",
226
226
  children: [
227
- /* @__PURE__ */ n(u, { size: 32 }),
228
- /* @__PURE__ */ n(a, { size: 16 }),
229
- /* @__PURE__ */ n("h2", {
230
- class: "IncodeCurpSuccessTitle",
231
- children: p("curp.status.verified") ?? "Verified"
227
+ /* @__PURE__ */ i(p, { size: 64 }),
228
+ /* @__PURE__ */ i(s, { size: 16 }),
229
+ /* @__PURE__ */ i(b, {
230
+ className: "IncodeCurpSuccessTitle",
231
+ children: l("curp.status.verified") ?? "Verified"
232
232
  })
233
233
  ]
234
234
  })
235
235
  });
236
- if (m.status === "failure" || m.status === "generateError") {
237
- let e = m.retriesLeft > 0, r = m.status === "failure" ? p("curp.status.notVerified") ?? "Not verified" : p("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
238
- return /* @__PURE__ */ n(o, {
236
+ if (h.status === "failure" || h.status === "generateError") {
237
+ let e = h.retriesLeft > 0, n = h.status === "failure" ? l("curp.status.notVerified") ?? "Not verified" : l("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
238
+ return /* @__PURE__ */ i(c, {
239
239
  className: "IncodeCurpValidationPage",
240
- children: /* @__PURE__ */ n("div", {
240
+ children: /* @__PURE__ */ i("div", {
241
241
  class: "IncodeCurpValidation IncodeCurpFailure",
242
242
  children: [
243
- /* @__PURE__ */ n(a, {}),
244
- /* @__PURE__ */ n(l, { size: 64 }),
245
- /* @__PURE__ */ n(a, { size: 16 }),
246
- /* @__PURE__ */ n("h2", {
247
- class: "IncodeCurpFailureTitle",
248
- children: r
243
+ /* @__PURE__ */ i(s, {}),
244
+ /* @__PURE__ */ i(f, { size: 64 }),
245
+ /* @__PURE__ */ i(s, { size: 16 }),
246
+ /* @__PURE__ */ i(b, {
247
+ className: "IncodeCurpFailureTitle",
248
+ children: n
249
249
  }),
250
- m.status === "generateError" && e && /* @__PURE__ */ n(t, { children: [/* @__PURE__ */ n(a, { size: 12 }), /* @__PURE__ */ n("p", {
250
+ h.status === "generateError" && e && /* @__PURE__ */ i(t, { children: [/* @__PURE__ */ i(s, { size: 12 }), /* @__PURE__ */ i("p", {
251
251
  class: "IncodeCurpFailureHint",
252
- children: p("curp.status.checkInfo") ?? "Please check your information"
252
+ role: "alert",
253
+ children: l("curp.status.checkInfo") ?? "Please check your information"
253
254
  })] }),
254
- /* @__PURE__ */ n(a, {}),
255
- e && /* @__PURE__ */ n(t, { children: /* @__PURE__ */ n(c, {
255
+ /* @__PURE__ */ i(s, {}),
256
+ e && /* @__PURE__ */ i(t, { children: /* @__PURE__ */ i(d, {
256
257
  type: "button",
257
258
  onClick: () => g.retry(),
258
259
  "data-testid": "curp-retry",
259
- children: m.status === "failure" ? p("curp.status.tryAgain") ?? "Try again" : p("curp.status.edit") ?? "Edit information"
260
+ children: h.status === "failure" ? l("curp.status.tryAgain") ?? "Try again" : l("curp.status.edit") ?? "Edit information"
260
261
  }) })
261
262
  ]
262
263
  })
263
264
  });
264
265
  }
265
- return m.status === "finished" ? (d?.(), null) : (m.status === "closed" && f?.(void 0), null);
266
- }, b = ({ config: e, onFinish: t, onError: r }) => /* @__PURE__ */ n(i, { children: e ? /* @__PURE__ */ n(y, {
266
+ return h.status === "finished" ? (r?.(), null) : (h.status === "closed" && o?.(void 0), null);
267
+ }, w = ({ config: e, onFinish: t, onError: n }) => /* @__PURE__ */ i(o, { children: e ? /* @__PURE__ */ i(C, {
267
268
  config: e,
268
269
  onFinish: t,
269
- onError: r
270
+ onError: n
270
271
  }) : null });
271
- m(b, "incode-curp-validation");
272
+ _(w, "incode-curp-validation");
272
273
  //#endregion
273
- export { b as CurpValidation };
274
+ export { w as CurpValidation };
package/dist/curp-validation/styles.css CHANGED
@@ -1,151 +1,82 @@
1
1
  /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
- @layer properties {
3
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4
- *, :before, :after, ::backdrop {
5
- --tw-border-style: solid;
6
- --tw-font-weight: initial;
7
- --tw-leading: initial;
8
- --tw-tracking: initial;
9
- }
10
- }
11
- }
12
-
13
- .IncodeCurpValidation {
2
+ .IncodeCurpValidationPage .IncodePageContent {
3
+ padding-top: var(--spacing-32, var(--spacing-32, 32px));
4
+ padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
14
5
  flex-direction: column;
15
6
  align-items: center;
16
- width: 100%;
17
- height: 100%;
18
7
  display: flex;
19
8
  }
20
9
 
21
- .IncodeCurpValidationPage .IncodePageContent {
22
- padding-top: var(--spacing-32, var(--spacing-32, 32px));
23
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
10
+ .IncodeCurpValidationPage .IncodeCurpValidation {
24
11
  flex-direction: column;
25
12
  align-items: center;
13
+ width: 100%;
14
+ height: 100%;
26
15
  display: flex;
27
16
  }
28
17
 
29
- .IncodeCurpInput {
18
+ .IncodeCurpValidationPage .IncodeCurpInput {
30
19
  min-height: var(--spacing-0, var(--spacing-none, 0px));
20
+ width: 100%;
21
+ max-width: var(--incode-form-max-w);
31
22
  gap: var(--spacing-16, var(--spacing-16, 16px));
32
23
  flex-direction: column;
33
24
  flex: 1;
34
- width: 100%;
35
- max-width: 420px;
36
25
  display: flex;
37
26
  }
38
27
 
39
- .IncodeCurpInputDontHaveButton.IncodeButton {
40
- border-style: var(--tw-border-style);
41
- border-width: var(--border-width-medium, var(--primitive-border-width-1-5));
42
- border-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
43
- color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
44
- background-color: #0000;
28
+ .IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:focus {
29
+ text-decoration: none;
45
30
  }
46
31
 
47
- .IncodeGenerateCurpForm {
48
- gap: var(--spacing-8, var(--spacing-8, 8px));
49
- flex-direction: column;
50
- width: 100%;
51
- max-width: 420px;
52
- display: flex;
32
+ .IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:active {
33
+ color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
53
34
  }
54
35
 
55
- .IncodeCurpFormField {
56
- gap: var(--spacing-4, var(--spacing-4, 4px));
57
- flex-direction: column;
36
+ .IncodeCurpValidationPage .IncodeGenerateCurpForm {
58
37
  width: 100%;
38
+ max-width: var(--incode-form-max-w);
39
+ gap: var(--spacing-8, var(--spacing-8, 8px));
40
+ flex-direction: column;
59
41
  display: flex;
60
42
  }
61
43
 
62
- .IncodeCurpFormLabel {
63
- font-size: var(--text-14, var(--primitive-typography-size-14));
64
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
65
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
66
- color: var(--color-text-body-primary, var(--text-body-800-primary));
67
- }
68
-
69
- .IncodeCurpConfirm {
44
+ .IncodeCurpValidationPage .IncodeCurpConfirm {
45
+ width: 100%;
46
+ max-width: var(--incode-curp-confirm-max-w);
70
47
  flex-direction: column;
71
48
  align-items: center;
72
- width: 100%;
73
- max-width: 340px;
74
49
  display: flex;
75
50
  }
76
51
 
77
- .IncodeCurpConfirmInput {
78
- border-radius: var(--radius-small, var(--border-radius-small));
79
- border-style: var(--tw-border-style);
80
- border-width: 1px;
81
- border-color: var(--color-input-border-default, var(--input-border-default));
82
- background-color: var(--color-input-surface-default, var(--input-surface-default));
83
- width: 100%;
84
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
85
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
52
+ .IncodeCurpValidationPage .IncodeCurpConfirm .IncodeInput {
86
53
  text-align: center;
87
- font-size: var(--text-18, var(--primitive-typography-size-18));
88
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
89
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
90
- color: var(--color-input-text-field-default, var(--input-text-field-default));
91
- }
92
-
93
- .IncodeCurpLoading {
94
- height: 100%;
95
- min-height: var(--spacing-0, var(--spacing-none, 0px));
96
- flex-direction: column;
97
- flex: 1;
98
- justify-content: center;
99
- align-items: center;
100
- display: flex;
54
+ font-family: var(--typography-input-dropdown-family);
55
+ font-size: var(--typography-input-dropdown-m-size);
56
+ font-weight: var(--typography-input-dropdown-m-weight);
57
+ line-height: var(--typography-input-dropdown-m-line-height);
58
+ letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
101
59
  }
102
60
 
103
- .IncodeCurpSuccess, .IncodeCurpFailure {
61
+ .IncodeCurpValidationPage .IncodeCurpSuccess, .IncodeCurpValidationPage .IncodeCurpFailure {
104
62
  flex-direction: column;
105
63
  justify-content: center;
106
64
  align-items: center;
107
65
  display: flex;
108
66
  }
109
67
 
110
- .IncodeCurpSuccess h2.IncodeCurpSuccessTitle, .IncodeCurpFailure h2.IncodeCurpFailureTitle {
68
+ .IncodeCurpValidationPage .IncodeCurpSuccessTitle, .IncodeCurpValidationPage .IncodeCurpFailureTitle {
111
69
  margin: var(--spacing-0, var(--spacing-none, 0px));
112
70
  padding: var(--spacing-0, var(--spacing-none, 0px));
113
- text-align: center;
114
- font-size: var(--text-2xl, 1.5rem);
115
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
116
- --tw-leading: 1.25;
117
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
118
- line-height: 1.25;
119
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
120
- --tw-tracking: -1px;
121
- letter-spacing: -1px;
122
- color: var(--color-text-body-primary, var(--text-body-800-primary));
123
71
  }
124
72
 
125
- .IncodeCurpFailureHint {
73
+ .IncodeCurpValidationPage .IncodeCurpFailureHint {
126
74
  margin: var(--spacing-0, var(--spacing-none, 0px));
127
75
  text-align: center;
128
- font-size: var(--text-16, var(--primitive-typography-size-16));
76
+ font-family: var(--typography-headline-family);
77
+ font-size: var(--typography-headline-h5-size);
78
+ font-weight: var(--typography-headline-h5-weight);
79
+ line-height: var(--typography-headline-h5-line-height);
80
+ letter-spacing: var(--typography-headline-h5-letter-spacing);
129
81
  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
130
82
  }
131
-
132
- @property --tw-border-style {
133
- syntax: "*";
134
- inherits: false;
135
- initial-value: solid;
136
- }
137
-
138
- @property --tw-font-weight {
139
- syntax: "*";
140
- inherits: false
141
- }
142
-
143
- @property --tw-leading {
144
- syntax: "*";
145
- inherits: false
146
- }
147
-
148
- @property --tw-tracking {
149
- syntax: "*";
150
- inherits: false
151
- }
package/dist/flow/styles.css CHANGED
@@ -3012,122 +3012,85 @@
3012
3012
  display: flex;
3013
3013
  }
3014
3014
 
3015
- .IncodeCurpValidation {
3015
+ .IncodeCurpValidationPage .IncodePageContent {
3016
+ padding-top: var(--spacing-32, var(--spacing-32, 32px));
3017
+ padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
3016
3018
  flex-direction: column;
3017
3019
  align-items: center;
3018
- width: 100%;
3019
- height: 100%;
3020
3020
  display: flex;
3021
3021
  }
3022
3022
 
3023
- .IncodeCurpValidationPage .IncodePageContent {
3024
- padding-top: var(--spacing-32, var(--spacing-32, 32px));
3025
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
3023
+ .IncodeCurpValidationPage .IncodeCurpValidation {
3026
3024
  flex-direction: column;
3027
3025
  align-items: center;
3026
+ width: 100%;
3027
+ height: 100%;
3028
3028
  display: flex;
3029
3029
  }
3030
3030
 
3031
- .IncodeCurpInput {
3031
+ .IncodeCurpValidationPage .IncodeCurpInput {
3032
3032
  min-height: var(--spacing-0, var(--spacing-none, 0px));
3033
+ width: 100%;
3034
+ max-width: var(--incode-form-max-w);
3033
3035
  gap: var(--spacing-16, var(--spacing-16, 16px));
3034
3036
  flex-direction: column;
3035
3037
  flex: 1;
3036
- width: 100%;
3037
- max-width: 420px;
3038
3038
  display: flex;
3039
3039
  }
3040
3040
 
3041
- .IncodeCurpInputDontHaveButton.IncodeButton {
3042
- border-style: var(--tw-border-style);
3043
- border-width: var(--border-width-medium, var(--primitive-border-width-1-5));
3044
- border-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
3045
- color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
3046
- background-color: #0000;
3041
+ .IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:focus {
3042
+ text-decoration: none;
3047
3043
  }
3048
3044
 
3049
- .IncodeGenerateCurpForm {
3050
- gap: var(--spacing-8, var(--spacing-8, 8px));
3051
- flex-direction: column;
3052
- width: 100%;
3053
- max-width: 420px;
3054
- display: flex;
3045
+ .IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:active {
3046
+ color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
3055
3047
  }
3056
3048
 
3057
- .IncodeCurpFormField {
3058
- gap: var(--spacing-4, var(--spacing-4, 4px));
3059
- flex-direction: column;
3049
+ .IncodeCurpValidationPage .IncodeGenerateCurpForm {
3060
3050
  width: 100%;
3051
+ max-width: var(--incode-form-max-w);
3052
+ gap: var(--spacing-8, var(--spacing-8, 8px));
3053
+ flex-direction: column;
3061
3054
  display: flex;
3062
3055
  }
3063
3056
 
3064
- .IncodeCurpFormLabel {
3065
- font-size: var(--text-14, var(--primitive-typography-size-14));
3066
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3067
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3068
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3069
- }
3070
-
3071
- .IncodeCurpConfirm {
3057
+ .IncodeCurpValidationPage .IncodeCurpConfirm {
3058
+ width: 100%;
3059
+ max-width: var(--incode-curp-confirm-max-w);
3072
3060
  flex-direction: column;
3073
3061
  align-items: center;
3074
- width: 100%;
3075
- max-width: 340px;
3076
3062
  display: flex;
3077
3063
  }
3078
3064
 
3079
- .IncodeCurpConfirmInput {
3080
- border-radius: var(--radius-small, var(--border-radius-small));
3081
- border-style: var(--tw-border-style);
3082
- border-width: 1px;
3083
- border-color: var(--color-input-border-default, var(--input-border-default));
3084
- background-color: var(--color-input-surface-default, var(--input-surface-default));
3085
- width: 100%;
3086
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
3087
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
3065
+ .IncodeCurpValidationPage .IncodeCurpConfirm .IncodeInput {
3088
3066
  text-align: center;
3089
- font-size: var(--text-18, var(--primitive-typography-size-18));
3090
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3091
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3092
- color: var(--color-input-text-field-default, var(--input-text-field-default));
3093
- }
3094
-
3095
- .IncodeCurpLoading {
3096
- height: 100%;
3097
- min-height: var(--spacing-0, var(--spacing-none, 0px));
3098
- flex-direction: column;
3099
- flex: 1;
3100
- justify-content: center;
3101
- align-items: center;
3102
- display: flex;
3067
+ font-family: var(--typography-input-dropdown-family);
3068
+ font-size: var(--typography-input-dropdown-m-size);
3069
+ font-weight: var(--typography-input-dropdown-m-weight);
3070
+ line-height: var(--typography-input-dropdown-m-line-height);
3071
+ letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
3103
3072
  }
3104
3073
 
3105
- .IncodeCurpSuccess, .IncodeCurpFailure {
3074
+ .IncodeCurpValidationPage .IncodeCurpSuccess, .IncodeCurpValidationPage .IncodeCurpFailure {
3106
3075
  flex-direction: column;
3107
3076
  justify-content: center;
3108
3077
  align-items: center;
3109
3078
  display: flex;
3110
3079
  }
3111
3080
 
3112
- .IncodeCurpSuccess h2.IncodeCurpSuccessTitle, .IncodeCurpFailure h2.IncodeCurpFailureTitle {
3081
+ .IncodeCurpValidationPage .IncodeCurpSuccessTitle, .IncodeCurpValidationPage .IncodeCurpFailureTitle {
3113
3082
  margin: var(--spacing-0, var(--spacing-none, 0px));
3114
3083
  padding: var(--spacing-0, var(--spacing-none, 0px));
3115
- text-align: center;
3116
- font-size: var(--text-2xl, 1.5rem);
3117
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
3118
- --tw-leading: 1.25;
3119
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
3120
- line-height: 1.25;
3121
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
3122
- --tw-tracking: -1px;
3123
- letter-spacing: -1px;
3124
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3125
3084
  }
3126
3085
 
3127
- .IncodeCurpFailureHint {
3086
+ .IncodeCurpValidationPage .IncodeCurpFailureHint {
3128
3087
  margin: var(--spacing-0, var(--spacing-none, 0px));
3129
3088
  text-align: center;
3130
- font-size: var(--text-16, var(--primitive-typography-size-16));
3089
+ font-family: var(--typography-headline-family);
3090
+ font-size: var(--typography-headline-h5-size);
3091
+ font-weight: var(--typography-headline-h5-weight);
3092
+ line-height: var(--typography-headline-h5-line-height);
3093
+ letter-spacing: var(--typography-headline-h5-letter-spacing);
3131
3094
  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
3132
3095
  }
3133
3096
 
package/dist/themes/dark.css CHANGED
@@ -1175,6 +1175,7 @@
1175
1175
  --incode-page-max-h-landscape: 726px;
1176
1176
  --dialog-content-max-width: 390px;
1177
1177
  --document-capture-pdf-preview-height: 160px;
1178
+ --incode-curp-confirm-max-w: 340px;
1178
1179
 
1179
1180
  /* radio button sizing */
1180
1181
  --radio-button-size: 28px;
package/dist/themes/light.css CHANGED
@@ -1175,6 +1175,7 @@
1175
1175
  --incode-page-max-h-landscape: 726px;
1176
1176
  --dialog-content-max-width: 390px;
1177
1177
  --document-capture-pdf-preview-height: 160px;
1178
+ --incode-curp-confirm-max-w: 340px;
1178
1179
 
1179
1180
  /* radio button sizing */
1180
1181
  --radio-button-size: 28px;
package/dist/workflow/styles.css CHANGED
@@ -2611,122 +2611,85 @@
2611
2611
  display: flex;
2612
2612
  }
2613
2613
 
2614
- .IncodeCurpValidation {
2614
+ .IncodeCurpValidationPage .IncodePageContent {
2615
+ padding-top: var(--spacing-32, var(--spacing-32, 32px));
2616
+ padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
2615
2617
  flex-direction: column;
2616
2618
  align-items: center;
2617
- width: 100%;
2618
- height: 100%;
2619
2619
  display: flex;
2620
2620
  }
2621
2621
 
2622
- .IncodeCurpValidationPage .IncodePageContent {
2623
- padding-top: var(--spacing-32, var(--spacing-32, 32px));
2624
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
2622
+ .IncodeCurpValidationPage .IncodeCurpValidation {
2625
2623
  flex-direction: column;
2626
2624
  align-items: center;
2625
+ width: 100%;
2626
+ height: 100%;
2627
2627
  display: flex;
2628
2628
  }
2629
2629
 
2630
- .IncodeCurpInput {
2630
+ .IncodeCurpValidationPage .IncodeCurpInput {
2631
2631
  min-height: var(--spacing-0, var(--spacing-none, 0px));
2632
+ width: 100%;
2633
+ max-width: var(--incode-form-max-w);
2632
2634
  gap: var(--spacing-16, var(--spacing-16, 16px));
2633
2635
  flex-direction: column;
2634
2636
  flex: 1;
2635
- width: 100%;
2636
- max-width: 420px;
2637
2637
  display: flex;
2638
2638
  }
2639
2639
 
2640
- .IncodeCurpInputDontHaveButton.IncodeButton {
2641
- border-style: var(--tw-border-style);
2642
- border-width: var(--border-width-medium, var(--primitive-border-width-1-5));
2643
- border-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
2644
- color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
2645
- background-color: #0000;
2640
+ .IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:focus {
2641
+ text-decoration: none;
2646
2642
  }
2647
2643
 
2648
- .IncodeGenerateCurpForm {
2649
- gap: var(--spacing-8, var(--spacing-8, 8px));
2650
- flex-direction: column;
2651
- width: 100%;
2652
- max-width: 420px;
2653
- display: flex;
2644
+ .IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:active {
2645
+ color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
2654
2646
  }
2655
2647
 
2656
- .IncodeCurpFormField {
2657
- gap: var(--spacing-4, var(--spacing-4, 4px));
2658
- flex-direction: column;
2648
+ .IncodeCurpValidationPage .IncodeGenerateCurpForm {
2659
2649
  width: 100%;
2650
+ max-width: var(--incode-form-max-w);
2651
+ gap: var(--spacing-8, var(--spacing-8, 8px));
2652
+ flex-direction: column;
2660
2653
  display: flex;
2661
2654
  }
2662
2655
 
2663
- .IncodeCurpFormLabel {
2664
- font-size: var(--text-14, var(--primitive-typography-size-14));
2665
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2666
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2667
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2668
- }
2669
-
2670
- .IncodeCurpConfirm {
2656
+ .IncodeCurpValidationPage .IncodeCurpConfirm {
2657
+ width: 100%;
2658
+ max-width: var(--incode-curp-confirm-max-w);
2671
2659
  flex-direction: column;
2672
2660
  align-items: center;
2673
- width: 100%;
2674
- max-width: 340px;
2675
2661
  display: flex;
2676
2662
  }
2677
2663
 
2678
- .IncodeCurpConfirmInput {
2679
- border-radius: var(--radius-small, var(--border-radius-small));
2680
- border-style: var(--tw-border-style);
2681
- border-width: 1px;
2682
- border-color: var(--color-input-border-default, var(--input-border-default));
2683
- background-color: var(--color-input-surface-default, var(--input-surface-default));
2684
- width: 100%;
2685
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
2686
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
2664
+ .IncodeCurpValidationPage .IncodeCurpConfirm .IncodeInput {
2687
2665
  text-align: center;
2688
- font-size: var(--text-18, var(--primitive-typography-size-18));
2689
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2690
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2691
- color: var(--color-input-text-field-default, var(--input-text-field-default));
2692
- }
2693
-
2694
- .IncodeCurpLoading {
2695
- height: 100%;
2696
- min-height: var(--spacing-0, var(--spacing-none, 0px));
2697
- flex-direction: column;
2698
- flex: 1;
2699
- justify-content: center;
2700
- align-items: center;
2701
- display: flex;
2666
+ font-family: var(--typography-input-dropdown-family);
2667
+ font-size: var(--typography-input-dropdown-m-size);
2668
+ font-weight: var(--typography-input-dropdown-m-weight);
2669
+ line-height: var(--typography-input-dropdown-m-line-height);
2670
+ letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
2702
2671
  }
2703
2672
 
2704
- .IncodeCurpSuccess, .IncodeCurpFailure {
2673
+ .IncodeCurpValidationPage .IncodeCurpSuccess, .IncodeCurpValidationPage .IncodeCurpFailure {
2705
2674
  flex-direction: column;
2706
2675
  justify-content: center;
2707
2676
  align-items: center;
2708
2677
  display: flex;
2709
2678
  }
2710
2679
 
2711
- .IncodeCurpSuccess h2.IncodeCurpSuccessTitle, .IncodeCurpFailure h2.IncodeCurpFailureTitle {
2680
+ .IncodeCurpValidationPage .IncodeCurpSuccessTitle, .IncodeCurpValidationPage .IncodeCurpFailureTitle {
2712
2681
  margin: var(--spacing-0, var(--spacing-none, 0px));
2713
2682
  padding: var(--spacing-0, var(--spacing-none, 0px));
2714
- text-align: center;
2715
- font-size: var(--text-2xl, 1.5rem);
2716
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
2717
- --tw-leading: 1.25;
2718
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
2719
- line-height: 1.25;
2720
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
2721
- --tw-tracking: -1px;
2722
- letter-spacing: -1px;
2723
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2724
2683
  }
2725
2684
 
2726
- .IncodeCurpFailureHint {
2685
+ .IncodeCurpValidationPage .IncodeCurpFailureHint {
2727
2686
  margin: var(--spacing-0, var(--spacing-none, 0px));
2728
2687
  text-align: center;
2729
- font-size: var(--text-16, var(--primitive-typography-size-16));
2688
+ font-family: var(--typography-headline-family);
2689
+ font-size: var(--typography-headline-h5-size);
2690
+ font-weight: var(--typography-headline-h5-weight);
2691
+ line-height: var(--typography-headline-h5-line-height);
2692
+ letter-spacing: var(--typography-headline-h5-letter-spacing);
2730
2693
  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
2731
2694
  }
2732
2695
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@incodetech/web",
3
- "version": "0.0.0-dev-20260504-dd4a501",
3
+ "version": "0.0.0-dev-20260504-b9c5622",
4
4
  "type": "module",
5
5
  "main": "./dist/index.es.js",
6
6
  "types": "./dist/types/index.d.ts",
@@ -239,7 +239,7 @@
239
239
  "qrcode": "^1.5.4",
240
240
  "signature_pad": "^5.1.3",
241
241
  "tailwindcss": "^4.1.17",
242
- "@incodetech/core": "0.0.0-dev-20260504-dd4a501"
242
+ "@incodetech/core": "0.0.0-dev-20260504-b9c5622"
243
243
  },
244
244
  "devDependencies": {
245
245
  "@microsoft/api-extractor": "^7.53.3",