@saasquatch/mint-components 2.3.0-6 → 2.3.0-8

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 (67) hide show
  1. package/dist/cjs/sqm-banking-info-form_10.cjs.entry.js +50 -743
  2. package/dist/cjs/sqm-big-stat_47.cjs.entry.js +4 -4
  3. package/dist/cjs/sqm-email-verification_2.cjs.entry.js +16 -31
  4. package/dist/cjs/sqm-stencilbook.cjs.entry.js +253 -76
  5. package/dist/cjs/sqm-user-info-form-view-374a3f01.js +1427 -0
  6. package/dist/cjs/subregions-984e30d7.js +1505 -0
  7. package/dist/cjs/{useIndirectTaxForm-c3c1ec56.js → useIndirectTaxForm-112914a0.js} +5 -5
  8. package/dist/collection/components/sqm-partner-info-modal/usePartnerInfoModal.js +16 -31
  9. package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js +2 -0
  10. package/dist/collection/components/tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories.js +6 -0
  11. package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.js +13 -2
  12. package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/TaxAndCashDashboardView.stories.js +151 -0
  13. package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js +18 -7
  14. package/dist/collection/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.js +22 -19
  15. package/dist/collection/components/tax-and-cash/utils.js +55 -0
  16. package/dist/esm/sqm-banking-info-form_10.entry.js +38 -731
  17. package/dist/esm/sqm-big-stat_47.entry.js +2 -2
  18. package/dist/esm/sqm-email-verification_2.entry.js +16 -31
  19. package/dist/esm/sqm-stencilbook.entry.js +217 -40
  20. package/dist/esm/sqm-user-info-form-view-5322525c.js +1421 -0
  21. package/dist/esm/subregions-7c9778d0.js +1492 -0
  22. package/dist/esm/{useIndirectTaxForm-b2888ea5.js → useIndirectTaxForm-a6ac7e7e.js} +1 -1
  23. package/dist/esm-es5/sqm-banking-info-form_10.entry.js +1 -1
  24. package/dist/esm-es5/sqm-big-stat_47.entry.js +1 -1
  25. package/dist/esm-es5/sqm-email-verification_2.entry.js +1 -1
  26. package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
  27. package/dist/esm-es5/sqm-user-info-form-view-5322525c.js +1 -0
  28. package/dist/esm-es5/subregions-7c9778d0.js +1 -0
  29. package/dist/esm-es5/{useIndirectTaxForm-b2888ea5.js → useIndirectTaxForm-a6ac7e7e.js} +1 -1
  30. package/dist/mint-components/mint-components.esm.js +1 -1
  31. package/dist/mint-components/p-1f387c7b.system.js +1 -1
  32. package/dist/mint-components/{p-abe9f5b1.js → p-2d4132fb.js} +4 -4
  33. package/dist/mint-components/{p-e7f09044.entry.js → p-459c4251.entry.js} +6 -31
  34. package/dist/mint-components/p-5623f1e0.js +1 -0
  35. package/dist/mint-components/{p-b419f9ac.entry.js → p-5bc707cf.entry.js} +1 -1
  36. package/dist/mint-components/p-6eebbc59.entry.js +83 -0
  37. package/dist/mint-components/{p-58c24352.system.js → p-6ef373ed.system.js} +1 -1
  38. package/dist/mint-components/p-7a4cf6c9.system.entry.js +1 -0
  39. package/dist/mint-components/p-7f29622d.js +1 -0
  40. package/dist/mint-components/{p-a38eece5.system.entry.js → p-8a08cec6.system.entry.js} +1 -1
  41. package/dist/mint-components/p-90200f08.system.entry.js +1 -0
  42. package/dist/mint-components/p-91295327.entry.js +9 -0
  43. package/dist/mint-components/p-b21c53cb.system.entry.js +1 -0
  44. package/dist/mint-components/p-bd03efe0.system.js +1 -0
  45. package/dist/mint-components/p-c13c20b2.system.js +1 -0
  46. package/dist/types/components/sqm-partner-info-modal/usePartnerInfoModal.d.ts +0 -1
  47. package/dist/types/components/tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories.d.ts +1 -0
  48. package/dist/types/components/tax-and-cash/sqm-tax-and-cash-dashboard/TaxAndCashDashboardView.stories.d.ts +19 -0
  49. package/dist/types/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.d.ts +1 -0
  50. package/dist/types/components/tax-and-cash/utils.d.ts +5 -0
  51. package/docs/docs.docx +0 -0
  52. package/package.json +1 -1
  53. package/dist/cjs/sqm-user-info-form-view-0e1ddbe4.js +0 -1682
  54. package/dist/cjs/utils-a3b3d05b.js +0 -478
  55. package/dist/esm/sqm-user-info-form-view-e1ba6009.js +0 -1677
  56. package/dist/esm/utils-4f5cd04c.js +0 -467
  57. package/dist/esm-es5/sqm-user-info-form-view-e1ba6009.js +0 -1
  58. package/dist/esm-es5/utils-4f5cd04c.js +0 -1
  59. package/dist/mint-components/p-12d11abc.system.entry.js +0 -1
  60. package/dist/mint-components/p-1e6a2945.js +0 -1
  61. package/dist/mint-components/p-88e427ac.system.entry.js +0 -1
  62. package/dist/mint-components/p-a0eb0331.entry.js +0 -9
  63. package/dist/mint-components/p-b222bace.system.entry.js +0 -1
  64. package/dist/mint-components/p-b96ed8eb.js +0 -1
  65. package/dist/mint-components/p-cdabd9de.system.js +0 -1
  66. package/dist/mint-components/p-ebc519bc.system.js +0 -1
  67. package/dist/mint-components/p-ffcebe78.entry.js +0 -83
