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

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -0,0 +1,194 @@
+import { h, Host } from "@stencil/core";
+import { cartStore, } from "../../store/checkout/cart";
+import { translate } from "../../store/translationStore";
+import { zonosStore } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getContrastColor } from "../../utils/getContrastColor";
+import { isColorVariable } from "../../utils/isColorVariable";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import TabCheckmark from "./assets/TabCheckmark.svg";
+export class ZonosCheckoutProgressTabs {
+    constructor() {
+        /**
+         * The total number of steps that's done
+         */
+        this.getTotalSuccessStep = () => {
+            // include the finish step
+            const totalSteps = 4;
+            const stepDone = Object.values(cartStore.tabItems).filter(tab => tab.isDone).length + 1;
+            return `${(stepDone / totalSteps) * 100}%`;
+        };
+        this.isTabClickable = (tabValue) => {
+            const currentTab = cartStore.tabItems[tabValue];
+            if (!currentTab) {
+                return false;
+            }
+            // clickable if the tab state is done
+            if (currentTab.isDone) {
+                return true;
+            }
+            // if any of the previous tabs are not done, the tab is not clickable
+            return Object.values(cartStore.tabItems)
+                .slice(0, currentTab.index - 1)
+                .every(tab => tab.isDone);
+        };
+        this.tabColor = null;
+        this.backgroundColor = null;
+    }
+    /**
+     * Set the tab items data. This is to be used in storybook
+     */
+    async setTabItems(tabItems) {
+        cartStore.tabItems = tabItems;
+    }
+    /**
+     * Set selected tab. Only set the tab if it's clickable
+     */
+    async setTabSelected(tabValue) {
+        if (this.isTabClickable(tabValue)) {
+            cartStore.step = tabValue;
+        }
+    }
+    render() {
+        const selectedStep = cartStore.step;
+        const labelSelectedColor = this.tabColor || zonosStore.appearance.colorSecondary;
+        // If the background color and the tab color are not contrat enough, increase the contrast of the label color
+        const contrastLabelColor = this.backgroundColor && labelSelectedColor
+            ? getContrastColor({
+                backgroundColor: isColorVariable(this.backgroundColor)
+                    ? window
+                        .getComputedStyle(this.ele)
+                        .getPropertyValue(`--amino-${this.backgroundColor.replace('--amino-', '')}`)
+                    : this.backgroundColor,
+                color: labelSelectedColor,
+            })
+            : labelSelectedColor;
+        return (h(Host, { key: 'e79dc4967096d3b6f0ac25d58f02e77f773c8e95', class: "zonos--elements", style: {
+                '--color': contrastLabelColor,
+                '--progress-percent': this.getTotalSuccessStep(),
+            } }, h("div", { key: '20e500d31c28ee0705c1999e0f258b679af9d73a', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            const isSelected = tab.value === selectedStep;
+            return (h("button", { class: classes([
+                    'zonos--tab-item',
+                    tab.value === selectedStep && 'selected',
+                    tab.isDone && 'done',
+                ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, translate(tab.label))));
+        })), h("div", { key: '129502b873f339192ef5f4c67ac8c06d533ccfca', class: "zonos--tab-progress" }, h("div", { key: '728a074d6a411b400be30929bf9a5fdc8431745d', class: "zonos--progress-bar-fill" }))));
+    }
+    static get is() { return "zonos-checkout-progress-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-checkout-progress-tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-checkout-progress-tabs.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "tabColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the tab progress bar and label, override the secondary color of the appearance settings"
+                },
+                "attribute": "tab-color",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color | (string & { _placeholder?: never }) | null",
+                    "resolved": "Color | (string & { _placeholder?: undefined; }) | null | undefined",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color of the parent that's wrapped around the tab progress bar"
+                },
+                "attribute": "background-color",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setTabItems": {
+                "complexType": {
+                    "signature": "(tabItems: TabItems) => Promise<void>",
+                    "parameters": [{
+                            "name": "tabItems",
+                            "type": "{ \"customer-info\": TabItem; shipping: TabItem; payment: TabItem; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TabItems": {
+                            "location": "import",
+                            "path": "src/components/store/checkout/cart",
+                            "id": "src/components/store/checkout/cart.ts::TabItems"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the tab items data. This is to be used in storybook",
+                    "tags": []
+                }
+            },
+            "setTabSelected": {
+                "complexType": {
+                    "signature": "(tabValue: TabItem['value']) => Promise<void>",
+                    "parameters": [{
+                            "name": "tabValue",
+                            "type": "\"customer-info\" | \"shipping\" | \"payment\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TabItem": {
+                            "location": "import",
+                            "path": "src/components/store/checkout/cart",
+                            "id": "src/components/store/checkout/cart.ts::TabItem"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set selected tab. Only set the tab if it's clickable",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "ele"; }
+}

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

@@ -42,10 +42,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: '7ac8b898feadfb4424b3b48a98135cb18994f4e0', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '032f5818dd8394b5111927907c8fa135a55fef5c', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '4a527ec319b59041196284d4d9a8f22b943a74e6' }, h("iframe", { key: '2fb51c16e13ca90561b1b1e6cab89d87e4a37a47', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '6d7849f6c35be611446b0da36d657396e5ca3122' }))));
+            } }, h("div", { key: '5ddbf406c93f37c9e23375f11dd8439934c0d2a5' }, h("iframe", { key: 'b3efa8bc198918dbb3284e8ce658ffca6249eaa8', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'ffcd123c3a046e62855a650da9972cde94a7774c' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,9 +35,9 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '2b8e15643f92ac489706aff7623b1d1efdebce70', class: "zonos--elements", style: {
+        return (h(Host, { key: '0024a7061a593cf3c92fd7f6b5916aaac3a835c9', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '06b0c7765d8144ca102c9033e74cf1edb14743ac', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'f2af99575f518acb753448f7cb1f7aecd790de9d', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '296b92c476439aace00f6817b452a3fd3e1d353d', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'd988b856392f88a66bcc3016ccf55107bda4a411', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '4376bec824141dd7d2dbfb84f465ac4a48e1d050', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: 'e6ef5d8cc13e731c94ee5ef037c02eac36d9bce6', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'f698da7688757b6728e99e0cecb21ac4ce586d30', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'd37801e6023262a582d3ecc6e3a39f505f7e82b8', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '6f053c963f5e25b5285a94070336650537bbdad3', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '3d3e180b204bf9fa0893fec7839f1d0d5c4740c1', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '73091a3267f0989e8820800054aebc75168dc5d6', class: "zonos--elements", style: {
+        return (h(Host, { key: 'b09b7025fb55c4323aaa24ccb7e410d1638bed8a', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
             } }, this.message && (h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { innerHTML: messageWithLinks }))))));
     }

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

@@ -60,6 +60,7 @@
   justify-content: center;
   z-index: 10002;
   background: white;
+  border-radius: var(--border-radius, var(--amino-radius-10));
 }
 :host .zonos--dialog-layout {
   width: 100vw;
@@ -86,7 +87,6 @@
   outline: none;
   box-shadow: var(--amino-v3-shadow-xxl);
   border: var(--amino-border);
-  overflow: hidden;
   display: flex;
   flex-direction: column;
 }

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

@@ -25,7 +25,6 @@ export class ZonosDialog {
         this.noHeader = false;
         this.noBodyPadding = false;
         this.noBorder = false;
-        this.footerRightAction = null;
         this.borderStyle = undefined;
         this.noCloseButton = false;
         this.noClickOutside = false;
@@ -48,7 +47,7 @@ export class ZonosDialog {
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: '3927d9cf0ebbd8b497a0ec42328c4392925d198a', class: classes([
+        return (h(Host, { key: 'f0aee4766d2c62f3f4feff18c99dba62ea97ca06', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -59,10 +58,10 @@ export class ZonosDialog {
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: 'df93af61bfd856db3a572cdb98f60a8dd5c5bb7d', class: "zonos--backdrop" }), h("div", { key: 'f306feb4858dff642fbfd731e5aad849a8f29941', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b914ea2e54fb2af825008ae28e235c461dce67e9', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '19219c0c8d167bbacec992ba10b1fe0f31a8b8f6', class: classes([
+            } }, h("div", { key: '42e8afd7ddc94ab9ec4951f4221e32729256694e', class: "zonos--backdrop" }), h("div", { key: '035c21c65ae5cabc12b41b6ad1684fa4dbc5b92e', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b9a3299c9fb920f9af5783506b0489122b2eae11', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'f5e5a75782ca6acd4a2c004756b800f3c2558129', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '38f9b83418dacd47cc2395f253a32ff0a6723d54' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, h("slot", { key: '3fe4ec47852e99f1dc5b6a7a84a8b918594b8b7f' })), h("slot", { key: '5515f4109274b178249c05c6e6c91fdc30ce528a', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -219,30 +218,6 @@ export class ZonosDialog {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "footerRightAction": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement | null",
-                    "resolved": "HTMLElement | null",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "null"
-                        }],
-                    "text": "The right area for the action in the footer"
-                },
-                "defaultValue": "null"
-            },
             "borderStyle": {
                 "type": "string",
                 "mutable": false,
@@ -252,8 +227,8 @@ export class ZonosDialog {
                     "references": {
                         "ElementsUiStyle": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::ElementsUiStyle"
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiStyle"
                         }
                     }
                 },

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { isColorVariable } from "../../utils/isColorVariable";
 export class ZonosIcon {
     constructor() {
         this.autoHeight = false;
@@ -11,9 +12,12 @@ export class ZonosIcon {
         if (!this.content || !this.el.shadowRoot) {
             return null;
         }
+        const iconColor = isColorVariable(this.iconColor)
+            ? `var(--amino-${this.iconColor})`
+            : this.iconColor;
         this.el.shadowRoot.innerHTML = this.content;
         return (h(Host, { class: "zonos--elements", style: {
-                '--color': `var(--amino-${this.iconColor})`,
+                '--color': iconColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
                 '--width': `${this.size}px`,
@@ -58,13 +62,13 @@ export class ZonosIcon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Color",
-                    "resolved": "\"blue-100\" | \"blue-200\" | \"blue-300\" | \"blue-400\" | \"blue-500\" | \"blue-600\" | \"blue-700\" | \"blue-800\" | \"blue-900\" | \"blue-1000\" | \"cyan-100\" | \"cyan-200\" | \"cyan-300\" | \"cyan-400\" | \"cyan-500\" | \"cyan-600\" | \"cyan-700\" | \"cyan-800\" | \"cyan-900\" | \"cyan-1000\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-1000\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-1000\" | \"purple-100\" | \"purple-200\" | \"purple-300\" | \"purple-400\" | \"purple-500\" | \"purple-600\" | \"purple-700\" | \"purple-800\" | \"purple-900\" | \"purple-1000\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-1000\" | \"gray-100\" | \"gray-200\" | \"gray-300\" | \"gray-400\" | \"gray-500\" | \"gray-600\" | \"gray-700\" | \"gray-800\" | \"gray-900\" | \"gray-1000\" | \"glass-100\" | \"glass-200\" | \"glass-300\" | \"glass-400\" | \"glass-500\" | \"glass-600\" | \"glass-700\" | \"glass-800\" | \"glass-900\" | \"glass-1000\" | \"gray-0\" | \"gray-50\" | \"glass-0\" | \"glass-50\" | \"gray-1100\" | \"gray-1200\" | \"glass-1100\" | \"glass-1200\"",
+                    "original": "Color | (string & { _placeholder?: never })",
+                    "resolved": "Color | (string & { _placeholder?: undefined; })",
                     "references": {
                         "Color": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::Color"
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::Color"
                         }
                     }
                 },

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

@@ -16,9 +16,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: 'd12676d6438941bb8d987826f68c1b72a7e02ccd', class: "zonos--elements", style: {
+        return (h(Host, { key: '25e0e2be0bbac853efa9c26c1595a1d57461a1a1', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '259eaa6a8ae682cc96c98eaaab574757285188b9', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '88bff024a5f678b00bf4edd7b2497177a986af4c', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'be1d87991dec9ac2a3b530a0cf9129b9e191781b', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: 'b9f3a630f945570a9c0058bb0367e810b7650eb0', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'b30a41cc7f4eab57f15b48ffa3f7c0ad1e695e65', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'c6826b80ece54415befc388e57baa02d56472aef', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,11 +10,11 @@ export class ZonosLogo {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: 'b93db6ec62ecaacb3ded0ab07dd2f38ed488f8d1', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: '483016f5ffe43ea7742e895b5335212da6ec1d18', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '026162477b24250e4204318fa3018b1cfd383ab5', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'aed23717de194da43d48ee7b068f3e7568c0bbb3', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -40,8 +40,8 @@ export class ZonosLogo {
                     "references": {
                         "ElementsUiTheme": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::ElementsUiTheme"
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiTheme"
                         }
                     }
                 },

package/dist/collection/components/common/zonos-select-dialog-header/zonos-select-dialog-header.js

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: 'd0882c22934d6f9635bd0b31af5703283cd0a1be', class: "zonos--elements", style: {
+        return (h(Host, { key: 'e7867deee86e4a155c21db2618eafd6f3c6cea3b', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '2e227c5bdeeeb0fa772847267007df5aea2e0824', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'c43b72c938069ff1a99a985b3b388a785f94d100', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'b1008e43ca022ca1e1b63a60ab5c347d1228396e', type: "boldLabel" }, this.label), h("zonos-button", { key: '4722586c58eac765ded4a7baeeca8eb58d44dd0a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '36babf745ea5de00c82823520134b1dfcfc9d16d' }))));
+            } }, h("zonos-v-stack", { key: 'f7aedb0f819b61da26afd53add628bcddcca5d8a', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '7ec77c24a440a5d42965f657502506c769d3098c', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'bab0ffc53edd20840438e82c0067c1eae8f13ec7', type: "boldLabel" }, this.label), h("zonos-button", { key: 'a85fc2b745b25c07bcccfe60eb1f1e722c7999c2', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: 'fe932e62edd5f679061c76a62650885d4337363c' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,11 +24,20 @@ export class ZonosShippingRichRadio {
         this.borderColor = undefined;
         this.borderStyle = undefined;
         this.theme = undefined;
+        this.initialSelectedValue = undefined;
         this.selectedItem = null;
     }
+    componentWillLoad() {
+        // Set initial selected item
+        if (this.initialSelectedValue) {
+            this.selectedItem =
+                this.items.find(item => item.value === this.initialSelectedValue) ||
+                    null;
+        }
+    }
     render() {
         var _a;
-        return (h(Host, { key: '0dc36a16b2f51816755010c46b416b8b1f4b4744', 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 => {
+        return (h(Host, { key: 'a1c2ace211e4d0b9d63a784028cc725bab7229e7', 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([
@@ -81,8 +90,8 @@ export class ZonosShippingRichRadio {
                     "references": {
                         "Color": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::Color"
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::Color"
                         }
                     }
                 },
@@ -104,8 +113,8 @@ export class ZonosShippingRichRadio {
                     "references": {
                         "ElementsUiStyle": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::ElementsUiStyle"
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiStyle"
                         }
                     }
                 },
@@ -127,8 +136,8 @@ export class ZonosShippingRichRadio {
                     "references": {
                         "ElementsUiTheme": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::ElementsUiTheme"
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiTheme"
                         }
                     }
                 },
@@ -140,6 +149,23 @@ export class ZonosShippingRichRadio {
                 },
                 "attribute": "theme",
                 "reflect": false
+            },
+            "initialSelectedValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial selected value"
+                },
+                "attribute": "initial-selected-value",
+                "reflect": false
             }
         };
     }

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
+import { isColorVariable } from "../../utils/isColorVariable";
 import { textOptions, } from "../../../types/styles/Text";
 export class ZonosText {
     constructor() {
@@ -22,6 +23,9 @@ export class ZonosText {
         const textSize = this.size || size || defaultSize;
         const textWeight = this.weight || weight || defaultWeight;
         const textTag = tag || defaultTag;
+        const actualTextColor = isColorVariable(this.textColor)
+            ? `var(--amino-${this.textColor})`
+            : this.textColor;
         const renderText = () => {
             switch (textTag) {
                 case 'h2':
@@ -41,7 +45,7 @@ export class ZonosText {
                 `zonos--text-size-${textSize}`,
                 `zonos--text-weight-${textWeight}`,
             ]), style: {
-                '--color': this.textColor ? `var(--amino-${this.textColor})` : '',
+                '--color': actualTextColor,
                 '--font-family': zonosStoreFontFamily(),
             } }, renderText()));
     }
@@ -63,8 +67,8 @@ export class ZonosText {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Color",
-                    "resolved": "\"blue-100\" | \"blue-200\" | \"blue-300\" | \"blue-400\" | \"blue-500\" | \"blue-600\" | \"blue-700\" | \"blue-800\" | \"blue-900\" | \"blue-1000\" | \"cyan-100\" | \"cyan-200\" | \"cyan-300\" | \"cyan-400\" | \"cyan-500\" | \"cyan-600\" | \"cyan-700\" | \"cyan-800\" | \"cyan-900\" | \"cyan-1000\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-1000\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-1000\" | \"purple-100\" | \"purple-200\" | \"purple-300\" | \"purple-400\" | \"purple-500\" | \"purple-600\" | \"purple-700\" | \"purple-800\" | \"purple-900\" | \"purple-1000\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-1000\" | \"gray-100\" | \"gray-200\" | \"gray-300\" | \"gray-400\" | \"gray-500\" | \"gray-600\" | \"gray-700\" | \"gray-800\" | \"gray-900\" | \"gray-1000\" | \"glass-100\" | \"glass-200\" | \"glass-300\" | \"glass-400\" | \"glass-500\" | \"glass-600\" | \"glass-700\" | \"glass-800\" | \"glass-900\" | \"glass-1000\" | \"gray-0\" | \"gray-50\" | \"glass-0\" | \"glass-50\" | \"gray-1100\" | \"gray-1200\" | \"glass-1100\" | \"glass-1200\"",
+                    "original": "Color | (string & { _placeholder?: never })",
+                    "resolved": "Color | (string & { _placeholder?: undefined; })",
                     "references": {
                         "Color": {
                             "location": "import",

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

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '4864150b0af4119fc7d87aec5af3c258fb27802d', class: "zonos--elements" }, h("div", { key: 'c11d3da431f9c4507bc58ec38d0b1ef21c99b584', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '0a92efb2e6c17f67c2feacbd17bbddd4fb63f7da' }), h("div", { key: '0ea54bfaf54a2f170044d77c2b555e5da37af8ae', class: classes([
+        return (h(Host, { key: 'a23ad45e8f96b88b0feaf17690c6bdb75aacb12c', class: "zonos--elements" }, h("div", { key: 'b057f5ae304921f5fd50536cb5b7fb493120f1e7', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '396ac2ec3fcc8d49f8a346d1059cb096ef2e2874' }), h("div", { key: '4aa607dcc9c4c675224e9d7effd1e8ad2bdee097', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '73c55a7318eb36760d2779691f9ea79d2c5bf8c7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1f4106f67fc468121d7fb7fbc0ee69363bb26186', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: 'e69a1883f21f277be88e892a99ae6e66a9829a1c', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'cb901c3cd7d0931f157eddef8fe4286fbd66b66b', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: 'a5d1a84d5b25d1a49abec676731eaf76f703e998', style: {
+        return (h(Host, { key: '3d9977f4c55f7f1047ec94dcc3a3c40105559c00', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '456c8e1865a752dd258989888c45dfbdfd2c4f66', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '2d3260c6b74d3def822acb98733f70a97a79f3fa' }))));
+            } }, h("div", { key: 'aa910d4f9a11d3d1a66836aed442726241b73273', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'ec50cc05f71018b4b6fef1288f1371ddde030a3a' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '3b7429a0c03b00f0a80e15a94bebd08aedaafe51' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '9a5547114b58b739fb5d783f551bc345f067779d' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello/zonos-hello.js

@@ -1,8 +1,8 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import debounce from "lodash/debounce";
 import { localizationStore } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
-import { zonosStore, } from "../../store/zonosStore";
+import { getZonosStoreTheme, zonosStore, } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 import { currencyConvert } from "../../utils/hello/currencyConversion/currencyConvert";
 import { currencyConvertAndFormat } from "../../utils/hello/currencyConversion/currencyConvertAndFormat";
@@ -204,6 +204,8 @@ export class ZonosHello {
                 this.helloRef.setAttribute('data-zonos-hello-loaded', '');
                 this.updateHelloOnPageChange();
                 this.watchPriceChange();
+                // update theme to browser preference theme if appearance theme is system
+                this.handleAppearanceSettingsOverrideChange();
                 clearInterval(initInterval);
             }
         }, 100);
@@ -250,6 +252,13 @@ export class ZonosHello {
     handleResize() {
         debounce(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
     }
+    handleAppearanceSettingsOverrideChange() {
+        var _a;
+        if ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) {
+            // update theme to browser preference theme if appearance theme is system
+            this.appearanceSettingsOverride.theme = getZonosStoreTheme(this.appearanceSettingsOverride.theme);
+        }
+    }
     render() {
         var _a, _b;
         const isExcludedUrl = (_a = zonosStore.helloSettings.excludedUrlPatterns) === null || _a === void 0 ? void 0 : _a.some(pattern => new RegExp(pattern).test(window.location.href));
@@ -508,6 +517,12 @@ export class ZonosHello {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "appearanceSettingsOverride",
+                "methodName": "handleAppearanceSettingsOverrideChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "resize",