@incodetech/web 2.0.0-rc.0 → 2.0.0

package/dist/countrySelector-CE-JgIsv.js

@@ -1,58 +0,0 @@
-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

@@ -1,45 +0,0 @@
-/*! 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

@@ -1,78 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,279 +0,0 @@
-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

@@ -1,82 +0,0 @@
-/*! 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

@@ -1,22 +0,0 @@
-/*! 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));
-}