fontdue-js 2.22.2 → 2.22.3

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 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__/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.22.2",
+  "version": "2.22.3",
   "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",