fontdue-js 2.23.1 → 2.24.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.24.0
+
+- The cart's licensee picker now reads its button labels and per-option descriptions from tenant settings, so admins can rename "Yourself" / "Your client" and add explainer text without a code change.
+
+## 2.23.2
+
+- Fixed a right-edge gap in the *CharacterViewer* glyph grid.
+
 ## 2.23.1
 
 - Tweaked checkout styling.

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f881bbc92f737f96c0bb39372d175fc0>>
+ * @generated SignedSource<<024b5dc4c8cf3f856de0a6d06968f144>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalCartQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<f881bbc92f737f96c0bb39372d175fc0>>
+ * @generated SignedSource<<024b5dc4c8cf3f856de0a6d06968f144>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -479,6 +479,30 @@ const node = function () {
             "kind": "ScalarField",
             "name": "storeModalSelectLicenseeLabel",
             "storageKey": "storeModalSelectLicenseeLabel(format:\"HTML\")"
+          }, {
+            "alias": null,
+            "args": v13 /*: any*/,
+            "kind": "ScalarField",
+            "name": "storeModalLicenseeSelfLabel",
+            "storageKey": "storeModalLicenseeSelfLabel(format:\"HTML\")"
+          }, {
+            "alias": null,
+            "args": v13 /*: any*/,
+            "kind": "ScalarField",
+            "name": "storeModalLicenseeSelfDescription",
+            "storageKey": "storeModalLicenseeSelfDescription(format:\"HTML\")"
+          }, {
+            "alias": null,
+            "args": v13 /*: any*/,
+            "kind": "ScalarField",
+            "name": "storeModalLicenseeClientLabel",
+            "storageKey": "storeModalLicenseeClientLabel(format:\"HTML\")"
+          }, {
+            "alias": null,
+            "args": v13 /*: any*/,
+            "kind": "ScalarField",
+            "name": "storeModalLicenseeClientDescription",
+            "storageKey": "storeModalLicenseeClientDescription(format:\"HTML\")"
           }, {
             "alias": null,
             "args": v13 /*: any*/,
@@ -1012,12 +1036,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "0c171742489d9700f864bc48e4324307",
+      "cacheID": "2cd9ae5c25c7dc6094502bbbe3dd1991",
       "id": null,
       "metadata": {},
       "name": "StoreModalCartQuery",
       "operationKind": "query",
-      "text": "query StoreModalCartQuery {\n  viewer {\n    ...StripeProvider_viewer\n    ...OrderVariableSelection_variables\n    ...StoreModalOrderVariableSelection_viewer\n    ...StoreModalUnifiedCheckout_viewer\n    settings {\n      taxSystem\n    }\n    currentOrder {\n      ...CartState_order\n      ...CartTotals_order\n      ...StoreModalUnifiedCheckout_order\n      ...StoreModalOrderVariableSelection_order\n      id\n      total {\n        amount\n      }\n      orderVariableSelections {\n        id\n      }\n      orderItems {\n        id\n        ...CartItem_node\n        licenseSelections {\n          licenseVariable {\n            variableType\n            id\n          }\n          variableText\n          id\n        }\n      }\n      discount {\n        id\n      }\n      stripePaymentMethod {\n        id\n      }\n      billingIdentity {\n        name\n      }\n    }\n    id\n  }\n}\n\nfragment AddressFields_viewer on Viewer {\n  countries {\n    code\n    name\n  }\n  settings {\n    checkoutAddressCollection\n    checkoutPhoneNumberCollection\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      excludedLicenses {\n        id\n      }\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      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  }\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 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 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 FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment OrderVariableSelection_variables on Viewer {\n  orderVariables {\n    id\n    name\n    variableType\n    description(format: HTML, orderVariables: [])\n    orderVariableOptions {\n      id\n      amount\n    }\n  }\n  countries {\n    code\n    name\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment StoreModalOrderVariableSelection_order on Order {\n  id\n  orderVariableSelections {\n    orderVariable {\n      id\n      name\n      variableType\n    }\n    orderVariableDescription(format: HTML)\n    orderVariableOption {\n      id\n      amount\n    }\n    countryCode\n    id\n  }\n}\n\nfragment StoreModalOrderVariableSelection_viewer on Viewer {\n  ...OrderVariableSelection_variables\n  orderVariables {\n    id\n  }\n  settings {\n    storeModalSelectOrderVariablesLabel(format: HTML)\n  }\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalUnifiedCheckout_order on Order {\n  completeUrl\n  canCompleteWithCoupon\n  total {\n    amount\n  }\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  licenseeIsBillingIdentity\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n    name\n    organization\n    email\n    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  billingIdentity {\n    ...StoreModalReviewIdentity_identity\n    name\n    organization\n    email\n    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  stripePaymentIntent {\n    clientSecret\n    amount\n    currency\n  }\n  orderVariableSelections {\n    orderVariable {\n      id\n      variableType\n    }\n    orderVariableOption {\n      id\n    }\n    countryCode\n    id\n  }\n}\n\nfragment StoreModalUnifiedCheckout_viewer on Viewer {\n  ...AddressFields_viewer\n  country\n  detectedCountry\n  settings {\n    uiFontName\n    eulaAgreementLabel(format: HTML)\n    storeModalSelectLicenseeLabel(format: HTML)\n    newsletterOptInLabel(format: HTML)\n    taxSystem\n    recaptchaEnabled\n    recaptchaSiteKey\n  }\n  themeConfig {\n    customProperties\n  }\n}\n\nfragment StripeProvider_viewer on Viewer {\n  settings {\n    taxSystem\n    uiFontStyle {\n      name\n      cssFamily\n      webfontSources {\n        format\n        url\n      }\n      id\n    }\n  }\n  themeConfig {\n    customProperties\n  }\n  stripeAccountId\n  stripePublishableKey\n  currentOrder {\n    stripeAccountId\n    stripePaymentIntent {\n      clientSecret\n    }\n    id\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n"
+      "text": "query StoreModalCartQuery {\n  viewer {\n    ...StripeProvider_viewer\n    ...OrderVariableSelection_variables\n    ...StoreModalOrderVariableSelection_viewer\n    ...StoreModalUnifiedCheckout_viewer\n    settings {\n      taxSystem\n    }\n    currentOrder {\n      ...CartState_order\n      ...CartTotals_order\n      ...StoreModalUnifiedCheckout_order\n      ...StoreModalOrderVariableSelection_order\n      id\n      total {\n        amount\n      }\n      orderVariableSelections {\n        id\n      }\n      orderItems {\n        id\n        ...CartItem_node\n        licenseSelections {\n          licenseVariable {\n            variableType\n            id\n          }\n          variableText\n          id\n        }\n      }\n      discount {\n        id\n      }\n      stripePaymentMethod {\n        id\n      }\n      billingIdentity {\n        name\n      }\n    }\n    id\n  }\n}\n\nfragment AddressFields_viewer on Viewer {\n  countries {\n    code\n    name\n  }\n  settings {\n    checkoutAddressCollection\n    checkoutPhoneNumberCollection\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      excludedLicenses {\n        id\n      }\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      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  }\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 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 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 FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment OrderVariableSelection_variables on Viewer {\n  orderVariables {\n    id\n    name\n    variableType\n    description(format: HTML, orderVariables: [])\n    orderVariableOptions {\n      id\n      amount\n    }\n  }\n  countries {\n    code\n    name\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment StoreModalOrderVariableSelection_order on Order {\n  id\n  orderVariableSelections {\n    orderVariable {\n      id\n      name\n      variableType\n    }\n    orderVariableDescription(format: HTML)\n    orderVariableOption {\n      id\n      amount\n    }\n    countryCode\n    id\n  }\n}\n\nfragment StoreModalOrderVariableSelection_viewer on Viewer {\n  ...OrderVariableSelection_variables\n  orderVariables {\n    id\n  }\n  settings {\n    storeModalSelectOrderVariablesLabel(format: HTML)\n  }\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalUnifiedCheckout_order on Order {\n  completeUrl\n  canCompleteWithCoupon\n  total {\n    amount\n  }\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  licenseeIsBillingIdentity\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n    name\n    organization\n    email\n    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  billingIdentity {\n    ...StoreModalReviewIdentity_identity\n    name\n    organization\n    email\n    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  stripePaymentIntent {\n    clientSecret\n    amount\n    currency\n  }\n  orderVariableSelections {\n    orderVariable {\n      id\n      variableType\n    }\n    orderVariableOption {\n      id\n    }\n    countryCode\n    id\n  }\n}\n\nfragment StoreModalUnifiedCheckout_viewer on Viewer {\n  ...AddressFields_viewer\n  country\n  detectedCountry\n  settings {\n    uiFontName\n    eulaAgreementLabel(format: HTML)\n    storeModalSelectLicenseeLabel(format: HTML)\n    storeModalLicenseeSelfLabel(format: HTML)\n    storeModalLicenseeSelfDescription(format: HTML)\n    storeModalLicenseeClientLabel(format: HTML)\n    storeModalLicenseeClientDescription(format: HTML)\n    newsletterOptInLabel(format: HTML)\n    taxSystem\n    recaptchaEnabled\n    recaptchaSiteKey\n  }\n  themeConfig {\n    customProperties\n  }\n}\n\nfragment StripeProvider_viewer on Viewer {\n  settings {\n    taxSystem\n    uiFontStyle {\n      name\n      cssFamily\n      webfontSources {\n        format\n        url\n      }\n      id\n    }\n  }\n  themeConfig {\n    customProperties\n  }\n  stripeAccountId\n  stripePublishableKey\n  currentOrder {\n    stripeAccountId\n    stripePaymentIntent {\n      clientSecret\n    }\n    id\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<56c2560864651a703675e1c28f574b95>>
+ * @generated SignedSource<<ab8c0715a712e9aed84b61d91c661bcd>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -32,6 +32,10 @@ export type StoreModalProductQuery$data = {
             readonly variableType: string;
         }> | null;
         readonly settings: {
+            readonly storeModalLicenseeClientDescription: string | null;
+            readonly storeModalLicenseeClientLabel: string | null;
+            readonly storeModalLicenseeSelfDescription: string | null;
+            readonly storeModalLicenseeSelfLabel: string | null;
             readonly storeModalSelectFontsLabel: string | null;
             readonly storeModalSelectLicenseeLabel: string | null;
             readonly storeModalSelectLicensesLabel: string | null;

package/dist/__generated__/StoreModalProductQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<56c2560864651a703675e1c28f574b95>>
+ * @generated SignedSource<<ab8c0715a712e9aed84b61d91c661bcd>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -95,62 +95,90 @@ const node = function () {
       "storageKey": "storeModalSelectLicenseeLabel(format:\"HTML\")"
     },
     v15 = {
+      "alias": null,
+      "args": v13 /*: any*/,
+      "kind": "ScalarField",
+      "name": "storeModalLicenseeSelfLabel",
+      "storageKey": "storeModalLicenseeSelfLabel(format:\"HTML\")"
+    },
+    v16 = {
+      "alias": null,
+      "args": v13 /*: any*/,
+      "kind": "ScalarField",
+      "name": "storeModalLicenseeSelfDescription",
+      "storageKey": "storeModalLicenseeSelfDescription(format:\"HTML\")"
+    },
+    v17 = {
+      "alias": null,
+      "args": v13 /*: any*/,
+      "kind": "ScalarField",
+      "name": "storeModalLicenseeClientLabel",
+      "storageKey": "storeModalLicenseeClientLabel(format:\"HTML\")"
+    },
+    v18 = {
+      "alias": null,
+      "args": v13 /*: any*/,
+      "kind": "ScalarField",
+      "name": "storeModalLicenseeClientDescription",
+      "storageKey": "storeModalLicenseeClientDescription(format:\"HTML\")"
+    },
+    v19 = {
       "alias": null,
       "args": v13 /*: any*/,
       "kind": "ScalarField",
       "name": "storeModalSelectOrderVariablesLabel",
       "storageKey": "storeModalSelectOrderVariablesLabel(format:\"HTML\")"
     },
-    v16 = {
+    v20 = {
       "alias": null,
       "args": v13 /*: any*/,
       "kind": "ScalarField",
       "name": "storeModalSelectLicensesLabel",
       "storageKey": "storeModalSelectLicensesLabel(format:\"HTML\")"
     },
-    v17 = {
+    v21 = {
       "alias": null,
       "args": v13 /*: any*/,
       "kind": "ScalarField",
       "name": "storeModalSelectFontsLabel",
       "storageKey": "storeModalSelectFontsLabel(format:\"HTML\")"
     },
-    v18 = {
+    v22 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "__typename",
       "storageKey": null
     },
-    v19 = {
+    v23 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "isVariableFont",
       "storageKey": null
     },
-    v20 = {
+    v24 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "collectionType",
       "storageKey": null
     },
-    v21 = {
+    v25 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "amount",
       "storageKey": null
     },
-    v22 = [v21 /*: any*/, {
+    v26 = [v25 /*: any*/, {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "currency",
       "storageKey": null
     }],
-    v23 = {
+    v27 = {
       "alias": null,
       "args": null,
       "concreteType": "Sku",
@@ -164,44 +192,44 @@ const node = function () {
         "kind": "LinkedField",
         "name": "price",
         "plural": false,
-        "selections": v22 /*: any*/,
+        "selections": v26 /*: any*/,
         "storageKey": null
       }],
       "storageKey": null
     },
-    v24 = [v4 /*: any*/],
-    v25 = {
+    v28 = [v4 /*: any*/],
+    v29 = {
       "alias": null,
       "args": null,
       "concreteType": "FontCollection",
       "kind": "LinkedField",
       "name": "parent",
       "plural": false,
-      "selections": v24 /*: any*/,
+      "selections": v28 /*: any*/,
       "storageKey": null
     },
-    v26 = {
+    v30 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "cssFamily",
       "storageKey": null
     },
-    v27 = {
+    v31 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "url",
       "storageKey": null
     },
-    v28 = {
+    v32 = {
       "alias": null,
       "args": null,
       "concreteType": "WebfontSource",
       "kind": "LinkedField",
       "name": "webfontSources",
       "plural": true,
-      "selections": [v27 /*: any*/, {
+      "selections": [v31 /*: any*/, {
         "alias": null,
         "args": null,
         "kind": "ScalarField",
@@ -210,7 +238,7 @@ const node = function () {
       }],
       "storageKey": null
     },
-    v29 = {
+    v33 = {
       "alias": null,
       "args": null,
       "concreteType": "VerticalMetrics",
@@ -244,60 +272,60 @@ const node = function () {
       }],
       "storageKey": null
     },
-    v30 = {
+    v34 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "supportedLanguages",
       "storageKey": null
     },
-    v31 = {
+    v35 = {
       "alias": null,
       "args": null,
       "concreteType": "FontStyle",
       "kind": "LinkedField",
       "name": "featureStyle",
       "plural": false,
-      "selections": [v26 /*: any*/, v11 /*: any*/, v28 /*: any*/, v29 /*: any*/, v30 /*: any*/, v4 /*: any*/],
+      "selections": [v30 /*: any*/, v11 /*: any*/, v32 /*: any*/, v33 /*: any*/, v34 /*: any*/, v4 /*: any*/],
       "storageKey": null
     },
-    v32 = {
+    v36 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "totalStyles",
       "storageKey": null
     },
-    v33 = {
+    v37 = {
       "alias": null,
       "args": null,
       "concreteType": "Money",
       "kind": "LinkedField",
       "name": "totalStylesPrice",
       "plural": false,
-      "selections": v22 /*: any*/,
+      "selections": v26 /*: any*/,
       "storageKey": null
     },
-    v34 = [{
+    v38 = [{
       "kind": "Literal",
       "name": "collectionTypes",
       "value": ["FAMILY"]
     }],
-    v35 = {
+    v39 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "cssWeight",
       "storageKey": null
     },
-    v36 = {
+    v40 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
       "name": "cssStretch",
       "storageKey": null
     },
-    v37 = {
+    v41 = {
       "alias": null,
       "args": null,
       "concreteType": "VariableInstance",
@@ -328,7 +356,7 @@ const node = function () {
       }],
       "storageKey": null
     },
-    v38 = {
+    v42 = {
       "alias": null,
       "args": null,
       "concreteType": "Bundle",
@@ -348,36 +376,36 @@ const node = function () {
         "kind": "LinkedField",
         "name": "fontStyles",
         "plural": true,
-        "selections": [v4 /*: any*/, v26 /*: any*/, v35 /*: any*/, v36 /*: any*/, v11 /*: any*/, v30 /*: any*/, v37 /*: any*/, v23 /*: any*/, v28 /*: any*/, v29 /*: any*/],
+        "selections": [v4 /*: any*/, v30 /*: any*/, v39 /*: any*/, v40 /*: any*/, v11 /*: any*/, v34 /*: any*/, v41 /*: any*/, v27 /*: any*/, v32 /*: any*/, v33 /*: any*/],
         "storageKey": null
-      }, v11 /*: any*/, v23 /*: any*/],
+      }, v11 /*: any*/, v27 /*: any*/],
       "storageKey": null
     },
-    v39 = {
+    v43 = {
       "alias": null,
       "args": null,
       "concreteType": "FontStyle",
       "kind": "LinkedField",
       "name": "fontStyles",
       "plural": true,
-      "selections": [v4 /*: any*/, v26 /*: any*/, v35 /*: any*/, v36 /*: any*/, {
+      "selections": [v4 /*: any*/, v30 /*: any*/, v39 /*: any*/, v40 /*: any*/, {
         "alias": null,
         "args": null,
         "kind": "ScalarField",
         "name": "cssStyle",
         "storageKey": null
-      }, v11 /*: any*/, v30 /*: any*/, v37 /*: any*/, v23 /*: any*/, v28 /*: any*/, v29 /*: any*/],
+      }, v11 /*: any*/, v34 /*: any*/, v41 /*: any*/, v27 /*: any*/, v32 /*: any*/, v33 /*: any*/],
       "storageKey": null
     },
-    v40 = [v21 /*: any*/],
-    v41 = [v32 /*: any*/, {
+    v44 = [v25 /*: any*/],
+    v45 = [v36 /*: any*/, {
       "alias": null,
       "args": v7 /*: any*/,
       "concreteType": "Money",
       "kind": "LinkedField",
       "name": "totalStylesPrice",
       "plural": false,
-      "selections": v40 /*: any*/,
+      "selections": v44 /*: any*/,
       "storageKey": null
     }];
   return {
@@ -430,7 +458,7 @@ const node = function () {
           "kind": "LinkedField",
           "name": "settings",
           "plural": false,
-          "selections": [v14 /*: any*/, v15 /*: any*/, v16 /*: any*/, v17 /*: any*/],
+          "selections": [v14 /*: any*/, v15 /*: any*/, v16 /*: any*/, v17 /*: any*/, v18 /*: any*/, v19 /*: any*/, v20 /*: any*/, v21 /*: any*/],
           "storageKey": null
         }],
         "storageKey": null
@@ -450,37 +478,37 @@ const node = function () {
         "kind": "LinkedField",
         "name": "node",
         "plural": false,
-        "selections": [v18 /*: any*/, v4 /*: any*/, {
+        "selections": [v22 /*: any*/, v4 /*: any*/, {
           "kind": "TypeDiscriminator",
           "abstractKey": "__isNode"
         }, {
           "kind": "InlineFragment",
-          "selections": [v19 /*: any*/, v20 /*: any*/, v11 /*: any*/, v23 /*: any*/, v25 /*: any*/, v31 /*: any*/, v32 /*: any*/, v33 /*: any*/, {
+          "selections": [v23 /*: any*/, v24 /*: any*/, v11 /*: any*/, v27 /*: any*/, v29 /*: any*/, v35 /*: any*/, v36 /*: any*/, v37 /*: any*/, {
             "alias": null,
-            "args": v34 /*: any*/,
+            "args": v38 /*: any*/,
             "concreteType": "FontCollection",
             "kind": "LinkedField",
             "name": "children",
             "plural": true,
-            "selections": [v19 /*: any*/, v32 /*: any*/, v4 /*: any*/, v20 /*: any*/, v11 /*: any*/, v23 /*: any*/, v25 /*: any*/, v31 /*: any*/, v33 /*: any*/, {
+            "selections": [v23 /*: any*/, v36 /*: any*/, v4 /*: any*/, v24 /*: any*/, v11 /*: any*/, v27 /*: any*/, v29 /*: any*/, v35 /*: any*/, v37 /*: any*/, {
               "alias": null,
-              "args": v34 /*: any*/,
+              "args": v38 /*: any*/,
               "concreteType": "FontCollection",
               "kind": "LinkedField",
               "name": "children",
               "plural": true,
-              "selections": [v19 /*: any*/, v32 /*: any*/, v4 /*: any*/],
+              "selections": [v23 /*: any*/, v36 /*: any*/, v4 /*: any*/],
               "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-            }, v38 /*: any*/, v39 /*: any*/],
+            }, v42 /*: any*/, v43 /*: any*/],
             "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-          }, v38 /*: any*/, v39 /*: any*/, {
+          }, v42 /*: any*/, v43 /*: any*/, {
             "alias": null,
             "args": null,
             "concreteType": "License",
             "kind": "LinkedField",
             "name": "licenses",
             "plural": true,
-            "selections": [v4 /*: any*/, v27 /*: any*/, v11 /*: any*/, {
+            "selections": [v4 /*: any*/, v31 /*: any*/, v11 /*: any*/, {
               "alias": null,
               "args": v13 /*: any*/,
               "kind": "ScalarField",
@@ -499,7 +527,7 @@ const node = function () {
               "kind": "LinkedField",
               "name": "excludedLicenses",
               "plural": true,
-              "selections": v24 /*: any*/,
+              "selections": v28 /*: any*/,
               "storageKey": null
             }, {
               "alias": "variables",
@@ -521,7 +549,7 @@ const node = function () {
                 "kind": "LinkedField",
                 "name": "licenseOptions",
                 "plural": true,
-                "selections": [v4 /*: any*/, v11 /*: any*/, v21 /*: any*/, {
+                "selections": [v4 /*: any*/, v11 /*: any*/, v25 /*: any*/, {
                   "alias": null,
                   "args": null,
                   "kind": "ScalarField",
@@ -565,7 +593,7 @@ const node = function () {
             "kind": "LinkedField",
             "name": "orderVariableOptions",
             "plural": true,
-            "selections": [v4 /*: any*/, v21 /*: any*/],
+            "selections": [v4 /*: any*/, v25 /*: any*/],
             "storageKey": null
           }],
           "storageKey": null
@@ -618,7 +646,7 @@ const node = function () {
               "storageKey": null
             }],
             "storageKey": null
-          }, v14 /*: any*/, v15 /*: any*/, v16 /*: any*/, v17 /*: any*/],
+          }, v14 /*: any*/, v15 /*: any*/, v16 /*: any*/, v17 /*: any*/, v18 /*: any*/, v19 /*: any*/, v20 /*: any*/, v21 /*: any*/],
           "storageKey": null
         }, {
           "alias": null,
@@ -666,7 +694,7 @@ const node = function () {
               "kind": "LinkedField",
               "name": "price",
               "plural": false,
-              "selections": v40 /*: any*/,
+              "selections": v44 /*: any*/,
               "storageKey": null
             }, {
               "alias": null,
@@ -675,24 +703,24 @@ const node = function () {
               "kind": "LinkedField",
               "name": "product",
               "plural": false,
-              "selections": [v18 /*: any*/, {
+              "selections": [v22 /*: any*/, {
                 "kind": "InlineFragment",
-                "selections": v41 /*: any*/,
+                "selections": v45 /*: any*/,
                 "type": "FontCollection",
                 "abstractKey": null
               }, {
                 "kind": "InlineFragment",
-                "selections": v41 /*: any*/,
+                "selections": v45 /*: any*/,
                 "type": "Bundle",
                 "abstractKey": null
               }, {
                 "kind": "InlineFragment",
-                "selections": v41 /*: any*/,
+                "selections": v45 /*: any*/,
                 "type": "CollectionBundle",
                 "abstractKey": null
               }, {
                 "kind": "InlineFragment",
-                "selections": v24 /*: any*/,
+                "selections": v28 /*: any*/,
                 "type": "Node",
                 "abstractKey": "__isNode"
               }],
@@ -706,7 +734,7 @@ const node = function () {
             "kind": "LinkedField",
             "name": "subtotal",
             "plural": false,
-            "selections": v22 /*: any*/,
+            "selections": v26 /*: any*/,
             "storageKey": null
           }],
           "storageKey": null
@@ -715,15 +743,15 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "9ce3e5ba9cc291f73e63ce9ea15defb9",
+      "cacheID": "2ec62eeeaed3a327f1a022ab9a0cf197",
       "id": null,
       "metadata": {},
       "name": "StoreModalProductQuery",
       "operationKind": "query",
-      "text": "query StoreModalProductQuery(\n  $productId: ID!\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalProductContent_collection_4sncub\n  }\n  viewer {\n    endpoint\n    stripeAccountId\n    ...OrderVariableSelectionRedux_viewer_2ZguDv\n    ...StoreModalProductSummary_viewer_4sncub\n    orderVariables {\n      id\n      variableType\n      name\n    }\n    settings {\n      storeModalSelectLicenseeLabel(format: HTML)\n      storeModalSelectOrderVariablesLabel(format: HTML)\n      storeModalSelectLicensesLabel(format: HTML)\n      storeModalSelectFontsLabel(format: HTML)\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment OrderVariableSelectionRedux_viewer_2ZguDv on Viewer {\n  ...OrderVariableSelection_variables_2ZguDv\n  detectedCountry\n  orderVariables {\n    id\n    variableType\n  }\n}\n\nfragment OrderVariableSelection_variables_2ZguDv on Viewer {\n  orderVariables {\n    id\n    name\n    variableType\n    description(format: HTML, orderVariables: $orderVariables)\n    orderVariableOptions {\n      id\n      amount\n    }\n  }\n  countries {\n    code\n    name\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_4sncub on Sku {\n  id\n  price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle_4sncub on Bundle {\n  id\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection_4sncub on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection_4sncub on FontCollection {\n  ...StoreModalFamilyButton_collection_4sncub\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    hidden\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ...StoreModalBundleButton_bundle_4sncub\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    cssStyle\n    ...StoreModalStyleButton_fontStyle_4sncub\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  ... on FontCollection {\n    id\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_collection\n    children(collectionTypes: [FAMILY]) {\n      id\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_collection on FontCollection {\n  licenses {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  description(format: HTML)\n  defaultSelected\n  excludedLicenses {\n    id\n  }\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalProductSummary_viewer_4sncub on Viewer {\n  settings {\n    taxSystem\n    stripeTaxSettings {\n      taxBehavior\n    }\n  }\n  taxCollections {\n    taxName\n    inclusive\n  }\n  orderVariables {\n    id\n    variableType\n    name\n  }\n  precart(skuIds: [], licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    skus {\n      price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on CollectionBundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n    subtotal {\n      ...Price_price\n      amount\n      currency\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle_4sncub on FontStyle {\n  id\n  name\n  supportedLanguages\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  ...FontStyle_fontStyle\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalProductQuery(\n  $productId: ID!\n  $licenseOptions: [LicenseOptionsSpec]!\n  $orderVariables: [OrderVariableSelectionInput!]\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalProductContent_collection_4sncub\n  }\n  viewer {\n    endpoint\n    stripeAccountId\n    ...OrderVariableSelectionRedux_viewer_2ZguDv\n    ...StoreModalProductSummary_viewer_4sncub\n    orderVariables {\n      id\n      variableType\n      name\n    }\n    settings {\n      storeModalSelectLicenseeLabel(format: HTML)\n      storeModalLicenseeSelfLabel(format: HTML)\n      storeModalLicenseeSelfDescription(format: HTML)\n      storeModalLicenseeClientLabel(format: HTML)\n      storeModalLicenseeClientDescription(format: HTML)\n      storeModalSelectOrderVariablesLabel(format: HTML)\n      storeModalSelectLicensesLabel(format: HTML)\n      storeModalSelectFontsLabel(format: HTML)\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment OrderVariableSelectionRedux_viewer_2ZguDv on Viewer {\n  ...OrderVariableSelection_variables_2ZguDv\n  detectedCountry\n  orderVariables {\n    id\n    variableType\n  }\n}\n\nfragment OrderVariableSelection_variables_2ZguDv on Viewer {\n  orderVariables {\n    id\n    name\n    variableType\n    description(format: HTML, orderVariables: $orderVariables)\n    orderVariableOptions {\n      id\n      amount\n    }\n  }\n  countries {\n    code\n    name\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_4sncub on Sku {\n  id\n  price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle_4sncub on Bundle {\n  id\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection_4sncub on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection_4sncub on FontCollection {\n  ...StoreModalFamilyButton_collection_4sncub\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    hidden\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle_4sncub\n    }\n    ...StoreModalBundleButton_bundle_4sncub\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    cssStyle\n    ...StoreModalStyleButton_fontStyle_4sncub\n  }\n}\n\nfragment StoreModalProductContent_collection_4sncub on Node {\n  __isNode: __typename\n  ... on FontCollection {\n    id\n    ...StoreModalFamily_collection_4sncub\n    ...StoreModalProductLicenseSelection_collection\n    children(collectionTypes: [FAMILY]) {\n      id\n      ...StoreModalFamily_collection_4sncub\n    }\n  }\n  id\n}\n\nfragment StoreModalProductLicenseSelection_collection on FontCollection {\n  licenses {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  description(format: HTML)\n  defaultSelected\n  excludedLicenses {\n    id\n  }\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalProductSummary_viewer_4sncub on Viewer {\n  settings {\n    taxSystem\n    stripeTaxSettings {\n      taxBehavior\n    }\n  }\n  taxCollections {\n    taxName\n    inclusive\n  }\n  orderVariables {\n    id\n    variableType\n    name\n  }\n  precart(skuIds: [], licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n    skus {\n      price(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on CollectionBundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: $licenseOptions, orderVariables: $orderVariables) {\n            amount\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n    subtotal {\n      ...Price_price\n      amount\n      currency\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle_4sncub on FontStyle {\n  id\n  name\n  supportedLanguages\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  sku {\n    ...SKUPrice_sku_4sncub\n    id\n  }\n  ...FontStyle_fontStyle\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "b2803257576691f16a283d10e53439e3";
+node.hash = "051d45b088e87330de54058b441ad280";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<ca5c7d5a8678cb68a0990463a7bb9c53>>
+ * @generated SignedSource<<36de3a095a8207a0ce9689d501a7431f>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -13,6 +13,10 @@ export type StoreModalUnifiedCheckout_viewer$data = {
         readonly newsletterOptInLabel: string | null;
         readonly recaptchaEnabled: boolean;
         readonly recaptchaSiteKey: string | null;
+        readonly storeModalLicenseeClientDescription: string | null;
+        readonly storeModalLicenseeClientLabel: string | null;
+        readonly storeModalLicenseeSelfDescription: string | null;
+        readonly storeModalLicenseeSelfLabel: string | null;
         readonly storeModalSelectLicenseeLabel: string | null;
         readonly taxSystem: string;
         readonly uiFontName: string | null;

package/dist/__generated__/StoreModalUnifiedCheckout_viewer.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<ca5c7d5a8678cb68a0990463a7bb9c53>>
+ * @generated SignedSource<<36de3a095a8207a0ce9689d501a7431f>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -66,6 +66,30 @@ const node = function () {
         "kind": "ScalarField",
         "name": "storeModalSelectLicenseeLabel",
         "storageKey": "storeModalSelectLicenseeLabel(format:\"HTML\")"
+      }, {
+        "alias": null,
+        "args": v0 /*: any*/,
+        "kind": "ScalarField",
+        "name": "storeModalLicenseeSelfLabel",
+        "storageKey": "storeModalLicenseeSelfLabel(format:\"HTML\")"
+      }, {
+        "alias": null,
+        "args": v0 /*: any*/,
+        "kind": "ScalarField",
+        "name": "storeModalLicenseeSelfDescription",
+        "storageKey": "storeModalLicenseeSelfDescription(format:\"HTML\")"
+      }, {
+        "alias": null,
+        "args": v0 /*: any*/,
+        "kind": "ScalarField",
+        "name": "storeModalLicenseeClientLabel",
+        "storageKey": "storeModalLicenseeClientLabel(format:\"HTML\")"
+      }, {
+        "alias": null,
+        "args": v0 /*: any*/,
+        "kind": "ScalarField",
+        "name": "storeModalLicenseeClientDescription",
+        "storageKey": "storeModalLicenseeClientDescription(format:\"HTML\")"
       }, {
         "alias": null,
         "args": v0 /*: any*/,
@@ -112,6 +136,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "048ce405742611f6684cb5306d28478b";
+node.hash = "5e8a59a64c401bb354b53ab83d993e03";
 var _default = node;
 exports.default = _default;

package/dist/components/CharacterViewer/index.js

@@ -235,14 +235,31 @@ function CharacterViewerComponent(_ref3) {
   const handleMouseLeave = () => {
     if (selectedGlyph) setActiveGlyph(undefined);
   };
-  const {
-    ref: blocksRef,
-    width: blocksWidth
-  } = useSize();
   const {
     ref: monitorRef,
     width: monitorWidth
   } = useSize();
+
+  // Read the grid's resolved first-track width and expose it as --cell-width
+  // on the blocks container. CSS uses --cell-width as min-height on every
+  // cell so rows have consistent height regardless of cell composition —
+  // without it, rows of all-wide span-N cells would collapse to glyph content
+  // height. We read the grid track instead of measuring an individual cell so
+  // a wide span-N cell at index 0 wouldn't poison the measurement.
+  const blocksRef = (0, _react.useRef)(null);
+  const [cellWidth, setCellWidth] = (0, _react.useState)(null);
+  const measureCell = (0, _react.useCallback)(() => {
+    var _blocksRef$current;
+    const list = (_blocksRef$current = blocksRef.current) === null || _blocksRef$current === void 0 ? void 0 : _blocksRef$current.querySelector('.character-viewer__block__character-list');
+    if (!list) return;
+    const firstTrack = getComputedStyle(list).gridTemplateColumns.split(' ')[0];
+    const width = parseFloat(firstTrack);
+    if (!Number.isNaN(width)) setCellWidth(width);
+  }, []);
+  (0, _react.useEffect)(measureCell, [measureCell]);
+  (0, _resizeObserver.default)(blocksRef, measureCell, {
+    polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null
+  });
   if (!fontStyle) return null;
   const {
     ascender,
@@ -365,9 +382,9 @@ function CharacterViewerComponent(_ref3) {
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer_blocks",
     ref: blocksRef,
-    style: {
-      '--width': blocksWidth ?? 600
-    }
+    style: cellWidth ? {
+      '--cell-width': `${cellWidth}px`
+    } : undefined
   }, groups === null || groups === void 0 ? void 0 : groups.map((_ref6, i) => {
     let {
       name,

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

@@ -3,5 +3,9 @@ export default function StoreModalLicenseeIsBillingSelection({ disabled, childre
     disabled: boolean;
     children: {
         label: React.ReactNode;
+        selfLabel?: React.ReactNode;
+        selfDescription?: React.ReactNode;
+        clientLabel?: React.ReactNode;
+        clientDescription?: React.ReactNode;
     };
 }): React.JSX.Element;

package/dist/components/StoreModal/StoreModalProduct.js

@@ -24,13 +24,13 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StoreModalProduct = _ref => {
-  var _config$storeModal, _viewer$orderVariable, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _collection$children;
+  var _config$storeModal, _viewer$orderVariable, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _viewer$settings5, _viewer$settings6, _viewer$settings7, _viewer$settings8, _collection$children;
   let {
     prepared
   } = _ref;
   const config = (0, _react.useContext)(_ConfigContext.default);
   const environment = (0, _reactRelay.useRelayEnvironment)();
-  const initialData = (0, _reactRelay.usePreloadedQuery)((_StoreModalProductQuery2.default.hash && _StoreModalProductQuery2.default.hash !== "b2803257576691f16a283d10e53439e3" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery2.default), prepared.productQuery);
+  const initialData = (0, _reactRelay.usePreloadedQuery)((_StoreModalProductQuery2.default.hash && _StoreModalProductQuery2.default.hash !== "051d45b088e87330de54058b441ad280" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery2.default), prepared.productQuery);
   const [data, refetch] = (0, _reactRelay.useRefetchableFragment)((_StoreModalProductContent_collection2.default.hash && _StoreModalProductContent_collection2.default.hash !== "0684ec2633ccc5d4d0866e7780df28cc" && console.error("The definition of 'StoreModalProductContent_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductContent_collection2.default), initialData.collection);
   const collection = data;
   const {
@@ -88,26 +88,50 @@ const StoreModalProduct = _ref => {
       __html: ((_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.storeModalSelectLicenseeLabel) ?? ''
     }
   });
+  const licenseeSelfLabel = /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: ((_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.storeModalLicenseeSelfLabel) ?? 'Yourself'
+    }
+  });
+  const licenseeSelfDescription = (_viewer$settings3 = viewer.settings) !== null && _viewer$settings3 !== void 0 && _viewer$settings3.storeModalLicenseeSelfDescription ? /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: viewer.settings.storeModalLicenseeSelfDescription
+    }
+  }) : null;
+  const licenseeClientLabel = /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: ((_viewer$settings4 = viewer.settings) === null || _viewer$settings4 === void 0 ? void 0 : _viewer$settings4.storeModalLicenseeClientLabel) ?? 'Your client'
+    }
+  });
+  const licenseeClientDescription = (_viewer$settings5 = viewer.settings) !== null && _viewer$settings5 !== void 0 && _viewer$settings5.storeModalLicenseeClientDescription ? /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: viewer.settings.storeModalLicenseeClientDescription
+    }
+  }) : null;
   const selectOrderVariablesLabel = /*#__PURE__*/_react.default.createElement("div", {
     dangerouslySetInnerHTML: {
-      __html: ((_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.storeModalSelectOrderVariablesLabel) ?? ''
+      __html: ((_viewer$settings6 = viewer.settings) === null || _viewer$settings6 === void 0 ? void 0 : _viewer$settings6.storeModalSelectOrderVariablesLabel) ?? ''
     }
   });
   const selectLicensesLabel = /*#__PURE__*/_react.default.createElement("div", {
     dangerouslySetInnerHTML: {
-      __html: ((_viewer$settings3 = viewer.settings) === null || _viewer$settings3 === void 0 ? void 0 : _viewer$settings3.storeModalSelectLicensesLabel) ?? ''
+      __html: ((_viewer$settings7 = viewer.settings) === null || _viewer$settings7 === void 0 ? void 0 : _viewer$settings7.storeModalSelectLicensesLabel) ?? ''
     }
   });
   const selectFontsLabel = /*#__PURE__*/_react.default.createElement("div", {
     dangerouslySetInnerHTML: {
-      __html: ((_viewer$settings4 = viewer.settings) === null || _viewer$settings4 === void 0 ? void 0 : _viewer$settings4.storeModalSelectFontsLabel) ?? ''
+      __html: ((_viewer$settings8 = viewer.settings) === null || _viewer$settings8 === void 0 ? void 0 : _viewer$settings8.storeModalSelectFontsLabel) ?? ''
     }
   });
   return /*#__PURE__*/_react.default.createElement(_StoreModalPageContainer.default, null, {
     body: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, licensesPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingSelection.default, {
       disabled: false
     }, {
-      label: selectLicenseeLabel
+      label: selectLicenseeLabel,
+      selfLabel: licenseeSelfLabel,
+      selfDescription: licenseeSelfDescription,
+      clientLabel: licenseeClientLabel,
+      clientDescription: licenseeClientDescription
     }), /*#__PURE__*/_react.default.createElement(_OrderVariableSelectionRedux.default, {
       viewer: viewer,
       disabled: !hasSelectionForLicenseeIsBillingIdentity
@@ -132,7 +156,11 @@ const StoreModalProduct = _ref => {
     }))), licensesPosition === 'bottom' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingSelection.default, {
       disabled: !anySkusSelected
     }, {
-      label: selectLicenseeLabel
+      label: selectLicenseeLabel,
+      selfLabel: licenseeSelfLabel,
+      selfDescription: licenseeSelfDescription,
+      clientLabel: licenseeClientLabel,
+      clientDescription: licenseeClientDescription
     }), /*#__PURE__*/_react.default.createElement(_OrderVariableSelectionRedux.default, {
       viewer: viewer,
       disabled: !anySkusSelected || !hasSelectionForLicenseeIsBillingIdentity

package/dist/components/elements/StoreModalLicenseeIsBillingIdentityElement.d.ts

@@ -5,7 +5,11 @@ interface Props {
     onChange: (value: boolean) => void;
     children: {
         label: React.ReactNode;
+        selfLabel?: React.ReactNode;
+        selfDescription?: React.ReactNode;
+        clientLabel?: React.ReactNode;
+        clientDescription?: React.ReactNode;
     };
 }
-export default function StoreModalLicenseeIsBillingIdentityElement({ disabled, onChange, value, children: { label }, }: Props): React.JSX.Element;
+export default function StoreModalLicenseeIsBillingIdentityElement({ disabled, onChange, value, children: { label, selfLabel, selfDescription, clientLabel, clientDescription }, }: Props): React.JSX.Element;
 export {};

package/dist/components/elements/StoreModalLicenseeIsBillingIdentityElement.js

@@ -36,7 +36,11 @@ function StoreModalLicenseeIsBillingIdentityElement(_ref2) {
     onChange,
     value,
     children: {
-      label
+      label,
+      selfLabel,
+      selfDescription,
+      clientLabel,
+      clientDescription
     }
   } = _ref2;
   const handleClick = (0, _react.useCallback)(licenseeIsBilling => () => {
@@ -49,13 +53,21 @@ function StoreModalLicenseeIsBillingIdentityElement(_ref2) {
     className: "store-modal__licensee-is-billing-identity__title"
   }, label), /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__licensee-is-billing-identity__buttons"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__licensee-is-billing-identity__option"
   }, /*#__PURE__*/_react.default.createElement(CheckboxButton, {
-    label: "Yourself",
+    label: selfLabel ?? 'Yourself',
     selected: value === true,
     onClick: handleClick(true)
-  }), /*#__PURE__*/_react.default.createElement(CheckboxButton, {
-    label: "Your client",
+  }), selfDescription ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__licensee-is-billing-identity__description"
+  }, selfDescription) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__licensee-is-billing-identity__option"
+  }, /*#__PURE__*/_react.default.createElement(CheckboxButton, {
+    label: clientLabel ?? 'Your client',
     selected: value === false,
     onClick: handleClick(false)
-  })));
+  }), clientDescription ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__licensee-is-billing-identity__description"
+  }, clientDescription) : null)));
 }

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -169,14 +169,14 @@ function EditableSection(_ref) {
   }, "Change")));
 }
 function StoreModalUnifiedCheckout(_ref2) {
-  var _order$orderVariableS, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _order$stripePaymentI, _viewer$settings5, _order$stripePaymentI2, _order$stripePaymentI3;
+  var _order$orderVariableS, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _viewer$settings5, _viewer$settings6, _viewer$settings7, _viewer$settings8, _order$stripePaymentI, _viewer$settings9, _order$stripePaymentI2, _order$stripePaymentI3;
   let {
     order: orderKey,
     viewer: viewerKey,
     onScrollToTop,
     onUpdateOrderVariableSelections
   } = _ref2;
-  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "048ce405742611f6684cb5306d28478b" && console.error("The definition of 'StoreModalUnifiedCheckout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_viewer2.default), viewerKey);
+  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "5e8a59a64c401bb354b53ab83d993e03" && console.error("The definition of 'StoreModalUnifiedCheckout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_viewer2.default), viewerKey);
   const order = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_order2.default.hash && _StoreModalUnifiedCheckout_order2.default.hash !== "7c5503876a562732ebaead9b2ae97180" && console.error("The definition of 'StoreModalUnifiedCheckout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_order2.default), orderKey);
 
   // Check if order has a country-type order variable with a different country than detected
@@ -677,7 +677,27 @@ function StoreModalUnifiedCheckout(_ref2) {
       dangerouslySetInnerHTML: {
         __html: ((_viewer$settings4 = viewer.settings) === null || _viewer$settings4 === void 0 ? void 0 : _viewer$settings4.storeModalSelectLicenseeLabel) ?? ''
       }
-    })
+    }),
+    selfLabel: /*#__PURE__*/_react.default.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: ((_viewer$settings5 = viewer.settings) === null || _viewer$settings5 === void 0 ? void 0 : _viewer$settings5.storeModalLicenseeSelfLabel) ?? 'Yourself'
+      }
+    }),
+    selfDescription: (_viewer$settings6 = viewer.settings) !== null && _viewer$settings6 !== void 0 && _viewer$settings6.storeModalLicenseeSelfDescription ? /*#__PURE__*/_react.default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: viewer.settings.storeModalLicenseeSelfDescription
+      }
+    }) : null,
+    clientLabel: /*#__PURE__*/_react.default.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: ((_viewer$settings7 = viewer.settings) === null || _viewer$settings7 === void 0 ? void 0 : _viewer$settings7.storeModalLicenseeClientLabel) ?? 'Your client'
+      }
+    }),
+    clientDescription: (_viewer$settings8 = viewer.settings) !== null && _viewer$settings8 !== void 0 && _viewer$settings8.storeModalLicenseeClientDescription ? /*#__PURE__*/_react.default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: viewer.settings.storeModalLicenseeClientDescription
+      }
+    }) : null
   }) : null, showLicenseeSection ? /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__cart__checkout-section"
   }, /*#__PURE__*/_react.default.createElement("h3", {
@@ -754,7 +774,7 @@ function StoreModalUnifiedCheckout(_ref2) {
     htmlFor: "eula-agreement"
   }, /*#__PURE__*/_react.default.createElement("div", {
     dangerouslySetInnerHTML: {
-      __html: ((_viewer$settings5 = viewer.settings) === null || _viewer$settings5 === void 0 ? void 0 : _viewer$settings5.eulaAgreementLabel) ?? ''
+      __html: ((_viewer$settings9 = viewer.settings) === null || _viewer$settings9 === void 0 ? void 0 : _viewer$settings9.eulaAgreementLabel) ?? ''
     }
   }))), /*#__PURE__*/_react.default.createElement("button", {
     type: "submit",

package/dist/fontdue.css

@@ -1083,10 +1083,12 @@ div[data-component=TypeTesters] {
   margin-left: 1px;
 }
 
+.character-viewer__block__character-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+}
 .character-viewer__block__character-list > div {
-  --size: 1;
-  --item-size: calc(var(--size) / (var(--width) / 60) * 100%);
-  --height: calc(var(--item-size) / var(--size));
+  min-height: var(--cell-width, 60px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1096,25 +1098,20 @@ div[data-component=TypeTesters] {
   text-align: center;
   cursor: default;
   white-space: pre;
-  width: var(--item-size);
-  height: 0;
-  padding-top: calc(var(--height) / 2);
-  padding-bottom: calc(var(--height) / 2);
-  float: left;
   z-index: 0;
   position: relative;
 }
 .character-viewer__block__character-list > div[data-size="2"] {
-  --size: 2;
+  grid-column: span 2;
 }
 .character-viewer__block__character-list > div[data-size="3"] {
-  --size: 3;
+  grid-column: span 3;
 }
 .character-viewer__block__character-list > div[data-size="4"] {
-  --size: 4;
+  grid-column: span 4;
 }
 .character-viewer__block__character-list > div[data-size="5"] {
-  --size: 5;
+  grid-column: span 5;
 }
 @media screen and (min-width: 600px) {
   .character-viewer__block__character-list > div:hover, .character-viewer__block__character-list > div[data-selected=true] {
@@ -1260,7 +1257,7 @@ body[data-fontdue-store-modal=open] {
 @media (min-width: 900px) {
   .store-modal__cart__review {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     grid-auto-rows: min-content;
     grid-gap: 20px;
     align-items: baseline;
@@ -1418,6 +1415,12 @@ body[data-fontdue-store-modal=open] {
   }
 }
 
+@media (max-width: 899px) {
+  .store-modal__cart__coupon-code-input + .store-modal__cart__share {
+    margin-top: 20px;
+  }
+}
+
 .store-modal__container__overlay {
   position: fixed;
   top: 0;
@@ -1653,6 +1656,11 @@ body[data-fontdue-store-modal=open] {
 .store-modal__family__group {
   display: flex;
 }
+@media (max-width: 899px) {
+  .store-modal__family__group {
+    flex-direction: column;
+  }
+}
 
 .store-modal__family__style-button,
 .store-modal__family__family-button,
@@ -1736,11 +1744,6 @@ body[data-fontdue-store-modal=open] {
   grid-column-gap: 10px;
   grid-row-gap: 10px;
 }
-@media (max-width: 899px) {
-  .store-modal__family-button__container {
-    grid-template-columns: auto auto;
-  }
-}
 
 .store-modal__family-button__price,
 .store-modal__family-button__checked {
@@ -1748,11 +1751,12 @@ body[data-fontdue-store-modal=open] {
   display: inline-block;
 }
 
-@media (max-width: 899px) {
-  .store-modal__family-button__label,
-  .store-modal__family-button__price {
-    grid-row: 2;
-  }
+.store-modal__family-button__label {
+  white-space: nowrap;
+}
+
+.store-modal__family-button__price:empty {
+  display: none;
 }
 
 .store-modal__family-button__name {
@@ -1761,7 +1765,7 @@ body[data-fontdue-store-modal=open] {
 }
 @media (max-width: 899px) {
   .store-modal__family-button__name {
-    grid-column: 1/span 2;
+    font-size: 24px;
   }
 }
 
@@ -2012,6 +2016,23 @@ body[data-fontdue-store-modal=open] {
 .store-modal__licensee-is-billing-identity__buttons {
   display: flex;
   gap: 20px;
+  align-items: flex-start;
+}
+
+.store-modal__licensee-is-billing-identity__option {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.store-modal__licensee-is-billing-identity__description {
+  margin-top: 10px;
+  color: var(--secondary_text_color);
+}
+.store-modal__licensee-is-billing-identity__description > p {
+  margin: 0;
+}
+.store-modal__licensee-is-billing-identity__description > p + p {
+  margin-top: 4px;
 }
 
 .store-modal__order-variable-selection__container {
@@ -2029,6 +2050,9 @@ body[data-fontdue-store-modal=open] {
 }
 
 .store-modal__order-variable-selection__title {
+  font-family: var(--font-family__bold, inherit);
+  font-weight: 400;
+  font-style: normal;
   margin-bottom: 20px;
 }
 
@@ -2330,6 +2354,7 @@ body[data-fontdue-store-modal=open] {
 
 .cart-additions__form {
   display: flex;
+  width: 100%;
 }
 .cart-additions__button {
   white-space: nowrap;
@@ -2379,6 +2404,8 @@ body[data-fontdue-store-modal=open] {
 }
 .cart-additions__field-wrapper {
   z-index: 1;
+  flex: 1;
+  margin-right: -1px;
 }
 .cart-additions__state-icon {
   position: absolute;
@@ -2430,10 +2457,10 @@ body[data-fontdue-store-modal=open] {
   line-height: normal;
 }
 .cart-additions__field {
-  margin-right: -1px;
   padding-right: 35px;
   font-family: inherit;
   min-width: 0;
+  width: 100%;
 }
 .cart-additions[data-status=error] .cart-additions__field {
   color: var(--error_color);
@@ -2475,6 +2502,19 @@ body[data-fontdue-store-modal=open] {
   border-top: 1px solid var(--horizontal_rule_color);
   padding-top: 40px;
 }
+@media (max-width: 899px) {
+  .cart-item {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    column-gap: 20px;
+    align-items: baseline;
+  }
+}
+@media (max-width: 899px) {
+  > div:has(> .cart-item__licenses) {
+    grid-column: 1/-1;
+  }
+}
 @media (min-width: 900px) {
   .cart-item {
     display: grid;
@@ -2504,6 +2544,12 @@ body[data-fontdue-store-modal=open] {
 .cart-item__label {
   color: var(--styles-count-color, var(--secondary_text_color));
 }
+@media (max-width: 899px) {
+  .cart-item__product {
+    grid-column: 1;
+    margin-bottom: 20px;
+  }
+}
 .cart-item__name {
   font-size: 1em;
   margin-top: 30px; /* line up to the baseline of next column */
@@ -2667,11 +2713,12 @@ body[data-fontdue-store-modal=open] {
 .cart-item__license-variable__loading {
   padding: 10px;
 }
-.cart-item__price {
-  margin-top: 20px;
-}
-.cart-item:first-child .cart-item__price {
-  margin-top: 0;
+@media (max-width: 899px) {
+  .cart-item__price {
+    grid-column: 2;
+    grid-row: 1;
+    text-align: right;
+  }
 }
 @media (min-width: 900px) {
   .cart-item__price {

package/package.json

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