fontdue-js 2.21.0 → 2.22.1

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

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CartButton = _interopRequireDefault(require("../CartButton"));
+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; }
+function NavItem({
+  label,
+  link,
+  text
+}) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sticky-nav__item",
+    "data-label": label
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    className: "sticky-nav__link",
+    href: link
+  }, text));
+}
+function StickyNav({
+  aboutPath,
+  homePath,
+  typefacesPath,
+  siteTitle
+}) {
+  const $stickyNav = (0, _react.useRef)(null);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    function onScroll() {
+      const rect = $stickyNav.current?.getBoundingClientRect();
+
+      // there is an issue when the page initially loads, it takes some time
+      // to paint the div, and incorrectly reporting the top value as zero.
+      // so we keep trying it until it has a non-zero width
+      if (rect?.width !== 0) {
+        setVisible($stickyNav.current?.getBoundingClientRect().top === 0);
+      } else {
+        requestAnimationFrame(onScroll);
+      }
+    }
+    window.addEventListener('scroll', onScroll);
+    window.addEventListener('resize', onScroll);
+    onScroll();
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [$stickyNav, setVisible]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sticky-nav",
+    ref: $stickyNav,
+    "data-visible": visible
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sticky-nav__wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sticky-nav__links"
+  }, /*#__PURE__*/_react.default.createElement(NavItem, {
+    label: "home",
+    link: homePath,
+    text: siteTitle
+  }), /*#__PURE__*/_react.default.createElement(NavItem, {
+    label: "typefaces",
+    link: typefacesPath,
+    text: "Typefaces"
+  }), /*#__PURE__*/_react.default.createElement(NavItem, {
+    label: "about",
+    link: aboutPath,
+    text: "About & contact"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sticky-nav__item",
+    "data-label": "cart"
+  }, /*#__PURE__*/_react.default.createElement(_CartButton.default, null))));
+}
+var _default = StickyNav;
+exports.default = _default;

