@incodetech/web 0.0.0-dev-20260422-0e68af3 → 0.0.0-dev-20260422-4a0d0e6

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.
@@ -4,9 +4,9 @@ import { r as o } from "./incodeComponent-BWl9Ashv.js";
4
4
  import { t as s } from "./inputComposed-BXGBX7oR.js";
5
5
  import { n as c } from "./formField-ClatQUGJ.js";
6
6
  import { t as l } from "./bottomSheet-CGGwLnNk.js";
7
- //#region src/modules/ekyc/addressAutocomplete.tsx
7
+ //#region src/shared/addressAutocomplete/addressAutocomplete.tsx
8
8
  var u = ({ label: u, value: d, error: f, errorParams: p, suggestions: m, readonly: h, optional: g, onChange: _, onSearch: v, onSelect: y, onBlur: b }) => {
9
- let { t: x } = e(), [S, C] = i(!1), [w, T] = i(!1), [E, D] = i(""), [O, k] = i(-1), [A, j] = i(-1), M = r(null), N = "ekyc-address-listbox", P = "ekyc-address-mobile-listbox", F = "ekyc-address-modal-title", I = o(), L = x(u), R = g ? `${L} (${x("common.optional")})` : L;
9
+ let { t: x } = e(), [S, C] = i(!1), [w, T] = i(!1), [E, D] = i(""), [O, k] = i(-1), [A, j] = i(-1), M = r(null), N = r(null), P = r(null), F = "ekyc-address-listbox", I = "ekyc-address-mobile-listbox", L = "ekyc-address-modal-title", R = o(), z = x(u), B = g ? `${z} (${x("common.optional")})` : z;
10
10
  t(() => {
11
11
  function e(e) {
12
12
  M.current && !M.current.contains(e.target) && C(!1);
@@ -14,64 +14,72 @@ var u = ({ label: u, value: d, error: f, errorParams: p, suggestions: m, readonl
14
14
  return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
15
15
  }, []), t(() => {
16
16
  k(-1), j(-1);
17
- }, [m]);
18
- let z = n((e) => {
17
+ }, [m]), t(() => {
18
+ let e = R ? P : N, t = R ? A : O;
19
+ t < 0 || e.current?.children[t]?.scrollIntoView({ block: "nearest" });
20
+ }, [
21
+ O,
22
+ A,
23
+ R
24
+ ]);
25
+ let V = n((e) => {
19
26
  y(e), C(!1), T(!1), k(-1), j(-1);
20
- }, [y]), B = n(() => {
27
+ }, [y]), H = n(() => {
21
28
  T(!1), j(-1);
22
- }, []), V = (e) => {
23
- _(e), e.length >= 3 ? I ? (T(!0), D(e), v(e)) : (v(e), C(!0)) : C(!1);
24
- }, H = (e) => {
25
- !S || m.length === 0 || (e.key === "ArrowDown" ? (e.preventDefault(), k((e) => e < m.length - 1 ? e + 1 : 0)) : e.key === "ArrowUp" ? (e.preventDefault(), k((e) => e > 0 ? e - 1 : m.length - 1)) : e.key === "Enter" && O >= 0 ? (e.preventDefault(), z(m[O])) : e.key === "Escape" && (C(!1), k(-1)));
26
- }, U = (e) => {
27
- m.length !== 0 && (e.key === "ArrowDown" ? (e.preventDefault(), j((e) => e < m.length - 1 ? e + 1 : 0)) : e.key === "ArrowUp" ? (e.preventDefault(), j((e) => e > 0 ? e - 1 : m.length - 1)) : e.key === "Enter" && A >= 0 && (e.preventDefault(), z(m[A])));
28
- }, W = !I && S && m.length > 0, G = W && O >= 0 ? `${N}-option-${O}` : void 0;
29
+ }, []), U = (e) => {
30
+ _(e), e.length >= 3 ? R ? (T(!0), D(e), v(e)) : (v(e), C(!0)) : C(!1);
31
+ }, W = (e, t, n) => (r) => {
32
+ m.length !== 0 && (r.key === "ArrowDown" ? (r.preventDefault(), t((e) => e < m.length - 1 ? e + 1 : 0)) : r.key === "ArrowUp" ? (r.preventDefault(), t((e) => e > 0 ? e - 1 : m.length - 1)) : r.key === "Enter" && e() >= 0 ? (r.preventDefault(), V(m[e()])) : r.key === "Escape" && n && n());
33
+ }, G = W(() => O, k, () => {
34
+ C(!1), k(-1);
35
+ }), K = W(() => A, j), q = !R && S && m.length > 0, J = q && O >= 0 ? `${F}-option-${O}` : void 0;
29
36
  return /* @__PURE__ */ a("div", {
30
37
  className: "IncodeAddressAutocomplete",
31
38
  ref: M,
32
39
  children: [
33
40
  /* @__PURE__ */ a(s, {
34
41
  id: "ekyc-street",
35
- label: R,
42
+ label: B,
36
43
  name: "street",
37
44
  value: d,
38
45
  readOnly: h,
39
46
  error: c(x, f, p),
40
- onInput: (e) => V(e.target.value),
41
- onKeyDown: H,
47
+ onInput: (e) => U(e.target.value),
48
+ onKeyDown: G,
42
49
  onBlur: b,
43
50
  role: "combobox",
44
- "aria-expanded": W,
45
- "aria-controls": N,
46
- "aria-activedescendant": G,
51
+ "aria-expanded": q,
52
+ "aria-controls": F,
53
+ "aria-activedescendant": J,
47
54
  "aria-autocomplete": "list",
48
55
  "data-testid": "ekyc-address-input"
49
56
  }),
50
- W && /* @__PURE__ */ a("ul", {
51
- id: N,
57
+ q && /* @__PURE__ */ a("ul", {
58
+ ref: N,
59
+ id: F,
52
60
  role: "listbox",
53
61
  className: "IncodeAddressAutocompleteSuggestions",
54
62
  children: m.map((e, t) => /* @__PURE__ */ a("li", {
55
- id: `${N}-option-${t}`,
63
+ id: `${F}-option-${t}`,
56
64
  role: "option",
57
65
  "aria-selected": t === O,
58
66
  className: `IncodeAddressAutocompleteSuggestion ${t === O ? "IncodeAddressAutocompleteSuggestionActive" : ""}`,
59
- onClick: () => z(e),
67
+ onClick: () => V(e),
60
68
  children: e.label
61
69
  }, e.id))
62
70
  }),
63
- I && /* @__PURE__ */ a(l, {
71
+ R && /* @__PURE__ */ a(l, {
64
72
  isOpen: w,
65
- onClose: B,
66
- labelledById: F,
73
+ onClose: H,
74
+ labelledById: L,
67
75
  children: [/* @__PURE__ */ a("div", {
68
76
  className: "IncodeAddressAutocompleteModalHeader",
69
77
  children: [/* @__PURE__ */ a("h3", {
70
- id: F,
78
+ id: L,
71
79
  children: x("verification.addressSearch")
72
80
  }), /* @__PURE__ */ a("button", {
73
81
  className: "IncodeAddressAutocompleteModalClose",
74
- onClick: B,
82
+ onClick: H,
75
83
  type: "button",
76
84
  "aria-label": x("common.close"),
77
85
  children: "×"
@@ -87,32 +95,33 @@ var u = ({ label: u, value: d, error: f, errorParams: p, suggestions: m, readonl
87
95
  "aria-label": x("verification.addressSearch"),
88
96
  role: "combobox",
89
97
  "aria-expanded": m.length > 0,
90
- "aria-controls": P,
91
- "aria-activedescendant": A >= 0 ? `${P}-option-${A}` : void 0,
98
+ "aria-controls": I,
99
+ "aria-activedescendant": A >= 0 ? `${I}-option-${A}` : void 0,
92
100
  "aria-autocomplete": "list",
93
101
  onInput: (e) => {
94
102
  let t = e.target.value;
95
103
  D(t), t.length >= 3 && v(t);
96
104
  },
97
- onKeyDown: U,
105
+ onKeyDown: K,
98
106
  autoFocus: !0
99
107
  }),
100
108
  m.length > 0 && /* @__PURE__ */ a("ul", {
101
- id: P,
109
+ ref: P,
110
+ id: I,
102
111
  role: "listbox",
103
112
  className: "IncodeAddressAutocompleteModalSuggestions",
104
113
  children: m.map((e, t) => /* @__PURE__ */ a("li", {
105
- id: `${P}-option-${t}`,
114
+ id: `${I}-option-${t}`,
106
115
  role: "option",
107
116
  "aria-selected": t === A,
108
117
  className: `IncodeAddressAutocompleteModalSuggestion ${t === A ? "IncodeAddressAutocompleteModalSuggestionActive" : ""}`,
109
- onClick: () => z(e),
118
+ onClick: () => V(e),
110
119
  children: e.label
111
120
  }, e.id))
112
121
  }),
113
122
  /* @__PURE__ */ a("button", {
114
123
  className: "IncodeAddressAutocompleteEnterManually",
115
- onClick: B,
124
+ onClick: H,
116
125
  type: "button",
117
126
  children: x("verification.enterManually")
118
127
  })
package/dist/base.css CHANGED
@@ -446,6 +446,11 @@
446
446
  font-weight: var(--typography-button-m-underlined-weight);
447
447
  line-height: var(--typography-button-m-underlined-line-height);
448
448
  letter-spacing: var(--typography-button-m-underlined-letter-spacing);
449
+ font-family: var(--typography-button-family);
450
+ font-size: var(--typography-button-m-underlined-size);
451
+ font-weight: var(--typography-button-m-underlined-weight);
452
+ line-height: var(--typography-button-m-underlined-line-height);
453
+ letter-spacing: var(--typography-button-m-underlined-letter-spacing);
449
454
  text-decoration-line: underline;
450
455
  text-decoration-style: solid;
451
456
  text-decoration-thickness: auto;
@@ -3347,6 +3352,45 @@
3347
3352
  }
3348
3353
  }
3349
3354
  }
3355
+ @media (min-width: 40rem) {
3356
+ .IncodePageContainer .IncodePageInner {
3357
+ max-width: 40rem;
3358
+ }
3359
+ }
3360
+ @media (min-width: 48rem) {
3361
+ .IncodePageContainer .IncodePageInner {
3362
+ max-width: 48rem;
3363
+ }
3364
+ }
3365
+ @media (min-width: 64rem) {
3366
+ .IncodePageContainer .IncodePageInner {
3367
+ max-width: 64rem;
3368
+ }
3369
+ }
3370
+ @media (min-width: 80rem) {
3371
+ .IncodePageContainer .IncodePageInner {
3372
+ max-width: 80rem;
3373
+ }
3374
+ }
3375
+ @media (min-width: 96rem) {
3376
+ .IncodePageContainer .IncodePageInner {
3377
+ max-width: 96rem;
3378
+ }
3379
+ }
3380
+ @media (min-width: 48rem) {
3381
+ .IncodePageContainer .IncodePageInner {
3382
+ max-height: var(--incode-page-max-h);
3383
+ max-width: var(--incode-page-max-w);
3384
+ }
3385
+
3386
+ @media not all and (min-width: 80rem) {
3387
+ @media (orientation: landscape) {
3388
+ .IncodePageContainer .IncodePageInner {
3389
+ max-height: var(--incode-page-max-h-landscape);
3390
+ }
3391
+ }
3392
+ }
3393
+ }
3350
3394
  .IncodePageContainer .IncodePageInner {
3351
3395
  width: 100%;
3352
3396
  }
@@ -4363,6 +4407,155 @@
4363
4407
  text-align: center;
4364
4408
  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
4365
4409
  }
4410
+ .IncodeAddressAutocomplete {
4411
+ width: 100%;
4412
+ position: relative;
4413
+ }
4414
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteSuggestions {
4415
+ right: var(--spacing-0, var(--spacing-none, 0px));
4416
+ left: var(--spacing-0, var(--spacing-none, 0px));
4417
+ z-index: 10;
4418
+ margin-top: var(--spacing-8, var(--spacing-8, 8px));
4419
+ max-height: 200px;
4420
+ padding: var(--spacing-0, var(--spacing-none, 0px));
4421
+ border-radius: var(--radius-small, var(--border-radius-small));
4422
+ border-style: var(--tw-border-style);
4423
+ border-width: 1px;
4424
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
4425
+ background-color: var(--color-dropdown-surface-default, var(--dropdown-surface-default));
4426
+ list-style-type: none;
4427
+ position: absolute;
4428
+ top: 100%;
4429
+ overflow-y: auto;
4430
+ box-shadow: 0 2px 8px #00000026;
4431
+ }
4432
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteSuggestion {
4433
+ cursor: pointer;
4434
+ border-bottom-style: var(--tw-border-style);
4435
+ border-bottom-width: 1px;
4436
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
4437
+ padding-inline: var(--spacing-16, var(--spacing-16, 16px));
4438
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
4439
+ font-family: var(--typography-headline-family);
4440
+ font-size: var(--typography-headline-h5-size);
4441
+ font-weight: var(--typography-headline-h5-weight);
4442
+ line-height: var(--typography-headline-h5-line-height);
4443
+ letter-spacing: var(--typography-headline-h5-letter-spacing);
4444
+ color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
4445
+ }
4446
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteSuggestion:last-child {
4447
+ border-bottom-style: var(--tw-border-style);
4448
+ border-bottom-width: 0;
4449
+ }
4450
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteSuggestion:hover, .IncodeAddressAutocomplete .IncodeAddressAutocompleteSuggestionActive {
4451
+ background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
4452
+ }
4453
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalHeader {
4454
+ border-bottom-style: var(--tw-border-style);
4455
+ border-bottom-width: 1px;
4456
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
4457
+ padding-inline: var(--spacing-12, var(--spacing-12, 12px));
4458
+ padding-block: var(--spacing-16, var(--spacing-16, 16px));
4459
+ justify-content: space-between;
4460
+ align-items: center;
4461
+ display: flex;
4462
+ }
4463
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalHeader h3 {
4464
+ margin: var(--spacing-0, var(--spacing-none, 0px));
4465
+ font-family: var(--typography-headline-family);
4466
+ font-size: var(--typography-headline-h4-size);
4467
+ font-weight: var(--typography-headline-h4-weight);
4468
+ line-height: var(--typography-headline-h4-line-height);
4469
+ letter-spacing: var(--typography-headline-h4-letter-spacing);
4470
+ color: var(--color-input-text-label-default, var(--input-text-label-default));
4471
+ }
4472
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalHeader .IncodeAddressAutocompleteModalClose {
4473
+ cursor: pointer;
4474
+ border-style: var(--tw-border-style);
4475
+ border-width: var(--border-width-none, var(--primitive-border-width-0));
4476
+ --tw-border-style: none;
4477
+ padding: var(--spacing-0, var(--spacing-none, 0px));
4478
+ font-family: var(--typography-input-dropdown-family);
4479
+ font-size: var(--typography-input-dropdown-l-size);
4480
+ font-weight: var(--typography-input-dropdown-l-weight);
4481
+ line-height: var(--typography-input-dropdown-l-line-height);
4482
+ letter-spacing: var(--typography-input-dropdown-l-letter-spacing);
4483
+ --tw-leading: 1;
4484
+ color: var(--color-text-body-secondary, var(--text-body-500-secondary));
4485
+ background-color: #0000;
4486
+ border-style: none;
4487
+ line-height: 1;
4488
+ }
4489
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalBody {
4490
+ padding-inline: var(--spacing-12, var(--spacing-12, 12px));
4491
+ padding-block: var(--spacing-16, var(--spacing-16, 16px));
4492
+ flex: 1;
4493
+ overflow-y: auto;
4494
+ }
4495
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalBody .IncodeAddressAutocompleteModalInput {
4496
+ margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
4497
+ border-radius: var(--radius-small, var(--border-radius-small));
4498
+ border-style: var(--tw-border-style);
4499
+ border-width: 1px;
4500
+ border-color: var(--color-input-border-default, var(--input-border-default));
4501
+ background-color: var(--color-input-surface-default, var(--input-surface-default));
4502
+ width: 100%;
4503
+ padding-inline: var(--spacing-16, var(--spacing-16, 16px));
4504
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
4505
+ font-family: var(--typography-headline-family);
4506
+ font-size: var(--typography-headline-h5-size);
4507
+ font-weight: var(--typography-headline-h5-weight);
4508
+ line-height: var(--typography-headline-h5-line-height);
4509
+ letter-spacing: var(--typography-headline-h5-letter-spacing);
4510
+ color: var(--color-input-text-field-default, var(--input-text-field-default));
4511
+ --tw-outline-style: none;
4512
+ outline-style: none;
4513
+ }
4514
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalBody .IncodeAddressAutocompleteModalInput::placeholder {
4515
+ color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
4516
+ }
4517
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalBody .IncodeAddressAutocompleteModalInput:focus {
4518
+ border-color: var(--color-input-border-focused, var(--input-border-focused));
4519
+ }
4520
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalBody .IncodeAddressAutocompleteModalSuggestions {
4521
+ margin: var(--spacing-0, var(--spacing-none, 0px));
4522
+ padding: var(--spacing-0, var(--spacing-none, 0px));
4523
+ list-style-type: none;
4524
+ }
4525
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalBody .IncodeAddressAutocompleteModalSuggestion {
4526
+ cursor: pointer;
4527
+ border-bottom-style: var(--tw-border-style);
4528
+ border-bottom-width: 1px;
4529
+ border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
4530
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
4531
+ font-family: var(--typography-body-family);
4532
+ font-size: var(--typography-body-m-regular-size);
4533
+ font-weight: var(--typography-body-m-regular-weight);
4534
+ line-height: var(--typography-body-m-regular-line-height);
4535
+ letter-spacing: var(--typography-body-m-regular-letter-spacing);
4536
+ color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
4537
+ }
4538
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalBody .IncodeAddressAutocompleteModalSuggestionActive {
4539
+ background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
4540
+ }
4541
+ .IncodeAddressAutocomplete .IncodeAddressAutocompleteModalBody .IncodeAddressAutocompleteEnterManually {
4542
+ margin-top: var(--spacing-12, var(--spacing-12, 12px));
4543
+ cursor: pointer;
4544
+ border-radius: var(--radius-small, var(--border-radius-small));
4545
+ border-style: var(--tw-border-style);
4546
+ border-width: 1px;
4547
+ border-color: var(--color-button-secondary-border-default, var(--button-secondary-border-default));
4548
+ width: 100%;
4549
+ padding: var(--spacing-12, var(--spacing-12, 12px));
4550
+ text-align: center;
4551
+ font-family: var(--typography-button-family);
4552
+ font-size: var(--typography-button-s-size);
4553
+ font-weight: var(--typography-button-s-weight);
4554
+ line-height: var(--typography-button-s-line-height);
4555
+ letter-spacing: var(--typography-button-s-letter-spacing);
4556
+ color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
4557
+ background-color: #0000;
4558
+ }
4366
4559
  .IncodeSnackbar {
4367
4560
  align-items: center;
4368
4561
  gap: var(--spacing-12, var(--spacing-12, 12px));
@@ -1,2 +1,2 @@
1
- import { t as e } from "../ekybModule-CzoycvEv.js";
1
+ import { t as e } from "../ekybModule-BRgihGGi.js";
2
2
  export { e as EkybModule };
@@ -2,22 +2,21 @@
2
2
  @layer properties {
3
3
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4
4
  *, :before, :after, ::backdrop {
5
- --tw-font-weight: initial;
6
5
  --tw-border-style: solid;
7
6
  }
8
7
  }
9
8
  }
10
9
 
11
- .IncodeEkybSpinner {
12
- flex: 1;
13
- }
14
-
15
10
  .IncodeEkybPage {
16
11
  max-width: 480px;
17
12
  margin-inline: auto;
18
13
  }
19
14
 
20
- .IncodeEkybForm {
15
+ .IncodeEkybPage .IncodeEkybSpinner {
16
+ flex: 1;
17
+ }
18
+
19
+ .IncodeEkybPage .IncodeEkybForm {
21
20
  margin-top: var(--spacing-32, var(--spacing-32, 32px));
22
21
  gap: var(--spacing-16, var(--spacing-16, 16px));
23
22
  flex-direction: column;
@@ -25,91 +24,45 @@
25
24
  display: flex;
26
25
  }
27
26
 
28
- .IncodeEkybForm .IncodeInputComposed, .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybForm .IncodeFormField {
27
+ .IncodeEkybPage .IncodeEkybForm .IncodeInputComposed, .IncodeEkybPage .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybPage .IncodeEkybForm .IncodeFormField {
29
28
  margin-inline: auto;
30
29
  }
31
30
 
32
- .IncodeEkybForm .IncodeFormField {
31
+ .IncodeEkybPage .IncodeEkybForm .IncodeFormField {
33
32
  margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
34
33
  }
35
34
 
36
- .IncodeEkybForm .IncodeAddressAutocomplete {
35
+ .IncodeEkybPage .IncodeEkybForm .IncodeAddressAutocomplete {
37
36
  margin-inline: auto;
38
37
  }
39
38
 
40
- .IncodeEkybFooter {
41
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
42
- }
43
-
44
- @media (min-width: 768px) {
45
- .IncodePageContainer.IncodeEkybPage {
46
- margin-top: var(--spacing-0, var(--spacing-none, 0px));
47
- height: 95dvh;
48
- max-height: none;
49
- }
50
-
51
- .IncodeEkybPage .IncodePageInner {
52
- height: 95%;
53
- }
54
-
55
- .IncodePageContainer.IncodeEkybPageScrollable {
56
- max-width: 500px;
57
- }
58
-
59
- .IncodeEkybPage .IncodePageContent {
60
- min-height: var(--spacing-0, var(--spacing-none, 0px));
61
- }
62
-
63
- .IncodeEkybPage .IncodeEkybForm {
64
- min-height: var(--spacing-0, var(--spacing-none, 0px));
65
- padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
66
- overflow-y: auto;
67
- }
68
-
69
- .IncodeEkybPageScrollable .IncodeEkybForm {
70
- margin-left: var(--spacing-8, var(--spacing-8, 8px));
71
- }
72
-
73
- .IncodeEkybFooter {
74
- flex-shrink: 0;
75
- }
76
- }
77
-
78
- .IncodeEkybPage .IncodeEkybSectionHeader {
79
- font-family: var(--typography-headline-family);
80
- font-size: var(--typography-headline-h3-size);
81
- font-weight: var(--typography-headline-h3-weight);
82
- line-height: var(--typography-headline-h3-line-height);
83
- letter-spacing: var(--typography-headline-h3-letter-spacing);
84
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
85
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
86
- color: var(--color-input-text-label-default, var(--input-text-label-default));
87
- margin-inline: auto;
88
- margin-top: var(--spacing-16, var(--spacing-16, 16px));
39
+ .IncodeEkybPage .IncodeEkybCountrySelector {
89
40
  width: 100%;
90
- max-width: 420px;
91
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
92
41
  }
93
42
 
94
- .IncodeEkybUbos, .IncodeEkybUboEntry {
43
+ .IncodeEkybPage .IncodeEkybUbos, .IncodeEkybPage .IncodeEkybUboEntry {
95
44
  gap: var(--spacing-16, var(--spacing-16, 16px));
96
45
  flex-direction: column;
97
46
  display: flex;
98
47
  }
99
48
 
100
- .IncodeEkybRemoveUbo {
49
+ .IncodeEkybPage .IncodeEkybRemoveUbo {
101
50
  cursor: pointer;
102
51
  border-style: var(--tw-border-style);
103
52
  border-width: var(--border-width-none, var(--primitive-border-width-0));
104
53
  --tw-border-style: none;
105
54
  padding: var(--spacing-0, var(--spacing-none, 0px));
106
- font-size: var(--text-12, var(--primitive-typography-size-12));
55
+ font-family: var(--typography-body-family);
56
+ font-size: var(--typography-body-s-regular-size);
57
+ font-weight: var(--typography-body-s-regular-weight);
58
+ line-height: var(--typography-body-s-regular-line-height);
59
+ letter-spacing: var(--typography-body-s-regular-letter-spacing);
107
60
  color: var(--color-text-status-negative, var(--text-status-negative));
108
61
  background-color: #0000;
109
62
  border-style: none;
110
63
  }
111
64
 
112
- .IncodeEkybAddUbo {
65
+ .IncodeEkybPage .IncodeEkybAddUbo {
113
66
  cursor: pointer;
114
67
  border-style: var(--tw-border-style);
115
68
  border-width: var(--border-width-none, var(--primitive-border-width-0));
@@ -131,17 +84,60 @@
131
84
  text-decoration-thickness: auto;
132
85
  }
133
86
 
134
- .IncodeEkybAddUbo:hover {
87
+ .IncodeEkybPage .IncodeEkybAddUbo:hover {
135
88
  opacity: .8;
136
89
  }
137
90
 
138
- .IncodeEkybCountrySelector {
91
+ .IncodeEkybPage .IncodeEkybSectionHeader {
92
+ font-family: var(--typography-headline-family);
93
+ font-size: var(--typography-headline-h3-size);
94
+ font-weight: var(--typography-headline-h3-weight);
95
+ line-height: var(--typography-headline-h3-line-height);
96
+ letter-spacing: var(--typography-headline-h3-letter-spacing);
97
+ color: var(--color-input-text-label-default, var(--input-text-label-default));
98
+ margin-inline: auto;
99
+ margin-top: var(--spacing-16, var(--spacing-16, 16px));
139
100
  width: 100%;
101
+ max-width: 420px;
102
+ padding-block: var(--spacing-12, var(--spacing-12, 12px));
140
103
  }
141
104
 
142
- @property --tw-font-weight {
143
- syntax: "*";
144
- inherits: false
105
+ .IncodeEkybPage .IncodeEkybFooter {
106
+ margin-top: var(--spacing-24, var(--spacing-24, 24px));
107
+ }
108
+
109
+ @media (min-width: 768px) {
110
+ .IncodeEkybPage.IncodePageContainer {
111
+ margin-top: var(--spacing-0, var(--spacing-none, 0px));
112
+ height: 95dvh;
113
+ max-height: none;
114
+ }
115
+
116
+ .IncodeEkybPage .IncodePageInner {
117
+ height: 95%;
118
+ }
119
+
120
+ .IncodeEkybPage.IncodeEkybPageScrollable {
121
+ max-width: 500px;
122
+ }
123
+
124
+ .IncodeEkybPage .IncodePageContent {
125
+ min-height: var(--spacing-0, var(--spacing-none, 0px));
126
+ }
127
+
128
+ .IncodeEkybPage .IncodeEkybForm {
129
+ min-height: var(--spacing-0, var(--spacing-none, 0px));
130
+ padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
131
+ overflow-y: auto;
132
+ }
133
+
134
+ .IncodeEkybPage.IncodeEkybPageScrollable .IncodeEkybForm {
135
+ margin-left: var(--spacing-8, var(--spacing-8, 8px));
136
+ }
137
+
138
+ .IncodeEkybPage .IncodeEkybFooter {
139
+ flex-shrink: 0;
140
+ }
145
141
  }
146
142
 
147
143
  @property --tw-border-style {
@@ -10,7 +10,7 @@ import { n as g, t as _ } from "./formField-ClatQUGJ.js";
10
10
  import { t as v } from "./dropdownComposed-DU_6BWvm.js";
11
11
  import { t as y } from "./optionAccessibleLabel-BReW7dz0.js";
12
12
  import { t as b } from "./incodeModule-DcwjDRyJ.js";
13
- import { t as x } from "./addressAutocomplete-BCTe9jwj.js";
13
+ import { t as x } from "./addressAutocomplete-uNWmxnW9.js";
14
14
  import { DEV_ONLY_COUNTRIES as S, SUPPORTED_COUNTRIES as C, computeEkybDisplayErrors as w, createEkybManager as T } from "@incodetech/core/ekyb";
15
15
  //#region src/modules/ekyb/countrySelector.tsx
16
16
  function E(e) {
@@ -101,6 +101,8 @@ var A = ({ value: t, onChange: n }) => {
101
101
  let n = t === 0 ? u("ekyb.uboName") : u("ekyb.uboNameWithNumber", { number: t + 1 }), r = t === 0 ? u("ekyb.uboSurname") : u("ekyb.uboSurnameWithNumber", { number: t + 1 }), i = t === 0;
102
102
  return /* @__PURE__ */ s("div", {
103
103
  className: "IncodeEkybUboEntry",
104
+ role: "group",
105
+ "aria-label": `UBO ${t + 1}`,
104
106
  children: [
105
107
  /* @__PURE__ */ s(h, {
106
108
  id: `ubo-${t}-name`,
@@ -126,6 +128,7 @@ var A = ({ value: t, onChange: n }) => {
126
128
  className: "IncodeEkybRemoveUbo",
127
129
  onClick: () => l(t),
128
130
  type: "button",
131
+ "aria-label": `${u("common.remove")} UBO ${t + 1}`,
129
132
  children: u("common.remove")
130
133
  })
131
134
  ]
@@ -145,11 +148,14 @@ var A = ({ value: t, onChange: n }) => {
145
148
  }, [a.status, r]), a.status === "finished" || a.status === "closed" ? null : a.status === "loading" ? /* @__PURE__ */ s(m, {
146
149
  status: "submitting",
147
150
  submittingTitle: i("common.loading")
148
- }) : a.status === "submitting" ? /* @__PURE__ */ s(d, { children: /* @__PURE__ */ s(f, {
149
- fullScreen: !1,
150
- title: i("common.processing"),
151
- className: "IncodeEkybSpinner"
152
- }) }) : a.status === "success" ? /* @__PURE__ */ s(m, { status: "success" }) : a.status === "error" ? /* @__PURE__ */ s(m, {
151
+ }) : a.status === "submitting" ? /* @__PURE__ */ s(d, {
152
+ className: "IncodeEkybPage",
153
+ children: /* @__PURE__ */ s(f, {
154
+ fullScreen: !1,
155
+ title: i("common.processing"),
156
+ className: "IncodeEkybSpinner"
157
+ })
158
+ }) : a.status === "success" ? /* @__PURE__ */ s(m, { status: "success" }) : a.status === "error" ? /* @__PURE__ */ s(m, {
153
159
  status: "failure",
154
160
  onRetry: () => o.retry()
155
161
  }) : a.status === "form" ? /* @__PURE__ */ s(I, {
@@ -0,0 +1,2 @@
1
+ import { t as e } from "./ekybModule-BRgihGGi.js";
2
+ export { e as EkybModule };
@@ -1,2 +1,2 @@
1
- import { t as e } from "../ekycModule-Gc2iyiED.js";
1
+ import { t as e } from "../ekycModule-UDNvS-6q.js";
2
2
  export { e as EkycModule };