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

package/dist/esm/zonos-hello.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, h, H as Host } from './index-dd40cc85.js';
-import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, m as mergeConfig } from './zonosStore-aac7c6ac.js';
-import { u as handleFetch, d as logError, l as localizationStore, v as isValidSelector, t as translate, x as getZCountryUrlParam, y as setZCountryUrlParam, a as log, z as currencyDisplay, A as currencyConvertAndFormat, B as currencyConvert, C as currencyFormat } from './cart-5a88b4f3.js';
+import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-c4c45591.js';
+import { r as handleFetch, d as logError, l as localizationStore, u as isValidSelector, t as translate, w as getZCountryUrlParam, x as setZCountryUrlParam, a as log, y as currencyDisplay, z as currencyConvertAndFormat, A as currencyConvert, B as currencyFormat } from './cart-cc09eaef.js';
 import { c as classes } from './classes-0d95c529.js';
 import { g as getHasMoreSpaceOnRight } from './getHasMoreSpaceOnRight-70eb913a.js';
-import './isDarkColor-c34dfed9.js';
-import './getBorderRadius-5d750ab8.js';
+import './isDarkColor-6bf71e51.js';
+import './getBorderRadius-a89e45fb.js';
 
 var root = _root;
 
@@ -657,6 +657,8 @@ const ZonosHello = class {
                 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);
@@ -703,6 +705,13 @@ const ZonosHello = class {
     handleResize() {
         debounce_1(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));
@@ -742,6 +751,9 @@ const ZonosHello = class {
                     'zonos--hello-dialog-wrapper-mobile-override',
             ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, h("zonos-hello-dialog", { animateFromLeftOverride: this.animateFromLeftOverride, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
     }
+    static get watchers() { return {
+        "appearanceSettingsOverride": ["handleAppearanceSettingsOverrideChange"]
+    }; }
 };
 ZonosHello.style = ZonosHelloStyle0;
 

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

@@ -0,0 +1,35 @@
+import { r as registerInstance, h, d as getElement, H as Host } from './index-dd40cc85.js';
+import { d as zonosStoreFontFamily } from './zonosStore-c4c45591.js';
+import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
+
+const zonosIconCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
+const ZonosIconStyle0 = zonosIconCss;
+
+const ZonosIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.autoHeight = false;
+        this.iconColor = 'gray-1200';
+        this.content = undefined;
+        this.size = 24;
+    }
+    render() {
+        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': iconColor,
+                '--font-family': zonosStoreFontFamily(),
+                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+                '--width': `${this.size}px`,
+            } }));
+    }
+    get el() { return getElement(this); }
+};
+ZonosIcon.style = ZonosIconStyle0;
+
+export { ZonosIcon as zonos_icon };

package/dist/esm/zonos-link.entry.js

@@ -12,7 +12,7 @@ const ZonosLink = class {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: '99bf9ff46cf84f424739b76d3da8a8c770c0a88f', class: "zonos--elements" }, h("a", { key: 'bd3553a33f27b4815a7b0573a34862093242b456', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'ad80829c1ca5cd9b0e2dd62542025eeecf436196' }))));
+        return (h(Host, { key: 'b4def20f1c697c437e98c35e7355e84bfea88be2', class: "zonos--elements" }, h("a", { key: '8bb78fc9f3a38256cc3e7cda104c7eec1c93d185', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '897301f324059f6917a71f9ed444ddae32535485' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

package/dist/esm/zonos-logo.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as getAssetPath, H as Host } from './index-dd40cc85.js';
-import { d as zonosStoreFontFamily } from './zonosStore-aac7c6ac.js';
+import { d as zonosStoreFontFamily } from './zonosStore-c4c45591.js';
 import { c as classes } from './classes-0d95c529.js';
 
 const zonosLogoCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
@@ -15,11 +15,11 @@ const ZonosLogo = class {
         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 assetsDirs() { return ["assets"]; }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-dd40cc85.js';
-import { d as zonosStoreFontFamily } from './zonosStore-aac7c6ac.js';
+import { d as zonosStoreFontFamily } from './zonosStore-c4c45591.js';
 import { c as classes } from './classes-0d95c529.js';
 
 const zonosNotificationCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-dd40cc85.js';
-import { j as stripeStore, d as logError } from './cart-5a88b4f3.js';
-import './zonosStore-aac7c6ac.js';
-import './isDarkColor-c34dfed9.js';
-import './getBorderRadius-5d750ab8.js';
+import { j as stripeStore, d as logError } from './cart-cc09eaef.js';
+import './zonosStore-c4c45591.js';
+import './isDarkColor-6bf71e51.js';
+import './getBorderRadius-a89e45fb.js';
 
 const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:var(--amino-space-16)}";
 const ZonosPaymentStyle0 = zonosPaymentCss;
@@ -40,7 +40,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'e10a4ce1a9ecf05ad8efaceeb861284a92e475d2', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'a1b52de6a2cec2f707e00c39ebcd7752ad191af6', class: "zonos--payment-component" })));
+        return (h(Host, { key: 'db50fedad509b3bc972cfe02d5973a3c93a6eb23', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'a773ce78377a70c57577eb1efdac9d2563d1a60d', class: "zonos--payment-component" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/zonos-select-dialog-header_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-dd40cc85.js';
-import { d as zonosStoreFontFamily } from './zonosStore-aac7c6ac.js';
+import { d as zonosStoreFontFamily } from './zonosStore-c4c45591.js';
 import { c as classes } from './classes-0d95c529.js';
 
 const RemoveIcon = `<svg xmlns="https://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>`;
@@ -14,9 +14,9 @@ const ZonosSelectDialogHeader = class {
         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' }))));
     }
 };
 ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;
@@ -30,9 +30,9 @@ const VStack = class {
         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' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-dd40cc85.js';
-import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-aac7c6ac.js';
+import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-c4c45591.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-5d750ab8.js';
-import { i as isColorVariable } from './isColorVariable-91c33804.js';
+import { g as getBorderRadius } from './getBorderRadius-a89e45fb.js';
+import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
 
 const zonosShippingRichRadioCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;align-items:center;gap:var(--amino-space-16);cursor:pointer;border:1px solid var(--amino-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--amino-radius-10));border-top-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--amino-radius-10));border-bottom-left-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--amino-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
 const ZonosShippingRichRadioStyle0 = zonosShippingRichRadioCss;
