@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/icons/IconKeyLarge.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--keyLarge"><path d="M10.75 8.125a2.625 2.625 0 1 0 0 5.25 2.625 2.625 0 0 0 0-5.25Zm0 3.5a.874.874 0 1 1 0-1.748.874.874 0 0 1 0 1.748Zm9.082 1.496a.989.989 0 0 1-.166-1.137c.079-.158.149-.315.219-.464a2.704 2.704 0 0 0-.551-3.036L14.582 3.67a2.721 2.721 0 0 0-3.07-.542 17.229 17.229 0 0 0-8.4 8.496 2.713 2.713 0 0 0 .55 3.036L8.414 19.5a2.686 2.686 0 0 0 3.062.543c.219-.105.429-.21.63-.324a.955.955 0 0 1 1.111.157l2.18 2.249 1.863-.297.359.358-.368 2.328.875.919 2.249-.604.551.56-.455 1.837 1.864 1.899h6.79v-6.554l-9.293-9.45Zm7.543 14.254h-4.288l-.665-.683.456-1.837-1.978-1.969-1.697.438.28-1.75-1.61-1.628-1.873.28-1.54-1.601a2.625 2.625 0 0 0-3.168-.473l-.568.28a.918.918 0 0 1-1.068-.192l-4.751-4.769a.988.988 0 0 1-.193-1.094 15.426 15.426 0 0 1 7.534-7.656.963.963 0 0 1 1.094.175l4.751 4.821a.962.962 0 0 1 .201 1.085l-.2.412a2.747 2.747 0 0 0 .533 3.141l8.75 8.899v4.121Z"></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--keyLarge"><path d="M10.75 8.125a2.625 2.625 0 1 0 0 5.25 2.625 2.625 0 0 0 0-5.25Zm0 3.5a.874.874 0 1 1 0-1.748.874.874 0 0 1 0 1.748Zm9.082 1.496a.989.989 0 0 1-.166-1.137c.079-.158.149-.315.219-.464a2.704 2.704 0 0 0-.551-3.036L14.582 3.67a2.721 2.721 0 0 0-3.07-.542 17.229 17.229 0 0 0-8.4 8.496 2.713 2.713 0 0 0 .55 3.036L8.414 19.5a2.686 2.686 0 0 0 3.062.543c.219-.105.429-.21.63-.324a.955.955 0 0 1 1.111.157l2.18 2.249 1.863-.297.359.358-.368 2.328.875.919 2.249-.604.551.56-.455 1.837 1.864 1.899h6.79v-6.554l-9.293-9.45Zm7.543 14.254h-4.288l-.665-.683.456-1.837-1.978-1.969-1.697.438.28-1.75-1.61-1.628-1.873.28-1.54-1.601a2.625 2.625 0 0 0-3.168-.473l-.568.28a.918.918 0 0 1-1.068-.192l-4.751-4.769a.988.988 0 0 1-.193-1.094 15.426 15.426 0 0 1 7.534-7.656.963.963 0 0 1 1.094.175l4.751 4.821a.962.962 0 0 1 .201 1.085l-.2.412a2.747 2.747 0 0 0 .533 3.141l8.75 8.899v4.121Z"></path></svg>';
 
 export class IconKeyLarge extends HTMLElement {
     constructor () {

package/icons/IconKeyUnlock.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--keyUnlock"><path d="M14.781 3.625v8.75a1.54 1.54 0 0 1-1.531 1.531H8.875a1.54 1.54 0 0 1-1.531-1.531V11.5h1.312v.875a.219.219 0 0 0 .219.219h4.375a.22.22 0 0 0 .219-.219v-8.75a.219.219 0 0 0-.22-.219H8.876a.219.219 0 0 0-.219.219V4.5H7.344v-.875a1.54 1.54 0 0 1 1.53-1.531h4.376a1.54 1.54 0 0 1 1.531 1.531ZM7.667 10.38l-.437-.446-.175.219a3.317 3.317 0 1 1-2.511-5.478c.858.001 1.682.34 2.292.945h3.211L12.427 8l-2.38 2.38h-.735l-.437-.446-.446.446h-.762ZM7.24 8.07l.805.805.83-.796.806.796.875-.875-1.05-1.067H6.25l-.201-.228a1.986 1.986 0 0 0-1.505-.718 2.013 2.013 0 0 0 0 4.025 1.951 1.951 0 0 0 1.146-.376L7.239 8.07Zm-2.975-.875A.796.796 0 1 0 5.06 8a.796.796 0 0 0-.796-.796v-.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--keyUnlock"><path d="M14.781 3.625v8.75a1.54 1.54 0 0 1-1.531 1.531H8.875a1.54 1.54 0 0 1-1.531-1.531V11.5h1.312v.875a.219.219 0 0 0 .219.219h4.375a.22.22 0 0 0 .219-.219v-8.75a.219.219 0 0 0-.22-.219H8.876a.219.219 0 0 0-.219.219V4.5H7.344v-.875a1.54 1.54 0 0 1 1.53-1.531h4.376a1.54 1.54 0 0 1 1.531 1.531ZM7.667 10.38l-.437-.446-.175.219a3.317 3.317 0 1 1-2.511-5.478c.858.001 1.682.34 2.292.945h3.211L12.427 8l-2.38 2.38h-.735l-.437-.446-.446.446h-.762ZM7.24 8.07l.805.805.83-.796.806.796.875-.875-1.05-1.067H6.25l-.201-.228a1.986 1.986 0 0 0-1.505-.718 2.013 2.013 0 0 0 0 4.025 1.951 1.951 0 0 0 1.146-.376L7.239 8.07Zm-2.975-.875A.796.796 0 1 0 5.06 8a.796.796 0 0 0-.796-.796v-.009Z"></path></svg>';
 
 export class IconKeyUnlock extends HTMLElement {
     constructor () {

package/icons/IconKeyUnlockLarge.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--keyUnlockLarge"><g clip-path="url(#prefix__clip0_18_2240)"><path d="M29.125 7.25v17.5a2.625 2.625 0 0 1-2.625 2.625h-9.625a2.625 2.625 0 0 1-2.625-2.625v-2.625H16v2.625a.875.875 0 0 0 .875.875H26.5a.875.875 0 0 0 .875-.875V7.25a.875.875 0 0 0-.875-.875h-9.625A.875.875 0 0 0 16 7.25v2.625h-1.75V7.25a2.625 2.625 0 0 1 2.625-2.625H26.5a2.625 2.625 0 0 1 2.625 2.625ZM15.23 20.148h-1.103l-.988-.998-.744.744a5.862 5.862 0 0 1-4.454 2.047 5.94 5.94 0 1 1 4.218-10.088h6.177L22.484 16l-4.148 4.148h-1.093l-1.007-1.007-1.006 1.007Zm-.543-1.925 1.55-1.55 1.513 1.55L20.016 16l-2.406-2.398h-6.239l-.262-.306a4.192 4.192 0 1 0 0 5.408l2.039-2.039 1.54 1.558ZM6.97 14.53a1.47 1.47 0 1 0 .017 2.94 1.47 1.47 0 0 0-.017-2.94Zm16.905-2.03v6.125h1.75V12.5h-1.75Z"></path></g><defs><clipPath id="prefix__clip0_18_2240"><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--keyUnlockLarge"><g clip-path="url(#prefix__clip0_18_2240)"><path d="M29.125 7.25v17.5a2.625 2.625 0 0 1-2.625 2.625h-9.625a2.625 2.625 0 0 1-2.625-2.625v-2.625H16v2.625a.875.875 0 0 0 .875.875H26.5a.875.875 0 0 0 .875-.875V7.25a.875.875 0 0 0-.875-.875h-9.625A.875.875 0 0 0 16 7.25v2.625h-1.75V7.25a2.625 2.625 0 0 1 2.625-2.625H26.5a2.625 2.625 0 0 1 2.625 2.625ZM15.23 20.148h-1.103l-.988-.998-.744.744a5.862 5.862 0 0 1-4.454 2.047 5.94 5.94 0 1 1 4.218-10.088h6.177L22.484 16l-4.148 4.148h-1.093l-1.007-1.007-1.006 1.007Zm-.543-1.925 1.55-1.55 1.513 1.55L20.016 16l-2.406-2.398h-6.239l-.262-.306a4.192 4.192 0 1 0 0 5.408l2.039-2.039 1.54 1.558ZM6.97 14.53a1.47 1.47 0 1 0 .017 2.94 1.47 1.47 0 0 0-.017-2.94Zm16.905-2.03v6.125h1.75V12.5h-1.75Z"></path></g><defs><clipPath id="prefix__clip0_18_2240"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 export class IconKeyUnlockLarge extends HTMLElement {
     constructor () {

package/icons/IconKosher.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--kosher"><path d="m11.938 8.053 1.986-3.387H9.986L8 1.22 6.014 4.666H2.076l1.986 3.386-1.925 3.334h3.877L8 14.773l1.986-3.387h3.877l-1.925-3.333Zm.078-2.293-.7 1.199-.691-1.199h1.391Zm-1.338 2.284-1.322 2.248H6.644L5.322 8.044 6.644 5.76h2.712l1.322 2.284ZM8 3.406l.726 1.26H7.274L8 3.406ZM3.984 5.76h1.391l-.7 1.199-.691-1.199Zm0 4.533.708-1.155.683 1.155H3.984ZM8 12.603l-.718-1.217h1.435L8 12.602Zm3.307-3.5.665 1.155h-1.347l.682-1.155Z"></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--kosher"><path d="m11.938 8.053 1.986-3.387H9.986L8 1.22 6.014 4.666H2.076l1.986 3.386-1.925 3.334h3.877L8 14.773l1.986-3.387h3.877l-1.925-3.333Zm.078-2.293-.7 1.199-.691-1.199h1.391Zm-1.338 2.284-1.322 2.248H6.644L5.322 8.044 6.644 5.76h2.712l1.322 2.284ZM8 3.406l.726 1.26H7.274L8 3.406ZM3.984 5.76h1.391l-.7 1.199-.691-1.199Zm0 4.533.708-1.155.683 1.155H3.984ZM8 12.603l-.718-1.217h1.435L8 12.602Zm3.307-3.5.665 1.155h-1.347l.682-1.155Z"></path></svg>';
 
 export class IconKosher extends HTMLElement {
     constructor () {

package/icons/IconKosherLarge.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--kosherLarge"><path d="m23.63 16.105 3.841-6.554H19.85L16 2.875l-3.85 6.676H4.529l3.841 6.554-3.745 6.449h7.508L16 29.125l3.841-6.554h7.534l-3.745-6.466Zm.788-4.804-1.794 3.054-1.75-3.054h3.544ZM21.6 16.096l-2.756 4.708h-5.688L10.4 16.096l2.756-4.795h5.688l2.756 4.795ZM16 6.375l1.829 3.176H14.17L16 6.375Zm-8.418 4.926h3.553l-1.75 3.054-1.803-3.054Zm.097 9.503 1.75-2.966 1.75 2.966h-3.5ZM16 25.625l-1.811-3.089h3.622L16 25.625Zm6.606-7.805 1.75 2.966h-3.482l1.732-2.966Z"></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--kosherLarge"><path d="m23.63 16.105 3.841-6.554H19.85L16 2.875l-3.85 6.676H4.529l3.841 6.554-3.745 6.449h7.508L16 29.125l3.841-6.554h7.534l-3.745-6.466Zm.788-4.804-1.794 3.054-1.75-3.054h3.544ZM21.6 16.096l-2.756 4.708h-5.688L10.4 16.096l2.756-4.795h5.688l2.756 4.795ZM16 6.375l1.829 3.176H14.17L16 6.375Zm-8.418 4.926h3.553l-1.75 3.054-1.803-3.054Zm.097 9.503 1.75-2.966 1.75 2.966h-3.5ZM16 25.625l-1.811-3.089h3.622L16 25.625Zm6.606-7.805 1.75 2.966h-3.482l1.732-2.966Z"></path></svg>';
 
 export class IconKosherLarge extends HTMLElement {
     constructor () {

package/icons/IconLanguage.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--language"><path d="M14.946 7.08c0-.264-.09-.518-.145-.772a7.053 7.053 0 0 0-2.282-3.667A7.015 7.015 0 0 0 8.534 1H7.475a7.005 7.005 0 0 0-3.674 1.387 7.039 7.039 0 0 0-2.358 3.15c-.081.236-.163.48-.226.735a7.28 7.28 0 0 0-.145.77c-.045.301-.07.604-.072.908.001.304.025.607.072.907.024.288.07.573.136.853a7.044 7.044 0 0 0 2.285 3.657A7.006 7.006 0 0 0 7.475 15H8.534a6.986 6.986 0 0 0 3.676-1.384 7.021 7.021 0 0 0 2.356-3.153 6.33 6.33 0 0 0 .226-.753c.063-.254.111-.511.145-.77.039-.302.06-.605.063-.908a7.96 7.96 0 0 0-.054-.953Zm-2.09-1.96a22.505 22.505 0 0 0-2.052-.336A9.88 9.88 0 0 0 9.8 2.634a5.647 5.647 0 0 1 3.057 2.485ZM8 2.451a8.77 8.77 0 0 1 1.311 2.195 25.118 25.118 0 0 0-2.613 0A8.734 8.734 0 0 1 8 2.452Zm-1.809.172c-.4.68-.722 1.405-.958 2.16-.688.081-1.366.19-2.044.326a5.675 5.675 0 0 1 3.02-2.477l-.018-.009ZM2.52 9.33a6.75 6.75 0 0 1-.108-.617v-.045a5.315 5.315 0 0 1 0-.662 5.579 5.579 0 0 1 0-.672c.021-.226.057-.45.108-.671.76-.195 1.53-.35 2.307-.463-.222 1.2-.222 2.43 0 3.63a20.491 20.491 0 0 1-2.307-.5Zm.624 1.552c.688.145 1.375.245 2.062.335.248.762.589 1.49 1.013 2.169a5.729 5.729 0 0 1-3.084-2.504h.01Zm4.866 2.722a8.926 8.926 0 0 1-1.32-2.26H9.32A8.69 8.69 0 0 1 8 13.558l.009.046Zm-1.754-3.63a8.783 8.783 0 0 1 0-3.892c1.164-.09 2.335-.09 3.5 0a8.782 8.782 0 0 1 0 3.874 22.78 22.78 0 0 1-3.51 0l.01.018Zm3.554 3.43c.419-.685.759-1.415 1.013-2.178a22.434 22.434 0 0 0 2.053-.326A5.71 5.71 0 0 1 9.8 13.385l.009.018Zm3.816-4.718v.045c0 .21-.063.418-.108.617-.763.195-1.536.35-2.316.463a10.365 10.365 0 0 0 0-3.584c.777.11 1.547.264 2.307.463 0 .2.09.408.117.617a.12.12 0 0 0 0 .054c.014.22.014.442 0 .663.01.214.007.43-.009.644l.01.018Z"></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--language"><path d="M14.946 7.08c0-.264-.09-.518-.145-.772a7.053 7.053 0 0 0-2.282-3.667A7.015 7.015 0 0 0 8.534 1H7.475a7.005 7.005 0 0 0-3.674 1.387 7.039 7.039 0 0 0-2.358 3.15c-.081.236-.163.48-.226.735a7.28 7.28 0 0 0-.145.77c-.045.301-.07.604-.072.908.001.304.025.607.072.907.024.288.07.573.136.853a7.044 7.044 0 0 0 2.285 3.657A7.006 7.006 0 0 0 7.475 15H8.534a6.986 6.986 0 0 0 3.676-1.384 7.021 7.021 0 0 0 2.356-3.153 6.33 6.33 0 0 0 .226-.753c.063-.254.111-.511.145-.77.039-.302.06-.605.063-.908a7.96 7.96 0 0 0-.054-.953Zm-2.09-1.96a22.505 22.505 0 0 0-2.052-.336A9.88 9.88 0 0 0 9.8 2.634a5.647 5.647 0 0 1 3.057 2.485ZM8 2.451a8.77 8.77 0 0 1 1.311 2.195 25.118 25.118 0 0 0-2.613 0A8.734 8.734 0 0 1 8 2.452Zm-1.809.172c-.4.68-.722 1.405-.958 2.16-.688.081-1.366.19-2.044.326a5.675 5.675 0 0 1 3.02-2.477l-.018-.009ZM2.52 9.33a6.75 6.75 0 0 1-.108-.617v-.045a5.315 5.315 0 0 1 0-.662 5.579 5.579 0 0 1 0-.672c.021-.226.057-.45.108-.671.76-.195 1.53-.35 2.307-.463-.222 1.2-.222 2.43 0 3.63a20.491 20.491 0 0 1-2.307-.5Zm.624 1.552c.688.145 1.375.245 2.062.335.248.762.589 1.49 1.013 2.169a5.729 5.729 0 0 1-3.084-2.504h.01Zm4.866 2.722a8.926 8.926 0 0 1-1.32-2.26H9.32A8.69 8.69 0 0 1 8 13.558l.009.046Zm-1.754-3.63a8.783 8.783 0 0 1 0-3.892c1.164-.09 2.335-.09 3.5 0a8.782 8.782 0 0 1 0 3.874 22.78 22.78 0 0 1-3.51 0l.01.018Zm3.554 3.43c.419-.685.759-1.415 1.013-2.178a22.434 22.434 0 0 0 2.053-.326A5.71 5.71 0 0 1 9.8 13.385l.009.018Zm3.816-4.718v.045c0 .21-.063.418-.108.617-.763.195-1.536.35-2.316.463a10.365 10.365 0 0 0 0-3.584c.777.11 1.547.264 2.307.463 0 .2.09.408.117.617a.12.12 0 0 0 0 .054c.014.22.014.442 0 .663.01.214.007.43-.009.644l.01.018Z"></path></svg>';
 
 export class IconLanguage extends HTMLElement {
     constructor () {

package/icons/IconLanguageLarge.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--languageLarge"><path d="M27.664 19.719a12.146 12.146 0 0 0 0-7.455v-.07a12.25 12.25 0 0 0-23.275 0h-.07v.087a12.145 12.145 0 0 0 0 7.455v.07a12.25 12.25 0 0 0 23.275 0h.043l.027-.087Zm-15.217-.657a15.69 15.69 0 0 1 0-6.125 54.607 54.607 0 0 1 7.08 0 15.855 15.855 0 0 1 0 6.126 56.07 56.07 0 0 1-7.08 0Zm6.59 1.75a15.462 15.462 0 0 1-3.09 5.373 15.489 15.489 0 0 1-3.036-5.381c1.059.052 2.109.096 3.159.096 1.05 0 1.977 0 2.966-.052v-.035ZM5.5 16c0-.76.084-1.517.254-2.258l1.81-.28a53.691 53.691 0 0 1 3.107-.384 17.607 17.607 0 0 0 0 5.827 46.307 46.307 0 0 1-2.581-.315l-2.328-.341A10.604 10.604 0 0 1 5.5 16Zm7.455-4.848a15.305 15.305 0 0 1 3.089-5.372 15.278 15.278 0 0 1 3.036 5.381 57.195 57.195 0 0 0-6.125-.008Zm8.391 1.943c.875.087 1.75.184 2.581.315l2.328.341c.161.739.244 1.493.245 2.249 0 .76-.085 1.517-.254 2.258l-1.811.28c-1.033.157-2.074.28-3.106.384.33-1.928.335-3.897.017-5.827Zm4.279-1.199-1.47-.219a57.303 57.303 0 0 0-3.238-.376 16.992 16.992 0 0 0-2.695-5.547 10.5 10.5 0 0 1 7.403 6.142ZM13.804 5.771a16.878 16.878 0 0 0-2.765 5.557 54.69 54.69 0 0 0-3.772.446l-.892.105a10.5 10.5 0 0 1 7.464-6.152l-.035.044Zm-7.43 14.333 1.47.219c1.077.157 2.153.28 3.238.376a16.994 16.994 0 0 0 2.695 5.547 10.499 10.499 0 0 1-7.402-6.142Zm11.822 6.125a16.967 16.967 0 0 0 2.765-5.556c1.26-.105 2.52-.254 3.771-.447l.893-.105a10.5 10.5 0 0 1-7.464 6.152l.035-.044Z"></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--languageLarge"><path d="M27.664 19.719a12.146 12.146 0 0 0 0-7.455v-.07a12.25 12.25 0 0 0-23.275 0h-.07v.087a12.145 12.145 0 0 0 0 7.455v.07a12.25 12.25 0 0 0 23.275 0h.043l.027-.087Zm-15.217-.657a15.69 15.69 0 0 1 0-6.125 54.607 54.607 0 0 1 7.08 0 15.855 15.855 0 0 1 0 6.126 56.07 56.07 0 0 1-7.08 0Zm6.59 1.75a15.462 15.462 0 0 1-3.09 5.373 15.489 15.489 0 0 1-3.036-5.381c1.059.052 2.109.096 3.159.096 1.05 0 1.977 0 2.966-.052v-.035ZM5.5 16c0-.76.084-1.517.254-2.258l1.81-.28a53.691 53.691 0 0 1 3.107-.384 17.607 17.607 0 0 0 0 5.827 46.307 46.307 0 0 1-2.581-.315l-2.328-.341A10.604 10.604 0 0 1 5.5 16Zm7.455-4.848a15.305 15.305 0 0 1 3.089-5.372 15.278 15.278 0 0 1 3.036 5.381 57.195 57.195 0 0 0-6.125-.008Zm8.391 1.943c.875.087 1.75.184 2.581.315l2.328.341c.161.739.244 1.493.245 2.249 0 .76-.085 1.517-.254 2.258l-1.811.28c-1.033.157-2.074.28-3.106.384.33-1.928.335-3.897.017-5.827Zm4.279-1.199-1.47-.219a57.303 57.303 0 0 0-3.238-.376 16.992 16.992 0 0 0-2.695-5.547 10.5 10.5 0 0 1 7.403 6.142ZM13.804 5.771a16.878 16.878 0 0 0-2.765 5.557 54.69 54.69 0 0 0-3.772.446l-.892.105a10.5 10.5 0 0 1 7.464-6.152l-.035.044Zm-7.43 14.333 1.47.219c1.077.157 2.153.28 3.238.376a16.994 16.994 0 0 0 2.695 5.547 10.499 10.499 0 0 1-7.402-6.142Zm11.822 6.125a16.967 16.967 0 0 0 2.765-5.556c1.26-.105 2.52-.254 3.771-.447l.893-.105a10.5 10.5 0 0 1-7.464 6.152l.035-.044Z"></path></svg>';
 
 export class IconLanguageLarge extends HTMLElement {
     constructor () {

package/icons/IconLaptop.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--laptop"><path d="M13.031 9.549V4.5A1.54 1.54 0 0 0 11.5 2.969h-7A1.54 1.54 0 0 0 2.969 4.5v5.049l-1.75 2.625v.201a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531v-.201l-1.75-2.625ZM4.281 4.5a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v4.594H4.28V4.5Zm8.969 8.094H9.566l-.315-.718H6.75l-.315.718H2.75a.229.229 0 0 1-.175-.088l1.4-2.1h8.05l1.4 2.1a.228.228 0 0 1-.175.088Z"></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--laptop"><path d="M13.031 9.549V4.5A1.54 1.54 0 0 0 11.5 2.969h-7A1.54 1.54 0 0 0 2.969 4.5v5.049l-1.75 2.625v.201a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531v-.201l-1.75-2.625ZM4.281 4.5a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v4.594H4.28V4.5Zm8.969 8.094H9.566l-.315-.718H6.75l-.315.718H2.75a.229.229 0 0 1-.175-.088l1.4-2.1h8.05l1.4 2.1a.228.228 0 0 1-.175.088Z"></path></svg>';
 
 export class IconLaptop extends HTMLElement {
     constructor () {

package/icons/IconLaptopError.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--laptopError"><path d="m8.919 6.25.971-.963-.928-.927L8 5.305l-.963-.945-.927.927.945.963h.07l-1.015.963.927.927L8 7.195l.962.945.928-.928-.945-.962h-.026Z"></path><path d="M13.031 9.111V4.062a1.54 1.54 0 0 0-1.531-1.53h-7a1.54 1.54 0 0 0-1.531 1.53v5.05l-1.75 2.624v.201A1.54 1.54 0 0 0 2.75 13.47h10.5a1.54 1.54 0 0 0 1.531-1.531v-.202l-1.75-2.625Zm-8.75-5.049a.219.219 0 0 1 .219-.218h7a.219.219 0 0 1 .219.219v4.593H4.28V4.062Zm8.969 8.094H9.566l-.315-.717H6.75l-.315.717H2.75a.227.227 0 0 1-.175-.087l1.4-2.1h8.05l1.4 2.1a.228.228 0 0 1-.175.087Z"></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--laptopError"><path d="m8.919 6.25.971-.963-.928-.927L8 5.305l-.963-.945-.927.927.945.963h.07l-1.015.963.927.927L8 7.195l.962.945.928-.928-.945-.962h-.026Z"></path><path d="M13.031 9.111V4.062a1.54 1.54 0 0 0-1.531-1.53h-7a1.54 1.54 0 0 0-1.531 1.53v5.05l-1.75 2.624v.201A1.54 1.54 0 0 0 2.75 13.47h10.5a1.54 1.54 0 0 0 1.531-1.531v-.202l-1.75-2.625Zm-8.75-5.049a.219.219 0 0 1 .219-.218h7a.219.219 0 0 1 .219.219v4.593H4.28V4.062Zm8.969 8.094H9.566l-.315-.717H6.75l-.315.717H2.75a.227.227 0 0 1-.175-.087l1.4-2.1h8.05l1.4 2.1a.228.228 0 0 1-.175.087Z"></path></svg>';
 
 export class IconLaptopError extends HTMLElement {
     constructor () {

package/icons/IconLaptopErrorLarge.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--laptopErrorLarge"><path d="m18.817 8.449-2.835 2.8-2.8-2.8-1.233 1.233 2.817 2.81-2.817 2.825 1.233 1.234 2.835-2.8 2.8 2.8 1.234-1.233-2.817-2.818 2.817-2.818-1.233-1.233Z"></path><path d="M26.5 19.264V7.25a2.625 2.625 0 0 0-2.625-2.625H8.125A2.625 2.625 0 0 0 5.5 7.25v12.014L2 25.389v.236a2.625 2.625 0 0 0 2.625 2.625h22.75A2.625 2.625 0 0 0 30 25.625v-.236l-3.5-6.125ZM7.25 7.25a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v11.375H7.25V7.25ZM27.375 26.5h-8.207l-.657-.875H13.49l-.657.875H4.625a.875.875 0 0 1-.875-.683l3.133-5.442h18.235l3.132 5.442a.875.875 0 0 1-.875.683Z"></path><path d="M17.75 22.125h-3.5v1.75h3.5v-1.75Z"></path><path d="M23 22.125h-3.5v1.75H23v-1.75Z"></path><path d="M12.5 22.125H9v1.75h3.5v-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--laptopErrorLarge"><path d="m18.817 8.449-2.835 2.8-2.8-2.8-1.233 1.233 2.817 2.81-2.817 2.825 1.233 1.234 2.835-2.8 2.8 2.8 1.234-1.233-2.817-2.818 2.817-2.818-1.233-1.233Z"></path><path d="M26.5 19.264V7.25a2.625 2.625 0 0 0-2.625-2.625H8.125A2.625 2.625 0 0 0 5.5 7.25v12.014L2 25.389v.236a2.625 2.625 0 0 0 2.625 2.625h22.75A2.625 2.625 0 0 0 30 25.625v-.236l-3.5-6.125ZM7.25 7.25a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v11.375H7.25V7.25ZM27.375 26.5h-8.207l-.657-.875H13.49l-.657.875H4.625a.875.875 0 0 1-.875-.683l3.133-5.442h18.235l3.132 5.442a.875.875 0 0 1-.875.683Z"></path><path d="M17.75 22.125h-3.5v1.75h3.5v-1.75Z"></path><path d="M23 22.125h-3.5v1.75H23v-1.75Z"></path><path d="M12.5 22.125H9v1.75h3.5v-1.75Z"></path></svg>';
 
 export class IconLaptopErrorLarge extends HTMLElement {
     constructor () {

package/icons/IconLaptopHighlight.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--laptopHighlight"><path d="M13.031 9.094V4.5A1.54 1.54 0 0 0 11.5 2.969h-7A1.54 1.54 0 0 0 2.969 4.5v4.594h-1.75V11.5a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V9.094h-1.75ZM4.281 4.5a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v4.594H4.28V4.5Zm9.188 7a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-1.094H13.47V11.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--laptopHighlight"><path d="M13.031 9.094V4.5A1.54 1.54 0 0 0 11.5 2.969h-7A1.54 1.54 0 0 0 2.969 4.5v4.594h-1.75V11.5a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V9.094h-1.75ZM4.281 4.5a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v4.594H4.28V4.5Zm9.188 7a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-1.094H13.47V11.5Z"></path></svg>';
 
 export class IconLaptopHighlight extends HTMLElement {
     constructor () {

package/icons/IconLaptopHighlightLarge.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--laptopHighlightLarge"><path d="m21.346 8.125 1.558-3.106-1.558-.788-1.942 3.877.035.017h1.907Z"></path><path d="M16.875 2.875h-1.75v5.25h1.75v-5.25Z"></path><path d="m12.561 8.125.035-.018-1.942-3.876-1.558.788 1.549 3.106h1.916Z"></path><path d="M25.625 22.125V12.5A2.625 2.625 0 0 0 23 9.875H9A2.625 2.625 0 0 0 6.375 12.5v9.625H3.75v3.5a2.625 2.625 0 0 0 2.625 2.625h19.25a2.625 2.625 0 0 0 2.625-2.625v-3.5h-2.625ZM8.125 12.5A.875.875 0 0 1 9 11.625h14a.875.875 0 0 1 .875.875v9.625H8.125V12.5ZM26.5 25.625a.875.875 0 0 1-.875.875H6.375a.875.875 0 0 1-.875-.875v-1.75h7.875v.875h5.25v-.875H26.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--laptopHighlightLarge"><path d="m21.346 8.125 1.558-3.106-1.558-.788-1.942 3.877.035.017h1.907Z"></path><path d="M16.875 2.875h-1.75v5.25h1.75v-5.25Z"></path><path d="m12.561 8.125.035-.018-1.942-3.876-1.558.788 1.549 3.106h1.916Z"></path><path d="M25.625 22.125V12.5A2.625 2.625 0 0 0 23 9.875H9A2.625 2.625 0 0 0 6.375 12.5v9.625H3.75v3.5a2.625 2.625 0 0 0 2.625 2.625h19.25a2.625 2.625 0 0 0 2.625-2.625v-3.5h-2.625ZM8.125 12.5A.875.875 0 0 1 9 11.625h14a.875.875 0 0 1 .875.875v9.625H8.125V12.5ZM26.5 25.625a.875.875 0 0 1-.875.875H6.375a.875.875 0 0 1-.875-.875v-1.75h7.875v.875h5.25v-.875H26.5v1.75Z"></path></svg>';
 
 export class IconLaptopHighlightLarge extends HTMLElement {
     constructor () {

package/icons/IconLaptopLarge.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--laptopLarge"><path d="M26.5 19.264V7.25a2.625 2.625 0 0 0-2.625-2.625H8.125A2.625 2.625 0 0 0 5.5 7.25v12.014L2 25.389v.236a2.625 2.625 0 0 0 2.625 2.625h22.75A2.625 2.625 0 0 0 30 25.625v-.236l-3.5-6.125ZM7.25 7.25a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v11.375H7.25V7.25ZM27.375 26.5h-8.207l-.657-.875H13.49l-.657.875H4.625a.875.875 0 0 1-.875-.683l3.133-5.442h18.235l3.132 5.442a.875.875 0 0 1-.875.683ZM9 22.125h3.5v1.75H9v-1.75Zm10.5 0H23v1.75h-3.5v-1.75Zm-5.25 0h3.5v1.75h-3.5v-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--laptopLarge"><path d="M26.5 19.264V7.25a2.625 2.625 0 0 0-2.625-2.625H8.125A2.625 2.625 0 0 0 5.5 7.25v12.014L2 25.389v.236a2.625 2.625 0 0 0 2.625 2.625h22.75A2.625 2.625 0 0 0 30 25.625v-.236l-3.5-6.125ZM7.25 7.25a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v11.375H7.25V7.25ZM27.375 26.5h-8.207l-.657-.875H13.49l-.657.875H4.625a.875.875 0 0 1-.875-.683l3.133-5.442h18.235l3.132 5.442a.875.875 0 0 1-.875.683ZM9 22.125h3.5v1.75H9v-1.75Zm10.5 0H23v1.75h-3.5v-1.75Zm-5.25 0h3.5v1.75h-3.5v-1.75Z"></path></svg>';
 
 export class IconLaptopLarge extends HTMLElement {
     constructor () {

package/icons/IconLaptopSuccess.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--laptopSuccess"><path d="M13.031 9.479V3.625A1.54 1.54 0 0 0 11.5 2.094h-7a1.54 1.54 0 0 0-1.531 1.531v5.854l-1.75 1.75v1.146a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531v-1.146l-1.75-1.75Zm-8.75-5.854a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v5.469H4.28V3.625Zm9.188 8.75a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-.604l1.365-1.365h8.208l1.365 1.365v.604ZM9.374 4.5l.927.875-2.957 2.992-1.645-1.653.927-.928.718.718L9.374 4.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--laptopSuccess"><path d="M13.031 9.479V3.625A1.54 1.54 0 0 0 11.5 2.094h-7a1.54 1.54 0 0 0-1.531 1.531v5.854l-1.75 1.75v1.146a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531v-1.146l-1.75-1.75Zm-8.75-5.854a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v5.469H4.28V3.625Zm9.188 8.75a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-.604l1.365-1.365h8.208l1.365 1.365v.604ZM9.374 4.5l.927.875-2.957 2.992-1.645-1.653.927-.928.718.718L9.374 4.5Z"></path></svg>';
 
 export class IconLaptopSuccess extends HTMLElement {
     constructor () {

package/icons/IconLaptopSuccessLarge.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--laptopSuccessLarge"><path d="M25.625 19.141V7.25A2.625 2.625 0 0 0 23 4.625H9A2.625 2.625 0 0 0 6.375 7.25v11.891l-3.5 3.5v2.109A2.625 2.625 0 0 0 5.5 27.375h21a2.625 2.625 0 0 0 2.625-2.625v-2.109l-3.5-3.5ZM8.125 7.25A.875.875 0 0 1 9 6.375h14a.875.875 0 0 1 .875.875v11.375H8.125V7.25Zm19.25 17.5a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875v-1.391l2.984-2.984H24.39l2.984 2.984v1.391ZM19.062 9.254l1.243 1.242-5.617 5.609-2.993-2.984 1.242-1.242 1.75 1.75 4.376-4.375Zm-.358 12.871.7 1.75h-6.808l.7-1.75h5.408Z"></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--laptopSuccessLarge"><path d="M25.625 19.141V7.25A2.625 2.625 0 0 0 23 4.625H9A2.625 2.625 0 0 0 6.375 7.25v11.891l-3.5 3.5v2.109A2.625 2.625 0 0 0 5.5 27.375h21a2.625 2.625 0 0 0 2.625-2.625v-2.109l-3.5-3.5ZM8.125 7.25A.875.875 0 0 1 9 6.375h14a.875.875 0 0 1 .875.875v11.375H8.125V7.25Zm19.25 17.5a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875v-1.391l2.984-2.984H24.39l2.984 2.984v1.391ZM19.062 9.254l1.243 1.242-5.617 5.609-2.993-2.984 1.242-1.242 1.75 1.75 4.376-4.375Zm-.358 12.871.7 1.75h-6.808l.7-1.75h5.408Z"></path></svg>';
 
 export class IconLaptopSuccessLarge extends HTMLElement {
     constructor () {

package/icons/IconLaw.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--law"><g clip-path="url(#prefix__clip0_6703_3640)"><path fill-rule="evenodd" d="m9.247 8.634-.45.451.935.936 4-3.999-.937-.936-.455.455L9.899 3.1l.455-.455-.937-.936-3.99 3.99.937.936.455-.455.743.744-5.827 5.836.936.936L8.49 7.877l.757.757Zm-1.5-3.382 2.44 2.442 1.217-1.217-2.442-2.44-1.216 1.215Z" clip-rule="evenodd"></path><path d="M8.035 11.929h5.574l-.35-1.322H8.385l-.35 1.322Z"></path><path d="M13.845 12.813H7.8l-.35 1.32h6.746l-.35-1.32Z"></path></g><defs><clipPath id="prefix__clip0_6703_3640"><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--law"><g clip-path="url(#prefix__clip0_6703_3640)"><path fill-rule="evenodd" d="m9.247 8.634-.45.451.935.936 4-3.999-.937-.936-.455.455L9.899 3.1l.455-.455-.937-.936-3.99 3.99.937.936.455-.455.743.744-5.827 5.836.936.936L8.49 7.877l.757.757Zm-1.5-3.382 2.44 2.442 1.217-1.217-2.442-2.44-1.216 1.215Z" clip-rule="evenodd"></path><path d="M8.035 11.929h5.574l-.35-1.322H8.385l-.35 1.322Z"></path><path d="M13.845 12.813H7.8l-.35 1.32h6.746l-.35-1.32Z"></path></g><defs><clipPath id="prefix__clip0_6703_3640"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconLaw extends HTMLElement {
     constructor () {

package/icons/IconLawLarge.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--lawLarge"><path fill-rule="evenodd" d="m19.21 19.255-1.233-1.234v-.009l.849-.848-1.908-1.908L6.103 26.071 4.87 24.837l10.806-10.814-1.881-1.882-.85.849-1.233-1.234 6.921-6.921 1.234 1.234-.849.848 5.032 5.032.848-.849 1.234 1.234-6.921 6.921ZM17.786 8.16l-2.757 2.756 5.032 5.023 2.747-2.748-5.022-5.031Z" clip-rule="evenodd"></path><path d="m26.08 23.14-.472-1.741h-8.506l-.472 1.741h9.45Z"></path><path d="M26.692 25.476H16.01l-.464 1.75h11.62l-.473-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--lawLarge"><path fill-rule="evenodd" d="m19.21 19.255-1.233-1.234v-.009l.849-.848-1.908-1.908L6.103 26.071 4.87 24.837l10.806-10.814-1.881-1.882-.85.849-1.233-1.234 6.921-6.921 1.234 1.234-.849.848 5.032 5.032.848-.849 1.234 1.234-6.921 6.921ZM17.786 8.16l-2.757 2.756 5.032 5.023 2.747-2.748-5.022-5.031Z" clip-rule="evenodd"></path><path d="m26.08 23.14-.472-1.741h-8.506l-.472 1.741h9.45Z"></path><path d="M26.692 25.476H16.01l-.464 1.75h11.62l-.473-1.75Z"></path></svg>';
 
 export class IconLawLarge extends HTMLElement {
     constructor () {

package/icons/IconLayers.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--layers"><path d="M13.469 5.375 8 1.228 2.531 5.375a1.593 1.593 0 0 0 0 2.52L2.68 8l.822-.621.263-.201-.438-.333a.28.28 0 0 1 0-.437L8 2.873l4.672 3.5a.28.28 0 0 1 0 .437l-.437.333.263.2.822.622.149-.114a1.592 1.592 0 0 0 0-2.52v.044Z"></path><path d="M13.469 8.114 13.319 8l-.822.621-.262.202.438.332a.28.28 0 0 1 0 .438L8 13.127l-4.673-3.5a.254.254 0 0 1-.105-.218l.543-.551-.263-.202L2.68 8l-.149.114a1.593 1.593 0 0 0 0 2.52L8 14.773l5.469-4.148a1.592 1.592 0 0 0 0-2.52v.009Z"></path><path d="m8 12.034 4.235-3.211.262-.202L13.32 8l-.823-.621-.262-.201L11.141 8 8 10.38 3.774 7.178l-.272.2L2.68 8l.822.621.272.202L8 12.033Z"></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--layers"><path d="M13.469 5.375 8 1.228 2.531 5.375a1.593 1.593 0 0 0 0 2.52L2.68 8l.822-.621.263-.201-.438-.333a.28.28 0 0 1 0-.437L8 2.873l4.672 3.5a.28.28 0 0 1 0 .437l-.437.333.263.2.822.622.149-.114a1.592 1.592 0 0 0 0-2.52v.044Z"></path><path d="M13.469 8.114 13.319 8l-.822.621-.262.202.438.332a.28.28 0 0 1 0 .438L8 13.127l-4.673-3.5a.254.254 0 0 1-.105-.218l.543-.551-.263-.202L2.68 8l-.149.114a1.593 1.593 0 0 0 0 2.52L8 14.773l5.469-4.148a1.592 1.592 0 0 0 0-2.52v.009Z"></path><path d="m8 12.034 4.235-3.211.262-.202L13.32 8l-.823-.621-.262-.201L11.141 8 8 10.38 3.774 7.178l-.272.2L2.68 8l.822.621.272.202L8 12.033Z"></path></svg>';
 
 export class IconLayers extends HTMLElement {
     constructor () {

package/icons/IconLayersLarge.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--layersLarge"><path d="M16 21.39 8.895 16l-1.452 1.094L16 23.586l8.558-6.492L23.114 16 16 21.39Z"></path><path d="M6.28 14.023a.998.998 0 0 1 0-1.602L16 5.054l9.722 7.367a.998.998 0 0 1 0 1.602l-1.164.875L26.01 16l.77-.586a2.748 2.748 0 0 0 0-4.375L16 2.875 5.22 11.03a2.747 2.747 0 0 0 0 4.375l.77.586 1.453-1.093-1.164-.875Z"></path><path d="M26.78 16.586 26.01 16l-1.452 1.094 1.164.875a.997.997 0 0 1 0 1.601L16 26.946 6.28 19.58a.999.999 0 0 1 0-1.602l1.163-.875L5.99 16l-.77.586a2.748 2.748 0 0 0 0 4.375L16 29.125l10.78-8.172a2.748 2.748 0 0 0 0-4.375v.008Z"></path><path d="m8.895 16-1.452-1.102L5.99 16l1.453 1.094L8.895 16Z"></path><path d="m23.114 16 1.444 1.094L26.01 16l-1.452-1.102L23.114 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--layersLarge"><path d="M16 21.39 8.895 16l-1.452 1.094L16 23.586l8.558-6.492L23.114 16 16 21.39Z"></path><path d="M6.28 14.023a.998.998 0 0 1 0-1.602L16 5.054l9.722 7.367a.998.998 0 0 1 0 1.602l-1.164.875L26.01 16l.77-.586a2.748 2.748 0 0 0 0-4.375L16 2.875 5.22 11.03a2.747 2.747 0 0 0 0 4.375l.77.586 1.453-1.093-1.164-.875Z"></path><path d="M26.78 16.586 26.01 16l-1.452 1.094 1.164.875a.997.997 0 0 1 0 1.601L16 26.946 6.28 19.58a.999.999 0 0 1 0-1.602l1.163-.875L5.99 16l-.77.586a2.748 2.748 0 0 0 0 4.375L16 29.125l10.78-8.172a2.748 2.748 0 0 0 0-4.375v.008Z"></path><path d="m8.895 16-1.452-1.102L5.99 16l1.453 1.094L8.895 16Z"></path><path d="m23.114 16 1.444 1.094L26.01 16l-1.452-1.102L23.114 16Z"></path></svg>';
 
 export class IconLayersLarge extends HTMLElement {
     constructor () {

package/icons/IconLei.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--lei"><path d="M2.978 4.299H4.28v7.096H2.978V4.299Zm7.402 4.576a2.4 2.4 0 0 1-.053.455H6.706A1.26 1.26 0 0 0 8 10.363a1.627 1.627 0 0 0 1.225-.473l.805.77A2.624 2.624 0 0 1 8 11.5a2.484 2.484 0 0 1-2.625-2.625A2.432 2.432 0 0 1 7.869 6.25a2.415 2.415 0 0 1 2.511 2.625Zm-1.295-.464a1.138 1.138 0 0 0-1.199-.997 1.12 1.12 0 0 0-1.19.997h2.389Zm2.415 2.984h1.304v-4.97H11.5v4.97Zm.648-5.539a.753.753 0 1 0-.78-.743.736.736 0 0 0 .745.743h.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 16 16" class="c-pieIcon c-pieIcon--lei"><path d="M2.978 4.299H4.28v7.096H2.978V4.299Zm7.402 4.576a2.4 2.4 0 0 1-.053.455H6.706A1.26 1.26 0 0 0 8 10.363a1.627 1.627 0 0 0 1.225-.473l.805.77A2.624 2.624 0 0 1 8 11.5a2.484 2.484 0 0 1-2.625-2.625A2.432 2.432 0 0 1 7.869 6.25a2.415 2.415 0 0 1 2.511 2.625Zm-1.295-.464a1.138 1.138 0 0 0-1.199-.997 1.12 1.12 0 0 0-1.19.997h2.389Zm2.415 2.984h1.304v-4.97H11.5v4.97Zm.648-5.539a.753.753 0 1 0-.78-.743.736.736 0 0 0 .745.743h.035Z"></path></svg>';
 
 export class IconLei extends HTMLElement {
     constructor () {

package/icons/IconLeiLarge.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--leiLarge"><path d="M9.77 10.75h1.593v8.645H9.77V10.75Zm9.301 5.6c0 .185-.021.37-.061.551h-4.436a1.548 1.548 0 0 0 1.583 1.225 2.005 2.005 0 0 0 1.497-.569l.971.937a3.204 3.204 0 0 1-2.52 1.006 3.028 3.028 0 0 1-3.133-3.168A2.965 2.965 0 0 1 16 13.192a2.95 2.95 0 0 1 3.071 3.158Zm-1.584-.595A1.39 1.39 0 0 0 16 14.539a1.374 1.374 0 0 0-1.453 1.216h2.94Zm3.947-4.926a.874.874 0 0 0-.954.918.954.954 0 0 0 1.907 0 .876.876 0 0 0-.953-.918Zm-.797 8.566h1.593v-6.02h-1.593v6.02ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 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--leiLarge"><path d="M9.77 10.75h1.593v8.645H9.77V10.75Zm9.301 5.6c0 .185-.021.37-.061.551h-4.436a1.548 1.548 0 0 0 1.583 1.225 2.005 2.005 0 0 0 1.497-.569l.971.937a3.204 3.204 0 0 1-2.52 1.006 3.028 3.028 0 0 1-3.133-3.168A2.965 2.965 0 0 1 16 13.192a2.95 2.95 0 0 1 3.071 3.158Zm-1.584-.595A1.39 1.39 0 0 0 16 14.539a1.374 1.374 0 0 0-1.453 1.216h2.94Zm3.947-4.926a.874.874 0 0 0-.954.918.954.954 0 0 0 1.907 0 .876.876 0 0 0-.953-.918Zm-.797 8.566h1.593v-6.02h-1.593v6.02ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></svg>';
 
 export class IconLeiLarge extends HTMLElement {
     constructor () {

package/icons/IconLev.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--lev"><g clip-path="url(#prefix__clip0_18_2449)"><path d="M2.969 3.844H7.78v8.426H6.47V5.156H4.28c0 2.249-.332 6.782-3.281 6.782v-1.313c1.75 0 1.969-3.841 1.969-6.125v-.656ZM15 9.899a2.45 2.45 0 0 1-2.695 2.327H9.313V3.81h2.835a2.231 2.231 0 0 1 2.467 2.266 1.96 1.96 0 0 1-1.12 1.75A2.109 2.109 0 0 1 15 9.899Zm-4.463-2.477h1.47a1.242 1.242 0 0 0 1.374-1.268 1.223 1.223 0 0 0-1.365-1.26H10.53l.008 2.528ZM13.75 9.82a1.303 1.303 0 0 0-1.47-1.339h-1.75v2.625h1.75A1.293 1.293 0 0 0 13.74 9.82h.009Z"></path></g><defs><clipPath id="prefix__clip0_18_2449"><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--lev"><g clip-path="url(#prefix__clip0_18_2449)"><path d="M2.969 3.844H7.78v8.426H6.47V5.156H4.28c0 2.249-.332 6.782-3.281 6.782v-1.313c1.75 0 1.969-3.841 1.969-6.125v-.656ZM15 9.899a2.45 2.45 0 0 1-2.695 2.327H9.313V3.81h2.835a2.231 2.231 0 0 1 2.467 2.266 1.96 1.96 0 0 1-1.12 1.75A2.109 2.109 0 0 1 15 9.899Zm-4.463-2.477h1.47a1.242 1.242 0 0 0 1.374-1.268 1.223 1.223 0 0 0-1.365-1.26H10.53l.008 2.528ZM13.75 9.82a1.303 1.303 0 0 0-1.47-1.339h-1.75v2.625h1.75A1.293 1.293 0 0 0 13.74 9.82h.009Z"></path></g><defs><clipPath id="prefix__clip0_18_2449"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconLev extends HTMLElement {
     constructor () {

package/icons/IconLevLarge.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--levLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21ZM9.875 12.036h5.25v7.359h-1.75v-5.609h-1.75c-.227 4.944-2.266 5.714-3.5 5.714v-1.75c1.076 0 1.75-1.855 1.75-4.839v-.875Zm11.664 3.5a1.752 1.752 0 0 0 .875-1.444c0-1.172-.875-2.1-2.477-2.1h-3.14v7.403h3.22c1.75 0 2.808-.945 2.808-2.161a1.83 1.83 0 0 0-1.286-1.698Zm-3.019-2.161h1.19c.604 0 1.015.324 1.015.875 0 .551-.411.875-1.015.875h-1.19v-1.75Zm1.391 4.725H18.52v-1.864h1.391c.718 0 1.181.324 1.181.875 0 .552-.463.945-1.18.945v.044Z"></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--levLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21ZM9.875 12.036h5.25v7.359h-1.75v-5.609h-1.75c-.227 4.944-2.266 5.714-3.5 5.714v-1.75c1.076 0 1.75-1.855 1.75-4.839v-.875Zm11.664 3.5a1.752 1.752 0 0 0 .875-1.444c0-1.172-.875-2.1-2.477-2.1h-3.14v7.403h3.22c1.75 0 2.808-.945 2.808-2.161a1.83 1.83 0 0 0-1.286-1.698Zm-3.019-2.161h1.19c.604 0 1.015.324 1.015.875 0 .551-.411.875-1.015.875h-1.19v-1.75Zm1.391 4.725H18.52v-1.864h1.391c.718 0 1.181.324 1.181.875 0 .552-.463.945-1.18.945v.044Z"></path></svg>';
 
 export class IconLevLarge extends HTMLElement {
     constructor () {

package/icons/IconLightning.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--lightning"><path d="M8.963 6.329V1.438H7.746L3.818 8.954a.875.875 0 0 0 .778 1.286H7.65v4.322h1.479l3.657-6.956a.876.876 0 0 0-.77-1.277H8.963Zm-3.65 2.625L7.65 4.5v2.266a.875.875 0 0 0 .875.875h2.765L8.963 12.07V9.802a.875.875 0 0 0-.875-.874l-2.774.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--lightning"><path d="M8.963 6.329V1.438H7.746L3.818 8.954a.875.875 0 0 0 .778 1.286H7.65v4.322h1.479l3.657-6.956a.876.876 0 0 0-.77-1.277H8.963Zm-3.65 2.625L7.65 4.5v2.266a.875.875 0 0 0 .875.875h2.765L8.963 12.07V9.802a.875.875 0 0 0-.875-.874l-2.774.026Z"></path></svg>';
 
 export class IconLightning extends HTMLElement {
     constructor () {

package/icons/IconLightningLarge.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--lightningLarge"><path d="m14.539 3.75-6.93 13.274a1.75 1.75 0 0 0 1.549 2.563h5.967v8.663h2.354l6.904-13.125a1.75 1.75 0 0 0-1.55-2.564h-5.958V3.75H14.54Zm8.295 10.544-5.959 11.331V19.29a1.453 1.453 0 0 0-1.461-1.453H9.158l5.967-11.462v6.431a1.452 1.452 0 0 0 1.453 1.453l6.256.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--lightningLarge"><path d="m14.539 3.75-6.93 13.274a1.75 1.75 0 0 0 1.549 2.563h5.967v8.663h2.354l6.904-13.125a1.75 1.75 0 0 0-1.55-2.564h-5.958V3.75H14.54Zm8.295 10.544-5.959 11.331V19.29a1.453 1.453 0 0 0-1.461-1.453H9.158l5.967-11.462v6.431a1.452 1.452 0 0 0 1.453 1.453l6.256.035Z"></path></svg>';
 
 export class IconLightningLarge extends HTMLElement {
     constructor () {

package/icons/IconLink.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--link"><path d="M2.531 8.438c-.01-.861.302-1.695.875-2.337a2.791 2.791 0 0 1 2.074-.945h1.645V3.844H5.48a4.121 4.121 0 0 0-3.036 1.365 4.813 4.813 0 0 0-1.225 3.229 4.445 4.445 0 0 0 4.26 4.593h1.646V11.72H5.48A3.133 3.133 0 0 1 2.53 8.438Z"></path><path d="M10.52 3.844H8.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.813 4.813 0 0 0 1.225-3.229 4.445 4.445 0 0 0-4.261-4.593Z"></path><path d="M5.471 9.094h5.058l.603-1.313H4.867l.604 1.313Z"></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--link"><path d="M2.531 8.438c-.01-.861.302-1.695.875-2.337a2.791 2.791 0 0 1 2.074-.945h1.645V3.844H5.48a4.121 4.121 0 0 0-3.036 1.365 4.813 4.813 0 0 0-1.225 3.229 4.445 4.445 0 0 0 4.26 4.593h1.646V11.72H5.48A3.133 3.133 0 0 1 2.53 8.438Z"></path><path d="M10.52 3.844H8.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.813 4.813 0 0 0 1.225-3.229 4.445 4.445 0 0 0-4.261-4.593Z"></path><path d="M5.471 9.094h5.058l.603-1.313H4.867l.604 1.313Z"></path></svg>';
 
 export class IconLink extends HTMLElement {
     constructor () {

package/icons/IconLinkExternal.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--linkExternal"><path d="M13.25 3.564 8.21 8.63l-.928-.928 5.093-5.066H9.662V1.324h3.833a1.093 1.093 0 0 1 1.067 1.093V6.25H13.25V3.564Z"></path><path d="M11.302 12.831c.343-.34.537-.804.54-1.287V7.598h1.312v3.946a3.141 3.141 0 0 1-3.142 3.132h-5.46a3.141 3.141 0 0 1-3.14-3.132V6.075a3.132 3.132 0 0 1 3.14-3.132h3.79v1.312h-3.79a1.829 1.829 0 0 0-1.802 1.82v5.469a1.829 1.829 0 0 0 1.802 1.82h5.46c.484 0 .948-.192 1.29-.533Z"></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--linkExternal"><path d="M13.25 3.564 8.21 8.63l-.928-.928 5.093-5.066H9.662V1.324h3.833a1.093 1.093 0 0 1 1.067 1.093V6.25H13.25V3.564Z"></path><path d="M11.302 12.831c.343-.34.537-.804.54-1.287V7.598h1.312v3.946a3.141 3.141 0 0 1-3.142 3.132h-5.46a3.141 3.141 0 0 1-3.14-3.132V6.075a3.132 3.132 0 0 1 3.14-3.132h3.79v1.312h-3.79a1.829 1.829 0 0 0-1.802 1.82v5.469a1.829 1.829 0 0 0 1.802 1.82h5.46c.484 0 .948-.192 1.29-.533Z"></path></svg>';
 
 export class IconLinkExternal extends HTMLElement {
     constructor () {

package/icons/IconLinkExternalLarge.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--linkExternalLarge"><path d="M26.5 6.734v5.889h1.75V5.5a1.529 1.529 0 0 0 0-.35 1.75 1.75 0 0 0-1.4-1.4 1.532 1.532 0 0 0-.35 0h-7.122V5.5h5.888l-9.625 9.625-1.864 1.855 1.243 1.242 1.855-1.846L26.5 6.734Z"></path><path d="M24.872 15.598v6.124a3.911 3.911 0 0 1-3.902 3.903H10.269a3.911 3.911 0 0 1-3.894-3.894V11.03a3.911 3.911 0 0 1 3.894-3.902h6.125v-1.75h-6.125a5.696 5.696 0 0 0-5.644 5.652v10.701a5.687 5.687 0 0 0 5.688 5.688H20.97a5.696 5.696 0 0 0 5.688-5.688v-6.125l-1.786-.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 32 32" class="c-pieIcon c-pieIcon--linkExternalLarge"><path d="M26.5 6.734v5.889h1.75V5.5a1.529 1.529 0 0 0 0-.35 1.75 1.75 0 0 0-1.4-1.4 1.532 1.532 0 0 0-.35 0h-7.122V5.5h5.888l-9.625 9.625-1.864 1.855 1.243 1.242 1.855-1.846L26.5 6.734Z"></path><path d="M24.872 15.598v6.124a3.911 3.911 0 0 1-3.902 3.903H10.269a3.911 3.911 0 0 1-3.894-3.894V11.03a3.911 3.911 0 0 1 3.894-3.902h6.125v-1.75h-6.125a5.696 5.696 0 0 0-5.644 5.652v10.701a5.687 5.687 0 0 0 5.688 5.688H20.97a5.696 5.696 0 0 0 5.688-5.688v-6.125l-1.786-.008Z"></path></svg>';
 
 export class IconLinkExternalLarge extends HTMLElement {
     constructor () {

package/icons/IconLinkLarge.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--linkLarge"><g clip-path="url(#prefix__clip0_18_880)"><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="M22.125 15.125H9.875v1.75h12.25v-1.75Z"></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_880"><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--linkLarge"><g clip-path="url(#prefix__clip0_18_880)"><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="M22.125 15.125H9.875v1.75h12.25v-1.75Z"></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_880"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 export class IconLinkLarge extends HTMLElement {
     constructor () {

package/icons/IconList.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--list"><path d="M2.313 11.938a1.312 1.312 0 1 0 0-2.625 1.312 1.312 0 0 0 0 2.624Z"></path><path d="M14.125 4.719h-8.75V6.03h8.348l.402-1.312Z"></path><path d="M2.313 6.688a1.313 1.313 0 1 0 0-2.626 1.313 1.313 0 0 0 0 2.625Z"></path><path d="M12.506 9.969H5.375v1.312h6.729l.402-1.312Z"></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--list"><path d="M2.313 11.938a1.312 1.312 0 1 0 0-2.625 1.312 1.312 0 0 0 0 2.624Z"></path><path d="M14.125 4.719h-8.75V6.03h8.348l.402-1.312Z"></path><path d="M2.313 6.688a1.313 1.313 0 1 0 0-2.626 1.313 1.313 0 0 0 0 2.625Z"></path><path d="M12.506 9.969H5.375v1.312h6.729l.402-1.312Z"></path></svg>';
 
 export class IconList extends HTMLElement {
     constructor () {

package/icons/IconListLarge.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--listLarge"><path d="M27.856 8.125H10.75v1.75h16.494l.612-1.75Z"></path><path d="M5.5 24.575a1.575 1.575 0 1 0 0-3.15 1.575 1.575 0 0 0 0 3.15Z"></path><path d="M25.406 15.125H10.75v1.75h14.044l.612-1.75Z"></path><path d="M27.506 22.125H10.75v1.75h16.222l.534-1.75Z"></path><path d="M5.5 17.575a1.575 1.575 0 1 0 0-3.15 1.575 1.575 0 0 0 0 3.15Z"></path><path d="M5.5 10.575a1.575 1.575 0 1 0 0-3.15 1.575 1.575 0 0 0 0 3.15Z"></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--listLarge"><path d="M27.856 8.125H10.75v1.75h16.494l.612-1.75Z"></path><path d="M5.5 24.575a1.575 1.575 0 1 0 0-3.15 1.575 1.575 0 0 0 0 3.15Z"></path><path d="M25.406 15.125H10.75v1.75h14.044l.612-1.75Z"></path><path d="M27.506 22.125H10.75v1.75h16.222l.534-1.75Z"></path><path d="M5.5 17.575a1.575 1.575 0 1 0 0-3.15 1.575 1.575 0 0 0 0 3.15Z"></path><path d="M5.5 10.575a1.575 1.575 0 1 0 0-3.15 1.575 1.575 0 0 0 0 3.15Z"></path></svg>';
 
 export class IconListLarge extends HTMLElement {
     constructor () {

package/icons/IconLoading.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--loading"><path d="M14.781 8A6.782 6.782 0 1 1 8 1.219V2.53A5.469 5.469 0 1 0 13.469 8h1.312ZM4.72 8H6.03A1.969 1.969 0 1 1 8 9.969v1.312A3.282 3.282 0 1 0 4.719 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--loading"><path d="M14.781 8A6.782 6.782 0 1 1 8 1.219V2.53A5.469 5.469 0 1 0 13.469 8h1.312ZM4.72 8H6.03A1.969 1.969 0 1 1 8 9.969v1.312A3.282 3.282 0 1 0 4.719 8Z"></path></svg>';
 
 export class IconLoading extends HTMLElement {
     constructor () {

package/icons/IconLoadingLarge.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--loadingLarge"><path d="M28.25 16A12.25 12.25 0 1 1 16 3.75V5.5A10.5 10.5 0 1 0 26.5 16h1.75ZM9 16h1.75A5.25 5.25 0 1 1 16 21.25V23a7 7 0 1 0-7-7Z"></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--loadingLarge"><path d="M28.25 16A12.25 12.25 0 1 1 16 3.75V5.5A10.5 10.5 0 1 0 26.5 16h1.75ZM9 16h1.75A5.25 5.25 0 1 1 16 21.25V23a7 7 0 1 0-7-7Z"></path></svg>';
 
 export class IconLoadingLarge extends HTMLElement {
     constructor () {

package/icons/IconLocationPin.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--locationPin"><path d="M11.938 3.135a5.574 5.574 0 0 0-7.875 7.875L8 15l3.938-3.938a5.575 5.575 0 0 0 0-7.927Zm-.928 7L8 13.101l-3.01-3.01a4.27 4.27 0 0 1 0-6.029 4.27 4.27 0 0 1 6.02 0 4.27 4.27 0 0 1 0 6.03v.043ZM8 4.719A2.406 2.406 0 1 0 8 9.53 2.406 2.406 0 0 0 8 4.72Zm0 3.5A1.094 1.094 0 1 1 8 6.03 1.094 1.094 0 0 1 8 8.22Z"></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--locationPin"><path d="M11.938 3.135a5.574 5.574 0 0 0-7.875 7.875L8 15l3.938-3.938a5.575 5.575 0 0 0 0-7.927Zm-.928 7L8 13.101l-3.01-3.01a4.27 4.27 0 0 1 0-6.029 4.27 4.27 0 0 1 6.02 0 4.27 4.27 0 0 1 0 6.03v.043ZM8 4.719A2.406 2.406 0 1 0 8 9.53 2.406 2.406 0 0 0 8 4.72Zm0 3.5A1.094 1.094 0 1 1 8 6.03 1.094 1.094 0 0 1 8 8.22Z"></path></svg>';
 
 export class IconLocationPin extends HTMLElement {
     constructor () {

package/icons/IconLocationPinFilled.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--locationPinFilled"><path d="M11.938 3.135a5.574 5.574 0 0 0-7.875 7.875L8 15l3.938-3.938a5.575 5.575 0 0 0 0-7.927Zm-2.844 3.99a1.094 1.094 0 1 1-2.188 0 1.094 1.094 0 0 1 2.188 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--locationPinFilled"><path d="M11.938 3.135a5.574 5.574 0 0 0-7.875 7.875L8 15l3.938-3.938a5.575 5.575 0 0 0 0-7.927Zm-2.844 3.99a1.094 1.094 0 1 1-2.188 0 1.094 1.094 0 0 1 2.188 0Z"></path></svg>';
 
 export class IconLocationPinFilled extends HTMLElement {
     constructor () {

package/icons/IconLocationPinFilledLarge.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--locationPinFilledLarge"><path d="m21.6 23.735-1.435 1.435c1.96.455 2.835 1.067 2.835 1.33 0 .446-2.406 1.75-7 1.75-4.594 0-7-1.304-7-1.75 0-.262.875-.875 2.835-1.33L10.4 23.735c-1.811.551-3.15 1.453-3.15 2.765 0 2.406 4.533 3.5 8.75 3.5 4.218 0 8.75-1.094 8.75-3.5 0-1.313-1.339-2.214-3.15-2.765Z"></path><path d="m16 26.859 7.254-7.254a10.256 10.256 0 1 0-14.508 0L16 26.859Zm0-16.984a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Z"></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--locationPinFilledLarge"><path d="m21.6 23.735-1.435 1.435c1.96.455 2.835 1.067 2.835 1.33 0 .446-2.406 1.75-7 1.75-4.594 0-7-1.304-7-1.75 0-.262.875-.875 2.835-1.33L10.4 23.735c-1.811.551-3.15 1.453-3.15 2.765 0 2.406 4.533 3.5 8.75 3.5 4.218 0 8.75-1.094 8.75-3.5 0-1.313-1.339-2.214-3.15-2.765Z"></path><path d="m16 26.859 7.254-7.254a10.256 10.256 0 1 0-14.508 0L16 26.859Zm0-16.984a2.625 2.625 0 1 1 0 5.25 2.625 2.625 0 0 1 0-5.25Z"></path></svg>';
 
 export class IconLocationPinFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconLocationPinFood.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--locationPinFood"><path d="M8 14.825 4 10.783c-2.196-2.223-2.196-5.837 0-8.06A5.592 5.592 0 0 1 8 1.054c1.514 0 2.931.594 3.999 1.67 2.196 2.223 2.196 5.837 0 8.06l-4 4.042Zm0-12.46a4.262 4.262 0 0 0-3.063 1.286 4.426 4.426 0 0 0 0 6.213L8 12.96l3.062-3.097a4.426 4.426 0 0 0 0-6.213A4.276 4.276 0 0 0 8 2.365Z"></path><path d="M7.501 4.316a.147.147 0 0 0-.149.149c-.035.63-.043 1.374-.026 2.117 0 .097-.079.184-.175.184-.096 0-.184-.079-.184-.175-.008-.735 0-1.479.027-2.1a.152.152 0 0 0-.158-.157.147.147 0 0 0-.149.149c-.035.63-.043 1.382-.026 2.126 0 .096-.079.184-.175.184a.186.186 0 0 1-.131-.062s-.018-.008-.018-.017a.183.183 0 0 1-.035-.097c-.008-.734 0-1.478.027-2.117a.152.152 0 0 0-.158-.157c-.017 0-.035 0-.044.017H6.11a.18.18 0 0 0-.088.122c-.052.946-.035 2.162 0 3.203 0 .105.035.201.08.298 0 .008.017.017.017.035a.87.87 0 0 0 .21.262l.017.018v1.417h.98c-.009-.105-.026-.219-.035-.367-.07-.762-.052-.92-.052-.92 0-.052.026-.087.07-.113a.832.832 0 0 0 .358-.674v-.026c-.035-1.033-.052-2.196 0-3.115a.152.152 0 0 0-.157-.157L7.5 4.316Z"></path><path d="M9.977 4.15c0-.052-.008-.07-.008-.07-.027-.061-.08-.105-.15-.105a.146.146 0 0 0-.095.035s-.018.009-.053.044c0 0-.105.114-.262.367-.07.114-.15.263-.228.447-.175.385-.359.918-.507 1.636a14.097 14.097 0 0 0-.228 1.671v.079a.18.18 0 0 0 .149.131h.07l.464.07.052.026v.517c-.017.183-.035.41-.061.69h.77c.017-.34.052-.935.079-1.635.052-1.287.096-2.94 0-3.912l.008.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--locationPinFood"><path d="M8 14.825 4 10.783c-2.196-2.223-2.196-5.837 0-8.06A5.592 5.592 0 0 1 8 1.054c1.514 0 2.931.594 3.999 1.67 2.196 2.223 2.196 5.837 0 8.06l-4 4.042Zm0-12.46a4.262 4.262 0 0 0-3.063 1.286 4.426 4.426 0 0 0 0 6.213L8 12.96l3.062-3.097a4.426 4.426 0 0 0 0-6.213A4.276 4.276 0 0 0 8 2.365Z"></path><path d="M7.501 4.316a.147.147 0 0 0-.149.149c-.035.63-.043 1.374-.026 2.117 0 .097-.079.184-.175.184-.096 0-.184-.079-.184-.175-.008-.735 0-1.479.027-2.1a.152.152 0 0 0-.158-.157.147.147 0 0 0-.149.149c-.035.63-.043 1.382-.026 2.126 0 .096-.079.184-.175.184a.186.186 0 0 1-.131-.062s-.018-.008-.018-.017a.183.183 0 0 1-.035-.097c-.008-.734 0-1.478.027-2.117a.152.152 0 0 0-.158-.157c-.017 0-.035 0-.044.017H6.11a.18.18 0 0 0-.088.122c-.052.946-.035 2.162 0 3.203 0 .105.035.201.08.298 0 .008.017.017.017.035a.87.87 0 0 0 .21.262l.017.018v1.417h.98c-.009-.105-.026-.219-.035-.367-.07-.762-.052-.92-.052-.92 0-.052.026-.087.07-.113a.832.832 0 0 0 .358-.674v-.026c-.035-1.033-.052-2.196 0-3.115a.152.152 0 0 0-.157-.157L7.5 4.316Z"></path><path d="M9.977 4.15c0-.052-.008-.07-.008-.07-.027-.061-.08-.105-.15-.105a.146.146 0 0 0-.095.035s-.018.009-.053.044c0 0-.105.114-.262.367-.07.114-.15.263-.228.447-.175.385-.359.918-.507 1.636a14.097 14.097 0 0 0-.228 1.671v.079a.18.18 0 0 0 .149.131h.07l.464.07.052.026v.517c-.017.183-.035.41-.061.69h.77c.017-.34.052-.935.079-1.635.052-1.287.096-2.94 0-3.912l.008.009Z"></path></svg>';
 
 export class IconLocationPinFood extends HTMLElement {
     constructor () {

package/icons/IconLocationPinFoodFilled.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--locationPinFoodFilled"><path d="M11.999 2.724a5.592 5.592 0 0 0-4-1.672 5.592 5.592 0 0 0-3.998 1.672c-2.196 2.222-2.196 5.836 0 8.059L8 14.825l3.999-4.042c2.196-2.223 2.196-5.837 0-8.06Zm-4.34 1.741c-.053.919-.035 2.082 0 3.106v.026c0 .298-.14.543-.36.692-.043.026-.06.07-.07.113 0 0-.017.158.053.92.018.148.027.262.035.367h-.98V8.27l-.017-.017a.775.775 0 0 1-.21-.263c0-.009-.018-.017-.018-.035a.83.83 0 0 1-.078-.297c-.044-1.05-.062-2.258 0-3.203 0-.052.035-.105.087-.122h.018c.017 0 .026-.009.043-.018.088 0 .158.061.158.149a28.054 28.054 0 0 0-.026 2.126c0 .035.017.07.035.096 0 0 .017.01.017.018a.186.186 0 0 0 .131.061.172.172 0 0 0 .175-.184c-.008-.743 0-1.496.027-2.126 0-.079.07-.14.148-.149.088 0 .158.062.158.15a27.82 27.82 0 0 0-.026 2.117c0 .096.087.175.183.175.097 0 .175-.088.175-.184-.008-.735 0-1.488.027-2.118 0-.078.07-.14.148-.148.088 0 .158.061.158.148l.009.018Zm2.318 3.596c-.026.691-.06 1.286-.078 1.636h-.77c.026-.28.052-.507.06-.69V8.49s-.025-.026-.052-.026l-.463-.062h-.07c-.088-.026-.132-.078-.15-.14-.008-.035 0-.078 0-.078.045-.648.123-1.199.228-1.672.15-.717.333-1.25.508-1.636.079-.184.157-.324.227-.446a1.97 1.97 0 0 1 .263-.368.388.388 0 0 1 .052-.043.183.183 0 0 1 .097-.035c.07 0 .122.043.148.105 0 0 0 .017.01.07.087.971.043 2.625 0 3.911l-.01-.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--locationPinFoodFilled"><path d="M11.999 2.724a5.592 5.592 0 0 0-4-1.672 5.592 5.592 0 0 0-3.998 1.672c-2.196 2.222-2.196 5.836 0 8.059L8 14.825l3.999-4.042c2.196-2.223 2.196-5.837 0-8.06Zm-4.34 1.741c-.053.919-.035 2.082 0 3.106v.026c0 .298-.14.543-.36.692-.043.026-.06.07-.07.113 0 0-.017.158.053.92.018.148.027.262.035.367h-.98V8.27l-.017-.017a.775.775 0 0 1-.21-.263c0-.009-.018-.017-.018-.035a.83.83 0 0 1-.078-.297c-.044-1.05-.062-2.258 0-3.203 0-.052.035-.105.087-.122h.018c.017 0 .026-.009.043-.018.088 0 .158.061.158.149a28.054 28.054 0 0 0-.026 2.126c0 .035.017.07.035.096 0 0 .017.01.017.018a.186.186 0 0 0 .131.061.172.172 0 0 0 .175-.184c-.008-.743 0-1.496.027-2.126 0-.079.07-.14.148-.149.088 0 .158.062.158.15a27.82 27.82 0 0 0-.026 2.117c0 .096.087.175.183.175.097 0 .175-.088.175-.184-.008-.735 0-1.488.027-2.118 0-.078.07-.14.148-.148.088 0 .158.061.158.148l.009.018Zm2.318 3.596c-.026.691-.06 1.286-.078 1.636h-.77c.026-.28.052-.507.06-.69V8.49s-.025-.026-.052-.026l-.463-.062h-.07c-.088-.026-.132-.078-.15-.14-.008-.035 0-.078 0-.078.045-.648.123-1.199.228-1.672.15-.717.333-1.25.508-1.636.079-.184.157-.324.227-.446a1.97 1.97 0 0 1 .263-.368.388.388 0 0 1 .052-.043.183.183 0 0 1 .097-.035c.07 0 .122.043.148.105 0 0 0 .017.01.07.087.971.043 2.625 0 3.911l-.01-.009Z"></path></svg>';
 
 export class IconLocationPinFoodFilled extends HTMLElement {
     constructor () {

package/icons/IconLocationPinFoodFilledLarge.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--locationPinFoodFilledLarge"><path d="M24.05 5.491c-2.152-2.17-5.014-3.368-8.05-3.368-3.036 0-5.898 1.198-8.05 3.368-4.427 4.48-4.427 11.769 0 16.249L16 29.878l8.05-8.138c4.427-4.48 4.427-11.769 0-16.249Zm-8.776 3.474c-.123 1.951-.079 4.419 0 6.589v.079c0 .595-.298 1.11-.753 1.426a.337.337 0 0 0-.149.245s-.043.332.114 1.942c.026.306.053.56.079.779h-2.082v-3.01s-.027-.018-.044-.035a1.822 1.822 0 0 1-.447-.551c-.008-.026-.026-.044-.043-.07a1.68 1.68 0 0 1-.166-.63c-.088-2.223-.132-4.786 0-6.79 0-.123.078-.219.175-.271.008 0 .026 0 .043-.01.035-.008.062-.025.097-.025.183 0 .323.14.332.315v.026c-.079 1.338-.088 2.922-.061 4.48 0 .079.026.148.07.21.008.017.026.026.043.035.07.079.167.14.28.131.21 0 .386-.175.377-.394-.026-1.575-.018-3.167.061-4.506a.33.33 0 0 1 .315-.306c.184 0 .324.14.332.315v.026c-.078 1.33-.087 2.905-.06 4.454 0 .21.183.376.393.376.21 0 .376-.175.376-.385-.026-1.566-.017-3.15.062-4.489 0-.166.148-.297.314-.306.184 0 .324.14.333.315v.026l.009.009Zm4.909 7.595c-.062 1.47-.132 2.73-.175 3.465H18.38c.061-.586.105-1.085.131-1.461V17.47s-.061-.052-.105-.061l-.98-.14-.14-.018c-.184-.035-.28-.14-.315-.28-.026-.079-.017-.175-.017-.175.096-1.365.262-2.537.472-3.543.315-1.523.709-2.66 1.085-3.474.175-.377.341-.691.482-.937.323-.542.55-.787.55-.787.062-.061.106-.087.106-.087a.35.35 0 0 1 .201-.07c.149 0 .262.096.315.218 0 0 .018.044.026.158.193 2.056.097 5.556-.017 8.286h.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--locationPinFoodFilledLarge"><path d="M24.05 5.491c-2.152-2.17-5.014-3.368-8.05-3.368-3.036 0-5.898 1.198-8.05 3.368-4.427 4.48-4.427 11.769 0 16.249L16 29.878l8.05-8.138c4.427-4.48 4.427-11.769 0-16.249Zm-8.776 3.474c-.123 1.951-.079 4.419 0 6.589v.079c0 .595-.298 1.11-.753 1.426a.337.337 0 0 0-.149.245s-.043.332.114 1.942c.026.306.053.56.079.779h-2.082v-3.01s-.027-.018-.044-.035a1.822 1.822 0 0 1-.447-.551c-.008-.026-.026-.044-.043-.07a1.68 1.68 0 0 1-.166-.63c-.088-2.223-.132-4.786 0-6.79 0-.123.078-.219.175-.271.008 0 .026 0 .043-.01.035-.008.062-.025.097-.025.183 0 .323.14.332.315v.026c-.079 1.338-.088 2.922-.061 4.48 0 .079.026.148.07.21.008.017.026.026.043.035.07.079.167.14.28.131.21 0 .386-.175.377-.394-.026-1.575-.018-3.167.061-4.506a.33.33 0 0 1 .315-.306c.184 0 .324.14.332.315v.026c-.078 1.33-.087 2.905-.06 4.454 0 .21.183.376.393.376.21 0 .376-.175.376-.385-.026-1.566-.017-3.15.062-4.489 0-.166.148-.297.314-.306.184 0 .324.14.333.315v.026l.009.009Zm4.909 7.595c-.062 1.47-.132 2.73-.175 3.465H18.38c.061-.586.105-1.085.131-1.461V17.47s-.061-.052-.105-.061l-.98-.14-.14-.018c-.184-.035-.28-.14-.315-.28-.026-.079-.017-.175-.017-.175.096-1.365.262-2.537.472-3.543.315-1.523.709-2.66 1.085-3.474.175-.377.341-.691.482-.937.323-.542.55-.787.55-.787.062-.061.106-.087.106-.087a.35.35 0 0 1 .201-.07c.149 0 .262.096.315.218 0 0 .018.044.026.158.193 2.056.097 5.556-.017 8.286h.009Z"></path></svg>';
 
 export class IconLocationPinFoodFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconLocationPinFoodLarge.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--locationPinFoodLarge"><path d="M24.05 5.491c-2.152-2.17-5.014-3.368-8.05-3.368-3.036 0-5.898 1.198-8.05 3.368-4.427 4.48-4.427 11.769 0 16.249L16 29.878l8.05-8.138c4.427-4.48 4.427-11.769 0-16.249Zm-1.242 15.015-6.8 6.878-6.798-6.878c-3.754-3.797-3.754-9.983 0-13.79 1.82-1.837 4.235-2.852 6.799-2.852a9.498 9.498 0 0 1 6.799 2.852c3.753 3.798 3.753 9.984 0 13.79Z"></path><path d="M14.933 8.624a.318.318 0 0 0-.315.306c-.08 1.339-.088 2.922-.062 4.489a.387.387 0 0 1-.376.385.383.383 0 0 1-.394-.377c-.026-1.548-.017-3.123.062-4.453v-.027a.335.335 0 0 0-.333-.315.318.318 0 0 0-.315.307c-.079 1.338-.087 2.931-.061 4.506 0 .21-.166.394-.376.394a.372.372 0 0 1-.28-.132c-.01-.017-.027-.017-.044-.035a.356.356 0 0 1-.07-.21c-.026-1.557-.018-3.14.061-4.48v-.026c0-.175-.157-.315-.332-.315-.035 0-.07.018-.097.026-.008 0-.026 0-.043.01a.315.315 0 0 0-.175.27c-.123 2.013-.08 4.568 0 6.79.008.228.078.438.166.63.009.027.026.044.044.07a1.7 1.7 0 0 0 .446.552c.017.008.026.017.044.035v3.01h2.082c-.026-.219-.044-.473-.079-.779-.157-1.61-.113-1.942-.113-1.942 0-.105.06-.184.148-.245.455-.316.753-.832.753-1.427v-.079c-.079-2.17-.123-4.637 0-6.588v-.027c0-.175-.158-.315-.333-.315l-.008-.008Z"></path><path d="M20.165 8.125a.354.354 0 0 0-.315-.219.35.35 0 0 0-.201.07s-.044.026-.105.088c0 0-.228.245-.551.787-.15.245-.315.56-.482.936-.367.814-.77 1.952-1.085 3.474a26.489 26.489 0 0 0-.472 3.544s0 .096.017.175c.035.14.14.245.315.28l.14.017.98.14s.08.027.105.062v1.094c-.026.384-.07.875-.13 1.46h1.627c.043-.726.113-1.994.175-3.464.113-2.73.21-6.23.017-8.286 0-.114-.026-.158-.026-.158h-.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--locationPinFoodLarge"><path d="M24.05 5.491c-2.152-2.17-5.014-3.368-8.05-3.368-3.036 0-5.898 1.198-8.05 3.368-4.427 4.48-4.427 11.769 0 16.249L16 29.878l8.05-8.138c4.427-4.48 4.427-11.769 0-16.249Zm-1.242 15.015-6.8 6.878-6.798-6.878c-3.754-3.797-3.754-9.983 0-13.79 1.82-1.837 4.235-2.852 6.799-2.852a9.498 9.498 0 0 1 6.799 2.852c3.753 3.798 3.753 9.984 0 13.79Z"></path><path d="M14.933 8.624a.318.318 0 0 0-.315.306c-.08 1.339-.088 2.922-.062 4.489a.387.387 0 0 1-.376.385.383.383 0 0 1-.394-.377c-.026-1.548-.017-3.123.062-4.453v-.027a.335.335 0 0 0-.333-.315.318.318 0 0 0-.315.307c-.079 1.338-.087 2.931-.061 4.506 0 .21-.166.394-.376.394a.372.372 0 0 1-.28-.132c-.01-.017-.027-.017-.044-.035a.356.356 0 0 1-.07-.21c-.026-1.557-.018-3.14.061-4.48v-.026c0-.175-.157-.315-.332-.315-.035 0-.07.018-.097.026-.008 0-.026 0-.043.01a.315.315 0 0 0-.175.27c-.123 2.013-.08 4.568 0 6.79.008.228.078.438.166.63.009.027.026.044.044.07a1.7 1.7 0 0 0 .446.552c.017.008.026.017.044.035v3.01h2.082c-.026-.219-.044-.473-.079-.779-.157-1.61-.113-1.942-.113-1.942 0-.105.06-.184.148-.245.455-.316.753-.832.753-1.427v-.079c-.079-2.17-.123-4.637 0-6.588v-.027c0-.175-.158-.315-.333-.315l-.008-.008Z"></path><path d="M20.165 8.125a.354.354 0 0 0-.315-.219.35.35 0 0 0-.201.07s-.044.026-.105.088c0 0-.228.245-.551.787-.15.245-.315.56-.482.936-.367.814-.77 1.952-1.085 3.474a26.489 26.489 0 0 0-.472 3.544s0 .096.017.175c.035.14.14.245.315.28l.14.017.98.14s.08.027.105.062v1.094c-.026.384-.07.875-.13 1.46h1.627c.043-.726.113-1.994.175-3.464.113-2.73.21-6.23.017-8.286 0-.114-.026-.158-.026-.158h-.009Z"></path></svg>';
 
 export class IconLocationPinFoodLarge extends HTMLElement {
     constructor () {