fontdue-js 2.22.2 → 2.22.4

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.22.4
+
+- Raised the store modal index collection limit from 99 to 9999, so very large libraries are no longer silently capped on the store modal landing page.
+
+## 2.22.3
+
+- Fixed the store modal over-grouping styles within a family. Previously, any consecutive styles sharing `cssFamily`/`cssWeight`/`cssStretch` were rendered together on a single row, which could collapse 3+ unrelated styles into one visual pair. Styles are now only paired when they're exactly one upright + one slanted (italic or oblique) counterpart; anything else renders on its own row.
+
 ## 2.22.2
 
 - Fixed country order variables (e.g. *Fair Price Adjustment*) not updating when the licensee country changed at checkout. The unified checkout now clears the option id when syncing the licensee country to a country-type variable, so the server can re-evaluate the multiplier against the new country.

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<5d6e34313ae722e7716a2bf089cac778>>
+ * @generated SignedSource<<71e15c23d9444275ac11174d1e9f180b>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -22,6 +22,7 @@ export type StoreModalFamily_collection$data = {
     readonly fontStyles: ReadonlyArray<{
         readonly cssFamily: string | null;
         readonly cssStretch: string | null;
+        readonly cssStyle: string | null;
         readonly cssWeight: string | null;
         readonly id: string;
         readonly " $fragmentSpreads": FragmentRefs<"StoreModalStyleButton_fontStyle">;

package/dist/__generated__/StoreModalFamily_collection.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<5d6e34313ae722e7716a2bf089cac778>>
+ * @generated SignedSource<<71e15c23d9444275ac11174d1e9f180b>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -34,34 +34,28 @@ const node = function () {
     v2 = {
       "alias": null,
       "args": null,
-      "concreteType": "FontStyle",
-      "kind": "LinkedField",
-      "name": "fontStyles",
-      "plural": true,
-      "selections": [v1 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "cssFamily",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "cssWeight",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "cssStretch",
-        "storageKey": null
-      }, {
-        "args": v0 /*: any*/,
-        "kind": "FragmentSpread",
-        "name": "StoreModalStyleButton_fontStyle"
-      }],
+      "kind": "ScalarField",
+      "name": "cssFamily",
       "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssWeight",
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssStretch",
+      "storageKey": null
+    },
+    v5 = {
+      "args": v0 /*: any*/,
+      "kind": "FragmentSpread",
+      "name": "StoreModalStyleButton_fontStyle"
     };
   return {
     "argumentDefinitions": [{
@@ -114,17 +108,41 @@ const node = function () {
         "kind": "ScalarField",
         "name": "hidden",
         "storageKey": null
-      }, v2 /*: any*/, {
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "FontStyle",
+        "kind": "LinkedField",
+        "name": "fontStyles",
+        "plural": true,
+        "selections": [v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, v4 /*: any*/, v5 /*: any*/],
+        "storageKey": null
+      }, {
         "args": v0 /*: any*/,
         "kind": "FragmentSpread",
         "name": "StoreModalBundleButton_bundle"
       }],
       "storageKey": null
-    }, v2 /*: any*/],
+    }, {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, v4 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssStyle",
+        "storageKey": null
+      }, v5 /*: any*/],
+      "storageKey": null
+    }],
     "type": "FontCollection",
     "abstractKey": null
   };
 }();
