fontdue-js 2.18.4 → 2.19.0

package/dist/__generated__/TestFontsFormUpdateCustomerMutation.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<7fdadb278562d0302596d82154638f19>>
+ * @generated SignedSource<<b5e73bb32d6eedb41863a2e3407b91ad>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -168,6 +168,16 @@ const node = function () {
       "kind": "ScalarField",
       "name": "totalStyles",
       "storageKey": null
+    },
+    v14 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontCollection",
+      "kind": "LinkedField",
+      "name": "fontCollection",
+      "plural": false,
+      "selections": [v2 /*: any*/, v4 /*: any*/],
+      "storageKey": null
     };
   return {
     "fragment": {
@@ -388,6 +398,18 @@ const node = function () {
             "kind": "ScalarField",
             "name": "taxName",
             "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "taxNotApplicable",
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "taxNotApplicableReason",
+            "storageKey": null
           }, {
             "alias": null,
             "args": null,
@@ -542,7 +564,7 @@ const node = function () {
                     "plural": true,
                     "selections": [v11 /*: any*/, v2 /*: any*/, v4 /*: any*/],
                     "storageKey": null
-                  }, v2 /*: any*/],
+                  }, v2 /*: any*/, v14 /*: any*/],
                   "type": "Bundle",
                   "abstractKey": null
                 }, {
@@ -570,7 +592,7 @@ const node = function () {
                   "abstractKey": null
                 }, {
                   "kind": "InlineFragment",
-                  "selections": [v2 /*: any*/, v13 /*: any*/],
+                  "selections": [v2 /*: any*/, v13 /*: any*/, v14 /*: any*/],
                   "type": "CollectionBundle",
                   "abstractKey": null
                 }, {
@@ -692,12 +714,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "b284cc8ceb665cc1bd54161535f2607d",
+      "cacheID": "2bbcb1b9a68cd57c7fbd0e57bb5697b4",
       "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 CartItemAdditionalLicenses_licenses on License {\n  id\n  name\n}\n\nfragment CartItemAdditionalLicenses_orderItem on OrderItem {\n  licenseSelections {\n    license {\n      id\n    }\n    id\n  }\n}\n\nfragment CartItemLicense_selection on LicenseSelection {\n  id\n  license {\n    id\n    name\n    licenseVariables {\n      id\n      ...CartItemVariable_variable\n    }\n  }\n  licenseVariable {\n    id\n  }\n  ...CartItemVariable_selection\n}\n\nfragment CartItemProduct_product on SkuProduct {\n  __isSkuProduct: __typename\n  __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 CollectionBundle {\n    name\n    totalStyles\n  }\n}\n\nfragment CartItemVariable_selection on LicenseSelection {\n  id\n  variableText\n  license {\n    id\n  }\n  licenseVariable {\n    ...VariableTableAmounts_variable\n    id\n    name\n    variableType\n    licenseOptions {\n      id\n    }\n  }\n  licenseOption {\n    ...VariableTableAmounts_option\n    id\n    name\n    amount\n  }\n}\n\nfragment CartItemVariable_variable on LicenseVariable {\n  id\n  licenseOptions {\n    id\n    name\n    amount\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  ...CartItemAdditionalLicenses_orderItem\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      ...CartItemProduct_product\n      __typename\n      ... on Licenseable {\n        __isLicenseable: __typename\n        licenses {\n          ...CartItemAdditionalLicenses_licenses\n          id\n          licenseVariables {\n            id\n            licenseOptions {\n              id\n            }\n          }\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    ...CartItemLicense_selection\n    id\n    license {\n      id\n    }\n    licenseVariable {\n      id\n    }\n    licenseOption {\n      id\n    }\n    variableText\n  }\n}\n\nfragment CartOrder_order on Order {\n  ...Checkout_order\n  ...Download_order\n  ...CartTotals_order\n  ...CartState_order\n  id\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  orderVariableSelections {\n    orderVariable {\n      id\n    }\n    orderVariableOption {\n      id\n    }\n    id\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 CartState_order on Order {\n  id\n  orderItems {\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  orderVariableSelections {\n    orderVariable {\n      id\n    }\n    orderVariableOption {\n      id\n    }\n    countryCode\n    id\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 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    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIdentity {\n    name\n    organization\n    email\n    phoneNullable\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  creditAmount {\n    amount\n    currency\n  }\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 CartItemAdditionalLicenses_licenses on License {\n  id\n  name\n}\n\nfragment CartItemAdditionalLicenses_orderItem on OrderItem {\n  licenseSelections {\n    license {\n      id\n    }\n    id\n  }\n}\n\nfragment CartItemLicense_selection on LicenseSelection {\n  id\n  license {\n    id\n    name\n    licenseVariables {\n      id\n      ...CartItemVariable_variable\n    }\n  }\n  licenseVariable {\n    id\n  }\n  ...CartItemVariable_selection\n}\n\nfragment CartItemProduct_product on SkuProduct {\n  __isSkuProduct: __typename\n  __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    fontCollection {\n      name\n      id\n    }\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 CollectionBundle {\n    name\n    totalStyles\n    fontCollection {\n      name\n      id\n    }\n  }\n}\n\nfragment CartItemVariable_selection on LicenseSelection {\n  id\n  variableText\n  license {\n    id\n  }\n  licenseVariable {\n    ...VariableTableAmounts_variable\n    id\n    name\n    variableType\n    licenseOptions {\n      id\n    }\n  }\n  licenseOption {\n    ...VariableTableAmounts_option\n    id\n    name\n    amount\n  }\n}\n\nfragment CartItemVariable_variable on LicenseVariable {\n  id\n  licenseOptions {\n    id\n    name\n    amount\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  ...CartItemAdditionalLicenses_orderItem\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      ...CartItemProduct_product\n      __typename\n      ... on Licenseable {\n        __isLicenseable: __typename\n        licenses {\n          ...CartItemAdditionalLicenses_licenses\n          id\n          licenseVariables {\n            id\n            licenseOptions {\n              id\n            }\n          }\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    ...CartItemLicense_selection\n    id\n    license {\n      id\n    }\n    licenseVariable {\n      id\n    }\n    licenseOption {\n      id\n    }\n    variableText\n  }\n}\n\nfragment CartOrder_order on Order {\n  ...Checkout_order\n  ...Download_order\n  ...CartTotals_order\n  ...CartState_order\n  id\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  orderVariableSelections {\n    orderVariable {\n      id\n    }\n    orderVariableOption {\n      id\n    }\n    id\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 CartState_order on Order {\n  id\n  orderItems {\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  orderVariableSelections {\n    orderVariable {\n      id\n    }\n    orderVariableOption {\n      id\n    }\n    countryCode\n    id\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  taxNotApplicable\n  taxNotApplicableReason\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    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIdentity {\n    name\n    organization\n    email\n    phoneNullable\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  creditAmount {\n    amount\n    currency\n  }\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/AddToCartBanner/index.js

@@ -21,10 +21,16 @@ const getOrderItemName = item => {
     var _product$family;
     return `${(_product$family = product.family) === null || _product$family === void 0 ? void 0 : _product$family.name} ${product.name}`;
   }
+  if (product.__typename === 'Bundle' || product.__typename === 'CollectionBundle') {
+    var _product$fontCollecti;
+    const familyName = (_product$fontCollecti = product.fontCollection) === null || _product$fontCollecti === void 0 ? void 0 : _product$fontCollecti.name;
+    if (familyName && !product.name.startsWith(familyName)) return `${familyName} ${product.name}`;
+    return product.name;
+  }
   if ('name' in product) return product.name;
   return null;
 };
-_AddToCartBanner_item2.default.hash && _AddToCartBanner_item2.default.hash !== "ebcfac33759865770c15e1efe0777e91" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item2.default;
+_AddToCartBanner_item2.default.hash && _AddToCartBanner_item2.default.hash !== "93905c08206c30255368dbb06f59ccec" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item2.default;
 function AddToCartBanner(_ref) {
   var _order$orderItems, _order$orderItems2;
   let {

package/dist/components/Cart/CartItem/CartItemProduct.js

@@ -13,16 +13,17 @@ var _reactRelay = require("react-relay");
 var _utils = require("../../../utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CartItemProduct(_ref) {
-  var _product$family, _product$featureStyle, _product$featureStyle2, _product$variableInst;
+  var _product$family, _product$featureStyle, _product$featureStyle2, _product$name, _product$variableInst;
   let {
     product: productKey
   } = _ref;
-  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.hash !== "22f49bcb8a461d2d3eefc4f8ba1e575c" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product2.default), productKey);
+  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.hash !== "b28cd421e634ecb1162252d953233456" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product2.default), productKey);
   let productCss;
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontStyle') productCss = (_product$family = product.family) === null || _product$family === void 0 ? void 0 : _product$family.cssUrl;
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection') productCss = (_product$featureStyle = product.featureStyle) === null || _product$featureStyle === void 0 ? void 0 : (_product$featureStyle2 = _product$featureStyle.family) === null || _product$featureStyle2 === void 0 ? void 0 : _product$featureStyle2.cssUrl;
   let productName = (product === null || product === void 0 ? void 0 : product.name) ?? '??';
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontStyle' && product.family) productName = `${product.family.name} ${product.name}`;
+  if (((product === null || product === void 0 ? void 0 : product.__typename) === 'Bundle' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle') && product.fontCollection && !((_product$name = product.name) !== null && _product$name !== void 0 && _product$name.startsWith(product.fontCollection.name))) productName = `${product.fontCollection.name} ${product.name}`;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "cart-item__aa"
   }, product ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {

package/dist/components/Cart/CartTotals.js

@@ -45,7 +45,7 @@ function CartTotals(_ref2) {
     billingIdentity,
     taxSystem
   } = _ref2;
-  const order = (0, _reactRelay.useFragment)((_CartTotals_order2.default.hash && _CartTotals_order2.default.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_order2.default), orderKey);
+  const order = (0, _reactRelay.useFragment)((_CartTotals_order2.default.hash && _CartTotals_order2.default.hash !== "aee2e882d4d0d063fd4eaf6cb43485db" && 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_order2.default), orderKey);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__price-blocks",
     "data-has-discount": Boolean(order.discount)
@@ -73,20 +73,20 @@ function CartTotals(_ref2) {
     label: "Discounted subtotal",
     price: order.discountedSubtotal,
     "data-line": "discounted-subtotal"
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), taxSystem !== 'none' && /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__price-block",
     "data-line": "taxes"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__price-block__label"
-  }, order.taxes && order.taxName ? `${order.taxName} (${percentage(order.taxRate)})` : 'Tax'), /*#__PURE__*/_react.default.createElement("div", {
+  }, order.taxNotApplicable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, order.taxName ?? 'VAT', " not applicable", order.taxNotApplicableReason && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
+    className: "cart__price-block__placeholder"
+  }, order.taxNotApplicableReason))) : order.taxes && order.taxName ? `${order.taxName} (${percentage(order.taxRate)})` : 'Tax'), /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__price-block__price"
   }, order.taxes ? /*#__PURE__*/_react.default.createElement(_Price.default, {
     price: order.taxes
-  }) : taxSystem === 'stripe' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "cart__price-block__placeholder"
-  }, "Calculated at checkout") : taxSystem === 'fontdue' && !billingIdentity ? /*#__PURE__*/_react.default.createElement("span", {
+  }) : taxSystem === 'stripe' || taxSystem === 'fontdue' && !billingIdentity ? /*#__PURE__*/_react.default.createElement("span", {
     className: "cart__price-block__placeholder"
-  }, "Enter billing address") : '-')), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Calculated at checkout") : '-')), /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__price-block",
     "data-line": "total"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/CharacterViewer/index.js

