@incodetech/web 2.0.0 → 2.0.1

package/dist/countrySelector-CE-JgIsv.js

@@ -0,0 +1,58 @@
+import { n as e } from "./i18n-9s4OSqwi.js";
+import { d as t, v as n } from "./vendor-preact-D6SntenC.js";
+import { t as r } from "./dropdownComposed-DFRBG22E.js";
+//#region src/shared/countrySelector/countrySelector.tsx
+var i = [
+	"BR",
+	"CN",
+	"FR",
+	"DE",
+	"IL",
+	"IT",
+	"MX",
+	"ES",
+	"GB",
+	"US"
+], a = [
+	"CM",
+	"KE",
+	"NG"
+];
+function o(e) {
+	return [...e.toUpperCase()].map((e) => String.fromCodePoint(127462 + e.charCodeAt(0) - 65)).join("");
+}
+function s() {
+	if (typeof window > "u") return !1;
+	let { hostname: e } = window.location;
+	return e === "localhost" || e.includes("stage") || e.includes("demo");
+}
+var c = ({ value: c, onChange: l, label: u, id: d = "country-selector", countryCodes: f = i, devOnlyCountryCodes: p = a, "data-testid": m }) => {
+	let { i18n: h } = e(), g = h.language || "en";
+	return /* @__PURE__ */ n("div", {
+		class: "IncodeCountrySelector",
+		children: /* @__PURE__ */ n(r, {
+			id: d,
+			label: u,
+			value: c,
+			options: t(() => {
+				let e = new Intl.DisplayNames([g, "en"], { type: "region" });
+				return (s() ? [...f, ...p] : [...f]).map((t) => {
+					let n = e.of(t) ?? t;
+					return {
+						value: t,
+						label: `${o(t)} ${n}`,
+						ariaLabel: n
+					};
+				}).sort((e, t) => e.label.localeCompare(t.label, g));
+			}, [
+				f,
+				p,
+				g
+			]),
+			onChange: l,
+			"data-testid": m
+		})
+	});
+};
+//#endregion
+export { c as t };

package/dist/cpf-ocr/styles.css

