@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.16.0 to 0.16.1

CHANGELOG.md

 # Changelog
 
+## 0.16.1
+
+### Patch Changes
+
+- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
+
 ## 0.16.0
@@ -4,0 +10,0 @@

dist/react.js

@@ -1,6 +0,6 @@
-import { PieButton as Ir } from "./index.js";
+import { PieButton as Nr } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "lit/decorators/property.js";
-function Nr(h, c) {
+function Fr(g, c) {
   for (var U = 0; U < c.length; U++) {
@@ -10,5 +10,5 @@ const T = c[U];
       for (const A in T)
-        if (A !== "default" && !(A in h)) {
+        if (A !== "default" && !(A in g)) {
           const k = Object.getOwnPropertyDescriptor(T, A);
-          k && Object.defineProperty(h, A, k.get ? k : {
+          k && Object.defineProperty(g, A, k.get ? k : {
             enumerable: !0,
@@ -20,15 +20,8 @@ get: () => T[A]
   }
-  return Object.freeze(Object.defineProperty(h, Symbol.toStringTag, { value: "Module" }));
+  return Object.freeze(Object.defineProperty(g, Symbol.toStringTag, { value: "Module" }));
 }
-function Fr(h) {
-  return h && h.__esModule && Object.prototype.hasOwnProperty.call(h, "default") ? h.default : h;
+function Lr(g) {
+  return g && g.__esModule && Object.prototype.hasOwnProperty.call(g, "default") ? g.default : g;
 }
-var Te = {}, Lr = {
-  get exports() {
-    return Te;
-  },
-  set exports(h) {
-    Te = h;
-  }
-}, p = {};
+var Ve = { exports: {} }, p = {};
 /**
@@ -48,3 +41,3 @@ * @license React
   Ct = 1;
-  var h = Symbol.for("react.element"), c = Symbol.for("react.portal"), U = Symbol.for("react.fragment"), T = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), k = Symbol.for("react.provider"), V = Symbol.for("react.context"), I = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), F = Symbol.for("react.memo"), N = Symbol.for("react.lazy"), H = Symbol.iterator;
+  var g = Symbol.for("react.element"), c = Symbol.for("react.portal"), U = Symbol.for("react.fragment"), T = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), k = Symbol.for("react.provider"), V = Symbol.for("react.context"), I = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), F = Symbol.for("react.memo"), N = Symbol.for("react.lazy"), H = Symbol.iterator;
   function J(r) {
@@ -79,6 +72,6 @@ return r === null || typeof r != "object" ? null : (r = H && r[H] || r["@@iterator"], typeof r == "function" ? r : null);
   function te(r, u, d) {
-    var m, v = {}, _ = null, S = null;
+    var h, v = {}, _ = null, S = null;
     if (u != null)
-      for (m in u.ref !== void 0 && (S = u.ref), u.key !== void 0 && (_ = "" + u.key), u)
-        j.call(u, m) && !X.hasOwnProperty(m) && (v[m] = u[m]);
+      for (h in u.ref !== void 0 && (S = u.ref), u.key !== void 0 && (_ = "" + u.key), u)
+        j.call(u, h) && !X.hasOwnProperty(h) && (v[h] = u[h]);
     var b = arguments.length - 2;
@@ -93,13 +86,13 @@ if (b === 1)
     if (r && r.defaultProps)
-      for (m in b = r.defaultProps, b)
-        v[m] === void 0 && (v[m] = b[m]);
-    return { $$typeof: h, type: r, key: _, ref: S, props: v, _owner: B.current };
+      for (h in b = r.defaultProps, b)
+        v[h] === void 0 && (v[h] = b[h]);
+    return { $$typeof: g, type: r, key: _, ref: S, props: v, _owner: B.current };
   }
   function pe(r, u) {
-    return { $$typeof: h, type: r.type, key: u, ref: r.ref, props: r.props, _owner: r._owner };
+    return { $$typeof: g, type: r.type, key: u, ref: r.ref, props: r.props, _owner: r._owner };
   }
   function ie(r) {
-    return typeof r == "object" && r !== null && r.$$typeof === h;
+    return typeof r == "object" && r !== null && r.$$typeof === g;
   }
-  function ke(r) {
+  function Te(r) {
     var u = { "=": "=0", ":": "=2" };
@@ -112,5 +105,5 @@ return "$" + r.replace(/[=:]/g, function(d) {
   function se(r, u) {
-    return typeof r == "object" && r !== null && r.key != null ? ke("" + r.key) : u.toString(36);
+    return typeof r == "object" && r !== null && r.key != null ? Te("" + r.key) : u.toString(36);
   }
-  function ne(r, u, d, m, v) {
+  function ne(r, u, d, h, v) {
     var _ = typeof r;
@@ -129,3 +122,3 @@ (_ === "undefined" || _ === "boolean") && (r = null);
           switch (r.$$typeof) {
-            case h:
+            case g:
             case c:
@@ -136,9 +129,9 @@ S = !0;
     if (S)
-      return S = r, v = v(S), r = m === "" ? "." + se(S, 0) : m, Q(v) ? (d = "", r != null && (d = r.replace(ve, "$&/") + "/"), ne(v, u, d, "", function(M) {
+      return S = r, v = v(S), r = h === "" ? "." + se(S, 0) : h, Q(v) ? (d = "", r != null && (d = r.replace(ve, "$&/") + "/"), ne(v, u, d, "", function(M) {
         return M;
       })) : v != null && (ie(v) && (v = pe(v, d + (!v.key || S && S.key === v.key ? "" : ("" + v.key).replace(ve, "$&/") + "/") + r)), u.push(v)), 1;
-    if (S = 0, m = m === "" ? "." : m + ":", Q(r))
+    if (S = 0, h = h === "" ? "." : h + ":", Q(r))
       for (var b = 0; b < r.length; b++) {
         _ = r[b];
-        var E = m + se(_, b);
+        var E = h + se(_, b);
         S += ne(_, u, d, E, v);
@@ -148,3 +141,3 @@ }
       for (r = E.call(r), b = 0; !(_ = r.next()).done; )
-        _ = _.value, E = m + se(_, b++), S += ne(_, u, d, E, v);
+        _ = _.value, E = h + se(_, b++), S += ne(_, u, d, E, v);
     else if (_ === "object")
@@ -157,6 +150,6 @@ throw u = String(r), Error("Objects are not valid as a React child (found: " + (u === "[object Object]" ? "object with keys {" + Object.keys(r).join(", ") + "}" : u) + "). If you meant to render a collection of children, use an array instead.");
       return r;
-    var m = [], v = 0;
-    return ne(r, m, "", "", function(_) {
+    var h = [], v = 0;
+    return ne(r, h, "", "", function(_) {
       return u.call(d, _, v++);
-    }), m;
+    }), h;
   }
@@ -197,3 +190,3 @@ function Z(r) {
       throw Error("React.cloneElement(...): The argument must be a React element, but you passed " + r + ".");
-    var m = P({}, r.props), v = r.key, _ = r.ref, S = r._owner;
+    var h = P({}, r.props), v = r.key, _ = r.ref, S = r._owner;
     if (u != null) {
@@ -203,7 +196,7 @@ if (u.ref !== void 0 && (_ = u.ref, S = B.current), u.key !== void 0 && (v = "" + u.key), r.type && r.type.defaultProps)
       for (E in u)
-        j.call(u, E) && !X.hasOwnProperty(E) && (m[E] = u[E] === void 0 && b !== void 0 ? b[E] : u[E]);
+        j.call(u, E) && !X.hasOwnProperty(E) && (h[E] = u[E] === void 0 && b !== void 0 ? b[E] : u[E]);
     }
     var E = arguments.length - 2;
     if (E === 1)
-      m.children = d;
+      h.children = d;
     else if (1 < E) {
@@ -213,5 +206,5 @@ b = Array(E);
         b[M] = arguments[M + 2];
-      m.children = b;
+      h.children = b;
     }
-    return { $$typeof: h, type: r.type, key: v, ref: _, props: m, _owner: S };
+    return { $$typeof: g, type: r.type, key: v, ref: _, props: h, _owner: S };
   }, p.createContext = function(r) {
@@ -271,10 +264,3 @@ return r = { $$typeof: V, _currentValue: r, _currentValue2: r, _threadCount: 0, Provider: null, Consumer: null, _defaultValue: null, _globalName: null }, r.Provider = { $$typeof: k, _context: r }, r.Consumer = r;
 }
-var de = {}, xr = {
-  get exports() {
-    return de;
-  },
-  set exports(h) {
-    de = h;
-  }
-};
+var de = { exports: {} };
 /**
@@ -289,5 +275,6 @@ * @license React
  */
+de.exports;
 var St;
-function Ur() {
-  return St || (St = 1, function(h, c) {
+function xr() {
+  return St || (St = 1, function(g, c) {
     process.env.NODE_ENV !== "production" && function() {
@@ -333,3 +320,3 @@ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
       };
-      var ie = !1, ke = !1, ve = !1, se = !1, ne = !1, q = {
+      var ie = !1, Te = !1, ve = !1, se = !1, ne = !1, q = {
         ReactCurrentDispatcher: K,
@@ -433,6 +420,6 @@ ReactCurrentBatchConfig: Q,
         }
-      }, d = Object.assign, m = {};
-      Object.freeze(m);
+      }, d = Object.assign, h = {};
+      Object.freeze(h);
       function v(e, t, n) {
-        this.props = e, this.context = t, this.refs = m, this.updater = n || u;
+        this.props = e, this.context = t, this.refs = h, this.updater = n || u;
       }
@@ -464,7 +451,7 @@ v.prototype.isReactComponent = {}, v.prototype.setState = function(e, t) {
       function M(e, t, n) {
-        this.props = e, this.context = t, this.refs = m, this.updater = n || u;
+        this.props = e, this.context = t, this.refs = h, this.updater = n || u;
       }
-      var Pe = M.prototype = new E();
-      Pe.constructor = M, d(Pe, v.prototype), Pe.isPureReactComponent = !0;
-      function Tt() {
+      var ke = M.prototype = new E();
+      ke.constructor = M, d(ke, v.prototype), ke.isPureReactComponent = !0;
+      function kt() {
         var e = {
@@ -475,7 +462,7 @@ current: null
       }
-      var kt = Array.isArray;
+      var Pt = Array.isArray;
       function he(e) {
-        return kt(e);
+        return Pt(e);
       }
-      function Pt(e) {
+      function jt(e) {
         {
@@ -486,3 +473,3 @@ var t = typeof Symbol == "function" && Symbol.toStringTag, n = t && e[Symbol.toStringTag] || e.constructor.name || "Object";
       }
-      function jt(e) {
+      function At(e) {
         try {
@@ -498,6 +485,6 @@ return We(e), !1;
       function me(e) {
-        if (jt(e))
-          return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Pt(e)), We(e);
+        if (At(e))
+          return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", jt(e)), We(e);
       }
-      function At(e, t, n) {
+      function Dt(e, t, n) {
         var a = e.displayName;
@@ -542,3 +529,3 @@ if (a)
             case N:
-              return At(e, e.render, "ForwardRef");
+              return Dt(e, e.render, "ForwardRef");
             case D:
@@ -563,4 +550,4 @@ var a = e.displayName || null;
         __source: !0
-      }, ze, He, je;
-      je = {};
+      }, ze, He, Pe;
+      Pe = {};
       function qe(e) {
@@ -582,3 +569,3 @@ if (ce.call(e, "ref")) {
       }
-      function Dt(e, t) {
+      function $t(e, t) {
         var n = function() {
@@ -592,3 +579,3 @@ ze || (ze = !0, f("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
       }
-      function $t(e, t) {
+      function It(e, t) {
         var n = function() {
@@ -602,9 +589,9 @@ He || (He = !0, f("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
       }
-      function It(e) {
+      function Nt(e) {
         if (typeof e.ref == "string" && B.current && e.__self && B.current.stateNode !== e.__self) {
           var t = ee(B.current.type);
-          je[t] || (f('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', t, e.ref), je[t] = !0);
+          Pe[t] || (f('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', t, e.ref), Pe[t] = !0);
         }
       }
-      var Ae = function(e, t, n, a, o, s, i) {
+      var je = function(e, t, n, a, o, s, i) {
         var l = {
@@ -638,14 +625,14 @@ // This tag allows us to uniquely identify this as a React Element
       };
-      function Nt(e, t, n) {
+      function Ft(e, t, n) {
         var a, o = {}, s = null, i = null, l = null, y = null;
         if (t != null) {
-          qe(t) && (i = t.ref, It(t)), Ge(t) && (me(t.key), s = "" + t.key), l = t.__self === void 0 ? null : t.__self, y = t.__source === void 0 ? null : t.__source;
+          qe(t) && (i = t.ref, Nt(t)), Ge(t) && (me(t.key), s = "" + t.key), l = t.__self === void 0 ? null : t.__self, y = t.__source === void 0 ? null : t.__source;
           for (a in t)
             ce.call(t, a) && !Be.hasOwnProperty(a) && (o[a] = t[a]);
         }
-        var g = arguments.length - 2;
-        if (g === 1)
+        var m = arguments.length - 2;
+        if (m === 1)
           o.children = n;
-        else if (g > 1) {
-          for (var R = Array(g), w = 0; w < g; w++)
+        else if (m > 1) {
+          for (var R = Array(m), w = 0; w < m; w++)
             R[w] = arguments[w + 2];
@@ -661,16 +648,16 @@ Object.freeze && Object.freeze(R), o.children = R;
           var O = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          s && Dt(o, O), i && $t(o, O);
+          s && $t(o, O), i && It(o, O);
         }
-        return Ae(e, s, i, l, y, B.current, o);
+        return je(e, s, i, l, y, B.current, o);
       }
-      function Ft(e, t) {
-        var n = Ae(e.type, t, e.ref, e._self, e._source, e._owner, e.props);
+      function Lt(e, t) {
+        var n = je(e.type, t, e.ref, e._self, e._source, e._owner, e.props);
         return n;
       }
-      function Lt(e, t, n) {
+      function Mt(e, t, n) {
         if (e == null)
           throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + e + ".");
-        var a, o = d({}, e.props), s = e.key, i = e.ref, l = e._self, y = e._source, g = e._owner;
+        var a, o = d({}, e.props), s = e.key, i = e.ref, l = e._self, y = e._source, m = e._owner;
         if (t != null) {
-          qe(t) && (i = t.ref, g = B.current), Ge(t) && (me(t.key), s = "" + t.key);
+          qe(t) && (i = t.ref, m = B.current), Ge(t) && (me(t.key), s = "" + t.key);
           var R;
@@ -689,3 +676,3 @@ e.type && e.type.defaultProps && (R = e.type.defaultProps);
         }
-        return Ae(e.type, s, i, l, y, g, o);
+        return je(e.type, s, i, l, y, m, o);
       }
@@ -695,4 +682,4 @@ function ae(e) {
       }
-      var Ke = ".", Mt = ":";
-      function xt(e) {
+      var Ke = ".", xt = ":";
+      function Ut(e) {
         var t = /[=:]/g, n = {
@@ -706,8 +693,8 @@ "=": "=0",
       }
-      var Qe = !1, Ut = /\/+/g;
+      var Qe = !1, Vt = /\/+/g;
       function Je(e) {
-        return e.replace(Ut, "$&/");
+        return e.replace(Vt, "$&/");
       }
-      function De(e, t) {
-        return typeof e == "object" && e !== null && e.key != null ? (me(e.key), xt("" + e.key)) : t.toString(36);
+      function Ae(e, t) {
+        return typeof e == "object" && e !== null && e.key != null ? (me(e.key), Ut("" + e.key)) : t.toString(36);
       }
@@ -734,10 +721,10 @@ function ge(e, t, n, a, o) {
         if (i) {
-          var l = e, y = o(l), g = a === "" ? Ke + De(l, 0) : a;
+          var l = e, y = o(l), m = a === "" ? Ke + Ae(l, 0) : a;
           if (he(y)) {
             var R = "";
-            g != null && (R = Je(g) + "/"), ge(y, t, R, "", function($r) {
-              return $r;
+            m != null && (R = Je(m) + "/"), ge(y, t, R, "", function(Ir) {
+              return Ir;
             });
           } else
-            y != null && (ae(y) && (y.key && (!l || l.key !== y.key) && me(y.key), y = Ft(
+            y != null && (ae(y) && (y.key && (!l || l.key !== y.key) && me(y.key), y = Lt(
               y,
@@ -751,17 +738,17 @@ // Keep both the (mapped) and old keys if they differ, just as
                 Je("" + y.key) + "/"
-              ) : "") + g
+              ) : "") + m
             )), t.push(y));
           return 1;
         }
-        var w, C, O = 0, $ = a === "" ? Ke : a + Mt;
+        var w, C, O = 0, $ = a === "" ? Ke : a + xt;
         if (he(e))
           for (var Oe = 0; Oe < e.length; Oe++)
-            w = e[Oe], C = $ + De(w, Oe), O += ge(w, t, n, C, o);
+            w = e[Oe], C = $ + Ae(w, Oe), O += ge(w, t, n, C, o);
         else {
-          var Ve = W(e);
-          if (typeof Ve == "function") {
+          var Ue = W(e);
+          if (typeof Ue == "function") {
             var Et = e;
-            Ve === Et.entries && (Qe || Z("Using Maps as children is not supported. Use an array of keyed ReactElements instead."), Qe = !0);
-            for (var Ar = Ve.call(Et), Rt, Dr = 0; !(Rt = Ar.next()).done; )
-              w = Rt.value, C = $ + De(w, Dr++), O += ge(w, t, n, C, o);
+            Ue === Et.entries && (Qe || Z("Using Maps as children is not supported. Use an array of keyed ReactElements instead."), Qe = !0);
+            for (var Dr = Ue.call(Et), Rt, $r = 0; !(Rt = Dr.next()).done; )
+              w = Rt.value, C = $ + Ae(w, $r++), O += ge(w, t, n, C, o);
           } else if (s === "object") {
@@ -782,3 +769,3 @@ var wt = String(e);
       }
-      function Vt(e) {
+      function Wt(e) {
         var t = 0;
@@ -789,3 +776,3 @@ return _e(e, function() {
       }
-      function Wt(e, t, n) {
+      function Yt(e, t, n) {
         _e(e, function() {
@@ -795,3 +782,3 @@ t.apply(this, arguments);
       }
-      function Yt(e) {
+      function Bt(e) {
         return _e(e, function(t) {
@@ -801,3 +788,3 @@ return t;
       }
-      function Bt(e) {
+      function zt(e) {
         if (!ae(e))
@@ -807,3 +794,3 @@ throw new Error("React.Children.only expected to receive a single React element child.");
       }
-      function zt(e) {
+      function Ht(e) {
         var t = {
@@ -888,8 +875,8 @@ $$typeof: F,
       }
-      var fe = -1, $e = 0, Xe = 1, Ht = 2;
-      function qt(e) {
+      var fe = -1, De = 0, Xe = 1, qt = 2;
+      function Gt(e) {
         if (e._status === fe) {
           var t = e._result, n = t();
           if (n.then(function(s) {
-            if (e._status === $e || e._status === fe) {
+            if (e._status === De || e._status === fe) {
               var i = e;
@@ -899,9 +886,9 @@ i._status = Xe, i._result = s;
           }, function(s) {
-            if (e._status === $e || e._status === fe) {
+            if (e._status === De || e._status === fe) {
               var i = e;
-              i._status = Ht, i._result = s;
+              i._status = qt, i._result = s;
             }
           }), e._status === fe) {
             var a = e;
-            a._status = $e, a._result = n;
+            a._status = De, a._result = n;
           }
@@ -923,3 +910,3 @@ }
       }
-      function Gt(e) {
+      function Kt(e) {
         var t = {
@@ -932,3 +919,3 @@ // We use these fields to store the result.
           _payload: t,
-          _init: qt
+          _init: Gt
         };
@@ -964,3 +951,3 @@ {
       }
-      function Kt(e) {
+      function Qt(e) {
         e != null && e.$$typeof === D ? f("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...)).") : typeof e != "function" ? f("forwardRef requires a render function but was given %s.", e === null ? "null" : typeof e) : e.length !== 0 && e.length !== 2 && f("forwardRef render functions accept exactly two parameters: props and ref. %s", e.length === 1 ? "Did you forget to use the ref parameter?" : "Any additional parameter will be undefined."), e != null && (e.defaultProps != null || e.propTypes != null) && f("forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?");
@@ -989,3 +976,3 @@ var t = {
       function et(e) {
-        return !!(typeof e == "string" || typeof e == "function" || e === k || e === I || ne || e === V || e === H || e === J || se || e === G || ie || ke || ve || typeof e == "object" && e !== null && (e.$$typeof === P || e.$$typeof === D || e.$$typeof === z || e.$$typeof === F || e.$$typeof === N || // This needs to include all possible module reference object
+        return !!(typeof e == "string" || typeof e == "function" || e === k || e === I || ne || e === V || e === H || e === J || se || e === G || ie || Te || ve || typeof e == "object" && e !== null && (e.$$typeof === P || e.$$typeof === D || e.$$typeof === z || e.$$typeof === F || e.$$typeof === N || // This needs to include all possible module reference object
         // types supported by any Flight configuration anywhere since
@@ -996,3 +983,3 @@ // we don't know which Flight build this will end up being used
       }
-      function Qt(e, t) {
+      function Jt(e, t) {
         et(e) || f("memo: The first argument must be a component. Instead received: %s", e === null ? "null" : typeof e);
@@ -1027,3 +1014,3 @@ var n = {
       }
-      function Jt(e) {
+      function Xt(e) {
         var t = x();
@@ -1036,39 +1023,39 @@ if (e._context !== void 0) {
       }
-      function Xt(e) {
+      function Zt(e) {
         var t = x();
         return t.useState(e);
       }
-      function Zt(e, t, n) {
+      function er(e, t, n) {
         var a = x();
         return a.useReducer(e, t, n);
       }
-      function er(e) {
+      function tr(e) {
         var t = x();
         return t.useRef(e);
       }
-      function tr(e, t) {
+      function rr(e, t) {
         var n = x();
         return n.useEffect(e, t);
       }
-      function rr(e, t) {
+      function nr(e, t) {
         var n = x();
         return n.useInsertionEffect(e, t);
       }
-      function nr(e, t) {
+      function ar(e, t) {
         var n = x();
         return n.useLayoutEffect(e, t);
       }
-      function ar(e, t) {
+      function or(e, t) {
         var n = x();
         return n.useCallback(e, t);
       }
-      function or(e, t) {
+      function ur(e, t) {
         var n = x();
         return n.useMemo(e, t);
       }
-      function ur(e, t, n) {
+      function ir(e, t, n) {
         var a = x();
         return a.useImperativeHandle(e, t, n);
       }
-      function ir(e, t) {
+      function sr(e, t) {
         {
@@ -1079,15 +1066,15 @@ var n = x();
       }
-      function sr() {
+      function cr() {
         var e = x();
         return e.useTransition();
       }
-      function cr(e) {
+      function fr(e) {
         var t = x();
         return t.useDeferredValue(e);
       }
-      function fr() {
+      function lr() {
         var e = x();
         return e.useId();
       }
-      function lr(e, t, n) {
+      function dr(e, t, n) {
         var a = x();
@@ -1100,3 +1087,3 @@ return a.useSyncExternalStore(e, t, n);
       st.__reactDisabledLog = !0;
-      function dr() {
+      function pr() {
         {
@@ -1124,3 +1111,3 @@ if (le === 0) {
       }
-      function pr() {
+      function vr() {
         {
@@ -1160,6 +1147,6 @@ if (le--, le === 0) {
       }
-      var Ie = q.ReactCurrentDispatcher, Ne;
+      var $e = q.ReactCurrentDispatcher, Ie;
       function be(e, t, n) {
         {
-          if (Ne === void 0)
+          if (Ie === void 0)
             try {
@@ -1169,15 +1156,15 @@ throw Error();
               var a = o.stack.trim().match(/\n( *(at )?)/);
-              Ne = a && a[1] || "";
+              Ie = a && a[1] || "";
             }
           return `
-` + Ne + e;
+` + Ie + e;
         }
       }
-      var Fe = !1, Ee;
+      var Ne = !1, Ee;
       {
-        var vr = typeof WeakMap == "function" ? WeakMap : Map;
-        Ee = new vr();
+        var yr = typeof WeakMap == "function" ? WeakMap : Map;
+        Ee = new yr();
       }
       function ct(e, t) {
-        if (!e || Fe)
+        if (!e || Ne)
           return "";
@@ -1190,7 +1177,7 @@ {
         var a;
-        Fe = !0;
+        Ne = !0;
         var o = Error.prepareStackTrace;
         Error.prepareStackTrace = void 0;
         var s;
-        s = Ie.current, Ie.current = null, dr();
+        s = $e.current, $e.current = null, pr();
         try {
@@ -1232,14 +1219,14 @@ if (t) {
 `), y = a.stack.split(`
-`), g = l.length - 1, R = y.length - 1; g >= 1 && R >= 0 && l[g] !== y[R]; )
+`), m = l.length - 1, R = y.length - 1; m >= 1 && R >= 0 && l[m] !== y[R]; )
               R--;
-            for (; g >= 1 && R >= 0; g--, R--)
-              if (l[g] !== y[R]) {
-                if (g !== 1 || R !== 1)
+            for (; m >= 1 && R >= 0; m--, R--)
+              if (l[m] !== y[R]) {
+                if (m !== 1 || R !== 1)
                   do
-                    if (g--, R--, R < 0 || l[g] !== y[R]) {
+                    if (m--, R--, R < 0 || l[m] !== y[R]) {
                       var w = `
-` + l[g].replace(" at new ", " at ");
+` + l[m].replace(" at new ", " at ");
                       return e.displayName && w.includes("<anonymous>") && (w = w.replace("<anonymous>", e.displayName)), typeof e == "function" && Ee.set(e, w), w;
                     }
-                  while (g >= 1 && R >= 0);
+                  while (m >= 1 && R >= 0);
                 break;
@@ -1249,3 +1236,3 @@ }
         } finally {
-          Fe = !1, Ie.current = s, pr(), Error.prepareStackTrace = o;
+          Ne = !1, $e.current = s, vr(), Error.prepareStackTrace = o;
         }
@@ -1255,6 +1242,6 @@ var C = e ? e.displayName || e.name : "", O = C ? be(C) : "";
       }
-      function yr(e, t, n) {
+      function hr(e, t, n) {
         return ct(e, !1);
       }
-      function hr(e) {
+      function mr(e) {
         var t = e.prototype;
@@ -1267,3 +1254,3 @@ return !!(t && t.isReactComponent);
         if (typeof e == "function")
-          return ct(e, hr(e));
+          return ct(e, mr(e));
         if (typeof e == "string")
@@ -1280,3 +1267,3 @@ return be(e);
             case N:
-              return yr(e.render);
+              return hr(e.render);
             case D:
@@ -1302,3 +1289,3 @@ return Re(e.type, t, n);
       }
-      function mr(e, t, n, a, o) {
+      function gr(e, t, n, a, o) {
         {
@@ -1315,4 +1302,4 @@ var s = Function.call.bind(ce);
                 l = e[i](t, i, a, n, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-              } catch (g) {
-                l = g;
+              } catch (m) {
+                l = m;
               }
@@ -1330,4 +1317,4 @@ l && !(l instanceof Error) && (we(o), f("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", a || "React class", n, i, typeof l), we(null)), l instanceof Error && !(l.message in ft) && (ft[l.message] = !0, we(o), f("Failed %s type: %s", n, l.message), we(null));
       }
-      var Le;
-      Le = !1;
+      var Fe;
+      Fe = !1;
       function dt() {
@@ -1343,3 +1330,3 @@ if (B.current) {
       }
-      function gr(e) {
+      function _r(e) {
         if (e !== void 0) {
@@ -1353,7 +1340,7 @@ var t = e.fileName.replace(/^.*[\\\/]/, ""), n = e.lineNumber;
       }
-      function _r(e) {
-        return e != null ? gr(e.__source) : "";
+      function br(e) {
+        return e != null ? _r(e.__source) : "";
       }
       var pt = {};
-      function br(e) {
+      function Er(e) {
         var t = dt();
@@ -1371,3 +1358,3 @@ if (!t) {
           e._store.validated = !0;
-          var n = br(t);
+          var n = Er(t);
           if (!pt[n]) {
@@ -1413,5 +1400,5 @@ pt[n] = !0;
             var a = ee(t);
-            mr(n, e.props, "prop", a, e);
-          } else if (t.PropTypes !== void 0 && !Le) {
-            Le = !0;
+            gr(n, e.props, "prop", a, e);
+          } else if (t.PropTypes !== void 0 && !Fe) {
+            Fe = !0;
             var o = ee(t);
@@ -1423,3 +1410,3 @@ f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", o || "Unknown");
       }
-      function Er(e) {
+      function Rr(e) {
         {
@@ -1441,3 +1428,3 @@ for (var t = Object.keys(e.props), n = 0; n < t.length; n++) {
           (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (o += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var s = _r(t);
+          var s = br(t);
           s ? o += s : o += dt();
@@ -1447,3 +1434,3 @@ var i;
         }
-        var l = Nt.apply(this, arguments);
+        var l = Ft.apply(this, arguments);
         if (l == null)
@@ -1454,6 +1441,6 @@ return l;
             yt(arguments[y], e);
-        return e === k ? Er(l) : ht(l), l;
+        return e === k ? Rr(l) : ht(l), l;
       }
       var gt = !1;
-      function Rr(e) {
+      function wr(e) {
         var t = mt.bind(null, e);
@@ -1469,8 +1456,8 @@ return t.type = e, gt || (gt = !0, Z("React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.")), Object.defineProperty(t, "type", {
       }
-      function wr(e, t, n) {
-        for (var a = Lt.apply(this, arguments), o = 2; o < arguments.length; o++)
+      function Cr(e, t, n) {
+        for (var a = Mt.apply(this, arguments), o = 2; o < arguments.length; o++)
           yt(arguments[o], a.type);
         return ht(a), a;
       }
-      function Cr(e, t) {
+      function Sr(e, t) {
         var n = Q.transition;
@@ -1490,7 +1477,7 @@ Q.transition = {};
       var _t = !1, Ce = null;
-      function Sr(e) {
+      function Or(e) {
         if (Ce === null)
           try {
-            var t = ("require" + Math.random()).slice(0, 7), n = h && h[t];
-            Ce = n.call(h, "timers").setImmediate;
+            var t = ("require" + Math.random()).slice(0, 7), n = g && g[t];
+            Ce = n.call(g, "timers").setImmediate;
           } catch {
@@ -1506,3 +1493,3 @@ Ce = function(o) {
       var ue = 0, bt = !1;
-      function Or(e) {
+      function Tr(e) {
         {
@@ -1515,3 +1502,3 @@ var t = ue;
               var o = j.current;
-              o !== null && (j.didScheduleLegacyUpdate = !1, Ue(o));
+              o !== null && (j.didScheduleLegacyUpdate = !1, xe(o));
             }
@@ -1527,3 +1514,3 @@ } catch (C) {
                 i = !0, s.then(function($) {
-                  Se(t), ue === 0 ? Me($, C, O) : C($);
+                  Se(t), ue === 0 ? Le($, C, O) : C($);
                 }, function($) {
@@ -1541,7 +1528,7 @@ Se(t), O($);
             if (Se(t), ue === 0) {
-              var g = j.current;
-              g !== null && (Ue(g), j.current = null);
+              var m = j.current;
+              m !== null && (xe(m), j.current = null);
               var R = {
                 then: function(C, O) {
-                  j.current === null ? (j.current = [], Me(y, C, O)) : C(y);
+                  j.current === null ? (j.current = [], Le(y, C, O)) : C(y);
                 }
@@ -1564,3 +1551,3 @@ };
       }
-      function Me(e, t, n) {
+      function Le(e, t, n) {
         {
@@ -1570,4 +1557,4 @@ var a = j.current;
             try {
-              Ue(a), Sr(function() {
-                a.length === 0 ? (j.current = null, t(e)) : Me(e, t, n);
+              xe(a), Or(function() {
+                a.length === 0 ? (j.current = null, t(e)) : Le(e, t, n);
               });
@@ -1581,6 +1568,6 @@ } catch (o) {
       }
-      var xe = !1;
-      function Ue(e) {
-        if (!xe) {
-          xe = !0;
+      var Me = !1;
+      function xe(e) {
+        if (!Me) {
+          Me = !0;
           var t = 0;
@@ -1598,24 +1585,23 @@ try {
           } finally {
-            xe = !1;
+            Me = !1;
           }
         }
       }
-      var Tr = mt, kr = wr, Pr = Rr, jr = {
+      var kr = mt, Pr = Cr, jr = wr, Ar = {
         map: _e,
-        forEach: Wt,
-        count: Vt,
-        toArray: Yt,
-        only: Bt
+        forEach: Yt,
+        count: Wt,
+        toArray: Bt,
+        only: zt
       };
-      c.Children = jr, c.Component = v, c.Fragment = k, c.Profiler = I, c.PureComponent = M, c.StrictMode = V, c.Suspense = H, c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = q, c.cloneElement = kr, c.createContext = zt, c.createElement = Tr, c.createFactory = Pr, c.createRef = Tt, c.forwardRef = Kt, c.isValidElement = ae, c.lazy = Gt, c.memo = Qt, c.startTransition = Cr, c.unstable_act = Or, c.useCallback = ar, c.useContext = Jt, c.useDebugValue = ir, c.useDeferredValue = cr, c.useEffect = tr, c.useId = fr, c.useImperativeHandle = ur, c.useInsertionEffect = rr, c.useLayoutEffect = nr, c.useMemo = or, c.useReducer = Zt, c.useRef = er, c.useState = Xt, c.useSyncExternalStore = lr, c.useTransition = sr, c.version = U, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+      c.Children = Ar, c.Component = v, c.Fragment = k, c.Profiler = I, c.PureComponent = M, c.StrictMode = V, c.Suspense = H, c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = q, c.cloneElement = Pr, c.createContext = Ht, c.createElement = kr, c.createFactory = jr, c.createRef = kt, c.forwardRef = Qt, c.isValidElement = ae, c.lazy = Kt, c.memo = Jt, c.startTransition = Sr, c.unstable_act = Tr, c.useCallback = or, c.useContext = Xt, c.useDebugValue = sr, c.useDeferredValue = fr, c.useEffect = rr, c.useId = lr, c.useImperativeHandle = ir, c.useInsertionEffect = nr, c.useLayoutEffect = ar, c.useMemo = ur, c.useReducer = er, c.useRef = tr, c.useState = Zt, c.useSyncExternalStore = dr, c.useTransition = cr, c.version = U, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
     }();
-  }(xr, de)), de;
+  }(de, de.exports)), de.exports;
 }
-(function(h) {
-  process.env.NODE_ENV === "production" ? h.exports = Mr() : h.exports = Ur();
-})(Lr);
-const Vr = /* @__PURE__ */ Fr(Te), Wr = /* @__PURE__ */ Nr({
+process.env.NODE_ENV === "production" ? Ve.exports = Mr() : Ve.exports = xr();
+var Tt = Ve.exports;
+const Ur = /* @__PURE__ */ Lr(Tt), Vr = /* @__PURE__ */ Fr({
   __proto__: null,
-  default: Vr
-}, [Te]);
+  default: Ur
+}, [Tt]);
 /**
@@ -1626,5 +1612,5 @@ * @license
  */
-const Yr = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), Ot = /* @__PURE__ */ new WeakMap(), Br = (h, c, U, T, A) => {
+const Wr = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), Ot = /* @__PURE__ */ new WeakMap(), Yr = (g, c, U, T, A) => {
   const k = A == null ? void 0 : A[c];
-  k === void 0 || U === T ? U == null && c in HTMLElement.prototype ? h.removeAttribute(c) : h[c] = U : ((V, I, z) => {
+  k === void 0 || U === T ? U == null && c in HTMLElement.prototype ? g.removeAttribute(c) : g[c] = U : ((V, I, z) => {
     let F = Ot.get(V);
@@ -1634,11 +1620,11 @@ F === void 0 && Ot.set(V, F = /* @__PURE__ */ new Map());
     z !== void 0 ? N === void 0 ? (F.set(I, N = { handleEvent: z }), V.addEventListener(I, N)) : N.handleEvent = z : N !== void 0 && (F.delete(I), V.removeEventListener(I, N));
-  })(h, k, U);
+  })(g, k, U);
 };
-function zr(h = window.React, c, U, T, A) {
+function Br(g = window.React, c, U, T, A) {
   let k, V, I;
   if (c === void 0) {
-    const D = h;
+    const D = g;
     ({ tagName: V, elementClass: I, events: T, displayName: A } = D), k = D.react;
   } else
-    k = h, I = U, V = c;
+    k = g, I = U, V = c;
   const z = k.Component, F = k.createElement, N = new Set(Object.keys(T ?? {}));
@@ -1652,3 +1638,3 @@ class H extends z {
         for (const G in this.i)
-          Br(this.o, G, this.props[G], P ? P[G] : void 0, T);
+          Yr(this.o, G, this.props[G], P ? P[G] : void 0, T);
     }
@@ -1670,3 +1656,3 @@ componentDidMount() {
       for (const [L, W] of Object.entries(G))
-        Yr.has(L) ? Y[L === "className" ? "class" : L] = W : N.has(L) || L in I.prototype ? this.i[L] = W : Y[L] = W;
+        Wr.has(L) ? Y[L === "className" ? "class" : L] = W : N.has(L) || L in I.prototype ? this.i[L] = W : Y[L] = W;
       return F(V, Y);
@@ -1679,6 +1665,6 @@ }
 }
-const Qr = zr({
+const Kr = Br({
   displayName: "PieButton",
-  elementClass: Ir,
-  react: Wr,
+  elementClass: Nr,
+  react: Vr,
   tagName: "pie-button",
@@ -1688,3 +1674,3 @@ events: {}
 export {
-  Qr as PieButton
+  Kr as PieButton
 };

dist/types/packages/components/pie-button/src/defs.d.ts

 export interface ButtonProps {
+    /**
+     * the size of the button.
+     * @default medium
+     */
     size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
+    /**
+     * The html button type to use.
+     * @default submit
+     */
     type: 'submit' | 'button' | 'reset' | 'menu';
+    /**
+     * the variant of the button.
+     * @default primary
+     */
     variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the button will span the full width.
+     * @default false
+     */
+    isFullWidth: boolean;
 }
@@ -9,11 +31,11 @@ /**
  */
-export declare const buttonSizes: ButtonProps['size'][];
+export declare const buttonSizes: Array<ButtonProps['size']>;
 /**
  * Button style variants
  */
-export declare const buttonVariants: ButtonProps['variant'][];
+export declare const buttonVariants: Array<ButtonProps['variant']>;
 /**
  * Button type variants
  */
-export declare const buttonTypes: ButtonProps['type'][];
+export declare const buttonTypes: Array<ButtonProps['type']>;
 //# sourceMappingURL=defs.d.ts.map

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "PIE design system button built using web components",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -20,4 +20,3 @@ <p align="center">
    - [React example (using Next 13)](#react-templates-using-next-13)
-5. [TypeScript Enum Exports](#typescript-enum-exports)
-6. [Testing](#testing)
+5. [Testing](#testing)
    - [Browser Tests](#browser-tests)
@@ -29,21 +28,28 @@ - [Visual Tests](#visual-tests)
 
-`pie-button` is a Web Component built using the Lit library. It offers a simple and accessible button component for web applications. This component can be easily integrated into various frontend frameworks and customized through a set of properties. For TypeScript projects, it also provides exported enums for type safety and autocompletion.
+`pie-button` is a Web Component built using the Lit library. It offers a simple and accessible button component for web applications.
 
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+
 ## Local development
 
-Install dependencies at the root
-```
+Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
+
+```bash
 yarn
 ```
 
-Navigate to this folder, compile with TypeScript and build with Vite
+To build the `pie-button` package, run the following command:
+
+```bash
+yarn build --filter=pie-button
 ```
-cd packages/components/pie-button
-yarn build
-```
 
-Compile and watch for changes (auto-compiles `dist` on save)
+If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
+
+```bash
+yarn watch --filter=pie-button
+
+# in a separate terminal tab, run
+yarn dev --filter=pie-storybook
 ```
-yarn watch
-```
 
@@ -53,6 +59,8 @@ ### Importing the component
 ```js
-// default
+// Default – for Native JS Applications, Vue, Angular, Svelte etc.
 import { PieButton } from '@justeattakeaway/pie-button';
 
-// react
+// React
+// For React, you will need to import our React specific component build
+// Which wraps the web component using the @lit-labs/react package
 import { PieButton } from '@justeattakeaway/pie-button/dist/react';
@@ -63,11 +71,20 @@ ```
 
-| Property    | Type      | Default         | Description                                                          |
-|-------------|-----------|-----------------|----------------------------------------------------------------------|
-| size        | `String`  | `medium`        | Size of the button, one of `buttonSizes` |
-| type        | `String`  | `submit`        | Type of the button, one of `buttonTypes` |
-| variant     | `String`  | `primary`       | Variant of the button, one of `buttonVariants` |
-| disabled    | `Boolean` | `false`         | If `true`, disables the button.                                      |
-| isFullWidth | `Boolean` | `false`         | If `true`, sets the button width to 100% of it's container.                            |
+| Property    | Type      | Default         | Description                                                                                                    |
+|-------------|-----------|-----------------|----------------------------------------------------------------------------------------------------------------|
+| size        | `String`  | `medium`        | Size of the button, one of `buttonSizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
+| type        | `String`  | `submit`        | Type of the button, one of `buttonTypes` – `submit`, `button`, `reset`, `menu`                                 |
+| variant     | `String`  | `primary`       | Variant of the button, one of `buttonVariants`– `primary`, `secondary`, `outline`, `ghost`                     |
+| disabled    | `Boolean` | `false`         | If `true`, disables the button.                                                                                |
+| isFullWidth | `Boolean` | `false`         | If `true`, sets the button width to 100% of it's container.                                                    |
 
+In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
 
+```html
+<!-- Native HTML -->
+<pie-button size='medium' type='button' variant='primary'>Click me!</pie-button>
+
+<!-- JSX -->
+<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
+```
+
 ## Events
@@ -80,2 +97,3 @@
 ### HTML
+
 ```html
@@ -87,2 +105,3 @@ <!-- Other attributes omitted for clarity -->
 ### Vue templates (using Nuxt 3)
+
 ```html
@@ -94,2 +113,3 @@ <!-- Other attributes omitted for clarity -->
 ### React templates (using Next 13)
+
 ```html
@@ -101,18 +121,3 @@ <!-- Other attributes omitted for clarity -->
 
-## TypeScript Type Exports
 
-For TypeScript projects, we export one interface for the button properties: `ButtonProps`. This contains three props `buttonSizes`, `buttonTypes`, and `buttonVariants`. You can import and use these types to set the corresponding property values for the `pie-button` component. This ensures better type safety and autocompletion in your project.
-
-Here's an example of how to import and use the enums in a TypeScript project:
-
-```typescript
-import { ButtonProps } from '@justeattakeaway/pie-button';
-```
-
-In your markup or JSX, you can then use these variables to set the properties for the pie-button component:
-
-```html
-<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
-```
-
 ## Testing
@@ -122,4 +127,5 @@
 
-Run at the root of the monorepo:
-```
+To run the browser tests, run the following command from the root of the monorepo:
+
+```bash
 yarn test:browsers --filter=pie-button
@@ -130,4 +136,5 @@ ```
 
-Run at the root of the monorepo:
-```
+To run the visual regression tests, run the following command from the root of the monorepo:
+
+```bash
 yarn test:visual --filter=pie-button
@@ -138,13 +145,14 @@ ```
 
-Setup via bash:
+#### Setup via bash
 
-```
+```bash
 export PERCY_TOKEN_PIE_BUTTON=abcde
 ```
 
-Setup via package.json:
+#### Setup via package.json
 
 Under scripts `test:visual` replace the environment variable with the below:
 
+```bash
+PERCY_TOKEN_PIE_BUTTON=abcde
 ```
-PERCY_TOKEN_PIE_BUTTON=abcde

src/defs.ts

 export interface ButtonProps {
+    /**
+     * the size of the button.
+     * @default medium
+     */
     size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
+    /**
+     * The html button type to use.
+     * @default submit
+     */
     type: 'submit' | 'button' | 'reset' | 'menu';
+    /**
+     * the variant of the button.
+     * @default primary
+     */
     variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the button will span the full width.
+     * @default false
+     */
+    isFullWidth: boolean;
 }
@@ -10,3 +32,3 @@
  */
-export const buttonSizes: ButtonProps['size'][] = [
+export const buttonSizes: Array<ButtonProps['size']> = [
     'xsmall',
@@ -22,3 +44,3 @@ 'small-expressive',
  */
-export const buttonVariants: ButtonProps['variant'][] = [
+export const buttonVariants: Array<ButtonProps['variant']> = [
     'primary',
@@ -33,3 +55,3 @@ 'secondary',
  */
-export const buttonTypes: ButtonProps['type'][] = [
+export const buttonTypes: Array<ButtonProps['type']> = [
     'submit',
@@ -36,0 +58,0 @@ 'button',

src/index.ts

 import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
-
 import styles from './button.scss?inline';
@@ -6,0 +5,0 @@ import {

test/accessibility/pie-button.spec.ts

 import { test, expect } from '@sand4rt/experimental-ct-web';
 import AxeBuilder from '@axe-core/playwright';
-import {
-    PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
-import { PieButton } from '@/index.ts';
+import { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
+import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
+import { PieButton } from '@/index';
 import { buttonSizes, buttonVariants } from '@/defs';
@@ -17,8 +16,8 @@
 
-const componentPropsMatrix : Combination[] = getAllPropCombinations(props);
-const componentPropsMatrixByVariant: Record<string, Combination[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
+const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
+const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
 const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
 
 componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
-    await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: Combination) => {
+    await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
         await mount(
@@ -35,3 +34,3 @@ PieButton,
 
-    const results = await new AxeBuilder.default({ page })
+    const results = await new AxeBuilder({ page })
         .withTags(['wcag21a', 'wcag21aa', 'wcag143', 'cat.color', 'cat.aria'])
@@ -38,0 +37,0 @@ .disableRules(['color-contrast', 'color-contrast-enhanced'])

test/component/pie-button.spec.ts

 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieButton } from '@/index';
+import { ButtonProps } from '@/index';
 
+const props: ButtonProps = {
+    size: 'large',
+    variant: 'primary',
+}
+
 test('should correctly work with native click events', async ({ mount }) => {
@@ -10,6 +16,3 @@ const messages: string[] = [];
         {
-            props: {
-                size: 'large',
-                variant: 'primary',
-            },
+            props,
             slots: {
@@ -16,0 +19,0 @@ default: 'Click me!',

vite.config.js

@@ -1,3 +0,3 @@
-import viteConfig from '@justeattakeaway/pie-components-config/vite.config'; // eslint-disable-line import/no-extraneous-dependencies
+import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
 
 export default viteConfig;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103445

increased by1.59%

Lines of code

2055

increased by1.53%

Number of lines in readme file

148

increased by5.71%

No dependency changes