fontdue-js 3.7.0 → 3.8.0

package/dist/components/NodePasswordForm/NodePasswordFormElement.js

@@ -1,6 +1,7 @@
 'use client';
 
 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); }
+import _NodePasswordFormElementPackSlugQuery from "../../__generated__/NodePasswordFormElementPackSlugQuery.graphql.js";
 import _NodePasswordFormElementSlugQuery from "../../__generated__/NodePasswordFormElementSlugQuery.graphql.js";
 import _NodePasswordFormElementIDQuery from "../../__generated__/NodePasswordFormElementIDQuery.graphql.js";
 import React from 'react';
@@ -8,25 +9,25 @@ import { graphql, useLazyLoadQuery } from 'react-relay';
 import NodePasswordForm from './index.js';
 // Auto-detecting wrapper behind the <fontdue-node-password-form> custom element.
 // Unlike the presentational React component (the default export of ./index, used
-// when the server has already detected the lock), this queries the collection
-// itself and renders the form only when access is denied — so it works dropped
-// onto any page, hiding itself for a visitor who already has access.
+// when the server has already detected the lock), this queries the product itself
+// – a collection or a font pack – and renders the form only when access is
+// denied, so it works dropped onto any page, hiding itself for a visitor who
+// already has access.
 
-const idQuery = (_NodePasswordFormElementIDQuery.hash && _NodePasswordFormElementIDQuery.hash !== "213a61ae079e4f57b7b197b0d2f5256a" && console.error("The definition of 'NodePasswordFormElementIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementIDQuery);
+// `node(id:)` resolves a collection and a pack alike, so one query serves both.
+const idQuery = (_NodePasswordFormElementIDQuery.hash && _NodePasswordFormElementIDQuery.hash !== "fa35f237c6ea919a7afbe22c86ca19b5" && console.error("The definition of 'NodePasswordFormElementIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementIDQuery);
 function NodePasswordFormIDQueryRenderer(_ref) {
   let {
-    collectionId,
-    ...rest
+    nodeId,
+    ...props
   } = _ref;
   const data = useLazyLoadQuery(idQuery, {
-    collectionId
+    nodeId
   });
   // The @catch directive surfaces the password-protection error as ok:false; the
   // node is only locked then, so only then do we render the form (we don't want
   // to show it to a visitor who already has access).
-  if (data.collection.ok === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, rest, {
-    collectionId: collectionId
-  }));
+  if (data.node.ok === false) return /*#__PURE__*/React.createElement(NodePasswordForm, props);
   return null;
 }
 const slugQuery = (_NodePasswordFormElementSlugQuery.hash && _NodePasswordFormElementSlugQuery.hash !== "200a33ca6a1f9e4e7e95b7100bbdd261" && console.error("The definition of 'NodePasswordFormElementSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementSlugQuery);
@@ -34,32 +35,55 @@ function NodePasswordFormSlugQueryRenderer(_ref2) {
   var _data$viewer$slug;
   let {
     collectionSlug,
-    ...rest
+    ...props
   } = _ref2;
   const data = useLazyLoadQuery(slugQuery, {
     collectionSlug
   });
   // see note in NodePasswordFormIDQueryRenderer
-  if (((_data$viewer$slug = data.viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, rest, {
+  if (((_data$viewer$slug = data.viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, props, {
     collectionSlug: collectionSlug
   }));
   return null;
 }
-export default function NodePasswordFormElement(_ref3) {
+const packSlugQuery = (_NodePasswordFormElementPackSlugQuery.hash && _NodePasswordFormElementPackSlugQuery.hash !== "3186720cb9ad751d233e995a102efcd1" && console.error("The definition of 'NodePasswordFormElementPackSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementPackSlugQuery);
+function NodePasswordFormPackSlugQueryRenderer(_ref3) {
+  var _data$viewer$slug2;
   let {
+    fontPackSlug,
+    ...props
+  } = _ref3;
+  const data = useLazyLoadQuery(packSlugQuery, {
+    fontPackSlug
+  });
+  // see note in NodePasswordFormIDQueryRenderer
+  if (((_data$viewer$slug2 = data.viewer.slug) === null || _data$viewer$slug2 === void 0 ? void 0 : _data$viewer$slug2.pack.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, props, {
+    fontPackSlug: fontPackSlug
+  }));
+  return null;
+}
+export default function NodePasswordFormElement(props) {
+  const {
     collectionId,
     collectionSlug,
-    ...rest
-  } = _ref3;
-  if (collectionId) {
+    fontPackId,
+    fontPackSlug
+  } = props;
+  const nodeId = collectionId || fontPackId;
+  if (nodeId) {
     return /*#__PURE__*/React.createElement(NodePasswordFormIDQueryRenderer, _extends({
-      collectionId: collectionId
-    }, rest));
+      nodeId: nodeId
+    }, props));
   }
   if (collectionSlug) {
-    return /*#__PURE__*/React.createElement(NodePasswordFormSlugQueryRenderer, _extends({
+    return /*#__PURE__*/React.createElement(NodePasswordFormSlugQueryRenderer, _extends({}, props, {
       collectionSlug: collectionSlug
-    }, rest));
+    }));
+  }
+  if (fontPackSlug) {
+    return /*#__PURE__*/React.createElement(NodePasswordFormPackSlugQueryRenderer, _extends({}, props, {
+      fontPackSlug: fontPackSlug
+    }));
   }
-  throw new Error('NodePasswordForm expected either a collectionId or collectionSlug prop');
+  throw new Error('NodePasswordForm expected a collectionId, collectionSlug, fontPackId or fontPackSlug prop');
 }

package/dist/components/NodePasswordForm/index.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 export interface NodePasswordForm_props {
     collectionId?: string | null;
     collectionSlug?: string | null;
+    /** A font pack's identifiers, in place of the collection ones. */
+    fontPackId?: string | null;
+    fontPackSlug?: string | null;
     /**
      * Path of the storefront's unlock route (see fontdue-js/next/unlock), e.g.
      * "/api/unlock". On a successful unlock the form POSTs `{ token }` there
@@ -15,10 +18,10 @@ export interface NodePasswordForm_props {
     unlockEndpoint?: string | null;
 }
 /**
- * Password form for a collection you already know is locked. Render it when a
- * collection comes back password-protected (see the per-framework guides): it
- * commits the `accessNode` mutation, remembers the returned access token, and
- * reloads so the now-unlocked collection renders.
+ * Password form for a collection or font pack you already know is locked.
+ * Render it when the product comes back password-protected (see the
+ * per-framework guides): it commits the `accessNode` mutation, remembers the
+ * returned access token, and reloads so the now-unlocked product renders.
  *
  * Unlike the `<fontdue-node-password-form>` custom element (which detects the
  * locked state itself), this does no data fetching of its own, so it renders

package/dist/components/NodePasswordForm/index.js

@@ -8,10 +8,10 @@ import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
 import { rememberNodeAccessToken } from '../../nodeAccess.js';
 const accessNodeMutation = (_NodePasswordFormAccessNodeMutation.hash && _NodePasswordFormAccessNodeMutation.hash !== "eb0d3828d65a52c727ef60caa67709a1" && console.error("The definition of 'NodePasswordFormAccessNodeMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormAccessNodeMutation);
 /**
- * Password form for a collection you already know is locked. Render it when a
- * collection comes back password-protected (see the per-framework guides): it
- * commits the `accessNode` mutation, remembers the returned access token, and
- * reloads so the now-unlocked collection renders.
+ * Password form for a collection or font pack you already know is locked.
+ * Render it when the product comes back password-protected (see the
+ * per-framework guides): it commits the `accessNode` mutation, remembers the
+ * returned access token, and reloads so the now-unlocked product renders.
  *
  * Unlike the `<fontdue-node-password-form>` custom element (which detects the
  * locked state itself), this does no data fetching of its own, so it renders
@@ -65,8 +65,8 @@ function NodePasswordFormFields(props) {
       variables: {
         input: {
           password,
-          id: props.collectionId,
-          slug: props.collectionSlug
+          id: props.collectionId || props.fontPackId || undefined,
+          slug: props.collectionSlug || props.fontPackSlug || undefined
         }
       },
       onCompleted: res => {

package/dist/components/Root/productState.js

@@ -1,4 +1,5 @@
 import _productState_Query from "../../__generated__/productState_Query.graphql.js";
+import _productState_fontPack from "../../__generated__/productState_fontPack.graphql.js";
 import _productState_node from "../../__generated__/productState_node.graphql.js";
 import _productState_collectionBundle from "../../__generated__/productState_collectionBundle.graphql.js";
 import _productState_bundle from "../../__generated__/productState_bundle.graphql.js";
@@ -11,7 +12,13 @@ _productState_collection.hash && _productState_collection.hash !== "90e56933f956
 _productState_bundle.hash && _productState_bundle.hash !== "fa38bbc9f2062a727da4f5062b362054" && console.error("The definition of 'productState_bundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_bundle;
 _productState_collectionBundle.hash && _productState_collectionBundle.hash !== "6744aa8f57d14b0111a0c49f488d7b03" && console.error("The definition of 'productState_collectionBundle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collectionBundle;
 _productState_node.hash && _productState_node.hash !== "a1e172db45ca550a254819d877497d12" && console.error("The definition of 'productState_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_node;
-const query = (_productState_Query.hash && _productState_Query.hash !== "ac3292bae9a274139d5a525fd0162711" && console.error("The definition of 'productState_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_Query);
+
+// A pack is one SKU that grants every style in `fontStyles`. Its collection
+// members (a family or a superfamily with its families) are fetched in the
+// same shape as a collection product so they register as ordinary
+// collections, with the pack sitting above them.
+_productState_fontPack.hash && _productState_fontPack.hash !== "43a236a4ddb4436a51d765a07e2b0eac" && console.error("The definition of 'productState_fontPack' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_fontPack;
+const query = (_productState_Query.hash && _productState_Query.hash !== "65de750413d1564c4f3e1ec44ec7e2a2" && console.error("The definition of 'productState_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_Query);
 export const populateProductState = (store, environment, id) => {
   const existingState = store.getState().fetchedCollectionIds;
   if (existingState && existingState.indexOf(id) >= 0) return;
@@ -24,6 +31,7 @@ export const populateProductState = (store, environment, id) => {
     })
   });
 };
+const packMemberCollections = pack => pack.members.filter(member => member.__typename === 'FontCollection');
 const allSkus = function (collection) {
   var _collection$fontStyle;
   let includeCollections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -98,19 +106,54 @@ const flattenSkuStyleIds = collection => {
   for (const child of nested) Object.assign(result, flattenSkuStyleIds(child));
   return result;
 };
+
+// The pack's SKU grants every style the pack lists, its style members' SKUs
+// their one style each, and its collection members (a family, or a superfamily
+// with its families) register like the collections they are – so the pack sits
+// over them the way a superfamily sits over its families.
+const flattenPackSkuStyleIds = pack => {
+  const result = {};
+  for (const member of packMemberCollections(pack)) {
+    Object.assign(result, flattenSkuStyleIds(member));
+  }
+  for (const style of pack.fontStyles) {
+    if (style.sku) result[style.sku.id] = [style.id];
+  }
+  const styleIds = pack.fontStyles.map(style => style.id);
+  if (pack.sku && styleIds.length > 0) result[pack.sku.id] = styleIds;
+  return result;
+};
 const flattenSkuPrices = collection => {
   return allSkus(collection).reduce((acc, sku) => {
     acc[sku.id] = sku.price.amount;
     return acc;
   }, {});
 };
+const flattenPackSkuPrices = pack => {
+  const skus = [pack.sku, ...pack.fontStyles.map(style => style.sku), ...packMemberCollections(pack).flatMap(member => allSkus(member))].filter(notEmpty);
+  return skus.reduce((acc, sku) => {
+    acc[sku.id] = sku.price.amount;
+    return acc;
+  }, {});
+};
 export const populateProductStateReducer = (state, action) => {
-  var _data$node, _data$node$sku;
+  var _node$sku;
   if (action.type !== 'POPULATE_PRODUCT_STATE') return state;
   const {
     data
   } = action;
-  if (((_data$node = data.node) === null || _data$node === void 0 ? void 0 : _data$node.__typename) !== 'FontCollection') return state;
+  const node = data.node;
+  let skuStyleIds;
+  let skuPrices;
+  if ((node === null || node === void 0 ? void 0 : node.__typename) === 'FontCollection') {
+    skuStyleIds = flattenSkuStyleIds(node);
+    skuPrices = flattenSkuPrices(node);
+  } else if ((node === null || node === void 0 ? void 0 : node.__typename) === 'FontPack') {
+    skuStyleIds = flattenPackSkuStyleIds(node);
+    skuPrices = flattenPackSkuPrices(node);
+  } else {
+    return state;
+  }
   return {
     ...state,
     // {
@@ -118,22 +161,29 @@ export const populateProductStateReducer = (state, action) => {
     // }
     skuStyleIds: {
       ...state.skuStyleIds,
-      ...flattenSkuStyleIds(data.node)
+      ...skuStyleIds
     },
     // {
     //   [skuId]: amount,
     // }
     skuPrices: {
       ...state.skuPrices,
-      ...flattenSkuPrices(data.node)
+      ...skuPrices
     },
     // {
     //   [collectionId]: [skuId]
     // }
     collectionSkus: {
       ...state.collectionSkus,
-      [`${data.node.id}`]: ((_data$node$sku = data.node.sku) === null || _data$node$sku === void 0 ? void 0 : _data$node$sku.id) ?? null
+      [`${node.id}`]: ((_node$sku = node.sku) === null || _node$sku === void 0 ? void 0 : _node$sku.id) ?? null
+    },
+    // {
+    //   [productId]: [skuId...]
+    // }
+    productSkuIds: {
+      ...state.productSkuIds,
+      [`${node.id}`]: Object.keys(skuPrices)
     },
-    fetchedCollectionIds: state.fetchedCollectionIds.concat(data.node.id)
+    fetchedCollectionIds: state.fetchedCollectionIds.concat(node.id)
   };
 };

package/dist/components/StoreModal/StoreModalFamily.d.ts

@@ -5,5 +5,12 @@ interface StoreModalFamilyProps {
     onSelect: (skuId: string, selected: boolean) => void;
     title?: React.ReactNode;
 }
+interface GroupableStyle {
+    cssFamily: string | null;
+    cssWeight: string | null;
+    cssStretch: string | null;
+    cssStyle: string | null;
+}
+export declare function stylesGrouped<T extends GroupableStyle>(fontStyles: ReadonlyArray<T> | null | undefined): ReadonlyArray<ReadonlyArray<T>>;
 export default function StoreModalFamily({ collection: collectionKey, onSelect, title, }: StoreModalFamilyProps): React.JSX.Element | null;
 export {};

package/dist/components/StoreModal/StoreModalFamily.js

@@ -17,9 +17,11 @@ function chunkConsecutiveBy(collection, compare) {
   }, []);
 }
 const isSlanted = cssStyle => cssStyle === 'italic' || cssStyle === 'oblique';
-const stylesGrouped = collection => {
-  if (!collection.fontStyles) return [];
-  const chunks = chunkConsecutiveBy(collection.fontStyles, (left, right) => left.cssFamily === right.cssFamily && left.cssWeight === right.cssWeight && left.cssStretch === right.cssStretch && isSlanted(left.cssStyle) !== isSlanted(right.cssStyle));
+// Pairs each upright style with its italic/oblique so the two render side by
+// side. Shared with the font pack view, which groups a pack's style members.
+export function stylesGrouped(fontStyles) {
+  if (!fontStyles) return [];
+  const chunks = chunkConsecutiveBy(fontStyles, (left, right) => left.cssFamily === right.cssFamily && left.cssWeight === right.cssWeight && left.cssStretch === right.cssStretch && isSlanted(left.cssStyle) !== isSlanted(right.cssStyle));
 
   // Only keep a chunk paired when it's exactly one upright + one slanted
   // (italic or oblique) style. Anything else (3+ consecutive matches, or
@@ -30,7 +32,7 @@ const stylesGrouped = collection => {
     const slantedCount = chunk.filter(s => isSlanted(s.cssStyle)).length;
     return slantedCount === 1 ? [chunk] : chunk.map(style => [style]);
   });
-};
+}
 export default function StoreModalFamily(_ref) {
   var _collection$bundles;
   let {
@@ -39,7 +41,7 @@ export default function StoreModalFamily(_ref) {
     title
   } = _ref;
   const collection = useFragment((_StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "f136cd0050f0f75f561221fac75feb85" && 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_collection), collectionKey);
-  const fontStyles = useMemo(() => stylesGrouped(collection), [collection]);
+  const fontStyles = useMemo(() => stylesGrouped(collection.fontStyles), [collection]);
   if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
   return /*#__PURE__*/React.createElement(FamilyElement, null, {
     title,

package/dist/components/StoreModal/StoreModalIndex.js

@@ -6,6 +6,7 @@ import StoreModalPageContainer from '../elements/StoreModalPageContainer/index.j
 import StoreModalIndexLoadMore from '../elements/StoreModalIndexLoadMore/index.js';
 import StoreModalContainerContext from '../elements/StoreModalContainer/StoreModalContainerContext.js';
 import StoreModalIndexItem from './StoreModalIndexItem.js';
+import StoreModalIndexPackItem from './StoreModalIndexPackItem.js';
 import useInfiniteScroll from '../useInfiniteScroll.js';
 
 // How many collections arrive at a time. Enough that a typical catalogue is one
@@ -18,12 +19,17 @@ const PAGE_SIZE = 25;
 // Start the next page while the sentinel is still this far below the modal's
 // visible area, so the pages join up without the visitor reaching a dead end.
 const LOAD_MORE_MARGIN = '0px 0px 600px 0px';
+// Font packs come first: they're the curated, cross-catalog offers, and there
+// are few of them next to the families – so they arrive whole, with the first
+// page of collections, rather than paginated. Both lists honour the same
+// `indexExcludeTags`, and the backend already leaves out hidden, unlisted and
+// still-locked password-protected packs, as it does for collections.
 const StoreModalIndex = _ref => {
-  var _data$rootCollections;
+  var _queryData$viewer, _queryData$viewer$fon, _data$rootCollections;
   let {
     prepared
   } = _ref;
-  const queryData = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "125a10155b690929f0eae6e9e6c7188c" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
+  const queryData = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "cea53722e4ce3c40a68997218f7e979f" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
 
   // The query type only carries the fragment spread, not its data type, so
   // both sides are named explicitly for `data` to be typed.
@@ -47,9 +53,13 @@ const StoreModalIndex = _ref => {
     rootRef: scrollContainer,
     rootMargin: LOAD_MORE_MARGIN
   });
+  const packEdges = ((_queryData$viewer = queryData.viewer) === null || _queryData$viewer === void 0 ? void 0 : (_queryData$viewer$fon = _queryData$viewer.fontPacks) === null || _queryData$viewer$fon === void 0 ? void 0 : _queryData$viewer$fon.edges) ?? [];
   const edges = (data === null || data === void 0 ? void 0 : (_data$rootCollections = data.rootCollections) === null || _data$rootCollections === void 0 ? void 0 : _data$rootCollections.edges) ?? [];
   return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
-    body: /*#__PURE__*/React.createElement(React.Fragment, null, edges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexItem, {
+    body: /*#__PURE__*/React.createElement(React.Fragment, null, packEdges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexPackItem, {
+      pack: edge.node,
+      key: edge.node.id
+    })), edges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexItem, {
       collection: edge.node,
       key: edge.node.id
     })), hasNext && /*#__PURE__*/React.createElement(StoreModalIndexLoadMore, {

package/dist/components/StoreModal/StoreModalIndexEntry.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FontStyle_fontStyle$key } from '__generated__/FontStyle_fontStyle.graphql.js';
+type FeatureStyle = FontStyle_fontStyle$key & {
+    readonly supportedLanguages: readonly string[] | null | undefined;
+};
+interface StoreModalIndexEntryProps {
+    productId: string;
+    name: string;
+    featureStyle: FeatureStyle | null | undefined;
+    label: string;
+}
+declare const StoreModalIndexEntry: ({ productId, name, featureStyle, label, }: StoreModalIndexEntryProps) => React.JSX.Element;
+export default StoreModalIndexEntry;

package/dist/components/StoreModal/StoreModalIndexEntry.js

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import StoreModalIndexItemElement from '../elements/StoreModalIndexItem/index.js';
+import ConfigContext from '../ConfigContext.js';
+import FontStyle from '../FontStyle/index.js';
+import { getFeatureGlyphs } from '../../utils.js';
+// One row of the store modal's index page. Collections and packs share this
+// – the `indexLayout` config decides whether the feature style draws an "Aa"
+// beside the name or the name itself – and only differ in what they say
+// under the name.
+const StoreModalIndexEntry = _ref => {
+  let {
+    productId,
+    name,
+    featureStyle,
+    label
+  } = _ref;
+  const {
+    storeModal: config
+  } = useContext(ConfigContext);
+  const dispatch = useDispatch();
+  const handleClick = () => {
+    dispatch({
+      type: 'STORE_MODAL_NAVIGATE',
+      route: 'product',
+      variables: {
+        productId
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(StoreModalIndexItemElement, {
+    onClick: handleClick
+  }, {
+    aa: config.indexLayout === 'styled-aa' && (featureStyle ? /*#__PURE__*/React.createElement(FontStyle, {
+      fontStyle: featureStyle
+    }, getFeatureGlyphs(featureStyle.supportedLanguages ?? null)) : null),
+    name: config.indexLayout === 'styled-font-names' ? featureStyle && /*#__PURE__*/React.createElement(FontStyle, {
+      fontStyle: featureStyle
+    }, name) : name,
+    label
+  });
+};
+export default StoreModalIndexEntry;

package/dist/components/StoreModal/StoreModalIndexItem.js

@@ -1,31 +1,14 @@
 import _StoreModalIndexItem_fontCollection from "../../__generated__/StoreModalIndexItem_fontCollection.graphql.js";
-import React, { useContext } from 'react';
-import { useDispatch } from 'react-redux';
+import React from 'react';
 import { graphql, useFragment } from 'react-relay';
-import StoreModalIndexItemElement from '../elements/StoreModalIndexItem/index.js';
-import ConfigContext from '../ConfigContext.js';
-import FontStyle from '../FontStyle/index.js';
+import StoreModalIndexEntry from './StoreModalIndexEntry.js';
 import useTotalStyles from '../useTotalStyles.js';
-import { getFeatureGlyphs, pluralize } from '../../utils.js';
+import { pluralize } from '../../utils.js';
 const StoreModalIndexItem = _ref => {
-  var _data$featureStyle;
   let {
     collection
   } = _ref;
-  const {
-    storeModal: config
-  } = useContext(ConfigContext);
   const data = useFragment((_StoreModalIndexItem_fontCollection.hash && _StoreModalIndexItem_fontCollection.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_fontCollection), collection);
-  const dispatch = useDispatch();
-  const handleClickProduct = productId => {
-    dispatch({
-      type: 'STORE_MODAL_NAVIGATE',
-      route: 'product',
-      variables: {
-        productId
-      }
-    });
-  };
   const {
     totalStyles,
     variableFonts
@@ -39,16 +22,10 @@ const StoreModalIndexItem = _ref => {
   if (variableFonts > 0) {
     label.push(pluralize(variableFonts, 'variable font'));
   }
-  return /*#__PURE__*/React.createElement(StoreModalIndexItemElement, {
-    key: data.id,
-    onClick: handleClickProduct.bind(null, data.id)
-  }, {
-    aa: config.indexLayout === 'styled-aa' && (data.featureStyle ? /*#__PURE__*/React.createElement(FontStyle, {
-      fontStyle: data.featureStyle
-    }, getFeatureGlyphs((_data$featureStyle = data.featureStyle) === null || _data$featureStyle === void 0 ? void 0 : _data$featureStyle.supportedLanguages)) : null),
-    name: config.indexLayout === 'styled-font-names' ? data.featureStyle && /*#__PURE__*/React.createElement(FontStyle, {
-      fontStyle: data.featureStyle
-    }, data.name) : data.name,
+  return /*#__PURE__*/React.createElement(StoreModalIndexEntry, {
+    productId: data.id,
+    name: data.name,
+    featureStyle: data.featureStyle,
     label: label.join(', ')
   });
 };

package/dist/components/StoreModal/StoreModalIndexPackItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StoreModalIndexPackItem_fontPack$key } from '__generated__/StoreModalIndexPackItem_fontPack.graphql.js';
+interface StoreModalIndexPackItemProps {
+    pack: StoreModalIndexPackItem_fontPack$key;
+}
+declare const StoreModalIndexPackItem: ({ pack }: StoreModalIndexPackItemProps) => React.JSX.Element;
+export default StoreModalIndexPackItem;

package/dist/components/StoreModal/StoreModalIndexPackItem.js

@@ -0,0 +1,21 @@
+import _StoreModalIndexPackItem_fontPack from "../../__generated__/StoreModalIndexPackItem_fontPack.graphql.js";
+import React from 'react';
+import { graphql, useFragment } from 'react-relay';
+import StoreModalIndexEntry from './StoreModalIndexEntry.js';
+import { pluralize } from '../../utils.js';
+// A pack's name alone ("Anniversary Pack") doesn't tell a visitor it spans
+// families, so its subhead says what it is before the style count.
+const packIndexLabel = totalStyles => totalStyles ? `Font pack • ${pluralize(totalStyles, 'style')}` : 'Font pack';
+const StoreModalIndexPackItem = _ref => {
+  let {
+    pack
+  } = _ref;
+  const data = useFragment((_StoreModalIndexPackItem_fontPack.hash && _StoreModalIndexPackItem_fontPack.hash !== "47273d9e96f713344a4e62f4c5517161" && console.error("The definition of 'StoreModalIndexPackItem_fontPack' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexPackItem_fontPack), pack);
+  return /*#__PURE__*/React.createElement(StoreModalIndexEntry, {
+    productId: data.id,
+    name: data.name,
+    featureStyle: data.featureStyle,
+    label: packIndexLabel(data.totalStyles)
+  });
+};
+export default StoreModalIndexPackItem;

package/dist/components/StoreModal/StoreModalPack.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StoreModalPack_fontPack$key } from '../../__generated__/StoreModalPack_fontPack.graphql.js';
+interface StoreModalPackProps {
+    pack: StoreModalPack_fontPack$key;
+    onSelect: (skuId: string, selected: boolean) => void;
+    title?: React.ReactNode;
+}
+export default function StoreModalPack({ pack: packKey, onSelect, title }: StoreModalPackProps): React.JSX.Element;
+export {};

package/dist/components/StoreModal/StoreModalPack.js

@@ -0,0 +1,79 @@
+import _StoreModalPack_fontPack from "../../__generated__/StoreModalPack_fontPack.graphql.js";
+import React, { Fragment, useMemo } from 'react';
+import { graphql, useFragment } from 'react-relay';
+import StoreModalFamily, { stylesGrouped } from './StoreModalFamily.js';
+import StoreModalPackButton from './StoreModalPackButton.js';
+import StyleButton from './StoreModalStyleButton.js';
+import FamilyElement from '../elements/StoreModalFamily/index.js';
+
+// A pack's members render as family blocks: a collection member is the whole
+// family (or superfamily) as it appears on its own product page; style
+// members are gathered under their family, in the order the first of them
+// appears, as a partial block of just those styles.
+
+// An unlisted collection has no block anywhere in the Store Modal – no family
+// button, bundles or styles (see StoreModalProduct). A pack still grants it,
+// and the pack button still sells it, but it isn't offered on its own here.
+const memberBlocks = members => members.reduce((blocks, member) => {
+  var _member$family, _member$family2, _member$family3, _member$family4;
+  if (member.__typename === 'FontCollection') {
+    if (member.visibility === 'UNLISTED') return blocks;
+    return blocks.concat({
+      kind: 'collection',
+      collection: member
+    });
+  }
+  if (member.__typename !== 'FontStyle') return blocks;
+  if (((_member$family = member.family) === null || _member$family === void 0 ? void 0 : _member$family.visibility) === 'UNLISTED') return blocks;
+  const familyId = ((_member$family2 = member.family) === null || _member$family2 === void 0 ? void 0 : _member$family2.id) ?? member.id;
+  const existing = blocks.find(block => block.kind === 'styles' && block.familyId === familyId);
+  if ((existing === null || existing === void 0 ? void 0 : existing.kind) === 'styles') {
+    existing.styles.push(member);
+    return blocks;
+  }
+  return blocks.concat({
+    kind: 'styles',
+    familyId,
+    familyName: ((_member$family3 = member.family) === null || _member$family3 === void 0 ? void 0 : _member$family3.name) ?? '',
+    isVariableFont: ((_member$family4 = member.family) === null || _member$family4 === void 0 ? void 0 : _member$family4.isVariableFont) ?? false,
+    styles: [member]
+  });
+}, []);
+export default function StoreModalPack(_ref) {
+  let {
+    pack: packKey,
+    onSelect,
+    title
+  } = _ref;
+  const pack = useFragment((_StoreModalPack_fontPack.hash && _StoreModalPack_fontPack.hash !== "5bbb13828a56279be2b22df22ad4aae0" && console.error("The definition of 'StoreModalPack_fontPack' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalPack_fontPack), packKey);
+  const blocks = useMemo(() => memberBlocks(pack.members), [pack.members]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FamilyElement, null, {
+    title,
+    familyButton: /*#__PURE__*/React.createElement(StoreModalPackButton, {
+      pack: pack,
+      onSelectSku: onSelect
+    })
+  }), blocks.map(block => {
+    var _block$collection$chi;
+    return block.kind === 'collection' ? /*#__PURE__*/React.createElement(Fragment, {
+      key: `collection:${block.collection.id}`
+    }, /*#__PURE__*/React.createElement(StoreModalFamily, {
+      collection: block.collection,
+      onSelect: onSelect
+    }), (_block$collection$chi = block.collection.children) === null || _block$collection$chi === void 0 ? void 0 : _block$collection$chi.filter(child => child.visibility !== 'UNLISTED').map(child => /*#__PURE__*/React.createElement(StoreModalFamily, {
+      key: child.id,
+      collection: child,
+      onSelect: onSelect
+    }))) : /*#__PURE__*/React.createElement(FamilyElement, {
+      key: `styles:${block.familyId}`
+    }, {
+      title: block.familyName,
+      styleGroups: stylesGrouped(block.styles).map(group => group.map(fontStyle => /*#__PURE__*/React.createElement(StyleButton, {
+        key: fontStyle.id,
+        fontStyle: fontStyle,
+        onSelectSku: onSelect,
+        isVariableFont: block.isVariableFont
+      })))
+    });
+  }));
+}

package/dist/components/StoreModal/StoreModalPackButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StoreModalPackButton_fontPack$key } from '../../__generated__/StoreModalPackButton_fontPack.graphql.js';
+interface PackButtonProps {
+    pack: StoreModalPackButton_fontPack$key;
+    onSelectSku: (skuId: string, selected: boolean) => void;
+}
+export default function StoreModalPackButton({ pack: packKey, onSelectSku, ...rest }: PackButtonProps): React.JSX.Element;
+export {};