package/dist-cjs/components/StoreModal/StoreModalBundleButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StoreModalBundleButton;
+var _StoreModalBundleButton_bundle2 = _interopRequireDefault(require("../../__generated__/StoreModalBundleButton_bundle.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+var _reactRedux = require("react-redux");
+var _SKUPrice = _interopRequireDefault(require("../SKUPrice"));
+var _Price = require("../Price");
+var _FontStyle = _interopRequireDefault(require("../FontStyle"));
+var _reducer = require("../../reducer");
+var _StoreModalStyleButton = _interopRequireDefault(require("../elements/StoreModalStyleButton"));
+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 THIN_SPACE = '\u2009';
+function StoreModalBundleButton({
+  bundle: bundleKey,
+  onSelectSku,
+  ...rest
+}) {
+  const bundle = (0, _reactRelay.useFragment)((_StoreModalBundleButton_bundle2.default.hash && _StoreModalBundleButton_bundle2.default.hash !== "524b936dedb01e6669ca020b96e28ea6" && console.error("The definition of 'StoreModalBundleButton_bundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalBundleButton_bundle2.default), bundleKey);
+  const selected = (0, _reactRedux.useSelector)((0, _reducer.isSelected)(bundle?.sku?.id ?? null));
+  if (!bundle.sku || !bundle.fontStyles) return null;
+  const handleSelect = () => {
+    if (!bundle.sku) return;
+    onSelectSku(bundle.sku.id, !selected);
+  };
+  return /*#__PURE__*/_react.default.createElement(_StoreModalStyleButton.default, _extends({}, rest, {
+    onClick: handleSelect,
+    selected: selected
+  }), {
+    featureGlyphs: bundle.fontStyles.map((fontStyle, i) => /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+      key: fontStyle.id,
+      fontStyle: fontStyle,
+      Component: "span"
+    }, i !== 0 && THIN_SPACE, "Aa")),
+    name: bundle.name,
+    price: /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+      sku: bundle.sku,
+      format: _Price.PriceFormat.Truncated,
+      showCollectionSavings: !selected
+    })
+  });
+}

package/dist-cjs/components/StoreModal/StoreModalCart.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StoreModalCartQuery2 = _interopRequireDefault(require("../../__generated__/StoreModalCartQuery.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+var _CartItem = _interopRequireDefault(require("../Cart/CartItem"));
+var _StoreModalPageContainer = _interopRequireDefault(require("../elements/StoreModalPageContainer"));
+var _CartState = _interopRequireDefault(require("../Cart/CartState"));
+var _CartTotals = _interopRequireDefault(require("../Cart/CartTotals"));
+var _CouponCodeInput = _interopRequireDefault(require("../Cart/CouponCodeInput"));
+var _StoreModalCartLayout = _interopRequireDefault(require("../elements/StoreModalCartLayout"));
+var _EmptyCart = _interopRequireDefault(require("../elements/EmptyCart"));
+var _StoreModalOrderVariableSelection = _interopRequireDefault(require("./StoreModalOrderVariableSelection"));
+var _StoreModalUnifiedCheckout = _interopRequireDefault(require("../elements/StoreModalUnifiedCheckout"));
+var _StripeProvider = _interopRequireDefault(require("../StripeProvider"));
+var _utils = require("../Cart/utils");
+var _ShareCart = _interopRequireDefault(require("../Cart/ShareCart"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// @ts-ignore
+
+const StoreModalCart = ({
+  prepared
+}) => {
+  const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalCartQuery2.default.hash && _StoreModalCartQuery2.default.hash !== "cfbbbef5d65b35eacebf30617fe2538e" && console.error("The definition of 'StoreModalCartQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalCartQuery2.default), prepared.cartQuery);
+  const order = data.viewer.currentOrder;
+  const orderHasItems = (order?.orderItems?.length ?? 0) > 0;
+  const checkoutEnabled = (0, _utils.textVariablesAllHaveText)(order);
+  return /*#__PURE__*/_react.default.createElement(_StoreModalPageContainer.default, null, {
+    body: order && orderHasItems ? /*#__PURE__*/_react.default.createElement(_CartState.default, {
+      order: order
+    }, ({
+      onUpdateOrderVariableSelections,
+      onRemoveDiscount,
+      onUpdateOrderItem,
+      errors
+    }) => {
+      return /*#__PURE__*/_react.default.createElement(_StoreModalCartLayout.default, {
+        checkoutEnabled: checkoutEnabled
+      }, {
+        orderVariables: data.viewer?.currentOrder?.orderVariableSelections?.length ? /*#__PURE__*/_react.default.createElement(_StoreModalOrderVariableSelection.default, {
+          viewer: data.viewer,
+          order: order,
+          onSelectionChange: onUpdateOrderVariableSelections
+        }) : null,
+        items: order?.orderItems?.map((item, i) => /*#__PURE__*/_react.default.createElement(_CartItem.default, {
+          node: item,
+          key: item.id,
+          onChange: onUpdateOrderItem,
+          errors: errors?.orderItems?.[i]
+        })),
+        couponCodeInput: !(order && order.discount) && /*#__PURE__*/_react.default.createElement(_CouponCodeInput.default, null),
+        shareCart: /*#__PURE__*/_react.default.createElement(_ShareCart.default, {
+          key: order.total?.amount
+        }),
+        totals: /*#__PURE__*/_react.default.createElement(_CartTotals.default, {
+          order: order,
+          onRemoveDiscount: onRemoveDiscount,
+          billingIdentity: order.billingIdentity,
+          taxSystem: data.viewer?.settings?.taxSystem
+        }),
+        checkout: /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
+          viewer: data.viewer,
+          providerType: "elements"
+        }, /*#__PURE__*/_react.default.createElement(_StoreModalUnifiedCheckout.default, {
+          viewer: data.viewer,
+          order: order,
+          onScrollToTop: () => {},
+          onUpdateOrderVariableSelections: onUpdateOrderVariableSelections
+        }))
+      });
+    }) : /*#__PURE__*/_react.default.createElement(_EmptyCart.default, null)
+  });
+};
+var _default = StoreModalCart;
+exports.default = _default;

package/dist-cjs/components/StoreModal/StoreModalCheckout.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StoreModalCheckoutQuery2 = _interopRequireDefault(require("../../__generated__/StoreModalCheckoutQuery.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+var _StripeProvider = _interopRequireDefault(require("../StripeProvider"));
+var _reactStripeJs = require("@stripe/react-stripe-js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StoreModalCheckout = ({
+  prepared
+}) => {
+  const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalCheckoutQuery2.default.hash && _StoreModalCheckoutQuery2.default.hash !== "70ae58665e32b49a33ffd9d27ff5e0cc" && console.error("The definition of 'StoreModalCheckoutQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalCheckoutQuery2.default), prepared.checkoutQuery);
+  const viewer = data.viewer;
+  return /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
+    viewer: viewer,
+    providerType: "checkout"
+  }, /*#__PURE__*/_react.default.createElement(_reactStripeJs.EmbeddedCheckout, null));
+};
+var _default = StoreModalCheckout;
+exports.default = _default;

package/dist-cjs/components/StoreModal/StoreModalCheckoutContext.js

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

package/dist-cjs/components/StoreModal/StoreModalContainer.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StoreModalContainerQuery2 = _interopRequireDefault(require("../../__generated__/StoreModalContainerQuery.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _StoreModalContainer = _interopRequireDefault(require("../elements/StoreModalContainer"));
+var _reactRelay = require("react-relay");
+var _StoreModalCheckoutContext = _interopRequireDefault(require("./StoreModalCheckoutContext"));
+var _CheckoutSteps = _interopRequireDefault(require("../Cart/CheckoutSteps"));
+var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
+var _StoreModalLoadingScreen = _interopRequireDefault(require("../elements/StoreModalLoadingScreen"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+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 }; }
+const getPageTitle = name => {
+  switch (name) {
+    case 'index':
+      return 'All collections';
+    case 'product':
+      return 'Buying options';
+    case 'cart':
+      return 'Cart';
+    case 'checkout':
+      return 'Checkout';
+    case 'review':
+      return 'Review';
+  }
+};
+const getBackLink = (history, currentRoute) => {
+  if (currentRoute !== 'index' && history.length === 0) return 'All collections';
+  const previous = history[history.length - 1];
+  if (!previous) return null;
+  return getPageTitle(previous.name);
+};
+const StoreModalContainer = ({
+  children
+}) => {
+  const data = (0, _reactRelay.useLazyLoadQuery)((_StoreModalContainerQuery2.default.hash && _StoreModalContainerQuery2.default.hash !== "ae784b9ab1842dacc5857b045b399701" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery2.default), {});
+  const uiFontStyle = data.viewer.settings?.uiFontStyle;
+  const uiFontStyleBold = data.viewer.settings?.uiFontStyleBold;
+  (0, _useFontStyle.default)({
+    fontStyle: uiFontStyle
+  });
+  (0, _useFontStyle.default)({
+    fontStyle: uiFontStyleBold
+  });
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const orderItemCount = data.viewer.currentOrder?.orderItems?.length ?? 0;
+  const showCartButton = orderItemCount > 0;
+  const handleClose = (0, _react.useCallback)(() => {
+    dispatch({
+      type: 'CLOSE_CART'
+    });
+  }, [dispatch]);
+  const currentRoute = (0, _reactRedux.useSelector)(state => state.storeModalRoute.name);
+  const history = (0, _reactRedux.useSelector)(state => state.storeModalHistory);
+  const link = getBackLink(history, currentRoute);
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const handleBack = () => {
+    if (history.length === 0) {
+      dispatch({
+        type: 'STORE_MODAL_REPLACE',
+        route: 'index',
+        variables: {
+          excludeTags: config.storeModal.indexExcludeTags
+        }
+      });
+    } else {
+      dispatch({
+        type: 'STORE_MODAL_BACK'
+      });
+    }
+  };
+  const handleCart = () => {
+    dispatch({
+      type: 'STORE_MODAL_NAVIGATE',
+      route: 'cart'
+    });
+  };
+  const [checkoutStep, setCheckoutStep] = (0, _react.useState)(_CheckoutSteps.default.Customer);
+  const [checkoutError, setCheckoutError] = (0, _react.useState)(null);
+  const regularName = uiFontStyle ? `${uiFontStyle.cssFamily} ${uiFontStyle.name}` : null;
+  const boldName = uiFontStyleBold ? `${uiFontStyleBold.cssFamily} ${uiFontStyleBold.name}` : null;
+  return /*#__PURE__*/_react.default.createElement(_StoreModalCheckoutContext.default.Provider, {
+    value: {
+      checkoutStep,
+      setCheckoutStep,
+      checkoutError,
+      setCheckoutError
+    }
+  }, /*#__PURE__*/_react.default.createElement(_StoreModalContainer.default, {
+    onClickBackground: handleClose,
+    onClickClose: handleClose,
+    onClickBack: handleBack,
+    onClickCart: handleCart,
+    showCartButton: showCartButton,
+    orderItemCount: orderItemCount,
+    fonts: {
+      regular: regularName,
+      bold: boldName
+    },
+    routeName: currentRoute
+  }, {
+    backText: link,
+    pageTitle: getPageTitle(currentRoute),
+    body: /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+      fallback: /*#__PURE__*/_react.default.createElement(_StoreModalLoadingScreen.default, null)
+    }, children)
+  }));
+};
+var _default = StoreModalContainer;
+exports.default = _default;

package/dist-cjs/components/StoreModal/StoreModalDownload.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StoreModalDownloadRefetchQuery2 = _interopRequireDefault(require("../../__generated__/StoreModalDownloadRefetchQuery.graphql"));
+var _StoreModalDownload_order2 = _interopRequireDefault(require("../../__generated__/StoreModalDownload_order.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _StoreModalPageContainer = _interopRequireDefault(require("../elements/StoreModalPageContainer"));
+var _StoreModalDownloadLayout = _interopRequireDefault(require("../elements/StoreModalDownloadLayout"));
+var _useInterval = _interopRequireDefault(require("../useInterval"));
+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 }; }
+const StoreModalDownload = ({
+  order,
+  relay
+}) => {
+  (0, _useInterval.default)(() => {
+    if (order.archiveUrl) return;
+    relay.refetch({
+      id: order.id
+    });
+  }, 2000);
+  return /*#__PURE__*/_react.default.createElement(_StoreModalPageContainer.default, null, {
+    body: /*#__PURE__*/_react.default.createElement(_StoreModalDownloadLayout.default, {
+      archiveUrl: order.archiveUrl
+    }, {
+      message: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Your order was confirmed."), /*#__PURE__*/_react.default.createElement("p", null, "Your download is ", order.archiveUrl ? 'ready.' : 'being prepared...'), /*#__PURE__*/_react.default.createElement("p", null, "An email receipt with a download link has been sent to your email address."))
+    })
+  });
+};
+var _default = (0, _reactRelay.createRefetchContainer)(StoreModalDownload, {
+  order: (_StoreModalDownload_order2.default.hash && _StoreModalDownload_order2.default.hash !== "089669cea2185d50b071a901cfd3b159" && console.error("The definition of 'StoreModalDownload_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalDownload_order2.default)
+}, (_StoreModalDownloadRefetchQuery2.default.hash && _StoreModalDownloadRefetchQuery2.default.hash !== "f4bd85e641db0b1e20e780b7a0cdaf98" && console.error("The definition of 'StoreModalDownloadRefetchQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalDownloadRefetchQuery2.default));
+exports.default = _default;

package/dist-cjs/components/StoreModal/StoreModalFamily.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StoreModalFamily;
+var _StoreModalFamily_collection2 = _interopRequireDefault(require("../../__generated__/StoreModalFamily_collection.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _StoreModalFamilyButton = _interopRequireDefault(require("./StoreModalFamilyButton"));
+var _StoreModalStyleButton = _interopRequireDefault(require("./StoreModalStyleButton"));
+var _StoreModalFamily = _interopRequireDefault(require("../elements/StoreModalFamily"));
+var _StoreModalBundleButton = _interopRequireDefault(require("./StoreModalBundleButton"));
+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 }; }
+// chunk items if they match condition, but only chunk if they match in
+// consecutive order. this prevents the list from being reordered
+function chunkConsecutiveBy(collection, compare) {
+  return collection.reduce((acc, item) => {
+    const last = acc[acc.length - 1];
+    if (last && compare(last[0], item)) {
+      return [...acc.slice(0, acc.length - 1), last.concat(item)];
+    }
+    return acc.concat([[item]]);
+  }, []);
+}
+const stylesGrouped = collection => {
+  if (!collection.fontStyles) return [];
+  return chunkConsecutiveBy(collection.fontStyles, (left, right) => left.cssFamily === right.cssFamily && left.cssWeight === right.cssWeight && left.cssStretch === right.cssStretch);
+};
+function StoreModalFamily({
+  collection: collectionKey,
+  onSelect,
+  title
+}) {
+  const collection = (0, _reactRelay.useFragment)((_StoreModalFamily_collection2.default.hash && _StoreModalFamily_collection2.default.hash !== "73d00dd2b57a2b44a86ee085b4313d77" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection2.default), collectionKey);
+  const fontStyles = (0, _react.useMemo)(() => stylesGrouped(collection), [collection]);
+  if (fontStyles?.length === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
+  return /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, null, {
+    title,
+    familyButton: /*#__PURE__*/_react.default.createElement(_StoreModalFamilyButton.default, {
+      collection: collection,
+      onSelectSku: onSelect
+    }),
+    bundles: collection?.bundles?.filter(bundle => !bundle.hidden).map(bundle => /*#__PURE__*/_react.default.createElement(_StoreModalBundleButton.default, {
+      key: bundle.id,
+      bundle: bundle,
+      onSelectSku: onSelect
+    })),
+    styleGroups: fontStyles.map(group => group.map(fontStyle => /*#__PURE__*/_react.default.createElement(_StoreModalStyleButton.default, {
+      key: fontStyle.id,
+      fontStyle: fontStyle,
+      onSelectSku: onSelect,
+      isVariableFont: collection.isVariableFont
+    })))
+  });
+}

package/dist-cjs/components/StoreModal/StoreModalFamilyButton.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FamilyButton;
+var _StoreModalFamilyButton_collection2 = _interopRequireDefault(require("../../__generated__/StoreModalFamilyButton_collection.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+var _reactRedux = require("react-redux");
+var _SKUPrice = _interopRequireDefault(require("../SKUPrice"));
+var _Price = require("../Price");
+var _reducer = require("../../reducer");
+var _StoreModalFamilyButton = _interopRequireDefault(require("../elements/StoreModalFamilyButton"));
+var _FontStyle = _interopRequireDefault(require("../FontStyle"));
+var _useTotalStyles = _interopRequireDefault(require("../useTotalStyles"));
+var _utils = require("../../utils");
+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 getFamilyType = collection => {
+  if (collection.collectionType === 'superfamily') return 'Collection';
+  return 'Family';
+};
+const getSuffix = collection => {
+  if (collection.isVariableFont) return;
+  return ' ' + getFamilyType(collection);
+};
+function FamilyButton({
+  collection: collectionKey,
+  onSelectSku,
+  ...rest
+}) {
+  const collection = (0, _reactRelay.useFragment)((_StoreModalFamilyButton_collection2.default.hash && _StoreModalFamilyButton_collection2.default.hash !== "3ca5466b4680374b74cf161a9bdef313" && console.error("The definition of 'StoreModalFamilyButton_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamilyButton_collection2.default), collectionKey);
+  const selector = collection.sku ? (0, _reducer.isSelected)(collection.sku.id) : () => false;
+  const selected = (0, _reactRedux.useSelector)(selector);
+  const handleClick = () => {
+    if (!collection.sku) return;
+    onSelectSku(collection.sku.id, !selected);
+  };
+  const {
+    totalStyles,
+    variableFonts
+  } = (0, _useTotalStyles.default)({
+    fontCollection: collection
+  });
+  let label = [];
+  if (totalStyles > 0) {
+    label.push((0, _utils.pluralize)(totalStyles, 'style'));
+  }
+  if (variableFonts > 0) {
+    label.push((0, _utils.pluralize)(variableFonts, 'variable font'));
+  }
+  const supportsEnglish = collection.featureStyle?.supportedLanguages?.includes('en');
+  return /*#__PURE__*/_react.default.createElement(_StoreModalFamilyButton.default, _extends({
+    selected: selected,
+    onClick: collection.sku ? handleClick : undefined,
+    supportsEnglish: supportsEnglish ?? true
+  }, rest), {
+    name: collection.featureStyle && supportsEnglish ? /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+      Component: "span",
+      fontStyle: collection.featureStyle
+    }, collection.name, getSuffix(collection)) : /*#__PURE__*/_react.default.createElement("span", null, collection.name, " ", getSuffix(collection)),
+    label: label.join(', '),
+    price: collection.sku && /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+      sku: collection.sku,
+      format: _Price.PriceFormat.Truncated
+    })
+  });
+}

package/dist-cjs/components/StoreModal/StoreModalIndex.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StoreModalIndexQuery2 = _interopRequireDefault(require("../../__generated__/StoreModalIndexQuery.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+var _StoreModalPageContainer = _interopRequireDefault(require("../elements/StoreModalPageContainer"));
+var _StoreModalIndexItem = _interopRequireDefault(require("./StoreModalIndexItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StoreModalIndex = ({
+  prepared
+}) => {
+  const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalIndexQuery2.default.hash && _StoreModalIndexQuery2.default.hash !== "300b462c41a951b4f94c4b8da7a6821f" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery2.default), prepared.indexQuery);
+  const viewer = data.viewer;
+  const edges = viewer?.rootCollections?.edges ?? [];
+  return /*#__PURE__*/_react.default.createElement(_StoreModalPageContainer.default, null, {
+    body: edges.map(edge => /*#__PURE__*/_react.default.createElement(_StoreModalIndexItem.default, {
+      collection: edge.node,
+      key: edge.node.id
+    }))
+  });
+};
+var _default = StoreModalIndex;
+exports.default = _default;

package/dist-cjs/components/StoreModal/StoreModalIndexItem.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StoreModalIndexItem_fontCollection2 = _interopRequireDefault(require("../../__generated__/StoreModalIndexItem_fontCollection.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _reactRelay = require("react-relay");
+var _StoreModalIndexItem = _interopRequireDefault(require("../elements/StoreModalIndexItem"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _FontStyle = _interopRequireDefault(require("../FontStyle"));
+var _useTotalStyles = _interopRequireDefault(require("../useTotalStyles"));
+var _utils = require("../../utils");
+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 }; }
+const StoreModalIndexItem = ({
+  collection
+}) => {
+  const {
+    storeModal: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const data = (0, _reactRelay.useFragment)((_StoreModalIndexItem_fontCollection2.default.hash && _StoreModalIndexItem_fontCollection2.default.hash !== "8a990fad8dc50c9f00b391902e9bc482" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection2.default), collection);
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const handleClickProduct = productId => {
+    dispatch({
+      type: 'STORE_MODAL_NAVIGATE',
+      route: 'product',
+      variables: {
+        productId
+      }
+    });
+  };
+  const {
+    totalStyles,
+    variableFonts
+  } = (0, _useTotalStyles.default)({
+    fontCollection: data
+  });
+  let label = [];
+  if (totalStyles > 0) {
+    label.push((0, _utils.pluralize)(totalStyles, 'style'));
+  }
+  if (variableFonts > 0) {
+    label.push((0, _utils.pluralize)(variableFonts, 'variable font'));
+  }
+  return /*#__PURE__*/_react.default.createElement(_StoreModalIndexItem.default, {
+    key: data.id,
+    onClick: handleClickProduct.bind(null, data.id)
+  }, {
+    aa: config.indexLayout === 'styled-aa' && (data.featureStyle ? /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+      fontStyle: data.featureStyle
+    }, (0, _utils.getFeatureGlyphs)(data.featureStyle?.supportedLanguages)) : null),
+    name: config.indexLayout === 'styled-font-names' ? data.featureStyle && /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+      fontStyle: data.featureStyle
+    }, data.name) : data.name,
+    label: label.join(', ')
+  });
+};
+var _default = StoreModalIndexItem;
+exports.default = _default;