fontdue-js 0.1.3 → 1.1.0

package/dist/__generated__/TypeTestersIDQuery.graphql.js

@@ -68,18 +68,13 @@ fragment SelectButton_sku_2AMk59 on Sku {
 }
 
 fragment TypeTesterFeatures_fontStyle on FontStyle {
-  fontFeatures {
-    supportedFeatures
-    stylisticSetNames {
-      featureName
-      humanName
-    }
-  }
+  ...useFeaturesData_fontStyle
 }
 
 fragment TypeTesterFloatingToolbar_testers on TypeTester {
   id
   fontStyle {
+    ...useFeaturesData_fontStyle
     ...TypeTesterFeatures_fontStyle
     id
   }
@@ -115,6 +110,16 @@ fragment TypeTesters_collection_12wzh on FontCollection {
     id
   }
 }
+
+fragment useFeaturesData_fontStyle on FontStyle {
+  fontFeatures {
+    supportedFeatures
+    stylisticSetNames {
+      featureName
+      humanName
+    }
+  }
+}
 */
 const node = function () {
   var v0 = {
@@ -544,12 +549,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "d23e8efdfdb2d93ae2c1c86a41de378b",
+      "cacheID": "8469d5d52b3ecd33657647bd23a4e689",
       "id": null,
       "metadata": {},
       "name": "TypeTestersIDQuery",
       "operationKind": "query",
-      "text": "query TypeTestersIDQuery(\n  $collectionId: ID!\n  $includePriceBar: Boolean!\n  $tags: [String!]\n  $excludeTags: [String!]\n) {\n  collection: node(id: $collectionId) {\n    __typename\n    ...TypeTesters_collection_12wzh\n    id\n  }\n}\n\nfragment PriceBarSection_node on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_2AMk59\n    id\n    price(licenseOptions: []) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: []) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node on FontCollection {\n  ...PriceBarSection_node\n  parent {\n    ...PriceBarSection_node\n    id\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_2AMk59 on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_2AMk59 on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n\nfragment TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesters_collection_12wzh on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        direction\n        fontStyle {\n          id\n          family {\n            id\n          }\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  id\n  ...PriceBar_node @include(if: $includePriceBar)\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node @include(if: $includePriceBar)\n  }\n  parent {\n    id\n  }\n}\n"
+      "text": "query TypeTestersIDQuery(\n  $collectionId: ID!\n  $includePriceBar: Boolean!\n  $tags: [String!]\n  $excludeTags: [String!]\n) {\n  collection: node(id: $collectionId) {\n    __typename\n    ...TypeTesters_collection_12wzh\n    id\n  }\n}\n\nfragment PriceBarSection_node on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_2AMk59\n    id\n    price(licenseOptions: []) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: []) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node on FontCollection {\n  ...PriceBarSection_node\n  parent {\n    ...PriceBarSection_node\n    id\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_2AMk59 on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_2AMk59 on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n}\n\nfragment TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...useFeaturesData_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesters_collection_12wzh on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        direction\n        fontStyle {\n          id\n          family {\n            id\n          }\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  id\n  ...PriceBar_node @include(if: $includePriceBar)\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node @include(if: $includePriceBar)\n  }\n  parent {\n    id\n  }\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
     }
   };
 }();

package/dist/__generated__/TypeTestersSlugQuery.graphql.js

@@ -73,18 +73,13 @@ fragment SelectButton_sku_2AMk59 on Sku {
 }
 
 fragment TypeTesterFeatures_fontStyle on FontStyle {
-  fontFeatures {
-    supportedFeatures
-    stylisticSetNames {
-      featureName
-      humanName
-    }
-  }
+  ...useFeaturesData_fontStyle
 }
 
 fragment TypeTesterFloatingToolbar_testers on TypeTester {
   id
   fontStyle {
+    ...useFeaturesData_fontStyle
     ...TypeTesterFeatures_fontStyle
     id
   }
@@ -120,6 +115,16 @@ fragment TypeTesters_collection_12wzh on FontCollection {
     id
   }
 }
