@incodetech/web 0.0.0-dev-20260402-43cf9b8 → 0.0.0-dev-20260402-a9e4450

package/dist/captureOverlay-wQmz2Z5r.js

@@ -0,0 +1,591 @@
+import { u as e, c as b, b as z, B as M, S as P } from "./button-DXIWeie9.js";
+import { D as N, A as g, y as I, d as O, q as B, k as V, P as L, z as H, T as W } from "./vendor-preact-BoMmvSgn.js";
+import { E } from "./errorIcon-DOuc6ONw.js";
+import { S as Z } from "./successIcon-BZphSsQr.js";
+import "./uiConfig-DmIn-g8M.js";
+import { T as _ } from "./typography-CBPoLoAP.js";
+import { L as S } from "./manualCaptureButton-CPZ2xxEI.js";
+const G = ({
+  className: r
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "68",
+    height: "68",
+    viewBox: "0 0 68 68",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    class: r,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M34.0001 68C52.7779 68 68.0003 52.7777 68.0003 34C68.0003 15.2223 52.7779 0 34.0001 0C15.2224 0 0 15.2223 0 34C0 52.7777 15.2224 68 34.0001 68ZM34 63.5265C50.307 63.5265 63.5265 50.3071 63.5265 34.0002C63.5265 17.6932 50.307 4.47385 34 4.47385C17.693 4.47385 4.4736 17.6932 4.4736 34.0002C4.4736 50.3071 17.693 63.5265 34 63.5265Z",
+          fill: "white"
+        }
+      ),
+      /* @__PURE__ */ e("circle", { cx: "33.5926", cy: "33.9996", r: "25.4187", fill: "white" })
+    ]
+  }
+), U = ({ className: r }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "30",
+    height: "30",
+    viewBox: "0 0 30 30",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    class: r,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M15 0C6.7279 0 0 6.72947 0 15C0 23.2705 6.7279 30 15 30C23.2705 30 30 23.2705 30 15C30 6.72947 23.2705 0 15 0Z",
+          fill: "white"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M17.3532 16.0616L17.1305 16.1863C16.1074 16.7579 15.7458 17.0516 15.7537 17.5537C15.7616 18.2074 15.2389 18.7442 14.5853 18.7537H14.5695C13.9221 18.7537 13.3932 18.2342 13.3853 17.5853C13.3584 15.5832 14.9958 14.6674 15.9732 14.1211L16.1958 13.9947C17.0942 13.5005 17.5426 12.8153 17.5426 11.9532C17.5426 10.5274 16.3821 9.36842 14.9563 9.36842C13.5053 9.36842 12.3684 10.5037 12.3684 11.9532C12.3684 12.6068 11.8379 13.1374 11.1842 13.1374C10.5305 13.1374 10 12.6068 10 11.9532C10 9.22158 12.2232 7 14.9563 7C17.6879 7 19.9111 9.22158 19.9111 11.9532C19.9111 13.6947 19.0016 15.1537 17.3532 16.0616ZM14.5711 22.6379C13.9174 22.6379 13.3868 22.1311 13.3868 21.4774V21.43C13.3868 20.7763 13.9174 20.2458 14.5711 20.2458C15.2247 20.2458 15.7553 20.7763 15.7553 21.43C15.7553 22.0837 15.2247 22.6379 14.5711 22.6379Z",
+          fill: "black"
+        }
+      )
+    ]
+  }
+), j = ({ className: r }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    class: r,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M8 2.83368C9.38071 2.83368 10.5 3.95297 10.5 5.33368V6.66669H11.333C11.7012 6.66669 12 6.96549 12 7.33368V11.9997C12 12.3679 11.7012 12.6667 11.333 12.6667H4.66699C4.2988 12.6667 4 12.3679 4 11.9997V7.33368C4 6.96549 4.2988 6.66669 4.66699 6.66669H5.5V5.33368C5.5 3.95297 6.61929 2.83368 8 2.83368ZM8 3.83368C7.17157 3.83368 6.5 4.50525 6.5 5.33368V6.66669H9.5V5.33368C9.5 4.50525 8.82843 3.83368 8 3.83368Z",
+        fill: "currentColor"
+      }
+    )
+  }
+), q = N(
+  (r, n) => {
+    const { class: t, rows: i = 4, ...a } = r;
+    return /* @__PURE__ */ e(
+      "textarea",
+      {
+        ...a,
+        ref: n,
+        rows: i,
+        class: b("IncodeTextArea", t)
+      }
+    );
+  }
+), K = N(
+  ({
+    id: r,
+    label: n,
+    "aria-label": t,
+    error: i,
+    showErrorIcon: a,
+    helper: o,
+    showHelperIcon: c,
+    required: s,
+    rows: d = 4,
+    class: u,
+    ...v
+  }, l) => {
+    const C = `${r}-helper`, m = `${r}-error`, w = [o ? C : null, i ? m : null].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e("div", { class: b("IncodeTextAreaComposed", u), children: [
+      n && /* @__PURE__ */ e(
+        "label",
+        {
+          class: "IncodeTextAreaComposedLabel",
+          htmlFor: r,
+          "data-testid": `${r}-label`,
+          children: [
+            n,
+            s && /* @__PURE__ */ e("span", { class: "IncodeTextAreaComposedRequired", children: " *" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { class: "IncodeTextAreaComposedWrapper", children: /* @__PURE__ */ e(
+        q,
+        {
+          id: r,
+          rows: d,
+          ...v,
+          ref: l,
+          required: s,
+          ...!n && t ? { "aria-label": t } : {},
+          "aria-describedby": w || void 0,
+          "aria-required": s ? "true" : void 0,
+          "aria-invalid": i ? "true" : void 0
+        }
+      ) }),
+      i && /* @__PURE__ */ e(
+        "div",
+        {
+          class: "IncodeTextAreaComposedErrorWrapper",
+          "data-testid": `${r}-error-wrapper`,
+          children: [
+            a && /* @__PURE__ */ e("div", { class: "IncodeTextAreaComposedIconWrapper", children: /* @__PURE__ */ e(E, { size: 17 }) }),
+            /* @__PURE__ */ e("p", { id: m, class: "IncodeTextAreaComposedError", children: i })
+          ]
+        }
+      ),
+      o && !i && /* @__PURE__ */ e(
+        "div",
+        {
+          class: "IncodeTextAreaComposedHelperWrapper",
+          "data-testid": `${r}-helper-wrapper`,
+          children: [
+            c && /* @__PURE__ */ e("div", { class: "IncodeTextAreaComposedIconWrapper", children: /* @__PURE__ */ e(Z, { size: 17 }) }),
+            /* @__PURE__ */ e("p", { id: C, class: "IncodeTextAreaComposedHelper", children: o })
+          ]
+        }
+      )
+    ] });
+  }
+);
+K.displayName = "TextAreaComposed";
+const J = N(
+  ({
+    variant: r,
+    aspectRatio: n,
+    orientation: t = "horizontal",
+    frameState: i = "idle",
+    className: a,
+    children: o
+  }, c) => {
+    const s = `IncodeCameraFrame${i.charAt(0).toUpperCase()}${i.slice(1)}`;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: c,
+        class: b(
+          "IncodeCameraFrame",
+          r === "fill" && "IncodeCameraFrameFill",
+          r === "locked" && "IncodeCameraFrameLocked",
+          r === "locked" && t === "horizontal" && "IncodeCameraFrameHorizontal",
+          r === "locked" && t === "vertical" && "IncodeCameraFrameVertical",
+          s,
+          a
+        ),
+        style: n ? { aspectRatio: n } : void 0,
+        "aria-hidden": !0,
+        children: o
+      }
+    );
+  }
+), Q = ({
+  children: r,
+  className: n
+}) => /* @__PURE__ */ e("div", { class: b("IncodeCameraOverlay", n), children: r }), X = ({
+  title: r,
+  subtitle: n,
+  visible: t = !0,
+  className: i,
+  titleId: a
+}) => {
+  const o = g(null);
+  return I(() => {
+    o.current?.focus();
+  }, []), /* @__PURE__ */ e(
+    "div",
+    {
+      class: b(
+        "IncodeCameraOverlayHeader",
+        !t && "IncodeCameraOverlayHeaderHidden",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          _,
+          {
+            ref: o,
+            id: a,
+            className: "IncodeCameraOverlayHeaderTitle",
+            tabIndex: -1,
+            children: r
+          }
+        ),
+        /* @__PURE__ */ e("p", { class: "IncodeCameraOverlayHeaderSubtitle", children: n })
+      ]
+    }
+  );
+}, Y = ({
+  onOpenHelp: r,
+  onCapture: n,
+  isManualCapture: t,
+  captureAriaLabel: i,
+  captureAriaDescribedBy: a,
+  helpAriaLabel: o,
+  helpButtonRef: c,
+  captureButtonRef: s,
+  encryptionLabel: d,
+  children: u
+}) => {
+  const { t: v } = z();
+  return /* @__PURE__ */ e("div", { class: "IncodeCaptureFooter", children: [
+    /* @__PURE__ */ e("div", { class: "IncodeCaptureFooterEncryption", children: [
+      /* @__PURE__ */ e(j, { className: "IncodeCaptureFooterEncryptionIcon" }),
+      /* @__PURE__ */ e("span", { children: d ?? v("v2.capture.label") })
+    ] }),
+    t && n ? /* @__PURE__ */ e("div", { class: "IncodeCaptureFooterCaptureSection", children: [
+      u,
+      /* @__PURE__ */ e(
+        "button",
+        {
+          ref: s,
+          type: "button",
+          class: "IncodeCaptureFooterCaptureButton",
+          onClick: n,
+          "aria-label": i ?? v("manualCapture.ariaLabel"),
+          "aria-describedby": a,
+          "data-testid": "capture-button",
+          children: /* @__PURE__ */ e(G, {})
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ e("div", { class: "IncodeCaptureFooterHelp", children: /* @__PURE__ */ e(
+      M,
+      {
+        ref: c,
+        variant: "link",
+        onClick: r,
+        "aria-label": o ?? v("idv2.needHelp.open"),
+        class: "IncodeCaptureFooterHelpButton",
+        children: /* @__PURE__ */ e(U, {})
+      }
+    ) })
+  ] });
+}, h = /* @__PURE__ */ new Map();
+let $ = !1;
+const y = {
+  blur: () => import("./blurdevicelottie-_BZRug1c.js"),
+  glare: () => import("./glaredevicelottie-DLuIStvb.js"),
+  align: () => import("./aligndevicelottie-DlQCRPfM.js"),
+  front: () => import("./frontdevicelottie-KhKxT5n9.js"),
+  back: () => import("./backdevicelottie-B4NgyWmX.js")
+};
+function R(r) {
+  $ || ($ = !0, Promise.all([
+    y.blur(),
+    y.glare(),
+    y.align(),
+    y.front(),
+    y.back()
+  ]).then(([n, t, i, a, o]) => {
+    h.set("blur", n.default), h.set("glare", t.default), h.set("align", i.default), h.set("front", a.default), h.set("back", o.default), r?.();
+  }).catch(() => {
+  }));
+}
+function ee() {
+  R();
+}
+function re() {
+  I(() => {
+    ee();
+  }, []);
+}
+function te(r, n) {
+  const { t } = z(), [, i] = O(0);
+  if (I(() => {
+    R(() => i((a) => a + 1));
+  }, []), r === "blur")
+    return {
+      title: t("idv2.capture.notifications.blur.title"),
+      description: t("idv2.capture.notifications.blur.description"),
+      animationData: h.get("blur") ?? null
+    };
+  if (r === "glare")
+    return {
+      title: t("idv2.capture.notifications.glare.title"),
+      description: t("idv2.capture.notifications.glare.description"),
+      animationData: h.get("glare") ?? null
+    };
+  if (r === "farAway")
+    return {
+      title: t("idv2.capture.notifications.notAligned.title"),
+      description: t("idv2.capture.notifications.notAligned.description"),
+      animationData: h.get("align") ?? null
+    };
+  if (r === "wrongSide") {
+    const a = n === "back";
+    return {
+      title: t(a ? "idv2.capture.notifications.showBack.title" : "idv2.capture.notifications.showFront.title"),
+      description: t(a ? "idv2.capture.notifications.showBack.description" : "idv2.capture.notifications.showFront.description"),
+      animationData: h.get(a ? "back" : "front") ?? null
+    };
+  }
+  return null;
+}
+const ie = ({
+  detectionStatus: r,
+  mode: n,
+  isCapturing: t
+}) => {
+  const { t: i } = z(), a = te(r, n), o = g(null), c = g({
+    message: "",
+    at: 0
+  }), s = g(r), d = g(!1), u = g(), v = g(), l = r === "detecting" || r === "idNotDetected" || r === "manualCapture", C = r === "manualCapture", m = r === "wrongSide", w = r === "farAway", T = r === "glare", F = r === "blur", p = B((f) => {
+    const k = Date.now(), D = c.current;
+    if (f === D.message && k - D.at < 200) return;
+    c.current = { message: f, at: k };
+    const x = o.current;
+    x && (clearTimeout(u.current), x.textContent = "", v.current = setTimeout(() => {
+      x.textContent = f, u.current = setTimeout(() => {
+        x.textContent = "";
+      }, 3e3);
+    }, 50));
+  }, []), A = B(() => i(n === "passport" ? "idv2.capture.fillFramePassport" : n === "back" ? "idv2.capture.v2.fillFrameBack" : "idv2.capture.v2.fillFrameFront"), [n, i]);
+  return I(() => {
+    if (C) {
+      d.current = !1;
+      return;
+    }
+    if (d.current || !l) return;
+    const f = setTimeout(() => {
+      d.current = !0, p(A());
+    }, 500);
+    return () => clearTimeout(f);
+  }, [l, C, p, A]), I(() => {
+    const f = s.current;
+    s.current = r, f !== "manualCapture" && C && p(i("idv2.capture.manualCapture.modeSwitchAriaAnnouncement"));
+  }, [p, r, C, i]), I(() => {
+    if (!t) {
+      if (m) {
+        const k = n === "front" || n === "passport" ? "idv2.capture.notifications.showFront" : "idv2.capture.notifications.showBack";
+        p(`${i(`${k}.title`)}. ${i(`${k}.description`)}`);
+        return;
+      }
+      if (w) {
+        p(`${i("idv2.capture.notifications.notAligned.title")}.`);
+        return;
+      }
+      if (T) {
+        p(`${i("idv2.capture.notifications.glare.title")}.`);
+        return;
+      }
+      if (F) {
+        p(`${i("idv2.capture.notifications.blur.title")}.`);
+        return;
+      }
+      l && d.current && p(A());
+    }
+  }, [
+    p,
+    F,
+    t,
+    w,
+    T,
+    l,
+    m,
+    n,
+    i,
+    A
+  ]), I(() => () => {
+    clearTimeout(v.current), clearTimeout(u.current);
+  }, []), /* @__PURE__ */ e(V, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: o,
+        class: "IncodeSrOnly",
+        "aria-live": "assertive",
+        "aria-atomic": "true"
+      }
+    ),
+    a ? /* @__PURE__ */ e("div", { class: b("IncodeIdCaptureNotification"), "aria-hidden": "true", children: /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationContent", children: [
+      /* @__PURE__ */ e("div", { class: b("IncodeIdCaptureNotificationText"), children: [
+        /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationTitle", children: a.title }),
+        a.description && /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationDescription", children: a.description })
+      ] }),
+      /* @__PURE__ */ e(P, { size: 16, direction: "horizontal" }),
+      a.animationData && /* @__PURE__ */ e("div", { class: "IncodeIdCaptureNotificationAnimation", children: /* @__PURE__ */ e(S, { animationData: a.animationData, loop: !0 }) })
+    ] }) }) : null
+  ] });
+}, ne = H(
+  () => import("./front-horizontal-hint-lRLKd7vY.js")
+), ae = H(
+  () => import("./front-vertical-hint-qQoJXRE3.js")
+), oe = H(
+  () => import("./back-horizontal-hint-CSlf9KI1.js")
+), ce = H(
+  () => import("./back-vertical-hint-CNieqiCr.js")
+), le = H(
+  () => import("./passport-horizontal-hint-BCtpMp1Y.js")
+), se = H(
+  () => import("./passport-vertical-hint-GaLnzqHP.js")
+), de = {
+  "front-horizontal": 348,
+  "back-horizontal": 348,
+  "passport-horizontal": 342
+}, ue = {
+  "front-vertical": 446,
+  "back-vertical": 446,
+  "passport-vertical": 342
+};
+function pe(r, n, t, i) {
+  const a = `${r}-${n}`, o = de[a];
+  if (o) return t / o;
+  const c = ue[a];
+  return c ? i / c : 1;
+}
+const fe = ({ mode: r, orientation: n }) => {
+  const t = g(null), [i, a] = O(1);
+  I(() => {
+    const c = t.current;
+    if (!c) return;
+    const s = () => {
+      a(
+        pe(r, n, c.clientWidth, c.clientHeight)
+      );
+    };
+    s();
+    const d = new ResizeObserver(s);
+    return d.observe(c), () => d.disconnect();
+  }, [r, n]);
+  const o = () => r === "front" ? n === "horizontal" ? /* @__PURE__ */ e(ne, {}) : /* @__PURE__ */ e(ae, {}) : r === "back" ? n === "horizontal" ? /* @__PURE__ */ e(oe, {}) : /* @__PURE__ */ e(ce, {}) : r === "passport" ? n === "horizontal" ? /* @__PURE__ */ e(le, {}) : /* @__PURE__ */ e(se, {}) : null;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: t,
+      class: "IncodeIdHint",
+      "aria-hidden": "true",
+      role: "presentation",
+      children: /* @__PURE__ */ e("div", { class: "IncodeIdHintAnimated", children: /* @__PURE__ */ e(L, { fallback: null, children: /* @__PURE__ */ e("div", { class: "IncodeIdHintSvg", style: { transform: `scale(${i})` }, children: o() }) }) })
+    }
+  );
+}, we = N(
+  ({
+    mode: r,
+    orientation: n,
+    detectionStatus: t,
+    counterValue: i,
+    isCapturing: a,
+    showManualCapture: o,
+    onCapture: c,
+    onOpenHelp: s,
+    helpButtonRef: d,
+    captureButtonRef: u
+  }, v) => {
+    const { t: l } = z();
+    re(), I(() => {
+      o && u && u.current?.focus();
+    }, [o, u]);
+    const C = () => a || t === "capturing" ? "capturing" : t === "blur" || t === "glare" || t === "wrongSide" || t === "farAway" ? "error" : "idle", m = W(() => {
+      if (a || t === "capturing")
+        return {
+          title: l("idv2.capture.takingPhoto"),
+          subtitle: l("idv2.capture.dontMove")
+        };
+      if (t === "detecting" || t === "idNotDetected" || t === "manualCapture") {
+        const f = t === "manualCapture";
+        return r === "passport" ? {
+          title: l("idv2.capture.fillFramePassport"),
+          subtitle: f ? "" : l("idv2.capture.v2.autoCapture")
+        } : r === "back" ? {
+          title: l("idv2.capture.v2.fillFrameBack"),
+          subtitle: f ? "" : l("idv2.capture.v2.autoCapture")
+        } : {
+          title: l("idv2.capture.v2.fillFrameFront"),
+          subtitle: f ? "" : l("idv2.capture.v2.autoCapture")
+        };
+      }
+      return null;
+    }, [a, t, r, l]), w = C(), T = r === "passport", F = n !== "vertical" || T, p = F ? "horizontal" : "vertical";
+    return /* @__PURE__ */ e(
+      Q,
+      {
+        className: b(
+          "IncodeCaptureOverlayId",
+          !F && "IncodeCaptureOverlayVertical"
+        ),
+        children: [
+          /* @__PURE__ */ e("div", { class: "IncodeCaptureTopSection", children: [
+            /* @__PURE__ */ e(
+              ie,
+              {
+                detectionStatus: t,
+                mode: r,
+                isCapturing: a
+              }
+            ),
+            /* @__PURE__ */ e(
+              X,
+              {
+                title: m?.title ?? "",
+                subtitle: m?.subtitle,
+                visible: m !== null,
+                titleId: "id-capture-heading"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            J,
+            {
+              ref: v,
+              variant: "locked",
+              orientation: p,
+              frameState: w,
+              className: b(T && "IncodeCaptureFramePassport"),
+              children: [
+                a && i > 0 && /* @__PURE__ */ e("div", { class: "IncodeCaptureCounter", children: i }),
+                t === "idNotDetected" && /* @__PURE__ */ e(fe, { mode: r, orientation: n ?? "horizontal" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e("div", { class: "IncodeSrOnly", "aria-live": "polite", "aria-atomic": "true", children: a && i > 0 ? i : "" }),
+          /* @__PURE__ */ e(
+            Y,
+            {
+              onOpenHelp: s,
+              onCapture: c,
+              isManualCapture: o,
+              helpButtonRef: d,
+              captureButtonRef: u,
+              captureAriaDescribedBy: o ? "manual-capture-tooltip" : void 0,
+              children: o ? /* @__PURE__ */ e("div", { class: "IncodeIdManualCaptureTooltipContainer", children: /* @__PURE__ */ e(
+                "div",
+                {
+                  id: "manual-capture-tooltip",
+                  role: "tooltip",
+                  class: "IncodeIdManualCaptureTooltip",
+                  children: /* @__PURE__ */ e("ol", { class: "IncodeIdManualCaptureTooltipList", children: [
+                    /* @__PURE__ */ e("li", { children: l("idv2.commonIssues.firstStep") }),
+                    /* @__PURE__ */ e("li", { children: l("idv2.commonIssues.secondStep") })
+                  ] })
+                }
+              ) }) : null
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  Q as C,
+  U as H,
+  j as L,
+  q as T,
+  K as a,
+  J as b,
+  X as c,
+  Y as d,
+  G as e,
+  we as f
+};

package/dist/document-capture/styles.css

@@ -2,30 +2,43 @@
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
       --tw-font-weight: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-border-style: solid;
     }
   }
 }
 
+.IncodeDocumentCaptureFileInput {
+  pointer-events: none;
+  border-style: var(--tw-border-style);
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  opacity: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  position: absolute;
+  overflow: hidden;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+}
+
+.IncodeDocumentCaptureFileInput::file-selector-button {
+  display: none;
+}
+
 .IncodeDocumentCapturePageTutorial .IncodePageContent {
   flex-direction: column;
   flex: 1;
   display: flex;
 }
 
-.IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureFileInput {
-  pointer-events: none;
-  opacity: 0;
-  width: 1px;
-  height: 1px;
-  position: absolute;
-}
-
 .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent {
+  margin-block: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   flex: 1;
   justify-content: center;
@@ -391,6 +404,12 @@
   display: flex;
 }
 
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
@@ -413,9 +432,3 @@
   inherits: false;
   initial-value: 0;
 }
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}