@zonos/elements 1.2.2 → 1.2.4-alpha.1

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

@@ -2,30 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9542d2e7.js');
+const index = require('./index-20cb112f.js');
+const zonosStore = require('./zonosStore-a0fa5b77.js');
 
-const zonosIconCss = ":host{font-family:Inter;display:block}: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(--font-family, Inter), Inter;display:block}: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 ZonosIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.autoHeight = false;
-    this.color = 'gray-1200';
-    this.content = undefined;
-    this.size = 24;
-  }
-  render() {
-    if (!this.content || !this.el.shadowRoot) {
-      return null;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.autoHeight = false;
+        this.color = 'gray-1200';
+        this.content = undefined;
+        this.size = 24;
     }
-    this.el.shadowRoot.innerHTML = this.content;
-    return (index.h(index.Host, { class: "zonos--elements", style: {
-        '--color': `var(--amino-${this.color})`,
-        '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
-        '--width': `${this.size}px`,
-      } }));
-  }
-  get el() { return index.getElement(this); }
+    render() {
+        if (!this.content || !this.el.shadowRoot) {
+            return null;
+        }
+        this.el.shadowRoot.innerHTML = this.content;
+        return (index.h(index.Host, { class: "zonos--elements", style: {
+                '--color': `var(--amino-${this.color})`,
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+                '--width': `${this.size}px`,
+            } }));
+    }
+    get el() { return index.getElement(this); }
 };
 ZonosIcon.style = zonosIconCss;
 

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

@@ -2,67 +2,70 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9542d2e7.js');
+const index = require('./index-20cb112f.js');
+const zonosStore = require('./zonosStore-a0fa5b77.js');
 const classes = require('./classes-b7918f56.js');
 
-const zonosNotificationCss = ":host{font-family:Inter;display:block}: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-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";
+const zonosNotificationCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";
 
 const ZonosNotification = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.class = '';
-    this.notificationArray = [];
-  }
-  /**
-   * Show a notification
-   */
-  async showNotification(notification) {
-    // random generate id
-    const id = `id-${Math.random().toString(36).substring(2, 9)}`;
-    const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
-    this.notificationArray = [...this.notificationArray, notificationItem];
-    setTimeout(() => {
-      this.updateTransitionClass({
-        id,
-        transitionClass: 'show',
-      });
-    }, 50);
-    setTimeout(() => {
-      this.removeNotification(id);
-    }, notificationItem.timeout);
-  }
-  updateTransitionClass({ id, transitionClass, }) {
-    this.notificationArray = this.notificationArray.map(notification => {
-      if (notification.id === id) {
-        return Object.assign(Object.assign({}, notification), { transitionClass });
-      }
-      return notification;
-    });
-  }
-  /**
-   * Remove a notification
-   */
-  removeNotification(id) {
-    // add hide class before removing the item 100ms to trigger animation
-    this.updateTransitionClass({
-      id,
-      transitionClass: '',
-    });
-    setTimeout(() => {
-      this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
-    }, 300);
-  }
-  render() {
-    return (index.h(index.Host, { class: classes.classes(['zonos--elements zonos--notification', this.class]) }, index.h("div", { class: "zonos--notification-items" }, this.notificationArray.map(notification => {
-      return (index.h("div", { "aria-hidden": "true", class: classes.classes([
-          'zonos--notification-item',
-          notification.type,
-          notification.transitionClass,
-        ]), key: notification.id, onClick: () => {
-          this.removeNotification(notification.id);
-        } }, index.h("zonos-text", { color: "gray-0" }, notification.message)));
-    }))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.class = '';
+        this.notificationArray = [];
+    }
+    /**
+     * Show a notification
+     */
+    async showNotification(notification) {
+        // random generate id
+        const id = `id-${Math.random().toString(36).substring(2, 9)}`;
+        const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
+        this.notificationArray = [...this.notificationArray, notificationItem];
+        setTimeout(() => {
+            this.updateTransitionClass({
+                id,
+                transitionClass: 'show',
+            });
+        }, 50);
+        setTimeout(() => {
+            this.removeNotification(id);
+        }, notificationItem.timeout);
+    }
+    updateTransitionClass({ id, transitionClass, }) {
+        this.notificationArray = this.notificationArray.map(notification => {
+            if (notification.id === id) {
+                return Object.assign(Object.assign({}, notification), { transitionClass });
+            }
+            return notification;
+        });
+    }
+    /**
+     * Remove a notification
+     */
+    removeNotification(id) {
+        // add hide class before removing the item 100ms to trigger animation
+        this.updateTransitionClass({
+            id,
+            transitionClass: '',
+        });
+        setTimeout(() => {
+            this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
+        }, 300);
+    }
+    render() {
+        return (index.h(index.Host, { class: classes.classes(['zonos--elements zonos--notification', this.class]), style: {
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            return (index.h("div", { "aria-hidden": "true", class: classes.classes([
+                    'zonos--notification-item',
+                    notification.type,
+                    notification.transitionClass,
+                ]), key: notification.id, onClick: () => {
+                    this.removeNotification(notification.id);
+                } }, index.h("zonos-text", { color: "gray-0" }, notification.message)));
+        }))));
+    }
 };
 ZonosNotification.style = zonosNotificationCss;
 

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

