@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/icons/IconTrashFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--trashFilled"><path d="M9.864 1.219H6.136L5.49 2.53h5.022L9.864 1.22Z"></path><path d="M1.875 3.844v1.312h.962l.788 8.243a1.531 1.531 0 0 0 1.522 1.382h5.723a1.53 1.53 0 0 0 1.505-1.382l.779-8.243h.971V3.844H1.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--trashFilled"><path d="M9.864 1.219H6.136L5.49 2.53h5.022L9.864 1.22Z"></path><path d="M1.875 3.844v1.312h.962l.788 8.243a1.531 1.531 0 0 0 1.522 1.382h5.723a1.53 1.53 0 0 0 1.505-1.382l.779-8.243h.971V3.844H1.875Z"></path></svg>';
 
 export class IconTrashFilled extends HTMLElement {
     constructor () {

package/icons/IconTrashFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--trashFilledLarge"><path d="M19.938 4.625h-7.875l-.876 1.75h9.626l-.875-1.75Z"></path><path d="M3.75 8.125v1.75h2.319l1.601 16.87a2.625 2.625 0 0 0 2.625 2.38h11.428a2.624 2.624 0 0 0 2.625-2.38l1.583-16.87h2.319v-1.75H3.75Zm8.461 6.125h1.75l.63 7.875h-1.75l-.63-7.875Zm6.948 7.875h-1.75l.63-7.875h1.75l-.63 7.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--trashFilledLarge"><path d="M19.938 4.625h-7.875l-.876 1.75h9.626l-.875-1.75Z"></path><path d="M3.75 8.125v1.75h2.319l1.601 16.87a2.625 2.625 0 0 0 2.625 2.38h11.428a2.624 2.624 0 0 0 2.625-2.38l1.583-16.87h2.319v-1.75H3.75Zm8.461 6.125h1.75l.63 7.875h-1.75l-.63-7.875Zm6.948 7.875h-1.75l.63-7.875h1.75l-.63 7.875Z"></path></svg>';
 
 export class IconTrashFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconTrashLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--trashLarge"><path d="m18.03 14.25-.621 7.875h1.75l.63-7.875H18.03Z"></path><path d="M19.938 4.625h-7.875l-.876 1.75h9.626l-.875-1.75Z"></path><path d="m14.591 22.125-.621-7.875h-1.759l.63 7.875h1.75Z"></path><path d="M3.75 8.125v1.75h2.319l1.601 16.87a2.625 2.625 0 0 0 2.625 2.38h11.428a2.624 2.624 0 0 0 2.625-2.38l1.583-16.87h2.319v-1.75H3.75Zm18.839 18.454a.876.876 0 0 1-.875.796H10.278a.875.875 0 0 1-.876-.796L7.829 9.875h16.344L22.59 26.579Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--trashLarge"><path d="m18.03 14.25-.621 7.875h1.75l.63-7.875H18.03Z"></path><path d="M19.938 4.625h-7.875l-.876 1.75h9.626l-.875-1.75Z"></path><path d="m14.591 22.125-.621-7.875h-1.759l.63 7.875h1.75Z"></path><path d="M3.75 8.125v1.75h2.319l1.601 16.87a2.625 2.625 0 0 0 2.625 2.38h11.428a2.624 2.624 0 0 0 2.625-2.38l1.583-16.87h2.319v-1.75H3.75Zm18.839 18.454a.876.876 0 0 1-.875.796H10.278a.875.875 0 0 1-.876-.796L7.829 9.875h16.344L22.59 26.579Z"></path></svg>';
 
 export class IconTrashLarge extends HTMLElement {
     constructor () {

package/icons/IconTutorial.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--tutorial"><path fill-rule="evenodd" d="m2.505 7.566.91.383v3.42l.263.201A7.194 7.194 0 0 0 8 12.996h.009a7.194 7.194 0 0 0 4.322-1.426l.263-.201V7.934l2.213-.931V5.795L8.254 3.04h-.508L1.184 5.804V7.01l.008.004v2.569h1.313V7.566Zm5.749 2.202H8.25L8 9.873l-.25-.105h-.004l-.979-.412L4.72 8.5v2.214l.009-.01a5.932 5.932 0 0 0 6.545 0V8.5l-3.02 1.267v.002Zm4.61-3.36L8 4.36 3.135 6.408l.28.117v-.004l4.594 1.925 4.856-2.038Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--tutorial"><path fill-rule="evenodd" d="m2.505 7.566.91.383v3.42l.263.201A7.194 7.194 0 0 0 8 12.996h.009a7.194 7.194 0 0 0 4.322-1.426l.263-.201V7.934l2.213-.931V5.795L8.254 3.04h-.508L1.184 5.804V7.01l.008.004v2.569h1.313V7.566Zm5.749 2.202H8.25L8 9.873l-.25-.105h-.004l-.979-.412L4.72 8.5v2.214l.009-.01a5.932 5.932 0 0 0 6.545 0V8.5l-3.02 1.267v.002Zm4.61-3.36L8 4.36 3.135 6.408l.28.117v-.004l4.594 1.925 4.856-2.038Z" clip-rule="evenodd"></path></svg>';
 
 export class IconTutorial extends HTMLElement {
     constructor () {

package/icons/IconTutorialLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--tutorialLarge"><path fill-rule="evenodd" d="m24.557 15.479 4.612-1.938v-1.61L16.34 6.541h-.682L2.83 11.931v1.392h-.009V19h1.75v-4.728l2.862 1.202v6.746l.306.263a12.666 12.666 0 0 0 8.251 3.036v-.009c2.783 0 5.565-.901 7.866-2.721l.7-.551v-6.76Zm-17.123-1.9v-.003L16 17.181l10.57-4.445L16 8.3 5.43 12.736l2.004.843Zm15.338 7.846c-3.98 3.15-9.633 3.115-13.588-.018v-5.18L16 19.09l6.807-2.861v5.17l-.035.027Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--tutorialLarge"><path fill-rule="evenodd" d="m24.557 15.479 4.612-1.938v-1.61L16.34 6.541h-.682L2.83 11.931v1.392h-.009V19h1.75v-4.728l2.862 1.202v6.746l.306.263a12.666 12.666 0 0 0 8.251 3.036v-.009c2.783 0 5.565-.901 7.866-2.721l.7-.551v-6.76Zm-17.123-1.9v-.003L16 17.181l10.57-4.445L16 8.3 5.43 12.736l2.004.843Zm15.338 7.846c-3.98 3.15-9.633 3.115-13.588-.018v-5.18L16 19.09l6.807-2.861v5.17l-.035.027Z" clip-rule="evenodd"></path></svg>';
 
 export class IconTutorialLarge extends HTMLElement {
     constructor () {

package/icons/IconUnlink.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--unlink"><path d="M5.48 11.719h1.645v1.312H5.48a4.445 4.445 0 0 1-4.261-4.594A4.813 4.813 0 0 1 2.444 5.21 4.121 4.121 0 0 1 5.48 3.844h1.645v1.312H5.48a2.791 2.791 0 0 0-2.065.945 3.448 3.448 0 0 0-.875 2.337 3.132 3.132 0 0 0 2.94 3.28Zm5.04-7.875H8.875v1.312h1.645a3.133 3.133 0 0 1 2.949 3.282c.01.86-.302 1.694-.875 2.336a2.792 2.792 0 0 1-2.065.945H8.875v1.312h1.645a4.12 4.12 0 0 0 3.036-1.365 4.812 4.812 0 0 0 1.225-3.229 4.445 4.445 0 0 0-4.261-4.593Zm-.306 5.906L8.927 8.437l1.287-1.312-.928-.875L8 7.51 6.714 6.25l-.928.875 1.286 1.313L5.786 9.75l.928.875L8 9.365l1.286 1.26.928-.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--unlink"><path d="M5.48 11.719h1.645v1.312H5.48a4.445 4.445 0 0 1-4.261-4.594A4.813 4.813 0 0 1 2.444 5.21 4.121 4.121 0 0 1 5.48 3.844h1.645v1.312H5.48a2.791 2.791 0 0 0-2.065.945 3.448 3.448 0 0 0-.875 2.337 3.132 3.132 0 0 0 2.94 3.28Zm5.04-7.875H8.875v1.312h1.645a3.133 3.133 0 0 1 2.949 3.282c.01.86-.302 1.694-.875 2.336a2.792 2.792 0 0 1-2.065.945H8.875v1.312h1.645a4.12 4.12 0 0 0 3.036-1.365 4.812 4.812 0 0 0 1.225-3.229 4.445 4.445 0 0 0-4.261-4.593Zm-.306 5.906L8.927 8.437l1.287-1.312-.928-.875L8 7.51 6.714 6.25l-.928.875 1.286 1.313L5.786 9.75l.928.875L8 9.365l1.286 1.26.928-.875Z"></path></svg>';
 
 export class IconUnlink extends HTMLElement {
     constructor () {

package/icons/IconUnlinkLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--unlinkLarge"><g clip-path="url(#prefix__clip0_18_765)"><path d="M12.377 21.25h-3.5A5.198 5.198 0 0 1 3.75 16a5.311 5.311 0 0 1 1.505-3.719 5.093 5.093 0 0 1 3.631-1.531h3.5L13.375 9H8.886a6.842 6.842 0 0 0-4.882 2.056A7.061 7.061 0 0 0 2 16a7 7 0 0 0 6.886 7h4.489l-.998-1.75Z"></path><path d="M19.684 18.441 17.234 16l2.45-2.441-1.243-1.243L16 14.766l-2.441-2.45-1.243 1.243L14.766 16l-2.45 2.441 1.243 1.243L16 17.234l2.441 2.45 1.243-1.243Z"></path><path d="M23.114 9h-4.008l.954 1.75h3.054A5.198 5.198 0 0 1 28.25 16a5.311 5.311 0 0 1-1.505 3.719 5.093 5.093 0 0 1-3.631 1.531H20.06L19.106 23h4.008a6.844 6.844 0 0 0 4.882-2.056A7.061 7.061 0 0 0 30 16a7 7 0 0 0-6.886-7Z"></path></g><defs><clipPath id="prefix__clip0_18_765"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--unlinkLarge"><g clip-path="url(#prefix__clip0_18_765)"><path d="M12.377 21.25h-3.5A5.198 5.198 0 0 1 3.75 16a5.311 5.311 0 0 1 1.505-3.719 5.093 5.093 0 0 1 3.631-1.531h3.5L13.375 9H8.886a6.842 6.842 0 0 0-4.882 2.056A7.061 7.061 0 0 0 2 16a7 7 0 0 0 6.886 7h4.489l-.998-1.75Z"></path><path d="M19.684 18.441 17.234 16l2.45-2.441-1.243-1.243L16 14.766l-2.441-2.45-1.243 1.243L14.766 16l-2.45 2.441 1.243 1.243L16 17.234l2.441 2.45 1.243-1.243Z"></path><path d="M23.114 9h-4.008l.954 1.75h3.054A5.198 5.198 0 0 1 28.25 16a5.311 5.311 0 0 1-1.505 3.719 5.093 5.093 0 0 1-3.631 1.531H20.06L19.106 23h4.008a6.844 6.844 0 0 0 4.882-2.056A7.061 7.061 0 0 0 30 16a7 7 0 0 0-6.886-7Z"></path></g><defs><clipPath id="prefix__clip0_18_765"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 export class IconUnlinkLarge extends HTMLElement {
     constructor () {

package/icons/IconUpload.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--upload"><path d="M5.926 5.051 5 4.124 7.23 1.875a1.085 1.085 0 0 1 1.54 0l2.231 2.223-.927.953-1.418-1.426V9.75H7.344V3.625L5.926 5.051ZM11.5 6.47H9.995V7.78H11.5a.219.219 0 0 1 .219.219v5.25a.219.219 0 0 1-.219.219h-7a.219.219 0 0 1-.219-.219V8a.219.219 0 0 1 .219-.219h1.505V6.47H4.5A1.54 1.54 0 0 0 2.969 8v5.25A1.54 1.54 0 0 0 4.5 14.781h7a1.54 1.54 0 0 0 1.531-1.531V8A1.54 1.54 0 0 0 11.5 6.469Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--upload"><path d="M5.926 5.051 5 4.124 7.23 1.875a1.085 1.085 0 0 1 1.54 0l2.231 2.223-.927.953-1.418-1.426V9.75H7.344V3.625L5.926 5.051ZM11.5 6.47H9.995V7.78H11.5a.219.219 0 0 1 .219.219v5.25a.219.219 0 0 1-.219.219h-7a.219.219 0 0 1-.219-.219V8a.219.219 0 0 1 .219-.219h1.505V6.47H4.5A1.54 1.54 0 0 0 2.969 8v5.25A1.54 1.54 0 0 0 4.5 14.781h7a1.54 1.54 0 0 0 1.531-1.531V8A1.54 1.54 0 0 0 11.5 6.469Z"></path></svg>';
 
 export class IconUpload extends HTMLElement {
     constructor () {

package/icons/IconUploadLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--uploadLarge"><path d="m11.546 9.796-1.233-1.234 4.453-4.453a1.75 1.75 0 0 1 2.468 0l4.453 4.453-1.233 1.234-3.579-3.57V19.5h-1.75V6.226l-3.579 3.57ZM23 12.5h-3.5v1.75H23a.875.875 0 0 1 .875.875V26.5a.875.875 0 0 1-.875.875H9a.875.875 0 0 1-.875-.875V15.125A.875.875 0 0 1 9 14.25h3.5V12.5H9a2.625 2.625 0 0 0-2.625 2.625V26.5A2.625 2.625 0 0 0 9 29.125h14a2.625 2.625 0 0 0 2.625-2.625V15.125A2.625 2.625 0 0 0 23 12.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--uploadLarge"><path d="m11.546 9.796-1.233-1.234 4.453-4.453a1.75 1.75 0 0 1 2.468 0l4.453 4.453-1.233 1.234-3.579-3.57V19.5h-1.75V6.226l-3.579 3.57ZM23 12.5h-3.5v1.75H23a.875.875 0 0 1 .875.875V26.5a.875.875 0 0 1-.875.875H9a.875.875 0 0 1-.875-.875V15.125A.875.875 0 0 1 9 14.25h3.5V12.5H9a2.625 2.625 0 0 0-2.625 2.625V26.5A2.625 2.625 0 0 0 9 29.125h14a2.625 2.625 0 0 0 2.625-2.625V15.125A2.625 2.625 0 0 0 23 12.5Z"></path></svg>';
 
 export class IconUploadLarge extends HTMLElement {
     constructor () {

package/icons/IconUser.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--user"><path d="m3.205 14.125.674-1.908a2.835 2.835 0 0 1 2.703-1.81h2.835a2.835 2.835 0 0 1 2.704 1.81l.674 1.908h1.391l-.875-2.345a4.138 4.138 0 0 0-3.937-2.686H6.582a4.139 4.139 0 0 0-3.937 2.686l-.831 2.345h1.391Z"></path><path d="M8 8a3.063 3.063 0 1 0 0-6.125A3.063 3.063 0 0 0 8 8Zm0-4.813a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--user"><path d="m3.205 14.125.674-1.908a2.835 2.835 0 0 1 2.703-1.81h2.835a2.835 2.835 0 0 1 2.704 1.81l.674 1.908h1.391l-.875-2.345a4.138 4.138 0 0 0-3.937-2.686H6.582a4.139 4.139 0 0 0-3.937 2.686l-.831 2.345h1.391Z"></path><path d="M8 8a3.063 3.063 0 1 0 0-6.125A3.063 3.063 0 0 0 8 8Zm0-4.813a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Z"></path></svg>';
 
 export class IconUser extends HTMLElement {
     constructor () {

package/icons/IconUserAdd.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userAdd"><g clip-path="url(#prefix__clip0_18_2070)"><path d="M7.125 7.125a3.062 3.062 0 1 0 0-6.125 3.062 3.062 0 0 0 0 6.125Zm0-4.813a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm2.861 7.674a2.826 2.826 0 0 0-1.557-.455H5.804a2.555 2.555 0 0 0-2.45 1.566l-.455 1.278h-1.4l.639-1.75A3.868 3.868 0 0 1 5.82 8.219h2.625a4.182 4.182 0 0 1 2.267.656l-.727 1.111ZM15 13.031h-1.969V15H11.72v-1.969H9.75V11.72h1.969V9.75h1.312v1.969H15v1.312Z"></path></g><defs><clipPath id="prefix__clip0_18_2070"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userAdd"><g clip-path="url(#prefix__clip0_18_2070)"><path d="M7.125 7.125a3.062 3.062 0 1 0 0-6.125 3.062 3.062 0 0 0 0 6.125Zm0-4.813a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm2.861 7.674a2.826 2.826 0 0 0-1.557-.455H5.804a2.555 2.555 0 0 0-2.45 1.566l-.455 1.278h-1.4l.639-1.75A3.868 3.868 0 0 1 5.82 8.219h2.625a4.182 4.182 0 0 1 2.267.656l-.727 1.111ZM15 13.031h-1.969V15H11.72v-1.969H9.75V11.72h1.969V9.75h1.312v1.969H15v1.312Z"></path></g><defs><clipPath id="prefix__clip0_18_2070"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconUserAdd extends HTMLElement {
     constructor () {

package/icons/IconUserAddLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userAddLarge"><path d="M12.5 14.688a4.812 4.812 0 1 0-4.812-4.813 4.821 4.821 0 0 0 4.812 4.813Zm0-7.876a3.062 3.062 0 1 1 0 6.125 3.062 3.062 0 0 1 0-6.124Zm7.359 11.612L18.467 19.5a4.734 4.734 0 0 0-3.788-1.75h-4.375a4.497 4.497 0 0 0-4.288 2.625l-.673 1.75H3.488l.875-2.371A6.247 6.247 0 0 1 10.32 16h4.375a6.535 6.535 0 0 1 5.163 2.424Zm7.516 5.451h-3.5v3.5h-1.75v-3.5h-3.5v-1.75h3.5v-3.5h1.75v3.5h3.5v1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userAddLarge"><path d="M12.5 14.688a4.812 4.812 0 1 0-4.812-4.813 4.821 4.821 0 0 0 4.812 4.813Zm0-7.876a3.062 3.062 0 1 1 0 6.125 3.062 3.062 0 0 1 0-6.124Zm7.359 11.612L18.467 19.5a4.734 4.734 0 0 0-3.788-1.75h-4.375a4.497 4.497 0 0 0-4.288 2.625l-.673 1.75H3.488l.875-2.371A6.247 6.247 0 0 1 10.32 16h4.375a6.535 6.535 0 0 1 5.163 2.424Zm7.516 5.451h-3.5v3.5h-1.75v-3.5h-3.5v-1.75h3.5v-3.5h1.75v3.5h3.5v1.75Z"></path></svg>';
 
 export class IconUserAddLarge extends HTMLElement {
     constructor () {

package/icons/IconUserCircle.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userCircle"><path d="M8 5.13a1.12 1.12 0 1 1 0 2.24 1.12 1.12 0 0 1 0-2.24Zm0-1.313a2.433 2.433 0 1 0 2.432 2.433A2.441 2.441 0 0 0 8 3.817Z"></path><path d="M8 1.438a6.563 6.563 0 0 0-4.944 10.876c.298.322.626.615.98.875a6.537 6.537 0 0 0 7.928 0c.354-.26.682-.553.98-.875A6.562 6.562 0 0 0 8 1.437Zm3.08 10.806a5.25 5.25 0 0 1-6.125 0 7.736 7.736 0 0 1-.516-.42c.153-.172.326-.325.516-.455a2.993 2.993 0 0 1 1.662-.49h2.8a2.993 2.993 0 0 1 1.663.49c.19.13.363.283.516.455a7.722 7.722 0 0 1-.516.42Zm1.339-1.435a3.495 3.495 0 0 0-.377-.341 4.235 4.235 0 0 0-2.625-.876H6.582a4.235 4.235 0 0 0-2.625.875c-.133.105-.259.219-.376.342a5.25 5.25 0 1 1 8.838 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userCircle"><path d="M8 5.13a1.12 1.12 0 1 1 0 2.24 1.12 1.12 0 0 1 0-2.24Zm0-1.313a2.433 2.433 0 1 0 2.432 2.433A2.441 2.441 0 0 0 8 3.817Z"></path><path d="M8 1.438a6.563 6.563 0 0 0-4.944 10.876c.298.322.626.615.98.875a6.537 6.537 0 0 0 7.928 0c.354-.26.682-.553.98-.875A6.562 6.562 0 0 0 8 1.437Zm3.08 10.806a5.25 5.25 0 0 1-6.125 0 7.736 7.736 0 0 1-.516-.42c.153-.172.326-.325.516-.455a2.993 2.993 0 0 1 1.662-.49h2.8a2.993 2.993 0 0 1 1.663.49c.19.13.363.283.516.455a7.722 7.722 0 0 1-.516.42Zm1.339-1.435a3.495 3.495 0 0 0-.377-.341 4.235 4.235 0 0 0-2.625-.876H6.582a4.235 4.235 0 0 0-2.625.875c-.133.105-.259.219-.376.342a5.25 5.25 0 1 1 8.838 0Z"></path></svg>';
 
 export class IconUserCircle extends HTMLElement {
     constructor () {

package/icons/IconUserCircleFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userCircleFilled"><path d="M8 7.37a1.12 1.12 0 1 0 0-2.24 1.12 1.12 0 0 0 0 2.24Z"></path><path d="M8 1.438a6.562 6.562 0 0 0-4.944 10.876c.298.322.626.615.98.875a6.537 6.537 0 0 0 7.928 0c.352-.258.678-.551.971-.875A6.554 6.554 0 0 0 8 1.438Zm0 2.38A2.433 2.433 0 1 1 5.567 6.25 2.441 2.441 0 0 1 8 3.818Zm4.042 7.524c-.14.167-.288.324-.446.482a2.834 2.834 0 0 0-.516-.455 2.992 2.992 0 0 0-1.663-.49H6.582a2.992 2.992 0 0 0-1.662.49c-.19.13-.363.283-.516.455a7.637 7.637 0 0 1-.447-.482 5.84 5.84 0 0 1-.332-.533c.117-.123.243-.237.376-.341a4.235 4.235 0 0 1 2.625-.875h2.791a4.235 4.235 0 0 1 2.626.874c.133.105.259.219.376.342a5.814 5.814 0 0 1-.377.534Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userCircleFilled"><path d="M8 7.37a1.12 1.12 0 1 0 0-2.24 1.12 1.12 0 0 0 0 2.24Z"></path><path d="M8 1.438a6.562 6.562 0 0 0-4.944 10.876c.298.322.626.615.98.875a6.537 6.537 0 0 0 7.928 0c.352-.258.678-.551.971-.875A6.554 6.554 0 0 0 8 1.438Zm0 2.38A2.433 2.433 0 1 1 5.567 6.25 2.441 2.441 0 0 1 8 3.818Zm4.042 7.524c-.14.167-.288.324-.446.482a2.834 2.834 0 0 0-.516-.455 2.992 2.992 0 0 0-1.663-.49H6.582a2.992 2.992 0 0 0-1.662.49c-.19.13-.363.283-.516.455a7.637 7.637 0 0 1-.447-.482 5.84 5.84 0 0 1-.332-.533c.117-.123.243-.237.376-.341a4.235 4.235 0 0 1 2.625-.875h2.791a4.235 4.235 0 0 1 2.626.874c.133.105.259.219.376.342a5.814 5.814 0 0 1-.377.534Z"></path></svg>';
 
 export class IconUserCircleFilled extends HTMLElement {
     constructor () {

package/icons/IconUserCircleFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 0 0-9.293 20.212c1.27-4.173 4.63-5.337 6.397-5.337h5.783c1.75 0 5.128 1.164 6.397 5.346A12.25 12.25 0 0 0 16 3.75Zm0 13.125a4.375 4.375 0 1 1 0-8.75 4.375 4.375 0 0 1 0 8.75Z"></path><path d="M16 15.125a2.625 2.625 0 1 0 0-5.25 2.625 2.625 0 0 0 0 5.25Z"></path><path d="M18.887 20.375h-5.783s-4.025.07-4.98 4.996a12.25 12.25 0 0 0 15.75 0c-.962-4.926-4.952-4.996-4.987-4.996Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 0 0-9.293 20.212c1.27-4.173 4.63-5.337 6.397-5.337h5.783c1.75 0 5.128 1.164 6.397 5.346A12.25 12.25 0 0 0 16 3.75Zm0 13.125a4.375 4.375 0 1 1 0-8.75 4.375 4.375 0 0 1 0 8.75Z"></path><path d="M16 15.125a2.625 2.625 0 1 0 0-5.25 2.625 2.625 0 0 0 0 5.25Z"></path><path d="M18.887 20.375h-5.783s-4.025.07-4.98 4.996a12.25 12.25 0 0 0 15.75 0c-.962-4.926-4.952-4.996-4.987-4.996Z"></path></svg>';
 
 export class IconUserCircleFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconUserCircleLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userCircleLarge"><path d="M16 16.875a4.375 4.375 0 1 0 0-8.75 4.375 4.375 0 0 0 0 8.75Zm0-7a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm0-6.125a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 1.75A10.5 10.5 0 0 1 26.5 16a10.404 10.404 0 0 1-2.004 6.125 6.878 6.878 0 0 0-6.055-3.5H13.56a6.92 6.92 0 0 0-6.064 3.5A10.5 10.5 0 0 1 16 5.5ZM8.755 23.586a5.128 5.128 0 0 1 4.804-3.211h4.882a5.119 5.119 0 0 1 4.804 3.211 10.5 10.5 0 0 1-14.49 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userCircleLarge"><path d="M16 16.875a4.375 4.375 0 1 0 0-8.75 4.375 4.375 0 0 0 0 8.75Zm0-7a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm0-6.125a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 1.75A10.5 10.5 0 0 1 26.5 16a10.404 10.404 0 0 1-2.004 6.125 6.878 6.878 0 0 0-6.055-3.5H13.56a6.92 6.92 0 0 0-6.064 3.5A10.5 10.5 0 0 1 16 5.5ZM8.755 23.586a5.128 5.128 0 0 1 4.804-3.211h4.882a5.119 5.119 0 0 1 4.804 3.211 10.5 10.5 0 0 1-14.49 0Z"></path></svg>';
 
 export class IconUserCircleLarge extends HTMLElement {
     constructor () {

package/icons/IconUserCommunity.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userCommunity"><path d="M1.744 5.375a6.79 6.79 0 0 1 12.512 0h-1.461a5.469 5.469 0 0 0-9.625 0H1.744Zm-.534 8.75.49-1.391a2.88 2.88 0 0 1 2.021-1.794 2.345 2.345 0 0 1-.481-.367 2.4 2.4 0 0 1 3.395-3.396 2.389 2.389 0 0 1 0 3.396 1.897 1.897 0 0 1-.324.27A3.037 3.037 0 0 1 8 11.378a3.071 3.071 0 0 1 1.697-.533 1.897 1.897 0 0 1-.323-.271 2.406 2.406 0 1 1 3.395 0 2.344 2.344 0 0 1-.482.367 2.886 2.886 0 0 1 2.022 1.75l.49 1.4h-1.4l-.341-.954a1.575 1.575 0 0 0-1.558-.98H9.75a1.575 1.575 0 0 0-1.523 1.015l-.376.954H6.46l.49-1.4c0-.123.105-.236.157-.35a1.75 1.75 0 0 0-.857-.219H4.5a1.584 1.584 0 0 0-1.523 1.015l-.376.954H1.21Zm8.75-5.25a1.067 1.067 0 0 0 .324.77 1.085 1.085 0 1 0-.315-.77H9.96Zm-6.125 0a1.067 1.067 0 0 0 .324.77 1.085 1.085 0 0 0 1.54 0 1.086 1.086 0 0 0-1.532-1.54 1.068 1.068 0 0 0-.323.77h-.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userCommunity"><path d="M1.744 5.375a6.79 6.79 0 0 1 12.512 0h-1.461a5.469 5.469 0 0 0-9.625 0H1.744Zm-.534 8.75.49-1.391a2.88 2.88 0 0 1 2.021-1.794 2.345 2.345 0 0 1-.481-.367 2.4 2.4 0 0 1 3.395-3.396 2.389 2.389 0 0 1 0 3.396 1.897 1.897 0 0 1-.324.27A3.037 3.037 0 0 1 8 11.378a3.071 3.071 0 0 1 1.697-.533 1.897 1.897 0 0 1-.323-.271 2.406 2.406 0 1 1 3.395 0 2.344 2.344 0 0 1-.482.367 2.886 2.886 0 0 1 2.022 1.75l.49 1.4h-1.4l-.341-.954a1.575 1.575 0 0 0-1.558-.98H9.75a1.575 1.575 0 0 0-1.523 1.015l-.376.954H6.46l.49-1.4c0-.123.105-.236.157-.35a1.75 1.75 0 0 0-.857-.219H4.5a1.584 1.584 0 0 0-1.523 1.015l-.376.954H1.21Zm8.75-5.25a1.067 1.067 0 0 0 .324.77 1.085 1.085 0 1 0-.315-.77H9.96Zm-6.125 0a1.067 1.067 0 0 0 .324.77 1.085 1.085 0 0 0 1.54 0 1.086 1.086 0 0 0-1.532-1.54 1.068 1.068 0 0 0-.323.77h-.009Z"></path></svg>';
 
 export class IconUserCommunity extends HTMLElement {
     constructor () {

package/icons/IconUserCommunityLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userCommunityLarge"><path d="M5.5 12.5H3.645a13.125 13.125 0 0 1 24.71 0H26.5a11.374 11.374 0 0 0-21 0Zm4.813.875a3.937 3.937 0 1 1-3.938 3.938 3.946 3.946 0 0 1 3.938-3.938Zm0 1.75a2.187 2.187 0 1 0 0 4.374 2.187 2.187 0 0 0 0-4.374Zm11.374-1.75a3.937 3.937 0 1 1-3.937 3.938 3.946 3.946 0 0 1 3.938-3.938Zm0 1.75a2.187 2.187 0 1 0 0 4.375 2.187 2.187 0 0 0 0-4.375Zm6.476 10.036a5.407 5.407 0 0 0-5.093-3.036h-3.64a6.029 6.029 0 0 0-3.43 1.05 5.923 5.923 0 0 0-3.43-1.05H8.93a5.399 5.399 0 0 0-5.092 3.045L2.55 28.25H4.46l.989-2.415a3.728 3.728 0 0 1 3.5-1.96h3.64a4.376 4.376 0 0 1 2.16.56 4.185 4.185 0 0 0-.393.726l-1.286 3.089h1.89L16 25.835a3.701 3.701 0 0 1 3.5-1.96h3.64a3.702 3.702 0 0 1 3.5 1.96l.901 2.415h1.873l-1.252-3.089Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userCommunityLarge"><path d="M5.5 12.5H3.645a13.125 13.125 0 0 1 24.71 0H26.5a11.374 11.374 0 0 0-21 0Zm4.813.875a3.937 3.937 0 1 1-3.938 3.938 3.946 3.946 0 0 1 3.938-3.938Zm0 1.75a2.187 2.187 0 1 0 0 4.374 2.187 2.187 0 0 0 0-4.374Zm11.374-1.75a3.937 3.937 0 1 1-3.937 3.938 3.946 3.946 0 0 1 3.938-3.938Zm0 1.75a2.187 2.187 0 1 0 0 4.375 2.187 2.187 0 0 0 0-4.375Zm6.476 10.036a5.407 5.407 0 0 0-5.093-3.036h-3.64a6.029 6.029 0 0 0-3.43 1.05 5.923 5.923 0 0 0-3.43-1.05H8.93a5.399 5.399 0 0 0-5.092 3.045L2.55 28.25H4.46l.989-2.415a3.728 3.728 0 0 1 3.5-1.96h3.64a4.376 4.376 0 0 1 2.16.56 4.185 4.185 0 0 0-.393.726l-1.286 3.089h1.89L16 25.835a3.701 3.701 0 0 1 3.5-1.96h3.64a3.702 3.702 0 0 1 3.5 1.96l.901 2.415h1.873l-1.252-3.089Z"></path></svg>';
 
 export class IconUserCommunityLarge extends HTMLElement {
     constructor () {

package/icons/IconUserFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userFilled"><path d="M13.355 11.78a4.14 4.14 0 0 0-3.938-2.686H6.582a4.139 4.139 0 0 0-3.937 2.686l-.831 2.345h12.372l-.831-2.345Z"></path><path d="M8 8a3.062 3.062 0 1 0 0-6.125A3.062 3.062 0 0 0 8 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userFilled"><path d="M13.355 11.78a4.14 4.14 0 0 0-3.938-2.686H6.582a4.139 4.139 0 0 0-3.937 2.686l-.831 2.345h12.372l-.831-2.345Z"></path><path d="M8 8a3.062 3.062 0 1 0 0-6.125A3.062 3.062 0 0 0 8 8Z"></path></svg>';
 
 export class IconUserFilled extends HTMLElement {
     constructor () {

package/icons/IconUserFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userFilledLarge"><path d="M23.823 22.501a6.011 6.011 0 0 0-5.723-3.876H13.91a6.029 6.029 0 0 0-5.731 3.894l-1.182 3.316h18.017l-1.19-3.334Z"></path><path d="M20.314 11.327a4.428 4.428 0 1 0-5.32 5.33 4.437 4.437 0 0 0 5.32-5.33Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userFilledLarge"><path d="M23.823 22.501a6.011 6.011 0 0 0-5.723-3.876H13.91a6.029 6.029 0 0 0-5.731 3.894l-1.182 3.316h18.017l-1.19-3.334Z"></path><path d="M20.314 11.327a4.428 4.428 0 1 0-5.32 5.33 4.437 4.437 0 0 0 5.32-5.33Z"></path></svg>';
 
 export class IconUserFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconUserGroup.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userGroup"><path d="M14.527 10.126a2.73 2.73 0 0 0-1.338-1.592 2.503 2.503 0 0 0 0-3.5 2.564 2.564 0 0 0-3.562 0 2.424 2.424 0 0 0-.367.481 2.791 2.791 0 0 0-2.433 0c-.099-.17-.22-.325-.358-.464a2.625 2.625 0 0 0-3.605 0 2.546 2.546 0 0 0 0 3.57 2.73 2.73 0 0 0-1.356 1.496L1 11.5h1.417l.333-.963a1.496 1.496 0 0 1 1.418-1.006h1.75c.056.085.12.164.192.237l.175.148a2.948 2.948 0 0 0-1.75 2.013l-.42 1.321H5.48l.271-.963a1.54 1.54 0 0 1 1.374-1.216h1.75a1.54 1.54 0 0 1 1.391 1.216l.271.963h1.365l-.402-1.33a2.956 2.956 0 0 0-1.75-2.004l.175-.148c.071-.073.136-.152.192-.237h1.82a1.452 1.452 0 0 1 1.313 1.006l.35.963H15l-.473-1.374Zm-2.292-4.2a1.207 1.207 0 0 1-1.549 1.838 2.572 2.572 0 0 0-.428-1.383c.055-.17.148-.325.27-.455a1.225 1.225 0 0 1 1.707 0Zm-3.255.945a1.391 1.391 0 1 1-1.96 0 1.435 1.435 0 0 1 1.96 0Zm-5.25-.945a1.269 1.269 0 0 1 1.75 0c.115.116.201.257.254.412a2.695 2.695 0 0 0-.464 1.505 1.277 1.277 0 0 1-1.54-.175 1.234 1.234 0 0 1 0-1.75v.008Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userGroup"><path d="M14.527 10.126a2.73 2.73 0 0 0-1.338-1.592 2.503 2.503 0 0 0 0-3.5 2.564 2.564 0 0 0-3.562 0 2.424 2.424 0 0 0-.367.481 2.791 2.791 0 0 0-2.433 0c-.099-.17-.22-.325-.358-.464a2.625 2.625 0 0 0-3.605 0 2.546 2.546 0 0 0 0 3.57 2.73 2.73 0 0 0-1.356 1.496L1 11.5h1.417l.333-.963a1.496 1.496 0 0 1 1.418-1.006h1.75c.056.085.12.164.192.237l.175.148a2.948 2.948 0 0 0-1.75 2.013l-.42 1.321H5.48l.271-.963a1.54 1.54 0 0 1 1.374-1.216h1.75a1.54 1.54 0 0 1 1.391 1.216l.271.963h1.365l-.402-1.33a2.956 2.956 0 0 0-1.75-2.004l.175-.148c.071-.073.136-.152.192-.237h1.82a1.452 1.452 0 0 1 1.313 1.006l.35.963H15l-.473-1.374Zm-2.292-4.2a1.207 1.207 0 0 1-1.549 1.838 2.572 2.572 0 0 0-.428-1.383c.055-.17.148-.325.27-.455a1.225 1.225 0 0 1 1.707 0Zm-3.255.945a1.391 1.391 0 1 1-1.96 0 1.435 1.435 0 0 1 1.96 0Zm-5.25-.945a1.269 1.269 0 0 1 1.75 0c.115.116.201.257.254.412a2.695 2.695 0 0 0-.464 1.505 1.277 1.277 0 0 1-1.54-.175 1.234 1.234 0 0 1 0-1.75v.008Z"></path></svg>';
 
 export class IconUserGroup extends HTMLElement {
     constructor () {

package/icons/IconUserGroupLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userGroupLarge"><path d="M9 13.375a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm14 5.25a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm5.994 9.52a4.795 4.795 0 0 0-4.55-3.395h-3.5a4.627 4.627 0 0 0-1.208.175 3.762 3.762 0 0 0-7.49 0 4.627 4.627 0 0 0-1.207-.175h-3.5a4.795 4.795 0 0 0-4.55 3.404L2.41 19.5H4.25l.42-1.313A3.063 3.063 0 0 1 7.556 16h3.5c.547 0 1.082.158 1.54.455a3.772 3.772 0 0 0 6.825 0A2.826 2.826 0 0 1 20.952 16h3.5a3.063 3.063 0 0 1 2.923 2.188l.42 1.312h1.837l-.638-1.855ZM16 16.875a2.04 2.04 0 1 1 0-4.078 2.04 2.04 0 0 1 0 4.078Zm6.125 6.029.604 1.846H20.89l-.42-1.313a3.054 3.054 0 0 0-2.887-2.187h-3.168a3.053 3.053 0 0 0-2.887 2.188l-.42 1.312H9.27l.604-1.846a4.812 4.812 0 0 1 4.541-3.404h3.168a4.812 4.812 0 0 1 4.54 3.404Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userGroupLarge"><path d="M9 13.375a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm14 5.25a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm5.994 9.52a4.795 4.795 0 0 0-4.55-3.395h-3.5a4.627 4.627 0 0 0-1.208.175 3.762 3.762 0 0 0-7.49 0 4.627 4.627 0 0 0-1.207-.175h-3.5a4.795 4.795 0 0 0-4.55 3.404L2.41 19.5H4.25l.42-1.313A3.063 3.063 0 0 1 7.556 16h3.5c.547 0 1.082.158 1.54.455a3.772 3.772 0 0 0 6.825 0A2.826 2.826 0 0 1 20.952 16h3.5a3.063 3.063 0 0 1 2.923 2.188l.42 1.312h1.837l-.638-1.855ZM16 16.875a2.04 2.04 0 1 1 0-4.078 2.04 2.04 0 0 1 0 4.078Zm6.125 6.029.604 1.846H20.89l-.42-1.313a3.054 3.054 0 0 0-2.887-2.187h-3.168a3.053 3.053 0 0 0-2.887 2.188l-.42 1.312H9.27l.604-1.846a4.812 4.812 0 0 1 4.541-3.404h3.168a4.812 4.812 0 0 1 4.54 3.404Z"></path></svg>';
 
 export class IconUserGroupLarge extends HTMLElement {
     constructor () {

package/icons/IconUserHighlight.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userHighlight"><path d="M8.656 1.875H7.344V4.5h1.312V1.875Z"></path><path d="m11.04 3.085-1.003 2.003 1.174.587 1.003-2.002-1.174-.588Z"></path><path d="m4.961 3.082-1.174.587L4.79 5.673l1.173-.588-1.002-2.003Z"></path><path d="M12.261 12.76a3.29 3.29 0 0 0-2.441-2.047l.087-.07a2.695 2.695 0 0 0 0-3.824 2.774 2.774 0 0 0-3.815 0 2.695 2.695 0 0 0 0 3.824l.088.07a3.29 3.29 0 0 0-2.441 2.047l-.499 1.365h1.4l.332-.875a2.022 2.022 0 0 1 1.943-1.26h2.17a2.02 2.02 0 0 1 1.942 1.26l.333.875h1.4l-.499-1.365Zm-5.25-5.014a1.435 1.435 0 0 1 1.96 0 1.391 1.391 0 1 1-1.96 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userHighlight"><path d="M8.656 1.875H7.344V4.5h1.312V1.875Z"></path><path d="m11.04 3.085-1.003 2.003 1.174.587 1.003-2.002-1.174-.588Z"></path><path d="m4.961 3.082-1.174.587L4.79 5.673l1.173-.588-1.002-2.003Z"></path><path d="M12.261 12.76a3.29 3.29 0 0 0-2.441-2.047l.087-.07a2.695 2.695 0 0 0 0-3.824 2.774 2.774 0 0 0-3.815 0 2.695 2.695 0 0 0 0 3.824l.088.07a3.29 3.29 0 0 0-2.441 2.047l-.499 1.365h1.4l.332-.875a2.022 2.022 0 0 1 1.943-1.26h2.17a2.02 2.02 0 0 1 1.942 1.26l.333.875h1.4l-.499-1.365Zm-5.25-5.014a1.435 1.435 0 0 1 1.96 0 1.391 1.391 0 1 1-1.96 0Z"></path></svg>';
 
 export class IconUserHighlight extends HTMLElement {
     constructor () {

package/icons/IconUserHighlightLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userHighlightLarge"><path d="M16.875 9h-1.75V3.75h1.75V9ZM23.7 7.775l-1.4-1.05-2.625 3.5 1.4 1.05 2.625-3.5Zm-11.375 2.45L9.7 6.725l-1.4 1.05 2.625 3.5 1.4-1.05ZM11.188 16A4.813 4.813 0 1 1 16 20.813 4.821 4.821 0 0 1 11.187 16Zm1.75 0a3.063 3.063 0 1 0 6.125 0 3.063 3.063 0 0 0-6.125 0Zm11.165 9.879a6.249 6.249 0 0 0-5.924-3.754h-4.375a6.248 6.248 0 0 0-5.924 3.754l-.892 2.371H8.86l.674-1.75a4.498 4.498 0 0 1 4.287-2.625h4.375a4.498 4.498 0 0 1 4.288 2.625l.673 1.75h1.882l-.936-2.371Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userHighlightLarge"><path d="M16.875 9h-1.75V3.75h1.75V9ZM23.7 7.775l-1.4-1.05-2.625 3.5 1.4 1.05 2.625-3.5Zm-11.375 2.45L9.7 6.725l-1.4 1.05 2.625 3.5 1.4-1.05ZM11.188 16A4.813 4.813 0 1 1 16 20.813 4.821 4.821 0 0 1 11.187 16Zm1.75 0a3.063 3.063 0 1 0 6.125 0 3.063 3.063 0 0 0-6.125 0Zm11.165 9.879a6.249 6.249 0 0 0-5.924-3.754h-4.375a6.248 6.248 0 0 0-5.924 3.754l-.892 2.371H8.86l.674-1.75a4.498 4.498 0 0 1 4.287-2.625h4.375a4.498 4.498 0 0 1 4.288 2.625l.673 1.75h1.882l-.936-2.371Z"></path></svg>';
 
 export class IconUserHighlightLarge extends HTMLElement {
     constructor () {

package/icons/IconUserLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userLarge"><path d="M23.823 22.501a6.011 6.011 0 0 0-5.723-3.876H13.91a6.029 6.029 0 0 0-5.731 3.894l-1.182 3.316h1.83l.98-2.756a4.296 4.296 0 0 1 4.103-2.704H18.1a4.305 4.305 0 0 1 4.104 2.747l.971 2.757h1.838l-1.19-3.378Z"></path><path d="M14.994 16.656a4.437 4.437 0 0 0 5.32-5.329 4.426 4.426 0 0 0-7.442-2.11 4.428 4.428 0 0 0 2.122 7.44Zm.481-7a2.704 2.704 0 1 1-2.1 2.153 2.704 2.704 0 0 1 2.1-2.118v-.035Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userLarge"><path d="M23.823 22.501a6.011 6.011 0 0 0-5.723-3.876H13.91a6.029 6.029 0 0 0-5.731 3.894l-1.182 3.316h1.83l.98-2.756a4.296 4.296 0 0 1 4.103-2.704H18.1a4.305 4.305 0 0 1 4.104 2.747l.971 2.757h1.838l-1.19-3.378Z"></path><path d="M14.994 16.656a4.437 4.437 0 0 0 5.32-5.329 4.426 4.426 0 0 0-7.442-2.11 4.428 4.428 0 0 0 2.122 7.44Zm.481-7a2.704 2.704 0 1 1-2.1 2.153 2.704 2.704 0 0 1 2.1-2.118v-.035Z"></path></svg>';
 
 export class IconUserLarge extends HTMLElement {
     constructor () {

package/icons/IconUserMarker.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userMarker"><g clip-path="url(#prefix__clip0_18_1932)"><path d="M9.855 7.895a2.23 2.23 0 0 0-.306-2.747 2.266 2.266 0 0 0-3.124 0A2.223 2.223 0 0 0 6.154 8c-.585.25-1.05.717-1.295 1.304l-.499 1.321h1.4l.324-.875a1.295 1.295 0 0 1 1.225-.744h1.566a1.286 1.286 0 0 1 1.225.744l.324.875h1.409l-.5-1.321a2.477 2.477 0 0 0-1.478-1.409Zm-2.503-1.82A.875.875 0 0 1 8 5.812a.875.875 0 0 1 .639 1.54.906.906 0 1 1-1.286-1.277Zm5.898-3.981H2.75a1.54 1.54 0 0 0-1.531 1.531V11.5a1.54 1.54 0 0 0 1.531 1.531h3.229L8 15.052l2.021-2.02h3.229a1.54 1.54 0 0 0 1.531-1.532V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219H9.479L8 13.198l-1.479-1.48H2.75a.219.219 0 0 1-.219-.218V3.625a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219V11.5Z"></path></g><defs><clipPath id="prefix__clip0_18_1932"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userMarker"><g clip-path="url(#prefix__clip0_18_1932)"><path d="M9.855 7.895a2.23 2.23 0 0 0-.306-2.747 2.266 2.266 0 0 0-3.124 0A2.223 2.223 0 0 0 6.154 8c-.585.25-1.05.717-1.295 1.304l-.499 1.321h1.4l.324-.875a1.295 1.295 0 0 1 1.225-.744h1.566a1.286 1.286 0 0 1 1.225.744l.324.875h1.409l-.5-1.321a2.477 2.477 0 0 0-1.478-1.409Zm-2.503-1.82A.875.875 0 0 1 8 5.812a.875.875 0 0 1 .639 1.54.906.906 0 1 1-1.286-1.277Zm5.898-3.981H2.75a1.54 1.54 0 0 0-1.531 1.531V11.5a1.54 1.54 0 0 0 1.531 1.531h3.229L8 15.052l2.021-2.02h3.229a1.54 1.54 0 0 0 1.531-1.532V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219H9.479L8 13.198l-1.479-1.48H2.75a.219.219 0 0 1-.219-.218V3.625a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219V11.5Z"></path></g><defs><clipPath id="prefix__clip0_18_1932"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconUserMarker extends HTMLElement {
     constructor () {

package/icons/IconUserMarkerLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userMarkerLarge"><path d="M16 15.125a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm5.25 8.566.691 1.934H20.07l-.499-1.313a2.204 2.204 0 0 0-2.126-1.312h-2.511a2.205 2.205 0 0 0-2.127 1.313l-.498 1.312h-1.873l.726-1.934A3.972 3.972 0 0 1 14.932 16h2.512a3.972 3.972 0 0 1 3.806 2.441ZM26.5 4.625h-21A2.625 2.625 0 0 0 2.875 7.25v14.875A2.625 2.625 0 0 0 5.5 24.75h6.641L16 28.609l3.859-3.859H26.5a2.625 2.625 0 0 0 2.625-2.625V7.25A2.625 2.625 0 0 0 26.5 4.625Zm.875 17.5A.875.875 0 0 1 26.5 23h-7.359L16 26.141 12.859 23H5.5a.875.875 0 0 1-.875-.875V7.25a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v14.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userMarkerLarge"><path d="M16 15.125a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm5.25 8.566.691 1.934H20.07l-.499-1.313a2.204 2.204 0 0 0-2.126-1.312h-2.511a2.205 2.205 0 0 0-2.127 1.313l-.498 1.312h-1.873l.726-1.934A3.972 3.972 0 0 1 14.932 16h2.512a3.972 3.972 0 0 1 3.806 2.441ZM26.5 4.625h-21A2.625 2.625 0 0 0 2.875 7.25v14.875A2.625 2.625 0 0 0 5.5 24.75h6.641L16 28.609l3.859-3.859H26.5a2.625 2.625 0 0 0 2.625-2.625V7.25A2.625 2.625 0 0 0 26.5 4.625Zm.875 17.5A.875.875 0 0 1 26.5 23h-7.359L16 26.141 12.859 23H5.5a.875.875 0 0 1-.875-.875V7.25a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v14.875Z"></path></svg>';
 
 export class IconUserMarkerLarge extends HTMLElement {
     constructor () {

package/icons/IconUserPartnership.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userPartnership"><path d="M12.865 7.598a2.424 2.424 0 1 0-2.091-.132 3.106 3.106 0 0 0-1.829 1.409L8 10.293l-.936-1.418a3.133 3.133 0 0 0-1.838-1.374 2.389 2.389 0 1 0-2.091.132 3.089 3.089 0 0 0-1.916 2.808v3.684H2.53v-3.684a1.811 1.811 0 0 1 1.838-1.75 1.846 1.846 0 0 1 1.583.875L8 12.707l2.047-3.176a1.854 1.854 0 0 1 1.584-.875 1.812 1.812 0 0 1 1.838 1.75v3.719h1.312v-3.684a3.088 3.088 0 0 0-1.916-2.843ZM4.062 4.28a1.094 1.094 0 1 1 0 2.188 1.094 1.094 0 0 1 0-2.188Zm7.875 0a1.094 1.094 0 1 1 0 2.188 1.094 1.094 0 0 1 0-2.188ZM4.72 11.5H6.03v2.625H4.72V11.5Zm5.25 0h1.312v2.625H9.97V11.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userPartnership"><path d="M12.865 7.598a2.424 2.424 0 1 0-2.091-.132 3.106 3.106 0 0 0-1.829 1.409L8 10.293l-.936-1.418a3.133 3.133 0 0 0-1.838-1.374 2.389 2.389 0 1 0-2.091.132 3.089 3.089 0 0 0-1.916 2.808v3.684H2.53v-3.684a1.811 1.811 0 0 1 1.838-1.75 1.846 1.846 0 0 1 1.583.875L8 12.707l2.047-3.176a1.854 1.854 0 0 1 1.584-.875 1.812 1.812 0 0 1 1.838 1.75v3.719h1.312v-3.684a3.088 3.088 0 0 0-1.916-2.843ZM4.062 4.28a1.094 1.094 0 1 1 0 2.188 1.094 1.094 0 0 1 0-2.188Zm7.875 0a1.094 1.094 0 1 1 0 2.188 1.094 1.094 0 0 1 0-2.188ZM4.72 11.5H6.03v2.625H4.72V11.5Zm5.25 0h1.312v2.625H9.97V11.5Z"></path></svg>';
 
 export class IconUserPartnership extends HTMLElement {
     constructor () {

package/icons/IconUserPartnershipLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userPartnershipLarge"><path d="M8.125 14.25a4.375 4.375 0 1 0 0-8.75 4.375 4.375 0 0 0 0 8.75Zm0-7a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm15.75 7a4.375 4.375 0 1 0 0-8.75 4.375 4.375 0 0 0 0 8.75Zm0-7a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm5.25 13.633v7.367h-1.75v-7.367a4.058 4.058 0 0 0-4.113-4.008 4.174 4.174 0 0 0-3.5 1.951L16 24.62l-3.719-5.775a4.182 4.182 0 0 0-3.543-1.969 4.06 4.06 0 0 0-4.113 4.008v7.367h-1.75v-7.367a5.819 5.819 0 0 1 5.863-5.758 5.897 5.897 0 0 1 5.022 2.791l2.24 3.5 2.249-3.5a5.898 5.898 0 0 1 5.014-2.791 5.818 5.818 0 0 1 5.862 5.758Zm-17.754 1.496 3.5 3.5-1.242 1.242-2.004-2.012v3.141h-1.75V23a.875.875 0 0 1 .543-.805.875.875 0 0 1 .953.184ZM22.125 23v5.25h-1.75v-3.141l-2.004 2.012-1.242-1.242 3.5-3.5a.875.875 0 0 1 .953-.184.874.874 0 0 1 .543.805Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userPartnershipLarge"><path d="M8.125 14.25a4.375 4.375 0 1 0 0-8.75 4.375 4.375 0 0 0 0 8.75Zm0-7a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm15.75 7a4.375 4.375 0 1 0 0-8.75 4.375 4.375 0 0 0 0 8.75Zm0-7a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Zm5.25 13.633v7.367h-1.75v-7.367a4.058 4.058 0 0 0-4.113-4.008 4.174 4.174 0 0 0-3.5 1.951L16 24.62l-3.719-5.775a4.182 4.182 0 0 0-3.543-1.969 4.06 4.06 0 0 0-4.113 4.008v7.367h-1.75v-7.367a5.819 5.819 0 0 1 5.863-5.758 5.897 5.897 0 0 1 5.022 2.791l2.24 3.5 2.249-3.5a5.898 5.898 0 0 1 5.014-2.791 5.818 5.818 0 0 1 5.862 5.758Zm-17.754 1.496 3.5 3.5-1.242 1.242-2.004-2.012v3.141h-1.75V23a.875.875 0 0 1 .543-.805.875.875 0 0 1 .953.184ZM22.125 23v5.25h-1.75v-3.141l-2.004 2.012-1.242-1.242 3.5-3.5a.875.875 0 0 1 .953-.184.874.874 0 0 1 .543.805Z"></path></svg>';
 
 export class IconUserPartnershipLarge extends HTMLElement {
     constructor () {

package/icons/IconUserRepeat.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userRepeat"><path d="m4.386 10.161-.14.525h1.365l.044-.184a1.636 1.636 0 0 1 1.47-1.347h1.75a1.636 1.636 0 0 1 1.453 1.348l.043.183h1.365l-.14-.525a3.062 3.062 0 0 0-2.117-2.24c.052 0 .105-.079.157-.131a2.31 2.31 0 1 0-3.272 0l.157.131a3.063 3.063 0 0 0-2.135 2.24Zm2.905-4.716A1.006 1.006 0 1 1 8.72 6.862a1.006 1.006 0 0 1-1.429-1.417ZM14.781 8A6.781 6.781 0 1 1 1.22 8a6.711 6.711 0 0 1 .971-3.5L1.15 3.485l3.404-.682-.464 3.622-.936-.945A5.469 5.469 0 1 0 8 2.531V1.22A6.79 6.79 0 0 1 14.781 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userRepeat"><path d="m4.386 10.161-.14.525h1.365l.044-.184a1.636 1.636 0 0 1 1.47-1.347h1.75a1.636 1.636 0 0 1 1.453 1.348l.043.183h1.365l-.14-.525a3.062 3.062 0 0 0-2.117-2.24c.052 0 .105-.079.157-.131a2.31 2.31 0 1 0-3.272 0l.157.131a3.063 3.063 0 0 0-2.135 2.24Zm2.905-4.716A1.006 1.006 0 1 1 8.72 6.862a1.006 1.006 0 0 1-1.429-1.417ZM14.781 8A6.781 6.781 0 1 1 1.22 8a6.711 6.711 0 0 1 .971-3.5L1.15 3.485l3.404-.682-.464 3.622-.936-.945A5.469 5.469 0 1 0 8 2.531V1.22A6.79 6.79 0 0 1 14.781 8Z"></path></svg>';
 
 export class IconUserRepeat extends HTMLElement {
     constructor () {

package/icons/IconUserRepeatLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userRepeatLarge"><path d="m9.56 20.436-.254.928h1.82l.123-.464c.498-1.811 1.837-3.019 3.333-3.019h3.562c1.496 0 2.835 1.208 3.333 3.019l.123.464h1.82l-.254-.928a5.53 5.53 0 0 0-4.454-4.252c.175-.12.34-.255.49-.403a4.016 4.016 0 1 0-5.678 0c.151.148.315.283.49.403a5.53 5.53 0 0 0-4.454 4.252Zm5.197-9.108a2.275 2.275 0 1 1 0 3.22 2.266 2.266 0 0 1 0-3.22ZM28.617 16a12.25 12.25 0 0 1-24.5 0 12.101 12.101 0 0 1 1.83-6.431l-2.626.376-.245-1.75 4.804-.691a.875.875 0 0 1 .989.744l.69 4.812-1.75.245-.367-2.835A10.369 10.369 0 0 0 5.867 16a10.5 10.5 0 1 0 10.5-10.5V3.75A12.25 12.25 0 0 1 28.617 16Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userRepeatLarge"><path d="m9.56 20.436-.254.928h1.82l.123-.464c.498-1.811 1.837-3.019 3.333-3.019h3.562c1.496 0 2.835 1.208 3.333 3.019l.123.464h1.82l-.254-.928a5.53 5.53 0 0 0-4.454-4.252c.175-.12.34-.255.49-.403a4.016 4.016 0 1 0-5.678 0c.151.148.315.283.49.403a5.53 5.53 0 0 0-4.454 4.252Zm5.197-9.108a2.275 2.275 0 1 1 0 3.22 2.266 2.266 0 0 1 0-3.22ZM28.617 16a12.25 12.25 0 0 1-24.5 0 12.101 12.101 0 0 1 1.83-6.431l-2.626.376-.245-1.75 4.804-.691a.875.875 0 0 1 .989.744l.69 4.812-1.75.245-.367-2.835A10.369 10.369 0 0 0 5.867 16a10.5 10.5 0 1 0 10.5-10.5V3.75A12.25 12.25 0 0 1 28.617 16Z"></path></svg>';
 
 export class IconUserRepeatLarge extends HTMLElement {
     constructor () {

package/icons/IconUserShield.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userShield"><path d="M13.127 3.791 8 1.14 2.872 3.791a1.525 1.525 0 0 0-.831 1.374v3.588c0 .043.07 4.637 5.793 6.124l.166.044.166-.043c5.723-1.497 5.793-6.082 5.793-6.134V5.165c0-.577-.316-1.102-.832-1.374ZM3.362 5.165c0-.087.044-.157.123-.201L8 2.628l4.515 2.345c.07.035.122.113.122.2v3.58c0 .166-.122 3.56-4.637 4.812-4.524-1.26-4.629-4.664-4.638-4.812V5.165Z"></path><path d="M9.251 8.149a1.787 1.787 0 0 0-1.278-3.036c-.98 0-1.784.805-1.784 1.785 0 .49.2.936.525 1.26-1.147.385-1.97 1.25-1.97 2.24h1.313c0-.464.744-1.138 1.917-1.138 1.172 0 1.968.656 1.968 1.138h1.313c0-1.015-.832-1.882-2.013-2.258l.009.009ZM7.974 6.425a.47.47 0 0 1 .472.473.47.47 0 0 1-.472.472.47.47 0 0 1-.473-.472.47.47 0 0 1 .473-.473Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userShield"><path d="M13.127 3.791 8 1.14 2.872 3.791a1.525 1.525 0 0 0-.831 1.374v3.588c0 .043.07 4.637 5.793 6.124l.166.044.166-.043c5.723-1.497 5.793-6.082 5.793-6.134V5.165c0-.577-.316-1.102-.832-1.374ZM3.362 5.165c0-.087.044-.157.123-.201L8 2.628l4.515 2.345c.07.035.122.113.122.2v3.58c0 .166-.122 3.56-4.637 4.812-4.524-1.26-4.629-4.664-4.638-4.812V5.165Z"></path><path d="M9.251 8.149a1.787 1.787 0 0 0-1.278-3.036c-.98 0-1.784.805-1.784 1.785 0 .49.2.936.525 1.26-1.147.385-1.97 1.25-1.97 2.24h1.313c0-.464.744-1.138 1.917-1.138 1.172 0 1.968.656 1.968 1.138h1.313c0-1.015-.832-1.882-2.013-2.258l.009.009ZM7.974 6.425a.47.47 0 0 1 .472.473.47.47 0 0 1-.472.472.47.47 0 0 1-.473-.472.47.47 0 0 1 .473-.473Z"></path></svg>';
 
 export class IconUserShield extends HTMLElement {
     constructor () {

package/icons/IconUserShieldLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userShieldLarge"><path d="M22.816 21.25c-.717-2.328-2.738-3.894-5.031-3.894h-.595a3.72 3.72 0 0 0 1.418-.866 3.691 3.691 0 0 0 0-5.224c-1.444-1.435-3.79-1.443-5.224 0-.7.7-1.085 1.628-1.085 2.617 0 .988.385 1.916 1.085 2.616.402.402.892.691 1.417.866h-.595c-2.292 0-4.313 1.566-5.031 3.894L9 21.836h1.829l.017-.061c.49-1.584 1.838-2.651 3.351-2.651h3.57c1.514 0 2.87 1.067 3.352 2.651l.017.061h1.829l-.175-.577.026-.009Zm-8.19-5.994a1.933 1.933 0 0 1-.569-1.373 1.941 1.941 0 0 1 3.316-1.374 1.949 1.949 0 0 1 0 2.756c-.76.761-2.02.735-2.756 0l.01-.009Z"></path><path d="M25.957 7.933 16 2.77 6.043 7.933a2.617 2.617 0 0 0-1.418 2.327v7.114c0 .087.21 8.872 11.156 11.725l.219.061.219-.061c10.946-2.861 11.156-11.638 11.156-11.734V10.26c0-.98-.543-1.881-1.418-2.327Zm-.332 9.423c0 .306-.227 7.429-9.625 9.993-9.398-2.564-9.616-9.686-9.625-9.984V10.26c0-.332.184-.621.473-.779L16 4.74l9.152 4.742a.872.872 0 0 1 .473.779v7.096Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userShieldLarge"><path d="M22.816 21.25c-.717-2.328-2.738-3.894-5.031-3.894h-.595a3.72 3.72 0 0 0 1.418-.866 3.691 3.691 0 0 0 0-5.224c-1.444-1.435-3.79-1.443-5.224 0-.7.7-1.085 1.628-1.085 2.617 0 .988.385 1.916 1.085 2.616.402.402.892.691 1.417.866h-.595c-2.292 0-4.313 1.566-5.031 3.894L9 21.836h1.829l.017-.061c.49-1.584 1.838-2.651 3.351-2.651h3.57c1.514 0 2.87 1.067 3.352 2.651l.017.061h1.829l-.175-.577.026-.009Zm-8.19-5.994a1.933 1.933 0 0 1-.569-1.373 1.941 1.941 0 0 1 3.316-1.374 1.949 1.949 0 0 1 0 2.756c-.76.761-2.02.735-2.756 0l.01-.009Z"></path><path d="M25.957 7.933 16 2.77 6.043 7.933a2.617 2.617 0 0 0-1.418 2.327v7.114c0 .087.21 8.872 11.156 11.725l.219.061.219-.061c10.946-2.861 11.156-11.638 11.156-11.734V10.26c0-.98-.543-1.881-1.418-2.327Zm-.332 9.423c0 .306-.227 7.429-9.625 9.993-9.398-2.564-9.616-9.686-9.625-9.984V10.26c0-.332.184-.621.473-.779L16 4.74l9.152 4.742a.872.872 0 0 1 .473.779v7.096Z"></path></svg>';
 
 export class IconUserShieldLarge extends HTMLElement {
     constructor () {

package/icons/IconUsers.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--users"><path d="m1.21 11.824.49-1.392a2.87 2.87 0 0 1 2.021-1.75 2.704 2.704 0 0 1-.481-.367 2.406 2.406 0 1 1 3.395 0 1.898 1.898 0 0 1-.324.271A2.905 2.905 0 0 1 8 9.085a2.94 2.94 0 0 1 1.697-.534 2.415 2.415 0 0 1-1.04-1.977 2.406 2.406 0 1 1 4.103 1.75c-.146.14-.308.263-.481.367a2.853 2.853 0 0 1 2.021 1.75l.49 1.391h-1.391l-.341-.953A1.584 1.584 0 0 0 11.5 9.855H9.75a1.584 1.584 0 0 0-1.523 1.015l-.34.954H6.46l.49-1.392c0-.122.105-.236.157-.35a1.654 1.654 0 0 0-.857-.227H4.5a1.584 1.584 0 0 0-1.523 1.015l-.34.954H1.21Zm8.75-5.25a1.094 1.094 0 1 0 .324-.77 1.084 1.084 0 0 0-.315.77H9.96Zm-6.125 0a1.094 1.094 0 1 0 .324-.77 1.085 1.085 0 0 0-.315.77h-.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--users"><path d="m1.21 11.824.49-1.392a2.87 2.87 0 0 1 2.021-1.75 2.704 2.704 0 0 1-.481-.367 2.406 2.406 0 1 1 3.395 0 1.898 1.898 0 0 1-.324.271A2.905 2.905 0 0 1 8 9.085a2.94 2.94 0 0 1 1.697-.534 2.415 2.415 0 0 1-1.04-1.977 2.406 2.406 0 1 1 4.103 1.75c-.146.14-.308.263-.481.367a2.853 2.853 0 0 1 2.021 1.75l.49 1.391h-1.391l-.341-.953A1.584 1.584 0 0 0 11.5 9.855H9.75a1.584 1.584 0 0 0-1.523 1.015l-.34.954H6.46l.49-1.392c0-.122.105-.236.157-.35a1.654 1.654 0 0 0-.857-.227H4.5a1.584 1.584 0 0 0-1.523 1.015l-.34.954H1.21Zm8.75-5.25a1.094 1.094 0 1 0 .324-.77 1.084 1.084 0 0 0-.315.77H9.96Zm-6.125 0a1.094 1.094 0 1 0 .324-.77 1.085 1.085 0 0 0-.315.77h-.009Z"></path></svg>';
 
 export class IconUsers extends HTMLElement {
     constructor () {

package/icons/IconUsersLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--usersLarge"><path d="M10.461 8.563a3.938 3.938 0 1 1 0 7.875 3.938 3.938 0 0 1 0-7.875Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.17 2.17 0 0 0-2.135-2.188Zm11.113-1.75A3.937 3.937 0 1 1 17.75 12.5a3.902 3.902 0 0 1 3.824-3.938Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.161 2.161 0 0 0-2.135-2.188ZM27.9 20.374a5.25 5.25 0 0 0-4.97-3.036h-3.57A5.767 5.767 0 0 0 16 18.363a5.67 5.67 0 0 0-3.351-1.05H9.105a5.25 5.25 0 0 0-4.979 3.062l-1.251 3.063h1.864l.971-2.415a3.605 3.605 0 0 1 3.395-1.96h3.561a4.21 4.21 0 0 1 2.109.56 4.14 4.14 0 0 0-.385.726l-1.242 3.088h1.846L16 21.023a3.614 3.614 0 0 1 3.395-1.96h3.57a3.614 3.614 0 0 1 3.395 1.96l.971 2.416h1.794L27.9 20.375Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--usersLarge"><path d="M10.461 8.563a3.938 3.938 0 1 1 0 7.875 3.938 3.938 0 0 1 0-7.875Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.17 2.17 0 0 0-2.135-2.188Zm11.113-1.75A3.937 3.937 0 1 1 17.75 12.5a3.902 3.902 0 0 1 3.824-3.938Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.161 2.161 0 0 0-2.135-2.188ZM27.9 20.374a5.25 5.25 0 0 0-4.97-3.036h-3.57A5.767 5.767 0 0 0 16 18.363a5.67 5.67 0 0 0-3.351-1.05H9.105a5.25 5.25 0 0 0-4.979 3.062l-1.251 3.063h1.864l.971-2.415a3.605 3.605 0 0 1 3.395-1.96h3.561a4.21 4.21 0 0 1 2.109.56 4.14 4.14 0 0 0-.385.726l-1.242 3.088h1.846L16 21.023a3.614 3.614 0 0 1 3.395-1.96h3.57a3.614 3.614 0 0 1 3.395 1.96l.971 2.416h1.794L27.9 20.375Z"></path></svg>';
 
 export class IconUsersLarge extends HTMLElement {
     constructor () {

package/icons/IconVegan.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--vegan"><path d="m14.484 1.718-.158-.657-.656.184c-.473.131-4.672 1.348-5.933 3.5C6.25 3.214 3.162 2.418 2.75 2.321l-.656-.157-.14.665c-.079.429-.84 4.296.359 6.212a3.623 3.623 0 0 0 3.053 1.75c.14.009.28.009.42 0l1.339 3.255h1.75l1.409-3.561c.205.038.412.059.621.061a3.938 3.938 0 0 0 3.386-1.96c1.278-2.135.306-6.387.193-6.868ZM3.424 8.34c-.674-1.023-.482-3.228-.289-4.55 1.277.394 3.343 1.217 3.99 2.24.038.07.07.143.096.219a3.806 3.806 0 0 0 .088 1.505c.02.068.043.136.07.201a2.24 2.24 0 0 1-.621.919l-.64-1.645h-1.75l.876 2.196a2.319 2.319 0 0 1-1.82-1.085ZM8 12.244l-.787-2.065c.342-.236.639-.532.875-.875a3.5 3.5 0 0 0 .743.639L8 12.243Zm5.154-4.323A2.625 2.625 0 0 1 10.8 9.225l.787-1.995H9.925l-.543 1.444a2.415 2.415 0 0 1-.804-1.269 2.625 2.625 0 0 1 .297-2.03c.7-1.19 3.063-2.187 4.471-2.625.271 1.426.543 3.973-.166 5.171h-.026Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--vegan"><path d="m14.484 1.718-.158-.657-.656.184c-.473.131-4.672 1.348-5.933 3.5C6.25 3.214 3.162 2.418 2.75 2.321l-.656-.157-.14.665c-.079.429-.84 4.296.359 6.212a3.623 3.623 0 0 0 3.053 1.75c.14.009.28.009.42 0l1.339 3.255h1.75l1.409-3.561c.205.038.412.059.621.061a3.938 3.938 0 0 0 3.386-1.96c1.278-2.135.306-6.387.193-6.868ZM3.424 8.34c-.674-1.023-.482-3.228-.289-4.55 1.277.394 3.343 1.217 3.99 2.24.038.07.07.143.096.219a3.806 3.806 0 0 0 .088 1.505c.02.068.043.136.07.201a2.24 2.24 0 0 1-.621.919l-.64-1.645h-1.75l.876 2.196a2.319 2.319 0 0 1-1.82-1.085ZM8 12.244l-.787-2.065c.342-.236.639-.532.875-.875a3.5 3.5 0 0 0 .743.639L8 12.243Zm5.154-4.323A2.625 2.625 0 0 1 10.8 9.225l.787-1.995H9.925l-.543 1.444a2.415 2.415 0 0 1-.804-1.269 2.625 2.625 0 0 1 .297-2.03c.7-1.19 3.063-2.187 4.471-2.625.271 1.426.543 3.973-.166 5.171h-.026Z"></path></svg>';
 
 export class IconVegan extends HTMLElement {
     constructor () {

package/icons/IconVeganLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--veganLarge"><path d="m27.944 4.004-.21-.875-.875.236c-.359.105-9.109 2.573-11.603 6.764a6.2 6.2 0 0 0-.28.534C12.16 7.372 5.167 5.604 4.853 5.5l-.875-.21-.228.91c-.07.341-1.75 8.365.604 12.11a6.843 6.843 0 0 0 5.783 3.203c.367-.005.733-.04 1.094-.106l2.87 7.15h2.625l3.054-7.613c.485.11.981.17 1.479.175a7.465 7.465 0 0 0 6.405-3.701c2.458-4.2.367-13.038.28-13.414ZM5.876 17.383c-1.435-2.258-.98-7.298-.551-9.914 2.546.752 7.245 2.52 8.689 4.821.105.166.198.338.28.516a7.453 7.453 0 0 0 .14 3.01c.052.175.105.359.166.534a4.708 4.708 0 0 1-1.986 2.695l-1.637-4.139H8.624l1.942 4.83a5.049 5.049 0 0 1-4.69-2.354Zm9.625 8.88-2.196-5.582.263-.14a6.405 6.405 0 0 0 2.126-2.205 7 7 0 0 0 2.039 1.82l.148.07-2.38 6.038Zm10.64-9.738a5.68 5.68 0 0 1-5.722 2.774l1.75-4.375h-2.232l-1.443 3.701a5.25 5.25 0 0 1-2.363-3.203 5.687 5.687 0 0 1 .63-4.375c1.707-2.922 7.455-5.004 9.678-5.722.569 2.87 1.268 8.54-.298 11.2Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--veganLarge"><path d="m27.944 4.004-.21-.875-.875.236c-.359.105-9.109 2.573-11.603 6.764a6.2 6.2 0 0 0-.28.534C12.16 7.372 5.167 5.604 4.853 5.5l-.875-.21-.228.91c-.07.341-1.75 8.365.604 12.11a6.843 6.843 0 0 0 5.783 3.203c.367-.005.733-.04 1.094-.106l2.87 7.15h2.625l3.054-7.613c.485.11.981.17 1.479.175a7.465 7.465 0 0 0 6.405-3.701c2.458-4.2.367-13.038.28-13.414ZM5.876 17.383c-1.435-2.258-.98-7.298-.551-9.914 2.546.752 7.245 2.52 8.689 4.821.105.166.198.338.28.516a7.453 7.453 0 0 0 .14 3.01c.052.175.105.359.166.534a4.708 4.708 0 0 1-1.986 2.695l-1.637-4.139H8.624l1.942 4.83a5.049 5.049 0 0 1-4.69-2.354Zm9.625 8.88-2.196-5.582.263-.14a6.405 6.405 0 0 0 2.126-2.205 7 7 0 0 0 2.039 1.82l.148.07-2.38 6.038Zm10.64-9.738a5.68 5.68 0 0 1-5.722 2.774l1.75-4.375h-2.232l-1.443 3.701a5.25 5.25 0 0 1-2.363-3.203 5.687 5.687 0 0 1 .63-4.375c1.707-2.922 7.455-5.004 9.678-5.722.569 2.87 1.268 8.54-.298 11.2Z"></path></svg>';
 
 export class IconVeganLarge extends HTMLElement {
     constructor () {

package/icons/IconVegetarian.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--vegetarian"><path fill-rule="evenodd" d="m10.844 1.044.324.568c.007.016.025.048.05.097.43.798 3.179 5.91 2.33 8.986a5.18 5.18 0 0 1-4.97 3.806 4.96 4.96 0 0 1-1.374-.192 4.86 4.86 0 0 1-1.059-.42 6.606 6.606 0 0 1-2.992.735A6.414 6.414 0 0 1 2 14.509v-1.334a5.197 5.197 0 0 0 2.938-.179A5.18 5.18 0 0 1 3.625 8c.857-3.23 6.186-6.36 6.629-6.62l.021-.013.569-.323Zm-.367 11.644a3.859 3.859 0 0 0 1.81-2.325v-.01c.552-2.03-.997-5.678-1.942-7.498C8.604 3.94 5.375 6.25 4.859 8.35a3.85 3.85 0 0 0 1.312 4.025 5.163 5.163 0 0 0 2.03-2.984l1.269.359a6.431 6.431 0 0 1-2.048 3.255l.132.052a3.859 3.859 0 0 0 2.923-.37Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--vegetarian"><path fill-rule="evenodd" d="m10.844 1.044.324.568c.007.016.025.048.05.097.43.798 3.179 5.91 2.33 8.986a5.18 5.18 0 0 1-4.97 3.806 4.96 4.96 0 0 1-1.374-.192 4.86 4.86 0 0 1-1.059-.42 6.606 6.606 0 0 1-2.992.735A6.414 6.414 0 0 1 2 14.509v-1.334a5.197 5.197 0 0 0 2.938-.179A5.18 5.18 0 0 1 3.625 8c.857-3.23 6.186-6.36 6.629-6.62l.021-.013.569-.323Zm-.367 11.644a3.859 3.859 0 0 0 1.81-2.325v-.01c.552-2.03-.997-5.678-1.942-7.498C8.604 3.94 5.375 6.25 4.859 8.35a3.85 3.85 0 0 0 1.312 4.025 5.163 5.163 0 0 0 2.03-2.984l1.269.359a6.431 6.431 0 0 1-2.048 3.255l.132.052a3.859 3.859 0 0 0 2.923-.37Z" clip-rule="evenodd"></path></svg>';
 
 export class IconVegetarian extends HTMLElement {
     constructor () {

package/icons/IconVegetarianFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--vegetarianFilled"><path d="m10.844 1.052.324.57.01.018c.242.437 3.254 5.86 2.378 9.09a5.18 5.18 0 0 1-4.978 3.806 5.29 5.29 0 0 1-1.374-.184 5.438 5.438 0 0 1-1.068-.428l.35-.175.359-.237c.21-.145.411-.303.604-.472A6.458 6.458 0 0 0 9.47 9.75L8.201 9.4a5.171 5.171 0 0 1-2.047 2.94c-.05.034-.098.072-.147.11-.062.05-.126.1-.194.144l-.22.114c-.21.116-.43.216-.655.297A5.162 5.162 0 0 1 3.625 8c.857-3.221 6.185-6.35 6.628-6.611l.022-.013.569-.324Z"></path><path d="M2 14.518c.386.073.777.111 1.17.114a6.529 6.529 0 0 0 2.966-.734 5.25 5.25 0 0 1-1.199-.875A5.154 5.154 0 0 1 2 13.185v1.333Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--vegetarianFilled"><path d="m10.844 1.052.324.57.01.018c.242.437 3.254 5.86 2.378 9.09a5.18 5.18 0 0 1-4.978 3.806 5.29 5.29 0 0 1-1.374-.184 5.438 5.438 0 0 1-1.068-.428l.35-.175.359-.237c.21-.145.411-.303.604-.472A6.458 6.458 0 0 0 9.47 9.75L8.201 9.4a5.171 5.171 0 0 1-2.047 2.94c-.05.034-.098.072-.147.11-.062.05-.126.1-.194.144l-.22.114c-.21.116-.43.216-.655.297A5.162 5.162 0 0 1 3.625 8c.857-3.221 6.185-6.35 6.628-6.611l.022-.013.569-.324Z"></path><path d="M2 14.518c.386.073.777.111 1.17.114a6.529 6.529 0 0 0 2.966-.734 5.25 5.25 0 0 1-1.199-.875A5.154 5.154 0 0 1 2 13.185v1.333Z"></path></svg>';
 
 export class IconVegetarianFilled extends HTMLElement {
     constructor () {

package/icons/IconVegetarianFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--vegetarianFilledLarge"><path d="m23.166 3.155-.428-.753-.762.473c-.463.262-11.375 6.562-13.125 12.924a9.905 9.905 0 0 0 3.316 10.281c.28-.131.57-.289.876-.446l.078-.044c.254-.149.481-.306.718-.473a10.818 10.818 0 0 0 1.522-1.294 2.922 2.922 0 0 0 .525-2.258 4.017 4.017 0 0 0-1.802-2.625l.971-1.461a5.933 5.933 0 0 1 2.424 3.202c.254-.564.46-1.15.612-1.75l.534-2.564 1.75.42-.639 2.547a12.627 12.627 0 0 1-2.992 5.486l-.271.262c-.314.31-.644.602-.99.875-.253.21-.524.412-.804.604-.28.193-.464.324-.709.473l-.158.087c.62.322 1.27.577 1.943.762.854.24 1.738.36 2.625.358a9.914 9.914 0 0 0 9.538-7.28c1.715-6.343-4.49-17.334-4.752-17.806Z"></path><path d="M5.5 26.859v1.75a12.364 12.364 0 0 0 8.295-1.505A9.784 9.784 0 0 1 12.133 26a10.684 10.684 0 0 1-6.633.858Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--vegetarianFilledLarge"><path d="m23.166 3.155-.428-.753-.762.473c-.463.262-11.375 6.562-13.125 12.924a9.905 9.905 0 0 0 3.316 10.281c.28-.131.57-.289.876-.446l.078-.044c.254-.149.481-.306.718-.473a10.818 10.818 0 0 0 1.522-1.294 2.922 2.922 0 0 0 .525-2.258 4.017 4.017 0 0 0-1.802-2.625l.971-1.461a5.933 5.933 0 0 1 2.424 3.202c.254-.564.46-1.15.612-1.75l.534-2.564 1.75.42-.639 2.547a12.627 12.627 0 0 1-2.992 5.486l-.271.262c-.314.31-.644.602-.99.875-.253.21-.524.412-.804.604-.28.193-.464.324-.709.473l-.158.087c.62.322 1.27.577 1.943.762.854.24 1.738.36 2.625.358a9.914 9.914 0 0 0 9.538-7.28c1.715-6.343-4.49-17.334-4.752-17.806Z"></path><path d="M5.5 26.859v1.75a12.364 12.364 0 0 0 8.295-1.505A9.784 9.784 0 0 1 12.133 26a10.684 10.684 0 0 1-6.633.858Z"></path></svg>';
 
 export class IconVegetarianFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconVegetarianLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--vegetarianLarge"><path d="m23.166 3.146-.428-.761-.762.438c-.463.262-11.375 6.562-13.125 12.923a9.87 9.87 0 0 0 .945 7.508c.612 1.06 1.413 2 2.363 2.773a10.754 10.754 0 0 1-7.28.692l-.438 1.697c1.027.26 2.082.393 3.141.394a12.574 12.574 0 0 0 6.248-1.68 9.724 9.724 0 0 0 1.951.761 9.994 9.994 0 0 0 2.625.359 9.905 9.905 0 0 0 9.52-7.28c1.707-6.361-4.497-17.36-4.76-17.824Zm3.037 17.36A8.146 8.146 0 0 1 16.2 26.203l-.735-.237c.34-.273.664-.565.972-.875l.253-.114.053-.183a12.477 12.477 0 0 0 2.975-5.469l.639-2.537-1.733-.438-.639 2.537c-.153.6-.358 1.186-.612 1.75a5.932 5.932 0 0 0-2.424-3.202l-.971 1.461a4.015 4.015 0 0 1 1.802 2.625 2.921 2.921 0 0 1-.525 2.258c-.467.48-.98.913-1.531 1.295a8.111 8.111 0 0 1-3.22-8.873c1.313-4.76 9.074-9.826 11.568-11.401 1.364 2.59 5.442 10.938 4.13 15.706Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--vegetarianLarge"><path d="m23.166 3.146-.428-.761-.762.438c-.463.262-11.375 6.562-13.125 12.923a9.87 9.87 0 0 0 .945 7.508c.612 1.06 1.413 2 2.363 2.773a10.754 10.754 0 0 1-7.28.692l-.438 1.697c1.027.26 2.082.393 3.141.394a12.574 12.574 0 0 0 6.248-1.68 9.724 9.724 0 0 0 1.951.761 9.994 9.994 0 0 0 2.625.359 9.905 9.905 0 0 0 9.52-7.28c1.707-6.361-4.497-17.36-4.76-17.824Zm3.037 17.36A8.146 8.146 0 0 1 16.2 26.203l-.735-.237c.34-.273.664-.565.972-.875l.253-.114.053-.183a12.477 12.477 0 0 0 2.975-5.469l.639-2.537-1.733-.438-.639 2.537c-.153.6-.358 1.186-.612 1.75a5.932 5.932 0 0 0-2.424-3.202l-.971 1.461a4.015 4.015 0 0 1 1.802 2.625 2.921 2.921 0 0 1-.525 2.258c-.467.48-.98.913-1.531 1.295a8.111 8.111 0 0 1-3.22-8.873c1.313-4.76 9.074-9.826 11.568-11.401 1.364 2.59 5.442 10.938 4.13 15.706Z"></path></svg>';
 
 export class IconVegetarianLarge extends HTMLElement {
     constructor () {