fontdue-js 2.4.0 → 2.5.0

package/dist/__generated__/StoreModalContainerQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<a5cfb56566c459856b3fca56dcc4a45c>>
+ * @generated SignedSource<<602548031710d0196136676f735a8272>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -36,25 +36,47 @@ const node = function () {
     v2 = {
       "alias": null,
       "args": null,
-      "concreteType": "Settings",
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssFamily",
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "cssUrl",
+      "storageKey": null
+    },
+    v5 = [v2 /*: any*/, v3 /*: any*/, {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontCollection",
       "kind": "LinkedField",
-      "name": "settings",
+      "name": "family",
       "plural": false,
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "uiFontUrl",
-        "storageKey": null
-      }, {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "uiFontName",
-        "storageKey": null
-      }],
+      "selections": [v4 /*: any*/],
+
       "storageKey": null
-    };
+    }],
+    v6 = [v2 /*: any*/, v3 /*: any*/, {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontCollection",
+      "kind": "LinkedField",
+      "name": "family",
+      "plural": false,
+      "selections": [v4 /*: any*/, v0 /*: any*/],
+
+      "storageKey": null
+    }, v0 /*: any*/];
+
   return {
     "fragment": {
       "argumentDefinitions": [],
@@ -78,8 +100,34 @@ const node = function () {
           "selections": [v1 /*: any*/],
 
           "storageKey": null
-        }, v2 /*: any*/],
-
+        }, {
+          "alias": null,
+          "args": null,
+          "concreteType": "Settings",
+          "kind": "LinkedField",
+          "name": "settings",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "uiFontStyle",
+            "plural": false,
+            "selections": v5 /*: any*/,
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "uiFontStyleBold",
+            "plural": false,
+            "selections": v5 /*: any*/,
+            "storageKey": null
+          }],
+          "storageKey": null
+        }],
         "storageKey": null
       }],
       "type": "RootQueryType",
