@justeattakeaway/pie-icon-button 0.21.3-next.0 → 0.22.0

package/README.md

@@ -60,7 +60,7 @@ import '@justeattakeaway/pie-icon-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 { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
 ```
 

package/dist/index.js

@@ -46,7 +46,7 @@ class c extends m {
    * @private
    */
   renderSpinner() {
-    const { variant: o, size: t } = this, e = t === "xsmall" ? "s" : "m";
+    const { variant: o, size: t } = this, e = t === "xsmall" ? "small" : "medium";
     let r = "brand";
     return o != null && o.includes("secondary") && (r = "secondary"), (o === "primary" || o === "ghost-inverse") && (r = "inverse"), s`
                 <pie-spinner

package/dist/react.js

@@ -1,50 +1,19 @@
-import * as y from "react";
-import { PieIconButton as E } from "./index.js";
-import { sizes as k, variants as C } from "./index.js";
+import * as t from "react";
+import { createComponent as o } from "@lit/react";
+import { PieIconButton as e } from "./index.js";
+import { sizes as u, variants as f } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-spinner";
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), b = (t, i, a, l, u) => {
-  const m = u == null ? void 0 : u[i];
-  m === void 0 || a === l ? (t[i] = a, a == null && i in HTMLElement.prototype && t.removeAttribute(i)) : ((c, r, o) => {
-    let s = v.get(c);
-    s === void 0 && v.set(c, s = /* @__PURE__ */ new Map());
-    let n = s.get(r);
-    o !== void 0 ? n === void 0 ? (s.set(r, n = { handleEvent: o }), c.addEventListener(r, n)) : n.handleEvent = o : n !== void 0 && (s.delete(r), c.removeEventListener(r, n));
-  })(t, m, a);
-}, h = ({ react: t, tagName: i, elementClass: a, events: l, displayName: u }) => {
-  const m = new Set(Object.keys(l ?? {})), c = t.forwardRef((r, o) => {
-    const s = t.useRef(null), n = t.useRef(null), f = {}, p = {};
-    for (const [e, d] of Object.entries(r))
-      N.has(e) ? f[e === "className" ? "class" : e] = d : m.has(e) || e in a.prototype ? p[e] = d : f[e] = d;
-    return t.useLayoutEffect(() => {
-      if (n.current !== null) {
-        for (const e in p)
-          b(n.current, e, r[e], s.current ? s.current[e] : void 0, l);
-        s.current = r;
-      }
-    }), t.useLayoutEffect(() => {
-      var e;
-      (e = n.current) == null || e.removeAttribute("defer-hydration");
-    }, []), f.suppressHydrationWarning = !0, t.createElement(i, { ...f, ref: t.useCallback((e) => {
-      n.current = e, typeof o == "function" ? o(e) : o !== null && (o.current = e);
-    }, [o]) });
-  });
-  return c.displayName = u ?? a.name, c;
-}, I = h({
+const p = o({
   displayName: "PieIconButton",
-  elementClass: E,
-  react: y,
+  elementClass: e,
+  react: t,
   tagName: "pie-icon-button",
   events: {}
 });
 export {
-  I as PieIconButton,
-  k as sizes,
-  C as variants
+  p as PieIconButton,
+  u as sizes,
+  f as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "0.21.3-next.0",
+  "version": "0.22.0",
   "description": "PIE Design System Icon Button built using Web Components",
   "type": "module",
   "main": "dist/index.js",
@@ -27,8 +27,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@justeattakeaway/pie-icons-webc": "0.11.1",
-    "@justeattakeaway/pie-spinner": "0.2.2-next.0",
-    "@justeattakeaway/pie-webc-core": "0.12.0-next.0"
+    "@justeattakeaway/pie-spinner": "0.3.0",
+    "@justeattakeaway/pie-webc-core": "0.12.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -39,7 +39,7 @@ export class PieIconButton extends LitElement implements IconButtonProps {
      */
     private renderSpinner (): TemplateResult {
         const { variant, size } = this;
-        const spinnerSize = size === 'xsmall' ? 's' : 'm';
+        const spinnerSize = size === 'xsmall' ? 'small' : 'medium';
         let spinnerVariant = 'brand';
         if (variant?.includes('secondary')) spinnerVariant = 'secondary';
         if (variant === 'primary' || variant === 'ghost-inverse') spinnerVariant = 'inverse';