@zonos/elements 1.3.217 → 1.3.219

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: '78d54ed310efdfe81e04b74ec950035399db94bd', style: {
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: 'd32389820440988adb75b0fcd5b4e3da766d00d7', class: classes.classes(['styled-card']), style: {
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderRadius,
+                padding: this.spacing,
+            } }, this.label && (index.h("header", { key: '4f68ebe6493cb839ad863ab663a12480cbdcbb52', class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { key: '85aece20f1a0028be6e1839ea87caff7a2f07973', type: "subheader" }, this.label), index.h("h-stack", { key: '54342a00a12daddda98948d7905de77e3754625a', spacing: 8 }, this.actions))), index.h("slot", { key: '8fc09c873f0c9437d334c0b374aa778fa7b54ab9' }), (this.footerActions || this.footerContent) && (index.h("footer", { key: '70a2d11a92149e38c5ad3f3c393c2f13d4b4d356', class: "card-footer", style: {
+                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
+                padding: this.spacing,
+            } }, index.h("div", { key: 'a6cb5f0d7700072ad00437d17772611219bd871e' }, this.footerContent), index.h("h-stack", { key: '88b62d9969204756c26b27da1575059894e491a9', 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: 'aa9addffbd4d082cd46259078b2d6b02bf79e0b2', 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: 'afc39851d100fee8868d1977e19e0cca59c493ac' }, 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: '2bedbc66b1e3aa14217ee9043cd8b49c60fe7e02', class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { key: '0f0cc196919a08927fc18a384a2722cc3020220f', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: 'fec8347641037537c56399970f840c064d0363df', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return index.getElement(this); }