@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconCutleryCircleFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--cutleryCircleFilledLarge"><path d="m20.183 18.52-1.173-.192a15.435 15.435 0 0 1 1.12-7.027c.149 2.433.114 5.277.053 7.219Z"></path><path fill-rule="evenodd" d="M9.194 5.814a12.25 12.25 0 1 1 13.612 20.372A12.25 12.25 0 0 1 9.194 5.814Zm4.977 3.265-1.75.875v4.375h1.75v-5.25Zm1.685 7.055c.437-.504.694-1.139.73-1.805V9.07l-1.75.875v4.375c0 .814-1.111 1.164-1.54 1.164-.428 0-1.531-.35-1.531-1.164V9.07l-1.75.875v4.375a2.984 2.984 0 0 0 2.406 2.774v6.256h1.75v-6.239a3.001 3.001 0 0 0 1.685-.977Zm5.79 7.21c.086-.863.19-1.894.252-3.765v-.009a85.04 85.04 0 0 0-.062-8.89c-.052-.787-.253-1.636-.927-1.925a1.391 1.391 0 0 0-1.68.534l-.003.004c-.13.189-2.348 3.404-1.983 9.262a1.47 1.47 0 0 0 1.137 1.453l1.75.28a48.158 48.158 0 0 1-.236 3.07h1.75l.001-.013Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--cutleryCircleFilledLarge"><path d="m20.183 18.52-1.173-.192a15.435 15.435 0 0 1 1.12-7.027c.149 2.433.114 5.277.053 7.219Z"></path><path fill-rule="evenodd" d="M9.194 5.814a12.25 12.25 0 1 1 13.612 20.372A12.25 12.25 0 0 1 9.194 5.814Zm4.977 3.265-1.75.875v4.375h1.75v-5.25Zm1.685 7.055c.437-.504.694-1.139.73-1.805V9.07l-1.75.875v4.375c0 .814-1.111 1.164-1.54 1.164-.428 0-1.531-.35-1.531-1.164V9.07l-1.75.875v4.375a2.984 2.984 0 0 0 2.406 2.774v6.256h1.75v-6.239a3.001 3.001 0 0 0 1.685-.977Zm5.79 7.21c.086-.863.19-1.894.252-3.765v-.009a85.04 85.04 0 0 0-.062-8.89c-.052-.787-.253-1.636-.927-1.925a1.391 1.391 0 0 0-1.68.534l-.003.004c-.13.189-2.348 3.404-1.983 9.262a1.47 1.47 0 0 0 1.137 1.453l1.75.28a48.158 48.158 0 0 1-.236 3.07h1.75l.001-.013Z" clip-rule="evenodd"></path></svg>';
 
 class IconCutleryCircleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconCutleryFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--cutleryFilled"><g clip-path="url(#prefix__clip0_6127_3639)"><path d="m4.719 7.134 1.312-.018-.07-5.591-1.303.63.06 4.979Z"></path><path d="m11.133 11.701 2.135.333c-.018 1.216-.123 2.196-.184 2.966h1.321a91.89 91.89 0 0 0 .166-12.031c-.087-.963-.323-1.479-.778-1.672a1.137 1.137 0 0 0-1.357.43 13.869 13.869 0 0 0-2.24 8.75 1.217 1.217 0 0 0 .937 1.224Z"></path><path d="m3.336 1.525-1.312.63v4.821a3.08 3.08 0 0 0 2.695 2.888V15H6.03V9.82a3.045 3.045 0 0 0 2.555-2.844V1.525l-1.312.63v4.821c0 1.164-1.391 1.636-1.969 1.636-.577 0-1.969-.472-1.969-1.636V1.525Z"></path></g><defs><clipPath id="prefix__clip0_6127_3639"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--cutleryFilled"><g clip-path="url(#prefix__clip0_6127_3639)"><path d="m4.719 7.134 1.312-.018-.07-5.591-1.303.63.06 4.979Z"></path><path d="m11.133 11.701 2.135.333c-.018 1.216-.123 2.196-.184 2.966h1.321a91.89 91.89 0 0 0 .166-12.031c-.087-.963-.323-1.479-.778-1.672a1.137 1.137 0 0 0-1.357.43 13.869 13.869 0 0 0-2.24 8.75 1.217 1.217 0 0 0 .937 1.224Z"></path><path d="m3.336 1.525-1.312.63v4.821a3.08 3.08 0 0 0 2.695 2.888V15H6.03V9.82a3.045 3.045 0 0 0 2.555-2.844V1.525l-1.312.63v4.821c0 1.164-1.391 1.636-1.969 1.636-.577 0-1.969-.472-1.969-1.636V1.525Z"></path></g><defs><clipPath id="prefix__clip0_6127_3639"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconCutleryFilled extends HTMLElement {
     constructor () {

package/dist/IconCutleryFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--cutleryFilledLarge"><path d="m24.391 21.25 2.827.464a67.186 67.186 0 0 1-.35 4.803h1.75c.13-1.268.28-2.764.376-5.52.188-4.29.162-8.586-.079-12.872-.157-1.461-.481-2.205-1.12-2.476a1.628 1.628 0 0 0-1.969.647c-.131.184-3.29 4.76-2.774 13.221a1.75 1.75 0 0 0 1.34 1.733Z"></path><path d="M14.25 5.754h-.166l-1.584.761v6.86c0 2.126 1.829 3.404 3.5 3.745v9.38h1.75v-9.398c1.68-.34 3.5-1.618 3.5-3.753V5.71l-1.75.875v6.79c0 1.496-1.855 2.091-2.625 2.091s-2.625-.595-2.625-2.091V5.754Z"></path><path d="m17.759 5.692-1.75.84v6.843h1.75V5.692Z"></path><path d="M5.5 15.886V26.5h1.75V15.886a4.786 4.786 0 0 0 3.185-4.768v-.736c0-2.694-1.82-4.882-4.06-4.882-2.24 0-4.06 2.188-4.06 4.883v.735A4.786 4.786 0 0 0 5.5 15.886Z"></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--cutleryFilledLarge"><path d="m24.391 21.25 2.827.464a67.186 67.186 0 0 1-.35 4.803h1.75c.13-1.268.28-2.764.376-5.52.188-4.29.162-8.586-.079-12.872-.157-1.461-.481-2.205-1.12-2.476a1.628 1.628 0 0 0-1.969.647c-.131.184-3.29 4.76-2.774 13.221a1.75 1.75 0 0 0 1.34 1.733Z"></path><path d="M14.25 5.754h-.166l-1.584.761v6.86c0 2.126 1.829 3.404 3.5 3.745v9.38h1.75v-9.398c1.68-.34 3.5-1.618 3.5-3.753V5.71l-1.75.875v6.79c0 1.496-1.855 2.091-2.625 2.091s-2.625-.595-2.625-2.091V5.754Z"></path><path d="m17.759 5.692-1.75.84v6.843h1.75V5.692Z"></path><path d="M5.5 15.886V26.5h1.75V15.886a4.786 4.786 0 0 0 3.185-4.768v-.736c0-2.694-1.82-4.882-4.06-4.882-2.24 0-4.06 2.188-4.06 4.883v.735A4.786 4.786 0 0 0 5.5 15.886Z"></path></svg>';
 
 class IconCutleryFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconCutleryLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--cutleryLarge"><path d="m24.391 21.25 2.827.464a67.186 67.186 0 0 1-.35 4.803h1.75c.13-1.268.28-2.764.376-5.52.188-4.29.162-8.586-.079-12.872-.157-1.461-.481-2.205-1.12-2.476a1.628 1.628 0 0 0-1.969.647c-.131.184-3.29 4.76-2.774 13.221a1.75 1.75 0 0 0 1.34 1.733ZM27.078 7.6c.045.237.077.477.096.718.288 3.858.21 8.61.114 11.61-.875-.14-2.004-.314-2.468-.402a.377.377 0 0 1 0-.105C24.4 12.86 26.378 8.8 27.078 7.6Z"></path><path d="M14.25 5.754h-.166l-1.584.761v6.86c0 2.126 1.829 3.404 3.5 3.745v9.38h1.75v-9.398c1.68-.34 3.5-1.618 3.5-3.753V5.71l-1.75.875v6.79c0 1.496-1.855 2.091-2.625 2.091s-2.625-.595-2.625-2.091V5.754Z"></path><path d="m17.759 5.692-1.75.84v6.843h1.75V5.692Z"></path><path d="M5.5 15.886V26.5h1.75V15.886a4.786 4.786 0 0 0 3.185-4.768v-.736c0-2.694-1.82-4.882-4.06-4.882-2.24 0-4.06 2.188-4.06 4.883v.735A4.786 4.786 0 0 0 5.5 15.886Zm-1.435-5.503c0-1.724 1.041-3.133 2.31-3.133 1.269 0 2.31 1.409 2.31 3.133v.735c0 1.723-1.041 3.132-2.31 3.132-1.269 0-2.31-1.409-2.31-3.133v-.735Z"></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--cutleryLarge"><path d="m24.391 21.25 2.827.464a67.186 67.186 0 0 1-.35 4.803h1.75c.13-1.268.28-2.764.376-5.52.188-4.29.162-8.586-.079-12.872-.157-1.461-.481-2.205-1.12-2.476a1.628 1.628 0 0 0-1.969.647c-.131.184-3.29 4.76-2.774 13.221a1.75 1.75 0 0 0 1.34 1.733ZM27.078 7.6c.045.237.077.477.096.718.288 3.858.21 8.61.114 11.61-.875-.14-2.004-.314-2.468-.402a.377.377 0 0 1 0-.105C24.4 12.86 26.378 8.8 27.078 7.6Z"></path><path d="M14.25 5.754h-.166l-1.584.761v6.86c0 2.126 1.829 3.404 3.5 3.745v9.38h1.75v-9.398c1.68-.34 3.5-1.618 3.5-3.753V5.71l-1.75.875v6.79c0 1.496-1.855 2.091-2.625 2.091s-2.625-.595-2.625-2.091V5.754Z"></path><path d="m17.759 5.692-1.75.84v6.843h1.75V5.692Z"></path><path d="M5.5 15.886V26.5h1.75V15.886a4.786 4.786 0 0 0 3.185-4.768v-.736c0-2.694-1.82-4.882-4.06-4.882-2.24 0-4.06 2.188-4.06 4.883v.735A4.786 4.786 0 0 0 5.5 15.886Zm-1.435-5.503c0-1.724 1.041-3.133 2.31-3.133 1.269 0 2.31 1.409 2.31 3.133v.735c0 1.723-1.041 3.132-2.31 3.132-1.269 0-2.31-1.409-2.31-3.133v-.735Z"></path></svg>';
 
 class IconCutleryLarge extends HTMLElement {
     constructor () {

package/dist/IconDashboard.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dashboard"><path d="M14.781 9.75c-.001.9-.18 1.793-.525 2.625h-1.461a5.435 5.435 0 0 0 .306-4.585l.945-1.085a6.71 6.71 0 0 1 .735 3.045ZM8 4.281c.845 0 1.678.198 2.432.578l.875-1.015A6.773 6.773 0 0 0 1.22 9.75c.001.9.18 1.793.525 2.625h1.461A5.469 5.469 0 0 1 8 4.281Zm2.012 5.031a2.406 2.406 0 1 1-.988-.875L13.25 3.67l.989.875-4.227 4.768Zm-1.242.543a1.076 1.076 0 0 0-1.54 0 1.085 1.085 0 1 0 1.54 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--dashboard"><path d="M14.781 9.75c-.001.9-.18 1.793-.525 2.625h-1.461a5.435 5.435 0 0 0 .306-4.585l.945-1.085a6.71 6.71 0 0 1 .735 3.045ZM8 4.281c.845 0 1.678.198 2.432.578l.875-1.015A6.773 6.773 0 0 0 1.22 9.75c.001.9.18 1.793.525 2.625h1.461A5.469 5.469 0 0 1 8 4.281Zm2.012 5.031a2.406 2.406 0 1 1-.988-.875L13.25 3.67l.989.875-4.227 4.768Zm-1.242.543a1.076 1.076 0 0 0-1.54 0 1.085 1.085 0 1 0 1.54 0Z"></path></svg>';
 
 class IconDashboard extends HTMLElement {
     constructor () {

package/dist/IconDashboardLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dashboardLarge"><path d="M29.073 18.625a13.003 13.003 0 0 1-1.112 5.25h-1.933a11.28 11.28 0 0 0-.184-10.832l1.207-1.374a13.02 13.02 0 0 1 2.022 6.956ZM15.948 7.25a11.322 11.322 0 0 1 6.308 1.916l1.155-1.321a13.125 13.125 0 0 0-19.486 16.03H5.86A11.375 11.375 0 0 1 15.948 7.25Zm3.386 5.25 1.181-1.348a8.75 8.75 0 0 0-13.317 7.473h1.75A7 7 0 0 1 19.334 12.5Zm-.508 5.889a3.5 3.5 0 1 1-2.878-1.514 3.5 3.5 0 0 1 1.557.385l8.566-9.783 1.304 1.147-8.549 9.765Zm-1.128 1.986a1.75 1.75 0 1 0-3.5 0 1.75 1.75 0 0 0 3.5 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--dashboardLarge"><path d="M29.073 18.625a13.003 13.003 0 0 1-1.112 5.25h-1.933a11.28 11.28 0 0 0-.184-10.832l1.207-1.374a13.02 13.02 0 0 1 2.022 6.956ZM15.948 7.25a11.322 11.322 0 0 1 6.308 1.916l1.155-1.321a13.125 13.125 0 0 0-19.486 16.03H5.86A11.375 11.375 0 0 1 15.948 7.25Zm3.386 5.25 1.181-1.348a8.75 8.75 0 0 0-13.317 7.473h1.75A7 7 0 0 1 19.334 12.5Zm-.508 5.889a3.5 3.5 0 1 1-2.878-1.514 3.5 3.5 0 0 1 1.557.385l8.566-9.783 1.304 1.147-8.549 9.765Zm-1.128 1.986a1.75 1.75 0 1 0-3.5 0 1.75 1.75 0 0 0 3.5 0Z"></path></svg>';
 
 class IconDashboardLarge extends HTMLElement {
     constructor () {

package/dist/IconDeliveryFee.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--deliveryFee"><g clip-path="url(#prefix__clip0_18_2472)"><path d="M13.127 1.735 7.8 3.686 4.64 10.502l7.28 3.37 3.159-6.808-1.952-5.329Zm-2.065 9.818L6.96 9.645l2.117-4.568 3.01-1.102 1.103 3.01-2.127 4.567ZM1.876 6.25H4.5V8H1.875V6.25ZM6.031 4.5H1V2.75h5.031V4.5Z"></path></g><defs><clipPath id="prefix__clip0_18_2472"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--deliveryFee"><g clip-path="url(#prefix__clip0_18_2472)"><path d="M13.127 1.735 7.8 3.686 4.64 10.502l7.28 3.37 3.159-6.808-1.952-5.329Zm-2.065 9.818L6.96 9.645l2.117-4.568 3.01-1.102 1.103 3.01-2.127 4.567ZM1.876 6.25H4.5V8H1.875V6.25ZM6.031 4.5H1V2.75h5.031V4.5Z"></path></g><defs><clipPath id="prefix__clip0_18_2472"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconDeliveryFee extends HTMLElement {
     constructor () {

package/dist/IconDeliveryFeeLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--deliveryFeeLarge"><path d="M25.424 4.45 15.326 8.125 9.15 21.477l13.799 6.388 6.177-13.326-3.701-10.09Zm-3.299 21.096L11.476 20.63l5.136-11.087 7.77-2.852 2.853 7.77-5.11 11.086ZM9.875 15.125H5.5v-1.75h4.375v1.75Zm1.75-4.375h-8.75V9h8.75v1.75Zm12.25.438a1.312 1.312 0 1 1-2.625 0 1.312 1.312 0 0 1 2.625 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--deliveryFeeLarge"><path d="M25.424 4.45 15.326 8.125 9.15 21.477l13.799 6.388 6.177-13.326-3.701-10.09Zm-3.299 21.096L11.476 20.63l5.136-11.087 7.77-2.852 2.853 7.77-5.11 11.086ZM9.875 15.125H5.5v-1.75h4.375v1.75Zm1.75-4.375h-8.75V9h8.75v1.75Zm12.25.438a1.312 1.312 0 1 1-2.625 0 1.312 1.312 0 0 1 2.625 0Z"></path></svg>';
 
 class IconDeliveryFeeLarge extends HTMLElement {
     constructor () {

package/dist/IconDineIn.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dineIn"><g clip-path="url(#prefix__clip0_18_1460)"><path d="m8.525 7.274.263.148a1.523 1.523 0 0 0 1.75-.07l2.878-2.415H11.36L9.698 6.32a.219.219 0 0 1-.228 0l-1.584-.945a2.406 2.406 0 1 0-4.042-1.75 2.362 2.362 0 0 0 .875 1.837A4.918 4.918 0 0 0 1.578 8l-.534 1.076 1.181.569.525-1.103A3.5 3.5 0 0 1 3.844 7.3v.875a2.721 2.721 0 0 0 1.277 2.292l.464.298c-.275.18-.568.329-.875.446L1.7 12.515l.534 1.199 2.975-1.339a6.013 6.013 0 0 0 1.557-.875l.604.385L8.77 15l1.199-.543-1.566-3.473-.718-.464c.369-.516.595-1.12.656-1.75l.184-1.496ZM7.038 8.647a2.354 2.354 0 0 1-.455 1.164l-.753-.49a1.4 1.4 0 0 1-.674-1.181V6.714a3.71 3.71 0 0 1 .823-.097h1.304l-.245 2.03ZM6.25 4.72a1.094 1.094 0 1 1 0-2.188 1.094 1.094 0 0 1 0 2.188ZM15 3.625h-4.375v-.289a2.161 2.161 0 0 1 4.314 0l.061.289Z"></path></g><defs><clipPath id="prefix__clip0_18_1460"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--dineIn"><g clip-path="url(#prefix__clip0_18_1460)"><path d="m8.525 7.274.263.148a1.523 1.523 0 0 0 1.75-.07l2.878-2.415H11.36L9.698 6.32a.219.219 0 0 1-.228 0l-1.584-.945a2.406 2.406 0 1 0-4.042-1.75 2.362 2.362 0 0 0 .875 1.837A4.918 4.918 0 0 0 1.578 8l-.534 1.076 1.181.569.525-1.103A3.5 3.5 0 0 1 3.844 7.3v.875a2.721 2.721 0 0 0 1.277 2.292l.464.298c-.275.18-.568.329-.875.446L1.7 12.515l.534 1.199 2.975-1.339a6.013 6.013 0 0 0 1.557-.875l.604.385L8.77 15l1.199-.543-1.566-3.473-.718-.464c.369-.516.595-1.12.656-1.75l.184-1.496ZM7.038 8.647a2.354 2.354 0 0 1-.455 1.164l-.753-.49a1.4 1.4 0 0 1-.674-1.181V6.714a3.71 3.71 0 0 1 .823-.097h1.304l-.245 2.03ZM6.25 4.72a1.094 1.094 0 1 1 0-2.188 1.094 1.094 0 0 1 0 2.188ZM15 3.625h-4.375v-.289a2.161 2.161 0 0 1 4.314 0l.061.289Z"></path></g><defs><clipPath id="prefix__clip0_18_1460"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconDineIn extends HTMLElement {
     constructor () {

package/dist/IconDineInLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dineInLarge"><g clip-path="url(#prefix__clip0_18_1452)"><path d="M28.757 7.25a4.445 4.445 0 1 0-8.89 0h-.726V9h10.343V7.25h-.727Zm-4.445-2.625a2.704 2.704 0 0 1 2.695 2.625h-5.39a2.704 2.704 0 0 1 2.695-2.625ZM12.5 10.313a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm6.125 8.46a.7.7 0 0 1-.805 0l-3.141-1.898h-3.23a8.854 8.854 0 0 0-7.953 4.891l-.875 1.628 1.558.814.875-1.645a7.079 7.079 0 0 1 3.5-3.334v2.686a4.804 4.804 0 0 0 2.248 4.043l.937.603a8.567 8.567 0 0 1-2.415 1.497l-5.382 2.537.753 1.575 5.355-2.52a10 10 0 0 0 3.202-2.109l1.873 1.234 2.695 5.959 1.592-.718-2.887-6.431-2.161-1.409a6.668 6.668 0 0 0 1.102-3.088l.403-3.5 1.04.62a2.45 2.45 0 0 0 2.827-.095l5.093-4.113h-2.774l-3.43 2.774Zm-4.9 4.14a5.117 5.117 0 0 1-.823 2.318l-1.146-.744a3.063 3.063 0 0 1-1.444-2.572v-3.194a7.04 7.04 0 0 1 1.138-.096h2.747l-.472 4.288Z"></path></g><defs><clipPath id="prefix__clip0_18_1452"><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--dineInLarge"><g clip-path="url(#prefix__clip0_18_1452)"><path d="M28.757 7.25a4.445 4.445 0 1 0-8.89 0h-.726V9h10.343V7.25h-.727Zm-4.445-2.625a2.704 2.704 0 0 1 2.695 2.625h-5.39a2.704 2.704 0 0 1 2.695-2.625ZM12.5 10.313a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm6.125 8.46a.7.7 0 0 1-.805 0l-3.141-1.898h-3.23a8.854 8.854 0 0 0-7.953 4.891l-.875 1.628 1.558.814.875-1.645a7.079 7.079 0 0 1 3.5-3.334v2.686a4.804 4.804 0 0 0 2.248 4.043l.937.603a8.567 8.567 0 0 1-2.415 1.497l-5.382 2.537.753 1.575 5.355-2.52a10 10 0 0 0 3.202-2.109l1.873 1.234 2.695 5.959 1.592-.718-2.887-6.431-2.161-1.409a6.668 6.668 0 0 0 1.102-3.088l.403-3.5 1.04.62a2.45 2.45 0 0 0 2.827-.095l5.093-4.113h-2.774l-3.43 2.774Zm-4.9 4.14a5.117 5.117 0 0 1-.823 2.318l-1.146-.744a3.063 3.063 0 0 1-1.444-2.572v-3.194a7.04 7.04 0 0 1 1.138-.096h2.747l-.472 4.288Z"></path></g><defs><clipPath id="prefix__clip0_18_1452"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconDineInLarge extends HTMLElement {
     constructor () {

package/dist/IconDirections.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--directions"><path d="M14.072 6.232 11.194 2.97H6.25V1.656H4.929V2.97h-3.5v8.75h3.5v2.625H6.25v-2.625h4.953l2.87-3.264a1.47 1.47 0 0 0 0-2.223Zm-.883 1.26-2.564 2.914H6.25V8h1.137v1.146L9.96 7.344 7.387 5.69v.997H4.93v3.72H2.75V4.28h7.875l2.476 2.844.079.079a.15.15 0 0 1 .058.208.15.15 0 0 1-.058.054l.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--directions"><path d="M14.072 6.232 11.194 2.97H6.25V1.656H4.929V2.97h-3.5v8.75h3.5v2.625H6.25v-2.625h4.953l2.87-3.264a1.47 1.47 0 0 0 0-2.223Zm-.883 1.26-2.564 2.914H6.25V8h1.137v1.146L9.96 7.344 7.387 5.69v.997H4.93v3.72H2.75V4.28h7.875l2.476 2.844.079.079a.15.15 0 0 1 .058.208.15.15 0 0 1-.058.054l.009.026Z"></path></svg>';
 
 class IconDirections extends HTMLElement {
     constructor () {

package/dist/IconDirectionsLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--directionsLarge"><path d="M28.451 13.664 20.9 7.25h-6.65V5.5a1.75 1.75 0 0 0-1.75-1.75h-1.75A1.75 1.75 0 0 0 9 5.5v1.75H2.875v14.875H9v5.25h1.75v-5.25h1.75v5.25h1.75v-5.25h6.65l7.499-5.495a1.91 1.91 0 0 0 .726-1.505 1.873 1.873 0 0 0-.674-1.461ZM10.75 5.938a.438.438 0 0 1 .438-.438h.874a.438.438 0 0 1 .438.438V7.25h-1.75V5.937Zm9.45 14.437H4.625V9H20.2l7.175 6.125-7.175 5.25Z"></path><path d="m19.78 14.197-2.861-2.87-1.234 1.243 1.68 1.68H10.75v6.125h1.75V16h4.865l-1.68 1.68 1.234 1.242 2.861-2.87a1.303 1.303 0 0 0 0-1.854Z"></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--directionsLarge"><path d="M28.451 13.664 20.9 7.25h-6.65V5.5a1.75 1.75 0 0 0-1.75-1.75h-1.75A1.75 1.75 0 0 0 9 5.5v1.75H2.875v14.875H9v5.25h1.75v-5.25h1.75v5.25h1.75v-5.25h6.65l7.499-5.495a1.91 1.91 0 0 0 .726-1.505 1.873 1.873 0 0 0-.674-1.461ZM10.75 5.938a.438.438 0 0 1 .438-.438h.874a.438.438 0 0 1 .438.438V7.25h-1.75V5.937Zm9.45 14.437H4.625V9H20.2l7.175 6.125-7.175 5.25Z"></path><path d="m19.78 14.197-2.861-2.87-1.234 1.243 1.68 1.68H10.75v6.125h1.75V16h4.865l-1.68 1.68 1.234 1.242 2.861-2.87a1.303 1.303 0 0 0 0-1.854Z"></path></svg>';
 
 class IconDirectionsLarge extends HTMLElement {
     constructor () {

package/dist/IconDish.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dish"><path d="M13.469 8a4.603 4.603 0 0 0-4.594-4.594V2.094A5.906 5.906 0 1 1 6.25 13.25v-1.496c.762.558 1.68.864 2.625.875A4.603 4.603 0 0 0 13.469 8ZM3.188 6.801a.665.665 0 0 0 .656-.656v-3.64l1.295-.63v4.27a.656.656 0 1 0 1.312 0v-3.64l1.313-.63v6.352a3.08 3.08 0 0 1-2.625 2.87v3.028H3.844v-3.027a3.08 3.08 0 0 1-2.625-2.87V2.61l1.312-.639v4.174a.665.665 0 0 0 .656.656Zm0 1.313A2.074 2.074 0 0 1 2.53 8v.236c0 1.164 1.391 1.636 1.969 1.636.577 0 1.969-.472 1.969-1.636V8c-.211.076-.433.117-.657.123A1.951 1.951 0 0 1 4.5 7.598c-.358.33-.826.513-1.313.516Z"></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--dish"><path d="M13.469 8a4.603 4.603 0 0 0-4.594-4.594V2.094A5.906 5.906 0 1 1 6.25 13.25v-1.496c.762.558 1.68.864 2.625.875A4.603 4.603 0 0 0 13.469 8ZM3.188 6.801a.665.665 0 0 0 .656-.656v-3.64l1.295-.63v4.27a.656.656 0 1 0 1.312 0v-3.64l1.313-.63v6.352a3.08 3.08 0 0 1-2.625 2.87v3.028H3.844v-3.027a3.08 3.08 0 0 1-2.625-2.87V2.61l1.312-.639v4.174a.665.665 0 0 0 .656.656Zm0 1.313A2.074 2.074 0 0 1 2.53 8v.236c0 1.164 1.391 1.636 1.969 1.636.577 0 1.969-.472 1.969-1.636V8c-.211.076-.433.117-.657.123A1.951 1.951 0 0 1 4.5 7.598c-.358.33-.826.513-1.313.516Z"></path></svg>';
 
 class IconDish extends HTMLElement {
     constructor () {

package/dist/IconDishLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dishLarge"><path d="M28.688 16.875a11.376 11.376 0 0 1-15.313 10.666v-1.916c.158.07.315.157.473.219a9.766 9.766 0 0 0 3.5.639 9.625 9.625 0 0 0 0-19.25V5.5a11.375 11.375 0 0 1 11.34 11.375ZM10.75 19.789v9.336H9v-9.319C6.935 19.5 4.564 17.934 4.564 15.3V6.226l1.75-.875v6.554a1.287 1.287 0 0 0 1.312 1.251 1.287 1.287 0 0 0 1.313-1.251V6.244l1.75-.875v6.527a1.312 1.312 0 0 0 2.625 0V6.27l1.75-.875V15.3c0 2.581-2.275 4.121-4.314 4.489Zm-.936-1.663c1.032 0 3.5-.814 3.5-2.826v-.674c-.409.201-.858.306-1.313.306a3.08 3.08 0 0 1-2.187-.875 3.062 3.062 0 0 1-2.188.875 3.02 3.02 0 0 1-1.312-.306v.674c0 2.012 2.467 2.826 3.5 2.826Z"></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--dishLarge"><path d="M28.688 16.875a11.376 11.376 0 0 1-15.313 10.666v-1.916c.158.07.315.157.473.219a9.766 9.766 0 0 0 3.5.639 9.625 9.625 0 0 0 0-19.25V5.5a11.375 11.375 0 0 1 11.34 11.375ZM10.75 19.789v9.336H9v-9.319C6.935 19.5 4.564 17.934 4.564 15.3V6.226l1.75-.875v6.554a1.287 1.287 0 0 0 1.312 1.251 1.287 1.287 0 0 0 1.313-1.251V6.244l1.75-.875v6.527a1.312 1.312 0 0 0 2.625 0V6.27l1.75-.875V15.3c0 2.581-2.275 4.121-4.314 4.489Zm-.936-1.663c1.032 0 3.5-.814 3.5-2.826v-.674c-.409.201-.858.306-1.313.306a3.08 3.08 0 0 1-2.187-.875 3.062 3.062 0 0 1-2.188.875 3.02 3.02 0 0 1-1.312-.306v.674c0 2.012 2.467 2.826 3.5 2.826Z"></path></svg>';
 
 class IconDishLarge extends HTMLElement {
     constructor () {

package/dist/IconDocument.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--document"><path d="M9.75 2.094H2.094V14.78h11.812V6.25A4.156 4.156 0 0 0 9.75 2.094Zm2.756 3.5h-2.1v-2.1a2.826 2.826 0 0 1 2.1 2.1Zm-9.1 7.875V3.406h5.688v3.5h3.5v6.563H3.406ZM8 7.78H5.375V6.47H8V7.78ZM5.375 9.094h5.25v1.312h-5.25V9.094Z"></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--document"><path d="M9.75 2.094H2.094V14.78h11.812V6.25A4.156 4.156 0 0 0 9.75 2.094Zm2.756 3.5h-2.1v-2.1a2.826 2.826 0 0 1 2.1 2.1Zm-9.1 7.875V3.406h5.688v3.5h3.5v6.563H3.406ZM8 7.78H5.375V6.47H8V7.78ZM5.375 9.094h5.25v1.312h-5.25V9.094Z"></path></svg>';
 
 class IconDocument extends HTMLElement {
     constructor () {

package/dist/IconDocumentLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--documentLarge"><path d="M18.625 3.75h-14v25.375h22.75V12.5a8.749 8.749 0 0 0-8.75-8.75Zm6.773 7h-5.023V5.728a7.044 7.044 0 0 1 5.023 5.022Zm.227 16.625H6.375V5.5h12.25v7h7v14.875Zm-10.5-14H10.75v-1.75h4.375v1.75Zm-4.375 7h7v1.75h-7v-1.75Zm0-4.375h10.5v1.75h-10.5V16Z"></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--documentLarge"><path d="M18.625 3.75h-14v25.375h22.75V12.5a8.749 8.749 0 0 0-8.75-8.75Zm6.773 7h-5.023V5.728a7.044 7.044 0 0 1 5.023 5.022Zm.227 16.625H6.375V5.5h12.25v7h7v14.875Zm-10.5-14H10.75v-1.75h4.375v1.75Zm-4.375 7h7v1.75h-7v-1.75Zm0-4.375h10.5v1.75h-10.5V16Z"></path></svg>';
 
 class IconDocumentLarge extends HTMLElement {
     constructor () {

package/dist/IconDollar.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dollar"><path d="M8.613 7.309c-1.47-.385-2.625-.735-2.625-1.75 0-1.015 1.05-1.383 2.012-1.383a3.701 3.701 0 0 1 2.695 1.138l.998-1.033A4.428 4.428 0 0 0 8.77 2.794V1.096H7.388v1.698c-1.75.192-2.975 1.19-2.975 2.87 0 1.837 1.575 2.555 3.15 2.975 1.575.42 2.625.682 2.625 1.697 0 1.015-1.05 1.488-2.24 1.488a3.72 3.72 0 0 1-2.923-1.2L4.01 11.72a4.568 4.568 0 0 0 3.22 1.53v1.698h1.418V13.25c1.802-.21 3.114-1.19 3.114-2.975 0-1.785-1.592-2.564-3.15-2.966Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--dollar"><path d="M8.613 7.309c-1.47-.385-2.625-.735-2.625-1.75 0-1.015 1.05-1.383 2.012-1.383a3.701 3.701 0 0 1 2.695 1.138l.998-1.033A4.428 4.428 0 0 0 8.77 2.794V1.096H7.388v1.698c-1.75.192-2.975 1.19-2.975 2.87 0 1.837 1.575 2.555 3.15 2.975 1.575.42 2.625.682 2.625 1.697 0 1.015-1.05 1.488-2.24 1.488a3.72 3.72 0 0 1-2.923-1.2L4.01 11.72a4.568 4.568 0 0 0 3.22 1.53v1.698h1.418V13.25c1.802-.21 3.114-1.19 3.114-2.975 0-1.785-1.592-2.564-3.15-2.966Z"></path></svg>';
 
 class IconDollar extends HTMLElement {
     constructor () {

package/dist/IconDollarLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dollarLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Zm4.148-8.085c0 1.96-1.444 3.045-3.43 3.273v1.863h-1.593v-1.863a5.05 5.05 0 0 1-3.5-1.654l1.12-1.173a4.086 4.086 0 0 0 3.176 1.287c1.313 0 2.468-.482 2.468-1.637s-1.252-1.444-2.853-1.872c-1.75-.455-3.5-1.252-3.5-3.273 0-1.846 1.33-2.94 3.273-3.15V8.344h1.566v1.872a4.83 4.83 0 0 1 3.22 1.636l-1.102 1.13a4.087 4.087 0 0 0-2.967-1.252c-1.094 0-2.213.446-2.213 1.54s1.233 1.488 2.852 1.908c1.619.42 3.483 1.198 3.483 3.237Z"></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--dollarLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Zm4.148-8.085c0 1.96-1.444 3.045-3.43 3.273v1.863h-1.593v-1.863a5.05 5.05 0 0 1-3.5-1.654l1.12-1.173a4.086 4.086 0 0 0 3.176 1.287c1.313 0 2.468-.482 2.468-1.637s-1.252-1.444-2.853-1.872c-1.75-.455-3.5-1.252-3.5-3.273 0-1.846 1.33-2.94 3.273-3.15V8.344h1.566v1.872a4.83 4.83 0 0 1 3.22 1.636l-1.102 1.13a4.087 4.087 0 0 0-2.967-1.252c-1.094 0-2.213.446-2.213 1.54s1.233 1.488 2.852 1.908c1.619.42 3.483 1.198 3.483 3.237Z"></path></svg>';
 
 class IconDollarLarge extends HTMLElement {
     constructor () {

package/dist/IconDownload.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--download"><path d="M7.344 7.414V1h1.312v6.414l1.671-1.671.928.927-2.503 2.502a1.059 1.059 0 0 1-1.505 0L4.745 6.67l.928-.928 1.67 1.672Zm5.031-4.445h-2.38V4.28h2.38a.219.219 0 0 1 .219.219v7.875a.219.219 0 0 1-.219.219h-8.75a.219.219 0 0 1-.219-.219V4.5a.219.219 0 0 1 .219-.219h2.38V2.97h-2.38A1.54 1.54 0 0 0 2.094 4.5v7.875a1.54 1.54 0 0 0 1.531 1.531h8.75a1.54 1.54 0 0 0 1.531-1.531V4.5a1.54 1.54 0 0 0-1.531-1.531Z"></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--download"><path d="M7.344 7.414V1h1.312v6.414l1.671-1.671.928.927-2.503 2.502a1.059 1.059 0 0 1-1.505 0L4.745 6.67l.928-.928 1.67 1.672Zm5.031-4.445h-2.38V4.28h2.38a.219.219 0 0 1 .219.219v7.875a.219.219 0 0 1-.219.219h-8.75a.219.219 0 0 1-.219-.219V4.5a.219.219 0 0 1 .219-.219h2.38V2.97h-2.38A1.54 1.54 0 0 0 2.094 4.5v7.875a1.54 1.54 0 0 0 1.531 1.531h8.75a1.54 1.54 0 0 0 1.531-1.531V4.5a1.54 1.54 0 0 0-1.531-1.531Z"></path></svg>';
 
 class IconDownload extends HTMLElement {
     constructor () {

package/dist/IconDownloadLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--downloadLarge"><path d="M15.125 17.024V2.875h1.75v14.219l4.016-4.078 1.234 1.234-4.926 4.935a1.75 1.75 0 0 1-2.398 0L9.875 14.25l1.234-1.234 4.016 4.008ZM24.75 7.25H19.5V9h5.25a.875.875 0 0 1 .875.875v15.75a.875.875 0 0 1-.875.875H7.25a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 7.25 9h5.25V7.25H7.25a2.625 2.625 0 0 0-2.625 2.625v15.75A2.625 2.625 0 0 0 7.25 28.25h17.5a2.625 2.625 0 0 0 2.625-2.625V9.875A2.625 2.625 0 0 0 24.75 7.25Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--downloadLarge"><path d="M15.125 17.024V2.875h1.75v14.219l4.016-4.078 1.234 1.234-4.926 4.935a1.75 1.75 0 0 1-2.398 0L9.875 14.25l1.234-1.234 4.016 4.008ZM24.75 7.25H19.5V9h5.25a.875.875 0 0 1 .875.875v15.75a.875.875 0 0 1-.875.875H7.25a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 7.25 9h5.25V7.25H7.25a2.625 2.625 0 0 0-2.625 2.625v15.75A2.625 2.625 0 0 0 7.25 28.25h17.5a2.625 2.625 0 0 0 2.625-2.625V9.875A2.625 2.625 0 0 0 24.75 7.25Z"></path></svg>';
 
 class IconDownloadLarge extends HTMLElement {
     constructor () {

package/dist/IconDrag.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--drag"><path d="M15 9.531H1v1.313h14V9.53Z"></path><path d="M15 5.156H1V6.47h14V5.156Z"></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--drag"><path d="M15 9.531H1v1.313h14V9.53Z"></path><path d="M15 5.156H1V6.47h14V5.156Z"></path></svg>';
 
 class IconDrag extends HTMLElement {
     constructor () {

package/dist/IconDragLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--dragLarge"><path d="M28.25 11.188H3.75v1.75h24.5v-1.75Z"></path><path d="M28.25 19.063H3.75v1.75h24.5v-1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--dragLarge"><path d="M28.25 11.188H3.75v1.75h24.5v-1.75Z"></path><path d="M28.25 19.063H3.75v1.75h24.5v-1.75Z"></path></svg>';
 
 class IconDragLarge extends HTMLElement {
     constructor () {

package/dist/IconDrink.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--drink"><path d="M12.375 4.719H8.656V3.222l2.179-.726-.42-1.242-3.071 1.023V4.72H3.625V6.03h.586l.665 7.359a1.531 1.531 0 0 0 1.531 1.391h3.185a1.53 1.53 0 0 0 1.532-1.391l.665-7.359h.586V4.72ZM9.811 13.25a.219.219 0 0 1-.219.201H6.407a.22.22 0 0 1-.218-.201l-.665-7.219h4.952l-.665 7.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--drink"><path d="M12.375 4.719H8.656V3.222l2.179-.726-.42-1.242-3.071 1.023V4.72H3.625V6.03h.586l.665 7.359a1.531 1.531 0 0 0 1.531 1.391h3.185a1.53 1.53 0 0 0 1.532-1.391l.665-7.359h.586V4.72ZM9.811 13.25a.219.219 0 0 1-.219.201H6.407a.22.22 0 0 1-.218-.201l-.665-7.219h4.952l-.665 7.219Z"></path></svg>';
 
 class IconDrink extends HTMLElement {
     constructor () {

package/dist/IconDrinkLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--drinkLarge"><path d="M24.75 9.875h-7.875V6.13l4.655-1.505-.56-1.663-5.845 1.908v5.005H7.25v1.75h1.566l1.374 15.111a2.625 2.625 0 0 0 2.625 2.389h6.388a2.625 2.625 0 0 0 2.625-2.389l1.356-15.111h1.566v-1.75Zm-5.556 17.5h-6.388a.875.875 0 0 1-.875-.796l-.875-9.127a4.663 4.663 0 0 1 4.752.158 7.963 7.963 0 0 0 3.762 1.015c.41-.003.82-.038 1.225-.105l-.735 8.059a.875.875 0 0 1-.866.796Zm1.75-10.666a5.915 5.915 0 0 1-4.375-.674 6.23 6.23 0 0 0-5.679-.402l-.315-4.008h10.85l-.481 5.084Z"></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--drinkLarge"><path d="M24.75 9.875h-7.875V6.13l4.655-1.505-.56-1.663-5.845 1.908v5.005H7.25v1.75h1.566l1.374 15.111a2.625 2.625 0 0 0 2.625 2.389h6.388a2.625 2.625 0 0 0 2.625-2.389l1.356-15.111h1.566v-1.75Zm-5.556 17.5h-6.388a.875.875 0 0 1-.875-.796l-.875-9.127a4.663 4.663 0 0 1 4.752.158 7.963 7.963 0 0 0 3.762 1.015c.41-.003.82-.038 1.225-.105l-.735 8.059a.875.875 0 0 1-.866.796Zm1.75-10.666a5.915 5.915 0 0 1-4.375-.674 6.23 6.23 0 0 0-5.679-.402l-.315-4.008h10.85l-.481 5.084Z"></path></svg>';
 
 class IconDrinkLarge extends HTMLElement {
     constructor () {

package/dist/IconDriverCar.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--driverCar"><path d="M4.246 9.75a2.625 2.625 0 0 1 2.45-1.969h2.625a2.625 2.625 0 0 1 2.424 1.969h1.374l-.131-.429A3.903 3.903 0 0 0 9.304 6.47h-.315c.35-.136.668-.342.936-.604a2.73 2.73 0 0 0 0-3.85 2.8 2.8 0 0 0-3.85 0 2.73 2.73 0 0 0 0 3.85c.268.262.587.468.936.604h-.315A3.903 3.903 0 0 0 3.004 9.32l-.131.429h1.373Zm2.757-4.821a1.417 1.417 0 0 1 0-1.987 1.418 1.418 0 0 1 1.995 0A1.409 1.409 0 0 1 7.003 4.93Zm5.59 9.625h-1.312a3.282 3.282 0 0 0-6.562 0H3.406a4.593 4.593 0 1 1 9.188 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--driverCar"><path d="M4.246 9.75a2.625 2.625 0 0 1 2.45-1.969h2.625a2.625 2.625 0 0 1 2.424 1.969h1.374l-.131-.429A3.903 3.903 0 0 0 9.304 6.47h-.315c.35-.136.668-.342.936-.604a2.73 2.73 0 0 0 0-3.85 2.8 2.8 0 0 0-3.85 0 2.73 2.73 0 0 0 0 3.85c.268.262.587.468.936.604h-.315A3.903 3.903 0 0 0 3.004 9.32l-.131.429h1.373Zm2.757-4.821a1.417 1.417 0 0 1 0-1.987 1.418 1.418 0 0 1 1.995 0A1.409 1.409 0 0 1 7.003 4.93Zm5.59 9.625h-1.312a3.282 3.282 0 0 0-6.562 0H3.406a4.593 4.593 0 1 1 9.188 0Z"></path></svg>';
 
 class IconDriverCar extends HTMLElement {
     constructor () {

package/dist/IconDriverCarLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--driverCarLarge"><path d="M16 12.5a4.813 4.813 0 1 0-.003-9.626A4.813 4.813 0 0 0 16 12.5Zm-2.17-7a3.071 3.071 0 1 1 4.312 4.375A3.071 3.071 0 0 1 13.83 5.5Zm-5.434 14H6.55l.464-1.374a6.886 6.886 0 0 1 6.545-4.751h4.882a6.887 6.887 0 0 1 6.545 4.751l.464 1.374h-1.846l-.271-.823a5.153 5.153 0 0 0-4.892-3.552H13.56a5.154 5.154 0 0 0-4.891 3.552l-.272.823Zm15.916 7.438v.437h-1.75a3.628 3.628 0 0 0 0-.438 6.563 6.563 0 1 0-13.124 0 3.666 3.666 0 0 0 0 .438h-1.75v-.438a8.313 8.313 0 0 1 16.624 0Zm-2.93 0v.437h-1.75a3.713 3.713 0 0 0 0-.438 3.631 3.631 0 0 0-7.263 0c.006.147.02.293.043.438h-1.75v-.438a5.381 5.381 0 0 1 10.763 0h-.044Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--driverCarLarge"><path d="M16 12.5a4.813 4.813 0 1 0-.003-9.626A4.813 4.813 0 0 0 16 12.5Zm-2.17-7a3.071 3.071 0 1 1 4.312 4.375A3.071 3.071 0 0 1 13.83 5.5Zm-5.434 14H6.55l.464-1.374a6.886 6.886 0 0 1 6.545-4.751h4.882a6.887 6.887 0 0 1 6.545 4.751l.464 1.374h-1.846l-.271-.823a5.153 5.153 0 0 0-4.892-3.552H13.56a5.154 5.154 0 0 0-4.891 3.552l-.272.823Zm15.916 7.438v.437h-1.75a3.628 3.628 0 0 0 0-.438 6.563 6.563 0 1 0-13.124 0 3.666 3.666 0 0 0 0 .438h-1.75v-.438a8.313 8.313 0 0 1 16.624 0Zm-2.93 0v.437h-1.75a3.713 3.713 0 0 0 0-.438 3.631 3.631 0 0 0-7.263 0c.006.147.02.293.043.438h-1.75v-.438a5.381 5.381 0 0 1 10.763 0h-.044Z"></path></svg>';
 
 class IconDriverCarLarge extends HTMLElement {
     constructor () {

package/dist/IconDriverMoped.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--driverMoped"><g clip-path="url(#prefix__clip0_4_872)"><path d="M4.255 9.75a2.625 2.625 0 0 1 2.441-1.969h2.625a2.625 2.625 0 0 1 2.424 1.969h1.374l-.131-.429A3.903 3.903 0 0 0 9.303 6.47h-.315c.35-.136.668-.342.936-.604a2.73 2.73 0 0 0 0-3.85 2.8 2.8 0 0 0-3.85 0 2.73 2.73 0 0 0 0 3.85c.268.262.587.468.936.604h-.315A3.903 3.903 0 0 0 3.004 9.32l-.132.429h1.383Zm2.747-4.821a1.417 1.417 0 0 1 0-1.987 1.418 1.418 0 0 1 1.995 0A1.409 1.409 0 0 1 7.002 4.93Zm7.123 5.915v1.312h-3.089a.254.254 0 0 0-.157.061L9.645 13.46c-.267.26-.618.414-.989.438V15H7.344v-1.111a1.479 1.479 0 0 1-.937-.429l-1.242-1.243a.227.227 0 0 0-.149-.06H1.927v-1.313h3.09a1.514 1.514 0 0 1 1.075.446l1.243 1.243c.04.037.093.06.149.06H8.56a.254.254 0 0 0 .157-.06l1.234-1.243a1.522 1.522 0 0 1 1.085-.446h3.089Z"></path></g><defs><clipPath id="prefix__clip0_4_872"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--driverMoped"><g clip-path="url(#prefix__clip0_4_872)"><path d="M4.255 9.75a2.625 2.625 0 0 1 2.441-1.969h2.625a2.625 2.625 0 0 1 2.424 1.969h1.374l-.131-.429A3.903 3.903 0 0 0 9.303 6.47h-.315c.35-.136.668-.342.936-.604a2.73 2.73 0 0 0 0-3.85 2.8 2.8 0 0 0-3.85 0 2.73 2.73 0 0 0 0 3.85c.268.262.587.468.936.604h-.315A3.903 3.903 0 0 0 3.004 9.32l-.132.429h1.383Zm2.747-4.821a1.417 1.417 0 0 1 0-1.987 1.418 1.418 0 0 1 1.995 0A1.409 1.409 0 0 1 7.002 4.93Zm7.123 5.915v1.312h-3.089a.254.254 0 0 0-.157.061L9.645 13.46c-.267.26-.618.414-.989.438V15H7.344v-1.111a1.479 1.479 0 0 1-.937-.429l-1.242-1.243a.227.227 0 0 0-.149-.06H1.927v-1.313h3.09a1.514 1.514 0 0 1 1.075.446l1.243 1.243c.04.037.093.06.149.06H8.56a.254.254 0 0 0 .157-.06l1.234-1.243a1.522 1.522 0 0 1 1.085-.446h3.089Z"></path></g><defs><clipPath id="prefix__clip0_4_872"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconDriverMoped extends HTMLElement {
     constructor () {

package/dist/IconDriverMopedLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--driverMopedLarge"><g clip-path="url(#prefix__clip0_4_864)"><path d="M8.771 19.625H6.925l.464-1.374a6.886 6.886 0 0 1 6.545-4.751h4.882a6.886 6.886 0 0 1 6.545 4.751l.464 1.374h-1.846l-.271-.823a5.153 5.153 0 0 0-4.892-3.552h-4.882a5.154 5.154 0 0 0-4.891 3.552l-.272.823Zm4.2-8.409a4.813 4.813 0 1 1 6.805-6.807 4.813 4.813 0 0 1-6.805 6.807ZM14.205 10a3.062 3.062 0 1 0 0-4.375 3.08 3.08 0 0 0 0 4.375Zm13.606 11.839v1.75h-5.766a.726.726 0 0 0-.534.227l-2.257 2.249c.119.32.18.657.183.997a3.064 3.064 0 0 1-5.729 1.53 3.062 3.062 0 0 1-.194-2.597l-2.179-2.179a.725.725 0 0 0-.534-.227H5v-1.75h5.801a2.563 2.563 0 0 1 1.75.735l2.013 2.012a3.045 3.045 0 0 1 3.649.044l2.056-2.056a2.528 2.528 0 0 1 1.75-.735h5.792Zm-10.123 5.25a1.312 1.312 0 1 0-.385.902c.246-.247.384-.58.384-.928v.026Z"></path></g><defs><clipPath id="prefix__clip0_4_864"><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--driverMopedLarge"><g clip-path="url(#prefix__clip0_4_864)"><path d="M8.771 19.625H6.925l.464-1.374a6.886 6.886 0 0 1 6.545-4.751h4.882a6.886 6.886 0 0 1 6.545 4.751l.464 1.374h-1.846l-.271-.823a5.153 5.153 0 0 0-4.892-3.552h-4.882a5.154 5.154 0 0 0-4.891 3.552l-.272.823Zm4.2-8.409a4.813 4.813 0 1 1 6.805-6.807 4.813 4.813 0 0 1-6.805 6.807ZM14.205 10a3.062 3.062 0 1 0 0-4.375 3.08 3.08 0 0 0 0 4.375Zm13.606 11.839v1.75h-5.766a.726.726 0 0 0-.534.227l-2.257 2.249c.119.32.18.657.183.997a3.064 3.064 0 0 1-5.729 1.53 3.062 3.062 0 0 1-.194-2.597l-2.179-2.179a.725.725 0 0 0-.534-.227H5v-1.75h5.801a2.563 2.563 0 0 1 1.75.735l2.013 2.012a3.045 3.045 0 0 1 3.649.044l2.056-2.056a2.528 2.528 0 0 1 1.75-.735h5.792Zm-10.123 5.25a1.312 1.312 0 1 0-.385.902c.246-.247.384-.58.384-.928v.026Z"></path></g><defs><clipPath id="prefix__clip0_4_864"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconDriverMopedLarge extends HTMLElement {
     constructor () {

package/dist/IconEdit.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--edit"><path d="M14.44 3.502 12.498 1.56a1.54 1.54 0 0 0-2.17 0L2.033 9.855a1.61 1.61 0 0 0-.455.945l-.447 4.069 4.07-.447c.356-.043.688-.203.944-.455l8.295-8.295a1.54 1.54 0 0 0 0-2.17ZM5.218 13.04a.236.236 0 0 1-.167.07l-2.432.271.262-2.432a.297.297 0 0 1 .08-.166l6.124-6.126 2.249 2.25-6.116 6.133Zm8.295-8.295-1.217 1.207-2.248-2.248 1.207-1.217c.043-.04.1-.061.158-.06a.21.21 0 0 1 .157.06l1.943 1.943a.236.236 0 0 1 0 .315Z"></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--edit"><path d="M14.44 3.502 12.498 1.56a1.54 1.54 0 0 0-2.17 0L2.033 9.855a1.61 1.61 0 0 0-.455.945l-.447 4.069 4.07-.447c.356-.043.688-.203.944-.455l8.295-8.295a1.54 1.54 0 0 0 0-2.17ZM5.218 13.04a.236.236 0 0 1-.167.07l-2.432.271.262-2.432a.297.297 0 0 1 .08-.166l6.124-6.126 2.249 2.25-6.116 6.133Zm8.295-8.295-1.217 1.207-2.248-2.248 1.207-1.217c.043-.04.1-.061.158-.06a.21.21 0 0 1 .157.06l1.943 1.943a.236.236 0 0 1 0 .315Z"></path></svg>';
 
 class IconEdit extends HTMLElement {
     constructor () {

package/dist/IconEditFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--editFilled"><path d="M14.44 3.503 12.498 1.56a1.531 1.531 0 0 0-2.162 0L9.12 2.75l.928.928 2.257 2.248.464.473.464.464 1.207-1.217a1.522 1.522 0 0 0 0-2.143Z"></path><path d="M11.378 6.889 8.193 3.704 2.068 9.829c-.267.259-.437.602-.482.971l-.455 4.077 4.07-.455c.357-.04.69-.2.944-.455l6.125-6.125-.464-.463-.428-.49Z"></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--editFilled"><path d="M14.44 3.503 12.498 1.56a1.531 1.531 0 0 0-2.162 0L9.12 2.75l.928.928 2.257 2.248.464.473.464.464 1.207-1.217a1.522 1.522 0 0 0 0-2.143Z"></path><path d="M11.378 6.889 8.193 3.704 2.068 9.829c-.267.259-.437.602-.482.971l-.455 4.077 4.07-.455c.357-.04.69-.2.944-.455l6.125-6.125-.464-.463-.428-.49Z"></path></svg>';
 
 class IconEditFilled extends HTMLElement {
     constructor () {

package/dist/IconEditFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--editFilledLarge"><path d="m27.559 7.749-3.3-3.308a2.424 2.424 0 0 0-3.342 0l-1.82 1.829.613.621.665.621 4.165 4.166.621.612.621.621 1.82-1.829a2.338 2.338 0 0 0 0-3.333h-.043Z"></path><path d="m18.476 8.125-.621-.613L5.92 19.448l.516.07.499.148c.298.094.59.205.875.333a7.946 7.946 0 0 1 4.174 4.156c.13.298.238.605.323.919 0 .14.097.28.132.428l.096.578 11.961-11.926-.612-.621-5.408-5.408Z"></path><path d="M10.75 25.852c0-.113-.07-.218-.105-.332a6.125 6.125 0 0 0-4.165-4.165c-.123 0-.245-.088-.376-.114l-.604-.078-.963-.088a2.626 2.626 0 0 0-.183.674l-.735 6.615 6.623-.735a2.5 2.5 0 0 0 .71-.193c0-.297-.062-.621-.106-.953l-.096-.63Z"></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--editFilledLarge"><path d="m27.559 7.749-3.3-3.308a2.424 2.424 0 0 0-3.342 0l-1.82 1.829.613.621.665.621 4.165 4.166.621.612.621.621 1.82-1.829a2.338 2.338 0 0 0 0-3.333h-.043Z"></path><path d="m18.476 8.125-.621-.613L5.92 19.448l.516.07.499.148c.298.094.59.205.875.333a7.946 7.946 0 0 1 4.174 4.156c.13.298.238.605.323.919 0 .14.097.28.132.428l.096.578 11.961-11.926-.612-.621-5.408-5.408Z"></path><path d="M10.75 25.852c0-.113-.07-.218-.105-.332a6.125 6.125 0 0 0-4.165-4.165c-.123 0-.245-.088-.376-.114l-.604-.078-.963-.088a2.626 2.626 0 0 0-.183.674l-.735 6.615 6.623-.735a2.5 2.5 0 0 0 .71-.193c0-.297-.062-.621-.106-.953l-.096-.63Z"></path></svg>';
 
 class IconEditFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconEditLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--editLarge"><path d="M27.559 7.74 24.26 4.441a2.424 2.424 0 0 0-3.343 0L5.072 20.288a2.45 2.45 0 0 0-.7 1.46l-.735 6.616 6.615-.735a2.45 2.45 0 0 0 1.462-.7l15.846-15.846a2.364 2.364 0 0 0 0-3.343Zm-8.47 1.006 4.165 4.165-11.235 11.244a7.927 7.927 0 0 0-4.174-4.165L19.089 8.746Zm-9.03 17.142-4.445.498.498-4.445a.7.7 0 0 1 .202-.42l.166-.166a6.125 6.125 0 0 1 4.165 4.165l-.166.166a.7.7 0 0 1-.42.201ZM26.325 9.875l-1.829 1.82-4.121-4.191 1.75-1.82a.612.612 0 0 1 .67-.137c.075.032.141.078.196.137L26.325 9a.621.621 0 0 1 0 .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--editLarge"><path d="M27.559 7.74 24.26 4.441a2.424 2.424 0 0 0-3.343 0L5.072 20.288a2.45 2.45 0 0 0-.7 1.46l-.735 6.616 6.615-.735a2.45 2.45 0 0 0 1.462-.7l15.846-15.846a2.364 2.364 0 0 0 0-3.343Zm-8.47 1.006 4.165 4.165-11.235 11.244a7.927 7.927 0 0 0-4.174-4.165L19.089 8.746Zm-9.03 17.142-4.445.498.498-4.445a.7.7 0 0 1 .202-.42l.166-.166a6.125 6.125 0 0 1 4.165 4.165l-.166.166a.7.7 0 0 1-.42.201ZM26.325 9.875l-1.829 1.82-4.121-4.191 1.75-1.82a.612.612 0 0 1 .67-.137c.075.032.141.078.196.137L26.325 9a.621.621 0 0 1 0 .875Z"></path></svg>';
 
 class IconEditLarge extends HTMLElement {
     constructor () {

package/dist/IconEggs.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--eggs"><path d="M7.996 14.808a5.387 5.387 0 0 1-5.384-5.384c0-2.97 2.221-8.084 5.384-8.084 3.162 0 5.384 5.244 5.384 8.084s-2.414 5.384-5.384 5.384Zm0-12.162c-2.065 0-4.078 4.287-4.078 6.778a4.082 4.082 0 0 0 4.078 4.078 4.082 4.082 0 0 0 4.077-4.078c0-2.491-2.013-6.777-4.077-6.777Z"></path><path d="M7.996 14.808a5.387 5.387 0 0 1-5.384-5.384c0-2.97 2.221-8.084 5.384-8.084 3.162 0 5.384 5.244 5.384 8.084s-2.414 5.384-5.384 5.384Zm0-12.162c-2.065 0-4.078 4.287-4.078 6.778a4.082 4.082 0 0 0 4.078 4.078 4.082 4.082 0 0 0 4.077-4.078c0-2.491-2.013-6.777-4.077-6.777Z"></path><path d="M9.233 8.065c-.253-.845-.689-1.76-1.142-2.387l1.055-.766c.531.74 1.045 1.803 1.332 2.779l-1.254.374h.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eggs"><path d="M7.996 14.808a5.387 5.387 0 0 1-5.384-5.384c0-2.97 2.221-8.084 5.384-8.084 3.162 0 5.384 5.244 5.384 8.084s-2.414 5.384-5.384 5.384Zm0-12.162c-2.065 0-4.078 4.287-4.078 6.778a4.082 4.082 0 0 0 4.078 4.078 4.082 4.082 0 0 0 4.077-4.078c0-2.491-2.013-6.777-4.077-6.777Z"></path><path d="M7.996 14.808a5.387 5.387 0 0 1-5.384-5.384c0-2.97 2.221-8.084 5.384-8.084 3.162 0 5.384 5.244 5.384 8.084s-2.414 5.384-5.384 5.384Zm0-12.162c-2.065 0-4.078 4.287-4.078 6.778a4.082 4.082 0 0 0 4.078 4.078 4.082 4.082 0 0 0 4.077-4.078c0-2.491-2.013-6.777-4.077-6.777Z"></path><path d="M9.233 8.065c-.253-.845-.689-1.76-1.142-2.387l1.055-.766c.531.74 1.045 1.803 1.332 2.779l-1.254.374h.009Z"></path></svg>';
 
 class IconEggs extends HTMLElement {
     constructor () {

package/dist/IconEggsLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--eggsLarge"><path d="m21.8 9.86-1.465.942a11.86 11.86 0 0 1 1.003 1.934c.261.628.453 1.238.584 1.804l1.708-.366a13.32 13.32 0 0 0-.671-2.109 14.29 14.29 0 0 0-1.15-2.213l-.01.009Z"></path><path d="M13.242 13.643c.497.74.967 1.664 1.333 2.614.235.627.418 1.22.532 1.778l1.708-.349c-.13-.645-.34-1.342-.61-2.048-.41-1.063-.95-2.117-1.517-2.954l-1.446.976v-.017Z"></path><path d="M19.874 4.614c-1.97 0-3.678 1.482-4.95 3.469-.741-.453-1.534-.715-2.37-.715-4.585 0-7.94 7.87-7.94 11.974 0 4.375 3.556 7.939 7.94 7.939 2.98 0 5.577-1.656 6.936-4.087.13 0 .253.017.384.017a7.43 7.43 0 0 0 7.425-7.424c0-4.096-3.06-11.164-7.425-11.164v-.009Zm-1.438 16.654a6.198 6.198 0 0 1-.793 1.595 6.185 6.185 0 0 1-5.09 2.675 6.204 6.204 0 0 1-6.196-6.196c0-3.756 3.06-10.23 6.196-10.23.514 0 1.02.182 1.508.487.48.296.941.697 1.377 1.203 1.891 2.178 3.303 5.978 3.303 8.531 0 .671-.113 1.325-.314 1.926l.009.009Zm1.76.174a8.004 8.004 0 0 0 .296-2.109c0-2.867-1.638-7.564-4.191-10.143 1.01-1.639 2.283-2.841 3.573-2.841 2.876 0 5.682 5.96 5.682 9.42 0 3.024-2.37 5.49-5.351 5.665l-.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--eggsLarge"><path d="m21.8 9.86-1.465.942a11.86 11.86 0 0 1 1.003 1.934c.261.628.453 1.238.584 1.804l1.708-.366a13.32 13.32 0 0 0-.671-2.109 14.29 14.29 0 0 0-1.15-2.213l-.01.009Z"></path><path d="M13.242 13.643c.497.74.967 1.664 1.333 2.614.235.627.418 1.22.532 1.778l1.708-.349c-.13-.645-.34-1.342-.61-2.048-.41-1.063-.95-2.117-1.517-2.954l-1.446.976v-.017Z"></path><path d="M19.874 4.614c-1.97 0-3.678 1.482-4.95 3.469-.741-.453-1.534-.715-2.37-.715-4.585 0-7.94 7.87-7.94 11.974 0 4.375 3.556 7.939 7.94 7.939 2.98 0 5.577-1.656 6.936-4.087.13 0 .253.017.384.017a7.43 7.43 0 0 0 7.425-7.424c0-4.096-3.06-11.164-7.425-11.164v-.009Zm-1.438 16.654a6.198 6.198 0 0 1-.793 1.595 6.185 6.185 0 0 1-5.09 2.675 6.204 6.204 0 0 1-6.196-6.196c0-3.756 3.06-10.23 6.196-10.23.514 0 1.02.182 1.508.487.48.296.941.697 1.377 1.203 1.891 2.178 3.303 5.978 3.303 8.531 0 .671-.113 1.325-.314 1.926l.009.009Zm1.76.174a8.004 8.004 0 0 0 .296-2.109c0-2.867-1.638-7.564-4.191-10.143 1.01-1.639 2.283-2.841 3.573-2.841 2.876 0 5.682 5.96 5.682 9.42 0 3.024-2.37 5.49-5.351 5.665l-.009.008Z"></path></svg>';
 
 class IconEggsLarge extends HTMLElement {
     constructor () {

package/dist/IconEmail.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--email"><path d="M13.451 2.802H2.55A1.566 1.566 0 0 0 1 4.36v7.28a1.566 1.566 0 0 0 1.566 1.557h10.885A1.566 1.566 0 0 0 15 11.64V4.36a1.566 1.566 0 0 0-1.549-1.558Zm.254 2.17v6.204L10.354 8.08l3.351-3.107ZM7.58 9.846a.647.647 0 0 0 .884 0l.945-.875 3.15 2.914H3.362l3.22-2.923.998.884Zm5.145-5.731L8 8.472 3.196 4.097l9.529.018ZM5.603 8.079 2.295 11.08V5.069l3.308 3.01Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--email"><path d="M13.451 2.802H2.55A1.566 1.566 0 0 0 1 4.36v7.28a1.566 1.566 0 0 0 1.566 1.557h10.885A1.566 1.566 0 0 0 15 11.64V4.36a1.566 1.566 0 0 0-1.549-1.558Zm.254 2.17v6.204L10.354 8.08l3.351-3.107ZM7.58 9.846a.647.647 0 0 0 .884 0l.945-.875 3.15 2.914H3.362l3.22-2.923.998.884Zm5.145-5.731L8 8.472 3.196 4.097l9.529.018ZM5.603 8.079 2.295 11.08V5.069l3.308 3.01Z"></path></svg>';
 
 class IconEmail extends HTMLElement {
     constructor () {

package/dist/IconEmailFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--emailFilled"><g clip-path="url(#prefix__clip0_1597_534)"><path d="m9.392 8.971-.945.875a.647.647 0 0 1-.884 0l-.98-.875-4.559 4.13c.168.064.346.097.525.096h10.903c.116.014.233.014.35 0l-4.41-4.226Z"></path><path d="M14.852 12.375c.108-.214.165-.451.166-.691V4.36a1.671 1.671 0 0 0-.114-.595l-4.55 4.314 4.498 4.296Z"></path><path d="M1.088 3.809A1.47 1.47 0 0 0 1 4.36v7.28c0 .224.052.445.15.647L5.602 8.08l-4.515-4.27Z"></path><path d="m8 8.472 5.915-5.6a1.61 1.61 0 0 0-.463-.07H2.549c-.176.002-.35.031-.516.088L8 8.472Z"></path></g><defs><clipPath id="prefix__clip0_1597_534"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--emailFilled"><g clip-path="url(#prefix__clip0_1597_534)"><path d="m9.392 8.971-.945.875a.647.647 0 0 1-.884 0l-.98-.875-4.559 4.13c.168.064.346.097.525.096h10.903c.116.014.233.014.35 0l-4.41-4.226Z"></path><path d="M14.852 12.375c.108-.214.165-.451.166-.691V4.36a1.671 1.671 0 0 0-.114-.595l-4.55 4.314 4.498 4.296Z"></path><path d="M1.088 3.809A1.47 1.47 0 0 0 1 4.36v7.28c0 .224.052.445.15.647L5.602 8.08l-4.515-4.27Z"></path><path d="m8 8.472 5.915-5.6a1.61 1.61 0 0 0-.463-.07H2.549c-.176.002-.35.031-.516.088L8 8.472Z"></path></g><defs><clipPath id="prefix__clip0_1597_534"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconEmailFilled extends HTMLElement {
     constructor () {

package/dist/IconEmailFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--emailFilledLarge"><path d="M28.81 24.225c.203-.377.311-.797.315-1.225V9a2.687 2.687 0 0 0-.21-1.032l-8.837 8.18 8.732 8.077Z"></path><path d="M18.791 17.339 16.7 19.264a.875.875 0 0 1-.595.236.875.875 0 0 1-.586-.227l-2.144-1.943-8.899 8.085c.324.138.672.21 1.024.21h21a2.45 2.45 0 0 0 1.015-.21l-8.724-8.076Z"></path><path d="M16.105 17.435 27.716 6.69a2.625 2.625 0 0 0-1.216-.315h-21a2.546 2.546 0 0 0-1.146.28l11.751 10.78Z"></path><path d="M3.12 7.906A2.537 2.537 0 0 0 2.875 9v14c.005.425.113.842.315 1.216l8.89-8.067-8.96-8.243Z"></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--emailFilledLarge"><path d="M28.81 24.225c.203-.377.311-.797.315-1.225V9a2.687 2.687 0 0 0-.21-1.032l-8.837 8.18 8.732 8.077Z"></path><path d="M18.791 17.339 16.7 19.264a.875.875 0 0 1-.595.236.875.875 0 0 1-.586-.227l-2.144-1.943-8.899 8.085c.324.138.672.21 1.024.21h21a2.45 2.45 0 0 0 1.015-.21l-8.724-8.076Z"></path><path d="M16.105 17.435 27.716 6.69a2.625 2.625 0 0 0-1.216-.315h-21a2.546 2.546 0 0 0-1.146.28l11.751 10.78Z"></path><path d="M3.12 7.906A2.537 2.537 0 0 0 2.875 9v14c.005.425.113.842.315 1.216l8.89-8.067-8.96-8.243Z"></path></svg>';
 
 class IconEmailFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconEmailLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--emailLarge"><path d="M26.5 6.375h-21A2.625 2.625 0 0 0 2.875 9v14A2.625 2.625 0 0 0 5.5 25.625h21A2.625 2.625 0 0 0 29.125 23V9A2.625 2.625 0 0 0 26.5 6.375Zm.875 3.01v13.519l-7.297-6.755 7.297-6.764Zm-11.856 9.888c.16.145.37.226.586.227a.875.875 0 0 0 .595-.236l2.091-1.925 7.061 6.536H6.165l7.21-6.545 2.144 1.943ZM26.168 8.125l-10.063 9.31L5.85 8.125h20.318ZM12.08 16.149l-7.455 6.764V9.376l7.455 6.773Z"></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--emailLarge"><path d="M26.5 6.375h-21A2.625 2.625 0 0 0 2.875 9v14A2.625 2.625 0 0 0 5.5 25.625h21A2.625 2.625 0 0 0 29.125 23V9A2.625 2.625 0 0 0 26.5 6.375Zm.875 3.01v13.519l-7.297-6.755 7.297-6.764Zm-11.856 9.888c.16.145.37.226.586.227a.875.875 0 0 0 .595-.236l2.091-1.925 7.061 6.536H6.165l7.21-6.545 2.144 1.943ZM26.168 8.125l-10.063 9.31L5.85 8.125h20.318ZM12.08 16.149l-7.455 6.764V9.376l7.455 6.773Z"></path></svg>';
 
 class IconEmailLarge extends HTMLElement {
     constructor () {

package/dist/IconEmployeeSearch.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--employeeSearch"><g clip-path="url(#prefix__clip0_18_369)"><path d="M7.125 7.125a3.062 3.062 0 1 0 0-6.125 3.062 3.062 0 0 0 0 6.125Zm0-4.813a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm4.813 5.47a2.852 2.852 0 0 0-2.844 2.843c.005.526.153 1.04.429 1.488l-1.925 1.925.927.962 1.925-1.925c.448.275.962.423 1.488.429a2.844 2.844 0 0 0 0-5.688v-.035Zm0 4.374a1.532 1.532 0 1 1 1.53-1.531 1.54 1.54 0 0 1-1.53 1.531Zm-4.06-2.625H5.856a2.826 2.826 0 0 0-2.704 1.811L2.48 13.25h-1.4l.875-2.345A4.139 4.139 0 0 1 5.89 8.219h2.66L7.878 9.53ZM1 13.582v-.096.105-.008Z"></path></g><defs><clipPath id="prefix__clip0_18_369"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--employeeSearch"><g clip-path="url(#prefix__clip0_18_369)"><path d="M7.125 7.125a3.062 3.062 0 1 0 0-6.125 3.062 3.062 0 0 0 0 6.125Zm0-4.813a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm4.813 5.47a2.852 2.852 0 0 0-2.844 2.843c.005.526.153 1.04.429 1.488l-1.925 1.925.927.962 1.925-1.925c.448.275.962.423 1.488.429a2.844 2.844 0 0 0 0-5.688v-.035Zm0 4.374a1.532 1.532 0 1 1 1.53-1.531 1.54 1.54 0 0 1-1.53 1.531Zm-4.06-2.625H5.856a2.826 2.826 0 0 0-2.704 1.811L2.48 13.25h-1.4l.875-2.345A4.139 4.139 0 0 1 5.89 8.219h2.66L7.878 9.53ZM1 13.582v-.096.105-.008Z"></path></g><defs><clipPath id="prefix__clip0_18_369"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconEmployeeSearch extends HTMLElement {
     constructor () {

package/dist/IconEmployeeSearchLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--employeeSearchLarge"><path d="M14.25 15.125a5.688 5.688 0 1 0-5.687-5.688 5.644 5.644 0 0 0 5.687 5.688Zm0-9.625a3.937 3.937 0 1 1-3.937 3.938A3.946 3.946 0 0 1 14.25 5.5Zm10.063 10.421a5.25 5.25 0 0 0-4.28 8.287L15.93 28.31l1.243 1.234 4.077-4.104a5.252 5.252 0 0 0 8.052-2.662 5.25 5.25 0 0 0-4.99-6.858Zm0 8.75a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm-5.6-7.796-4.463 7-3.404-5.25a5.977 5.977 0 0 0-5.25 3.885l-1.382 3.911H2.359l1.575-4.471a7.744 7.744 0 0 1 7.376-5.075h.473l2.467 3.797 2.468-3.797h1.995Z"></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--employeeSearchLarge"><path d="M14.25 15.125a5.688 5.688 0 1 0-5.687-5.688 5.644 5.644 0 0 0 5.687 5.688Zm0-9.625a3.937 3.937 0 1 1-3.937 3.938A3.946 3.946 0 0 1 14.25 5.5Zm10.063 10.421a5.25 5.25 0 0 0-4.28 8.287L15.93 28.31l1.243 1.234 4.077-4.104a5.252 5.252 0 0 0 8.052-2.662 5.25 5.25 0 0 0-4.99-6.858Zm0 8.75a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm-5.6-7.796-4.463 7-3.404-5.25a5.977 5.977 0 0 0-5.25 3.885l-1.382 3.911H2.359l1.575-4.471a7.744 7.744 0 0 1 7.376-5.075h.473l2.467 3.797 2.468-3.797h1.995Z"></path></svg>';
 
 class IconEmployeeSearchLarge extends HTMLElement {
     constructor () {

package/dist/IconEngineers.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--engineers"><path d="M13.023 9.286V3.581c0-.91-.744-1.654-1.654-1.654H4.64c-.91 0-1.654.744-1.654 1.654v5.705l-1.776 1.68v1.094c0 .91.744 1.654 1.654 1.654h10.264c.91 0 1.653-.744 1.653-1.654v-1.094l-1.767-1.68h.009ZM4.64 3.231h6.729c.192 0 .341.158.341.341V8.91H4.29V3.581c0-.192.157-.341.341-.341l.009-.009Zm8.837 8.82a.342.342 0 0 1-.34.341H2.871a.342.342 0 0 1-.34-.34v-.526l1.373-1.303h8.199l1.373 1.303v.525Z"></path><path d="m6.722 6.469-.463-.464.463-.473-.612-.612-1.076 1.085L6.11 7.081l.612-.612Z"></path><path d="m9.741 6.005-.464.464.613.612 1.076-1.076L9.89 4.92l-.613.612.464.473Z"></path><path d="M6.644 7.641h.988l1.645-3.054h-.98L6.644 7.641Z"></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--engineers"><path d="M13.023 9.286V3.581c0-.91-.744-1.654-1.654-1.654H4.64c-.91 0-1.654.744-1.654 1.654v5.705l-1.776 1.68v1.094c0 .91.744 1.654 1.654 1.654h10.264c.91 0 1.653-.744 1.653-1.654v-1.094l-1.767-1.68h.009ZM4.64 3.231h6.729c.192 0 .341.158.341.341V8.91H4.29V3.581c0-.192.157-.341.341-.341l.009-.009Zm8.837 8.82a.342.342 0 0 1-.34.341H2.871a.342.342 0 0 1-.34-.34v-.526l1.373-1.303h8.199l1.373 1.303v.525Z"></path><path d="m6.722 6.469-.463-.464.463-.473-.612-.612-1.076 1.085L6.11 7.081l.612-.612Z"></path><path d="m9.741 6.005-.464.464.613.612 1.076-1.076L9.89 4.92l-.613.612.464.473Z"></path><path d="M6.644 7.641h.988l1.645-3.054h-.98L6.644 7.641Z"></path></svg>';
 
 class IconEngineers extends HTMLElement {
     constructor () {

package/dist/IconEngineersLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--engineersLarge"><path d="M25.24 18.651V7.547a2.793 2.793 0 0 0-2.791-2.79H9.55a2.793 2.793 0 0 0-2.791 2.79v11.104l-3.386 3.212v1.933a2.793 2.793 0 0 0 2.79 2.791h19.67a2.793 2.793 0 0 0 2.792-2.79v-1.934L25.24 18.65ZM9.55 6.506H22.44c.577 0 1.041.473 1.041 1.041v10.605H8.51V7.547c0-.577.472-1.04 1.041-1.04Zm17.325 17.29c0 .578-.473 1.041-1.041 1.041H6.165a1.044 1.044 0 0 1-1.041-1.04v-1.182l2.86-2.712h16.03l2.862 2.712v1.181Z"></path><path d="m13.427 13.217-.945-.936.945-.945-1.242-1.242-2.179 2.187 2.179 2.179 1.242-1.243Z"></path><path d="m19.517 12.281-.945.936 1.243 1.243 2.178-2.179-2.178-2.187-1.243 1.242.945.945Z"></path><path d="M13.27 15.58h1.986l3.334-6.169h-1.995L13.27 15.58Z"></path><path d="m13.559 21.372-.7 1.75h6.282l-.7-1.75h-4.882Z"></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--engineersLarge"><path d="M25.24 18.651V7.547a2.793 2.793 0 0 0-2.791-2.79H9.55a2.793 2.793 0 0 0-2.791 2.79v11.104l-3.386 3.212v1.933a2.793 2.793 0 0 0 2.79 2.791h19.67a2.793 2.793 0 0 0 2.792-2.79v-1.934L25.24 18.65ZM9.55 6.506H22.44c.577 0 1.041.473 1.041 1.041v10.605H8.51V7.547c0-.577.472-1.04 1.041-1.04Zm17.325 17.29c0 .578-.473 1.041-1.041 1.041H6.165a1.044 1.044 0 0 1-1.041-1.04v-1.182l2.86-2.712h16.03l2.862 2.712v1.181Z"></path><path d="m13.427 13.217-.945-.936.945-.945-1.242-1.242-2.179 2.187 2.179 2.179 1.242-1.243Z"></path><path d="m19.517 12.281-.945.936 1.243 1.243 2.178-2.179-2.178-2.187-1.243 1.242.945.945Z"></path><path d="M13.27 15.58h1.986l3.334-6.169h-1.995L13.27 15.58Z"></path><path d="m13.559 21.372-.7 1.75h6.282l-.7-1.75h-4.882Z"></path></svg>';
 
 class IconEngineersLarge extends HTMLElement {
     constructor () {