@incodetech/web 2.2.0 → 2.3.0-rc.1

package/dist/selfie/selfie.es.js

@@ -1,11 +1,182 @@
-import { v as y, y as u } from "../vendor-preact-BPXMFRom.js";
-import { _ as isTerminalModuleState, b as useManager, l as TransitionSpinner, r as withStandaloneModuleBootstrap, t as IncodeComponent, v as useModuleTerminalCallbacks } from "../incodeComponent-BtFz-bx2.js";
-import { i as preloadAnimations } from "../spacer-DLEDuWEx.js";
-import { t as Processing } from "../processing-B2eaSGLu.js";
-import { n as Capture, t as Tutorial } from "../tutorial-LQuJ4dse.js";
-import { n as Permissions } from "../manualCaptureButton-D58WsS-x.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
+import { o as useTranslation } from "../uiConfig-BcjOx3PY.js";
+import { S as k, _ as y, c as A, 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-DeVV0gEn.js";
+import { i as preloadAnimations } from "../spacer-DZ-t7RMQ.js";
+import { t as Spinner } from "../spinner-hjbTcmA1.js";
+import { b as ErrorIcon, f as ChevronRightIcon, r as SuccessIcon, x as Button } from "../icons-DNXYxUPA.js";
+import { t as Processing } from "../processing-CrNgzN1u.js";
+import { t as Permissions } from "../permissions-B0ctl0V9.js";
+import { n as Capture, t as Tutorial } from "../tutorial-BP1F722m.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-Do8qpZk7.js";
 import { createSelfieManager } from "@incodetech/core/selfie";
+//#region src/modules/selfie/manualUpload/manualUploadError.tsx
+/** `role="alert"` announces the rejection once on insert (SC 4.1.3). */
+var ManualUploadError = ({ errorKey, id }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u("div", {
+		id,
+		class: "IncodeSelfieManualUploadError",
+		role: "alert",
+		"data-testid": "selfie-manual-upload-error",
+		children: [/* @__PURE__ */ u(ErrorIcon, { size: 16 }), /* @__PURE__ */ u("p", { children: t(errorKey) })]
+	});
+};
+//#endregion
+//#region src/modules/selfie/manualUpload/selfieSlotIcon.tsx
+/**
+* Slot pictogram for the manual selfie upload card, from the Figma design.
+* Fills use `currentColor` so the card controls the tint and dark mode works;
+* the source artwork hardcoded `#60667C`.
+*/
+var SelfieSlotIcon = () => /* @__PURE__ */ u("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ u("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M12.05 2.30078C6.65 2.30078 2.25 6.70078 2.25 12.1008C2.25 13.9008 2.65 15.4008 3.35 16.7008C3.55 17.1008 4.05 17.2008 4.35 17.0008C4.75 16.8008 4.85 16.3008 4.65 16.0008C4.05 15.0008 3.75 13.7008 3.75 12.2008C3.75 7.70078 7.45 4.00078 11.95 4.00078C16.45 4.00078 20.15 7.70078 20.15 12.2008C20.15 13.5008 19.85 14.7008 19.25 16.1008C19.05 16.5008 19.25 16.9008 19.65 17.1008C19.75 17.1008 19.85 17.2008 19.95 17.2008C20.25 17.2008 20.55 17.0008 20.65 16.8008C21.35 15.2008 21.75 13.8008 21.75 12.3008C21.75 6.70078 17.45 2.30078 12.05 2.30078Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ u("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M15.7489 10.5012C15.7489 8.40117 14.0489 6.70117 11.9489 6.70117C9.84893 6.70117 8.14893 8.40117 8.14893 10.5012C8.14893 12.6012 9.84893 14.3012 11.9489 14.3012C14.0489 14.3012 15.7489 12.6012 15.7489 10.5012Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ u("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M12.05 15.8014C8.24995 15.8014 6.64995 17.7014 6.44995 19.5014C6.44995 19.7014 6.54995 19.9014 6.64995 20.0014C8.14995 21.1014 10.05 21.7014 12.05 21.7014C13.95 21.7014 15.75 21.1014 17.45 20.0014C17.65 19.9014 17.65 19.7014 17.65 19.5014C17.55 18.6014 16.85 15.7014 12.05 15.8014Z",
+			fill: "currentColor"
+		})
+	]
+});
+//#endregion
+//#region src/modules/selfie/manualUpload/uploadSlot.tsx
+/**
+* The single "Your selfie" card. The whole card is the button — the pill is
+* `aria-hidden` decoration, since a button inside a button is invalid and would
+* give screen-reader users two controls for one action.
+*/
+var UploadSlot = ({ label, actionLabel, uploaded, uploading, describedById, onFile }) => {
+	const inputRef = A(null);
+	const openPicker = () => {
+		if (uploading) return;
+		inputRef.current?.click();
+	};
+	const handleChange = (event) => {
+		const input = event.target;
+		const file = input.files?.[0];
+		if (file) onFile(file);
+		input.value = "";
+	};
+	const renderAction = () => {
+		if (uploading) return /* @__PURE__ */ u(Spinner, {
+			size: "small",
+			fullScreen: false
+		});
+		if (uploaded) return /* @__PURE__ */ u(SuccessIcon, { size: 28 });
+		return /* @__PURE__ */ u("span", {
+			class: "IncodeSelfieUploadSlotPill",
+			children: [actionLabel, /* @__PURE__ */ u(ChevronRightIcon, {
+				variant: "xs",
+				size: 16
+			})]
+		});
+	};
+	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("button", {
+		type: "button",
+		class: "IncodeSelfieUploadSlot",
+		onClick: openPicker,
+		disabled: uploading,
+		"aria-label": label,
+		"aria-busy": uploading || void 0,
+		"aria-describedby": describedById,
+		"data-testid": "selfie-manual-upload-slot",
+		children: [
+			/* @__PURE__ */ u("div", {
+				class: "IncodeSelfieUploadSlotIcon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ u(SelfieSlotIcon, {})
+			}),
+			/* @__PURE__ */ u("div", {
+				class: "IncodeSelfieUploadSlotLabel",
+				children: label
+			}),
+			/* @__PURE__ */ u("div", {
+				class: "IncodeSelfieUploadSlotAction",
+				"aria-hidden": "true",
+				children: renderAction()
+			})
+		]
+	}), /* @__PURE__ */ u("input", {
+		ref: inputRef,
+		type: "file",
+		accept: "image/png,image/jpeg",
+		class: "IncodeSelfieUploadSlotInput",
+		onChange: handleChange,
+		onInput: handleChange,
+		tabIndex: -1,
+		"aria-hidden": "true"
+	})] });
+};
+//#endregion
+//#region src/modules/selfie/manualUpload/manualUpload.tsx
+var HINT_KEYS = [
+	"selfiev2.manualUpload.hintWholeFaceVisible",
+	"selfiev2.manualUpload.hintNoHatsMasksGlasses",
+	"selfiev2.manualUpload.hintGoodLighting"
+];
+var ERROR_MESSAGE_ID = "selfie-manual-upload-error-message";
+var ManualUpload = ({ manager, state }) => {
+	const { t } = useTranslation();
+	if (state.phase === "uploading") return /* @__PURE__ */ u(Spinner, {
+		fullScreen: true,
+		size: "large",
+		title: t("manualIdUpload.holdOnASec"),
+		subtitle: t("idv2.manualUploadLoading.subtitle")
+	});
+	return /* @__PURE__ */ u(Page, {
+		title: t("selfiev2.manualUpload.uploadAPhotoOfYourself"),
+		"data-testid": "selfie-manual-upload-page",
+		className: "IncodeSelfieManualUploadPage",
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeSelfieManualUploadContainer",
+			children: [/* @__PURE__ */ u(UploadSlot, {
+				label: t("selfiev2.manualUpload.yourSelfie"),
+				actionLabel: t("manualIdUpload.upload"),
+				uploaded: state.uploaded,
+				uploading: false,
+				describedById: state.errorKey ? ERROR_MESSAGE_ID : void 0,
+				onFile: (file) => manager.manualUploadSelectFile(file)
+			}), state.errorKey ? /* @__PURE__ */ u(ManualUploadError, {
+				id: ERROR_MESSAGE_ID,
+				errorKey: state.errorKey
+			}) : !state.uploaded ? /* @__PURE__ */ u("p", {
+				class: "IncodeSelfieManualUploadFormats",
+				children: t("selfiev2.manualUpload.formatsAccepted")
+			}) : null]
+		}), /* @__PURE__ */ u("div", {
+			class: "IncodeSelfieManualUploadFooter",
+			children: [/* @__PURE__ */ u("ul", {
+				class: "IncodeSelfieManualUploadHintCard",
+				"data-testid": "selfie-manual-upload-hints",
+				children: HINT_KEYS.map((key) => /* @__PURE__ */ u("li", { children: t(key) }, key))
+			}), /* @__PURE__ */ u(Button, {
+				onClick: () => manager.manualUploadContinue(),
+				disabled: !state.canContinue,
+				"data-testid": "selfie-manual-upload-continue",
+				children: t("manualIdUpload.continue")
+			})]
+		})]
+	});
+};
+//#endregion
 //#region src/modules/selfie/preloadTutorialAssets.ts
 var started = false;
 function preloadSelfieTutorialAssets() {
@@ -33,7 +204,8 @@ var SelfieContent = ({ config, manager: externalManager, onFinish, onError }) =>
 	if (state.status === "idle" || state.status === "loading") return /* @__PURE__ */ u(TransitionSpinner, { renderMode: "spinnerOnly" });
 	if (state.status === "tutorial") return /* @__PURE__ */ u(Tutorial, {
 		manager,
-		ageAssurance: state.ageAssurance
+		ageAssurance: state.ageAssurance,
+		showManualUploadLink: state.showManualUploadLink
 	});
 	if (state.status === "permissions") return /* @__PURE__ */ u(Permissions, {
 		manager,
@@ -43,6 +215,10 @@ var SelfieContent = ({ config, manager: externalManager, onFinish, onError }) =>
 		manager,
 		state
 	});
+	if (state.status === "manualUpload") return /* @__PURE__ */ u(ManualUpload, {
+		manager,
+		state
+	});
 	if (state.status === "processing") return /* @__PURE__ */ u(Processing, {});
 	if (isTerminalModuleState(state)) return null;
 	return null;

package/dist/selfie/styles.css

@@ -11,9 +11,8 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-tracking: initial;
+      --tw-duration: initial;
+      --tw-outline-style: solid;
     }
   }
 }