@@ -107,21 +155,48 @@ const node = function () {
           "selections": [v1 /*: any*/, v0 /*: any*/],
 
           "storageKey": null
-        }, v2 /*: any*/, v0 /*: any*/],
+        }, {
+          "alias": null,
+          "args": null,
+          "concreteType": "Settings",
+          "kind": "LinkedField",
+          "name": "settings",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "uiFontStyle",
+            "plural": false,
+            "selections": v6 /*: any*/,
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "concreteType": "FontStyle",
+            "kind": "LinkedField",
+            "name": "uiFontStyleBold",
+            "plural": false,
+            "selections": v6 /*: any*/,
+            "storageKey": null
+          }],
+          "storageKey": null
+        }, v0 /*: any*/],
 
         "storageKey": null
       }]
     },
     "params": {
-      "cacheID": "9f5bb3fef45f2132fe47d71cdcc09394",
+      "cacheID": "8b53d0e391aeeeeefd259a13251aca86",
       "id": null,
       "metadata": {},
       "name": "StoreModalContainerQuery",
       "operationKind": "query",
-      "text": "query StoreModalContainerQuery {\n  viewer {\n    currentOrder {\n      orderItems {\n        id\n      }\n      id\n    }\n    settings {\n      uiFontUrl\n      uiFontName\n    }\n    id\n  }\n}\n"
+      "text": "query StoreModalContainerQuery {\n  viewer {\n    currentOrder {\n      orderItems {\n        id\n      }\n      id\n    }\n    settings {\n      uiFontStyle {\n        name\n        cssFamily\n        family {\n          cssUrl\n          id\n        }\n        id\n      }\n      uiFontStyleBold {\n        name\n        cssFamily\n        family {\n          cssUrl\n          id\n        }\n        id\n      }\n    }\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "67cf3b7a14c2b8ff47a8138e0f234624";
+node.hash = "dd4757b9238f5ae8689c7191b4abe64c";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<7dc96b3e1c1cea74e1df39a055507b58>>
+ * @generated SignedSource<<12d307fcc2ca71585e67af5328841e38>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -7,6 +7,7 @@ import { ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type StoreModalProductLicense_license$data = {
     readonly defaultSelected: boolean | null;
+    readonly description: string | null;
     readonly id: string;
     readonly name: string | null;
     readonly url: string | null;

package/dist/__generated__/StoreModalProductLicense_license.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<7dc96b3e1c1cea74e1df39a055507b58>>
+ * @generated SignedSource<<12d307fcc2ca71585e67af5328841e38>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -41,6 +41,16 @@ const node = function () {
       "name": "url",
       "storageKey": null
     }, v1 /*: any*/, {
+      "alias": null,
+      "args": [{
+        "kind": "Literal",
+        "name": "format",
+        "value": "HTML"
+      }],
+      "kind": "ScalarField",
+      "name": "description",
+      "storageKey": "description(format:\"HTML\")"
+    }, {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
@@ -89,6 +99,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "22e24165f79ce30a9190ace765d3d1ce";
+node.hash = "5729815aeedac2b8ea39eaab0a986b48";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<b4b764624fbe00d3d774d30ba0b40b3d>>
+ * @generated SignedSource<<c70b3a4167e830f3a526f236819eeb80>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<b4b764624fbe00d3d774d30ba0b40b3d>>
+ * @generated SignedSource<<c70b3a4167e830f3a526f236819eeb80>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -377,6 +377,16 @@ const node = function () {
             "name": "url",
             "storageKey": null
           }, v10 /*: any*/, {
+            "alias": null,
+            "args": [{
+              "kind": "Literal",
+              "name": "format",
+              "value": "HTML"
+            }],
+            "kind": "ScalarField",
+            "name": "description",
+            "storageKey": "description(format:\"HTML\")"
+          }, {
             "alias": null,
             "args": null,
             "kind": "ScalarField",
@@ -491,12 +501,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "505ecb8862c17c0dab95c6ae0415862e",
+      "cacheID": "4432f6cf13a130d083e8ae9a7116da48",
       "id": null,
       "metadata": {},
       "name": "StoreModalProductQuery",
       "operationKind": "query",
-      "text": "query StoreModalProductQuery(\n  $productId: ID!\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalFamily_collection\n    ... on FontCollection {\n      children(collectionTypes: [FAMILY]) {\n        id\n        ...StoreModalFamily_collection\n      }\n    }\n  }\n  viewer {\n    ...StoreModalProductLicenseSelection_viewer\n    ...StoreModalProductSummary_viewer\n    endpoint\n    stripeAccountId\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle on Bundle {\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection on FontCollection {\n  ...StoreModalFamilyButton_collection\n  cssUrl\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle\n    }\n    ...StoreModalBundleButton_bundle\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    ...StoreModalStyleButton_fontStyle\n  }\n}\n\nfragment StoreModalProductLicenseSelection_viewer on Viewer {\n  licenses(licenseTypes: [RETAIL]) {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\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 on Viewer {\n  precart(skuIds: [], licenseOptions: []) {\n    skus {\n      price(licenseOptions: []) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\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 on FontStyle {\n  ...FontStyle_fontStyle\n  id\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  variableAxes {\n    name\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalProductQuery(\n  $productId: ID!\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalFamily_collection\n    ... on FontCollection {\n      children(collectionTypes: [FAMILY]) {\n        id\n        ...StoreModalFamily_collection\n      }\n    }\n  }\n  viewer {\n    ...StoreModalProductLicenseSelection_viewer\n    ...StoreModalProductSummary_viewer\n    endpoint\n    stripeAccountId\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle on Bundle {\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection on FontCollection {\n  ...StoreModalFamilyButton_collection\n  cssUrl\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle\n    }\n    ...StoreModalBundleButton_bundle\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    ...StoreModalStyleButton_fontStyle\n  }\n}\n\nfragment StoreModalProductLicenseSelection_viewer on Viewer {\n  licenses(licenseTypes: [RETAIL]) {\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 on Viewer {\n  precart(skuIds: [], licenseOptions: []) {\n    skus {\n      price(licenseOptions: []) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\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 on FontStyle {\n  ...FontStyle_fontStyle\n  id\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  variableAxes {\n    name\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();

package/dist/components/Family/FamilyList.js

@@ -19,16 +19,36 @@ function FamilyList(_ref) {
     node: nodeKey,
     text
   } = _ref;
-  const node = (0, _reactRelay.useFragment)(_FamilyList_node !== void 0 ? _FamilyList_node : (_FamilyList_node = require("../../__generated__/FamilyList_node.graphql"), _FamilyList_node.hash && _FamilyList_node.hash !== "3e59cb2493f7c235fe19c70689ca2fc6" && console.error("The definition of 'FamilyList_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FamilyList_node), nodeKey);
+  const node = (0, _reactRelay.useFragment)(_FamilyList_node !== void 0 ? _FamilyList_node : (_FamilyList_node = require("../../__generated__/FamilyList_node.graphql"), _FamilyList_node.hash && _FamilyList_node.hash !== "d52770ab2e7aaa83f392a5d80340f3ad" && console.error("The definition of 'FamilyList_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FamilyList_node), nodeKey);
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: "font-family-block__list",
     style: {
       fontFamily: node.name
     }
-  }, (_node$fontStyles = node.fontStyles) === null || _node$fontStyles === void 0 ? void 0 : _node$fontStyles.map((style, i) => /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
-    fontStyle: style,
-    Component: "li",
-    key: i,
-    className: "font-family-block__list__item"
-  }, /*#__PURE__*/_react.default.createElement("span", null, text || styleName(style.name, style.name_localized), " "))));
+  }, (_node$fontStyles = node.fontStyles) === null || _node$fontStyles === void 0 ? void 0 : _node$fontStyles.map((style, i) => {
+    var _style$variableInstan, _style$variableInstan2;
+    return /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+      fontStyle: style,
+      Component: "li",
+      key: i,
+      className: "font-family-block__list__item"
+    }, (((_style$variableInstan = style.variableInstances) === null || _style$variableInstan === void 0 ? void 0 : _style$variableInstan.length) ?? 0) > 0 ? (_style$variableInstan2 = style.variableInstances) === null || _style$variableInstan2 === void 0 ? void 0 : _style$variableInstan2.map(_ref2 => {
+      let {
+        name,
+        coordinates
+      } = _ref2;
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: name,
+        style: {
+          fontVariationSettings: coordinates.map(_ref3 => {
+            let {
+              axis,
+              value
+            } = _ref3;
+            return `'${axis}' ${value}`;
+          }).join(',')
+        }
+      }, name, ' ');
+    }) : /*#__PURE__*/_react.default.createElement("span", null, text || styleName(style.name, style.name_localized), " "));
+  }));
 }

