@incodetech/web 2.2.0-rc.8 → 2.3.0-rc.0

package/dist/certificate-issuance/certificate-issuance.es.js

@@ -1,14 +1,12 @@
-import { a as useTranslation } from "../uiConfig-Dqnjankd.js";
-import { d as T, l as A, v as y, y as u } from "../vendor-preact-BPXMFRom.js";
-import { b as useManager, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "../incodeComponent-BtFz-bx2.js";
-import { t as Spacer } from "../spacer-DLEDuWEx.js";
-import { o as TypographyH5 } from "../spinner-CJCOHUKx.js";
-import { r as Button } from "../incode-logo-DeIDDejm.js";
-import { y as PasswordInputComposed } from "../extensibility-C5XqL_A3.js";
-import { t as SuccessIcon } from "../successIcon-DS8BLsgy.js";
-import { t as AutoFocusTitle } from "../autoFocusTitle-DB-23sv_.js";
-import { t as VerificationResult } from "../verificationResult-q_zD_Pxh.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
+import { o as useTranslation } from "../uiConfig-C1jdTj-i.js";
+import { _ as y, c as A, u as T, v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, i as withStandaloneModuleBootstrap, t as IncodeComponent } from "../incodeComponent-D3_BSWan.js";
+import { t as Spacer } from "../spacer-ayyj5lMa.js";
+import { r as SuccessIcon, x as Button } from "../icons-eIgP34nj.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-CIbcUW_x.js";
+import { t as VerificationResult } from "../verificationResult-B26DDXFT.js";
+import { t as PasswordInputComposed } from "../passwordInputComposed-DNlYgHHW.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BQgvYKyr.js";
 import { MIN_PASSWORD_LENGTH, PASSWORD_VALIDATION_KEYS, REQUIREMENT_I18N_KEYS, createCertificateIssuanceManager } from "@incodetech/core/certificate-issuance";
 //#region src/modules/certificate-issuance/downloadScreen.tsx
 var DownloadScreen = ({ blob, onDownloaded, onError }) => {
@@ -42,7 +40,7 @@ var DownloadScreen = ({ blob, onDownloaded, onError }) => {
 				/* @__PURE__ */ u(Spacer, {}),
 				/* @__PURE__ */ u("div", {
 					className: "IncodeCertificateIssuanceScreenArea",
-					children: [/* @__PURE__ */ u(AutoFocusTitle, { children: t("certificateIssuance.v2.download.title") }), /* @__PURE__ */ u(TypographyH5, {
+					children: [/* @__PURE__ */ u(AutoFocusTitle, { children: t("certificateIssuance.v2.download.title") }), /* @__PURE__ */ u("p", {
 						className: "IncodeCertificateIssuanceScreenText",
 						children: t("certificateIssuance.v2.download.text")
 					})]
@@ -58,6 +56,7 @@ var DownloadScreen = ({ blob, onDownloaded, onError }) => {
 				}),
 				/* @__PURE__ */ u(Button, {
 					onClick: handleDownload,
+					"data-testid": "certificate-download",
 					children: t("certificateIssuance.download.button")
 				})
 			]
@@ -86,9 +85,12 @@ var PasswordScreen = ({ password, passwordValidations, canSubmit, onPasswordChan
 					children: /* @__PURE__ */ u(PasswordInputComposed, {
 						id: "certificate-password",
 						"data-testid": "certificate-password",
+						label: t("certificateIssuance.password.placeholder"),
+						"aria-describedby": "certificate-password-requirements-heading",
 						placeholder: t("certificateIssuance.password.placeholder"),
 						value: password,
 						autocomplete: "new-password",
+						required: true,
 						showPasswordAriaLabel: t("certificateIssuance.password.show"),
 						hidePasswordAriaLabel: t("certificateIssuance.password.hide"),
 						requirementsHeading: t("certificateIssuance.passwordRequirements.description"),
@@ -103,6 +105,7 @@ var PasswordScreen = ({ password, passwordValidations, canSubmit, onPasswordChan
 			}), /* @__PURE__ */ u(Button, {
 				disabled: !canSubmit,
 				onClick: onSubmit,
+				"data-testid": "certificate-password-submit",
 				children: t("certificateIssuance.continue")
 			})]
 		})
@@ -122,7 +125,7 @@ var SuccessScreen = ({ onDone }) => {
 				/* @__PURE__ */ u(Spacer, { size: 16 }),
 				/* @__PURE__ */ u("div", {
 					className: "IncodeCertificateIssuanceScreenArea",
-					children: [/* @__PURE__ */ u(AutoFocusTitle, { children: t("certificateIssuance.success.title") }), /* @__PURE__ */ u(TypographyH5, {
+					children: [/* @__PURE__ */ u(AutoFocusTitle, { children: t("certificateIssuance.success.title") }), /* @__PURE__ */ u("p", {
 						className: "IncodeCertificateIssuanceScreenText",
 						children: t("certificateIssuance.success.text")
 					})]
@@ -130,6 +133,7 @@ var SuccessScreen = ({ onDone }) => {
 				/* @__PURE__ */ u(Spacer, {}),
 				/* @__PURE__ */ u(Button, {
 					onClick: onDone,
+					"data-testid": "certificate-done",
 					children: t("certificateIssuance.success.done")
 				})
 			]
@@ -142,6 +146,7 @@ var CertificateIssuanceContent = ({ config, manager: externalManager, onFinish }
 	const { t } = useTranslation();
 	const [state, manager] = useManager(() => {
 		if (externalManager) return externalManager;
+		if (!config) throw new Error("CertificateIssuance config is required");
 		return createCertificateIssuanceManager({ config });
 	}, { manageLifecycle: !externalManager });
 	y(() => {
@@ -183,7 +188,7 @@ var CertificateIssuanceContent = ({ config, manager: externalManager, onFinish }
 	}
 };
 var CertificateIssuanceWithLocalConfig = ({ config, manager, onFinish }) => {
-	if (!config) return null;
+	if (!config && !manager) return null;
 	return /* @__PURE__ */ u(IncodeComponent, { children: /* @__PURE__ */ u(CertificateIssuanceContent, {
 		config,
 		manager,

package/dist/certificate-issuance/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeCertificateIssuancePage {\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  animation-fill-mode: both;\n}\n\n.IncodeCertificateIssuancePage .IncodePageInner {\n  height: 100%;\n  min-height: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeCertificateIssuancePage .IncodePageContent {\n  min-height: var(--spacing-0, var(--spacing-none, 0px));\n  align-items: center;\n}\n\n.IncodeCertificateIssuanceContent {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  width: 100%;\n  height: 100%;\n  max-width: var(--incode-form-max-w);\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.IncodeCertificateIssuanceContent .IncodeCertificateIssuancePasswordSection {\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.IncodeCertificateIssuanceContent .IncodeCertificateIssuancePassword {\n  align-items: flex-start;\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  width: 100%;\n  color: var(--color-input-text-helper-default, var(--input-text-helper-default));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeCertificateIssuanceScreenContent {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  width: 100%;\n  height: 100%;\n  max-width: var(--incode-form-max-w);\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeCertificateIssuanceScreenContent .IncodeCertificateIssuanceScreenArea {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeCertificateIssuanceScreenContent .IncodeCertificateIssuanceScreenArea .IncodeCertificateIssuanceScreenText {\n  margin-top: var(--spacing-12, var(--spacing-12, 12px));\n  margin-bottom: var(--spacing-24, var(--spacing-24, 24px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n";

package/dist/{checkbox-FGA-Ij-D.js → checkbox-D0wfscwg.js}

@@ -1,7 +1,7 @@
-import { a as D, p as d, y as u } from "./vendor-preact-BPXMFRom.js";
-import { d as cn } from "./spacer-DLEDuWEx.js";
-import { n as ErrorIcon } from "./incode-logo-DeIDDejm.js";
-import { m as CheckmarkIcon } from "./icons-ChHV5iHi.js";
+import { f as d, i as D, v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { d as cn } from "./spacer-ayyj5lMa.js";
+import { b as ErrorIcon, g as CheckmarkIcon } from "./icons-eIgP34nj.js";
+import { t as FieldLabelHint } from "./fieldLabelHint-CxjArYkQ.js";
 //#region src/shared/checkbox/checkbox.tsx
 var Checkbox = D(({ id, label, labelHint, size = "m", checked, defaultChecked, disabled = false, required = false, name, value, onChange, error, helper, showErrorIcon = true, class: className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...restProps }, ref) => {
 	const [internalChecked, setInternalChecked] = d(!!defaultChecked);
@@ -61,10 +61,11 @@ var Checkbox = D(({ id, label, labelHint, size = "m", checked, defaultChecked, d
 						IncodeCheckboxTextDisabled: isDisabled
 					}),
 					"aria-hidden": ariaLabelledBy ? "true" : void 0,
-					children: [label, labelHint && /* @__PURE__ */ u("span", {
-						class: "IncodeCheckboxLabelHint",
-						"data-testid": `${id}-label-hint`,
-						children: labelHint
+					children: [label, /* @__PURE__ */ u(FieldLabelHint, {
+						className: "IncodeCheckboxLabelHint",
+						hint: labelHint,
+						required: isRequired,
+						testId: `${id}-label-hint`
 					})]
 				})]
 			}),

package/dist/{connectionError-BurQq_4R.js → connectionError-B61O7L3N.js}

@@ -1,7 +1,7 @@
-import { a as useTranslation } from "./uiConfig-Dqnjankd.js";
-import { y as u } from "./vendor-preact-BPXMFRom.js";
-import { r as Button } from "./incode-logo-DeIDDejm.js";
-import { t as StatusPage } from "./statusPage-BF4qGjF3.js";
+import { o as useTranslation } from "./uiConfig-C1jdTj-i.js";
+import { v as u } from "./vendor-preact-C0jX1Cbq.js";
+import { x as Button } from "./icons-eIgP34nj.js";
+import { t as StatusPage } from "./statusPage-Bqz3Ci4f.js";
 //#region src/shared/connectionError/NoNetworkIcon.tsx
 var NoNetworkIcon = ({ size = 32 }) => /* @__PURE__ */ u("svg", {
 	width: size,

package/dist/consent/consent.es.js

@@ -1,11 +1,10 @@
-import { a as useTranslation } from "../uiConfig-Dqnjankd.js";
-import { d as T, y as u } from "../vendor-preact-BPXMFRom.js";
-import { _ as isTerminalModuleState, b as useManager, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "../incodeComponent-BtFz-bx2.js";
-import { r as Button } from "../incode-logo-DeIDDejm.js";
-import { t as Checkbox } from "../checkbox-FGA-Ij-D.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
-import { t as RichText } from "../richText-CEwM8jib.js";
-import { n as getRequiredHintMode, t as getFieldHint } from "../requiredLabelHint-Dx0WS2cR.js";
+import { o as useTranslation } from "../uiConfig-C1jdTj-i.js";
+import { v as u } from "../vendor-preact-C0jX1Cbq.js";
+import { S as useManager, b as useModuleTerminalCallbacks, c as Page, d as TransitionSpinner, i as withStandaloneModuleBootstrap, t as IncodeComponent, y as isTerminalModuleState } from "../incodeComponent-D3_BSWan.js";
+import { x as Button } from "../icons-eIgP34nj.js";
+import { t as Checkbox } from "../checkbox-D0wfscwg.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BQgvYKyr.js";
+import { t as RichText } from "../richText-C8-Ny2SD.js";
 import { createConsentManager } from "@incodetech/core/consent";
 //#region src/modules/consent/consent.tsx
 var stopLinkPropagation = (event) => {
@@ -21,8 +20,6 @@ var ConsentContent = ({ config, manager: externalManager, onFinish, onError }) =
 			language: config.language ?? i18n.language
 		} });
 	}, { manageLifecycle: !externalManager });
-	const checkboxes = "checkboxes" in state ? state.checkboxes : void 0;
-	const mode = T(() => getRequiredHintMode(checkboxes?.map((c) => c.required) ?? []), [checkboxes]);
 	useModuleTerminalCallbacks({
 		status: state.status,
 		onFinish,
@@ -34,6 +31,7 @@ var ConsentContent = ({ config, manager: externalManager, onFinish, onError }) =
 	return /* @__PURE__ */ u(Page, {
 		className: "IncodeConsentPage",
 		title: state.title,
+		subtitle: t("forms.subtitle"),
 		children: /* @__PURE__ */ u("div", {
 			class: "IncodeConsentContent",
 			children: [
@@ -46,30 +44,25 @@ var ConsentContent = ({ config, manager: externalManager, onFinish, onError }) =
 						class: "IncodeConsentCheckboxList",
 						role: "group",
 						"aria-label": t("biometricConsent.consentOptions"),
-						children: state.checkboxes.map((checkbox) => {
-							const hint = getFieldHint(mode, checkbox.required);
-							const labelHint = hint ? t(`forms.label.${hint}`) : void 0;
-							return /* @__PURE__ */ u(Checkbox, {
-								id: `consent-checkbox-${checkbox.id}`,
-								class: "IncodeConsentCheckbox",
-								size: "s",
-								checked: checkbox.checked,
-								required: checkbox.required,
-								labelHint,
-								onChange: () => manager.toggleCheckbox(checkbox.id),
-								label: /* @__PURE__ */ u("span", {
-									class: "IncodeConsentCheckboxLabel",
-									role: "presentation",
-									onClick: stopLinkPropagation,
-									onKeyDown: stopLinkPropagation,
-									children: /* @__PURE__ */ u(RichText, {
-										content: checkbox.label,
-										class: "IncodeRichText",
-										disallowedTags: ["img"]
-									})
+						children: state.checkboxes.map((checkbox) => /* @__PURE__ */ u(Checkbox, {
+							id: `consent-checkbox-${checkbox.id}`,
+							class: "IncodeConsentCheckbox",
+							size: "s",
+							checked: checkbox.checked,
+							required: checkbox.required,
+							onChange: () => manager.toggleCheckbox(checkbox.id),
+							label: /* @__PURE__ */ u("span", {
+								class: "IncodeConsentCheckboxLabel",
+								role: "presentation",
+								onClick: stopLinkPropagation,
+								onKeyDown: stopLinkPropagation,
+								children: /* @__PURE__ */ u(RichText, {
+									content: checkbox.label,
+									class: "IncodeRichText",
+									disallowedTags: ["img"]
 								})
-							}, checkbox.id);
-						})
+							})
+						}, checkbox.id))
 					})]
 				}),
 				state.status === "display" && state.error ? /* @__PURE__ */ u("p", {

package/dist/consent/styles.css

@@ -31,7 +31,7 @@
   overflow-y: auto;
 }
 
-.IncodeConsentPage .IncodeConsentBody .IncodeRichText .markup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {
+.IncodeConsentPage .IncodeConsentBody .IncodeRichText .IncodeRichTextMarkup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {
   margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   font-family: var(--typography-body-family);
   font-size: var(--typography-body-m-regular-size);
@@ -41,7 +41,7 @@
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeConsentPage .IncodeConsentBody .IncodeRichText .markup a, .IncodeConsentPage .IncodeConsentBody .IncodeRichText a {
+.IncodeConsentPage .IncodeConsentBody .IncodeRichText .IncodeRichTextMarkup a, .IncodeConsentPage .IncodeConsentBody .IncodeRichText a {
   color: var(--color-icon-brand-600, var(--icon-brand-600));
   text-decoration-line: underline;
 }
@@ -90,11 +90,11 @@
   color: var(--color-checkbox-text-default, var(--checkbox-text-default));
 }
 
-.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
+.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .IncodeRichTextMarkup {
   display: inline;
 }
 
-.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup p, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText p {
+.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .IncodeRichTextMarkup p, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText p {
   margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
   font-family: var(--typography-checkbox-radio-family);
   font-size: var(--typography-checkbox-radio-s-size);

package/dist/consent/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeConsentPage {\n  height: 100%;\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  animation-fill-mode: both;\n}\n\n.IncodeConsentPage .IncodePageContent {\n  min-height: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeConsentPage .IncodeConsentContent {\n  margin-top: var(--spacing-24, var(--spacing-24, 24px));\n  height: 100%;\n  min-height: var(--spacing-0, var(--spacing-none, 0px));\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--spacing-24, var(--spacing-24, 24px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeConsentPage .IncodeConsentBody {\n  min-height: var(--spacing-0, var(--spacing-none, 0px));\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  gap: var(--spacing-24, var(--spacing-24, 24px));\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n}\n\n.IncodeConsentPage .IncodeConsentBody .IncodeRichText .IncodeRichTextMarkup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {\n  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-m-regular-size);\n  font-weight: var(--typography-body-m-regular-weight);\n  line-height: var(--typography-body-m-regular-line-height);\n  letter-spacing: var(--typography-body-m-regular-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeConsentPage .IncodeConsentBody .IncodeRichText .IncodeRichTextMarkup a, .IncodeConsentPage .IncodeConsentBody .IncodeRichText a {\n  color: var(--color-icon-brand-600, var(--icon-brand-600));\n  text-decoration-line: underline;\n}\n\n.IncodeConsentPage .IncodeConsentSubtitle {\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-m-regular-size);\n  font-weight: var(--typography-body-m-regular-weight);\n  line-height: var(--typography-body-m-regular-line-height);\n  letter-spacing: var(--typography-body-m-regular-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeConsentPage .IncodeConsentCheckboxList {\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeConsentPage .IncodeConsentCheckbox {\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  background-color: var(--color-surface-brand-50, var(--surface-brand-50));\n  width: 100%;\n  padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n  padding-block: var(--spacing-20, var(--spacing-20, 20px));\n}\n\n.IncodeConsentPage .IncodeConsentCheckbox .IncodeCheckboxLabel {\n  align-items: flex-start;\n}\n\n.IncodeConsentPage .IncodeConsentCheckbox .IncodeCheckboxText {\n  font-family: var(--typography-checkbox-radio-family);\n  font-size: var(--typography-checkbox-radio-s-size);\n  font-weight: var(--typography-checkbox-radio-s-weight);\n  line-height: var(--typography-checkbox-radio-s-line-height);\n  letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);\n}\n\n.IncodeConsentPage .IncodeConsentCheckboxLabel {\n  font-family: var(--typography-checkbox-radio-family);\n  font-size: var(--typography-checkbox-radio-s-size);\n  font-weight: var(--typography-checkbox-radio-s-weight);\n  line-height: var(--typography-checkbox-radio-s-line-height);\n  letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);\n  color: var(--color-checkbox-text-default, var(--checkbox-text-default));\n}\n\n.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .IncodeRichTextMarkup {\n  display: inline;\n}\n\n.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .IncodeRichTextMarkup p, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText p {\n  margin-bottom: var(--spacing-0, var(--spacing-none, 0px));\n  font-family: var(--typography-checkbox-radio-family);\n  font-size: var(--typography-checkbox-radio-s-size);\n  font-weight: var(--typography-checkbox-radio-s-weight);\n  line-height: var(--typography-checkbox-radio-s-line-height);\n  letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);\n  display: inline;\n}\n\n.IncodeConsentPage .IncodeConsentButton {\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  width: 100%;\n}\n\n.IncodeConsentPage .IncodeConsentActions {\n  align-items: center;\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeConsentPage .IncodeConsentSubmitError {\n  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));\n  margin-top: 0;\n}\n";