xactsize-webcomponents 1.0.23 → 1.0.26

package/dist/body-measurer.es.js

@@ -16,7 +16,7 @@ const wA = (l, A, t) => {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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();
+const B = globalThis, yA = 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 !== uA) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -25,7 +25,7 @@ let ZA = class {
   get styleSheet() {
     let A = this.o;
     const t = this.t;
-    if (dA && A === void 0) {
+    if (yA && 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));
     }
@@ -43,12 +43,12 @@ const CA = (l) => new ZA(typeof l == "string" ? l : l + "", void 0, uA), N = (l,
   })(e) + l[p + 1], l[0]);
   return new ZA(t, l, uA);
 }, YA = (l, A) => {
-  if (dA) l.adoptedStyleSheets = A.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  if (yA) 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 = dA ? (l) => l : (l) => l instanceof CSSStyleSheet ? ((A) => {
+}, XA = yA ? (l) => l : (l) => l instanceof CSSStyleSheet ? ((A) => {
   let t = "";
   for (const r of A.cssRules) t += r.cssText;
   return CA(t);
@@ -307,10 +307,10 @@ const rt = (l, A) => {
   let e, p = A === 2 ? "<svg>" : A === 3 ? "<math>" : "", V = H;
   for (let S = 0; S < t; S++) {
     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);
+    let u, k, d = -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, d = -1) : k[1] === void 0 ? d = -2 : (d = 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);
+    p += V === H ? q + tt : d >= 0 ? (r.push(u), q.slice(0, d) + NA + q.slice(d) + K + s) : q + K + (d === -2 ? S : s);
   }
   return [zA(l, p + (l[t] || "<?>") + (A === 2 ? "</svg>" : A === 3 ? "</math>" : "")), r];
 };
@@ -321,27 +321,27 @@ class h {
     let p = 0, V = 0;
     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);
+      const d = this.el.content.firstChild;
+      d.replaceWith(...d.childNodes);
     }
     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++], 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 (e.hasAttributes()) for (const d of e.getAttributeNames()) if (d.endsWith(NA)) {
+          const x = k[V++], s = e.getAttribute(d).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(d);
+        } else d.startsWith(K) && (q.push({ type: 6, index: p }), e.removeAttribute(d));
         if (HA.test(e.tagName)) {
-          const y = e.textContent.split(K), x = y.length - 1;
+          const d = e.textContent.split(K), x = d.length - 1;
           if (x > 0) {
             e.textContent = $ ? $.emptyScript : "";
-            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());
+            for (let s = 0; s < x; s++) e.append(d[s], F()), O.nextNode(), q.push({ type: 2, index: ++p });
+            e.append(d[x], F());
           }
         }
       } else if (e.nodeType === 8) if (e.data === RA) q.push({ type: 2, index: p });
       else {
-        let y = -1;
-        for (; (y = e.data.indexOf(K, y + 1)) !== -1; ) q.push({ type: 7, index: p }), y += K.length - 1;
+        let d = -1;
+        for (; (d = e.data.indexOf(K, d + 1)) !== -1; ) q.push({ type: 7, index: p }), d += K.length - 1;
       }
       p++;
     }
@@ -577,7 +577,7 @@ 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 }, dt = (l = yt, A, t) => {
+const dt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged: jA }, yt = (l = dt, 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") {
@@ -599,7 +599,7 @@ const yt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged:
   throw Error("Unsupported decorator location: " + r);
 };
 function j(l) {
-  return (A, t) => typeof t == "object" ? dt(l, A, t) : ((r, e, p) => {
+  return (A, t) => typeof t == "object" ? yt(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);
@@ -1071,14 +1071,16 @@ label="${n("Let's go!")}"
   }
 };
 E.styles = N`
-   :host {
+  :host {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: column; /* Força coluna para evitar problemas de flex-start */
+  justify-content: flex-start;
+  align-items: stretch;    /* Evita que filhos desapareçam no Safari */
   font-family: "Lato", sans-serif;
   box-sizing: border-box;
-  padding: 16px; 
+  padding: 16px;
   width: 100%;
+  min-height: 100vh;       /* Garante que o conteúdo caiba */
 }
 
 .component-content {
@@ -1087,6 +1089,7 @@ E.styles = N`
   gap: 12px;
   width: 100%;
   max-width: 960px;
+  margin: 0 auto;
 }
 
 .header-section {
@@ -1110,12 +1113,14 @@ E.styles = N`
 
 .main-section {
   display: flex;
-  flex-direction: row; 
+  flex-direction: row;
   gap: 24px;
+  flex-wrap: wrap; /* Evita overflow de elementos */
+  justify-content: center;
 }
 
 .images-section {
-  flex: 1;
+  flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1125,54 +1130,52 @@ E.styles = N`
   width: 100%;
   max-width: 400px;
   height: auto;
+  flex-shrink: 0; /* Evita sumir no Safari */
 }
 
 .tips-section {
-  flex: 1;
+  flex: 1 1 200px;
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
 
-   form {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      gap: 16px; 
-      width: 100%;
-    }
-
-        label {
-      font-size: 16px;
-      color: #333;
-      text-align: start;
-    }
+.tips-section form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+}
 
