fontdue-js 2.0.1 → 2.2.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.2.0
+
+- Support for updated stripe integration, for accounts that connected to Stripe after August 11 2023
+
+## 2.1.0
+
+- Added support for variable fonts to the standalone TypeTester component
+
+## 2.0.1
+
+- Fixed issue with new relay environment headers, add request name to requests
+
 ## 2.0.0
 
 - __Breaking change__: This is a major upgrade to support React 18 concurrent mode, including changes to how we resolve data using Suspense via Relay. Upgrading meant we require some new features only available in React 18. But this change also means that Fontdue components can now fully resolve during server-side rendering (e.g. in Next.js), making for much smoother initial page loads. Usage on the server (e.g. Next.js) now requires the NEXT_PUBLIC_FONTDUE_URL to be set instead of passing the `url` prop to the FontdueProvider.

package/README.md

@@ -189,8 +189,13 @@ import TypeTester from 'fontdue-js/TypeTester';
 | `fontSize` | (Optional) `number` Initial font size in pixels. |
 | `lineHeight` | (Optional) `number` Line-height as a proportional value where `1 == fontSize`. |
 | `content` | (Optional) `string` The initial content to display. |
+| `direction` | (Optional) `'ltr' \| 'rtl'` Writing direction |
+| `alignment` | (Optional) `'left' \| 'center' \| 'right'` Text alignment |
 | `features` | (Optional) `string[]`  List of opentype feature codes to expose as options to users. (e.g. `['ss01', 'ss02']`) |
+| `axes` | (Optional) `string[]`  List of variable axes to expose. (e.g. `['wdth', 'ital']`). You must provide the relevant `variableSettings` for each axis |
 | `autofit` | (Optional) See `TypeTesters.autofit` above |
