xactsize-webcomponents 1.0.19 → 1.0.22

package/dist/body-measurer.es.js

@@ -16,16 +16,16 @@ const wA = (l, A, t) => {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const B = globalThis, uA = B.ShadowRoot && (B.ShadyCSS === void 0 || B.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, dA = Symbol(), TA = /* @__PURE__ */ new WeakMap();
+const B = globalThis, dA = B.ShadowRoot && (B.ShadyCSS === void 0 || B.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, uA = Symbol(), TA = /* @__PURE__ */ new WeakMap();
 let ZA = class {
   constructor(A, t, r) {
-    if (this._$cssResult$ = !0, r !== dA) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, r !== uA) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = A, this.t = t;
   }
   get styleSheet() {
     let A = this.o;
     const t = this.t;
-    if (uA && A === void 0) {
+    if (dA && A === void 0) {
       const r = t !== void 0 && t.length === 1;
       r && (A = TA.get(t)), A === void 0 && ((this.o = A = new CSSStyleSheet()).replaceSync(this.cssText), r && TA.set(t, A));
     }
@@ -35,30 +35,30 @@ let ZA = class {
     return this.cssText;
   }
 };
-const YA = (l) => new ZA(typeof l == "string" ? l : l + "", void 0, dA), N = (l, ...A) => {
+const CA = (l) => new ZA(typeof l == "string" ? l : l + "", void 0, uA), N = (l, ...A) => {
   const t = l.length === 1 ? l[0] : A.reduce((r, e, p) => r + ((V) => {
     if (V._$cssResult$ === !0) return V.cssText;
     if (typeof V == "number") return V;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + V + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(e) + l[p + 1], l[0]);
-  return new ZA(t, l, dA);
-}, CA = (l, A) => {
-  if (uA) l.adoptedStyleSheets = A.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  return new ZA(t, l, uA);
+}, YA = (l, A) => {
+  if (dA) l.adoptedStyleSheets = A.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of A) {
     const r = document.createElement("style"), e = B.litNonce;
     e !== void 0 && r.setAttribute("nonce", e), r.textContent = t.cssText, l.appendChild(r);
   }
-}, XA = uA ? (l) => l : (l) => l instanceof CSSStyleSheet ? ((A) => {
+}, XA = dA ? (l) => l : (l) => l instanceof CSSStyleSheet ? ((A) => {
   let t = "";
   for (const r of A.cssRules) t += r.cssText;
-  return YA(t);
+  return CA(t);
 })(l) : l;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: DA, defineProperty: QA, getOwnPropertyDescriptor: gA, getOwnPropertyNames: BA, getOwnPropertySymbols: _A, getPrototypeOf: $A } = Object, s = globalThis, xA = s.trustedTypes, At = xA ? xA.emptyScript : "", eA = s.reactiveElementPolyfillSupport, z = (l, A) => l, _ = { toAttribute(l, A) {
+const { is: DA, defineProperty: QA, getOwnPropertyDescriptor: gA, getOwnPropertyNames: BA, getOwnPropertySymbols: _A, getPrototypeOf: $A } = Object, U = globalThis, xA = U.trustedTypes, At = xA ? xA.emptyScript : "", eA = U.reactiveElementPolyfillSupport, z = (l, A) => l, _ = { toAttribute(l, A) {
   switch (A) {
     case Boolean:
       l = l ? At : null;
@@ -86,8 +86,8 @@ const { is: DA, defineProperty: QA, getOwnPropertyDescriptor: gA, getOwnProperty
       }
   }
   return t;
-} }, jA = (l, A) => !DA(l, A), KA = { attribute: !0, type: String, converter: _, reflect: !1, useDefault: !1, hasChanged: jA };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), s.litPropertyMetadata ?? (s.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+} }, jA = (l, A) => !DA(l, A), iA = { attribute: !0, type: String, converter: _, reflect: !1, useDefault: !1, hasChanged: jA };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), U.litPropertyMetadata ?? (U.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let m = class extends HTMLElement {
   static addInitializer(A) {
     this._$Ei(), (this.l ?? (this.l = [])).push(A);
@@ -95,7 +95,7 @@ let m = class extends HTMLElement {
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(A, t = KA) {
+  static createProperty(A, t = iA) {
     if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(A) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(A, t), !t.noAccessor) {
       const r = Symbol(), e = this.getPropertyDescriptor(A, r, t);
       e !== void 0 && QA(this.prototype, A, e);
@@ -113,7 +113,7 @@ let m = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(A) {
-    return this.elementProperties.get(A) ?? KA;
+    return this.elementProperties.get(A) ?? iA;
   }
   static _$Ei() {
     if (this.hasOwnProperty(z("elementProperties"))) return;
@@ -172,7 +172,7 @@ let m = class extends HTMLElement {
   }
   createRenderRoot() {
     const A = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return CA(A, this.constructor.elementStyles), A;
+    return YA(A, this.constructor.elementStyles), A;
   }
   connectedCallback() {
     var A;
@@ -205,8 +205,8 @@ let m = class extends HTMLElement {
     var p, V;
     const r = this.constructor, e = r._$Eh.get(A);
     if (e !== void 0 && this._$Em !== e) {
-      const S = r.getPropertyOptions(e), n = typeof S.converter == "function" ? { fromAttribute: S.converter } : ((p = S.converter) == null ? void 0 : p.fromAttribute) !== void 0 ? S.converter : _;
-      this._$Em = e, this[e] = n.fromAttribute(t, S.type) ?? ((V = this._$Ej) == null ? void 0 : V.get(e)) ?? null, this._$Em = null;
+      const S = r.getPropertyOptions(e), q = typeof S.converter == "function" ? { fromAttribute: S.converter } : ((p = S.converter) == null ? void 0 : p.fromAttribute) !== void 0 ? S.converter : _;
+      this._$Em = e, this[e] = q.fromAttribute(t, S.type) ?? ((V = this._$Ej) == null ? void 0 : V.get(e)) ?? null, this._$Em = null;
     }
   }
   requestUpdate(A, t, r) {
@@ -244,8 +244,8 @@ let m = class extends HTMLElement {
       }
       const e = this.constructor.elementProperties;
       if (e.size > 0) for (const [p, V] of e) {
-        const { wrapped: S } = V, n = this[p];
-        S !== !0 || this._$AL.has(p) || n === void 0 || this.C(p, void 0, V, n);
+        const { wrapped: S } = V, q = this[p];
+        S !== !0 || this._$AL.has(p) || q === void 0 || this.C(p, void 0, V, q);
       }
     }
     let A = !1;
@@ -289,28 +289,28 @@ let m = class extends HTMLElement {
   firstUpdated(A) {
   }
 };
-m.elementStyles = [], m.shadowRootOptions = { mode: "open" }, m[z("elementProperties")] = /* @__PURE__ */ new Map(), m[z("finalized")] = /* @__PURE__ */ new Map(), eA == null || eA({ ReactiveElement: m }), (s.reactiveElementVersions ?? (s.reactiveElementVersions = [])).push("2.1.0");
+m.elementStyles = [], m.shadowRootOptions = { mode: "open" }, m[z("elementProperties")] = /* @__PURE__ */ new Map(), m[z("finalized")] = /* @__PURE__ */ new Map(), eA == null || eA({ ReactiveElement: m }), (U.reactiveElementVersions ?? (U.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const G = globalThis, $ = G.trustedTypes, UA = $ ? $.createPolicy("lit-html", { createHTML: (l) => l }) : void 0, NA = "$lit$", W = `lit$${Math.random().toFixed(9).slice(2)}$`, RA = "?" + W, tt = `<${RA}>`, L = document, F = () => L.createComment(""), M = (l) => l === null || typeof l != "object" && typeof l != "function", cA = Array.isArray, lt = (l) => cA(l) || typeof (l == null ? void 0 : l[Symbol.iterator]) == "function", rA = `[ 	
-\f\r]`, H = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, WA = /-->/g, sA = />/g, i = RegExp(`>|${rA}(?:([^\\s"'>=/]+)(${rA}*=${rA}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), iA = /'/g, vA = /"/g, HA = /^(?:script|style|textarea|title)$/i, et = (l) => (A, ...t) => ({ _$litType$: l, strings: A, values: t }), T = et(1), f = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), OA = /* @__PURE__ */ new WeakMap(), O = L.createTreeWalker(L, 129);
+const G = globalThis, $ = G.trustedTypes, sA = $ ? $.createPolicy("lit-html", { createHTML: (l) => l }) : void 0, NA = "$lit$", K = `lit$${Math.random().toFixed(9).slice(2)}$`, RA = "?" + K, tt = `<${RA}>`, L = document, F = () => L.createComment(""), M = (l) => l === null || typeof l != "object" && typeof l != "function", cA = Array.isArray, lt = (l) => cA(l) || typeof (l == null ? void 0 : l[Symbol.iterator]) == "function", rA = `[ 	
+\f\r]`, H = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, KA = /-->/g, UA = />/g, W = RegExp(`>|${rA}(?:([^\\s"'>=/]+)(${rA}*=${rA}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), WA = /'/g, vA = /"/g, HA = /^(?:script|style|textarea|title)$/i, et = (l) => (A, ...t) => ({ _$litType$: l, strings: A, values: t }), T = et(1), f = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), OA = /* @__PURE__ */ new WeakMap(), O = L.createTreeWalker(L, 129);
 function zA(l, A) {
   if (!cA(l) || !l.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return UA !== void 0 ? UA.createHTML(A) : A;
+  return sA !== void 0 ? sA.createHTML(A) : A;
 }
 const rt = (l, A) => {
   const t = l.length - 1, r = [];
   let e, p = A === 2 ? "<svg>" : A === 3 ? "<math>" : "", V = H;
   for (let S = 0; S < t; S++) {
-    const n = l[S];
-    let d, k, y = -1, x = 0;
-    for (; x < n.length && (V.lastIndex = x, k = V.exec(n), k !== null); ) x = V.lastIndex, V === H ? k[1] === "!--" ? V = WA : k[1] !== void 0 ? V = sA : k[2] !== void 0 ? (HA.test(k[2]) && (e = RegExp("</" + k[2], "g")), V = i) : k[3] !== void 0 && (V = i) : V === i ? k[0] === ">" ? (V = e ?? H, y = -1) : k[1] === void 0 ? y = -2 : (y = V.lastIndex - k[2].length, d = k[1], V = k[3] === void 0 ? i : k[3] === '"' ? vA : iA) : V === vA || V === iA ? V = i : V === WA || V === sA ? V = H : (V = i, e = void 0);
-    const U = V === i && l[S + 1].startsWith("/>") ? " " : "";
-    p += V === H ? n + tt : y >= 0 ? (r.push(d), n.slice(0, y) + NA + n.slice(y) + W + U) : n + W + (y === -2 ? S : U);
+    const q = l[S];
+    let u, k, y = -1, x = 0;
+    for (; x < q.length && (V.lastIndex = x, k = V.exec(q), k !== null); ) x = V.lastIndex, V === H ? k[1] === "!--" ? V = KA : k[1] !== void 0 ? V = UA : k[2] !== void 0 ? (HA.test(k[2]) && (e = RegExp("</" + k[2], "g")), V = W) : k[3] !== void 0 && (V = W) : V === W ? k[0] === ">" ? (V = e ?? H, y = -1) : k[1] === void 0 ? y = -2 : (y = V.lastIndex - k[2].length, u = k[1], V = k[3] === void 0 ? W : k[3] === '"' ? vA : WA) : V === vA || V === WA ? V = W : V === KA || V === UA ? V = H : (V = W, e = void 0);
+    const s = V === W && l[S + 1].startsWith("/>") ? " " : "";
+    p += V === H ? q + tt : y >= 0 ? (r.push(u), q.slice(0, y) + NA + q.slice(y) + K + s) : q + K + (y === -2 ? S : s);
   }
   return [zA(l, p + (l[t] || "<?>") + (A === 2 ? "</svg>" : A === 3 ? "</math>" : "")), r];
 };
@@ -319,29 +319,29 @@ class h {
     let e;
     this.parts = [];
     let p = 0, V = 0;
-    const S = A.length - 1, n = this.parts, [d, k] = rt(A, t);
-    if (this.el = h.createElement(d, r), O.currentNode = this.el.content, t === 2 || t === 3) {
+    const S = A.length - 1, q = this.parts, [u, k] = rt(A, t);
+    if (this.el = h.createElement(u, r), O.currentNode = this.el.content, t === 2 || t === 3) {
       const y = this.el.content.firstChild;
       y.replaceWith(...y.childNodes);
     }
-    for (; (e = O.nextNode()) !== null && n.length < S; ) {
+    for (; (e = O.nextNode()) !== null && q.length < S; ) {
       if (e.nodeType === 1) {
         if (e.hasAttributes()) for (const y of e.getAttributeNames()) if (y.endsWith(NA)) {
-          const x = k[V++], U = e.getAttribute(y).split(W), Q = /([.?@])?(.*)/.exec(x);
-          n.push({ type: 1, index: p, name: Q[2], strings: U, ctor: Q[1] === "." ? Vt : Q[1] === "?" ? qt : Q[1] === "@" ? nt : lA }), e.removeAttribute(y);
-        } else y.startsWith(W) && (n.push({ type: 6, index: p }), e.removeAttribute(y));
+          const x = k[V++], s = e.getAttribute(y).split(K), Q = /([.?@])?(.*)/.exec(x);
+          q.push({ type: 1, index: p, name: Q[2], strings: s, ctor: Q[1] === "." ? Vt : Q[1] === "?" ? nt : Q[1] === "@" ? qt : lA }), e.removeAttribute(y);
+        } else y.startsWith(K) && (q.push({ type: 6, index: p }), e.removeAttribute(y));
         if (HA.test(e.tagName)) {
-          const y = e.textContent.split(W), x = y.length - 1;
+          const y = e.textContent.split(K), x = y.length - 1;
           if (x > 0) {
             e.textContent = $ ? $.emptyScript : "";
-            for (let U = 0; U < x; U++) e.append(y[U], F()), O.nextNode(), n.push({ type: 2, index: ++p });
+            for (let s = 0; s < x; s++) e.append(y[s], F()), O.nextNode(), q.push({ type: 2, index: ++p });
             e.append(y[x], F());
           }
         }
-      } else if (e.nodeType === 8) if (e.data === RA) n.push({ type: 2, index: p });
+      } else if (e.nodeType === 8) if (e.data === RA) q.push({ type: 2, index: p });
       else {
         let y = -1;
-        for (; (y = e.data.indexOf(W, y + 1)) !== -1; ) n.push({ type: 7, index: p }), y += W.length - 1;
+        for (; (y = e.data.indexOf(K, y + 1)) !== -1; ) q.push({ type: 7, index: p }), y += K.length - 1;
       }
       p++;
     }
@@ -371,13 +371,13 @@ class pt {
   u(A) {
     const { el: { content: t }, parts: r } = this._$AD, e = ((A == null ? void 0 : A.creationScope) ?? L).importNode(t, !0);
     O.currentNode = e;
-    let p = O.nextNode(), V = 0, S = 0, n = r[0];
-    for (; n !== void 0; ) {
-      if (V === n.index) {
-        let d;
-        n.type === 2 ? d = new w(p, p.nextSibling, this, A) : n.type === 1 ? d = new n.ctor(p, n.name, n.strings, this, A) : n.type === 6 && (d = new St(p, this, A)), this._$AV.push(d), n = r[++S];
+    let p = O.nextNode(), V = 0, S = 0, q = r[0];
+    for (; q !== void 0; ) {
+      if (V === q.index) {
+        let u;
+        q.type === 2 ? u = new w(p, p.nextSibling, this, A) : q.type === 1 ? u = new q.ctor(p, q.name, q.strings, this, A) : q.type === 6 && (u = new St(p, this, A)), this._$AV.push(u), q = r[++S];
       }
-      V !== (n == null ? void 0 : n.index) && (p = O.nextNode(), V++);
+      V !== (q == null ? void 0 : q.index) && (p = O.nextNode(), V++);
     }
     return O.currentNode = L, e;
   }
@@ -465,8 +465,8 @@ class lA {
     if (p === void 0) A = Z(this, A, t, 0), V = !M(A) || A !== this._$AH && A !== f, V && (this._$AH = A);
     else {
       const S = A;
-      let n, d;
-      for (A = p[0], n = 0; n < p.length - 1; n++) d = Z(this, S[r + n], t, n), d === f && (d = this._$AH[n]), V || (V = !M(d) || d !== this._$AH[n]), d === c ? A = c : A !== c && (A += (d ?? "") + p[n + 1]), this._$AH[n] = d;
+      let q, u;
+      for (A = p[0], q = 0; q < p.length - 1; q++) u = Z(this, S[r + q], t, q), u === f && (u = this._$AH[q]), V || (V = !M(u) || u !== this._$AH[q]), u === c ? A = c : A !== c && (A += (u ?? "") + p[q + 1]), this._$AH[q] = u;
     }
     V && !e && this.j(A);
   }
@@ -482,7 +482,7 @@ class Vt extends lA {
     this.element[this.name] = A === c ? void 0 : A;
   }
 }
-class qt extends lA {
+class nt extends lA {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -490,7 +490,7 @@ class qt extends lA {
     this.element.toggleAttribute(this.name, !!A && A !== c);
   }
 }
-class nt extends lA {
+class qt extends lA {
   constructor(A, t, r, e, p) {
     super(A, t, r, e, p), this.type = 5;
   }
@@ -577,14 +577,14 @@ const R = (l) => (A, t) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const yt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged: jA }, ut = (l = yt, A, t) => {
+const yt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged: jA }, dt = (l = yt, A, t) => {
   const { kind: r, metadata: e } = t;
   let p = globalThis.litPropertyMetadata.get(e);
   if (p === void 0 && globalThis.litPropertyMetadata.set(e, p = /* @__PURE__ */ new Map()), r === "setter" && ((l = Object.create(l)).wrapped = !0), p.set(t.name, l), r === "accessor") {
     const { name: V } = t;
     return { set(S) {
-      const n = A.get.call(this);
-      A.set.call(this, S), this.requestUpdate(V, n, l);
+      const q = A.get.call(this);
+      A.set.call(this, S), this.requestUpdate(V, q, l);
     }, init(S) {
       return S !== void 0 && this.C(V, void 0, l, S), S;
     } };
@@ -592,14 +592,14 @@ const yt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged:
   if (r === "setter") {
     const { name: V } = t;
     return function(S) {
-      const n = this[V];
-      A.call(this, S), this.requestUpdate(V, n, l);
+      const q = this[V];
+      A.call(this, S), this.requestUpdate(V, q, l);
     };
   }
   throw Error("Unsupported decorator location: " + r);
 };
 function j(l) {
-  return (A, t) => typeof t == "object" ? ut(l, A, t) : ((r, e, p) => {
+  return (A, t) => typeof t == "object" ? dt(l, A, t) : ((r, e, p) => {
     const V = e.hasOwnProperty(p);
     return e.constructor.createProperty(p, r), V ? Object.getOwnPropertyDescriptor(e, p) : void 0;
   })(l, A, t);
@@ -623,7 +623,7 @@ const SA = "lit-localize-status";
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const dt = (l) => typeof l != "string" && "strTag" in l, GA = (l, A, t) => {
+const ut = (l) => typeof l != "string" && "strTag" in l, GA = (l, A, t) => {
   let r = l[0];
   for (let e = 1; e < l.length; e++)
     r += A[t ? t[e - 1] : e - 1], r += l[e];
@@ -634,12 +634,12 @@ const dt = (l) => typeof l != "string" && "strTag" in l, GA = (l, A, t) => {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const FA = (l) => dt(l) ? GA(l.strings, l.values) : l;
-let q = FA, bA = !1;
+const FA = (l) => ut(l) ? GA(l.strings, l.values) : l;
+let n = FA, bA = !1;
 function jt(l) {
   if (bA)
     throw new Error("lit-localize can only be configured once");
-  q = l, bA = !0;
+  n = l, bA = !0;
 }
 /**
  * @license
@@ -665,7 +665,7 @@ const kt = (l) => l.addController(new ct(l)), Jt = kt;
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Y = () => (l, A) => (l.addInitializer(Jt), l);
+const C = () => (l, A) => (l.addInitializer(Jt), l);
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -689,23 +689,23 @@ class MA {
  * Copyright 2014 Travis Webb
  * SPDX-License-Identifier: MIT
  */
-const K = [];
+const i = [];
 for (let l = 0; l < 256; l++)
-  K[l] = (l >> 4 & 15).toString(16) + (l & 15).toString(16);
+  i[l] = (l >> 4 & 15).toString(16) + (l & 15).toString(16);
 function Tt(l) {
-  let A = 0, t = 8997, r = 0, e = 33826, p = 0, V = 40164, S = 0, n = 52210;
-  for (let d = 0; d < l.length; d++)
-    t ^= l.charCodeAt(d), A = t * 435, r = e * 435, p = V * 435, S = n * 435, p += t << 8, S += e << 8, r += A >>> 16, t = A & 65535, p += r >>> 16, e = r & 65535, n = S + (p >>> 16) & 65535, V = p & 65535;
-  return K[n >> 8] + K[n & 255] + K[V >> 8] + K[V & 255] + K[e >> 8] + K[e & 255] + K[t >> 8] + K[t & 255];
+  let A = 0, t = 8997, r = 0, e = 33826, p = 0, V = 40164, S = 0, q = 52210;
+  for (let u = 0; u < l.length; u++)
+    t ^= l.charCodeAt(u), A = t * 435, r = e * 435, p = V * 435, S = q * 435, p += t << 8, S += e << 8, r += A >>> 16, t = A & 65535, p += r >>> 16, e = r & 65535, q = S + (p >>> 16) & 65535, V = p & 65535;
+  return i[q >> 8] + i[q & 255] + i[V >> 8] + i[V & 255] + i[e >> 8] + i[e & 255] + i[t >> 8] + i[t & 255];
 }
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Xt = "", xt = "h", Kt = "s";
-function Ut(l, A) {
-  return (A ? xt : Kt) + Tt(typeof l == "string" ? l : l.join(Xt));
+const Xt = "", xt = "h", it = "s";
+function st(l, A) {
+  return (A ? xt : it) + Tt(typeof l == "string" ? l : l.join(Xt));
 }
 /**
  * @license
@@ -713,9 +713,9 @@ function Ut(l, A) {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const LA = /* @__PURE__ */ new WeakMap(), fA = /* @__PURE__ */ new Map();
-function Wt(l, A, t) {
+function Kt(l, A, t) {
   if (l) {
-    const r = (t == null ? void 0 : t.id) ?? st(A), e = l[r];
+    const r = (t == null ? void 0 : t.id) ?? Ut(A), e = l[r];
     if (e) {
       if (typeof e == "string")
         return e;
@@ -738,24 +738,24 @@ function Wt(l, A, t) {
   }
   return FA(A);
 }
-function st(l) {
+function Ut(l) {
   const A = typeof l == "string" ? l : l.strings;
   let t = fA.get(A);
-  return t === void 0 && (t = Ut(A, typeof l != "string" && !("strTag" in l)), fA.set(A, t)), t;
+  return t === void 0 && (t = st(A, typeof l != "string" && !("strTag" in l)), fA.set(A, t)), t;
 }
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function qA(l) {
+function nA(l) {
   window.dispatchEvent(new CustomEvent(SA, { detail: l }));
 }
-let AA = "", nA, hA, tA, aA, EA, v = new MA();
+let AA = "", qA, hA, tA, aA, EA, v = new MA();
 v.resolve();
 let g = 0;
-const it = (l) => (jt((A, t) => Wt(EA, A, t)), AA = hA = l.sourceLocale, tA = new Set(l.targetLocales), tA.add(l.sourceLocale), aA = l.loadLocale, { getLocale: vt, setLocale: Ot }), vt = () => AA, Ot = (l) => {
-  if (l === (nA ?? AA))
+const Wt = (l) => (jt((A, t) => Kt(EA, A, t)), AA = hA = l.sourceLocale, tA = new Set(l.targetLocales), tA.add(l.sourceLocale), aA = l.loadLocale, { getLocale: vt, setLocale: Ot }), vt = () => AA, Ot = (l) => {
+  if (l === (qA ?? AA))
     return v.promise;
   if (!tA || !aA)
     throw new Error("Internal error");
@@ -763,15 +763,15 @@ const it = (l) => (jt((A, t) => Wt(EA, A, t)), AA = hA = l.sourceLocale, tA = ne
     throw new Error("Invalid locale code");
   g++;
   const A = g;
-  return nA = l, v.settled && (v = new MA()), qA({ status: "loading", loadingLocale: l }), (l === hA ? (
+  return qA = l, v.settled && (v = new MA()), nA({ status: "loading", loadingLocale: l }), (l === hA ? (
     // We could switch to the source locale synchronously, but we prefer to
     // queue it on a microtask so that switching locales is consistently
     // asynchronous.
     Promise.resolve({ templates: void 0 })
   ) : aA(l)).then((r) => {
-    g === A && (AA = l, nA = void 0, EA = r.templates, qA({ status: "ready", readyLocale: l }), v.resolve());
+    g === A && (AA = l, qA = void 0, EA = r.templates, nA({ status: "ready", readyLocale: l }), v.resolve());
   }, (r) => {
-    g === A && (qA({
+    g === A && (nA({
       status: "error",
       errorLocale: l,
       errorMessage: r.toString()
@@ -831,7 +831,7 @@ const Pt = ft(class extends ot {
     return f;
   }
 });
-var mt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, C = (l, A, t, r) => {
+var mt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, Y = (l, A, t, r) => {
   for (var e = r > 1 ? void 0 : r ? Zt(A, t) : A, p = l.length - 1, V; p >= 0; p--)
     (V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
   return r && e && mt(A, t, e), e;
@@ -927,19 +927,19 @@ o.styles = N`
       box-shadow: none;
     }
   `;
-C([
+Y([
   j({ type: String })
 ], o.prototype, "type", 2);
-C([
+Y([
   j({ type: String })
 ], o.prototype, "label", 2);
-C([
+Y([
   j({ type: Boolean })
 ], o.prototype, "disabled", 2);
-C([
+Y([
   j({ type: String })
 ], o.prototype, "variant", 2);
-o = C([
+o = Y([
   R("xact-button")
 ], o);
 var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, kA = (l, A, t, r) => {
@@ -953,22 +953,110 @@ let E = class extends X {
   }
   render() {
     return T`
-        <div class="step-1">         
-        <div class="step-1-container-right">
-          <p class="step-1-header">
-            ${q("Forget the tape.. Find the ideal size with your device")}
-          </p>
-          <p class="step-1-description">
-            ${q("As fast as facial recognition. And don't worry, we don't store or share your image.")}
-          </p>
-          <form>
+        <div class="component-content">
+           <div class="header-section">
+        <h2 class="header-text">${n("Before you begin")}</h2>
+        <p class="description-text">
+          ${n("Maintain an upright posture with your arms away from your body.")}
+        </p>
+      </div>
+
+        <div class="main-section">         
+         <div class="tips-section">
+            <h3>${n("Tips")}</h3>
+            <div class="tip-item">
+              <span class="tip-title">${n("Good Lighting")}</span>
+              <p class="tip-text">${n("Choose a well-lit area where you can see your image clearly.")}</p>
+            </div>
+            <div class="tip-item">
+              <span class="tip-title">${n("Clean Background")}</span>
+              <p class="tip-text">${n("Position yourself against a plain background.")}</p>
+            </div>
+            <div class="tip-item">
+              <span class="tip-title">${n("Clothes")}</span>
+              <p class="tip-text">${n("Wear clothes that you usually wear on a daily basis.")}</p>
+            </div>
+            <div class="tip-item">
+              <span class="tip-title">${n("Framing")}</span>
+              <p class="tip-text">${n("Make sure your entire body is visible. The app will guide you.")}</p>
+            </div>
+
+            <form>
             <label for="height-input">
-              ${q("To get started, please tell us your height.")}
+              ${n("To get started, please tell us your height.")}
             </label>
             <input id="height-input" type="number" min="50" max="300"
-              placeholder=${q("Height (cm)")} required tabindex="1"/>
-             <xact-button class="xact-button"
-  @click=${() => {
+              placeholder=${n("Height (cm)")} required tabindex="1"/>
+              </form>
+          </div>
+
+           <div class="images-section">
+         <svg width="300" height="245" viewBox="0 0 300 245" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M162.404 20.4343H136.498V72.1681H162.404V20.4343Z" fill="#6D4A44"/>
+<path d="M136.932 59.7042C137.111 56.7025 134.822 54.1243 131.82 53.9458C128.818 53.7673 126.24 56.0565 126.062 59.0582C126.055 59.1711 126.058 59.2815 126.058 59.3928L124.039 94.2659C123.861 97.2584 126.143 99.8282 129.136 100.007C132.128 100.184 134.698 97.9027 134.876 94.9102L136.896 60.0371C136.909 59.9267 136.926 59.8171 136.932 59.7042Z" fill="#F3A396"/>
+<mask id="mask0_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="124" y="53" width="13" height="48">
+<path d="M136.932 59.7042C137.111 56.7025 134.822 54.1243 131.82 53.9458C128.818 53.7673 126.24 56.0565 126.062 59.0582C126.055 59.1711 126.058 59.2815 126.058 59.3928L124.039 94.2659C123.861 97.2584 126.143 99.8282 129.136 100.007C132.128 100.184 134.698 97.9027 134.876 94.9102L136.896 60.0371C136.909 59.9267 136.926 59.8171 136.932 59.7042Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_2344_2604)">
+<path d="M138.204 70.4743C138.204 70.4743 128.75 69.6556 123.107 62.3022C123.107 62.3022 124.147 50.6029 133.085 52.4395C142.023 54.2771 138.204 70.4743 138.204 70.4743Z" fill="#F7E6D5"/>
+</g>
+<path d="M134.919 94.4893C135.097 91.4877 132.808 88.9095 129.806 88.731C126.805 88.5524 124.226 90.8417 124.048 93.8433C124.041 93.9562 124.045 94.0667 124.045 94.1771L123.549 131.903L129.384 131.406L134.882 94.8214C134.895 94.711 134.912 94.6022 134.919 94.4893Z" fill="#F3A396"/>
+<path d="M127.448 128.38C125.338 127.785 124.524 128.711 123.862 129.98L123.867 129.981C123.865 129.984 123.863 129.987 123.861 129.99C120.107 136.961 119.557 140.72 118.696 143.533C117.789 146.491 118.801 151.911 120.051 151.807C121.3 151.702 121.169 149.335 120.874 147.594C120.579 145.852 122.125 143.274 123.483 140.942C124.839 138.615 125.307 139.49 125.307 139.49L125.488 141.923C125.556 142.824 126.291 143.466 127.063 143.259C127.658 143.106 127.975 142.544 128.028 141.932L129.389 131.219C129.387 131.218 129.7 129.014 127.448 128.38Z" fill="#F3A396"/>
+<path d="M161.996 59.7042C161.818 56.7025 164.107 54.1243 167.108 53.9458C170.11 53.7673 172.688 56.0565 172.867 59.0582C172.873 59.1711 172.87 59.2815 172.87 59.3928L174.889 94.2659C175.067 97.2584 172.785 99.8282 169.793 100.007C166.8 100.184 164.23 97.9027 164.052 94.9102L162.033 60.0371C162.019 59.9267 162.003 59.8171 161.996 59.7042Z" fill="#F3A396"/>
+<mask id="mask1_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="161" y="53" width="14" height="48">
+<path d="M161.996 59.7042C161.818 56.7025 164.107 54.1243 167.108 53.9458C170.11 53.7673 172.688 56.0565 172.867 59.0582C172.873 59.1711 172.87 59.2815 172.87 59.3928L174.889 94.2659C175.067 97.2584 172.785 99.8282 169.793 100.007C166.8 100.184 164.23 97.9027 164.052 94.9102L162.033 60.0371C162.019 59.9267 162.003 59.8171 161.996 59.7042Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_2344_2604)">
+<path d="M160.725 70.4743C160.725 70.4743 170.178 69.6556 175.821 62.3022C175.821 62.3022 174.782 50.6029 165.844 52.4395C156.906 54.2771 160.725 70.4743 160.725 70.4743Z" fill="#F7E6D5"/>
+</g>
+<path d="M164.008 94.4893C163.829 91.4877 166.119 88.9095 169.12 88.731C172.122 88.5524 174.7 90.8417 174.879 93.8433C174.885 93.9562 174.882 94.0667 174.882 94.1771L175.378 131.903L169.543 131.406L164.045 94.8214C164.031 94.711 164.014 94.6022 164.008 94.4893Z" fill="#F3A396"/>
+<path d="M180.234 143.533C179.372 140.72 178.822 136.962 175.069 129.99C175.067 129.987 175.065 129.984 175.062 129.981L175.067 129.98C174.405 128.711 173.591 127.786 171.481 128.38C169.229 129.014 169.542 131.218 169.542 131.218L170.902 141.931C170.956 142.543 171.273 143.105 171.868 143.258C172.64 143.466 173.375 142.823 173.442 141.923L173.624 139.489C173.624 139.489 174.092 138.615 175.447 140.941C176.807 143.273 178.352 145.852 178.056 147.593C177.761 149.334 177.63 151.702 178.879 151.806C180.129 151.912 181.141 146.492 180.234 143.533Z" fill="#F3A396"/>
+<path d="M149.396 46.7827C138.982 46.7827 128.748 54.6318 128.748 54.6318L136 75.7339C137.155 79.0951 137.306 82.7203 136.435 86.1661L133.953 95.9807H165.719L162.7 86.4759C161.629 82.9661 161.669 79.2113 162.815 75.7256L170.54 54.9474C170.54 54.9474 160.432 46.7827 149.396 46.7827Z" fill="#F7E6D5"/>
+<path d="M134.93 50.8313C134.93 50.8313 145.083 64.5683 165.278 51.4997C165.278 51.4997 158.77 47.0176 149.365 46.6605C142.83 46.4114 134.93 50.8313 134.93 50.8313Z" fill="#F3A396"/>
+<path d="M133.868 69.5197L131.244 61.8865" stroke="#EFE3D8" stroke-width="1.04569" stroke-miterlimit="10"/>
+<path d="M165.141 69.5288L167.767 61.8865" stroke="#EFE3D8" stroke-width="1.04569" stroke-miterlimit="10"/>
+<path d="M165.721 95.9817H150.106H149.573H133.957C133.957 95.9817 127.833 105.494 129.387 122.399H149.573H150.106H170.291C171.352 104.097 165.721 95.9817 165.721 95.9817Z" fill="#242930"/>
+<path d="M138.972 174.134C144.349 174.134 148.706 169.775 148.706 164.4V121.207C148.706 115.831 144.348 111.473 138.972 111.473C133.596 111.473 129.238 115.832 129.238 121.207V164.4C129.238 169.775 133.597 174.134 138.972 174.134Z" fill="#242930"/>
+<path d="M134.605 216.849L135.36 228.943H144.237V216.849H134.605Z" fill="#F3A396"/>
+<path d="M145.192 227.725L145.307 235.072H117.658V234.857C117.658 233.165 118.631 231.624 120.159 230.897L133.707 225.491C134.194 225.259 134.82 225.269 135.191 225.661C136.943 227.508 138.865 230.518 144.21 227.252C144.597 227.016 145.106 227.279 145.192 227.725Z" fill="#131321"/>
+<path d="M117.661 237H145.311V235.072H117.661V237Z" fill="white"/>
+<path d="M138.972 155.314C133.596 155.314 129.238 159.672 129.238 165.048V220.255H148.707V165.048C148.706 159.672 144.349 155.314 138.972 155.314Z" fill="#242930"/>
+<path d="M148.71 211.719H128.131V220.255H148.71V211.719Z" fill="#21262D"/>
+<path d="M160.554 174.134C165.931 174.134 170.288 169.775 170.288 164.4V121.207C170.288 115.831 165.93 111.473 160.554 111.473C155.178 111.473 150.82 115.832 150.82 121.207V164.4C150.82 169.775 155.179 174.134 160.554 174.134Z" fill="#242930"/>
+<path d="M165.395 216.849L164.641 228.943H155.764V216.849H165.395Z" fill="#F3A396"/>
+<path d="M154.807 227.725L154.691 235.072H182.341V234.857C182.341 233.165 181.367 231.624 179.84 230.897L166.292 225.491C165.805 225.259 165.178 225.269 164.807 225.661C163.056 227.508 161.134 230.518 155.789 227.252C155.401 227.016 154.893 227.279 154.807 227.725Z" fill="#131321"/>
+<path d="M182.341 235.072H154.691V237H182.341V235.072Z" fill="white"/>
+<path d="M160.554 155.314C155.178 155.314 150.82 159.672 150.82 165.048V220.255H170.289V165.048C170.289 159.672 165.931 155.314 160.554 155.314Z" fill="#242930"/>
+<path d="M171.399 211.719H150.82V220.255H171.399V211.719Z" fill="#21262D"/>
+<path d="M149.367 52.5674C146.712 52.5674 144.561 50.416 144.561 47.7615V38.436H154.172V47.7607C154.172 50.4152 152.02 52.5674 149.367 52.5674Z" fill="#F3A396"/>
+<path d="M143.75 37.7584C143.75 37.7584 145.894 42.0529 148.861 42.9206C149.654 43.1523 150.5 43.0734 151.264 42.7604C152.381 42.3029 153.806 41.0466 154.171 39.8152V37.1133C154.171 37.1133 149.137 41.6236 143.75 37.7584Z" fill="#1A1A1A"/>
+<path d="M149.425 34.7768C156.588 34.7768 162.396 28.7826 162.396 21.3885C162.396 13.9944 156.588 8.00024 149.425 8.00024C142.261 8.00024 136.453 13.9944 136.453 21.3885C136.453 28.7826 142.261 34.7768 149.425 34.7768Z" fill="#6D4A44"/>
+<path d="M159.489 32.5309C161.678 34.1476 165.466 26.7942 163.332 25.0521C161.198 23.3109 160.028 26.4994 160.028 26.4994L159.469 28.6466L158.881 31.5744V32.2287L159.489 32.5309Z" fill="#F3A396"/>
+<path d="M162.643 27.2678C162.643 27.2678 161.056 26.7381 159.93 29.0755" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160.701 27.9324C160.701 27.9324 162.428 28.8557 161.287 30.2448" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160.27 21.432C160.27 26.0395 159.629 30.0159 158.989 32.8374C158.362 35.5999 156.599 37.5313 154.108 39.0848L153.655 39.3679C151.019 41.012 147.613 41.051 144.937 39.4659C142.237 37.8675 140.347 35.761 139.765 32.7959C138.707 27.4037 138.592 21.4311 138.592 21.4311C138.592 21.4311 137.586 9.79986 149.277 10.0257C160.967 10.2524 160.27 21.432 160.27 21.432Z" fill="#F3A396"/>
+<path d="M139.414 32.5307C137.224 34.1474 133.436 26.794 135.57 25.0519C137.704 23.3107 139.073 26.8388 139.073 26.8388L139.461 28.7618L139.962 31.5567V32.2351L139.414 32.5307Z" fill="#F3A396"/>
+<path d="M136.262 27.2678C136.262 27.2678 137.848 26.7381 138.975 29.0755" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M138.206 27.9324C138.206 27.9324 136.479 28.8557 137.62 30.2448" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M148.387 28.2681V29.5468C148.387 29.6871 148.414 29.8216 148.463 29.9445C148.657 30.4286 149.214 30.6602 149.717 30.5257L150.318 30.2376" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M145.084 25.7994C145.084 26.3266 144.656 26.7542 144.129 26.7542C143.601 26.7542 143.174 26.3266 143.174 25.7994C143.174 25.2721 143.601 24.8445 144.129 24.8445C144.656 24.8445 145.084 25.2721 145.084 25.7994Z" fill="#1A1A1A"/>
+<path d="M154.888 25.7994C154.888 26.3266 154.461 26.7542 153.933 26.7542C153.406 26.7542 152.979 26.3266 152.979 25.7994C152.979 25.2721 153.406 24.8445 153.933 24.8445C154.461 24.8445 154.888 25.2721 154.888 25.7994Z" fill="#1A1A1A"/>
+<path d="M145.533 32.0991C145.533 32.0991 147.097 33.0764 149.16 33.0764C151.223 33.0764 152.787 32.0991 152.787 32.0991" stroke="#D26665" stroke-width="0.514843" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M140.502 24.0441C140.502 24.0441 143.455 23.1307 146.382 22.9763C146.382 22.9763 145.465 21.3928 143.628 21.8196C141.791 22.2472 140.502 24.0441 140.502 24.0441Z" fill="#6D4A44"/>
+<path d="M157.516 24.0441C157.516 24.0441 154.563 23.1307 151.637 22.9763C151.637 22.9763 152.553 21.3928 154.39 21.8196C156.227 22.2472 157.516 24.0441 157.516 24.0441Z" fill="#6D4A44"/>
+<path d="M161.634 21.4461C161.634 21.4461 160.281 10.861 151.087 9.6321C151.087 9.6321 143.751 9.07661 141.199 12.6852C140.1 13.5637 138.553 15.6669 137.967 18.5864C137.064 23.0926 138.204 22.895 138.204 22.895C138.204 22.895 141.851 21.3937 142.414 16.3719C144.587 18.5582 150.922 22.1792 161.634 21.4461Z" fill="#6D4A44"/>
+</svg>
+
+
+
+
+          </div>
+          
+          
+          </div>
+
+           <xact-button class="xact-button buttons"
+@click=${() => {
       var A;
       const l = this.shadowRoot.querySelector("#height-input");
       if (l != null && l.value) {
@@ -976,53 +1064,79 @@ let E = class extends X {
         this.height = t, (A = this.onStartMeasurement) == null || A.call(this, t);
       }
     }}
-  label="${q("Let's go!")}"
-></xact-button>          
-        </div>
+label="${n("Let's go!")}"
+></xact-button> 
+         
     `;
   }
 };
 E.styles = N`
-    :host {
-      display: block;
-      font-family: "Lato", sans-serif;
-      box-sizing: border-box; 
-      display: flex; 
-      justify-content: center; 
-      align-items: center;
-      height: 100vh; 
-    }
+   :host {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  font-family: "Lato", sans-serif;
+  box-sizing: border-box;
+  padding: 16px; 
+  width: 100%;
+}
 
-    .step-1 {
-     display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center; 
-      gap: 16px; 
-      padding: 24px;
-      max-width: 400px; 
-      text-align: center;
-    }  
+.component-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: 960px;
+}
 
-    .step-1-header {
-       font-size: 24px;
-      font-weight: 700;
-      color: #000;
-      line-height: 1.2;
-    }
+.header-section {
+  text-align: left;
+}
 
-      .step-1-description {
-      font-size: 16px;
-      font-weight: 400;
-      color: #333;
-      line-height: 1.6;
-      margin-bottom: 8px;
-    }
+.header-text {
+  font-size: 24px;
+  font-weight: 700;
+  color: #000;
+  margin-bottom: 8px;
+  line-height: 1.2;
+}
+
+.description-text {
+  font-size: 16px;
+  font-weight: 400;
+  color: #333;
+  line-height: 1.6;
+}
 
-     form {
+.main-section {
+  display: flex;
+  flex-direction: row; 
+  gap: 24px;
+}
+
+.images-section {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.images-section svg {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+}
+
+.tips-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+   form {
       display: flex;
       flex-direction: column;
-      align-items: center;
+      align-items: start;
       gap: 16px; 
       width: 100%;
     }
@@ -1030,7 +1144,7 @@ E.styles = N`
         label {
       font-size: 16px;
       color: #333;
-      text-align: center;
+      text-align: start;
     }
 
     input {
@@ -1042,30 +1156,100 @@ E.styles = N`
       border-radius: 6px;
       box-sizing: border-box;
       font-family: "Lato", sans-serif;
-      text-align: center;
+      text-align: start;
     }
 
      input:focus {
       outline: 2px solid var(--brand-primary);
       outline-offset: 2px;
     }
+}
 
-     .xact-button {
+ .xact-button {
       width: 100%;
       max-width: 150px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
     }   
 
-  .footer-link {
-      margin-top: 16px; 
-      font-size: 12px;
-      color: #000;
-    }
+.tip-item {
+  margin-bottom: 4px;
+}
+
+.tip-title {
+  font-weight: bold;
+  display: inline-block;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.tip-text {
+  margin-top: 0;
+  font-size: 12px;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 200px;
+  margin: 0 auto;
+}
+
+@media (max-width: 754px) {
+  .main-section {
+    flex-direction: column;
+    gap: 8px; 
+  }
 
-       .footer-link a {
-      text-decoration: none;
-      font-weight: bold;
-      color: inherit;
-    }  
+  .images-section {
+    order: -1; 
+    max-width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .images-section svg {
+    width: 80%;  
+    max-width: 250px; 
+    height: auto;
+    margin-bottom: 8px;
+  }
+
+  .tips-section {
+    width: 100%;
+    gap: 4px; 
+  }
+
+  .tip-title {
+    font-size: 12px;
+    margin-bottom: 2px;
+  }
+
+  .tip-text {
+    font-size: 10px; 
+    line-height: 1.3;
+  }
+
+  .header-text {
+    font-size: 20px; 
+  }
+
+  .description-text {
+    font-size: 14px; 
+    line-height: 1.4;
+  }
+
+  .buttons {
+    gap: 8px;
+    max-width: 180px;
+  }
+ 
+}
   `;
 kA([
   j({ type: Number })
@@ -1075,7 +1259,7 @@ kA([
 ], E.prototype, "onStartMeasurement", 2);
 E = kA([
   R("xact-step-one"),
-  Y()
+  C()
 ], E);
 var Ht = Object.getOwnPropertyDescriptor, zt = (l, A, t, r) => {
   for (var e = r > 1 ? void 0 : r ? Ht(A, t) : A, p = l.length - 1, V; p >= 0; p--)
@@ -1087,7 +1271,7 @@ let yA = class extends X {
     return T`
      <footer class="modal-footer">
           <span>
-            <span class="powered-by">${q("Powered by")}</span>
+            <span class="powered-by">${n("Powered by")}</span>
             <a tabindex="0" class="xactsize-link" href="http://xactsize.com" target="_blank" rel="noopener">
               <svg class="xactsize-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M5.82764 11.3511L11.5446 7.80768V11.3511H5.82764Z" fill="url(#paint0_linear_2010_6151)"/>
@@ -1169,7 +1353,7 @@ yA.styles = N`
 `;
 yA = zt([
   R("xact-footer"),
-  Y()
+  C()
 ], yA);
 var Gt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, D = (l, A, t, r) => {
   for (var e = r > 1 ? void 0 : r ? Ft(A, t) : A, p = l.length - 1, V; p >= 0; p--)
@@ -1220,21 +1404,21 @@ let P = class extends X {
 
 
 
-      <h2 class="title">${q("Your ideal size")}</h2>
+      <h2 class="title">${n("Your ideal size")}</h2>
       <p class="description">
-        ${q("Based on your measurements and the exact dimensions of the garment, the size recommendation provided is the most accurate for an ideal fit.")}
+        ${n("Based on your measurements and the exact dimensions of the garment, the size recommendation provided is the most accurate for an ideal fit.")}
       </p>
 
       <div class="buttons">
         <xact-button
           variant="outlined"
           @click=${this.onRetry}
-          label=${q("Measure Again")}>
+          label=${n("Measure Again")}>
         </xact-button>
 
         <xact-button
           @click=${this.onAccept}
-          label=${q("Accept Suggestion")}>
+          label=${n("Accept Suggestion")}>
         </xact-button>
       </div>
     `;
@@ -1329,7 +1513,7 @@ D([
 ], P.prototype, "onRetry", 2);
 P = D([
   R("xact-step-result"),
-  Y()
+  C()
 ], P);
 var Mt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, JA = (l, A, t, r) => {
   for (var e = r > 1 ? void 0 : r ? ht(A, t) : A, p = l.length - 1, V; p >= 0; p--)
@@ -1344,30 +1528,30 @@ let I = class extends X {
     return T`
         <div class="component-content">
            <div class="header-section">
-        <h2 class="header-text">${q("Before you begin")}</h2>
+        <h2 class="header-text">${n("Before you begin")}</h2>
         <p class="description-text">
-          ${q("To ensure accurate measurements, we'll take two scans: one from the front and one from the side. Maintain an upright posture with your arms slightly away from your body and stretched out. In the side view, stand up straight with your arms straight and aligned with your body.")}
+          ${n("To ensure accurate measurements, we'll take two scans: one from the front and one from the side. Maintain an upright posture with your arms slightly away from your body and stretched out. In the side view, stand up straight with your arms straight and aligned with your body.")}
         </p>
       </div>
 
         <div class="main-section">         
          <div class="tips-section">
-            <h3>${q("Tips")}</h3>
+            <h3>${n("Tips")}</h3>
             <div class="tip-item">
-              <span class="tip-title">${q("Good Lighting")}</span>
-              <p class="tip-text">${q("Choose a well-lit area where you can see your image clearly.")}</p>
+              <span class="tip-title">${n("Good Lighting")}</span>
+              <p class="tip-text">${n("Choose a well-lit area where you can see your image clearly.")}</p>
             </div>
             <div class="tip-item">
-              <span class="tip-title">${q("Clean Background")}</span>
-              <p class="tip-text">${q("Position yourself against a plain background.")}</p>
+              <span class="tip-title">${n("Clean Background")}</span>
+              <p class="tip-text">${n("Position yourself against a plain background.")}</p>
             </div>
             <div class="tip-item">
-              <span class="tip-title">${q("Clothes")}</span>
-              <p class="tip-text">${q("Wear clothes that you usually wear on a daily basis.")}</p>
+              <span class="tip-title">${n("Clothes")}</span>
+              <p class="tip-text">${n("Wear clothes that you usually wear on a daily basis.")}</p>
             </div>
             <div class="tip-item">
-              <span class="tip-title">${q("Framing")}</span>
-              <p class="tip-text">${q("Make sure your entire body is visible. The app will guide you.")}</p>
+              <span class="tip-title">${n("Framing")}</span>
+              <p class="tip-text">${n("Make sure your entire body is visible. The app will guide you.")}</p>
             </div>
           </div>
 
@@ -1479,7 +1663,7 @@ let I = class extends X {
       var l;
       (l = this.onStep2advancement) == null || l.call(this);
     }}
-  label="${q("To start")}"
+  label="${n("To start")}"
 ></xact-button>               
         </div>
     `;
@@ -1634,22 +1818,22 @@ JA([
 ], I.prototype, "onStep2advancement", 2);
 I = JA([
   R("xact-step-informs"),
-  Y()
+  C()
 ], I);
 const oA = "data:image/svg+xml,%3csvg%20width='22'%20height='40'%20viewBox='0%200%2022%2040'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200L0%2013.3362V0H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2013.339L0%2026.6724V13.3362H21.517V13.339Z'%20fill='white'/%3e%3cpath%20d='M21.517%2026.6755L0%2040.0089V26.6726H21.517V26.6755Z'%20fill='%231C28BA'/%3e%3c/svg%3e", Et = "data:image/svg+xml,%3csvg%20width='22'%20height='41'%20viewBox='0%200%2022%2041'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200.00878906L0%2013.345V0.00878906H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2013.3478L0%2026.6812V13.345H21.517V13.3478Z'%20fill='%231C28BA'/%3e%3cpath%20d='M21.517%2026.6843L0%2040.0176V26.6814H21.517V26.6843Z'%20fill='white'/%3e%3c/svg%3e", It = "data:image/svg+xml,%3csvg%20width='22'%20height='41'%20viewBox='0%200%2022%2041'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.517%200.0204381L0%2013.3538V0.0175781H21.517V0.0204381Z'%20fill='%231C28BA'/%3e%3cpath%20d='M21.517%2013.3538L0%2026.69V13.3538H21.517Z'%20fill='white'/%3e%3cpath%20d='M21.517%2026.693L0%2040.0264V26.6902H21.517V26.693Z'%20fill='white'/%3e%3c/svg%3e";
-var wt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, u = (l, A, t, r) => {
-  for (var e = r > 1 ? void 0 : r ? Yt(A, t) : A, p = l.length - 1, V; p >= 0; p--)
+var wt = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, d = (l, A, t, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ct(A, t) : A, p = l.length - 1, V; p >= 0; p--)
     (V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
   return r && e && wt(A, t, e), e;
 };
-const { getLocale: gt, setLocale: PA } = it({
+const { getLocale: gt, setLocale: PA } = Wt({
   sourceLocale: IA,
   targetLocales: bt,
-  loadLocale: (l) => wA(/* @__PURE__ */ Object.assign({ "./generated/locales/pt-BR.ts": () => import("./pt-BR-CKdzgVyT.mjs") }), `./generated/locales/${l}.ts`, 4)
+  loadLocale: (l) => wA(/* @__PURE__ */ Object.assign({ "./generated/locales/pt-BR.ts": () => import("./pt-BR-vVX9MQ4x.mjs") }), `./generated/locales/${l}.ts`, 4)
 });
 let a = class extends X {
   constructor() {
-    super(...arguments), this.spinnerFrame = 0, this.apiKey = "DB8mP9gStPfvdyeYbbuCV4Zf3SH745dI", this.tenantId = "1", this.productSku = "", this.apiUrl = "https://xactsize-dotnet-api-923169850574.southamerica-east1.run.app/api/measurer/measure/body", this._culture = "pt-BR", this.measurerKey = "", this._isLocaleLoading = !1, this.showModal = !1, this.step = 1, this.height = 0, this.recommendedSize = "", this.measurements = {}, this.errorMessage = "", this.instructionMessage = q("Position yourself in front of the camera"), this.shouldStartMeasurement = !1, this.isLoading = !1, this.isFetching = !1, this.videoElement = null, this.stream = null, this.poolingTimeout = null, this.instructionMessageTimeout = null, this.cameras = [], this.currentCameraId = null;
+    super(...arguments), this.spinnerFrame = 0, this.apiKey = "DB8mP9gStPfvdyeYbbuCV4Zf3SH745dI", this.tenantId = "1", this.productSku = "123456", this.apiUrl = "https://xactsize-dotnet-api-923169850574.southamerica-east1.run.app/api/measurer/measure/body", this._culture = "pt-BR", this.measurerKey = "", this._isLocaleLoading = !1, this.showModal = !1, this.step = 1, this.height = 0, this.recommendedSize = "", this.measurements = {}, this.errorMessage = "", this.instructionMessage = n("Position yourself in front of the camera"), this.shouldStartMeasurement = !1, this.isLoading = !1, this.isFetching = !1, this.videoElement = null, this.stream = null, this.poolingTimeout = null, this.instructionMessageTimeout = null, this.cameras = [], this.currentCameraId = null;
   }
   firstUpdated() {
     this.startSpinnerAnimation();
@@ -1684,42 +1868,42 @@ let a = class extends X {
   }
   get errorMap() {
     return {
-      ERR_RIGHT_ARM_TOO_HIGH: q("Lower your right arm", { id: "ERR_RIGHT_ARM_TOO_HIGH" }),
-      ERR_LEFT_ARM_TOO_HIGH: q("Lower your left arm", { id: "ERR_LEFT_ARM_TOO_HIGH" }),
-      ERR_ARMS_NOT_RAISED: q("Raise both arms to a 45-degree angle", { id: "ERR_ARMS_NOT_RAISED" }),
-      ERR_RIGHT_ARM_NOT_RAISED: q("Raise your right arm to a 45-degree angle", { id: "ERR_RIGHT_ARM_NOT_RAISED" }),
-      ERR_LEFT_ARM_NOT_RAISED: q("Raise your left arm to a 45-degree angle", { id: "ERR_LEFT_ARM_NOT_RAISED" }),
-      ERR_BODY_LANDMARKS_NOT_DETECTED: q("Ensure your full body is visible in the camera", { id: "ERR_BODY_LANDMARKS_NOT_DETECTED" }),
-      ERR_HIPS_NOT_VISIBLE: q("Adjust your position to show your hips", { id: "ERR_HIPS_NOT_VISIBLE" }),
-      ERR_TOO_CLOSE_TO_CAMERA: q("Step back from the camera", { id: "ERR_TOO_CLOSE_TO_CAMERA" }),
-      ERR_NOT_SIDE_VIEW: q("Turn to show your side profile", { id: "ERR_NOT_SIDE_VIEW" }),
-      ERR_INVALID_CLOTHING_TYPE: q("This clothing type is not supported; please contact support", { id: "ERR_INVALID_CLOTHING_TYPE" }),
-      ERR_UPPER_BODY_NOT_VISIBLE: q("Adjust your position to show your upper body", { id: "ERR_UPPER_BODY_NOT_VISIBLE" }),
-      ERR_HEAD_TOO_CLOSE_TO_EDGE: q("Move your head away from the edge of the frame", { id: "ERR_HEAD_TOO_CLOSE_TO_EDGE" }),
-      ERR_LOWER_BODY_NOT_VISIBLE: q("Adjust your position to show your lower body", { id: "ERR_LOWER_BODY_NOT_VISIBLE" }),
-      ERR_FEET_TOO_CLOSE_TO_EDGE: q("Move your feet away from the edge of the frame", { id: "ERR_FEET_TOO_CLOSE_TO_EDGE" }),
-      ERR_BODY_TOO_CLOSE_TO_EDGE: q("Move your body away from the edge of the frame", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE" }),
-      ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT: q("Move to the left to center your body", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT" }),
-      ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT: q("Move to the right to center your body", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT" }),
-      ERR_SHOULDERS_NOT_VISIBLE: q("Adjust your position to show your shoulders", { id: "ERR_SHOULDERS_NOT_VISIBLE" }),
-      ERR_HEIGHT_MEASUREMENT_FAILED: q("Stand straight and ensure your full body is visible", { id: "ERR_HEIGHT_MEASUREMENT_FAILED" }),
-      ERR_HEAD_POINT_NOT_DETECTED: q("Ensure your head is fully visible in the frame", { id: "ERR_HEAD_POINT_NOT_DETECTED" }),
-      ERR_INCORRECT_POSTURE: q("Stand straight with your shoulders back", { id: "ERR_INCORRECT_POSTURE" }),
-      ERR_HEM_MEASUREMENT_FAILED: q("Ensure your clothing hem is visible and clear", { id: "ERR_HEM_MEASUREMENT_FAILED" }),
-      ERR_SHOULDER_MEASUREMENT_FAILED: q("Keep your shoulders relaxed and visible", { id: "ERR_SHOULDER_MEASUREMENT_FAILED" }),
-      ERR_ARM_NOT_STRETCHED: q("Stretch your arms fully", { id: "ERR_ARM_NOT_STRETCHED" }),
-      ERR_LEGS_NOT_DETECTED: q("Ensure your legs are fully visible in the frame", { id: "ERR_LEGS_NOT_DETECTED" }),
-      ERR_HIPS_MEASUREMENT_FAILED: q("Stand straight and ensure your hips are visible", { id: "ERR_HIPS_MEASUREMENT_FAILED" }),
-      ERR_WAIST_MEASUREMENT_FAILED: q("Stand straight and ensure your waist is visible", { id: "ERR_WAIST_MEASUREMENT_FAILED" }),
-      ERR_INVALID_MEASURE_SIDE_VIEW: q("Turn to show a clear side profile", { id: "ERR_INVALID_MEASURE_SIDE_VIEW" }),
-      ERR_INVALID_BODY_HEIGHT_TYPE: q("Ensure your full body is visible for height measurement", { id: "ERR_INVALID_BODY_HEIGHT_TYPE" }),
-      ERR_IMAGE_LOAD_FAILED: q("Try again later; the image could not be processed", { id: "ERR_IMAGE_LOAD_FAILED" }),
-      ERR_HEIGHT_INVALID: q("Height must be between 50 and 300 cm", { id: "ERR_HEIGHT_INVALID" })
+      ERR_RIGHT_ARM_TOO_HIGH: n("Lower your right arm", { id: "ERR_RIGHT_ARM_TOO_HIGH" }),
+      ERR_LEFT_ARM_TOO_HIGH: n("Lower your left arm", { id: "ERR_LEFT_ARM_TOO_HIGH" }),
+      ERR_ARMS_NOT_RAISED: n("Raise both arms to a 45-degree angle", { id: "ERR_ARMS_NOT_RAISED" }),
+      ERR_RIGHT_ARM_NOT_RAISED: n("Raise your right arm to a 45-degree angle", { id: "ERR_RIGHT_ARM_NOT_RAISED" }),
+      ERR_LEFT_ARM_NOT_RAISED: n("Raise your left arm to a 45-degree angle", { id: "ERR_LEFT_ARM_NOT_RAISED" }),
+      ERR_BODY_LANDMARKS_NOT_DETECTED: n("Ensure your full body is visible in the camera", { id: "ERR_BODY_LANDMARKS_NOT_DETECTED" }),
+      ERR_HIPS_NOT_VISIBLE: n("Adjust your position to show your hips", { id: "ERR_HIPS_NOT_VISIBLE" }),
+      ERR_TOO_CLOSE_TO_CAMERA: n("Step back from the camera", { id: "ERR_TOO_CLOSE_TO_CAMERA" }),
+      ERR_NOT_SIDE_VIEW: n("Turn to show your side profile", { id: "ERR_NOT_SIDE_VIEW" }),
+      ERR_INVALID_CLOTHING_TYPE: n("This clothing type is not supported; please contact support", { id: "ERR_INVALID_CLOTHING_TYPE" }),
+      ERR_UPPER_BODY_NOT_VISIBLE: n("Adjust your position to show your upper body", { id: "ERR_UPPER_BODY_NOT_VISIBLE" }),
+      ERR_HEAD_TOO_CLOSE_TO_EDGE: n("Move your head away from the edge of the frame", { id: "ERR_HEAD_TOO_CLOSE_TO_EDGE" }),
+      ERR_LOWER_BODY_NOT_VISIBLE: n("Adjust your position to show your lower body", { id: "ERR_LOWER_BODY_NOT_VISIBLE" }),
+      ERR_FEET_TOO_CLOSE_TO_EDGE: n("Move your feet away from the edge of the frame", { id: "ERR_FEET_TOO_CLOSE_TO_EDGE" }),
+      ERR_BODY_TOO_CLOSE_TO_EDGE: n("Move your body away from the edge of the frame", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE" }),
+      ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT: n("Move to the left to center your body", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_LEFT" }),
+      ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT: n("Move to the right to center your body", { id: "ERR_BODY_TOO_CLOSE_TO_EDGE_MOVE_RIGHT" }),
+      ERR_SHOULDERS_NOT_VISIBLE: n("Adjust your position to show your shoulders", { id: "ERR_SHOULDERS_NOT_VISIBLE" }),
+      ERR_HEIGHT_MEASUREMENT_FAILED: n("Stand straight and ensure your full body is visible", { id: "ERR_HEIGHT_MEASUREMENT_FAILED" }),
+      ERR_HEAD_POINT_NOT_DETECTED: n("Ensure your head is fully visible in the frame", { id: "ERR_HEAD_POINT_NOT_DETECTED" }),
+      ERR_INCORRECT_POSTURE: n("Stand straight with your shoulders back", { id: "ERR_INCORRECT_POSTURE" }),
+      ERR_HEM_MEASUREMENT_FAILED: n("Ensure your clothing hem is visible and clear", { id: "ERR_HEM_MEASUREMENT_FAILED" }),
+      ERR_SHOULDER_MEASUREMENT_FAILED: n("Keep your shoulders relaxed and visible", { id: "ERR_SHOULDER_MEASUREMENT_FAILED" }),
+      ERR_ARM_NOT_STRETCHED: n("Stretch your arms fully", { id: "ERR_ARM_NOT_STRETCHED" }),
+      ERR_LEGS_NOT_DETECTED: n("Ensure your legs are fully visible in the frame", { id: "ERR_LEGS_NOT_DETECTED" }),
+      ERR_HIPS_MEASUREMENT_FAILED: n("Stand straight and ensure your hips are visible", { id: "ERR_HIPS_MEASUREMENT_FAILED" }),
+      ERR_WAIST_MEASUREMENT_FAILED: n("Stand straight and ensure your waist is visible", { id: "ERR_WAIST_MEASUREMENT_FAILED" }),
+      ERR_INVALID_MEASURE_SIDE_VIEW: n("Turn to show a clear side profile", { id: "ERR_INVALID_MEASURE_SIDE_VIEW" }),
+      ERR_INVALID_BODY_HEIGHT_TYPE: n("Ensure your full body is visible for height measurement", { id: "ERR_INVALID_BODY_HEIGHT_TYPE" }),
+      ERR_IMAGE_LOAD_FAILED: n("Try again later; the image could not be processed", { id: "ERR_IMAGE_LOAD_FAILED" }),
+      ERR_HEIGHT_INVALID: n("Height must be between 50 and 300 cm", { id: "ERR_HEIGHT_INVALID" })
     };
   }
   getTranslatedMessage(l) {
     const A = this.errorMap[l];
-    return A || (console.info("Error code is missing", l), q("An unexpected error occurred"));
+    return A || (console.info("Error code is missing", l), n("An unexpected error occurred"));
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this.handleEscKey.bind(this));
@@ -1731,7 +1915,7 @@ let a = class extends X {
     l.key === "Escape" && this.showModal && this.closeModal();
   }
   openModal() {
-    this.showModal = !0, this.step = 1, this.height = 0, this.instructionMessage = q("Position yourself in front of the camera");
+    this.showModal = !0, this.step = 1, this.height = 0, this.instructionMessage = n("Position yourself in front of the camera");
   }
   closeModal() {
     this.showModal = !1, this.onMeasurementCanceled && typeof this.onMeasurementCanceled == "function" && this.onMeasurementCanceled(), this.stopPolling(), this.dispatchEvent(new CustomEvent("measurementCanceled", { detail: {} }));
@@ -1744,7 +1928,7 @@ let a = class extends X {
     this.step = 3, this.errorMessage = "";
   }
   async startMeasurement() {
-    this.step = 2, this.errorMessage = "", this.shouldStartMeasurement = !0;
+    this.step = 3, this.errorMessage = "", this.shouldStartMeasurement = !0;
   }
   updated(l) {
     super.updated(l), l.has("step") && this.step === 3 && this.shouldStartMeasurement && (this.initializeMeasurement(), this.shouldStartMeasurement = !1);
@@ -1754,7 +1938,7 @@ let a = class extends X {
     try {
       this.stream = await navigator.mediaDevices.getUserMedia({ video: !0 }), this.videoElement && (this.videoElement.srcObject = this.stream, await this.videoElement.play(), await this.loadCameras(), this.startPolling());
     } catch {
-      this.errorMessage = q("Error accessing webcam");
+      this.errorMessage = n("Error accessing webcam");
     }
   }
   async loadCameras() {
@@ -1775,7 +1959,7 @@ let a = class extends X {
         video: { deviceId: { exact: this.currentCameraId } }
       }), this.videoElement && (this.videoElement.srcObject = this.stream, await this.videoElement.play(), this.startPolling());
     } catch {
-      this.errorMessage = q("Error switching camera");
+      this.errorMessage = n("Error switching camera");
     } finally {
       this.isLoading = !1;
     }
@@ -1790,7 +1974,7 @@ let a = class extends X {
       const r = await new Promise(
         (V) => A.toBlob((S) => V(S), "image/jpeg")
       ), e = new File([r], "frame.jpg", { type: "image/jpeg" }), p = new FormData();
-      p.append("image", e), p.append("height", this.height.toString()), p.append("product_sku", this.productSku), this.measurerKey && p.append("measurerKey", this.measurerKey);
+      p.append("image", e), p.append("height", this.height.toString()), p.append("productSku", this.productSku), this.measurerKey && p.append("measurerKey", this.measurerKey);
       try {
         this.isFetching = !0, this.isLoading = !0, this.poolingTimeout !== null && (clearTimeout(this.poolingTimeout), this.poolingTimeout = null), this.instructionMessageTimeout !== null && (clearTimeout(this.instructionMessageTimeout), this.instructionMessageTimeout = null);
         const S = await (await fetch(this.apiUrl, {
@@ -1800,16 +1984,15 @@ let a = class extends X {
             Accept: "application/json",
             "Cache-Control": "no-store",
             Pragma: "no-cache",
-            "X-Api-Key": this.apiKey,
-            "X-Tenant-Id": this.tenantId
+            "X-Api-Key": this.apiKey
           }
         })).json();
-        this.isFetching = !1, this.isLoading = !1, this.errorMessage = S, S.success ? (this.measurements = S.measurements, this.recommendedSize = S.ChosenSize, this.instructionMessage = q("Measurement successful!"), this.stopPolling(), this.step = 4) : (this.instructionMessage = this.getTranslatedMessage(S.message || "UNKNOWN_ERROR"), this.instructionMessageTimeout = setTimeout(() => {
-          this.recommendedSize || (this.instructionMessage = q("Position yourself in front of the camera"), this.poolingTimeout = setTimeout(l, 0));
+        this.isFetching = !1, this.isLoading = !1, this.errorMessage = JSON.stringify(S), S.success ? (this.measurements = S.measurements, this.recommendedSize = S.chosenSize, this.instructionMessage = n("Measurement successful!"), this.stopPolling(), this.step = 4) : (this.instructionMessage = this.getTranslatedMessage(S.message || "UNKNOWN_ERROR"), this.instructionMessageTimeout = setTimeout(() => {
+          this.recommendedSize || (this.instructionMessage = n("Position yourself in front of the camera"), this.poolingTimeout = setTimeout(l, 0));
         }, 2e3));
       } catch {
-        this.isFetching = !1, this.isLoading = !1, this.instructionMessage = q("Error processing measurement"), this.instructionMessageTimeout = setTimeout(() => {
-          this.recommendedSize || (this.instructionMessage = q("Position yourself in front of the camera"), this.poolingTimeout = setTimeout(l, 0));
+        this.isFetching = !1, this.isLoading = !1, this.instructionMessage = n("Error processing measurement"), this.instructionMessageTimeout = setTimeout(() => {
+          this.recommendedSize || (this.instructionMessage = n("Position yourself in front of the camera"), this.poolingTimeout = setTimeout(l, 0));
         }, 2e3);
       }
     };
@@ -1829,7 +2012,7 @@ let a = class extends X {
   }
   render() {
     return this._isLocaleLoading ? T`<div hidden></div>` : T`            
-            <xact-button @click=${this.openModal} label="${q("Find your Xactsize")}"></xact-button>
+            <xact-button @click=${this.openModal} label="${n("Find your Xactsize")}"></xact-button>
 
             ${this.showModal ? T`
                 <div class="modal">
@@ -1856,7 +2039,7 @@ let a = class extends X {
                         ${this.step === 3 ? T`
                             <div class="step-3">
 
-                                <p>${q("Ensure your full body is visible in the camera")}</p>
+                                <p>${n("Ensure your full body is visible in the camera")}</p>
                                 <div class='video-container'>
                                     <div class="video-overlay">
                                         <h2>${this.instructionMessage}</h2>
@@ -1884,10 +2067,7 @@ let a = class extends X {
                                         .recommendedSize=${this.recommendedSize}
                                         .onRetry=${() => this.resetMeasurement()}
                                         .onAccept=${() => this.acceptMeasurement()}>
-                                </xact-step-result>
-                                <div>
-                                    <p>${this.errorMessage}</p>
-                                </div>
+                                </xact-step-result>                              
                             </div>
                         ` : ""}
                     <xact-footer></xact-footer>
@@ -1899,7 +2079,7 @@ let a = class extends X {
   }
 };
 a.styles = N`
-        :host {
+       :host {
             display: block;
             font-family: Arial, sans-serif;
         }
@@ -2164,6 +2344,7 @@ a.styles = N`
   border-radius: 8px;
   flex: 1;
   flex-direction: column;
+   max-height: 70vh;
 }
 
         .video-container button {
@@ -2324,76 +2505,77 @@ a.styles = N`
             font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
         }
 
+
     `;
-u([
+d([
   j({ type: String, attribute: "api-key" })
 ], a.prototype, "apiKey", 2);
-u([
+d([
   j({ type: String, attribute: "tenant-id" })
 ], a.prototype, "tenantId", 2);
-u([
+d([
   j({ type: String, attribute: "product-sku" })
 ], a.prototype, "productSku", 2);
-u([
+d([
   j({ type: String, attribute: "api-url" })
 ], a.prototype, "apiUrl", 2);
-u([
+d([
   j({ type: Function, attribute: "onmeasurementaccepted" })
 ], a.prototype, "onMeasurementAccepted", 2);
-u([
+d([
   j({ type: Function, attribute: "onmeasurementcanceled" })
 ], a.prototype, "onMeasurementCanceled", 2);
-u([
+d([
   j({ type: String })
 ], a.prototype, "culture", 1);
-u([
+d([
   J()
 ], a.prototype, "errorMap", 1);
-u([
+d([
   J()
 ], a.prototype, "measurerKey", 2);
-u([
+d([
   J()
 ], a.prototype, "_isLocaleLoading", 2);
-u([
+d([
   J()
 ], a.prototype, "showModal", 2);
-u([
+d([
   J()
 ], a.prototype, "step", 2);
-u([
+d([
   J()
 ], a.prototype, "height", 2);
-u([
+d([
   J()
 ], a.prototype, "recommendedSize", 2);
-u([
+d([
   J()
 ], a.prototype, "measurements", 2);
-u([
+d([
   J()
 ], a.prototype, "errorMessage", 2);
-u([
+d([
   J()
 ], a.prototype, "instructionMessage", 2);
-u([
+d([
   J()
 ], a.prototype, "shouldStartMeasurement", 2);
-u([
+d([
   J()
 ], a.prototype, "isLoading", 2);
-u([
+d([
   J()
 ], a.prototype, "isFetching", 2);
-u([
+d([
   J()
 ], a.prototype, "cameras", 2);
-u([
+d([
   J()
 ], a.prototype, "currentCameraId", 2);
-a = u([
+a = d([
   R("body-measurer"),
-  Y()
+  C()
 ], a);
 export {
   a as BodyMeasurer,