package/dist/components/Family/index.js

@@ -13,17 +13,18 @@ var _Price = require("../Price");
 var _FamilyList = _interopRequireDefault(require("./FamilyList"));
 var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 var _reducer = require("../../reducer");
+var _utils = require("../../utils");
 var _Family_node;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function Family(_ref) {
-  var _node$families;
+  var _node$fontStyles, _node$fontStyles2, _node$families;
   let {
     node: nodeKey,
     size
   } = _ref;
-  const node = (0, _reactRelay.useFragment)(_Family_node !== void 0 ? _Family_node : (_Family_node = require("../../__generated__/Family_node.graphql"), _Family_node.hash && _Family_node.hash !== "b51af1e6bc979d5219f04c848dc3d76d" && console.error("The definition of 'Family_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Family_node), nodeKey);
+  const node = (0, _reactRelay.useFragment)(_Family_node !== void 0 ? _Family_node : (_Family_node = require("../../__generated__/Family_node.graphql"), _Family_node.hash && _Family_node.hash !== "2fecc4fd332a593d28387a3a87559fe4" && console.error("The definition of 'Family_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Family_node), nodeKey);
   const precartOpen = (0, _reactRedux.useSelector)(state => state.precartOpen);
   const selector = node.sku ? (0, _reducer.isSelected)(node.sku.id) : () => false;
   const selected = (0, _reactRedux.useSelector)(selector);
@@ -61,7 +62,21 @@ function Family(_ref) {
     className: "font-family-block__separator"
   }), /*#__PURE__*/_react.default.createElement("p", {
     className: "font-family-block__count"
-  }, node.totalStyles, " styles")), /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _utils.pluralize)(node.totalStyles ?? 0, node.isVariableFont ? 'font' : 'style')), node.isVariableFont ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "font-family-block__separator"
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-family-block__count"
+  }, (0, _utils.pluralize)(((_node$fontStyles = node.fontStyles) === null || _node$fontStyles === void 0 ? void 0 : _node$fontStyles.reduce((total, style) => {
+    var _style$variableAxes;
+    return total + (((_style$variableAxes = style.variableAxes) === null || _style$variableAxes === void 0 ? void 0 : _style$variableAxes.length) ?? 0);
+  }, 0)) ?? 0, 'variable axis', 'variable axes')), /*#__PURE__*/_react.default.createElement("span", {
+    className: "font-family-block__separator"
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-family-block__count"
+  }, (0, _utils.pluralize)(((_node$fontStyles2 = node.fontStyles) === null || _node$fontStyles2 === void 0 ? void 0 : _node$fontStyles2.reduce((total, style) => {
+    var _style$variableInstan;
+    return total + (((_style$variableInstan = style.variableInstances) === null || _style$variableInstan === void 0 ? void 0 : _style$variableInstan.length) ?? 0);
+  }, 0)) ?? 0, 'named instance'))) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: "font-family-block__lists"
   }, isSuperFamily ? (_node$families = node.families) === null || _node$families === void 0 ? void 0 : _node$families.map((family, index) => {
     var _family$featureStyle;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
-import { NewsletterSignupQuery, NewsletterSignupQuery$data } from '__generated__/NewsletterSignupQuery.graphql';
+import { NewsletterSignupQuery } from '__generated__/NewsletterSignupQuery.graphql';
 type PreloadedQuery = SerializablePreloadedQuery<NewsletterSignupQuery>;
 export interface NewsletterSignup_props {
     optInLabel?: string;
@@ -9,11 +9,9 @@ export interface NewsletterSignup_props {
     optInCheckboxChecked?: boolean;
     title?: string;
     intro?: string;
-    data: NewsletterSignupQuery$data;
-    preloadedQuery?: PreloadedQuery;
 }
 export declare function NewsletterSignupPreloadedQueryRenderer({ preloadedQuery, }: {
     preloadedQuery: PreloadedQuery;
 }): React.JSX.Element;
-export default function NewsletterSignup(): React.JSX.Element;
+export default function NewsletterSignup(props: NewsletterSignup_props): React.JSX.Element;
 export {};

package/dist/components/NewsletterSignup/index.js

@@ -15,6 +15,7 @@ var _NewsletterSignupUpdateCustomerMutation, _NewsletterSignupQuery;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const updateCustomerMutation = _NewsletterSignupUpdateCustomerMutation !== void 0 ? _NewsletterSignupUpdateCustomerMutation : (_NewsletterSignupUpdateCustomerMutation = require("../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql"), _NewsletterSignupUpdateCustomerMutation.hash && _NewsletterSignupUpdateCustomerMutation.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation);
 const query = _NewsletterSignupQuery !== void 0 ? _NewsletterSignupQuery : (_NewsletterSignupQuery = require("../../__generated__/NewsletterSignupQuery.graphql"), _NewsletterSignupQuery.hash && _NewsletterSignupQuery.hash !== "16f0b6d7ed420ec5857c972b77805e4c" && console.error("The definition of 'NewsletterSignupQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupQuery);
 function NewsletterSignupComponent(_ref) {
@@ -145,9 +146,9 @@ function NewsletterSignupPreloadedQueryRenderer(_ref3) {
     data: data
   });
 }
-function NewsletterSignup() {
+function NewsletterSignup(props) {
   const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
-  return /*#__PURE__*/_react.default.createElement(NewsletterSignupComponent, {
+  return /*#__PURE__*/_react.default.createElement(NewsletterSignupComponent, _extends({}, props, {
     data: data
-  });
+  }));
 }

package/dist/components/NewsletterSignup/index.server.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 async function NewsletterSignup(props) {
   const preloadedQuery = await (0, _loadSerializableQuery.default)(_NewsletterSignupQuery.default, {});
-  return /*#__PURE__*/_react.default.createElement(_index.NewsletterSignupPreloadedQueryRenderer, _extends({
+  return /*#__PURE__*/_react.default.createElement(_index.NewsletterSignupPreloadedQueryRenderer, _extends({}, props, {
     preloadedQuery: preloadedQuery
-  }, props));
+  }));
 }

package/dist/components/Precart/License.js

@@ -17,11 +17,13 @@ const License = _ref => {
     onSelectLicense,
     onSelectLicenseOption
   } = _ref;
-  const node = (0, _reactRelay.useFragment)(_License_node !== void 0 ? _License_node : (_License_node = require("../../__generated__/License_node.graphql"), _License_node.hash && _License_node.hash !== "215059eeecc274d540639b4247513ee2" && console.error("The definition of 'License_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _License_node), nodeKey);
+  const node = (0, _reactRelay.useFragment)(_License_node !== void 0 ? _License_node : (_License_node = require("../../__generated__/License_node.graphql"), _License_node.hash && _License_node.hash !== "1550b152731d8412ffc55716cb536407" && console.error("The definition of 'License_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _License_node), nodeKey);
   if (!node) return null;
   const selectedLicenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
   const selectedOptions = selectedLicenseOptions.find(spec => spec.licenseId === node.id);
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart__license-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "pre-cart__license",
     "data-selected": selected
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -59,7 +61,12 @@ const License = _ref => {
       key: option.id,
       value: option.id
     }, option.amount)))));
-  })));
+  }))), node.description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart__license__description",
+    dangerouslySetInnerHTML: {
+      __html: node.description
+    }
+  }));
 };
 var _default = License;
 exports.default = _default;

