@zonos/elements 1.2.2 → 1.2.4-alpha.1

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

@@ -2,156 +2,158 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9542d2e7.js');
+const index = require('./index-20cb112f.js');
+const zonosStore = require('./zonosStore-a0fa5b77.js');
 const classes = require('./classes-b7918f56.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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 (index.h("h2", null, index.h("slot", null)));
-        case 'h3':
-          return (index.h("h3", null, index.h("slot", null)));
-        case 'h4':
-          return (index.h("h4", null, index.h("slot", null)));
-        case 'h5':
-          return (index.h("h5", null, index.h("slot", null)));
-        case 'span':
-        default:
-          return (index.h("span", null, index.h("slot", null)));
-      }
-    };
-    return (index.h(index.Host, { class: classes.classes([
-        `zonos--text-size-${textSize}`,
-        `zonos--text-weight-${textWeight}`,
-        this.class,
-      ]), style: {
-        '--color': this.color ? `var(--amino-${this.color})` : '',
-      } }, renderText()));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 (index.h("h2", null, index.h("slot", null)));
+                case 'h3':
+                    return (index.h("h3", null, index.h("slot", null)));
+                case 'h4':
+                    return (index.h("h4", null, index.h("slot", null)));
+                case 'h5':
+                    return (index.h("h5", null, index.h("slot", null)));
+                case 'span':
+                default:
+                    return (index.h("span", null, index.h("slot", null)));
+            }
+        };
+        return (index.h(index.Host, { class: classes.classes([
+                `zonos--text-size-${textSize}`,
+                `zonos--text-weight-${textWeight}`,
+                this.class,
+            ]), style: {
+                '--color': this.color ? `var(--amino-${this.color})` : '',
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, renderText()));
+    }
 };
 ZonosText.style = zonosTextCss;
 

package/dist/cjs/{zonosStore-a430ec5b.js → zonosStore-a0fa5b77.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-9542d2e7.js');
+const index = require('./index-20cb112f.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -2514,113 +2514,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;
 };
 
 exports._baseGetTag = _baseGetTag;
@@ -2632,4 +2636,5 @@ exports.isObjectLike_1 = isObjectLike_1;
 exports.isObject_1 = isObject_1;
 exports.mergeConfig = mergeConfig;
 exports.zonosStore = zonosStore;
+exports.zonosStoreFontFamily = zonosStoreFontFamily;
 exports.zonosStoreInitSetting = zonosStoreInitSetting;