fontdue-js 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+## 1.1.0
+
+- Added `interactionStyle` config for type tester OT features with a new `select` option
+- Added `lineHeight` config to type tester
+- The size slider now has a "Size" label which can be customized or disabled
+- Fixed an issue where some component updates were causing excessive graphql requests
+- Fixed CharacterViewer component for fonts with no GSUB glyphs
+- Adjusted default type tester styles for better spacing and mobile defaults
+
+## 1.0.1
+
+- Fixed an issue with Select component spacing
+
+## 1.0.0
+
+- Initial release

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

@@ -1,13 +1,7 @@
 import { ReaderFragment } from "relay-runtime";
 import { FragmentRefs } from "relay-runtime";
 export declare type TypeTesterFeatures_fontStyle = {
-    readonly fontFeatures: {
-        readonly supportedFeatures: ReadonlyArray<string>;
-        readonly stylisticSetNames: ReadonlyArray<{
-            readonly featureName: string;
-            readonly humanName: string;
-        }>;
-    };
+    readonly " $fragmentRefs": FragmentRefs<"useFeaturesData_fontStyle">;
     readonly " $refType": "TypeTesterFeatures_fontStyle";
 };
 export declare type TypeTesterFeatures_fontStyle$data = TypeTesterFeatures_fontStyle;

package/dist/__generated__/TypeTesterFeatures_fontStyle.graphql.js

@@ -15,45 +15,13 @@ const node = {
   "metadata": null,
   "name": "TypeTesterFeatures_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
+    "kind": "FragmentSpread",
+    "name": "useFeaturesData_fontStyle"
   }],
   "type": "FontStyle",
   "abstractKey": null
 };
-node.hash = '838ddab02dcbca47c8368b219c302934';
+node.hash = '25582c33916ebaadd2f674b1d0b6bf4b';
 var _default = node;
 exports.default = _default;

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

@@ -3,7 +3,7 @@ import { FragmentRefs } from "relay-runtime";
 export declare type TypeTesterFloatingToolbar_testers = ReadonlyArray<{
     readonly id: string;
     readonly fontStyle: {
-        readonly " $fragmentRefs": FragmentRefs<"TypeTesterFeatures_fontStyle">;
+        readonly " $fragmentRefs": FragmentRefs<"useFeaturesData_fontStyle" | "TypeTesterFeatures_fontStyle">;
     } | null;
     readonly " $refType": "TypeTesterFloatingToolbar_testers";
 }>;

package/dist/__generated__/TypeTesterFloatingToolbar_testers.graphql.js

