@incodetech/web 2.1.1 → 2.2.0-rc.0

package/dist/{spinner-BMeIEK1d.js → spinner-CLZ2fz4u.js}

@@ -1,6 +1,47 @@
-import { _ as y, l as A, v as u, x as k } from "./vendor-preact-DThS2ZQ_.js";
-import { n as cn, r as Spacer, t as LoadingIcon } from "./loadingIcon-B0ysgiNq.js";
-import { t as Title } from "./typography-BZIpjo97.js";
+import { S as k, _ as y, a as D, l as A, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { n as LoadingIcon, t as Spacer, u as cn } from "./spacer-CDlQd12V.js";
+//#region src/shared/typography/typography.tsx
+var Title = D(({ children, className, ...rest }, ref) => {
+	return /* @__PURE__ */ u("h2", {
+		ref,
+		class: `IncodeTitle ${className ?? ""}`,
+		...rest,
+		children
+	});
+});
+var TypographyH1 = D(({ children, className, ...rest }, ref) => {
+	return /* @__PURE__ */ u("h1", {
+		ref,
+		class: cn("IncodeTypographyH1", className),
+		...rest,
+		children
+	});
+});
+var TypographyH3 = ({ children, className }) => {
+	return /* @__PURE__ */ u("h3", {
+		class: cn("IncodeTypographyH3", className),
+		children
+	});
+};
+var TypographyH4 = ({ children, className }) => {
+	return /* @__PURE__ */ u("h4", {
+		class: cn("IncodeTypographyH4", className),
+		children
+	});
+};
+var TypographyH5 = ({ children, className }) => {
+	return /* @__PURE__ */ u("h5", {
+		class: cn("IncodeTypographyH5", className),
+		children
+	});
+};
+var TypographyP = ({ children, className }) => {
+	return /* @__PURE__ */ u("p", {
+		class: cn("IncodeTypographyP", className),
+		children
+	});
+};
+//#endregion
 //#region src/shared/spinner/spinner.tsx
 var sizeMap = {
 	small: 24,
@@ -51,4 +92,4 @@ var Spinner = ({ title, subtitle, ariaLabel, size = "medium", fullScreen = true,
 	});
 };
 //#endregion
-export { Spinner as t };
+export { TypographyH4 as a, TypographyH3 as i, Title as n, TypographyH5 as o, TypographyH1 as r, TypographyP as s, Spinner as t };

package/dist/statusPage--GVFSUJp.js

@@ -0,0 +1,36 @@
+import { m as g, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { o as Page } from "./incodeComponent-K9ZWg302.js";
+import { t as Spacer } from "./spacer-CDlQd12V.js";
+import { t as AutoFocusTitle } from "./autoFocusTitle-gLba2mgp.js";
+//#region src/shared/statusPage/statusPage.tsx
+var StatusPage = ({ variant, icon, title, subtitle, hideFooterBranding, actions, isLive }) => {
+	const subtitleId = `${g()}-subtitle`;
+	return /* @__PURE__ */ u(Page, {
+		className: `IncodeStatusPage IncodeStatusPage--${variant}`,
+		hideFooterBranding,
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeStatusPageContainer",
+			role: isLive ?? variant === "loading" ? "status" : void 0,
+			"aria-live": isLive ?? variant === "loading" ? "polite" : void 0,
+			children: [
+				icon,
+				/* @__PURE__ */ u(Spacer, { size: 16 }),
+				/* @__PURE__ */ u(AutoFocusTitle, {
+					className: "IncodeStatusPageTitle",
+					describedById: subtitle ? subtitleId : void 0,
+					children: title
+				}, variant),
+				subtitle && /* @__PURE__ */ u("p", {
+					id: subtitleId,
+					class: "IncodeStatusPageSubtitle",
+					children: subtitle
+				})
+			]
+		}), actions ? /* @__PURE__ */ u("div", {
+			class: "IncodeStatusPageActions",
+			children: actions
+		}) : null]
+	});
+};
+//#endregion
+export { StatusPage as t };

package/dist/{successIcon-B5mGvdx1.js → successIcon-Bj8Y9CuI.js}

