@zonos/elements 1.3.218 → 1.3.220

package/dist/cjs/zonos-badge.cjs.entry.js

@@ -50,16 +50,16 @@ const ZonosBadge = class {
         this.loading = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'd8a6a11f10c36a272ecdb52c54919f9ad45e1a9a', class: classes.classes(['zonos--elements zonos--badge']), style: {
+        return (index.h(index.Host, { key: '5213d69a38c0e00d02d4c85d499ee5b5ca5a929c', class: classes.classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'c7573446a478f9b9e45a4787593ba9ecaf595fdc', class: classes.classes([
+            } }, index.h("div", { key: '178886813185320c971444c181a4fe0e8b57d7e3', class: classes.classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, index.h("zonos-text", { key: '578f7cf2f27be3306fc7c776dc82a7a324a8b3ca', textColor: `${this.badgeColor}-800` }, index.h("slot", { key: '0b59f674e40454dcf07bea704f38c9df7d68cb43' })), this.dismissHandler && (index.h("zonos-icon", { key: 'ff4e2ee7511940df9ec27830e406502d7acf5209', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
+            ]) }, this.icon, index.h("zonos-text", { key: '6e75ee5fbbbe62b2d2c875a4866f33060dd9618b', textColor: `${this.badgeColor}-800` }, index.h("slot", { key: 'b6c1dcd8b29f1c99dc2cbd37d944ad8af3267713' })), this.dismissHandler && (index.h("zonos-icon", { key: '232d8056ee38962614267def07647c3f52246f0d', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
 };
 ZonosBadge.style = ZonosBadgeStyle0;

package/dist/cjs/{zonos-banner.cjs.entry.js → zonos-banner_2.cjs.entry.js}

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1c710d00.js');
 const zonosStore = require('./zonosStore-f8ee56aa.js');
 const classes = require('./classes-b7918f56.js');
+const getBorderRadius = require('./getBorderRadius-1b5e33cf.js');
 require('./VarianceTest-0cb1e118.js');
 
 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)}";
@@ -73,4 +74,43 @@ const ZonosBanner = class {
 };
 ZonosBanner.style = ZonosBannerStyle0;
 
+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 {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The border radius of the card
+         * @default 6
+         */
+        this.borderRadius = 6;
+        /**
+         * The spacing to apply between elements in the card
+         */
+        this.spacing = '24px';
+    }
+    render() {
+        const backgroundColor = this.backgroundColor
+            ? `var(--zonos-elements-${this.backgroundColor})`
+            : 'transparent';
+        const borderRadius = getBorderRadius.getBorderRadius({
+            customRoundRadius: `${this.borderRadius}px`,
+            overrideBorderStyle: 'ROUNDED',
+        });
+        return (index.h(index.Host, { key: '9423d1472ed313f50c5f4ecc61251025ac6083ed', style: {
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: '7d2506d2fa9297dce93676bd09dd854a84f27db3', class: classes.classes(['styled-card']), style: {
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderRadius,
+                padding: this.spacing,
+            } }, this.label && (index.h("header", { key: '81e381540ecbd5c398e5cabf6626d701569e16e5', class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { key: '7929725b31dec41dbab855daa3bd7ae97fb00eb3', type: "subheader" }, this.label), index.h("h-stack", { key: 'c69fe767e575b3aaf824eb355d7bb35e395ba77a', spacing: 8 }, this.actions))), index.h("slot", { key: 'ada30bc1760b957a817e0982e46f3def97974297' }), (this.footerActions || this.footerContent) && (index.h("footer", { key: '854c3d583cb293f5c064af87e839641a5201c900', class: "card-footer", style: {
+                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
+                padding: this.spacing,
+            } }, index.h("div", { key: '0a799500938f8d04a8551134b21fe18a05f93de0' }, this.footerContent), index.h("h-stack", { key: '927b51384452ab01b28da02c9a83256ab7dc6991', spacing: 8 }, this.footerActions))))));
+    }
+};
+ZonosCard.style = ZonosCardStyle0;
+
 exports.zonos_banner = ZonosBanner;
+exports.zonos_card = ZonosCard;

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

@@ -211,13 +211,13 @@ const ZonosButton = class {
         const borderStyle = getBorderRadius.getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (index.h(index.Host, { key: '88cc4ce2ac8a82e62ac4a5a3828724b92da1db60', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles.styles({
+        return (index.h(index.Host, { key: 'd44e5db9b123906c2435285d23d0d05b6c15d8b3', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles.styles({
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--color': color,
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--font-weight': this.bold ? 'bold' : 'normal',
-            }) }, index.h("button", Object.assign({ key: '4037731e2337e441a2eeb5e28433ba8426cb75b2' }, this.inheritedAttributes, { class: classes.classes([
+            }) }, index.h("button", Object.assign({ key: 'a937efb3d014fd8f5501fcde7c3c2f0cb33439aa' }, this.inheritedAttributes, { class: classes.classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -232,7 +232,7 @@ const ZonosButton = class {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }), this.loading && (index.h("div", { key: '09f824b2106313200deaa1bdcb7afc3e3b161911', class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { key: 'b094e740a91c49a14a31fc56142dccf1062a584b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: '8bfc81ae6f5f114a0255854aa79db32a5ee39259', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }), this.loading && (index.h("div", { key: '09292867f621fd3e04313494809e59254a353403', class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { key: '250912ac9cc2ba4d9d5db8fdc67fa6009d5ea7ac', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: '0695250725aff37526e6ea4f94456a368b873c59', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return index.getElement(this); }