-node.hash = "73d00dd2b57a2b44a86ee085b4313d77";
+node.hash = "d2d429ebada7593dd5debcce7a69317d";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f6fed31e6723d222cf0d687e1013cc38>>
+ * @generated SignedSource<<52e391f8940a4f6eb94fcf4f4d884f31>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalIndexQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<f6fed31e6723d222cf0d687e1013cc38>>
+ * @generated SignedSource<<52e391f8940a4f6eb94fcf4f4d884f31>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -27,7 +27,7 @@ const node = function () {
     }, {
       "kind": "Literal",
       "name": "first",
-      "value": 99
+      "value": 9999
     }, {
       "kind": "Literal",
       "name": "onlyRoots",
@@ -249,15 +249,15 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "6c9f9bd4a6c1817100984d2a29c8017f",
+      "cacheID": "df65908a69bef4f72b19f28c399fe53b",
       "id": null,
       "metadata": {},
       "name": "StoreModalIndexQuery",
       "operationKind": "query",
-      "text": "query StoreModalIndexQuery(\n  $excludeTags: [String!]\n) {\n  viewer {\n    rootCollections: fontCollections(onlyRoots: true, first: 99, excludeTags: $excludeTags) {\n      edges {\n        node {\n          id\n          ...StoreModalIndexItem_fontCollection\n        }\n      }\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment StoreModalIndexItem_fontCollection on FontCollection {\n  ...useTotalStyles_fontCollection\n  id\n  name\n  totalStyles\n  isVariableFont\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n  collectionType\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalIndexQuery(\n  $excludeTags: [String!]\n) {\n  viewer {\n    rootCollections: fontCollections(onlyRoots: true, first: 9999, excludeTags: $excludeTags) {\n      edges {\n        node {\n          id\n          ...StoreModalIndexItem_fontCollection\n        }\n      }\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment StoreModalIndexItem_fontCollection on FontCollection {\n  ...useTotalStyles_fontCollection\n  id\n  name\n  totalStyles\n  isVariableFont\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n  collectionType\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "300b462c41a951b4f94c4b8da7a6821f";
+node.hash = "099c77808b41054885365ebe3eda03c8";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<4e14c3e4e437e08b0e34cb3f12daba1a>>
+ * @generated SignedSource<<c89ad11922bfdc3daa3eeb12dc141b85>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<4e14c3e4e437e08b0e34cb3f12daba1a>>
+ * @generated SignedSource<<c89ad11922bfdc3daa3eeb12dc141b85>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -286,56 +286,49 @@ const node = function () {
     v35 = {
       "alias": null,
       "args": null,
-      "concreteType": "FontStyle",
+      "kind": "ScalarField",
+      "name": "cssWeight",
+      "storageKey": null
+    },
+    v36 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssStretch",
+      "storageKey": null
+    },
+    v37 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "VariableInstance",
       "kind": "LinkedField",
-      "name": "fontStyles",
+      "name": "variableInstances",
       "plural": true,
-      "selections": [v4 /*: any*/, v26 /*: any*/, {
+      "selections": [v11 /*: any*/, {
         "alias": null,
         "args": null,
-        "kind": "ScalarField",
-        "name": "cssWeight",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "cssStretch",
-        "storageKey": null
-      }, v11 /*: any*/, v30 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "concreteType": "VariableInstance",
+        "concreteType": "VariableSetting",
         "kind": "LinkedField",
-        "name": "variableInstances",
+        "name": "coordinates",
         "plural": true,
-        "selections": [v11 /*: any*/, {
+        "selections": [{
           "alias": null,
           "args": null,
-          "concreteType": "VariableSetting",
-          "kind": "LinkedField",
-          "name": "coordinates",
-          "plural": true,
-          "selections": [{
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "axis",
-            "storageKey": null
-          }, {
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "value",
-            "storageKey": null
-          }],
+          "kind": "ScalarField",
+          "name": "axis",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "value",
           "storageKey": null
         }],
         "storageKey": null
-      }, v23 /*: any*/, v28 /*: any*/, v29 /*: any*/],
+      }],
       "storageKey": null
     },
-    v36 = {
+    v38 = {
       "alias": null,
       "args": null,
       "concreteType": "Bundle",
@@ -348,18 +341,43 @@ const node = function () {
         "kind": "ScalarField",
         "name": "hidden",
         "storageKey": null
-      }, v35 /*: any*/, v11 /*: any*/, v23 /*: any*/],
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "FontStyle",
+        "kind": "LinkedField",
+        "name": "fontStyles",
+        "plural": true,
+        "selections": [v4 /*: any*/, v26 /*: any*/, v35 /*: any*/, v36 /*: any*/, v11 /*: any*/, v30 /*: any*/, v37 /*: any*/, v23 /*: any*/, v28 /*: any*/, v29 /*: any*/],
+        "storageKey": null
+      }, v11 /*: any*/, v23 /*: any*/],
+      "storageKey": null
+    },
+    v39 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v4 /*: any*/, v26 /*: any*/, v35 /*: any*/, v36 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssStyle",
+        "storageKey": null
+      }, v11 /*: any*/, v30 /*: any*/, v37 /*: any*/, v23 /*: any*/, v28 /*: any*/, v29 /*: any*/],
       "storageKey": null
     },