+| `featureSettings` | (Optional) `{ feature: string, value: string }[]` List of features already selected, the `value` should be `"1"` to mark the feature as selected. The shape of this data is consistent with the `TypeTester.featureSettings` field in the GraphQL API. e.g. `[{ feature: 'ss01', value: '1' }]` |
+| `variableSettings` | (Optional) `{ axis: string, value: number }[]` List of variable settings selected, consistent with the `TypeTester.variableSettings` field. e.g. `[{ axis: 'wdth', value: 600 }, { axis: 'ital', value: 0.5 }]` |
 
 ## `TestFontsForm`
 

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<1e17d9ac955089b5ee7fa7992f71be96>>
+ * @generated SignedSource<<3a48db3e7fc423bae9f5f7c65ea5a9cc>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/CartQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<1e17d9ac955089b5ee7fa7992f71be96>>
+ * @generated SignedSource<<3a48db3e7fc423bae9f5f7c65ea5a9cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -263,17 +263,14 @@ const node = function () {
         }, {
           "alias": null,
           "args": null,
-          "concreteType": "StripeCredentials",
-          "kind": "LinkedField",
-          "name": "stripeCredentials",
-          "plural": false,
-          "selections": [{
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "stripePublishableKey",
-            "storageKey": null
-          }],
+          "kind": "ScalarField",
+          "name": "stripeAccountId",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "stripePublishableKey",
           "storageKey": null
         }, {
           "alias": null,
@@ -743,12 +740,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "52a0031618c5b003158fe781a65c4052",
+      "cacheID": "3bf95735f2d71a2fe6d2180b09691242",
       "id": null,
       "metadata": {},
       "name": "CartQuery",
       "operationKind": "query",
-      "text": "query CartQuery {\n  viewer {\n    ...StripeProvider_viewer\n    ...CartOrder_viewer\n    currentOrder {\n      ...CartOrder_order\n      id\n    }\n    id\n  }\n}\n\nfragment AddressFields_viewer on Viewer {\n  countries {\n    code\n    name\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      __typename\n      __isSkuProduct: __typename\n      ...CollectionAa_product\n      ...FontStyle_fontStyle\n      ... on FontStyle {\n        family {\n          name\n          cssUrl\n          id\n        }\n        name\n        variableInstances {\n          name\n        }\n      }\n      ... on Bundle {\n        name\n      }\n      ... on FontCollection {\n        name\n        isVariableFont\n        totalStyles\n        featureStyle {\n          family {\n            cssUrl\n            id\n          }\n          id\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    id\n    license {\n      id\n      name\n      multiplier\n    }\n    variable: licenseVariable {\n      id\n      variableType\n      ...VariableTableAmounts_variable\n    }\n    option: licenseOption {\n      id\n      amount\n      multiplier\n      name\n      ...VariableTableAmounts_option\n    }\n    variableText\n  }\n}\n\nfragment CartItem_viewer on Viewer {\n  licenses(licenseTypes: [RETAIL]) {\n    id\n    name\n    variables: licenseVariables {\n      id\n      name\n      variableType\n      options: licenseOptions {\n        id\n        amount\n        name\n      }\n    }\n  }\n}\n\nfragment CartOrder_order on Order {\n  ...Checkout_order\n  ...Download_order\n  ...CartTotals_order\n  orderItems {\n    ...CartItem_node\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n        variableType\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  discount {\n    id\n  }\n  customer {\n    email\n    name\n    anonymous\n    id\n  }\n  billingIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brand\n    }\n  }\n  stripePaymentIntent {\n    status\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n}\n\nfragment CartOrder_viewer on Viewer {\n  ...CartItem_viewer\n  ...Checkout_viewer\n  settings {\n    eulaAgreementLabel(format: HTML)\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment Checkout_order on Order {\n  canCompleteWithCoupon\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  billingIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIsBillingIdentity\n}\n\nfragment Checkout_viewer on Viewer {\n  ...AddressFields_viewer\n  settings {\n    uiFontName\n    newsletterOptInLabel\n  }\n  themeConfig {\n    customProperties\n  }\n}\n\nfragment CollectionAa_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ... on FontCollection {\n    featureStyle {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n  ... on Bundle {\n    fontStyles {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment Download_order on Order {\n  id\n  archiveUrl\n  customer {\n    email\n    id\n  }\n  completedWithCoupon\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment IdentityBox_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment StripeProvider_viewer on Viewer {\n  settings {\n    uiFontUrl\n    uiFontName\n  }\n  themeConfig {\n    customProperties\n  }\n  stripeCredentials {\n    stripePublishableKey\n  }\n  currentOrder {\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"
+      "text": "query CartQuery {\n  viewer {\n    ...StripeProvider_viewer\n    ...CartOrder_viewer\n    currentOrder {\n      ...CartOrder_order\n      id\n    }\n    id\n  }\n}\n\nfragment AddressFields_viewer on Viewer {\n  countries {\n    code\n    name\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      __typename\n      __isSkuProduct: __typename\n      ...CollectionAa_product\n      ...FontStyle_fontStyle\n      ... on FontStyle {\n        family {\n          name\n          cssUrl\n          id\n        }\n        name\n        variableInstances {\n          name\n        }\n      }\n      ... on Bundle {\n        name\n      }\n      ... on FontCollection {\n        name\n        isVariableFont\n        totalStyles\n        featureStyle {\n          family {\n            cssUrl\n            id\n          }\n          id\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    id\n    license {\n      id\n      name\n      multiplier\n    }\n    variable: licenseVariable {\n      id\n      variableType\n      ...VariableTableAmounts_variable\n    }\n    option: licenseOption {\n      id\n      amount\n      multiplier\n      name\n      ...VariableTableAmounts_option\n    }\n    variableText\n  }\n}\n\nfragment CartItem_viewer on Viewer {\n  licenses(licenseTypes: [RETAIL]) {\n    id\n    name\n    variables: licenseVariables {\n      id\n      name\n      variableType\n      options: licenseOptions {\n        id\n        amount\n        name\n      }\n    }\n  }\n}\n\nfragment CartOrder_order on Order {\n  ...Checkout_order\n  ...Download_order\n  ...CartTotals_order\n  orderItems {\n    ...CartItem_node\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n        variableType\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  discount {\n    id\n  }\n  customer {\n    email\n    name\n    anonymous\n    id\n  }\n  billingIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIdentity {\n    ...IdentityBox_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brand\n    }\n  }\n  stripePaymentIntent {\n    status\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n}\n\nfragment CartOrder_viewer on Viewer {\n  ...CartItem_viewer\n  ...Checkout_viewer\n  settings {\n    eulaAgreementLabel(format: HTML)\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment Checkout_order on Order {\n  canCompleteWithCoupon\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  billingIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIdentity {\n    name\n    organization\n    email\n    phone\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  licenseeIsBillingIdentity\n}\n\nfragment Checkout_viewer on Viewer {\n  ...AddressFields_viewer\n  settings {\n    uiFontName\n    newsletterOptInLabel\n  }\n  themeConfig {\n    customProperties\n  }\n}\n\nfragment CollectionAa_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ... on FontCollection {\n    featureStyle {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n  ... on Bundle {\n    fontStyles {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment Download_order on Order {\n  id\n  archiveUrl\n  customer {\n    email\n    id\n  }\n  completedWithCoupon\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment IdentityBox_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment StripeProvider_viewer on Viewer {\n  settings {\n    uiFontUrl\n    uiFontName\n  }\n  themeConfig {\n    customProperties\n  }\n  stripeAccountId\n  stripePublishableKey\n  currentOrder {\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"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<2b09acac10c443d4a15c6cbf588e0a76>>
+ * @generated SignedSource<<b4b764624fbe00d3d774d30ba0b40b3d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -19,9 +19,7 @@ export type StoreModalProductQuery$data = {
     } | null;
     readonly viewer: {
         readonly endpoint: string | null;
-        readonly stripeCredentials: {
-            readonly stripePublishableKey: string;
-        } | null;
+        readonly stripeAccountId: string | null;
         readonly " $fragmentSpreads": FragmentRefs<"StoreModalProductLicenseSelection_viewer" | "StoreModalProductSummary_viewer">;
     };
 };