+
+fragment useFeaturesData_fontStyle on FontStyle {
+  fontFeatures {
+    supportedFeatures
+    stylisticSetNames {
+      featureName
+      humanName
+    }
+  }
+}
 */
 const node = function () {
   var v0 = {
@@ -578,12 +583,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "5328793dd1b6cba8d77d87463d3d2228",
+      "cacheID": "72038e3cbec9e6fd1b9673255d20d710",
       "id": null,
       "metadata": {},
       "name": "TypeTestersSlugQuery",
       "operationKind": "query",
-      "text": "query TypeTestersSlugQuery(\n  $collectionSlug: String!\n  $includePriceBar: Boolean!\n  $tags: [String!]\n  $excludeTags: [String!]\n) {\n  viewer {\n    slug(name: $collectionSlug) {\n      collection: fontCollection {\n        ...TypeTesters_collection_12wzh\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment PriceBarSection_node on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_2AMk59\n    id\n    price(licenseOptions: []) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: []) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node on FontCollection {\n  ...PriceBarSection_node\n  parent {\n    ...PriceBarSection_node\n    id\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_2AMk59 on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_2AMk59 on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n\nfragment TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesters_collection_12wzh on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        direction\n        fontStyle {\n          id\n          family {\n            id\n          }\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  id\n  ...PriceBar_node @include(if: $includePriceBar)\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node @include(if: $includePriceBar)\n  }\n  parent {\n    id\n  }\n}\n"
+      "text": "query TypeTestersSlugQuery(\n  $collectionSlug: String!\n  $includePriceBar: Boolean!\n  $tags: [String!]\n  $excludeTags: [String!]\n) {\n  viewer {\n    slug(name: $collectionSlug) {\n      collection: fontCollection {\n        ...TypeTesters_collection_12wzh\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment PriceBarSection_node on FontCollection {\n  id\n  name\n  collectionType\n  sku {\n    ...SelectButton_sku_2AMk59\n    id\n    price(licenseOptions: []) {\n      ...Price_price\n    }\n  }\n  totalStyles\n  totalStylesPrice(licenseOptions: []) {\n    ...Price_price\n  }\n}\n\nfragment PriceBar_node on FontCollection {\n  ...PriceBarSection_node\n  parent {\n    ...PriceBarSection_node\n    id\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment SKUPrice_sku_2AMk59 on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku_2AMk59 on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n}\n\nfragment TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...useFeaturesData_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesters_collection_12wzh on FontCollection {\n  typeTesters(first: 999, tags: $tags, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        content\n        size\n        lineHeight\n        direction\n        fontStyle {\n          id\n          family {\n            id\n          }\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  id\n  ...PriceBar_node @include(if: $includePriceBar)\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node @include(if: $includePriceBar)\n  }\n  parent {\n    id\n  }\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
     }
   };
 }();

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

@@ -0,0 +1,19 @@
+import { ReaderFragment } from "relay-runtime";
+import { FragmentRefs } from "relay-runtime";
+export declare type useFeaturesData_fontStyle = {
+    readonly fontFeatures: {
+        readonly supportedFeatures: ReadonlyArray<string>;
+        readonly stylisticSetNames: ReadonlyArray<{
+            readonly featureName: string;
+            readonly humanName: string;
+        }>;
+    };
+    readonly " $refType": "useFeaturesData_fontStyle";
+};
+export declare type useFeaturesData_fontStyle$data = useFeaturesData_fontStyle;
+export declare type useFeaturesData_fontStyle$key = {
+    readonly " $data"?: useFeaturesData_fontStyle$data;
+    readonly " $fragmentRefs": FragmentRefs<"useFeaturesData_fontStyle">;
+};
+declare const node: ReaderFragment;
+export default node;

