@justeattakeaway/pie-button 0.39.0 → 0.39.1

package/README.md

@@ -61,7 +61,7 @@ import '@justeattakeaway/pie-button';
 ```js
 // React
 // For React, you will need to import our React-specific component build
-// which wraps the web component using @lit-labs/react
+// which wraps the web component using ​@lit/react
 import { PieButton } from '@justeattakeaway/pie-button/dist/react';
 ```
 

package/dist/index.js

@@ -1,21 +1,21 @@
 import { unsafeCSS as wt, LitElement as xt, html as N, nothing as O } from "lit";
-import { property as m } from "lit/decorators.js";
+import { property as p } from "lit/decorators.js";
 import { ifDefined as Et } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-spinner";
-const R = (d, n, a) => function(u, y) {
-  const b = `#${y}`;
-  Object.defineProperty(u, y, {
+const R = (d, n, a) => function(b, y) {
+  const u = `#${y}`;
+  Object.defineProperty(b, y, {
     get() {
-      return this[b];
+      return this[u];
     },
     set(f) {
-      const k = this[b];
-      n.includes(f) ? this[b] = f : (console.error(
+      n.includes(f) ? this[u] = f : (console.error(
         `<${d}> Invalid value "${f}" provided for property "${y}".`,
         `Must be one of: ${n.join(" | ")}.`,
         `Falling back to default value: "${a}"`
-      ), this[b] = a), this.requestUpdate(y, k);
-    }
+      ), this[u] = a);
+    },
+    configurable: !0
   });
 };
 function kt(d, n) {
@@ -34,7 +34,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
 ], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], _t = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
 `;
 (function() {
-  const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), A = {
+  const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), A = {
     ariaAtomic: "aria-atomic",
     ariaAutoComplete: "aria-autocomplete",
     ariaBusy: "aria-busy",
@@ -86,16 +86,16 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
           return r;
         },
         set(l) {
-          r = l, i.isConnected ? i.setAttribute(o, l) : z.set(i, t);
+          r = l, i.isConnected ? i.setAttribute(o, l) : k.set(i, t);
         }
       });
     }
   };
-  function q(i) {
+  function j(i) {
     const t = c.get(i), { form: e } = t;
     X(i, e, t), Q(i, t.labels);
   }
-  const U = (i, t = !1) => {
+  const q = (i, t = !1) => {
     const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
       acceptNode(l) {
         return c.has(l) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
@@ -105,11 +105,11 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     const o = !t || i.disabled;
     for (; r; )
       r.formDisabledCallback && o && $(r, i.disabled), r = e.nextNode();
-  }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, M = T() ? new MutationObserver((i) => {
+  }, U = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
     for (const t of i) {
       const e = t.target;
-      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
-        const r = c.get(e), o = k.get(e);
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && q(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+        const r = c.get(e), o = M.get(e);
         r.setFormValue(o);
       }
     }
@@ -119,11 +119,11 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
       o.forEach((s) => {
         var g;
-        if (c.has(s) && s.constructor.formAssociated && q(s), z.has(s)) {
-          const v = z.get(s);
+        if (c.has(s) && s.constructor.formAssociated && j(s), k.has(s)) {
+          const v = k.get(s);
           Object.keys(A).filter((w) => v[w] !== null).forEach((w) => {
             s.setAttribute(A[w], v[w]);
-          }), z.delete(s);
+          }), k.delete(s);
         }
         if (F.has(s)) {
           const v = F.get(s);
@@ -137,12 +137,12 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
           });
           let w = E.nextNode();
           for (; w; )
-            q(w), w = E.nextNode();
+            j(w), w = E.nextNode();
         }
-        s.localName === "fieldset" && ((g = M.observe) == null || g.call(M, s, j), U(s, !0));
+        s.localName === "fieldset" && ((g = z.observe) == null || g.call(z, s, U), q(s, !0));
       }), l.forEach((s) => {
         const g = c.get(s);
-        g && a.get(g) && G(g), b.has(s) && b.get(s).disconnect();
+        g && a.get(g) && G(g), u.has(s) && u.get(s).disconnect();
       });
     });
   }
@@ -175,7 +175,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     return e.type = "hidden", e.name = i.getAttribute("name"), i.after(e), a.get(t).push(e), e;
   }, st = (i, t) => {
     var e;
-    a.set(t, []), (e = M.observe) == null || e.call(M, i, j);
+    a.set(t, []), (e = z.observe) == null || e.call(z, i, U);
   }, Q = (i, t) => {
     if (t.length) {
       Array.from(t).forEach((r) => r.addEventListener("click", i.click.bind(i)));
@@ -242,7 +242,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
     }
   }
-  const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && S(e), i), bt = (i) => {
+  const pt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), mt = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && S(e), i), bt = (i) => {
     let t = !0;
     for (let e in i)
       e !== "valid" && i[e] !== !1 && (t = !1);
@@ -403,7 +403,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
             l.name = r, l.value = o;
           }
         });
-      k.set(e, t);
+      M.set(e, t);
     }
     setValidity(t, e, r) {
       const o = d.get(this);
@@ -413,13 +413,13 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       const l = n.get(this), s = {};
       for (const E in t)
         s[E] = t[E];
-      Object.keys(s).length === 0 && mt(l);
+      Object.keys(s).length === 0 && pt(l);
       const g = { ...l, ...s };
       delete g.valid;
-      const { valid: v } = pt(l, g, this.form);
+      const { valid: v } = mt(l, g, this.form);
       if (!v && !e)
         throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-      u.set(this, v ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : F.set(o, this);
+      b.set(this, v ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : F.set(o, this);
     }
     get shadowRoot() {
       const t = d.get(this), e = W.get(t);
@@ -427,7 +427,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     }
     get validationMessage() {
       const t = d.get(this);
-      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
+      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), b.get(this);
     }
     get validity() {
       const t = d.get(this);
@@ -498,7 +498,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         const r = t.apply(this, e);
         if (W.set(this, r), T()) {
           const o = new MutationObserver(P);
-          window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), b.set(this, o);
+          window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), u.set(this, o);
         }
         return r;
       };
@@ -508,10 +508,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
   }
 })();
-var At = Object.defineProperty, St = Object.getOwnPropertyDescriptor, p = (d, n, a, c) => {
-  for (var u = c > 1 ? void 0 : c ? St(n, a) : n, y = d.length - 1, b; y >= 0; y--)
-    (b = d[y]) && (u = (c ? b(n, a, u) : b(u)) || u);
-  return c && u && At(n, a, u), u;
+var At = Object.defineProperty, St = Object.getOwnPropertyDescriptor, m = (d, n, a, c) => {
+  for (var b = c > 1 ? void 0 : c ? St(n, a) : n, y = d.length - 1, u; y >= 0; y--)
+    (u = d[y]) && (b = (c ? u(n, a, b) : u(b)) || b);
+  return c && b && At(n, a, b), b;
 };
 const L = "pie-button";
 class h extends xt {
@@ -577,29 +577,29 @@ class h extends xt {
       type: n,
       disabled: a,
       isFullWidth: c,
-      variant: u,
+      variant: b,
       size: y,
-      isLoading: b,
+      isLoading: u,
       isResponsive: f,
-      iconPlacement: k,
-      responsiveSize: z
+      iconPlacement: M,
+      responsiveSize: k
     } = this;
     return N`
             <button
                 @click=${this._handleClick}
                 class="o-btn"
                 type=${n}
-                variant=${u}
+                variant=${b}
                 size=${y}
-                responsiveSize=${Et(z)}
+                responsiveSize=${Et(k)}
                 ?disabled=${a}
                 ?isFullWidth=${c}
                 ?isResponsive=${f}
-                ?isLoading=${b}>
-                    ${b ? this.renderSpinner() : O}
-                    ${k === "leading" ? N`<slot name="icon"></slot>` : O}
+                ?isLoading=${u}>
+                    ${u ? this.renderSpinner() : O}
+                    ${M === "leading" ? N`<slot name="icon"></slot>` : O}
                     <slot></slot>
-                    ${k === "trailing" ? N`<slot name="icon"></slot>` : O}
+                    ${M === "trailing" ? N`<slot name="icon"></slot>` : O}
             </button>`;
   }
   focus() {
@@ -609,57 +609,57 @@ class h extends xt {
 }
 h.formAssociated = !0;
 h.styles = wt(Ft);
-p([
-  m(),
+m([
+  p(),
   R(L, zt, "medium")
 ], h.prototype, "size", 2);
-p([
-  m(),
+m([
+  p(),
   R(L, Mt, "submit")
 ], h.prototype, "type", 2);
-p([
-  m(),
+m([
+  p(),
   R(L, Ct, "primary")
 ], h.prototype, "variant", 2);
-p([
-  m({ type: String }),
+m([
+  p({ type: String }),
   R(L, Lt, "leading")
 ], h.prototype, "iconPlacement", 2);
-p([
-  m({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], h.prototype, "disabled", 2);
-p([
-  m({ type: Boolean, reflect: !0 })
+m([
+  p({ type: Boolean, reflect: !0 })
 ], h.prototype, "isLoading", 2);
-p([
-  m({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], h.prototype, "isFullWidth", 2);
-p([
-  m({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], h.prototype, "isResponsive", 2);
-p([
-  m({ type: String })
+m([
+  p({ type: String })
 ], h.prototype, "name", 2);
-p([
-  m({ type: String })
+m([
+  p({ type: String })
 ], h.prototype, "value", 2);
-p([
-  m()
+m([
+  p()
 ], h.prototype, "formaction", 2);
-p([
-  m()
+m([
+  p()
 ], h.prototype, "formenctype", 2);
-p([
-  m()
+m([
+  p()
 ], h.prototype, "formmethod", 2);
-p([
-  m({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], h.prototype, "formnovalidate", 2);
-p([
-  m()
+m([
+  p()
 ], h.prototype, "formtarget", 2);
-p([
-  m({ type: String })
+m([
+  p({ type: String })
 ], h.prototype, "responsiveSize", 2);
 kt(L, h);
 export {

package/dist/react.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
-import type { ReactWebComponent } from '@lit-labs/react';
+import type { ReactWebComponent } from '@lit/react';
 import type { TemplateResult } from 'lit';
 
 export declare interface ButtonProps {

package/dist/react.js

@@ -1,80 +1,26 @@
-import * as w from "react";
-import { PieButton as E } from "./index.js";
-import { formEncodingtypes as k, formMethodTypes as z, formTargetTypes as A, iconPlacements as D, responsiveSizes as G, sizes as H, types as O, variants as W } from "./index.js";
+import * as t from "react";
+import { createComponent as e } from "@lit/react";
+import { PieButton as o } from "./index.js";
+import { formEncodingtypes as u, formMethodTypes as y, formTargetTypes as P, iconPlacements as l, responsiveSizes as B, sizes as d, types as g, variants as v } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-spinner";
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), g = /* @__PURE__ */ new WeakMap(), M = (t, o, m, c, d) => {
-  const n = d == null ? void 0 : d[o];
-  n === void 0 || m === c ? m == null && o in HTMLElement.prototype ? t.removeAttribute(o) : t[o] = m : ((r, s, u) => {
-    let a = g.get(r);
-    a === void 0 && g.set(r, a = /* @__PURE__ */ new Map());
-    let l = a.get(s);
-    u !== void 0 ? l === void 0 ? (a.set(s, l = { handleEvent: u }), r.addEventListener(s, l)) : l.handleEvent = u : l !== void 0 && (a.delete(s), r.removeEventListener(s, l));
-  })(t, n, m);
-}, P = (t, o) => {
-  typeof t == "function" ? t(o) : t.current = o;
-};
-function B(t = window.React, o, m, c, d) {
-  let n, r, s;
-  if (o === void 0) {
-    const p = t;
-    ({ tagName: r, elementClass: s, events: c, displayName: d } = p), n = p.react;
-  } else
-    n = t, s = m, r = o;
-  const u = n.Component, a = n.createElement, l = new Set(Object.keys(c ?? {}));
-  class f extends u {
-    constructor() {
-      super(...arguments), this.o = null;
-    }
-    t(e) {
-      if (this.o !== null)
-        for (const h in this.i)
-          M(this.o, h, this.props[h], e ? e[h] : void 0, c);
-    }
-    componentDidMount() {
-      var e;
-      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
-    }
-    componentDidUpdate(e) {
-      this.t(e);
-    }
-    render() {
-      const { _$Gl: e, ...h } = this.props;
-      this.h !== e && (this.u = (i) => {
-        e !== null && P(e, i), this.o = i, this.h = e;
-      }), this.i = {};
-      const v = { ref: this.u };
-      for (const [i, y] of Object.entries(h))
-        b.has(i) ? v[i === "className" ? "class" : i] = y : l.has(i) || i in s.prototype ? this.i[i] = y : v[i] = y;
-      return v.suppressHydrationWarning = !0, a(r, v);
-    }
-  }
-  f.displayName = d ?? s.name;
-  const N = n.forwardRef((p, e) => a(f, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
-  return N.displayName = f.displayName, N;
-}
-const S = B({
+const a = e({
   displayName: "PieButton",
-  elementClass: E,
-  react: w,
+  elementClass: o,
+  react: t,
   tagName: "pie-button",
   events: {}
 });
 export {
-  S as PieButton,
-  k as formEncodingtypes,
-  z as formMethodTypes,
-  A as formTargetTypes,
-  D as iconPlacements,
-  G as responsiveSizes,
-  H as sizes,
-  O as types,
-  W as variants
+  a as PieButton,
+  u as formEncodingtypes,
+  y as formMethodTypes,
+  P as formTargetTypes,
+  l as iconPlacements,
+  B as responsiveSizes,
+  d as sizes,
+  g as types,
+  v as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -37,8 +37,8 @@
     "dist/*.js"
   ],
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.2.1",
-    "@justeattakeaway/pie-webc-core": "0.11.0",
+    "@justeattakeaway/pie-spinner": "0.2.2",
+    "@justeattakeaway/pie-webc-core": "0.12.0",
     "element-internals-polyfill": "1.3.8"
   }
 }