package/dist/__generated__/StoreModalProductQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<2b09acac10c443d4a15c6cbf588e0a76>>
+ * @generated SignedSource<<b4b764624fbe00d3d774d30ba0b40b3d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -52,17 +52,8 @@ const node = function () {
     v6 = {
       "alias": null,
       "args": null,
-      "concreteType": "StripeCredentials",
-      "kind": "LinkedField",
-      "name": "stripeCredentials",
-      "plural": false,
-      "selections": [{
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "stripePublishableKey",
-        "storageKey": null
-      }],
+      "kind": "ScalarField",
+      "name": "stripeAccountId",
       "storageKey": null
     },
     v7 = {
@@ -500,15 +491,15 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "c40a4408a14fafdb11b8a0ffc44b46e9",
+      "cacheID": "505ecb8862c17c0dab95c6ae0415862e",
       "id": null,
       "metadata": {},
       "name": "StoreModalProductQuery",
       "operationKind": "query",
-      "text": "query StoreModalProductQuery(\n  $productId: ID!\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalFamily_collection\n    ... on FontCollection {\n      children(collectionTypes: [FAMILY]) {\n        id\n        ...StoreModalFamily_collection\n      }\n    }\n  }\n  viewer {\n    ...StoreModalProductLicenseSelection_viewer\n    ...StoreModalProductSummary_viewer\n    endpoint\n    stripeCredentials {\n      stripePublishableKey\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle on Bundle {\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection on FontCollection {\n  ...StoreModalFamilyButton_collection\n  cssUrl\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle\n    }\n    ...StoreModalBundleButton_bundle\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    ...StoreModalStyleButton_fontStyle\n  }\n}\n\nfragment StoreModalProductLicenseSelection_viewer on Viewer {\n  licenses(licenseTypes: [RETAIL]) {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  defaultSelected\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalProductSummary_viewer on Viewer {\n  precart(skuIds: [], licenseOptions: []) {\n    skus {\n      price(licenseOptions: []) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n    subtotal {\n      ...Price_price\n      amount\n      currency\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  id\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  variableAxes {\n    name\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalProductQuery(\n  $productId: ID!\n) {\n  collection: node(id: $productId) {\n    __typename\n    id\n    ...StoreModalFamily_collection\n    ... on FontCollection {\n      children(collectionTypes: [FAMILY]) {\n        id\n        ...StoreModalFamily_collection\n      }\n    }\n  }\n  viewer {\n    ...StoreModalProductLicenseSelection_viewer\n    ...StoreModalProductSummary_viewer\n    endpoint\n    stripeAccountId\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalBundleButton_bundle on Bundle {\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  fontStyles {\n    id\n    ...FontStyle_fontStyle\n  }\n}\n\nfragment StoreModalFamilyButton_collection on FontCollection {\n  isVariableFont\n  collectionType\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  parent {\n    id\n  }\n  featureStyle {\n    ...FontStyle_fontStyle\n    id\n  }\n  totalStyles\n  totalStylesPrice {\n    ...Price_price\n  }\n  ...useTotalStyles_fontCollection\n}\n\nfragment StoreModalFamily_collection on FontCollection {\n  ...StoreModalFamilyButton_collection\n  cssUrl\n  collectionType\n  sku {\n    id\n  }\n  isVariableFont\n  bundles {\n    id\n    fontStyles {\n      id\n      cssFamily\n      cssWeight\n      cssStretch\n      ...StoreModalStyleButton_fontStyle\n    }\n    ...StoreModalBundleButton_bundle\n  }\n  fontStyles {\n    id\n    cssFamily\n    cssWeight\n    cssStretch\n    ...StoreModalStyleButton_fontStyle\n  }\n}\n\nfragment StoreModalProductLicenseSelection_viewer on Viewer {\n  licenses(licenseTypes: [RETAIL]) {\n    id\n    ...StoreModalProductLicense_license\n  }\n}\n\nfragment StoreModalProductLicense_license on License {\n  id\n  url\n  name\n  defaultSelected\n  variables: licenseVariables {\n    id\n    name\n    variableType\n    ...VariableTableAmounts_variable\n    options: licenseOptions {\n      id\n      name\n      amount\n      ...VariableTableAmounts_option\n    }\n  }\n}\n\nfragment StoreModalProductSummary_viewer on Viewer {\n  precart(skuIds: [], licenseOptions: []) {\n    skus {\n      price(licenseOptions: []) {\n        amount\n      }\n      product {\n        __typename\n        ... on FontCollection {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Bundle {\n          totalStyles\n          totalStylesPrice(licenseOptions: []) {\n            amount\n          }\n        }\n        ... on Node {\n          __isNode: __typename\n          id\n        }\n      }\n      id\n    }\n    subtotal {\n      ...Price_price\n      amount\n      currency\n    }\n  }\n}\n\nfragment StoreModalStyleButton_fontStyle on FontStyle {\n  ...FontStyle_fontStyle\n  id\n  name\n  sku {\n    ...SKUPrice_sku\n    id\n  }\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\n  variableAxes {\n    name\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "491d7c1daa28742d375049de66b6c386";
+node.hash = "a56c2c63a760bf157f6456dcc5a59dad";
 var _default = node;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<8ae860b7b0a3279b4d13224fed2ec90b>>
+ * @generated SignedSource<<65e30c6e19e678578d8e9ddcb54c7794>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalReviewQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<8ae860b7b0a3279b4d13224fed2ec90b>>
+ * @generated SignedSource<<65e30c6e19e678578d8e9ddcb54c7794>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -171,17 +171,14 @@ const node = function () {
         }, {
           "alias": null,
           "args": null,
-          "concreteType": "StripeCredentials",
-          "kind": "LinkedField",
-          "name": "stripeCredentials",
-          "plural": false,
-          "selections": [{
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "stripePublishableKey",
-            "storageKey": null
-          }],
+          "kind": "ScalarField",
+          "name": "stripeAccountId",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "stripePublishableKey",
           "storageKey": null
         }, {
           "alias": null,
@@ -480,12 +477,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "ab1264b009e60ee2a4c28786470993cb",
+      "cacheID": "055fecbbe592dcba74a14e0fe078fd13",
       "id": null,
       "metadata": {},
       "name": "StoreModalReviewQuery",
       "operationKind": "query",
-      "text": "query StoreModalReviewQuery {\n  viewer {\n    ...StripeProvider_viewer\n    ...StoreModalReview_viewer\n    currentOrder {\n      ...StoreModalReview_order\n      id\n    }\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  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalDownload_order on Order {\n  id\n  archiveUrl\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalReview_order on Order {\n  ...CartTotals_order\n  ...StoreModalDownload_order\n  customer {\n    email\n    name\n    id\n  }\n  billingIdentity {\n    name\n    email\n    phone\n    street\n    locality\n    administrativeArea\n    country\n    zip\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brandFormatted\n    }\n  }\n  orderItems {\n    id\n    description\n    sku {\n      ...SKUPrice_sku\n      id\n    }\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n  completeUrl\n  total {\n    amount\n  }\n}\n\nfragment StoreModalReview_viewer on Viewer {\n  settings {\n    eulaAgreementLabel(format: HTML)\n  }\n}\n\nfragment StripeProvider_viewer on Viewer {\n  settings {\n    uiFontUrl\n    uiFontName\n  }\n  themeConfig {\n    customProperties\n  }\n  stripeCredentials {\n    stripePublishableKey\n  }\n  currentOrder {\n    stripePaymentIntent {\n      clientSecret\n    }\n    id\n  }\n}\n"
+      "text": "query StoreModalReviewQuery {\n  viewer {\n    ...StripeProvider_viewer\n    ...StoreModalReview_viewer\n    currentOrder {\n      ...StoreModalReview_order\n      id\n    }\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  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment StoreModalDownload_order on Order {\n  id\n  archiveUrl\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalReview_order on Order {\n  ...CartTotals_order\n  ...StoreModalDownload_order\n  customer {\n    email\n    name\n    id\n  }\n  billingIdentity {\n    name\n    email\n    phone\n    street\n    locality\n    administrativeArea\n    country\n    zip\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n  }\n  licenseeIsBillingIdentity\n  stripePaymentMethod {\n    card {\n      last4\n      brandFormatted\n    }\n  }\n  orderItems {\n    id\n    description\n    sku {\n      ...SKUPrice_sku\n      id\n    }\n  }\n  canCompleteWithCoupon\n  completedWithCoupon\n  stripePaymentIntent {\n    status\n    clientSecret\n  }\n  completeUrl\n  total {\n    amount\n  }\n}\n\nfragment StoreModalReview_viewer on Viewer {\n  settings {\n    eulaAgreementLabel(format: HTML)\n  }\n}\n\nfragment StripeProvider_viewer on Viewer {\n  settings {\n    uiFontUrl\n    uiFontName\n  }\n  themeConfig {\n    customProperties\n  }\n  stripeAccountId\n  stripePublishableKey\n  currentOrder {\n    stripePaymentIntent {\n      clientSecret\n    }\n    id\n  }\n}\n"
     }
   };
 }();

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<6a4188456e942de7b187554c0a988252>>
+ * @generated SignedSource<<e04bad486e150e1c189dfb5679ad70f5>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -15,9 +15,8 @@ export type StripeProvider_viewer$data = {
         readonly uiFontName: string | null;
         readonly uiFontUrl: string | null;
     } | null;
