@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/components/zonos-payment2.js

@@ -2,76 +2,76 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { s as stripeStore } from './cart.js';
 import { d as defineCustomElement$1 } from './zonos-text2.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;white-space:normal}.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 = /*@__PURE__*/ proxyCustomElement(class ZonosPayment extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.titleText = undefined;
-    this.stripe = stripeStore.stripe;
-    this.stripeElements = stripeStore.stripeElements;
-  }
-  watchInitStripe() {
-    if (!this.stripeElements) {
-      return;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.titleText = undefined;
+        this.stripe = stripeStore.stripe;
+        this.stripeElements = stripeStore.stripeElements;
     }
-    // Create and mount the Authentication Element in ${type} mode
-    const paymentElement = 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 = 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 => {
+            stripeStore.stripePaymentEventData = event;
+        });
+        stripeStore.stripePaymentElement = paymentElement;
     }
-    paymentElement.mount(paymentElementContainer);
-    paymentElement.on('change', event => {
-      stripeStore.stripePaymentEventData = event;
-    });
-    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 (h(Host, { class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { class: "zonos--payment-component" })));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "stripeElements": ["watchInitStripe"],
-    "stripe": ["watchInitStripe"]
-  }; }
-  static get style() { return zonosPaymentCss; }
+    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 (h(Host, { class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { class: "zonos--payment-component" })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "stripeElements": ["watchInitStripe"],
+        "stripe": ["watchInitStripe"]
+    }; }
+    static get style() { return zonosPaymentCss; }
 }, [2, "zonos-payment", {
-    "titleText": [1, "title-text"],
-    "stripe": [32],
-    "stripeElements": [32]
-  }, undefined, {
-    "stripeElements": ["watchInitStripe"],
-    "stripe": ["watchInitStripe"]
-  }]);
+        "titleText": [1, "title-text"],
+        "stripe": [32],
+        "stripeElements": [32]
+    }, undefined, {
+        "stripeElements": ["watchInitStripe"],
+        "stripe": ["watchInitStripe"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-payment", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-payment":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosPayment);
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-payment", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-payment":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosPayment);
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosPayment as Z, defineCustomElement as d };

package/dist/components/zonos-review.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosReview extends Components.ZonosReview, HTMLElement {}
 export const ZonosReview: {
-  prototype: ZonosReview;
-  new (): ZonosReview;
+    prototype: ZonosReview;
+    new (): ZonosReview;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-review2.js

@@ -9,88 +9,88 @@ import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const checkoutBreakpoint = 890;
 const isCheckoutMobile = (isMobile) => {
-  return isMobile || window.innerWidth < checkoutBreakpoint;
+    return isMobile || window.innerWidth < checkoutBreakpoint;
 };
 
 const ChevronDownIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
 const ChevronUpIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosReviewCss = ":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 .zonos--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8)}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
+const zonosReviewCss = ":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 .zonos--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8)}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
 
 const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.mobile = false;
-    this.collapsed = false;
-    this.isMobile = false;
-  }
-  handleWindowResize() {
-    this.isMobile = isCheckoutMobile(this.mobile);
-  }
-  componentWillLoad() {
-    this.isMobile = isCheckoutMobile(this.mobile);
-  }
-  render() {
-    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
-    const totalTextType = this.isMobile
-      ? 'boldSubheader'
-      : 'secondaryPageHeader';
-    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
-    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
-    const renderCollapseIcon = () => {
-      // only display the collapse icon if the component is being rendered with mobile styles
-      if (!this.isMobile) {
-        return null;
-      }
-      if (!this.collapsed) {
-        return (h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
-      }
-      return (h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
-    };
-    return (h(Host, { class: classes([
-        'zonos--review zonos--elements',
-        this.isMobile && 'mobile',
-      ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { color: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
-      amount: 
-      // show total without taxes when step is shipping, show total with taxes when step is payment
-      cartStore.step === 'shipping'
-        ? totalWithoutTaxes
-        : cartStore.total,
-      currency: cartStore.currency,
-    })))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get style() { return zonosReviewCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.mobile = false;
+        this.collapsed = false;
+        this.isMobile = false;
+    }
+    handleWindowResize() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+    }
+    componentWillLoad() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+    }
+    render() {
+        const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
+        const totalTextType = this.isMobile
+            ? 'boldSubheader'
+            : 'secondaryPageHeader';
+        const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
+        const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+        const renderCollapseIcon = () => {
+            // only display the collapse icon if the component is being rendered with mobile styles
+            if (!this.isMobile) {
+                return null;
+            }
+            if (!this.collapsed) {
+                return (h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
+            }
+            return (h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
+        };
+        return (h(Host, { class: classes([
+                'zonos--review zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { color: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
+            amount: 
+            // show total without taxes when step is shipping, show total with taxes when step is payment
+            cartStore.step === 'shipping'
+                ? totalWithoutTaxes
+                : cartStore.total,
+            currency: cartStore.currency,
+        })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return zonosReviewCss; }
 }, [1, "zonos-review", {
-    "mobile": [4],
-    "collapsed": [4],
-    "isMobile": [32]
-  }, [[9, "resize", "handleWindowResize"]]]);
+        "mobile": [4],
+        "collapsed": [4],
+        "isMobile": [32]
+    }, [[9, "resize", "handleWindowResize"]]]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-review", "zonos-icon", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-review":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosReview);
-      }
-      break;
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-review", "zonos-icon", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-review":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosReview);
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosReview as Z, defineCustomElement as d, isCheckoutMobile as i };