@@ -1,4 +1,4 @@
-import { v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { v as u } from "./vendor-preact-mvwZ8mJj.js";
 //#region src/shared/icons/successIcon.tsx
 var SuccessIcon = ({ size = 64 }) => {
 	return /* @__PURE__ */ u("svg", {

package/dist/{tabs-C__chW-u.js → tabs-DweBZTV2.js}

@@ -1,5 +1,5 @@
-import { b as Q, g as x, m as g, p as d, v as u } from "./vendor-preact-DThS2ZQ_.js";
-import { n as cn } from "./loadingIcon-B0ysgiNq.js";
+import { b as Q, g as x, m as g, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { u as cn } from "./spacer-CDlQd12V.js";
 //#region src/shared/tabs/tabs.tsx
 var TabsContext = Q(null);
 var useTabsContext = () => {
@@ -42,7 +42,7 @@ var TabsList = ({ label, labelledBy, children }) => {
 		children
 	});
 };
-var TabsTrigger = ({ value, disabled, children }) => {
+var TabsTrigger = ({ value, disabled, "data-testid": dataTestId, children }) => {
 	const { baseId, activeValue, setActiveValue, orientation, activation, triggerClassName, activeTriggerClassName } = useTabsContext();
 	const selected = activeValue === value;
 	const handleKeyDown = (event) => {
@@ -77,6 +77,7 @@ var TabsTrigger = ({ value, disabled, children }) => {
 		tabIndex: selected ? 0 : -1,
 		disabled,
 		"data-value": value,
+		"data-testid": dataTestId,
 		class: cn(triggerClassName, selected && activeTriggerClassName),
 		onClick: () => setActiveValue(value),
 		onKeyDown: handleKeyDown,

package/dist/themes/dark.css

@@ -748,6 +748,7 @@
   --surface-brand-500: var(--primitive-color-brand-500);
   --surface-brand-500-static: var(--primitive-color-brand-500);
   --surface-brand-600-static: var(--primitive-color-brand-600);
+  --surface-brand-900-static: var(--primitive-color-brand-900);
 
   /* Surface / Status */
 
@@ -812,6 +813,7 @@
   /* Text / Body */
 
   --text-body-0-static: var(--primitive-color-gray-0);
+  --text-body-50-static: var(--primitive-color-gray-50);
   --text-body-300-tertiary: var(--primitive-color-gray-300);
   --text-body-300-tertiary-static: var(--primitive-color-gray-300);
   --text-body-400: var(--primitive-color-gray-400);
@@ -876,6 +878,7 @@
   --surface-brand-500: var(--primitive-color-gray-0);
   --surface-brand-500-static: var(--primitive-color-brand-500);
   --surface-brand-600-static: var(--primitive-color-brand-600);
+  --surface-brand-900-static: var(--primitive-color-brand-900);
 
   /* Surface / Status */
 
@@ -940,6 +943,7 @@
   /* Text / Body */
 
   --text-body-0-static: var(--primitive-color-gray-0);
+  --text-body-50-static: var(--primitive-color-gray-50);
   --text-body-300-tertiary: var(--primitive-color-gray-500);
   --text-body-300-tertiary-static: var(--primitive-color-gray-300);
   --text-body-400: var(--primitive-color-gray-500);
@@ -1046,6 +1050,7 @@
   --input-surface-focused: var(--surface-neutral-50);
   --input-surface-disabled: var(--surface-neutral-100);
   --input-surface-negative: var(--surface-neutral-50);
+  --input-surface-hover: var(--surface-neutral-0);
 
   --input-border-default: var(--border-neutral-400);
   --input-border-disabled: var(--border-neutral-100);
@@ -1073,6 +1078,7 @@
   --dropdown-surface-disabled: var(--surface-neutral-50);
   --dropdown-surface-negative: var(--surface-neutral-50);
   --dropdown-surface-selected: var(--surface-neutral-100);
+  --dropdown-surface-hover: var(--surface-neutral-0);
 
   --dropdown-border-default: var(--border-neutral-400);
   --dropdown-border-disabled: var(--border-neutral-100);
@@ -1182,7 +1188,11 @@
   --incode-form-max-w: 420px;
   --incode-page-max-h-landscape: 726px;
   --dialog-content-max-width: 390px;
+  --permissions-modal-title-max-width: calc(100% - (2 * var(--spacing-64)));
   --document-capture-pdf-preview-height: 160px;
+  --document-capture-tutorial-illustration-width: 292px;
+  --document-capture-review-header-height: 100px;
+  --document-capture-review-empty-footer-height: 56px;
   --incode-curp-confirm-max-w: 340px;
   --age-verification-logo-height: 20px;
   --id-processing-image-blur-radius: 8px;
@@ -1236,6 +1246,14 @@
     -1 * var(--page-header-height)
   );
 
+  /* id capture */
+  --id-capture-notification-animation-height: 130px;
+  --id-capture-result-flash-duration: 750ms;
+
+  /* camera overlay (see shared/cameraOverlay/cameraFrame.css) */
+  --camera-frame-capture-result-flash-shadow: 0 0 50px 0
+    var(--surface-neutral-0-static);
+
   /* digital ID upload */
   --digital-id-preview-w: 156px;
   --digital-id-preview-h: 221px;
@@ -1248,6 +1266,23 @@
   --digital-id-file-name-max-w: 200px;
   --digital-id-progress-bar-w: 164px;
   --digital-id-progress-bar-h: 8px;
+  --video-selfie-mask-vignette-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
+  --video-selfie-feedback-max-width: 80%;
+  --video-selfie-stepper-height: 45px;
+  --video-selfie-stepper-pill-height: 5px;
+  --video-selfie-mask-z-index: 50;
+  --video-selfie-chrome-z-index: 60;
+  --video-selfie-id-flip-gap: 34px;
+  --video-selfie-id-flip-animation-height: 138px;
+  --video-selfie-id-flip-animation-width: 260px;
+  --video-selfie-id-feedback-width: 264px;
+  --video-selfie-id-feedback-max-width: calc(100% - var(--spacing-48));
+  --video-selfie-id-processing-feedback-width: 200px;
+  --video-selfie-id-processing-feedback-height: 172px;
+  --video-selfie-voice-panel-border-width: 5px;
+  --video-selfie-voice-processing-height: 314px;
+  --video-selfie-voice-vignette-shadow: 0 0 0 99999px
+    var(--surface-neutral-1000-80-static);
 }
 [data-incode-theme='dark'] {
   /* Surface / Neutral */

package/dist/themes/light.css

@@ -748,6 +748,7 @@
   --surface-brand-500: var(--primitive-color-brand-500);
   --surface-brand-500-static: var(--primitive-color-brand-500);
   --surface-brand-600-static: var(--primitive-color-brand-600);
+  --surface-brand-900-static: var(--primitive-color-brand-900);
 
   /* Surface / Status */
 
@@ -812,6 +813,7 @@
   /* Text / Body */
 
   --text-body-0-static: var(--primitive-color-gray-0);
+  --text-body-50-static: var(--primitive-color-gray-50);
   --text-body-300-tertiary: var(--primitive-color-gray-300);
   --text-body-300-tertiary-static: var(--primitive-color-gray-300);
   --text-body-400: var(--primitive-color-gray-400);
@@ -876,6 +878,7 @@
   --surface-brand-500: var(--primitive-color-gray-0);
   --surface-brand-500-static: var(--primitive-color-brand-500);
   --surface-brand-600-static: var(--primitive-color-brand-600);
+  --surface-brand-900-static: var(--primitive-color-brand-900);
 
   /* Surface / Status */
 
@@ -940,6 +943,7 @@
   /* Text / Body */
 
   --text-body-0-static: var(--primitive-color-gray-0);
+  --text-body-50-static: var(--primitive-color-gray-50);
   --text-body-300-tertiary: var(--primitive-color-gray-500);
   --text-body-300-tertiary-static: var(--primitive-color-gray-300);
   --text-body-400: var(--primitive-color-gray-500);
@@ -1046,6 +1050,7 @@
   --input-surface-focused: var(--surface-neutral-50);
   --input-surface-disabled: var(--surface-neutral-100);
   --input-surface-negative: var(--surface-neutral-50);
+  --input-surface-hover: var(--surface-neutral-0);
 
   --input-border-default: var(--border-neutral-400);
   --input-border-disabled: var(--border-neutral-100);
@@ -1073,6 +1078,7 @@
   --dropdown-surface-disabled: var(--surface-neutral-50);
   --dropdown-surface-negative: var(--surface-neutral-50);
   --dropdown-surface-selected: var(--surface-neutral-100);
+  --dropdown-surface-hover: var(--surface-neutral-0);
 
   --dropdown-border-default: var(--border-neutral-400);
   --dropdown-border-disabled: var(--border-neutral-100);
@@ -1182,7 +1188,11 @@
   --incode-form-max-w: 420px;
   --incode-page-max-h-landscape: 726px;
   --dialog-content-max-width: 390px;
+  --permissions-modal-title-max-width: calc(100% - (2 * var(--spacing-64)));
   --document-capture-pdf-preview-height: 160px;
+  --document-capture-tutorial-illustration-width: 292px;
+  --document-capture-review-header-height: 100px;
+  --document-capture-review-empty-footer-height: 56px;
   --incode-curp-confirm-max-w: 340px;
   --age-verification-logo-height: 20px;
   --id-processing-image-blur-radius: 8px;
@@ -1236,6 +1246,14 @@
     -1 * var(--page-header-height)
   );
 
+  /* id capture */
+  --id-capture-notification-animation-height: 130px;
+  --id-capture-result-flash-duration: 750ms;
+
+  /* camera overlay (see shared/cameraOverlay/cameraFrame.css) */
+  --camera-frame-capture-result-flash-shadow: 0 0 50px 0
+    var(--surface-neutral-0-static);
+
   /* digital ID upload */
   --digital-id-preview-w: 156px;
   --digital-id-preview-h: 221px;
@@ -1248,4 +1266,21 @@
   --digital-id-file-name-max-w: 200px;
   --digital-id-progress-bar-w: 164px;
   --digital-id-progress-bar-h: 8px;
+  --video-selfie-mask-vignette-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
+  --video-selfie-feedback-max-width: 80%;
+  --video-selfie-stepper-height: 45px;
+  --video-selfie-stepper-pill-height: 5px;
+  --video-selfie-mask-z-index: 50;
+  --video-selfie-chrome-z-index: 60;
+  --video-selfie-id-flip-gap: 34px;
+  --video-selfie-id-flip-animation-height: 138px;
+  --video-selfie-id-flip-animation-width: 260px;
+  --video-selfie-id-feedback-width: 264px;
+  --video-selfie-id-feedback-max-width: calc(100% - var(--spacing-48));
+  --video-selfie-id-processing-feedback-width: 200px;
+  --video-selfie-id-processing-feedback-height: 172px;
+  --video-selfie-voice-panel-border-width: 5px;
+  --video-selfie-voice-processing-height: 314px;
+  --video-selfie-voice-vignette-shadow: 0 0 0 99999px
+    var(--surface-neutral-1000-80-static);
 }