fontdue-js 2.3.0 → 2.4.1

package/dist/__generated__/StoreModalReviewUpdateOrderMutation.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<4ae4d20c3de5ad062a28acf932a133e4>>
+ * @generated SignedSource<<cb165101d637b23cf10877e459550c0b>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -219,6 +219,12 @@ const node = function () {
             "plural": false,
             "selections": v3 /*: any*/,
             "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "taxRate",
+            "storageKey": null
           }, {
             "alias": null,
             "args": null,
@@ -431,12 +437,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "e89388a21bf4c2064b75304b79f69e1d",
+      "cacheID": "f210f85b9f85456bab527dafecbdfada",
       "id": null,
       "metadata": {},
       "name": "StoreModalReviewUpdateOrderMutation",
       "operationKind": "mutation",
-      "text": "mutation StoreModalReviewUpdateOrderMutation(\n  $input: UpdateOrderInput!\n) {\n  updateOrder(input: $input) {\n    order {\n      ...StoreModalReview_order\n      total {\n        amount\n      }\n      id\n    }\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\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 StoreModalDownload_order on Order {\n  id\n  archiveUrl\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalReview_order on Order {\n  ...CartTotals_order\n  ...StoreModalDownload_order\n  customer {\n    email\n    name\n    id\n  }\n  billingIdentity {\n    name\n    email\n    phone\n    street\n    locality\n    administrativeArea\n    country\n    zip\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brandFormatted\n    }\n  }\n  orderItems {\n    id\n    description\n    sku {\n      ...SKUPrice_sku\n      id\n    }\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n  completeUrl\n  total {\n    amount\n  }\n}\n"
+      "text": "mutation StoreModalReviewUpdateOrderMutation(\n  $input: UpdateOrderInput!\n) {\n  updateOrder(input: $input) {\n    order {\n      ...StoreModalReview_order\n      total {\n        amount\n      }\n      id\n    }\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxRate\n  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\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 StoreModalDownload_order on Order {\n  id\n  archiveUrl\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalReview_order on Order {\n  ...CartTotals_order\n  ...StoreModalDownload_order\n  customer {\n    email\n    name\n    id\n  }\n  billingIdentity {\n    name\n    email\n    phone\n    street\n    locality\n    administrativeArea\n    country\n    zip\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brandFormatted\n    }\n  }\n  orderItems {\n    id\n    description\n    sku {\n      ...SKUPrice_sku\n      id\n    }\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n  completeUrl\n  total {\n    amount\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fdb339989c8a655dcec97c0823aaaccc>>
+ * @generated SignedSource<<9c69fd3f51210dc8d7be5bd21ae99a8b>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/TestFontsFormUpdateCustomerMutation.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<fdb339989c8a655dcec97c0823aaaccc>>
+ * @generated SignedSource<<9c69fd3f51210dc8d7be5bd21ae99a8b>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -357,6 +357,12 @@ const node = function () {
             "plural": false,
             "selections": v7 /*: any*/,
             "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "taxRate",
+            "storageKey": null
           }, {
             "alias": null,
             "args": null,
@@ -623,12 +629,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "4ad19928609a699ba340b2b2296704a3",
+      "cacheID": "6bf352e7a5d417131c2603a62762d554",
       "id": null,
       "metadata": {},
       "name": "TestFontsFormUpdateCustomerMutation",
       "operationKind": "mutation",
-      "text": "mutation TestFontsFormUpdateCustomerMutation(\n  $input: UpdateCustomerInput!\n) {\n  updateCustomer(input: $input) {\n    order {\n      ...CartOrder_order\n      id\n    }\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      __typename\n      __isSkuProduct: __typename\n      ...CollectionAa_product\n      ...FontStyle_fontStyle\n      ... on FontStyle {\n        family {\n          name\n          cssUrl\n          id\n        }\n        name\n        variableInstances {\n          name\n        }\n      }\n      ... on Bundle {\n        name\n      }\n      ... on FontCollection {\n        name\n        isVariableFont\n        totalStyles\n        featureStyle {\n          family {\n            cssUrl\n            id\n          }\n          id\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    id\n    license {\n      id\n      name\n      multiplier\n    }\n    variable: licenseVariable {\n      id\n      variableType\n      ...VariableTableAmounts_variable\n    }\n    option: licenseOption {\n      id\n      amount\n      multiplier\n      name\n      ...VariableTableAmounts_option\n    }\n    variableText\n  }\n}\n\nfragment CartOrder_order on Order {\n  ...Checkout_order\n  ...Download_order\n  ...CartTotals_order\n  orderItems {\n    ...CartItem_node\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n        variableType\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  discount {\n    id\n  }\n  customer {\n    email\n    name\n    anonymous\n    id\n  }\n  billingIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brand\n    }\n  }\n  stripePaymentIntent {\n    status\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment Checkout_order on Order {\n  canCompleteWithCoupon\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  billingIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIsBillingIdentity\n}\n\nfragment CollectionAa_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ... on FontCollection {\n    featureStyle {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n  ... on Bundle {\n    fontStyles {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment Download_order on Order {\n  id\n  archiveUrl\n  customer {\n    email\n    id\n  }\n  completedWithCoupon\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment IdentityBox_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n"
+      "text": "mutation TestFontsFormUpdateCustomerMutation(\n  $input: UpdateCustomerInput!\n) {\n  updateCustomer(input: $input) {\n    order {\n      ...CartOrder_order\n      id\n    }\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      __typename\n      __isSkuProduct: __typename\n      ...CollectionAa_product\n      ...FontStyle_fontStyle\n      ... on FontStyle {\n        family {\n          name\n          cssUrl\n          id\n        }\n        name\n        variableInstances {\n          name\n        }\n      }\n      ... on Bundle {\n        name\n      }\n      ... on FontCollection {\n        name\n        isVariableFont\n        totalStyles\n        featureStyle {\n          family {\n            cssUrl\n            id\n          }\n          id\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    id\n    license {\n      id\n      name\n      multiplier\n    }\n    variable: licenseVariable {\n      id\n      variableType\n      ...VariableTableAmounts_variable\n    }\n    option: licenseOption {\n      id\n      amount\n      multiplier\n      name\n      ...VariableTableAmounts_option\n    }\n    variableText\n  }\n}\n\nfragment CartOrder_order on Order {\n  ...Checkout_order\n  ...Download_order\n  ...CartTotals_order\n  orderItems {\n    ...CartItem_node\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n        variableType\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  discount {\n    id\n  }\n  customer {\n    email\n    name\n    anonymous\n    id\n  }\n  billingIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brand\n    }\n  }\n  stripePaymentIntent {\n    status\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxRate\n  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment Checkout_order on Order {\n  canCompleteWithCoupon\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  billingIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIsBillingIdentity\n}\n\nfragment CollectionAa_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ... on FontCollection {\n    featureStyle {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n  ... on Bundle {\n    fontStyles {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment Download_order on Order {\n  id\n  archiveUrl\n  customer {\n    email\n    id\n  }\n  completedWithCoupon\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment IdentityBox_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n"
     }
   };
 }();