-    v37 = [v21 /*: any*/],
-    v38 = [v32 /*: any*/, {
+    v40 = [v21 /*: any*/],
+    v41 = [v32 /*: any*/, {
       "alias": null,
       "args": v7 /*: any*/,
       "concreteType": "Money",
       "kind": "LinkedField",
       "name": "totalStylesPrice",
       "plural": false,
-      "selections": v37 /*: any*/,
+      "selections": v40 /*: any*/,
       "storageKey": null
     }];
   return {
@@ -453,9 +471,9 @@ const node = function () {
               "plural": true,
               "selections": [v19 /*: any*/, v32 /*: any*/, v4 /*: any*/],
               "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-            }, v36 /*: any*/, v35 /*: any*/],
+            }, v38 /*: any*/, v39 /*: any*/],
             "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-          }, v36 /*: any*/, v35 /*: any*/, {
+          }, v38 /*: any*/, v39 /*: any*/, {
             "alias": null,
             "args": null,
             "concreteType": "License",
@@ -639,7 +657,7 @@ const node = function () {
               "kind": "LinkedField",
               "name": "price",
               "plural": false,
-              "selections": v37 /*: any*/,
+              "selections": v40 /*: any*/,
               "storageKey": null
             }, {
               "alias": null,
@@ -650,17 +668,17 @@ const node = function () {
               "plural": false,
               "selections": [v18 /*: any*/, {
                 "kind": "InlineFragment",
-                "selections": v38 /*: any*/,
+                "selections": v41 /*: any*/,
                 "type": "FontCollection",
                 "abstractKey": null
               }, {
                 "kind": "InlineFragment",
-                "selections": v38 /*: any*/,
+                "selections": v41 /*: any*/,
                 "type": "Bundle",
                 "abstractKey": null
               }, {
                 "kind": "InlineFragment",
-                "selections": v38 /*: any*/,
+                "selections": v41 /*: any*/,
                 "type": "CollectionBundle",
                 "abstractKey": null
               }, {
@@ -688,12 +706,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "40d8a2a33826a2d10b1521bccd10681c",
+      "cacheID": "104a32b41807b73dd9d88e355d720a3b",
       "id": null,
       "metadata": {},
       "name": "StoreModalProductQuery",
       "operationKind": "query",
-      "text": "query StoreModalProductQuery(\n  $productId: ID!\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalProductContent_collection_4sncub\n  }\n  viewer {\n    endpoint\n    stripeAccountId\n    ...OrderVariableSelectionRedux_viewer_2ZguDv\n    ...StoreModalProductSummary_viewer_4sncub\n    orderVariables {\n      id\n      variableType\n      name\n    }\n    settings {\n      storeModalSelectLicenseeLabel(format: HTML)\n      storeModalSelectOrderVariablesLabel(format: HTML)\n      storeModalSelectLicensesLabel(format: HTML)\n      storeModalSelectFontsLabel(format: HTML)\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment OrderVariableSelectionRedux_viewer_2ZguDv on Viewer {\n  ...OrderVariableSelection_variables_2ZguDv\n  detectedCountry\n  orderVariables {\n    id\n    variableType\n  }\n}\n\nfragment OrderVariableSelection_variables_2ZguDv on Viewer {\n  orderVariables {\n    id\n    name\n    variableType\n    description(format: HTML, orderVariables: $orderVariables)\n    orderVariableOptions {\n      id\n      amount\n    }\n  }\n  countries {\n    code\n    name\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_4sncub on Sku {\n  id\n  price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle_4sncub on Bundle {\n  id\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection_4sncub on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection_4sncub on FontCollection {\n  ...StoreModalFamilyButton_collection_4sncub\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    hidden\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ...StoreModalBundleButton_bundle_4sncub\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    ...StoreModalStyleButton_fontStyle_4sncub\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  ... on FontCollection {\n    id\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_collection\n    children(collectionTypes: [FAMILY]) {\n      id\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_collection on FontCollection {\n  licenses {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  description(format: HTML)\n  defaultSelected\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalProductSummary_viewer_4sncub on Viewer {\n  settings {\n    taxSystem\n    stripeTaxSettings {\n      taxBehavior\n    }\n  }\n  taxCollections {\n    taxName\n    inclusive\n  }\n  orderVariables {\n    id\n    variableType\n    name\n  }\n  precart(skuIds: [], licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    skus {\n      price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on CollectionBundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n    subtotal {\n      ...Price_price\n      amount\n      currency\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle_4sncub on FontStyle {\n  id\n  name\n  supportedLanguages\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  ...FontStyle_fontStyle\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalProductQuery(\n  $productId: ID!\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalProductContent_collection_4sncub\n  }\n  viewer {\n    endpoint\n    stripeAccountId\n    ...OrderVariableSelectionRedux_viewer_2ZguDv\n    ...StoreModalProductSummary_viewer_4sncub\n    orderVariables {\n      id\n      variableType\n      name\n    }\n    settings {\n      storeModalSelectLicenseeLabel(format: HTML)\n      storeModalSelectOrderVariablesLabel(format: HTML)\n      storeModalSelectLicensesLabel(format: HTML)\n      storeModalSelectFontsLabel(format: HTML)\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment OrderVariableSelectionRedux_viewer_2ZguDv on Viewer {\n  ...OrderVariableSelection_variables_2ZguDv\n  detectedCountry\n  orderVariables {\n    id\n    variableType\n  }\n}\n\nfragment OrderVariableSelection_variables_2ZguDv on Viewer {\n  orderVariables {\n    id\n    name\n    variableType\n    description(format: HTML, orderVariables: $orderVariables)\n    orderVariableOptions {\n      id\n      amount\n    }\n  }\n  countries {\n    code\n    name\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_4sncub on Sku {\n  id\n  price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle_4sncub on Bundle {\n  id\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection_4sncub on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection_4sncub on FontCollection {\n  ...StoreModalFamilyButton_collection_4sncub\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    hidden\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ...StoreModalBundleButton_bundle_4sncub\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    cssStyle\n    ...StoreModalStyleButton_fontStyle_4sncub\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  ... on FontCollection {\n    id\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_collection\n    children(collectionTypes: [FAMILY]) {\n      id\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_collection on FontCollection {\n  licenses {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  description(format: HTML)\n  defaultSelected\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalProductSummary_viewer_4sncub on Viewer {\n  settings {\n    taxSystem\n    stripeTaxSettings {\n      taxBehavior\n    }\n  }\n  taxCollections {\n    taxName\n    inclusive\n  }\n  orderVariables {\n    id\n    variableType\n    name\n  }\n  precart(skuIds: [], licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    skus {\n      price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on CollectionBundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n    subtotal {\n      ...Price_price\n      amount\n      currency\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle_4sncub on FontStyle {\n  id\n  name\n  supportedLanguages\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  ...FontStyle_fontStyle\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<3f84262d5e8bba617e774f141016edc5>>
+ * @generated SignedSource<<52c18d108c3d802a9478b6b6002d480a>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductRefetchQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<3f84262d5e8bba617e774f141016edc5>>
+ * @generated SignedSource<<52c18d108c3d802a9478b6b6002d480a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -221,56 +221,49 @@ const node = function () {
     v22 = {
       "alias": null,
       "args": null,
-      "concreteType": "FontStyle",
+      "kind": "ScalarField",
+      "name": "cssWeight",
+      "storageKey": null
+    },
+    v23 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssStretch",
+      "storageKey": null
+    },
+    v24 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "VariableInstance",
       "kind": "LinkedField",
-      "name": "fontStyles",
+      "name": "variableInstances",
       "plural": true,
-      "selections": [v5 /*: any*/, v13 /*: any*/, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "cssWeight",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "cssStretch",
-        "storageKey": null
-      }, v8 /*: any*/, v17 /*: any*/, {
+      "selections": [v8 /*: any*/, {
         "alias": null,
         "args": null,
-        "concreteType": "VariableInstance",
+        "concreteType": "VariableSetting",
         "kind": "LinkedField",
-        "name": "variableInstances",
+        "name": "coordinates",
         "plural": true,
-        "selections": [v8 /*: any*/, {
+        "selections": [{
           "alias": null,
           "args": null,
-          "concreteType": "VariableSetting",
-          "kind": "LinkedField",
-          "name": "coordinates",
-          "plural": true,
-          "selections": [{
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "axis",
-            "storageKey": null
-          }, {
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "value",
-            "storageKey": null
-          }],
+          "kind": "ScalarField",
+          "name": "axis",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "value",
           "storageKey": null
         }],
         "storageKey": null
-      }, v11 /*: any*/, v15 /*: any*/, v16 /*: any*/],
+      }],
       "storageKey": null
     },
-    v23 = {
+    v25 = {
       "alias": null,
       "args": null,
       "concreteType": "Bundle",
@@ -283,7 +276,32 @@ const node = function () {
         "kind": "ScalarField",
         "name": "hidden",
         "storageKey": null
-      }, v22 /*: any*/, v8 /*: any*/, v11 /*: any*/],
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "FontStyle",
+        "kind": "LinkedField",
+        "name": "fontStyles",
+        "plural": true,
+        "selections": [v5 /*: any*/, v13 /*: any*/, v22 /*: any*/, v23 /*: any*/, v8 /*: any*/, v17 /*: any*/, v24 /*: any*/, v11 /*: any*/, v15 /*: any*/, v16 /*: any*/],
+        "storageKey": null
+      }, v8 /*: any*/, v11 /*: any*/],
+      "storageKey": null
+    },
+    v26 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v5 /*: any*/, v13 /*: any*/, v22 /*: any*/, v23 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssStyle",
+        "storageKey": null
+      }, v8 /*: any*/, v17 /*: any*/, v24 /*: any*/, v11 /*: any*/, v15 /*: any*/, v16 /*: any*/],
       "storageKey": null
     };
   return {
@@ -348,9 +366,9 @@ const node = function () {
               "plural": true,
               "selections": [v6 /*: any*/, v19 /*: any*/, v5 /*: any*/],
               "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-            }, v23 /*: any*/, v22 /*: any*/],
+            }, v25 /*: any*/, v26 /*: any*/],
             "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-          }, v23 /*: any*/, v22 /*: any*/, {
+          }, v25 /*: any*/, v26 /*: any*/, {
             "alias": null,
             "args": null,
             "concreteType": "License",
@@ -419,12 +437,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "db67729502b6f5caa899ebd9c82f964d",
+      "cacheID": "4d650f53c6065f4ee977deb9f9b8080e",
       "id": null,
       "metadata": {},
       "name": "StoreModalProductRefetchQuery",
       "operationKind": "query",
-      "text": "query StoreModalProductRefetchQuery(\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ...StoreModalProductContent_collection_4sncub\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_4sncub on Sku {\n  id\n  price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle_4sncub on Bundle {\n  id\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection_4sncub on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection_4sncub on FontCollection {\n  ...StoreModalFamilyButton_collection_4sncub\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    hidden\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ...StoreModalBundleButton_bundle_4sncub\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    ...StoreModalStyleButton_fontStyle_4sncub\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  ... on FontCollection {\n    id\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_collection\n    children(collectionTypes: [FAMILY]) {\n      id\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_collection on FontCollection {\n  licenses {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  description(format: HTML)\n  defaultSelected\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle_4sncub on FontStyle {\n  id\n  name\n  supportedLanguages\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  ...FontStyle_fontStyle\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalProductRefetchQuery(\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ...StoreModalProductContent_collection_4sncub\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_4sncub on Sku {\n  id\n  price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle_4sncub on Bundle {\n  id\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection_4sncub on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection_4sncub on FontCollection {\n  ...StoreModalFamilyButton_collection_4sncub\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    hidden\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ...StoreModalBundleButton_bundle_4sncub\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    cssStyle\n    ...StoreModalStyleButton_fontStyle_4sncub\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  ... on FontCollection {\n    id\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_collection\n    children(collectionTypes: [FAMILY]) {\n      id\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_collection on FontCollection {\n  licenses {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  description(format: HTML)\n  defaultSelected\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle_4sncub on FontStyle {\n  id\n  name\n  supportedLanguages\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  ...FontStyle_fontStyle\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();

package/dist/components/StoreModal/StoreModalFamily.js

@@ -25,9 +25,20 @@ function chunkConsecutiveBy(collection, compare) {
     return acc.concat([[item]]);
   }, []);
 }
