xactsize-webcomponents 1.0.28 → 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);
@@ -936,19 +936,19 @@ o.styles = N`
936
936
  }
937
937
  }
938
938
  `;
939
- Y([
939
+ C([
940
940
  j({ type: String })
941
941
  ], o.prototype, "type", 2);
942
- Y([
942
+ C([
943
943
  j({ type: String })
944
944
  ], o.prototype, "label", 2);
945
- Y([
945
+ C([
946
946
  j({ type: Boolean })
947
947
  ], o.prototype, "disabled", 2);
948
- Y([
948
+ C([
949
949
  j({ type: String })
950
950
  ], o.prototype, "variant", 2);
951
- o = Y([
951
+ o = C([
952
952
  R("xact-button")
953
953
  ], o);
954
954
  var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, kA = (l, A, t, r) => {
@@ -958,408 +958,225 @@ var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, kA = (l, A
958
958
  };
959
959
  let E = class extends X {
960
960
  constructor() {
961
- super(...arguments), this.height = 0;
961
+ super(...arguments), this.height = 0, this.handleStart = () => {
962
+ var A;
963
+ const l = this.shadowRoot.querySelector(
964
+ "#height-input"
965
+ );
966
+ if (l != null && l.value) {
967
+ const t = parseInt(l.value);
968
+ this.height = t, (A = this.onStartMeasurement) == null || A.call(this, t);
969
+ }
970
+ };
962
971
  }
963
972
  render() {
964
973
  return T`
965
- <div class="component-content">
966
- <div class="header-section">
967
- <h2 class="header-text">${n("Before you begin")}</h2>
968
- <p class="description-text">
969
- ${n("Maintain an upright posture with your arms away from your body.")}
970
- </p>
971
- </div>
972
-
973
- <div class="main-section">
974
- <div class="tips-section">
975
- <h3>${n("Tips")}</h3>
976
- <div class="tip-item">
977
- <span class="tip-title">${n("Good Lighting")}</span>
978
- <p class="tip-text">${n("Choose a well-lit area where you can see your image clearly.")}</p>
979
- </div>
980
- <div class="tip-item">
981
- <span class="tip-title">${n("Clean Background")}</span>
982
- <p class="tip-text">${n("Position yourself against a plain background.")}</p>
983
- </div>
984
- <div class="tip-item">
985
- <span class="tip-title">${n("Clothes")}</span>
986
- <p class="tip-text">${n("Wear clothes that you usually wear on a daily basis.")}</p>
987
- </div>
988
- <div class="tip-item">
989
- <span class="tip-title">${n("Framing")}</span>
990
- <p class="tip-text">${n("Make sure your entire body is visible. The app will guide you.")}</p>
991
- </div>
992
-
993
- <form>
994
- <label for="height-input" class="height-label">
995
- ${n("To get started, please tell us your height.")}
996
- </label>
997
- <input id="height-input" type="number" min="50" max="300"
998
- placeholder=${n("Height (cm)")} required tabindex="1"/>
999
- </form>
1000
- </div>
1001
-
1002
- <div class="images-section">
1003
- <svg width="300" height="245" viewBox="0 0 300 245" fill="none" xmlns="http://www.w3.org/2000/svg">
1004
- <path d="M162.404 20.4343H136.498V72.1681H162.404V20.4343Z" fill="#6D4A44"/>
1005
- <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"/>
1006
- <mask id="mask0_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="124" y="53" width="13" height="48">
1007
- <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"/>
1008
- </mask>
1009
- <g mask="url(#mask0_2344_2604)">
1010
- <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"/>
1011
- </g>
1012
- <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"/>
1013
- <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"/>
1014
- <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"/>
1015
- <mask id="mask1_2344_2604" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="161" y="53" width="14" height="48">
1016
- <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"/>
1017
- </mask>
1018
- <g mask="url(#mask1_2344_2604)">
1019
- <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"/>
1020
- </g>
1021
- <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"/>
1022
- <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"/>
1023
- <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"/>
1024
- <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"/>
1025
- <path d="M133.868 69.5197L131.244 61.8865" stroke="#EFE3D8" stroke-width="1.04569" stroke-miterlimit="10"/>
1026
- <path d="M165.141 69.5288L167.767 61.8865" stroke="#EFE3D8" stroke-width="1.04569" stroke-miterlimit="10"/>
1027
- <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"/>
1028
- <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"/>
1029
- <path d="M134.605 216.849L135.36 228.943H144.237V216.849H134.605Z" fill="#F3A396"/>
1030
- <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"/>
1031
- <path d="M117.661 237H145.311V235.072H117.661V237Z" fill="white"/>
1032
- <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"/>
1033
- <path d="M148.71 211.719H128.131V220.255H148.71V211.719Z" fill="#21262D"/>
1034
- <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"/>
1035
- <path d="M165.395 216.849L164.641 228.943H155.764V216.849H165.395Z" fill="#F3A396"/>
1036
- <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"/>
1037
- <path d="M182.341 235.072H154.691V237H182.341V235.072Z" fill="white"/>
1038
- <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"/>
1039
- <path d="M171.399 211.719H150.82V220.255H171.399V211.719Z" fill="#21262D"/>
1040
- <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"/>
1041
- <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"/>
1042
- <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"/>
1043
- <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"/>
1044
- <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"/>
1045
- <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"/>
1046
- <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"/>
1047
- <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"/>
1048
- <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"/>
1049
- <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"/>
1050
- <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"/>
1051
- <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"/>
1052
- <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"/>
1053
- <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"/>
1054
- <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"/>
1055
- <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"/>
1056
- <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"/>
1057
- </svg>
1058
-
1059
-
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>
1060
987
 
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>
1061
1000
 
1062
- </div>
1063
-
1064
-
1065
- </div>
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>
1066
1008
 
1067
- <xact-button class="xact-button buttons"
1068
- @click=${() => {
1069
- var A;
1070
- const l = this.shadowRoot.querySelector("#height-input");
1071
- if (l != null && l.value) {
1072
- const t = parseInt(l.value);
1073
- this.height = t, (A = this.onStartMeasurement) == null || A.call(this, t);
1074
- }
1075
- }}
1076
- label="${n("Let's go!")}"
1077
- ></xact-button>
1078
-
1009
+ <p class="disclaimer">
1010
+ ${n("By using Xactsize, you agree to our Terms and Privacy Policy.")}
1011
+ </p>
1012
+ </div>
1013
+ `;
1014
+ }
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>
1079
1028
  `;
1080
1029
  }
1081
1030
  };
1082
1031
  E.styles = N`
1083
- :host {
1084
- display: flex;
1085
- justify-content: center;
1086
- align-items: flex-start;
1087
- font-family: "Lato", sans-serif;
1088
- box-sizing: border-box;
1089
- padding: 16px;
1090
- width: 100%;
1091
- }
1092
-
1093
- .component-content {
1094
- display: flex;
1095
- flex-direction: column;
1096
- gap: 12px;
1097
- width: 100%;
1098
- max-width: 960px;
1099
- }
1100
-
1101
- .header-section {
1102
- text-align: left;
1103
- }
1104
-
1105
- .header-text {
1106
- font-size: 24px;
1107
- font-weight: 700;
1108
- color: #000;
1109
- margin-bottom: 8px;
1110
- line-height: 1.2;
1111
- }
1112
-
1113
- .description-text {
1114
- font-size: 16px;
1115
- font-weight: 400;
1116
- color: #333;
1117
- line-height: 1.6;
1118
- }
1119
-
1120
- .main-section {
1121
- display: flex;
1122
- flex-direction: row;
1123
- gap: 24px;
1124
- }
1125
-
1126
- .images-section {
1127
- flex: 1;
1128
- display: flex;
1129
- justify-content: center;
1130
- align-items: center;
1131
- }
1132
-
1133
- .images-section svg {
1134
- width: 100%;
1135
- max-width: 400px;
1136
- height: auto;
1137
- }
1138
-
1139
- .tips-section {
1140
- flex: 1;
1141
- display: flex;
1142
- flex-direction: column;
1143
- gap: 8px;
1032
+ :host {
1033
+ display: block;
1034
+ font-family: 'Inter', 'Helvetica', Arial, sans-serif;
1035
+ color: #111;
1036
+ }
1144
1037
 
1145
- form {
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);
1146
1045
  display: flex;
1147
1046
  flex-direction: column;
1148
- align-items: start;
1149
- gap: 16px;
1150
- width: 100%;
1047
+ gap: 20px;
1048
+ box-sizing: border-box;
1151
1049
  }
1152
1050
 
1153
- label {
1154
- font-size: 16px;
1155
- color: #333;
1156
- text-align: start;
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;
1157
1061
  }
1158
1062
 
1159
- input {
1160
- width: 100%;
1161
- max-width: 150px;
1162
- padding: 12px;
1163
- font-size: 16px;
1164
- border: 1px solid #ccc;
1165
- border-radius: 6px;
1166
- box-sizing: border-box;
1167
- font-family: "Lato", sans-serif;
1168
- text-align: start;
1063
+ .title {
1064
+ text-align: center;
1065
+ font-size: 26px;
1066
+ font-weight: 700;
1067
+ margin: 0;
1068
+ line-height: 1.2;
1169
1069
  }
1170
1070
 
1171
- input:focus {
1172
- outline: 2px solid var(--brand-primary);
1173
- outline-offset: 2px;
1071
+ .subtitle {
1072
+ text-align: center;
1073
+ color: #666;
1074
+ margin: 0;
1075
+ font-size: 14px;
1076
+ line-height: 1.5;
1174
1077
  }
1175
- }
1176
-
1177
- .xact-button {
1178
- width: 100%;
1179
- max-width: 150px;
1180
- display: flex;
1181
- justify-content: center;
1182
- align-items: center;
1183
1078
 
1184
- }
1185
-
1186
- .tip-item {
1187
- margin-bottom: 4px;
1188
- }
1189
-
1190
- .tip-title {
1191
- font-weight: bold;
1192
- display: inline-block;
1193
- margin-bottom: 4px;
1194
- font-size: 14px;
1195
- }
1196
-
1197
- .tip-text {
1198
- margin-top: 0;
1199
- font-size: 12px;
1200
- }
1201
-
1202
- .buttons {
1203
- display: flex;
1204
- flex-direction: column;
1205
- gap: 12px;
1206
- align-items: center;
1207
- justify-content: center;
1208
- width: 100%;
1209
- max-width: 200px;
1210
- margin: 0 auto;
1211
- }
1212
-
1213
- /* Ajuste da responsividade para mobile */
1214
- @media (max-width: 754px) {
1215
- .main-section {
1216
- flex-direction: column;
1217
- gap: 5px; /* menor gap */
1218
- align-items: center;
1219
- }
1220
-
1221
- .images-section {
1222
- order: -1;
1223
- width: 100%;
1224
- }
1225
-
1226
- .images-section svg {
1227
- width: 80%; /* reduzir para não quebrar botão */
1228
- max-width: 180px; /* altura menor */
1229
- height: auto;
1230
- }
1231
-
1232
- .tips-section {
1233
- width: 100%;
1234
- gap: 6px;
1235
- align-items: flex-start; /* alinhar à esquerda */
1236
- }
1237
-
1238
- form {
1239
- align-items: flex-start; /* alinhar labels e inputs à esquerda */
1240
- width: 100%;
1241
- }
1242
-
1243
- input {
1244
- max-width: 100%;
1245
- font-size: 14px;
1246
- padding: 10px;
1247
- }
1248
-
1249
- label {
1250
- text-align: left;
1251
- font-size: 14px;
1252
- }
1253
-
1254
- .xact-button {
1255
- max-width: 100%;
1256
- }
1257
-
1258
- .header-text {
1259
- font-size: 20px;
1260
- text-align: center;
1261
- }
1262
-
1263
- .description-text {
1264
- font-size: 14px;
1265
- text-align: center;
1266
- }
1267
-
1268
- .tip-title {
1269
- font-size: 12px;
1270
- text-align: left;
1271
- }
1272
-
1273
- .tip-text {
1274
- font-size: 11px;
1275
- text-align: left;
1276
- margin-left: 0; /* remove centralização */
1277
- }
1278
-
1279
- .tip-item {
1280
- margin-bottom: 6px;
1281
- }
1282
-
1283
- .buttons {
1284
- gap: 8px;
1285
- width: 100%;
1286
- max-width: 100%;
1287
- margin-top: 12px;
1288
- }
1289
- }
1290
-
1291
- /* Ajuste fino para iPhones muito pequenos */
1292
- @media (max-width: 380px) {
1293
- .main-section {
1294
- gap: 1px;
1295
- }
1296
-
1297
- .images-section {
1298
- order: -1;
1299
- width: 30%;
1300
- }
1301
-
1302
- .images-section svg {
1303
- width: 80%; /* reduzir para não quebrar botão */
1304
- max-width: 150px; /* altura menor */
1305
- height: auto;
1306
- }
1079
+ .tips {
1080
+ display: grid;
1081
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
1082
+ gap: 12px 16px;
1083
+ }
1307
1084
 
1308
- .tips-section {
1309
- gap: 1px;
1310
- label {
1085
+ .tips h4 {
1086
+ grid-column: 1 / -1;
1087
+ margin: 4px 0;
1311
1088
  font-size: 12px;
1089
+ letter-spacing: 0.08em;
1090
+ text-transform: uppercase;
1312
1091
  }
1313
- input {
1314
- font-size: 12px;
1092
+
1093
+ .tip {
1094
+ display: flex;
1095
+ gap: 10px;
1096
+ align-items: flex-start;
1315
1097
  }
1316
- }
1317
- h3 {
1318
- font-size: 14px;
1319
- }
1320
-
1321
1098
 
1322
-
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
+ }
1323
1110
 
1324
- .xact-button {
1325
- max-width: 100%;
1326
- }
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
+ }
1327
1120
 
1328
- .header-text {
1329
- font-size: 14px;
1330
- text-align: center;
1331
- }
1121
+ .tip strong {
1122
+ display: block;
1123
+ font-size: 14px;
1124
+ margin-bottom: 2px;
1125
+ }
1332
1126
 
1333
- .description-text {
1334
- font-size: 12px;
1335
- text-align: center;
1336
- }
1127
+ .tip span {
1128
+ display: block;
1129
+ font-size: 12px;
1130
+ color: #777;
1131
+ line-height: 1.4;
1132
+ }
1337
1133
 
1338
- .tip-title {
1339
- font-size: 12px;
1340
- text-align: left;
1341
- }
1134
+ .input-group {
1135
+ margin-top: 4px;
1136
+ }
1342
1137
 
1343
- .tip-text {
1344
- font-size: 11px;
1345
- text-align: left;
1346
- margin-left: 0; /* remove centralização */
1347
- }
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
+ }
1348
1148
 
1349
- .tip-item {
1350
- margin-bottom: 1px;
1351
- }
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
+ }
1352
1155
 
1353
- .buttons {
1354
- gap: 2px;
1355
- width: 100%;
1356
- max-width: 100%;
1357
- margin-top: 1px;
1358
- }
1359
- }
1156
+ .cta {
1157
+ margin-top: 8px;
1158
+ width: 100%;
1159
+ }
1360
1160
 
1161
+ .disclaimer {
1162
+ margin: 0;
1163
+ text-align: center;
1164
+ color: #9a9a9a;
1165
+ font-size: 11px;
1166
+ line-height: 1.4;
1167
+ }
1361
1168
 
1362
-
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
+ }
1363
1180
  `;
1364
1181
  kA([
1365
1182
  j({ type: Number })
@@ -1369,14 +1186,14 @@ kA([
1369
1186
  ], E.prototype, "onStartMeasurement", 2);
1370
1187
  E = kA([
1371
1188
  R("xact-step-one"),
1372
- C()
1189
+ Y()
1373
1190
  ], E);
1374
1191
  var Ht = Object.getOwnPropertyDescriptor, zt = (l, A, t, r) => {
1375
1192
  for (var e = r > 1 ? void 0 : r ? Ht(A, t) : A, p = l.length - 1, V; p >= 0; p--)
1376
1193
  (V = l[p]) && (e = V(e) || e);
1377
1194
  return e;
1378
1195
  };
1379
- let dA = class extends X {
1196
+ let yA = class extends X {
1380
1197
  render() {
1381
1198
  return T`
1382
1199
  <footer class="modal-footer">
@@ -1424,7 +1241,7 @@ let dA = class extends X {
1424
1241
  `;
1425
1242
  }
1426
1243
  };
1427
- dA.styles = N`
1244
+ yA.styles = N`
1428
1245
  .modal-footer {
1429
1246
  text-align: center;
1430
1247
  font-size: 12px;
@@ -1461,10 +1278,10 @@ dA.styles = N`
1461
1278
  outline-offset: 2px;
1462
1279
  }
1463
1280
  `;
1464
- dA = zt([
1281
+ yA = zt([
1465
1282
  R("xact-footer"),
1466
- C()
1467
- ], dA);
1283
+ Y()
1284
+ ], yA);
1468
1285
  var Gt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, D = (l, A, t, r) => {
1469
1286
  for (var e = r > 1 ? void 0 : r ? Ft(A, t) : A, p = l.length - 1, V; p >= 0; p--)
1470
1287
  (V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
@@ -1623,7 +1440,7 @@ D([
1623
1440
  ], P.prototype, "onRetry", 2);
1624
1441
  P = D([
1625
1442
  R("xact-step-result"),
1626
- C()
1443
+ Y()
1627
1444
  ], P);
1628
1445
  var Mt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, JA = (l, A, t, r) => {
1629
1446
  for (var e = r > 1 ? void 0 : r ? ht(A, t) : A, p = l.length - 1, V; p >= 0; p--)
@@ -1635,6 +1452,7 @@ let I = class extends X {
1635
1452
  super(...arguments), this.height = 0;
1636
1453
  }
1637
1454
  render() {
1455
+ const l = Array.from({ length: 24 }, (A, t) => t);
1638
1456
  return T`
1639
1457
  <div class="component-content">
1640
1458
  <div class="header-section">
@@ -1770,12 +1588,21 @@ let I = class extends X {
1770
1588
  </div>
1771
1589
  <xact-button class="buttons"
1772
1590
  @click=${() => {
1773
- var l;
1774
- (l = this.onStep2advancement) == null || l.call(this);
1591
+ var A;
1592
+ (A = this.onStep2advancement) == null || A.call(this);
1775
1593
  }}
1776
1594
  label="${n("To start")}"
1777
1595
  ></xact-button>
1778
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>
1779
1606
  `;
1780
1607
  }
1781
1608
  };
@@ -1788,6 +1615,8 @@ I.styles = N`
1788
1615
  box-sizing: border-box;
1789
1616
  padding: 16px;
1790
1617
  width: 100%;
1618
+ position: relative;
1619
+ overflow: hidden;
1791
1620
  }
1792
1621
 
1793
1622
  .component-content {
@@ -1796,6 +1625,8 @@ I.styles = N`
1796
1625
  gap: 12px;
1797
1626
  width: 100%;
1798
1627
  max-width: 960px;
1628
+ position: relative;
1629
+ z-index: 1;
1799
1630
  }
1800
1631
 
1801
1632
  .header-section {
@@ -1919,6 +1750,53 @@ I.styles = N`
1919
1750
  }
1920
1751
  }
1921
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
+
1922
1800
  `;
1923
1801
  JA([
1924
1802
  j({ type: Number })
@@ -1928,18 +1806,18 @@ JA([
1928
1806
  ], I.prototype, "onStep2advancement", 2);
1929
1807
  I = JA([
1930
1808
  R("xact-step-informs"),
1931
- C()
1809
+ Y()
1932
1810
  ], I);
1933
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";
1934
- var wt = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, y = (l, A, t, r) => {
1935
- 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--)
1936
1814
  (V = l[p]) && (e = (r ? V(A, t, e) : V(e)) || e);
1937
1815
  return r && e && wt(A, t, e), e;
1938
1816
  };
1939
1817
  const { getLocale: gt, setLocale: PA } = Wt({
1940
1818
  sourceLocale: IA,
1941
1819
  targetLocales: bt,
1942
- 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)
1943
1821
  });
1944
1822
  let a = class extends X {
1945
1823
  constructor() {
@@ -2122,7 +2000,12 @@ let a = class extends X {
2122
2000
  }
2123
2001
  render() {
2124
2002
  return this._isLocaleLoading ? T`<div hidden></div>` : T`
2125
- <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>
2126
2009
 
2127
2010
  ${this.showModal ? T`
2128
2011
  <div class="modal">
@@ -2483,6 +2366,13 @@ a.styles = N`
2483
2366
  width: 100%;
2484
2367
  }
2485
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
+
2486
2376
  .video-overlay {
2487
2377
  position: absolute;
2488
2378
  inset: 4px 4px auto 4px;
@@ -2617,75 +2507,75 @@ a.styles = N`
2617
2507
 
2618
2508
 
2619
2509
  `;
2620
- y([
2510
+ d([
2621
2511
  j({ type: String, attribute: "api-key" })
2622
2512
  ], a.prototype, "apiKey", 2);
2623
- y([
2513
+ d([
2624
2514
  j({ type: String, attribute: "tenant-id" })
2625
2515
  ], a.prototype, "tenantId", 2);
2626
- y([
2516
+ d([
2627
2517
  j({ type: String, attribute: "product-sku" })
2628
2518
  ], a.prototype, "productSku", 2);
2629
- y([
2519
+ d([
2630
2520
  j({ type: String, attribute: "api-url" })
2631
2521
  ], a.prototype, "apiUrl", 2);
2632
- y([
2522
+ d([
2633
2523
  j({ type: Function, attribute: "onmeasurementaccepted" })
2634
2524
  ], a.prototype, "onMeasurementAccepted", 2);
2635
- y([
2525
+ d([
2636
2526
  j({ type: Function, attribute: "onmeasurementcanceled" })
2637
2527
  ], a.prototype, "onMeasurementCanceled", 2);
2638
- y([
2528
+ d([
2639
2529
  j({ type: String })
2640
2530
  ], a.prototype, "culture", 1);
2641
- y([
2531
+ d([
2642
2532
  J()
2643
2533
  ], a.prototype, "errorMap", 1);
2644
- y([
2534
+ d([
2645
2535
  J()
2646
2536
  ], a.prototype, "measurerKey", 2);
2647
- y([
2537
+ d([
2648
2538
  J()
2649
2539
  ], a.prototype, "_isLocaleLoading", 2);
2650
- y([
2540
+ d([
2651
2541
  J()
2652
2542
  ], a.prototype, "showModal", 2);
2653
- y([
2543
+ d([
2654
2544
  J()
2655
2545
  ], a.prototype, "step", 2);
2656
- y([
2546
+ d([
2657
2547
  J()
2658
2548
  ], a.prototype, "height", 2);
2659
- y([
2549
+ d([
2660
2550
  J()
2661
2551
  ], a.prototype, "recommendedSize", 2);
2662
- y([
2552
+ d([
2663
2553
  J()
2664
2554
  ], a.prototype, "measurements", 2);
2665
- y([
2555
+ d([
2666
2556
  J()
2667
2557
  ], a.prototype, "errorMessage", 2);
2668
- y([
2558
+ d([
2669
2559
  J()
2670
2560
  ], a.prototype, "instructionMessage", 2);
2671
- y([
2561
+ d([
2672
2562
  J()
2673
2563
  ], a.prototype, "shouldStartMeasurement", 2);
2674
- y([
2564
+ d([
2675
2565
  J()
2676
2566
  ], a.prototype, "isLoading", 2);
2677
- y([
2567
+ d([
2678
2568
  J()
2679
2569
  ], a.prototype, "isFetching", 2);
2680
- y([
2570
+ d([
2681
2571
  J()
2682
2572
  ], a.prototype, "cameras", 2);
2683
- y([
2573
+ d([
2684
2574
  J()
2685
2575
  ], a.prototype, "currentCameraId", 2);
2686
- a = y([
2576
+ a = d([
2687
2577
  R("body-measurer"),
2688
- C()
2578
+ Y()
2689
2579
  ], a);
2690
2580
  export {
2691
2581
  a as BodyMeasurer,