@@ -2,56 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9542d2e7.js');
-const cart = require('./cart-d4b52ae8.js');
-require('./zonosStore-a430ec5b.js');
-require('./localization-d7fe7290.js');
-require('./isDarkColor-f3446afd.js');
-require('./getBorderRadius-fdd605c6.js');
+const index = require('./index-20cb112f.js');
+const cart = require('./cart-4ddc2af5.js');
+require('./zonosStore-a0fa5b77.js');
+require('./localization-11360fed.js');
+require('./isDarkColor-261fcf3d.js');
+require('./getBorderRadius-a97a5f75.js');
 
-const zonosPaymentCss = ".sc-zonos-payment-h{font-family:Inter;display:block}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:var(--amino-space-16)}";
+const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:var(--amino-space-16)}";
 
 const ZonosPayment = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.titleText = undefined;
-    this.stripe = cart.stripeStore.stripe;
-    this.stripeElements = cart.stripeStore.stripeElements;
-  }
-  watchInitStripe() {
-    if (!this.stripeElements) {
-      return;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.titleText = undefined;
+        this.stripe = cart.stripeStore.stripe;
+        this.stripeElements = cart.stripeStore.stripeElements;
     }
-    // Create and mount the Authentication Element in ${type} mode
-    const paymentElement = cart.stripeStore.stripePaymentElement ||
-      this.stripeElements.create('payment', {
-        layout: 'tabs',
-      });
-    const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
-    if (!paymentElementContainer) {
-      // eslint-disable-next-line no-console
-      console.error('Cannot find container element for paymentElement');
-      return;
+    watchInitStripe() {
+        if (!this.stripeElements) {
+            return;
+        }
+        // Create and mount the Authentication Element in ${type} mode
+        const paymentElement = cart.stripeStore.stripePaymentElement ||
+            this.stripeElements.create('payment', {
+                layout: 'tabs',
+            });
+        const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
+        if (!paymentElementContainer) {
+            // eslint-disable-next-line no-console
+            console.error('Cannot find container element for paymentElement');
+            return;
+        }
+        paymentElement.mount(paymentElementContainer);
+        paymentElement.on('change', event => {
+            cart.stripeStore.stripePaymentEventData = event;
+        });
+        cart.stripeStore.stripePaymentElement = paymentElement;
     }
-    paymentElement.mount(paymentElementContainer);
-    paymentElement.on('change', event => {
-      cart.stripeStore.stripePaymentEventData = event;
-    });
-    cart.stripeStore.stripePaymentElement = paymentElement;
-  }
-  componentDidLoad() {
-    // @Watch doesn't get trigger on initial load
-    this.watchInitStripe();
-  }
-  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--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { class: "zonos--payment-component" })));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "stripeElements": ["watchInitStripe"],
-    "stripe": ["watchInitStripe"]
-  }; }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        this.watchInitStripe();
+    }
+    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--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { class: "zonos--payment-component" })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "stripeElements": ["watchInitStripe"],
+        "stripe": ["watchInitStripe"]
+    }; }
 };
 ZonosPayment.style = zonosPaymentCss;
 

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -2,50 +2,50 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9542d2e7.js');
-const zonosStore = require('./zonosStore-a430ec5b.js');
+const index = require('./index-20cb112f.js');
+const zonosStore = require('./zonosStore-a0fa5b77.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-fdd605c6.js');
-const isColorVariable = require('./isColorVariable-c1ed7303.js');
+const getBorderRadius = require('./getBorderRadius-a97a5f75.js');
+const isColorVariable = require('./isColorVariable-41cacd82.js');
 