@@ -30,6 +30,10 @@ const node = {
     "name": "fontStyle",
     "plural": false,
     "selections": [{
+      "args": null,
+      "kind": "FragmentSpread",
+      "name": "useFeaturesData_fontStyle"
+    }, {
       "args": null,
       "kind": "FragmentSpread",
       "name": "TypeTesterFeatures_fontStyle"
@@ -39,6 +43,6 @@ const node = {
   "type": "TypeTester",
   "abstractKey": null
 };
-node.hash = '5554933cac70854b361575a5ed0af8ac';
+node.hash = '3b87269ef35fe6c6cfabcc7a2e330a3c';
 var _default = node;
 exports.default = _default;

package/dist/__generated__/TypeTester_StyleQuery.graphql.js

@@ -57,13 +57,7 @@ fragment SelectButton_sku on Sku {
 }
 
 fragment TypeTesterFeatures_fontStyle on FontStyle {
-  fontFeatures {
-    supportedFeatures
-    stylisticSetNames {
-      featureName
-      humanName
-    }
-  }
+  ...useFeaturesData_fontStyle
 }
 
 fragment TypeTesterStyleSelectData_fontStyle on FontStyle {
@@ -100,6 +94,7 @@ fragment TypeTester_fontStyle on FontStyle {
   ...TypeTesterFeatures_fontStyle
   ...TypeTesterStyleSelectData_fontStyle
   ...FontStyle_fontStyle
+  ...useFeaturesData_fontStyle
   family {
     cssUrl
     id
@@ -128,6 +123,16 @@ fragment TypeTester_fontStyle on FontStyle {
 fragment TypeTester_viewer on Viewer {
   ...TypeTesterStyleSelectData_viewer
 }
+
+fragment useFeaturesData_fontStyle on FontStyle {
+  fontFeatures {
+    supportedFeatures
+    stylisticSetNames {
+      featureName
+      humanName
+    }
+  }
+}
 */
 const node = function () {
   var v0 = [{
@@ -455,12 +460,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "80bf60fbcc8c99ccaff09a562f3d53ee",
+      "cacheID": "d729e19f7123d0dd27c4d856eff7b41c",
       "id": null,
       "metadata": {},
       "name": "TypeTester_StyleQuery",
       "operationKind": "query",
-      "text": "query TypeTester_StyleQuery(\n  $id: ID!\n) {\n  fontStyle: node(id: $id) {\n    __typename\n    ...TypeTester_fontStyle\n    id\n  }\n  viewer {\n    ...TypeTester_viewer\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 SKUPrice_sku_2AMk59 on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku 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 TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  cssWeight\n  cssStyle\n  cssStretch\n  family {\n    name\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_viewer on Viewer {\n  families: fontCollections(collectionTypes: [FAMILY], first: 999) {\n    edges {\n      node {\n        id\n        name\n        fontStyles {\n          id\n          name\n          cssWeight\n          cssStyle\n          cssStretch\n        }\n      }\n    }\n  }\n}\n\nfragment TypeTester_fontStyle on FontStyle {\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku\n    ...SKUPrice_sku\n    id\n    basePrice: price {\n      amount\n    }\n  }\n  fontCollections {\n    sku {\n      ...SelectButton_sku\n      ...SKUPrice_sku\n      id\n      basePrice: price {\n        amount\n      }\n    }\n    id\n  }\n}\n\nfragment TypeTester_viewer on Viewer {\n  ...TypeTesterStyleSelectData_viewer\n}\n"
+      "text": "query TypeTester_StyleQuery(\n  $id: ID!\n) {\n  fontStyle: node(id: $id) {\n    __typename\n    ...TypeTester_fontStyle\n    id\n  }\n  viewer {\n    ...TypeTester_viewer\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 SKUPrice_sku_2AMk59 on Sku {\n  id\n  price(licenseOptions: []) {\n    amount\n    ...Price_price\n  }\n}\n\nfragment SelectButton_sku on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  cssWeight\n  cssStyle\n  cssStretch\n  family {\n    name\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_viewer on Viewer {\n  families: fontCollections(collectionTypes: [FAMILY], first: 999) {\n    edges {\n      node {\n        id\n        name\n        fontStyles {\n          id\n          name\n          cssWeight\n          cssStyle\n          cssStretch\n        }\n      }\n    }\n  }\n}\n\nfragment TypeTester_fontStyle on FontStyle {\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...useFeaturesData_fontStyle\n  family {\n    cssUrl\n    id\n  }\n  sku {\n    ...SelectButton_sku\n    ...SKUPrice_sku\n    id\n    basePrice: price {\n      amount\n    }\n  }\n  fontCollections {\n    sku {\n      ...SelectButton_sku\n      ...SKUPrice_sku\n      id\n      basePrice: price {\n        amount\n      }\n    }\n    id\n  }\n}\n\nfragment TypeTester_viewer on Viewer {\n  ...TypeTesterStyleSelectData_viewer\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
     }
   };
 }();

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

@@ -20,7 +20,7 @@ export declare type TypeTester_fontStyle = {
             readonly " $fragmentRefs": FragmentRefs<"SelectButton_sku" | "SKUPrice_sku">;
         } | null;
     } | null> | null;
-    readonly " $fragmentRefs": FragmentRefs<"TypeTesterFeatures_fontStyle" | "TypeTesterStyleSelectData_fontStyle" | "FontStyle_fontStyle">;
+    readonly " $fragmentRefs": FragmentRefs<"TypeTesterFeatures_fontStyle" | "TypeTesterStyleSelectData_fontStyle" | "FontStyle_fontStyle" | "useFeaturesData_fontStyle">;
     readonly " $refType": "TypeTester_fontStyle";
 };
 export declare type TypeTester_fontStyle$data = TypeTester_fontStyle;

package/dist/__generated__/TypeTester_fontStyle.graphql.js

@@ -94,12 +94,16 @@ const node = function () {
       "args": null,
       "kind": "FragmentSpread",
       "name": "FontStyle_fontStyle"
+    }, {
+      "args": null,
+      "kind": "FragmentSpread",
+      "name": "useFeaturesData_fontStyle"
     }],
     "type": "FontStyle",
     "abstractKey": null
   };
 }();
 
-node.hash = '0d5783f65fd4bf6f0840996214179fca';
+node.hash = 'e570d7809bdb60196f3190d2cf27ee0f';
 var _default = node;
 exports.default = _default;

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.js

@@ -49,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
@@ -147,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"
@@ -195,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,
@@ -218,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);

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;