@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/icons/IconFoodReady.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--foodReady"><path d="M13.941 12.935v-2.923a5.95 5.95 0 0 0-5.25-5.897 1.278 1.278 0 1 0-1.347 0 5.95 5.95 0 0 0-5.25 5.897v2.923h-.656v1.313h13.124v-1.313h-.62Zm-10.57-2.923a4.629 4.629 0 0 1 9.258 0v2.923H3.37v-2.923Z"></path><path d="M7.151 10.152 5.944 8.937 4.98 9.9l2.17 2.17L11.02 8.2l-.963-.953-2.905 2.904Z"></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--foodReady"><path d="M13.941 12.935v-2.923a5.95 5.95 0 0 0-5.25-5.897 1.278 1.278 0 1 0-1.347 0 5.95 5.95 0 0 0-5.25 5.897v2.923h-.656v1.313h13.124v-1.313h-.62Zm-10.57-2.923a4.629 4.629 0 0 1 9.258 0v2.923H3.37v-2.923Z"></path><path d="M7.151 10.152 5.944 8.937 4.98 9.9l2.17 2.17L11.02 8.2l-.963-.953-2.905 2.904Z"></path></svg>';
 
 export class IconFoodReady extends HTMLElement {
     constructor () {

package/icons/IconFoodReadyLarge.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--foodReadyLarge"><path d="m9.376 13.996 1.374 1.129A7 7 0 0 1 16 12.719v-1.75a8.75 8.75 0 0 0-6.624 3.027Z"></path><path d="M13.874 21.25c.06-.596.186-1.183.376-1.75H5.937a10.054 10.054 0 0 1 18.585-5.329 8.006 8.006 0 0 1 2.564 1.304 11.83 11.83 0 0 0-8.951-7.586c.316-.442.487-.97.49-1.514a2.625 2.625 0 0 0-5.25 0c.003.543.174 1.072.49 1.514A11.83 11.83 0 0 0 4.187 19.5H2.875v5.25H14.25a8.91 8.91 0 0 1-.385-1.75h-9.24v-1.75h9.249ZM16 5.5a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Z"></path><path d="m21.285 22.764-1.199-1.19-1.233 1.233 2.432 2.433 4.113-4.121-1.234-1.234-2.879 2.879Z"></path><path d="M28.25 19.675a6.877 6.877 0 0 0-1.794-2.511 6.6 6.6 0 0 0-1.846-1.12 6.459 6.459 0 0 0-2.485-.482 6.536 6.536 0 0 0-4.288 1.602 6.766 6.766 0 0 0-1.854 2.625 6.79 6.79 0 0 0-.394 1.75v.551a6.562 6.562 0 1 0 12.661-2.415Zm-6.125 7.262a4.821 4.821 0 0 1-4.813-4.812v-.551a4.77 4.77 0 0 1 .552-1.75c.186-.313.403-.606.647-.875a4.804 4.804 0 0 1 7.158 0c.244.27.46.563.647.875.296.542.483 1.136.552 1.75v.551a4.822 4.822 0 0 1-4.743 4.813Z"></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--foodReadyLarge"><path d="m9.376 13.996 1.374 1.129A7 7 0 0 1 16 12.719v-1.75a8.75 8.75 0 0 0-6.624 3.027Z"></path><path d="M13.874 21.25c.06-.596.186-1.183.376-1.75H5.937a10.054 10.054 0 0 1 18.585-5.329 8.006 8.006 0 0 1 2.564 1.304 11.83 11.83 0 0 0-8.951-7.586c.316-.442.487-.97.49-1.514a2.625 2.625 0 0 0-5.25 0c.003.543.174 1.072.49 1.514A11.83 11.83 0 0 0 4.187 19.5H2.875v5.25H14.25a8.91 8.91 0 0 1-.385-1.75h-9.24v-1.75h9.249ZM16 5.5a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Z"></path><path d="m21.285 22.764-1.199-1.19-1.233 1.233 2.432 2.433 4.113-4.121-1.234-1.234-2.879 2.879Z"></path><path d="M28.25 19.675a6.877 6.877 0 0 0-1.794-2.511 6.6 6.6 0 0 0-1.846-1.12 6.459 6.459 0 0 0-2.485-.482 6.536 6.536 0 0 0-4.288 1.602 6.766 6.766 0 0 0-1.854 2.625 6.79 6.79 0 0 0-.394 1.75v.551a6.562 6.562 0 1 0 12.661-2.415Zm-6.125 7.262a4.821 4.821 0 0 1-4.813-4.812v-.551a4.77 4.77 0 0 1 .552-1.75c.186-.313.403-.606.647-.875a4.804 4.804 0 0 1 7.158 0c.244.27.46.563.647.875.296.542.483 1.136.552 1.75v.551a4.822 4.822 0 0 1-4.743 4.813Z"></path></svg>';
 
 export class IconFoodReadyLarge extends HTMLElement {
     constructor () {

package/icons/IconFoundations.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--foundations"><g clip-path="url(#prefix__clip0_7066_3748)"><path d="M10.739 1.945H5.252v5.486h5.487V1.945ZM9.426 6.119H6.565V3.258h2.861v2.86Z"></path><path d="M1.875 14.169h5.486V8.683H1.875v5.486Zm1.313-4.174h2.86v2.861h-2.86V9.995Z"></path><path d="M8.621 8.674v5.486h5.486V8.674H8.622Zm4.174 4.174H9.934V9.986h2.861v2.861Z"></path></g><defs><clipPath id="prefix__clip0_7066_3748"><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--foundations"><g clip-path="url(#prefix__clip0_7066_3748)"><path d="M10.739 1.945H5.252v5.486h5.487V1.945ZM9.426 6.119H6.565V3.258h2.861v2.86Z"></path><path d="M1.875 14.169h5.486V8.683H1.875v5.486Zm1.313-4.174h2.86v2.861h-2.86V9.995Z"></path><path d="M8.621 8.674v5.486h5.486V8.674H8.622Zm4.174 4.174H9.934V9.986h2.861v2.861Z"></path></g><defs><clipPath id="prefix__clip0_7066_3748"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconFoundations extends HTMLElement {
     constructor () {

package/icons/IconFoundationsLarge.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--foundationsLarge"><path d="M4.625 27.375h10.509V16.866H4.625v10.509Zm1.75-8.759h7.009v7.009H6.375v-7.009Z"></path><path d="M16.866 16.892v10.51h10.509v-10.51H16.866Zm8.759 8.76h-7.009v-7.01h7.009v7.01Z"></path><path d="M10.75 4.625v10.509h10.509V4.625H10.75Zm1.75 8.759V6.375h7.009v7.009H12.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--foundationsLarge"><path d="M4.625 27.375h10.509V16.866H4.625v10.509Zm1.75-8.759h7.009v7.009H6.375v-7.009Z"></path><path d="M16.866 16.892v10.51h10.509v-10.51H16.866Zm8.759 8.76h-7.009v-7.01h7.009v7.01Z"></path><path d="M10.75 4.625v10.509h10.509V4.625H10.75Zm1.75 8.759V6.375h7.009v7.009H12.5Z"></path></svg>';
 
 export class IconFoundationsLarge extends HTMLElement {
     constructor () {

package/icons/IconFriedChicken.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--friedChicken"><g clip-path="url(#prefix__clip0_18_757)"><path d="M4.29 4.412a2.625 2.625 0 0 1-.438-1.277 1.444 1.444 0 0 1 .648-1.26c.062.367.183.722.359 1.05.148.245.332.438.577.875.13.231.218.483.263.744.043.299-.006.604-.14.875A1.75 1.75 0 0 1 4.5 6.25c0-.481.105-.875.07-1.155a1.549 1.549 0 0 0-.28-.683Zm2.905-.874v.936a1.391 1.391 0 0 0 .875-.709c.1-.216.14-.455.114-.691A2.004 2.004 0 0 0 8 2.487c-.21-.315-.341-.472-.473-.656A2.844 2.844 0 0 1 7.17 1a1.146 1.146 0 0 0-.552 1.015c.024.372.145.73.35 1.041.109.153.186.325.228.508v-.026Zm7.752 5.425a3.58 3.58 0 0 1-2.327 3.29c-.534.997-1.995 2.152-4.524 1.268-2.721-.936-3.272-.498-3.666.114-.394.613-.805 1.199-1.374 1.199a1.251 1.251 0 0 1-.639-.201 1.225 1.225 0 0 1-.542-1.287 1.4 1.4 0 0 0 0-.525 2.24 2.24 0 0 0-.411-.673 1.286 1.286 0 0 1-.289-1.523A1.067 1.067 0 0 1 2.75 10.1a1.513 1.513 0 0 0 1.321 0c.508-.201.875-.875 1.216-1.636.525-1.059 1.164-2.363 2.625-2.582a4.375 4.375 0 0 1 2.783-1.224 3.5 3.5 0 0 1 2.494 1.172 3.159 3.159 0 0 1 1.758 3.133Zm-1.312 0c0-1.567-.875-1.917-1.015-1.943l-.166-.061-.132-.131a2.24 2.24 0 0 0-1.636-.876 3.229 3.229 0 0 0-2.012.998l-.184.175h-.263c-.813.053-1.216.744-1.75 1.881a4.12 4.12 0 0 1-1.89 2.275 2.8 2.8 0 0 1-2.003.114c.216.265.393.56.525.875.098.245.146.507.14.77l.105-.166c1.032-1.601 2.817-1.374 5.171-.595 2.354.778 2.975-.726 2.975-.779l.114-.297.315-.097a2.337 2.337 0 0 0 1.706-2.143Z"></path></g><defs><clipPath id="prefix__clip0_18_757"><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--friedChicken"><g clip-path="url(#prefix__clip0_18_757)"><path d="M4.29 4.412a2.625 2.625 0 0 1-.438-1.277 1.444 1.444 0 0 1 .648-1.26c.062.367.183.722.359 1.05.148.245.332.438.577.875.13.231.218.483.263.744.043.299-.006.604-.14.875A1.75 1.75 0 0 1 4.5 6.25c0-.481.105-.875.07-1.155a1.549 1.549 0 0 0-.28-.683Zm2.905-.874v.936a1.391 1.391 0 0 0 .875-.709c.1-.216.14-.455.114-.691A2.004 2.004 0 0 0 8 2.487c-.21-.315-.341-.472-.473-.656A2.844 2.844 0 0 1 7.17 1a1.146 1.146 0 0 0-.552 1.015c.024.372.145.73.35 1.041.109.153.186.325.228.508v-.026Zm7.752 5.425a3.58 3.58 0 0 1-2.327 3.29c-.534.997-1.995 2.152-4.524 1.268-2.721-.936-3.272-.498-3.666.114-.394.613-.805 1.199-1.374 1.199a1.251 1.251 0 0 1-.639-.201 1.225 1.225 0 0 1-.542-1.287 1.4 1.4 0 0 0 0-.525 2.24 2.24 0 0 0-.411-.673 1.286 1.286 0 0 1-.289-1.523A1.067 1.067 0 0 1 2.75 10.1a1.513 1.513 0 0 0 1.321 0c.508-.201.875-.875 1.216-1.636.525-1.059 1.164-2.363 2.625-2.582a4.375 4.375 0 0 1 2.783-1.224 3.5 3.5 0 0 1 2.494 1.172 3.159 3.159 0 0 1 1.758 3.133Zm-1.312 0c0-1.567-.875-1.917-1.015-1.943l-.166-.061-.132-.131a2.24 2.24 0 0 0-1.636-.876 3.229 3.229 0 0 0-2.012.998l-.184.175h-.263c-.813.053-1.216.744-1.75 1.881a4.12 4.12 0 0 1-1.89 2.275 2.8 2.8 0 0 1-2.003.114c.216.265.393.56.525.875.098.245.146.507.14.77l.105-.166c1.032-1.601 2.817-1.374 5.171-.595 2.354.778 2.975-.726 2.975-.779l.114-.297.315-.097a2.337 2.337 0 0 0 1.706-2.143Z"></path></g><defs><clipPath id="prefix__clip0_18_757"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconFriedChicken extends HTMLElement {
     constructor () {

package/icons/IconFriedChickenLarge.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--friedChickenLarge"><path d="M9.998 6.183a1.995 1.995 0 0 1 .936-1.995 2.808 2.808 0 0 0 .385 1.592c.218.341.612.656 1.058 1.225.26.33.444.712.543 1.12a2.3 2.3 0 0 1 0 .735 2.004 2.004 0 0 1-.236.63 2.818 2.818 0 0 1-1.75 1.242c.203-.569.358-1.154.464-1.75v-.27c0-.08-.053-.123-.07-.193a3.204 3.204 0 0 0-.342-.49 4.295 4.295 0 0 1-.989-1.846Zm5.538.385a.88.88 0 0 1 .07.13V6.9c-.046.501-.128.998-.245 1.487a2.231 2.231 0 0 0 1.54-1.032 1.83 1.83 0 0 0 .21-1.19c-.077-.36-.229-.7-.446-.997-.376-.5-.674-.736-.875-.99a2.537 2.537 0 0 1-.394-1.303 1.698 1.698 0 0 0-.875 1.689c.108.6.37 1.16.761 1.627.094.12.179.245.254.377Zm13.589 10.7a6.58 6.58 0 0 1-4.436 6.126c-.648 1.146-2.975 4.261-8.365 2.406-5.04-1.75-6.607-1.181-7.604.376-.884 1.339-1.47 2.127-2.345 2.127a1.995 1.995 0 0 1-1.032-.342l-.097-.061a2.012 2.012 0 0 1-.744-2.074c.057-.401.027-.81-.087-1.198a4.908 4.908 0 0 0-.875-1.4 2.144 2.144 0 0 1-.473-2.494c.692-1.593 1.925-1.103 2.52-.875a3.289 3.289 0 0 0 2.87 0c1.12-.455 1.83-1.882 2.573-3.387 1.041-2.1 2.214-4.47 4.926-4.82a8.138 8.138 0 0 1 5.25-2.346 6.335 6.335 0 0 1 4.629 2.214c.857.332 3.29 1.689 3.29 5.749Zm-1.75 0c0-3.42-2.161-4.138-2.249-4.164l-.227-.07-.149-.184a4.743 4.743 0 0 0-3.5-1.794 5.32 5.32 0 0 0-2.73.875 7 7 0 0 1 1.418.569l-.875 1.523a5.25 5.25 0 0 0-2.625-.674c-1.75.122-2.625 1.549-3.79 3.876-.874 1.75-1.75 3.5-3.5 4.226a5.021 5.021 0 0 1-4.173 0l-.254-.096v.044c-.114.262-.114.262.228.691a6.897 6.897 0 0 1 1.128 1.846c.219.63.29 1.3.21 1.96v.525c.351-.38.673-.787.963-1.216 1.934-3.01 5.127-2.625 9.625-1.094 4.935 1.706 6.309-1.645 6.37-1.75a2.564 2.564 0 0 0 .052-2.003l1.575-.858c.23.51.352 1.06.36 1.619a4.498 4.498 0 0 0 2.143-3.85Z"></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--friedChickenLarge"><path d="M9.998 6.183a1.995 1.995 0 0 1 .936-1.995 2.808 2.808 0 0 0 .385 1.592c.218.341.612.656 1.058 1.225.26.33.444.712.543 1.12a2.3 2.3 0 0 1 0 .735 2.004 2.004 0 0 1-.236.63 2.818 2.818 0 0 1-1.75 1.242c.203-.569.358-1.154.464-1.75v-.27c0-.08-.053-.123-.07-.193a3.204 3.204 0 0 0-.342-.49 4.295 4.295 0 0 1-.989-1.846Zm5.538.385a.88.88 0 0 1 .07.13V6.9c-.046.501-.128.998-.245 1.487a2.231 2.231 0 0 0 1.54-1.032 1.83 1.83 0 0 0 .21-1.19c-.077-.36-.229-.7-.446-.997-.376-.5-.674-.736-.875-.99a2.537 2.537 0 0 1-.394-1.303 1.698 1.698 0 0 0-.875 1.689c.108.6.37 1.16.761 1.627.094.12.179.245.254.377Zm13.589 10.7a6.58 6.58 0 0 1-4.436 6.126c-.648 1.146-2.975 4.261-8.365 2.406-5.04-1.75-6.607-1.181-7.604.376-.884 1.339-1.47 2.127-2.345 2.127a1.995 1.995 0 0 1-1.032-.342l-.097-.061a2.012 2.012 0 0 1-.744-2.074c.057-.401.027-.81-.087-1.198a4.908 4.908 0 0 0-.875-1.4 2.144 2.144 0 0 1-.473-2.494c.692-1.593 1.925-1.103 2.52-.875a3.289 3.289 0 0 0 2.87 0c1.12-.455 1.83-1.882 2.573-3.387 1.041-2.1 2.214-4.47 4.926-4.82a8.138 8.138 0 0 1 5.25-2.346 6.335 6.335 0 0 1 4.629 2.214c.857.332 3.29 1.689 3.29 5.749Zm-1.75 0c0-3.42-2.161-4.138-2.249-4.164l-.227-.07-.149-.184a4.743 4.743 0 0 0-3.5-1.794 5.32 5.32 0 0 0-2.73.875 7 7 0 0 1 1.418.569l-.875 1.523a5.25 5.25 0 0 0-2.625-.674c-1.75.122-2.625 1.549-3.79 3.876-.874 1.75-1.75 3.5-3.5 4.226a5.021 5.021 0 0 1-4.173 0l-.254-.096v.044c-.114.262-.114.262.228.691a6.897 6.897 0 0 1 1.128 1.846c.219.63.29 1.3.21 1.96v.525c.351-.38.673-.787.963-1.216 1.934-3.01 5.127-2.625 9.625-1.094 4.935 1.706 6.309-1.645 6.37-1.75a2.564 2.564 0 0 0 .052-2.003l1.575-.858c.23.51.352 1.06.36 1.619a4.498 4.498 0 0 0 2.143-3.85Z"></path></svg>';
 
 export class IconFriedChickenLarge extends HTMLElement {
     constructor () {

package/icons/IconFries.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--fries"><path d="M12.769 5.725a.639.639 0 0 0-.648-.079l.674-2.152L11.5 3.1l-.875 3.036c-.297.07-.586.131-.875.175l.543-5.031-1.313-.149-.604 5.311H7.72L7.195 1.5l-1.313.14.508 4.69c-.306 0-.621-.105-.875-.175L4.5 2.619l-1.269.341.727 2.721h-.106a.647.647 0 0 0-.874.683l.778 6.238a1.531 1.531 0 0 0 1.514 1.34h5.46a1.531 1.531 0 0 0 1.514-1.34l.779-6.238a.63.63 0 0 0-.254-.639Zm-1.82 6.65a.227.227 0 0 1-.219.193H5.27a.227.227 0 0 1-.219-.193L4.412 7.23c2.336.735 4.84.735 7.176 0l-.64 5.145Z"></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--fries"><path d="M12.769 5.725a.639.639 0 0 0-.648-.079l.674-2.152L11.5 3.1l-.875 3.036c-.297.07-.586.131-.875.175l.543-5.031-1.313-.149-.604 5.311H7.72L7.195 1.5l-1.313.14.508 4.69c-.306 0-.621-.105-.875-.175L4.5 2.619l-1.269.341.727 2.721h-.106a.647.647 0 0 0-.874.683l.778 6.238a1.531 1.531 0 0 0 1.514 1.34h5.46a1.531 1.531 0 0 0 1.514-1.34l.779-6.238a.63.63 0 0 0-.254-.639Zm-1.82 6.65a.227.227 0 0 1-.219.193H5.27a.227.227 0 0 1-.219-.193L4.412 7.23c2.336.735 4.84.735 7.176 0l-.64 5.145Z"></path></svg>';
 
 export class IconFries extends HTMLElement {
     constructor () {

package/icons/IconFriesLarge.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--friesLarge"><path d="M25.826 12.8a.876.876 0 0 0-.875-.105l-.709.271.937-3.141a.874.874 0 0 0-.309-.96.876.876 0 0 0-.313-.151l-3.5-.875.324-2.993a.875.875 0 0 0-.131-.63.876.876 0 0 0-.613-.341l-3.56-.306a.875.875 0 0 0-.946.779l-.07.62a.875.875 0 0 0-.875-.612l-3.561.307a.875.875 0 0 0-.796.953l.131 1.278-3.194.674a.875.875 0 0 0-.691 1.076l1.146 4.497c-.402-.14-.796-.289-1.181-.446a.875.875 0 0 0-1.216.91l1.662 13.247a2.748 2.748 0 0 0 2.721 2.398h11.585a2.748 2.748 0 0 0 2.722-2.398l1.654-13.247a.875.875 0 0 0-.342-.805Zm-4.375-3.045 1.75.446-1.006 3.421c-.595.167-1.199.316-1.803.43l.123-1.165.936-3.132ZM17.75 5.398l1.82.157-.945 8.767c-.613.07-1.234.114-1.855.132l.98-9.056Zm-3.316.778.709 7-.14 1.278c-.342 0-.683 0-1.015-.07l-.902-3.632-.446-4.374 1.794-.202ZM9 9.125l1.75-.376.56 2.205v.166l.779 3.063a22.517 22.517 0 0 1-1.969-.412L9 9.125Zm13.773 17.5a.98.98 0 0 1-.98.875H10.207a.98.98 0 0 1-.98-.875l-1.48-11.786a25.165 25.165 0 0 0 16.503 0l-1.479 11.786Z"></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--friesLarge"><path d="M25.826 12.8a.876.876 0 0 0-.875-.105l-.709.271.937-3.141a.874.874 0 0 0-.309-.96.876.876 0 0 0-.313-.151l-3.5-.875.324-2.993a.875.875 0 0 0-.131-.63.876.876 0 0 0-.613-.341l-3.56-.306a.875.875 0 0 0-.946.779l-.07.62a.875.875 0 0 0-.875-.612l-3.561.307a.875.875 0 0 0-.796.953l.131 1.278-3.194.674a.875.875 0 0 0-.691 1.076l1.146 4.497c-.402-.14-.796-.289-1.181-.446a.875.875 0 0 0-1.216.91l1.662 13.247a2.748 2.748 0 0 0 2.721 2.398h11.585a2.748 2.748 0 0 0 2.722-2.398l1.654-13.247a.875.875 0 0 0-.342-.805Zm-4.375-3.045 1.75.446-1.006 3.421c-.595.167-1.199.316-1.803.43l.123-1.165.936-3.132ZM17.75 5.398l1.82.157-.945 8.767c-.613.07-1.234.114-1.855.132l.98-9.056Zm-3.316.778.709 7-.14 1.278c-.342 0-.683 0-1.015-.07l-.902-3.632-.446-4.374 1.794-.202ZM9 9.125l1.75-.376.56 2.205v.166l.779 3.063a22.517 22.517 0 0 1-1.969-.412L9 9.125Zm13.773 17.5a.98.98 0 0 1-.98.875H10.207a.98.98 0 0 1-.98-.875l-1.48-11.786a25.165 25.165 0 0 0 16.503 0l-1.479 11.786Z"></path></svg>';
 
 export class IconFriesLarge extends HTMLElement {
     constructor () {

package/icons/IconFullscreenExit.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--fullscreenExit"><path d="M6.031 1.123 4.72 1.86V4.72H1.766L1.109 6.03h4.922V1.123Z"></path><path d="m9.969 1.11 1.312.656v2.953h2.859l.737 1.312H9.97V1.11Z"></path><path d="m14.89 9.969-.656 1.312h-2.953v2.859l-1.312.737V9.97h4.922Z"></path><path d="m1.123 9.969.737 1.312H4.72v2.953l1.312.657V9.969H1.123Z"></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--fullscreenExit"><path d="M6.031 1.123 4.72 1.86V4.72H1.766L1.109 6.03h4.922V1.123Z"></path><path d="m9.969 1.11 1.312.656v2.953h2.859l.737 1.312H9.97V1.11Z"></path><path d="m14.89 9.969-.656 1.312h-2.953v2.859l-1.312.737V9.97h4.922Z"></path><path d="m1.123 9.969.737 1.312H4.72v2.953l1.312.657V9.969H1.123Z"></path></svg>';
 
 export class IconFullscreenExit extends HTMLElement {
     constructor () {

package/icons/IconFullscreenExitLarge.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--fullscreenExitLarge"><path d="m21.25 4.188-1.75-.875V12.5h9.132l-.986-1.75H21.25V4.187Z"></path><path d="m4.354 21.25-.986-1.75H12.5v9.188l-1.75-.875V21.25H4.354Z"></path><path d="m28.688 19.5-.875 1.75H21.25v6.396l-1.75.986V19.5h9.188Z"></path><path d="m10.75 4.354 1.75-.986V12.5H3.312l.876-1.75h6.562V4.354Z"></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--fullscreenExitLarge"><path d="m21.25 4.188-1.75-.875V12.5h9.132l-.986-1.75H21.25V4.187Z"></path><path d="m4.354 21.25-.986-1.75H12.5v9.188l-1.75-.875V21.25H4.354Z"></path><path d="m28.688 19.5-.875 1.75H21.25v6.396l-1.75.986V19.5h9.188Z"></path><path d="m10.75 4.354 1.75-.986V12.5H3.312l.876-1.75h6.562V4.354Z"></path></svg>';
 
 export class IconFullscreenExitLarge extends HTMLElement {
     constructor () {

package/icons/IconFullscreenExpand.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--fullscreenExpand"><path d="m5.99 3.406.737-1.312H2.094v4.633l1.312-.738V3.406H5.99Z"></path><path d="M10.01 3.406h2.584V5.99l1.312.738V2.094H9.273l.738 1.312Z"></path><path d="M12.594 10.01v2.584H10.01l-.738 1.312h4.633V9.273l-1.312.738Z"></path><path d="m3.406 10.01-1.312-.737v4.633h4.633l-.738-1.312H3.406V10.01Z"></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--fullscreenExpand"><path d="m5.99 3.406.737-1.312H2.094v4.633l1.312-.738V3.406H5.99Z"></path><path d="M10.01 3.406h2.584V5.99l1.312.738V2.094H9.273l.738 1.312Z"></path><path d="M12.594 10.01v2.584H10.01l-.738 1.312h4.633V9.273l-1.312.738Z"></path><path d="m3.406 10.01-1.312-.737v4.633h4.633l-.738-1.312H3.406V10.01Z"></path></svg>';
 
 export class IconFullscreenExpand extends HTMLElement {
     constructor () {

package/icons/IconFullscreenExpandLarge.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--fullscreenExpandLarge"><path d="M5.5 5.375h8.583l-.983 1.75H7.25v5.85l-1.75.983V5.375Z"></path><path d="M18.9 7.125h5.85v5.848l1.75.981V5.375h-8.583l.983 1.75Z"></path><path d="M26.5 26.375h-8.58l.982-1.75h5.848v-5.848l1.75-.982v8.58Z"></path><path d="M5.5 26.375v-8.583l1.75.983v5.85h5.848l.981 1.75H5.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--fullscreenExpandLarge"><path d="M5.5 5.375h8.583l-.983 1.75H7.25v5.85l-1.75.983V5.375Z"></path><path d="M18.9 7.125h5.85v5.848l1.75.981V5.375h-8.583l.983 1.75Z"></path><path d="M26.5 26.375h-8.58l.982-1.75h5.848v-5.848l1.75-.982v8.58Z"></path><path d="M5.5 26.375v-8.583l1.75.983v5.85h5.848l.981 1.75H5.5Z"></path></svg>';
 
 export class IconFullscreenExpandLarge extends HTMLElement {
     constructor () {

package/icons/IconGeolocation.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--geolocation"><path d="M9.452 14.466H8.044l-.534-2.091A5.25 5.25 0 0 0 3.669 8.49L1.534 8V6.547l11.882-3.963-3.964 11.882ZM3.81 7.17h.175a6.598 6.598 0 0 1 4.803 4.847v.175l2.503-7.525L3.809 7.17Z"></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--geolocation"><path d="M9.452 14.466H8.044l-.534-2.091A5.25 5.25 0 0 0 3.669 8.49L1.534 8V6.547l11.882-3.963-3.964 11.882ZM3.81 7.17h.175a6.598 6.598 0 0 1 4.803 4.847v.175l2.503-7.525L3.809 7.17Z"></path></svg>';
 
 export class IconGeolocation extends HTMLElement {
     constructor () {

package/icons/IconGeolocationCircle.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--geolocationCircle"><path d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42Zm0 11.83a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 0 1 0 10.5Z"></path><path d="m4.351 8.28 1.33.332a2.345 2.345 0 0 1 1.75 1.75l.333 1.33h1.172l2.293-6.877L4.35 7.064V8.28Zm4.769-1.4-.761 2.284A3.649 3.649 0 0 0 6.836 7.64L9.12 6.88Z"></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--geolocationCircle"><path d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42Zm0 11.83a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 0 1 0 10.5Z"></path><path d="m4.351 8.28 1.33.332a2.345 2.345 0 0 1 1.75 1.75l.333 1.33h1.172l2.293-6.877L4.35 7.064V8.28Zm4.769-1.4-.761 2.284A3.649 3.649 0 0 0 6.836 7.64L9.12 6.88Z"></path></svg>';
 
 export class IconGeolocationCircle extends HTMLElement {
     constructor () {

package/icons/IconGeolocationCircleFilled.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--geolocationCircleFilled"><path d="M8.359 9.164 9.12 6.88l-2.284.761c.65.343 1.18.874 1.523 1.523Z"></path><path fill-rule="evenodd" d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42ZM5.68 8.613l-1.33-.333V7.064l6.878-2.249-2.293 6.878H7.764l-.333-1.33a2.345 2.345 0 0 0-1.75-1.75Z" 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--geolocationCircleFilled"><path d="M8.359 9.164 9.12 6.88l-2.284.761c.65.343 1.18.874 1.523 1.523Z"></path><path fill-rule="evenodd" d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42ZM5.68 8.613l-1.33-.333V7.064l6.878-2.249-2.293 6.878H7.764l-.333-1.33a2.345 2.345 0 0 0-1.75-1.75Z" clip-rule="evenodd"></path></svg>';
 
 export class IconGeolocationCircleFilled extends HTMLElement {
     constructor () {

package/icons/IconGeolocationCircleFilledLarge.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--geolocationCircleFilledLarge"><path d="m16.718 19.185 1.96-5.862-5.863 1.96a6.431 6.431 0 0 1 3.903 3.902Z"></path><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm1.479 18.69h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Z"></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--geolocationCircleFilledLarge"><path d="m16.718 19.185 1.96-5.862-5.863 1.96a6.431 6.431 0 0 1 3.903 3.902Z"></path><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm1.479 18.69h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Z"></path></svg>';
 
 export class IconGeolocationCircleFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconGeolocationCircleLarge.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--geolocationCircleLarge"><path d="M17.479 22.44h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Zm-4.664-7.158a6.432 6.432 0 0 1 3.903 3.903l1.96-5.862-5.863 1.96ZM16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></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--geolocationCircleLarge"><path d="M17.479 22.44h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Zm-4.664-7.158a6.432 6.432 0 0 1 3.903 3.903l1.96-5.862-5.863 1.96ZM16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path></svg>';
 
 export class IconGeolocationCircleLarge extends HTMLElement {
     constructor () {

package/icons/IconGeolocationFilled.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--geolocationFilled"><path d="M1.535 6.548V8l2.135.534a5.25 5.25 0 0 1 3.84 3.841l.535 2.135h1.408l3.964-11.926L1.535 6.548Z"></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--geolocationFilled"><path d="M1.535 6.548V8l2.135.534a5.25 5.25 0 0 1 3.84 3.841l.535 2.135h1.408l3.964-11.926L1.535 6.548Z"></path></svg>';
 
 export class IconGeolocationFilled extends HTMLElement {
     constructor () {

package/icons/IconGeolocationFilledLarge.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--geolocationFilledLarge"><path d="M6.156 12.973v2.047l3.404.875a9.012 9.012 0 0 1 6.571 6.571l.875 3.404h2.048l6.405-19.329-19.303 6.431Z"></path><path d="M19.027 25.844H16.98l-.875-3.404a9.012 9.012 0 0 0-6.571-6.571l-3.404-.875v-2.021L25.459 6.54l-6.432 19.303Z"></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--geolocationFilledLarge"><path d="M6.156 12.973v2.047l3.404.875a9.012 9.012 0 0 1 6.571 6.571l.875 3.404h2.048l6.405-19.329-19.303 6.431Z"></path><path d="M19.027 25.844H16.98l-.875-3.404a9.012 9.012 0 0 0-6.571-6.571l-3.404-.875v-2.021L25.459 6.54l-6.432 19.303Z"></path></svg>';
 
 export class IconGeolocationFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconGeolocationLarge.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--geolocationLarge"><path d="M6.156 12.973v2.047l3.404.875a9.012 9.012 0 0 1 6.571 6.571l.875 3.404h2.048l6.405-19.329-19.303 6.431Zm12.023 9.773-.639-1.75a10.763 10.763 0 0 0-6.51-6.501l-1.75-.639L22.65 9.35l-4.471 13.396Z"></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--geolocationLarge"><path d="M6.156 12.973v2.047l3.404.875a9.012 9.012 0 0 1 6.571 6.571l.875 3.404h2.048l6.405-19.329-19.303 6.431Zm12.023 9.773-.639-1.75a10.763 10.763 0 0 0-6.51-6.501l-1.75-.639L22.65 9.35l-4.471 13.396Z"></path></svg>';
 
 export class IconGeolocationLarge extends HTMLElement {
     constructor () {

package/icons/IconGift.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--gift"><path d="M10.329 3.333c.112-.013.226-.013.338 0V2.071a2.18 2.18 0 0 0-.338 0A2.969 2.969 0 0 0 8 3.138 2.969 2.969 0 0 0 5.671 2a2.071 2.071 0 0 0-.338.071v1.333c.113-.013.226-.013.338 0A1.68 1.68 0 0 1 7.333 4.96H2v4h.889v3.778a1.6 1.6 0 0 0 1.555 1.555h7.112a1.6 1.6 0 0 0 1.555-1.555V8.96H14v-4H8.667a1.671 1.671 0 0 1 1.662-1.627ZM7.333 12.96H4.444a.258.258 0 0 1-.222-.222V8.96h3.111v4Zm0-5.333h-4V6.293h4v1.334Zm4.445 5.075a.258.258 0 0 1-.258.258H8.667v-4h3.11v3.742Zm.889-6.409v1.334h-4V6.293h4Z"></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--gift"><path d="M10.329 3.333c.112-.013.226-.013.338 0V2.071a2.18 2.18 0 0 0-.338 0A2.969 2.969 0 0 0 8 3.138 2.969 2.969 0 0 0 5.671 2a2.071 2.071 0 0 0-.338.071v1.333c.113-.013.226-.013.338 0A1.68 1.68 0 0 1 7.333 4.96H2v4h.889v3.778a1.6 1.6 0 0 0 1.555 1.555h7.112a1.6 1.6 0 0 0 1.555-1.555V8.96H14v-4H8.667a1.671 1.671 0 0 1 1.662-1.627ZM7.333 12.96H4.444a.258.258 0 0 1-.222-.222V8.96h3.111v4Zm0-5.333h-4V6.293h4v1.334Zm4.445 5.075a.258.258 0 0 1-.258.258H8.667v-4h3.11v3.742Zm.889-6.409v1.334h-4V6.293h4Z"></path></svg>';
 
 export class IconGift extends HTMLElement {
     constructor () {

package/icons/IconGiftCard.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--giftCard"><path d="M12.646 2.969H3.354L1.219 5.104v5.792l2.135 2.135h9.292l2.135-2.135V5.104l-2.135-2.135Zm.823 7.385-1.365 1.365H3.896l-1.365-1.365V5.646l1.365-1.365h8.208l1.365 1.365v4.708Zm-2.844-3.798L9.242 6.25l-.665-1.225a.691.691 0 0 0-1.154 0L6.758 6.25l-1.383.306a.648.648 0 0 0-.499.455.656.656 0 0 0 .167.657l.953.97-.201 1.427a.665.665 0 0 0 .954.674L8 10.1l1.251.639a.63.63 0 0 0 .306.07.604.604 0 0 0 .377-.123.639.639 0 0 0 .271-.621l-.201-1.426.971-.971a.657.657 0 0 0-.35-1.112Zm-1.75 1.391a.639.639 0 0 0-.184.552l.07.498-.437-.218a.665.665 0 0 0-.595 0l-.438.219.07-.5a.639.639 0 0 0-.236-.55l-.332-.342.498-.096a.639.639 0 0 0 .446-.332L8 6.748l.236.43a.639.639 0 0 0 .446.332l.5.096-.307.341Z"></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--giftCard"><path d="M12.646 2.969H3.354L1.219 5.104v5.792l2.135 2.135h9.292l2.135-2.135V5.104l-2.135-2.135Zm.823 7.385-1.365 1.365H3.896l-1.365-1.365V5.646l1.365-1.365h8.208l1.365 1.365v4.708Zm-2.844-3.798L9.242 6.25l-.665-1.225a.691.691 0 0 0-1.154 0L6.758 6.25l-1.383.306a.648.648 0 0 0-.499.455.656.656 0 0 0 .167.657l.953.97-.201 1.427a.665.665 0 0 0 .954.674L8 10.1l1.251.639a.63.63 0 0 0 .306.07.604.604 0 0 0 .377-.123.639.639 0 0 0 .271-.621l-.201-1.426.971-.971a.657.657 0 0 0-.35-1.112Zm-1.75 1.391a.639.639 0 0 0-.184.552l.07.498-.437-.218a.665.665 0 0 0-.595 0l-.438.219.07-.5a.639.639 0 0 0-.236-.55l-.332-.342.498-.096a.639.639 0 0 0 .446-.332L8 6.748l.236.43a.639.639 0 0 0 .446.332l.5.096-.307.341Z"></path></svg>';
 
 export class IconGiftCard extends HTMLElement {
     constructor () {

package/icons/IconGiftCardLarge.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--giftCardLarge"><path d="M29.125 11.266v12.968l-3.141 3.141H6.016l-3.141-3.141V11.266l3.141-3.141H9v1.75H6.734l-2.109 2.109v11.532l2.109 2.109h18.532l2.109-2.109V11.984l-2.109-2.109H23v-1.75h2.984l3.141 3.141Zm-19.25 4.961a.875.875 0 0 1 .455-1.478l3.307-.648 1.575-2.896a.875.875 0 0 1 1.54 0l1.576 2.896 3.307.648a.876.876 0 0 1 .49 1.478l-2.319 2.328.473 3.386a.875.875 0 0 1-.368.832.875.875 0 0 1-.498.166.876.876 0 0 1-.403-.096L16 21.31l-2.992 1.532a.875.875 0 0 1-1.27-.875l.473-3.387-2.336-2.354Zm2.389-.07 1.47 1.47a.874.874 0 0 1 .245.744l-.289 2.153 1.899-.972a.876.876 0 0 1 .787 0l1.899.972-.289-2.153a.876.876 0 0 1 .245-.743l1.47-1.47-2.117-.42a.875.875 0 0 1-.595-.438L16 13.454 14.994 15.3a.875.875 0 0 1-.595.438l-2.135.42ZM16.875 3.75h-1.75V9h1.75V3.75Zm4.305 2.625-1.68-.481-1.015 3.342 1.671.516 1.024-3.377ZM13.672 9.21l-.97-3.369-1.68.534.97 3.36 1.68-.525Z"></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--giftCardLarge"><path d="M29.125 11.266v12.968l-3.141 3.141H6.016l-3.141-3.141V11.266l3.141-3.141H9v1.75H6.734l-2.109 2.109v11.532l2.109 2.109h18.532l2.109-2.109V11.984l-2.109-2.109H23v-1.75h2.984l3.141 3.141Zm-19.25 4.961a.875.875 0 0 1 .455-1.478l3.307-.648 1.575-2.896a.875.875 0 0 1 1.54 0l1.576 2.896 3.307.648a.876.876 0 0 1 .49 1.478l-2.319 2.328.473 3.386a.875.875 0 0 1-.368.832.875.875 0 0 1-.498.166.876.876 0 0 1-.403-.096L16 21.31l-2.992 1.532a.875.875 0 0 1-1.27-.875l.473-3.387-2.336-2.354Zm2.389-.07 1.47 1.47a.874.874 0 0 1 .245.744l-.289 2.153 1.899-.972a.876.876 0 0 1 .787 0l1.899.972-.289-2.153a.876.876 0 0 1 .245-.743l1.47-1.47-2.117-.42a.875.875 0 0 1-.595-.438L16 13.454 14.994 15.3a.875.875 0 0 1-.595.438l-2.135.42ZM16.875 3.75h-1.75V9h1.75V3.75Zm4.305 2.625-1.68-.481-1.015 3.342 1.671.516 1.024-3.377ZM13.672 9.21l-.97-3.369-1.68.534.97 3.36 1.68-.525Z"></path></svg>';
 
 export class IconGiftCardLarge extends HTMLElement {
     constructor () {

package/icons/IconGiftFilled.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--giftFilled"><path d="M7.333 4.966h1.334V7.63H14V4.966H8.667a1.663 1.663 0 0 1 2-1.59v-1.34c-.116-.01-.223-.036-.338-.036C9.378 2 8.542 2.453 8 3.137A2.995 2.995 0 0 0 5.671 2c-.115 0-.222.018-.338.036v1.332c.107-.018.223-.036.338-.036.907 0 1.645.728 1.662 1.625H2v2.664h5.333V4.957v.009Z"></path><path d="M8.667 14.29h2.853c.88 0 1.591-.72 1.591-1.59V8.963H8.667v5.328Z"></path><path d="M2.889 8.962v3.739c0 .879.711 1.589 1.591 1.589h2.853V8.962H2.89Z"></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--giftFilled"><path d="M7.333 4.966h1.334V7.63H14V4.966H8.667a1.663 1.663 0 0 1 2-1.59v-1.34c-.116-.01-.223-.036-.338-.036C9.378 2 8.542 2.453 8 3.137A2.995 2.995 0 0 0 5.671 2c-.115 0-.222.018-.338.036v1.332c.107-.018.223-.036.338-.036.907 0 1.645.728 1.662 1.625H2v2.664h5.333V4.957v.009Z"></path><path d="M8.667 14.29h2.853c.88 0 1.591-.72 1.591-1.59V8.963H8.667v5.328Z"></path><path d="M2.889 8.962v3.739c0 .879.711 1.589 1.591 1.589h2.853V8.962H2.89Z"></path></svg>';
 
 export class IconGiftFilled extends HTMLElement {
     constructor () {

package/icons/IconGiftFilledLarge.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--giftFilledLarge"><path d="M16.831 28.215h7.044A2.633 2.633 0 0 0 26.5 25.59V14.215h-9.669v14Z"></path><path d="M5.5 25.59a2.633 2.633 0 0 0 2.625 2.625h6.956v-14H5.5V25.59Z"></path><path d="M16.849 8.09v-.017a3.064 3.064 0 0 1 3.01-2.538c.175 0 .35.026.525.053v-1.75c-.175-.018-.341-.053-.525-.053a4.801 4.801 0 0 0-3.894 1.995 4.801 4.801 0 0 0-3.894-1.995c-.149 0-.288.026-.437.044v1.75c.149-.018.288-.044.437-.044a3.063 3.063 0 0 1 3.01 2.538v.017H3.75v4.375h11.331V8.081h1.75v4.375H28.25V8.09H16.849Z"></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--giftFilledLarge"><path d="M16.831 28.215h7.044A2.633 2.633 0 0 0 26.5 25.59V14.215h-9.669v14Z"></path><path d="M5.5 25.59a2.633 2.633 0 0 0 2.625 2.625h6.956v-14H5.5V25.59Z"></path><path d="M16.849 8.09v-.017a3.064 3.064 0 0 1 3.01-2.538c.175 0 .35.026.525.053v-1.75c-.175-.018-.341-.053-.525-.053a4.801 4.801 0 0 0-3.894 1.995 4.801 4.801 0 0 0-3.894-1.995c-.149 0-.288.026-.437.044v1.75c.149-.018.288-.044.437-.044a3.063 3.063 0 0 1 3.01 2.538v.017H3.75v4.375h11.331V8.081h1.75v4.375H28.25V8.09H16.849Z"></path></svg>';
 
 export class IconGiftFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconGiftLarge.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--giftLarge"><path d="M16.875 8.125a3.045 3.045 0 0 1 2.975-2.546c.176 0 .352.017.525.052v-1.75a3.439 3.439 0 0 0-.525-.052A4.804 4.804 0 0 0 16 5.824a4.803 4.803 0 0 0-3.938-1.995 3.7 3.7 0 0 0-.437.044v1.75c.146-.013.292-.013.438 0a3.062 3.062 0 0 1 3.01 2.502H3.75v6.125H5.5v11.375a2.625 2.625 0 0 0 2.625 2.625h15.75a2.625 2.625 0 0 0 2.625-2.625V14.25h1.75V8.125H16.875ZM15.125 26.5h-7a.875.875 0 0 1-.875-.875V14.25h7.875V26.5Zm0-14H5.5V9.875h9.625V12.5Zm9.625 13.125a.875.875 0 0 1-.875.875h-7V14.25h7.875v11.375ZM26.5 12.5h-9.625V9.875H26.5V12.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--giftLarge"><path d="M16.875 8.125a3.045 3.045 0 0 1 2.975-2.546c.176 0 .352.017.525.052v-1.75a3.439 3.439 0 0 0-.525-.052A4.804 4.804 0 0 0 16 5.824a4.803 4.803 0 0 0-3.938-1.995 3.7 3.7 0 0 0-.437.044v1.75c.146-.013.292-.013.438 0a3.062 3.062 0 0 1 3.01 2.502H3.75v6.125H5.5v11.375a2.625 2.625 0 0 0 2.625 2.625h15.75a2.625 2.625 0 0 0 2.625-2.625V14.25h1.75V8.125H16.875ZM15.125 26.5h-7a.875.875 0 0 1-.875-.875V14.25h7.875V26.5Zm0-14H5.5V9.875h9.625V12.5Zm9.625 13.125a.875.875 0 0 1-.875.875h-7V14.25h7.875v11.375ZM26.5 12.5h-9.625V9.875H26.5V12.5Z"></path></svg>';
 
 export class IconGiftLarge extends HTMLElement {
     constructor () {

package/icons/IconGluten.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--gluten"><path d="M11.933 7.377c-.244.113-.697.314-1.193.566.087-.27.14-.548.14-.845 0-1.341-1.935-4.504-2.318-5.122l-.558-.889-.557.889c-.392.618-2.318 3.78-2.318 5.122 0 .297.061.584.14.854a23.42 23.42 0 0 0-1.202-.575l-.95-.427.035 1.046c.026.81.148 3.537.74 4.417a2.398 2.398 0 0 0 3.32.662c.052-.035.087-.079.139-.114v1.847h1.307V12.97s.07.07.113.096a2.378 2.378 0 0 0 1.795.366 2.366 2.366 0 0 0 1.524-1.01c.593-.88.74-3.599.767-4.418l.035-1.045-.959.427v-.009Zm-5.453 4.6c-.497.331-1.168.2-1.507-.296-.2-.305-.375-1.455-.462-2.649 1.063.54 2.065 1.142 2.265 1.447a1.09 1.09 0 0 1-.296 1.507v-.009Zm-.053-4.879c0-.575.802-2.169 1.569-3.51.766 1.341 1.568 2.935 1.568 3.51 0 .863-.706 1.568-1.568 1.568a1.573 1.573 0 0 1-1.569-1.568Zm4.574 4.583c-.165.244-.41.4-.688.462a1.06 1.06 0 0 1-.81-.166 1.09 1.09 0 0 1-.296-1.507c.2-.305 1.21-.897 2.273-1.429-.096 1.194-.278 2.344-.479 2.649v-.01Z"></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--gluten"><path d="M11.933 7.377c-.244.113-.697.314-1.193.566.087-.27.14-.548.14-.845 0-1.341-1.935-4.504-2.318-5.122l-.558-.889-.557.889c-.392.618-2.318 3.78-2.318 5.122 0 .297.061.584.14.854a23.42 23.42 0 0 0-1.202-.575l-.95-.427.035 1.046c.026.81.148 3.537.74 4.417a2.398 2.398 0 0 0 3.32.662c.052-.035.087-.079.139-.114v1.847h1.307V12.97s.07.07.113.096a2.378 2.378 0 0 0 1.795.366 2.366 2.366 0 0 0 1.524-1.01c.593-.88.74-3.599.767-4.418l.035-1.045-.959.427v-.009Zm-5.453 4.6c-.497.331-1.168.2-1.507-.296-.2-.305-.375-1.455-.462-2.649 1.063.54 2.065 1.142 2.265 1.447a1.09 1.09 0 0 1-.296 1.507v-.009Zm-.053-4.879c0-.575.802-2.169 1.569-3.51.766 1.341 1.568 2.935 1.568 3.51 0 .863-.706 1.568-1.568 1.568a1.573 1.573 0 0 1-1.569-1.568Zm4.574 4.583c-.165.244-.41.4-.688.462a1.06 1.06 0 0 1-.81-.166 1.09 1.09 0 0 1-.296-1.507c.2-.305 1.21-.897 2.273-1.429-.096 1.194-.278 2.344-.479 2.649v-.01Z"></path></svg>';
 
 export class IconGluten extends HTMLElement {
     constructor () {

package/icons/IconGlutenLarge.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--glutenLarge"><path d="M23.464 18.288a43.4 43.4 0 0 0-1.36.043c.689-1.62.846-5.185.872-5.943l.052-1.395-1.272.567c-.323.14-1.185.54-2.144 1.037.183-.453.288-.941.288-1.455 0-1.83-2.632-6.127-3.155-6.972l-.74-1.185-.741 1.185c-.532.845-3.155 5.142-3.155 6.972 0 .514.104 1.01.287 1.464a45.25 45.25 0 0 0-2.143-1.055l-1.273-.575.044 1.394c.026.759.165 4.332.845 5.952a25.135 25.135 0 0 0-1.324-.043L7.15 18.26l.593 1.264c.357.758 2.196 4.584 3.512 5.438a3.41 3.41 0 0 0 1.839.549c.244 0 .479-.026.723-.079a3.311 3.311 0 0 0 1.316-.61v4.183h1.743v-4.174c.592.436 1.307.68 2.03.68.628 0 1.273-.174 1.839-.54 1.316-.854 3.163-4.68 3.512-5.438l.593-1.264-1.395.018h.009ZM20.44 17.8a1.656 1.656 0 1 1-2.745-1.856c.314-.462 1.856-1.378 3.468-2.17-.14 1.795-.41 3.564-.723 4.026ZM16.004 6.33c1.055 1.83 2.153 4.026 2.153 4.82a2.157 2.157 0 0 1-2.153 2.152 2.157 2.157 0 0 1-2.152-2.153c0-.793 1.098-2.989 2.152-4.819Zm-1.708 9.63a1.665 1.665 0 0 1-.453 2.3c-.366.244-.81.332-1.246.244a1.65 1.65 0 0 1-1.055-.705c-.305-.462-.566-2.24-.697-4.027 1.604.81 3.146 1.726 3.451 2.188Zm.2 7.05a1.669 1.669 0 0 1-2.291.497c-.47-.305-1.412-1.822-2.24-3.416 1.795.104 3.573.33 4.035.636a1.656 1.656 0 0 1 .497 2.292v-.01Zm5.308.488c-.366.244-.81.322-1.246.227a1.656 1.656 0 0 1-1.046-.724 1.614 1.614 0 0 1-.227-1.246c.096-.436.349-.802.724-1.046.47-.305 2.24-.531 4.035-.636-.828 1.595-1.778 3.12-2.24 3.416v.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 32 32" class="c-pieIcon c-pieIcon--glutenLarge"><path d="M23.464 18.288a43.4 43.4 0 0 0-1.36.043c.689-1.62.846-5.185.872-5.943l.052-1.395-1.272.567c-.323.14-1.185.54-2.144 1.037.183-.453.288-.941.288-1.455 0-1.83-2.632-6.127-3.155-6.972l-.74-1.185-.741 1.185c-.532.845-3.155 5.142-3.155 6.972 0 .514.104 1.01.287 1.464a45.25 45.25 0 0 0-2.143-1.055l-1.273-.575.044 1.394c.026.759.165 4.332.845 5.952a25.135 25.135 0 0 0-1.324-.043L7.15 18.26l.593 1.264c.357.758 2.196 4.584 3.512 5.438a3.41 3.41 0 0 0 1.839.549c.244 0 .479-.026.723-.079a3.311 3.311 0 0 0 1.316-.61v4.183h1.743v-4.174c.592.436 1.307.68 2.03.68.628 0 1.273-.174 1.839-.54 1.316-.854 3.163-4.68 3.512-5.438l.593-1.264-1.395.018h.009ZM20.44 17.8a1.656 1.656 0 1 1-2.745-1.856c.314-.462 1.856-1.378 3.468-2.17-.14 1.795-.41 3.564-.723 4.026ZM16.004 6.33c1.055 1.83 2.153 4.026 2.153 4.82a2.157 2.157 0 0 1-2.153 2.152 2.157 2.157 0 0 1-2.152-2.153c0-.793 1.098-2.989 2.152-4.819Zm-1.708 9.63a1.665 1.665 0 0 1-.453 2.3c-.366.244-.81.332-1.246.244a1.65 1.65 0 0 1-1.055-.705c-.305-.462-.566-2.24-.697-4.027 1.604.81 3.146 1.726 3.451 2.188Zm.2 7.05a1.669 1.669 0 0 1-2.291.497c-.47-.305-1.412-1.822-2.24-3.416 1.795.104 3.573.33 4.035.636a1.656 1.656 0 0 1 .497 2.292v-.01Zm5.308.488c-.366.244-.81.322-1.246.227a1.656 1.656 0 0 1-1.046-.724 1.614 1.614 0 0 1-.227-1.246c.096-.436.349-.802.724-1.046.47-.305 2.24-.531 4.035-.636-.828 1.595-1.778 3.12-2.24 3.416v.009Z"></path></svg>';
 
 export class IconGlutenLarge extends HTMLElement {
     constructor () {

package/icons/IconGoogleVoice.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--googleVoice"><g clip-path="url(#prefix__clip0_18_1955)"><path d="M12.147 10.126a1.007 1.007 0 0 0-.743-.324 1.032 1.032 0 0 0-.727.307l-.717.7a.788.788 0 0 1-.534.219.796.796 0 0 1-.551-.228L5.664 7.562a.77.77 0 0 1 0-1.076l.586-.595c.577-.595.595-.997 0-1.584l-2.17-2.16a1.12 1.12 0 0 0-1.654.052 4.095 4.095 0 0 0-.997 2.765 8.076 8.076 0 0 0 1.61 4.786c1.75 2.511 3.98 4.471 7.105 5.119.41.088.83.135 1.25.14a4.102 4.102 0 0 0 2.993-1.216.745.745 0 0 0 0-1.234 83.951 83.951 0 0 0-2.24-2.433Zm-.752 3.562a4.514 4.514 0 0 1-.989-.114C8 13.066 5.98 11.614 4.106 8.98A6.781 6.781 0 0 1 2.75 4.964a2.809 2.809 0 0 1 .551-1.75L4.09 4l1.076 1.094c-.193.201-.333.341-.464.49a2.065 2.065 0 0 0 0 2.896l3.211 3.238a2.048 2.048 0 0 0 1.514.656c.54 0 1.057-.21 1.444-.586l.096-.088.429-.42 1.75 1.873a2.791 2.791 0 0 1-1.75.534ZM9.032 1.227h-.06c-.508 0-.71.174-.71.7V7.44c0 .394.167.56.552.56h5.53c.498 0 .682-.201.682-.683a6.177 6.177 0 0 0-5.994-6.09Zm4.14 5.442H9.548V2.575a4.857 4.857 0 0 1 4.068 4.086l-.446.009Z"></path></g><defs><clipPath id="prefix__clip0_18_1955"><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--googleVoice"><g clip-path="url(#prefix__clip0_18_1955)"><path d="M12.147 10.126a1.007 1.007 0 0 0-.743-.324 1.032 1.032 0 0 0-.727.307l-.717.7a.788.788 0 0 1-.534.219.796.796 0 0 1-.551-.228L5.664 7.562a.77.77 0 0 1 0-1.076l.586-.595c.577-.595.595-.997 0-1.584l-2.17-2.16a1.12 1.12 0 0 0-1.654.052 4.095 4.095 0 0 0-.997 2.765 8.076 8.076 0 0 0 1.61 4.786c1.75 2.511 3.98 4.471 7.105 5.119.41.088.83.135 1.25.14a4.102 4.102 0 0 0 2.993-1.216.745.745 0 0 0 0-1.234 83.951 83.951 0 0 0-2.24-2.433Zm-.752 3.562a4.514 4.514 0 0 1-.989-.114C8 13.066 5.98 11.614 4.106 8.98A6.781 6.781 0 0 1 2.75 4.964a2.809 2.809 0 0 1 .551-1.75L4.09 4l1.076 1.094c-.193.201-.333.341-.464.49a2.065 2.065 0 0 0 0 2.896l3.211 3.238a2.048 2.048 0 0 0 1.514.656c.54 0 1.057-.21 1.444-.586l.096-.088.429-.42 1.75 1.873a2.791 2.791 0 0 1-1.75.534ZM9.032 1.227h-.06c-.508 0-.71.174-.71.7V7.44c0 .394.167.56.552.56h5.53c.498 0 .682-.201.682-.683a6.177 6.177 0 0 0-5.994-6.09Zm4.14 5.442H9.548V2.575a4.857 4.857 0 0 1 4.068 4.086l-.446.009Z"></path></g><defs><clipPath id="prefix__clip0_18_1955"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconGoogleVoice extends HTMLElement {
     constructor () {

package/icons/IconGoogleVoiceLarge.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--googleVoiceLarge"><path d="M21.967 20.445a1.872 1.872 0 0 0-2.712 0c-.525.534-.875.875-1.216 1.199a1.36 1.36 0 0 1-1.925 0l-5.705-5.845a1.391 1.391 0 0 1 0-1.916l1.015-1.068c1.023-1.059 1.05-1.75 0-2.835L7.6 6.112A1.96 1.96 0 0 0 6.182 5.5a2.056 2.056 0 0 0-1.557.735 7.376 7.376 0 0 0-1.75 4.909 14.639 14.639 0 0 0 2.852 8.575c3.177 4.488 7.07 7.988 12.61 9.161.733.157 1.48.24 2.23.245a7.245 7.245 0 0 0 5.312-2.179 1.349 1.349 0 0 0 .06-2.196c-1.312-1.453-2.642-2.879-3.972-4.305Zm-1.382 6.93a9.014 9.014 0 0 1-1.864-.21c-4.471-.945-8.129-3.631-11.541-8.461a12.88 12.88 0 0 1-2.555-7.552 5.618 5.618 0 0 1 1.312-3.77.289.289 0 0 1 .245-.132.227.227 0 0 1 .193.088L7.994 9l2.187 2.205.158.175c-.06.08-.125.155-.193.227-.472.482-.752.77-1.032 1.077a3.132 3.132 0 0 0 .052 4.375l5.705 5.792a3.062 3.062 0 0 0 2.214.937 3.106 3.106 0 0 0 2.17-.875l.175-.175 1.076-1.06a.14.14 0 0 1 .096-.043.121.121 0 0 1 .088.044c1.4 1.487 2.625 2.852 3.867 4.165a5.54 5.54 0 0 1-3.972 1.531Zm-2.223-24.5h-.113c-.928 0-1.287.333-1.295 1.269 0 3.316 0 6.632-.044 9.957 0 .709.306 1.006.997 1.006 1.663 0 8.295 0 9.958-.043.875 0 1.242-.368 1.234-1.243A11.156 11.156 0 0 0 18.362 2.875Zm4.734 10.5H18.67V4.677a9.38 9.38 0 0 1 8.706 8.698h-4.279Z"></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--googleVoiceLarge"><path d="M21.967 20.445a1.872 1.872 0 0 0-2.712 0c-.525.534-.875.875-1.216 1.199a1.36 1.36 0 0 1-1.925 0l-5.705-5.845a1.391 1.391 0 0 1 0-1.916l1.015-1.068c1.023-1.059 1.05-1.75 0-2.835L7.6 6.112A1.96 1.96 0 0 0 6.182 5.5a2.056 2.056 0 0 0-1.557.735 7.376 7.376 0 0 0-1.75 4.909 14.639 14.639 0 0 0 2.852 8.575c3.177 4.488 7.07 7.988 12.61 9.161.733.157 1.48.24 2.23.245a7.245 7.245 0 0 0 5.312-2.179 1.349 1.349 0 0 0 .06-2.196c-1.312-1.453-2.642-2.879-3.972-4.305Zm-1.382 6.93a9.014 9.014 0 0 1-1.864-.21c-4.471-.945-8.129-3.631-11.541-8.461a12.88 12.88 0 0 1-2.555-7.552 5.618 5.618 0 0 1 1.312-3.77.289.289 0 0 1 .245-.132.227.227 0 0 1 .193.088L7.994 9l2.187 2.205.158.175c-.06.08-.125.155-.193.227-.472.482-.752.77-1.032 1.077a3.132 3.132 0 0 0 .052 4.375l5.705 5.792a3.062 3.062 0 0 0 2.214.937 3.106 3.106 0 0 0 2.17-.875l.175-.175 1.076-1.06a.14.14 0 0 1 .096-.043.121.121 0 0 1 .088.044c1.4 1.487 2.625 2.852 3.867 4.165a5.54 5.54 0 0 1-3.972 1.531Zm-2.223-24.5h-.113c-.928 0-1.287.333-1.295 1.269 0 3.316 0 6.632-.044 9.957 0 .709.306 1.006.997 1.006 1.663 0 8.295 0 9.958-.043.875 0 1.242-.368 1.234-1.243A11.156 11.156 0 0 0 18.362 2.875Zm4.734 10.5H18.67V4.677a9.38 9.38 0 0 1 8.706 8.698h-4.279Z"></path></svg>';
 
 export class IconGoogleVoiceLarge extends HTMLElement {
     constructor () {

package/icons/IconGridView.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--gridView"><path d="M6.906 6.906H2.094V2.094h4.812v4.812Zm-3.5-1.312h2.188V3.406H3.406v2.188Zm10.5 1.312H9.094V2.094h4.812v4.812Zm-3.5-1.312h2.188V3.406h-2.188v2.188Zm-3.5 8.312H2.094V9.094h4.812v4.812Zm-3.5-1.312h2.188v-2.188H3.406v2.188Zm10.5 1.312H9.094V9.094h4.812v4.812Zm-3.5-1.312h2.188v-2.188h-2.188v2.188Z"></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--gridView"><path d="M6.906 6.906H2.094V2.094h4.812v4.812Zm-3.5-1.312h2.188V3.406H3.406v2.188Zm10.5 1.312H9.094V2.094h4.812v4.812Zm-3.5-1.312h2.188V3.406h-2.188v2.188Zm-3.5 8.312H2.094V9.094h4.812v4.812Zm-3.5-1.312h2.188v-2.188H3.406v2.188Zm10.5 1.312H9.094V9.094h4.812v4.812Zm-3.5-1.312h2.188v-2.188h-2.188v2.188Z"></path></svg>';
 
 export class IconGridView extends HTMLElement {
     constructor () {

package/icons/IconGridViewFilled.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--gridViewFilled"><path d="M2.094 6.906h4.812V2.094H2.094v4.812Z"></path><path d="M9.094 6.906h4.812V2.094H9.094v4.812Z"></path><path d="M2.094 13.906h4.812V9.094H2.094v4.812Z"></path><path d="M9.094 13.906h4.812V9.094H9.094v4.812Z"></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--gridViewFilled"><path d="M2.094 6.906h4.812V2.094H2.094v4.812Z"></path><path d="M9.094 6.906h4.812V2.094H9.094v4.812Z"></path><path d="M2.094 13.906h4.812V9.094H2.094v4.812Z"></path><path d="M9.094 13.906h4.812V9.094H9.094v4.812Z"></path></svg>';
 
 export class IconGridViewFilled extends HTMLElement {
     constructor () {

package/icons/IconGridViewFilledLarge.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--gridViewFilledLarge"><path d="M4.625 14.25h9.625V4.625H4.625v9.625Z"></path><path d="M17.75 14.25h9.625V4.625H17.75v9.625Z"></path><path d="M4.625 27.375h9.625V17.75H4.625v9.625Z"></path><path d="M17.75 27.375h9.625V17.75H17.75v9.625Z"></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--gridViewFilledLarge"><path d="M4.625 14.25h9.625V4.625H4.625v9.625Z"></path><path d="M17.75 14.25h9.625V4.625H17.75v9.625Z"></path><path d="M4.625 27.375h9.625V17.75H4.625v9.625Z"></path><path d="M17.75 27.375h9.625V17.75H17.75v9.625Z"></path></svg>';
 
 export class IconGridViewFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconGridViewLarge.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--gridViewLarge"><path d="M14.25 14.25H4.625V4.625h9.625v9.625ZM6.375 12.5H12.5V6.375H6.375V12.5Zm21 1.75H17.75V4.625h9.625v9.625ZM19.5 12.5h6.125V6.375H19.5V12.5Zm-5.25 14.875H4.625V17.75h9.625v9.625Zm-7.875-1.75H12.5V19.5H6.375v6.125Zm21 1.75H17.75V17.75h9.625v9.625Zm-7.875-1.75h6.125V19.5H19.5v6.125Z"></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--gridViewLarge"><path d="M14.25 14.25H4.625V4.625h9.625v9.625ZM6.375 12.5H12.5V6.375H6.375V12.5Zm21 1.75H17.75V4.625h9.625v9.625ZM19.5 12.5h6.125V6.375H19.5V12.5Zm-5.25 14.875H4.625V17.75h9.625v9.625Zm-7.875-1.75H12.5V19.5H6.375v6.125Zm21 1.75H17.75V17.75h9.625v9.625Zm-7.875-1.75h6.125V19.5H19.5v6.125Z"></path></svg>';
 
 export class IconGridViewLarge extends HTMLElement {
     constructor () {

package/icons/IconGrocery.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--grocery"><path d="M14.563 7.536H12.89l.63-2.905-1.137-1.863.122-.56-1.452-.315-.14.63-1.785 1.155L8.83 5.06c-.052 0-.113-.009-.166-.017-.061-.823-.577-1.532-1.304-1.76a1.81 1.81 0 0 0-1.592.263c-.131.097-.245.21-.341.342-.307-.21-.64-.333-.989-.333a1.465 1.465 0 0 0-1.138.481c-.595.665-.525 1.304-.437 1.619.035.131.096.254.157.368a.236.236 0 0 0-.07.06 1.529 1.529 0 0 0-.507 1.453H1.263V8.85h.595l.91 3.753A1.983 1.983 0 0 0 4.7 14.125h6.44c.928 0 1.724-.63 1.934-1.523l.91-3.753h.569V7.536h.009ZM8.429 6.338c.831 0 1.522.507 1.75 1.198h-3.5c.227-.691.919-1.198 1.75-1.198ZM10.3 4.483l1.147-.735.682 1.12-.577 2.668h-.027a2.973 2.973 0 0 0-1.443-2.056l.218-.997Zm-6.57 2.773c0-.07.025-.14.078-.175.026-.026.07-.052.175-.035.691.105 1.006-.245 1.076-.568.026-.114.105-.692-.7-.928a.444.444 0 0 1-.236-.262c-.026-.105.026-.228.157-.377a.173.173 0 0 1 .123-.043c.07.008.254.026.472.297.315.385.674.359.823.333.464-.088.647-.534.691-.657a.47.47 0 0 1 .158-.236.51.51 0 0 1 .42-.061c.192.061.385.315.393.674-1.058.367-1.846 1.242-2.02 2.318H4.088c-.28 0-.341-.148-.341-.28H3.73Zm8.075 5.031a.684.684 0 0 1-.665.525h-6.43a.691.691 0 0 1-.666-.524l-.831-3.44h9.432l-.83 3.44h-.01Z"></path><path d="M8.963 10.17H7.099v1.313h1.864V10.17Z"></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--grocery"><path d="M14.563 7.536H12.89l.63-2.905-1.137-1.863.122-.56-1.452-.315-.14.63-1.785 1.155L8.83 5.06c-.052 0-.113-.009-.166-.017-.061-.823-.577-1.532-1.304-1.76a1.81 1.81 0 0 0-1.592.263c-.131.097-.245.21-.341.342-.307-.21-.64-.333-.989-.333a1.465 1.465 0 0 0-1.138.481c-.595.665-.525 1.304-.437 1.619.035.131.096.254.157.368a.236.236 0 0 0-.07.06 1.529 1.529 0 0 0-.507 1.453H1.263V8.85h.595l.91 3.753A1.983 1.983 0 0 0 4.7 14.125h6.44c.928 0 1.724-.63 1.934-1.523l.91-3.753h.569V7.536h.009ZM8.429 6.338c.831 0 1.522.507 1.75 1.198h-3.5c.227-.691.919-1.198 1.75-1.198ZM10.3 4.483l1.147-.735.682 1.12-.577 2.668h-.027a2.973 2.973 0 0 0-1.443-2.056l.218-.997Zm-6.57 2.773c0-.07.025-.14.078-.175.026-.026.07-.052.175-.035.691.105 1.006-.245 1.076-.568.026-.114.105-.692-.7-.928a.444.444 0 0 1-.236-.262c-.026-.105.026-.228.157-.377a.173.173 0 0 1 .123-.043c.07.008.254.026.472.297.315.385.674.359.823.333.464-.088.647-.534.691-.657a.47.47 0 0 1 .158-.236.51.51 0 0 1 .42-.061c.192.061.385.315.393.674-1.058.367-1.846 1.242-2.02 2.318H4.088c-.28 0-.341-.148-.341-.28H3.73Zm8.075 5.031a.684.684 0 0 1-.665.525h-6.43a.691.691 0 0 1-.666-.524l-.831-3.44h9.432l-.83 3.44h-.01Z"></path><path d="M8.963 10.17H7.099v1.313h1.864V10.17Z"></path></svg>';
 
 export class IconGrocery extends HTMLElement {
     constructor () {

package/icons/IconGroceryLarge.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--groceryLarge"><path d="M29.125 16.866h-2.354l1.155-5.355L26.02 8.38l.341-1.558-2.905-.621-.359 1.662-1.898 1.226-.438-2.835a3.995 3.995 0 0 0-2.468-3.098l-.096-.035a3.963 3.963 0 0 0-4.077.709 3.96 3.96 0 0 0-1.322 3.587l.14.928c-1.014.008-2.038.481-2.642 1.531-.613-.543-1.33-.84-2.056-.857a2.362 2.362 0 0 0-1.917.813c-.77.867-1.04 1.864-.77 2.8.106.359.28.683.5.963a2.702 2.702 0 0 0-.464.315 2.626 2.626 0 0 0-.902 1.995c0 .35.07.674.175.971H2.875v1.75H4.38l1.995 8.207a2.883 2.883 0 0 0 2.809 2.214h13.694c1.338 0 2.493-.91 2.808-2.213l1.995-8.208h1.444v-1.759Zm-8.418 0a4.562 4.562 0 0 0-.175-.901l.464-2.152c.21-.097.49-.193.77-.15.307.044.578.255.84.622l.21.315c.412.621.937 1.4 1.873 1.575.122.026.253.035.376.035h.044l-.14.656h-4.27.008Zm-5.757-3.211c2.039 0 3.71 1.4 3.981 3.211H10.97c.271-1.811 1.942-3.211 3.981-3.211Zm9.45-4.559 1.663 2.73-.534 2.468c-.306.166-.464.166-.508.157-.219-.043-.507-.472-.744-.831-.078-.122-.157-.245-.245-.359-.682-.954-1.47-1.251-2.02-1.338a2.913 2.913 0 0 0-.613-.018l.227-1.041L24.4 9.079v.017Zm-9.135-3.963c.63-.552 1.505-.7 2.284-.403l.096.035c.411.158.744.446.997.796l-2.213.341.262 1.733 2.459-.376.219 1.435-2.459.376.262 1.732 2.46-.376.122.814-.525 2.459c-.998-1.041-2.406-1.707-3.981-1.785l-.718-4.778a2.224 2.224 0 0 1 .735-2.012v.009ZM6.436 15.895c0-.254.114-.508.298-.665.175-.158.411-.21.673-.175 1.357.201 1.61-.621 1.654-.787.053-.228.114-.99-1.093-1.34-.202-.06-.622-.367-.736-.787-.104-.35.035-.735.403-1.146.131-.149.324-.236.578-.227.42 0 .857.27 1.242.734.464.56.963.57 1.216.517.7-.132.972-.823 1.033-1.015.28-.805.945-.989 1.505-.893l.297 1.986c-2.327.57-4.086 2.468-4.313 4.778H7.539c-.814 0-1.103-.508-1.103-.971v-.009ZM23.99 26.413a1.141 1.141 0 0 1-1.111.875H9.184c-.534 0-.989-.36-1.111-.875l-1.89-7.797h19.696l-1.89 7.797Z"></path><path d="M18.074 21.128H14.39v1.75h3.684v-1.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--groceryLarge"><path d="M29.125 16.866h-2.354l1.155-5.355L26.02 8.38l.341-1.558-2.905-.621-.359 1.662-1.898 1.226-.438-2.835a3.995 3.995 0 0 0-2.468-3.098l-.096-.035a3.963 3.963 0 0 0-4.077.709 3.96 3.96 0 0 0-1.322 3.587l.14.928c-1.014.008-2.038.481-2.642 1.531-.613-.543-1.33-.84-2.056-.857a2.362 2.362 0 0 0-1.917.813c-.77.867-1.04 1.864-.77 2.8.106.359.28.683.5.963a2.702 2.702 0 0 0-.464.315 2.626 2.626 0 0 0-.902 1.995c0 .35.07.674.175.971H2.875v1.75H4.38l1.995 8.207a2.883 2.883 0 0 0 2.809 2.214h13.694c1.338 0 2.493-.91 2.808-2.213l1.995-8.208h1.444v-1.759Zm-8.418 0a4.562 4.562 0 0 0-.175-.901l.464-2.152c.21-.097.49-.193.77-.15.307.044.578.255.84.622l.21.315c.412.621.937 1.4 1.873 1.575.122.026.253.035.376.035h.044l-.14.656h-4.27.008Zm-5.757-3.211c2.039 0 3.71 1.4 3.981 3.211H10.97c.271-1.811 1.942-3.211 3.981-3.211Zm9.45-4.559 1.663 2.73-.534 2.468c-.306.166-.464.166-.508.157-.219-.043-.507-.472-.744-.831-.078-.122-.157-.245-.245-.359-.682-.954-1.47-1.251-2.02-1.338a2.913 2.913 0 0 0-.613-.018l.227-1.041L24.4 9.079v.017Zm-9.135-3.963c.63-.552 1.505-.7 2.284-.403l.096.035c.411.158.744.446.997.796l-2.213.341.262 1.733 2.459-.376.219 1.435-2.459.376.262 1.732 2.46-.376.122.814-.525 2.459c-.998-1.041-2.406-1.707-3.981-1.785l-.718-4.778a2.224 2.224 0 0 1 .735-2.012v.009ZM6.436 15.895c0-.254.114-.508.298-.665.175-.158.411-.21.673-.175 1.357.201 1.61-.621 1.654-.787.053-.228.114-.99-1.093-1.34-.202-.06-.622-.367-.736-.787-.104-.35.035-.735.403-1.146.131-.149.324-.236.578-.227.42 0 .857.27 1.242.734.464.56.963.57 1.216.517.7-.132.972-.823 1.033-1.015.28-.805.945-.989 1.505-.893l.297 1.986c-2.327.57-4.086 2.468-4.313 4.778H7.539c-.814 0-1.103-.508-1.103-.971v-.009ZM23.99 26.413a1.141 1.141 0 0 1-1.111.875H9.184c-.534 0-.989-.36-1.111-.875l-1.89-7.797h19.696l-1.89 7.797Z"></path><path d="M18.074 21.128H14.39v1.75h3.684v-1.75Z"></path></svg>';
 
 export class IconGroceryLarge extends HTMLElement {
     constructor () {

package/icons/IconHandCoins.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--handCoins"><path d="M13.749 9.313a2.441 2.441 0 0 0-3.063.13l-1.26 1.13c-.198.174-.453.27-.717.27h-.315c.173-.338.263-.713.262-1.093V8.219H5.305c-.473 0-.936.14-1.33.402L1.954 9.97H1v1.312h1.348L4.7 9.75a1.05 1.05 0 0 1 .604-.184h2.039v.184a1.094 1.094 0 0 1-1.094 1.094h-.98l-.665 1.312h4.104a2.424 2.424 0 0 0 1.584-.595l1.268-1.129a1.12 1.12 0 0 1 1.409-.06h.061l-2.406 2.738a1.11 1.11 0 0 1-.814.359H1v1.312h8.846a2.408 2.408 0 0 0 1.794-.805L15 10.205l-1.251-.893Z"></path><path d="M8 6.906a2.844 2.844 0 1 0-2.844-2.843A2.853 2.853 0 0 0 8 6.905Zm0-4.375a1.531 1.531 0 1 1-1.531 1.531A1.54 1.54 0 0 1 8 2.532Z"></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--handCoins"><path d="M13.749 9.313a2.441 2.441 0 0 0-3.063.13l-1.26 1.13c-.198.174-.453.27-.717.27h-.315c.173-.338.263-.713.262-1.093V8.219H5.305c-.473 0-.936.14-1.33.402L1.954 9.97H1v1.312h1.348L4.7 9.75a1.05 1.05 0 0 1 .604-.184h2.039v.184a1.094 1.094 0 0 1-1.094 1.094h-.98l-.665 1.312h4.104a2.424 2.424 0 0 0 1.584-.595l1.268-1.129a1.12 1.12 0 0 1 1.409-.06h.061l-2.406 2.738a1.11 1.11 0 0 1-.814.359H1v1.312h8.846a2.408 2.408 0 0 0 1.794-.805L15 10.205l-1.251-.893Z"></path><path d="M8 6.906a2.844 2.844 0 1 0-2.844-2.843A2.853 2.853 0 0 0 8 6.905Zm0-4.375a1.531 1.531 0 1 1-1.531 1.531A1.54 1.54 0 0 1 8 2.532Z"></path></svg>';
 
 export class IconHandCoins extends HTMLElement {
     constructor () {

package/icons/IconHandCoinsLarge.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--handCoinsLarge"><path d="M28.11 18.975a4.445 4.445 0 0 0-5.565.245l-2.538 2.258a2.625 2.625 0 0 1-1.75.647h-.507a4.375 4.375 0 0 0 .875-2.625v-1.75h-5.119a7 7 0 0 0-3.867 1.164L6.113 21.25H2.874V23H5.5v4.375H2.875v1.75h16.817a4.376 4.376 0 0 0 3.256-1.453l6.684-7.428-1.522-1.269ZM21.644 26.5a2.626 2.626 0 0 1-1.951.875H7.25v-4.777l3.351-2.223a5.25 5.25 0 0 1 2.905-.875h3.369a2.625 2.625 0 0 1-2.625 2.625h-.779l-.875 1.75h5.688a4.375 4.375 0 0 0 2.887-1.085l2.529-2.258a2.695 2.695 0 0 1 3.334-.157l.087.07-5.477 6.055Zm.481-10.5a3.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.5Zm-7.438 0a3.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.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--handCoinsLarge"><path d="M28.11 18.975a4.445 4.445 0 0 0-5.565.245l-2.538 2.258a2.625 2.625 0 0 1-1.75.647h-.507a4.375 4.375 0 0 0 .875-2.625v-1.75h-5.119a7 7 0 0 0-3.867 1.164L6.113 21.25H2.874V23H5.5v4.375H2.875v1.75h16.817a4.376 4.376 0 0 0 3.256-1.453l6.684-7.428-1.522-1.269ZM21.644 26.5a2.626 2.626 0 0 1-1.951.875H7.25v-4.777l3.351-2.223a5.25 5.25 0 0 1 2.905-.875h3.369a2.625 2.625 0 0 1-2.625 2.625h-.779l-.875 1.75h5.688a4.375 4.375 0 0 0 2.887-1.085l2.529-2.258a2.695 2.695 0 0 1 3.334-.157l.087.07-5.477 6.055Zm.481-10.5a3.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.5Zm-7.438 0a3.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.5Z"></path></svg>';
 
 export class IconHandCoinsLarge extends HTMLElement {
     constructor () {

package/icons/IconHandHeart.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--handHeart"><path d="m8 7.44 2.887-2.887a2.057 2.057 0 0 0 0-2.914A2.1 2.1 0 0 0 8 1.604a2.109 2.109 0 0 0-2.887 0 2.056 2.056 0 0 0 0 2.914L8 7.441ZM6.101 2.629a.639.639 0 0 1 .473-.201.665.665 0 0 1 .472.201L8 3.626l.954-.998a.683.683 0 0 1 .945 0 .656.656 0 0 1 0 .936L8 5.463 6.101 3.564a.656.656 0 0 1 0-.936Z"></path><path d="M13.749 9.313a2.441 2.441 0 0 0-3.063.13l-1.26 1.13c-.198.174-.453.27-.717.27h-.315c.173-.338.263-.713.262-1.093V8.219H5.305c-.473 0-.936.14-1.33.402L1.954 9.97H1v1.312h1.348L4.7 9.75a1.05 1.05 0 0 1 .604-.184h2.039v.184a1.094 1.094 0 0 1-1.094 1.094h-.98l-.665 1.312h4.104a2.424 2.424 0 0 0 1.584-.595l1.268-1.129a1.12 1.12 0 0 1 1.409-.06h.061l-2.406 2.738a1.11 1.11 0 0 1-.814.359H1v1.312h8.846a2.408 2.408 0 0 0 1.794-.805L15 10.205l-1.251-.892Z"></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--handHeart"><path d="m8 7.44 2.887-2.887a2.057 2.057 0 0 0 0-2.914A2.1 2.1 0 0 0 8 1.604a2.109 2.109 0 0 0-2.887 0 2.056 2.056 0 0 0 0 2.914L8 7.441ZM6.101 2.629a.639.639 0 0 1 .473-.201.665.665 0 0 1 .472.201L8 3.626l.954-.998a.683.683 0 0 1 .945 0 .656.656 0 0 1 0 .936L8 5.463 6.101 3.564a.656.656 0 0 1 0-.936Z"></path><path d="M13.749 9.313a2.441 2.441 0 0 0-3.063.13l-1.26 1.13c-.198.174-.453.27-.717.27h-.315c.173-.338.263-.713.262-1.093V8.219H5.305c-.473 0-.936.14-1.33.402L1.954 9.97H1v1.312h1.348L4.7 9.75a1.05 1.05 0 0 1 .604-.184h2.039v.184a1.094 1.094 0 0 1-1.094 1.094h-.98l-.665 1.312h4.104a2.424 2.424 0 0 0 1.584-.595l1.268-1.129a1.12 1.12 0 0 1 1.409-.06h.061l-2.406 2.738a1.11 1.11 0 0 1-.814.359H1v1.312h8.846a2.408 2.408 0 0 0 1.794-.805L15 10.205l-1.251-.892Z"></path></svg>';
 
 export class IconHandHeart extends HTMLElement {
     constructor () {

package/icons/IconHandHeartLarge.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--handHeartLarge"><path d="m15.668 15.746.612.63 6.37-6.387a4.174 4.174 0 0 0-5.862-5.898l-.5.534-.49-.499A4.174 4.174 0 0 0 9.876 9.99l5.793 5.757ZM11.143 5.334a2.406 2.406 0 0 1 3.412 0l1.75 1.75 1.75-1.75a2.416 2.416 0 1 1 3.413 3.412l-5.128 5.128-5.197-5.128a2.406 2.406 0 0 1 0-3.412Z"></path><path d="M28.11 18.975a4.445 4.445 0 0 0-5.565.245l-2.538 2.258a2.625 2.625 0 0 1-1.75.647h-.507a4.375 4.375 0 0 0 .875-2.625v-1.75h-5.119a7 7 0 0 0-3.867 1.164L6.113 21.25H2.874V23H5.5v4.375H2.875v1.75h16.817a4.376 4.376 0 0 0 3.256-1.453l6.684-7.428-1.522-1.269ZM21.644 26.5a2.626 2.626 0 0 1-1.951.875H7.25v-4.777l3.351-2.223a5.25 5.25 0 0 1 2.905-.875h3.369a2.625 2.625 0 0 1-2.625 2.625h-.779l-.875 1.75h5.688a4.375 4.375 0 0 0 2.887-1.085l2.529-2.258a2.695 2.695 0 0 1 3.334-.157l.087.07-5.477 6.055Z"></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--handHeartLarge"><path d="m15.668 15.746.612.63 6.37-6.387a4.174 4.174 0 0 0-5.862-5.898l-.5.534-.49-.499A4.174 4.174 0 0 0 9.876 9.99l5.793 5.757ZM11.143 5.334a2.406 2.406 0 0 1 3.412 0l1.75 1.75 1.75-1.75a2.416 2.416 0 1 1 3.413 3.412l-5.128 5.128-5.197-5.128a2.406 2.406 0 0 1 0-3.412Z"></path><path d="M28.11 18.975a4.445 4.445 0 0 0-5.565.245l-2.538 2.258a2.625 2.625 0 0 1-1.75.647h-.507a4.375 4.375 0 0 0 .875-2.625v-1.75h-5.119a7 7 0 0 0-3.867 1.164L6.113 21.25H2.874V23H5.5v4.375H2.875v1.75h16.817a4.376 4.376 0 0 0 3.256-1.453l6.684-7.428-1.522-1.269ZM21.644 26.5a2.626 2.626 0 0 1-1.951.875H7.25v-4.777l3.351-2.223a5.25 5.25 0 0 1 2.905-.875h3.369a2.625 2.625 0 0 1-2.625 2.625h-.779l-.875 1.75h5.688a4.375 4.375 0 0 0 2.887-1.085l2.529-2.258a2.695 2.695 0 0 1 3.334-.157l.087.07-5.477 6.055Z"></path></svg>';
 
 export class IconHandHeartLarge extends HTMLElement {
     constructor () {