-const zonosShippingRichRadioCss = ":host{font-family:Inter;display:block}: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-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;align-items:center;gap:var(--amino-space-16);cursor:pointer;border:1px solid var(--amino-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--amino-radius-10));border-top-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--amino-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
+const zonosShippingRichRadioCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;align-items:center;gap:var(--amino-space-16);cursor:pointer;border:1px solid var(--amino-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--amino-radius-10));border-top-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--amino-radius-10));border-bottom-left-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--amino-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
 
 const ZonosShippingRichRadio = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.radioSelected = index.createEvent(this, "radioSelected", 7);
-    this.handleRichRadioSelect = (item) => {
-      var _a;
-      this.selectedItem = item;
-      (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
-    };
-    this.getRadioItemStyleVariables = () => {
-      const usedColor = this.borderColor || zonosStore.zonosStore.appearance.colorSecondary;
-      const secondaryColor = isColorVariable.isColorVariable(usedColor)
-        ? `var(--amino-${usedColor})`
-        : usedColor;
-      return {
-        '--border-radius': getBorderRadius.getBorderRadius(this.borderStyle),
-        '--selected-border-color': secondaryColor || 'unset',
-      };
-    };
-    this.items = undefined;
-    this.borderColor = undefined;
-    this.borderStyle = undefined;
-    this.theme = undefined;
-    this.selectedItem = null;
-  }
-  render() {
-    var _a;
-    return (index.h(index.Host, { class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: this.getRadioItemStyleVariables() }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
-      var _a;
-      const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
-      return (index.h("div", { "aria-hidden": "true", class: classes.classes([
-          'zonos--shipping-rich-radio-item',
-          selected && 'selected',
-        ]), onClick: () => this.handleRichRadioSelect(item) }, index.h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), index.h("div", { class: "zonos--shipping-info" }, index.h("div", { class: "zonos--shipping-detail" }, index.h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (index.h("div", { class: "zonos--sub-detail" }, item.sublabel && (index.h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (index.h("zonos-text", { color: "gray-400" }, item.caption))))), index.h("zonos-text", { type: "semiBoldLabel" }, item.price))));
-    })));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.radioSelected = index.createEvent(this, "radioSelected", 7);
+        this.handleRichRadioSelect = (item) => {
+            var _a;
+            this.selectedItem = item;
+            (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
+        };
+        this.getRadioItemStyleVariables = () => {
+            const usedColor = this.borderColor || zonosStore.zonosStore.appearance.colorSecondary;
+            const secondaryColor = isColorVariable.isColorVariable(usedColor)
+                ? `var(--amino-${usedColor})`
+                : usedColor;
+            return {
+                '--border-radius': getBorderRadius.getBorderRadius(this.borderStyle),
+                '--selected-border-color': secondaryColor || 'unset',
+            };
+        };
+        this.items = undefined;
+        this.borderColor = undefined;
+        this.borderStyle = undefined;
+        this.theme = undefined;
+        this.selectedItem = null;
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStore.zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+            var _a;
+            const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
+            return (index.h("div", { "aria-hidden": "true", class: classes.classes([
+                    'zonos--shipping-rich-radio-item',
+                    selected && 'selected',
+                ]), onClick: () => this.handleRichRadioSelect(item) }, index.h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), index.h("div", { class: "zonos--shipping-info" }, index.h("div", { class: "zonos--shipping-detail" }, index.h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (index.h("div", { class: "zonos--sub-detail" }, item.sublabel && (index.h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (index.h("zonos-text", { color: "gray-400" }, item.caption))))), index.h("zonos-text", { type: "semiBoldLabel" }, item.price))));
+        })));
+    }
 };
 ZonosShippingRichRadio.style = zonosShippingRichRadioCss;