fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/components/TypeTesters/index.js

@@ -0,0 +1,271 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeTestersPreloadedIDQueryRenderer = TypeTestersPreloadedIDQueryRenderer;
+exports.TypeTestersPreloadedSlugQueryRenderer = TypeTestersPreloadedSlugQueryRenderer;
+exports.default = TypeTesters;
+var _TypeTestersSlugQuery2 = _interopRequireDefault(require("../../__generated__/TypeTestersSlugQuery.graphql"));
+var _TypeTestersIDQuery2 = _interopRequireDefault(require("../../__generated__/TypeTestersIDQuery.graphql"));
+var _TypeTesters_viewer2 = _interopRequireDefault(require("../../__generated__/TypeTesters_viewer.graphql"));
+var _TypeTesters_collection2 = _interopRequireDefault(require("../../__generated__/TypeTesters_collection.graphql"));
+var _TypeTestersChangedStylesQuery2 = _interopRequireDefault(require("../../__generated__/TypeTestersChangedStylesQuery.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _reactRedux = require("react-redux");
+var _PriceBar = _interopRequireDefault(require("../PriceBar"));
+var _utils = require("../../utils");
+var _TypeTesterContext = _interopRequireDefault(require("../TypeTester/TypeTesterContext"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _useRefetchOnLicenseChanges = require("../../hooks/useRefetchOnLicenseChanges");
+var _TypeTestersRefetchQuery = _interopRequireDefault(require("../../__generated__/TypeTestersRefetchQuery.graphql"));
+var _TypeTester = _interopRequireDefault(require("../TypeTester"));
+var _TypeTesterFloatingToolbar = _interopRequireDefault(require("../TypeTester/TypeTesterFloatingToolbar"));
+var _types = require("../TypeTester/types");
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
+var _useLicenseAndOrderVariables = require("../../hooks/useLicenseAndOrderVariables");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const findPriceBarCollection = (collection, familyId) => {
+  if (collection.id === familyId) return collection;
+  if (!collection.families) return null;
+  return collection.families.find(family => family.id === familyId);
+};
+const getTypeTesterGroups = collection => {
+  const edges = collection?.typeTesters?.edges ?? [];
+  const nodes = edges.map(edge => edge?.node).filter(_utils.notEmpty);
+
+  // group type testers by fontStyle
+  return nodes.reduce((acc, typeTester) => {
+    if (acc.length > 0) {
+      const prevTypeTesterGroup = acc[acc.length - 1].slice(0);
+      const prevTypeTester = prevTypeTesterGroup[0];
+      const getFamilyId = tt => tt.fontStyle && tt.fontStyle.family && tt.fontStyle.family.id;
+      const prevFamilySkuId = getFamilyId(prevTypeTester);
+      const currFamilySkuId = getFamilyId(typeTester);
+      if (prevFamilySkuId === currFamilySkuId) {
+        acc[acc.length - 1] = prevTypeTesterGroup.concat([typeTester]);
+        return acc;
+      }
+    }
+    return acc.concat([[typeTester]]);
+  }, []);
+};
+const changedStylesQuery = (_TypeTestersChangedStylesQuery2.default.hash && _TypeTestersChangedStylesQuery2.default.hash !== "8bfe3f55f542c9c1cac867aa05f7be53" && console.error("The definition of 'TypeTestersChangedStylesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTestersChangedStylesQuery2.default);
+function TypeTestersComponent({
+  collection: collectionKey,
+  viewer: viewerKey,
+  defaultMode,
+  autofit,
+  features: featuresOverride,
+  onFocus,
+  onBlur,
+  onToolbarOpenClose,
+  tags,
+  excludeTags,
+  ...rest
+}) {
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [changedStyles, setChangedStyles] = (0, _react.useState)({});
+  const [changedStylesFetchKey, setChangedStylesFetchKey] = (0, _react.useState)(0);
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const {
+    licenseOptionsSpecs,
+    orderVariableSelections
+  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
+  const [collection, refetch] = (0, _reactRelay.useRefetchableFragment)((_TypeTesters_collection2.default.hash && _TypeTesters_collection2.default.hash !== "0f8422550dd500368594bfedc5f58bf4" && console.error("The definition of 'TypeTesters_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesters_collection2.default), collectionKey);
+  const handleStyleSelect = (0, _react.useCallback)((testerId, fontStyleId) => {
+    const newChangedStyles = {
+      ...changedStyles,
+      [testerId]: fontStyleId
+    };
+    (0, _reactRelay.fetchQuery)(environment, _TypeTestersChangedStylesQuery2.default, {
+      ids: Object.values(newChangedStyles),
+      licenseOptions: licenseOptionsSpecs,
+      orderVariables: orderVariableSelections
+    }).subscribe({
+      complete: () => {
+        setChangedStyles(newChangedStyles);
+        setChangedStylesFetchKey(prev => prev + 1);
+      }
+    });
+  }, [environment, changedStyles, licenseOptionsSpecs, orderVariableSelections]);
+  const viewer = (0, _reactRelay.useFragment)((_TypeTesters_viewer2.default.hash && _TypeTesters_viewer2.default.hash !== "8fbadb67d6506fee0f3ccc09624517c6" && console.error("The definition of 'TypeTesters_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesters_viewer2.default), viewerKey);
+  const precartOpen = (0, _reactRedux.useSelector)(state => state.precartOpen);
+  const refetchVariables = (0, _react.useMemo)(() => collection?.id ? {
+    id: collection.id,
+    excludeTags,
+    tags
+  } : undefined, [collection?.id, excludeTags, tags]);
+  (0, _useRefetchOnLicenseChanges.useRefetchOnLicenseChanges)({
+    environment,
+    refetch,
+    query: _TypeTestersRefetchQuery.default,
+    variables: refetchVariables
+  });
+  const changedStylesData = (0, _reactRelay.useLazyLoadQuery)(changedStylesQuery, {
+    ids: Object.values(changedStyles).filter(Boolean),
+    licenseOptions: licenseOptionsSpecs,
+    orderVariables: orderVariableSelections
+  }, {
+    fetchKey: changedStylesFetchKey,
+    fetchPolicy: 'store-only'
+  });
+  if (!collection) return null;
+  const testers = collection.typeTesters?.edges?.reduce((acc, edge) => {
+    const node = edge.node;
+    const direction = node.direction === 'rtl' ? 'rtl' : 'ltr';
+    let alignment = config.initialAlignment;
+    if (direction === 'rtl') alignment = 'right';
+    acc[node.id] = {
+      content: node.content,
+      size: node.size ? parseFloat(node.size) : 72,
+      lineHeight: node.lineHeight ? parseFloat(node.lineHeight) : 1,
+      autofit: autofit ?? node.autofit ?? false,
+      letterSpacing: node.letterSpacing ? parseFloat(node.letterSpacing) : 0,
+      direction,
+      alignment,
+      variableSettings: node.variableSettings?.reduce((acc, {
+        axis,
+        value
+      }) => {
+        acc[axis] = value;
+        return acc;
+      }, {}) ?? null,
+      features: node.featureSettings?.filter(setting => setting.value === '1').map(setting => setting.feature) ?? null
+    };
+    return acc;
+  }, {});
+  if (!testers) return null;
+  const features = (0, _types.normalizeFeaturesProp)(featuresOverride) ?? collection.typeTesterFeatures;
+  return /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
+    key: collection.id,
+    defaultMode: defaultMode ?? (autofit ? 'local' : 'group'),
+    testers: testers
+  }, config.toolsPosition === 'floating' && /*#__PURE__*/_react.default.createElement(_TypeTesterFloatingToolbar.default, {
+    testers: collection.typeTesters?.edges?.map(edge => edge.node) ?? [],
+    features: features,
+    axes: collection.typeTesterAxes,
+    onToolbarOpenClose: onToolbarOpenClose
+  }), getTypeTesterGroups(collection).map((typeTesterGroup, i) => {
+    if (typeTesterGroup.length === 0) return null;
+    const anyTypeTester = typeTesterGroup[0];
+    const currentFamilyId = anyTypeTester.fontStyle?.family?.id;
+
+    // when clicking Select/Buy, open modal in relevant superfamily/family
+    const productId = collection.parent?.id ?? collection.id;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: i
+    }, config.priceBar && precartOpen && currentFamilyId && /*#__PURE__*/_react.default.createElement(_PriceBar.default, {
+      node: findPriceBarCollection(collection, currentFamilyId) ?? null
+    }), typeTesterGroup.map((node, j) => {
+      const defaultStyle = node.fontStyle;
+      const changedStyleId = changedStyles[node.id];
+
+      // Use changed style from query if it exists
+      const fontStyle = changedStyleId && changedStylesData?.nodes ? changedStylesData.nodes.find(style => style?.id === changedStyleId && 'id' in style) ?? defaultStyle : defaultStyle;
+      return /*#__PURE__*/_react.default.createElement(_TypeTester.default, _extends({}, rest, {
+        id: node.id,
+        fontStyle: fontStyle,
+        onStyleSelect: fontStyleId => handleStyleSelect(node.id, fontStyleId),
+        key: j,
+        productId: productId,
+        features: features,
+        axes: collection.typeTesterAxes,
+        viewer: viewer,
+        tags: node.tags
+      }));
+    }));
+  }));
+}
+
+// TODO: add a new component that will be used to query the changed styles, then the base component can call usePreloadedQuery
+// https://relay.dev/docs/api-reference/use-query-loader/
+
+const idQuery = (_TypeTestersIDQuery2.default.hash && _TypeTestersIDQuery2.default.hash !== "918c212b46e9aaaceeebe47935bb65d7" && console.error("The definition of 'TypeTestersIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTestersIDQuery2.default);
+function TypeTestersPreloadedIDQueryRenderer({
+  preloadedQuery,
+  ...rest
+}) {
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
+  return /*#__PURE__*/_react.default.createElement(TypeTestersComponent, _extends({}, data, rest));
+}
+function TypeTestersIDQueryRenderer({
+  collectionId,
+  tags,
+  excludeTags,
+  ...rest
+}) {
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const data = (0, _reactRelay.useLazyLoadQuery)(idQuery, {
+    collectionId,
+    tags,
+    excludeTags,
+    selectable: config.selectable
+  });
+  return /*#__PURE__*/_react.default.createElement(TypeTestersComponent, _extends({}, data, rest, {
+    tags: tags,
+    excludeTags: excludeTags
+  }));
+}
+const slugQuery = (_TypeTestersSlugQuery2.default.hash && _TypeTestersSlugQuery2.default.hash !== "6182a027996d13aaa03264bae680252c" && console.error("The definition of 'TypeTestersSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTestersSlugQuery2.default);
+function TypeTestersPreloadedSlugQueryRenderer({
+  preloadedQuery,
+  ...rest
+}) {
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(slugQuery, queryRef);
+  return /*#__PURE__*/_react.default.createElement(TypeTestersComponent, _extends({
+    collection: data.viewer.slug?.collection ?? null,
+    viewer: data.viewer
+  }, rest));
+}
+function TypeTestersSlugQueryRenderer({
+  collectionSlug,
+  tags,
+  excludeTags,
+  ...rest
+}) {
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const data = (0, _reactRelay.useLazyLoadQuery)(slugQuery, {
+    collectionSlug,
+    tags,
+    excludeTags,
+    selectable: config.selectable
+  });
+  return /*#__PURE__*/_react.default.createElement(TypeTestersComponent, _extends({
+    collection: data.viewer.slug?.collection ?? null,
+    viewer: data.viewer
+  }, rest, {
+    tags: tags,
+    excludeTags: excludeTags
+  }));
+}
+function TypeTesters({
+  collectionId,
+  collectionSlug,
+  ...rest
+}) {
+  if (collectionId) {
+    return /*#__PURE__*/_react.default.createElement(TypeTestersIDQueryRenderer, _extends({
+      collectionId: collectionId
+    }, rest));
+  }
+  if (collectionSlug) {
+    return /*#__PURE__*/_react.default.createElement(TypeTestersSlugQueryRenderer, _extends({
+      collectionSlug: collectionSlug
+    }, rest));
+  }
+  return null;
+}

package/dist-cjs/components/TypeTesters/index.server.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TypeTesters;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _TypeTestersIDQuery = _interopRequireDefault(require("../../__generated__/TypeTestersIDQuery.graphql"));
+var _TypeTestersSlugQuery = _interopRequireDefault(require("../../__generated__/TypeTestersSlugQuery.graphql"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+async function TypeTesters({
+  collectionId,
+  collectionSlug,
+  tags = null,
+  excludeTags = null,
+  ...rest
+}) {
+  if (collectionId) {
+    const preloadedQuery = await (0, _loadSerializableQuery.default)(_TypeTestersIDQuery.default, {
+      collectionId,
+      tags,
+      excludeTags,
+      selectable: true
+    });
+    return /*#__PURE__*/_react.default.createElement(_index.TypeTestersPreloadedIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  if (collectionSlug) {
+    const preloadedQuery = await (0, _loadSerializableQuery.default)(_TypeTestersSlugQuery.default, {
+      collectionSlug,
+      tags,
+      excludeTags,
+      selectable: true
+    });
+    return /*#__PURE__*/_react.default.createElement(_index.TypeTestersPreloadedSlugQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  return null;
+}

package/dist-cjs/components/UrlContext.js

@@ -0,0 +1,16 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useFontdueUrl = useFontdueUrl;
+var _react = require("react");
+const FONTDUE_URL = typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_FONTDUE_URL : undefined;
+const UrlContext = /*#__PURE__*/(0, _react.createContext)(FONTDUE_URL ?? '');
+function useFontdueUrl() {
+  return (0, _react.useContext)(UrlContext);
+}
+var _default = UrlContext;
+exports.default = _default;

package/dist-cjs/components/VariableTableAmounts/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = VariableTableAmounts;
+var _VariableTableAmounts_option2 = _interopRequireDefault(require("../../__generated__/VariableTableAmounts_option.graphql"));
+var _VariableTableAmounts_variable2 = _interopRequireDefault(require("../../__generated__/VariableTableAmounts_variable.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function VariableTableAmounts({
+  variable: variableKey,
+  option: optionKey
+}) {
+  const variable = (0, _reactRelay.useFragment)((_VariableTableAmounts_variable2.default.hash && _VariableTableAmounts_variable2.default.hash !== "400d25ad39816f2e153c8bb67e0e8695" && console.error("The definition of 'VariableTableAmounts_variable' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _VariableTableAmounts_variable2.default), variableKey);
+  const option = (0, _reactRelay.useFragment)((_VariableTableAmounts_option2.default.hash && _VariableTableAmounts_option2.default.hash !== "fe03c602c33f1f6e5afe209afc9e6cd6" && console.error("The definition of 'VariableTableAmounts_option' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _VariableTableAmounts_option2.default), optionKey);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "variable-table-amounts"
+  }, variable?.units?.map((unit, i) => {
+    const amount = option?.amounts?.[i];
+    if (!amount) return null;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "variable-table-amounts__row",
+      key: i
+    }, amount, " ", unit);
+  }));
+}

package/dist-cjs/components/elements/Button/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function Button({
+  type,
+  className,
+  ...rest
+}) {
+  return /*#__PURE__*/_react.default.createElement("button", _extends({
+    className: className || 'button',
+    type: type || 'button'
+  }, rest));
+}
+var _default = Button;
+exports.default = _default;

package/dist-cjs/components/elements/EmptyCart/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _reactRedux = require("react-redux");
+var _ConfigContext = _interopRequireDefault(require("../../ConfigContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const EmptyCart = () => {
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "empty-cart__container"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => dispatch({
+      type: 'STORE_MODAL_NAVIGATE',
+      route: 'index',
+      variables: {
+        excludeTags: config.storeModal.indexExcludeTags
+      }
+    })
+  }, "Continue shopping"));
+};
+var _default = EmptyCart;
+exports.default = _default;

package/dist-cjs/components/elements/StoreModalCartLayout/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StoreModalCartLayout = ({
+  checkoutEnabled,
+  children: {
+    items,
+    couponCodeInput,
+    totals,
+    checkout,
+    orderVariables,
+    shareCart
+  }
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__cart__container"
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__cart__review"
+}, orderVariables && /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__cart__order-variables"
+}, orderVariables), /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__cart__items"
+}, items), /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__cart__coupon-code-input"
+}, couponCodeInput), /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__cart__share"
+}, shareCart), /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__cart__totals"
+}, totals)), /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__cart__checkout",
+  "data-disabled": !checkoutEnabled
+}, checkout));
+var _default = StoreModalCartLayout;
+exports.default = _default;

package/dist-cjs/components/elements/StoreModalContainer/StoreModalContainerContext.js

@@ -0,0 +1,11 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = /*#__PURE__*/_react.default.createContext({});
+exports.default = _default;

package/dist-cjs/components/elements/StoreModalContainer/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Icons = require("../../Icons");
+var _StoreModalContainerContext = _interopRequireDefault(require("./StoreModalContainerContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StoreModalContainer = ({
+  onClickBackground,
+  onClickClose,
+  onClickBack,
+  onClickCart,
+  showCartButton,
+  orderItemCount,
+  fonts,
+  routeName,
+  children: {
+    backText,
+    pageTitle,
+    body
+  }
+}) => {
+  const container = (0, _react.useRef)(null);
+  const handleScrollToTop = (0, _react.useCallback)(() => {
+    container.current?.scrollTo?.({
+      top: 0,
+      left: 0
+    });
+  }, [container]);
+  return /*#__PURE__*/_react.default.createElement(_StoreModalContainerContext.default.Provider, {
+    value: {
+      scrollToTop: handleScrollToTop
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__container__overlay",
+    "data-route": routeName
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__container__background",
+    onClick: onClickBackground
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__container__container",
+    ref: container,
+    style: {
+      '--font-family': fonts.regular ? `"${fonts.regular}"` : undefined,
+      '--font-family__bold': fonts.bold ? `"${fonts.bold}"` : undefined,
+      fontFamily: 'var(--font-family, inherit)'
+    }
+  }, /*#__PURE__*/_react.default.createElement("nav", {
+    className: "store-modal__container__nav",
+    "data-has-back-text": Boolean(backText)
+  }, backText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    className: "store-modal__container__back-button",
+    onClick: onClickBack
+  }, /*#__PURE__*/_react.default.createElement(_Icons.ArrowLeft, null), " ", backText)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__container__title"
+  }, pageTitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__container__buttons"
+  }, showCartButton && /*#__PURE__*/_react.default.createElement("button", {
+    className: "store-modal__container__cart-button",
+    onClick: onClickCart,
+    "aria-label": "Cart",
+    "data-count": orderItemCount
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CartNew, null)), /*#__PURE__*/_react.default.createElement("button", {
+    className: "store-modal__container__close-button",
+    onClick: onClickClose,
+    "aria-label": "Close"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.X, null)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__container__body"
+  }, body))));
+};
+var _default = StoreModalContainer;
+exports.default = _default;

package/dist-cjs/components/elements/StoreModalDownloadLayout/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icons = require("../../Icons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StoreModalDownloadLayout = ({
+  archiveUrl,
+  children: {
+    message
+  }
+}) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__download__section"
+}, message), archiveUrl && /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__download__section"
+}, /*#__PURE__*/_react.default.createElement("a", {
+  target: "_blank",
+  href: archiveUrl,
+  className: "store-modal__download__button"
+}, /*#__PURE__*/_react.default.createElement(_Icons.DownloadFonts, null), " Download your order")));
+var _default = StoreModalDownloadLayout;
+exports.default = _default;