package/dist/components/Precart/index.js

@@ -43,7 +43,7 @@ const countStylesPrice = _ref2 => {
     var _sku$product4, _sku$product5;
     if (((_sku$product4 = sku.product) === null || _sku$product4 === void 0 ? void 0 : _sku$product4.__typename) === 'FontCollection' || ((_sku$product5 = sku.product) === null || _sku$product5 === void 0 ? void 0 : _sku$product5.__typename) === 'Bundle') {
       var _sku$product6, _sku$product6$totalSt;
-      return acc + (((_sku$product6 = sku.product) === null || _sku$product6 === void 0 ? void 0 : (_sku$product6$totalSt = _sku$product6.totalStylesPrice) === null || _sku$product6$totalSt === void 0 ? void 0 : _sku$product6$totalSt.amount) ?? 0);
+      return acc + (((_sku$product6 = sku.product) === null || _sku$product6 === void 0 ? void 0 : (_sku$product6$totalSt = _sku$product6.totalStylesPrice) === null || _sku$product6$totalSt === void 0 ? void 0 : _sku$product6$totalSt.amount) ?? sku.price.amount);
     }
     return acc + sku.price.amount;
   }, 0);
@@ -241,7 +241,7 @@ function Precart(_ref3) {
       className: "pre-cart__your-selection__items"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "pre-cart__your-selection__item"
-    }, /*#__PURE__*/_react.default.createElement("div", null, collection === null || collection === void 0 ? void 0 : collection.name, /*#__PURE__*/_react.default.createElement("br", null), (0, _utils.pluralize)(countStyles(viewer), 'style')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Price.Price, {
+    }, /*#__PURE__*/_react.default.createElement("div", null, collection === null || collection === void 0 ? void 0 : collection.name, /*#__PURE__*/_react.default.createElement("br", null), (0, _utils.pluralize)(countStyles(viewer), 'font')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Price.Price, {
       price: {
         amount: countStylesPrice(viewer),
         currency: subtotal.currency

package/dist/components/SKUPrice/index.js

@@ -46,7 +46,10 @@ function SKUPrice(_ref) {
     licenseId: spec.licenseId,
     licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
   }));
-  const prevLicenseOptionsSpecs = (0, _react.useRef)(licenseOptionsSpecs);
+
+  // this must be null to start because we always want to fetch the price for
+  // the current license selection on mount
+  const prevLicenseOptionsSpecs = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (!sku) return;
     if (!(0, _fastDeepEqual.default)(prevLicenseOptionsSpecs.current, licenseOptionsSpecs)) {

package/dist/components/StoreModal/StoreModalContainer.js

@@ -37,12 +37,24 @@ const getBackLink = (history, currentRoute) => {
   if (!previous) return null;
   return getPageTitle(previous.name);
 };
+function getFontData(fontStyle) {
+  if (!fontStyle) return null;
+  const {
+    name,
+    cssFamily,
+    family
+  } = fontStyle;
+  return {
+    name: `${cssFamily} ${name}`,
+    cssUrl: (family === null || family === void 0 ? void 0 : family.cssUrl) ?? null
+  };
+}
 const StoreModalContainer = _ref => {
   var _currentOrder, _currentOrder$orderIt, _settings, _settings2;
   let {
     children
   } = _ref;
-  const data = (0, _reactRelay.useLazyLoadQuery)(_StoreModalContainerQuery !== void 0 ? _StoreModalContainerQuery : (_StoreModalContainerQuery = require("../../__generated__/StoreModalContainerQuery.graphql"), _StoreModalContainerQuery.hash && _StoreModalContainerQuery.hash !== "67cf3b7a14c2b8ff47a8138e0f234624" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery), {});
+  const data = (0, _reactRelay.useLazyLoadQuery)(_StoreModalContainerQuery !== void 0 ? _StoreModalContainerQuery : (_StoreModalContainerQuery = require("../../__generated__/StoreModalContainerQuery.graphql"), _StoreModalContainerQuery.hash && _StoreModalContainerQuery.hash !== "dd4757b9238f5ae8689c7191b4abe64c" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery), {});
   const dispatch = (0, _reactRedux.useDispatch)();
   const orderItemCount = ((_currentOrder = data.viewer.currentOrder) === null || _currentOrder === void 0 ? void 0 : (_currentOrder$orderIt = _currentOrder.orderItems) === null || _currentOrder$orderIt === void 0 ? void 0 : _currentOrder$orderIt.length) ?? 0;
   const showCartButton = orderItemCount > 0;
@@ -92,8 +104,10 @@ const StoreModalContainer = _ref => {
     onClickCart: handleCart,
     showCartButton: showCartButton,
     orderItemCount: orderItemCount,
-    uiFontUrl: (_settings = data.viewer.settings) === null || _settings === void 0 ? void 0 : _settings.uiFontUrl,
-    uiFontName: (_settings2 = data.viewer.settings) === null || _settings2 === void 0 ? void 0 : _settings2.uiFontName
+    fonts: {
+      regular: getFontData((_settings = data.viewer.settings) === null || _settings === void 0 ? void 0 : _settings.uiFontStyle),
+      bold: getFontData((_settings2 = data.viewer.settings) === null || _settings2 === void 0 ? void 0 : _settings2.uiFontStyleBold)
+    }
   }, {
     backText: link,
     pageTitle: getPageTitle(currentRoute),

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

@@ -3,6 +3,7 @@ import { StoreModalFamily_collection$key } from '../../__generated__/StoreModalF
 interface StoreModalFamilyProps {
     collection: StoreModalFamily_collection$key;
     onSelect: (skuId: string, selected: boolean) => void;
+    title?: React.ReactNode;
 }
-export default function StoreModalFamily({ collection: collectionKey, onSelect, }: StoreModalFamilyProps): React.JSX.Element | null;
+export default function StoreModalFamily({ collection: collectionKey, onSelect, title, }: StoreModalFamilyProps): React.JSX.Element | null;
 export {};

package/dist/components/StoreModal/StoreModalFamily.js

@@ -34,7 +34,8 @@ function StoreModalFamily(_ref) {
   var _collection$bundles;
   let {
     collection: collectionKey,
-    onSelect
+    onSelect,
+    title
   } = _ref;
   const collection = (0, _reactRelay.useFragment)(_StoreModalFamily_collection !== void 0 ? _StoreModalFamily_collection : (_StoreModalFamily_collection = require("../../__generated__/StoreModalFamily_collection.graphql"), _StoreModalFamily_collection.hash && _StoreModalFamily_collection.hash !== "f0e4764ace2386cb64ef3f8d85128268" && 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 = (0, _react.useMemo)(() => stylesGrouped(collection), [collection]);
@@ -43,6 +44,7 @@ function StoreModalFamily(_ref) {
     stylesheet: collection.cssUrl && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
       href: collection.cssUrl
     }) || null,
+    title,
     familyButton: /*#__PURE__*/_react.default.createElement(_StoreModalFamilyButton.default, {
       collection: collection,
       onSelectSku: onSelect

package/dist/components/StoreModal/StoreModalProduct.js

@@ -56,6 +56,7 @@ const StoreModalProduct = _ref => {
     body: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, licensesPosition === 'top' && /*#__PURE__*/_react.default.createElement(_StoreModalProductLicenseSelection.default, {
       viewer: viewer
     }), collection && /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, {
+      title: "Select fonts",
       collection: collection,
       onSelect: handleSelectProduct
     }), collection === null || collection === void 0 ? void 0 : (_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(child => /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, {

package/dist/components/StoreModalProductLicenseSelection/LicenseElement.d.ts

@@ -3,6 +3,7 @@ interface LicenseElementProps {
     onClick: () => void;
     isSelected: boolean;
     children: {
+        description: string | null;
         name: React.ReactNode;
         variables: React.ReactNode;
     };

package/dist/components/StoreModalProductLicenseSelection/LicenseElement.js

@@ -16,6 +16,7 @@ const LicenseElement = _ref => {
     onClick,
     isSelected,
     children: {
+      description,
       name,
       variables
     }
@@ -23,7 +24,9 @@ const LicenseElement = _ref => {
   const {
     form: config
   } = (0, _react.useContext)(_ConfigContext.default);
-  return /*#__PURE__*/_react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__license-selection__license"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: onClick,
     className: "store-modal__license-selection__license-button",
     "data-selected": isSelected
@@ -33,7 +36,12 @@ const LicenseElement = _ref => {
     className: "store-modal__license-selection__icon-pair"
   }, isSelected ? config.checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.CheckboxChecked, null) : /*#__PURE__*/_react.default.createElement(_Icons.CheckboxCrossed, null) : /*#__PURE__*/_react.default.createElement(_Icons.Checkbox, null), name)), /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__license-selection__variables"
-  }, variables));
+  }, variables)), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__license-selection__description",
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  }));
 };
 var _default = LicenseElement;
 exports.default = _default;

package/dist/components/StoreModalProductLicenseSelection/StoreModalProductLicense.js

@@ -41,7 +41,7 @@ function StoreModalProduceLicense(_ref) {
   let {
     license: licenseKey
   } = _ref;
-  const license = (0, _reactRelay.useFragment)(_StoreModalProductLicense_license !== void 0 ? _StoreModalProductLicense_license : (_StoreModalProductLicense_license = require("../../__generated__/StoreModalProductLicense_license.graphql"), _StoreModalProductLicense_license.hash && _StoreModalProductLicense_license.hash !== "22e24165f79ce30a9190ace765d3d1ce" && console.error("The definition of 'StoreModalProductLicense_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicense_license), licenseKey);
+  const license = (0, _reactRelay.useFragment)(_StoreModalProductLicense_license !== void 0 ? _StoreModalProductLicense_license : (_StoreModalProductLicense_license = require("../../__generated__/StoreModalProductLicense_license.graphql"), _StoreModalProductLicense_license.hash && _StoreModalProductLicense_license.hash !== "5729815aeedac2b8ea39eaab0a986b48" && console.error("The definition of 'StoreModalProductLicense_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicense_license), licenseKey);
   const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
   const selectedOptions = licenseOptions.find(_ref2 => {
     let {
@@ -90,6 +90,7 @@ function StoreModalProduceLicense(_ref) {
     isSelected: isSelected
   }, {
     name: license.name,
+    description: license.description,
     variables: license.variables && license.variables.map(variable => {
       if (variable.variableType === 'text') return null;
       if (!variable.options) return null;

package/dist/components/StoreModalProductSummary/index.js

@@ -129,7 +129,7 @@ const StoreModalProductSummary = _ref => {
     className: "store-modal__product-summary__nothing-selected"
   }, "Calculating price...") : /*#__PURE__*/_react.default.createElement("span", {
     className: "store-modal__product-summary__nothing-selected"
-  }, anySkusSelected ? 'Please select a license' : 'Please make a selection'), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, anySkusSelected ? 'Please select a license' : 'Please select some fonts'), /*#__PURE__*/_react.default.createElement(_Button.default, {
     className: "store-modal__product-summary__add-to-cart-button",
     onClick: handleAddToCart,
     disabled: submitting || !hasSelection