@zonos/elements 1.3.124 → 1.3.126

package/dist/esm/zonos-banner.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host } from './index-86b8247e.js';
 import { d as zonosStoreFontFamily } from './zonosStore-6b5bd87c.js';
 import { c as classes } from './classes-0d95c529.js';
 
-const zonosBannerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{border-radius:var(--zonos-elements-radius-10);padding:16px;background:var(--zonos-elements-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:0px;grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:4px}:host(.info){background-color:var(--zonos-elements-blue-100);border:1px solid var(--zonos-elements-blue-200)}:host(.success){background-color:var(--zonos-elements-green-100);border:1px solid var(--zonos-elements-green-200)}:host(.error){background-color:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host(.warning){background-color:var(--zonos-elements-orange-100);border:1px solid var(--zonos-elements-orange-200)}";
+const zonosBannerCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{border-radius:var(--zonos-elements-radius-10);padding:16px;background:var(--zonos-elements-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:0px;grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:4px}:host(.info){background-color:var(--zonos-elements-blue-100);border:1px solid var(--zonos-elements-blue-200)}:host(.success){background-color:var(--zonos-elements-green-100);border:1px solid var(--zonos-elements-green-200)}:host(.error){background-color:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host(.warning){background-color:var(--zonos-elements-orange-100);border:1px solid var(--zonos-elements-orange-200)}";
 const ZonosBannerStyle0 = zonosBannerCss;
 
 const ZonosBanner = class {
@@ -34,31 +34,31 @@ const ZonosBanner = class {
         switch (this.intent) {
             case 'error':
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'red',
                 })));
             case 'info':
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'blue',
                 })));
             case 'success':
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'green',
                 })));
             case 'warning':
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'orange',
                 })));
             default:
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'gray',
                 })));

package/dist/esm/zonos-button_3.entry.js

@@ -2,8 +2,9 @@ import { r as registerInstance, h, H as Host, d as getElement } from './index-86
 import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-6b5bd87c.js';
 import { c as classes } from './classes-0d95c529.js';
 import { g as getBorderRadius } from './getBorderRadius-008516a4.js';