package/dist/__generated__/useFeaturesData_fontStyle.graphql.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/* tslint:disable */
+
+/* eslint-disable */
+// @ts-nocheck
+const node = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "useFeaturesData_fontStyle",
+  "selections": [{
+    "alias": null,
+    "args": null,
+    "concreteType": "FontFeatures",
+    "kind": "LinkedField",
+    "name": "fontFeatures",
+    "plural": false,
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "supportedFeatures",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "concreteType": "StylisticSetName",
+      "kind": "LinkedField",
+      "name": "stylisticSetNames",
+      "plural": true,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "featureName",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "humanName",
+        "storageKey": null
+      }],
+      "storageKey": null
+    }],
+    "storageKey": null
+  }],
+  "type": "FontStyle",
+  "abstractKey": null
+};
+node.hash = '3c48a87b1b19f52e3dda10fc11f0030a';
+var _default = node;
+exports.default = _default;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface CharacterViewer_props {
-    collectionId: string;
+    collectionId?: string;
+    collectionSlug?: string;
 }
 declare const CharacterViewerQueryRenderer: React.FC<CharacterViewer_props>;
 export default CharacterViewerQueryRenderer;

package/dist/components/CharacterViewer/index.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactRelay = require("react-relay");
 
-var _reactStaticContainer = _interopRequireDefault(require("react-static-container"));
-
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
 
 var _utils = require("../../utils");
@@ -19,7 +17,7 @@ var _Select = _interopRequireDefault(require("../Select"));
 
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
 
-var _CharacterViewer_family, _CharacterViewer_collection, _CharacterViewer_Query;
+var _CharacterViewer_family, _CharacterViewer_collection, _CharacterViewer_Query, _CharacterViewer_SlugQuery;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -51,7 +49,7 @@ const collectionInfo = collection => ({
 });
 
 const CharacterViewerComponent = _ref => {
-  var _collection$children$, _collection$children, _ref2, _collection$featureSt, _collection$featureSt2, _collection$fontStyle, _collection$fontStyle2, _collection$children2, _collection$children3, _collection$children4, _collection$children5, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$featureCha5, _fontStyle$characterB3, _fontStyle$featureCha6;
+  var _collection$children$, _collection$children, _ref2, _collection$featureSt, _collection$featureSt2, _collection$fontStyle, _collection$fontStyle2, _collection$children2, _collection$children3, _collection$children4, _collection$children5, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$featureCha5, _fontStyle$characterB3, _fontStyle$featureCha6, _fontStyle$featureCha7;
 
   let {
     collection
@@ -149,7 +147,7 @@ const CharacterViewerComponent = _ref => {
       onMouseEnter: () => setActiveCharacter(chars),
       "data-selected": selectedCharacter === chars
     }, chars))));
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }))), (_fontStyle$featureCha6 = fontStyle.featureCharacters) !== null && _fontStyle$featureCha6 !== void 0 && _fontStyle$featureCha6.length ? /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__features-map"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__feature-monitor"
@@ -197,7 +195,7 @@ const CharacterViewerComponent = _ref => {
     style: {
       '--width': blocksWidth
     }
-  }, (_fontStyle$featureCha6 = fontStyle.featureCharacters) === null || _fontStyle$featureCha6 === void 0 ? void 0 : _fontStyle$featureCha6.map((_ref4, i) => {
+  }, (_fontStyle$featureCha7 = fontStyle.featureCharacters) === null || _fontStyle$featureCha7 === void 0 ? void 0 : _fontStyle$featureCha7.map((_ref4, i) => {
     let {
       name,
       feature,
@@ -220,7 +218,7 @@ const CharacterViewerComponent = _ref => {
       onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
       "data-selected": (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[0]) === chars && (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[1]) === feature
     }, chars))));
-  }))));
+  }))) : null);
 };
 
 _CharacterViewer_family !== void 0 ? _CharacterViewer_family : (_CharacterViewer_family = require("../../__generated__/CharacterViewer_family.graphql"), _CharacterViewer_family.hash && _CharacterViewer_family.hash !== "2883e053de6bd4a34d802fe4af824991" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family);
