@incodetech/web 0.0.0-dev-20260318-ce9c1ed → 0.0.0-dev-20260320-96b0018

package/dist/{AsYouType-DoYUSTc1.js → AsYouType-D1H_js4X.js}

@@ -1,4 +1,4 @@
-import { M as g, d as et, i as j, v as zt, e as Jt, w as Zt, m as Qt } from "./countries-CM1cm_kP.js";
+import { M as g, d as et, i as j, v as zt, e as Jt, w as Zt, m as Qt } from "./countries-DfLkrF0x.js";
 function U(t, r, e) {
   return te(t, r, void 0, e);
 }

package/dist/{Trans-CA9a3vKp.js → Trans-Cm7gi0st.js}

@@ -1,4 +1,4 @@
-import { u as n, b as T } from "./button-Ca1tRSTI.js";
+import { u as n, b as T } from "./button-zCdeDeEB.js";
 import { K as m, k as w } from "./vendor-preact-BXf0bkEs.js";
 const v = ({ class: l }) => /* @__PURE__ */ n(
   "svg",

package/dist/{addressAutocomplete-DetZGxBZ.js → addressAutocomplete-BIQwiDWk.js}

@@ -1,8 +1,8 @@
 import { d, y as M, A as F, q as K } from "./vendor-preact-BXf0bkEs.js";
-import { b as Q, u as l } from "./button-Ca1tRSTI.js";
+import { b as Q, u as l } from "./button-zCdeDeEB.js";
 import "./uiConfig-Z6RT23Sl.js";
-import { t as R } from "./formField-FeX9N4c8.js";
-import { I as q } from "./inputComposed-BHi-MSpP.js";
+import { t as R } from "./formField-hlgxOSE6.js";
+import { a as q } from "./inputComposed-CyGtRLzv.js";
 import "@incodetech/core";
 import { u as z } from "./useMediaQuery-CiSMgDyi.js";
 function J(c, f) {

package/dist/authentication/authentication.es.js

@@ -1,10 +1,10 @@
-import { u as e, I as o, a as m } from "../button-Ca1tRSTI.js";
+import { u as e, I as o, a as m } from "../button-zCdeDeEB.js";
 import { createAuthenticationManager as l } from "@incodetech/core/authentication";
 import "../vendor-preact-BXf0bkEs.js";
 import "@incodetech/core";
-import { P as c } from "../permissions-BDElyTL4.js";
+import { P as c } from "../manualCaptureButton-iYqQECzn.js";
 import { r as p } from "../incodeModule-aE-LkKwM.js";
-import { T as f, C as d } from "../tutorial-D8y4KZtv.js";
+import { T as f, C as d } from "../tutorial-CDJugc5j.js";
 const h = ({
   config: r,
   authHint: s,

package/dist/base.css

@@ -2221,6 +2221,36 @@
     height: 840px;
   }
 }
+@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 {
+    height: 840px;
+  }
+}
 .IncodePageContainer .IncodePageInner {
   width: 100%;
 }
@@ -2259,7 +2289,9 @@
   }
 }
 .IncodePageContainer .IncodePageInner {
-  padding: var(--spacing-24, var(--spacing-24, 24px));
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  padding-top: var(--spacing-8, var(--spacing-8, 8px));
+  padding-bottom: var(--spacing-0, var(--spacing-none, 0px));
   flex-direction: column;
   flex: 1;
   display: flex;
@@ -2371,6 +2403,13 @@
   line-height: var(--typography-headline-h5-line-height);
   letter-spacing: var(--typography-headline-h5-letter-spacing);
 }
+.IncodeComponent .IncodeTypographyP {
+  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);
+}
 .IncodeSuccessIcon {
   flex-shrink: 0;
 }
@@ -2807,6 +2846,7 @@
   letter-spacing: var(--typography-headline-h2-letter-spacing);
   color: var(--color-text-body-0, var(--text-body-0-static));
   text-align: center;
