fontdue-js 3.12.1 → 3.14.0

package/dist/__generated__/productState_node.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<89ccca0787788a2ceb37d58b6ab5340a>>
+ * @generated SignedSource<<7112b01c24002ecc9175f687500a7e12>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -60,13 +60,17 @@ const node = function () {
     },
     v4 = {
       "alias": null,
-      "args": null,
+      "args": [{
+        "kind": "Literal",
+        "name": "acrossFamilies",
+        "value": true
+      }],
       "concreteType": "Bundle",
       "kind": "LinkedField",
       "name": "bundles",
       "plural": true,
       "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/],
-      "storageKey": null
+      "storageKey": "bundles(acrossFamilies:true)"
     };
   return {
     "argumentDefinitions": [],
@@ -76,24 +80,6 @@ const node = function () {
     },
     "name": "productState_node",
     "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, v4 /*: any*/, {
-      "alias": null,
-      "args": null,
-      "concreteType": "CollectionBundle",
-      "kind": "LinkedField",
-      "name": "collectionBundles",
-      "plural": true,
-      "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "concreteType": "FontCollection",
-        "kind": "LinkedField",
-        "name": "memberCollections",
-        "plural": true,
-        "selections": [v0 /*: any*/, v2 /*: any*/, v3 /*: any*/],
-        "storageKey": null
-      }],
-      "storageKey": null
-    }, {
       "alias": null,
       "args": [{
         "kind": "Literal",
@@ -111,5 +97,5 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "a1e172db45ca550a254819d877497d12";
+node.hash = "aab1ef07e0192a0d22a4c300084d9d05";
 export default node;

package/dist/__tests__/bundleSelectionOrder.test.js

@@ -42,7 +42,6 @@ const catalog = {
         fontStyles: styles.map(style)
       };
     }),
-    collectionBundles: [],
     children: []
   }
 };

package/dist/__tests__/collectionBundleSelection.test.js