@@ -230,26 +228,54 @@ const CharacterViewer = (0, _reactRelay.createFragmentContainer)(CharacterViewer
 
 const CharacterViewerQueryRenderer = _ref5 => {
   let {
-    collectionId
+    collectionId,
+    collectionSlug
   } = _ref5;
   const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    query: _CharacterViewer_Query !== void 0 ? _CharacterViewer_Query : (_CharacterViewer_Query = require("../../__generated__/CharacterViewer_Query.graphql"), _CharacterViewer_Query.hash && _CharacterViewer_Query.hash !== "10b58f0e5e086adbcd2a0d4cd44c442c" && console.error("The definition of 'CharacterViewer_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_Query),
-    variables: {
-      collectionId
-    },
-    environment: environment,
-    render: _ref6 => {
-      let {
-        props
-      } = _ref6;
-      return /*#__PURE__*/_react.default.createElement(_reactStaticContainer.default, {
-        shouldUpdate: props
-      }, props !== null && props !== void 0 && props.node ? /*#__PURE__*/_react.default.createElement(CharacterViewer, {
-        collection: props.node
-      }) : null);
-    }
-  });
+
+  if (collectionId) {
+    return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
+      query: _CharacterViewer_Query !== void 0 ? _CharacterViewer_Query : (_CharacterViewer_Query = require("../../__generated__/CharacterViewer_Query.graphql"), _CharacterViewer_Query.hash && _CharacterViewer_Query.hash !== "10b58f0e5e086adbcd2a0d4cd44c442c" && console.error("The definition of 'CharacterViewer_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_Query),
+      variables: {
+        collectionId
+      },
+      environment: environment,
+      render: _ref6 => {
+        let {
+          props
+        } = _ref6;
+        const node = props === null || props === void 0 ? void 0 : props.node;
+        if (!node) return null;
+        return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
+          collection: node
+        });
+      }
+    });
+  }
+
+  if (collectionSlug) {
+    return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
+      query: _CharacterViewer_SlugQuery !== void 0 ? _CharacterViewer_SlugQuery : (_CharacterViewer_SlugQuery = require("../../__generated__/CharacterViewer_SlugQuery.graphql"), _CharacterViewer_SlugQuery.hash && _CharacterViewer_SlugQuery.hash !== "de903e7c2640562aee374a900e089c9c" && console.error("The definition of 'CharacterViewer_SlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_SlugQuery),
+      variables: {
+        collectionSlug
+      },
+      environment: environment,
+      render: _ref7 => {
+        var _props$viewer, _props$viewer$slug;
+
+        let {
+          props
+        } = _ref7;
+        const collection = props === null || props === void 0 ? void 0 : (_props$viewer = props.viewer) === null || _props$viewer === void 0 ? void 0 : (_props$viewer$slug = _props$viewer.slug) === null || _props$viewer$slug === void 0 ? void 0 : _props$viewer$slug.fontCollection;
+        if (!collection) return null;
+        return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
+          collection: collection
+        });
+      }
+    });
+  }
+
+  throw new Error('Unable to render CharacterViewer without a collectionId or collectionSlug');
 };
 
 var _default = CharacterViewerQueryRenderer;

package/dist/components/ConfigContext.d.ts