package/dist-cjs/components/elements/StoreModalFamily/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StoreModalFamily = ({
+  children: {
+    bundles,
+    familyButton,
+    styleGroups,
+    title
+  }
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__family__container"
+}, title && /*#__PURE__*/_react.default.createElement("h3", {
+  className: "store-modal__family__title"
+}, title), /*#__PURE__*/_react.default.cloneElement(familyButton, {
+  className: 'store-modal__family__family-button'
+}), bundles?.map(bundle => /*#__PURE__*/_react.default.cloneElement(bundle, {
+  className: 'store-modal__family__bundle-button'
+})), styleGroups?.map((group, i) => /*#__PURE__*/_react.default.createElement("div", {
+  className: "store-modal__family__group",
+  key: i
+}, group.map(styleButton => /*#__PURE__*/_react.default.cloneElement(styleButton, {
+  className: 'store-modal__family__style-button'
+})))));
+var _default = StoreModalFamily;
+exports.default = _default;

package/dist-cjs/components/elements/StoreModalFamilyButton/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Button = _interopRequireDefault(require("../../elements/Button"));
+var _Icons = require("../../Icons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const StoreModalFamilyButton = ({
+  selected,
+  onClick,
+  className,
+  supportsEnglish,
+  children: {
+    name,
+    label,
+    price
+  },
+  ...rest
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    onClick: onClick,
+    className: (0, _classnames.default)('store-modal__family-button__button', className)
+  }, rest, {
+    "data-selected": selected,
+    "data-clickable": Boolean(onClick),
+    "data-supports-english": supportsEnglish
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__family-button__container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__family-button__name"
+  }, name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__family-button__label"
+  }, label), selected ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__family-button__checked"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__family-button__price"
+  }, price)));
+};
+var _default = StoreModalFamilyButton;
+exports.default = _default;