xactsize-webcomponents 1.0.27 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,7 +16,7 @@ const wA = (l, A, t) => {
16
16
  * Copyright 2019 Google LLC
17
17
  * SPDX-License-Identifier: BSD-3-Clause
18
18
  */
19
- 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();
19
+ 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();
20
20
  let ZA = class {
21
21
  constructor(A, t, r) {
22
22
  if (this._$cssResult$ = !0, r !== uA) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -25,7 +25,7 @@ let ZA = class {
25
25
  get styleSheet() {
26
26
  let A = this.o;
27
27
  const t = this.t;
28
- if (yA && A === void 0) {
28
+ if (dA && A === void 0) {
29
29
  const r = t !== void 0 && t.length === 1;
30
30
  r && (A = TA.get(t)), A === void 0 && ((this.o = A = new CSSStyleSheet()).replaceSync(this.cssText), r && TA.set(t, A));
31
31
  }
@@ -35,23 +35,23 @@ let ZA = class {
35
35
  return this.cssText;
36
36
  }
37
37
  };
38
- const CA = (l) => new ZA(typeof l == "string" ? l : l + "", void 0, uA), N = (l, ...A) => {
38
+ const YA = (l) => new ZA(typeof l == "string" ? l : l + "", void 0, uA), N = (l, ...A) => {
39
39
  const t = l.length === 1 ? l[0] : A.reduce((r, e, p) => r + ((V) => {
40
40
  if (V._$cssResult$ === !0) return V.cssText;
41
41
  if (typeof V == "number") return V;
42
42
  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.");
43
43
  })(e) + l[p + 1], l[0]);
44
44
  return new ZA(t, l, uA);
45
- }, YA = (l, A) => {
46
- if (yA) l.adoptedStyleSheets = A.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
45
+ }, CA = (l, A) => {
46
+ if (dA) l.adoptedStyleSheets = A.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
47
47
  else for (const t of A) {
48
48
  const r = document.createElement("style"), e = B.litNonce;
49
49
  e !== void 0 && r.setAttribute("nonce", e), r.textContent = t.cssText, l.appendChild(r);
50
50
  }
51
- }, XA = yA ? (l) => l : (l) => l instanceof CSSStyleSheet ? ((A) => {
51
+ }, XA = dA ? (l) => l : (l) => l instanceof CSSStyleSheet ? ((A) => {
52
52
  let t = "";
53
53
  for (const r of A.cssRules) t += r.cssText;
54
- return CA(t);
54
+ return YA(t);
55
55
  })(l) : l;
56
56
  /**
57
57
  * @license
@@ -172,7 +172,7 @@ let m = class extends HTMLElement {
172
172
  }
173
173
  createRenderRoot() {
174
174
  const A = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
175
- return YA(A, this.constructor.elementStyles), A;
175
+ return CA(A, this.constructor.elementStyles), A;
176
176
  }
177
177
  connectedCallback() {
178
178
  var A;
@@ -307,10 +307,10 @@ const rt = (l, A) => {
307
307
  let e, p = A === 2 ? "<svg>" : A === 3 ? "<math>" : "", V = H;
308
308
  for (let S = 0; S < t; S++) {
309
309
  const q = l[S];
310
- let u, k, d = -1, x = 0;
311
- 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);
310
+ let u, k, y = -1, x = 0;
311
+ 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);
312
312
  const s = V === W && l[S + 1].startsWith("/>") ? " " : "";
313
- 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);
313
+ 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);
314
314
  }
315
315
  return [zA(l, p + (l[t] || "<?>") + (A === 2 ? "</svg>" : A === 3 ? "</math>" : "")), r];
316
316
  };
@@ -321,27 +321,27 @@ class h {
321
321
  let p = 0, V = 0;
322
322
  const S = A.length - 1, q = this.parts, [u, k] = rt(A, t);
323
323
  if (this.el = h.createElement(u, r), O.currentNode = this.el.content, t === 2 || t === 3) {
324
- const d = this.el.content.firstChild;
325
- d.replaceWith(...d.childNodes);
324
+ const y = this.el.content.firstChild;
325
+ y.replaceWith(...y.childNodes);
326
326
  }
327
327
  for (; (e = O.nextNode()) !== null && q.length < S; ) {
328
328
  if (e.nodeType === 1) {
329
- if (e.hasAttributes()) for (const d of e.getAttributeNames()) if (d.endsWith(NA)) {
330
- const x = k[V++], s = e.getAttribute(d).split(K), Q = /([.?@])?(.*)/.exec(x);
331
- 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);
332
- } else d.startsWith(K) && (q.push({ type: 6, index: p }), e.removeAttribute(d));
329
+ if (e.hasAttributes()) for (const y of e.getAttributeNames()) if (y.endsWith(NA)) {
330
+ const x = k[V++], s = e.getAttribute(y).split(K), Q = /([.?@])?(.*)/.exec(x);
331
+ 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);
332
+ } else y.startsWith(K) && (q.push({ type: 6, index: p }), e.removeAttribute(y));
333
333
  if (HA.test(e.tagName)) {
334
- const d = e.textContent.split(K), x = d.length - 1;
334
+ const y = e.textContent.split(K), x = y.length - 1;
335
335
  if (x > 0) {
336
336
  e.textContent = $ ? $.emptyScript : "";
337
- for (let s = 0; s < x; s++) e.append(d[s], F()), O.nextNode(), q.push({ type: 2, index: ++p });
338
- e.append(d[x], F());
337
+ for (let s = 0; s < x; s++) e.append(y[s], F()), O.nextNode(), q.push({ type: 2, index: ++p });
338
+ e.append(y[x], F());
339
339
  }
340
340
  }
341
341
  } else if (e.nodeType === 8) if (e.data === RA) q.push({ type: 2, index: p });
342
342
  else {
343
- let d = -1;
344
- for (; (d = e.data.indexOf(K, d + 1)) !== -1; ) q.push({ type: 7, index: p }), d += K.length - 1;
343
+ let y = -1;
344
+ for (; (y = e.data.indexOf(K, y + 1)) !== -1; ) q.push({ type: 7, index: p }), y += K.length - 1;
345
345
  }
346
346
  p++;
347
347
  }
@@ -577,7 +577,7 @@ const R = (l) => (A, t) => {
577
577
  * Copyright 2017 Google LLC
578
578
  * SPDX-License-Identifier: BSD-3-Clause
579
579
  */
580
- const dt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged: jA }, yt = (l = dt, A, t) => {
580
+ const yt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged: jA }, dt = (l = yt, A, t) => {
581
581
  const { kind: r, metadata: e } = t;
582
582
  let p = globalThis.litPropertyMetadata.get(e);
583
583
  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 dt = { attribute: !0, type: String, converter: _, reflect: !1, hasChanged:
599
599
  throw Error("Unsupported decorator location: " + r);
600
600
  };
601
601
  function j(l) {
602
- return (A, t) => typeof t == "object" ? yt(l, A, t) : ((r, e, p) => {
602
+ return (A, t) => typeof t == "object" ? dt(l, A, t) : ((r, e, p) => {
603
603
  const V = e.hasOwnProperty(p);
604
604
  return e.constructor.createProperty(p, r), V ? Object.getOwnPropertyDescriptor(e, p) : void 0;
605
605
  })(l, A, t);
@@ -665,7 +665,7 @@ const kt = (l) => l.addController(new ct(l)), Jt = kt;
665
665
  * Copyright 2021 Google LLC
666
666
  * SPDX-License-Identifier: BSD-3-Clause
667
667
  */
668
- const C = () => (l, A) => (l.addInitializer(Jt), l);
668
+ const Y = () => (l, A) => (l.addInitializer(Jt), l);
669
669
  /**
670
670
  * @license
671
671
  * Copyright 2020 Google LLC
@@ -831,7 +831,7 @@ const Pt = ft(class extends ot {
831
831
  return f;
832
832
  }
833
833
  });
834
- var mt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, Y = (l, A, t, r) => {
834
+ var mt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, C = (l, A, t, r) => {
835
835
  for (var e = r > 1 ? void 0 : r ? Zt(A, t) : A, p = l.length - 1, V; p >= 0; p--)
836
836
  (V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
837
837
  return r && e && mt(A, t, e), e;
@@ -859,7 +859,7 @@ o.styles = N`
859
859
  :host {
860
860
  display: block;
861
861
  width: 100%;
862
- --brand-primary-fallback: #1C28BA;
862
+ --brand-primary-fallback: #000;
863
863
  --text-inverse-fallback: #FFFFFF;
864
864
  }
865
865
 
@@ -894,7 +894,7 @@ o.styles = N`
894
894
 
895
895
  /* Contained (azul cheio) */
896
896
  button.contained {
897
- background-color: var(--brand-primary, var(--brand-primary-fallback, #1C28BA));
897
+ background-color: var(--brand-primary, var(--brand-primary-fallback, #0000));
898
898
  color: var(--text-inverse, var(--text-inverse-fallback, #FFFFFF));
899
899
  border: none;
900
900
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
@@ -926,20 +926,29 @@ o.styles = N`
926
926
  cursor: not-allowed;
927
927
  box-shadow: none;
928
928
  }
929
+
930
+ @media (max-width: 380px) {
931
+ button {
932
+ padding: 10px 24px;
933
+ font-size: 8px;
934
+ min-height: 30px;
935
+
936
+ }
937
+ }
929
938
  `;
930
- Y([
939
+ C([
931
940
  j({ type: String })
932
941
  ], o.prototype, "type", 2);
933
- Y([
942
+ C([
934
943
  j({ type: String })
935
944
  ], o.prototype, "label", 2);
936
- Y([
945
+ C([
937
946
  j({ type: Boolean })
938
947
  ], o.prototype, "disabled", 2);
939
- Y([
948
+ C([
940
949
  j({ type: String })
941
950
  ], o.prototype, "variant", 2);
942
- o = Y([
951
+ o = C([
943
952
  R("xact-button")
944
953
  ], o);
945
954
  var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, kA = (l, A, t, r) => {
@@ -949,367 +958,225 @@ var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, kA = (l, A
949
958
  };
950
959
  let E = class extends X {
951
960
  constructor() {
952
- super(...arguments), this.height = 0;
953
- }
954
- render() {
955
- return T`
956
- <div class="component-content">
957
- <div class="header-section">
958
- <h2 class="header-text">${n("Before you begin")}</h2>
959
- <p class="description-text">
960
- ${n("Maintain an upright posture with your arms away from your body.")}
961
- </p>
962
- </div>
963
-
964
- <div class="main-section">
965
- <div class="tips-section">
966
- <h3>${n("Tips")}</h3>
967
- <div class="tip-item">
968
- <span class="tip-title">${n("Good Lighting")}</span>
969
- <p class="tip-text">${n("Choose a well-lit area where you can see your image clearly.")}</p>
970
- </div>
971
- <div class="tip-item">
972
- <span class="tip-title">${n("Clean Background")}</span>
973
- <p class="tip-text">${n("Position yourself against a plain background.")}</p>
974
- </div>
975
- <div class="tip-item">
976
- <span class="tip-title">${n("Clothes")}</span>
977
- <p class="tip-text">${n("Wear clothes that you usually wear on a daily basis.")}</p>
978
- </div>
979
- <div class="tip-item">
980
- <span class="tip-title">${n("Framing")}</span>
981
- <p class="tip-text">${n("Make sure your entire body is visible. The app will guide you.")}</p>
982
- </div>
983
-
984
- <form>
985
- <label for="height-input">
986
- ${n("To get started, please tell us your height.")}
987
- </label>
988
- <input id="height-input" type="number" min="50" max="300"
989
- placeholder=${n("Height (cm)")} required tabindex="1"/>
990
- </form>
991
- </div>
992
-
993
- <div class="images-section">
994
- <svg width="300" height="245" viewBox="0 0 300 245" fill="none" xmlns="http://www.w3.org/2000/svg">
995
- <path d="M162.404 20.4343H136.498V72.1681H162.404V20.4343Z" fill="#6D4A44"/>
996
- <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"/>
997
- <mask id="mask0_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="124" y="53" width="13" height="48">
998
- <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"/>
999
- </mask>
1000
- <g mask="url(#mask0_2344_2604)">
1001
- <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"/>
1002
- </g>
1003
- <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"/>
1004
- <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"/>
1005
- <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"/>
1006
- <mask id="mask1_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="161" y="53" width="14" height="48">
1007
- <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"/>
1008
- </mask>
1009
- <g mask="url(#mask1_2344_2604)">
1010
- <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"/>
1011
- </g>
1012
- <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"/>
1013
- <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"/>
1014
- <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"/>
1015
- <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"/>
1016
- <path d="M133.868 69.5197L131.244 61.8865" stroke="#EFE3D8" stroke-width="1.04569" stroke-miterlimit="10"/>
1017
- <path d="M165.141 69.5288L167.767 61.8865" stroke="#EFE3D8" stroke-width="1.04569" stroke-miterlimit="10"/>
1018
- <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"/>
1019
- <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"/>
1020
- <path d="M134.605 216.849L135.36 228.943H144.237V216.849H134.605Z" fill="#F3A396"/>
1021
- <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"/>
1022
- <path d="M117.661 237H145.311V235.072H117.661V237Z" fill="white"/>
1023
- <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"/>
1024
- <path d="M148.71 211.719H128.131V220.255H148.71V211.719Z" fill="#21262D"/>
1025
- <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"/>
1026
- <path d="M165.395 216.849L164.641 228.943H155.764V216.849H165.395Z" fill="#F3A396"/>
1027
- <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"/>
1028
- <path d="M182.341 235.072H154.691V237H182.341V235.072Z" fill="white"/>
1029
- <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"/>
1030
- <path d="M171.399 211.719H150.82V220.255H171.399V211.719Z" fill="#21262D"/>
1031
- <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"/>
1032
- <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"/>
1033
- <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"/>
1034
- <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"/>
1035
- <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"/>
1036
- <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"/>
1037
- <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"/>
1038
- <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"/>
1039
- <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"/>
1040
- <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"/>
1041
- <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"/>
1042
- <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"/>
1043
- <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"/>
1044
- <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"/>
1045
- <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"/>
1046
- <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"/>
1047
- <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"/>
1048
- </svg>
1049
-
1050
-
1051
-
1052
-
1053
- </div>
1054
-
1055
-
1056
- </div>
1057
-
1058
- <xact-button class="xact-button buttons"
1059
- @click=${() => {
961
+ super(...arguments), this.height = 0, this.handleStart = () => {
1060
962
  var A;
1061
- const l = this.shadowRoot.querySelector("#height-input");
963
+ const l = this.shadowRoot.querySelector(
964
+ "#height-input"
965
+ );
1062
966
  if (l != null && l.value) {
1063
967
  const t = parseInt(l.value);
1064
968
  this.height = t, (A = this.onStartMeasurement) == null || A.call(this, t);
1065
969
  }
1066
- }}
1067
- label="${n("Let's go!")}"
1068
- ></xact-button>
1069
-
1070
- `;
1071
- }
1072
- };
1073
- E.styles = N`
1074
- :host {
1075
- display: flex;
1076
- flex-direction: column; /* Força coluna para evitar problemas de flex-start */
1077
- justify-content: flex-start;
1078
- align-items: stretch; /* Evita que filhos desapareçam no Safari */
1079
- font-family: "Lato", sans-serif;
1080
- box-sizing: border-box;
1081
- padding: 16px;
1082
- width: 100%;
1083
- min-height: 100vh; /* Garante que o conteúdo caiba */
1084
- }
1085
-
1086
- .component-content {
1087
- display: flex;
1088
- flex-direction: column;
1089
- gap: 12px;
1090
- width: 100%;
1091
- max-width: 960px;
1092
- margin: 0 auto;
1093
- }
1094
-
1095
- .header-section {
1096
- text-align: left;
1097
- }
1098
-
1099
- .header-text {
1100
- font-size: 24px;
1101
- font-weight: 700;
1102
- color: #000;
1103
- margin-bottom: 8px;
1104
- line-height: 1.2;
1105
- }
1106
-
1107
- .description-text {
1108
- font-size: 16px;
1109
- font-weight: 400;
1110
- color: #333;
1111
- line-height: 1.6;
1112
- }
1113
-
1114
- .main-section {
1115
- display: flex;
1116
- flex-direction: row;
1117
- gap: 24px;
1118
- flex-wrap: wrap; /* Evita overflow de elementos */
1119
- justify-content: center;
1120
- }
1121
-
1122
- .images-section {
1123
- flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
1124
- display: flex;
1125
- justify-content: center;
1126
- align-items: center;
1127
- }
1128
-
1129
- .images-section svg {
1130
- width: 100%;
1131
- max-width: 400px;
1132
- height: auto;
1133
- flex-shrink: 0; /* Evita sumir no Safari */
1134
- }
1135
-
1136
- .tips-section {
1137
- flex: 1 1 200px;
1138
- display: flex;
1139
- flex-direction: column;
1140
- gap: 8px;
1141
- }
1142
-
1143
- .tips-section form {
1144
- display: flex;
1145
- flex-direction: column;
1146
- align-items: flex-start;
1147
- gap: 16px;
1148
- width: 100%;
1149
- }
1150
-
1151
- .tips-section label {
1152
- font-size: 16px;
1153
- color: #333;
1154
- }
1155
-
1156
- .tips-section input {
1157
- width: 100%;
1158
- max-width: 150px;
1159
- padding: 12px;
1160
- font-size: 16px;
1161
- border: 1px solid #ccc;
1162
- border-radius: 6px;
1163
- box-sizing: border-box;
1164
- }
1165
-
1166
- .tips-section input:focus {
1167
- outline: 2px solid var(--brand-primary);
1168
- outline-offset: 2px;
1169
- }
1170
-
1171
- .xact-button {
1172
- width: 100%;
1173
- max-width: 150px;
1174
- display: flex;
1175
- justify-content: center;
1176
- align-items: center;
1177
- flex-shrink: 0; /* Evita sumir no Safari */
1178
- }
1179
-
1180
- .tip-item {
1181
- margin-bottom: 4px;
1182
- }
1183
-
1184
- .tip-title {
1185
- font-weight: bold;
1186
- display: inline-block;
1187
- margin-bottom: 4px;
1188
- font-size: 14px;
1189
- }
1190
-
1191
- .tip-text {
1192
- margin-top: 0;
1193
- font-size: 12px;
1194
- }
1195
-
1196
- .buttons {
1197
- display: flex;
1198
- flex-direction: column;
1199
- gap: 12px;
1200
- align-items: center;
1201
- justify-content: center;
1202
- width: 100%;
1203
- max-width: 200px;
1204
- margin: 0 auto;
1205
- }
1206
-
1207
- /* Responsividade para mobile */
1208
- @media (max-width: 754px) {
1209
- .main-section {
1210
- flex-direction: column;
1211
- gap: 8px;
1212
- align-items: center;
970
+ };
1213
971
  }
972
+ render() {
973
+ return T`
974
+ <div class="card">
975
+ <div class="pill">XactSize x Canada Goose</div>
976
+ <h2 class="title">${n("Let's find your perfect size")}</h2>
977
+ <p class="subtitle">${n("Curated luxury. Perfect fit.")}</p>
978
+
979
+ <div class="tips">
980
+ <h4>${n("Tips")}</h4>
981
+
982
+ ${this.renderTip(n("Good Lighting"), n("Avoid backlighting"))}
983
+ ${this.renderTip(n("Clean Background"), n("Use a plain wall"))}
984
+ ${this.renderTip(n("Clothes"), n("Form-fitting gear"))}
985
+ ${this.renderTip(n("Framing"), n("Full body shot"))}
986
+ </div>
1214
987
 
1215
- .images-section {
1216
- order: -1;
1217
- width: 100%;
1218
- }
988
+ <div class="input-group">
989
+ <input
990
+ id="height-input"
991
+ class="height-input"
992
+ type="number"
993
+ min="50"
994
+ max="300"
995
+ placeholder=${n("Enter your height (cm)")}
996
+ required
997
+ tabindex="1"
998
+ />
999
+ </div>
1219
1000
 
1220
- .images-section svg {
1221
- width: 80%;
1222
- max-width: 180px;
1223
- }
1001
+ <div class="cta">
1002
+ <xact-button
1003
+ label="${n("Let's get started! →")}"
1004
+ style="--brand-primary: #000;"
1005
+ @click=${this.handleStart}
1006
+ ></xact-button>
1007
+ </div>
1224
1008
 
1225
- .tips-section {
1226
- width: 100%;
1227
- gap: 6px;
1228
- align-items: flex-start;
1009
+ <p class="disclaimer">
1010
+ ${n("By using Xactsize, you agree to our Terms and Privacy Policy.")}
1011
+ </p>
1012
+ </div>
1013
+ `;
1229
1014
  }
1230
-
1231
- .tips-section form {
1232
- width: 100%;
1233
- align-items: flex-start;
1015
+ renderTip(l, A) {
1016
+ return T`
1017
+ <div class="tip">
1018
+ <span class="check">
1019
+ <svg viewBox="0 0 24 24" aria-hidden="true">
1020
+ <path d="M5 13l4 4L19 7" />
1021
+ </svg>
1022
+ </span>
1023
+ <div>
1024
+ <strong>${l}</strong>
1025
+ <span>${A}</span>
1026
+ </div>
1027
+ </div>
1028
+ `;
1234
1029
  }
1030
+ };
1031
+ E.styles = N`
1032
+ :host {
1033
+ display: block;
1034
+ font-family: 'Inter', 'Helvetica', Arial, sans-serif;
1035
+ color: #111;
1036
+ }
1235
1037
 
1236
- .tips-section input {
1237
- max-width: 100%;
1238
- font-size: 14px;
1239
- padding: 10px;
1240
- }
1038
+ .card {
1039
+ max-width: 560px;
1040
+ margin: 0 auto;
1041
+ padding: 28px 28px 32px;
1042
+ background: #ffffff;
1043
+ border-radius: 24px;
1044
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
1045
+ display: flex;
1046
+ flex-direction: column;
1047
+ gap: 20px;
1048
+ box-sizing: border-box;
1049
+ }
1241
1050
 
1242
- .tips-section label {
1243
- font-size: 14px;
1244
- }
1051
+ .pill {
1052
+ align-self: center;
1053
+ padding: 8px 16px;
1054
+ border-radius: 999px;
1055
+ background: #f1f2f3;
1056
+ font-size: 11px;
1057
+ font-weight: 700;
1058
+ letter-spacing: 0.08em;
1059
+ color: #555;
1060
+ text-transform: uppercase;
1061
+ }
1245
1062
 
1246
- .xact-button {
1247
- max-width: 100%;
1248
- }
1063
+ .title {
1064
+ text-align: center;
1065
+ font-size: 26px;
1066
+ font-weight: 700;
1067
+ margin: 0;
1068
+ line-height: 1.2;
1069
+ }
1249
1070
 
1250
- .header-text {
1251
- font-size: 20px;
1252
- text-align: center;
1253
- }
1071
+ .subtitle {
1072
+ text-align: center;
1073
+ color: #666;
1074
+ margin: 0;
1075
+ font-size: 14px;
1076
+ line-height: 1.5;
1077
+ }
1254
1078
 
1255
- .description-text {
1256
- font-size: 14px;
1257
- text-align: center;
1258
- }
1079
+ .tips {
1080
+ display: grid;
1081
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
1082
+ gap: 12px 16px;
1083
+ }
1259
1084
 
1260
- .tip-title {
1261
- font-size: 12px;
1262
- }
1085
+ .tips h4 {
1086
+ grid-column: 1 / -1;
1087
+ margin: 4px 0;
1088
+ font-size: 12px;
1089
+ letter-spacing: 0.08em;
1090
+ text-transform: uppercase;
1091
+ }
1263
1092
 
1264
- .tip-text {
1265
- font-size: 11px;
1266
- margin-left: 0;
1267
- }
1093
+ .tip {
1094
+ display: flex;
1095
+ gap: 10px;
1096
+ align-items: flex-start;
1097
+ }
1268
1098
 
1269
- .buttons {
1270
- width: 100%;
1271
- max-width: 100%;
1272
- gap: 8px;
1273
- margin-top: 12px;
1274
- }
1275
- }
1099
+
1100
+ .check {
1101
+ width: 18px;
1102
+ height: 18px;
1103
+ border-radius: 50%;
1104
+ background: #000;
1105
+ display: inline-flex;
1106
+ align-items: center;
1107
+ justify-content: center;
1108
+ flex-shrink: 0;
1109
+ }
1276
1110
 
1277
- /* Ajuste fino para iPhones muito pequenos */
1278
- @media (max-width: 380px) {
1279
- :host {
1280
- padding: 12px;
1281
- }
1111
+ .check svg {
1112
+ width: 10px;
1113
+ height: 10px;
1114
+ stroke: #fff;
1115
+ stroke-width: 2.5;
1116
+ fill: none;
1117
+ stroke-linecap: round;
1118
+ stroke-linejoin: round;
1119
+ }
1282
1120
 
1283
- .images-section svg {
1284
- max-width: 150px;
1285
- }
1121
+ .tip strong {
1122
+ display: block;
1123
+ font-size: 14px;
1124
+ margin-bottom: 2px;
1125
+ }
1286
1126
 
1287
- .header-text {
1288
- font-size: 18px;
1289
- }
1127
+ .tip span {
1128
+ display: block;
1129
+ font-size: 12px;
1130
+ color: #777;
1131
+ line-height: 1.4;
1132
+ }
1290
1133
 
1291
- .description-text {
1292
- font-size: 13px;
1293
- }
1134
+ .input-group {
1135
+ margin-top: 4px;
1136
+ }
1294
1137
 
1295
- .tip-title {
1296
- font-size: 11px;
1297
- }
1138
+ .height-input {
1139
+ width: 100%;
1140
+ padding: 14px 16px;
1141
+ border: 1px solid #e0e0e0;
1142
+ border-radius: 12px;
1143
+ background: #f7f7f7;
1144
+ font-size: 14px;
1145
+ color: #111;
1146
+ box-sizing: border-box;
1147
+ }
1298
1148
 
1299
- .tip-text {
1300
- font-size: 10px;
1301
- }
1149
+ .height-input:focus {
1150
+ outline: none;
1151
+ border-color: #000;
1152
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
1153
+ background: #fff;
1154
+ }
1302
1155
 
1303
- .xact-button {
1304
- padding: 8px;
1305
- }
1156
+ .cta {
1157
+ margin-top: 8px;
1158
+ width: 100%;
1159
+ }
1306
1160
 
1307
- .buttons {
1308
- gap: 6px;
1309
- }
1310
- }
1161
+ .disclaimer {
1162
+ margin: 0;
1163
+ text-align: center;
1164
+ color: #9a9a9a;
1165
+ font-size: 11px;
1166
+ line-height: 1.4;
1167
+ }
1311
1168
 
1312
-
1169
+ @media (max-width: 600px) {
1170
+ .card {
1171
+ padding: 22px 18px 26px;
1172
+ }
1173
+ .title {
1174
+ font-size: 22px;
1175
+ }
1176
+ .tips {
1177
+ grid-template-columns: 1fr;
1178
+ }
1179
+ }
1313
1180
  `;
1314
1181
  kA([
1315
1182
  j({ type: Number })
@@ -1319,14 +1186,14 @@ kA([
1319
1186
  ], E.prototype, "onStartMeasurement", 2);
1320
1187
  E = kA([
1321
1188
  R("xact-step-one"),
1322
- C()
1189
+ Y()
1323
1190
  ], E);
1324
1191
  var Ht = Object.getOwnPropertyDescriptor, zt = (l, A, t, r) => {
1325
1192
  for (var e = r > 1 ? void 0 : r ? Ht(A, t) : A, p = l.length - 1, V; p >= 0; p--)
1326
1193
  (V = l[p]) && (e = V(e) || e);
1327
1194
  return e;
1328
1195
  };
1329
- let dA = class extends X {
1196
+ let yA = class extends X {
1330
1197
  render() {
1331
1198
  return T`
1332
1199
  <footer class="modal-footer">
@@ -1374,7 +1241,7 @@ let dA = class extends X {
1374
1241
  `;
1375
1242
  }
1376
1243
  };
1377
- dA.styles = N`
1244
+ yA.styles = N`
1378
1245
  .modal-footer {
1379
1246
  text-align: center;
1380
1247
  font-size: 12px;
@@ -1411,10 +1278,10 @@ dA.styles = N`
1411
1278
  outline-offset: 2px;
1412
1279
  }
1413
1280
  `;
1414
- dA = zt([
1281
+ yA = zt([
1415
1282
  R("xact-footer"),
1416
- C()
1417
- ], dA);
1283
+ Y()
1284
+ ], yA);
1418
1285
  var Gt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, D = (l, A, t, r) => {
1419
1286
  for (var e = r > 1 ? void 0 : r ? Ft(A, t) : A, p = l.length - 1, V; p >= 0; p--)
1420
1287
  (V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
@@ -1573,7 +1440,7 @@ D([
1573
1440
  ], P.prototype, "onRetry", 2);
1574
1441
  P = D([
1575
1442
  R("xact-step-result"),
1576
- C()
1443
+ Y()
1577
1444
  ], P);
1578
1445
  var Mt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, JA = (l, A, t, r) => {
1579
1446
  for (var e = r > 1 ? void 0 : r ? ht(A, t) : A, p = l.length - 1, V; p >= 0; p--)
@@ -1585,6 +1452,7 @@ let I = class extends X {
1585
1452
  super(...arguments), this.height = 0;
1586
1453
  }
1587
1454
  render() {
1455
+ const l = Array.from({ length: 24 }, (A, t) => t);
1588
1456
  return T`
1589
1457
  <div class="component-content">
1590
1458
  <div class="header-section">
@@ -1720,12 +1588,21 @@ let I = class extends X {
1720
1588
  </div>
1721
1589
  <xact-button class="buttons"
1722
1590
  @click=${() => {
1723
- var l;
1724
- (l = this.onStep2advancement) == null || l.call(this);
1591
+ var A;
1592
+ (A = this.onStep2advancement) == null || A.call(this);
1725
1593
  }}
1726
1594
  label="${n("To start")}"
1727
1595
  ></xact-button>
1728
1596
  </div>
1597
+ <div class="snow-layer">
1598
+ ${l.map((A) => {
1599
+ const t = A * 37 % 100, r = A % 6 * 0.35, e = A % 5 * 0.4;
1600
+ return T`<span
1601
+ class="snowflake"
1602
+ style="left:${t}%; animation-delay:${r}s, ${e}s;"
1603
+ ></span>`;
1604
+ })}
1605
+ </div>
1729
1606
  `;
1730
1607
  }
1731
1608
  };
@@ -1738,6 +1615,8 @@ I.styles = N`
1738
1615
  box-sizing: border-box;
1739
1616
  padding: 16px;
1740
1617
  width: 100%;
1618
+ position: relative;
1619
+ overflow: hidden;
1741
1620
  }
1742
1621
 
1743
1622
  .component-content {
@@ -1746,6 +1625,8 @@ I.styles = N`
1746
1625
  gap: 12px;
1747
1626
  width: 100%;
1748
1627
  max-width: 960px;
1628
+ position: relative;
1629
+ z-index: 1;
1749
1630
  }
1750
1631
 
1751
1632
  .header-section {
@@ -1869,6 +1750,53 @@ I.styles = N`
1869
1750
  }
1870
1751
  }
1871
1752
 
1753
+ .snow-layer {
1754
+ position: absolute;
1755
+ inset: 0;
1756
+ pointer-events: none;
1757
+ overflow: hidden;
1758
+ z-index: 2;
1759
+ }
1760
+
1761
+ .snowflake {
1762
+ position: absolute;
1763
+ top: -8%;
1764
+ width: 6px;
1765
+ height: 6px;
1766
+ background: #fff;
1767
+ border-radius: 50%;
1768
+ opacity: 0.85;
1769
+ animation: fall 8s linear infinite, drift 5s ease-in-out infinite;
1770
+ }
1771
+
1772
+ .snowflake:nth-child(odd) {
1773
+ width: 4px;
1774
+ height: 4px;
1775
+ opacity: 0.7;
1776
+ animation-duration: 9s, 6s;
1777
+ }
1778
+
1779
+ .snowflake:nth-child(3n) {
1780
+ width: 8px;
1781
+ height: 8px;
1782
+ opacity: 0.9;
1783
+ animation-duration: 7s, 4.5s;
1784
+ }
1785
+
1786
+ .snowflake:nth-child(4n) {
1787
+ animation-delay: 1s, 0.5s;
1788
+ }
1789
+
1790
+ @keyframes fall {
1791
+ from { transform: translateY(-10%); }
1792
+ to { transform: translateY(110%); }
1793
+ }
1794
+
1795
+ @keyframes drift {
1796
+ 0%, 100% { transform: translateX(-14px); }
1797
+ 50% { transform: translateX(22px); }
1798
+ }
1799
+
1872
1800
  `;
1873
1801
  JA([
1874
1802
  j({ type: Number })
@@ -1878,18 +1806,18 @@ JA([
1878
1806
  ], I.prototype, "onStep2advancement", 2);
1879
1807
  I = JA([
1880
1808
  R("xact-step-informs"),
1881
- C()
1809
+ Y()
1882
1810
  ], I);
1883
1811
  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";
1884
- var wt = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, y = (l, A, t, r) => {
1885
- for (var e = r > 1 ? void 0 : r ? Ct(A, t) : A, p = l.length - 1, V; p >= 0; p--)
1812
+ var wt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, d = (l, A, t, r) => {
1813
+ for (var e = r > 1 ? void 0 : r ? Yt(A, t) : A, p = l.length - 1, V; p >= 0; p--)
1886
1814
  (V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
1887
1815
  return r && e && wt(A, t, e), e;
1888
1816
  };
1889
1817
  const { getLocale: gt, setLocale: PA } = Wt({
1890
1818
  sourceLocale: IA,
1891
1819
  targetLocales: bt,
1892
- loadLocale: (l) => wA(/* @__PURE__ */ Object.assign({ "./generated/locales/pt-BR.ts": () => import("./pt-BR-vVX9MQ4x.mjs") }), `./generated/locales/${l}.ts`, 4)
1820
+ loadLocale: (l) => wA(/* @__PURE__ */ Object.assign({ "./generated/locales/pt-BR.ts": () => import("./pt-BR-DJDRIzyB.mjs") }), `./generated/locales/${l}.ts`, 4)
1893
1821
  });
1894
1822
  let a = class extends X {
1895
1823
  constructor() {
@@ -2072,7 +2000,12 @@ let a = class extends X {
2072
2000
  }
2073
2001
  render() {
2074
2002
  return this._isLocaleLoading ? T`<div hidden></div>` : T`
2075
- <xact-button @click=${this.openModal} label="${n("Find your Xactsize")}"></xact-button>
2003
+ <xact-button
2004
+ class="launch-btn"
2005
+ style="--brand-primary: #000; --text-inverse: #fff; --brand-primary-hover: #111;"
2006
+ @click=${this.openModal}
2007
+ label="${n("Find your Xactsize")}"
2008
+ ></xact-button>
2076
2009
 
2077
2010
  ${this.showModal ? T`
2078
2011
  <div class="modal">
@@ -2433,6 +2366,13 @@ a.styles = N`
2433
2366
  width: 100%;
2434
2367
  }
2435
2368
 
2369
+ xact-button.launch-btn {
2370
+ --brand-primary: #000;
2371
+ --brand-primary-hover: #111;
2372
+ --text-inverse: #fff;
2373
+ --xact-button-radius: 0px;
2374
+ }
2375
+
2436
2376
  .video-overlay {
2437
2377
  position: absolute;
2438
2378
  inset: 4px 4px auto 4px;
@@ -2567,75 +2507,75 @@ a.styles = N`
2567
2507
 
2568
2508
 
2569
2509
  `;
2570
- y([
2510
+ d([
2571
2511
  j({ type: String, attribute: "api-key" })
2572
2512
  ], a.prototype, "apiKey", 2);
2573
- y([
2513
+ d([
2574
2514
  j({ type: String, attribute: "tenant-id" })
2575
2515
  ], a.prototype, "tenantId", 2);
2576
- y([
2516
+ d([
2577
2517
  j({ type: String, attribute: "product-sku" })
2578
2518
  ], a.prototype, "productSku", 2);
2579
- y([
2519
+ d([
2580
2520
  j({ type: String, attribute: "api-url" })
2581
2521
  ], a.prototype, "apiUrl", 2);
2582
- y([
2522
+ d([
2583
2523
  j({ type: Function, attribute: "onmeasurementaccepted" })
2584
2524
  ], a.prototype, "onMeasurementAccepted", 2);
2585
- y([
2525
+ d([
2586
2526
  j({ type: Function, attribute: "onmeasurementcanceled" })
2587
2527
  ], a.prototype, "onMeasurementCanceled", 2);
2588
- y([
2528
+ d([
2589
2529
  j({ type: String })
2590
2530
  ], a.prototype, "culture", 1);
2591
- y([
2531
+ d([
2592
2532
  J()
2593
2533
  ], a.prototype, "errorMap", 1);
2594
- y([
2534
+ d([
2595
2535
  J()
2596
2536
  ], a.prototype, "measurerKey", 2);
2597
- y([
2537
+ d([
2598
2538
  J()
2599
2539
  ], a.prototype, "_isLocaleLoading", 2);
2600
- y([
2540
+ d([
2601
2541
  J()
2602
2542
  ], a.prototype, "showModal", 2);
2603
- y([
2543
+ d([
2604
2544
  J()
2605
2545
  ], a.prototype, "step", 2);
2606
- y([
2546
+ d([
2607
2547
  J()
2608
2548
  ], a.prototype, "height", 2);
2609
- y([
2549
+ d([
2610
2550
  J()
2611
2551
  ], a.prototype, "recommendedSize", 2);
2612
- y([
2552
+ d([
2613
2553
  J()
2614
2554
  ], a.prototype, "measurements", 2);
2615
- y([
2555
+ d([
2616
2556
  J()
2617
2557
  ], a.prototype, "errorMessage", 2);
2618
- y([
2558
+ d([
2619
2559
  J()
2620
2560
  ], a.prototype, "instructionMessage", 2);
2621
- y([
2561
+ d([
2622
2562
  J()
2623
2563
  ], a.prototype, "shouldStartMeasurement", 2);
2624
- y([
2564
+ d([
2625
2565
  J()
2626
2566
  ], a.prototype, "isLoading", 2);
2627
- y([
2567
+ d([
2628
2568
  J()
2629
2569
  ], a.prototype, "isFetching", 2);
2630
- y([
2570
+ d([
2631
2571
  J()
2632
2572
  ], a.prototype, "cameras", 2);
2633
- y([
2573
+ d([
2634
2574
  J()
2635
2575
  ], a.prototype, "currentCameraId", 2);
2636
- a = y([
2576
+ a = d([
2637
2577
  R("body-measurer"),
2638
- C()
2578
+ Y()
2639
2579
  ], a);
2640
2580
  export {
2641
2581
  a as BodyMeasurer,