fontdue-js 3.13.0 → 3.14.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.14.0
+
+- `StoreModal` puts two bundles on one row when the second directly follows the first and repeats its name plus a suffix, such as *Thin* and *Thin Italic*.
+- Fixed the `StoreModal` back link running into the title on mobile, on sites that set a percentage `max-width` on `svg` elements, as Tailwind’s preflight does.
+
 ## 3.13.0
 
 - `StoreModal` offers a superfamily’s bundles that mix styles from several of its families, or styles alongside whole families, and shows a superfamily’s bundles even when the superfamily has no price of its own.

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<a7931c30cf5e8e57f8a445e99e660127>>
+ * @generated SignedSource<<c5c1d2d9bea572068b76d4552495484d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -16,6 +16,7 @@ export type StoreModalFamily_collection$data = {
             readonly " $fragmentSpreads": FragmentRefs<"StoreModalStyleButton_fontStyle">;
         }> | null;
         readonly id: string;
+        readonly name: string;
         readonly visibility: Visibility;
         readonly " $fragmentSpreads": FragmentRefs<"StoreModalBundleButton_bundle">;
     }> | null;

package/dist/__generated__/StoreModalFamily_collection.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<a7931c30cf5e8e57f8a445e99e660127>>
+ * @generated SignedSource<<c5c1d2d9bea572068b76d4552495484d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -101,6 +101,12 @@ const node = function () {
       "name": "bundles",
       "plural": true,
       "selections": [v1 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "name",
+        "storageKey": null
+      }, {
         "alias": null,
         "args": null,
         "kind": "ScalarField",
@@ -141,5 +147,5 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "9f2a8cd937ebe2c06f2bf771d38de985";
+node.hash = "ed59465ca68bf3d3278773a671ddefb3";
 export default node;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<6879b49c7ed4c15239072fdee19e8663>>
+ * @generated SignedSource<<736ad1206cfda5f9db8419bc44791988>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<6879b49c7ed4c15239072fdee19e8663>>
+ * @generated SignedSource<<736ad1206cfda5f9db8419bc44791988>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -297,7 +297,7 @@ const node = function () {
       "kind": "LinkedField",
       "name": "bundles",
       "plural": true,
-      "selections": [v4 /*: any*/, v9 /*: any*/, {
+      "selections": [v4 /*: any*/, v12 /*: any*/, v9 /*: any*/, {
         "alias": null,
         "args": null,
         "concreteType": "FontStyle",
@@ -306,7 +306,7 @@ const node = function () {
         "plural": true,
         "selections": [v4 /*: any*/, v18 /*: any*/, v27 /*: any*/, v28 /*: any*/, v12 /*: any*/, v22 /*: any*/, v29 /*: any*/, v15 /*: any*/, v20 /*: any*/, v21 /*: any*/],
         "storageKey": null
-      }, v12 /*: any*/, v15 /*: any*/],
+      }, v15 /*: any*/],
       "storageKey": "bundles(acrossFamilies:true)"
     },
     v31 = {
@@ -778,12 +778,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "38b9ac37413b2104a1a786bdd185db13",
+      "cacheID": "55f9c9300355f867f5150f0c070d800c",
       "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    ...StoreModalProductViewer_4sncub\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(acrossFamilies: true) {\n    id\n    visibility\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 StoreModalPackButton_fontPack_4sncub on FontPack {\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n    price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n      amount\n    }\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalPack_fontPack_4sncub on FontPack {\n  ...StoreModalPackButton_fontPack_4sncub\n  members {\n    __typename\n    ... on FontStyle {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      cssStyle\n      family {\n        id\n        name\n        isVariableFont\n        visibility\n      }\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ... on FontCollection {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n      children(collectionTypes: [FAMILY]) {\n        id\n        visibility\n        ...StoreModalFamily_collection_4sncub\n      }\n    }\n    ... on Node {\n      __isNode: __typename\n      id\n    }\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  __typename\n  ... on FontCollection {\n    id\n    visibility\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n    children(collectionTypes: [FAMILY]) {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  ... on FontPack {\n    id\n    ...StoreModalPack_fontPack_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_licenseable on Licenseable {\n  __isLicenseable: __typename\n  id\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  excludedLicenses {\n    id\n  }\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 FontPack {\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 StoreModalProductViewer_4sncub on 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    storeModalLicenseeSelfLabel(format: HTML)\n    storeModalLicenseeSelfDescription(format: HTML)\n    storeModalLicenseeClientLabel(format: HTML)\n    storeModalLicenseeClientDescription(format: HTML)\n    storeModalSelectOrderVariablesLabel(format: HTML)\n    storeModalSelectLicensesLabel(format: HTML)\n    storeModalSelectFontsLabel(format: HTML)\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    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\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    ...StoreModalProductViewer_4sncub\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(acrossFamilies: true) {\n    id\n    name\n    visibility\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 StoreModalPackButton_fontPack_4sncub on FontPack {\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n    price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n      amount\n    }\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalPack_fontPack_4sncub on FontPack {\n  ...StoreModalPackButton_fontPack_4sncub\n  members {\n    __typename\n    ... on FontStyle {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      cssStyle\n      family {\n        id\n        name\n        isVariableFont\n        visibility\n      }\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ... on FontCollection {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n      children(collectionTypes: [FAMILY]) {\n        id\n        visibility\n        ...StoreModalFamily_collection_4sncub\n      }\n    }\n    ... on Node {\n      __isNode: __typename\n      id\n    }\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  __typename\n  ... on FontCollection {\n    id\n    visibility\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n    children(collectionTypes: [FAMILY]) {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  ... on FontPack {\n    id\n    ...StoreModalPack_fontPack_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_licenseable on Licenseable {\n  __isLicenseable: __typename\n  id\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  excludedLicenses {\n    id\n  }\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 FontPack {\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 StoreModalProductViewer_4sncub on 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    storeModalLicenseeSelfLabel(format: HTML)\n    storeModalLicenseeSelfDescription(format: HTML)\n    storeModalLicenseeClientLabel(format: HTML)\n    storeModalLicenseeClientDescription(format: HTML)\n    storeModalSelectOrderVariablesLabel(format: HTML)\n    storeModalSelectLicensesLabel(format: HTML)\n    storeModalSelectFontsLabel(format: HTML)\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    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\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<<5ff6991d572efd3da82bb9b8bc8c60de>>
+ * @generated SignedSource<<c1876446c499f74a29e20ada076f17f7>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductRefetchQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<5ff6991d572efd3da82bb9b8bc8c60de>>
+ * @generated SignedSource<<c1876446c499f74a29e20ada076f17f7>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -295,7 +295,7 @@ const node = function () {
       "kind": "LinkedField",
       "name": "bundles",
       "plural": true,
-      "selections": [v6 /*: any*/, v7 /*: any*/, {
+      "selections": [v6 /*: any*/, v10 /*: any*/, v7 /*: any*/, {
         "alias": null,
         "args": null,
         "concreteType": "FontStyle",
@@ -304,7 +304,7 @@ const node = function () {
         "plural": true,
         "selections": [v6 /*: any*/, v16 /*: any*/, v25 /*: any*/, v26 /*: any*/, v10 /*: any*/, v20 /*: any*/, v27 /*: any*/, v13 /*: any*/, v18 /*: any*/, v19 /*: any*/],
         "storageKey": null
-      }, v10 /*: any*/, v13 /*: any*/],
+      }, v13 /*: any*/],
       "storageKey": "bundles(acrossFamilies:true)"
     },
     v29 = {
@@ -514,12 +514,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "60bff65fb72623a576209940b959d91c",
+      "cacheID": "5877ecb283c40b094b063a3e3b88b8ae",
       "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(acrossFamilies: true) {\n    id\n    visibility\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 StoreModalPackButton_fontPack_4sncub on FontPack {\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n    price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n      amount\n    }\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalPack_fontPack_4sncub on FontPack {\n  ...StoreModalPackButton_fontPack_4sncub\n  members {\n    __typename\n    ... on FontStyle {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      cssStyle\n      family {\n        id\n        name\n        isVariableFont\n        visibility\n      }\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ... on FontCollection {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n      children(collectionTypes: [FAMILY]) {\n        id\n        visibility\n        ...StoreModalFamily_collection_4sncub\n      }\n    }\n    ... on Node {\n      __isNode: __typename\n      id\n    }\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  __typename\n  ... on FontCollection {\n    id\n    visibility\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n    children(collectionTypes: [FAMILY]) {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  ... on FontPack {\n    id\n    ...StoreModalPack_fontPack_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_licenseable on Licenseable {\n  __isLicenseable: __typename\n  id\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  excludedLicenses {\n    id\n  }\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    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\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(acrossFamilies: true) {\n    id\n    name\n    visibility\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 StoreModalPackButton_fontPack_4sncub on FontPack {\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n    price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n      amount\n    }\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalPack_fontPack_4sncub on FontPack {\n  ...StoreModalPackButton_fontPack_4sncub\n  members {\n    __typename\n    ... on FontStyle {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      cssStyle\n      family {\n        id\n        name\n        isVariableFont\n        visibility\n      }\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ... on FontCollection {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n      children(collectionTypes: [FAMILY]) {\n        id\n        visibility\n        ...StoreModalFamily_collection_4sncub\n      }\n    }\n    ... on Node {\n      __isNode: __typename\n      id\n    }\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  __typename\n  ... on FontCollection {\n    id\n    visibility\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n    children(collectionTypes: [FAMILY]) {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  ... on FontPack {\n    id\n    ...StoreModalPack_fontPack_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_licenseable on Licenseable {\n  __isLicenseable: __typename\n  id\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  excludedLicenses {\n    id\n  }\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    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\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__/StoreModalProductSlugQuery.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<b23803b39edffe24d06bd453e4126256>>
+ * @generated SignedSource<<f862417337955b7f7262fcc822d87026>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductSlugQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<b23803b39edffe24d06bd453e4126256>>
+ * @generated SignedSource<<f862417337955b7f7262fcc822d87026>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -302,7 +302,7 @@ const node = function () {
       "kind": "LinkedField",
       "name": "bundles",
       "plural": true,
-      "selections": [v4 /*: any*/, v10 /*: any*/, {
+      "selections": [v4 /*: any*/, v13 /*: any*/, v10 /*: any*/, {
         "alias": null,
         "args": null,
         "concreteType": "FontStyle",
@@ -311,7 +311,7 @@ const node = function () {
         "plural": true,
         "selections": [v4 /*: any*/, v19 /*: any*/, v28 /*: any*/, v29 /*: any*/, v13 /*: any*/, v23 /*: any*/, v30 /*: any*/, v16 /*: any*/, v21 /*: any*/, v22 /*: any*/],
         "storageKey": null
-      }, v13 /*: any*/, v16 /*: any*/],
+      }, v16 /*: any*/],
       "storageKey": "bundles(acrossFamilies:true)"
     },
     v32 = {
@@ -818,12 +818,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "5393d2c838943cbce941bcca7dd5aa4d",
+      "cacheID": "0b08bcd167621cb4ece4d513e0b7d8fb",
       "id": null,
       "metadata": {},
       "name": "StoreModalProductSlugQuery",
       "operationKind": "query",
-      "text": "query StoreModalProductSlugQuery(\n  $productSlug: String!\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n) {\n  viewer {\n    slug(name: $productSlug) {\n      collection: fontCollection {\n        id\n        ...StoreModalProductContent_collection_4sncub\n      }\n      pack: fontPack {\n        id\n        ...StoreModalProductContent_collection_4sncub\n      }\n      id\n    }\n    ...StoreModalProductViewer_4sncub\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(acrossFamilies: true) {\n    id\n    visibility\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 StoreModalPackButton_fontPack_4sncub on FontPack {\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n    price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n      amount\n    }\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalPack_fontPack_4sncub on FontPack {\n  ...StoreModalPackButton_fontPack_4sncub\n  members {\n    __typename\n    ... on FontStyle {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      cssStyle\n      family {\n        id\n        name\n        isVariableFont\n        visibility\n      }\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ... on FontCollection {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n      children(collectionTypes: [FAMILY]) {\n        id\n        visibility\n        ...StoreModalFamily_collection_4sncub\n      }\n    }\n    ... on Node {\n      __isNode: __typename\n      id\n    }\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  __typename\n  ... on FontCollection {\n    id\n    visibility\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n    children(collectionTypes: [FAMILY]) {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  ... on FontPack {\n    id\n    ...StoreModalPack_fontPack_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_licenseable on Licenseable {\n  __isLicenseable: __typename\n  id\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  excludedLicenses {\n    id\n  }\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 FontPack {\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 StoreModalProductViewer_4sncub on 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    storeModalLicenseeSelfLabel(format: HTML)\n    storeModalLicenseeSelfDescription(format: HTML)\n    storeModalLicenseeClientLabel(format: HTML)\n    storeModalLicenseeClientDescription(format: HTML)\n    storeModalSelectOrderVariablesLabel(format: HTML)\n    storeModalSelectLicensesLabel(format: HTML)\n    storeModalSelectFontsLabel(format: HTML)\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    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\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 StoreModalProductSlugQuery(\n  $productSlug: String!\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n) {\n  viewer {\n    slug(name: $productSlug) {\n      collection: fontCollection {\n        id\n        ...StoreModalProductContent_collection_4sncub\n      }\n      pack: fontPack {\n        id\n        ...StoreModalProductContent_collection_4sncub\n      }\n      id\n    }\n    ...StoreModalProductViewer_4sncub\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(acrossFamilies: true) {\n    id\n    name\n    visibility\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 StoreModalPackButton_fontPack_4sncub on FontPack {\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n    price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n      amount\n    }\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalPack_fontPack_4sncub on FontPack {\n  ...StoreModalPackButton_fontPack_4sncub\n  members {\n    __typename\n    ... on FontStyle {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      cssStyle\n      family {\n        id\n        name\n        isVariableFont\n        visibility\n      }\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ... on FontCollection {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n      children(collectionTypes: [FAMILY]) {\n        id\n        visibility\n        ...StoreModalFamily_collection_4sncub\n      }\n    }\n    ... on Node {\n      __isNode: __typename\n      id\n    }\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  __typename\n  ... on FontCollection {\n    id\n    visibility\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n    children(collectionTypes: [FAMILY]) {\n      id\n      visibility\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  ... on FontPack {\n    id\n    ...StoreModalPack_fontPack_4sncub\n    ...StoreModalProductLicenseSelection_licenseable\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_licenseable on Licenseable {\n  __isLicenseable: __typename\n  id\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  excludedLicenses {\n    id\n  }\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 FontPack {\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 StoreModalProductViewer_4sncub on 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    storeModalLicenseeSelfLabel(format: HTML)\n    storeModalLicenseeSelfDescription(format: HTML)\n    storeModalLicenseeClientLabel(format: HTML)\n    storeModalLicenseeClientDescription(format: HTML)\n    storeModalSelectOrderVariablesLabel(format: HTML)\n    storeModalSelectLicensesLabel(format: HTML)\n    storeModalSelectFontsLabel(format: HTML)\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    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\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/__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/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,7 +50,7 @@ export default function StoreModalFamily(_ref) {
     onSelect,
     title
   } = _ref;
-  const collection = useFragment((_StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "9f2a8cd937ebe2c06f2bf771d38de985" && 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]);
   // An unlisted bundle gets no button, but its price still applies as an
   // upgrade: the product state reads every bundle.
@@ -55,11 +65,11 @@ export default function StoreModalFamily(_ref) {
       collection: collection,
       onSelectSku: onSelect
     }),
-    bundles: listedBundles === null || listedBundles === void 0 ? void 0 : listedBundles.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 {
@@ -2701,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.13.0";
+export const version = "3.14.0";

package/package.json

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