@@ -506,6 +506,16 @@ describe('POPULATE_PRODUCT_STATE', () => {
     fontStyles: [style('vf1', null)],
     bundles: []
   };
+  const display = {
+    id: 'display',
+    name: 'Display',
+    sku: sku('display-sku', 500),
+    fontStyles: [style('d1', 'sd1')],
+    bundles: []
+  };
+  // The superfamily's own bundles, read with `bundles(acrossFamilies: true)`:
+  // whole families (what collection bundles were), and styles from two
+  // families. The server expands a family member into its styles.
   const superfamily = {
     node: {
       __typename: 'FontCollection',
@@ -513,14 +523,18 @@ describe('POPULATE_PRODUCT_STATE', () => {
       name: 'Thunder',
       sku: sku('super-sku', 750),
       fontStyles: [],
-      bundles: [],
-      collectionBundles: [{
+      bundles: [{
         id: 'text-bundle',
         name: 'Text + Variable',
         sku: sku('text-bundle-sku', 500),
-        memberCollections: [textFamily, textVariable]
+        fontStyles: [...textFamily.fontStyles, ...textVariable.fontStyles]
+      }, {
+        id: 'regulars',
+        name: 'Regulars',
+        sku: sku('regulars-sku', 60),
+        fontStyles: [style('f1', 's1'), style('d1', 'sd1')]
       }],
-      children: [textFamily, textVariable]
+      children: [textFamily, textVariable, display]
     }
   };
   it('records the styles every SKU grants', () => {
@@ -529,14 +543,25 @@ describe('POPULATE_PRODUCT_STATE', () => {
       data: superfamily
     });
     expect(state.skuStyleIds).toEqual({
-      'super-sku': ['f1', 'f2', 'vf1'],
+      'super-sku': ['f1', 'f2', 'vf1', 'd1'],
       'text-bundle-sku': ['f1', 'f2', 'vf1'],
+      'regulars-sku': ['f1', 'd1'],
       'text-sku': ['f1', 'f2'],
       'text-var-sku': ['vf1'],
+      'display-sku': ['d1'],
       'upright-sku': ['f1'],
       s1: ['f1'],
-      s2: ['f2']
+      s2: ['f2'],
+      sd1: ['d1']
+    });
+  });
+  it('rolls styles from two families up to a superfamily bundle', () => {
+    const loaded = reducer(makeState(), {
+      type: 'POPULATE_PRODUCT_STATE',
+      data: superfamily
     });
+    const state = select(select(loaded, 's1'), 'sd1');
+    expect(selected(state)).toEqual(['regulars-sku']);
   });
   it('prices a SKU picked before its product loaded once it has', () => {
     const picked = select(makeState(), 'text-sku');

package/dist/__tests__/storeModalBundlePairs.test.js

@@ -0,0 +1,142 @@
+// @vitest-environment happy-dom
+
+// Bundles sit side by side when their names make a pair ("Thin" directly
+// followed by "Thin Italic"), the way a style sits beside its italic.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  stateRef
+} = vi.hoisted(() => ({
+  stateRef: {
+    current: null
+  }
+}));
+
+// The fragment reader hands back the data it was given; the redux selector
+// runs against a default store's state.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: vi.fn(),
+  useFragment: (_fragment, key) => key
+}));
+vi.mock('react-redux', async importOriginal => ({
+  ...(await importOriginal()),
+  useSelector: selector => selector(stateRef.current)
+}));
+import StoreModalFamily, { bundlesGrouped } from '../components/StoreModal/StoreModalFamily.js';
+import { createDefaultStore } from '../reducer.js';
+const grouped = function () {
+  for (var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++) {
+    names[_key] = arguments[_key];
+  }
+  return bundlesGrouped(names.map(name => ({
+    name
+  }))).map(group => group.map(_ref => {
+    let {
+      name
+    } = _ref;
+    return name;
+  }));
+};
+describe('bundlesGrouped', () => {
+  it('pairs a bundle with a direct successor that repeats its name plus a suffix', () => {
+    expect(grouped('Thin', 'Thin Italic', 'Light', 'Light Oblique')).toEqual([['Thin', 'Thin Italic'], ['Light', 'Light Oblique']]);
+  });
+  it('accepts any suffix, not only italics', () => {
+    expect(grouped('Text', 'Text Alternates')).toEqual([['Text', 'Text Alternates']]);
+  });
+  it('only looks at the direct successor', () => {
+    expect(grouped('Thin', 'Light', 'Thin Italic')).toEqual([['Thin'], ['Light'], ['Thin Italic']]);
+  });
+  it('keeps exactly two: a third bundle with the same name splits them all', () => {
+    expect(grouped('Text', 'Text Italic', 'Text Oblique')).toEqual([['Text'], ['Text Italic'], ['Text Oblique']]);
+  });
+  it('wants a whole word, so a longer word is not a suffix', () => {
+    expect(grouped('Thin', 'Thinner')).toEqual([['Thin'], ['Thinner']]);
+  });
+  it('does not pair by order alone: the italic has to come second', () => {
+    expect(grouped('Thin Italic', 'Thin')).toEqual([['Thin Italic'], ['Thin']]);
+  });
+  it('ignores stray spaces around a name', () => {
+    expect(grouped('Semibold ', 'Semibold Italic')).toEqual([['Semibold ', 'Semibold Italic']]);
+  });
+  it('never pairs on an empty name', () => {
+    expect(grouped('', 'Thin')).toEqual([[''], ['Thin']]);
+  });
+  it('handles a missing list', () => {
+    expect(bundlesGrouped(null)).toEqual([]);
+  });
+});
+const money = amount => ({
+  amount,
+  currency: 'EUR'
+});
+const style = name => ({
+  id: `style:${name}`,
+  name,
+  supportedLanguages: ['en'],
+  variableInstances: [],
+  sku: {
+    id: `sku:style:${name}`,
+    price: money(4000)
+  },
+  cssFamily: 'Matex',
+  cssWeight: '400',
+  cssStretch: 'normal',
+  cssStyle: 'normal'
+});
+const bundle = function (name) {
+  let visibility = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'VISIBLE';
+  return {
+    id: `bundle:${name}`,
+    name,
+    visibility,
+    sku: {
+      id: `sku:bundle:${name}`,
+      price: money(26000)
+    },
+    fontStyles: [style(name)]
+  };
+};
+const collection = bundles => ({
+  __typename: 'FontCollection',
+  id: 'collection:matex',
+  name: 'HAL Matex',
+  collectionType: 'superfamily',
+  isVariableFont: false,
+  sku: {
+    id: 'sku:matex',
+    price: money(138667)
+  },
+  totalStyles: 60,
+  totalStylesPrice: money(138667),
+  featureStyle: null,
+  fontStyles: [],
+  bundles
+});
+describe('StoreModalFamily bundle rows', () => {
+  beforeEach(() => {
+    stateRef.current = createDefaultStore(undefined).getState();
+  });
+
+  // Bundle names, row by row.
+  const rows = bundles => {
+    const container = document.createElement('div');
+    container.innerHTML = renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalFamily, {
+      collection: collection(bundles),
+      onSelect: () => {}
+    }));
+    return Array.from(container.querySelectorAll('.store-modal__family__group')).map(group => Array.from(group.querySelectorAll('.store-modal__family__bundle-button')).map(button => {
+      var _button$querySelector;
+      return (_button$querySelector = button.querySelector('.store-modal__style-button__style-name')) === null || _button$querySelector === void 0 ? void 0 : _button$querySelector.textContent;
+    }));
+  };
+  it('puts a pair on one row and leaves every other bundle on its own', () => {
+    expect(rows([bundle('Thin'), bundle('Thin Italic'), bundle('Complete')])).toEqual([['Thin', 'Thin Italic'], ['Complete']]);
+  });
+  it('pairs what is listed: an unlisted bundle between two names has no button', () => {
+    expect(rows([bundle('Thin'), bundle('Secret', 'UNLISTED'), bundle('Thin Italic')])).toEqual([['Thin', 'Thin Italic']]);
+  });
+});

package/dist/components/Root/productState.js

@@ -1,17 +1,15 @@
 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";
 import _productState_collection from "../../__generated__/productState_collection.graphql.js";
 import _productState_sku from "../../__generated__/productState_sku.graphql.js";
 import { fetchQuery, graphql } from 'react-relay';
 import { notEmpty } from '../../utils.js';
 _productState_sku.hash && _productState_sku.hash !== "2cee6ddddc85699f0c90e2607c0634ef" && console.error("The definition of 'productState_sku' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_sku;
-_productState_collection.hash && _productState_collection.hash !== "90e56933f956c6773c0958284de81884" && console.error("The definition of 'productState_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collection;
+_productState_collection.hash && _productState_collection.hash !== "5ad23bbf68581f27e769ebb0cda70f8e" && console.error("The definition of 'productState_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _productState_collection;
 _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;
+_productState_node.hash && _productState_node.hash !== "aab1ef07e0192a0d22a4c300084d9d05" && 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;
 
 // 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
@@ -41,37 +39,21 @@ const allSkus = function (collection) {
     var _collection$bundles;
     bundleSkus = (collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.flatMap(bundle => allSkus(bundle, includeCollections, includeFontStyles))) ?? [];
   }
-  let collectionBundleSkus = [];
-  if ('collectionBundles' in collection && collection.collectionBundles) {
-    collectionBundleSkus = collection.collectionBundles.flatMap(collBundle => allSkus(collBundle, includeCollections, includeFontStyles));
-  }
-
-  // For collection bundles, get SKUs from member collections
-  let memberCollectionSkus = [];
-  if ('memberCollections' in collection && collection.memberCollections) {
-    memberCollectionSkus = collection.memberCollections.flatMap(member => {
-      var _member$fontStyles;
-      return [includeCollections ? member.sku : null, ...(includeFontStyles ? ((_member$fontStyles = member.fontStyles) === null || _member$fontStyles === void 0 ? void 0 : _member$fontStyles.map(style => style.sku)) ?? [] : [])];
-    }).filter(notEmpty);
-  }
   let childrenSkus = [];
   if ('children' in collection) {
     var _collection$children;
     childrenSkus = ((_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.flatMap(child => allSkus(child, includeCollections, includeFontStyles))) ?? [];
   }
-  return [includeCollections ? collection === null || collection === void 0 ? void 0 : collection.sku : null, ...(includeFontStyles && 'fontStyles' in collection ? (collection === null || collection === void 0 ? void 0 : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle.map(style => style.sku)) ?? [] : []), ...bundleSkus, ...collectionBundleSkus, ...memberCollectionSkus, ...childrenSkus].filter(notEmpty);
+  return [includeCollections ? collection === null || collection === void 0 ? void 0 : collection.sku : null, ...(includeFontStyles && 'fontStyles' in collection ? (collection === null || collection === void 0 ? void 0 : (_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle.map(style => style.sku)) ?? [] : []), ...bundleSkus, ...childrenSkus].filter(notEmpty);
 };
 
 // The styles each SKU grants, by SKU id: a style's SKU grants that style, a
-// bundle its styles, a family its styles, a superfamily its families' styles
-// and a collection bundle its member collections' styles. This is all the
+// bundle its styles (a whole-family member expanded to the family's styles), a
+// family its styles and a superfamily its families' styles. This is all the
 // selection needs to price any combination of them (see selection.ts).
 
 const styleIdsOf = collection => {
   var _collection$fontStyle2, _collection$children2;
-  if ('memberCollections' in collection && collection.memberCollections) {
-    return collection.memberCollections.flatMap(member => member.fontStyles.map(s => s.id));
-  }
   const own = 'fontStyles' in collection ? ((_collection$fontStyle2 = collection.fontStyles) === null || _collection$fontStyle2 === void 0 ? void 0 : _collection$fontStyle2.map(s => s.id)) ?? [] : [];
   const children = 'children' in collection ? ((_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : _collection$children2.flatMap(child => {
     var _child$fontStyles;
@@ -83,8 +65,7 @@ const flattenSkuStyleIds = collection => {
   var _collection$sku;
   const result = {};
   const add = (skuId, styleIds) => {
-    // A collection that returns no styles of its own (a superfamily listed as
-    // a collection bundle member) says nothing about what it grants.
+    // A SKU that lists no styles says nothing about what it grants.
     if (skuId && styleIds.length > 0) result[skuId] = styleIds;
   };
   const addStyles = fontStyles => {
@@ -95,14 +76,7 @@ const flattenSkuStyleIds = collection => {
   };
   add((_collection$sku = collection.sku) === null || _collection$sku === void 0 ? void 0 : _collection$sku.id, styleIdsOf(collection));
   if ('fontStyles' in collection) addStyles(collection.fontStyles);
-  if ('memberCollections' in collection) {
-    for (const member of collection.memberCollections ?? []) {
-      var _member$sku;
-      add((_member$sku = member.sku) === null || _member$sku === void 0 ? void 0 : _member$sku.id, member.fontStyles.map(s => s.id));
-      addStyles(member.fontStyles);
-    }
-  }
-  const nested = [...('bundles' in collection ? collection.bundles ?? [] : []), ...('collectionBundles' in collection ? collection.collectionBundles ?? [] : []), ...('children' in collection ? collection.children ?? [] : [])];
+  const nested = [...('bundles' in collection ? collection.bundles ?? [] : []), ...('children' in collection ? collection.children ?? [] : [])];
   for (const child of nested) Object.assign(result, flattenSkuStyleIds(child));
   return result;
 };

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

@@ -12,5 +12,8 @@ interface GroupableStyle {
     cssStyle: string | null;
 }
 export declare function stylesGrouped<T extends GroupableStyle>(fontStyles: ReadonlyArray<T> | null | undefined): ReadonlyArray<ReadonlyArray<T>>;
+export declare function bundlesGrouped<T extends {
+    name: string;
+}>(bundles: 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

@@ -33,6 +33,16 @@ export function stylesGrouped(fontStyles) {
     return slantedCount === 1 ? [chunk] : chunk.map(style => [style]);
   });
 }
+
+// Pairs a bundle with its direct successor when that one's name repeats it plus
+// a suffix ("Thin" then "Thin Italic"), so the two render side by side like a
+// style beside its italic. Names are all there is to go on: a bundle's styles
+// can come from several families. As with styles, only exactly two stay paired.
+export function bundlesGrouped(bundles) {
+  if (!bundles) return [];
+  const chunks = chunkConsecutiveBy(bundles, (left, right) => right.name.trim().startsWith(`${left.name.trim()} `));
+  return chunks.flatMap(chunk => chunk.length === 2 ? [chunk] : chunk.map(b => [b]));
+}
 export default function StoreModalFamily(_ref) {
   var _collection$bundles;
   let {
@@ -40,22 +50,26 @@ export default function StoreModalFamily(_ref) {
     onSelect,
     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 collection = useFragment((_StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "ed59465ca68bf3d3278773a671ddefb3" && 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.fontStyles), [collection]);
-  if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
+  // An unlisted bundle gets no button, but its price still applies as an
+  // upgrade: the product state reads every bundle.
+  const listedBundles = (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.filter(bundle => bundle.visibility !== 'UNLISTED');
+
+  // A superfamily sold only through its families has nothing of its own to
+  // show – unless one of its bundles, across its families, has a button.
+  if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku && !(listedBundles !== null && listedBundles !== void 0 && listedBundles.length)) return null;
   return /*#__PURE__*/React.createElement(FamilyElement, null, {
     title,
     familyButton: /*#__PURE__*/React.createElement(FamilyButton, {
       collection: collection,
       onSelectSku: onSelect
     }),
-    // An unlisted bundle gets no button, but its price still applies as an
-    // upgrade: the product state reads every bundle.
-    bundles: collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.filter(bundle => bundle.visibility !== 'UNLISTED').map(bundle => /*#__PURE__*/React.createElement(StoreModalBundleButton, {
+    bundleGroups: bundlesGrouped(listedBundles).map(group => group.map(bundle => /*#__PURE__*/React.createElement(StoreModalBundleButton, {
       key: bundle.id,
       bundle: bundle,
       onSelectSku: onSelect
-    })),
+    }))),
     styleGroups: fontStyles.map(group => group.map(fontStyle => /*#__PURE__*/React.createElement(StyleButton, {
       key: fontStyle.id,
       fontStyle: fontStyle,

package/dist/components/elements/StoreModalFamily/index.d.ts

@@ -3,7 +3,7 @@ interface StoreModalFamilyProps {
     children: {
         title: React.ReactNode;
         familyButton?: React.ReactElement<any> | null;
-        bundles?: React.ReactElement<any>[] | null;
+        bundleGroups?: React.ReactElement<any>[][] | null;
         styleGroups?: React.ReactElement<any>[][] | null;
     };
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 const StoreModalFamily = _ref => {
   let {
     children: {
-      bundles,
+      bundleGroups,
       familyButton,
       styleGroups,
       title
@@ -14,9 +14,12 @@ const StoreModalFamily = _ref => {
     className: "store-modal__family__title"
   }, title), familyButton && /*#__PURE__*/React.cloneElement(familyButton, {
     className: 'store-modal__family__family-button'
-  }), bundles === null || bundles === void 0 ? void 0 : bundles.map(bundle => /*#__PURE__*/React.cloneElement(bundle, {
+  }), bundleGroups === null || bundleGroups === void 0 ? void 0 : bundleGroups.map((group, i) => /*#__PURE__*/React.createElement("div", {
+    className: "store-modal__family__group",
+    key: i
+  }, group.map(bundleButton => /*#__PURE__*/React.cloneElement(bundleButton, {
     className: 'store-modal__family__bundle-button'
-  })), styleGroups === null || styleGroups === void 0 ? void 0 : styleGroups.map((group, i) => /*#__PURE__*/React.createElement("div", {
+  })))), styleGroups === null || styleGroups === void 0 ? void 0 : styleGroups.map((group, i) => /*#__PURE__*/React.createElement("div", {
     className: "store-modal__family__group",
     key: i
   }, group.map(styleButton => /*#__PURE__*/React.cloneElement(styleButton, {

package/dist/fontdue.css

@@ -127,6 +127,7 @@
   display: block;
   width: 1em;
   height: 1em;
+  max-width: none;
   fill: currentColor;
 }
 
@@ -1784,6 +1785,7 @@ input:checked + .checkbox__icon {
 
 .store-modal__container__buttons {
   text-align: right;
+  white-space: nowrap;
 }
 
 .store-modal__container__back-button {
@@ -2136,6 +2138,14 @@ input:checked + .checkbox__icon {
   font-size: 60px;
 }
 
+.store-modal__index-item__description:first-child {
+  grid-column: 1/-2;
+}
+
+.store-modal__index-item__buy {
+  grid-column: -2/-1;
+}
+
 .store-modal__index-item__name {
   font-size: 20px;
   line-height: 30px;
@@ -2693,6 +2703,31 @@ input:checked + .checkbox__icon {
   .store-modal__family__bundle-button .store-modal__style-button__price {
     align-self: flex-end;
   }
+  .store-modal__family__bundle-button .store-modal__style-button__checked {
+    height: 1lh;
+  }
+}
+.store-modal__family__bundle-button {
+  container-type: inline-size;
+}
+
+@container (max-width: 480px) {
+  .store-modal__family__bundle-button .store-modal__style-button__container {
+    flex-wrap: wrap;
+  }
+  .store-modal__family__bundle-button .store-modal__style-button__feature-glyphs {
+    flex: 0 0 100%;
+  }
+  .store-modal__family__bundle-button .store-modal__style-button__style-name {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .store-modal__family__bundle-button .store-modal__style-button__price {
+    align-self: flex-end;
+  }
+  .store-modal__family__bundle-button .store-modal__style-button__checked {
+    height: 1lh;
+  }
 }
 body[data-fontdue-store-modal=open] {
   overflow: hidden;

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.12.1";
+export const version = "3.14.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.12.1",
+  "version": "3.14.0",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",

package/dist/__generated__/productState_collectionBundle.graphql.d.ts

@@ -1,41 +0,0 @@
-/**
- * @generated SignedSource<<c1a8446af3677d58e3851338c54cf16e>>
- * @lightSyntaxTransform
- * @nogrep
- */
-import { ReaderFragment } from 'relay-runtime';
-import { FragmentRefs } from "relay-runtime";
-export type productState_collectionBundle$data = {
-    readonly id: string;
-    readonly memberCollections: ReadonlyArray<{
-        readonly fontStyles: ReadonlyArray<{
-            readonly id: string;
-            readonly sku: {
-                readonly id: string;
-                readonly price: {
-                    readonly amount: number;
-                };
-            } | null;
-        }>;
-        readonly id: string;
-        readonly sku: {
-            readonly id: string;
-            readonly price: {
-                readonly amount: number;
-            };
-        } | null;
-    }> | null;
-    readonly name: string;
-    readonly sku: {
-        readonly id: string;
-        readonly price: {
-            readonly amount: number;
-        };
-    } | null;
-};
-export type productState_collectionBundle$key = {
-    readonly " $data"?: productState_collectionBundle$data;
-    readonly " $fragmentSpreads": FragmentRefs<"productState_collectionBundle">;
-};
-declare const node: ReaderFragment;
-export default node;

package/dist/__generated__/productState_collectionBundle.graphql.js

@@ -1,81 +0,0 @@
-/**
- * @generated SignedSource<<c1a8446af3677d58e3851338c54cf16e>>
- * @lightSyntaxTransform
- * @nogrep
- */
-
-/* tslint:disable */
-/* eslint-disable */
-// @ts-nocheck
-
-const node = function () {
-  var v0 = {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "id",
-      "storageKey": null
-    },
-    v1 = {
-      "alias": null,
-      "args": null,
-      "concreteType": "Sku",
-      "kind": "LinkedField",
-      "name": "sku",
-      "plural": false,
-      "selections": [v0 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "concreteType": "Money",
-        "kind": "LinkedField",
-        "name": "price",
-        "plural": false,
-        "selections": [{
-          "alias": null,
-          "args": null,
-          "kind": "ScalarField",
-          "name": "amount",
-          "storageKey": null
-        }],
-        "storageKey": null
-      }],
-      "storageKey": null
-    };
-  return {
-    "argumentDefinitions": [],
-    "kind": "Fragment",
-    "metadata": {
-      "mask": false
-    },
-    "name": "productState_collectionBundle",
-    "selections": [v0 /*: any*/, {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "name",
-      "storageKey": null
-    }, v1 /*: any*/, {
-      "alias": null,
-      "args": null,
-      "concreteType": "FontCollection",
-      "kind": "LinkedField",
-      "name": "memberCollections",
-      "plural": true,
-      "selections": [v0 /*: any*/, v1 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "concreteType": "FontStyle",
-        "kind": "LinkedField",
-        "name": "fontStyles",
-        "plural": true,
-        "selections": [v0 /*: any*/, v1 /*: any*/],
-        "storageKey": null
-      }],
-      "storageKey": null
-    }],
-    "type": "CollectionBundle",
-    "abstractKey": null
-  };
-}();
-node.hash = "6744aa8f57d14b0111a0c49f488d7b03";
-export default node;