package/dist/components/Cart/CartTotals.js

@@ -13,6 +13,10 @@ var _Icons = require("../Icons");
 var _CartTotals_order;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
+function percentage(decimalValue) {
+  if (!decimalValue) return null;
+  return `${parseFloat(decimalValue) * 100}%`;
+}
 const PriceBlock = _ref => {
   let {
     label,
@@ -40,7 +44,7 @@ function CartTotals(_ref2) {
     allowDiscountRemoval = true,
     hideTotal = false
   } = _ref2;
-  const order = (0, _reactRelay.useFragment)(_CartTotals_order !== void 0 ? _CartTotals_order : (_CartTotals_order = require("../../__generated__/CartTotals_order.graphql"), _CartTotals_order.hash && _CartTotals_order.hash !== "698ea8bf4dd91473e057e19df6dc51b1" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order), orderKey);
+  const order = (0, _reactRelay.useFragment)(_CartTotals_order !== void 0 ? _CartTotals_order : (_CartTotals_order = require("../../__generated__/CartTotals_order.graphql"), _CartTotals_order.hash && _CartTotals_order.hash !== "7fe25d7e214b579ce085157b9bd551a8" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order), orderKey);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__price-blocks",
     "data-has-discount": Boolean(order.discount),
@@ -70,7 +74,7 @@ function CartTotals(_ref2) {
     price: order.discountedSubtotal,
     "data-line": "discounted-subtotal"
   })), order.taxes && /*#__PURE__*/_react.default.createElement(PriceBlock, {
-    label: order.taxName ? `${order.taxName}:` : 'Taxes:',
+    label: order.taxName ? `${order.taxName} (${percentage(order.taxRate)}):` : `Taxes ${percentage(order.taxRate)}:`,
     price: order.taxes,
     "data-line": "taxes"
   }), /*#__PURE__*/_react.default.createElement(PriceBlock, {

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/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/TypeTester/TypeTesterContext.d.ts

@@ -1,6 +1,6 @@
 import React, { Dispatch } from 'react';
 import { VariableSettings } from '../../utils';
-import { Content, Features, Size, Alignment, TypeTesterMode } from './types';
+import { Content, Features, Size, Alignment, TypeTesterMode, Direction } from './types';
 interface TypeTesterState {
     content: Content;
     contentEdited: boolean;
@@ -12,6 +12,7 @@ interface TypeTesterState {
     autofit: boolean;
     alignment: Alignment;
     variableSettings: VariableSettings | null;
+    direction: Direction;
 }
 export interface TypeTestersState {
     [id: string]: TypeTesterState;
@@ -25,6 +26,7 @@ export interface TypeTestersInitialState {
         alignment: Alignment;
         variableSettings: VariableSettings | null;
         features: Features | null;
+        direction: Direction;
     };
 }
 interface TypeTesterContextState {

package/dist/components/TypeTester/TypeTesterContext.js

@@ -141,7 +141,8 @@ const TypeTesterContextComponent = _ref => {
       featuresOpen: false,
       focused: false,
       alignment: initialState.alignment,
-      variableSettings: initialState.variableSettings
+      variableSettings: initialState.variableSettings,
+      direction: initialState.direction
     };
     return acc;
   }, {});

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -32,6 +32,8 @@ function TypeTesterStandaloneComponent(_ref) {
     onBlur,
     data
   } = _ref;
+  let defaultAlignment = 'left';
+  if (direction === 'rtl') defaultAlignment = 'right';
   return /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
     testers: {
       standalone: {
@@ -39,7 +41,7 @@ function TypeTesterStandaloneComponent(_ref) {
         autofit: autofit ?? false,
         size: fontSize ?? 72,
         lineHeight: lineHeight ?? 1,
-        alignment: alignment ?? 'left',
+        alignment: alignment ?? defaultAlignment,
         features: (featureSettings === null || featureSettings === void 0 ? void 0 : featureSettings.filter(setting => setting.value === '1').map(setting => setting.feature)) ?? featuresSelected ?? null,
         variableSettings: (variableSettings === null || variableSettings === void 0 ? void 0 : variableSettings.reduce((acc, _ref2) => {
           let {
@@ -48,7 +50,8 @@ function TypeTesterStandaloneComponent(_ref) {
           } = _ref2;
           acc[axis] = value;
           return acc;
-        }, {})) ?? null
+        }, {})) ?? null,
+        direction: direction ?? 'ltr'
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
@@ -57,7 +60,6 @@ function TypeTesterStandaloneComponent(_ref) {
     fontStyle: (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.fontStyle,
     axes: axes,
     features: features,
-    direction: direction,
     productId: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$fontSty = _data$viewer2.fontStyle) === null || _data$viewer2$fontSty === void 0 ? void 0 : (_data$viewer2$fontSty2 = _data$viewer2$fontSty.family) === null || _data$viewer2$fontSty2 === void 0 ? void 0 : (_data$viewer2$fontSty3 = _data$viewer2$fontSty2.parent) === null || _data$viewer2$fontSty3 === void 0 ? void 0 : _data$viewer2$fontSty3.id) ?? ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$fontSty = _data$viewer3.fontStyle) === null || _data$viewer3$fontSty === void 0 ? void 0 : (_data$viewer3$fontSty2 = _data$viewer3$fontSty.family) === null || _data$viewer3$fontSty2 === void 0 ? void 0 : _data$viewer3$fontSty2.id),
     groupEdit: false,
     onFocus: onFocus,

package/dist/components/TypeTester/TypeTesterState.d.ts

@@ -1,4 +1,4 @@
-import { Content, Size, LineHeight, Alignment } from './types';
+import { Content, Size, LineHeight, Alignment, Direction } from './types';
 import { VariableSettings } from '../../utils';
 interface TypeTesterStateProps {
     id: string;
@@ -26,6 +26,7 @@ interface TypeTesterState {
     setAlignment: (value: Alignment) => void;
     variableSettings: VariableSettings | null;
     setVariableSettings: (value: VariableSettings | null) => void;
+    direction: Direction;
 }
 declare const useTypeTesterState: (props: TypeTesterStateProps) => TypeTesterState;
 export default useTypeTesterState;

package/dist/components/TypeTester/TypeTesterState.js

@@ -29,7 +29,8 @@ const useTypeTesterState = _ref => {
     autofit,
     lineHeight,
     alignment,
-    variableSettings
+    variableSettings,
+    direction
   } = testers[id];
   return {
     autofit,
@@ -118,7 +119,8 @@ const useTypeTesterState = _ref => {
       type: 'SET_VARIABLE_SETTINGS',
       value,
       id
-    })
+    }),
+    direction
   };
 };
 var _default = useTypeTesterState;