@@ -246,42 +246,50 @@ function CharacterViewerComponent(_ref3) {
     width: monitorWidth
   } = useSize();
   if (!fontStyle) return null;
-  const lines = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__monitor__line",
-    "data-name": "baseline"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__label"
-  }, "Baseline"), /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__value"
-  }, "0")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__monitor__line",
-    "data-name": "descender"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__label"
-  }, "Descender"), /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__value"
-  }, fontStyle.verticalMetrics.descender)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__monitor__line",
-    "data-name": "ascender"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__label"
-  }, "Ascender"), /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__value"
-  }, fontStyle.verticalMetrics.ascender)), fontStyle.verticalMetrics.capHeight && /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__monitor__line",
-    "data-name": "cap-height"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__label"
-  }, "Cap height"), /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__value"
-  }, fontStyle.verticalMetrics.capHeight)), fontStyle.verticalMetrics.xHeight && /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__monitor__line",
-    "data-name": "x-height"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__label"
-  }, "x-Height"), /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__monitor__line__value"
-  }, fontStyle.verticalMetrics.xHeight)));
+  const {
+    ascender,
+    descender,
+    capHeight,
+    xHeight,
+    lineGap,
+    unitsPerEm
+  } = fontStyle.verticalMetrics;
+  const halfGap = (lineGap ?? 0) / 2;
+  const pos = offset => ascender + halfGap - offset;
+
+  // Lines in priority order — lower-priority lines hidden when overlapping higher ones.
+  // Threshold: ~18px (label height) converted to font units via current scale.
+  const scale = monitorWidth ? monitorWidth / 2 / unitsPerEm : 0;
+  const threshold = scale > 0 ? 18 / scale : 0;
+  const lines = [{
+    name: 'baseline',
+    position: pos(0),
+    label: 'Baseline',
+    value: 0
+  }, capHeight != null && {
+    name: 'cap-height',
+    position: pos(capHeight),
+    label: 'Cap height',
+    value: capHeight
+  }, xHeight != null && {
+    name: 'x-height',
+    position: pos(xHeight),
+    label: 'x-Height',
+    value: xHeight
+  }, {
+    name: 'ascender',
+    position: pos(ascender),
+    label: 'Ascender',
+    value: ascender
+  }, {
+    name: 'descender',
+    position: pos(descender),
+    label: 'Descender',
+    value: descender
+  }].filter(line => Boolean(line)).reduce((visible, line) =>
+  // Skip this line if it's within the threshold of any already-accepted
+  // higher-priority line — otherwise accept it
+  threshold > 0 && visible.some(v => Math.abs(v.position - line.position) < threshold) ? visible : [...visible, line], []);
   const groups = (0, _react.useMemo)(() => {
     var _collection$glyphGrou;
     return (_collection$glyphGrou = collection.glyphGroups) === null || _collection$glyphGrou === void 0 ? void 0 : _collection$glyphGrou.map(_ref5 => {
@@ -336,7 +344,15 @@ function CharacterViewerComponent(_ref3) {
       fontFeatureSettings: visibleGlyph.features && featuresChecked ? `${visibleGlyph.features.map(feature => `'${feature}' 1`).join(', ')}` : `'calt' off, 'liga' off`
     },
     ref: monitorRef
-  }, /*#__PURE__*/_react.default.createElement("span", null, visibleGlyph.string)), lines), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, visibleGlyph.string)), lines.map(line => /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__monitor__line",
+    "data-name": line.name,
+    key: line.name
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__label"
+  }, line.label), /*#__PURE__*/_react.default.createElement("span", {
+    className: "character-viewer__monitor__line__value"
+  }, line.value)))), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__details"
   }, /*#__PURE__*/_react.default.createElement("span", null, "Font style"), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_StyleSelect.default, {
     collections: families,

package/dist/components/CorsErrorModal.d.ts

@@ -0,0 +1 @@
+export declare function renderCorsErrorModal(origin: string, fontdueUrl: string): void;

package/dist/components/CorsErrorModal.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderCorsErrorModal = renderCorsErrorModal;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const code = {
+  background: '#fef2f2',
+  padding: '2px 6px',
+  borderRadius: 3,
+  fontSize: 13
+};
+function CorsErrorModal(_ref) {
+  let {
+    origin,
+    fontdueUrl
+  } = _ref;
+  let settingsOrigin = fontdueUrl;
+  try {
+    settingsOrigin = new URL(fontdueUrl).origin;
+  } catch {
+    // keep as-is
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 99999,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'rgba(0,0,0,0.4)',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      fontSize: 14,
+      lineHeight: 1.6
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      background: 'white',
+      color: '#1f2937',
+      borderRadius: 12,
+      border: '2px solid #fca5a5',
+      padding: '28px 32px',
+      maxWidth: 520,
+      width: '90%',
+      boxShadow: '0 8px 30px rgba(0,0,0,0.12)',
+      textAlign: 'left'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", {
+    style: {
+      fontSize: 16,
+      color: '#dc2626'
+    }
+  }, "Cross-origin request blocked"), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '12px 0 0'
+    }
+  }, "Your website (", /*#__PURE__*/_react.default.createElement("code", {
+    style: code
+  }, origin), ") is not allowed to connect to your Fontdue store."), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '12px 0 0'
+    }
+  }, "To fix this, go to", ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: `${settingsOrigin}/admin/settings/security`,
+    target: "_blank",
+    rel: "noreferrer",
+    style: {
+      color: '#dc2626',
+      fontWeight: 500
+    }
+  }, "Settings \u2192 Security"), ' ', "in your Fontdue dashboard, and add ", /*#__PURE__*/_react.default.createElement("code", {
+    style: code
+  }, origin), " to the", ' ', /*#__PURE__*/_react.default.createElement("strong", null, "Cross-origin API access"), " field."), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '16px 0 0',
+      color: '#6b7280',
+      fontSize: 13
+    }
+  }, "This page will reload automatically once the origin is added.")));
+}
+function mount(origin, fontdueUrl) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  (0, _client.createRoot)(container).render( /*#__PURE__*/_react.default.createElement(CorsErrorModal, {
+    origin: origin,
+    fontdueUrl: fontdueUrl
+  }));
+}
+function renderCorsErrorModal(origin, fontdueUrl) {
+  if (document.body) {
+    mount(origin, fontdueUrl);
+  } else {
+    document.addEventListener('DOMContentLoaded', () => mount(origin, fontdueUrl));
+  }
+}