-import { i as isColorVariable } from './isColorVariable-82457bef.js';
+import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { i as isDarkColor } from './isDarkColor-dc08fa26.js';
+import { s as styles } from './styles-6fc2fad9.js';
 
 /**
  * Get theme for button text based on background color
@@ -24,20 +25,7 @@ const isElementUsingDarkTheme = (element) => isDarkColor(window
     .getComputedStyle(element)
     .getPropertyValue('--zonos-elements-gray-0'));
 
-/**
- * Filter out all of the undefined values from the object so we don't have undefined css variable values
- */
-const styles = (props) => {
-    // loop through the object and filter out all of the underfined values
-    return Object.entries(props).reduce((acc, [key, value]) => {
-        if (value) {
-            acc[key] = value;
-        }
-        return acc;
-    }, {});
-};
-
-const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--zonos-elements-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--zonos-elements-radius-10);gap:8px}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--zonos-elements-surface-color);border:none;outline:1px solid var(--zonos-elements-surface-color);border-radius:var(--border-radius, var(--zonos-elements-radius-10));-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:8px 24px;color:var(--color, var(--zonos-elements-gray-1000));margin:1px;}:host button:not([disabled]):hover{background-image:var(--zonos-elements-button-standard-hover)}:host button:not([disabled]):active{background:var(--zonos-elements-gray-700)}:host button:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button.with-box-shadow{-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard)}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--zonos-elements-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--zonos-elements-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--zonos-elements-size-sm);line-height:var(--zonos-elements-size-sm);padding:4px 8px}:host button.sm:not(.has-content).has-icon{padding:0 4px}:host button.md{height:var(--zonos-elements-size-md);line-height:var(--zonos-elements-size-md);padding:8px 16px}:host button.md:not(.has-content).has-icon{padding:0 8px}:host button.lg{height:var(--zonos-elements-size-lg);line-height:var(--zonos-elements-size-lg);padding:12px 24px}:host button.lg:not(.has-content).has-icon{padding:0 16px}:host button:not(.only-icon).has-icon{gap:8px}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--zonos-elements-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--zonos-elements-gray-0));color:var(--color, var(--zonos-elements-gray-1000));outline:1px solid var(--background-color, var(--zonos-elements-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--zonos-elements-blue-600);outline:1px solid var(--zonos-elements-blue-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--zonos-elements-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--zonos-elements-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-600)}:host button:not(.override-background).success{background:var(--zonos-elements-green-600);outline:1px solid var(--zonos-elements-green-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--zonos-elements-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--zonos-elements-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--zonos-elements-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-green-400)}:host button:not(.override-background).danger{background:var(--zonos-elements-red-600);outline:1px solid var(--zonos-elements-red-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--zonos-elements-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--zonos-elements-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--zonos-elements-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-red-400)}:host button:not(.override-background).warning{background:var(--zonos-elements-orange-600);outline:1px solid var(--zonos-elements-orange-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--zonos-elements-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--zonos-elements-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--zonos-elements-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--zonos-elements-gray-900)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--zonos-elements-gray-800)}:host button:not(.override-background).subtle:not([disabled]).dark-hover-subtle:hover{background:var(--zonos-elements-gray-100)}:host button:not(.override-background).subtle:not([disabled]).dark-hover-subtle:active{background:var(--zonos-elements-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--zonos-elements-button-focus-ring);box-shadow:var(--zonos-elements-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--zonos-elements-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--zonos-elements-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--zonos-elements-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--zonos-elements-radius-4);width:24px}";
+const zonosButtonCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--zonos-elements-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--zonos-elements-radius-10);gap:8px}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--zonos-elements-surface-color);border:none;outline:1px solid var(--zonos-elements-surface-color);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--zonos--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:8px 24px;color:var(--zonos--color, var(--zonos-elements-gray-1000));margin:1px;}:host button:not([disabled]):hover{background-image:var(--zonos-elements-button-standard-hover)}:host button:not([disabled]):active{background:var(--zonos-elements-gray-700)}:host button:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button.with-box-shadow{-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard)}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--zonos--background-color, var(--zonos-elements-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--zonos--background-color, var(--zonos-elements-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--zonos-elements-size-sm);line-height:var(--zonos-elements-size-sm);padding:4px 8px}:host button.sm:not(.has-content).has-icon{padding:0 4px}:host button.md{height:var(--zonos-elements-size-md);line-height:var(--zonos-elements-size-md);padding:8px 16px}:host button.md:not(.has-content).has-icon{padding:0 8px}:host button.lg{height:var(--zonos-elements-size-lg);line-height:var(--zonos-elements-size-lg);padding:12px 24px}:host button.lg:not(.has-content).has-icon{padding:0 16px}:host button:not(.only-icon).has-icon{gap:8px}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--zonos-elements-font-size-s)}}:host button.override-background{background-color:var(--zonos--background-color, var(--zonos-elements-gray-0));color:var(--zonos--color, var(--zonos-elements-gray-1000));outline:1px solid var(--zonos--background-color, var(--zonos-elements-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--zonos-elements-blue-600);outline:1px solid var(--zonos-elements-blue-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--zonos-elements-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--zonos-elements-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-600)}:host button:not(.override-background).success{background:var(--zonos-elements-green-600);outline:1px solid var(--zonos-elements-green-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--zonos-elements-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--zonos-elements-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--zonos-elements-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-green-400)}:host button:not(.override-background).danger{background:var(--zonos-elements-red-600);outline:1px solid var(--zonos-elements-red-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--zonos-elements-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--zonos-elements-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--zonos-elements-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-red-400)}:host button:not(.override-background).warning{background:var(--zonos-elements-orange-600);outline:1px solid var(--zonos-elements-orange-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--zonos-elements-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--zonos-elements-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--zonos-elements-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--zonos--color, var(--zonos-elements-gray-1000));outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--zonos-elements-gray-900)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--zonos-elements-gray-800)}:host button:not(.override-background).subtle:not([disabled]).dark-hover-subtle:hover{background:var(--zonos-elements-gray-100)}:host button:not(.override-background).subtle:not([disabled]).dark-hover-subtle:active{background:var(--zonos-elements-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--zonos-elements-button-focus-ring);box-shadow:var(--zonos-elements-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--zonos-elements-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--zonos-elements-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--zonos-elements-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--zonos-elements-radius-4);width:24px}";
 const ZonosButtonStyle0 = zonosButtonCss;
 
 const ZonosButton = class {
@@ -155,12 +143,12 @@ const ZonosButton = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'd35c2874d343aa93b38cb40cbe8cdeb5c77bb97c', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
-                '--background-color': backgroundColor,
-                '--border-radius': borderStyle,
-                '--color': color,
-                '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: '9a964a9eb765152075c6a08008341d177e4d2879', class: classes([
+        return (h(Host, { key: 'a862db0549563c67361d2f93baf6bed668a9a561', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderStyle,
+                '--zonos--color': color,
+                '--zonos--font-family': zonosStoreFontFamily(),
+            }) }, h("button", { key: 'e848c5d69708b8eee9a2be1c1649eb0f9c85dae0', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -175,7 +163,7 @@ const ZonosButton = class {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }, this.loading && (h("div", { key: 'bcc0ae7d419ae25477b65d4e9c26b62f7f1e1a1f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'dcd083f67544bd05b0ca866ff19a44fc33c77715', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'c32fab50c66737462c6a2743100cd43156edab27', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }, this.loading && (h("div", { key: '3d6af592a449d698a205bb327ee3f29b57a406ff', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c4e28edbbed061e57ad6c6f532887b74441e4acc', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'dbbf5f30085d61932505f8724473bb61dd67c7b7', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return getElement(this); }
@@ -185,7 +173,7 @@ const ZonosButton = class {
 };
 ZonosButton.style = ZonosButtonStyle0;
 
-const zonosIconCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
+const zonosIconCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--zonos--width);height:var(--zonos--height);fill:var(--zonos--color);color:var(--zonos--color)}";
 const ZonosIconStyle0 = zonosIconCss;
 
 const ZonosIcon = class {
@@ -205,17 +193,17 @@ const ZonosIcon = class {
             : this.iconColor;
         this.el.shadowRoot.innerHTML = this.content;
         return (h(Host, { class: "zonos--elements", style: {
-                '--color': iconColor,
-                '--font-family': zonosStoreFontFamily(),
-                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
-                '--width': `${this.size}px`,
+                '--zonos--color': iconColor,
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+                '--zonos--width': `${this.size}px`,
             } }));
     }
     get el() { return getElement(this); }
 };
 ZonosIcon.style = ZonosIconStyle0;
 
-const zonosSpinnerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--zonos-elements-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--zonos-elements-gray-200)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}:host(.black) circle{stroke:var(--zonos-elements-spinner-stroke-black)}:host(.black) circle.track{stroke:var(--zonos-elements-spinner-track-black)}:host(.white) circle{stroke:var(--zonos-elements-spinner-stroke-white)}:host(.white) circle.track{stroke:var(--zonos-elements-spinner-track-white)}:host(.info) circle{stroke:var(--zonos-elements-blue-600)}:host(.info) circle.track{stroke:var(--zonos-elements-blue-100)}:host(.success) circle{stroke:var(--zonos-elements-green-600)}:host(.success) circle.track{stroke:var(--zonos-elements-green-100)}:host(.danger) circle{stroke:var(--zonos-elements-red-600)}:host(.danger) circle.track{stroke:var(--zonos-elements-red-100)}:host(.warning) circle{stroke:var(--zonos-elements-orange-600)}:host(.warning) circle.track{stroke:var(--zonos-elements-orange-100)}";
+const zonosSpinnerCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative;overflow:hidden;width:var(--zonos--size);height:var(--zonos--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--zonos--size);height:var(--zonos--size);stroke:var(--zonos-elements-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--zonos-elements-gray-200)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}:host(.black) circle{stroke:var(--zonos-elements-spinner-stroke-black)}:host(.black) circle.track{stroke:var(--zonos-elements-spinner-track-black)}:host(.white) circle{stroke:var(--zonos-elements-spinner-stroke-white)}:host(.white) circle.track{stroke:var(--zonos-elements-spinner-track-white)}:host(.info) circle{stroke:var(--zonos-elements-blue-600)}:host(.info) circle.track{stroke:var(--zonos-elements-blue-100)}:host(.success) circle{stroke:var(--zonos-elements-green-600)}:host(.success) circle.track{stroke:var(--zonos-elements-green-100)}:host(.danger) circle{stroke:var(--zonos-elements-red-600)}:host(.danger) circle.track{stroke:var(--zonos-elements-red-100)}:host(.warning) circle{stroke:var(--zonos-elements-orange-600)}:host(.warning) circle.track{stroke:var(--zonos-elements-orange-100)}";
 const ZonosSpinnerStyle0 = zonosSpinnerCss;
 
 const ZonosSpinner = class {
@@ -229,7 +217,7 @@ const ZonosSpinner = class {
             return null;
         }
         return (h(Host, { class: classes(['zonos--elements', this.spinnerColor]), style: {
-                '--size': `${this.size}px`,
+                '--zonos--size': `${this.size}px`,
             } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
     }
     get el() { return getElement(this); }

package/dist/esm/zonos-card.entry.js

@@ -3,7 +3,7 @@ import { d as zonosStoreFontFamily } from './zonosStore-6b5bd87c.js';
 import { c as classes } from './classes-0d95c529.js';
 import { g as getBorderRadius } from './getBorderRadius-008516a4.js';
 
-const zonosCardCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--zonos-elements-border);border-radius:var(--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
+const zonosCardCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--zonos--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;
 
 const ZonosCard = class {
@@ -26,16 +26,16 @@ const ZonosCard = class {
             customRoundRadius: `${this.borderRadius}px`,
             overrideBorderStyle: 'ROUNDED',
         });
-        return (h(Host, { key: '0feaf20ca1bb493792614216aeace549a3bad708', style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '9a05937c24886d73e52ef2f6bf722869247e133c', class: classes(['styled-card']), style: {
-                '--background-color': backgroundColor,
-                '--border-radius': borderRadius,
+        return (h(Host, { key: '84d131edbe30a0ce9869351c197c438082bcadac', style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'c1ab46423b1716badf577b51c1e10a59f6d857c7', class: classes(['styled-card']), style: {
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderRadius,
                 padding: this.spacing,
-            } }, this.label && (h("header", { key: '862b765cabe5ab5c897db18654b0be0c8ed492f3', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'e637d00494ba2ca7d081bd2eebcb825afc4ffa90', type: "subheader" }, this.label), h("h-stack", { key: '5174ef0a9f588d9862aca3375a3ad3269cbc0051', spacing: 8 }, this.actions))), h("slot", { key: 'b260fa53b675b0465d32deba0daaa13a0eb85ac1' }), (this.footerActions || this.footerContent) && (h("footer", { key: '0681bfa581ef37bf0a102eb1dfe9f6fd4c0d88f4', class: "card-footer", style: {
+            } }, this.label && (h("header", { key: '3f86015a24d5d86f41955c57a96c1051aa8cd0fb', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '697b450d8c77935d602a2c6fc11279c38a558f8e', type: "subheader" }, this.label), h("h-stack", { key: 'ef44ce7c7d1fd3d8f683656c2156f0b24232b6c0', spacing: 8 }, this.actions))), h("slot", { key: '1e5bc6315fcc134e5a7c608547ea2f481ecb91df' }), (this.footerActions || this.footerContent) && (h("footer", { key: 'aabb9ec4c7f1122662ac13655caa4cd3557266cc', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '65271d4dd4e32a64467be17d10202cad1f302fe4' }, this.footerContent), h("h-stack", { key: 'fd1ded15a0caae9a2f781fc0f6fbf59e7768ef37', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: 'c92b803303485ce25b66dad4237411e3c4d5c15c' }, this.footerContent), h("h-stack", { key: '12c395e0b5c537f991d6814352f62d3da15432a1', spacing: 8 }, this.footerActions))))));
     }
 };
 ZonosCard.style = ZonosCardStyle0;