package/dist/components/TypeTester/TypeTesterStyleSelectData.js

@@ -36,7 +36,7 @@ const computeSimilarity = (left, right) => {
   return weightSimilarity * styleSimilarity * stretchSimilarity;
 };
 function TypeTesterStyleSelectData(_ref) {
-  var _viewer$families, _viewer$families$edge;
+  var _viewer$families, _viewer$families$edge, _fontStyle$variableIn;
   let {
     fontStyle: fontStyleKey,
     viewer: viewerKey,
@@ -83,6 +83,7 @@ function TypeTesterStyleSelectData(_ref) {
       variableSettings
     });
   }, [familyData, fontStyle]);
+  const instance = variableSettings ? (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(instance => (0, _utils.compareVariableSettings)(instance, variableSettings)) : null;
   return config.selectable && familyData ? /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelect.default, {
     families: familyData,
     selectedFontStyleId: fontStyle.id,
@@ -97,5 +98,5 @@ function TypeTesterStyleSelectData(_ref) {
     className: "type-tester__name__family"
   }, fontStyle.family.name), ' ', /*#__PURE__*/_react.default.createElement("span", {
     className: "type-tester__name__style"
-  }, fontStyle.name.replace(/ /g, '\xa0')));
+  }, variableSettings ? (instance === null || instance === void 0 ? void 0 : instance.name) ?? 'Custom' : fontStyle.name.replace(/ /g, '\xa0')));
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TypeTester_viewer$key } from '../../__generated__/TypeTester_viewer.graphql';
 import { TypeTester_fontStyle$key } from '../../__generated__/TypeTester_fontStyle.graphql';