package/dist/components/OrderVariableSelection/OrderVariableSelectionRedux.js

@@ -22,11 +22,12 @@ function OrderVariableSelectionRedux(_ref) {
   } = _ref;
   const environment = (0, _reactRelay.useRelayEnvironment)();
   const [viewer, refetch] = (0, _reactRelay.useRefetchableFragment)((_OrderVariableSelectionRedux_viewer2.default.hash && _OrderVariableSelectionRedux_viewer2.default.hash !== "eaa5e1fdf47cb582dd3c7bdea0a5e6b2" && console.error("The definition of 'OrderVariableSelectionRedux_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _OrderVariableSelectionRedux_viewer2.default), viewerKey);
+  const refetchVariables = (0, _react.useMemo)(() => ({}), []);
   (0, _useRefetchOnLicenseChanges.useRefetchOnLicenseChanges)({
     environment,
     refetch,
     query: _OrderVariableSelectionReduxRefetchQuery.default,
-    variables: {}
+    variables: refetchVariables
   });
   const dispatch = (0, _reactRedux.useDispatch)();
   const selections = (0, _reactRedux.useSelector)(state => state.orderVariableSelections);

package/dist/components/StoreModal/StoreModalFamily.js

@@ -37,7 +37,7 @@ function StoreModalFamily(_ref) {
     onSelect,
     title
   } = _ref;
-  const collection = (0, _reactRelay.useFragment)((_StoreModalFamily_collection2.default.hash && _StoreModalFamily_collection2.default.hash !== "51b251c104458b299f057eaacf85ae52" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection2.default), collectionKey);
+  const collection = (0, _reactRelay.useFragment)((_StoreModalFamily_collection2.default.hash && _StoreModalFamily_collection2.default.hash !== "9c85d32d917e909af575bdda90949c0b" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection2.default), collectionKey);
   const fontStyles = (0, _react.useMemo)(() => stylesGrouped(collection), [collection]);
   if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
   return /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, null, {
@@ -49,7 +49,7 @@ function StoreModalFamily(_ref) {
       collection: collection,
       onSelectSku: onSelect
     }),
-    bundles: collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.map(bundle => /*#__PURE__*/_react.default.createElement(_StoreModalBundleButton.default, {
+    bundles: collection === null || collection === void 0 ? void 0 : (_collection$bundles = collection.bundles) === null || _collection$bundles === void 0 ? void 0 : _collection$bundles.filter(bundle => !bundle.hidden).map(bundle => /*#__PURE__*/_react.default.createElement(_StoreModalBundleButton.default, {
       key: bundle.id,
       bundle: bundle,
       onSelectSku: onSelect

package/dist/corsError.d.ts

@@ -0,0 +1,5 @@
+export interface CorsError {
+    origin: string;
+    fontdueUrl: string;
+}
+export declare function handlePossibleCorsError(error: unknown, fetchUrl: string): boolean;

package/dist/corsError.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handlePossibleCorsError = handlePossibleCorsError;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let detected = false;
+let navigating = false;
+if (typeof window !== 'undefined') {
+  window.addEventListener('beforeunload', () => {
+    navigating = true;
+  });
+}
+function isCrossOrigin(fetchUrl) {
+  try {
+    const url = new URL(fetchUrl, window.location.href);
+    return url.origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}
+function startPolling(fetchUrl) {
+  const interval = setInterval(async () => {
+    try {
+      await fetch(fetchUrl, {
+        method: 'POST',
+        credentials: 'include'
+      });
+      clearInterval(interval);
+      window.location.reload();
+    } catch {
+      // still blocked, keep polling
+    }
+  }, 3000);
+}
+function handlePossibleCorsError(error, fetchUrl) {
+  if (typeof window === 'undefined') return false;
+  if (!(error instanceof TypeError)) return false;
+  if (navigating) return false;
+  if (!isCrossOrigin(fetchUrl)) return false;
+  if (detected) return true;
+  detected = true;
+  const origin = window.location.origin;
+  console.error(`[Fontdue] Cross-origin request to ${fetchUrl} was blocked.\n\n` + `Your website (${origin}) is not listed as an allowed origin ` + `in your Fontdue CORS settings.\n\n` + `To fix this:\n` + `1. Log in to your Fontdue dashboard\n` + `2. Go to Settings \u2192 Security\n` + `3. Add "${origin}" to the "Cross-origin API access" field\n` + `4. Save \u2014 this page will reload automatically`);
+  Promise.resolve().then(() => _interopRequireWildcard(require('./components/CorsErrorModal'))).then(_ref => {
+    let {
+      renderCorsErrorModal
+    } = _ref;
+    renderCorsErrorModal(origin, fetchUrl);
+  });
+  startPolling(fetchUrl);
+  return true;
+}

package/dist/fontdue.css

@@ -868,6 +868,10 @@ div[data-component=TypeTesters] {
   --section_spacing: 60px;
 }
 
+.price {
+  font-variant-numeric: tabular-nums;
+}
+
 .character-viewer {
   --size: calc(var(--monitor-width) * 1 / 2);
   --half-gap: calc(var(--line-gap) / 2);
@@ -2533,7 +2537,6 @@ body[data-fontdue-store-modal=open] {
 }
 .cart-item__price {
   margin-top: 20px;
-  font-variant-numeric: tabular-nums;
 }
 .cart-item:first-child .cart-item__price {
   margin-top: 0;
@@ -2618,6 +2621,7 @@ body[data-fontdue-store-modal=open] {
   text-transform: inherit;
   margin-left: 10px;
   margin-right: -3px;
+  vertical-align: middle;
 }
 .cart__remove-discount-button:active, .cart__remove-discount-button:focus {
   outline: none;

package/dist/relay/environment.js

@@ -8,6 +8,7 @@ exports.responseCache = exports.networkFetch = void 0;
 exports.useCurrentEnvironment = useCurrentEnvironment;
 var _react = require("react");
 var _relayRuntime = require("relay-runtime");
+var _corsError = require("../corsError");
 var _package = require("../../package.json");
 // @ts-ignore - JSON import
 
@@ -22,35 +23,48 @@ const CACHE_TTL = 10 * 1000; // 10 seconds, to resolve preloaded results
 function createNetworkFetch(options) {
   return async function networkFetch(request, variables) {
     const url = (FONTDUE_URL && `${FONTDUE_URL}/graphql`) ?? ((options === null || options === void 0 ? void 0 : options.url) ?? '') + '/graphql';
-    const resp = await fetch(url + `?queryName=${request.name}`, {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        'fontdue-stripe-integration': STRIPE_INTEGRATION ?? ((options === null || options === void 0 ? void 0 : options.stripeIntegration) || 'dynamic'),
-        'fontdue-client-version': _package.version
-      },
-      body: JSON.stringify({
-        query: request.text,
-        variables
-      }),
-      // @ts-ignore
-      next: {
-        tags: ['graphql', `operation:${request.name}`]
+    let resp;
+    try {
+      resp = await fetch(url + `?queryName=${request.name}`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          'fontdue-stripe-integration': STRIPE_INTEGRATION ?? ((options === null || options === void 0 ? void 0 : options.stripeIntegration) || 'dynamic'),
+          'fontdue-client-version': _package.version
+        },
+        body: JSON.stringify({
+          query: request.text,
+          variables
+        }),
+        // @ts-ignore
+        next: {
+          tags: ['graphql', `operation:${request.name}`]
+        }
+      });
+    } catch (error) {
+      if ((0, _corsError.handlePossibleCorsError)(error, url)) {
+        return {
+          data: undefined,
+          errors: [{
+            message: 'Cross-origin request blocked'
+          }]
+        };
       }
-    });
+      throw error;
+    }
     const json = await resp.json();
 
     // GraphQL returns exceptions (for example, a missing required variable) in the "errors"
     // property of the response. If any exceptions occurred when processing the request,
     // throw an error to indicate to the developer what went wrong.
     if (Array.isArray(json.errors)) {
-      var _json$errors;
+      var _json$errors, _error$extensions;
       const error = (_json$errors = json.errors) === null || _json$errors === void 0 ? void 0 : _json$errors[0];
       console.error('GraphQL Error:', {
         message: error.message,
-        code: error.code,
+        code: (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code,
         path: error.path
       });
     }

package/package.json

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