@zonos/elements 1.3.233 → 1.3.234

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: '5213d69a38c0e00d02d4c85d499ee5b5ca5a929c', class: classes.classes(['zonos--elements zonos--badge']), style: {
+        return (index.h(index.Host, { key: '2c6d37db80b369e4d287e2d7a6cb4db9b69fe6f6', class: classes.classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '178886813185320c971444c181a4fe0e8b57d7e3', class: classes.classes([
+            } }, index.h("div", { key: 'f5f2f2530c11d8c46349024f044a7b042a12a10f', 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: '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); } })))));
+            ]) }, this.icon, index.h("zonos-text", { key: 'e031a216dc586d138b0d3c03781b8b362bcc25d2', textColor: `${this.badgeColor}-800` }, index.h("slot", { key: '9757275ea8350ae8578e255bb99940697021258e' })), this.dismissHandler && (index.h("zonos-icon", { key: '42a08f166b237af5c7c508c257dda46ee5c3d58a', "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_2.cjs.entry.js → zonos-banner.cjs.entry.js}

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-69fa8852.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 require('./VarianceTest-bec00ea8.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)}";
@@ -74,43 +73,4 @@ 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: 'd44e5db9b123906c2435285d23d0d05b6c15d8b3', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles.styles({
+        return (index.h(index.Host, { key: '301c0140cae22157209423d34385103d9ea1cf29', 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: 'a937efb3d014fd8f5501fcde7c3c2f0cb33439aa' }, this.inheritedAttributes, { class: classes.classes([
+            }) }, index.h("button", Object.assign({ key: '2e3e75b8d0fd7c22c668972ad4a2f8bda363e159' }, 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: '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)));
+            } }), this.loading && (index.h("div", { key: 'f1965c769d9d1a2a7f636b09be1384cf7cd6227a', class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { key: '5bbeb95041065e247ebc2f725f751e2fb5cd93c5', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: 'b32f5bd10dc79b258545efd92ed594a2906b3292', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return index.getElement(this); }

package/dist/cjs/{zonos-empty-state-payment_4.cjs.entry.js → zonos-card_5.cjs.entry.js}

@@ -6,14 +6,51 @@ const index = require('./index-69fa8852.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
-const cart = require('./cart-bc615014.js');
-const localization = require('./localization-39516612.js');
+const cart = require('./cart-22ced7cc.js');
+const localization = require('./localization-8ef6250a.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const paypal = require('./paypal-1d6f1a71.js');
+const paypal = require('./paypal-4a086f84.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
-require('./translationStore-08d3ff9c.js');
 require('./isDarkColor-878e600e.js');
 
+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: '8832966776c626c783e771fb7f9a773d2539e07f', style: {
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: '89c9af9275ca5b01f658081fefb7756bfcbf6d58', class: classes.classes(['styled-card']), style: {
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderRadius,
+                padding: this.spacing,
+            } }, this.label && (index.h("header", { key: '3da688655c5a9af66397525d02224dbc431d00d0', class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { key: '8e9524d26e5a0a7e3149b4008efd02b5a7b9ebc6', type: "subheader" }, this.label), index.h("h-stack", { key: 'f7298bbb158686b03b2a09f5d6c089c0f4d144c4', spacing: 8 }, this.actions))), index.h("slot", { key: '24888347ff25ffd21b416da4f5aae493f8044638' }), (this.footerActions || this.footerContent) && (index.h("footer", { key: 'b6792e7345b87e9407585ed4558c7327ea3eab36', class: "card-footer", style: {
+                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
+                padding: this.spacing,
+            } }, index.h("div", { key: '70ccde8e9b1988db1ba477efea5b44e812a7514d' }, this.footerContent), index.h("h-stack", { key: '4e48425e9db7031d779da7061f0b2d92b27869a0', spacing: 8 }, this.footerActions))))));
+    }
+};
+ZonosCard.style = ZonosCardStyle0;
+
 const PaymentEmptyStateDarkIcon = `<svg width="536" height="200" viewBox="0 0 536 200" fill="none" xmlns="http://www.w3.org/2000/svg">
 <mask id="mask0_3739_19124" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="536" height="200">
 <rect width="536" height="200" fill="url(#paint0_radial_3739_19124)"/>
@@ -220,7 +257,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'ecf135f9da39d699a2287558a99310acd8e5fbd2', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '67048977556c556826c26120f2c0654885f30c57', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '7762163776ac5ee3f8bbc7c65e31b5dc833bb011', class: "zonos--payment-component" }), index.h("div", { key: '4f12427f8db85442e0b41dd5eb194f374c6f1d86', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: '42a202e340dfa0f52920f7e351a116daec674a34', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '8424ae7cc51ea41832c2ae10d07a7e9e0c84c3c7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'ac7f96570bacc823541396f791ed9d4a122b94b0', class: "zonos--payment-component" }), index.h("div", { key: 'af0a99cd447eb881224814d024ddb64edf0fbeb2', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -284,12 +321,13 @@ const ZonosPaypalPayment = class {
         this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
     }
     render() {
-        return (index.h(index.Host, { key: 'bcf11ef0ceab1d847c237ec26ec604440983c16f', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: 'ce5033f39b2e9644e30fc1e0e35f64e5d9b9730d', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: '503c2a2f4d6dd0d6c10468f4bbe915610cf7008e', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: 'c1d2c15bf6f096c3666f9d4e8085c5fbe2c637a7', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
 };
 ZonosPaypalPayment.style = ZonosPaypalPaymentStyle0;
 
+exports.zonos_card = ZonosCard;
 exports.zonos_empty_state_payment = ZonosEmptyStatePayment;
 exports.zonos_notification = ZonosNotification;
 exports.zonos_payment = ZonosPayment;