-import { Alignment, Direction, TypeTesterAxesPosition } from './types';
+import { Alignment, TypeTesterAxesPosition } from './types';
 export interface TypeTesterConfig {
     min?: number;
     max?: number;
@@ -48,7 +48,6 @@ export interface TypeTesterConfig {
 export interface TypeTesterBaseProps {
     id: string;
     productId?: string;
-    direction: Direction | undefined;
     features?: ReadonlyArray<string> | null;
     axes?: ReadonlyArray<string> | null;
     groupEdit?: boolean;

package/dist/components/TypeTester/index.js

@@ -45,7 +45,6 @@ const TypeTester = _ref => {
   let {
     id,
     productId,
-    direction = 'ltr',
     fontStyle: fontStyleKey,
     viewer: viewerKey,
     onFocus,
@@ -106,7 +105,7 @@ const TypeTester = _ref => {
     "data-selected": selected,
     "data-buy-button-hovered": buyButtonIsHovered,
     "data-large-font-size": props.size > 72,
-    "data-direction": direction,
+    "data-direction": props.direction,
     "data-autofit": props.autofit,
     "data-shy": config.shy,
     "data-select-button-style": config.selectButtonStyle,
@@ -186,7 +185,7 @@ const TypeTester = _ref => {
         ref: contentRef,
         fontStyles: style,
         truncate: config.truncate,
-        direction: direction,
+        direction: props.direction,
         min: config.size.min,
         max: config.size.max,
         autofitOnChange: config.autofitOnChange

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -116,7 +116,8 @@ const useTypeTesterStyler = _ref => {
     marginRight: alignment !== 'right' ? -sideBuffer : 0,
     marginLeft: alignment === 'right' ? -sideBuffer : 0,
     letterSpacing: 0,
-    fontVariationSettings
+    fontVariationSettings,
+    textAlign: alignment
   };
   return {
     ref,

package/dist/components/TypeTesters/index.js

@@ -70,12 +70,16 @@ function TypeTestersComponent(_ref) {
   const testers = (_collection$typeTeste2 = collection.typeTesters) === null || _collection$typeTeste2 === void 0 ? void 0 : (_collection$typeTeste3 = _collection$typeTeste2.edges) === null || _collection$typeTeste3 === void 0 ? void 0 : _collection$typeTeste3.reduce((acc, edge) => {
     var _node$variableSetting, _node$featureSettings;
     const node = edge.node;
+    const direction = node.direction === 'rtl' ? 'rtl' : 'ltr';
+    let alignment = config.initialAlignment;
+    if (direction === 'rtl') alignment = 'right';
     acc[node.id] = {
       content: node.content,
       size: node.size ? parseFloat(node.size) : 72,
       lineHeight: node.lineHeight ? parseFloat(node.lineHeight) : 1,
       autofit: autofit ?? false,
-      alignment: config.initialAlignment,
+      direction,
+      alignment,
       variableSettings: ((_node$variableSetting = node.variableSettings) === null || _node$variableSetting === void 0 ? void 0 : _node$variableSetting.reduce((acc, _ref2) => {
         let {
           axis,
@@ -113,7 +117,6 @@ function TypeTestersComponent(_ref) {
     }), typeTesterGroup.map((node, j) => /*#__PURE__*/_react.default.createElement(_TypeTester.default, _extends({}, rest, {
       id: node.id,
       fontStyle: node.fontStyle,
-      direction: node.direction === 'rtl' ? 'rtl' : 'ltr',
       key: j,
       productId: productId,
       onFocus: onFocus,

package/dist/fontdue.css

@@ -1189,6 +1189,7 @@ body[data-fontdue-store-modal=open] {
   grid-template-columns: 1fr auto 1fr;
   padding: 10px 15px;
   grid-gap: 10px;
+  align-items: center;
 }
 .store-modal__container__nav[data-has-back-text=false] {
   grid-template-columns: auto max-content;
@@ -1447,6 +1448,9 @@ body[data-fontdue-store-modal=open] {
   margin-bottom: 20px;
 }
 
+.store-modal__family-button__checked {
+  text-align: right;
+}
 .store-modal__family-button__checked .icon {
   font-size: 20px;
 }

package/package.json

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