@smileid/web-components 11.0.3 → 11.2.0

package/dist/esm/{DocumentCaptureScreens-C5BhNB-0.js → DocumentCaptureScreens-BbtA-WkX.js}

@@ -1,14 +1,15 @@
-import { S as c, p as M, I as w } from "./package-B-UwEdv7.js";
-import { s as C } from "./styles-BOEZtbuc.js";
-import "./Navigation-CTjK6tLU.js";
-function A(l, e = 16) {
+import { S as h, J as C, p as L, I as b } from "./package-u3FEJ3Fm.js";
+import { s as y } from "./styles-BOEZtbuc.js";
+import { k as x, t as s, c as S, e as $ } from "./index-B_ozpejI.js";
+import "./Navigation-B-dqPkZj.js";
+function D(u, e = 16) {
   const t = /* @__PURE__ */ new Set();
-  for (let i = 0; i < Math.min(l.length, 1e4); i += 4)
-    if (t.add(l[i] << 16 | l[i + 1] << 8 | l[i + 2]), t.size > e)
+  for (let i = 0; i < Math.min(u.length, 1e4); i += 4)
+    if (t.add(u[i] << 16 | u[i + 1] << 8 | u[i + 2]), t.size > e)
       return !0;
   return !1;
 }
-function H() {
+function F() {
   return `
     <style>
       .visually-hidden {
@@ -41,7 +42,7 @@ function H() {
         overflow: visible;
         margin: 0 auto;
       }
-      
+
       @media (max-width: 600px) {
         .section {
           width: 99%;
@@ -74,7 +75,7 @@ function H() {
           -webkit-tap-highlight-color: transparent;
           content: normal;
         }
-      
+
         .id-video {
           width: 99%;
           text-align: center;
@@ -105,7 +106,7 @@ function H() {
         box-sizing: border-box;
         inset: 0px;
       }
-      
+
       .video-overlay .inner-border {
         position: absolute;
         border-width: 0.25rem;
@@ -121,7 +122,7 @@ function H() {
         border-style: solid;
         border-radius: 0.25rem;
       }
-      
+
       .description {
         align-self: center;
         padding-bottom: 1.75rem;
@@ -135,7 +136,7 @@ function H() {
       .id-side {
         padding-bottom: 0.5rem;
       }
-      
+
       .circle-progress {
         display: flex;
         flex-direction: column;
@@ -154,13 +155,13 @@ function H() {
         padding-top: 10px;
       }
   </style>
-  ${C(this.themeColor)}
-  <div id='document-capture-screen' class='flow center flex-column'>
-  <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? "show-navigation" : ""} ${this.hideBack ? "hide-back" : ""}></smileid-navigation>
+  ${y(this.themeColor)}
+  <div id='document-capture-screen' class='flow center flex-column' dir='${this.direction}'>
+  ${this.showNavigation ? `<smileid-navigation theme-color='${this.themeColor}' show-navigation ${this.hideBack ? "hide-back" : ""}></smileid-navigation>` : ""}
     <h2 class='text-base font-bold title-color'>${this.documentName}</h2>
     <div class="circle-progress" id="loader">
         ${this.cameraError ? "" : '<p class="spinner"></p>'}
-        ${this.cameraError ? `<p style="--flow-space: 4rem" class='color-red | center'>${this.cameraError}</p>` : '<p style="--flow-space: 4rem">Checking permissions</p>'}
+        ${this.cameraError ? `<p style="--flow-space: 4rem" class='color-red | center'>${this.cameraError}</p>` : `<p style="--flow-space: 4rem">${s("document.capture.checkingPermissions")}</p>`}
     </div>
     <div class='section | flow ${this.isPortraitCaptureView ? "portrait" : "landscape"}' ${this.cameraError ? "hidden" : ""}>
       <div class='id-video-container'>
@@ -168,13 +169,13 @@ function H() {
         </div>
         <div class='video-footer sticky'>
           <h2 class='text-base font-bold title-color reset-margin-block id-side'>${this.title}</h2>
-          <h4 class='text-base font-normal title-color description reset-margin-block'>Make sure all corners are visible and there is no glare.</h4>
+          <h4 class='text-base font-normal title-color description reset-margin-block'>${s("document.capture.instructionText")}</h4>
           <div class='actions' hidden>
             <button id='capture-id-image' class='button icon-btn | center' type='button'>
               <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70" fill="none" aria-hidden="true" focusable="false">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M35 70C54.33 70 70 54.33 70 35C70 15.67 54.33 0 35 0C15.67 0 0 15.67 0 35C0 54.33 15.67 70 35 70ZM61 35C61 49.3594 49.3594 61 35 61C20.6406 61 9 49.3594 9 35C9 20.6406 20.6406 9 35 9C49.3594 9 61 20.6406 61 35ZM65 35C65 51.5685 51.5685 65 35 65C18.4315 65 5 51.5685 5 35C5 18.4315 18.4315 5 35 5C51.5685 5 65 18.4315 65 35Z" fill="${this.themeColor}"/>
               </svg>
-              <span class='visually-hidden'>Capture Document</span>
+              <span class='visually-hidden'>${s("document.capture.captureButton")}</span>
             </button>
           </div>
           ${this.hideAttribution ? "" : "<powered-by-smile-id></powered-by-smile-id>"}
@@ -184,10 +185,10 @@ function H() {
   </div>
   `;
 }
-const v = 0.6;
-class L extends HTMLElement {
+const w = 0.6;
+class V extends HTMLElement {
   constructor() {
-    super(), this.templateString = H.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" }), this.IdSides = {
+    super(), this.templateString = F.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" }), this.IdSides = {
       back: "Back",
       front: "Front"
     };
@@ -197,19 +198,19 @@ class L extends HTMLElement {
     e.innerHTML = this.render(), this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(e.content.cloneNode(!0)), this.setUpEventListeners();
   }
   async getUserMedia() {
-    if (!c.stream && this.hasAttribute("data-camera-error")) {
+    if (!h.stream && this.hasAttribute("data-camera-error")) {
       try {
-        await c.getMedia({
+        await h.getMedia({
           audio: !1,
           video: {
-            ...c.environmentOptions,
+            ...h.environmentOptions,
             aspectRatio: { ideal: 16 / 9 }
           }
         });
       } catch (e) {
         console.error(e.constraint), console.error(e.message);
       }
-      this.handleIDStream(c.stream);
+      this.handleIDStream(h.stream);
     }
   }
   _captureIDImage() {
@@ -226,14 +227,14 @@ class L extends HTMLElement {
     const t = document.createElement("canvas");
     if (this.isPortraitCaptureView) {
       t.width = e.videoWidth, t.height = t.width * 16 / 9;
-      const s = document.createElement("canvas");
-      s.width = t.width, s.height = t.height, this.updatePortraitId(t, e, 1, 1), this.updatePortraitId(s, e);
-      const n = t.toDataURL("image/jpeg"), h = s.toDataURL("image/jpeg");
+      const n = document.createElement("canvas");
+      n.width = t.width, n.height = t.height, this.updatePortraitId(t, e, 1, 1), this.updatePortraitId(n, e);
+      const d = t.toDataURL("image/jpeg", C), l = n.toDataURL("image/jpeg", C);
       return {
-        image: n,
+        image: d,
         originalHeight: t.height,
         originalWidth: t.width,
-        previewImage: h,
+        previewImage: l,
         ...this.idCardRegion
       };
     }
@@ -242,20 +243,20 @@ class L extends HTMLElement {
     t.height = i;
     const o = document.createElement("canvas");
     if (o.height = t.height, o.width = t.width, e.videoWidth < e.videoHeight) {
-      const s = document.createElement("canvas");
-      o.height = t.width / 1.75, t.width = 2240, t.height = t.width / 1.77, this._capturePortraitToLandscapeImage(s, e), this._drawLandscapeImageFromCanvas(t, s, 1, 1), this._drawLandscapeImageFromCanvas(o, s);
+      const n = document.createElement("canvas");
+      o.height = t.width / 1.75, t.width = 2240, t.height = t.width / 1.77, this._capturePortraitToLandscapeImage(n, e), this._drawLandscapeImageFromCanvas(t, n, 1, 1), this._drawLandscapeImageFromCanvas(o, n);
     } else
       this._drawLandscapeImage(t, e, 1, 1), this._drawLandscapeImage(o, e);
-    const r = t.toDataURL("image/jpeg"), d = o.toDataURL("image/jpeg");
+    const a = t.toDataURL("image/jpeg", C), c = o.toDataURL("image/jpeg", C);
     return {
-      image: r,
+      image: a,
       originalHeight: t.height,
       originalWidth: t.width,
-      previewImage: d,
+      previewImage: c,
       ...this.idCardRegion
     };
   }
-  _drawImage(e, t = !0, i = c.stream) {
+  _drawImage(e, t = !0, i = h.stream) {
     this.resetErrorMessage();
     const o = e.getContext("2d");
     if (o.drawImage(
@@ -269,8 +270,8 @@ class L extends HTMLElement {
       e.width,
       e.height
     ), t) {
-      const a = o.getImageData(0, 0, e.width, e.height);
-      if (A(a.data))
+      const r = o.getImageData(0, 0, e.width, e.height);
+      if (D(r.data))
         return o;
       throw new Error(
         "Unable to capture webcam images - Please try another device"
@@ -284,44 +285,44 @@ class L extends HTMLElement {
       t && t.remove();
       let i = null, o = null;
       i = document.createElement("video"), o = document.createElement("canvas");
-      const a = this.shadowRoot.querySelector(
+      const r = this.shadowRoot.querySelector(
         ".id-video-container"
       );
-      i.muted = !0, i.setAttribute("muted", "true"), i.autoplay = !0, i.playsInline = !0, "srcObject" in i ? i.srcObject = e : i.src = window.URL.createObjectURL(e), o.width = a.clientWidth, o.height = a.clientWidth * 9 / 16, this.isPortraitCaptureView && (o.height = a.clientWidth * 16 / 9), i.onloadedmetadata = () => {
-        i.play(), this.shadowRoot.querySelector("#loader").hidden = !0, this.shadowRoot.querySelector(".id-video").hidden = !1, this.shadowRoot.querySelector(".actions").hidden = !1, t || a.prepend(o);
+      i.muted = !0, i.setAttribute("muted", "true"), i.autoplay = !0, i.playsInline = !0, "srcObject" in i ? i.srcObject = e : i.src = window.URL.createObjectURL(e), o.width = r.clientWidth, o.height = r.clientWidth * 9 / 16, this.isPortraitCaptureView && (o.height = r.clientWidth * 16 / 9), i.onloadedmetadata = () => {
+        i.play(), this.shadowRoot.querySelector("#loader").hidden = !0, this.shadowRoot.querySelector(".id-video").hidden = !1, this.shadowRoot.querySelector(".actions").hidden = !1, t || r.prepend(o);
       };
-      const r = () => {
+      const a = () => {
         if (i.paused || i.ended) return;
-        i.removeEventListener("playing", r);
-        const s = i.videoWidth / i.videoHeight < 1;
+        i.removeEventListener("playing", a);
+        const n = i.videoWidth / i.videoHeight < 1;
         if (this.isPortraitCaptureView) {
-          this.updatePortraitId(o, i), requestAnimationFrame(r);
+          this.updatePortraitId(o, i), requestAnimationFrame(a);
           return;
         }
-        if (s) {
-          a.classList.add("mobile-camera-screen");
-          const n = document.createElement("canvas");
-          this._capturePortraitToLandscapeImage(n, i), this._drawLandscapeImageFromCanvas(o, n);
+        if (n) {
+          r.classList.add("mobile-camera-screen");
+          const d = document.createElement("canvas");
+          this._capturePortraitToLandscapeImage(d, i), this._drawLandscapeImageFromCanvas(o, d);
         } else
           this._drawLandscapeImage(o, i);
-        requestAnimationFrame(r);
+        requestAnimationFrame(a);
       };
-      i.addEventListener("playing", r), this._IDStream = e, this._IDVideo = i;
+      i.addEventListener("playing", a), this._IDStream = e, this._IDVideo = i;
     } catch (t) {
       this.setAttribute(
         "data-camera-error",
-        c.handleCameraError(t)
-      ), t.name !== "AbortError" && console.error(t), c.stopMedia();
+        h.handleCameraError(t)
+      ), t.name !== "AbortError" && console.error(t), h.stopMedia();
     }
   }
-  _drawLandscapeImage(e, t = this._IDVideo, i = v, o = v) {
-    const a = this.height ? this.height / t.videoHeight : i, r = this.width ? this.width / t.videoWidth : o, d = (1 - i) / 2, s = (1 - o) / 2, n = t.videoWidth * r, h = t.videoHeight * a, m = t.videoWidth * s, g = t.videoHeight * d;
+  _drawLandscapeImage(e, t = this._IDVideo, i = w, o = w) {
+    const r = this.height ? this.height / t.videoHeight : i, a = this.width ? this.width / t.videoWidth : o, c = (1 - i) / 2, n = (1 - o) / 2, d = t.videoWidth * a, l = t.videoHeight * r, g = t.videoWidth * n, f = t.videoHeight * c;
     e.getContext("2d").drawImage(
       t,
-      m,
       g,
-      n,
-      h,
+      f,
+      d,
+      l,
       0,
       0,
       e.width,
@@ -329,27 +330,27 @@ class L extends HTMLElement {
     );
   }
   _capturePortraitToLandscapeImage(e, t = this._IDVideo) {
-    const { videoHeight: i, videoWidth: o } = t, a = o, r = o * 9 / 16, d = 0, s = (i - r) / 2;
-    e.width = a, e.height = r, e.getContext("2d").drawImage(
+    const { videoHeight: i, videoWidth: o } = t, r = o, a = o * 9 / 16, c = 0, n = (i - a) / 2;
+    e.width = r, e.height = a, e.getContext("2d").drawImage(
       t,
-      d,
-      s,
-      a,
+      c,
+      n,
       r,
+      a,
       0,
       0,
       e.width,
       e.height
     );
   }
-  _drawLandscapeImageFromCanvas(e, t, i = v, o = v) {
-    const a = this.height ? this.height / t.height : i, r = this.width ? this.width / t.width : o, d = (1 - i) / 2, s = (1 - o) / 2, n = t.width * r, h = t.height * a, m = t.width * s, g = t.height * d;
+  _drawLandscapeImageFromCanvas(e, t, i = w, o = w) {
+    const r = this.height ? this.height / t.height : i, a = this.width ? this.width / t.width : o, c = (1 - i) / 2, n = (1 - o) / 2, d = t.width * a, l = t.height * r, g = t.width * n, f = t.height * c;
     e.getContext("2d").drawImage(
       t,
-      m,
       g,
-      n,
-      h,
+      f,
+      d,
+      l,
       0,
       0,
       e.width,
@@ -357,44 +358,44 @@ class L extends HTMLElement {
     );
   }
   _drawPortraitToLandscapeImage(e, t = this._IDVideo) {
-    const { videoHeight: i, videoWidth: o } = t, a = 600, r = 400;
-    e.width = a, e.height = r;
-    const d = (o - a) / 2, s = (i - r) / 2;
+    const { videoHeight: i, videoWidth: o } = t, r = 600, a = 400;
+    e.width = r, e.height = a;
+    const c = (o - r) / 2, n = (i - a) / 2;
     e.getContext("2d").drawImage(
       t,
-      d,
-      s,
-      a,
+      c,
+      n,
       r,
+      a,
       0,
       0,
       e.width,
       e.height
     );
   }
-  updatePortraitId(e, t = this._IDVideo, i = v, o = v) {
-    const { videoWidth: a, videoHeight: r } = t;
-    if (a && r) {
-      const d = document.createElement("canvas"), s = 9 / 16;
-      let n, h, m, g;
-      a / r > s ? (h = r, n = h * s, m = (a - n) / 2, g = 0) : (n = a, h = n, m = 0, g = 0), d.height = h, d.width = n, d.getContext("2d").drawImage(
+  updatePortraitId(e, t = this._IDVideo, i = w, o = w) {
+    const { videoWidth: r, videoHeight: a } = t;
+    if (r && a) {
+      const c = document.createElement("canvas"), n = 9 / 16;
+      let d, l, g, f;
+      r / a > n ? (l = a, d = l * n, g = (r - d) / 2, f = 0) : (d = r, l = d, g = 0, f = 0), c.height = l, c.width = d, c.getContext("2d").drawImage(
         t,
-        m,
         g,
-        n,
-        h,
+        f,
+        d,
+        l,
         0,
         0,
-        d.width,
-        d.height
+        c.width,
+        c.height
       );
-      const b = this.height ? this.height / n : i, y = this.width ? this.width / h : o, x = (1 - i) / 2, E = (1 - o) / 2, k = n * y, _ = h * b, I = n * E, B = h * x;
+      const E = this.height ? this.height / d : i, k = this.width ? this.width / l : o, _ = (1 - i) / 2, B = (1 - o) / 2, A = d * k, I = l * E, M = d * B, H = l * _;
       e.getContext("2d").drawImage(
-        d,
+        c,
+        M,
+        H,
+        A,
         I,
-        B,
-        k,
-        _,
         0,
         0,
         e.width,
@@ -406,9 +407,9 @@ class L extends HTMLElement {
     e.getTracks().forEach((t) => t.stop());
   }
   setUpEventListeners() {
-    this.captureIDImage = this.shadowRoot.querySelector("#capture-id-image"), this.navigation = this.shadowRoot.querySelector("smileid-navigation"), c.stream && this.handleIDStream(c.stream), this.navigation.addEventListener("navigation.back", () => {
+    this.captureIDImage = this.shadowRoot.querySelector("#capture-id-image"), this.navigation = this.shadowRoot.querySelector("smileid-navigation"), h.stream && this.handleIDStream(h.stream), this.navigation?.addEventListener("navigation.back", () => {
       this.handleBackEvents();
-    }), this.navigation.addEventListener("navigation.close", () => {
+    }), this.navigation?.addEventListener("navigation.close", () => {
       this.handleCloseEvents();
     }), this.captureIDImage.addEventListener("click", () => {
       this._captureIDImage();
@@ -454,11 +455,14 @@ class L extends HTMLElement {
   get isBackOfId() {
     return !this.isFrontOfId;
   }
+  get direction() {
+    return this.getAttribute("dir") || x() || "ltr";
+  }
   get documentType() {
     return this.getAttribute("document-type") || "";
   }
   get documentName() {
-    return this.getAttribute("document-name") || "Document";
+    return this.getAttribute("document-name") || s("document.name.default");
   }
   get isPortraitCaptureView() {
     return this.getAttribute("document-type") === "GREEN_BOOK";
@@ -491,14 +495,14 @@ class L extends HTMLElement {
     }
   }
   handleBackEvents() {
-    this.dispatchEvent(new CustomEvent("document-capture.cancelled")), c.stopMedia();
+    this.dispatchEvent(new CustomEvent("document-capture.cancelled")), h.stopMedia();
   }
   handleCloseEvents() {
-    this.dispatchEvent(new CustomEvent("document-capture.close")), c.stopMedia();
+    this.dispatchEvent(new CustomEvent("document-capture.close")), h.stopMedia();
   }
 }
-"customElements" in window && !customElements.get("document-capture") && window.customElements.define("document-capture", L);
-function S() {
+"customElements" in window && !customElements.get("document-capture") && window.customElements.define("document-capture", V);
+function Z() {
   return `
   <style>
     .retake-photo.button[data-variant~="ghost"] {
@@ -714,14 +718,13 @@ function S() {
       line-height: 1.5rem;
     }
   </style>
-  ${C(this.themeColor)}
-  <div id='document-capture-review-screen' class='flow center'>
-  <smileid-navigation ${this.showNavigation ? "show-navigation" : ""} hide-back></smileid-navigation>
+  ${y(this.themeColor)}
+  <div id='document-capture-review-screen' class='flow center' dir='${this.direction}'>
+  ${this.showNavigation ? "<smileid-navigation show-navigation hide-back></smileid-navigation>" : ""}
     <h1 class="header-title title-color">
-      Is the document clear and readable?
+      ${s("document.review.question")}
     </h1>
-    <p class="description">Make sure all corners of the document 
-    are visible and there is no glare</p>
+    <p class="description">${s("document.review.description")}</p>
     <div class='section | flow'>
       <div class='id-image-container'>
         <div class='id-image'>
@@ -730,10 +733,10 @@ function S() {
           </div>
         <div class='flow action-buttons'>
           <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>
-            Yes, my ID is readable
+            ${s("document.review.acceptButton")}
           </button>
           <button data-variant='ghost full-width' class='button  retake-photo' type='button' id='re-capture-id-image'>
-            No, retake photo
+            ${s("document.review.retakeButton")}
           </button>
         </div>
       </div>
@@ -745,9 +748,9 @@ function S() {
   </div>
   `;
 }
-class D extends HTMLElement {
+class R extends HTMLElement {
   constructor() {
-    super(), this.templateString = S.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" });
+    super(), this.templateString = Z.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     const e = document.createElement("template");
@@ -772,7 +775,10 @@ class D extends HTMLElement {
     return this.getAttribute("data-image");
   }
   get title() {
-    return this.getAttribute("title") || "Submit Front of ID";
+    return this.getAttribute("title") || s("document.title.front");
+  }
+  get direction() {
+    return this.getAttribute("dir") || x() || "ltr";
   }
   handleBackEvents() {
     this.dispatchEvent(new CustomEvent("document-capture-review.cancelled"));
@@ -792,9 +798,9 @@ class D extends HTMLElement {
   setUpEventListeners() {
     this.selectIDImage = this.shadowRoot.querySelector("#select-id-image"), this.reCaptureIDImage = this.shadowRoot.querySelector(
       "#re-capture-id-image"
-    ), this.navigation = this.shadowRoot.querySelector("smileid-navigation"), this.navigation.addEventListener("navigation.back", () => {
+    ), this.navigation = this.shadowRoot.querySelector("smileid-navigation"), this.navigation?.addEventListener("navigation.back", () => {
       this.handleBackEvents();
-    }), this.navigation.addEventListener("navigation.close", () => {
+    }), this.navigation?.addEventListener("navigation.close", () => {
       this.handleCloseEvents();
     }), this.selectIDImage.addEventListener("click", () => {
       this.dispatchEvent(
@@ -811,8 +817,8 @@ class D extends HTMLElement {
     });
   }
 }
-"customElements" in window && !customElements.get("document-capture-review") && window.customElements.define("document-capture-review", D);
-class f {
+"customElements" in window && !customElements.get("document-capture-review") && window.customElements.define("document-capture-review", R);
+class v {
   static memoryLimit = 1024e4;
   static supportedTypes = ["image/jpeg", "image/png"];
   static getHumanSize(e) {
@@ -825,33 +831,30 @@ class f {
   static getData(e) {
     return new Promise((t, i) => {
       const o = new FileReader();
-      o.onload = (a) => {
-        t(a.target.result);
+      o.onload = (r) => {
+        t(r.target.result);
       }, o.onerror = () => {
-        i(
-          new Error(
-            "An error occurred reading the file. Please check the file, and try again"
-          )
-        );
+        i(new Error(s("fileUpload.error.readingFile")));
       }, o.readAsDataURL(e);
     });
   }
   static async retrieve(e) {
     if (e.length > 1)
-      throw new Error("Only one file upload is permitted at a time");
+      throw new Error(s("fileUpload.error.multipleFiles"));
     const t = e[0];
-    if (!f.supportedTypes.includes(t.type))
-      throw new Error(
-        "Unsupported file format. Please ensure that you are providing a JPG or PNG image"
-      );
-    if (t.size > f.memoryLimit)
+    if (!v.supportedTypes.includes(t.type))
+      throw new Error(s("fileUpload.error.unsupportedFormat"));
+    if (t.size > v.memoryLimit)
       throw new Error(
-        `${t.name} is too large. Please ensure that the file is less than ${f.getHumanSize(f.memoryLimit)}.`
+        S("fileUpload.error.fileTooLarge", {
+          filename: t.name,
+          size: v.getHumanSize(v.memoryLimit)
+        })
       );
-    return await f.getData(t);
+    return await v.getData(t);
   }
 }
-function F() {
+function O() {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="173" height="103" viewBox="0 0 173 103" fill="none">
   <path d="M15.3799 21.2759C15.3799 16.8576 18.9616 13.2759 23.3799 13.2759H64.2764C68.6947 13.2759 72.2764 16.8576 72.2764 21.2759V73.5517C72.2764 77.97 68.6947 81.5517 64.2764 81.5517H23.3799C18.9616 81.5517 15.3799 77.97 15.3799 73.5517V21.2759Z" fill="#F6C969"/>
   <g filter="url(#filter0_d_1281_4127)">
@@ -962,7 +965,7 @@ function F() {
   </defs>
 </svg>`;
 }
-function $() {
+function U() {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="182" height="108" viewBox="0 0 182 108" fill="none">
   <path d="M143 68C143 65.7909 144.791 64 147 64H164C166.209 64 168 65.7909 168 68V89C168 91.2091 166.209 93 164 93H147C144.791 93 143 91.2091 143 89V68Z" fill="#F6C969"/>
   <g filter="url(#filter0_d_1281_4284)">
@@ -1000,7 +1003,7 @@ function $() {
   </defs>
 </svg>`;
 }
-function V() {
+function P() {
   return `
   <style>
     h1 {
@@ -1038,20 +1041,20 @@ function V() {
       margin-top: 1rem;
     }
   </style>
-    <div id="document-capture-instructions-screen" class="flow center">
+    <div id="document-capture-instructions-screen" class="flow center" dir="${this.direction}">
         <div class="content-root">
             <div class="content-header">
-        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? "show-navigation" : ""} ${this.hideBack ? "hide-back" : ""}></smileid-navigation>
+        ${this.showNavigation ? `<smileid-navigation theme-color='${this.themeColor}' show-navigation ${this.hideBack ? "hide-back" : ""}></smileid-navigation>` : ""}
         </div>
         <div class="content-body">
         <header>
-        ${this.isFrontOfId ? F() : $()}
-            <h1 class='title-color font-bold'>${this.title}</h1>
+        ${this.isFrontOfId ? O() : U()}
+            <h1 class='title-color font-bold'>${$(this.title)}</h1>
         <p class="description text-sm font-normal">
-            We'll use it to verify your identity.
+            ${s("document.instructions.description")}
           </p>
           <p class="description padding-bottom-2">
-          Please follow the instructions below.
+          ${s("document.instructions.followInstructions")}
           </p>
         </header>
         <div class="instructions-wrapper">
@@ -1131,9 +1134,9 @@ function V() {
                 </defs>
                 </svg>
                 <div class="instruction">
-                <p class="instruction-header font-bold text-base">Good Light</p>
+                <p class="instruction-header font-bold text-base">${s("document.instructions.goodLight.header")}</p>
                 <p class="instruction-body text-xs font-medium">
-                  Make sure the image is taken in a well-lit environment where the ID document is easy to read.
+                  ${s("document.instructions.goodLight.body")}
                 </p>
             </div>
         </div>
@@ -1219,9 +1222,9 @@ function V() {
             </defs>
             </svg>
             <div>
-                <p class="instruction-header font-bold text-base">Clear Image</p>
+                <p class="instruction-header font-bold text-base">${s("document.instructions.clearImage.header")}</p>
                 <p class="instruction-body text-xs font-medium">
-                  Hold your camera steady so the words on the ID are not blurry.
+                  ${s("document.instructions.clearImage.body")}
                 </p>
             </div>
         </div>
@@ -1231,13 +1234,13 @@ function V() {
     <div class='controls'>
     ${this.supportBothCaptureModes || this.documentCaptureModes === "camera" ? `
     <button data-variant='solid full-width' class='button' type='button' id='take-photo'>
-        Take Photo
+        ${s("document.instructions.takePhotoButton")}
     </button>
     ` : ""}
     ${this.supportBothCaptureModes || this.documentCaptureModes === "upload" ? `
     <label id='upload-photo-label' data-variant='${this.supportBothCaptureModes ? "outline" : "solid"}' class='button'>
         <input type='file' hidden onclick='this.value=null;' id='upload-photo' name='document' accept='image/png, image/jpeg' />
-        <span>Upload Photo</span>
+        <span>${s("document.instructions.uploadPhotoButton")}</span>
     </label>
     ` : ""}
 </div>
@@ -1249,18 +1252,18 @@ ${this.hideAttribution ? "" : `
     </div>
   </div>
 </div>
-  ${C(this.themeColor)}
+  ${y(this.themeColor)}
   `;
 }
-class Z extends HTMLElement {
+class G extends HTMLElement {
   constructor() {
-    super(), this.templateString = V.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" });
+    super(), this.templateString = P.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     const e = document.createElement("template");
-    e.innerHTML = this.render(), this.shadowRoot.appendChild(e.content.cloneNode(!0)), this.navigation = this.shadowRoot.querySelector("smileid-navigation"), this.takeDocumentPhotoButton = this.shadowRoot.querySelector("#take-photo"), this.uploadDocumentPhotoButton = this.shadowRoot.querySelector("#upload-photo"), this.navigation.addEventListener("navigation.back", () => {
+    e.innerHTML = this.render(), this.shadowRoot.appendChild(e.content.cloneNode(!0)), this.navigation = this.shadowRoot.querySelector("smileid-navigation"), this.takeDocumentPhotoButton = this.shadowRoot.querySelector("#take-photo"), this.uploadDocumentPhotoButton = this.shadowRoot.querySelector("#upload-photo"), this.navigation?.addEventListener("navigation.back", () => {
       this.handleBackEvents();
-    }), this.navigation.addEventListener("navigation.close", () => {
+    }), this.navigation?.addEventListener("navigation.close", () => {
       this.handleCloseEvents();
     }), this.takeDocumentPhotoButton && this.takeDocumentPhotoButton.addEventListener("click", () => {
       this.dispatchEvent(
@@ -1271,7 +1274,7 @@ class Z extends HTMLElement {
       async (t) => {
         this.shadowRoot.querySelector("#error").innerHTML = "";
         try {
-          const { files: i } = t.target, o = await f.retrieve(i);
+          const { files: i } = t.target, o = await v.retrieve(i);
           this.dispatchEvent(
             new CustomEvent("document-capture-instructions.upload", {
               detail: { image: o, previewImage: o }
@@ -1303,7 +1306,7 @@ class Z extends HTMLElement {
     return e.includes("camera") && e.includes("upload");
   }
   get title() {
-    return this.getAttribute("title") || "Submit Front of ID";
+    return this.getAttribute("title") || s("document.title.front");
   }
   get sideOfId() {
     return (this.getAttribute("side-of-id") || "front").toLowerCase();
@@ -1314,6 +1317,9 @@ class Z extends HTMLElement {
   get isBackOfId() {
     return !this.isFrontOfId;
   }
+  get direction() {
+    return this.getAttribute("dir") || x() || "ltr";
+  }
   handleBackEvents() {
     this.dispatchEvent(
       new CustomEvent("document-capture-instructions.cancelled")
@@ -1325,49 +1331,49 @@ class Z extends HTMLElement {
 }
 "customElements" in window && !customElements.get("document-capture-instructions") && window.customElements.define(
   "document-capture-instructions",
-  Z
+  G
 );
-const R = M.version, u = document.querySelector("smart-camera-web");
-async function p(l) {
+const T = L.version, p = document.querySelector("smart-camera-web");
+async function m(u) {
   try {
-    const e = await c.getMedia({
+    const e = await h.getMedia({
       audio: !1,
-      video: c.environmentOptions
+      video: h.environmentOptions
     }), i = (await navigator.mediaDevices.enumerateDevices()).find(
       (o) => o.kind === "videoinput" && e.getVideoTracks()[0].getSettings().deviceId === o.deviceId
     );
-    u?.dispatchEvent(
+    p?.dispatchEvent(
       new CustomEvent("metadata.camera-name", {
         detail: { cameraName: i?.label }
       })
-    ), l.removeAttribute("data-camera-error"), l.setAttribute("data-camera-ready", !0);
+    ), u.removeAttribute("data-camera-error"), u.setAttribute("data-camera-ready", !0);
   } catch (e) {
-    l.removeAttribute("data-camera-ready"), l.setAttribute(
+    u.removeAttribute("data-camera-ready"), u.setAttribute(
       "data-camera-error",
-      c.handleCameraError(e)
+      h.handleCameraError(e)
     );
   }
 }
-class O extends HTMLElement {
+class j extends HTMLElement {
   constructor() {
-    super(), this.activeScreen = null, this.smartCameraWeb = this.closest("smart-camera-web"), u?.dispatchEvent(new CustomEvent("metadata.initialize"));
+    super(), this.activeScreen = null, this.smartCameraWeb = this.closest("smart-camera-web"), p?.dispatchEvent(new CustomEvent("metadata.initialize"));
   }
   connectedCallback() {
     this.innerHTML = `
-      ${C(this.themeColor)}
+      ${y(this.themeColor)}
       <div style="height: 100%;">
       <document-capture-instructions theme-color='${this.themeColor}' id='document-capture-instructions-front' ${this.title}
       ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? "hidden" : ""}
       ${this.hideAttribution}
       ></document-capture-instructions>
       <document-capture id='document-capture-front' side-of-id='Front'
-      ${this.title} ${this.showNavigation} ${this.hideInstructions ? "" : "hidden"} ${this.hideAttribution}
+      ${this.title || `title='${s("document.title.front")}'`} ${this.showNavigation} ${this.hideInstructions ? "" : "hidden"} ${this.hideAttribution}
       ${this.documentCaptureModes} ${this.documentType} theme-color='${this.themeColor}'
       ></document-capture>
-      <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='Submit Back of ID'
+      <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='${s("document.title.back")}'
        ${this.documentCaptureModes} ${this.showNavigation} theme-color='${this.themeColor}' ${this.hideAttribution} hidden
        ></document-capture-instructions>
-      <document-capture id='document-capture-back' side-of-id='Back' ${this.title} ${this.showNavigation}
+      <document-capture id='document-capture-back' side-of-id='Back' ${this.title || `title='${s("document.title.back")}'`}  ${this.showNavigation}
       ${this.documentCaptureModes} theme-color='${this.themeColor}' ${this.hideAttribution}
       hidden 
       ></document-capture>
@@ -1377,7 +1383,7 @@ class O extends HTMLElement {
     `, this._data = {
       images: [],
       meta: {
-        libraryVersion: R
+        libraryVersion: T
       }
     }, this.documentInstruction = this.querySelector(
       "document-capture-instructions"
@@ -1385,10 +1391,10 @@ class O extends HTMLElement {
       "#document-capture-instructions-back"
     ), this.idCapture = this.querySelector("#document-capture-front"), this.idReview = this.querySelector("#front-of-document-capture-review"), this.idCaptureBack = this.querySelector("#document-capture-back"), this.backOfIdReview = this.querySelector(
       "#back-of-document-capture-review"
-    ), this.thankYouScreen = this.querySelector("thank-you"), this.hideInstructions ? (p(this.idCapture), this.setActiveScreen(this.idCapture)) : this.setActiveScreen(this.documentInstruction), this.setUpEventListeners();
+    ), this.thankYouScreen = this.querySelector("thank-you"), this.hideInstructions ? (m(this.idCapture), this.setActiveScreen(this.idCapture)) : this.setActiveScreen(this.documentInstruction), this.setUpEventListeners();
   }
   disconnectedCallback() {
-    c.stopMedia(), u?.dispatchEvent(new CustomEvent("metadata.cleanup")), this.activeScreen && this.activeScreen.removeAttribute("hidden"), this.activeScreen = null, this.innerHTML = "";
+    h.stopMedia(), p?.dispatchEvent(new CustomEvent("metadata.cleanup")), this.activeScreen && this.activeScreen.removeAttribute("hidden"), this.activeScreen = null, this.innerHTML = "";
   }
   setUpEventListeners() {
     this.documentInstruction.addEventListener(
@@ -1399,93 +1405,93 @@ class O extends HTMLElement {
     ), this.documentInstruction.addEventListener(
       "document-capture-instructions.capture",
       async () => {
-        u?.dispatchEvent(
+        p?.dispatchEvent(
           new CustomEvent("metadata.document-front-capture-start")
-        ), u?.dispatchEvent(
+        ), p?.dispatchEvent(
           new CustomEvent("metadata.document-front-origin", {
             detail: { imageOrigin: "camera_manual_capture" }
           })
-        ), this.setActiveScreen(this.idCapture), await p(this.idCapture);
+        ), this.setActiveScreen(this.idCapture), await m(this.idCapture);
       }
     ), this.documentInstruction.addEventListener(
       "document-capture-instructions.upload",
       async (t) => {
-        u?.dispatchEvent(
+        p?.dispatchEvent(
           new CustomEvent("metadata.document-front-origin", {
             detail: { imageOrigin: "gallery" }
           })
         ), this.idReview.setAttribute("data-image", t.detail.previewImage), this._data.images.push({
           image: t.detail.image.split(",")[1],
-          image_type_id: w.ID_CARD_IMAGE_BASE64
+          image_type_id: b.ID_CARD_IMAGE_BASE64
         }), this.setActiveScreen(this.idReview);
       }
     ), this.idCapture.addEventListener("document-capture.publish", (t) => {
-      u?.dispatchEvent(
+      p?.dispatchEvent(
         new CustomEvent("metadata.document-front-capture-end")
       ), this.idReview.setAttribute("data-image", t.detail.previewImage), this._data.images.push({
         image: t.detail.image.split(",")[1],
-        image_type_id: w.ID_CARD_IMAGE_BASE64
-      }), c.stopMedia(), this.setActiveScreen(this.idReview);
+        image_type_id: b.ID_CARD_IMAGE_BASE64
+      }), h.stopMedia(), this.setActiveScreen(this.idReview);
     }), this.idCapture.addEventListener("document-capture.cancelled", () => {
       this.hideInstructions ? this.handleBackEvents() : this.setActiveScreen(this.documentInstruction);
     }), this.idReview.addEventListener(
       "document-capture-review.rejected",
       async () => {
-        u?.dispatchEvent(
+        p?.dispatchEvent(
           new CustomEvent("metadata.document-front-capture-retry")
-        ), this.idReview.removeAttribute("data-image"), this._data.images.pop(), this.hideInstructions ? (this.setActiveScreen(this.idCapture), await p(this.idCapture)) : this.setActiveScreen(this.documentInstruction);
+        ), this.idReview.removeAttribute("data-image"), this._data.images.pop(), this.hideInstructions ? (this.setActiveScreen(this.idCapture), await m(this.idCapture)) : this.setActiveScreen(this.documentInstruction);
       }
     ), this.idReview.addEventListener(
       "document-capture-review.accepted",
       async () => {
-        this.hideBackOfId ? this._publishSelectedImages() : this.hideInstructions ? (this.setActiveScreen(this.idCaptureBack), await p(this.idCaptureBack)) : this.setActiveScreen(this.documentInstructionBack);
+        this.hideBackOfId ? this._publishSelectedImages() : this.hideInstructions ? (this.setActiveScreen(this.idCaptureBack), await m(this.idCaptureBack)) : this.setActiveScreen(this.documentInstructionBack);
       }
     ), this.documentInstructionBack.addEventListener(
       "document-capture-instructions.capture",
       async () => {
-        u?.dispatchEvent(
+        p?.dispatchEvent(
           new CustomEvent("metadata.document-back-capture-start")
-        ), u?.dispatchEvent(
+        ), p?.dispatchEvent(
           new CustomEvent("metadata.document-back-origin", {
             detail: { imageOrigin: "camera_manual_capture" }
           })
-        ), this.setActiveScreen(this.idCaptureBack), await p(this.idCaptureBack);
+        ), this.setActiveScreen(this.idCaptureBack), await m(this.idCaptureBack);
       }
     ), this.documentInstructionBack.addEventListener(
       "document-capture-instructions.cancelled",
       async () => {
-        this.idReview.removeAttribute("data-image"), this._data.images.pop(), this.hideInstructions ? (this.setActiveScreen(this.idCapture), await p(this.idCapture)) : this.setActiveScreen(this.documentInstruction);
+        this.idReview.removeAttribute("data-image"), this._data.images.pop(), this.hideInstructions ? (this.setActiveScreen(this.idCapture), await m(this.idCapture)) : this.setActiveScreen(this.documentInstruction);
       }
     ), this.documentInstructionBack.addEventListener(
       "document-capture-instructions.upload",
       async (t) => {
-        u?.dispatchEvent(
+        p?.dispatchEvent(
           new CustomEvent("metadata.document-back-origin", {
             detail: { imageOrigin: "gallery" }
           })
         ), this.backOfIdReview.setAttribute("data-image", t.detail.image), this._data.images.push({
           image: t.detail.image.split(",")[1],
-          image_type_id: w.ID_CARD_BACK_IMAGE_BASE64
+          image_type_id: b.ID_CARD_BACK_IMAGE_BASE64
         }), this.setActiveScreen(this.backOfIdReview);
       }
     ), this.idCaptureBack.addEventListener("document-capture.publish", (t) => {
-      u?.dispatchEvent(
+      p?.dispatchEvent(
         new CustomEvent("metadata.document-back-capture-end")
       ), this.backOfIdReview.setAttribute("data-image", t.detail.previewImage), this._data.images.push({
         image: t.detail.image.split(",")[1],
-        image_type_id: w.ID_CARD_BACK_IMAGE_BASE64
-      }), this.setActiveScreen(this.backOfIdReview), c.stopMedia();
+        image_type_id: b.ID_CARD_BACK_IMAGE_BASE64
+      }), this.setActiveScreen(this.backOfIdReview), h.stopMedia();
     }), this.idCaptureBack.addEventListener(
       "document-capture.cancelled",
       async () => {
-        this.hideInstructions ? (this.setActiveScreen(this.idCapture), await p(this.idCapture)) : this.setActiveScreen(this.documentInstructionBack);
+        this.hideInstructions ? (this.setActiveScreen(this.idCapture), await m(this.idCapture)) : this.setActiveScreen(this.documentInstructionBack);
       }
     ), this.backOfIdReview.addEventListener(
       "document-capture-review.rejected",
       async () => {
-        u?.dispatchEvent(
+        p?.dispatchEvent(
           new CustomEvent("metadata.document-back-capture-retry")
-        ), this.backOfIdReview.removeAttribute("data-image"), this._data.images.pop(), this.hideInstructions ? (this.setActiveScreen(this.idCaptureBack), await p(this.idCaptureBack)) : this.setActiveScreen(this.documentInstructionBack);
+        ), this.backOfIdReview.removeAttribute("data-image"), this._data.images.pop(), this.hideInstructions ? (this.setActiveScreen(this.idCaptureBack), await m(this.idCaptureBack)) : this.setActiveScreen(this.documentInstructionBack);
       }
     ), this.backOfIdReview.addEventListener(
       "document-capture-review.accepted",
@@ -1567,8 +1573,8 @@ class O extends HTMLElement {
     }
   }
 }
-"customElements" in window && !customElements.get("document-capture-screens") && customElements.define("document-capture-screens", O);
+"customElements" in window && !customElements.get("document-capture-screens") && customElements.define("document-capture-screens", j);
 export {
-  O as D
+  j as D
 };
-//# sourceMappingURL=DocumentCaptureScreens-C5BhNB-0.js.map
+//# sourceMappingURL=DocumentCaptureScreens-BbtA-WkX.js.map