@zonos/elements 1.2.3 → 1.2.4-alpha.1

package/dist/components/zonos-text2.js

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

package/dist/components/zonos-v-stack.d.ts

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

package/dist/components/zonos-v-stack2.js

@@ -1,36 +1,39 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 
-const zonosVStackCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
+const zonosVStackCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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 .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
 
 const VStack = /*@__PURE__*/ proxyCustomElement(class VStack extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.spacing = 24;
-    this.class = '';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", null))));
-  }
-  static get style() { return zonosVStackCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.spacing = 24;
+        this.class = '';
+    }
+    render() {
+        return (h(Host, { style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", null))));
+    }
+    static get style() { return zonosVStackCss; }
 }, [1, "zonos-v-stack", {
-    "spacing": [2],
-    "class": [1]
-  }]);
+        "spacing": [2],
+        "class": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-v-stack"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-v-stack":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VStack);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-v-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-v-stack":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VStack);
+            }
+            break;
+    } });
 }
 
 export { VStack as V, defineCustomElement as d };

package/dist/components/zonosStore.js

@@ -2512,113 +2512,117 @@ var merge_1 = merge;
  * @param value2[] List of objects to merge (need to have the same shape as value1)
  */
 const mergeConfig = (defaultObj, fetchedObj, ...overrideObj) => {
-  // filter out null and undefined values
-  const overrideArgs = [defaultObj, fetchedObj, ...overrideObj].filter(Boolean);
-  return merge_1.apply(null, overrideArgs);
+    // filter out null and undefined values
+    const overrideArgs = [defaultObj, fetchedObj, ...overrideObj].filter(Boolean);
+    return merge_1.apply(null, overrideArgs);
 };
 
 const { reset, state: zonosStore } = createStore(() => ({
-  appearance: {
-    colorPrimary: 'purple',
-    fontFamily: 'Inter',
-    logoUrl: '',
-    style: 'ROUNDED',
-    theme: 'LIGHT',
-    zonosAttribution: 'DISABLED',
-  },
-  checkoutSettings: {
-    allowedDomains: [],
-    analyticsProviders: [],
-    orderNotifications: {
-      abandonedCart: {
-        delay: 0,
-        discountPercent: 0,
-        status: {
-          active: 'DISABLED',
-          sendCopiesTo: [],
+    appearance: {
+        colorPrimary: 'purple',
+        fontFamily: 'Inter',
+        logoUrl: '',
+        style: 'ROUNDED',
+        theme: 'LIGHT',
+        zonosAttribution: 'DISABLED',
+    },
+    checkoutSettings: {
+        allowedDomains: [],
+        analyticsProviders: [],
+        orderNotifications: {
+            abandonedCart: {
+                delay: 0,
+                discountPercent: 0,
+                status: {
+                    active: 'DISABLED',
+                    sendCopiesTo: [],
+                },
+            },
+            orderCancelled: {
+                active: 'DISABLED',
+                sendCopiesTo: [],
+            },
+            orderConfirmation: {
+                active: 'DISABLED',
+                sendCopiesTo: [],
+            },
+            orderShipped: {
+                active: 'DISABLED',
+                sendCopiesTo: [],
+            },
         },
-      },
-      orderCancelled: {
-        active: 'DISABLED',
-        sendCopiesTo: [],
-      },
-      orderConfirmation: {
-        active: 'DISABLED',
-        sendCopiesTo: [],
-      },
-      orderShipped: {
-        active: 'DISABLED',
-        sendCopiesTo: [],
-      },
+        organization: '',
+        placeOrderButtonSelector: null,
+        // default inactive for subscription
+        subscriptionStatus: 'INACTIVE',
+        successBehavior: 'REDIRECT_TO_SUCCESS_PAGE',
+        successRedirectUrl: '',
+        visibilityStatus: 'ENABLED',
     },
-    organization: '',
-    placeOrderButtonSelector: null,
-    // default inactive for subscription
-    subscriptionStatus: 'INACTIVE',
-    successBehavior: 'REDIRECT_TO_SUCCESS_PAGE',
-    successRedirectUrl: '',
-    visibilityStatus: 'ENABLED',
-  },
-  currentHelloPage: '',
-  helloSettings: {
-    allowedDomains: [],
-    anchorElementSelector: '',
-    cartUrlPattern: '',
-    currencyBehavior: 'ENABLED',
-    currencyElementSelector: '.money',
-    dutyTaxEstimationBehavior: 'ENABLED',
-    excludedUrlPatterns: [],
-    homepageUrlPattern: '',
-    mobileLocation: 'BOTTOM_RIGHT',
-    mode: 'LIVE',
-    organization: '',
-    peekMessageBehavior: 'ENABLED',
-    peekMessageDelay: 0,
-    productAddToCartElementSelector: '',
-    productDescriptionElementSelector: '',
-    productDetailUrlPattern: '',
-    productListUrlPattern: '',
-    productPriceElementSelector: '',
-    productTitleElementSelector: '',
-    restrictionBehavior: 'DISABLED',
-  },
-  loadedConfig: false,
-  onlineStoreSettings: {
-    allowedDomains: [],
-  },
-  organizationName: '',
-  sourceCurrency: 'USD',
-  storeId: null,
-  // toggle to know if the config has been loaded with graphql
-  stripeApiKey: '',
-  zonosApiKey: '',
+    currentHelloPage: '',
+    helloSettings: {
+        allowedDomains: [],
+        anchorElementSelector: '',
+        cartUrlPattern: '',
+        currencyBehavior: 'ENABLED',
+        currencyElementSelector: '.money',
+        dutyTaxEstimationBehavior: 'ENABLED',
+        excludedUrlPatterns: [],
+        homepageUrlPattern: '',
+        mobileLocation: 'BOTTOM_RIGHT',
+        mode: 'LIVE',
+        organization: '',
+        peekMessageBehavior: 'ENABLED',
+        peekMessageDelay: 0,
+        productAddToCartElementSelector: '',
+        productDescriptionElementSelector: '',
+        productDetailUrlPattern: '',
+        productListUrlPattern: '',
+        productPriceElementSelector: '',
+        productTitleElementSelector: '',
+        restrictionBehavior: 'DISABLED',
+    },
+    loadedConfig: false,
+    onlineStoreSettings: {
+        allowedDomains: [],
+    },
+    organizationName: '',
+    sourceCurrency: 'USD',
+    storeId: null,
+    // toggle to know if the config has been loaded with graphql
+    stripeApiKey: '',
+    zonosApiKey: '',
 }));
 let savedZonosSettings = null;
 /**
  * Init setting from zonos setting
  */
 const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
-  var _a, _b, _c;
-  reset();
-  if (zonosSettings) {
-    // save zonos settings to be used later
-    savedZonosSettings = zonosSettings;
-  }
-  zonosStore.appearance = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
-    (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.appearanceSettings) ||
-    null, overrideSettings.appearance);
-  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.checkoutSettings);
-  zonosStore.helloSettings = mergeConfig(zonosStore.helloSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.helloSettings) || (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.helloSettings) || null, overrideSettings.helloSettings);
-  zonosStore.onlineStoreSettings = mergeConfig(zonosStore.onlineStoreSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.onlineStoreSettings) ||
-    (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.onlineStoreSettings) ||
-    null, overrideSettings.onlineStoreSettings);
-  // set flag to true to indicate that config is ready
-  zonosStore.loadedConfig = true;
-  zonosStore.organizationName = ((_a = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _a === void 0 ? void 0 : _a.name) || '';
-  zonosStore.storeId = ((_c = (_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.references) === null || _c === void 0 ? void 0 : _c.storeId) || null;
-  zonosStore.currencyConverter = overrideSettings.currencyConverter;
+    var _a, _b, _c;
+    reset();
+    if (zonosSettings) {
+        // save zonos settings to be used later
+        savedZonosSettings = zonosSettings;
+    }
+    zonosStore.appearance = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
+        (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.appearanceSettings) ||
+        null, overrideSettings.appearance);
+    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.checkoutSettings);
+    zonosStore.helloSettings = mergeConfig(zonosStore.helloSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.helloSettings) || (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.helloSettings) || null, overrideSettings.helloSettings);
+    zonosStore.onlineStoreSettings = mergeConfig(zonosStore.onlineStoreSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.onlineStoreSettings) ||
+        (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.onlineStoreSettings) ||
+        null, overrideSettings.onlineStoreSettings);
+    // set flag to true to indicate that config is ready
+    zonosStore.loadedConfig = true;
+    zonosStore.organizationName = ((_a = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _a === void 0 ? void 0 : _a.name) || '';
+    zonosStore.storeId = ((_c = (_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.references) === null || _c === void 0 ? void 0 : _c.storeId) || null;
+    zonosStore.currencyConverter = overrideSettings.currencyConverter;
+};
+const zonosStoreFontFamily = () => {
+    const fontFamily = zonosStore.appearance.fontFamily || 'Inter';
+    return fontFamily;
 };
 
-export { _root as _, createCommonjsModule as a, commonjsGlobal as b, createStore as c, zonosStoreInitSetting as d, _baseGetTag as e, isObject_1 as f, isObjectLike_1 as i, mergeConfig as m, zonosStore as z };
+export { _root as _, createCommonjsModule as a, commonjsGlobal as b, createStore as c, zonosStoreFontFamily as d, zonosStoreInitSetting as e, _baseGetTag as f, isObject_1 as g, isObjectLike_1 as i, mergeConfig as m, zonosStore as z };