@@ -11,8 +11,6 @@ export interface Config {
 }
 export declare const makeConfig: (config?: Config | undefined) => {
     typeTester: {
-        min: number;
-        max: number;
         autofitOnChange: boolean;
         truncate: boolean;
         priceText: boolean;
@@ -28,6 +26,7 @@ export declare const makeConfig: (config?: Config | undefined) => {
         groupEdit: boolean;
         bulletStyle: "square" | "round";
         openTypeFeatures: {
+            interactionStyle: "select" | "panel";
             columns: {
                 features: (string | {
                     code: string;
@@ -39,6 +38,16 @@ export declare const makeConfig: (config?: Config | undefined) => {
         };
         alignmentButtons: boolean;
         initialAlignment: import("./TypeTester/types").Alignment;
+        size: {
+            label: string | false;
+            min: number;
+            max: number;
+        };
+        lineHeight: {
+            label: string | false;
+            min: number;
+            max: number;
+        } | undefined;
     };
     form: {
         checkboxStyle: "cross" | "check";
@@ -50,8 +59,6 @@ export declare const makeConfig: (config?: Config | undefined) => {
 };
 declare const _default: React.Context<{
     typeTester: {
-        min: number;
-        max: number;
         autofitOnChange: boolean;
         truncate: boolean;
         priceText: boolean;
@@ -67,6 +74,7 @@ declare const _default: React.Context<{
         groupEdit: boolean;
         bulletStyle: "square" | "round";
         openTypeFeatures: {
+            interactionStyle: "select" | "panel";
             columns: {
                 features: (string | {
                     code: string;
@@ -78,6 +86,16 @@ declare const _default: React.Context<{
         };
         alignmentButtons: boolean;
         initialAlignment: import("./TypeTester/types").Alignment;
+        size: {
+            label: string | false;
+            min: number;
+            max: number;
+        };
+        lineHeight: {
+            label: string | false;
+            min: number;
+            max: number;
+        } | undefined;
     };
     form: {
         checkboxStyle: "cross" | "check";

package/dist/components/ConfigContext.js

@@ -10,15 +10,13 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const makeTypeTesterConfig = config => {
-  var _config$shy, _config$toolsPosition, _config$min, _config$max, _config$autofitOnChan, _config$truncate, _config$priceText, _config$selectButtonS, _config$selectButtonL, _ref, _config$selectButton, _config$selectable, _config$priceBar, _config$textInput, _config$initialMode, _config$groupEdit, _config$bulletStyle, _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$alignmentButt, _config$initialAlignm;
+  var _config$shy, _config$toolsPosition, _config$autofitOnChan, _config$truncate, _config$priceText, _config$selectButtonS, _config$selectButtonL, _ref, _config$selectButton, _config$selectable, _config$priceBar, _config$textInput, _config$initialMode, _config$groupEdit, _config$bulletStyle, _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4, _config$openTypeFeatu5, _config$alignmentButt, _config$initialAlignm, _config$size$label, _config$size, _ref2, _config$size$min, _config$size2, _ref3, _config$size$max, _config$size3, _config$lineHeight$la, _config$lineHeight, _config$lineHeight$mi, _config$lineHeight2, _config$lineHeight$ma, _config$lineHeight3;
 
   let shy = (_config$shy = config === null || config === void 0 ? void 0 : config.shy) !== null && _config$shy !== void 0 ? _config$shy : false;
   if (shy === true) shy = 'hover';
   let toolsPosition = (_config$toolsPosition = config === null || config === void 0 ? void 0 : config.toolsPosition) !== null && _config$toolsPosition !== void 0 ? _config$toolsPosition : 'inline';
   if (shy !== 'focus') toolsPosition = 'inline';
   return {
-    min: (_config$min = config === null || config === void 0 ? void 0 : config.min) !== null && _config$min !== void 0 ? _config$min : 10,
-    max: (_config$max = config === null || config === void 0 ? void 0 : config.max) !== null && _config$max !== void 0 ? _config$max : 200,
     autofitOnChange: (_config$autofitOnChan = config === null || config === void 0 ? void 0 : config.autofitOnChange) !== null && _config$autofitOnChan !== void 0 ? _config$autofitOnChan : false,
     truncate: (_config$truncate = config === null || config === void 0 ? void 0 : config.truncate) !== null && _config$truncate !== void 0 ? _config$truncate : false,
     priceText: (_config$priceText = config === null || config === void 0 ? void 0 : config.priceText) !== null && _config$priceText !== void 0 ? _config$priceText : false,
@@ -34,11 +32,22 @@ const makeTypeTesterConfig = config => {
     groupEdit: (_config$groupEdit = config === null || config === void 0 ? void 0 : config.groupEdit) !== null && _config$groupEdit !== void 0 ? _config$groupEdit : false,
     bulletStyle: (_config$bulletStyle = config === null || config === void 0 ? void 0 : config.bulletStyle) !== null && _config$bulletStyle !== void 0 ? _config$bulletStyle : 'square',
     openTypeFeatures: {
-      columns: config === null || config === void 0 ? void 0 : (_config$openTypeFeatu = config.openTypeFeatures) === null || _config$openTypeFeatu === void 0 ? void 0 : _config$openTypeFeatu.columns,
-      selectionStyle: (_config$openTypeFeatu2 = config === null || config === void 0 ? void 0 : (_config$openTypeFeatu3 = config.openTypeFeatures) === null || _config$openTypeFeatu3 === void 0 ? void 0 : _config$openTypeFeatu3.selectionStyle) !== null && _config$openTypeFeatu2 !== void 0 ? _config$openTypeFeatu2 : 'bullet'
+      interactionStyle: (_config$openTypeFeatu = config === null || config === void 0 ? void 0 : (_config$openTypeFeatu2 = config.openTypeFeatures) === null || _config$openTypeFeatu2 === void 0 ? void 0 : _config$openTypeFeatu2.interactionStyle) !== null && _config$openTypeFeatu !== void 0 ? _config$openTypeFeatu : 'panel',
+      columns: config === null || config === void 0 ? void 0 : (_config$openTypeFeatu3 = config.openTypeFeatures) === null || _config$openTypeFeatu3 === void 0 ? void 0 : _config$openTypeFeatu3.columns,
+      selectionStyle: (_config$openTypeFeatu4 = config === null || config === void 0 ? void 0 : (_config$openTypeFeatu5 = config.openTypeFeatures) === null || _config$openTypeFeatu5 === void 0 ? void 0 : _config$openTypeFeatu5.selectionStyle) !== null && _config$openTypeFeatu4 !== void 0 ? _config$openTypeFeatu4 : 'bullet'
     },
     alignmentButtons: (_config$alignmentButt = config === null || config === void 0 ? void 0 : config.alignmentButtons) !== null && _config$alignmentButt !== void 0 ? _config$alignmentButt : false,
-    initialAlignment: (_config$initialAlignm = config === null || config === void 0 ? void 0 : config.initialAlignment) !== null && _config$initialAlignm !== void 0 ? _config$initialAlignm : 'left'
+    initialAlignment: (_config$initialAlignm = config === null || config === void 0 ? void 0 : config.initialAlignment) !== null && _config$initialAlignm !== void 0 ? _config$initialAlignm : 'left',
+    size: {
+      label: (_config$size$label = config === null || config === void 0 ? void 0 : (_config$size = config.size) === null || _config$size === void 0 ? void 0 : _config$size.label) !== null && _config$size$label !== void 0 ? _config$size$label : 'Size',
+      min: (_ref2 = (_config$size$min = config === null || config === void 0 ? void 0 : (_config$size2 = config.size) === null || _config$size2 === void 0 ? void 0 : _config$size2.min) !== null && _config$size$min !== void 0 ? _config$size$min : config === null || config === void 0 ? void 0 : config.min) !== null && _ref2 !== void 0 ? _ref2 : 10,
+      max: (_ref3 = (_config$size$max = config === null || config === void 0 ? void 0 : (_config$size3 = config.size) === null || _config$size3 === void 0 ? void 0 : _config$size3.max) !== null && _config$size$max !== void 0 ? _config$size$max : config === null || config === void 0 ? void 0 : config.max) !== null && _ref3 !== void 0 ? _ref3 : 200
+    },
+    lineHeight: config !== null && config !== void 0 && config.lineHeight ? {
+      label: (_config$lineHeight$la = config === null || config === void 0 ? void 0 : (_config$lineHeight = config.lineHeight) === null || _config$lineHeight === void 0 ? void 0 : _config$lineHeight.label) !== null && _config$lineHeight$la !== void 0 ? _config$lineHeight$la : 'Line height',
+      min: (_config$lineHeight$mi = config === null || config === void 0 ? void 0 : (_config$lineHeight2 = config.lineHeight) === null || _config$lineHeight2 === void 0 ? void 0 : _config$lineHeight2.min) !== null && _config$lineHeight$mi !== void 0 ? _config$lineHeight$mi : 0.7,
+      max: (_config$lineHeight$ma = config === null || config === void 0 ? void 0 : (_config$lineHeight3 = config.lineHeight) === null || _config$lineHeight3 === void 0 ? void 0 : _config$lineHeight3.max) !== null && _config$lineHeight$ma !== void 0 ? _config$lineHeight$ma : 2
+    } : undefined
   };
 };
 

package/dist/components/SKUPrice/index.js

@@ -48,17 +48,18 @@ const SKUPrice = _ref => {
     showCollectionSavings,
     sku
   }));
-  const licenseOptionsSpecs = (0, _reactRedux.useSelector)(state => state.licenseOptions.map(spec => ({
-    licenseId: spec.licenseId,
-    licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
-  })));
+  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
   (0, _react.useEffect)(() => {
     if (!sku) return;
+    const licenseOptionsSpecs = licenseOptions.map(spec => ({
+      licenseId: spec.licenseId,
+      licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
+    }));
     relay.refetch({
       id: sku.id,
       licenseOptionsSpecs
     });
-  }, [licenseOptionsSpecs]);
+  }, [licenseOptions]);
   if (!(sku !== null && sku !== void 0 && sku.price)) return null;
   return /*#__PURE__*/_react.default.createElement(_Price.default, _extends({}, rest, {
     price: sku.price,

package/dist/components/Select/index.js

@@ -13,8 +13,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || 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 NBSP = '\xa0';
-
 const Select = _ref => {
   var _options$find;
 
@@ -27,7 +25,7 @@ const Select = _ref => {
     className: "select"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "select__text"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.DownArrow, null), NBSP, (_options$find = options.find(_ref2 => {
+  }, /*#__PURE__*/_react.default.createElement(_Icons.DownArrow, null), (_options$find = options.find(_ref2 => {
     let {
       value: v
     } = _ref2;

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

@@ -1,4 +1,4 @@
-import { TypeTesterFeatures_fontStyle } from '../../__generated__/TypeTesterFeatures_fontStyle.graphql';
+import { TypeTesterFeatures_fontStyle } from '__generated__/TypeTesterFeatures_fontStyle.graphql';
 interface TypeTesterFeatures_props {
     id: string;
     fontStyle: TypeTesterFeatures_fontStyle;

package/dist/components/TypeTester/TypeTesterFeatures.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactRelay = require("react-relay");
 
-var _features = _interopRequireDefault(require("./features"));
-
 var _TypeTesterBullet = _interopRequireDefault(require("../TypeTester/TypeTesterBullet"));
 
 var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
@@ -19,7 +17,9 @@ var _Checkbox = _interopRequireDefault(require("../Checkbox"));
 
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 
-var _TypeTesterFeatures_stylisticSetName, _TypeTesterFeatures_fontStyle;
+var _useFeaturesData = _interopRequireDefault(require("./useFeaturesData"));
+
+var _TypeTesterFeatures_fontStyle;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -63,57 +63,42 @@ function useHeightAnimation() {
   };
 }
 
-const shouldIncludeFeature = (supportedFeatures, feature) => supportedFeatures.indexOf(feature) >= 0;
-
-const getStylisticSetName = (feature, stylisticSetNames) => stylisticSetNames.find(_ref => {
-  let {
-    featureName
-  } = _ref;
-  return featureName === feature;
-});
-
-const getFeatureName = (feature, stylisticSetNames) => {
-  const stylisticSetName = getStylisticSetName(feature, stylisticSetNames);
-
-  if (stylisticSetName) {
-    return stylisticSetName.humanName;
-  }
-
-  if (_features.default.hasOwnProperty(feature)) {
-    return _features.default[feature];
-  }
-
-  return null;
+const shouldIncludeFeature = (supportedFeatures, feature) => {
+  if (!supportedFeatures) return false;
+  return supportedFeatures.indexOf(feature) >= 0;
 };
 
-_TypeTesterFeatures_stylisticSetName !== void 0 ? _TypeTesterFeatures_stylisticSetName : (_TypeTesterFeatures_stylisticSetName = require("../../__generated__/TypeTesterFeatures_stylisticSetName.graphql"), _TypeTesterFeatures_stylisticSetName.hash && _TypeTesterFeatures_stylisticSetName.hash !== "8420321d8ddf9b3846450d609586db21" && console.error("The definition of 'TypeTesterFeatures_stylisticSetName' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_stylisticSetName);
-
-const TypeTesterFeatures = _ref2 => {
+const TypeTesterFeatures = _ref => {
   var _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4;
 
   let {
     id,
     fontStyle,
     features: showFeatures
-  } = _ref2;
+  } = _ref;
   const {
     typeTester: config
   } = (0, _react.useContext)(_ConfigContext.default);
   const {
-    features,
+    features: selectedFeatures,
     toggleFeature,
     featuresOpen
   } = (0, _TypeTesterState.default)({
     id
   });
   const selectionStyle = config.openTypeFeatures.selectionStyle;
+  const {
+    featureNames,
+    fontFeatures
+  } = (0, _useFeaturesData.default)({
+    fontStyle,
+    features: showFeatures
+  });
 
   const renderFeature = feature => {
-    var _fontStyle$fontFeatur;
-
     const featureCode = typeof feature === 'string' ? feature : feature.code;
-    const featureName = typeof feature === 'string' ? getFeatureName(feature, (_fontStyle$fontFeatur = fontStyle.fontFeatures) === null || _fontStyle$fontFeatur === void 0 ? void 0 : _fontStyle$fontFeatur.stylisticSetNames) : feature.name;
-    const checked = features.indexOf(featureCode) >= 0;
+    const featureName = typeof feature === 'string' ? featureNames[featureCode] : feature.name;
+    const checked = selectedFeatures.indexOf(featureCode) >= 0;
     return /*#__PURE__*/_react.default.createElement("button", {
       key: featureCode,
       className: "type-tester__features__button",
@@ -140,9 +125,9 @@ const TypeTesterFeatures = _ref2 => {
       style: {
         '--grid-range': columnConfig.range
       }
-    }, columnConfig.features.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, typeof feature === 'string' ? feature : feature.code)).map(renderFeature))));
+    }, columnConfig.features.filter(feature => shouldIncludeFeature(fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures, typeof feature === 'string' ? feature : feature.code)).map(renderFeature))));
   } else {
-    featuresColumns = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showFeatures.filter(feature => shouldIncludeFeature(fontStyle.fontFeatures.supportedFeatures, feature)).map(renderFeature));
+    featuresColumns = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showFeatures.filter(feature => shouldIncludeFeature(fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures, feature)).map(renderFeature));
   }
 
   const {
@@ -167,7 +152,7 @@ const TypeTesterFeatures = _ref2 => {
 };
 
 var _default = (0, _reactRelay.createFragmentContainer)(TypeTesterFeatures, {
-  fontStyle: _TypeTesterFeatures_fontStyle !== void 0 ? _TypeTesterFeatures_fontStyle : (_TypeTesterFeatures_fontStyle = require("../../__generated__/TypeTesterFeatures_fontStyle.graphql"), _TypeTesterFeatures_fontStyle.hash && _TypeTesterFeatures_fontStyle.hash !== "838ddab02dcbca47c8368b219c302934" && console.error("The definition of 'TypeTesterFeatures_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_fontStyle)
+  fontStyle: _TypeTesterFeatures_fontStyle !== void 0 ? _TypeTesterFeatures_fontStyle : (_TypeTesterFeatures_fontStyle = require("../../__generated__/TypeTesterFeatures_fontStyle.graphql"), _TypeTesterFeatures_fontStyle.hash && _TypeTesterFeatures_fontStyle.hash !== "25582c33916ebaadd2f674b1d0b6bf4b" && console.error("The definition of 'TypeTesterFeatures_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_fontStyle)
 });
 
 exports.default = _default;

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql';
 interface TypeTesterFeaturesButton_props {
-    featuresOpen: boolean;
-    features: string[];
-    toggleFeaturesOpen: () => void;
+    id: string;
+    fontStyle: useFeaturesData_fontStyle$key;
+    onNeedsRefocus?: () => void;
 }
 declare const TypeTesterFeaturesButton: React.FC<TypeTesterFeaturesButton_props>;
 export default TypeTesterFeaturesButton;