@@ -1,1677 +0,0 @@
1
- import { h } from './index-38ad4957.js';
2
- import { i as intl } from './global-75e96214.js';
3
- import { c as createStyleSheet } from './JSS-67b5cff8.js';
4
- import { f as formatErrorMessage, a as INDIRECT_TAX_PROVINCES, L as LoadingView, v as validateBillingField } from './utils-4f5cd04c.js';
5
- import { F as FORM_STEPS } from './data-8698cbc6.js';
6
-
7
- const style = {
8
- Description: {
9
- fontSize: "var(--sl-font-size-small)",
10
- marginTop: "var(--sl-spacing-small)",
11
- margin: "0 0 var(--sl-spacing-large)",
12
- color: "var(--sqm-text-subdued)",
13
- },
14
- Header: {
15
- fontSize: "var(--sl-font-size-large)",
16
- fontWeight: "var(-sl-font-weight-semibold)",
17
- margin: "0 0 var(--sl-spacing-xxx-small)",
18
- },
19
- Container: {},
20
- InvoiceTableContaier: {
21
- "& sl-details::part(base)": {
22
- border: "none",
23
- },
24
- "& sl-details::part(content)": {
25
- padding: 0,
26
- },
27
- "& sl-details::part(header)": {
28
- fontSize: "var(--sl-font-size-medium)",
29
- padding: "0px",
30
- },
31
- "& sl-details::part(summary)": {
32
- fontWeight: "var(-sl-font-weight-semibold)",
33
- },
34
- "& sl-details::part(summary-icon)": {
35
- marginRight: "100%",
36
- marginLeft: "var(--sl-spacing-x-small)",
37
- transform: "rotate(90deg)",
38
- },
39
- "& sl-details[open]::part(summary-icon)": {
40
- transform: "rotate(270deg)",
41
- },
42
- },
43
- };
44
- function InvoiceTableView(props, children) {
45
- const sheet = createStyleSheet(style);
46
- const styleString = sheet.toString();
47
- const vanillaStyle = `
48
- :host{
49
- display: block;
50
- }`;
51
- return (h("div", { class: sheet.classes.Container },
52
- h("style", { type: "text/css" },
53
- vanillaStyle,
54
- styleString),
55
- h("div", { class: sheet.classes.InvoiceTableContaier },
56
- h("sl-details", { summary: props.header },
57
- h("p", { class: sheet.classes.Description }, props.description),
58
- children))));
59
- }
60
-
61
- const vatLabels = {
62
- GB: "VAT",
63
- AU: "GST",
64
- NZ: "GST",
65
- CA: "HST",
66
- AT: "VAT",
67
- BE: "VAT",
68
- BG: "VAT",
69
- HR: "VAT",
70
- CY: "VAT",
71
- CZ: "VAT",
72
- DK: "VAT",
73
- EE: "VAT",
74
- FI: "VAT",
75
- FR: "VAT",
76
- DE: "VAT",
77
- GR: "VAT",
78
- HU: "VAT",
79
- IE: "VAT",
80
- IT: "VAT",
81
- LV: "VAT",
82
- LT: "VAT",
83
- LU: "VAT",
84
- MT: "VAT",
85
- NL: "VAT",
86
- PL: "VAT",
87
- PT: "VAT",
88
- RO: "VAT",
89
- SK: "VAT",
90
- SI: "VAT",
91
- ES: "VAT",
92
- SE: "VAT",
93
- IS: "VAT",
94
- IN: "GST",
95
- IL: "VAT",
96
- JP: "CT",
97
- MX: "VAT",
98
- NO: "VAT",
99
- SG: "GST",
100
- ZA: "VAT",
101
- KR: "VAT",
102
- CH: "VAT",
103
- TW: "VAT",
104
- TH: "VAT",
105
- PH: "VAT",
106
- MY: "SST",
107
- AE: "VAT",
108
- TR: "VAT",
109
- RU: "VAT",
110
- };
111
-
112
- const style$1 = {
113
- Container: {
114
- width: "100%",
115
- },
116
- InputContainer: {
117
- width: "100%",
118
- display: "flex",
119
- justifyContent: "flex-start",
120
- flexDirection: "column",
121
- gap: "16px",
122
- padding: "16px",
123
- maxWidth: "450px",
124
- },
125
- ConditionalInputsContainer: {
126
- width: "100%",
127
- display: "flex",
128
- justifyContent: "flex-start",
129
- flexDirection: "column",
130
- gap: "16px",
131
- },
132
- HR: {
133
- border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
134
- margin: "10px 0",
135
- },
136
- Input: { maxWidth: "500px" },
137
- Checkbox: {
138
- "&::part(control)": {
139
- borderRadius: "0 !important",
140
- },
141
- },
142
- SearchInput: {
143
- padding: "var(--sl-spacing-x-small)",
144
- },
145
- ErrorInput: {
146
- maxWidth: "500px",
147
- "&::part(base)": {
148
- border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)",
149
- borderRadius: "var(--sl-input-border-radius-medium)",
150
- },
151
- "&::part(help-text)": {
152
- color: "var(--sqm-danger-color-text)",
153
- },
154
- },
155
- };
156
- const sheet = createStyleSheet(style$1);
157
- const styleString = sheet.toString();
158
- const vanillaStyle = `
159
- :host{
160
- display: block;
161
- }
162
- * {
163
- margin: 0;
164
- padding: 0;
165
- box-sizing: border-box;
166
- }
167
- sl-menu-item::part(base) {
168
- color: var(--sqm-input-color);
169
- }
170
-
171
- sl-menu-item::part(base):hover {
172
- background-color: var(--sqm-input-border-color-hover);
173
- }
174
- sl-checkbox[checked]::part(control){
175
- background-color: var(--sqm-input-border-color-focus);
176
- }
177
-
178
- sl-checkbox[checked]::part(checked-icon){
179
- color: var(--sqm-input-background);
180
- }
181
- `;
182
- const OtherRegionSlotView = (props) => {
183
- var _a, _b, _c;
184
- const { states, states: { formState }, callbacks, text, } = props;
185
- const { classes } = sheet;
186
- const getTaxFieldLabel = (taxType) => {
187
- return intl.formatMessage({
188
- id: `tax-field-label${taxType}`,
189
- defaultMessage: text.indirectTaxNumber,
190
- }, { taxType });
191
- };
192
- const getTaxFieldError = (taxType) => {
193
- return intl.formatMessage({
194
- id: `tax-field-label${taxType}`,
195
- defaultMessage: text.error.indirectTaxNumber,
196
- }, { taxType });
197
- };
198
- const IndirectTaxNumberInput = ({ label, error, name, }) => {
199
- var _a;
200
- return (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: label, disabled: states.loading || states.disabled, value: formState[name] }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a[name]) && {
201
- class: classes.ErrorInput,
202
- helpText: error,
203
- }), { id: name, name: `/${name}` })));
204
- };
205
- const SpainFields = () => {
206
- var _a, _b;
207
- return (h("div", { class: classes.ConditionalInputsContainer },
208
- h("sl-select", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, value: formState.subRegion, label: text.subRegion, disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
209
- class: classes.ErrorInput,
210
- helpText: formatErrorMessage(text.subRegion, text.error.fieldRequiredError),
211
- }), { id: "subRegion", name: "/subRegion" }), props.data.esRegions.map((r) => (h("sl-menu-item", { value: r.regionCode }, r.displayName)))),
212
- h(IndirectTaxNumberInput, { name: "indirectTaxNumber", label: getTaxFieldLabel("VAT"), error: getTaxFieldError("VAT") }),
213
- h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled || states.isPartner }, text.isRegisteredSubRegionIncomeTax),
214
- formState.hasSubRegionTaxNumber && (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.subRegionTaxNumberLabel, disabled: states.loading || states.disabled, value: formState.subRegionTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.subRegionTaxNumber) && {
215
- class: classes.ErrorInput,
216
- helpText: formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
217
- }), { id: "subRegionTaxNumber", name: "/subRegionTaxNumber" })))));
218
- };
219
- const CanadaFields = () => {
220
- var _a, _b;
221
- const { classes } = sheet;
222
- const currentTaxType = (_a = INDIRECT_TAX_PROVINCES === null || INDIRECT_TAX_PROVINCES === void 0 ? void 0 : INDIRECT_TAX_PROVINCES.find((p) => p.regionCode === formState.province)) === null || _a === void 0 ? void 0 : _a.taxType;
223
- return (h("div", { class: classes.ConditionalInputsContainer },
224
- h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.province, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("province", e) }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.province) && {
225
- class: classes.ErrorInput,
226
- helpText: formatErrorMessage(text.province, text.error.fieldRequiredError),
227
- }), { id: "province", name: "/province" }), props.data.provinces.map((p) => (h("sl-menu-item", { value: p.regionCode }, p.displayName)))),
228
- currentTaxType === "GST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("GST"), error: getTaxFieldError("GST"), name: "indirectTaxNumber" })),
229
- currentTaxType === "HST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("HST"), error: getTaxFieldError("HST"), name: "indirectTaxNumber" })),
230
- formState.province === "QUEBEC" && (h("div", { class: classes.ConditionalInputsContainer },
231
- h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
232
- formState.hasQst && (h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
233
- };
234
- const getActiveForm = (selectedRegion) => {
235
- var _a;
236
- switch (selectedRegion) {
237
- case "CA":
238
- return h(CanadaFields, null);
239
- case "ES":
240
- return h(SpainFields, null);
241
- default:
242
- return (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, value: formState.indirectTaxNumber, label: getTaxFieldLabel(vatLabels[selectedRegion] || "GENERAL"), disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
243
- class: classes.ErrorInput,
244
- helpText: getTaxFieldError(vatLabels[selectedRegion] || "GENERAL"),
245
- }), { id: "indirectTaxNumber", name: "/indirectTaxNumber" })));
246
- }
247
- };
248
- const activeForm = getActiveForm(formState.selectedRegion);
249
- return (h("div", { style: states.hide ? { display: "none" } : {} },
250
- h("form", { class: classes.Container },
251
- h("style", { type: "text/css" },
252
- styleString,
253
- vanillaStyle),
254
- h("hr", { class: classes.HR }),
255
- h("div", { class: classes.InputContainer },
256
- h("sl-select", Object.assign({ required: true, class: classes.Input, value: formState.selectedRegion, exportparts: "label: input-label, base: input-base", label: text.selectedRegion, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("selectedRegion", e) }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.selectedRegion) && {
257
- class: classes.ErrorInput,
258
- helpText: formatErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
259
- }), { id: "selectedRegion", name: "/selectedRegion" }),
260
- h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
261
- // Stop shoelace intercepting key presses
262
- e.stopPropagation();
263
- }, "onSl-input": (e) => {
264
- callbacks.setCountrySearch(e.target.value);
265
- } }), (_b = props.data.countries) === null || _b === void 0 ? void 0 :
266
- _b.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_c = props.data.allCountries) === null || _c === void 0 ? void 0 :
267
- _c.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
268
- activeForm),
269
- h("hr", { class: classes.HR }))));
270
- };
271
-
272
- const PHONE_EXTENSIONS = {
273
- AF: {
274
- name: "Afghanistan",
275
- dial_code: "+93",
276
- },
277
- AX: {
278
- name: "Aland Islands",
279
- dial_code: "+358",
280
- },
281
- AL: {
282
- name: "Albania",
283
- dial_code: "+355",
284
- },
285
- DZ: {
286
- name: "Algeria",
287
- dial_code: "+213",
288
- },
289
- AS: {
290
- name: "AmericanSamoa",
291
- dial_code: "+1684",
292
- },
293
- AD: {
294
- name: "Andorra",
295
- dial_code: "+376",
296
- },
297
- AO: {
298
- name: "Angola",
299
- dial_code: "+244",
300
- },
301
- AI: {
302
- name: "Anguilla",
303
- dial_code: "+1264",
304
- },
305
- AQ: {
306
- name: "Antarctica",
307
- dial_code: "+672",
308
- },
309
- AG: {
310
- name: "Antigua and Barbuda",
311
- dial_code: "+1268",
312
- },
313
- AR: {
314
- name: "Argentina",
315
- dial_code: "+54",
316
- },
317
- AM: {
318
- name: "Armenia",
319
- dial_code: "+374",
320
- },
321
- AW: {
322
- name: "Aruba",
323
- dial_code: "+297",
324
- },
325
- AU: {
326
- name: "Australia",
327
- dial_code: "+61",
328
- },
329
- AT: {
330
- name: "Austria",
331
- dial_code: "+43",
332
- },
333
- AZ: {
334
- name: "Azerbaijan",
335
- dial_code: "+994",
336
- },
337
- BS: {
338
- name: "Bahamas",
339
- dial_code: "+1242",
340
- },
341
- BH: {
342
- name: "Bahrain",
343
- dial_code: "+973",
344
- },
345
- BD: {
346
- name: "Bangladesh",
347
- dial_code: "+880",
348
- },
349
- BB: {
350
- name: "Barbados",
351
- dial_code: "+1246",
352
- },
353
- BY: {
354
- name: "Belarus",
355
- dial_code: "+375",
356
- },
357
- BE: {
358
- name: "Belgium",
359
- dial_code: "+32",
360
- },
361
- BZ: {
362
- name: "Belize",
363
- dial_code: "+501",
364
- },
365
- BJ: {
366
- name: "Benin",
367
- dial_code: "+229",
368
- },
369
- BM: {
370
- name: "Bermuda",
371
- dial_code: "+1441",
372
- },
373
- BT: {
374
- name: "Bhutan",
375
- dial_code: "+975",
376
- },
377
- BO: {
378
- name: "Bolivia, Plurinational State of",
379
- dial_code: "+591",
380
- },
381
- BA: {
382
- name: "Bosnia and Herzegovina",
383
- dial_code: "+387",
384
- },
385
- BW: {
386
- name: "Botswana",
387
- dial_code: "+267",
388
- },
389
- BR: {
390
- name: "Brazil",
391
- dial_code: "+55",
392
- },
393
- IO: {
394
- name: "British Indian Ocean Territory",
395
- dial_code: "+246",
396
- },
397
- BN: {
398
- name: "Brunei Darussalam",
399
- dial_code: "+673",
400
- },
401
- BG: {
402
- name: "Bulgaria",
403
- dial_code: "+359",
404
- },
405
- BF: {
406
- name: "Burkina Faso",
407
- dial_code: "+226",
408
- },
409
- BI: {
410
- name: "Burundi",
411
- dial_code: "+257",
412
- },
413
- KH: {
414
- name: "Cambodia",
415
- dial_code: "+855",
416
- },
417
- CM: {
418
- name: "Cameroon",
419
- dial_code: "+237",
420
- },
421
- CA: {
422
- name: "Canada",
423
- dial_code: "+1",
424
- },
425
- CV: {
426
- name: "Cape Verde",
427
- dial_code: "+238",
428
- },
429
- KY: {
430
- name: "Cayman Islands",
431
- dial_code: "+ 345",
432
- },
433
- CF: {
434
- name: "Central African Republic",
435
- dial_code: "+236",
436
- },
437
- TD: {
438
- name: "Chad",
439
- dial_code: "+235",
440
- },
441
- CL: {
442
- name: "Chile",
443
- dial_code: "+56",
444
- },
445
- CN: {
446
- name: "China",
447
- dial_code: "+86",
448
- },
449
- CX: {
450
- name: "Christmas Island",
451
- dial_code: "+61",
452
- },
453
- CC: {
454
- name: "Cocos (Keeling) Islands",
455
- dial_code: "+61",
456
- },
457
- CO: {
458
- name: "Colombia",
459
- dial_code: "+57",
460
- },
461
- KM: {
462
- name: "Comoros",
463
- dial_code: "+269",
464
- },
465
- CG: {
466
- name: "Congo",
467
- dial_code: "+242",
468
- },
469
- CD: {
470
- name: "Congo, The Democratic Republic of the Congo",
471
- dial_code: "+243",
472
- },
473
- CK: {
474
- name: "Cook Islands",
475
- dial_code: "+682",
476
- },
477
- CR: {
478
- name: "Costa Rica",
479
- dial_code: "+506",
480
- },
481
- CI: {
482
- name: "Cote d'Ivoire",
483
- dial_code: "+225",
484
- },
485
- HR: {
486
- name: "Croatia",
487
- dial_code: "+385",
488
- },
489
- CU: {
490
- name: "Cuba",
491
- dial_code: "+53",
492
- },
493
- CY: {
494
- name: "Cyprus",
495
- dial_code: "+357",
496
- },
497
- CZ: {
498
- name: "Czech Republic",
499
- dial_code: "+420",
500
- },
501
- DK: {
502
- name: "Denmark",
503
- dial_code: "+45",
504
- },
505
- DJ: {
506
- name: "Djibouti",
507
- dial_code: "+253",
508
- },
509
- DM: {
510
- name: "Dominica",
511
- dial_code: "+1767",
512
- },
513
- DO: {
514
- name: "Dominican Republic",
515
- dial_code: "+1849",
516
- },
517
- EC: {
518
- name: "Ecuador",
519
- dial_code: "+593",
520
- },
521
- EG: {
522
- name: "Egypt",
523
- dial_code: "+20",
524
- },
525
- SV: {
526
- name: "El Salvador",
527
- dial_code: "+503",
528
- },
529
- GQ: {
530
- name: "Equatorial Guinea",
531
- dial_code: "+240",
532
- },
533
- ER: {
534
- name: "Eritrea",
535
- dial_code: "+291",
536
- },
537
- EE: {
538
- name: "Estonia",
539
- dial_code: "+372",
540
- },
541
- ET: {
542
- name: "Ethiopia",
543
- dial_code: "+251",
544
- },
545
- FK: {
546
- name: "Falkland Islands (Malvinas)",
547
- dial_code: "+500",
548
- },
549
- FO: {
550
- name: "Faroe Islands",
551
- dial_code: "+298",
552
- },
553
- FJ: {
554
- name: "Fiji",
555
- dial_code: "+679",
556
- },
557
- FI: {
558
- name: "Finland",
559
- dial_code: "+358",
560
- },
561
- FR: {
562
- name: "France",
563
- dial_code: "+33",
564
- },
565
- GF: {
566
- name: "French Guiana",
567
- dial_code: "+594",
568
- },
569
- PF: {
570
- name: "French Polynesia",
571
- dial_code: "+689",
572
- },
573
- GA: {
574
- name: "Gabon",
575
- dial_code: "+241",
576
- },
577
- GM: {
578
- name: "Gambia",
579
- dial_code: "+220",
580
- },
581
- GE: {
582
- name: "Georgia",
583
- dial_code: "+995",
584
- },
585
- DE: {
586
- name: "Germany",
587
- dial_code: "+49",
588
- },
589
- GH: {
590
- name: "Ghana",
591
- dial_code: "+233",
592
- },
593
- GI: {
594
- name: "Gibraltar",
595
- dial_code: "+350",
596
- },
597
- GR: {
598
- name: "Greece",
599
- dial_code: "+30",
600
- },
601
- GL: {
602
- name: "Greenland",
603
- dial_code: "+299",
604
- },
605
- GD: {
606
- name: "Grenada",
607
- dial_code: "+1473",
608
- },
609
- GP: {
610
- name: "Guadeloupe",
611
- dial_code: "+590",
612
- },
613
- GU: {
614
- name: "Guam",
615
- dial_code: "+1671",
616
- },
617
- GT: {
618
- name: "Guatemala",
619
- dial_code: "+502",
620
- },
621
- GG: {
622
- name: "Guernsey",
623
- dial_code: "+44",
624
- },
625
- GN: {
626
- name: "Guinea",
627
- dial_code: "+224",
628
- },
629
- GW: {
630
- name: "Guinea-Bissau",
631
- dial_code: "+245",
632
- },
633
- GY: {
634
- name: "Guyana",
635
- dial_code: "+595",
636
- },
637
- HT: {
638
- name: "Haiti",
639
- dial_code: "+509",
640
- },
641
- VA: {
642
- name: "Holy See (Vatican City State)",
643
- dial_code: "+379",
644
- },
645
- HN: {
646
- name: "Honduras",
647
- dial_code: "+504",
648
- },
649
- HK: {
650
- name: "Hong Kong",
651
- dial_code: "+852",
652
- },
653
- HU: {
654
- name: "Hungary",
655
- dial_code: "+36",
656
- },
657
- IS: {
658
- name: "Iceland",
659
- dial_code: "+354",
660
- },
661
- IN: {
662
- name: "India",
663
- dial_code: "+91",
664
- },
665
- ID: {
666
- name: "Indonesia",
667
- dial_code: "+62",
668
- },
669
- IR: {
670
- name: "Iran, Islamic Republic of Persian Gulf",
671
- dial_code: "+98",
672
- },
673
- IQ: {
674
- name: "Iraq",
675
- dial_code: "+964",
676
- },
677
- IE: {
678
- name: "Ireland",
679
- dial_code: "+353",
680
- },
681
- IM: {
682
- name: "Isle of Man",
683
- dial_code: "+44",
684
- },
685
- IL: {
686
- name: "Israel",
687
- dial_code: "+972",
688
- },
689
- IT: {
690
- name: "Italy",
691
- dial_code: "+39",
692
- },
693
- JM: {
694
- name: "Jamaica",
695
- dial_code: "+1876",
696
- },
697
- JP: {
698
- name: "Japan",
699
- dial_code: "+81",
700
- },
701
- JE: {
702
- name: "Jersey",
703
- dial_code: "+44",
704
- },
705
- JO: {
706
- name: "Jordan",
707
- dial_code: "+962",
708
- },
709
- KZ: {
710
- name: "Kazakhstan",
711
- dial_code: "+77",
712
- },
713
- KE: {
714
- name: "Kenya",
715
- dial_code: "+254",
716
- },
717
- KI: {
718
- name: "Kiribati",
719
- dial_code: "+686",
720
- },
721
- KP: {
722
- name: "Korea, Democratic People's Republic of Korea",
723
- dial_code: "+850",
724
- },
725
- KR: {
726
- name: "Korea, Republic of South Korea",
727
- dial_code: "+82",
728
- },
729
- KW: {
730
- name: "Kuwait",
731
- dial_code: "+965",
732
- },
733
- KG: {
734
- name: "Kyrgyzstan",
735
- dial_code: "+996",
736
- },
737
- LA: {
738
- name: "Laos",
739
- dial_code: "+856",
740
- },
741
- LV: {
742
- name: "Latvia",
743
- dial_code: "+371",
744
- },
745
- LB: {
746
- name: "Lebanon",
747
- dial_code: "+961",
748
- },
749
- LS: {
750
- name: "Lesotho",
751
- dial_code: "+266",
752
- },
753
- LR: {
754
- name: "Liberia",
755
- dial_code: "+231",
756
- },
757
- LY: {
758
- name: "Libyan Arab Jamahiriya",
759
- dial_code: "+218",
760
- },
761
- LI: {
762
- name: "Liechtenstein",
763
- dial_code: "+423",
764
- },
765
- LT: {
766
- name: "Lithuania",
767
- dial_code: "+370",
768
- },
769
- LU: {
770
- name: "Luxembourg",
771
- dial_code: "+352",
772
- },
773
- MO: {
774
- name: "Macao",
775
- dial_code: "+853",
776
- },
777
- MK: {
778
- name: "Macedonia",
779
- dial_code: "+389",
780
- },
781
- MG: {
782
- name: "Madagascar",
783
- dial_code: "+261",
784
- },
785
- MW: {
786
- name: "Malawi",
787
- dial_code: "+265",
788
- },
789
- MY: {
790
- name: "Malaysia",
791
- dial_code: "+60",
792
- },
793
- MV: {
794
- name: "Maldives",
795
- dial_code: "+960",
796
- },
797
- ML: {
798
- name: "Mali",
799
- dial_code: "+223",
800
- },
801
- MT: {
802
- name: "Malta",
803
- dial_code: "+356",
804
- },
805
- MH: {
806
- name: "Marshall Islands",
807
- dial_code: "+692",
808
- },
809
- MQ: {
810
- name: "Martinique",
811
- dial_code: "+596",
812
- },
813
- MR: {
814
- name: "Mauritania",
815
- dial_code: "+222",
816
- },
817
- MU: {
818
- name: "Mauritius",
819
- dial_code: "+230",
820
- },
821
- YT: {
822
- name: "Mayotte",
823
- dial_code: "+262",
824
- },
825
- MX: {
826
- name: "Mexico",
827
- dial_code: "+52",
828
- },
829
- FM: {
830
- name: "Micronesia, Federated States of Micronesia",
831
- dial_code: "+691",
832
- },
833
- MD: {
834
- name: "Moldova",
835
- dial_code: "+373",
836
- },
837
- MC: {
838
- name: "Monaco",
839
- dial_code: "+377",
840
- },
841
- MN: {
842
- name: "Mongolia",
843
- dial_code: "+976",
844
- },
845
- ME: {
846
- name: "Montenegro",
847
- dial_code: "+382",
848
- },
849
- MS: {
850
- name: "Montserrat",
851
- dial_code: "+1664",
852
- },
853
- MA: {
854
- name: "Morocco",
855
- dial_code: "+212",
856
- },
857
- MZ: {
858
- name: "Mozambique",
859
- dial_code: "+258",
860
- },
861
- MM: {
862
- name: "Myanmar",
863
- dial_code: "+95",
864
- },
865
- NA: {
866
- name: "Namibia",
867
- dial_code: "+264",
868
- },
869
- NR: {
870
- name: "Nauru",
871
- dial_code: "+674",
872
- },
873
- NP: {
874
- name: "Nepal",
875
- dial_code: "+977",
876
- },
877
- NL: {
878
- name: "Netherlands",
879
- dial_code: "+31",
880
- },
881
- AN: {
882
- name: "Netherlands Antilles",
883
- dial_code: "+599",
884
- },
885
- NC: {
886
- name: "New Caledonia",
887
- dial_code: "+687",
888
- },
889
- NZ: {
890
- name: "New Zealand",
891
- dial_code: "+64",
892
- },
893
- NI: {
894
- name: "Nicaragua",
895
- dial_code: "+505",
896
- },
897
- NE: {
898
- name: "Niger",
899
- dial_code: "+227",
900
- },
901
- NG: {
902
- name: "Nigeria",
903
- dial_code: "+234",
904
- },
905
- NU: {
906
- name: "Niue",
907
- dial_code: "+683",
908
- },
909
- NF: {
910
- name: "Norfolk Island",
911
- dial_code: "+672",
912
- },
913
- MP: {
914
- name: "Northern Mariana Islands",
915
- dial_code: "+1670",
916
- },
917
- NO: {
918
- name: "Norway",
919
- dial_code: "+47",
920
- },
921
- OM: {
922
- name: "Oman",
923
- dial_code: "+968",
924
- },
925
- PK: {
926
- name: "Pakistan",
927
- dial_code: "+92",
928
- },
929
- PW: {
930
- name: "Palau",
931
- dial_code: "+680",
932
- },
933
- PS: {
934
- name: "Palestinian Territory, Occupied",
935
- dial_code: "+970",
936
- },
937
- PA: {
938
- name: "Panama",
939
- dial_code: "+507",
940
- },
941
- PG: {
942
- name: "Papua New Guinea",
943
- dial_code: "+675",
944
- },
945
- PY: {
946
- name: "Paraguay",
947
- dial_code: "+595",
948
- },
949
- PE: {
950
- name: "Peru",
951
- dial_code: "+51",
952
- },
953
- PH: {
954
- name: "Philippines",
955
- dial_code: "+63",
956
- },
957
- PN: {
958
- name: "Pitcairn",
959
- dial_code: "+872",
960
- },
961
- PL: {
962
- name: "Poland",
963
- dial_code: "+48",
964
- },
965
- PT: {
966
- name: "Portugal",
967
- dial_code: "+351",
968
- },
969
- PR: {
970
- name: "Puerto Rico",
971
- dial_code: "+1939",
972
- },
973
- QA: {
974
- name: "Qatar",
975
- dial_code: "+974",
976
- },
977
- RO: {
978
- name: "Romania",
979
- dial_code: "+40",
980
- },
981
- RU: {
982
- name: "Russia",
983
- dial_code: "+7",
984
- },
985
- RW: {
986
- name: "Rwanda",
987
- dial_code: "+250",
988
- },
989
- RE: {
990
- name: "Reunion",
991
- dial_code: "+262",
992
- },
993
- BL: {
994
- name: "Saint Barthelemy",
995
- dial_code: "+590",
996
- },
997
- SH: {
998
- name: "Saint Helena, Ascension and Tristan Da Cunha",
999
- dial_code: "+290",
1000
- },
1001
- KN: {
1002
- name: "Saint Kitts and Nevis",
1003
- dial_code: "+1869",
1004
- },
1005
- LC: {
1006
- name: "Saint Lucia",
1007
- dial_code: "+1758",
1008
- },
1009
- MF: {
1010
- name: "Saint Martin",
1011
- dial_code: "+590",
1012
- },
1013
- PM: {
1014
- name: "Saint Pierre and Miquelon",
1015
- dial_code: "+508",
1016
- },
1017
- VC: {
1018
- name: "Saint Vincent and the Grenadines",
1019
- dial_code: "+1784",
1020
- },
1021
- WS: {
1022
- name: "Samoa",
1023
- dial_code: "+685",
1024
- },
1025
- SM: {
1026
- name: "San Marino",
1027
- dial_code: "+378",
1028
- },
1029
- ST: {
1030
- name: "Sao Tome and Principe",
1031
- dial_code: "+239",
1032
- },
1033
- SA: {
1034
- name: "Saudi Arabia",
1035
- dial_code: "+966",
1036
- },
1037
- SN: {
1038
- name: "Senegal",
1039
- dial_code: "+221",
1040
- },
1041
- RS: {
1042
- name: "Serbia",
1043
- dial_code: "+381",
1044
- },
1045
- SC: {
1046
- name: "Seychelles",
1047
- dial_code: "+248",
1048
- },
1049
- SL: {
1050
- name: "Sierra Leone",
1051
- dial_code: "+232",
1052
- },
1053
- SG: {
1054
- name: "Singapore",
1055
- dial_code: "+65",
1056
- },
1057
- SK: {
1058
- name: "Slovakia",
1059
- dial_code: "+421",
1060
- },
1061
- SI: {
1062
- name: "Slovenia",
1063
- dial_code: "+386",
1064
- },
1065
- SB: {
1066
- name: "Solomon Islands",
1067
- dial_code: "+677",
1068
- },
1069
- SO: {
1070
- name: "Somalia",
1071
- dial_code: "+252",
1072
- },
1073
- ZA: {
1074
- name: "South Africa",
1075
- dial_code: "+27",
1076
- },
1077
- SS: {
1078
- name: "South Sudan",
1079
- dial_code: "+211",
1080
- },
1081
- GS: {
1082
- name: "South Georgia and the South Sandwich Islands",
1083
- dial_code: "+500",
1084
- },
1085
- ES: {
1086
- name: "Spain",
1087
- dial_code: "+34",
1088
- },
1089
- LK: {
1090
- name: "Sri Lanka",
1091
- dial_code: "+94",
1092
- },
1093
- SD: {
1094
- name: "Sudan",
1095
- dial_code: "+249",
1096
- },
1097
- SR: {
1098
- name: "Suriname",
1099
- dial_code: "+597",
1100
- },
1101
- SJ: {
1102
- name: "Svalbard and Jan Mayen",
1103
- dial_code: "+47",
1104
- },
1105
- SZ: {
1106
- name: "Swaziland",
1107
- dial_code: "+268",
1108
- },
1109
- SE: {
1110
- name: "Sweden",
1111
- dial_code: "+46",
1112
- },
1113
- CH: {
1114
- name: "Switzerland",
1115
- dial_code: "+41",
1116
- },
1117
- SY: {
1118
- name: "Syrian Arab Republic",
1119
- dial_code: "+963",
1120
- },
1121
- TW: {
1122
- name: "Taiwan",
1123
- dial_code: "+886",
1124
- },
1125
- TJ: {
1126
- name: "Tajikistan",
1127
- dial_code: "+992",
1128
- },
1129
- TZ: {
1130
- name: "Tanzania, United Republic of Tanzania",
1131
- dial_code: "+255",
1132
- },
1133
- TH: {
1134
- name: "Thailand",
1135
- dial_code: "+66",
1136
- },
1137
- TL: {
1138
- name: "Timor-Leste",
1139
- dial_code: "+670",
1140
- },
1141
- TG: {
1142
- name: "Togo",
1143
- dial_code: "+228",
1144
- },
1145
- TK: {
1146
- name: "Tokelau",
1147
- dial_code: "+690",
1148
- },
1149
- TO: {
1150
- name: "Tonga",
1151
- dial_code: "+676",
1152
- },
1153
- TT: {
1154
- name: "Trinidad and Tobago",
1155
- dial_code: "+1868",
1156
- },
1157
- TN: {
1158
- name: "Tunisia",
1159
- dial_code: "+216",
1160
- },
1161
- TR: {
1162
- name: "Turkey",
1163
- dial_code: "+90",
1164
- },
1165
- TM: {
1166
- name: "Turkmenistan",
1167
- dial_code: "+993",
1168
- },
1169
- TC: {
1170
- name: "Turks and Caicos Islands",
1171
- dial_code: "+1649",
1172
- },
1173
- TV: {
1174
- name: "Tuvalu",
1175
- dial_code: "+688",
1176
- },
1177
- UG: {
1178
- name: "Uganda",
1179
- dial_code: "+256",
1180
- },
1181
- UA: {
1182
- name: "Ukraine",
1183
- dial_code: "+380",
1184
- },
1185
- AE: {
1186
- name: "United Arab Emirates",
1187
- dial_code: "+971",
1188
- },
1189
- GB: {
1190
- name: "United Kingdom",
1191
- dial_code: "+44",
1192
- },
1193
- US: {
1194
- name: "United States",
1195
- dial_code: "+1",
1196
- },
1197
- UY: {
1198
- name: "Uruguay",
1199
- dial_code: "+598",
1200
- },
1201
- UZ: {
1202
- name: "Uzbekistan",
1203
- dial_code: "+998",
1204
- },
1205
- VU: {
1206
- name: "Vanuatu",
1207
- dial_code: "+678",
1208
- },
1209
- VE: {
1210
- name: "Venezuela, Bolivarian Republic of Venezuela",
1211
- dial_code: "+58",
1212
- },
1213
- VN: {
1214
- name: "Vietnam",
1215
- dial_code: "+84",
1216
- },
1217
- VG: {
1218
- name: "Virgin Islands, British",
1219
- dial_code: "+1284",
1220
- },
1221
- VI: {
1222
- name: "Virgin Islands, U.S.",
1223
- dial_code: "+1340",
1224
- },
1225
- WF: {
1226
- name: "Wallis and Futuna",
1227
- dial_code: "+681",
1228
- },
1229
- YE: {
1230
- name: "Yemen",
1231
- dial_code: "+967",
1232
- },
1233
- ZM: {
1234
- name: "Zambia",
1235
- dial_code: "+260",
1236
- },
1237
- ZW: {
1238
- name: "Zimbabwe",
1239
- dial_code: "+263",
1240
- },
1241
- };
1242
-
1243
- const style$2 = {
1244
- FormWrapper: {},
1245
- ErrorInput: {
1246
- "&::part(base)": {
1247
- border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)",
1248
- borderRadius: "var(--sl-input-border-radius-medium)",
1249
- },
1250
- "&::part(help-text)": {
1251
- color: "var(--sqm-danger-color-text)",
1252
- },
1253
- },
1254
- ErrorText: {
1255
- color: "var(--sqm-danger-color-text)",
1256
- marginTop: "10px",
1257
- },
1258
- TextContainer: {
1259
- display: "flex",
1260
- justifyContent: "flex-start",
1261
- flexDirection: "column",
1262
- gap: "24px",
1263
- paddingBottom: "16px",
1264
- },
1265
- InputContainer: {
1266
- display: "flex",
1267
- justifyContent: "flex-start",
1268
- flexDirection: "column",
1269
- gap: "24px",
1270
- paddingBottom: "36px",
1271
- maxWidth: "450px",
1272
- },
1273
- SearchInput: {
1274
- padding: "var(--sl-spacing-x-small)",
1275
- },
1276
- BtnContainer: {
1277
- paddingTop: "36px",
1278
- display: "flex",
1279
- gap: "8px",
1280
- },
1281
- CheckboxWrapper: {
1282
- display: "flex",
1283
- justifyContent: "flex-start",
1284
- flexDirection: "column",
1285
- },
1286
- BoldText: {
1287
- fontWeight: "bold",
1288
- },
1289
- RoundedCheckbox: {
1290
- "&::part(control)": {
1291
- borderRadius: "50%",
1292
- },
1293
- },
1294
- PageDescriptionText: {
1295
- color: "var(--sqm-text-subdued)",
1296
- fontSize: "var(--sl-font-size-medium)",
1297
- },
1298
- PhoneInputsSection: {
1299
- display: "flex",
1300
- flexDirection: "column",
1301
- gap: "4px",
1302
- "& p": {
1303
- fontSize: "var(--sl-font-size-small)",
1304
- color: "var(--sqm-input-label-color)",
1305
- fontWeight: "var(--sl-font-weight-semibold)",
1306
- },
1307
- },
1308
- PhoneInputsContainer: {
1309
- display: "flex",
1310
- gap: "4px",
1311
- width: "100%",
1312
- "& #phoneNumber": {
1313
- width: "100%",
1314
- minWidth: "0px",
1315
- },
1316
- },
1317
- };
1318
- const sheet$1 = createStyleSheet(style$2);
1319
- const styleString$1 = sheet$1.toString();
1320
- const vanillaStyle$1 = `
1321
- :host{
1322
- display: block;
1323
- }
1324
- * {
1325
- margin: 0;
1326
- padding: 0;
1327
- box-sizing: border-box;
1328
- }
1329
- a {
1330
- color: var(--sqm-text);
1331
- color: inherit !important;
1332
- text-decoration: underline;
1333
- }
1334
-
1335
- p {
1336
- line-height: 18px;
1337
- font-size: var(--sl-font-size-small);
1338
- }
1339
-
1340
- sl-radio-group::part(base) {
1341
- display: flex;
1342
- flex-direction: column;
1343
- }
1344
-
1345
- sl-select#phoneNumberCountryCode::part(menu) {
1346
- min-width: 250px;
1347
- }
1348
-
1349
- sl-button[type="primary"]::part(base){
1350
- background-color: var(--sqm-primary-button-background);
1351
- color: var(--sqm-primary-button-color);
1352
- border-color: var(--sqm-primary-button-color-border);
1353
- border-radius: var(--sqm-primary-button-radius);
1354
- }
1355
-
1356
- sl-button[type="primary"]::part(base):hover{
1357
- background-color: var(--sqm-primary-button-background-hover);
1358
- }
1359
-
1360
- sl-button[type="primary"]::part(base):focus{
1361
- box-shadow: none;
1362
- }
1363
-
1364
- sl-button[type="secondary"]::part(base){
1365
- background-color: var(--sqm-secondary-button-background);
1366
- color: var(--sqm-secondary-button-color);
1367
- border-color: var(--sqm-secondary-button-color-border);
1368
- border-radius: var(--sqm-secondary-button-radius);
1369
- }
1370
-
1371
- sl-button[type="secondary"]::part(base):hover{
1372
- background-color: var(--sqm-secondary-button-background-hover);
1373
- }
1374
-
1375
-
1376
-
1377
- *::part(primarybutton-base){
1378
- background-color: var(--sqm-primary-button-background);
1379
- color: var(--sqm-primary-button-color);
1380
- border-color: var(--sqm-primary-button-color-border);
1381
- border-radius: var(--sqm-primary-button-radius);
1382
- }
1383
-
1384
- *::part(primarybutton-base):hover{
1385
- background-color: var(--sqm-primary-button-background-hover);
1386
- }
1387
-
1388
- *::part(primarybutton-base):focus{
1389
- box-shadow: none;
1390
- }
1391
-
1392
- *::part(secondarybutton-base){
1393
- background-color: var(--sqm-secondary-button-background);
1394
- color: var(--sqm-secondary-button-color);
1395
- border-color: var(--sqm-secondary-button-color-border);
1396
- border-radius: var(--sqm-secondary-button-radius);
1397
- }
1398
-
1399
- *::part(secondarybutton-base):hover{
1400
- background-color: var(--sqm-secondary-button-background-hover);
1401
- }
1402
-
1403
- *::part(secondarybutton-base){
1404
- background-color: var(--sqm-secondary-button-background);
1405
- color: var(--sqm-secondary-button-color);
1406
- border-color: var(--sqm-secondary-button-color-border);
1407
- border-radius: var(--sqm-secondary-button-radius);
1408
- width: max-content;
1409
- display: flex;
1410
- margin: auto;
1411
- }
1412
-
1413
- *::part(secondarybutton-base):hover{
1414
- background: var(--sqm-secondary-button-background-hover);
1415
- }
1416
-
1417
- sl-input::part(label),
1418
- sl-select::part(label),
1419
- sl-textarea::part(label){
1420
- font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
1421
- font-weight: var(--sl-font-weight-semibold);
1422
- color: var(--sqm-input-label-color, var(--sqm-text), black);
1423
- }
1424
-
1425
- /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
1426
- sl-input::part(base),
1427
- sl-dropdown::part(base),
1428
- sl-textarea::part(base){
1429
- background-color: var(--sqm-input-background, #fff);
1430
- border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
1431
- color: var(--sqm-input-color, white);
1432
- border-width: var(--sqm-border-thickness, 1px);
1433
- border-style: solid;
1434
- border-color: var(--sqm-input-border-color, #ccc);
1435
- }
1436
-
1437
-
1438
- sl-select::part(menu) {
1439
- background: var(--sqm-input-background, inherit);
1440
- color: var(--sqm-input-color, inherit);
1441
- border:none;
1442
- }
1443
-
1444
- sl-menu-item::part(base) {
1445
- color: var(--sqm-input-color);
1446
- }
1447
-
1448
- sl-menu-item::part(base):hover {
1449
- background-color: var(--sqm-input-border-color-hover);
1450
- }
1451
-
1452
- sl-select::part(panel) {
1453
- border-radius: var(--sqm-border-radius-normal);
1454
- }
1455
-
1456
- sl-select::part(help-text) {
1457
- color: var(--sqm-text-subdued, var(--sl-input-help-text-color, #6c757d));
1458
- }
1459
-
1460
- sl-input::part(base):focus,
1461
- sl-select::part(base):focus, /* Corrected part name for sl-select */
1462
- sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
1463
- border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
1464
- }
1465
-
1466
- sl-input[disabled]::part(base),
1467
- sl-select[disabled]::part(base),
1468
- sl-textarea[disabled]::part(base){
1469
- background: var(--sqm-input-disabled-background, #f5f5f5);
1470
- border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
1471
- }
1472
-
1473
-
1474
- sl-input::part(input):-webkit-autofill {
1475
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
1476
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
1477
- }
1478
-
1479
- sl-input::part(input):-webkit-autofill:hover {
1480
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
1481
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
1482
- }
1483
-
1484
- sl-input::part(input):-webkit-autofill:focus {
1485
- box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
1486
- -webkit-text-fill-color: var(--sqm-input-color, white) !important;
1487
- }
1488
-
1489
- sl-checkbox::part(label){
1490
- color: var(--sqm-text);
1491
- }
1492
-
1493
- sl-checkbox[checked]::part(control){
1494
- background-color: var(--sqm-input-border-color-focus);
1495
- }
1496
-
1497
- sl-checkbox[checked]::part(checked-icon){
1498
- color: var(--sqm-input-background);
1499
- }
1500
- `;
1501
- const UserInfoFormView = (props) => {
1502
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
1503
- const { states, states: { formState }, callbacks, text, refs, data, } = props;
1504
- const { classes } = sheet$1;
1505
- const bankingCollectionText = intl.formatMessage({
1506
- id: "bankingCollectionText",
1507
- defaultMessage: text.allowBankingCollection,
1508
- }, {
1509
- termsAndConditionsLink: (h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
1510
- });
1511
- let regionLabel = undefined;
1512
- switch (data.regionLabelEnum) {
1513
- case "STATE":
1514
- regionLabel = text.state;
1515
- break;
1516
- case "PROVINCE":
1517
- regionLabel = text.province;
1518
- break;
1519
- case "REGION":
1520
- regionLabel = text.region;
1521
- break;
1522
- default:
1523
- regionLabel = text.state;
1524
- }
1525
- // when creating an impact connection without sending phoneNumber data, the impactAPI defaults the value to "0000000" and the phoneNumberCountryCode to "DZ"
1526
- function isDisabledPartnerInput(field) {
1527
- var _a, _b;
1528
- if (((_a = data.partnerData) === null || _a === void 0 ? void 0 : _a.phoneNumber) === "0000000" &&
1529
- (field === "phoneNumber" || field === "phoneNumberCountryCode")) {
1530
- return false;
1531
- }
1532
- return states.isPartner && !!((_b = data.partnerData) === null || _b === void 0 ? void 0 : _b[field]);
1533
- }
1534
- function isDisabledUserInput(field) {
1535
- var _a;
1536
- return states.isUser && !!((_a = data.userData) === null || _a === void 0 ? void 0 : _a[field]);
1537
- }
1538
- return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
1539
- h("style", { type: "text/css" },
1540
- styleString$1,
1541
- vanillaStyle$1),
1542
- states.loadingError && (h("div", null,
1543
- h("sqm-form-message", { type: "error" },
1544
- h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
1545
- h("p", { part: "alert-description" }, intl.formatMessage({
1546
- id: "loadingErrorAlertDescription",
1547
- defaultMessage: text.error.loadingErrorAlertDescription,
1548
- }, {
1549
- supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
1550
- }))))),
1551
- states.loading ? (h(LoadingView, null)) : (h("div", null,
1552
- h("div", { class: classes.TextContainer },
1553
- h("div", null,
1554
- !states.hideSteps && (h("p", null, intl.formatMessage({
1555
- id: "formStep",
1556
- defaultMessage: text.formStep,
1557
- }, { step: states.step, count: FORM_STEPS }))),
1558
- h("h3", null, text.personalInformation),
1559
- h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
1560
- ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sqm-form-message", { type: "error" },
1561
- h("p", { part: "alert-title" }, text.error.generalTitle),
1562
- h("p", { part: "alert-description" }, intl.formatMessage({
1563
- id: "generalDescription",
1564
- defaultMessage: text.error.generalDescription,
1565
- }, {
1566
- supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
1567
- })))),
1568
- h("div", null,
1569
- h("div", { class: classes.InputContainer },
1570
- h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
1571
- class: classes.ErrorInput,
1572
- helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
1573
- }
1574
- : {}), { id: "firstName", name: "/firstName", required: true })),
1575
- h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled || isDisabledUserInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
1576
- class: classes.ErrorInput,
1577
- helpText: formatErrorMessage(text.lastName, formState.errors.lastName),
1578
- }
1579
- : {}), { id: "lastName", name: "/lastName", required: true })),
1580
- h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
1581
- h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || isDisabledPartnerInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
1582
- class: classes.ErrorInput,
1583
- helpText: formatErrorMessage(text.country, formState.errors.countryCode),
1584
- }
1585
- : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("countryCode", e) }),
1586
- h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
1587
- // Stop shoelace intercepting key presses
1588
- e.stopPropagation();
1589
- }, "onSl-input": (e) => {
1590
- callbacks.setCountrySearch(e.target.value);
1591
- } }), (_e = data === null || data === void 0 ? void 0 : data.countries) === null || _e === void 0 ? void 0 :
1592
- _e.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_f = data === null || data === void 0 ? void 0 : data.allCountries) === null || _f === void 0 ? void 0 :
1593
- _f.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
1594
- h("div", { class: classes.PhoneInputsSection },
1595
- h("p", null, text.phoneNumber),
1596
- h("div", { class: classes.PhoneInputsContainer },
1597
- h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled ||
1598
- isDisabledPartnerInput("phoneNumberCountryCode"), ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
1599
- class: classes.ErrorInput,
1600
- }
1601
- : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
1602
- h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
1603
- // Stop shoelace intercepting key presses
1604
- e.stopPropagation();
1605
- }, "onSl-input": (e) => {
1606
- callbacks.setPhoneCountrySearch(e.target.value);
1607
- } }), (_h = data === null || data === void 0 ? void 0 : data.phoneCountries) === null || _h === void 0 ? void 0 :
1608
- _h.map((c) => {
1609
- var _a, _b;
1610
- return (h("sl-menu-item", { value: c.countryCode },
1611
- h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
1612
- _b.dial_code));
1613
- }), (_j = data === null || data === void 0 ? void 0 : data.allCountries) === null || _j === void 0 ? void 0 :
1614
- _j.map((c) => {
1615
- var _a, _b;
1616
- return (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
1617
- h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
1618
- _b.dial_code));
1619
- })),
1620
- h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ value }) => {
1621
- // Naive phone number validation
1622
- validateBillingField(/[a-zA-Z]+/, value) &&
1623
- formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
1624
- }, disabled: states.disabled || isDisabledPartnerInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
1625
- class: classes.ErrorInput,
1626
- helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
1627
- }
1628
- : {}), { required: true })))),
1629
- h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) =>
1630
- // Checks for non-ASCII characters
1631
- !validateBillingField(/^[\x20-\xFF]+$/, value) &&
1632
- formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
1633
- class: classes.ErrorInput,
1634
- helpText: formatErrorMessage(text.address, formState.errors.address),
1635
- }
1636
- : {}), { required: true })),
1637
- h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) =>
1638
- // Checks for non-ASCII characters
1639
- !validateBillingField(/^[\x20-\xFF]+$/, value) &&
1640
- formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
1641
- class: classes.ErrorInput,
1642
- helpText: formatErrorMessage(text.city, formState.errors.city),
1643
- }
1644
- : {}), { required: true })),
1645
- !states.hideState && (h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || isDisabledPartnerInput("billingState") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
1646
- class: classes.ErrorInput,
1647
- helpText: formatErrorMessage(text.state, formState.errors.state),
1648
- }
1649
- : {}), { required: true }), (_p = data.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (h("sl-menu-item", { value: r.value }, r.label))))),
1650
- h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || isDisabledPartnerInput("billingPostalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
1651
- class: classes.ErrorInput,
1652
- helpText: formatErrorMessage(text.postalCode, formState.errors.postalCode),
1653
- }
1654
- : {}), { required: true })),
1655
- h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency") }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
1656
- class: classes.ErrorInput,
1657
- helpText: formatErrorMessage(text.currency, formState.errors.currency),
1658
- }
1659
- : {}), { required: true, ref: (el) => (refs.currencyRef.current = el) }),
1660
- h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCurrencyText, onKeyDown: (e) => {
1661
- // Stop shoelace intercepting key presses
1662
- e.stopPropagation();
1663
- }, "onSl-input": (e) => {
1664
- callbacks.setCurrencySearch(e.target.value);
1665
- } }), (_s = data === null || data === void 0 ? void 0 : data.currencies) === null || _s === void 0 ? void 0 :
1666
- _s.map((c) => (h("sl-menu-item", { value: c.currencyCode },
1667
- c.currencyCode,
1668
- " - ",
1669
- c.displayName))), (_t = data === null || data === void 0 ? void 0 : data.allCurrencies) === null || _t === void 0 ? void 0 :
1670
- _t.map((c) => (h("sl-menu-item", { value: c.currencyCode, style: { display: "none" } },
1671
- c.currencyCode,
1672
- " - ",
1673
- c.displayName))))),
1674
- h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton))))));
1675
- };
1676
-
1677
- export { InvoiceTableView as I, OtherRegionSlotView as O, UserInfoFormView as U, vatLabels as v };