@zonos/elements 1.3.4-alpha.0 → 1.3.4-alpha.2

package/dist/cjs/{cart-cfa5d5fd.js → cart-f31374d4.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-10d1d6ff.js');
-const localization = require('./localization-4746acf7.js');
-const isDarkColor = require('./isDarkColor-fc8c294a.js');
-const getBorderRadius = require('./getBorderRadius-c3c63ee6.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
+const localization = require('./localization-d43e1540.js');
+const isDarkColor = require('./isDarkColor-5eda1323.js');
+const getBorderRadius = require('./getBorderRadius-cd7ef574.js');
 
 const prepCalculateLandedCost = () => {
     // maybe we don't need email now for prefetch the landed cost

package/dist/cjs/{getBorderRadius-c3c63ee6.js → getBorderRadius-cd7ef574.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-10d1d6ff.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
 
 /**
  * Get the border radius for the elements based on the style

package/dist/cjs/{index-0dcccc22.js → index-3ead02fe.js}

@@ -32,6 +32,7 @@ const NAMESPACE = 'zonos-elements';
  */
 let scopeId;
 let hostTagName;
+let useNativeShadowDom = false;
 let isSvgMode = false;
 let renderingRef = null;
 let queuePending = false;
@@ -981,8 +982,7 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
             isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
         }
         {
-            if (tag === 'slot')
-                ;
+            if (tag === 'slot' && !useNativeShadowDom) ;
             else {
                 // either this is the first render of an element OR it's an update
                 // AND we already know it's possible it could have changed
@@ -1046,6 +1046,7 @@ const nullifyVNodeRefs = (vNode) => {
  */
 const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     const hostElm = hostRef.$hostElement$;
+    const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     // if `renderFnResults` is a Host node then we can use it directly. If not,
     // we need to call `h` again to wrap the children of our component in a
@@ -1082,6 +1083,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     {
         scopeId = hostElm['s-sc'];
     }
+    useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
     // synchronous patch
     patch(oldVNode, rootVnode, isInitialLoad);
 };
@@ -1797,25 +1799,29 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
-    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
-    if (hasSlotRelocation) {
-        dataStyles.innerHTML += SLOT_FB_CSS;
-    }
-    // Add hydration styles
-    {
-        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
-    }
-    // If we have styles, add them to the DOM
-    if (dataStyles.innerHTML.length) {
-        dataStyles.setAttribute('data-styles', '');
-        // Apply CSP nonce to the style tag if it exists
-        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
-        if (nonce != null) {
-            dataStyles.setAttribute('nonce', nonce);
+    // Only bother generating CSS if we have components
+    // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
+    if (cmpTags.length > 0) {
+        // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+        if (hasSlotRelocation) {
+            dataStyles.innerHTML += SLOT_FB_CSS;
+        }
+        // Add hydration styles
+        {
+            dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+        }
+        // If we have styles, add them to the DOM
+        if (dataStyles.innerHTML.length) {
+            dataStyles.setAttribute('data-styles', '');
+            // Apply CSP nonce to the style tag if it exists
+            const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+            if (nonce != null) {
+                dataStyles.setAttribute('nonce', nonce);
+            }
+            // Insert the styles into the document head
+            // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
+            head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         }
-        // Insert the styles into the document head
-        // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
-        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -1868,7 +1874,12 @@ const getHostListenerTarget = (elm, flags) => {
     return elm;
 };
 // prettier-ignore
-const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+const hostListenerOpts = (flags) => supportsListenerOptions
+    ? ({
+        passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0,
+        capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,
+    })
+    : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 /**
  * Assigns the given value to the nonce property on the runtime platform object.
  * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
@@ -1879,8 +1890,19 @@ const setNonce = (nonce) => (plt.$nonce$ = nonce);
 /**
  * A WeakMap mapping runtime component references to their corresponding host reference
  * instances.
+ *
+ * **Note**: If we're in an HMR context we need to store a reference to this
+ * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
+ * to {@link d.HostRef} across HMR updates.
+ *
+ * This is necessary because when HMR updates for a component are processed by
+ * the browser-side dev server client the JS bundle for that component is
+ * re-fetched. Since the module containing {@link hostRefs} is included in
+ * that bundle, if we do not store a reference to it the new iteration of the
+ * component will not have access to the previous hostRef map, leading to a
+ * bug where the new version of the component cannot properly initialize.
  */
-const hostRefs = /*@__PURE__*/ new WeakMap();
+const hostRefs = new WeakMap();
 /**
  * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
  *
@@ -1960,6 +1982,18 @@ const plt = {
     rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
+const supportsListenerOptions = /*@__PURE__*/ (() => {
+    let supportsListenerOptions = false;
+    try {
+        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
+            get() {
+                supportsListenerOptions = true;
+            },
+        }));
+    }
+    catch (e) { }
+    return supportsListenerOptions;
+})();
 const promiseResolve = (v) => Promise.resolve(v);
 const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
         try {

package/dist/cjs/index.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const cart = require('./cart-cfa5d5fd.js');
-require('./zonosStore-10d1d6ff.js');
-require('./index-0dcccc22.js');
-require('./localization-4746acf7.js');
-require('./isDarkColor-fc8c294a.js');
-require('./getBorderRadius-c3c63ee6.js');
+const cart = require('./cart-f31374d4.js');
+require('./zonosStore-b88b5671.js');
+require('./index-3ead02fe.js');
+require('./localization-d43e1540.js');
+require('./isDarkColor-5eda1323.js');
+require('./getBorderRadius-cd7ef574.js');
 
 
 

package/dist/cjs/{isDarkColor-fc8c294a.js → isDarkColor-5eda1323.js}

@@ -1,8 +1,10 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-10d1d6ff.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
 
-var tinycolor = zonosStore.createCommonjsModule(function (module, exports) {
+var tinycolor$1 = {exports: {}};
+
+(function (module, exports) {
 // This file is autogenerated. It's used to publish CJS to npm.
 (function (global, factory) {
   module.exports = factory() ;
@@ -1188,7 +1190,9 @@ var tinycolor = zonosStore.createCommonjsModule(function (module, exports) {
   return tinycolor;
 
 }));
-});
+}(tinycolor$1));
+
+const tinycolor = tinycolor$1.exports;
 
 const isDarkColor = (color) => {
     return tinycolor(color).isDark();

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0dcccc22.js');
+const index = require('./index-3ead02fe.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/{localization-4746acf7.js → localization-d43e1540.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-10d1d6ff.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
 
 const stringsArabic = {
     'Above de minimis threshold for': {

package/dist/cjs/{submitGtag-ca175427.js → submitGtag-42f29b3a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-10d1d6ff.js');
-const localization = require('./localization-4746acf7.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
+const localization = require('./localization-d43e1540.js');
 
 const checkoutBreakpoint = 890;
 const isCheckoutMobile = (isMobile) => {

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0dcccc22.js');
-const cart = require('./cart-cfa5d5fd.js');
-const localization = require('./localization-4746acf7.js');
-require('./zonosStore-10d1d6ff.js');
-require('./isDarkColor-fc8c294a.js');
-require('./getBorderRadius-c3c63ee6.js');
+const index = require('./index-3ead02fe.js');
+const cart = require('./cart-f31374d4.js');
+const localization = require('./localization-d43e1540.js');
+require('./zonosStore-b88b5671.js');
+require('./isDarkColor-5eda1323.js');
+require('./getBorderRadius-cd7ef574.js');
 
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
+const ZonosAddressStyle0 = zonosAddressCss;
 
 const ZonosAddress = class {
     constructor(hostRef) {
@@ -72,16 +73,17 @@ const ZonosAddress = 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, { class: "zonos--address zonos--elements" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { class: "zonos--address-component" })));
+        return (index.h(index.Host, { key: '47fa225123b7c944732b018fbb374bcb6da0f4ca', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '4d0d9d4f9c09d6b2f29bc6a44164a0ef8db0acc9', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: 'd279ba97287890e489230f9e449a344db76556f2', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "stripe": ["watchInitStripe"]
     }; }
 };
-ZonosAddress.style = zonosAddressCss;
+ZonosAddress.style = ZonosAddressStyle0;
 
 const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
+const ZonosLinkAuthenticationStyle0 = zonosLinkAuthenticationCss;
 
 const ZonosLinkAuthentication = class {
     constructor(hostRef) {
@@ -116,14 +118,14 @@ const ZonosLinkAuthentication = 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, { class: "zonos--link-authentication zonos--elements" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { class: "zonos--link-authentication-component" })));
+        return (index.h(index.Host, { key: '48ec92ca8a1500c3b8e85222c3df069c32074e72', class: "zonos--link-authentication zonos--elements" }, index.h("zonos-text", { key: '9060fab8ab9f88157ee6951af830e106e6ff9509', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: 'dac7e96170d15faa8c1013fb298ae86e2ce99f0b', class: "zonos--link-authentication-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "stripe": ["watchInitStripe"]
     }; }
 };
-ZonosLinkAuthentication.style = zonosLinkAuthenticationCss;
+ZonosLinkAuthentication.style = ZonosLinkAuthenticationStyle0;
 
 exports.zonos_address = ZonosAddress;
 exports.zonos_link_authentication = ZonosLinkAuthentication;

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0dcccc22.js');
-const zonosStore = require('./zonosStore-10d1d6ff.js');
+const index = require('./index-3ead02fe.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosBadgeCss = ":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 .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
+const ZonosBadgeStyle0 = zonosBadgeCss;
 
 const ZonosBadge = class {
     constructor(hostRef) {
@@ -20,18 +21,18 @@ const ZonosBadge = class {
         this.class = '';
     }
     render() {
-        return (index.h(index.Host, { class: classes.classes(['zonos--elements zonos--badge', this.class]), style: {
+        return (index.h(index.Host, { key: '2d111e91f403ef5c03f742f5dabe9491623be91d', class: classes.classes(['zonos--elements zonos--badge', this.class]), style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { class: classes.classes([
+            } }, index.h("div", { key: 'e6debe091b732b857f180cee19bec4be435ea524', class: classes.classes([
                 'zonos--badge-content',
                 this.color,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, index.h("zonos-text", null, index.h("slot", null)))));
+            ]) }, this.icon, index.h("zonos-text", { key: 'e92c97d77fa5ce279059953f7d7fbc5a0030aa5d' }, index.h("slot", { key: 'c93852c3225ba57dd26c26300254f348e349f9ad' })))));
     }
 };
-ZonosBadge.style = zonosBadgeCss;
+ZonosBadge.style = ZonosBadgeStyle0;
 
 exports.zonos_badge = ZonosBadge;

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0dcccc22.js');
-const zonosStore = require('./zonosStore-10d1d6ff.js');
+const index = require('./index-3ead02fe.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
 const classes = require('./classes-b7918f56.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(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-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:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";
+const ZonosBannerStyle0 = zonosBannerCss;
 
 const ZonosBanner = class {
     constructor(hostRef) {
@@ -73,6 +74,6 @@ const ZonosBanner = class {
         }
     }
 };
-ZonosBanner.style = zonosBannerCss;
+ZonosBanner.style = ZonosBannerStyle0;
 
 exports.zonos_banner = ZonosBanner;

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0dcccc22.js');
-const zonosStore = require('./zonosStore-10d1d6ff.js');
+const index = require('./index-3ead02fe.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-c3c63ee6.js');
+const getBorderRadius = require('./getBorderRadius-cd7ef574.js');
 const isColorVariable = require('./isColorVariable-41cacd82.js');
-const isDarkColor = require('./isDarkColor-fc8c294a.js');
+const isDarkColor = require('./isDarkColor-5eda1323.js');
 
 /**
  * Get theme for button text based on background color
@@ -24,6 +24,7 @@ const getButtonTheme = (overrideBackground) => {
 };
 
 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}: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(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}: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(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-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:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}: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(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-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(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-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(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
+const ZonosButtonStyle0 = zonosButtonCss;
 
 const ZonosButton = class {
     constructor(hostRef) {
@@ -78,12 +79,12 @@ const ZonosButton = class {
             ? getButtonTheme(overrideBackground)
             : undefined;
         const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
-        return (index.h(index.Host, { class: classes.classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (index.h(index.Host, { key: 'af41b1035e5ea776d47580647a65997bb41730e3', class: classes.classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("button", { class: classes.classes([
+            } }, index.h("button", { key: 'af3fdc9aa0440cf5a7e49c4c0c76826d7a700d32', class: classes.classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -96,15 +97,16 @@ const ZonosButton = class {
                 this.backgroundColor &&
                     this.variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: '32b6a079ba98ab9d62b5df34ddc15e4ac7a87a8e', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get watchers() { return {
         "icon": ["iconChangeHandler"]
     }; }
 };
-ZonosButton.style = zonosButtonCss;
+ZonosButton.style = ZonosButtonStyle0;
 
 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(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-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}";
+const ZonosSpinnerStyle0 = zonosSpinnerCss;
 
 const ZonosSpinner = class {
     constructor(hostRef) {
@@ -122,7 +124,7 @@ const ZonosSpinner = class {
     }
     get el() { return index.getElement(this); }
 };
-ZonosSpinner.style = zonosSpinnerCss;
+ZonosSpinner.style = ZonosSpinnerStyle0;
 
 exports.zonos_button = ZonosButton;
 exports.zonos_spinner = ZonosSpinner;

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0dcccc22.js');
-const zonosStore = require('./zonosStore-10d1d6ff.js');
+const index = require('./index-3ead02fe.js');
+const zonosStore = require('./zonosStore-b88b5671.js');
 const classes = require('./classes-b7918f56.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(--amino-border);border-radius:var(--amino-radius-6);padding:var(--spacing, var(--amino-space-24));text-align:left}:host .styled-card hr{margin-left:calc(var(--spacing, var(--amino-space-24)) * -1);margin-right:calc(var(--spacing, var(--amino-space-24)) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, var(--amino-space-24));border-bottom:var(--amino-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, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));border-top:var(--amino-border);background:var(--amino-surface-color-secondary);margin-top:var(--spacing, var(--amino-space-24));border-bottom-left-radius:var(--amino-radius-8);border-bottom-right-radius:var(--amino-radius-8);height:var(--footerHeight)}";
+const ZonosCardStyle0 = zonosCardCss;
 
 const ZonosCard = class {
     constructor(hostRef) {
@@ -20,17 +21,18 @@ const ZonosCard = class {
         this.spacing = '24px';
     }
     render() {
-        return (index.h(index.Host, { style: {
+        return (index.h(index.Host, { key: 'f2f7929742862b9806ddc568155e7cddf954252e', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { class: classes.classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (index.h("header", { class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { type: "subheader" }, this.label), index.h("h-stack", { spacing: 8 }, this.actions))), index.h("slot", null), (this.footerActions || this.footerContent) && (index.h("footer", { class: "card-footer", style: {
+            } }, index.h("div", { key: 'ce3568d7ded3cfb9acb0f4ff3d4184a17b88f33b', class: classes.classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (index.h("header", { class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { type: "subheader" }, this.label), index.h("h-stack", { spacing: 8 }, this.actions))), index.h("slot", { key: '3cc9f896df1899da73eab80dfbb3aac3a0046956' }), (this.footerActions || this.footerContent) && (index.h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, index.h("div", null, this.footerContent), index.h("h-stack", { spacing: 8 }, this.footerActions))))));
     }
 };
-ZonosCard.style = zonosCardCss;
+ZonosCard.style = ZonosCardStyle0;
 
 const zonosVStackCss = ":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 .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
+const ZonosVStackStyle0 = zonosVStackCss;
 
 const VStack = class {
     constructor(hostRef) {
@@ -39,12 +41,12 @@ const VStack = class {
         this.class = '';
     }
     render() {
-        return (index.h(index.Host, { style: {
+        return (index.h(index.Host, { key: 'd363ffeb2bbae49e7318b26ab56b4b8871844daf', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { class: classes.classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", null))));
+            } }, index.h("div", { key: '5d9fa5ae9ffca787ca42f38e4ec75fedc24823f9', class: classes.classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'e1d6fef3378b92c18c2c43ec8616e8c733a4290c' }))));
     }
 };
-VStack.style = zonosVStackCss;
+VStack.style = ZonosVStackStyle0;
 
 exports.zonos_card = ZonosCard;
 exports.zonos_v_stack = VStack;