-    readonly stripeCredentials: {
-        readonly stripePublishableKey: string;
-    } | null;
+    readonly stripeAccountId: string | null;
+    readonly stripePublishableKey: string | null;
     readonly themeConfig: {
         readonly customProperties: ReadonlyArray<string> | null;
     } | null;

package/dist/__generated__/StripeProvider_viewer.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<6a4188456e942de7b187554c0a988252>>
+ * @generated SignedSource<<e04bad486e150e1c189dfb5679ad70f5>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -58,17 +58,14 @@ const node = {
   }, {
     "alias": null,
     "args": null,
-    "concreteType": "StripeCredentials",
-    "kind": "LinkedField",
-    "name": "stripeCredentials",
-    "plural": false,
-    "selections": [{
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "stripePublishableKey",
-      "storageKey": null
-    }],
+    "kind": "ScalarField",
+    "name": "stripeAccountId",
+    "storageKey": null
+  }, {
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "stripePublishableKey",
     "storageKey": null
   }, {
     "alias": null,
@@ -98,6 +95,6 @@ const node = {
   "type": "Viewer",
   "abstractKey": null
 };
-node.hash = "94dbdb1714785c862861adc46d6db0d7";
+node.hash = "efff082269b64afc7019b4d725285afa";
 var _default = node;
 exports.default = _default;

package/dist/components/CharacterViewer/index.js

@@ -103,6 +103,20 @@ const StyleSelect = _ref => {
     onChange: handleChange
   });
 };