-    input {
-      width: 100%;
-      max-width: 150px;
-      padding: 12px;
-      font-size: 16px;
-      border: 1px solid #ccc;
-      border-radius: 6px;
-      box-sizing: border-box;
-      font-family: "Lato", sans-serif;
-      text-align: start;
-    }
+.tips-section label {
+  font-size: 16px;
+  color: #333;
+}
 
-     input:focus {
-      outline: 2px solid var(--brand-primary);
-      outline-offset: 2px;
-    }
+.tips-section input {
+  width: 100%;
+  max-width: 150px;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-sizing: border-box;
 }
 
- .xact-button {
-      width: 100%;
-      max-width: 150px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+.tips-section input:focus {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+}
 
-    }   
+.xact-button {
+  width: 100%;
+  max-width: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0; /* Evita sumir no Safari */
+}
 
 .tip-item {
   margin-bottom: 4px;
@@ -1201,104 +1204,112 @@ E.styles = N`
   margin: 0 auto;
 }
 
-  @media (max-width: 754px) {
-      .main-section {
-        flex-direction: column;
-        gap: 16px;
-        align-items: center;
-      }
+/* Responsividade para mobile */
+@media (max-width: 754px) {
+  .main-section {
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+  }
 
-      .images-section {
-        order: -1;
-        width: 100%;
-      }
+  .images-section {
+    order: -1;
+    width: 100%;
+  }
 
-      .images-section svg {
-        width: 90%;
-        max-width: 220px;
-        height: auto;
-      }
+  .images-section svg {
+    width: 80%;
+    max-width: 180px;
+  }
 
-      .tips-section {
-        width: 100%;
-        gap: 8px;
-        align-items: center;
-      }
+  .tips-section {
+    width: 100%;
+    gap: 6px;
+    align-items: flex-start;
+  }
 
-      form {
-        align-items: center;
-        width: 100%;
-      }
+  .tips-section form {
+    width: 100%;
+    align-items: flex-start;
+  }
 
-      input {
-        max-width: 100%;
-        font-size: 14px;
-        padding: 10px;
-      }
+  .tips-section input {
+    max-width: 100%;
+    font-size: 14px;
+    padding: 10px;
+  }
 
-      label {
-        text-align: center;
-        font-size: 14px;
-      }
+  .tips-section label {
+    font-size: 14px;
+  }
 
-      .xact-button {
-        max-width: 100%;
-      }
+  .xact-button {
+    max-width: 100%;
+  }
 
-      .header-text {
-        font-size: 20px;
-        text-align: center;
-      }
+  .header-text {
+    font-size: 20px;
+    text-align: center;
+  }
 
-      .description-text {
-        font-size: 14px;
-        text-align: center;
-      }
+  .description-text {
+    font-size: 14px;
+    text-align: center;
+  }
 
-      .tip-title {
-        font-size: 12px;
-      }
+  .tip-title {
+    font-size: 12px;
+  }
 
-      .tip-text {
-        font-size: 11px;
-      }
+  .tip-text {
+    font-size: 11px;
+    margin-left: 0;
+  }
 
-      .buttons {
-        gap: 8px;
-        width: 100%;
-        max-width: 100%;
-      }
-    }
+  .buttons {
+    width: 100%;
+    max-width: 100%;
+    gap: 8px;
+    margin-top: 12px;
+  }
+}
 
-    /* 📱 Extra pequeno (até 380px) */
-    @media (max-width: 380px) {
-      :host {
-        padding: 8px;
-      }
+/* Ajuste fino para iPhones muito pequenos */
+@media (max-width: 380px) {
+  :host {
+    padding: 12px;
+  }
 
-      .component-content {
-        gap: 8px;
-      }
+  .images-section svg {
+    max-width: 150px;
+  }
 
-      .header-text {
-        font-size: 18px;
-      }
+  .header-text {
+    font-size: 18px;
+  }
 
-      .description-text {
-        font-size: 13px;
-      }
+  .description-text {
+    font-size: 13px;
+  }
 
-      input {
-        font-size: 13px;
-        padding: 8px;
-      }
+  .tip-title {
+    font-size: 11px;
+  }
 
-      .xact-button {
-        font-size: 14px;
-      }
-    
- 
+  .tip-text {
+    font-size: 10px;
+  }
+
+  .xact-button {
+    padding: 8px;
+  }
+
+  .buttons {
+    gap: 6px;
+  }
 }
+
+  
   `;
 kA([
   j({ type: Number })
@@ -1315,7 +1326,7 @@ var Ht = Object.getOwnPropertyDescriptor, zt = (l, A, t, r) => {
     (V = l[p]) && (e = V(e) || e);
   return e;
 };
-let yA = class extends X {
+let dA = class extends X {
   render() {
     return T`
      <footer class="modal-footer">
@@ -1363,7 +1374,7 @@ let yA = class extends X {
     `;
   }
 };
-yA.styles = N`
+dA.styles = N`
   .modal-footer {
     text-align: center;
     font-size: 12px;
@@ -1400,10 +1411,10 @@ yA.styles = N`
     outline-offset: 2px;
   }
 `;
-yA = zt([
+dA = zt([
   R("xact-footer"),
   C()
-], yA);
+], dA);
 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--)
     (V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
@@ -1870,7 +1881,7 @@ I = JA([
   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, Ct = Object.getOwnPropertyDescriptor, d = (l, A, t, r) => {
+var wt = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, y = (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;
@@ -2556,73 +2567,73 @@ a.styles = N`
 
 
     `;
-d([
+y([
   j({ type: String, attribute: "api-key" })
 ], a.prototype, "apiKey", 2);
-d([
+y([
   j({ type: String, attribute: "tenant-id" })
 ], a.prototype, "tenantId", 2);
-d([
+y([
   j({ type: String, attribute: "product-sku" })
 ], a.prototype, "productSku", 2);
-d([
+y([
   j({ type: String, attribute: "api-url" })
 ], a.prototype, "apiUrl", 2);
-d([
+y([
   j({ type: Function, attribute: "onmeasurementaccepted" })
 ], a.prototype, "onMeasurementAccepted", 2);
-d([
+y([
   j({ type: Function, attribute: "onmeasurementcanceled" })
 ], a.prototype, "onMeasurementCanceled", 2);
-d([
+y([
   j({ type: String })
 ], a.prototype, "culture", 1);
-d([
+y([
   J()
 ], a.prototype, "errorMap", 1);
-d([
+y([
   J()
 ], a.prototype, "measurerKey", 2);
-d([
+y([
   J()
 ], a.prototype, "_isLocaleLoading", 2);
-d([
+y([
   J()
 ], a.prototype, "showModal", 2);
-d([
+y([
   J()
 ], a.prototype, "step", 2);
-d([
+y([
   J()
 ], a.prototype, "height", 2);
-d([
+y([
   J()
 ], a.prototype, "recommendedSize", 2);
-d([
+y([
   J()
 ], a.prototype, "measurements", 2);
-d([
+y([
   J()
 ], a.prototype, "errorMessage", 2);
-d([
+y([
   J()
 ], a.prototype, "instructionMessage", 2);
-d([
+y([
   J()
 ], a.prototype, "shouldStartMeasurement", 2);
-d([
+y([
   J()
 ], a.prototype, "isLoading", 2);
-d([
+y([
   J()
 ], a.prototype, "isFetching", 2);
-d([
+y([
   J()
 ], a.prototype, "cameras", 2);
-d([
+y([
   J()
 ], a.prototype, "currentCameraId", 2);
-a = d([
+a = y([
   R("body-measurer"),
   C()
 ], a);

package/dist/body-measurer.umd.js

@@ -10,9 +10,9 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const G=globalThis,_=G.trustedTypes,OA=_?_.createPolicy("lit-html",{createHTML:r=>r}):void 0,vA="$lit$",K=`lit$${Math.random().toFixed(9).slice(2)}$`,WA="?"+K,tt=`<${WA}>`,O=document,F=()=>O.createComment(""),M=r=>r===null||typeof r!="object"&&typeof r!="function",qA=Array.isArray,lt=r=>qA(r)||typeof(r==null?void 0:r[Symbol.iterator])=="function",SA=`[ 	
-\f\r]`,h=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,bA=/-->/g,oA=/>/g,v=RegExp(`>|${SA}(?:([^\\s"'>=/]+)(${SA}*=${SA}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`,"g"),LA=/'/g,fA=/"/g,PA=/^(?:script|style|textarea|title)$/i,et=r=>(A,...t)=>({_$litType$:r,strings:A,values:t}),J=et(1),W=Symbol.for("lit-noChange"),j=Symbol.for("lit-nothing"),mA=new WeakMap,b=O.createTreeWalker(O,129);function ZA(r,A){if(!qA(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return OA!==void 0?OA.createHTML(A):A}const rt=(r,A)=>{const t=r.length-1,l=[];let e,p=A===2?"<svg>":A===3?"<math>":"",n=h;for(let S=0;S<t;S++){const q=r[S];let y,k,d=-1,i=0;for(;i<q.length&&(n.lastIndex=i,k=n.exec(q),k!==null);)i=n.lastIndex,n===h?k[1]==="!--"?n=bA:k[1]!==void 0?n=oA:k[2]!==void 0?(PA.test(k[2])&&(e=RegExp("</"+k[2],"g")),n=v):k[3]!==void 0&&(n=v):n===v?k[0]===">"?(n=e??h,d=-1):k[1]===void 0?d=-2:(d=n.lastIndex-k[2].length,y=k[1],n=k[3]===void 0?v:k[3]==='"'?fA:LA):n===fA||n===LA?n=v:n===bA||n===oA?n=h:(n=v,e=void 0);const U=n===v&&r[S+1].startsWith("/>")?" ":"";p+=n===h?q+tt:d>=0?(l.push(y),q.slice(0,d)+vA+q.slice(d)+K+U):q+K+(d===-2?S:U)}return[ZA(r,p+(r[t]||"<?>")+(A===2?"</svg>":A===3?"</math>":"")),l]};class E{constructor({strings:A,_$litType$:t},l){let e;this.parts=[];let p=0,n=0;const S=A.length-1,q=this.parts,[y,k]=rt(A,t);if(this.el=E.createElement(y,l),b.currentNode=this.el.content,t===2||t===3){const d=this.el.content.firstChild;d.replaceWith(...d.childNodes)}for(;(e=b.nextNode())!==null&&q.length<S;){if(e.nodeType===1){if(e.hasAttributes())for(const d of e.getAttributeNames())if(d.endsWith(vA)){const i=k[n++],U=e.getAttribute(d).split(K),eA=/([.?@])?(.*)/.exec(i);q.push({type:1,index:p,name:eA[2],strings:U,ctor:eA[1]==="."?nt:eA[1]==="?"?Vt:eA[1]==="@"?qt:$}),e.removeAttribute(d)}else d.startsWith(K)&&(q.push({type:6,index:p}),e.removeAttribute(d));if(PA.test(e.tagName)){const d=e.textContent.split(K),i=d.length-1;if(i>0){e.textContent=_?_.emptyScript:"";for(let U=0;U<i;U++)e.append(d[U],F()),b.nextNode(),q.push({type:2,index:++p});e.append(d[i],F())}}}else if(e.nodeType===8)if(e.data===WA)q.push({type:2,index:p});else{let d=-1;for(;(d=e.data.indexOf(K,d+1))!==-1;)q.push({type:7,index:p}),d+=K.length-1}p++}}static createElement(A,t){const l=O.createElement("template");return l.innerHTML=A,l}}function N(r,A,t=r,l){var n,S;if(A===W)return A;let e=l!==void 0?(n=t._$Co)==null?void 0:n[l]:t._$Cl;const p=M(A)?void 0:A._$litDirective$;return(e==null?void 0:e.constructor)!==p&&((S=e==null?void 0:e._$AO)==null||S.call(e,!1),p===void 0?e=void 0:(e=new p(r),e._$AT(r,t,l)),l!==void 0?(t._$Co??(t._$Co=[]))[l]=e:t._$Cl=e),e!==void 0&&(A=N(r,e._$AS(r,A.values),e,l)),A}class pt{constructor(A,t){this._$AV=[],this._$AN=void 0,this._$AD=A,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(A){const{el:{content:t},parts:l}=this._$AD,e=((A==null?void 0:A.creationScope)??O).importNode(t,!0);b.currentNode=e;let p=b.nextNode(),n=0,S=0,q=l[0];for(;q!==void 0;){if(n===q.index){let y;q.type===2?y=new I(p,p.nextSibling,this,A):q.type===1?y=new q.ctor(p,q.name,q.strings,this,A):q.type===6&&(y=new St(p,this,A)),this._$AV.push(y),q=l[++S]}n!==(q==null?void 0:q.index)&&(p=b.nextNode(),n++)}return b.currentNode=O,e}p(A){let t=0;for(const l of this._$AV)l!==void 0&&(l.strings!==void 0?(l._$AI(A,l,t),t+=l.strings.length-2):l._$AI(A[t])),t++}}class I{get _$AU(){var A;return((A=this._$AM)==null?void 0:A._$AU)??this._$Cv}constructor(A,t,l,e){this.type=2,this._$AH=j,this._$AN=void 0,this._$AA=A,this._$AB=t,this._$AM=l,this.options=e,this._$Cv=(e==null?void 0:e.isConnected)??!0}get parentNode(){let A=this._$AA.parentNode;const t=this._$AM;return t!==void 0&&(A==null?void 0:A.nodeType)===11&&(A=t.parentNode),A}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(A,t=this){A=N(this,A,t),M(A)?A===j||A==null||A===""?(this._$AH!==j&&this._$AR(),this._$AH=j):A!==this._$AH&&A!==W&&this._(A):A._$litType$!==void 0?this.$(A):A.nodeType!==void 0?this.T(A):lt(A)?this.k(A):this._(A)}O(A){return this._$AA.parentNode.insertBefore(A,this._$AB)}T(A){this._$AH!==A&&(this._$AR(),this._$AH=this.O(A))}_(A){this._$AH!==j&&M(this._$AH)?this._$AA.nextSibling.data=A:this.T(O.createTextNode(A)),this._$AH=A}$(A){var p;const{values:t,_$litType$:l}=A,e=typeof l=="number"?this._$AC(A):(l.el===void 0&&(l.el=E.createElement(ZA(l.h,l.h[0]),this.options)),l);if(((p=this._$AH)==null?void 0:p._$AD)===e)this._$AH.p(t);else{const n=new pt(e,this),S=n.u(this.options);n.p(t),this.T(S),this._$AH=n}}_$AC(A){let t=mA.get(A.strings);return t===void 0&&mA.set(A.strings,t=new E(A)),t}k(A){qA(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let l,e=0;for(const p of A)e===t.length?t.push(l=new I(this.O(F()),this.O(F()),this,this.options)):l=t[e],l._$AI(p),e++;e<t.length&&(this._$AR(l&&l._$AB.nextSibling,e),t.length=e)}_$AR(A=this._$AA.nextSibling,t){var l;for((l=this._$AP)==null?void 0:l.call(this,!1,!0,t);A&&A!==this._$AB;){const e=A.nextSibling;A.remove(),A=e}}setConnected(A){var t;this._$AM===void 0&&(this._$Cv=A,(t=this._$AP)==null||t.call(this,A))}}class ${get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(A,t,l,e,p){this.type=1,this._$AH=j,this._$AN=void 0,this.element=A,this.name=t,this._$AM=e,this.options=p,l.length>2||l[0]!==""||l[1]!==""?(this._$AH=Array(l.length-1).fill(new String),this.strings=l):this._$AH=j}_$AI(A,t=this,l,e){const p=this.strings;let n=!1;if(p===void 0)A=N(this,A,t,0),n=!M(A)||A!==this._$AH&&A!==W,n&&(this._$AH=A);else{const S=A;let q,y;for(A=p[0],q=0;q<p.length-1;q++)y=N(this,S[l+q],t,q),y===W&&(y=this._$AH[q]),n||(n=!M(y)||y!==this._$AH[q]),y===j?A=j:A!==j&&(A+=(y??"")+p[q+1]),this._$AH[q]=y}n&&!e&&this.j(A)}j(A){A===j?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,A??"")}}class nt extends ${constructor(){super(...arguments),this.type=3}j(A){this.element[this.name]=A===j?void 0:A}}class Vt extends ${constructor(){super(...arguments),this.type=4}j(A){this.element.toggleAttribute(this.name,!!A&&A!==j)}}class qt extends ${constructor(A,t,l,e,p){super(A,t,l,e,p),this.type=5}_$AI(A,t=this){if((A=N(this,A,t,0)??j)===W)return;const l=this._$AH,e=A===j&&l!==j||A.capture!==l.capture||A.once!==l.once||A.passive!==l.passive,p=A!==j&&(l===j||e);e&&this.element.removeEventListener(this.name,this,l),p&&this.element.addEventListener(this.name,this,A),this._$AH=A}handleEvent(A){var t;typeof this._$AH=="function"?this._$AH.call(((t=this.options)==null?void 0:t.host)??this.element,A):this._$AH.handleEvent(A)}}class St{constructor(A,t,l){this.element=A,this.type=6,this._$AN=void 0,this._$AM=t,this.options=l}get _$AU(){return this._$AM._$AU}_$AI(A){N(this,A)}}const aA=G.litHtmlPolyfillSupport;aA==null||aA(E,I),(G.litHtmlVersions??(G.litHtmlVersions=[])).push("3.3.0");const at=(r,A,t)=>{const l=(t==null?void 0:t.renderBefore)??A;let e=l._$litPart$;if(e===void 0){const p=(t==null?void 0:t.renderBefore)??null;l._$litPart$=e=new I(A.insertBefore(F(),p),p,void 0,t??{})}return e._$AI(r),e};/**
+ */const G=globalThis,_=G.trustedTypes,vA=_?_.createPolicy("lit-html",{createHTML:r=>r}):void 0,OA="$lit$",K=`lit$${Math.random().toFixed(9).slice(2)}$`,WA="?"+K,tt=`<${WA}>`,v=document,F=()=>v.createComment(""),M=r=>r===null||typeof r!="object"&&typeof r!="function",qA=Array.isArray,lt=r=>qA(r)||typeof(r==null?void 0:r[Symbol.iterator])=="function",SA=`[ 	
+\f\r]`,h=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,bA=/-->/g,oA=/>/g,O=RegExp(`>|${SA}(?:([^\\s"'>=/]+)(${SA}*=${SA}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),LA=/'/g,fA=/"/g,PA=/^(?:script|style|textarea|title)$/i,et=r=>(A,...t)=>({_$litType$:r,strings:A,values:t}),J=et(1),W=Symbol.for("lit-noChange"),j=Symbol.for("lit-nothing"),mA=new WeakMap,b=v.createTreeWalker(v,129);function ZA(r,A){if(!qA(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return vA!==void 0?vA.createHTML(A):A}const rt=(r,A)=>{const t=r.length-1,l=[];let e,p=A===2?"<svg>":A===3?"<math>":"",n=h;for(let S=0;S<t;S++){const q=r[S];let y,k,d=-1,i=0;for(;i<q.length&&(n.lastIndex=i,k=n.exec(q),k!==null);)i=n.lastIndex,n===h?k[1]==="!--"?n=bA:k[1]!==void 0?n=oA:k[2]!==void 0?(PA.test(k[2])&&(e=RegExp("</"+k[2],"g")),n=O):k[3]!==void 0&&(n=O):n===O?k[0]===">"?(n=e??h,d=-1):k[1]===void 0?d=-2:(d=n.lastIndex-k[2].length,y=k[1],n=k[3]===void 0?O:k[3]==='"'?fA:LA):n===fA||n===LA?n=O:n===bA||n===oA?n=h:(n=O,e=void 0);const U=n===O&&r[S+1].startsWith("/>")?" ":"";p+=n===h?q+tt:d>=0?(l.push(y),q.slice(0,d)+OA+q.slice(d)+K+U):q+K+(d===-2?S:U)}return[ZA(r,p+(r[t]||"<?>")+(A===2?"</svg>":A===3?"</math>":"")),l]};class E{constructor({strings:A,_$litType$:t},l){let e;this.parts=[];let p=0,n=0;const S=A.length-1,q=this.parts,[y,k]=rt(A,t);if(this.el=E.createElement(y,l),b.currentNode=this.el.content,t===2||t===3){const d=this.el.content.firstChild;d.replaceWith(...d.childNodes)}for(;(e=b.nextNode())!==null&&q.length<S;){if(e.nodeType===1){if(e.hasAttributes())for(const d of e.getAttributeNames())if(d.endsWith(OA)){const i=k[n++],U=e.getAttribute(d).split(K),eA=/([.?@])?(.*)/.exec(i);q.push({type:1,index:p,name:eA[2],strings:U,ctor:eA[1]==="."?nt:eA[1]==="?"?Vt:eA[1]==="@"?qt:$}),e.removeAttribute(d)}else d.startsWith(K)&&(q.push({type:6,index:p}),e.removeAttribute(d));if(PA.test(e.tagName)){const d=e.textContent.split(K),i=d.length-1;if(i>0){e.textContent=_?_.emptyScript:"";for(let U=0;U<i;U++)e.append(d[U],F()),b.nextNode(),q.push({type:2,index:++p});e.append(d[i],F())}}}else if(e.nodeType===8)if(e.data===WA)q.push({type:2,index:p});else{let d=-1;for(;(d=e.data.indexOf(K,d+1))!==-1;)q.push({type:7,index:p}),d+=K.length-1}p++}}static createElement(A,t){const l=v.createElement("template");return l.innerHTML=A,l}}function N(r,A,t=r,l){var n,S;if(A===W)return A;let e=l!==void 0?(n=t._$Co)==null?void 0:n[l]:t._$Cl;const p=M(A)?void 0:A._$litDirective$;return(e==null?void 0:e.constructor)!==p&&((S=e==null?void 0:e._$AO)==null||S.call(e,!1),p===void 0?e=void 0:(e=new p(r),e._$AT(r,t,l)),l!==void 0?(t._$Co??(t._$Co=[]))[l]=e:t._$Cl=e),e!==void 0&&(A=N(r,e._$AS(r,A.values),e,l)),A}class pt{constructor(A,t){this._$AV=[],this._$AN=void 0,this._$AD=A,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(A){const{el:{content:t},parts:l}=this._$AD,e=((A==null?void 0:A.creationScope)??v).importNode(t,!0);b.currentNode=e;let p=b.nextNode(),n=0,S=0,q=l[0];for(;q!==void 0;){if(n===q.index){let y;q.type===2?y=new I(p,p.nextSibling,this,A):q.type===1?y=new q.ctor(p,q.name,q.strings,this,A):q.type===6&&(y=new St(p,this,A)),this._$AV.push(y),q=l[++S]}n!==(q==null?void 0:q.index)&&(p=b.nextNode(),n++)}return b.currentNode=v,e}p(A){let t=0;for(const l of this._$AV)l!==void 0&&(l.strings!==void 0?(l._$AI(A,l,t),t+=l.strings.length-2):l._$AI(A[t])),t++}}class I{get _$AU(){var A;return((A=this._$AM)==null?void 0:A._$AU)??this._$Cv}constructor(A,t,l,e){this.type=2,this._$AH=j,this._$AN=void 0,this._$AA=A,this._$AB=t,this._$AM=l,this.options=e,this._$Cv=(e==null?void 0:e.isConnected)??!0}get parentNode(){let A=this._$AA.parentNode;const t=this._$AM;return t!==void 0&&(A==null?void 0:A.nodeType)===11&&(A=t.parentNode),A}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(A,t=this){A=N(this,A,t),M(A)?A===j||A==null||A===""?(this._$AH!==j&&this._$AR(),this._$AH=j):A!==this._$AH&&A!==W&&this._(A):A._$litType$!==void 0?this.$(A):A.nodeType!==void 0?this.T(A):lt(A)?this.k(A):this._(A)}O(A){return this._$AA.parentNode.insertBefore(A,this._$AB)}T(A){this._$AH!==A&&(this._$AR(),this._$AH=this.O(A))}_(A){this._$AH!==j&&M(this._$AH)?this._$AA.nextSibling.data=A:this.T(v.createTextNode(A)),this._$AH=A}$(A){var p;const{values:t,_$litType$:l}=A,e=typeof l=="number"?this._$AC(A):(l.el===void 0&&(l.el=E.createElement(ZA(l.h,l.h[0]),this.options)),l);if(((p=this._$AH)==null?void 0:p._$AD)===e)this._$AH.p(t);else{const n=new pt(e,this),S=n.u(this.options);n.p(t),this.T(S),this._$AH=n}}_$AC(A){let t=mA.get(A.strings);return t===void 0&&mA.set(A.strings,t=new E(A)),t}k(A){qA(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let l,e=0;for(const p of A)e===t.length?t.push(l=new I(this.O(F()),this.O(F()),this,this.options)):l=t[e],l._$AI(p),e++;e<t.length&&(this._$AR(l&&l._$AB.nextSibling,e),t.length=e)}_$AR(A=this._$AA.nextSibling,t){var l;for((l=this._$AP)==null?void 0:l.call(this,!1,!0,t);A&&A!==this._$AB;){const e=A.nextSibling;A.remove(),A=e}}setConnected(A){var t;this._$AM===void 0&&(this._$Cv=A,(t=this._$AP)==null||t.call(this,A))}}class ${get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(A,t,l,e,p){this.type=1,this._$AH=j,this._$AN=void 0,this.element=A,this.name=t,this._$AM=e,this.options=p,l.length>2||l[0]!==""||l[1]!==""?(this._$AH=Array(l.length-1).fill(new String),this.strings=l):this._$AH=j}_$AI(A,t=this,l,e){const p=this.strings;let n=!1;if(p===void 0)A=N(this,A,t,0),n=!M(A)||A!==this._$AH&&A!==W,n&&(this._$AH=A);else{const S=A;let q,y;for(A=p[0],q=0;q<p.length-1;q++)y=N(this,S[l+q],t,q),y===W&&(y=this._$AH[q]),n||(n=!M(y)||y!==this._$AH[q]),y===j?A=j:A!==j&&(A+=(y??"")+p[q+1]),this._$AH[q]=y}n&&!e&&this.j(A)}j(A){A===j?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,A??"")}}class nt extends ${constructor(){super(...arguments),this.type=3}j(A){this.element[this.name]=A===j?void 0:A}}class Vt extends ${constructor(){super(...arguments),this.type=4}j(A){this.element.toggleAttribute(this.name,!!A&&A!==j)}}class qt extends ${constructor(A,t,l,e,p){super(A,t,l,e,p),this.type=5}_$AI(A,t=this){if((A=N(this,A,t,0)??j)===W)return;const l=this._$AH,e=A===j&&l!==j||A.capture!==l.capture||A.once!==l.once||A.passive!==l.passive,p=A!==j&&(l===j||e);e&&this.element.removeEventListener(this.name,this,l),p&&this.element.addEventListener(this.name,this,A),this._$AH=A}handleEvent(A){var t;typeof this._$AH=="function"?this._$AH.call(((t=this.options)==null?void 0:t.host)??this.element,A):this._$AH.handleEvent(A)}}class St{constructor(A,t,l){this.element=A,this.type=6,this._$AN=void 0,this._$AM=t,this.options=l}get _$AU(){return this._$AM._$AU}_$AI(A){N(this,A)}}const aA=G.litHtmlPolyfillSupport;aA==null||aA(E,I),(G.litHtmlVersions??(G.litHtmlVersions=[])).push("3.3.0");const at=(r,A,t)=>{const l=(t==null?void 0:t.renderBefore)??A;let e=l._$litPart$;if(e===void 0){const p=(t==null?void 0:t.renderBefore)??null;l._$litPart$=e=new I(A.insertBefore(F(),p),p,void 0,t??{})}return e._$AI(r),e};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -68,7 +68,7 @@
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function yA(r){window.dispatchEvent(new CustomEvent(uA,{detail:r}))}let AA="",cA,MA,tA,jA,hA,L=new zA;L.resolve();let lA=0;const Ut=r=>(ct((A,t)=>xt(hA,A,t)),AA=MA=r.sourceLocale,tA=new Set(r.targetLocales),tA.add(r.sourceLocale),jA=r.loadLocale,{getLocale:Ot,setLocale:vt}),Ot=()=>AA,vt=r=>{if(r===(cA??AA))return L.promise;if(!tA||!jA)throw new Error("Internal error");if(!tA.has(r))throw new Error("Invalid locale code");lA++;const A=lA;return cA=r,L.settled&&(L=new zA),yA({status:"loading",loadingLocale:r}),(r===MA?Promise.resolve({templates:void 0}):jA(r)).then(l=>{lA===A&&(AA=r,cA=void 0,hA=l.templates,yA({status:"ready",readyLocale:r}),L.resolve())},l=>{lA===A&&(yA({status:"error",errorLocale:r,errorMessage:l.toString()}),L.reject(l))}),L.promise},EA="en",Wt=["pt-BR"];/**
+ */function yA(r){window.dispatchEvent(new CustomEvent(uA,{detail:r}))}let AA="",cA,MA,tA,jA,hA,L=new zA;L.resolve();let lA=0;const Ut=r=>(ct((A,t)=>xt(hA,A,t)),AA=MA=r.sourceLocale,tA=new Set(r.targetLocales),tA.add(r.sourceLocale),jA=r.loadLocale,{getLocale:vt,setLocale:Ot}),vt=()=>AA,Ot=r=>{if(r===(cA??AA))return L.promise;if(!tA||!jA)throw new Error("Internal error");if(!tA.has(r))throw new Error("Invalid locale code");lA++;const A=lA;return cA=r,L.settled&&(L=new zA),yA({status:"loading",loadingLocale:r}),(r===MA?Promise.resolve({templates:void 0}):jA(r)).then(l=>{lA===A&&(AA=r,cA=void 0,hA=l.templates,yA({status:"ready",readyLocale:r}),L.resolve())},l=>{lA===A&&(yA({status:"error",errorLocale:r,errorMessage:l.toString()}),L.reject(l))}),L.promise},EA="en",Wt=["pt-BR"];/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
@@ -267,14 +267,16 @@ label="${V("Let's go!")}"
 ></xact-button> 
          
     `}};Y.styles=m`
-   :host {
+  :host {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: column; /* Força coluna para evitar problemas de flex-start */
+  justify-content: flex-start;
+  align-items: stretch;    /* Evita que filhos desapareçam no Safari */
   font-family: "Lato", sans-serif;
   box-sizing: border-box;
-  padding: 16px; 
+  padding: 16px;
   width: 100%;
+  min-height: 100vh;       /* Garante que o conteúdo caiba */
 }
 
 .component-content {
@@ -283,6 +285,7 @@ label="${V("Let's go!")}"
   gap: 12px;
   width: 100%;
   max-width: 960px;
+  margin: 0 auto;
 }
 
 .header-section {
@@ -306,12 +309,14 @@ label="${V("Let's go!")}"
 
 .main-section {
   display: flex;
-  flex-direction: row; 
+  flex-direction: row;
   gap: 24px;
+  flex-wrap: wrap; /* Evita overflow de elementos */
+  justify-content: center;
 }
 
 .images-section {
-  flex: 1;
+  flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -321,54 +326,52 @@ label="${V("Let's go!")}"
   width: 100%;
   max-width: 400px;
   height: auto;
+  flex-shrink: 0; /* Evita sumir no Safari */
 }
 
 .tips-section {
-  flex: 1;
+  flex: 1 1 200px;
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
 
-   form {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      gap: 16px; 
-      width: 100%;
-    }
-
-        label {
-      font-size: 16px;
-      color: #333;
-      text-align: start;
-    }
+.tips-section form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+}
 
-    input {
-      width: 100%;
-      max-width: 150px;
-      padding: 12px;
-      font-size: 16px;
-      border: 1px solid #ccc;
-      border-radius: 6px;
-      box-sizing: border-box;
-      font-family: "Lato", sans-serif;
-      text-align: start;
-    }
+.tips-section label {
+  font-size: 16px;
+  color: #333;
+}
 
-     input:focus {
-      outline: 2px solid var(--brand-primary);
-      outline-offset: 2px;
-    }
+.tips-section input {
+  width: 100%;
+  max-width: 150px;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-sizing: border-box;
 }
 
- .xact-button {
-      width: 100%;
-      max-width: 150px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+.tips-section input:focus {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+}
 
-    }   
+.xact-button {
+  width: 100%;
+  max-width: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0; /* Evita sumir no Safari */
+}
 
 .tip-item {
   margin-bottom: 4px;
@@ -397,104 +400,112 @@ label="${V("Let's go!")}"
   margin: 0 auto;
 }
 
-  @media (max-width: 754px) {
-      .main-section {
-        flex-direction: column;
-        gap: 16px;
-        align-items: center;
-      }
+/* Responsividade para mobile */
+@media (max-width: 754px) {
+  .main-section {
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+  }
 
-      .images-section {
-        order: -1;
-        width: 100%;
-      }
+  .images-section {
+    order: -1;
+    width: 100%;
+  }
 
-      .images-section svg {
-        width: 90%;
-        max-width: 220px;
-        height: auto;
-      }
+  .images-section svg {
+    width: 80%;
+    max-width: 180px;
+  }
 
-      .tips-section {
-        width: 100%;
-        gap: 8px;
-        align-items: center;
-      }
+  .tips-section {
+    width: 100%;
+    gap: 6px;
+    align-items: flex-start;
+  }
 
-      form {
-        align-items: center;
-        width: 100%;
-      }
+  .tips-section form {
+    width: 100%;
+    align-items: flex-start;
+  }
 
-      input {
-        max-width: 100%;
-        font-size: 14px;
-        padding: 10px;
-      }
+  .tips-section input {
+    max-width: 100%;
+    font-size: 14px;
+    padding: 10px;
+  }
 
-      label {
-        text-align: center;
-        font-size: 14px;
-      }
+  .tips-section label {
+    font-size: 14px;
+  }
 
-      .xact-button {
-        max-width: 100%;
-      }
+  .xact-button {
+    max-width: 100%;
+  }
 
-      .header-text {
-        font-size: 20px;
-        text-align: center;
-      }
+  .header-text {
+    font-size: 20px;
+    text-align: center;
+  }
 
-      .description-text {
-        font-size: 14px;
-        text-align: center;
-      }
+  .description-text {
+    font-size: 14px;
+    text-align: center;
+  }
 
-      .tip-title {
-        font-size: 12px;
-      }
+  .tip-title {
+    font-size: 12px;
+  }
 
-      .tip-text {
-        font-size: 11px;
-      }
+  .tip-text {
+    font-size: 11px;
+    margin-left: 0;
+  }
 
-      .buttons {
-        gap: 8px;
-        width: 100%;
-        max-width: 100%;
-      }
-    }
+  .buttons {
+    width: 100%;
+    max-width: 100%;
+    gap: 8px;
+    margin-top: 12px;
+  }
+}
 
-    /* 📱 Extra pequeno (até 380px) */
-    @media (max-width: 380px) {
-      :host {
-        padding: 8px;
-      }
+/* Ajuste fino para iPhones muito pequenos */
+@media (max-width: 380px) {
+  :host {
+    padding: 12px;
+  }
 
-      .component-content {
-        gap: 8px;
-      }
+  .images-section svg {
+    max-width: 150px;
+  }
 
-      .header-text {
-        font-size: 18px;
-      }
+  .header-text {
+    font-size: 18px;
+  }
 
-      .description-text {
-        font-size: 13px;
-      }
+  .description-text {
+    font-size: 13px;
+  }
 
-      input {
-        font-size: 13px;
-        padding: 8px;
-      }
+  .tip-title {
+    font-size: 11px;
+  }
 
-      .xact-button {
-        font-size: 14px;
-      }
-    
- 
+  .tip-text {
+    font-size: 10px;
+  }
+
+  .xact-button {
+    padding: 8px;
+  }
+
+  .buttons {
+    gap: 6px;
+  }
 }
+
+  
   `,kA([c({type:Number})],Y.prototype,"height",2),kA([c({type:Function})],Y.prototype,"onStartMeasurement",2),Y=kA([R("xact-step-one"),w()],Y);var Rt=Object.getOwnPropertyDescriptor,Ht=(r,A,t,l)=>{for(var e=l>1?void 0:l?Rt(A,t):A,p=r.length-1,n;p>=0;p--)(n=r[p])&&(e=n(e)||e);return e};let TA=class extends X{render(){return J`
      <footer class="modal-footer">
           <span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xactsize-webcomponents",
-  "version": "1.0.23",
+  "version": "1.0.26",
   "description": "A web component for body measurements and size recommendations",
   "main": "dist/body-measurer.umd.js",
   "module": "dist/body-measurer.es.js",