@@ -40,6 +39,28 @@
   }
 }
 
+@keyframes incodeToastFadeInOut {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -20px);
+  }
+
+  15% {
+    opacity: 1;
+    transform: translate(-50%);
+  }
+
+  85% {
+    opacity: 1;
+    transform: translate(-50%);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -20px);
+  }
+}
+
 .IncodeCaptureContainer {
   flex-direction: column;
   flex: 1;
@@ -54,12 +75,12 @@
 
 .IncodeCaptureContainer .IncodeCaptureFrame {
   aspect-ratio: 1;
+  width: 100%;
+  max-width: var(--face-capture-frame-max-w);
   border-radius: var(--radius-full, var(--border-radius-full));
   border-style: var(--tw-border-style);
   border-width: 12px;
   border-color: #0000;
-  width: 100%;
-  max-width: 335px;
   position: relative;
 }
 
@@ -71,7 +92,7 @@
   translate: var(--tw-translate-x) var(--tw-translate-y);
   transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   border-radius: var(--radius-full, var(--border-radius-full));
-  background-color: var(--color-white, #fff);
+  background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -89,12 +110,17 @@
 }
 
 .IncodeCaptureContainer .IncodeCaptureVideoElement {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
   object-fit: cover;
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
+.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {
+  opacity: 0;
+}
+
 .IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {
   transform: scaleX(-1);
 }
@@ -106,12 +132,17 @@
 }
 
 .IncodeCaptureContainer .IncodeCaptureAvatarElement {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
   object-fit: cover;
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
+.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {
+  opacity: 0;
+}
+
 .IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {
   transform: scaleX(-1);
 }
@@ -136,7 +167,7 @@
 .IncodeLoadingBorder {
   aspect-ratio: 1;
   width: 100%;
-  max-width: 335px;
+  max-width: var(--face-capture-frame-max-w);
   position: absolute;
 }
 
@@ -183,21 +214,14 @@
   fill: var(--color-icon-neutral-50, var(--icon-neutral-50-static));
 }
 
-.IncodeCaptureCapturingPage .IncodeCaptureCapturingActions {
-  justify-content: center;
-  margin-top: auto;
-  display: flex;
-}
-
 .IncodePrivacyLensBanner {
+  max-width: var(--privacy-lens-banner-max-w);
   text-align: center;
-  color: #4a5568;
-  text-align: center;
-  max-width: 320px;
+  color: var(--privacy-lens-banner-color);
+  font-size: var(--privacy-lens-banner-font-size);
+  line-height: var(--privacy-lens-banner-line-height);
+  padding: var(--privacy-lens-banner-padding);
   margin-inline: auto;
-  padding: 0 1rem 1rem;
-  font-size: .95rem;
-  line-height: 1.4;
 }
 
 .IncodeCaptureStatusPage .IncodeCaptureStatusContainer {
@@ -209,21 +233,18 @@
 
 .IncodeCaptureStatusPage .IncodeCaptureStatusTitle {
   text-align: center;
-  font-size: var(--text-2xl, 1.5rem);
-  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
-  --tw-leading: 125%;
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  line-height: 125%;
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  --tw-tracking: -1px;
-  letter-spacing: -1px;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeSelfieManualCapture {
+  max-width: var(--manual-face-capture-max-w);
   flex-direction: column;
   align-items: center;
-  max-width: 275px;
   display: flex;
 }
 
@@ -242,6 +263,178 @@
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadContainer {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  width: 100%;
+  padding-block: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadFormats {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  padding-inline: 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-text-body-secondary, var(--text-body-500-secondary));
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadError {
+  align-items: flex-start;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  width: 100%;
+  padding-inline: 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-negative, var(--input-text-helper-negative));
+  display: flex;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadError p {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  flex: 1;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadFooter {
+  margin-top: auto;
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+  row-gap: var(--spacing-24, var(--spacing-24, 24px));
+  width: 100%;
+  padding-top: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
+  background-color: var(--color-surface-brand-50, var(--surface-brand-50));
+  width: 100%;
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
+  padding-right: var(--spacing-12, var(--spacing-12, 12px));
+  padding-left: var(--spacing-32, var(--spacing-32, 32px));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  list-style-type: disc;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard li {
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-s-size);
+  font-weight: var(--typography-button-s-weight);
+  line-height: var(--typography-button-s-line-height);
+  letter-spacing: var(--typography-button-s-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard li + li {
+  margin-top: var(--spacing-4, var(--spacing-4, 4px));
+}
+
+.IncodeSelfieUploadSlot {
+  cursor: pointer;
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-regular, var(--primitive-border-width-1));
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: var(--color-border-neutral-100, var(--border-neutral-100));
+  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
+  width: 100%;
+  padding-block: var(--spacing-24, var(--spacing-24, 24px));
+  padding-right: var(--spacing-24, var(--spacing-24, 24px));
+  padding-left: var(--spacing-20, var(--spacing-20, 20px));
+  text-align: left;
+  display: flex;
+}
+
+.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotIcon {
+  width: var(--spacing-24, var(--spacing-24, 24px));
+  height: var(--spacing-24, var(--spacing-24, 24px));
+  color: var(--color-icon-neutral-500, var(--icon-neutral-500));
+  flex-shrink: 0;
+  justify-content: center;
+  display: flex;
+}
+
+.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotLabel {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  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-primary, var(--text-body-800-primary));
+  flex: 1;
+  overflow: hidden;
+}
+
+.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotAction {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotPill {
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  border-radius: var(--radius-full, var(--border-radius-full));
+  background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
+  padding-block: var(--spacing-8, var(--spacing-8, 8px));
+  padding-right: var(--spacing-8, var(--spacing-8, 8px));
+  padding-left: var(--spacing-16, var(--spacing-16, 16px));
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-s-size);
+  font-weight: var(--typography-button-s-weight);
+  line-height: var(--typography-button-s-line-height);
+  letter-spacing: var(--typography-button-s-letter-spacing);
+  color: var(--color-button-primary-text-default, var(--button-primary-text-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;
+  transition-duration: .2s;
+  display: inline-flex;
+}
+
+.IncodeSelfieUploadSlot:focus-visible {
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--color-border-status-focus, var(--border-status-focus));
+}
+
+.IncodeSelfieUploadSlot:hover:not(:disabled) .IncodeSelfieUploadSlotPill {
+  background-color: var(--color-button-primary-surface-hover, var(--button-primary-surface-hover));
+}
+
+.IncodeSelfieUploadSlot:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.IncodeSelfieUploadSlot + .IncodeSelfieUploadSlotInput {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -291,19 +484,15 @@
   inherits: false
 }
 
-@property --tw-leading {
+@property --tw-duration {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-font-weight {
+@property --tw-outline-style {
   syntax: "*";
-  inherits: false
-}
-
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: solid;
 }
 
 @keyframes spin {

package/dist/selfie/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n      --tw-border-style: solid;\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-duration: initial;\n      --tw-outline-style: solid;\n    }\n  }\n}\n\n@layer incode-theme, incode-utilities, incode-base, incode-components;\n\n@keyframes slideUp {\n  from {\n    transform: translateY(100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes incodeToastFadeInOut {\n  0% {\n    opacity: 0;\n    transform: translate(-50%, -20px);\n  }\n\n  15% {\n    opacity: 1;\n    transform: translate(-50%);\n  }\n\n  85% {\n    opacity: 1;\n    transform: translate(-50%);\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -20px);\n  }\n}\n\n.IncodeCaptureContainer {\n  flex-direction: column;\n  flex: 1;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n}\n\n.IncodeCaptureContainer .IncodeCaptureFrame {\n  aspect-ratio: 1;\n  width: 100%;\n  max-width: var(--face-capture-frame-max-w);\n  border-radius: var(--radius-full, var(--border-radius-full));\n  border-style: var(--tw-border-style);\n  border-width: 12px;\n  border-color: #0000;\n  position: relative;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoWrapper {\n  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n  width: calc(100% - 24px);\n  height: calc(100% - 24px);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n  border-radius: var(--radius-full, var(--border-radius-full));\n  background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  overflow: hidden;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideo {\n  z-index: 50;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {\n  opacity: 0;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {\n  transform: scaleX(-1);\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarHost {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {\n  opacity: 0;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {\n  transform: scaleX(-1);\n}\n\n.IncodeCaptureVisuallyHidden {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.IncodeFaceOutline {\n  width: 100%;\n  height: 100%;\n}\n\n.IncodeLoadingBorder {\n  aspect-ratio: 1;\n  width: 100%;\n  max-width: var(--face-capture-frame-max-w);\n  position: absolute;\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  position: absolute;\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {\n  animation: var(--animate-spin, spin 1s linear infinite);\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderPath {\n  transition: all 1s ease-in-out;\n}\n\n.IncodeNotification {\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeNotification .IncodeNotificationText {\n  text-align: center;\n  font-family: var(--typography-feedback-family);\n  font-size: var(--typography-feedback-l-size);\n  font-weight: var(--typography-feedback-l-weight);\n  line-height: var(--typography-feedback-l-line-height);\n  letter-spacing: var(--typography-feedback-l-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeCameraButton {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeCameraButton .IncodeCameraButtonBackground {\n  fill: var(--color-icon-neutral-800-static, var(--icon-neutral-800-static));\n}\n\n.IncodeCameraButton .IncodeCameraButtonRing, .IncodeCameraButton .IncodeCameraButtonPath {\n  fill: var(--color-icon-neutral-50, var(--icon-neutral-50-static));\n}\n\n.IncodePrivacyLensBanner {\n  max-width: var(--privacy-lens-banner-max-w);\n  text-align: center;\n  color: var(--privacy-lens-banner-color);\n  font-size: var(--privacy-lens-banner-font-size);\n  line-height: var(--privacy-lens-banner-line-height);\n  padding: var(--privacy-lens-banner-padding);\n  margin-inline: auto;\n}\n\n.IncodeCaptureStatusPage .IncodeCaptureStatusContainer {\n  flex-direction: column;\n  flex: 1;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeCaptureStatusPage .IncodeCaptureStatusTitle {\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeSelfieManualCapture {\n  max-width: var(--manual-face-capture-max-w);\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeSelfieManualCaptureText {\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\n.IncodeSelfieManualCaptureButton {\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadContainer {\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  width: 100%;\n  padding-block: var(--spacing-24, var(--spacing-24, 24px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadFormats {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  padding-inline: var(--spacing-4, var(--spacing-4, 4px));\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-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadError {\n  align-items: flex-start;\n  gap: var(--spacing-4, var(--spacing-4, 4px));\n  width: 100%;\n  padding-inline: var(--spacing-4, var(--spacing-4, 4px));\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-input-text-helper-negative, var(--input-text-helper-negative));\n  display: flex;\n}\n\n.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadError p {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  flex: 1;\n}\n\n.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadFooter {\n  margin-top: auto;\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  row-gap: var(--spacing-24, var(--spacing-24, 24px));\n  width: 100%;\n  padding-top: var(--spacing-24, var(--spacing-24, 24px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  border-radius: var(--radius-x-small, var(--border-radius-x-small));\n  background-color: var(--color-surface-brand-50, var(--surface-brand-50));\n  width: 100%;\n  padding-block: var(--spacing-16, var(--spacing-16, 16px));\n  padding-right: var(--spacing-12, var(--spacing-12, 12px));\n  padding-left: var(--spacing-32, var(--spacing-32, 32px));\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  list-style-type: disc;\n}\n\n.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard li {\n  font-family: var(--typography-button-family);\n  font-size: var(--typography-button-s-size);\n  font-weight: var(--typography-button-s-weight);\n  line-height: var(--typography-button-s-line-height);\n  letter-spacing: var(--typography-button-s-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard li + li {\n  margin-top: var(--spacing-4, var(--spacing-4, 4px));\n}\n\n.IncodeSelfieUploadSlot {\n  cursor: pointer;\n  align-items: center;\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  border-style: var(--tw-border-style);\n  border-width: var(--border-width-regular, var(--primitive-border-width-1));\n  --tw-border-style: solid;\n  border-style: solid;\n  border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));\n  width: 100%;\n  padding-block: var(--spacing-24, var(--spacing-24, 24px));\n  padding-right: var(--spacing-24, var(--spacing-24, 24px));\n  padding-left: var(--spacing-20, var(--spacing-20, 20px));\n  text-align: left;\n  display: flex;\n}\n\n.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotIcon {\n  width: var(--spacing-24, var(--spacing-24, 24px));\n  height: var(--spacing-24, var(--spacing-24, 24px));\n  color: var(--color-icon-neutral-500, var(--icon-neutral-500));\n  flex-shrink: 0;\n  justify-content: center;\n  display: flex;\n}\n\n.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotLabel {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\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-primary, var(--text-body-800-primary));\n  flex: 1;\n  overflow: hidden;\n}\n\n.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotAction {\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotPill {\n  align-items: center;\n  gap: var(--spacing-4, var(--spacing-4, 4px));\n  border-radius: var(--radius-full, var(--border-radius-full));\n  background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n  padding-block: var(--spacing-8, var(--spacing-8, 8px));\n  padding-right: var(--spacing-8, var(--spacing-8, 8px));\n  padding-left: var(--spacing-16, var(--spacing-16, 16px));\n  font-family: var(--typography-button-family);\n  font-size: var(--typography-button-s-size);\n  font-weight: var(--typography-button-s-weight);\n  line-height: var(--typography-button-s-line-height);\n  letter-spacing: var(--typography-button-s-letter-spacing);\n  color: var(--color-button-primary-text-default, var(--button-primary-text-default));\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));\n  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));\n  --tw-duration: .2s;\n  transition-duration: .2s;\n  display: inline-flex;\n}\n\n.IncodeSelfieUploadSlot:focus-visible {\n  outline-style: var(--tw-outline-style);\n  outline-offset: 2px;\n  outline-width: 2px;\n  outline-color: var(--color-border-status-focus, var(--border-status-focus));\n}\n\n.IncodeSelfieUploadSlot:hover:not(:disabled) .IncodeSelfieUploadSlotPill {\n  background-color: var(--color-button-primary-surface-hover, var(--button-primary-surface-hover));\n}\n\n.IncodeSelfieUploadSlot:disabled {\n  cursor: not-allowed;\n  opacity: .5;\n}\n\n.IncodeSelfieUploadSlot + .IncodeSelfieUploadSlotInput {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";

package/dist/signature/signature.es.js

@@ -1,12 +1,11 @@
-import { a as useTranslation } from "../uiConfig-Dqnjankd.js";
-import { a as D, g as q, l as A, p as d, u as F, 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 { r as Button } from "../incode-logo-DeIDDejm.js";
-import "../extensibility-C5XqL_A3.js";
-import { t as VerificationResult } from "../verificationResult-q_zD_Pxh.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-9K8KUs61.js";
-import { t as _defineProperty } from "../defineProperty-BbpBna-2.js";
+import { o as useTranslation } from "../uiConfig-BcjOx3PY.js";
+import { _ as y, c as A, f as d, h as q, i as D, l as F, 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-DeVV0gEn.js";
+import { t as Spacer } from "../spacer-DZ-t7RMQ.js";
+import { x as Button } from "../icons-DNXYxUPA.js";
+import { t as VerificationResult } from "../verificationResult-Bre5Fb7M.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-Do8qpZk7.js";
+import { t as _defineProperty } from "../defineProperty-BojnCa44.js";
 import { createSignatureManager } from "@incodetech/core/signature";
 //#region ../../node_modules/.pnpm/signature_pad@5.1.3/node_modules/signature_pad/dist/signature_pad.js
 /*!

package/dist/signature/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n      --tw-border-style: solid;\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n    }\n  }\n}\n\n.IncodeSignature .IncodeSrOnly {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.IncodeSignature .IncodeSignatureContent {\n  width: 100%;\n  height: 100%;\n  padding-top: var(--spacing-32, var(--spacing-32, 32px));\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.IncodeSignature .IncodeSignatureButtonContainer {\n  margin-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeSignature.IncodeSignatureFadeIn {\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  animation-fill-mode: both;\n}\n\n.IncodeSignature .IncodeSignatureCanvasContainer {\n  width: 100%;\n  padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n  padding-block: var(--spacing-8, var(--spacing-8, 8px));\n  border-radius: var(--radius-small, var(--border-radius-small));\n  border-style: var(--tw-border-style);\n  border-width: var(--border-width-regular, var(--primitive-border-width-1));\n  --tw-border-style: solid;\n  border-style: solid;\n  border-color: var(--color-input-border-default, var(--input-border-default));\n  background-color: var(--color-input-surface-default, var(--input-surface-default));\n  height: var(--signature-canvas-height);\n  max-width: var(--signature-canvas-max-width);\n  align-self: center;\n  position: relative;\n}\n\n.IncodeSignature .IncodeSignatureCanvas {\n  width: 100%;\n  height: 100%;\n  padding-block: var(--spacing-8, var(--spacing-8, 8px));\n}\n\n.IncodeSignature .IncodeSignatureCanvasPlaceholder {\n  font-family: var(--typography-input-dropdown-family);\n  font-size: var(--typography-input-dropdown-m-size);\n  font-weight: var(--typography-input-dropdown-m-weight);\n  line-height: var(--typography-input-dropdown-m-line-height);\n  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);\n  color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));\n  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  pointer-events: none;\n  text-align: center;\n  -webkit-user-select: none;\n  user-select: none;\n  width: 100%;\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  animation-fill-mode: both;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.IncodeSignature .IncodeSignatureSuccess {\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n";