@incodetech/web 0.0.0-dev-20260710-eb98382c → 0.0.0-dev-20260713-506b2caa

package/dist/ae-signature/ae-signature.es.js

@@ -1,5 +1,5 @@
 import { v as u } from "../vendor-preact-DThS2ZQ_.js";
-import { n as ElectronicSignature } from "../electronic-signature-D-vhd9lU.js";
+import { n as ElectronicSignature } from "../electronic-signature-BH2vVHyT.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
 //#region src/modules/ae-signature/ae-signature.tsx
 var AeSignature = ({ config, onFinish, onError }) => {

package/dist/authentication/authentication.es.js

@@ -1,8 +1,8 @@
 import { v as u } from "../vendor-preact-DThS2ZQ_.js";
 import { c as useModuleTerminalCallbacks, s as isTerminalModuleState, u as useManager } from "../hooks-CNu7o-v8.js";
 import { t as IncodeComponent } from "../incodeComponent-CfzJGETt.js";
-import { n as Capture, t as Tutorial } from "../tutorial-DJ3kpqnL.js";
-import { i as Permissions } from "../capture-CkGvdDNH.js";
+import { n as Capture, t as Tutorial } from "../tutorial-BA1xxIP6.js";
+import { i as Permissions } from "../capture-D3ke7s8S.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
 import { createAuthenticationManager } from "@incodetech/core/authentication";
 //#region src/modules/authentication/authentication.tsx

package/dist/base.css

@@ -194,6 +194,55 @@
     position: static;
   }
 
+  .sticky {
+    position: sticky;
+  }
+
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+
   @media (min-width: 40rem) {
     .incode-container {
       max-width: 40rem;
@@ -2682,6 +2731,117 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .animate-fade-in {
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+    animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+    animation-fill-mode: both;
+  }
+
   .resize {
     resize: both;
   }
@@ -2703,6 +2863,15 @@
     border-width: 1px;
   }
 
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+
+  .border-neutral-100 {
+    border-color: var(--color-neutral-100, oklch(97% 0 0));
+  }
+
   .bg-white {
     background-color: var(--color-white, #fff);
   }
@@ -2975,6 +3144,11 @@
     font-weight: var(--typography-button-m-underlined-weight);
     line-height: var(--typography-button-m-underlined-line-height);
     letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: auto;
@@ -3540,7 +3714,7 @@
   opacity: 1;
 }
 
-.IncodeRadioButton .IncodeRadioButtonText {
+.IncodeRadioButton .IncodeRadioButtonTextM {
   color: var(--color-radio-button-text-default, var(--radio-button-text-default));
   font-family: var(--typography-checkbox-radio-family);
   font-size: var(--typography-checkbox-radio-m-size);
@@ -3549,6 +3723,15 @@
   letter-spacing: var(--typography-checkbox-radio-m-letter-spacing);
 }
 
+.IncodeRadioButton .IncodeRadioButtonTextS {
+  color: var(--color-radio-button-text-default, var(--radio-button-text-default));
+  font-family: var(--typography-checkbox-radio-family);
+  font-size: var(--typography-checkbox-radio-s-size);
+  font-weight: var(--typography-checkbox-radio-s-weight);
+  line-height: var(--typography-checkbox-radio-s-line-height);
+  letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);
+}
+
 .IncodeRadioButton .IncodeRadioButtonTextDisabled {
   color: var(--color-radio-button-text-disabled, var(--radio-button-text-disabled));
 }
@@ -3708,6 +3891,10 @@
   opacity: 1;
 }
 
+.IncodeInput:hover:not(:disabled):not(:focus) {
+  background-color: var(--color-input-surface-hover, var(--input-surface-hover));
+}
+
 .IncodeInput:focus {
   border-style: var(--tw-border-style);
   border-width: 2px;
@@ -3720,7 +3907,7 @@
   background-color: var(--color-input-surface-focused, var(--input-surface-focused));
 }
 