+function Character(props) {
+  const ref = (0, _react.useRef)(null);
+  const [size, setSize] = (0, _react.useState)(1);
+  (0, _resizeObserver.default)(ref, entry => {
+    if (entry.target.scrollWidth > entry.target.clientWidth) {
+      setSize(size + 1);
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    "data-size": size
+  }));
+}
 function CharacterViewerComponent(_ref3) {
   var _collection$children, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$featureCha5, _fontStyle$characterB3, _fontStyle$featureCha6, _fontStyle$featureCha7, _fontStyle$featureCha8;
   let {
@@ -218,7 +232,7 @@ function CharacterViewerComponent(_ref3) {
       className: "character-viewer__block__characters",
       style: style,
       onMouseLeave: handleMouseLeave
-    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
       key: j,
       onClick: () => setSelectedCharacter(chars),
       onMouseEnter: () => setActiveCharacter(chars),
@@ -299,7 +313,7 @@ function CharacterViewerComponent(_ref3) {
         fontFeatureSettings: `'${feature}' 1`
       },
       onMouseLeave: handleFeatureCharacterMouseLeave
-    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
       key: j,
       onClick: () => setSelectedFeatureCharacter([chars, feature]),
       onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
@@ -321,7 +335,7 @@ function CharacterViewerComponent(_ref3) {
       feature,
       characters
     } = _ref8;
-    return characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+    return characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
       key: `${i}${j}`,
       style: {
         fontFeatureSettings: `'${feature}' 1`

package/dist/components/Precart/index.js

@@ -197,7 +197,7 @@ function Precart(_ref3) {
       type: 'PRECART_SELECT_LICENSE',
       licenseOptionSpec: spec
     }));
-  }, [viewer]);
+  }, []);
   function renderConfirmingModal(subtotal) {
     var _viewer$precart3, _viewer$precart3$skus;
     if (!isConfirming) {

package/dist/components/StoreModal/StoreModalProduct.js

@@ -23,7 +23,7 @@ const StoreModalProduct = _ref => {
     prepared
   } = _ref;
   const config = (0, _react.useContext)(_ConfigContext.default);
-  const data = (0, _reactRelay.usePreloadedQuery)(_StoreModalProductQuery !== void 0 ? _StoreModalProductQuery : (_StoreModalProductQuery = require("../../__generated__/StoreModalProductQuery.graphql"), _StoreModalProductQuery.hash && _StoreModalProductQuery.hash !== "491d7c1daa28742d375049de66b6c386" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery), prepared.productQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(_StoreModalProductQuery !== void 0 ? _StoreModalProductQuery : (_StoreModalProductQuery = require("../../__generated__/StoreModalProductQuery.graphql"), _StoreModalProductQuery.hash && _StoreModalProductQuery.hash !== "a56c2c63a760bf157f6456dcc5a59dad" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery), prepared.productQuery);
   const {
     collection,
     viewer
@@ -65,7 +65,7 @@ const StoreModalProduct = _ref => {
     })), licensesPosition === 'bottom' && /*#__PURE__*/_react.default.createElement(_StoreModalProductLicenseSelection.default, {
       viewer: viewer
     })),
-    stickyFooter: viewer.stripeCredentials ? /*#__PURE__*/_react.default.createElement(_StoreModalProductSummary.default, {
+    stickyFooter: viewer.stripeAccountId ? /*#__PURE__*/_react.default.createElement(_StoreModalProductSummary.default, {
       viewer: viewer
     }) : /*#__PURE__*/_react.default.createElement("div", null, "Please", ' ', /*#__PURE__*/_react.default.createElement("a", {
       href: `${viewer.endpoint}/admin/settings/payments`,

package/dist/components/StoreModal/StoreModalReview.js

@@ -121,7 +121,7 @@ const StoreModalReview = _ref => {
               city: billingIdentity.locality ?? '',
               state: billingIdentity.administrativeArea ?? '',
               country: billingIdentity.country,
-              postal_code: billingIdentity.zip ?? undefined
+              postal_code: billingIdentity.zip ?? ''
             }
           }
         }

package/dist/components/StripeProvider/index.js

@@ -13,15 +13,18 @@ var _StripeProvider_viewer;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const StripeProvider = _ref => {
-  var _data$stripeCredentia, _data$settings, _data$currentOrder, _data$currentOrder$st, _data$settings2, _data$themeConfig;
+  var _data$settings, _data$currentOrder, _data$currentOrder$st, _data$settings2, _data$themeConfig;
   let {
     viewer,
     children,
     requireClientSecret = true
   } = _ref;
-  const data = (0, _reactRelay.useFragment)(_StripeProvider_viewer !== void 0 ? _StripeProvider_viewer : (_StripeProvider_viewer = require("../../__generated__/StripeProvider_viewer.graphql"), _StripeProvider_viewer.hash && _StripeProvider_viewer.hash !== "94dbdb1714785c862861adc46d6db0d7" && console.error("The definition of 'StripeProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProvider_viewer), viewer);
-  const stripeKey = (_data$stripeCredentia = data.stripeCredentials) === null || _data$stripeCredentia === void 0 ? void 0 : _data$stripeCredentia.stripePublishableKey;
-  const stripePromiseRef = (0, _react.useRef)(stripeKey ? (0, _stripeJs.loadStripe)(stripeKey) : null);
+  const data = (0, _reactRelay.useFragment)(_StripeProvider_viewer !== void 0 ? _StripeProvider_viewer : (_StripeProvider_viewer = require("../../__generated__/StripeProvider_viewer.graphql"), _StripeProvider_viewer.hash && _StripeProvider_viewer.hash !== "efff082269b64afc7019b4d725285afa" && console.error("The definition of 'StripeProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProvider_viewer), viewer);
+  const stripeKey = data.stripePublishableKey;
+  const stripeAccount = data.stripeAccountId;
+  const stripePromiseRef = (0, _react.useRef)(stripeKey && stripeAccount ? (0, _stripeJs.loadStripe)(stripeKey, {
+    stripeAccount
+  }) : null);
   const cssSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : _data$settings.uiFontUrl;
   const clientSecret = ((_data$currentOrder = data.currentOrder) === null || _data$currentOrder === void 0 ? void 0 : (_data$currentOrder$st = _data$currentOrder.stripePaymentIntent) === null || _data$currentOrder$st === void 0 ? void 0 : _data$currentOrder$st.clientSecret) ?? undefined;
 

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

@@ -3,11 +3,20 @@ import { Alignment, Direction } from './types';
 import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
 import { TypeTesterStandaloneQuery } from '__generated__/TypeTesterStandaloneQuery.graphql';
 interface TypeTesterStandaloneComponent_props {
-    lineHeight?: number;
-    fontSize?: number;
-    features?: string[];
-    featuresSelected?: string[];
-    content?: string;
+    lineHeight?: number | null;
+    fontSize?: number | null;
+    axes?: string[] | null;
+    features?: string[] | null;
+    featuresSelected?: string[] | null;
+    featureSettings?: {
+        feature: string;
+        value: string;
+    }[] | null;
+    variableSettings?: {
+        axis: string;
+        value: number;
+    }[] | null;
+    content?: string | null;
     direction?: Direction;
     alignment?: Alignment;
     autofit?: boolean;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -19,8 +19,11 @@ function TypeTesterStandaloneComponent(_ref) {
   let {
     content,
     direction,
+    axes,
     features,
     featuresSelected,
+    featureSettings = null,
+    variableSettings = null,
     lineHeight,
     alignment,
     fontSize,
@@ -37,14 +40,22 @@ function TypeTesterStandaloneComponent(_ref) {
         size: fontSize ?? 72,
         lineHeight: lineHeight ?? 1,
         alignment: alignment ?? 'left',
-        features: featuresSelected ?? null,
-        variableSettings: null
+        features: (featureSettings === null || featureSettings === void 0 ? void 0 : featureSettings.filter(setting => setting.value === '1').map(setting => setting.feature)) ?? featuresSelected ?? null,
+        variableSettings: (variableSettings === null || variableSettings === void 0 ? void 0 : variableSettings.reduce((acc, _ref2) => {
+          let {
+            axis,
+            value
+          } = _ref2;
+          acc[axis] = value;
+          return acc;
+        }, {})) ?? null
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
     id: "standalone",
     viewer: data.viewer,
     fontStyle: (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.fontStyle,
+    axes: axes,
     features: features,
     direction: direction,
     productId: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$fontSty = _data$viewer2.fontStyle) === null || _data$viewer2$fontSty === void 0 ? void 0 : (_data$viewer2$fontSty2 = _data$viewer2$fontSty.family) === null || _data$viewer2$fontSty2 === void 0 ? void 0 : (_data$viewer2$fontSty3 = _data$viewer2$fontSty2.parent) === null || _data$viewer2$fontSty3 === void 0 ? void 0 : _data$viewer2$fontSty3.id) ?? ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$fontSty = _data$viewer3.fontStyle) === null || _data$viewer3$fontSty === void 0 ? void 0 : (_data$viewer3$fontSty2 = _data$viewer3$fontSty.family) === null || _data$viewer3$fontSty2 === void 0 ? void 0 : _data$viewer3$fontSty2.id),
@@ -54,24 +65,24 @@ function TypeTesterStandaloneComponent(_ref) {
   }));
 }
 const query = _TypeTesterStandaloneQuery !== void 0 ? _TypeTesterStandaloneQuery : (_TypeTesterStandaloneQuery = require("../../__generated__/TypeTesterStandaloneQuery.graphql"), _TypeTesterStandaloneQuery.hash && _TypeTesterStandaloneQuery.hash !== "3ad5c4d856f5d46ddf8a47a2b6d2420a" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery);
-function TypeTesterStandalonePreloadedQueryRenderer(_ref2) {
+function TypeTesterStandalonePreloadedQueryRenderer(_ref3) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
   const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
   return /*#__PURE__*/_react.default.createElement(TypeTesterStandaloneComponent, _extends({
     data: data
   }, rest));
 }
-function TypeTesterStandalone(_ref3) {
+function TypeTesterStandalone(_ref4) {
   var _data$viewer4;
   let {
     familyName,
     styleName,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const data = (0, _reactRelay.useLazyLoadQuery)(query, {
     familyName,
     styleName

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

@@ -5,7 +5,9 @@ interface TypeTesterElement_props {
     lineHeight?: string;
     fontSize?: string;
     features?: string;
+    axes?: string;
     featuresSelected?: string;
+    variableSettings?: string;
     content?: string;
     direction?: string;
     alignment?: string;

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TypeTesterStandaloneElement = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TypeTesterStandalone = _interopRequireDefault(require("./TypeTesterStandalone"));
+var _utils = require("../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const isAlignment = str => {
@@ -15,12 +16,31 @@ const isDirection = str => {
   return str === 'ltr' || str === 'rtl';
 };
 const parseBool = input => input === 'true' ? true : false;
+
+// parse a string like "wdth 1000, ital 0.5" into
+// [{ axis: "wdth", value: 1000 }, { axis: "ital", value: 0.5 }]
+function parseVariableSettings(input) {
+  if (!input) return null;
+  return input.split(/\s*,\s*/).map(settingString => {
+    const m = settingString.match(/^([A-Za-z0-9]{4}) (\d+(?:\.\d+)?)$/);
+    if (m && m.length > 2) {
+      return {
+        axis: m[1],
+        value: parseFloat(m[2])
+      };
+    } else {
+      console.warn(`fontdue-type-tester failed to parse variable-settings value: "${settingString}", ignoring`);
+    }
+  }).filter(_utils.notEmpty);
+}
 const TypeTesterStandaloneElement = _ref => {
   let {
     lineHeight,
     fontSize,
+    axes,
     features,
     featuresSelected,
+    variableSettings,
     alignment,
     direction,
     autofit,
@@ -30,10 +50,15 @@ const TypeTesterStandaloneElement = _ref => {
     autofit: parseBool(autofit),
     lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
     fontSize: fontSize ? parseFloat(fontSize) : undefined,
+    axes: (axes === null || axes === void 0 ? void 0 : axes.split(',')) ?? [],
     features: (features === null || features === void 0 ? void 0 : features.split(',')) ?? [],
-    featuresSelected: (featuresSelected === null || featuresSelected === void 0 ? void 0 : featuresSelected.split(',')) ?? [],
+    featureSettings: featuresSelected === null || featuresSelected === void 0 ? void 0 : featuresSelected.split(',').map(feature => ({
+      feature,
+      value: '1'
+    })),
     alignment: isAlignment(alignment) ? alignment : undefined,
-    direction: isDirection(direction) ? direction : undefined
+    direction: isDirection(direction) ? direction : undefined,
+    variableSettings: parseVariableSettings(variableSettings)
   }, rest));
 };
 exports.TypeTesterStandaloneElement = TypeTesterStandaloneElement;

package/dist/components/TypeTester/TypeTesterVariableAxes.js

@@ -32,7 +32,8 @@ const TypeTesterVariableAxes = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__variable-axes"
-  }, axes.map(showAxis => {
+  }, axes.filter(showAxis => showAxis in variableSettings) // only show the slider if the value is set
+  .map(showAxis => {
     var _fontStyle$variableAx;
     return (_fontStyle$variableAx = fontStyle.variableAxes) === null || _fontStyle$variableAx === void 0 ? void 0 : _fontStyle$variableAx.find(_ref2 => {
       let {

package/dist/fontdue.css

@@ -935,23 +935,31 @@ div[data-component=TypeTesters] {
 
 .character-viewer__block__characters {
   display: grid;
-  grid-template-columns: repeat(calc(var(--width) / 60), 1fr);
+  grid-template-columns: repeat(calc(var(--width) / 60), minmax(0, 1fr));
   font-size: 30px;
   margin-left: 1px;
 }
 .character-viewer__block__characters > div {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-bottom: 1px solid;
-  border-right: 1px solid;
+  border: 1px solid;
   margin-left: -1px;
   margin-bottom: -1px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding: 12px 0;
   text-align: center;
   cursor: default;
   white-space: pre;
 }
+.character-viewer__block__characters > div[data-size="2"] {
+  grid-column: span 2;
+}
+.character-viewer__block__characters > div[data-size="3"] {
+  grid-column: span 3;
+}
+.character-viewer__block__characters > div[data-size="4"] {
+  grid-column: span 4;
+}
+.character-viewer__block__characters > div[data-size="5"] {
+  grid-column: span 5;
+}
 @media screen and (min-width: 600px) {
   .character-viewer__block__characters > div:hover, .character-viewer__block__characters > div[data-selected=true] {
     background: var(--primary_text_color);

package/package.json

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