+const isSlanted = cssStyle => cssStyle === 'italic' || cssStyle === 'oblique';
 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);
+  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));
+
+  // Only keep a chunk paired when it's exactly one upright + one slanted
+  // (italic or oblique) style. Anything else (3+ consecutive matches, or
+  // two styles that aren't a clean upright/slanted pair) is split back
+  // into individual entries.
+  return chunks.flatMap(chunk => {
+    if (chunk.length !== 2) return chunk.map(style => [style]);
+    const slantedCount = chunk.filter(s => isSlanted(s.cssStyle)).length;
+    return slantedCount === 1 ? [chunk] : chunk.map(style => [style]);
+  });
 };
 function StoreModalFamily(_ref) {
   var _collection$bundles;
@@ -36,7 +47,7 @@ function StoreModalFamily(_ref) {
     onSelect,
     title
   } = _ref;
-  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 collection = (0, _reactRelay.useFragment)((_StoreModalFamily_collection2.default.hash && _StoreModalFamily_collection2.default.hash !== "d2d429ebada7593dd5debcce7a69317d" && 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 === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
   return /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, null, {

package/dist/components/StoreModal/StoreModalIndex.js

@@ -15,7 +15,7 @@ const StoreModalIndex = _ref => {
   let {
     prepared
   } = _ref;
-  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 data = (0, _reactRelay.usePreloadedQuery)((_StoreModalIndexQuery2.default.hash && _StoreModalIndexQuery2.default.hash !== "099c77808b41054885365ebe3eda03c8" && 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 === null || viewer === void 0 ? void 0 : (_viewer$rootCollectio = viewer.rootCollections) === null || _viewer$rootCollectio === void 0 ? void 0 : _viewer$rootCollectio.edges) ?? [];
   return /*#__PURE__*/_react.default.createElement(_StoreModalPageContainer.default, null, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.22.2",
+  "version": "2.22.4",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",

package/types/font-face-set.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface FontFaceSet {
+    add(font: FontFace): FontFaceSet;
+    delete(font: FontFace): boolean;
+    clear(): void;
+    has(font: FontFace): boolean;
+    readonly size: number;
+  }
+}
+
+export {};

package/.nvmrc

@@ -1 +0,0 @@
-v14.13.1