@@ -0,0 +1,45 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+.IncodeCpfOcrPage {
+  width: 100%;
+  height: 100%;
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  margin-inline: auto;
+  animation-fill-mode: both;
+}
+
+@media (min-width: 48rem) {
+  .IncodeCpfOcrPage.IncodePageContainer {
+    align-items: stretch;
+  }
+}
+
+.IncodeCpfOcrPage .IncodePageInner {
+  height: 100%;
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeCpfOcrPage .IncodePageContent {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeCpfOcrPage .IncodeCpfOcr {
+  height: 100%;
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.IncodeCpfOcrPage .IncodeCpfOcrLoading {
+  height: 100%;
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}

package/dist/cpfOcr-D_tbwbvh.js

@@ -0,0 +1,78 @@
+import { _ as e, p as t, v as n } from "./vendor-preact-D6SntenC.js";
+import { o as r } from "./hooks-BVnGysT7.js";
+import { r as i } from "./loadingIcon-BN5YRQUb.js";
+import { t as a } from "./page-C1yT4DLb.js";
+import { t as o } from "./spinner-CKnjVHxw.js";
+import "./spinner-B4dcie2T.js";
+import { t as s } from "./button-DcCUEn2n.js";
+import { t as c } from "./verificationResult-BrVbUJ4U.js";
+import { t as l } from "./inputComposed-APSw8C7o.js";
+import { createCpfOcrManager as u } from "@incodetech/core/cpf-ocr";
+//#region src/modules/cpf-ocr/cpfOcr.tsx
+var d = (e) => e.status === "inputting" ? {
+	cpf: e.cpf,
+	isValid: e.isValid
+} : {
+	cpf: "",
+	isValid: !1
+}, f = ({ onFinish: f, onError: p }) => {
+	let [m, h] = r(() => u()), [g, _] = t(!1), [v, y] = t(!1), [b, x] = t(!1);
+	if (e(() => {
+		m.status === "finished" && f?.();
+	}, [m.status, f]), e(() => {
+		m.status === "error" && p?.(m.error);
+	}, [m, p]), m.status === "idle" || m.status === "loading" || m.status === "submitting") return /* @__PURE__ */ n(a, {
+		className: "IncodeCpfOcrPage",
+		children: /* @__PURE__ */ n("div", {
+			class: "IncodeCpfOcrLoading",
+			children: /* @__PURE__ */ n(o, { fullScreen: !1 })
+		})
+	});
+	if (m.status === "error") return /* @__PURE__ */ n(c, {
+		status: "failure",
+		failureTitle: "Não foi possível verificar o CPF",
+		onRetry: () => h.retry()
+	});
+	if (m.status === "finished") return null;
+	let S = d(m), C = S.cpf.replace(/\D/g, "").length === 11, w = v && !S.isValid && (C || g && !b) ? "Insira um CPF válido" : void 0;
+	return /* @__PURE__ */ n(a, {
+		className: "IncodeCpfOcrPage",
+		title: "Insira e verifique o número do seu CPF",
+		children: /* @__PURE__ */ n("div", {
+			class: "IncodeCpfOcr",
+			children: [
+				/* @__PURE__ */ n(i, { size: 32 }),
+				/* @__PURE__ */ n(l, {
+					id: "cpf-ocr-input",
+					label: "",
+					value: S.cpf,
+					placeholder: "Seu CPF",
+					maxLength: 14,
+					inputMode: "numeric",
+					"aria-label": "CPF",
+					onInput: (e) => {
+						y(!0), h.setCpf(e.target.value);
+					},
+					onFocus: () => {
+						x(!0);
+					},
+					onBlur: () => {
+						x(!1), _(!0);
+					},
+					error: w,
+					showErrorIcon: !0
+				}),
+				/* @__PURE__ */ n(i, {}),
+				/* @__PURE__ */ n(s, {
+					type: "button",
+					onClick: () => h.submit(),
+					disabled: !S.isValid,
+					"data-testid": "cpf-ocr-continue",
+					children: "Continuar"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { f as CpfOcr };

package/dist/cross-document-data-match/cross-document-data-match.es.js

@@ -0,0 +1,18 @@
+import { _ as e, v as t } from "../vendor-preact-D6SntenC.js";
+import { o as n } from "../hooks-BVnGysT7.js";
+import { t as r } from "../incodeComponent-C1o4M0ZK.js";
+import { t as i } from "../spinner-CKnjVHxw.js";
+import { t as a } from "../incodeModule-BqCjVgEI.js";
+import { createCrossDocumentDataMatchManager as o } from "@incodetech/core/cross-document-data-match";
+//#region src/modules/cross-document-data-match/cross-document-data-match.tsx
+var s = ({ onFinish: r }) => {
+	let [a, s] = n(() => o());
+	return e(() => {
+		s.load();
+	}, [s]), e(() => {
+		a.status === "finished" && r?.();
+	}, [a.status, r]), /* @__PURE__ */ t(i, { fullScreen: !0 });
+}, c = ({ onFinish: e }) => /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(s, { onFinish: e }) });
+a(c, "incode-cross-document-data-match");
+//#endregion
+export { c as CrossDocumentDataMatch };

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

@@ -0,0 +1,279 @@
+import { n as e } from "../i18n-9s4OSqwi.js";
+import { S as t, d as n, v as r } from "../vendor-preact-D6SntenC.js";
+import { o as i } from "../hooks-BVnGysT7.js";
+import { t as a } from "../incodeComponent-C1o4M0ZK.js";
+import { r as o } from "../loadingIcon-BN5YRQUb.js";
+import { t as s } from "../page-C1yT4DLb.js";
+import { t as c } from "../transitionSpinner-PIEPU2Vx.js";
+import { t as l } from "../button-DcCUEn2n.js";
+import { g as u } from "../icons-Cc7zwchP.js";
+import { t as d } from "../successIcon-DbILeIz_.js";
+import { t as f } from "../inputComposed-APSw8C7o.js";
+import { t as p } from "../dropdownComposed-DFRBG22E.js";
+import "../dropdownComposed-DwTzc2YU.js";
+import { t as m } from "../dateInputComposed-BpAGsjN6.js";
+import "../dateInputComposed-DU3o6PAV.js";
+import { t as h } from "../incodeModule-BqCjVgEI.js";
+import { n as g, t as _ } from "../requiredLabelHint-BLwgqozE.js";
+import { t as v } from "../autoFocusTitle-QexamZ4i.js";
+import { GENERATE_CURP_FIELDS as y, createCurpValidationManager as b, mexicanStates as x } from "@incodetech/core/curp-validation";
+//#region src/modules/curp-validation/curpInput.tsx
+var S = ({ curp: t, errorKey: n, onCurpChange: i, onCurpBlur: a, onVerify: s, onSwitchToGenerate: c, disabled: u = !1, placeholder: d, continueLabel: p, dontHaveLabel: m }) => {
+	let { t: h } = e(), g = d ?? h("curp.placeholder.curp") ?? "CURP", _ = p ?? h("curp.continue") ?? "Continue", v = m ?? h("curp.dontHave") ?? "I don't have my CURP", y = n ? h(n) : void 0, b = t.length === 0 || !!y || u;
+	return /* @__PURE__ */ r("div", {
+		class: "IncodeCurpValidation IncodeCurpInput",
+		children: [
+			/* @__PURE__ */ r(f, {
+				id: "curp-input",
+				value: t,
+				onInput: (e) => {
+					let t = e.target;
+					i(t.value.toUpperCase());
+				},
+				onBlur: a,
+				placeholder: g,
+				disabled: u,
+				required: !0,
+				maxLength: 18,
+				"aria-label": h("curp.placeholder.curp") ?? "CURP",
+				error: y,
+				showErrorIcon: !!y
+			}),
+			/* @__PURE__ */ r(o, {}),
+			/* @__PURE__ */ r(l, {
+				type: "button",
+				onClick: s,
+				disabled: b,
+				"data-testid": "curp-verify",
+				children: _
+			}),
+			/* @__PURE__ */ r(l, {
+				type: "button",
+				variant: "secondary",
+				onClick: c,
+				disabled: u,
+				"data-testid": "curp-switch-to-generate",
+				children: v
+			})
+		]
+	});
+}, C = ({ form: t, validationErrors: i, onFormChange: a, onValidateField: s, onGenerate: c, disabled: u = !1, labels: d }) => {
+	let { t: h } = e(), v = {
+		firstName: h("curp.labels.firstName") ?? "Your First name",
+		firstLast: h("curp.labels.firstLast") ?? "Your First last name",
+		secondLast: h("curp.labels.secondLast") ?? "Your Second last name",
+		gender: h("curp.labels.genderV2") ?? "Gender",
+		genderPlaceholder: h("curp.placeholder.gender") ?? "Choose gender",
+		male: h("curp.labels.maleV2") ?? "Male",
+		female: h("curp.labels.femaleV2") ?? "Female",
+		other: h("curp.labels.other") ?? "Other",
+		dob: h("curp.labels.dob") ?? "Date of birth",
+		birthState: h("curp.labels.birthState") ?? "State of birth",
+		statePlaceholder: h("curp.placeholder.state") ?? "Select state",
+		generate: h("curp.generateCta") ?? "Generate CURP",
+		...d
+	}, b = n(() => g(y.map((e) => e.required)), []), S = !!i && Object.keys(i).length > 0, C = (e) => (t) => {
+		let n = t.target;
+		a({ [e]: n.value });
+	}, w = (e) => () => {
+		s(e);
+	}, T = [
+		{
+			value: "H",
+			label: v.male
+		},
+		{
+			value: "M",
+			label: v.female
+		},
+		{
+			value: "X",
+			label: v.other
+		}
+	], E = x.map((e) => ({
+		value: e.value,
+		label: e.label
+	})), D = (e) => {
+		switch (e) {
+			case "name": return v.firstName;
+			case "firstLastName": return v.firstLast;
+			case "secondLastName": return v.secondLast;
+			case "gender": return v.gender;
+			case "birthDate": return v.dob;
+			case "birthState": return v.birthState;
+		}
+	};
+	return /* @__PURE__ */ r("div", {
+		class: "IncodeCurpValidation IncodeGenerateCurpForm",
+		children: [
+			y.map((e) => {
+				let n = _(b, e.required), o = n ? h(`forms.label.${n}`) ?? void 0 : void 0, s = i?.[e.key], c = s ? h(s) ?? void 0 : void 0, l = D(e.key);
+				if (e.type === "dropdown") {
+					let n = e.key === "gender" ? T : E, i = e.key === "gender" ? v.genderPlaceholder : v.statePlaceholder;
+					return /* @__PURE__ */ r(p, {
+						id: `curp-${e.key === "birthState" ? "birth-state" : "gender"}`,
+						label: l,
+						labelHint: o,
+						placeholder: i,
+						value: t[e.key],
+						options: n,
+						disabled: u,
+						required: e.required,
+						onChange: (t) => {
+							e.key === "gender" ? a({ gender: t }) : a({ [e.key]: t });
+						},
+						onBlur: w(e.key),
+						error: c,
+						showErrorIcon: !!c,
+						"data-testid": e.key === "gender" ? "curp-gender" : "curp-birth-state",
+						...e.key === "birthState" ? { searchable: !0 } : {}
+					}, e.key);
+				}
+				return e.type === "date" ? /* @__PURE__ */ r(m, {
+					id: "curp-birth-date",
+					label: l,
+					labelHint: o,
+					value: t.birthDate,
+					onInput: C("birthDate"),
+					onBlur: w("birthDate"),
+					max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+					placeholder: h("curp.placeholder.dob") ?? "mm/dd/yyyy",
+					disabled: u,
+					required: e.required,
+					error: c,
+					showErrorIcon: !!c,
+					"data-testid": "curp-birth-date"
+				}, e.key) : /* @__PURE__ */ r(f, {
+					id: e.key === "name" ? "curp-first-name" : e.key === "firstLastName" ? "curp-first-last" : "curp-second-last",
+					label: l,
+					labelHint: o,
+					value: t[e.key],
+					onInput: C(e.key),
+					onBlur: w(e.key),
+					placeholder: l,
+					disabled: u,
+					required: e.required,
+					error: c,
+					showErrorIcon: !!c,
+					...e.autoComplete ? { autoComplete: e.autoComplete } : {}
+				}, e.key);
+			}),
+			/* @__PURE__ */ r(o, { size: 16 }),
+			/* @__PURE__ */ r(l, {
+				type: "button",
+				onClick: c,
+				disabled: S || u,
+				"data-testid": "curp-generate",
+				children: v.generate
+			})
+		]
+	});
+}, w = ({ config: n, onFinish: a, onError: p }) => {
+	let { t: m } = e(), [h, g] = i(() => {
+		if (!n) throw Error("CURP validation config is required");
+		return b({ config: n });
+	});
+	if (h.status === "idle" || h.status === "loading" || h.status === "verifying" || h.status === "generating") return /* @__PURE__ */ r(c, { spinnerConfig: { title: h.status === "generating" ? m("curp.status.generating") ?? "Generating..." : m("curp.status.verifying") ?? "Verifying..." } });
+	if (h.status === "enterCurp") return /* @__PURE__ */ r(s, {
+		className: "IncodeCurpValidationPage",
+		title: m("curp.enterCurp") ?? "Enter your CURP",
+		children: /* @__PURE__ */ r(S, {
+			curp: h.curp,
+			errorKey: h.validationErrors?.curp,
+			onCurpChange: (e) => g.setCurp(e),
+			onCurpBlur: () => g.validateField("curp"),
+			onVerify: () => g.verify(),
+			onSwitchToGenerate: () => g.switchToGenerate(),
+			placeholder: m("curp.placeholder.curp") ?? "CURP",
+			continueLabel: m("curp.continue") ?? "Continue",
+			dontHaveLabel: m("curp.dontHave") ?? "I don't have my CURP"
+		})
+	});
+	if (h.status === "generateCurp") return /* @__PURE__ */ r(s, {
+		className: "IncodeCurpValidationPage",
+		title: m("curp.generate") ?? "Generate your CURP",
+		hideFooterBranding: !0,
+		children: /* @__PURE__ */ r(C, {
+			form: h.form,
+			validationErrors: h.validationErrors,
+			onFormChange: (e) => g.setGenerateForm(e),
+			onValidateField: (e) => g.validateField(e),
+			onGenerate: () => g.generate()
+		})
+	});
+	if (h.status === "confirmCurp") return /* @__PURE__ */ r(s, {
+		className: "IncodeCurpValidationPage",
+		title: m("curp.status.confirm") ?? "Confirm your CURP",
+		children: /* @__PURE__ */ r("div", {
+			class: "IncodeCurpValidation IncodeCurpConfirm",
+			children: [
+				/* @__PURE__ */ r(f, {
+					id: "curp-confirm-input",
+					value: h.curp,
+					readOnly: !0,
+					"aria-label": m("curp.status.generatedCurp") ?? "Generated CURP",
+					"data-testid": "curp-confirm-input"
+				}),
+				/* @__PURE__ */ r(o, {}),
+				/* @__PURE__ */ r(l, {
+					type: "button",
+					onClick: () => g.confirmGenerated(),
+					"data-testid": "curp-confirm",
+					children: m("curp.continue") ?? "Continue"
+				})
+			]
+		})
+	});
+	if (h.status === "success") return /* @__PURE__ */ r(s, {
+		className: "IncodeCurpValidationPage",
+		children: /* @__PURE__ */ r("div", {
+			class: "IncodeCurpValidation IncodeCurpSuccess",
+			children: [
+				/* @__PURE__ */ r(d, { size: 64 }),
+				/* @__PURE__ */ r(o, { size: 16 }),
+				/* @__PURE__ */ r(v, {
+					className: "IncodeCurpSuccessTitle",
+					children: m("curp.status.verified") ?? "Verified"
+				})
+			]
+		})
+	});
+	if (h.status === "failure" || h.status === "generateError") {
+		let e = h.retriesLeft > 0, n = h.status === "failure" ? m("curp.status.notVerified") ?? "Not verified" : m("curp.status.couldntGenerate") ?? "Couldn't generate CURP";
+		return /* @__PURE__ */ r(s, {
+			className: "IncodeCurpValidationPage",
+			children: /* @__PURE__ */ r("div", {
+				class: "IncodeCurpValidation IncodeCurpFailure",
+				children: [
+					/* @__PURE__ */ r(o, {}),
+					/* @__PURE__ */ r(u, { size: 64 }),
+					/* @__PURE__ */ r(o, { size: 16 }),
+					/* @__PURE__ */ r(v, {
+						className: "IncodeCurpFailureTitle",
+						children: n
+					}),
+					h.status === "generateError" && e && /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ r(o, { size: 12 }), /* @__PURE__ */ r("p", {
+						class: "IncodeCurpFailureHint",
+						role: "alert",
+						children: m("curp.status.checkInfo") ?? "Please check your information"
+					})] }),
+					/* @__PURE__ */ r(o, {}),
+					e && /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(l, {
+						type: "button",
+						onClick: () => g.retry(),
+						"data-testid": "curp-retry",
+						children: h.status === "failure" ? m("curp.status.tryAgain") ?? "Try again" : m("curp.status.edit") ?? "Edit information"
+					}) })
+				]
+			})
+		});
+	}
+	return h.status === "finished" ? (a?.(), null) : (h.status === "closed" && p?.(void 0), null);
+}, T = ({ config: e, onFinish: t, onError: n }) => /* @__PURE__ */ r(a, { children: e ? /* @__PURE__ */ r(w, {
+	config: e,
+	onFinish: t,
+	onError: n
+}) : null });
+h(T, "incode-curp-validation");
+//#endregion
+export { T as CurpValidation };

package/dist/curp-validation/styles.css

@@ -0,0 +1,82 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+.IncodeCurpValidationPage .IncodePageContent {
+  padding-top: var(--spacing-32, var(--spacing-32, 32px));
+  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCurpValidationPage .IncodeCurpValidation {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.IncodeCurpValidationPage .IncodeCurpInput {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:focus {
+  text-decoration: none;
+}
+
+.IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:active {
+  color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
+}
+
+.IncodeCurpValidationPage .IncodeGenerateCurpForm {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeCurpValidationPage .IncodeCurpConfirm {
+  width: 100%;
+  max-width: var(--incode-curp-confirm-max-w);
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCurpValidationPage .IncodeCurpConfirm .IncodeInput {
+  text-align: center;
+  font-family: var(--typography-input-dropdown-family);
+  font-size: var(--typography-input-dropdown-m-size);
+  font-weight: var(--typography-input-dropdown-m-weight);
+  line-height: var(--typography-input-dropdown-m-line-height);
+  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
+}
+
+.IncodeCurpValidationPage .IncodeCurpSuccess, .IncodeCurpValidationPage .IncodeCurpFailure {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCurpValidationPage .IncodeCurpSuccessTitle, .IncodeCurpValidationPage .IncodeCurpFailureTitle {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeCurpValidationPage .IncodeCurpFailureHint {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+}

package/dist/custom-fields/styles.css

@@ -0,0 +1,22 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+.IncodeCustomFieldsForm {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  display: flex;
+  overflow-y: auto;
+}
+
+.IncodeCustomFieldsForm .IncodeCustomFieldsField {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeCustomFieldsPage .IncodePageHeader {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+}