@zonos/elements 1.0.16

package/dist/collection/components/common/zonos-collapse/zonos-collapse.css

@@ -0,0 +1,43 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  transition: all 0.3s ease-in-out;
+  overflow: hidden;
+}
+:host div {
+  position: relative;
+}
+:host iframe {
+  width: 0;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  border: 0;
+}

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js

@@ -0,0 +1,88 @@
+import { h } from "@stencil/core";
+import { Host } from "@stencil/core/internal";
+export class ZonosCollapse {
+  constructor() {
+    this.collapsed = false;
+    this.collapseSize = 0;
+    this.height = this.el.scrollHeight;
+  }
+  getElementHeight() {
+    const fullHeight = `${this.height}px`;
+    const collapsedHeight = `${this.collapseSize}px`;
+    return this.collapsed ? collapsedHeight : fullHeight;
+  }
+  componentDidLoad() {
+    this.height = this.el.scrollHeight;
+  }
+  componentDidRender() {
+    var _a, _b, _c;
+    (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+      this.height = this.el.scrollHeight;
+    });
+  }
+  render() {
+    this.height = this.el.scrollHeight;
+    return (h(Host, { class: 'zonos--elements zonos--collapse', style: {
+        height: this.getElementHeight(),
+      } }, h("div", null, h("iframe", { class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", null))));
+  }
+  static get is() { return "zonos-collapse"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-collapse.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-collapse.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "collapsed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Collapsed state of the element"
+        },
+        "attribute": "collapsed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "collapseSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Collapsed size when collapsed"
+        },
+        "attribute": "collapse-size",
+        "reflect": false,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "height": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=zonos-collapse.js.map

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-collapse.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-collapse/zonos-collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAO9D,MAAM,OAAO,aAAa;;qBAIK,KAAK;wBAIH,CAAC;kBAIN,IAAI,CAAC,EAAE,CAAC,YAAY;;EAEtC,gBAAgB;IACtB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;IACtC,MAAM,eAAe,GAAG,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC;IACjD,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC;EACvD,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;EACrC,CAAC;EAED,kBAAkB;;IAChB,MAAA,MAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CACd,aAAa,CAAC,QAAQ,CAAC,0CACvB,aAAa,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;MAC/C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;IACrC,CAAC,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACJ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;IACnC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,iCAAiC,EACxC,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE;OAChC;MAED;QACE,cACE,KAAK,EAAC,wBAAwB,EAC9B,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,iCAAiC,GAC/B;QACV,eAAQ,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Element, Host, State } from '@stencil/core/internal';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-collapse.scss',\n  tag: 'zonos-collapse',\n})\nexport class ZonosCollapse {\n  /**\n   * Collapsed state of the element\n   */\n  @Prop() collapsed: boolean = false;\n  /**\n   * Collapsed size when collapsed\n   */\n  @Prop() collapseSize: number = 0;\n\n  @Element() el!: HTMLZonosCollapseElement;\n\n  @State() height: number = this.el.scrollHeight;\n\n  private getElementHeight() {\n    const fullHeight = `${this.height}px`;\n    const collapsedHeight = `${this.collapseSize}px`;\n    return this.collapsed ? collapsedHeight : fullHeight;\n  }\n\n  componentDidLoad() {\n    this.height = this.el.scrollHeight;\n  }\n\n  componentDidRender() {\n    this.el.shadowRoot\n      ?.querySelector('iframe')\n      ?.contentWindow?.addEventListener('resize', () => {\n        this.height = this.el.scrollHeight;\n      });\n  }\n\n  render() {\n    this.height = this.el.scrollHeight;\n    return (\n      <Host\n        class={'zonos--elements zonos--collapse'}\n        style={{\n          height: this.getElementHeight(),\n        }}\n      >\n        <div>\n          <iframe\n            class=\"height-change-listener\"\n            tabindex=\"-1\"\n            title=\"collapse-height-change-listener\"\n          ></iframe>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-country-flag/zonos-country-flag.css

@@ -0,0 +1,48 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-flex;
+}
+:host .flag-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+:host .flag-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}

package/dist/collection/components/common/zonos-country-flag/zonos-country-flag.js

@@ -0,0 +1,106 @@
+import { h, Host } from "@stencil/core";
+import { localizationStore } from "../../store/hello/localization";
+import { classes } from "../../utils/classes";
+const FLAG_URL = process.env.NEXT_PUBLIC_FLAG_URL;
+export class ZonosCountryFlag {
+  constructor() {
+    this.class = '';
+    this.countryCode = localizationStore.selectedCountryCode;
+    this.size = undefined;
+  }
+  render() {
+    if (!this.el.shadowRoot || !this.countryCode) {
+      return null;
+    }
+    const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;
+    return (h(Host, { class: "zonos--elements", style: this.size
+        ? {
+          height: `${this.size}px`,
+          width: `${this.size}px`,
+        }
+        : {} }, h("div", { class: classes([`flag-container`, this.class]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
+  }
+  static get is() { return "zonos-country-flag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-country-flag.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-country-flag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "class": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The class name for the flag"
+        },
+        "attribute": "class",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "countryCode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CountryCode | null",
+          "resolved": "CountryCode | null",
+          "references": {
+            "CountryCode": {
+              "location": "import",
+              "path": "src/types/generated/graphql.customer.types",
+              "id": "src/types/generated/graphql.customer.types.ts::CountryCode"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "localizationStore.selectedCountryCode"
+            }, {
+              "name": "example",
+              "text": "'US'"
+            }],
+          "text": "The country code for the flag"
+        },
+        "attribute": "country-code",
+        "reflect": false,
+        "defaultValue": "localizationStore.selectedCountryCode"
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the flag"
+        },
+        "attribute": "size",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=zonos-country-flag.js.map

package/dist/collection/components/common/zonos-country-flag/zonos-country-flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-country-flag.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-country-flag/zonos-country-flag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAGvD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC;AAOlD,MAAM,OAAO,gBAAgB;;iBAIF,EAAE;uBAQzB,iBAAiB,CAAC,mBAAmB;;;EASvC,MAAM;IACJ,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MAC5C,OAAO,IAAI,CAAC;KACb;IAED,MAAM,OAAO,GAAG,GAAG,QAAQ,IAAI,IAAI,CAAC,WAAW,MAAM,CAAC;IAEtD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAC,iBAAiB,EACvB,KAAK,EACH,IAAI,CAAC,IAAI;QACP,CAAC,CAAC;UACE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;UACxB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;SACxB;QACH,CAAC,CAAC,EAAE;MAGR,WAAK,KAAK,EAAE,OAAO,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACjD,WACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,OAAO,GAAG,EAAE,GACxC,CACH,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { classes } from 'src/components/utils/classes';\nimport type { CountryCode } from 'src/types/generated/graphql.customer.types';\n\nconst FLAG_URL = process.env.NEXT_PUBLIC_FLAG_URL;\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-country-flag.scss',\n  tag: 'zonos-country-flag',\n})\nexport class ZonosCountryFlag {\n  /**\n   * The class name for the flag\n   */\n  @Prop() class?: string = '';\n\n  /**\n   * The country code for the flag\n   * @default localizationStore.selectedCountryCode\n   * @example 'US'\n   */\n  @Prop() countryCode: CountryCode | null =\n    localizationStore.selectedCountryCode;\n\n  /**\n   * The size of the flag\n   */\n  @Prop() size?: number;\n\n  @Element() el!: HTMLZonosCountryFlagElement;\n\n  render() {\n    if (!this.el.shadowRoot || !this.countryCode) {\n      return null;\n    }\n\n    const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;\n\n    return (\n      <Host\n        class=\"zonos--elements\"\n        style={\n          this.size\n            ? {\n                height: `${this.size}px`,\n                width: `${this.size}px`,\n              }\n            : {}\n        }\n      >\n        <div class={classes([`flag-container`, this.class])}>\n          <div\n            class=\"flag-icon\"\n            style={{ backgroundImage: `url(${flagUrl})` }}\n          ></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-country-select/assets/arrowLeftBlue.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" color="var(--amino-blue-600)"><path clip-rule="evenodd" d="M9.707 16.707a1 1 0 0 1-1.414 0l-3.647-3.646a1.5 1.5 0 0 1 0-2.122l3.647-3.646a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

package/dist/collection/components/common/zonos-country-select/zonos-country-select.css

@@ -0,0 +1,76 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--country-select {
+  max-height: 60vh;
+}
+:host .zonos--country-select .zonos--country-select-header {
+  position: relative;
+  text-align: center;
+}
+:host .zonos--country-select .zonos--country-select-header .zonos--country-select-back {
+  position: absolute;
+  top: -3px;
+  left: 0px;
+}
+:host .zonos--country-select .zonos--country-select-input {
+  padding: var(--amino-space-8);
+  border-radius: var(--amino-radius-4);
+  border: var(--amino-border);
+}
+:host .zonos--country-select .zonos--country-select-country {
+  display: flex;
+  gap: var(--amino-space-16);
+  padding: var(--amino-space-8);
+  align-items: center;
+  border-radius: var(--amino-radius-4);
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  background: none;
+}
+:host .zonos--country-select .zonos--country-select-country:hover {
+  background: var(--amino-gray-100);
+}
+:host .zonos--country-select .zonos--country-select-country .zonos--hello-country-flag {
+  border-radius: var(--amino-radius-4);
+  width: 24px;
+  height: 18px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--amino-v3-shadow-medium);
+  z-index: 10;
+  justify-self: center;
+}
+@media (max-width: 768px) {
+  :host .zonos--country-select .zonos--country-select-country .zonos--hello-country-flag {
+    border-radius: var(--amino-radius-4);
+    width: 24px;
+  }
+}

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -0,0 +1,79 @@
+import { h, Host } from "@stencil/core";
+import Fuse from "fuse.js";
+import { localizationStore, localizationStoreUpdateSelectedCountryCode, } from "../../store/hello/localization";
+import { translate } from "../../store/translationStore";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ArrowLeftBlue from "../../common/zonos-country-select/assets/arrowLeftBlue.svg";
+export class ZonosCountrySelect {
+  constructor() {
+    this.countrySelected = (countryCode) => {
+      // mutate the selected country code in store
+      void localizationStoreUpdateSelectedCountryCode(countryCode);
+      this.closeCountrySelect();
+    };
+    this.handleInputChange = (event) => {
+      const input = event.target;
+      this.inputValue = input.value;
+    };
+    this.closeCountrySelect = () => { };
+    this.inputValue = '';
+  }
+  render() {
+    var _a;
+    const { selectedCountryCode, shippingZoneCountries } = localizationStore;
+    const countries = shippingZoneCountries
+      ? Object.values(shippingZoneCountries)
+      : [];
+    const fuse = new Fuse(countries, {
+      keys: ['displayName'],
+    });
+    const fuseObject = fuse.search(this.inputValue.toLowerCase());
+    const filteredCountries = this.inputValue
+      ? fuseObject.map(country => country.item)
+      : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
+    return (h(Host, { class: "zonos--elements" }, h("div", { class: "zonos--country-select" }, h("zonos-v-stack", null, h("div", { class: "zonos--country-select-header" }, h("zonos-button", { class: "zonos--country-select-back", color: "blue-600", icon: h("zonos-icon", { color: "blue-600", content: ArrowLeftBlue, size: 18 }), onClick: () => this.closeCountrySelect(), variant: "subtle" }, translate('Back')), h("zonos-text", null, shippingZoneCountries &&
+      selectedCountryCode &&
+      ((_a = shippingZoneCountries[selectedCountryCode]) === null || _a === void 0 ? void 0 : _a.displayName))), h("zonos-v-stack", { spacing: 8 }, h("input", { class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Enter country", value: this.inputValue }), h("div", null, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName))))))))));
+  }
+  static get is() { return "zonos-country-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-country-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-country-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "closeCountrySelect": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "() => {}"
+            }],
+          "text": "Function to close the country select"
+        },
+        "defaultValue": "() => {}"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "inputValue": {}
+    };
+  }
+}
+//# sourceMappingURL=zonos-country-select.js.map

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-country-select.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-country-select/zonos-country-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop, State } from '@stencil/core';\nimport Fuse from 'fuse.js';\n\nimport {\n  localizationStore,\n  localizationStoreUpdateSelectedCountryCode,\n} from 'src/components/store/hello/localization';\nimport { translate } from 'src/components/store/translationStore';\nimport type { CountryCode } from 'src/types';\n\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ArrowLeftBlue from '../../common/zonos-country-select/assets/arrowLeftBlue.svg';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-country-select.scss',\n  tag: 'zonos-country-select',\n})\nexport class ZonosCountrySelect {\n  /**\n   * Function to close the country select\n   * @default () => {}\n   */\n  @Prop() closeCountrySelect: () => void = () => {};\n\n  @State() inputValue = '';\n\n  private countrySelected = (countryCode: CountryCode) => {\n    // mutate the selected country code in store\n    void localizationStoreUpdateSelectedCountryCode(countryCode);\n\n    this.closeCountrySelect();\n  };\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputValue = input.value;\n  };\n\n  render() {\n    const { selectedCountryCode, shippingZoneCountries } = localizationStore;\n\n    const countries = shippingZoneCountries\n      ? Object.values(shippingZoneCountries)\n      : [];\n    const fuse = new Fuse(countries, {\n      keys: ['displayName'],\n    });\n    const fuseObject = fuse.search(this.inputValue.toLowerCase());\n    const filteredCountries = this.inputValue\n      ? fuseObject.map(country => country.item)\n      : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));\n\n    return (\n      <Host class=\"zonos--elements\">\n        <div class=\"zonos--country-select\">\n          <zonos-v-stack>\n            <div class=\"zonos--country-select-header\">\n              <zonos-button\n                class=\"zonos--country-select-back\"\n                color=\"blue-600\"\n                icon={\n                  <zonos-icon\n                    color=\"blue-600\"\n                    content={ArrowLeftBlue}\n                    size={18}\n                  />\n                }\n                onClick={() => this.closeCountrySelect()}\n                variant=\"subtle\"\n              >\n                {translate('Back')}\n              </zonos-button>\n              <zonos-text>\n                {shippingZoneCountries &&\n                  selectedCountryCode &&\n                  shippingZoneCountries[selectedCountryCode]?.displayName}\n              </zonos-text>\n            </div>\n\n            <zonos-v-stack spacing={8}>\n              <input\n                class=\"zonos--country-select-input\"\n                onInput={this.handleInputChange}\n                placeholder=\"Enter country\"\n                value={this.inputValue}\n              />\n\n              <div>\n                {filteredCountries.map(country => (\n                  <button\n                    class=\"zonos--country-select-country\"\n                    onClick={() => this.countrySelected(country.code)}\n                  >\n                    <zonos-country-flag\n                      class=\"zonos--hello-country-flag\"\n                      countryCode={country.code}\n                    ></zonos-country-flag>\n                    <zonos-text color=\"gray-800\">\n                      {country.displayName}\n                    </zonos-text>\n                  </button>\n                ))}\n              </div>\n            </zonos-v-stack>\n          </zonos-v-stack>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.css

@@ -0,0 +1,38 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--custom-message {
+  background: var(--amino-gray-50);
+  border-radius: var(--amino-radius-6);
+}
+:host .zonos--custom-message .zonos--flex-message {
+  display: flex;
+  align-items: center;
+  gap: var(--amino-space-8);
+}

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -0,0 +1,63 @@
+import { h, Host } from "@stencil/core";
+export class ZonosCustomMessage {
+  constructor() {
+    this.icon = '';
+    this.message = '';
+  }
+  render() {
+    return (h(Host, { class: "zonos--elements" }, h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: this.icon }), h("zonos-text", null, this.message)))));
+  }
+  static get is() { return "zonos-custom-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-custom-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-custom-message.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The custom message icon"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The custom message text"
+        },
+        "attribute": "message",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}
+//# sourceMappingURL=zonos-custom-message.js.map

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-custom-message.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-custom-message/zonos-custom-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,kBAAkB;;gBAIN,EAAE;mBAKC,EAAE;;EAE5B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB;MAC3B,kBAAY,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAC,MAAM;QACtD,WAAK,KAAK,EAAC,qBAAqB;UAC9B,kBAAY,OAAO,EAAE,IAAI,CAAC,IAAI,GAAe;UAC7C,sBAAa,IAAI,CAAC,OAAO,CAAc,CACnC,CACK,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-custom-message.scss',\n  tag: 'zonos-custom-message',\n})\nexport class ZonosCustomMessage {\n  /**\n   * The custom message icon\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * The custom message text\n   */\n  @Prop() message: string = '';\n\n  render() {\n    return (\n      <Host class=\"zonos--elements\">\n        <zonos-card class=\"zonos--custom-message\" spacing=\"12px\">\n          <div class=\"zonos--flex-message\">\n            <zonos-icon content={this.icon}></zonos-icon>\n            <zonos-text>{this.message}</zonos-text>\n          </div>\n        </zonos-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-dialog/assets/removeIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>