-.IncodeInput[aria-invalid="true"] {
+.IncodeInput[aria-invalid="true"], .IncodeInput[aria-invalid="true"]:focus, .IncodeInput[aria-invalid="true"]:active:not(:disabled) {
   border-style: var(--tw-border-style);
   border-width: 2px;
   border-color: var(--color-input-border-negative, var(--input-border-negative));
@@ -3940,6 +4127,128 @@
   display: inline-block;
 }
 
+.IncodePasswordInputComposed {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedToggle {
+  top: 50%;
+  right: var(--spacing-12, var(--spacing-12, 12px));
+  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  cursor: pointer;
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
+  --tw-border-style: none;
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  z-index: 10000;
+  transition-property: opacity;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
+  background-color: #0000;
+  border-style: none;
+  justify-content: center;
+  align-items: center;
+  transition-duration: .2s;
+  display: flex;
+  position: absolute;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedToggle:hover {
+  opacity: .7;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedToggle:active {
+  opacity: .5;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedToggle:focus-visible {
+  border-radius: var(--radius-xs, .125rem);
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--color-input-border-focused, var(--input-border-focused));
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedRequirements {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedRequirementsHeading {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-default, var(--input-text-helper-default));
+  font-family: inherit;
+  display: flex;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedRequirementsHeading[data-invalid="true"] {
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedRequirementsHeadingIcon {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedRequirementsList {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  flex-direction: column;
+  list-style-type: none;
+  display: flex;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedRequirement {
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  display: flex;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedRequirementIcon {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodePasswordInputComposed .IncodePasswordInputComposedRequirementLabel {
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-default, var(--input-text-helper-default));
+}
+
+.IncodePasswordInputComposed .IncodeSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
 .IncodeDateInputComposedIconButton {
   top: var(--spacing-0, var(--spacing-none, 0px));
   right: var(--spacing-0, var(--spacing-none, 0px));
@@ -4320,6 +4629,7 @@
 
 .IncodeDropdownComposedTrigger:hover:not(:disabled) {
   border-color: var(--color-dropdown-border-focused, var(--dropdown-border-focused));
+  background-color: var(--color-dropdown-surface-hover, var(--dropdown-surface-hover));
 }
 
 .IncodeDropdownComposedTrigger[data-focused="true"] {
@@ -4421,9 +4731,14 @@
   font-weight: var(--font-weight-normal, 400);
   --tw-outline-style: none;
   color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
   background-color: #0000;
   border-style: none;
   outline-style: none;
+  transition-duration: .2s;
 }
 
 .IncodeDropdownComposedSearchInput::placeholder {
@@ -4505,8 +4820,8 @@
   background-color: var(--dropdown-surface-selected, var(--color-dropdown-surface-selected));
 }
 
-.IncodeDropdownComposedOption:hover, .IncodeDropdownComposedOption[data-highlighted="true"] {
-  background-color: var(--surface-neutral-200, var(--color-surface-neutral-200));
+.IncodeDropdownComposedOption:hover:not(:disabled), .IncodeDropdownComposedOption[data-highlighted="true"] {
+  background-color: var(--color-dropdown-surface-hover, var(--dropdown-surface-hover));
 }
 
 .IncodeDropdownComposedLiveRegion, .IncodeDropdownComposedSrOnly {
@@ -7069,6 +7384,51 @@
   }
 }
 
+@media (min-width: 40rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodePageContainer .IncodePageInner {
+    max-height: var(--incode-page-max-h);
+    max-width: var(--incode-page-max-w);
+  }
+
+  @media not all and (min-width: 80rem) {
+    @media (orientation: landscape) {
+      .IncodePageContainer .IncodePageInner {
+        max-height: var(--incode-page-max-h-landscape);
+      }
+    }
+  }
+}
+
 .IncodePageContainer .IncodePageInner {
   width: 100%;
 }

package/dist/{capture-CkGvdDNH.js → capture-D3ke7s8S.js}

@@ -6,8 +6,8 @@ import { t as Page } from "./page-DidH_RkX.js";
 import { i as TypographyH4, n as TypographyH1, t as Title } from "./typography-BZIpjo97.js";
 import { t as TransitionSpinner } from "./transitionSpinner-CuNCqHNi.js";
 import { t as Button } from "./button-Dz6AsbmF.js";
-import { h as WarningIcon } from "./icons-CJJbIpBq.js";
-import { t as Modal } from "./modal-OxkFuuiR.js";
+import { v as WarningIcon } from "./icons-Bi3GbaZc.js";
+import { t as Modal } from "./modal-B63h8Gpv.js";
 import { t as BottomSheet } from "./bottomSheet-CnWbbUAM.js";
 import { t as NumberedStep } from "./numberedStep-CEb-lFJm.js";
 import { getBrowser, getDeviceClass } from "@incodetech/core/device";

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

@@ -4,14 +4,12 @@ import { c as useModuleTerminalCallbacks, u as useManager } from "../hooks-CNu7o
 import { t as IncodeComponent } from "../incodeComponent-CfzJGETt.js";
 import { r as Spacer } from "../loadingIcon-B0ysgiNq.js";
 import { t as Page } from "../page-DidH_RkX.js";
-import "../extensibility-99WsCMVf.js";
-import { a as TypographyH5, o as TypographyP } from "../typography-BZIpjo97.js";
+import { _ as PasswordInputComposed } from "../extensibility-DXmFX41n.js";
+import { a as TypographyH5 } from "../typography-BZIpjo97.js";
 import { t as Button } from "../button-Dz6AsbmF.js";
-import "../icons-CJJbIpBq.js";
 import { t as SuccessIcon } from "../successIcon-B5mGvdx1.js";
 import { t as AutoFocusTitle } from "../autoFocusTitle-uXtAKBTO.js";
-import { t as VerificationResult } from "../verificationResult-BkxxyxOi.js";
-import { t as InputComposed } from "../inputComposed-C1R2LAa3.js";
+import { t as VerificationResult } from "../verificationResult-Omhu8yft.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
 import { MIN_PASSWORD_LENGTH, PASSWORD_VALIDATION_KEYS, REQUIREMENT_I18N_KEYS, createCertificateIssuanceManager } from "@incodetech/core/certificate-issuance";
 //#region src/modules/certificate-issuance/downloadScreen.tsx
@@ -69,61 +67,14 @@ var DownloadScreen = ({ blob, onDownloaded, onError }) => {
 	});
 };
 //#endregion
-//#region src/modules/certificate-issuance/password/ellipseIcon.tsx
-var EllipseIcon = ({ size = 16 }) => {
-	return /* @__PURE__ */ u("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: size,
-		height: size,
-		viewBox: "0 0 16 16",
-		fill: "none",
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ u("title", { children: "Ellipse icon" }), /* @__PURE__ */ u("circle", {
-			cx: "8",
-			cy: "8",
-			r: "5.585",
-			stroke: "var(--icon-neutral-500)",
-			"stroke-width": "1.5"
-		})]
-	});
-};
-//#endregion
-//#region src/modules/certificate-issuance/password/passwordRequirements.tsx
-var PasswordRequirements = ({ validations }) => {
-	const { t } = useTranslation();
-	return /* @__PURE__ */ u("ul", {
-		class: "IncodeCertificateIssuanceRequirements",
-		"aria-live": "polite",
-		"data-testid": "password-requirements",
-		children: PASSWORD_VALIDATION_KEYS.map((key) => {
-			const passed = validations[key];
-			return /* @__PURE__ */ u("li", {
-				class: "IncodeCertificateIssuanceRequirement",
-				"data-testid": `password-requirement-${key}`,
-				"data-met": passed,
-				children: [
-					/* @__PURE__ */ u("span", {
-						"aria-hidden": "true",
-						class: "IncodeCertificateIssuanceRequirementIcon",
-						children: passed ? /* @__PURE__ */ u(SuccessIcon, { size: 16 }) : /* @__PURE__ */ u(EllipseIcon, {})
-					}),
-					/* @__PURE__ */ u("span", {
-						class: "IncodeCertificateIssuanceRequirementLabel",
-						children: t(REQUIREMENT_I18N_KEYS[key], { min: MIN_PASSWORD_LENGTH })
-					}),
-					/* @__PURE__ */ u("span", {
-						class: "IncodeSrOnly",
-						children: passed ? t("certificateIssuance.password.requirementMet") : t("certificateIssuance.password.requirementNotMet")
-					})
-				]
-			}, key);
-		})
-	});
-};
-//#endregion
 //#region src/modules/certificate-issuance/password/passwordScreen.tsx
 var PasswordScreen = ({ password, passwordValidations, canSubmit, onPasswordChange, onSubmit }) => {
 	const { t } = useTranslation();
+	const requirements = T(() => PASSWORD_VALIDATION_KEYS.map((key) => ({
+		key,
+		label: t(REQUIREMENT_I18N_KEYS[key], { min: MIN_PASSWORD_LENGTH }),
+		met: passwordValidations[key]
+	})), [passwordValidations, t]);
 	return /* @__PURE__ */ u(Page, {
 		title: t("certificateIssuance.password.title"),
 		subtitle: t("certificateIssuance.password.description"),
@@ -134,25 +85,22 @@ var PasswordScreen = ({ password, passwordValidations, canSubmit, onPasswordChan
 				className: "IncodeCertificateIssuancePasswordSection",
 				children: /* @__PURE__ */ u("div", {
 					className: "IncodeCertificateIssuancePassword",
-					children: [
-						/* @__PURE__ */ u(InputComposed, {
-							id: "certificate-password",
-							"data-testid": "certificate-password",
-							type: "password",
-							placeholder: t("certificateIssuance.password.placeholder"),
-							value: password,
-							autocomplete: "new-password",
-							onInput: (e) => {
-								onPasswordChange(e.target.value);
-							},
-							closeButton: {
-								show: password.length > 0,
-								onClose: () => onPasswordChange("")
-							}
-						}),
-						/* @__PURE__ */ u(TypographyP, { children: t("certificateIssuance.passwordRequirements.description") }),
-						/* @__PURE__ */ u(PasswordRequirements, { validations: passwordValidations })
-					]
+					children: /* @__PURE__ */ u(PasswordInputComposed, {
+						id: "certificate-password",
+						"data-testid": "certificate-password",
+						placeholder: t("certificateIssuance.password.placeholder"),
+						value: password,
+						autocomplete: "new-password",
+						showPasswordAriaLabel: t("certificateIssuance.password.show"),
+						hidePasswordAriaLabel: t("certificateIssuance.password.hide"),
+						requirementsHeading: t("certificateIssuance.passwordRequirements.description"),
+						requirements,
+						requirementMetLabel: t("certificateIssuance.password.requirementMet"),
+						requirementUnmetLabel: t("certificateIssuance.password.requirementNotMet"),
+						onInput: (e) => {
+							onPasswordChange(e.target.value);
+						}
+					})
 				})
 			}), /* @__PURE__ */ u(Button, {
 				disabled: !canSubmit,

package/dist/certificate-issuance/styles.css

@@ -71,44 +71,3 @@
   letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
-
-.IncodeCertificateIssuanceRequirements {
-  gap: var(--spacing-8, var(--spacing-8, 8px));
-  flex-direction: column;
-  list-style: none;
-  display: flex;
-}
-
-.IncodeCertificateIssuanceRequirement {
-  align-items: center;
-  gap: var(--spacing-4, var(--spacing-4, 4px));
-  display: flex;
-}
-
-.IncodeCertificateIssuanceRequirementIcon {
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeCertificateIssuanceRequirementLabel {
-  font-family: var(--typography-body-family);
-  font-size: var(--typography-body-m-regular-size);
-  font-weight: var(--typography-body-m-regular-weight);
-  line-height: var(--typography-body-m-regular-line-height);
-  letter-spacing: var(--typography-body-m-regular-letter-spacing);
-  color: var(--color-input-text-helper-default, var(--input-text-helper-default));
-}
-
-.IncodeSrOnly {
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border-width: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}

package/dist/{checkbox-1wUHSoaK.js → checkbox-DU3dczAM.js}

@@ -1,7 +1,7 @@
 import { a as D, p as d, v as u } from "./vendor-preact-DThS2ZQ_.js";
 import { n as cn } from "./loadingIcon-B0ysgiNq.js";
 import { t as ErrorIcon } from "./errorIcon-BA4T6iy-.js";
-import { d as CheckmarkIcon } from "./icons-CJJbIpBq.js";
+import { m as CheckmarkIcon } from "./icons-Bi3GbaZc.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);

package/dist/consent/consent.es.js

@@ -5,7 +5,7 @@ import { t as IncodeComponent } from "../incodeComponent-CfzJGETt.js";
 import { t as Page } from "../page-DidH_RkX.js";
 import { t as TransitionSpinner } from "../transitionSpinner-CuNCqHNi.js";
 import { t as Button } from "../button-Dz6AsbmF.js";
-import { t as Checkbox } from "../checkbox-1wUHSoaK.js";
+import { t as Checkbox } from "../checkbox-DU3dczAM.js";
 import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
 import { t as RichText } from "../richText-CB1fmegc.js";
 import { n as getRequiredHintMode, t as getFieldHint } from "../requiredLabelHint-D0RhuMed.js";