package/dist/components/zonos-shipping-rich-radio.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosShippingRichRadio extends Components.ZonosShippingRichRadio, HTMLElement {}
 export const ZonosShippingRichRadio: {
-  prototype: ZonosShippingRichRadio;
-  new (): ZonosShippingRichRadio;
+    prototype: ZonosShippingRichRadio;
+    new (): ZonosShippingRichRadio;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-shipping-rich-radio2.js

@@ -1,75 +1,75 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { z as zonosStore } from './zonosStore.js';
+import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isColorVariable } from './isColorVariable.js';
 import { d as defineCustomElement$1 } from './zonos-text2.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));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 zonosShippingRichRadioCss = ":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-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 = /*@__PURE__*/ proxyCustomElement(class ZonosShippingRichRadio extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.radioSelected = 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.appearance.colorSecondary;
-      const secondaryColor = isColorVariable(usedColor)
-        ? `var(--amino-${usedColor})`
-        : usedColor;
-      return {
-        '--border-radius': 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 (h(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 (h("div", { "aria-hidden": "true", class: classes([
-          'zonos--shipping-rich-radio-item',
-          selected && 'selected',
-        ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { color: "gray-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
-    })));
-  }
-  static get style() { return zonosShippingRichRadioCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.radioSelected = 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.appearance.colorSecondary;
+            const secondaryColor = isColorVariable(usedColor)
+                ? `var(--amino-${usedColor})`
+                : usedColor;
+            return {
+                '--border-radius': 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 (h(Host, { class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': 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 (h("div", { "aria-hidden": "true", class: classes([
+                    'zonos--shipping-rich-radio-item',
+                    selected && 'selected',
+                ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { color: "gray-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
+        })));
+    }
+    static get style() { return zonosShippingRichRadioCss; }
 }, [1, "zonos-shipping-rich-radio", {
-    "items": [16],
-    "borderColor": [1, "border-color"],
-    "borderStyle": [1, "border-style"],
-    "theme": [1],
-    "selectedItem": [32]
-  }]);
+        "items": [16],
+        "borderColor": [1, "border-color"],
+        "borderStyle": [1, "border-style"],
+        "theme": [1],
+        "selectedItem": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-shipping-rich-radio", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-shipping-rich-radio":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosShippingRichRadio);
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-shipping-rich-radio", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-shipping-rich-radio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosShippingRichRadio);
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosShippingRichRadio as Z, defineCustomElement as d };

package/dist/components/zonos-shipping.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosShipping extends Components.ZonosShipping, HTMLElement {}
 export const ZonosShipping: {
-  prototype: ZonosShipping;
-  new (): ZonosShipping;
+    prototype: ZonosShipping;
+    new (): ZonosShipping;
 };
 /**
  * Used to define this component and all nested components recursively.