@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/icons/IconRefreshLarge.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--refreshLarge"><path d="M18.406 12.797h6.414a1.68 1.68 0 0 0 1.68-1.68V4.774h-1.75v5.433l-.333-.55-.052-.07a10.5 10.5 0 1 0 2.047 7.717l-1.75-.228a8.75 8.75 0 1 1-1.75-6.466l.263.438h-4.769v1.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--refreshLarge"><path d="M18.406 12.797h6.414a1.68 1.68 0 0 0 1.68-1.68V4.774h-1.75v5.433l-.333-.55-.052-.07a10.5 10.5 0 1 0 2.047 7.717l-1.75-.228a8.75 8.75 0 1 1-1.75-6.466l.263.438h-4.769v1.75Z"></path></svg>';
 
 export class IconRefreshLarge extends HTMLElement {
     constructor () {

package/icons/IconResize.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--resize"><path d="M.928 10.325h.927l8.47-8.47V.928L.928 10.325Z"></path><path d="M10.325.928V0L0 10.325h.928L10.325.928Z"></path><path d="m6.501 10.325 3.824-3.824v-.927l-4.751 4.751H6.5Z"></path><path d="M7.429 10.325h-.928l3.824-3.824v.928L7.43 10.325Z"></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--resize"><path d="M.928 10.325h.927l8.47-8.47V.928L.928 10.325Z"></path><path d="M10.325.928V0L0 10.325h.928L10.325.928Z"></path><path d="m6.501 10.325 3.824-3.824v-.927l-4.751 4.751H6.5Z"></path><path d="M7.429 10.325h-.928l3.824-3.824v.928L7.43 10.325Z"></path></svg>';
 
 export class IconResize extends HTMLElement {
     constructor () {

package/icons/IconResizeLarge.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--resizeLarge"><path d="M22.726 2.243V1L1 22.735h1.243L22.726 2.243Z"></path><path d="M2.243 22.735h1.233l19.25-19.259V2.243L2.243 22.735Z"></path><path d="M14.099 22.735h1.233l7.394-7.402v-1.234L14.1 22.735Z"></path><path d="m14.099 22.735 8.627-8.636v-1.234l-9.861 9.87h1.234Z"></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--resizeLarge"><path d="M22.726 2.243V1L1 22.735h1.243L22.726 2.243Z"></path><path d="M2.243 22.735h1.233l19.25-19.259V2.243L2.243 22.735Z"></path><path d="M14.099 22.735h1.233l7.394-7.402v-1.234L14.1 22.735Z"></path><path d="m14.099 22.735 8.627-8.636v-1.234l-9.861 9.87h1.234Z"></path></svg>';
 
 export class IconResizeLarge extends HTMLElement {
     constructor () {

package/icons/IconRestaurant.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--restaurant"><path d="m13.863 3.485-1.19-1.015a1.487 1.487 0 0 0-.998-.376H4.351c-.365 0-.719.13-.997.367L2.155 3.485a2.572 2.572 0 0 0-.936 1.943 2.511 2.511 0 0 0 .875 1.88v6.598h11.812V7.31a2.518 2.518 0 0 0 .875-1.881 2.623 2.623 0 0 0-.918-1.943Zm-5.05 9.109H7.187v-1.216a.814.814 0 0 1 1.628 0v1.216Zm3.78 0h-2.467v-1.216a2.126 2.126 0 0 0-4.252 0v1.216H3.406V8a3.167 3.167 0 0 0 2.625-.621 3.132 3.132 0 0 0 3.903 0A3.167 3.167 0 0 0 12.559 8h.043l-.008 4.594Zm-.297-5.889a1.75 1.75 0 0 1-1.793-.656H9.4A1.654 1.654 0 0 1 8 6.74a1.654 1.654 0 0 1-1.4-.691H5.497a1.75 1.75 0 0 1-1.75.656 1.383 1.383 0 0 1-1.216-1.277 1.243 1.243 0 0 1 .473-.928L4.21 3.459a.201.201 0 0 1 .14-.053h7.324a.201.201 0 0 1 .14.053l1.19 1.041a1.26 1.26 0 0 1 .464.945 1.383 1.383 0 0 1-1.173 1.26Z"></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--restaurant"><path d="m13.863 3.485-1.19-1.015a1.487 1.487 0 0 0-.998-.376H4.351c-.365 0-.719.13-.997.367L2.155 3.485a2.572 2.572 0 0 0-.936 1.943 2.511 2.511 0 0 0 .875 1.88v6.598h11.812V7.31a2.518 2.518 0 0 0 .875-1.881 2.623 2.623 0 0 0-.918-1.943Zm-5.05 9.109H7.187v-1.216a.814.814 0 0 1 1.628 0v1.216Zm3.78 0h-2.467v-1.216a2.126 2.126 0 0 0-4.252 0v1.216H3.406V8a3.167 3.167 0 0 0 2.625-.621 3.132 3.132 0 0 0 3.903 0A3.167 3.167 0 0 0 12.559 8h.043l-.008 4.594Zm-.297-5.889a1.75 1.75 0 0 1-1.793-.656H9.4A1.654 1.654 0 0 1 8 6.74a1.654 1.654 0 0 1-1.4-.691H5.497a1.75 1.75 0 0 1-1.75.656 1.383 1.383 0 0 1-1.216-1.277 1.243 1.243 0 0 1 .473-.928L4.21 3.459a.201.201 0 0 1 .14-.053h7.324a.201.201 0 0 1 .14.053l1.19 1.041a1.26 1.26 0 0 1 .464.945 1.383 1.383 0 0 1-1.173 1.26Z"></path></svg>';
 
 export class IconRestaurant extends HTMLElement {
     constructor () {

package/icons/IconRestaurantFilled.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--restaurantFilled"><path d="M12.795 9.277c-.07.018-.14.018-.201.027-.901.131-1.838.008-2.643-.385-.437.218-.919.35-1.409.411A5.467 5.467 0 0 1 8 9.365a4.587 4.587 0 0 1-1.951-.446c-.805.393-1.742.516-2.643.385-.07-.009-.14-.009-.21-.027-.157-.026-.297-.078-.446-.13a3.576 3.576 0 0 1-.656-.272v5.023h11.812V8.875c-.21.105-.429.193-.656.271-.149.044-.297.096-.455.131Zm-5.618 3.317v-1.216c0-.447.368-.814.814-.814.446 0 .814.367.814.813v1.217H7.177Z"></path><path d="M14.72 4.885a2.626 2.626 0 0 0-.857-1.4l-1.103-.954-.079-.07c-.07-.061-.157-.096-.236-.14a1.487 1.487 0 0 0-.761-.227H4.35a1.5 1.5 0 0 0-.472.087c-.035.009-.07.026-.114.044-.149.061-.289.14-.411.245L2.146 3.502c-.595.508-.936 1.217-.936 1.952 0 .157.017.306.044.455.105.551.402 1.05.831 1.426a2.706 2.706 0 0 0 .656.438c.21.096.42.183.656.227 0 0 .027.009.044.018.219.043.438.06.656.052.07 0 .14-.009.21-.018.14-.008.29-.026.43-.052.078-.018.165-.044.244-.061.123-.035.245-.079.359-.131.079-.035.166-.07.236-.114.035-.018.079-.035.123-.061h.673l.044.026c.053.035.114.061.175.087.079.044.158.079.245.105.079.027.158.061.236.079.062.018.114.035.175.044.105.026.202.043.307.061h.035c.262.035.533.035.796 0h.035c.105-.018.21-.044.315-.061.061-.018.114-.027.175-.044.079-.026.166-.052.245-.079l.236-.105c.061-.026.123-.052.175-.087.018 0 .026-.018.044-.018h.674l.122.053c.079.043.166.079.245.114.114.052.228.087.35.122.088.026.167.053.254.07.131.026.262.044.402.053.08 0 .158.017.237.017.21 0 .428-.018.647-.053 0 0 .035-.008.044-.017.236-.053.455-.131.656-.228.245-.113.464-.262.657-.437.542-.481.875-1.155.875-1.89a2.17 2.17 0 0 0-.062-.534l.009-.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--restaurantFilled"><path d="M12.795 9.277c-.07.018-.14.018-.201.027-.901.131-1.838.008-2.643-.385-.437.218-.919.35-1.409.411A5.467 5.467 0 0 1 8 9.365a4.587 4.587 0 0 1-1.951-.446c-.805.393-1.742.516-2.643.385-.07-.009-.14-.009-.21-.027-.157-.026-.297-.078-.446-.13a3.576 3.576 0 0 1-.656-.272v5.023h11.812V8.875c-.21.105-.429.193-.656.271-.149.044-.297.096-.455.131Zm-5.618 3.317v-1.216c0-.447.368-.814.814-.814.446 0 .814.367.814.813v1.217H7.177Z"></path><path d="M14.72 4.885a2.626 2.626 0 0 0-.857-1.4l-1.103-.954-.079-.07c-.07-.061-.157-.096-.236-.14a1.487 1.487 0 0 0-.761-.227H4.35a1.5 1.5 0 0 0-.472.087c-.035.009-.07.026-.114.044-.149.061-.289.14-.411.245L2.146 3.502c-.595.508-.936 1.217-.936 1.952 0 .157.017.306.044.455.105.551.402 1.05.831 1.426a2.706 2.706 0 0 0 .656.438c.21.096.42.183.656.227 0 0 .027.009.044.018.219.043.438.06.656.052.07 0 .14-.009.21-.018.14-.008.29-.026.43-.052.078-.018.165-.044.244-.061.123-.035.245-.079.359-.131.079-.035.166-.07.236-.114.035-.018.079-.035.123-.061h.673l.044.026c.053.035.114.061.175.087.079.044.158.079.245.105.079.027.158.061.236.079.062.018.114.035.175.044.105.026.202.043.307.061h.035c.262.035.533.035.796 0h.035c.105-.018.21-.044.315-.061.061-.018.114-.027.175-.044.079-.026.166-.052.245-.079l.236-.105c.061-.026.123-.052.175-.087.018 0 .026-.018.044-.018h.674l.122.053c.079.043.166.079.245.114.114.052.228.087.35.122.088.026.167.053.254.07.131.026.262.044.402.053.08 0 .158.017.237.017.21 0 .428-.018.647-.053 0 0 .035-.008.044-.017.236-.053.455-.131.656-.228.245-.113.464-.262.657-.437.542-.481.875-1.155.875-1.89a2.17 2.17 0 0 0-.062-.534l.009-.026Z"></path></svg>';
 
 export class IconRestaurantFilled extends HTMLElement {
     constructor () {

package/icons/IconRestaurantFilledLarge.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--restaurantFilledLarge"><path d="M26.5 15.912c-.079.01-.149.027-.227.035a5.715 5.715 0 0 1-.762.044 6.178 6.178 0 0 1-3.167-.866c-1.917 1.137-4.419 1.137-6.335 0-1.925 1.137-4.428 1.137-6.344 0A6.13 6.13 0 0 1 6.603 16a6.51 6.51 0 0 1-1.094-.096 7.088 7.088 0 0 1-.875-.21 6.33 6.33 0 0 1-.875-.359v12.924H28.25V15.36c-.28.14-.569.263-.875.359-.28.087-.578.149-.875.201v-.008ZM9 26.5v-5.25c0-.962.787-1.75 1.75-1.75s1.75.788 1.75 1.75v5.25H9Zm14-7.875v3.5h-5.25v-3.5H23Z"></path><path d="M28.74 6.454 26.806 4.51s-.079-.061-.114-.096a2.613 2.613 0 0 0-1.74-.674H7.091c-.69 0-1.347.271-1.846.753l-1.969 1.96A4.32 4.32 0 0 0 2 9.507v.15c0 .297.035.594.087.892.027.122.08.245.114.367.044.166.088.333.158.49.052.123.122.236.192.359.079.149.149.297.236.438.07.104.158.2.246.306.096.122.175.245.288.358.018.018.035.027.053.044.017.018.026.035.035.044.087.088.183.14.271.219.026.026.052.043.079.07.105.087.21.184.323.262.044.035.106.053.15.088a4.324 4.324 0 0 0 2.152.639c.061 0 .131.017.192.017h.009c.271 0 .534-.035.796-.088a.927.927 0 0 0 .167-.043c.2-.053.402-.114.595-.193l.183-.079a4.7 4.7 0 0 0 .7-.402c.035-.026.07-.044.105-.07h1.041s.062.026.088.053c.079.052.166.104.254.157.14.087.28.166.429.227.122.053.245.106.367.15.105.034.201.07.306.095.167.044.333.097.508.123h.035c.227.035.446.07.682.07.237 0 .447-.035.665-.07h.035c.175-.026.35-.07.516-.123.097-.026.193-.052.28-.087.132-.044.263-.096.394-.158.132-.06.263-.13.394-.21.096-.052.193-.104.28-.175.026-.017.061-.034.088-.052h1.032s.061.035.088.053c.078.06.166.104.253.157.14.079.271.157.42.227.123.053.254.106.377.158.096.035.192.061.297.087.166.044.341.097.516.123h.018c.227.035.455.07.682.07.228 0 .455-.035.674-.07h.026c.175-.026.341-.079.508-.123.105-.026.201-.06.306-.096.122-.043.245-.096.367-.149.15-.07.29-.148.43-.227.078-.053.166-.096.244-.149.035-.017.07-.035.096-.061h1.033s.035.018.053.035c.21.149.437.289.665.402.017 0 .035.01.052.018.201.096.411.166.621.227.07.018.131.044.201.062.22.052.438.087.665.105.07 0 .132 0 .202.008.245.01.49.01.744-.017.148-.018.288-.061.437-.096a4.639 4.639 0 0 0 1.75-.822c.157-.132.315-.263.455-.412.026-.026.044-.053.061-.07.394-.429.718-.936.928-1.496a4.735 4.735 0 0 0 .297-1.654v-.166a4.262 4.262 0 0 0-1.26-3.037l.009-.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--restaurantFilledLarge"><path d="M26.5 15.912c-.079.01-.149.027-.227.035a5.715 5.715 0 0 1-.762.044 6.178 6.178 0 0 1-3.167-.866c-1.917 1.137-4.419 1.137-6.335 0-1.925 1.137-4.428 1.137-6.344 0A6.13 6.13 0 0 1 6.603 16a6.51 6.51 0 0 1-1.094-.096 7.088 7.088 0 0 1-.875-.21 6.33 6.33 0 0 1-.875-.359v12.924H28.25V15.36c-.28.14-.569.263-.875.359-.28.087-.578.149-.875.201v-.008ZM9 26.5v-5.25c0-.962.787-1.75 1.75-1.75s1.75.788 1.75 1.75v5.25H9Zm14-7.875v3.5h-5.25v-3.5H23Z"></path><path d="M28.74 6.454 26.806 4.51s-.079-.061-.114-.096a2.613 2.613 0 0 0-1.74-.674H7.091c-.69 0-1.347.271-1.846.753l-1.969 1.96A4.32 4.32 0 0 0 2 9.507v.15c0 .297.035.594.087.892.027.122.08.245.114.367.044.166.088.333.158.49.052.123.122.236.192.359.079.149.149.297.236.438.07.104.158.2.246.306.096.122.175.245.288.358.018.018.035.027.053.044.017.018.026.035.035.044.087.088.183.14.271.219.026.026.052.043.079.07.105.087.21.184.323.262.044.035.106.053.15.088a4.324 4.324 0 0 0 2.152.639c.061 0 .131.017.192.017h.009c.271 0 .534-.035.796-.088a.927.927 0 0 0 .167-.043c.2-.053.402-.114.595-.193l.183-.079a4.7 4.7 0 0 0 .7-.402c.035-.026.07-.044.105-.07h1.041s.062.026.088.053c.079.052.166.104.254.157.14.087.28.166.429.227.122.053.245.106.367.15.105.034.201.07.306.095.167.044.333.097.508.123h.035c.227.035.446.07.682.07.237 0 .447-.035.665-.07h.035c.175-.026.35-.07.516-.123.097-.026.193-.052.28-.087.132-.044.263-.096.394-.158.132-.06.263-.13.394-.21.096-.052.193-.104.28-.175.026-.017.061-.034.088-.052h1.032s.061.035.088.053c.078.06.166.104.253.157.14.079.271.157.42.227.123.053.254.106.377.158.096.035.192.061.297.087.166.044.341.097.516.123h.018c.227.035.455.07.682.07.228 0 .455-.035.674-.07h.026c.175-.026.341-.079.508-.123.105-.026.201-.06.306-.096.122-.043.245-.096.367-.149.15-.07.29-.148.43-.227.078-.053.166-.096.244-.149.035-.017.07-.035.096-.061h1.033s.035.018.053.035c.21.149.437.289.665.402.017 0 .035.01.052.018.201.096.411.166.621.227.07.018.131.044.201.062.22.052.438.087.665.105.07 0 .132 0 .202.008.245.01.49.01.744-.017.148-.018.288-.061.437-.096a4.639 4.639 0 0 0 1.75-.822c.157-.132.315-.263.455-.412.026-.026.044-.053.061-.07.394-.429.718-.936.928-1.496a4.735 4.735 0 0 0 .297-1.654v-.166a4.262 4.262 0 0 0-1.26-3.037l.009-.008Z"></path></svg>';
 
 export class IconRestaurantFilledLarge extends HTMLElement {
     constructor () {

package/icons/IconRestaurantLarge.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--restaurantLarge"><g fill-rule="evenodd" clip-path="url(#prefix__clip0_2_2344)" clip-rule="evenodd"><path d="M24.75 23.875H16v-7h8.75v7ZM23 18.625h-5.25v3.5H23v-3.5Z"></path><path d="m26.806 4.52 1.934 1.934A4.261 4.261 0 0 1 30 9.49v.175a4.612 4.612 0 0 1-1.75 3.631V28.25H3.75V13.235a2.74 2.74 0 0 0-.142-.11 1.806 1.806 0 0 1-.208-.17A4.664 4.664 0 0 1 2 9.656v-.148a4.305 4.305 0 0 1 1.277-3.054l1.97-1.951a2.625 2.625 0 0 1 1.846-.753H24.95c.696 0 1.363.278 1.855.77ZM9 21.25v5.25h3.5v-5.25a1.75 1.75 0 0 0-3.5 0Zm5.25 5.25H26.5V14.154c-.144.04-.29.072-.438.096a4.497 4.497 0 0 1-3.727-1.33 4.48 4.48 0 0 1-6.335 0 4.48 4.48 0 0 1-6.352 0 4.377 4.377 0 0 1-3.08 1.33c-.36-.01-.719-.06-1.068-.149V26.5h1.75v-5.25a3.5 3.5 0 0 1 7 0v5.25Zm13.332-14.969c.44-.52.678-1.184.668-1.866V9.49a2.52 2.52 0 0 0-.744-1.794l-1.942-1.942a.875.875 0 0 0-.613-.254H7.093a.875.875 0 0 0-.613.254L4.511 7.696a2.564 2.564 0 0 0-.761 1.812v.148a2.879 2.879 0 0 0 .875 2.048 2.626 2.626 0 0 0 1.916.796 2.817 2.817 0 0 0 2.38-1.444l.263-.411h.989l.253.438a2.738 2.738 0 0 0 4.804 0l.245-.447h1.05l.254.464a2.74 2.74 0 0 0 4.786 0l.254-.446h1.024l.262.437a2.783 2.783 0 0 0 2.747 1.409 2.826 2.826 0 0 0 1.73-.969Z"></path></g><defs><clipPath id="prefix__clip0_2_2344"><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--restaurantLarge"><g fill-rule="evenodd" clip-path="url(#prefix__clip0_2_2344)" clip-rule="evenodd"><path d="M24.75 23.875H16v-7h8.75v7ZM23 18.625h-5.25v3.5H23v-3.5Z"></path><path d="m26.806 4.52 1.934 1.934A4.261 4.261 0 0 1 30 9.49v.175a4.612 4.612 0 0 1-1.75 3.631V28.25H3.75V13.235a2.74 2.74 0 0 0-.142-.11 1.806 1.806 0 0 1-.208-.17A4.664 4.664 0 0 1 2 9.656v-.148a4.305 4.305 0 0 1 1.277-3.054l1.97-1.951a2.625 2.625 0 0 1 1.846-.753H24.95c.696 0 1.363.278 1.855.77ZM9 21.25v5.25h3.5v-5.25a1.75 1.75 0 0 0-3.5 0Zm5.25 5.25H26.5V14.154c-.144.04-.29.072-.438.096a4.497 4.497 0 0 1-3.727-1.33 4.48 4.48 0 0 1-6.335 0 4.48 4.48 0 0 1-6.352 0 4.377 4.377 0 0 1-3.08 1.33c-.36-.01-.719-.06-1.068-.149V26.5h1.75v-5.25a3.5 3.5 0 0 1 7 0v5.25Zm13.332-14.969c.44-.52.678-1.184.668-1.866V9.49a2.52 2.52 0 0 0-.744-1.794l-1.942-1.942a.875.875 0 0 0-.613-.254H7.093a.875.875 0 0 0-.613.254L4.511 7.696a2.564 2.564 0 0 0-.761 1.812v.148a2.879 2.879 0 0 0 .875 2.048 2.626 2.626 0 0 0 1.916.796 2.817 2.817 0 0 0 2.38-1.444l.263-.411h.989l.253.438a2.738 2.738 0 0 0 4.804 0l.245-.447h1.05l.254.464a2.74 2.74 0 0 0 4.786 0l.254-.446h1.024l.262.437a2.783 2.783 0 0 0 2.747 1.409 2.826 2.826 0 0 0 1.73-.969Z"></path></g><defs><clipPath id="prefix__clip0_2_2344"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 export class IconRestaurantLarge extends HTMLElement {
     constructor () {

package/icons/IconRestaurantMenu.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--restaurantMenu"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.281h11.812V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.5H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Z"></path><path d="M10.625 7.668a2.625 2.625 0 0 0-2.196-2.144.437.437 0 1 0-.875 0 2.625 2.625 0 0 0-2.135 2.144 2.478 2.478 0 0 0 0 .437v.438h5.25v-.438a2.48 2.48 0 0 0-.044-.438Z"></path><path d="M10.625 9.645h-5.25v1.313h5.25V9.644Z"></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--restaurantMenu"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.281h11.812V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.5H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Z"></path><path d="M10.625 7.668a2.625 2.625 0 0 0-2.196-2.144.437.437 0 1 0-.875 0 2.625 2.625 0 0 0-2.135 2.144 2.478 2.478 0 0 0 0 .437v.438h5.25v-.438a2.48 2.48 0 0 0-.044-.438Z"></path><path d="M10.625 9.645h-5.25v1.313h5.25V9.644Z"></path></svg>';
 
 export class IconRestaurantMenu extends HTMLElement {
     constructor () {

package/icons/IconRestaurantMenuLarge.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--restaurantMenuLarge"><path d="M19.5 22.125h-7v1.75h7v-1.75Z"></path><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l.088-.052h20.825l.087.052V6.375a2.625 2.625 0 0 0-2.625-2.625ZM7.25 26.5V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875V26.5H7.25Z"></path><path d="M21.25 18.625h-10.5v1.75h10.5v-1.75Z"></path><path d="M21.171 13.375a5.25 5.25 0 0 0-4.296-4.296.254.254 0 0 0 0-.079.875.875 0 0 0-1.75 0 .254.254 0 0 0 0 .079 5.25 5.25 0 0 0-4.296 4.296c-.049.29-.075.582-.079.875v.875h10.5v-.875a5.807 5.807 0 0 0-.079-.875Zm-8.548 0a3.5 3.5 0 0 1 6.755 0h-6.755Z"></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--restaurantMenuLarge"><path d="M19.5 22.125h-7v1.75h7v-1.75Z"></path><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l.088-.052h20.825l.087.052V6.375a2.625 2.625 0 0 0-2.625-2.625ZM7.25 26.5V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875V26.5H7.25Z"></path><path d="M21.25 18.625h-10.5v1.75h10.5v-1.75Z"></path><path d="M21.171 13.375a5.25 5.25 0 0 0-4.296-4.296.254.254 0 0 0 0-.079.875.875 0 0 0-1.75 0 .254.254 0 0 0 0 .079 5.25 5.25 0 0 0-4.296 4.296c-.049.29-.075.582-.079.875v.875h10.5v-.875a5.807 5.807 0 0 0-.079-.875Zm-8.548 0a3.5 3.5 0 0 1 6.755 0h-6.755Z"></path></svg>';
 
 export class IconRestaurantMenuLarge extends HTMLElement {
     constructor () {

package/icons/IconRestricted.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--restricted"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM2.531 8A5.469 5.469 0 0 1 8 2.531a5.408 5.408 0 0 1 3.369 1.173l-7.665 7.665A5.408 5.408 0 0 1 2.53 8ZM8 13.469a5.408 5.408 0 0 1-3.369-1.173l7.665-7.665A5.408 5.408 0 0 1 13.47 8 5.47 5.47 0 0 1 8 13.469Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--restricted"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM2.531 8A5.469 5.469 0 0 1 8 2.531a5.408 5.408 0 0 1 3.369 1.173l-7.665 7.665A5.408 5.408 0 0 1 2.53 8ZM8 13.469a5.408 5.408 0 0 1-3.369-1.173l7.665-7.665A5.408 5.408 0 0 1 13.47 8 5.47 5.47 0 0 1 8 13.469Z"></path></svg>';
 
 export class IconRestricted extends HTMLElement {
     constructor () {

package/icons/IconRestrictedLarge.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--restrictedLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5ZM5.5 16A10.5 10.5 0 0 1 23 8.195L8.195 23A10.421 10.421 0 0 1 5.5 16ZM16 26.5a10.5 10.5 0 0 1-6.527-2.293L24.207 9.473A10.5 10.5 0 0 1 16 26.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--restrictedLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5ZM5.5 16A10.5 10.5 0 0 1 23 8.195L8.195 23A10.421 10.421 0 0 1 5.5 16ZM16 26.5a10.5 10.5 0 0 1-6.527-2.293L24.207 9.473A10.5 10.5 0 0 1 16 26.5Z"></path></svg>';
 
 export class IconRestrictedLarge extends HTMLElement {
     constructor () {

package/icons/IconReview.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--review"><path d="M12.375 1.219h-8.75A1.54 1.54 0 0 0 2.094 2.75v7.875a1.54 1.54 0 0 0 1.531 1.531h1.628L8 14.904l2.748-2.748h1.627a1.54 1.54 0 0 0 1.531-1.531V2.75a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219h-2.17L8 13.049l-2.205-2.205h-2.17a.219.219 0 0 1-.219-.219V2.75a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v7.875ZM8.814 5.83l1.82.263L9.32 7.379l.306 1.811L8 8.341l-1.628.875.307-1.811-1.304-1.313 1.82-.262L8 4.185l.814 1.645Z"></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--review"><path d="M12.375 1.219h-8.75A1.54 1.54 0 0 0 2.094 2.75v7.875a1.54 1.54 0 0 0 1.531 1.531h1.628L8 14.904l2.748-2.748h1.627a1.54 1.54 0 0 0 1.531-1.531V2.75a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219h-2.17L8 13.049l-2.205-2.205h-2.17a.219.219 0 0 1-.219-.219V2.75a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v7.875ZM8.814 5.83l1.82.263L9.32 7.379l.306 1.811L8 8.341l-1.628.875.307-1.811-1.304-1.313 1.82-.262L8 4.185l.814 1.645Z"></path></svg>';
 
 export class IconReview extends HTMLElement {
     constructor () {

package/icons/IconReviewLarge.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--reviewLarge"><path d="m16 29.335-5.311-5.311H7.25a2.625 2.625 0 0 1-2.625-2.625V5.649A2.625 2.625 0 0 1 7.25 3.024h17.5a2.625 2.625 0 0 1 2.625 2.625v15.75a2.625 2.625 0 0 1-2.625 2.625h-3.439L16 29.335ZM7.25 4.774a.875.875 0 0 0-.875.875v15.75a.875.875 0 0 0 .875.875h4.165L16 26.859l4.585-4.585h4.165a.875.875 0 0 0 .875-.875V5.649a.875.875 0 0 0-.875-.875H7.25ZM19.413 19.5a.875.875 0 0 1-.412-.105L16 17.82l-3.001 1.575a.876.876 0 0 1-1.269-.919l.569-3.351-2.424-2.363a.875.875 0 0 1-.219-.875.875.875 0 0 1 .709-.603l3.351-.534 1.497-3.01a.875.875 0 0 1 1.575 0l1.496 3.01 3.36.481a.876.876 0 0 1 .709.604.875.875 0 0 1-.22.875l-2.432 2.415.569 3.343a.874.874 0 0 1-.341.875.875.875 0 0 1-.516.157ZM16 16c.144 0 .285.037.411.105l1.838.962-.35-2.047a.875.875 0 0 1 .253-.779l1.488-1.452-2.056-.298a.875.875 0 0 1-.665-.481L16 10.102l-.875 1.864a.874.874 0 0 1-.665.482l-2.056.297 1.487 1.453a.876.876 0 0 1 .254.778l-.35 2.048 1.838-.963A.876.876 0 0 1 16 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--reviewLarge"><path d="m16 29.335-5.311-5.311H7.25a2.625 2.625 0 0 1-2.625-2.625V5.649A2.625 2.625 0 0 1 7.25 3.024h17.5a2.625 2.625 0 0 1 2.625 2.625v15.75a2.625 2.625 0 0 1-2.625 2.625h-3.439L16 29.335ZM7.25 4.774a.875.875 0 0 0-.875.875v15.75a.875.875 0 0 0 .875.875h4.165L16 26.859l4.585-4.585h4.165a.875.875 0 0 0 .875-.875V5.649a.875.875 0 0 0-.875-.875H7.25ZM19.413 19.5a.875.875 0 0 1-.412-.105L16 17.82l-3.001 1.575a.876.876 0 0 1-1.269-.919l.569-3.351-2.424-2.363a.875.875 0 0 1-.219-.875.875.875 0 0 1 .709-.603l3.351-.534 1.497-3.01a.875.875 0 0 1 1.575 0l1.496 3.01 3.36.481a.876.876 0 0 1 .709.604.875.875 0 0 1-.22.875l-2.432 2.415.569 3.343a.874.874 0 0 1-.341.875.875.875 0 0 1-.516.157ZM16 16c.144 0 .285.037.411.105l1.838.962-.35-2.047a.875.875 0 0 1 .253-.779l1.488-1.452-2.056-.298a.875.875 0 0 1-.665-.481L16 10.102l-.875 1.864a.874.874 0 0 1-.665.482l-2.056.297 1.487 1.453a.876.876 0 0 1 .254.778l-.35 2.048 1.838-.963A.876.876 0 0 1 16 16Z"></path></svg>';
 
 export class IconReviewLarge extends HTMLElement {
     constructor () {

package/icons/IconRibbonHeart.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--ribbonHeart"><path d="M13.696 11.955a7.24 7.24 0 0 1-1.522-2.013c.096-.308.144-.63.14-.953a2.08 2.08 0 0 1 .061-.578 2.51 2.51 0 0 1 .35-.411 2.074 2.074 0 0 0 .752-1.4 2.058 2.058 0 0 0-.752-1.391 2.51 2.51 0 0 1-.35-.412 2.124 2.124 0 0 1-.053-.577 2.048 2.048 0 0 0-.454-1.47 2.03 2.03 0 0 0-1.488-.438 2.39 2.39 0 0 1-.569-.06c-.158-.105-.3-.232-.42-.377A2.039 2.039 0 0 0 8 1.131a2.039 2.039 0 0 0-1.391.744 1.916 1.916 0 0 1-.42.35 2.39 2.39 0 0 1-.569.061 2.03 2.03 0 0 0-1.487.438 2.047 2.047 0 0 0-.447 1.487c.007.198-.014.395-.061.586-.102.15-.219.288-.35.412A2.056 2.056 0 0 0 2.531 6.6 2.074 2.074 0 0 0 3.284 8c.13.124.248.262.35.411.044.19.062.384.052.578-.004.323.044.645.14.953a7.237 7.237 0 0 1-1.522 2.013l-.648.604 3.947 2.31.358-.368a11.464 11.464 0 0 0 1.75-2.476c.1.023.203.038.306.044a1.85 1.85 0 0 0 .307-.044c.47.9 1.06 1.732 1.75 2.476l.358.368 3.947-2.31-.683-.604ZM4.23 6.119c.253-.235.46-.513.612-.823.116-.337.17-.693.158-1.05a1.96 1.96 0 0 1 .061-.577 1.75 1.75 0 0 1 .586-.044c.357.01.713-.042 1.05-.158.312-.152.591-.363.823-.62.138-.159.3-.295.481-.403.179.103.341.233.481.385.232.258.511.469.823.621.337.115.693.168 1.05.157.194-.01.388.008.577.053.057.19.08.388.07.586a2.95 2.95 0 0 0 .158 1.05c.152.31.36.588.612.823.123.131.385.393.385.481 0 .087-.262.359-.385.481a2.966 2.966 0 0 0-.612.875A2.95 2.95 0 0 0 11 9.006c.008.195-.012.39-.061.578a1.75 1.75 0 0 1-.586.061 2.975 2.975 0 0 0-1.05.157 2.687 2.687 0 0 0-.823.622c-.131.122-.393.376-.481.376-.088 0-.35-.254-.481-.376a2.687 2.687 0 0 0-.823-.674 2.975 2.975 0 0 0-1.05-.158 2.013 2.013 0 0 1-.577-.052 1.75 1.75 0 0 1-.07-.586 2.949 2.949 0 0 0-.158-1.05 2.966 2.966 0 0 0-.612-.875c-.123-.123-.385-.385-.385-.482 0-.096.262-.297.385-.428Zm1.146 7.079-1.549-.876A8.369 8.369 0 0 0 4.85 10.87c.26.053.523.076.788.07.191-.007.383.014.568.061.149.089.284.198.403.324-.34.668-.754 1.296-1.234 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.9c.119-.126.254-.235.403-.323.185-.047.377-.068.569-.061.264.006.528-.018.787-.07.289.519.632 1.006 1.024 1.452l-1.549.902Z"></path><path d="M8 8.656 6.521 7.125a.998.998 0 0 1 .295-1.58.875.875 0 0 1 1.009.215L8 5.926l.175-.166a.875.875 0 0 1 .647-.28.875.875 0 0 1 .657.28.998.998 0 0 1 0 1.365L8 8.656Z"></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--ribbonHeart"><path d="M13.696 11.955a7.24 7.24 0 0 1-1.522-2.013c.096-.308.144-.63.14-.953a2.08 2.08 0 0 1 .061-.578 2.51 2.51 0 0 1 .35-.411 2.074 2.074 0 0 0 .752-1.4 2.058 2.058 0 0 0-.752-1.391 2.51 2.51 0 0 1-.35-.412 2.124 2.124 0 0 1-.053-.577 2.048 2.048 0 0 0-.454-1.47 2.03 2.03 0 0 0-1.488-.438 2.39 2.39 0 0 1-.569-.06c-.158-.105-.3-.232-.42-.377A2.039 2.039 0 0 0 8 1.131a2.039 2.039 0 0 0-1.391.744 1.916 1.916 0 0 1-.42.35 2.39 2.39 0 0 1-.569.061 2.03 2.03 0 0 0-1.487.438 2.047 2.047 0 0 0-.447 1.487c.007.198-.014.395-.061.586-.102.15-.219.288-.35.412A2.056 2.056 0 0 0 2.531 6.6 2.074 2.074 0 0 0 3.284 8c.13.124.248.262.35.411.044.19.062.384.052.578-.004.323.044.645.14.953a7.237 7.237 0 0 1-1.522 2.013l-.648.604 3.947 2.31.358-.368a11.464 11.464 0 0 0 1.75-2.476c.1.023.203.038.306.044a1.85 1.85 0 0 0 .307-.044c.47.9 1.06 1.732 1.75 2.476l.358.368 3.947-2.31-.683-.604ZM4.23 6.119c.253-.235.46-.513.612-.823.116-.337.17-.693.158-1.05a1.96 1.96 0 0 1 .061-.577 1.75 1.75 0 0 1 .586-.044c.357.01.713-.042 1.05-.158.312-.152.591-.363.823-.62.138-.159.3-.295.481-.403.179.103.341.233.481.385.232.258.511.469.823.621.337.115.693.168 1.05.157.194-.01.388.008.577.053.057.19.08.388.07.586a2.95 2.95 0 0 0 .158 1.05c.152.31.36.588.612.823.123.131.385.393.385.481 0 .087-.262.359-.385.481a2.966 2.966 0 0 0-.612.875A2.95 2.95 0 0 0 11 9.006c.008.195-.012.39-.061.578a1.75 1.75 0 0 1-.586.061 2.975 2.975 0 0 0-1.05.157 2.687 2.687 0 0 0-.823.622c-.131.122-.393.376-.481.376-.088 0-.35-.254-.481-.376a2.687 2.687 0 0 0-.823-.674 2.975 2.975 0 0 0-1.05-.158 2.013 2.013 0 0 1-.577-.052 1.75 1.75 0 0 1-.07-.586 2.949 2.949 0 0 0-.158-1.05 2.966 2.966 0 0 0-.612-.875c-.123-.123-.385-.385-.385-.482 0-.096.262-.297.385-.428Zm1.146 7.079-1.549-.876A8.369 8.369 0 0 0 4.85 10.87c.26.053.523.076.788.07.191-.007.383.014.568.061.149.089.284.198.403.324-.34.668-.754 1.296-1.234 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.9c.119-.126.254-.235.403-.323.185-.047.377-.068.569-.061.264.006.528-.018.787-.07.289.519.632 1.006 1.024 1.452l-1.549.902Z"></path><path d="M8 8.656 6.521 7.125a.998.998 0 0 1 .295-1.58.875.875 0 0 1 1.009.215L8 5.926l.175-.166a.875.875 0 0 1 .647-.28.875.875 0 0 1 .657.28.998.998 0 0 1 0 1.365L8 8.656Z"></path></svg>';
 
 export class IconRibbonHeart extends HTMLElement {
     constructor () {

package/icons/IconRibbonHeartLarge.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--ribbonHeartLarge"><path d="M27.016 24.4a14.877 14.877 0 0 1-3.211-4.296c.229-.63.33-1.3.297-1.969-.009-.425.041-.849.15-1.26.211-.362.477-.69.787-.971a3.702 3.702 0 0 0 1.382-2.529 3.702 3.702 0 0 0-1.382-2.485 4.155 4.155 0 0 1-.788-.971 4.568 4.568 0 0 1-.149-1.304 3.65 3.65 0 0 0-.76-2.625 3.693 3.693 0 0 0-2.626-.761 4.077 4.077 0 0 1-1.312-.149 4.068 4.068 0 0 1-.963-.779 3.72 3.72 0 0 0-2.52-1.426 3.702 3.702 0 0 0-2.485 1.383 4.096 4.096 0 0 1-.936.778c-.424.121-.864.171-1.304.149-.954-.1-1.91.173-2.669.761a3.684 3.684 0 0 0-.76 2.669c.021.44-.029.88-.15 1.304a4.095 4.095 0 0 1-.778.971 3.701 3.701 0 0 0-1.418 2.485 3.701 3.701 0 0 0 1.383 2.485c.31.295.574.638.778 1.015.121.424.171.864.15 1.304a5.39 5.39 0 0 0 .297 1.969A14.666 14.666 0 0 1 4.826 24.4l-1.312 1.225 4.917.814 2.389 3.159.709-.727a21.932 21.932 0 0 0 3.596-5.162 2.168 2.168 0 0 0 1.663 0 21.755 21.755 0 0 0 3.552 5.154l.709.726 2.388-3.159 4.883-.805-1.304-1.225ZM10.96 26.868 9.402 24.82l-2.152-.367a16.115 16.115 0 0 0 2.126-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.88.028 1.304.149.361.208.689.47.971.779.063.068.13.132.201.192a21.645 21.645 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.513-1.146 5.25 5.25 0 0 0-1.943-.28c-.577 0-1.242 0-1.461-.254-.219-.254-.236-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.146-1.514c-.411-.428-.875-.874-.875-1.268s.472-.875.875-1.269c.475-.43.864-.947 1.146-1.523a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.254-.228.875-.237 1.461-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.652 5.5c.43-.411.875-.875 1.27-.875.393 0 .83.473 1.26.875.433.472.949.86 1.522 1.146a5.25 5.25 0 0 0 1.942.28c.578 0 1.234 0 1.461.254.228.254.237.875.245 1.461-.023.66.075 1.318.29 1.943.28.574.669 1.088 1.145 1.514.412.428.875.874.875 1.268s-.472.875-.875 1.269c-.476.425-.866.94-1.146 1.514a5.4 5.4 0 0 0-.289 1.942c0 .578 0 1.234-.245 1.461-.245.228-.875.237-1.46.254a5.252 5.252 0 0 0-1.943.28 5.252 5.252 0 0 0-1.523 1.164c-.429.411-.875.875-1.26.875s-.796-.473-1.269-.875Zm7.78 3.579-1.55 2.047a21.236 21.236 0 0 1-2.677-4.182l.201-.193c.28-.307.604-.57.963-.779.426-.12.87-.171 1.312-.148a5.922 5.922 0 0 0 1.75-.228 16.462 16.462 0 0 0 2.153 3.115l-2.153.368Z"></path><path d="m15.921 19.299-4.375-4.515a3.413 3.413 0 0 1 0-4.708 3.282 3.282 0 0 1 4.375-.175 3.194 3.194 0 0 1 4.375.184 3.395 3.395 0 0 1 0 4.699l-4.375 4.515Zm-2.109-8.435a1.453 1.453 0 0 0-1.04.446 1.68 1.68 0 0 0 0 2.249l3.15 3.229 3.14-3.23a1.662 1.662 0 0 0 0-2.248 1.487 1.487 0 0 0-2.09 0l-1.086 1.041-1.024-1.041a1.452 1.452 0 0 0-1.05-.446Z"></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--ribbonHeartLarge"><path d="M27.016 24.4a14.877 14.877 0 0 1-3.211-4.296c.229-.63.33-1.3.297-1.969-.009-.425.041-.849.15-1.26.211-.362.477-.69.787-.971a3.702 3.702 0 0 0 1.382-2.529 3.702 3.702 0 0 0-1.382-2.485 4.155 4.155 0 0 1-.788-.971 4.568 4.568 0 0 1-.149-1.304 3.65 3.65 0 0 0-.76-2.625 3.693 3.693 0 0 0-2.626-.761 4.077 4.077 0 0 1-1.312-.149 4.068 4.068 0 0 1-.963-.779 3.72 3.72 0 0 0-2.52-1.426 3.702 3.702 0 0 0-2.485 1.383 4.096 4.096 0 0 1-.936.778c-.424.121-.864.171-1.304.149-.954-.1-1.91.173-2.669.761a3.684 3.684 0 0 0-.76 2.669c.021.44-.029.88-.15 1.304a4.095 4.095 0 0 1-.778.971 3.701 3.701 0 0 0-1.418 2.485 3.701 3.701 0 0 0 1.383 2.485c.31.295.574.638.778 1.015.121.424.171.864.15 1.304a5.39 5.39 0 0 0 .297 1.969A14.666 14.666 0 0 1 4.826 24.4l-1.312 1.225 4.917.814 2.389 3.159.709-.727a21.932 21.932 0 0 0 3.596-5.162 2.168 2.168 0 0 0 1.663 0 21.755 21.755 0 0 0 3.552 5.154l.709.726 2.388-3.159 4.883-.805-1.304-1.225ZM10.96 26.868 9.402 24.82l-2.152-.367a16.115 16.115 0 0 0 2.126-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.88.028 1.304.149.361.208.689.47.971.779.063.068.13.132.201.192a21.645 21.645 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.513-1.146 5.25 5.25 0 0 0-1.943-.28c-.577 0-1.242 0-1.461-.254-.219-.254-.236-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.146-1.514c-.411-.428-.875-.874-.875-1.268s.472-.875.875-1.269c.475-.43.864-.947 1.146-1.523a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.254-.228.875-.237 1.461-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.652 5.5c.43-.411.875-.875 1.27-.875.393 0 .83.473 1.26.875.433.472.949.86 1.522 1.146a5.25 5.25 0 0 0 1.942.28c.578 0 1.234 0 1.461.254.228.254.237.875.245 1.461-.023.66.075 1.318.29 1.943.28.574.669 1.088 1.145 1.514.412.428.875.874.875 1.268s-.472.875-.875 1.269c-.476.425-.866.94-1.146 1.514a5.4 5.4 0 0 0-.289 1.942c0 .578 0 1.234-.245 1.461-.245.228-.875.237-1.46.254a5.252 5.252 0 0 0-1.943.28 5.252 5.252 0 0 0-1.523 1.164c-.429.411-.875.875-1.26.875s-.796-.473-1.269-.875Zm7.78 3.579-1.55 2.047a21.236 21.236 0 0 1-2.677-4.182l.201-.193c.28-.307.604-.57.963-.779.426-.12.87-.171 1.312-.148a5.922 5.922 0 0 0 1.75-.228 16.462 16.462 0 0 0 2.153 3.115l-2.153.368Z"></path><path d="m15.921 19.299-4.375-4.515a3.413 3.413 0 0 1 0-4.708 3.282 3.282 0 0 1 4.375-.175 3.194 3.194 0 0 1 4.375.184 3.395 3.395 0 0 1 0 4.699l-4.375 4.515Zm-2.109-8.435a1.453 1.453 0 0 0-1.04.446 1.68 1.68 0 0 0 0 2.249l3.15 3.229 3.14-3.23a1.662 1.662 0 0 0 0-2.248 1.487 1.487 0 0 0-2.09 0l-1.086 1.041-1.024-1.041a1.452 1.452 0 0 0-1.05-.446Z"></path></svg>';
 
 export class IconRibbonHeartLarge extends HTMLElement {
     constructor () {

package/icons/IconRibbonStar.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--ribbonStar"><path d="M13.696 11.955a7.24 7.24 0 0 1-1.522-2.013c.096-.308.144-.63.14-.953a2.08 2.08 0 0 1 .061-.578 2.51 2.51 0 0 1 .35-.411 2.074 2.074 0 0 0 .752-1.4 2.058 2.058 0 0 0-.752-1.391 2.51 2.51 0 0 1-.35-.412 2.124 2.124 0 0 1-.053-.577 2.048 2.048 0 0 0-.454-1.47 2.03 2.03 0 0 0-1.488-.438 2.39 2.39 0 0 1-.569-.06c-.158-.105-.3-.232-.42-.377A2.039 2.039 0 0 0 8 1.131a2.039 2.039 0 0 0-1.391.744 1.916 1.916 0 0 1-.42.35 2.39 2.39 0 0 1-.569.061 2.03 2.03 0 0 0-1.487.438 2.047 2.047 0 0 0-.447 1.487c.007.198-.014.395-.061.586-.102.15-.219.288-.35.412A2.056 2.056 0 0 0 2.531 6.6 2.074 2.074 0 0 0 3.284 8c.13.124.248.262.35.411.044.19.062.384.052.578-.004.323.044.645.14.953a7.237 7.237 0 0 1-1.522 2.013l-.648.604 3.947 2.31.358-.368a11.464 11.464 0 0 0 1.75-2.476c.1.023.203.038.306.044a1.85 1.85 0 0 0 .307-.044c.47.9 1.06 1.732 1.75 2.476l.358.368 3.947-2.31-.683-.604ZM4.23 6.119c.253-.235.46-.513.612-.823.116-.337.17-.693.158-1.05a1.96 1.96 0 0 1 .061-.577 1.75 1.75 0 0 1 .586-.044c.357.01.713-.042 1.05-.158.312-.152.591-.363.823-.62.138-.159.3-.295.481-.403.179.103.341.233.481.385.232.258.511.469.823.621.337.115.693.168 1.05.157.194-.01.388.008.577.053.057.19.08.388.07.586a2.95 2.95 0 0 0 .158 1.05c.152.31.36.588.612.823.123.131.385.393.385.481 0 .087-.262.359-.385.481a2.966 2.966 0 0 0-.612.875A2.95 2.95 0 0 0 11 9.006c.008.195-.012.39-.061.578a1.75 1.75 0 0 1-.586.061 2.975 2.975 0 0 0-1.05.157 2.687 2.687 0 0 0-.823.622c-.131.122-.393.376-.481.376-.088 0-.35-.254-.481-.376a2.687 2.687 0 0 0-.823-.674 2.975 2.975 0 0 0-1.05-.158 2.013 2.013 0 0 1-.577-.052 1.75 1.75 0 0 1-.07-.586 2.949 2.949 0 0 0-.158-1.05 2.966 2.966 0 0 0-.612-.875c-.123-.123-.385-.385-.385-.482 0-.096.262-.297.385-.428Zm1.146 7.079-1.549-.876A8.369 8.369 0 0 0 4.85 10.87c.26.053.523.076.788.07.191-.007.383.014.568.061.149.089.284.198.403.324-.34.668-.754 1.296-1.234 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.9c.119-.126.254-.235.403-.323.185-.047.377-.068.569-.061.264.006.528-.018.787-.07.289.519.632 1.006 1.024 1.452l-1.549.902Z"></path><path d="M9.234 8.42 8.06 7.799a.149.149 0 0 0-.122 0l-1.173.621.228-1.295a.122.122 0 0 0 0-.105l-.989-.945 1.312-.193a.105.105 0 0 0 .097-.07L8 4.632l.586 1.18a.105.105 0 0 0 .096.07l1.313.193-.954.927a.123.123 0 0 0 0 .105l.193 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--ribbonStar"><path d="M13.696 11.955a7.24 7.24 0 0 1-1.522-2.013c.096-.308.144-.63.14-.953a2.08 2.08 0 0 1 .061-.578 2.51 2.51 0 0 1 .35-.411 2.074 2.074 0 0 0 .752-1.4 2.058 2.058 0 0 0-.752-1.391 2.51 2.51 0 0 1-.35-.412 2.124 2.124 0 0 1-.053-.577 2.048 2.048 0 0 0-.454-1.47 2.03 2.03 0 0 0-1.488-.438 2.39 2.39 0 0 1-.569-.06c-.158-.105-.3-.232-.42-.377A2.039 2.039 0 0 0 8 1.131a2.039 2.039 0 0 0-1.391.744 1.916 1.916 0 0 1-.42.35 2.39 2.39 0 0 1-.569.061 2.03 2.03 0 0 0-1.487.438 2.047 2.047 0 0 0-.447 1.487c.007.198-.014.395-.061.586-.102.15-.219.288-.35.412A2.056 2.056 0 0 0 2.531 6.6 2.074 2.074 0 0 0 3.284 8c.13.124.248.262.35.411.044.19.062.384.052.578-.004.323.044.645.14.953a7.237 7.237 0 0 1-1.522 2.013l-.648.604 3.947 2.31.358-.368a11.464 11.464 0 0 0 1.75-2.476c.1.023.203.038.306.044a1.85 1.85 0 0 0 .307-.044c.47.9 1.06 1.732 1.75 2.476l.358.368 3.947-2.31-.683-.604ZM4.23 6.119c.253-.235.46-.513.612-.823.116-.337.17-.693.158-1.05a1.96 1.96 0 0 1 .061-.577 1.75 1.75 0 0 1 .586-.044c.357.01.713-.042 1.05-.158.312-.152.591-.363.823-.62.138-.159.3-.295.481-.403.179.103.341.233.481.385.232.258.511.469.823.621.337.115.693.168 1.05.157.194-.01.388.008.577.053.057.19.08.388.07.586a2.95 2.95 0 0 0 .158 1.05c.152.31.36.588.612.823.123.131.385.393.385.481 0 .087-.262.359-.385.481a2.966 2.966 0 0 0-.612.875A2.95 2.95 0 0 0 11 9.006c.008.195-.012.39-.061.578a1.75 1.75 0 0 1-.586.061 2.975 2.975 0 0 0-1.05.157 2.687 2.687 0 0 0-.823.622c-.131.122-.393.376-.481.376-.088 0-.35-.254-.481-.376a2.687 2.687 0 0 0-.823-.674 2.975 2.975 0 0 0-1.05-.158 2.013 2.013 0 0 1-.577-.052 1.75 1.75 0 0 1-.07-.586 2.949 2.949 0 0 0-.158-1.05 2.966 2.966 0 0 0-.612-.875c-.123-.123-.385-.385-.385-.482 0-.096.262-.297.385-.428Zm1.146 7.079-1.549-.876A8.369 8.369 0 0 0 4.85 10.87c.26.053.523.076.788.07.191-.007.383.014.568.061.149.089.284.198.403.324-.34.668-.754 1.296-1.234 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.9c.119-.126.254-.235.403-.323.185-.047.377-.068.569-.061.264.006.528-.018.787-.07.289.519.632 1.006 1.024 1.452l-1.549.902Z"></path><path d="M9.234 8.42 8.06 7.799a.149.149 0 0 0-.122 0l-1.173.621.228-1.295a.122.122 0 0 0 0-.105l-.989-.945 1.312-.193a.105.105 0 0 0 .097-.07L8 4.632l.586 1.18a.105.105 0 0 0 .096.07l1.313.193-.954.927a.123.123 0 0 0 0 .105l.193 1.313Z"></path></svg>';
 
 export class IconRibbonStar extends HTMLElement {
     constructor () {

package/icons/IconRibbonStarLarge.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--ribbonStarLarge"><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296 5.25 5.25 0 0 0 .306-1.969 4.017 4.017 0 0 1 .158-1.26c.209-.361.471-.69.779-.971a3.702 3.702 0 0 0 1.382-2.529 3.702 3.702 0 0 0-1.382-2.485 4.096 4.096 0 0 1-.779-.971 4.015 4.015 0 0 1-.149-1.304 3.728 3.728 0 0 0-.761-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.304-.193 4.095 4.095 0 0 1-.971-.778A3.7 3.7 0 0 0 16 2.875a3.702 3.702 0 0 0-2.485 1.383c-.282.307-.61.57-.971.778-.424.121-.864.171-1.304.149a3.693 3.693 0 0 0-2.625.761 3.693 3.693 0 0 0-.77 2.669c.022.44-.028.88-.148 1.304a4.095 4.095 0 0 1-.78.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.383 2.485c.31.295.574.638.779 1.015.12.424.17.864.148 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.312 1.225 4.917.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.553-5.154 2.16 2.16 0 0 0 1.662 0 22.352 22.352 0 0 0 3.535 5.154l.718.726 2.389-3.159 4.926-.805-1.313-1.225ZM11.04 26.868 9.49 24.82l-2.196-.367c.84-.95 1.566-1.996 2.161-3.116a6.17 6.17 0 0 0 1.75.228c.44-.022.88.028 1.304.149.362.208.69.47.971.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.693-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.943-.28c-.577 0-1.242 0-1.461-.254-.219-.254-.236-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.059 5.059 0 0 0-1.155-1.522c-.402-.394-.875-.919-.875-1.269 0-.35.473-.875.875-1.269.478-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.254-.228.875-.237 1.461-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.732 5.5c.428-.411.875-.875 1.268-.875.394 0 .875.473 1.269.875.428.474.941.863 1.514 1.146a5.25 5.25 0 0 0 1.942.28c.578 0 1.243 0 1.461.254.22.254.237.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.412.429.875.875.875 1.269 0 .394-.472.875-.875 1.269a5.057 5.057 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.253.228-.875.236-1.461.254a5.25 5.25 0 0 0-1.943.28 5.056 5.056 0 0 0-1.522 1.155c-.429.411-.919.875-1.269.875-.35 0-.875-.473-1.268-.875Zm7.778 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.201-.193c.295-.314.638-.58 1.015-.787.424-.121.864-.171 1.304-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.196 3.116l-2.24.376Z"></path><path d="M21.25 11.879a1.084 1.084 0 0 0-.875-.744l-2.362-.341L16.98 8.65a1.093 1.093 0 0 0-1.96 0l-1.059 2.144-2.336.341a1.094 1.094 0 0 0-.604 1.864l1.75 1.671-.402 2.362a1.093 1.093 0 0 0 1.584 1.147L16 17.068l2.118 1.11c.156.084.33.127.507.123a1.084 1.084 0 0 0 1.076-1.277L19.3 14.67l1.75-1.671a1.084 1.084 0 0 0 .201-1.12Zm-3.867 2.178L17.75 16 16 15.125 14.25 16l.333-1.951-1.418-1.374 1.96-.28.875-1.75.875 1.75 1.96.28-1.452 1.382Z"></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--ribbonStarLarge"><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296 5.25 5.25 0 0 0 .306-1.969 4.017 4.017 0 0 1 .158-1.26c.209-.361.471-.69.779-.971a3.702 3.702 0 0 0 1.382-2.529 3.702 3.702 0 0 0-1.382-2.485 4.096 4.096 0 0 1-.779-.971 4.015 4.015 0 0 1-.149-1.304 3.728 3.728 0 0 0-.761-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.304-.193 4.095 4.095 0 0 1-.971-.778A3.7 3.7 0 0 0 16 2.875a3.702 3.702 0 0 0-2.485 1.383c-.282.307-.61.57-.971.778-.424.121-.864.171-1.304.149a3.693 3.693 0 0 0-2.625.761 3.693 3.693 0 0 0-.77 2.669c.022.44-.028.88-.148 1.304a4.095 4.095 0 0 1-.78.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.383 2.485c.31.295.574.638.779 1.015.12.424.17.864.148 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.312 1.225 4.917.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.553-5.154 2.16 2.16 0 0 0 1.662 0 22.352 22.352 0 0 0 3.535 5.154l.718.726 2.389-3.159 4.926-.805-1.313-1.225ZM11.04 26.868 9.49 24.82l-2.196-.367c.84-.95 1.566-1.996 2.161-3.116a6.17 6.17 0 0 0 1.75.228c.44-.022.88.028 1.304.149.362.208.69.47.971.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.693-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.943-.28c-.577 0-1.242 0-1.461-.254-.219-.254-.236-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.059 5.059 0 0 0-1.155-1.522c-.402-.394-.875-.919-.875-1.269 0-.35.473-.875.875-1.269.478-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.254-.228.875-.237 1.461-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.732 5.5c.428-.411.875-.875 1.268-.875.394 0 .875.473 1.269.875.428.474.941.863 1.514 1.146a5.25 5.25 0 0 0 1.942.28c.578 0 1.243 0 1.461.254.22.254.237.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.412.429.875.875.875 1.269 0 .394-.472.875-.875 1.269a5.057 5.057 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.253.228-.875.236-1.461.254a5.25 5.25 0 0 0-1.943.28 5.056 5.056 0 0 0-1.522 1.155c-.429.411-.919.875-1.269.875-.35 0-.875-.473-1.268-.875Zm7.778 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.201-.193c.295-.314.638-.58 1.015-.787.424-.121.864-.171 1.304-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.196 3.116l-2.24.376Z"></path><path d="M21.25 11.879a1.084 1.084 0 0 0-.875-.744l-2.362-.341L16.98 8.65a1.093 1.093 0 0 0-1.96 0l-1.059 2.144-2.336.341a1.094 1.094 0 0 0-.604 1.864l1.75 1.671-.402 2.362a1.093 1.093 0 0 0 1.584 1.147L16 17.068l2.118 1.11c.156.084.33.127.507.123a1.084 1.084 0 0 0 1.076-1.277L19.3 14.67l1.75-1.671a1.084 1.084 0 0 0 .201-1.12Zm-3.867 2.178L17.75 16 16 15.125 14.25 16l.333-1.951-1.418-1.374 1.96-.28.875-1.75.875 1.75 1.96.28-1.452 1.382Z"></path></svg>';
 
 export class IconRibbonStarLarge extends HTMLElement {
     constructor () {

package/icons/IconRibbonSuccess.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--ribbonSuccess"><path d="M13.696 12.043a7.37 7.37 0 0 1-1.522-2.013c.096-.309.144-.63.14-.954a2.08 2.08 0 0 1 .061-.577c.099-.154.216-.295.35-.42a2.04 2.04 0 0 0 .752-1.392 2.039 2.039 0 0 0-.752-1.39 2.207 2.207 0 0 1-.35-.42 2.057 2.057 0 0 1-.053-.57 2.04 2.04 0 0 0-.446-1.487c-.417-.34-.952-.5-1.487-.446a2.056 2.056 0 0 1-.569-.053 2.205 2.205 0 0 1-.42-.35A2.039 2.039 0 0 0 8 1.22a2.039 2.039 0 0 0-1.391.752 2.205 2.205 0 0 1-.42.35 2.057 2.057 0 0 1-.569.053 2.039 2.039 0 0 0-1.487.446 2.03 2.03 0 0 0-.447 1.479c.007.194-.014.389-.061.577a2.205 2.205 0 0 1-.35.42 2.039 2.039 0 0 0-.744 1.391 2.039 2.039 0 0 0 .753 1.392c.133.125.251.266.35.42.044.186.061.377.052.569-.004.326.043.65.14.962a7.368 7.368 0 0 1-1.522 2.013l-.648.603 3.947 2.301.358-.367a11.2 11.2 0 0 0 1.75-2.476c.1.03.203.048.306.052.104-.005.207-.022.307-.052a11.2 11.2 0 0 0 1.75 2.476l.358.367 3.947-2.3-.683-.604ZM4.23 6.25c.258-.25.466-.547.612-.875.115-.338.168-.693.158-1.05-.01-.194.011-.39.061-.578.19-.056.388-.08.586-.07.357.011.713-.042 1.05-.157.31-.152.588-.36.823-.612.131-.123.393-.385.481-.385.088 0 .35.262.481.385.235.252.513.46.823.612.337.115.693.168 1.05.158.194-.009.389.012.577.06.057.19.08.389.07.587-.01.357.043.712.158 1.05.152.31.36.588.612.822.123.132.385.394.385.482 0 .087-.262.35-.385.481-.253.234-.46.513-.612.822A3.001 3.001 0 0 0 11 9.033c.01.195-.011.39-.061.578a1.75 1.75 0 0 1-.586.07 2.975 2.975 0 0 0-1.05.158c-.31.151-.588.36-.823.612-.131.123-.393.385-.481.385-.088 0-.35-.263-.481-.385a2.809 2.809 0 0 0-.823-.612 2.975 2.975 0 0 0-1.05-.158 1.96 1.96 0 0 1-.577-.061 1.75 1.75 0 0 1-.07-.586c.008-.351-.045-.7-.158-1.033a2.809 2.809 0 0 0-.612-.822c-.123-.132-.385-.394-.385-.482 0-.087.262-.358.385-.446Zm1.146 7-1.566-.875c.39-.45.733-.94 1.023-1.461.26.05.524.077.788.079.191-.01.383.008.569.052.146.095.281.207.402.332a10.666 10.666 0 0 1-1.216 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.899c.121-.126.256-.237.403-.332.186-.044.377-.062.569-.053.264-.001.528-.028.787-.079.295.531.643 1.03 1.041 1.488l-1.566.875Z"></path><path d="m9.06 5.44.708.706-2.122 2.122-.707-.707 2.122-2.122Z"></path><path d="m6.94 6.146 1.414 1.415-.708.707-1.414-1.414.707-.708Z"></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--ribbonSuccess"><path d="M13.696 12.043a7.37 7.37 0 0 1-1.522-2.013c.096-.309.144-.63.14-.954a2.08 2.08 0 0 1 .061-.577c.099-.154.216-.295.35-.42a2.04 2.04 0 0 0 .752-1.392 2.039 2.039 0 0 0-.752-1.39 2.207 2.207 0 0 1-.35-.42 2.057 2.057 0 0 1-.053-.57 2.04 2.04 0 0 0-.446-1.487c-.417-.34-.952-.5-1.487-.446a2.056 2.056 0 0 1-.569-.053 2.205 2.205 0 0 1-.42-.35A2.039 2.039 0 0 0 8 1.22a2.039 2.039 0 0 0-1.391.752 2.205 2.205 0 0 1-.42.35 2.057 2.057 0 0 1-.569.053 2.039 2.039 0 0 0-1.487.446 2.03 2.03 0 0 0-.447 1.479c.007.194-.014.389-.061.577a2.205 2.205 0 0 1-.35.42 2.039 2.039 0 0 0-.744 1.391 2.039 2.039 0 0 0 .753 1.392c.133.125.251.266.35.42.044.186.061.377.052.569-.004.326.043.65.14.962a7.368 7.368 0 0 1-1.522 2.013l-.648.603 3.947 2.301.358-.367a11.2 11.2 0 0 0 1.75-2.476c.1.03.203.048.306.052.104-.005.207-.022.307-.052a11.2 11.2 0 0 0 1.75 2.476l.358.367 3.947-2.3-.683-.604ZM4.23 6.25c.258-.25.466-.547.612-.875.115-.338.168-.693.158-1.05-.01-.194.011-.39.061-.578.19-.056.388-.08.586-.07.357.011.713-.042 1.05-.157.31-.152.588-.36.823-.612.131-.123.393-.385.481-.385.088 0 .35.262.481.385.235.252.513.46.823.612.337.115.693.168 1.05.158.194-.009.389.012.577.06.057.19.08.389.07.587-.01.357.043.712.158 1.05.152.31.36.588.612.822.123.132.385.394.385.482 0 .087-.262.35-.385.481-.253.234-.46.513-.612.822A3.001 3.001 0 0 0 11 9.033c.01.195-.011.39-.061.578a1.75 1.75 0 0 1-.586.07 2.975 2.975 0 0 0-1.05.158c-.31.151-.588.36-.823.612-.131.123-.393.385-.481.385-.088 0-.35-.263-.481-.385a2.809 2.809 0 0 0-.823-.612 2.975 2.975 0 0 0-1.05-.158 1.96 1.96 0 0 1-.577-.061 1.75 1.75 0 0 1-.07-.586c.008-.351-.045-.7-.158-1.033a2.809 2.809 0 0 0-.612-.822c-.123-.132-.385-.394-.385-.482 0-.087.262-.358.385-.446Zm1.146 7-1.566-.875c.39-.45.733-.94 1.023-1.461.26.05.524.077.788.079.191-.01.383.008.569.052.146.095.281.207.402.332a10.666 10.666 0 0 1-1.216 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.899c.121-.126.256-.237.403-.332.186-.044.377-.062.569-.053.264-.001.528-.028.787-.079.295.531.643 1.03 1.041 1.488l-1.566.875Z"></path><path d="m9.06 5.44.708.706-2.122 2.122-.707-.707 2.122-2.122Z"></path><path d="m6.94 6.146 1.414 1.415-.708.707-1.414-1.414.707-.708Z"></path></svg>';
 
 export class IconRibbonSuccess extends HTMLElement {
     constructor () {

package/icons/IconRibbonSuccessLarge.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--ribbonSuccessLarge"><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296c.227-.63.33-1.3.306-1.969a4.02 4.02 0 0 1 .157-1.26c.21-.361.472-.69.78-.971a3.702 3.702 0 0 0 1.382-2.529 3.7 3.7 0 0 0-1.383-2.485 4.096 4.096 0 0 1-.779-.971 4.018 4.018 0 0 1-.148-1.304 3.727 3.727 0 0 0-.762-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.303-.193 4.095 4.095 0 0 1-.971-.778 3.7 3.7 0 0 0-2.53-1.383 3.702 3.702 0 0 0-2.484 1.383c-.282.307-.61.57-.972.778-.423.121-.863.171-1.303.149a3.693 3.693 0 0 0-2.625.761 3.692 3.692 0 0 0-.77 2.669c.022.44-.028.88-.149 1.304a4.095 4.095 0 0 1-.779.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.382 2.485c.311.295.574.638.779 1.015.12.424.171.864.149 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.313 1.225 4.918.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.552-5.154 2.16 2.16 0 0 0 1.663 0 22.355 22.355 0 0 0 3.535 5.154l.717.726 2.389-3.159 4.926-.805-1.312-1.225Zm-16.056 2.468-1.55-2.048-2.195-.367a16.12 16.12 0 0 0 2.16-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.881.028 1.304.149.362.208.69.47.972.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.942-.28c-.578 0-1.243 0-1.461-.254-.22-.254-.237-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.155-1.522c-.403-.394-.875-.919-.875-1.269 0-.35.472-.875.875-1.269.477-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.253-.228.874-.237 1.46-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.731 5.5c.429-.411.875-.875 1.269-.875.393 0 .875.473 1.268.875.428.474.942.863 1.514 1.146a5.25 5.25 0 0 0 1.943.28c.577 0 1.242 0 1.461.254.219.254.236.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.411.429.875.875.875 1.269 0 .394-.473.875-.875 1.269a5.059 5.059 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.254.228-.875.236-1.462.254a5.25 5.25 0 0 0-1.942.28 5.056 5.056 0 0 0-1.523 1.155c-.428.411-.918.875-1.268.875s-.875-.473-1.269-.875Zm7.779 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.2-.193c.296-.314.638-.58 1.016-.787.423-.121.864-.171 1.303-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.197 3.116l-2.24.376ZM20.06 11.38l-5.714 5.714-2.835-2.844 1.234-1.242 1.601 1.6 4.48-4.488 1.234 1.26Z"></path><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296c.227-.63.33-1.3.306-1.969a4.02 4.02 0 0 1 .157-1.26c.21-.361.472-.69.78-.971a3.702 3.702 0 0 0 1.382-2.529 3.7 3.7 0 0 0-1.383-2.485 4.096 4.096 0 0 1-.779-.971 4.018 4.018 0 0 1-.148-1.304 3.727 3.727 0 0 0-.762-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.303-.193 4.095 4.095 0 0 1-.971-.778 3.7 3.7 0 0 0-2.53-1.383 3.702 3.702 0 0 0-2.484 1.383c-.282.307-.61.57-.972.778-.423.121-.863.171-1.303.149a3.693 3.693 0 0 0-2.625.761 3.692 3.692 0 0 0-.77 2.669c.022.44-.028.88-.149 1.304a4.095 4.095 0 0 1-.779.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.382 2.485c.311.295.574.638.779 1.015.12.424.171.864.149 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.313 1.225 4.918.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.552-5.154 2.16 2.16 0 0 0 1.663 0 22.355 22.355 0 0 0 3.535 5.154l.717.726 2.389-3.159 4.926-.805-1.312-1.225Zm-16.056 2.468-1.55-2.048-2.195-.367a16.12 16.12 0 0 0 2.16-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.881.028 1.304.149.362.208.69.47.972.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.942-.28c-.578 0-1.243 0-1.461-.254-.22-.254-.237-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.155-1.522c-.403-.394-.875-.919-.875-1.269 0-.35.472-.875.875-1.269.477-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.253-.228.874-.237 1.46-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.731 5.5c.429-.411.875-.875 1.269-.875.393 0 .875.473 1.268.875.428.474.942.863 1.514 1.146a5.25 5.25 0 0 0 1.943.28c.577 0 1.242 0 1.461.254.219.254.236.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.411.429.875.875.875 1.269 0 .394-.473.875-.875 1.269a5.059 5.059 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.254.228-.875.236-1.462.254a5.25 5.25 0 0 0-1.942.28 5.056 5.056 0 0 0-1.523 1.155c-.428.411-.918.875-1.268.875s-.875-.473-1.269-.875Zm7.779 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.2-.193c.296-.314.638-.58 1.016-.787.423-.121.864-.171 1.303-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.197 3.116l-2.24.376ZM20.06 11.38l-5.714 5.714-2.835-2.844 1.234-1.242 1.601 1.6 4.48-4.488 1.234 1.26Z"></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--ribbonSuccessLarge"><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296c.227-.63.33-1.3.306-1.969a4.02 4.02 0 0 1 .157-1.26c.21-.361.472-.69.78-.971a3.702 3.702 0 0 0 1.382-2.529 3.7 3.7 0 0 0-1.383-2.485 4.096 4.096 0 0 1-.779-.971 4.018 4.018 0 0 1-.148-1.304 3.727 3.727 0 0 0-.762-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.303-.193 4.095 4.095 0 0 1-.971-.778 3.7 3.7 0 0 0-2.53-1.383 3.702 3.702 0 0 0-2.484 1.383c-.282.307-.61.57-.972.778-.423.121-.863.171-1.303.149a3.693 3.693 0 0 0-2.625.761 3.692 3.692 0 0 0-.77 2.669c.022.44-.028.88-.149 1.304a4.095 4.095 0 0 1-.779.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.382 2.485c.311.295.574.638.779 1.015.12.424.171.864.149 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.313 1.225 4.918.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.552-5.154 2.16 2.16 0 0 0 1.663 0 22.355 22.355 0 0 0 3.535 5.154l.717.726 2.389-3.159 4.926-.805-1.312-1.225Zm-16.056 2.468-1.55-2.048-2.195-.367a16.12 16.12 0 0 0 2.16-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.881.028 1.304.149.362.208.69.47.972.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.942-.28c-.578 0-1.243 0-1.461-.254-.22-.254-.237-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.155-1.522c-.403-.394-.875-.919-.875-1.269 0-.35.472-.875.875-1.269.477-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.253-.228.874-.237 1.46-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.731 5.5c.429-.411.875-.875 1.269-.875.393 0 .875.473 1.268.875.428.474.942.863 1.514 1.146a5.25 5.25 0 0 0 1.943.28c.577 0 1.242 0 1.461.254.219.254.236.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.411.429.875.875.875 1.269 0 .394-.473.875-.875 1.269a5.059 5.059 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.254.228-.875.236-1.462.254a5.25 5.25 0 0 0-1.942.28 5.056 5.056 0 0 0-1.523 1.155c-.428.411-.918.875-1.268.875s-.875-.473-1.269-.875Zm7.779 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.2-.193c.296-.314.638-.58 1.016-.787.423-.121.864-.171 1.303-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.197 3.116l-2.24.376ZM20.06 11.38l-5.714 5.714-2.835-2.844 1.234-1.242 1.601 1.6 4.48-4.488 1.234 1.26Z"></path><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296c.227-.63.33-1.3.306-1.969a4.02 4.02 0 0 1 .157-1.26c.21-.361.472-.69.78-.971a3.702 3.702 0 0 0 1.382-2.529 3.7 3.7 0 0 0-1.383-2.485 4.096 4.096 0 0 1-.779-.971 4.018 4.018 0 0 1-.148-1.304 3.727 3.727 0 0 0-.762-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.303-.193 4.095 4.095 0 0 1-.971-.778 3.7 3.7 0 0 0-2.53-1.383 3.702 3.702 0 0 0-2.484 1.383c-.282.307-.61.57-.972.778-.423.121-.863.171-1.303.149a3.693 3.693 0 0 0-2.625.761 3.692 3.692 0 0 0-.77 2.669c.022.44-.028.88-.149 1.304a4.095 4.095 0 0 1-.779.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.382 2.485c.311.295.574.638.779 1.015.12.424.171.864.149 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.313 1.225 4.918.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.552-5.154 2.16 2.16 0 0 0 1.663 0 22.355 22.355 0 0 0 3.535 5.154l.717.726 2.389-3.159 4.926-.805-1.312-1.225Zm-16.056 2.468-1.55-2.048-2.195-.367a16.12 16.12 0 0 0 2.16-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.881.028 1.304.149.362.208.69.47.972.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.942-.28c-.578 0-1.243 0-1.461-.254-.22-.254-.237-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.155-1.522c-.403-.394-.875-.919-.875-1.269 0-.35.472-.875.875-1.269.477-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.253-.228.874-.237 1.46-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.731 5.5c.429-.411.875-.875 1.269-.875.393 0 .875.473 1.268.875.428.474.942.863 1.514 1.146a5.25 5.25 0 0 0 1.943.28c.577 0 1.242 0 1.461.254.219.254.236.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.411.429.875.875.875 1.269 0 .394-.473.875-.875 1.269a5.059 5.059 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.254.228-.875.236-1.462.254a5.25 5.25 0 0 0-1.942.28 5.056 5.056 0 0 0-1.523 1.155c-.428.411-.918.875-1.268.875s-.875-.473-1.269-.875Zm7.779 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.2-.193c.296-.314.638-.58 1.016-.787.423-.121.864-.171 1.303-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.197 3.116l-2.24.376ZM20.06 11.38l-5.714 5.714-2.835-2.844 1.234-1.242 1.601 1.6 4.48-4.488 1.234 1.26Z"></path></svg>';
 
 export class IconRibbonSuccessLarge extends HTMLElement {
     constructor () {

package/icons/IconRocketShip.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--rocketShip"><path d="m14.659 1.814-.097-.377-.376-.096A6.317 6.317 0 0 0 7.834 3.24L6.478 4.596a.21.21 0 0 1-.158.061H4.141a1.242 1.242 0 0 0-.98.368L1.954 6.25l7.796 7.752 1.207-1.198a1.277 1.277 0 0 0 .368-.954V9.636a.254.254 0 0 1 .061-.157l1.357-1.357a6.291 6.291 0 0 0 1.916-6.308Zm-2.87 5.381-1.357 1.356c-.282.29-.442.68-.446 1.085v2.24l-.28.272L3.818 6.25l.288-.28H6.32a1.522 1.522 0 0 0 1.085-.446l1.356-1.357a5.057 5.057 0 0 1 4.708-1.645 5.03 5.03 0 0 1-1.68 4.673Zm-.796-2.188a1.138 1.138 0 1 1-1.611 1.608 1.138 1.138 0 0 1 1.61-1.608ZM4.5 10.625 1.945 13.25 1 12.305 3.625 9.75l.875.875Zm.875.875.875.875-1.68 1.75-.945-.945 1.75-1.68Z"></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--rocketShip"><path d="m14.659 1.814-.097-.377-.376-.096A6.317 6.317 0 0 0 7.834 3.24L6.478 4.596a.21.21 0 0 1-.158.061H4.141a1.242 1.242 0 0 0-.98.368L1.954 6.25l7.796 7.752 1.207-1.198a1.277 1.277 0 0 0 .368-.954V9.636a.254.254 0 0 1 .061-.157l1.357-1.357a6.291 6.291 0 0 0 1.916-6.308Zm-2.87 5.381-1.357 1.356c-.282.29-.442.68-.446 1.085v2.24l-.28.272L3.818 6.25l.288-.28H6.32a1.522 1.522 0 0 0 1.085-.446l1.356-1.357a5.057 5.057 0 0 1 4.708-1.645 5.03 5.03 0 0 1-1.68 4.673Zm-.796-2.188a1.138 1.138 0 1 1-1.611 1.608 1.138 1.138 0 0 1 1.61-1.608ZM4.5 10.625 1.945 13.25 1 12.305 3.625 9.75l.875.875Zm.875.875.875.875-1.68 1.75-.945-.945 1.75-1.68Z"></path></svg>';
 
 export class IconRocketShip extends HTMLElement {
     constructor () {

package/icons/IconRocketShipLarge.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--rocketShipLarge"><path d="m27.016 5.631-.131-.499-.499-.13c-4.121-1.05-7.875.07-11.138 3.342l-3.115 3.115a.708.708 0 0 1-.508.166H7.696a2.039 2.039 0 0 0-1.54.578l-1.951 1.986L17.75 27.742l1.951-1.95a2.021 2.021 0 0 0 .578-1.497v-3.981a.69.69 0 0 1 .201-.499l3.115-3.115c3.308-3.325 4.454-7.026 3.421-11.069Zm-4.646 9.835-3.115 3.159a2.433 2.433 0 0 0-.717 1.75v4.034a.288.288 0 0 1-.062.21l-.726.656L6.673 14.189l.717-.718a.34.34 0 0 1 .263-.061h3.972a2.467 2.467 0 0 0 1.75-.717l3.115-3.107c2.66-2.677 5.635-3.684 8.951-3.01.665 3.246-.341 6.16-3.071 8.89Zm-4.463-5.433a2.878 2.878 0 1 0 4.078 0 2.957 2.957 0 0 0-4.078 0Zm2.835 2.835a1.129 1.129 0 0 1-1.592-1.593 1.121 1.121 0 0 1 1.593 0 1.111 1.111 0 0 1 0 1.592ZM9.08 21.538l-3.833 3.833-1.242-1.242 3.832-3.833L9.08 21.54Zm1.382 1.383 1.243 1.243-2.52 2.52L7.94 25.44l2.52-2.52Z"></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--rocketShipLarge"><path d="m27.016 5.631-.131-.499-.499-.13c-4.121-1.05-7.875.07-11.138 3.342l-3.115 3.115a.708.708 0 0 1-.508.166H7.696a2.039 2.039 0 0 0-1.54.578l-1.951 1.986L17.75 27.742l1.951-1.95a2.021 2.021 0 0 0 .578-1.497v-3.981a.69.69 0 0 1 .201-.499l3.115-3.115c3.308-3.325 4.454-7.026 3.421-11.069Zm-4.646 9.835-3.115 3.159a2.433 2.433 0 0 0-.717 1.75v4.034a.288.288 0 0 1-.062.21l-.726.656L6.673 14.189l.717-.718a.34.34 0 0 1 .263-.061h3.972a2.467 2.467 0 0 0 1.75-.717l3.115-3.107c2.66-2.677 5.635-3.684 8.951-3.01.665 3.246-.341 6.16-3.071 8.89Zm-4.463-5.433a2.878 2.878 0 1 0 4.078 0 2.957 2.957 0 0 0-4.078 0Zm2.835 2.835a1.129 1.129 0 0 1-1.592-1.593 1.121 1.121 0 0 1 1.593 0 1.111 1.111 0 0 1 0 1.592ZM9.08 21.538l-3.833 3.833-1.242-1.242 3.832-3.833L9.08 21.54Zm1.382 1.383 1.243 1.243-2.52 2.52L7.94 25.44l2.52-2.52Z"></path></svg>';
 
 export class IconRocketShipLarge extends HTMLElement {
     constructor () {

package/icons/IconRoutePin.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--routePin"><path d="M13.031 2.575a4.646 4.646 0 0 0-6.562 0 4.655 4.655 0 0 0 0 6.571l3.281 3.281 3.281-3.28a4.655 4.655 0 0 0 0-6.572Zm-.927 5.644L9.75 10.573 7.396 8.218a3.325 3.325 0 1 1 4.708 0Zm-1.076-2.442a1.277 1.277 0 1 1-2.555 0 1.277 1.277 0 0 1 2.554 0Zm-6.738 7.7 6.344.053v1.313L4.29 14.79a1.523 1.523 0 0 1-1.295-2.319l1.041-1.75a.21.21 0 0 0 0-.219.21.21 0 0 0-.192-.113H1V9.094h2.826a1.522 1.522 0 0 1 1.313 2.319l-1.042 1.75a.219.219 0 0 0 .193.332v-.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--routePin"><path d="M13.031 2.575a4.646 4.646 0 0 0-6.562 0 4.655 4.655 0 0 0 0 6.571l3.281 3.281 3.281-3.28a4.655 4.655 0 0 0 0-6.572Zm-.927 5.644L9.75 10.573 7.396 8.218a3.325 3.325 0 1 1 4.708 0Zm-1.076-2.442a1.277 1.277 0 1 1-2.555 0 1.277 1.277 0 0 1 2.554 0Zm-6.738 7.7 6.344.053v1.313L4.29 14.79a1.523 1.523 0 0 1-1.295-2.319l1.041-1.75a.21.21 0 0 0 0-.219.21.21 0 0 0-.192-.113H1V9.094h2.826a1.522 1.522 0 0 1 1.313 2.319l-1.042 1.75a.219.219 0 0 0 .193.332v-.018Z"></path></svg>';
 
 export class IconRoutePin extends HTMLElement {
     constructor () {

package/icons/IconRoutePinLarge.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--routePinLarge"><path d="M26.631 6.375A8.848 8.848 0 0 0 14.12 18.887l6.256 6.222 6.256-6.257a8.864 8.864 0 0 0 0-12.477Zm-1.233 11.244-5.023 5.022-5.023-5.022a7.097 7.097 0 1 1 10.046 0Zm-5.023-8.742a3.85 3.85 0 1 0 0 7.701 3.85 3.85 0 0 0 0-7.7Zm0 5.942a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2ZM8.895 26.5l13.23.061v1.75L8.886 28.25a2.73 2.73 0 0 1-2.38-1.4 2.537 2.537 0 0 1 .079-2.625l2.196-3.5a.796.796 0 0 0 0-.831.954.954 0 0 0-.875-.481H2v-1.75h5.941a2.73 2.73 0 0 1 2.398 1.39 2.52 2.52 0 0 1-.079 2.626l-2.188 3.5a.77.77 0 0 0 0 .822.962.962 0 0 0 .823.499Z"></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--routePinLarge"><path d="M26.631 6.375A8.848 8.848 0 0 0 14.12 18.887l6.256 6.222 6.256-6.257a8.864 8.864 0 0 0 0-12.477Zm-1.233 11.244-5.023 5.022-5.023-5.022a7.097 7.097 0 1 1 10.046 0Zm-5.023-8.742a3.85 3.85 0 1 0 0 7.701 3.85 3.85 0 0 0 0-7.7Zm0 5.942a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2ZM8.895 26.5l13.23.061v1.75L8.886 28.25a2.73 2.73 0 0 1-2.38-1.4 2.537 2.537 0 0 1 .079-2.625l2.196-3.5a.796.796 0 0 0 0-.831.954.954 0 0 0-.875-.481H2v-1.75h5.941a2.73 2.73 0 0 1 2.398 1.39 2.52 2.52 0 0 1-.079 2.626l-2.188 3.5a.77.77 0 0 0 0 .822.962.962 0 0 0 .823.499Z"></path></svg>';
 
 export class IconRoutePinLarge extends HTMLElement {
     constructor () {

package/icons/IconRss.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--rss"><path d="M5.034 2.96v1.312c.297 0 7.35.088 7.35 7.35h1.312c0-6.85-5.696-8.662-8.662-8.662Z"></path><path d="M5.034 7.326V8.64A2.984 2.984 0 0 1 8 11.623h1.313a4.296 4.296 0 0 0-4.28-4.297Z"></path><path d="M3.433 11.964a1.155 1.155 0 1 0 1.627 1.639 1.155 1.155 0 0 0-1.627-1.64Z"></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--rss"><path d="M5.034 2.96v1.312c.297 0 7.35.088 7.35 7.35h1.312c0-6.85-5.696-8.662-8.662-8.662Z"></path><path d="M5.034 7.326V8.64A2.984 2.984 0 0 1 8 11.623h1.313a4.296 4.296 0 0 0-4.28-4.297Z"></path><path d="M3.433 11.964a1.155 1.155 0 1 0 1.627 1.639 1.155 1.155 0 0 0-1.627-1.64Z"></path></svg>';
 
 export class IconRss extends HTMLElement {
     constructor () {

package/icons/IconRssLarge.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--rssLarge"><path d="M8.762 21.355a1.312 1.312 0 1 0 1.853 1.86 1.312 1.312 0 0 0-1.853-1.86Z"></path><path d="M8.5 7v1.5a15 15 0 0 1 15 15H25A16.5 16.5 0 0 0 8.5 7Z"></path><path d="M9.25 11.807v1.5a9.458 9.458 0 0 1 9.442 9.443h1.5A10.957 10.957 0 0 0 9.25 11.807Z"></path><path d="M10 16.615v1.5A3.893 3.893 0 0 1 13.885 22h1.5A5.393 5.393 0 0 0 10 16.615Z"></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--rssLarge"><path d="M8.762 21.355a1.312 1.312 0 1 0 1.853 1.86 1.312 1.312 0 0 0-1.853-1.86Z"></path><path d="M8.5 7v1.5a15 15 0 0 1 15 15H25A16.5 16.5 0 0 0 8.5 7Z"></path><path d="M9.25 11.807v1.5a9.458 9.458 0 0 1 9.442 9.443h1.5A10.957 10.957 0 0 0 9.25 11.807Z"></path><path d="M10 16.615v1.5A3.893 3.893 0 0 1 13.885 22h1.5A5.393 5.393 0 0 0 10 16.615Z"></path></svg>';
 
 export class IconRssLarge extends HTMLElement {
     constructor () {

package/icons/IconSalad.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--salad"><path d="M14.037 7.344c.082-.128.147-.267.193-.412a2.066 2.066 0 0 0-.236-1.837.236.236 0 0 1 0-.184 2.26 2.26 0 0 0 .14-.875 2.084 2.084 0 0 0-.875-1.592 1.943 1.943 0 0 0-2.354 0 .175.175 0 0 1-.105 0 1.75 1.75 0 0 0-.796-.14 1.969 1.969 0 0 0-1.558.875.315.315 0 0 1 0 .078 2.074 2.074 0 0 0-.971-.875 1.969 1.969 0 0 0-.875-.166.131.131 0 0 1-.131-.052 2.048 2.048 0 0 0-2.319-.867 2.126 2.126 0 0 0-1.4 1.295 2.327 2.327 0 0 0-.158.875.245.245 0 0 1-.087.228 2.249 2.249 0 0 0 0 3.57.228.228 0 0 1 .061.087H1.22v1.523a4.148 4.148 0 0 0 2.73 3.894l.262 1.137h7.578l.262-1.137a4.147 4.147 0 0 0 2.73-3.894V7.344h-.744ZM9.4 4.404a.875.875 0 0 1 .157-.473.648.648 0 0 1 .517-.306.708.708 0 0 1 .28.052 1.391 1.391 0 0 0 1.356-.157.656.656 0 0 1 .796 0 .804.804 0 0 1 .289.56.995.995 0 0 1-.061.359 1.533 1.533 0 0 0 .166 1.373.822.822 0 0 1 .088.7.69.69 0 0 1-.464.455 1.391 1.391 0 0 0-.621.377H10.8c.292-.404.555-.828.787-1.269l-1.163-.604a8.874 8.874 0 0 1-1.199 1.75 2.249 2.249 0 0 0-.446-1.549A1.619 1.619 0 0 0 9.4 4.404ZM3.319 6.197a.875.875 0 0 1-.35-.726.875.875 0 0 1 .35-.726 1.566 1.566 0 0 0 .612-1.313c.003-.128.027-.255.07-.376a.822.822 0 0 1 .499-.49.761.761 0 0 1 .875.333 1.488 1.488 0 0 0 1.277.656.796.796 0 0 1 .597.302c.082.098.141.213.174.337a.936.936 0 0 1 0 .56c-.141.397-.122.833.052 1.216.07.163.16.316.271.455a.928.928 0 0 1 .193.779v.131H6.915A4.559 4.559 0 0 1 5.909 5.27l-1.295.21c.127.653.357 1.283.682 1.864H3.922a1.531 1.531 0 0 0-.603-1.147Zm10.15 2.678a2.836 2.836 0 0 1-2.135 2.739l-.385.105-.201.875H5.253l-.202-.875-.385-.105a2.835 2.835 0 0 1-2.135-2.739v-.219H13.47v.219Z"></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--salad"><path d="M14.037 7.344c.082-.128.147-.267.193-.412a2.066 2.066 0 0 0-.236-1.837.236.236 0 0 1 0-.184 2.26 2.26 0 0 0 .14-.875 2.084 2.084 0 0 0-.875-1.592 1.943 1.943 0 0 0-2.354 0 .175.175 0 0 1-.105 0 1.75 1.75 0 0 0-.796-.14 1.969 1.969 0 0 0-1.558.875.315.315 0 0 1 0 .078 2.074 2.074 0 0 0-.971-.875 1.969 1.969 0 0 0-.875-.166.131.131 0 0 1-.131-.052 2.048 2.048 0 0 0-2.319-.867 2.126 2.126 0 0 0-1.4 1.295 2.327 2.327 0 0 0-.158.875.245.245 0 0 1-.087.228 2.249 2.249 0 0 0 0 3.57.228.228 0 0 1 .061.087H1.22v1.523a4.148 4.148 0 0 0 2.73 3.894l.262 1.137h7.578l.262-1.137a4.147 4.147 0 0 0 2.73-3.894V7.344h-.744ZM9.4 4.404a.875.875 0 0 1 .157-.473.648.648 0 0 1 .517-.306.708.708 0 0 1 .28.052 1.391 1.391 0 0 0 1.356-.157.656.656 0 0 1 .796 0 .804.804 0 0 1 .289.56.995.995 0 0 1-.061.359 1.533 1.533 0 0 0 .166 1.373.822.822 0 0 1 .088.7.69.69 0 0 1-.464.455 1.391 1.391 0 0 0-.621.377H10.8c.292-.404.555-.828.787-1.269l-1.163-.604a8.874 8.874 0 0 1-1.199 1.75 2.249 2.249 0 0 0-.446-1.549A1.619 1.619 0 0 0 9.4 4.404ZM3.319 6.197a.875.875 0 0 1-.35-.726.875.875 0 0 1 .35-.726 1.566 1.566 0 0 0 .612-1.313c.003-.128.027-.255.07-.376a.822.822 0 0 1 .499-.49.761.761 0 0 1 .875.333 1.488 1.488 0 0 0 1.277.656.796.796 0 0 1 .597.302c.082.098.141.213.174.337a.936.936 0 0 1 0 .56c-.141.397-.122.833.052 1.216.07.163.16.316.271.455a.928.928 0 0 1 .193.779v.131H6.915A4.559 4.559 0 0 1 5.909 5.27l-1.295.21c.127.653.357 1.283.682 1.864H3.922a1.531 1.531 0 0 0-.603-1.147Zm10.15 2.678a2.836 2.836 0 0 1-2.135 2.739l-.385.105-.201.875H5.253l-.202-.875-.385-.105a2.835 2.835 0 0 1-2.135-2.739v-.219H13.47v.219Z"></path></svg>';
 
 export class IconSalad extends HTMLElement {
     constructor () {

package/icons/IconSaladLarge.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--saladLarge"><path d="M27.235 16c.338-.321.606-.708.788-1.137a3.237 3.237 0 0 0-.482-3.238.516.516 0 0 1-.052-.551c.185-.45.274-.932.262-1.418a3.378 3.378 0 0 0-1.601-2.669 4.016 4.016 0 0 0-4.279 0 .875.875 0 0 1-.796 0 4.156 4.156 0 0 0-1.444-.21 3.806 3.806 0 0 0-2.887 1.383A3.351 3.351 0 0 0 16 10.277a.814.814 0 0 1-.42.64 3.588 3.588 0 0 0-.123-1.103 3.5 3.5 0 0 0-2.082-2.302 3.658 3.658 0 0 0-1.383-.262.63.63 0 0 1-.542-.228 3.5 3.5 0 0 0-6.125.657c-.18.444-.27.92-.263 1.4a.691.691 0 0 1-.27.586 3.5 3.5 0 0 0 0 5.731.674.674 0 0 1 .262.569H2.875v2.625a7.875 7.875 0 0 0 5.39 7.446l.508 2.214h14.454l.508-2.179a7.875 7.875 0 0 0 5.39-7.446V16h-1.89Zm-11.008-3.43a2.625 2.625 0 0 0 1.523-2.293c.007-.361.136-.71.367-.988a2.047 2.047 0 0 1 1.558-.709c.276-.011.552.027.814.114a2.625 2.625 0 0 0 2.336-.219 2.222 2.222 0 0 1 2.398 0A1.618 1.618 0 0 1 26 9.735c.01.237-.032.472-.122.691a2.25 2.25 0 0 0 .28 2.293 1.488 1.488 0 0 1 .236 1.531 1.9 1.9 0 0 1-1.339 1.085 2.52 2.52 0 0 0-1.233.7h-3.107a24.345 24.345 0 0 0 3.5-3.876l-1.426-.998a25.01 25.01 0 0 1-2.021 2.389 5.675 5.675 0 0 1-.088-1.899l-1.75-.28a6.797 6.797 0 0 0 .438 3.5c-.471.404-.965.781-1.479 1.129h-1.523v-.114a3.499 3.499 0 0 0-.717-2.905c.17-.165.365-.304.577-.411ZM5.78 13.97a1.75 1.75 0 0 1-.744-1.47 1.75 1.75 0 0 1 .744-1.435 2.415 2.415 0 0 0 1.015-2.021c-.007-.244.04-.486.14-.709a1.75 1.75 0 0 1 3.071-.315 2.38 2.38 0 0 0 2.039.98c.24-.002.477.043.7.131a1.75 1.75 0 0 1 1.033 1.146c.113.35.113.727 0 1.077a2.546 2.546 0 0 0 .087 1.942c.114.259.268.498.455.709a1.75 1.75 0 0 1 .402 1.514c0 .087-.043.166-.07.262a1.174 1.174 0 0 1-.104.21h-1.716c-1.636-2.143-2.082-5.784-2.082-5.827L9 10.365c.099.756.248 1.504.446 2.24a10.013 10.013 0 0 1-1.592-.796l-.928 1.479a14.002 14.002 0 0 0 3.211 1.417c.18.443.384.875.613 1.295H6.795a2.415 2.415 0 0 0-1.015-2.03Zm21.595 4.655a6.125 6.125 0 0 1-4.594 5.906l-.516.132-.429 1.837H10.164l-.429-1.837-.516-.132a6.125 6.125 0 0 1-4.594-5.906v-.875h22.75v.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--saladLarge"><path d="M27.235 16c.338-.321.606-.708.788-1.137a3.237 3.237 0 0 0-.482-3.238.516.516 0 0 1-.052-.551c.185-.45.274-.932.262-1.418a3.378 3.378 0 0 0-1.601-2.669 4.016 4.016 0 0 0-4.279 0 .875.875 0 0 1-.796 0 4.156 4.156 0 0 0-1.444-.21 3.806 3.806 0 0 0-2.887 1.383A3.351 3.351 0 0 0 16 10.277a.814.814 0 0 1-.42.64 3.588 3.588 0 0 0-.123-1.103 3.5 3.5 0 0 0-2.082-2.302 3.658 3.658 0 0 0-1.383-.262.63.63 0 0 1-.542-.228 3.5 3.5 0 0 0-6.125.657c-.18.444-.27.92-.263 1.4a.691.691 0 0 1-.27.586 3.5 3.5 0 0 0 0 5.731.674.674 0 0 1 .262.569H2.875v2.625a7.875 7.875 0 0 0 5.39 7.446l.508 2.214h14.454l.508-2.179a7.875 7.875 0 0 0 5.39-7.446V16h-1.89Zm-11.008-3.43a2.625 2.625 0 0 0 1.523-2.293c.007-.361.136-.71.367-.988a2.047 2.047 0 0 1 1.558-.709c.276-.011.552.027.814.114a2.625 2.625 0 0 0 2.336-.219 2.222 2.222 0 0 1 2.398 0A1.618 1.618 0 0 1 26 9.735c.01.237-.032.472-.122.691a2.25 2.25 0 0 0 .28 2.293 1.488 1.488 0 0 1 .236 1.531 1.9 1.9 0 0 1-1.339 1.085 2.52 2.52 0 0 0-1.233.7h-3.107a24.345 24.345 0 0 0 3.5-3.876l-1.426-.998a25.01 25.01 0 0 1-2.021 2.389 5.675 5.675 0 0 1-.088-1.899l-1.75-.28a6.797 6.797 0 0 0 .438 3.5c-.471.404-.965.781-1.479 1.129h-1.523v-.114a3.499 3.499 0 0 0-.717-2.905c.17-.165.365-.304.577-.411ZM5.78 13.97a1.75 1.75 0 0 1-.744-1.47 1.75 1.75 0 0 1 .744-1.435 2.415 2.415 0 0 0 1.015-2.021c-.007-.244.04-.486.14-.709a1.75 1.75 0 0 1 3.071-.315 2.38 2.38 0 0 0 2.039.98c.24-.002.477.043.7.131a1.75 1.75 0 0 1 1.033 1.146c.113.35.113.727 0 1.077a2.546 2.546 0 0 0 .087 1.942c.114.259.268.498.455.709a1.75 1.75 0 0 1 .402 1.514c0 .087-.043.166-.07.262a1.174 1.174 0 0 1-.104.21h-1.716c-1.636-2.143-2.082-5.784-2.082-5.827L9 10.365c.099.756.248 1.504.446 2.24a10.013 10.013 0 0 1-1.592-.796l-.928 1.479a14.002 14.002 0 0 0 3.211 1.417c.18.443.384.875.613 1.295H6.795a2.415 2.415 0 0 0-1.015-2.03Zm21.595 4.655a6.125 6.125 0 0 1-4.594 5.906l-.516.132-.429 1.837H10.164l-.429-1.837-.516-.132a6.125 6.125 0 0 1-4.594-5.906v-.875h22.75v.875Z"></path></svg>';
 
 export class IconSaladLarge extends HTMLElement {
     constructor () {

package/icons/IconSandwich.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--sandwich"><path d="M13.906 5.375a3.15 3.15 0 0 0-3.001-3.281c-.494.001-.98.13-1.409.376a2.844 2.844 0 0 0-2.896.061 2.774 2.774 0 0 0-1.505-.437 3.15 3.15 0 0 0-3.001 3.281v1.531h11.812V5.375Zm-1.312.219H3.406v-.219a1.846 1.846 0 0 1 1.689-1.969c.393 0 .77.155 1.05.429l.455.438.455-.438a1.496 1.496 0 0 1 2.012-.061l.42.367.43-.367c.276-.234.626-.364.988-.368a1.846 1.846 0 0 1 1.689 1.969v.219Zm1.82 1.75v1.312c-.832 0-.875.123-.945.289a1.513 1.513 0 0 1-1.234 1.05 1.95 1.95 0 0 1-1.803-.464c-.227-.175-.323-.245-.525-.245h-.096v.062a1.75 1.75 0 0 1-1.794.874 1.75 1.75 0 0 1-1.75-.874.49.49 0 0 0 0-.07h-.175c-.2 0-.297.07-.525.245a1.934 1.934 0 0 1-1.802.463 1.514 1.514 0 0 1-1.234-1.05c-.07-.166-.114-.288-.945-.288V7.344c1.435 0 1.89.429 2.161 1.129.08.192.08.192.298.245.219.052.446 0 .709-.22.372-.32.847-.496 1.338-.498a1.295 1.295 0 0 1 1.252.726c.087.167.14.245.656.245s.569-.078.665-.245A1.269 1.269 0 0 1 9.907 8c.495.009.97.195 1.34.525.262.21.367.289.708.219.341-.07.219-.053.297-.245.272-.726.727-1.155 2.162-1.155Zm-1.82 3.281h1.312v.875a1.54 1.54 0 0 1-1.531 1.531h-8.75A1.54 1.54 0 0 1 2.094 11.5v-.875h1.312v.875a.219.219 0 0 0 .219.219h8.75a.22.22 0 0 0 .219-.219v-.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--sandwich"><path d="M13.906 5.375a3.15 3.15 0 0 0-3.001-3.281c-.494.001-.98.13-1.409.376a2.844 2.844 0 0 0-2.896.061 2.774 2.774 0 0 0-1.505-.437 3.15 3.15 0 0 0-3.001 3.281v1.531h11.812V5.375Zm-1.312.219H3.406v-.219a1.846 1.846 0 0 1 1.689-1.969c.393 0 .77.155 1.05.429l.455.438.455-.438a1.496 1.496 0 0 1 2.012-.061l.42.367.43-.367c.276-.234.626-.364.988-.368a1.846 1.846 0 0 1 1.689 1.969v.219Zm1.82 1.75v1.312c-.832 0-.875.123-.945.289a1.513 1.513 0 0 1-1.234 1.05 1.95 1.95 0 0 1-1.803-.464c-.227-.175-.323-.245-.525-.245h-.096v.062a1.75 1.75 0 0 1-1.794.874 1.75 1.75 0 0 1-1.75-.874.49.49 0 0 0 0-.07h-.175c-.2 0-.297.07-.525.245a1.934 1.934 0 0 1-1.802.463 1.514 1.514 0 0 1-1.234-1.05c-.07-.166-.114-.288-.945-.288V7.344c1.435 0 1.89.429 2.161 1.129.08.192.08.192.298.245.219.052.446 0 .709-.22.372-.32.847-.496 1.338-.498a1.295 1.295 0 0 1 1.252.726c.087.167.14.245.656.245s.569-.078.665-.245A1.269 1.269 0 0 1 9.907 8c.495.009.97.195 1.34.525.262.21.367.289.708.219.341-.07.219-.053.297-.245.272-.726.727-1.155 2.162-1.155Zm-1.82 3.281h1.312v.875a1.54 1.54 0 0 1-1.531 1.531h-8.75A1.54 1.54 0 0 1 2.094 11.5v-.875h1.312v.875a.219.219 0 0 0 .219.219h8.75a.22.22 0 0 0 .219-.219v-.875Z"></path></svg>';
 
 export class IconSandwich extends HTMLElement {
     constructor () {

package/icons/IconSandwichLarge.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--sandwichLarge"><path d="M28.836 15.125v1.75c-1.898 0-2.038.464-2.275 1.304a2.94 2.94 0 0 1-2.126 2.354 3.062 3.062 0 0 1-3.395-1.164c-.49-.517-.761-.788-1.234-.788-.289 0-.306 0-.542.569-.333.779-.875 2.091-3.264 2.091s-2.931-1.312-3.264-2.091c-.236-.525-.236-.525-.542-.525-.473 0-.744.271-1.234.788a3.062 3.062 0 0 1-3.395 1.163 2.94 2.94 0 0 1-2.126-2.354c-.236-.875-.376-1.303-2.275-1.303v-1.794c2.975 0 3.587 1.269 3.955 2.564.192.665.28.971.945 1.163.665.193.98 0 1.619-.682a3.342 3.342 0 0 1 2.51-1.295 2.188 2.188 0 0 1 2.153 1.628c.289.665.438 1.032 1.654 1.032s1.365-.367 1.654-1.032a2.187 2.187 0 0 1 2.152-1.628 3.343 3.343 0 0 1 2.511 1.339c.64.674.875.875 1.62.682.743-.192.752-.498.944-1.163.368-1.34.98-2.608 3.955-2.608ZM25.625 23a.875.875 0 0 1-.875.875H7.25A.875.875 0 0 1 6.375 23v-1.75h-1.75V23a2.625 2.625 0 0 0 2.625 2.625h17.5A2.625 2.625 0 0 0 27.375 23v-1.75h-1.75V23Zm-21-9.625v-1.531a5.582 5.582 0 0 1 8.584-4.594 5.46 5.46 0 0 1 2.983-.875c.99.003 1.962.266 2.818.761a5.556 5.556 0 0 1 8.365 4.708v1.531a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875Zm1.75-.875h19.25v-.656a3.78 3.78 0 0 0-3.824-3.719 3.876 3.876 0 0 0-1.312.236c.31.38.565.802.761 1.252h-2.012a3.841 3.841 0 0 0-4.655-1.13c.274.35.509.728.7 1.13h-2.04A3.859 3.859 0 0 0 10.2 8.125a3.78 3.78 0 0 0-3.824 3.719v.656Z"></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--sandwichLarge"><path d="M28.836 15.125v1.75c-1.898 0-2.038.464-2.275 1.304a2.94 2.94 0 0 1-2.126 2.354 3.062 3.062 0 0 1-3.395-1.164c-.49-.517-.761-.788-1.234-.788-.289 0-.306 0-.542.569-.333.779-.875 2.091-3.264 2.091s-2.931-1.312-3.264-2.091c-.236-.525-.236-.525-.542-.525-.473 0-.744.271-1.234.788a3.062 3.062 0 0 1-3.395 1.163 2.94 2.94 0 0 1-2.126-2.354c-.236-.875-.376-1.303-2.275-1.303v-1.794c2.975 0 3.587 1.269 3.955 2.564.192.665.28.971.945 1.163.665.193.98 0 1.619-.682a3.342 3.342 0 0 1 2.51-1.295 2.188 2.188 0 0 1 2.153 1.628c.289.665.438 1.032 1.654 1.032s1.365-.367 1.654-1.032a2.187 2.187 0 0 1 2.152-1.628 3.343 3.343 0 0 1 2.511 1.339c.64.674.875.875 1.62.682.743-.192.752-.498.944-1.163.368-1.34.98-2.608 3.955-2.608ZM25.625 23a.875.875 0 0 1-.875.875H7.25A.875.875 0 0 1 6.375 23v-1.75h-1.75V23a2.625 2.625 0 0 0 2.625 2.625h17.5A2.625 2.625 0 0 0 27.375 23v-1.75h-1.75V23Zm-21-9.625v-1.531a5.582 5.582 0 0 1 8.584-4.594 5.46 5.46 0 0 1 2.983-.875c.99.003 1.962.266 2.818.761a5.556 5.556 0 0 1 8.365 4.708v1.531a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875Zm1.75-.875h19.25v-.656a3.78 3.78 0 0 0-3.824-3.719 3.876 3.876 0 0 0-1.312.236c.31.38.565.802.761 1.252h-2.012a3.841 3.841 0 0 0-4.655-1.13c.274.35.509.728.7 1.13h-2.04A3.859 3.859 0 0 0 10.2 8.125a3.78 3.78 0 0 0-3.824 3.719v.656Z"></path></svg>';
 
 export class IconSandwichLarge extends HTMLElement {
     constructor () {

package/icons/IconSearch.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--search"><path d="M14.125 13.162 11.15 10.18a5.049 5.049 0 1 0-.936.936l2.948 3.01.963-.963Zm-7-2.318a3.718 3.718 0 1 1 3.719-3.719 3.728 3.728 0 0 1-3.72 3.719Z"></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--search"><path d="M14.125 13.162 11.15 10.18a5.049 5.049 0 1 0-.936.936l2.948 3.01.963-.963Zm-7-2.318a3.718 3.718 0 1 1 3.719-3.719 3.728 3.728 0 0 1-3.72 3.719Z"></path></svg>';
 
 export class IconSearch extends HTMLElement {
     constructor () {

package/icons/IconSearchLarge.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--searchLarge"><path d="M27.996 26.754 23 21.766A10.972 10.972 0 1 0 21.766 23l4.988 4.988 1.242-1.234Zm-13.309-2.879a9.187 9.187 0 1 1 9.188-9.188 9.196 9.196 0 0 1-9.188 9.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 32 32" class="c-pieIcon c-pieIcon--searchLarge"><path d="M27.996 26.754 23 21.766A10.972 10.972 0 1 0 21.766 23l4.988 4.988 1.242-1.234Zm-13.309-2.879a9.187 9.187 0 1 1 9.188-9.188 9.196 9.196 0 0 1-9.188 9.188Z"></path></svg>';
 
 export class IconSearchLarge extends HTMLElement {
     constructor () {

package/icons/IconSend.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--send"><path d="M14.457 1.525a.937.937 0 0 0-.665-.271.665.665 0 0 0-.297.052L1.814 5.13a.936.936 0 0 0 0 1.75l2.047.875v4.454h4.305L9.13 14.3a.936.936 0 0 0 .83.516h.045a.945.945 0 0 0 .83-.621L14.65 2.558a.936.936 0 0 0 .061-.342.918.918 0 0 0-.254-.691ZM3.257 6.04l8.322-2.73-4.585 4.27-3.737-1.54Zm1.9 4.804V8.219l.778.324.726.332.263.578.638 1.4-2.406-.01Zm4.75 1.96L7.94 8.499l4.873-4.541-2.905 8.846Z"></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--send"><path d="M14.457 1.525a.937.937 0 0 0-.665-.271.665.665 0 0 0-.297.052L1.814 5.13a.936.936 0 0 0 0 1.75l2.047.875v4.454h4.305L9.13 14.3a.936.936 0 0 0 .83.516h.045a.945.945 0 0 0 .83-.621L14.65 2.558a.936.936 0 0 0 .061-.342.918.918 0 0 0-.254-.691ZM3.257 6.04l8.322-2.73-4.585 4.27-3.737-1.54Zm1.9 4.804V8.219l.778.324.726.332.263.578.638 1.4-2.406-.01Zm4.75 1.96L7.94 8.499l4.873-4.541-2.905 8.846Z"></path></svg>';
 
 export class IconSend extends HTMLElement {
     constructor () {

package/icons/IconSendLarge.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--sendLarge"><path d="M25.705 7.315a1.155 1.155 0 0 0-1.08-1.05 1.08 1.08 0 0 0-.488.052L5.5 12.43a1.178 1.178 0 0 0-.75 1.072 1.208 1.208 0 0 0 .75 1.118l3.75 1.552V22h6l2.108 4.59a1.2 1.2 0 0 0 1.064.652h.053a1.207 1.207 0 0 0 1.065-.795L25.645 7.87a1.17 1.17 0 0 0 .06-.555Zm-3.51 1.222-8.445 7.868-6.885-2.843 15.33-5.025ZM10.75 20.5v-3.705l1.785.75.832.345.3.652.908 1.958H10.75Zm7.628 4.71-3.556-7.763 8.783-8.197-5.227 15.96Z"></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--sendLarge"><path d="M25.705 7.315a1.155 1.155 0 0 0-1.08-1.05 1.08 1.08 0 0 0-.488.052L5.5 12.43a1.178 1.178 0 0 0-.75 1.072 1.208 1.208 0 0 0 .75 1.118l3.75 1.552V22h6l2.108 4.59a1.2 1.2 0 0 0 1.064.652h.053a1.207 1.207 0 0 0 1.065-.795L25.645 7.87a1.17 1.17 0 0 0 .06-.555Zm-3.51 1.222-8.445 7.868-6.885-2.843 15.33-5.025ZM10.75 20.5v-3.705l1.785.75.832.345.3.652.908 1.958H10.75Zm7.628 4.71-3.556-7.763 8.783-8.197-5.227 15.96Z"></path></svg>';
 
 export class IconSendLarge extends HTMLElement {
     constructor () {

package/icons/IconServiceCharge.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--serviceCharge"><path d="M9.899 8.402s.008-.026.008-.035c0-.358-1.04-.656-2.327-.656-1.286 0-2.328.298-2.328.656 0 .01.01.027.01.035v4.857c0 .245 0 1.006 2.327 1.006s2.327-.753 2.327-1.076V8.41H9.89l.009-.009Zm-1.287.552v1.242c-.148.053-.49.123-1.006.123-.542 0-.901-.079-1.024-.132V8.963c.307.044.64.07.998.07.359 0 .717-.026 1.032-.07v-.008Zm-1.015 3.998c-.437 0-.787-.043-1.015-.087v-1.321c.35.07.727.087 1.024.087a5.22 5.22 0 0 0 1.006-.087v1.321a5.58 5.58 0 0 1-1.015.088Z"></path><path d="M13.696 5.751c0-.359-1.041-.656-2.327-.656-1.287 0-2.328.297-2.328.656 0 .009.009.018.009.035v7.306c0 1.12 1.934 1.182 2.327 1.182.394 0 2.328-.053 2.328-1.181V5.75h-.018.01Zm-3.325 3.176c.35.07.726.088 1.024.088.298 0 .656-.018 1.006-.088v1.27c-.149.052-.49.122-1.006.122-.543 0-.901-.079-1.024-.132V8.92v.008Zm2.03-2.59V7.58c-.149.052-.49.122-1.006.122-.543 0-.901-.078-1.024-.13V6.345c.306.044.639.07.998.07a7.66 7.66 0 0 0 1.032-.07v-.009Zm-1.015 6.624c-.446 0-.813-.07-1.015-.14v-1.268c.35.07.726.087 1.024.087.298 0 .656-.018 1.006-.088v1.26c-.201.07-.569.14-1.015.14v.01Z"></path><path d="M5.664 2.024 2.689 6.259h1.627L7.3 2.024H5.664Z"></path><path d="M3.135 3.686a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path><path d="M6.775 6.381a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></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--serviceCharge"><path d="M9.899 8.402s.008-.026.008-.035c0-.358-1.04-.656-2.327-.656-1.286 0-2.328.298-2.328.656 0 .01.01.027.01.035v4.857c0 .245 0 1.006 2.327 1.006s2.327-.753 2.327-1.076V8.41H9.89l.009-.009Zm-1.287.552v1.242c-.148.053-.49.123-1.006.123-.542 0-.901-.079-1.024-.132V8.963c.307.044.64.07.998.07.359 0 .717-.026 1.032-.07v-.008Zm-1.015 3.998c-.437 0-.787-.043-1.015-.087v-1.321c.35.07.727.087 1.024.087a5.22 5.22 0 0 0 1.006-.087v1.321a5.58 5.58 0 0 1-1.015.088Z"></path><path d="M13.696 5.751c0-.359-1.041-.656-2.327-.656-1.287 0-2.328.297-2.328.656 0 .009.009.018.009.035v7.306c0 1.12 1.934 1.182 2.327 1.182.394 0 2.328-.053 2.328-1.181V5.75h-.018.01Zm-3.325 3.176c.35.07.726.088 1.024.088.298 0 .656-.018 1.006-.088v1.27c-.149.052-.49.122-1.006.122-.543 0-.901-.079-1.024-.132V8.92v.008Zm2.03-2.59V7.58c-.149.052-.49.122-1.006.122-.543 0-.901-.078-1.024-.13V6.345c.306.044.639.07.998.07a7.66 7.66 0 0 0 1.032-.07v-.009Zm-1.015 6.624c-.446 0-.813-.07-1.015-.14v-1.268c.35.07.726.087 1.024.087.298 0 .656-.018 1.006-.088v1.26c-.201.07-.569.14-1.015.14v.01Z"></path><path d="M5.664 2.024 2.689 6.259h1.627L7.3 2.024H5.664Z"></path><path d="M3.135 3.686a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path><path d="M6.775 6.381a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path></svg>';
 
 export class IconServiceCharge extends HTMLElement {
     constructor () {

package/icons/IconServiceChargeLarge.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--serviceChargeLarge"><path d="m7.355 12.727 3.911-5.556h2.135L9.49 12.727H7.355Z"></path><path fill-rule="evenodd" d="M26.622 12.553c0-.604-1.697-1.086-3.788-1.086-2.092 0-3.79.49-3.79 1.085v2.472c-.69-.208-1.666-.336-2.747-.336-2.091 0-3.789.49-3.789 1.085 0 .016.007.029.015.043l.012.026v3.02a10.902 10.902 0 0 0-2.205-.21c-2.091 0-3.789.49-3.789 1.084l.026 6.134c0 1.356 2.372 1.557 3.78 1.557.91 0 2.205-.087 3.028-.498.822.394 2.065.472 2.94.472.982 0 2.422-.1 3.214-.622.952.802 3.002.832 3.296.832.385 0 3.789-.052 3.789-1.82V12.552h.008Zm-5.8 5.94v-1.631c.669.163 1.43.206 2.02.206.595 0 1.365-.044 2.04-.21v1.645h-.01c-.14.087-.848.297-2.012.297-1.164 0-1.873-.21-2.013-.306h-.026Zm-.01 3.5v-1.65c.672.164 1.447.207 2.039.207.595 0 1.356-.044 2.03-.21v1.654c-.14.096-.849.306-2.012.306-1.164 0-1.873-.21-2.013-.306h-.044Zm4.07-6.973v-1.554c-.592.112-1.277.171-2.022.171-.753 0-1.453-.07-2.039-.175v1.55h.018c.14.095.848.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.017Zm-2.04 10.841c-.98 0-1.723-.192-2.03-.341v-1.68c.683.175 1.462.219 2.057.219s1.347-.044 2.012-.201v1.67c-.306.15-1.05.342-2.039.342v-.009ZM12.37 22.046v-1.398c-.585.113-1.282.173-2.03.173-.753 0-1.444-.07-2.03-.175v1.392h.026c.14.096.849.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.008Zm-2.022 3.623c-.936 0-1.662-.123-2.03-.228v-1.549c.665.167 1.435.21 2.021.21.587 0 1.366-.043 2.04-.21v1.558c-.368.105-1.103.236-2.04.236l.01-.017Zm8.015-.28c-.367.114-1.102.245-2.038.245-.937 0-1.672-.131-2.03-.245v-1.776c.682.175 1.46.218 2.056.218.595 0 1.347-.043 2.012-.201v1.759Zm0-3.623c-.14.097-.848.307-2.012.307-1.164 0-1.873-.21-2.013-.307h-.043v-1.653c.673.166 1.452.21 2.047.21.595 0 1.356-.044 2.03-.21v1.653h-.009Zm0-3.491h-.017c-.14.088-.849.298-2.013.298s-1.872-.21-2.012-.307h-.027v-1.592c.587.105 1.27.166 2.013.166.744 0 1.47-.07 2.065-.175v1.601l-.009.009Z" clip-rule="evenodd"></path><path d="M7.941 9.359a1.094 1.094 0 1 0 0-2.188 1.094 1.094 0 0 0 0 2.188Z"></path><path d="M13.803 11.8a1.094 1.094 0 1 1-2.187 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 32 32" class="c-pieIcon c-pieIcon--serviceChargeLarge"><path d="m7.355 12.727 3.911-5.556h2.135L9.49 12.727H7.355Z"></path><path fill-rule="evenodd" d="M26.622 12.553c0-.604-1.697-1.086-3.788-1.086-2.092 0-3.79.49-3.79 1.085v2.472c-.69-.208-1.666-.336-2.747-.336-2.091 0-3.789.49-3.789 1.085 0 .016.007.029.015.043l.012.026v3.02a10.902 10.902 0 0 0-2.205-.21c-2.091 0-3.789.49-3.789 1.084l.026 6.134c0 1.356 2.372 1.557 3.78 1.557.91 0 2.205-.087 3.028-.498.822.394 2.065.472 2.94.472.982 0 2.422-.1 3.214-.622.952.802 3.002.832 3.296.832.385 0 3.789-.052 3.789-1.82V12.552h.008Zm-5.8 5.94v-1.631c.669.163 1.43.206 2.02.206.595 0 1.365-.044 2.04-.21v1.645h-.01c-.14.087-.848.297-2.012.297-1.164 0-1.873-.21-2.013-.306h-.026Zm-.01 3.5v-1.65c.672.164 1.447.207 2.039.207.595 0 1.356-.044 2.03-.21v1.654c-.14.096-.849.306-2.012.306-1.164 0-1.873-.21-2.013-.306h-.044Zm4.07-6.973v-1.554c-.592.112-1.277.171-2.022.171-.753 0-1.453-.07-2.039-.175v1.55h.018c.14.095.848.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.017Zm-2.04 10.841c-.98 0-1.723-.192-2.03-.341v-1.68c.683.175 1.462.219 2.057.219s1.347-.044 2.012-.201v1.67c-.306.15-1.05.342-2.039.342v-.009ZM12.37 22.046v-1.398c-.585.113-1.282.173-2.03.173-.753 0-1.444-.07-2.03-.175v1.392h.026c.14.096.849.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.008Zm-2.022 3.623c-.936 0-1.662-.123-2.03-.228v-1.549c.665.167 1.435.21 2.021.21.587 0 1.366-.043 2.04-.21v1.558c-.368.105-1.103.236-2.04.236l.01-.017Zm8.015-.28c-.367.114-1.102.245-2.038.245-.937 0-1.672-.131-2.03-.245v-1.776c.682.175 1.46.218 2.056.218.595 0 1.347-.043 2.012-.201v1.759Zm0-3.623c-.14.097-.848.307-2.012.307-1.164 0-1.873-.21-2.013-.307h-.043v-1.653c.673.166 1.452.21 2.047.21.595 0 1.356-.044 2.03-.21v1.653h-.009Zm0-3.491h-.017c-.14.088-.849.298-2.013.298s-1.872-.21-2.012-.307h-.027v-1.592c.587.105 1.27.166 2.013.166.744 0 1.47-.07 2.065-.175v1.601l-.009.009Z" clip-rule="evenodd"></path><path d="M7.941 9.359a1.094 1.094 0 1 0 0-2.188 1.094 1.094 0 0 0 0 2.188Z"></path><path d="M13.803 11.8a1.094 1.094 0 1 1-2.187 0 1.094 1.094 0 0 1 2.188 0Z"></path></svg>';
 
 export class IconServiceChargeLarge extends HTMLElement {
     constructor () {