@@ -30,11 +30,20 @@ const ZonosShippingRichRadio = class {
         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([

package/dist/esm/zonos-text.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-dd40cc85.js';
-import { d as zonosStoreFontFamily } from './zonosStore-aac7c6ac.js';
+import { d as zonosStoreFontFamily } from './zonosStore-c4c45591.js';
 import { c as classes } from './classes-0d95c529.js';
+import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
 
 const textOptions = {
     pageHeader: {
@@ -126,6 +127,9 @@ const ZonosText = class {
         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':
@@ -145,7 +149,7 @@ const ZonosText = class {
                 `zonos--text-size-${textSize}`,
                 `zonos--text-weight-${textWeight}`,
             ]), style: {
-                '--color': this.textColor ? `var(--amino-${this.textColor})` : '',
+                '--color': actualTextColor,
                 '--font-family': zonosStoreFontFamily(),
             } }, renderText()));
     }

package/dist/esm/{zonosStore-aac7c6ac.js → zonosStore-c4c45591.js}

@@ -2759,7 +2759,7 @@ const mergeConfig = (defaultObj, fetchedObj, ...overrideObj) => {
 
 const { reset, state: zonosStore } = createStore(() => ({
     appearance: {
-        colorPrimary: 'purple',
+        colorPrimary: 'white',
         fontFamily: 'Inter',
         logoUrl: '',
         style: 'ROUNDED',
@@ -2831,6 +2831,17 @@ const { reset, state: zonosStore } = createStore(() => ({
     zonosApiKey: '',
 }));
 let savedZonosSettings = null;
+/**
+ * Get theme from media query if theme is SYSTEM, otherwise return the theme
+ */
+const getZonosStoreTheme = (theme) => {
+    if (theme === 'SYSTEM') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'DARK'
+            : 'LIGHT';
+    }
+    return theme;
+};
 /**
  * Init setting from zonos setting
  */
@@ -2841,9 +2852,15 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
         // save zonos settings to be used later
         savedZonosSettings = zonosSettings;
     }
-    zonosStore.appearance = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
+    const mergedAppearanceConfig = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.appearanceSettings) ||
         null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.appearance);
+    // override the theme to user browser preferences if it is set to SYSTEM
+    if (mergedAppearanceConfig.theme === 'SYSTEM') {
+        // update theme to user browser preferences
+        mergedAppearanceConfig.theme = getZonosStoreTheme(mergedAppearanceConfig.theme);
+    }
+    zonosStore.appearance = mergedAppearanceConfig;
     zonosStore.checkoutSettings = mergeConfig(zonosStore.checkoutSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.checkoutSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.checkoutSettings) ||
         null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.checkoutSettings);
@@ -2860,4 +2877,4 @@ const zonosStoreFontFamily = () => {
     return fontFamily;
 };
 
-export { _root as _, commonjsGlobal as a, zonosStoreInitSetting as b, createStore as c, zonosStoreFontFamily as d, _baseGetTag as e, isObject_1 as f, isObjectLike_1 as i, mergeConfig as m, zonosStore as z };
+export { _root as _, commonjsGlobal as a, zonosStoreInitSetting as b, createStore as c, zonosStoreFontFamily as d, _baseGetTag as e, isObject_1 as f, getZonosStoreTheme as g, isObjectLike_1 as i, mergeConfig as m, zonosStore as z };