@zonos/elements 1.0.16

package/dist/components/zonos-review2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-review2.js","mappings":";;;;;;;;;AAAO,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAEzB,gBAAgB,GAAG,CAAC,QAAiB;EAChD,OAAO,QAAQ,IAAI,MAAM,CAAC,UAAU,GAAG,kBAAkB,CAAC;AAC5D;;;;;;ACJA,MAAM,cAAc,GAAG,0uBAA0uB;;MCoBpvB,WAAW;;;;;kBAII,KAAK;qBAOF,KAAK;oBAEL,KAAK;;EAGlC,kBAAkB;IAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAC/C;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAC/C;EAED,MAAM;IACJ,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,eAAe,CAAC;IACxE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ;QAC/B,eAAe;QACf,qBAAqB,CAAC;IAE1B,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;IAChE,MAAM,iBAAiB,GAAG,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC;IACpE,MAAM,kBAAkB,GAAG;;MAEzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,OAAO,IAAI,CAAC;OACb;MAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,QACE,kBAAY,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,eAAe,GAAe,EACrE;OACH;MACD,QACE,kBAAY,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,aAAa,GAAe,EACnE;KACH,CAAC;IACF,QACE,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC;QACb,+BAA+B;QAC/B,IAAI,CAAC,QAAQ,IAAI,QAAQ;OAC1B,CAAC,IAEF,WAAK,KAAK,EAAC,cAAc,IACvB,kBAAY,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,IACnD,SAAS,CAAC,KAAK,CAAC,OAAG,UAAU,CAAC,gBAAgB,CACpC,EACZ,kBAAkB,EAAE,CACjB,EACN,WAAK,KAAK,EAAC,kBAAkB,IAC3B,kBAAY,IAAI,EAAE,aAAa,IAC5B,cAAc,CAAC;MACd,MAAM;;MAEJ,SAAS,CAAC,IAAI,KAAK,UAAU;UACzB,iBAAiB;UACjB,SAAS,CAAC,KAAK;MACrB,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC,CACS,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/utils/checkout/isCheckoutMobile.ts","src/components/checkout/zonos-checkout/zonos-review/zonos-review.scss?tag=zonos-review&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-review/zonos-review.tsx"],"sourcesContent":["export const checkoutBreakpoint = 890;\n\nexport const isCheckoutMobile = (isMobile: boolean) => {\n  return isMobile || window.innerWidth < checkoutBreakpoint;\n};\n",":host {\n  .zonos--total-pay {\n    margin: $amino-space-16 0 $amino-space-32;\n  }\n}\n\n:host(.mobile) {\n  @include checkout-review-mobile;\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { translate } from 'src/components/store/translationStore';\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { isCheckoutMobile } from 'src/components/utils/checkout/isCheckoutMobile';\nimport { classes } from 'src/components/utils/classes';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ChevronDownIcon from './assets/ChevronDownIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ChevronUpIcon from './assets/ChevronUpIcon.svg';\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-review.scss',\n  tag: 'zonos-review',\n})\nexport class ZonosReview {\n  /**\n   * Whether or not the component is being rendered with mobile styles\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * Whether or not to show the collapse icon\n   * This is controled from the collapsed state of the zonos-collapse component\n   * to show the collapse icon\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() isMobile: boolean = false;\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n  }\n\n  componentWillLoad() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n  }\n\n  render() {\n    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';\n    const totalTextType = this.isMobile\n      ? 'boldSubheader'\n      : 'secondaryPageHeader';\n\n    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';\n    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;\n    const renderCollapseIcon = () => {\n      // only display the collapse icon if the component is being rendered with mobile styles\n      if (!this.isMobile) {\n        return null;\n      }\n\n      if (!this.collapsed) {\n        return (\n          <zonos-icon color=\"gray-1200\" content={ChevronDownIcon}></zonos-icon>\n        );\n      }\n      return (\n        <zonos-icon color=\"gray-1200\" content={ChevronUpIcon}></zonos-icon>\n      );\n    };\n    return (\n      <Host\n        class={classes([\n          'zonos--review zonos--elements',\n          this.isMobile && 'mobile',\n        ])}\n      >\n        <div class=\"zonos--title\">\n          <zonos-text color={titleTextColor} type={titleTextType}>\n            {translate('Pay')} {zonosStore.organizationName}\n          </zonos-text>\n          {renderCollapseIcon()}\n        </div>\n        <div class=\"zonos--total-pay\">\n          <zonos-text type={totalTextType}>\n            {formatCurrency({\n              amount:\n                // show total without taxes when step is shipping, show total with taxes when step is payment\n                cartStore.step === 'shipping'\n                  ? totalWithoutTaxes\n                  : cartStore.total,\n              currency: cartStore.currency,\n            })}\n          </zonos-text>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,8 @@
+import { Z as ZonosShippingRichRadio$1, d as defineCustomElement$1 } from './zonos-shipping-rich-radio2.js';
+
+const ZonosShippingRichRadio = ZonosShippingRichRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosShippingRichRadio, defineCustomElement };
+
+//# sourceMappingURL=zonos-shipping-rich-radio.js.map

package/dist/components/zonos-shipping-rich-radio.js.map

@@ -0,0 +1 @@
+{"file":"zonos-shipping-rich-radio.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -0,0 +1,77 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { 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-left-radius:var(--border-radius, var(--amino-radius-10));border-bottom-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item.selected{border-color:var(--selected-border-color, var(--amino-blue-600))}: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", { 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]
+  }]);
+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;
+  } });
+}
+
+export { ZonosShippingRichRadio as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-shipping-rich-radio2.js.map

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

@@ -0,0 +1 @@
+{"file":"zonos-shipping-rich-radio2.js","mappings":";;;;;;;AAAA,MAAM,yBAAyB,GAAG,26CAA26C;;MC6Bh8C,sBAAsB;;;;;;IA+BzB,0BAAqB,GAAG,CAAC,IAA2B;;MAC1D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;MACzB,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC,CAAC;IAEM,+BAA0B,GAAG;MACnC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,IAAI,UAAU,CAAC,UAAU,CAAC,cAAc,CAAC;MAC3E,MAAM,cAAc,GAAG,eAAe,CAAC,SAAS,CAAC;UAC7C,eAAe,SAAS,GAAG;UAC3B,SAAS,CAAC;MAEd,OAAO;QACL,iBAAiB,EAAE,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;QACpD,yBAAyB,EAAE,cAAc,IAAI,OAAO;OACrD,CAAC;KACH,CAAC;;;;;wBAtBoD,IAAI;;EAwB1D,MAAM;;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAC,4CAA4C,gBACtC,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,IAEvC,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CAAC,IAAI;;MACnB,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,MAAK,IAAI,CAAC,KAAK,CAAC;MACzD,QACE,0BACc,MAAM,EAClB,KAAK,EAAE,OAAO,CAAC;UACb,iCAAiC;UACjC,QAAQ,IAAI,UAAU;SACvB,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAE/C,aACE,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAC,4BAA4B,EACjC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACF,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,wBAAwB,IACjC,kBAAY,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAc,EACjD,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,MAC7B,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,QAAQ,KACZ,kBAAY,KAAK,EAAC,UAAU,IACzB,IAAI,CAAC,QAAQ,CACH,CACd,EACA,IAAI,CAAC,OAAO,KACX,kBAAY,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,CAAc,CACzD,CACG,CACP,CACG,EACN,kBAAY,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAc,CACtD,CACF,EACN;KACH,CAAC,CACG,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.scss?tag=zonos-shipping-rich-radio&encapsulation=shadow","src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx"],"sourcesContent":["$selected-border-color: var(--selected-border-color, $amino-blue-600);\n$border-radius: var(--border-radius, $amino-radius-10);\n:host {\n  display: flex;\n  flex-direction: column;\n  input {\n    margin: 0;\n    accent-color: $selected-border-color;\n  }\n  .zonos--shipping-rich-radio-item {\n    display: flex;\n    flex: 1;\n    padding: $amino-space-16;\n    align-items: center;\n    gap: $amino-space-16;\n    cursor: pointer;\n    border: 1px solid $amino-gray-200;\n    &:first-child {\n      border-top-left-radius: $border-radius;\n      border-top-right-radius: $border-radius;\n    }\n    &:last-child {\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: $border-radius;\n    }\n\n    &.selected {\n      border-color: $selected-border-color;\n    }\n  }\n  .zonos--shipping-info {\n    display: flex;\n    align-items: center;\n    flex: 1;\n  }\n  .zonos--shipping-detail {\n    flex: 1;\n  }\n  .zonos--sub-detail {\n    display: inline-flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport type { Color, ElementsUiStyle, ElementsUiTheme } from 'src/types';\n\nexport type ShippingRichRadioItem = {\n  caption?: string;\n  label: string;\n  price: string;\n  sublabel?: string;\n  value: string | number;\n};\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-shipping-rich-radio.scss',\n  tag: 'zonos-shipping-rich-radio',\n})\nexport class ZonosShippingRichRadio {\n  /**\n   * List of items to display\n   */\n  @Prop() items!: ShippingRichRadioItem[];\n\n  /**\n   * Override border color of the radio item\n   */\n  @Prop() borderColor?: Color | (string & { _placeholder?: never });\n\n  /**\n   * Override border color of the radio item\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Theme of the radio item\n   */\n  @Prop() theme?: ElementsUiTheme;\n  /**\n   * Selected item\n   * @default {null|firstItem}\n   */\n  @State() selectedItem: ShippingRichRadioItem | null = null;\n\n  /**\n   * Event emitted when an item is selected\n   */\n  @Event() radioSelected?: EventEmitter<ShippingRichRadioItem>;\n\n  private handleRichRadioSelect = (item: ShippingRichRadioItem) => {\n    this.selectedItem = item;\n    this.radioSelected?.emit(item);\n  };\n\n  private getRadioItemStyleVariables = () => {\n    const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;\n    const secondaryColor = isColorVariable(usedColor)\n      ? `var(--amino-${usedColor})`\n      : usedColor;\n\n    return {\n      '--border-radius': getBorderRadius(this.borderStyle),\n      '--selected-border-color': secondaryColor || 'unset',\n    };\n  };\n\n  render() {\n    return (\n      <Host\n        class=\"zonos--shipping-rich-radio zonos--elements\"\n        data-theme={this.theme}\n        style={this.getRadioItemStyleVariables()}\n      >\n        {this.items?.map(item => {\n          const selected = this.selectedItem?.value === item.value;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={classes([\n                'zonos--shipping-rich-radio-item',\n                selected && 'selected',\n              ])}\n              onClick={() => this.handleRichRadioSelect(item)}\n            >\n              <input\n                checked={selected}\n                class=\"zonos--shipping-rich-radio-input\"\n                name=\"zonos--shipping-rich-radio\"\n                type=\"radio\"\n                value={item.value}\n              />\n              <div class=\"zonos--shipping-info\">\n                <div class=\"zonos--shipping-detail\">\n                  <zonos-text type=\"label\">{item.label}</zonos-text>\n                  {(item.sublabel || item.caption) && (\n                    <div class=\"zonos--sub-detail\">\n                      {item.sublabel && (\n                        <zonos-text color=\"gray-800\">\n                          {item.sublabel}\n                        </zonos-text>\n                      )}\n                      {item.caption && (\n                        <zonos-text color=\"gray-400\">{item.caption}</zonos-text>\n                      )}\n                    </div>\n                  )}\n                </div>\n                <zonos-text type=\"semiBoldLabel\">{item.price}</zonos-text>\n              </div>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/zonos-shipping.js

@@ -0,0 +1,8 @@
+import { Z as ZonosShipping$1, d as defineCustomElement$1 } from './zonos-shipping2.js';
+
+const ZonosShipping = ZonosShipping$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosShipping, defineCustomElement };
+
+//# sourceMappingURL=zonos-shipping.js.map

package/dist/components/zonos-shipping.js.map

@@ -0,0 +1 @@
+{"file":"zonos-shipping.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-shipping2.js

@@ -0,0 +1,136 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as cartStore, m as cartStoreUpdateSelectedShippingOption, n as cartStoreGetShippingTransitInfo, s as stripeStore } from './stripe.js';
+import { t as translate } from './localization.js';
+import { f as formatCurrency } from './formatCurrency.js';
+import { s as submitGtag } from './submitGtag.js';
+import { d as defineCustomElement$5 } from './zonos-banner2.js';
+import { d as defineCustomElement$4 } from './zonos-button2.js';
+import { d as defineCustomElement$3 } from './zonos-shipping-rich-radio2.js';
+import { d as defineCustomElement$2 } from './zonos-spinner2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:Inter;display:block}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding-right:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
+
+const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.continueClicked = createEvent(this, "continueClicked", 7);
+    this.handleRadioSelected = async (e) => {
+      var _a;
+      this.selectedShippingMethod = e.detail;
+      if (!this.selectedShippingMethod) {
+        return;
+      }
+      const selectedShippingOption = ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.find(item => { var _a; return item.id === ((_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value); })) || null;
+      if (!selectedShippingOption) {
+        return;
+      }
+      // save selected shipping option to store
+      const updateStatus = await cartStoreUpdateSelectedShippingOption(selectedShippingOption);
+      if (!updateStatus) {
+        return;
+      }
+      this.disabled = false;
+    };
+    /**
+     * handler for continue button click
+     */
+    this.continueClickHandler = () => {
+      this.continueClicked.emit();
+    };
+    this.continueLoading = false;
+    this.submitBtnColor = undefined;
+    this.submitBtnType = undefined;
+    this.selectedShippingMethod = null;
+    this.disabled = true;
+  }
+  watchFormComplete() {
+    if (!this.disabled) {
+      // submit google tag when the form is complete
+      submitGtag('zonos-checkout-shipping-info');
+    }
+  }
+  render() {
+    var _a, _b;
+    const shipToCountry = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+    const serviceLevels = (_b = cartStore.shippingData) === null || _b === void 0 ? void 0 : _b.flatMap((item) => {
+      var _a, _b;
+      const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(item);
+      const sublabel = expectedDate
+        ? `${translate('Expected delivery')} ${expectedDate}`
+        : '';
+      const caption = minTransit && maxTransit
+        ? `(${minTransit}-${maxTransit} ${translate('business days')})`
+        : '';
+      const shippingAmount = ((_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
+      return {
+        caption,
+        label: item.displayName,
+        price: formatCurrency({
+          amount: shippingAmount,
+          currency: cartStore.currency,
+        }),
+        sublabel,
+        value: item.id,
+      };
+    });
+    return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), cartStore.isSelectedShippingAboveDeminimis && (h("zonos-banner", { intent: "warning" }, translate('Above de minimis threshold for'), " ", shipToCountry, ".", ' ', translate('Duties and taxes will be applied to items and shipping.')))), h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+      // use primary type when on mobile mode
+      variant: this.submitBtnType }, translate('Go to payment'))));
+  }
+  static get watchers() { return {
+    "disabled": ["watchFormComplete"]
+  }; }
+  static get style() { return zonosShippingCss; }
+}, [2, "zonos-shipping", {
+    "continueLoading": [4, "continue-loading"],
+    "submitBtnColor": [1, "submit-btn-color"],
+    "submitBtnType": [1, "submit-btn-type"],
+    "selectedShippingMethod": [32],
+    "disabled": [32]
+  }, undefined, {
+    "disabled": ["watchFormComplete"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-shipping", "zonos-banner", "zonos-button", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-shipping":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosShipping);
+      }
+      break;
+    case "zonos-banner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "zonos-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "zonos-shipping-rich-radio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "zonos-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosShipping as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-shipping2.js.map

package/dist/components/zonos-shipping2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-shipping2.js","mappings":"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","names":[],"sources":["src/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.scss?tag=zonos-shipping&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  .zonos--title {\n    margin-bottom: $amino-space-24;\n  }\n  .zonos--shipping-method-title {\n    margin-bottom: $amino-space-16;\n  }\n\n  .zonos-shipping-rich-radio {\n    margin-bottom: $amino-space-24;\n  }\n\n  .zonos--group {\n    margin-bottom: $amino-space-20;\n    overflow: auto;\n    padding-right: 5px;\n\n    @include zonos--scrollbar;\n  }\n\n  zonos-button {\n    width: 100%;\n  }\n  zonos-banner {\n    margin-top: $amino-space-24;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport {\n  cartStore,\n  cartStoreGetShippingTransitInfo,\n  cartStoreUpdateSelectedShippingOption,\n} from 'src/components/store/checkout/cart';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ShippingRichRadioItem } from 'src/types';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  scoped: true,\n  styleUrl: 'zonos-shipping.scss',\n  tag: 'zonos-shipping',\n})\nexport class ZonosShipping {\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() continueClicked!: EventEmitter<void>;\n\n  @State() selectedShippingMethod: ShippingRichRadioItem | null = null;\n\n  /**\n   * Whether or not the continue button is disabled\n   * @default true\n   */\n  @State() disabled: boolean = true;\n\n  @Watch('disabled')\n  watchFormComplete() {\n    if (!this.disabled) {\n      // submit google tag when the form is complete\n      submitGtag('zonos-checkout-shipping-info');\n    }\n  }\n\n  private handleRadioSelected = async (\n    e: CustomEvent<ShippingRichRadioItem>,\n  ) => {\n    this.selectedShippingMethod = e.detail;\n    if (!this.selectedShippingMethod) {\n      return;\n    }\n\n    const selectedShippingOption =\n      cartStore.shippingData?.find(\n        item => item.id === this.selectedShippingMethod?.value,\n      ) || null;\n    if (!selectedShippingOption) {\n      return;\n    }\n\n    // save selected shipping option to store\n    const updateStatus = await cartStoreUpdateSelectedShippingOption(\n      selectedShippingOption,\n    );\n    if (!updateStatus) {\n      return;\n    }\n\n    this.disabled = false;\n  };\n\n  /**\n   * handler for continue button click\n   */\n  private continueClickHandler = () => {\n    this.continueClicked.emit();\n  };\n\n  render() {\n    const shipToCountry =\n      stripeStore.stripeAddressEventData?.value.address.country;\n\n    const serviceLevels = cartStore.shippingData?.flatMap(\n      (item): ShippingRichRadioItem => {\n        const { expectedDate, maxTransit, minTransit } =\n          cartStoreGetShippingTransitInfo(item);\n        const sublabel = expectedDate\n          ? `${translate('Expected delivery')} ${expectedDate}`\n          : '';\n        const caption =\n          minTransit && maxTransit\n            ? `(${minTransit}-${maxTransit} ${translate('business days')})`\n            : '';\n        const shippingAmount =\n          cartStore.landedCostData?.find(\n            landedCostItem =>\n              landedCostItem.landedCost?.shipmentRating.id === item.id,\n          )?.subtotals.shipping || 0;\n        return {\n          caption,\n          label: item.displayName,\n          price: formatCurrency({\n            amount: shippingAmount,\n            currency: cartStore.currency,\n          }),\n          sublabel,\n          value: item.id,\n        };\n      },\n    );\n    return (\n      <Host class=\"zonos--shipping zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Shipping information')}\n          </zonos-text>\n          <zonos-text class=\"zonos--shipping-method-title\" type=\"semiBoldLabel\">\n            {translate('Shipping method')}\n          </zonos-text>\n          {!serviceLevels?.length ? (\n            <zonos-banner\n              bannerTitle=\"No shipping methods found - try editing your address or contacting support if the error persists\"\n              intent=\"error\"\n            ></zonos-banner>\n          ) : (\n            <zonos-shipping-rich-radio\n              items={serviceLevels || []}\n              onRadioSelected={e => this.handleRadioSelected(e)}\n            ></zonos-shipping-rich-radio>\n          )}\n\n          {cartStore.isSelectedShippingAboveDeminimis && (\n            <zonos-banner intent=\"warning\">\n              {translate('Above de minimis threshold for')} {shipToCountry}.{' '}\n              {translate(\n                'Duties and taxes will be applied to items and shipping.',\n              )}\n            </zonos-banner>\n          )}\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          is-disabled={this.disabled}\n          loading={this.continueLoading}\n          onClick={() => this.continueClickHandler()}\n          size=\"lg\"\n          // use primary type when on mobile mode\n          variant={this.submitBtnType}\n        >\n          {translate('Go to payment')}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosSpinner extends Components.ZonosSpinner, HTMLElement {}
+export const ZonosSpinner: {
+  prototype: ZonosSpinner;
+  new (): ZonosSpinner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-spinner.js

@@ -0,0 +1,8 @@
+import { Z as ZonosSpinner$1, d as defineCustomElement$1 } from './zonos-spinner2.js';
+
+const ZonosSpinner = ZonosSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosSpinner, defineCustomElement };
+
+//# sourceMappingURL=zonos-spinner.js.map

package/dist/components/zonos-spinner.js.map

@@ -0,0 +1 @@
+{"file":"zonos-spinner.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-spinner2.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classes } from './classes.js';
+
+const zonosSpinnerCss = ":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{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 ZonosSpinner = /*@__PURE__*/ proxyCustomElement(class ZonosSpinner extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 32;
+    this.color = undefined;
+  }
+  render() {
+    if (!this.el.shadowRoot) {
+      return null;
+    }
+    return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
+        '--size': `${this.size}px`,
+      } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
+  }
+  get el() { return this; }
+  static get style() { return zonosSpinnerCss; }
+}, [1, "zonos-spinner", {
+    "size": [2],
+    "color": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosSpinner);
+      }
+      break;
+  } });
+}
+
+export { ZonosSpinner as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-spinner2.js.map

package/dist/components/zonos-spinner2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-spinner2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,60DAA60D;;MCkBx1D,YAAY;;;;;gBAKA,EAAE;;;EASzB,MAAM;IACJ,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;MACvB,OAAO,IAAI,CAAC;KACb;IAED,QACE,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAC/C,KAAK,EAAE;QACL,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;OAC3B,IAED,WAAK,OAAO,EAAC,WAAW,IACtB,cACE,KAAK,EAAC,OAAO,EACb,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,IAAI,kBACO,GAAG,GAChB,EACF,cACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,IAAI,kBACO,GAAG,GAChB,CACE,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/zonos-spinner/zonos-spinner.scss?tag=zonos-spinner&encapsulation=shadow","src/components/common/zonos-spinner/zonos-spinner.tsx"],"sourcesContent":["$size: var(--size);\n\n:host {\n  position: relative;\n  overflow: hidden;\n  width: $size;\n  height: $size;\n  display: inline-flex;\n  svg {\n    width: $size;\n    height: $size;\n    stroke: $amino-blue-600;\n    animation: rotate 2s linear infinite;\n  }\n\n  circle.track {\n    stroke: $amino-gray-200;\n  }\n\n  &.black {\n    stroke: $amino-spinner-stroke-black;\n\n    circle.track {\n      stroke: $amino-spinner-track-black;\n    }\n  }\n  &.white {\n    stroke: $amino-spinner-stroke-white;\n\n    circle.track {\n      stroke: $amino-spinner-track-white;\n    }\n  }\n  &.info {\n    stroke: $amino-blue-600;\n    circle.track {\n      stroke: $amino-blue-100;\n    }\n  }\n  &.success {\n    stroke: $amino-green-600;\n    circle.track {\n      stroke: $amino-green-100;\n    }\n  }\n  &.danger {\n    stroke: $amino-red-600;\n    circle.track {\n      stroke: $amino-red-100;\n    }\n  }\n  &.warning {\n    stroke: $amino-orange-600;\n    circle.track {\n      stroke: $amino-orange-100;\n    }\n  }\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n\n  circle:not(.track) {\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\n\nexport type SpinnerColor =\n  | 'primary'\n  | 'info'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'black'\n  | 'white';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-spinner.scss',\n  tag: 'zonos-spinner',\n})\nexport class ZonosSpinner {\n  /**\n   * The size of the spinner\n   * @default 32\n   */\n  @Prop() size: number = 32;\n\n  /**\n   * Color of the spinner\n   */\n  @Prop() color?: SpinnerColor;\n\n  @Element() el!: HTMLZonosSpinnerElement;\n\n  render() {\n    if (!this.el.shadowRoot) {\n      return null;\n    }\n\n    return (\n      <Host\n        class={classes(['zonos--elements', this.color])}\n        style={{\n          '--size': `${this.size}px`,\n        }}\n      >\n        <svg viewBox=\"0 0 50 50\">\n          <circle\n            class=\"track\"\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            id=\"loading-spinner-circle\"\n            r=\"20\"\n            stroke-width=\"5\"\n          />\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            id=\"loading-spinner-circle\"\n            r=\"20\"\n            stroke-width=\"5\"\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosText extends Components.ZonosText, HTMLElement {}
+export const ZonosText: {
+  prototype: ZonosText;
+  new (): ZonosText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-text.js

@@ -0,0 +1,8 @@
+import { Z as ZonosText$1, d as defineCustomElement$1 } from './zonos-text2.js';
+
+const ZonosText = ZonosText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosText, defineCustomElement };
+
+//# sourceMappingURL=zonos-text.js.map

package/dist/components/zonos-text.js.map

@@ -0,0 +1 @@
+{"file":"zonos-text.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-text2.js

@@ -0,0 +1,179 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classes } from './classes.js';
+
+const textOptions = {
+  pageHeader: {
+    label: 'Page Header (3XL) · 34px (2.125rem)',
+    size: '3xl',
+    tag: 'h2',
+    weight: 900,
+  },
+  secondaryPageHeader: {
+    label: 'Secondary Page Header (3XL) • 34px, 500 "Medium"',
+    size: '3xl',
+    tag: 'h2',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  header: {
+    label: 'Header (2XL) · 28px (1.75rem)',
+    size: '2xl',
+    tag: 'h3',
+    weight: 700,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  descriptionHeader: {
+    label: 'Description Header (2XL) · 28px (1.75rem)',
+    size: '2xl',
+    tag: 'h3',
+    weight: 700,
+  },
+  title: {
+    label: 'Title (XL) • 22px (1.375rem)',
+    size: 'xl',
+    tag: 'h4',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  boldSubheader: {
+    label: 'Bold Subheader (L) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 700,
+  },
+  semiBoldSubheader: {
+    label: 'Semi Bold Subheader (L / H4) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 600,
+  },
+  subheader: {
+    label: 'Subheader (L) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  boldLabel: {
+    label: 'Bold Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 700,
+  },
+  semiBoldLabel: {
+    label: 'Semi Bold Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  label: {
+    label: 'Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  body: {
+    label: 'Body (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 400,
+  },
+  smallHeader: {
+    label: 'Small header (S) • 12px (.75rem)',
+    size: 's',
+    tag: 'span',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  caption: {
+    label: 'Caption (S) • 12px (.75rem)',
+    size: 's',
+    tag: 'span',
+    weight: 400,
+  },
+  hintText: {
+    label: 'Hint text (XS) • 10px (.625rem)',
+    size: 'xs',
+    tag: 'span',
+    weight: 400,
+  },
+};
+
+const zonosTextCss = ":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{color:var(--color)}:host(.zonos--text-size-3xl)>*,:host(.zonos--text-size-3xl){font-size:var(--amino-font-size-3xl)}:host(.zonos--text-size-2xl)>*,:host(.zonos--text-size-2xl){font-size:var(--amino-font-size-2xl)}:host(.zonos--text-size-xl)>*,:host(.zonos--text-size-xl){font-size:var(--amino-font-size-xl)}:host(.zonos--text-size-l)>*,:host(.zonos--text-size-l){font-size:var(--amino-font-size-l)}:host(.zonos--text-size-base)>*,:host(.zonos--text-size-base){font-size:var(--amino-font-size-base)}:host(.zonos--text-size-s)>*,:host(.zonos--text-size-s){font-size:var(--amino-font-size-s)}:host(.zonos--text-size-xs)>*,:host(.zonos--text-size-xs){font-size:var(--amino-font-size-xs)}:host(.zonos--text-weight-900)>*,:host(.zonos--text-weight-900){font-weight:900}:host(.zonos--text-weight-700)>*,:host(.zonos--text-weight-700){font-weight:700}:host(.zonos--text-weight-600)>*,:host(.zonos--text-weight-600){font-weight:600}:host(.zonos--text-weight-500)>*,:host(.zonos--text-weight-500){font-weight:500}:host(.zonos--text-weight-400)>*,:host(.zonos--text-weight-400){font-weight:400}";
+
+const ZonosText = /*@__PURE__*/ proxyCustomElement(class ZonosText extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.class = '';
+    this.color = 'gray-1200';
+    this.size = undefined;
+    this.type = 'body';
+    this.weight = undefined;
+    this.content = undefined;
+    this.ready = false;
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      this.ready = true;
+    }, 100);
+  }
+  render() {
+    const { size: defaultSize, tag: defaultTag, weight: defaultWeight, } = textOptions.body;
+    const { size, tag, weight } = textOptions[this.type];
+    const textSize = this.size || size || defaultSize;
+    const textWeight = this.weight || weight || defaultWeight;
+    const textTag = tag || defaultTag;
+    const renderText = () => {
+      switch (textTag) {
+        case 'h2':
+          return (h("h2", null, h("slot", null)));
+        case 'h3':
+          return (h("h3", null, h("slot", null)));
+        case 'h4':
+          return (h("h4", null, h("slot", null)));
+        case 'h5':
+          return (h("h5", null, h("slot", null)));
+        case 'span':
+        default:
+          return (h("span", null, h("slot", null)));
+      }
+    };
+    return (h(Host, { class: classes([
+        `zonos--text-size-${textSize}`,
+        `zonos--text-weight-${textWeight}`,
+        this.class,
+      ]), style: {
+        '--color': this.color ? `var(--amino-${this.color})` : '',
+      } }, renderText()));
+  }
+  static get style() { return zonosTextCss; }
+}, [1, "zonos-text", {
+    "class": [1],
+    "color": [1],
+    "size": [1],
+    "type": [1],
+    "weight": [2],
+    "content": [1],
+    "ready": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosText);
+      }
+      break;
+  } });
+}
+
+export { ZonosText as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-text2.js.map

package/dist/components/zonos-text2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-text2.js","mappings":"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","names":[],"sources":["src/types/styles/Text.ts","src/components/common/zonos-text/zonos-text.scss?tag=zonos-text&encapsulation=shadow","src/components/common/zonos-text/zonos-text.tsx"],"sourcesContent":["export const textOptions = {\n  pageHeader: {\n    label: 'Page Header (3XL) · 34px (2.125rem)',\n    size: '3xl',\n    tag: 'h2',\n    weight: 900,\n  },\n  secondaryPageHeader: {\n    label: 'Secondary Page Header (3XL) • 34px, 500 \"Medium\"',\n    size: '3xl',\n    tag: 'h2',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  header: {\n    label: 'Header (2XL) · 28px (1.75rem)',\n    size: '2xl',\n    tag: 'h3',\n    weight: 700,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  descriptionHeader: {\n    label: 'Description Header (2XL) · 28px (1.75rem)',\n    size: '2xl',\n    tag: 'h3',\n    weight: 700,\n  },\n  title: {\n    label: 'Title (XL) • 22px (1.375rem)',\n    size: 'xl',\n    tag: 'h4',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  boldSubheader: {\n    label: 'Bold Subheader (L) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 700,\n  },\n  semiBoldSubheader: {\n    label: 'Semi Bold Subheader (L / H4) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 600,\n  },\n  subheader: {\n    label: 'Subheader (L) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  boldLabel: {\n    label: 'Bold Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 700,\n  },\n  semiBoldLabel: {\n    label: 'Semi Bold Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  label: {\n    label: 'Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  body: {\n    label: 'Body (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 400,\n  },\n  smallHeader: {\n    label: 'Small header (S) • 12px (.75rem)',\n    size: 's',\n    tag: 'span',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  caption: {\n    label: 'Caption (S) • 12px (.75rem)',\n    size: 's',\n    tag: 'span',\n    weight: 400,\n  },\n  hintText: {\n    label: 'Hint text (XS) • 10px (.625rem)',\n    size: 'xs',\n    tag: 'span',\n    weight: 400,\n  },\n} as const;\n\ntype TextOptions = typeof textOptions;\nexport type Size = TextOptions[keyof TextOptions]['size'];\nexport type Type = keyof TextOptions;\nexport type FontWeight = TextOptions[keyof TextOptions]['weight'] | 800;\n","$color: var(--color);\n\n$sizes: (\n  '3xl': $amino-font-size-3xl,\n  '2xl': $amino-font-size-2xl,\n  'xl': $amino-font-size-xl,\n  'l': $amino-font-size-l,\n  'base': $amino-font-size-base,\n  's': $amino-font-size-s,\n  'xs': $amino-font-size-xs,\n);\n\n$weights: (\n  '900': 900,\n  '700': 700,\n  '600': 600,\n  '500': 500,\n  '400': 400,\n);\n\n:host {\n  color: var(--color);\n}\n\n@each $_size, $_value in $sizes {\n  :host(.zonos--text-size-#{$_size}) {\n    > *,\n    & {\n      font-size: $_value;\n    }\n  }\n}\n@each $_weight, $_value in $weights {\n  :host(.zonos--text-weight-#{$_weight}) {\n    > *,\n    & {\n      font-weight: $_value;\n    }\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { Color } from 'src/types/styles/Color';\nimport {\n  type FontWeight,\n  type Size,\n  type Type,\n  textOptions,\n} from 'src/types/styles/Text';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-text.scss',\n  tag: 'zonos-text',\n})\nexport class ZonosText {\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n  /**\n   * The icon element to display\n   */\n  @Prop() color: Color = 'gray-1200';\n\n  /**\n   * The size of the text\n   */\n  @Prop() size?: Size;\n\n  /**\n   * Type of the text to display\n   */\n  @Prop() type: Type = 'body';\n\n  /**\n   * The weight of the text\n   */\n  @Prop() weight?: FontWeight;\n\n  /**\n   * The tag to use for the text\n   */\n  @Prop() content?: string;\n\n  /**\n   * Whether or not the component is ready\n   */\n  @State() ready: boolean = false;\n\n  componentDidRender() {\n    setTimeout(() => {\n      this.ready = true;\n    }, 100);\n  }\n\n  render() {\n    const {\n      size: defaultSize,\n      tag: defaultTag,\n      weight: defaultWeight,\n    } = textOptions.body;\n    const { size, tag, weight } = textOptions[this.type];\n\n    const textSize = this.size || size || defaultSize;\n    const textWeight = this.weight || weight || defaultWeight;\n    const textTag = tag || defaultTag;\n\n    const renderText = () => {\n      switch (textTag) {\n        case 'h2':\n          return (\n            <h2>\n              <slot></slot>\n            </h2>\n          );\n        case 'h3':\n          return (\n            <h3>\n              <slot></slot>\n            </h3>\n          );\n        case 'h4':\n          return (\n            <h4>\n              <slot></slot>\n            </h4>\n          );\n        case 'h5':\n          return (\n            <h5>\n              <slot></slot>\n            </h5>\n          );\n        case 'span':\n        default:\n          return (\n            <span>\n              <slot></slot>\n            </span>\n          );\n      }\n    };\n\n    return (\n      <Host\n        class={classes([\n          `zonos--text-size-${textSize}`,\n          `zonos--text-weight-${textWeight}`,\n          this.class,\n        ])}\n        style={{\n          '--color': this.color ? `var(--amino-${this.color})` : '',\n        }}\n      >\n        {renderText()}\n      </Host>\n    );\n  }\n}\n"],"version":3}