+  min-height: var(--typography-headline-h2-line-height);
 }
 .IncodeCameraOverlayHeader .IncodeCameraOverlayHeaderSubtitle {
   font-family: var(--typography-headline-family);
@@ -2816,6 +2856,7 @@
   letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-tertiary, var(--text-body-300-tertiary));
   text-align: center;
+  min-height: var(--typography-headline-h5-line-height);
 }
 .IncodeCameraFrame {
   --frame-border-color: var(--border-neutral-100);
@@ -3291,6 +3332,116 @@
   font-size: 22px;
   display: block;
 }
+.IncodeVerificationOptionCardList {
+  flex-direction: column;
+  width: 100%;
+  max-width: 26.25rem;
+  display: flex;
+}
+.IncodeVerificationOptionCard {
+  cursor: pointer;
+  touch-action: manipulation;
+  align-items: flex-start;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  border-radius: var(--radius-none, var(--border-radius-none));
+  border-style: var(--tw-border-style);
+  --tw-border-style: solid;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--color-border-neutral-100, var(--border-neutral-100));
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  width: 100%;
+  padding-inline: var(--spacing-12, var(--spacing-12, 12px));
+  padding-block: var(--spacing-8, var(--spacing-8, 8px));
+  max-width: 26.25rem;
+  display: flex;
+  position: relative;
+}
+.IncodeVerificationOptionCard:first-child {
+  border-top-left-radius: var(--radius-medium, var(--border-radius-medium));
+  border-top-right-radius: var(--radius-medium, var(--border-radius-medium));
+}
+.IncodeVerificationOptionCard:last-child {
+  border-bottom-right-radius: var(--radius-medium, var(--border-radius-medium));
+  border-bottom-left-radius: var(--radius-medium, var(--border-radius-medium));
+}
+.IncodeVerificationOptionCard:only-child {
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+}
+.IncodeVerificationOptionCard + .IncodeVerificationOptionCard {
+  border-top-style: var(--tw-border-style);
+  border-top-width: var(--border-width-none, var(--primitive-border-width-0));
+}
+.IncodeVerificationOptionCard:focus-visible {
+  z-index: 1;
+  outline-width: 1px;
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--color-border-status-focus, var(--border-status-focus));
+}
+.IncodeVerificationOptionCard:disabled {
+  cursor: not-allowed;
+  opacity: .6;
+}
+.IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 3.75rem;
+  height: 3.75rem;
+  display: flex;
+}
+.IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon svg {
+  width: 100%;
+  height: auto;
+}
+.IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeIdCardIconFill, .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeUploadIdIconFill, .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodePassportIconFill, .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeDeviceWalletsIconFill, .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeDigitalIdIconFill {
+  fill: var(--color-surface-brand-500, var(--surface-brand-500-static));
+}
+.IncodeVerificationOptionCard .IncodeVerificationOptionCardTag {
+  align-items: center;
+  gap: var(--spacing-2, var(--spacing-2, 2px));
+  border-radius: var(--radius-small, var(--border-radius-small));
+  background-color: var(--color-surface-brand-50, var(--surface-brand-50));
+  width: fit-content;
+  padding-inline: var(--spacing-8, var(--spacing-8, 8px));
+  padding-block: var(--spacing-2, var(--spacing-2, 2px));
+  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-icon-brand-500-static, var(--icon-brand-500-static));
+  display: flex;
+}
+.IncodeVerificationOptionCard .IncodeVerificationOptionCardTitleTagContainer {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  flex-direction: column;
+  display: flex;
+}
+.IncodeVerificationOptionCard .IncodeVerificationOptionCardTitle {
+  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);
+}
+.IncodeVerificationOptionCard .IncodeVerificationOptionCardContent {
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  display: flex;
+}
+.IncodeVerificationOptionCard .IncodeVerificationOptionCardContent .IncodeVerificationOptionCardArrow {
+  color: var(--color-icon-neutral-500, var(--icon-neutral-500));
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false

package/dist/{button-Ca1tRSTI.js → button-zCdeDeEB.js}

@@ -361,14 +361,14 @@ const W = () => /* @__PURE__ */ o(
 export {
   X as B,
   G as I,
-  U as L,
+  z as L,
   J as S,
   W as V,
   q as a,
   x as b,
   Q as c,
   h as d,
-  z as e,
+  U as e,
   K as i,
   o as u
 };

package/dist/{captureFooter-X2qN1773.js → captureFooter-SNtyUXrI.js}

@@ -1,8 +1,9 @@
-import { u as e, d, S as s, b as C, B as u } from "./button-Ca1tRSTI.js";
-import { k as h, D as p, A as v, y as m } from "./vendor-preact-BXf0bkEs.js";
+import { u as e, d, S as v, b as m, B as I } from "./button-zCdeDeEB.js";
+import { k as w, D as f, A as C, y as u } from "./vendor-preact-BXf0bkEs.js";
+import { T as y } from "./spinner-BbVGMG-G.js";
 import "./uiConfig-Z6RT23Sl.js";
-const I = ({
-  className: a
+const g = ({
+  className: r
 }) => /* @__PURE__ */ e(
   "svg",
   {
@@ -11,7 +12,7 @@ const I = ({
     viewBox: "0 0 68 68",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    class: a,
+    class: r,
     "aria-hidden": "true",
     children: [
       /* @__PURE__ */ e(
@@ -26,7 +27,7 @@ const I = ({
       /* @__PURE__ */ e("circle", { cx: "33.5926", cy: "33.9996", r: "25.4187", fill: "white" })
     ]
   }
-), w = ({ className: a }) => /* @__PURE__ */ e(
+), F = ({ className: r }) => /* @__PURE__ */ e(
   "svg",
   {
     width: "30",
@@ -34,7 +35,7 @@ const I = ({
     viewBox: "0 0 30 30",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    class: a,
+    class: r,
     "aria-hidden": "true",
     children: [
       /* @__PURE__ */ e(
@@ -57,7 +58,7 @@ const I = ({
       )
     ]
   }
-), f = ({ className: a }) => /* @__PURE__ */ e(
+), H = ({ className: r }) => /* @__PURE__ */ e(
   "svg",
   {
     width: "16",
@@ -65,7 +66,7 @@ const I = ({
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    class: a,
+    class: r,
     "aria-hidden": "true",
     children: /* @__PURE__ */ e(
       "path",
@@ -75,9 +76,9 @@ const I = ({
       }
     )
   }
-), H = ({
-  progress: a,
-  label: r,
+), O = ({
+  progress: r,
+  label: a,
   className: l
 }) => /* @__PURE__ */ e("div", { class: d("IncodeProgressBarContainer", l), children: [
   /* @__PURE__ */ e(
@@ -85,142 +86,164 @@ const I = ({
     {
       class: "IncodeProgressBar",
       role: "progressbar",
-      "aria-valuenow": a,
+      "aria-valuenow": r,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-label": r,
-      children: /* @__PURE__ */ e("div", { class: "IncodeProgressBarFill", style: { width: `${a}%` } })
+      "aria-label": a,
+      children: /* @__PURE__ */ e("div", { class: "IncodeProgressBarFill", style: { width: `${r}%` } })
     }
   ),
-  r ? /* @__PURE__ */ e(h, { children: [
-    /* @__PURE__ */ e(s, { size: 24 }),
-    /* @__PURE__ */ e("p", { class: "IncodeProgressBarLabel", children: r })
+  a ? /* @__PURE__ */ e(w, { children: [
+    /* @__PURE__ */ e(v, { size: 24 }),
+    /* @__PURE__ */ e("p", { class: "IncodeProgressBarLabel", children: a })
   ] }) : null
-] }), b = p(
+] }), x = f(
   ({
-    variant: a,
-    aspectRatio: r,
+    variant: r,
+    aspectRatio: a,
     orientation: l = "horizontal",
     frameState: c = "idle",
-    className: i,
-    children: o
-  }, t) => {
-    const n = `IncodeCameraFrame${c.charAt(0).toUpperCase()}${c.slice(1)}`;
+    className: o,
+    children: n
+  }, i) => {
+    const t = `IncodeCameraFrame${c.charAt(0).toUpperCase()}${c.slice(1)}`;
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: t,
+        ref: i,
         class: d(
           "IncodeCameraFrame",
-          a === "fill" && "IncodeCameraFrameFill",
-          a === "locked" && "IncodeCameraFrameLocked",
-          a === "locked" && l === "horizontal" && "IncodeCameraFrameHorizontal",
-          a === "locked" && l === "vertical" && "IncodeCameraFrameVertical",
-          n,
-          i
+          r === "fill" && "IncodeCameraFrameFill",
+          r === "locked" && "IncodeCameraFrameLocked",
+          r === "locked" && l === "horizontal" && "IncodeCameraFrameHorizontal",
+          r === "locked" && l === "vertical" && "IncodeCameraFrameVertical",
+          t,
+          o
         ),
-        style: r ? { aspectRatio: r } : void 0,
+        style: a ? { aspectRatio: a } : void 0,
         "aria-hidden": !0,
-        children: o
+        children: n
       }
     );
   }
-), B = ({
-  children: a,
-  className: r
-}) => /* @__PURE__ */ e("div", { class: d("IncodeCameraOverlay", r), children: a }), V = ({
-  title: a,
-  subtitle: r,
-  visible: l = !0,
-  className: c
-}) => /* @__PURE__ */ e(
-  "div",
-  {
-    class: d(
-      "IncodeCameraOverlayHeader",
-      !l && "IncodeCameraOverlayHeaderHidden",
-      c
-    ),
-    children: [
-      /* @__PURE__ */ e("div", { class: "IncodeCameraOverlayHeaderTitle", children: a || " " }),
-      /* @__PURE__ */ e("div", { class: "IncodeCameraOverlayHeaderSubtitle", children: r || " " })
-    ]
-  }
-), k = ({
-  stream: a,
+), L = ({
   children: r,
+  className: a
+}) => /* @__PURE__ */ e("div", { class: d("IncodeCameraOverlay", a), children: r }), M = ({
+  title: r,
+  subtitle: a,
+  visible: l = !0,
+  className: c,
+  titleId: o
+}) => {
+  const n = C(null);
+  return u(() => {
+    n.current?.focus();
+  }, []), /* @__PURE__ */ e(
+    "div",
+    {
+      class: d(
+        "IncodeCameraOverlayHeader",
+        !l && "IncodeCameraOverlayHeaderHidden",
+        c
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          y,
+          {
+            ref: n,
+            id: o,
+            className: "IncodeCameraOverlayHeaderTitle",
+            tabIndex: -1,
+            children: r
+          }
+        ),
+        /* @__PURE__ */ e("p", { class: "IncodeCameraOverlayHeaderSubtitle", children: a })
+      ]
+    }
+  );
+}, Z = ({
+  stream: r,
+  children: a,
   videoRef: l,
   className: c,
-  ...i
+  ...o
 }) => {
-  const o = v(null), t = (n) => {
-    o.current = n, typeof l == "function" ? l(n) : l && (l.current = n);
+  const n = C(null), i = (t) => {
+    n.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
   };
-  return m(() => {
-    o.current && a && (o.current.srcObject = a, o.current.play().catch(() => {
+  return u(() => {
+    n.current && r && (n.current.srcObject = r, n.current.play().catch(() => {
     }));
-  }, [a]), /* @__PURE__ */ e("div", { class: d("IncodeCameraView", c), ...i, children: [
+  }, [r]), /* @__PURE__ */ e("div", { class: d("IncodeCameraView", c), ...o, children: [
     /* @__PURE__ */ e("div", { class: "IncodeCameraViewVideo", children: /* @__PURE__ */ e(
       "video",
       {
-        ref: t,
+        ref: i,
         autoplay: !0,
         playsInline: !0,
         muted: !0,
+        "aria-hidden": "true",
         class: "IncodeCameraViewVideoElement"
       }
     ) }),
-    r
+    a
   ] });
-}, O = ({
-  onOpenHelp: a,
-  onCapture: r,
+}, P = ({
+  onOpenHelp: r,
+  onCapture: a,
   isManualCapture: l,
   captureAriaLabel: c,
-  helpAriaLabel: i,
-  encryptionLabel: o,
-  children: t
+  captureAriaDescribedBy: o,
+  helpAriaLabel: n,
+  helpButtonRef: i,
+  captureButtonRef: t,
+  encryptionLabel: h,
+  children: p
 }) => {
-  const { t: n } = C();
+  const { t: s } = m();
   return /* @__PURE__ */ e("div", { class: "IncodeCaptureFooter", children: [
     /* @__PURE__ */ e("div", { class: "IncodeCaptureFooterEncryption", children: [
-      /* @__PURE__ */ e(f, { className: "IncodeCaptureFooterEncryptionIcon" }),
-      /* @__PURE__ */ e("span", { children: o ?? n("v2.capture.label") })
+      /* @__PURE__ */ e(H, { className: "IncodeCaptureFooterEncryptionIcon" }),
+      /* @__PURE__ */ e("span", { children: h ?? s("v2.capture.label") })
     ] }),
-    l && r ? /* @__PURE__ */ e("div", { class: "IncodeCaptureFooterCaptureSection", children: [
-      t,
+    l && a ? /* @__PURE__ */ e("div", { class: "IncodeCaptureFooterCaptureSection", children: [
+      p,
       /* @__PURE__ */ e(
         "button",
         {
+          ref: t,
           type: "button",
           class: "IncodeCaptureFooterCaptureButton",
-          onClick: r,
-          "aria-label": c ?? n("manualCapture.ariaLabel"),
+          onClick: a,
+          "aria-label": c ?? s("manualCapture.ariaLabel"),
+          "aria-describedby": o,
           "data-testid": "capture-button",
-          children: /* @__PURE__ */ e(I, {})
+          children: /* @__PURE__ */ e(g, {})
         }
       )
     ] }) : null,
     /* @__PURE__ */ e("div", { class: "IncodeCaptureFooterHelp", children: /* @__PURE__ */ e(
-      u,
+      I,
       {
+        ref: i,
         variant: "link",
-        onClick: a,
-        "aria-label": i ?? n("idv2.needHelp.open"),
+        onClick: r,
+        "aria-label": n ?? s("idv2.needHelp.open"),
         class: "IncodeCaptureFooterHelpButton",
-        children: /* @__PURE__ */ e(w, {})
+        children: /* @__PURE__ */ e(F, {})
       }
     ) })
   ] });
 };
 export {
-  B as C,
-  w as H,
-  f as L,
-  H as P,
-  b as a,
-  k as b,
-  V as c,
-  O as d,
-  I as e
+  L as C,
+  F as H,
+  H as L,
+  O as P,
+  x as a,
+  Z as b,
+  M as c,
+  P as d,
+  g as e
 };

package/dist/{chevronDown-BUaOuf9J.js → chevronDown-DRVnB275.js}

@@ -1,4 +1,4 @@
-import { u as o } from "./button-Ca1tRSTI.js";
+import { u as o } from "./button-zCdeDeEB.js";
 const e = ({ class: r }) => /* @__PURE__ */ o(
   "svg",
   {

package/dist/{closeIcon-BM7WLbKp.js → closeIcon-D2dmrZca.js}

@@ -1,4 +1,4 @@
-import { u as e } from "./button-Ca1tRSTI.js";
+import { u as e } from "./button-zCdeDeEB.js";
 const C = ({
   width: l = 14,
   height: o = 14,

package/dist/{countries-CM1cm_kP.js → countries-DfLkrF0x.js}

@@ -603,8 +603,8 @@ function x($) {
 }
 export {
   F as M,
-  b as a,
-  x as b,
+  x as a,
+  b,
   g as c,
   A as d,
   k as e,