@justeattakeaway/pie-switch 0.17.1 → 0.18.0

package/README.md

@@ -56,7 +56,7 @@ import '@justeattakeaway/pie-switch';
 ```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 { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
 ```
 

package/dist/index.js

@@ -1,7 +1,8 @@
-import { isServer as z, css as I, LitElement as f, html as d, unsafeCSS as P, nothing as l } from "lit";
-import { property as n, query as E } from "lit/decorators.js";
-const _ = (c) => {
-  class e extends c {
+import { isServer as b, unsafeCSS as u, html as d, nothing as a, LitElement as v } from "lit";
+import { property as l } from "lit/decorators.js";
+import "@justeattakeaway/pie-icons-webc/IconCheck";
+const f = (i) => {
+  class c extends i {
     /**
      * A getter to determine whether the text direction is right-to-left (RTL).
      * If the `dir` property is present on the component, it will be used to determine the text direction.
@@ -12,133 +13,46 @@ const _ = (c) => {
      * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
      */
     get isRTL() {
-      return this.dir ? this.dir === "rtl" : !z && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+      return this.dir ? this.dir === "rtl" : !b && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
     }
   }
-  return e;
-}, L = (c, e, t) => function(i, s) {
+  return c;
+}, g = (i, c, e) => function(t, s) {
   const o = `#${s}`;
-  Object.defineProperty(i, s, {
+  Object.defineProperty(t, s, {
     get() {
       return this[o];
     },
-    set(h) {
-      const C = this[o];
-      e.includes(h) ? this[o] = h : (console.error(
-        `<${c}> Invalid value "${h}" provided for property "${s}".`,
-        `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${t}"`
-      ), this[o] = t), this.requestUpdate(s, C);
-    }
+    set(p) {
+      c.includes(p) ? this[o] = p : (console.error(
+        `<${i}> Invalid value "${p}" provided for property "${s}".`,
+        `Must be one of: ${c.join(" | ")}.`,
+        `Falling back to default value: "${e}"`
+      ), this[o] = e);
+    },
+    configurable: !0
   });
 };
-function S(c, e) {
-  customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, e);
-}
-const T = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[isDisabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[isChecked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[isChecked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[isChecked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[isChecked]:focus,.c-switch[isChecked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[isChecked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[isDisabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{appearance:none;margin:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
-`, O = ["leading", "trailing"], j = "pie-switch-changed";
-function D(c, e) {
-  customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, e);
-}
-const b = {
-  xs: 16,
-  s: 20,
-  m: 24,
-  l: 28,
-  xl: 32,
-  xxl: 40
-}, m = Object.keys(b), k = "xs", y = 8, w = 32;
-function R(c, e, t) {
-  const r = parseInt(c, 10), i = r % t === 0;
-  return r >= e && i;
-}
-const x = {
-  large: (c) => R(c, w, y),
-  regular: (c) => m.includes(c)
-};
-function A(c) {
-  const e = x.large(c);
-  return { isValid: e, size: e ? c : w };
-}
-function B(c) {
-  const e = x.regular(c), t = e ? b[c] : b[k];
-  return { isValid: e, size: t };
-}
-const g = (c, e, t, r) => {
-  const i = c.endsWith("Large") || c.endsWith("-large");
-  let s, o;
-  if (t) {
-    if ({ isValid: s, size: o } = i ? A(t) : B(t), !s) {
-      const h = i ? `Invalid prop "size" value supplied to "${r}". The prop value should be a number equal or greater than ${w} and multiple of ${y}.` : `Invalid prop "size" value supplied to "${r}". The prop value should be one of the following values: ${m.join(", ")}.`;
-      console.error(h);
-    }
-  } else
-    o = i ? w : b[k];
-  return {
-    class: [c, e].filter(Boolean).join(" "),
-    width: o,
-    height: o
-  };
-};
-var V = Object.defineProperty, W = Object.getOwnPropertyDescriptor, v = (c, e, t, r) => {
-  for (var i = r > 1 ? void 0 : r ? W(e, t) : e, s = c.length - 1, o; s >= 0; s--)
-    (o = c[s]) && (i = (r ? o(e, t, i) : o(i)) || i);
-  return r && i && V(e, t, i), i;
-};
-const q = "icon-check";
-class p extends f {
-  constructor() {
-    super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--check";
-  }
-  connectedCallback() {
-    var e, t, r;
-    if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
-      const i = g("c-pieIcon c-pieIcon--check", "", null, "IconCheck");
-      (t = this._svg) == null || t.setAttribute("width", i.width), (r = this._svg) == null || r.setAttribute("height", i.height);
-    }
-  }
-  updated(e) {
-    var t, r;
-    let i;
-    e.has("size") && (i = g("c-pieIcon c-pieIcon--check", "", this.size, "IconCheck"), (t = this._svg) == null || t.setAttribute("width", i.width), (r = this._svg) == null || r.setAttribute("height", i.height));
-  }
-  render() {
-    return d`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--check"><path d="M5.865 12.489a1.217 1.217 0 0 1-.875-.385L1.875 8.656l.98-.875 3.028 3.369 7.253-7.822.963.875-7.35 7.875a1.216 1.216 0 0 1-.875.385l-.009.026Z"></path></svg>`;
-  }
+function m(i, c) {
+  customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, c);
 }
-p.styles = I`
-        :host-context(pie-icon-button) svg,
-        :host-context(pie-button) svg {
-            display: block;
-            width: var(--btn-icon-size);
-            height: var(--btn-icon-size);
-        }
-    `;
-v([
-  n({ type: String, reflect: !0 })
-], p.prototype, "size", 2);
-v([
-  n({ type: String, reflect: !0 })
-], p.prototype, "class", 2);
-v([
-  E("svg")
-], p.prototype, "_svg", 2);
-D(q, p);
-var M = Object.defineProperty, N = Object.getOwnPropertyDescriptor, u = (c, e, t, r) => {
-  for (var i = r > 1 ? void 0 : r ? N(e, t) : e, s = c.length - 1, o; s >= 0; s--)
-    (o = c[s]) && (i = (r ? o(e, t, i) : o(i)) || i);
-  return r && i && M(e, t, i), i;
+const k = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[isDisabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[isChecked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[isChecked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[isChecked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[isChecked]:focus,.c-switch[isChecked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[isChecked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[isDisabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{appearance:none;margin:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
+`, y = ["leading", "trailing"], $ = "pie-switch-changed";
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, h = (i, c, e, r) => {
+  for (var t = r > 1 ? void 0 : r ? C(c, e) : c, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (t = (r ? o(c, e, t) : o(t)) || t);
+  return r && t && x(c, e, t), t;
 };
-const $ = "pie-switch";
-class a extends _(f) {
+const w = "pie-switch";
+class n extends f(v) {
   constructor() {
     super(...arguments), this.labelPlacement = "leading", this.isChecked = !1, this.isDisabled = !1;
   }
-  onChange(e) {
-    const { checked: t } = e == null ? void 0 : e.currentTarget;
-    this.isChecked = t;
+  onChange(c) {
+    const { checked: e } = c == null ? void 0 : c.currentTarget;
+    this.isChecked = e;
     const r = new CustomEvent(
-      j,
+      $,
       {
         bubbles: !0,
         composed: !0,
@@ -154,28 +68,28 @@ class a extends _(f) {
    * @private
    */
   renderSwitchLabel() {
-    const { label: e, labelPlacement: t } = this;
-    return e ? d`
+    const { label: c, labelPlacement: e } = this;
+    return c ? d`
                 <label
                     for="switch"
-                    data-test-id="switch-label-${t}">
-                    ${e}
+                    data-test-id="switch-label-${e}">
+                    ${c}
                 </label>` : d``;
   }
   render() {
     const {
-      labelPlacement: e,
-      aria: t,
+      labelPlacement: c,
+      aria: e,
       isChecked: r,
-      isDisabled: i,
+      isDisabled: t,
       isRTL: s
     } = this, o = "switch-description";
     return d`
             <div
                 class="c-switch-wrapper"
                 ?isRTL=${s}
-                ?isDisabled=${i}>
-                ${e === "leading" ? this.renderSwitchLabel() : l}
+                ?isDisabled=${t}>
+                ${c === "leading" ? this.renderSwitchLabel() : a}
                 <label
                     data-test-id="switch-component"
                     class="c-switch"
@@ -187,40 +101,40 @@ class a extends _(f) {
                         type="checkbox"
                         class="c-switch-input"
                         .checked="${r}"
-                        .disabled="${i}"
+                        .disabled="${t}"
                         @change="${this.onChange}"
-                        aria-label="${(t == null ? void 0 : t.label) || l}"
-                        aria-describedby="${t != null && t.describedBy ? o : l}">
+                        aria-label="${(e == null ? void 0 : e.label) || a}"
+                        aria-describedby="${e != null && e.describedBy ? o : a}">
                     <div class="c-switch-control">
-                        ${r ? d`<icon-check></icon-check>` : l}
+                        ${r ? d`<icon-check></icon-check>` : a}
                     </div>
                 </label>
-                ${t != null && t.describedBy ? d`<div id="${o}" data-test-id="${o}" class="c-switch-description">${t == null ? void 0 : t.describedBy}</div>` : l}
-                ${e === "trailing" ? this.renderSwitchLabel() : l}
+                ${e != null && e.describedBy ? d`<div id="${o}" data-test-id="${o}" class="c-switch-description">${e == null ? void 0 : e.describedBy}</div>` : a}
+                ${c === "trailing" ? this.renderSwitchLabel() : a}
             </div>
         `;
   }
 }
-a.styles = P(T);
-u([
-  n({ type: String })
-], a.prototype, "label", 2);
-u([
-  n({ type: String }),
-  L($, O, "leading")
-], a.prototype, "labelPlacement", 2);
-u([
-  n({ type: Object })
-], a.prototype, "aria", 2);
-u([
-  n({ type: Boolean, reflect: !0 })
-], a.prototype, "isChecked", 2);
-u([
-  n({ type: Boolean, reflect: !0 })
-], a.prototype, "isDisabled", 2);
-S($, a);
+n.styles = u(k);
+h([
+  l({ type: String })
+], n.prototype, "label", 2);
+h([
+  l({ type: String }),
+  g(w, y, "leading")
+], n.prototype, "labelPlacement", 2);
+h([
+  l({ type: Object })
+], n.prototype, "aria", 2);
+h([
+  l({ type: Boolean, reflect: !0 })
+], n.prototype, "isChecked", 2);
+h([
+  l({ type: Boolean, reflect: !0 })
+], n.prototype, "isDisabled", 2);
+m(w, n);
 export {
-  j as ON_SWITCH_CHANGED_EVENT,
-  a as PieSwitch,
-  O as labelPlacements
+  $ as ON_SWITCH_CHANGED_EVENT,
+  n as PieSwitch,
+  y as labelPlacements
 };

package/dist/react.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResult } from 'lit';
-import type { EventName } from '@lit-labs/react';
+import type { EventName } from '@lit/react';
 import type { LitElement } from 'lit';
-import type { ReactWebComponent } from '@lit-labs/react';
+import type { ReactWebComponent } from '@lit/react';
 import type { TemplateResult } from 'lit';
 
 export declare type AriaProps = {

package/dist/react.js

@@ -1,67 +1,14 @@
-import * as E from "react";
-import { PieSwitch as g } from "./index.js";
-import { ON_SWITCH_CHANGED_EVENT as G, labelPlacements as L } from "./index.js";
+import * as e from "react";
+import { createComponent as t } from "@lit/react";
+import { PieSwitch as i } from "./index.js";
+import { ON_SWITCH_CHANGED_EVENT as n, labelPlacements as w } from "./index.js";
 import "lit";
 import "lit/decorators.js";
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const S = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), y = /* @__PURE__ */ new WeakMap(), C = (t, i, h, d, m) => {
-  const o = m == null ? void 0 : m[i];
-  o === void 0 || h === d ? h == null && i in HTMLElement.prototype ? t.removeAttribute(i) : t[i] = h : ((a, n, p) => {
-    let r = y.get(a);
-    r === void 0 && y.set(a, r = /* @__PURE__ */ new Map());
-    let l = r.get(n);
-    p !== void 0 ? l === void 0 ? (r.set(n, l = { handleEvent: p }), a.addEventListener(n, l)) : l.handleEvent = p : l !== void 0 && (r.delete(n), a.removeEventListener(n, l));
-  })(t, o, h);
-}, P = (t, i) => {
-  typeof t == "function" ? t(i) : t.current = i;
-};
-function b(t = window.React, i, h, d, m) {
-  let o, a, n;
-  if (i === void 0) {
-    const c = t;
-    ({ tagName: a, elementClass: n, events: d, displayName: m } = c), o = c.react;
-  } else
-    o = t, n = h, a = i;
-  const p = o.Component, r = o.createElement, l = new Set(Object.keys(d ?? {}));
-  class f extends p {
-    constructor() {
-      super(...arguments), this.o = null;
-    }
-    t(e) {
-      if (this.o !== null)
-        for (const u in this.i)
-          C(this.o, u, this.props[u], e ? e[u] : void 0, d);
-    }
-    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, ...u } = this.props;
-      this.h !== e && (this.u = (s) => {
-        e !== null && P(e, s), this.o = s, this.h = e;
-      }), this.i = {};
-      const v = { ref: this.u };
-      for (const [s, w] of Object.entries(u))
-        S.has(s) ? v[s === "className" ? "class" : s] = w : l.has(s) || s in n.prototype ? this.i[s] = w : v[s] = w;
-      return v.suppressHydrationWarning = !0, r(a, v);
-    }
-  }
-  f.displayName = m ?? n.name;
-  const N = o.forwardRef((c, e) => r(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
-  return N.displayName = f.displayName, N;
-}
-const x = b({
+import "@justeattakeaway/pie-icons-webc/IconCheck";
+const p = t({
   displayName: "PieSwitch",
-  elementClass: g,
-  react: E,
+  elementClass: i,
+  react: e,
   tagName: "pie-switch",
   events: {
     onPieSwitchChanged: "pie-switch-changed"
@@ -69,7 +16,7 @@ const x = b({
   }
 });
 export {
-  G as ON_SWITCH_CHANGED_EVENT,
-  x as PieSwitch,
-  L as labelPlacements
+  n as ON_SWITCH_CHANGED_EVENT,
+  p as PieSwitch,
+  w as labelPlacements
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,8 +28,11 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.4.0",
-    "@justeattakeaway/pie-icons-webc": "0.11.1"
+    "@justeattakeaway/pie-components-config": "0.6.0"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-icons-webc": "0.11.1",
+    "@justeattakeaway/pie-webc-core": "0.12.0"
   },
   "volta": {
     "extends": "../../../package.json"