fontdue-js 2.0.0-alpha8 → 2.0.0

package/dist/__generated__/TypeTestersIDQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<909be9f617c199ac4262b87a1802971b>>
+ * @generated SignedSource<<0c546bb85927f14769c29310a2287389>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -386,27 +386,6 @@ const node = function () {
                   "name": "fontStyle",
                   "plural": false,
                   "selections": [v8 /*: any*/, {
-                    "alias": null,
-                    "args": null,
-                    "concreteType": "VariableAxis",
-                    "kind": "LinkedField",
-                    "name": "variableAxes",
-                    "plural": true,
-                    "selections": [v13 /*: any*/, v9 /*: any*/, {
-                      "alias": null,
-                      "args": null,
-                      "kind": "ScalarField",
-                      "name": "minValue",
-                      "storageKey": null
-                    }, {
-                      "alias": null,
-                      "args": null,
-                      "kind": "ScalarField",
-                      "name": "maxValue",
-                      "storageKey": null
-                    }],
-                    "storageKey": null
-                  }, {
                     "alias": null,
                     "args": null,
                     "concreteType": "FontFeatures",
@@ -442,6 +421,27 @@ const node = function () {
                       "storageKey": null
                     }],
                     "storageKey": null
+                  }, {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "VariableAxis",
+                    "kind": "LinkedField",
+                    "name": "variableAxes",
+                    "plural": true,
+                    "selections": [v13 /*: any*/, v9 /*: any*/, {
+                      "alias": null,
+                      "args": null,
+                      "kind": "ScalarField",
+                      "name": "minValue",
+                      "storageKey": null
+                    }, {
+                      "alias": null,
+                      "args": null,
+                      "kind": "ScalarField",
+                      "name": "maxValue",
+                      "storageKey": null
+                    }],
+                    "storageKey": null
                   }, v9 /*: any*/, v10 /*: any*/, v11 /*: any*/, v12 /*: any*/, v16 /*: any*/, {
                     "alias": null,
                     "args": null,
@@ -537,12 +537,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "201b12566d89606ba3084b95513b48a8",
+      "cacheID": "d294f032d7303c90c749635091fef19e",
       "id": null,
       "metadata": {},
       "name": "TypeTestersIDQuery",
       "operationKind": "query",
-      "text": "query TypeTestersIDQuery(\n  $collectionId: ID!\n  $tags: [String!]\n  $excludeTags: [String!]\n) {\n  viewer {\n    ...TypeTesters_viewer\n    id\n  }\n  collection: node(id: $collectionId) {\n    __typename\n    ...TypeTesters_collection_4Goyz5\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\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 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 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 TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  cssWeight\n  cssStyle\n  cssStretch\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\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        isVariableFont\n        fontStyles {\n          id\n          name\n          cssWeight\n          cssStyle\n          cssStretch\n          variableInstances {\n            name\n            coordinates {\n              axis\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment TypeTester_fontStyle on FontStyle {\n  id\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 TypeTesters_collection_4Goyz5 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          ...TypeTester_fontStyle\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node\n  }\n  parent {\n    id\n  }\n}\n\nfragment TypeTesters_viewer on Viewer {\n  ...TypeTester_viewer\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  variableAxes {\n    axis\n    name\n    minValue\n    maxValue\n  }\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
+      "text": "query TypeTestersIDQuery(\n  $collectionId: ID!\n  $tags: [String!]\n  $excludeTags: [String!]\n) {\n  viewer {\n    ...TypeTesters_viewer\n    id\n  }\n  collection: node(id: $collectionId) {\n    __typename\n    ...TypeTesters_collection_4Goyz5\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\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 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 SelectButton_sku_2AMk59 on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeaturesButton_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n}\n\nfragment TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterToolbar_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  cssWeight\n  cssStyle\n  cssStretch\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\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        isVariableFont\n        fontStyles {\n          id\n          name\n          cssWeight\n          cssStyle\n          cssStretch\n          variableInstances {\n            name\n            coordinates {\n              axis\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment TypeTesterToolbar_fontStyle on FontStyle {\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterFeaturesButton_fontStyle\n}\n\nfragment TypeTesterVariableAxes_fontStyle on FontStyle {\n  variableAxes {\n    axis\n    name\n    minValue\n    maxValue\n  }\n}\n\nfragment TypeTester_fontStyle on FontStyle {\n  id\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterToolbar_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 TypeTesters_collection_4Goyz5 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          ...TypeTester_fontStyle\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node\n  }\n  parent {\n    id\n  }\n}\n\nfragment TypeTesters_viewer on Viewer {\n  ...TypeTester_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__/TypeTestersSlugQuery.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f5c5e5a1071171464fb637676ecd406a>>
+ * @generated SignedSource<<7aef54213b657464f66a2a82ace12b91>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/TypeTestersSlugQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<f5c5e5a1071171464fb637676ecd406a>>
+ * @generated SignedSource<<7aef54213b657464f66a2a82ace12b91>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -391,27 +391,6 @@ const node = function () {
                     "name": "fontStyle",
                     "plural": false,
                     "selections": [v8 /*: any*/, {
-                      "alias": null,
-                      "args": null,
-                      "concreteType": "VariableAxis",
-                      "kind": "LinkedField",
-                      "name": "variableAxes",
-                      "plural": true,
-                      "selections": [v13 /*: any*/, v9 /*: any*/, {
-                        "alias": null,
-                        "args": null,
-                        "kind": "ScalarField",
-                        "name": "minValue",
-                        "storageKey": null
-                      }, {
-                        "alias": null,
-                        "args": null,
-                        "kind": "ScalarField",
-                        "name": "maxValue",
-                        "storageKey": null
-                      }],
-                      "storageKey": null
-                    }, {
                       "alias": null,
                       "args": null,
                       "concreteType": "FontFeatures",
@@ -447,6 +426,27 @@ const node = function () {
                         "storageKey": null
                       }],
                       "storageKey": null
+                    }, {
+                      "alias": null,
+                      "args": null,
+                      "concreteType": "VariableAxis",
+                      "kind": "LinkedField",
+                      "name": "variableAxes",
+                      "plural": true,
+                      "selections": [v13 /*: any*/, v9 /*: any*/, {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "minValue",
+                        "storageKey": null
+                      }, {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "maxValue",
+                        "storageKey": null
+                      }],
+                      "storageKey": null
                     }, v9 /*: any*/, v10 /*: any*/, v11 /*: any*/, v12 /*: any*/, v16 /*: any*/, {
                       "alias": null,
                       "args": null,
@@ -545,12 +545,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "2cc2d650d7a66f47092453908a3b260e",
+      "cacheID": "b65ab81be6b235d7f4ed1389c70a66e0",
       "id": null,
       "metadata": {},
       "name": "TypeTestersSlugQuery",
       "operationKind": "query",
-      "text": "query TypeTestersSlugQuery(\n  $collectionSlug: String!\n  $tags: [String!]\n  $excludeTags: [String!]\n) {\n  viewer {\n    ...TypeTesters_viewer\n    slug(name: $collectionSlug) {\n      collection: fontCollection {\n        ...TypeTesters_collection_4Goyz5\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\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 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 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 TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  cssWeight\n  cssStyle\n  cssStretch\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\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        isVariableFont\n        fontStyles {\n          id\n          name\n          cssWeight\n          cssStyle\n          cssStretch\n          variableInstances {\n            name\n            coordinates {\n              axis\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment TypeTester_fontStyle on FontStyle {\n  id\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 TypeTesters_collection_4Goyz5 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          ...TypeTester_fontStyle\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node\n  }\n  parent {\n    id\n  }\n}\n\nfragment TypeTesters_viewer on Viewer {\n  ...TypeTester_viewer\n}\n\nfragment useFeaturesData_fontStyle on FontStyle {\n  variableAxes {\n    axis\n    name\n    minValue\n    maxValue\n  }\n  fontFeatures {\n    supportedFeatures\n    stylisticSetNames {\n      featureName\n      humanName\n    }\n  }\n}\n"
+      "text": "query TypeTestersSlugQuery(\n  $collectionSlug: String!\n  $tags: [String!]\n  $excludeTags: [String!]\n) {\n  viewer {\n    ...TypeTesters_viewer\n    slug(name: $collectionSlug) {\n      collection: fontCollection {\n        ...TypeTesters_collection_4Goyz5\n        id\n      }\n      id\n    }\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\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 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 SelectButton_sku_2AMk59 on Sku {\n  id\n  ...SKUPrice_sku_2AMk59\n}\n\nfragment TypeTesterFeaturesButton_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n}\n\nfragment TypeTesterFeatures_fontStyle on FontStyle {\n  ...useFeaturesData_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n}\n\nfragment TypeTesterFloatingToolbar_testers on TypeTester {\n  id\n  fontStyle {\n    ...TypeTesterToolbar_fontStyle\n    ...TypeTesterFeatures_fontStyle\n    id\n  }\n}\n\nfragment TypeTesterStyleSelectData_fontStyle on FontStyle {\n  id\n  name\n  cssWeight\n  cssStyle\n  cssStretch\n  variableInstances {\n    name\n    coordinates {\n      axis\n      value\n    }\n  }\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        isVariableFont\n        fontStyles {\n          id\n          name\n          cssWeight\n          cssStyle\n          cssStretch\n          variableInstances {\n            name\n            coordinates {\n              axis\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nfragment TypeTesterToolbar_fontStyle on FontStyle {\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterFeaturesButton_fontStyle\n}\n\nfragment TypeTesterVariableAxes_fontStyle on FontStyle {\n  variableAxes {\n    axis\n    name\n    minValue\n    maxValue\n  }\n}\n\nfragment TypeTester_fontStyle on FontStyle {\n  id\n  ...TypeTesterFeatures_fontStyle\n  ...TypeTesterStyleSelectData_fontStyle\n  ...FontStyle_fontStyle\n  ...TypeTesterVariableAxes_fontStyle\n  ...TypeTesterToolbar_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 TypeTesters_collection_4Goyz5 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          ...TypeTester_fontStyle\n          id\n          family {\n            id\n          }\n        }\n        variableSettings {\n          axis\n          value\n        }\n        featureSettings {\n          feature\n          value\n        }\n        ...TypeTesterFloatingToolbar_testers\n      }\n    }\n  }\n  typeTesterFeatures\n  typeTesterAxes\n  id\n  ...PriceBar_node\n  families: children(collectionTypes: [FAMILY]) {\n    id\n    ...PriceBar_node\n  }\n  parent {\n    id\n  }\n}\n\nfragment TypeTesters_viewer on Viewer {\n  ...TypeTester_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__/useFeaturesData_fontStyle.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<7d4999e57a7c997c4cbcbf4ed36e6c04>>
+ * @generated SignedSource<<9312afbe2cf53f2aa12bf530c59225e0>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -13,12 +13,6 @@ export type useFeaturesData_fontStyle$data = {
         }>;
         readonly supportedFeatures: ReadonlyArray<string>;
     };
-    readonly variableAxes: ReadonlyArray<{
-        readonly axis: string;
-        readonly maxValue: number;
-        readonly minValue: number;
-        readonly name: string;
-    }> | null;
     readonly " $fragmentType": "useFeaturesData_fontStyle";
 };
 export type useFeaturesData_fontStyle$key = {

package/dist/__generated__/useFeaturesData_fontStyle.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<7d4999e57a7c997c4cbcbf4ed36e6c04>>
+ * @generated SignedSource<<9312afbe2cf53f2aa12bf530c59225e0>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -20,39 +20,6 @@ const node = {
   "metadata": null,
   "name": "useFeaturesData_fontStyle",
   "selections": [{
-    "alias": null,
-    "args": null,
-    "concreteType": "VariableAxis",
-    "kind": "LinkedField",
-    "name": "variableAxes",
-    "plural": true,
-    "selections": [{
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "axis",
-      "storageKey": null
-    }, {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "name",
-      "storageKey": null
-    }, {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "minValue",
-      "storageKey": null
-    }, {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "maxValue",
-      "storageKey": null
-    }],
-    "storageKey": null
-  }, {
     "alias": null,
     "args": null,
     "concreteType": "FontFeatures",
@@ -92,6 +59,6 @@ const node = {
   "type": "FontStyle",
   "abstractKey": null
 };
-node.hash = "f698c938cad6a351aaba65d33ce650d2";
+node.hash = "3c48a87b1b19f52e3dda10fc11f0030a";
 var _default = node;
 exports.default = _default;

package/dist/components/ConfigContext.d.ts

@@ -36,6 +36,7 @@ export declare const makeConfig: (config?: Config) => {
             }[] | undefined;
             selectionStyle: "checkbox" | "bullet";
         };
+        variableAxesPosition: import("./TypeTester/types").TypeTesterAxesPosition;
         alignmentButtons: boolean;
         initialAlignment: import("./TypeTester/types").Alignment;
         size: {
@@ -85,6 +86,7 @@ declare const _default: React.Context<{
             }[] | undefined;
             selectionStyle: "checkbox" | "bullet";
         };
+        variableAxesPosition: import("./TypeTester/types").TypeTesterAxesPosition;
         alignmentButtons: boolean;
         initialAlignment: import("./TypeTester/types").Alignment;
         size: {

package/dist/components/ConfigContext.js

@@ -32,6 +32,7 @@ const makeTypeTesterConfig = config => {
       columns: config === null || config === void 0 ? void 0 : (_config$openTypeFeatu2 = config.openTypeFeatures) === null || _config$openTypeFeatu2 === void 0 ? void 0 : _config$openTypeFeatu2.columns,
       selectionStyle: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu3 = config.openTypeFeatures) === null || _config$openTypeFeatu3 === void 0 ? void 0 : _config$openTypeFeatu3.selectionStyle) ?? 'bullet'
     },
+    variableAxesPosition: (config === null || config === void 0 ? void 0 : config.variableAxesPosition) ?? 'auto',
     alignmentButtons: (config === null || config === void 0 ? void 0 : config.alignmentButtons) ?? false,
     initialAlignment: (config === null || config === void 0 ? void 0 : config.initialAlignment) ?? 'left',
     size: {

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

@@ -6,5 +6,5 @@ interface TypeTesterFeatures_props {
     features: ReadonlyArray<string> | null;
     axes: ReadonlyArray<string> | null | undefined;
 }
-export default function TypeTesterFeatures({ id, fontStyle: fontStyleKey, features: showFeatures, axes: showAxes, }: TypeTesterFeatures_props): React.JSX.Element;
+export default function TypeTesterFeatures({ id, fontStyle: fontStyleKey, features: showFeatures, axes, }: TypeTesterFeatures_props): React.JSX.Element;
 export {};

package/dist/components/TypeTester/TypeTesterFeatures.js

@@ -58,9 +58,9 @@ function TypeTesterFeatures(_ref) {
     id,
     fontStyle: fontStyleKey,
     features: showFeatures,
-    axes: showAxes
+    axes
   } = _ref;
-  const fontStyle = (0, _reactRelay.useFragment)(_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), fontStyleKey);
+  const fontStyle = (0, _reactRelay.useFragment)(_TypeTesterFeatures_fontStyle !== void 0 ? _TypeTesterFeatures_fontStyle : (_TypeTesterFeatures_fontStyle = require("../../__generated__/TypeTesterFeatures_fontStyle.graphql"), _TypeTesterFeatures_fontStyle.hash && _TypeTesterFeatures_fontStyle.hash !== "d0c693dadaa9ae68f5295f3fc69a7578" && 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), fontStyleKey);
   const {
     typeTester: config
   } = (0, _react.useContext)(_ConfigContext.default);
@@ -73,7 +73,6 @@ function TypeTesterFeatures(_ref) {
   });
   const selectionStyle = config.openTypeFeatures.selectionStyle;
   const {
-    variableAxes,
     featureNames,
     fontFeatures
   } = (0, _useFeaturesData.default)({
@@ -126,15 +125,11 @@ function TypeTesterFeatures(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: featuresContentRef
-  }, /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
+  }, axes ? /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
     id: id,
-    axes: variableAxes === null || variableAxes === void 0 ? void 0 : variableAxes.filter(_ref2 => {
-      let {
-        axis
-      } = _ref2;
-      return showAxes === null || showAxes === void 0 ? void 0 : showAxes.includes(axis);
-    })
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    axes: axes,
+    fontStyle: fontStyle
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__features",
     "data-selection-style": selectionStyle,
     "data-columns": (_config$openTypeFeatu3 = config.openTypeFeatures) !== null && _config$openTypeFeatu3 !== void 0 && (_config$openTypeFeatu4 = _config$openTypeFeatu3.columns) !== null && _config$openTypeFeatu4 !== void 0 && _config$openTypeFeatu4.length ? 'set' : 'auto'

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql';
+import { TypeTesterFeaturesButton_fontStyle$key } from '__generated__/TypeTesterFeaturesButton_fontStyle.graphql';
 interface TypeTesterFeaturesButton_props {
     id: string;
-    fontStyle: useFeaturesData_fontStyle$key;
+    fontStyle: TypeTesterFeaturesButton_fontStyle$key;
     onNeedsRefocus?: () => void;
     features: readonly string[] | null | undefined;
 }

package/dist/components/TypeTester/TypeTesterFeaturesButton.js

@@ -11,13 +11,15 @@ var _CarrotUp = _interopRequireDefault(require("../Icons/CarrotUp"));
 var _Select = _interopRequireDefault(require("../Select"));
 var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
 var _useFeaturesData = _interopRequireDefault(require("./useFeaturesData"));
+var _reactRelay = require("react-relay");
+var _TypeTesterFeaturesButton_fontStyle;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 TypeTesterFeaturesButton = _ref => {
   let {
     id,
-    fontStyle,
+    fontStyle: fontStyleKey,
     onNeedsRefocus,
     features: showFeatures
   } = _ref;
@@ -33,6 +35,7 @@ const TypeTesterFeaturesButton = _ref => {
     id
   });
   const selectedFeature = features[0];
+  const fontStyle = (0, _reactRelay.useFragment)(_TypeTesterFeaturesButton_fontStyle !== void 0 ? _TypeTesterFeaturesButton_fontStyle : (_TypeTesterFeaturesButton_fontStyle = require("../../__generated__/TypeTesterFeaturesButton_fontStyle.graphql"), _TypeTesterFeaturesButton_fontStyle.hash && _TypeTesterFeaturesButton_fontStyle.hash !== "bfda99c867db0b614314fc774911c4b0" && console.error("The definition of 'TypeTesterFeaturesButton_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeaturesButton_fontStyle), fontStyleKey);
   const {
     featureNames
   } = (0, _useFeaturesData.default)({

package/dist/components/TypeTester/TypeTesterFloatingToolbar.js

@@ -9,6 +9,7 @@ var _reactRelay = require("react-relay");
 var _TypeTesterContext = require("./TypeTesterContext");
 var _TypeTesterFeatures = _interopRequireDefault(require("./TypeTesterFeatures"));
 var _TypeTesterToolbar = _interopRequireDefault(require("./TypeTesterToolbar"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 var _TypeTesterFloatingToolbar_testers;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -21,7 +22,7 @@ function TypeTesterFloatingToolbar(_ref) {
     axes,
     onToolbarOpenClose
   } = _ref;
-  const testersData = (0, _reactRelay.useFragment)(_TypeTesterFloatingToolbar_testers !== void 0 ? _TypeTesterFloatingToolbar_testers : (_TypeTesterFloatingToolbar_testers = require("../../__generated__/TypeTesterFloatingToolbar_testers.graphql"), _TypeTesterFloatingToolbar_testers.hash && _TypeTesterFloatingToolbar_testers.hash !== "3b87269ef35fe6c6cfabcc7a2e330a3c" && console.error("The definition of 'TypeTesterFloatingToolbar_testers' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFloatingToolbar_testers), testersKey);
+  const testersData = (0, _reactRelay.useFragment)(_TypeTesterFloatingToolbar_testers !== void 0 ? _TypeTesterFloatingToolbar_testers : (_TypeTesterFloatingToolbar_testers = require("../../__generated__/TypeTesterFloatingToolbar_testers.graphql"), _TypeTesterFloatingToolbar_testers.hash && _TypeTesterFloatingToolbar_testers.hash !== "5f037fca9e02cba8c202f17e08ff8db6" && console.error("The definition of 'TypeTesterFloatingToolbar_testers' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFloatingToolbar_testers), testersKey);
   const {
     testers
   } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
@@ -57,7 +58,11 @@ function TypeTesterFloatingToolbar(_ref) {
   (0, _react.useEffect)(() => {
     onToolbarOpenClose === null || onToolbarOpenClose === void 0 ? void 0 : onToolbarOpenClose(open);
   }, [onToolbarOpenClose, open]);
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
   const fontStyle = (_testersData$find = testersData.find(tester => tester.id === activeId)) === null || _testersData$find === void 0 ? void 0 : _testersData$find.fontStyle;
+  const axesPosition = config.variableAxesPosition === 'auto' ? ((axes === null || axes === void 0 ? void 0 : axes.length) ?? 0) > 1 ? 'features-panel' : 'inline' : config.variableAxesPosition;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__floating-toolbar",
     onMouseDown: e => e.preventDefault(),
@@ -66,6 +71,7 @@ function TypeTesterFloatingToolbar(_ref) {
     id: activeId,
     features: features,
     axes: axes,
+    axesPosition: axesPosition,
     fontStyle: fontStyle
   }), features && /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, {
     id: activeId,

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql';
+import { TypeTesterAxesPosition } from './types';
+import { TypeTesterToolbar_fontStyle$key } from '__generated__/TypeTesterToolbar_fontStyle.graphql';
 interface TypeTesterToolbar_props {
     id: string;
     features?: ReadonlyArray<string> | null;
     axes?: ReadonlyArray<string> | null;
-    fontStyle: useFeaturesData_fontStyle$key;
+    axesPosition: TypeTesterAxesPosition;
+    fontStyle: TypeTesterToolbar_fontStyle$key;
     onNeedsRefocus?: () => void;
     groupEdit?: boolean;
 }

package/dist/components/TypeTester/TypeTesterToolbar.js

@@ -12,6 +12,9 @@ var _TypeTesterInput = _interopRequireDefault(require("./TypeTesterInput"));
 var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
 var _TypeTesterAlignButtons = _interopRequireDefault(require("./TypeTesterAlignButtons"));
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _TypeTesterVariableAxes = _interopRequireDefault(require("./TypeTesterVariableAxes"));
+var _reactRelay = require("react-relay");
+var _TypeTesterToolbar_fontStyle;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -20,7 +23,8 @@ const TypeTesterToolbar = _ref => {
     id,
     features,
     axes,
-    fontStyle,
+    axesPosition,
+    fontStyle: fontStyleKey,
     onNeedsRefocus,
     groupEdit
   } = _ref;
@@ -30,6 +34,7 @@ const TypeTesterToolbar = _ref => {
   const props = (0, _TypeTesterState.default)({
     id
   });
+  const fontStyle = (0, _reactRelay.useFragment)(_TypeTesterToolbar_fontStyle !== void 0 ? _TypeTesterToolbar_fontStyle : (_TypeTesterToolbar_fontStyle = require("../../__generated__/TypeTesterToolbar_fontStyle.graphql"), _TypeTesterToolbar_fontStyle.hash && _TypeTesterToolbar_fontStyle.hash !== "1a0f844cbe51f96ed0145d8009f8bff0" && console.error("The definition of 'TypeTesterToolbar_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterToolbar_fontStyle), fontStyleKey);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__toolbar__tools",
     onMouseDown: e => e.preventDefault()
@@ -60,7 +65,11 @@ const TypeTesterToolbar = _ref => {
     onChange: props.setLineHeight,
     stepSize: 0.01,
     interpolator: "log10"
-  }))), (Boolean(features === null || features === void 0 ? void 0 : features.length) || Boolean(axes === null || axes === void 0 ? void 0 : axes.length)) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeaturesButton.default, {
+  }))), axesPosition === 'inline' && /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
+    id: id,
+    fontStyle: fontStyle,
+    axes: axes
+  }), (Boolean(features === null || features === void 0 ? void 0 : features.length) || Boolean(axes === null || axes === void 0 ? void 0 : axes.length) && axesPosition === 'features-panel') && /*#__PURE__*/_react.default.createElement(_TypeTesterFeaturesButton.default, {
     id: id,
     fontStyle: fontStyle,
     onNeedsRefocus: onNeedsRefocus,

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

@@ -1,12 +1,9 @@
 import React from 'react';
+import { TypeTesterVariableAxes_fontStyle$key } from '__generated__/TypeTesterVariableAxes_fontStyle.graphql';
 interface TypeTesterVariableAxes_props {
     id: string;
-    axes: ReadonlyArray<{
-        axis: string;
-        name: string;
-        minValue: number;
-        maxValue: number;
-    }> | null | undefined;
+    fontStyle: TypeTesterVariableAxes_fontStyle$key;
+    axes: readonly string[] | null | undefined;
 }
 declare const TypeTesterVariableAxes: React.FC<TypeTesterVariableAxes_props>;
 export default TypeTesterVariableAxes;

package/dist/components/TypeTester/TypeTesterVariableAxes.js

@@ -7,10 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TypeTesterSlider = _interopRequireDefault(require("./TypeTesterSlider"));
 var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
+var _reactRelay = require("react-relay");
+var _utils = require("../../utils");
+var _TypeTesterVariableAxes_fontStyle;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const TypeTesterVariableAxes = _ref => {
   let {
     id,
+    fontStyle: fontStyleKey,
     axes
   } = _ref;
   const {
@@ -19,6 +23,7 @@ const TypeTesterVariableAxes = _ref => {
   } = (0, _TypeTesterState.default)({
     id
   });
+  const fontStyle = (0, _reactRelay.useFragment)(_TypeTesterVariableAxes_fontStyle !== void 0 ? _TypeTesterVariableAxes_fontStyle : (_TypeTesterVariableAxes_fontStyle = require("../../__generated__/TypeTesterVariableAxes_fontStyle.graphql"), _TypeTesterVariableAxes_fontStyle.hash && _TypeTesterVariableAxes_fontStyle.hash !== "a73e45dbb7a154107456088125a01f88" && console.error("The definition of 'TypeTesterVariableAxes_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterVariableAxes_fontStyle), fontStyleKey);
   if (!variableSettings) return null;
   if (!axes) return null;
   const handleChange = (axis, value) => {
@@ -27,13 +32,21 @@ const TypeTesterVariableAxes = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__variable-axes"
-  }, axes.map(_ref2 => {
+  }, axes.map(showAxis => {
+    var _fontStyle$variableAx;
+    return (_fontStyle$variableAx = fontStyle.variableAxes) === null || _fontStyle$variableAx === void 0 ? void 0 : _fontStyle$variableAx.find(_ref2 => {
+      let {
+        axis
+      } = _ref2;
+      return axis === showAxis;
+    });
+  }).filter(_utils.notEmpty).map(_ref3 => {
     let {
       axis,
       name,
       minValue,
       maxValue
-    } = _ref2;
+    } = _ref3;
     const isSmall = Math.abs(maxValue - minValue) <= 1;
     const value = variableSettings[axis];
     return /*#__PURE__*/_react.default.createElement("div", {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TypeTester_viewer$key } from '../../__generated__/TypeTester_viewer.graphql';
 import { TypeTester_fontStyle$key } from '../../__generated__/TypeTester_fontStyle.graphql';
-import { Alignment, Direction } from './types';
+import { Alignment, Direction, TypeTesterAxesPosition } from './types';
 export interface TypeTesterConfig {
     min?: number;
     max?: number;
@@ -31,6 +31,7 @@ export interface TypeTesterConfig {
         }[];
         selectionStyle?: 'bullet' | 'checkbox';
     };
+    variableAxesPosition?: TypeTesterAxesPosition;
     alignmentButtons?: boolean;
     initialAlignment?: Alignment;
     size?: {

package/dist/components/TypeTester/index.js

@@ -18,6 +18,7 @@ var _TypeTesterFeatures = _interopRequireDefault(require("./TypeTesterFeatures")
 var _TypeTesterContent = _interopRequireDefault(require("./TypeTesterContent"));
 var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
 var _TypeTesterToolbar = _interopRequireDefault(require("./TypeTesterToolbar"));
+var _TypeTesterVariableAxes = _interopRequireDefault(require("./TypeTesterVariableAxes"));
 var _TypeTester_fontStyle, _TypeTester_viewer, _TypeTester_NewStyleQuery, _TypeTester_sku;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -53,7 +54,7 @@ const TypeTester = _ref => {
     axes,
     groupEdit
   } = _ref;
-  const fontStyleData = (0, _reactRelay.useFragment)(_TypeTester_fontStyle !== void 0 ? _TypeTester_fontStyle : (_TypeTester_fontStyle = require("../../__generated__/TypeTester_fontStyle.graphql"), _TypeTester_fontStyle.hash && _TypeTester_fontStyle.hash !== "96336f74661d90c44c9a83479fa8c263" && console.error("The definition of 'TypeTester_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_fontStyle), fontStyleKey);
+  const fontStyleData = (0, _reactRelay.useFragment)(_TypeTester_fontStyle !== void 0 ? _TypeTester_fontStyle : (_TypeTester_fontStyle = require("../../__generated__/TypeTester_fontStyle.graphql"), _TypeTester_fontStyle.hash && _TypeTester_fontStyle.hash !== "e05fd846d7bcc3733b7afeb36403a7ef" && console.error("The definition of 'TypeTester_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_fontStyle), fontStyleKey);
   const viewer = (0, _reactRelay.useFragment)(_TypeTester_viewer !== void 0 ? _TypeTester_viewer : (_TypeTester_viewer = require("../../__generated__/TypeTester_viewer.graphql"), _TypeTester_viewer.hash && _TypeTester_viewer.hash !== "a12af7126d512a50ab0b7e5e14a7d8eb" && console.error("The definition of 'TypeTester_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_viewer), viewerKey);
   const [selectedFontStyleId, setSelectedFontStyleId] = (0, _react.useState)((fontStyleData === null || fontStyleData === void 0 ? void 0 : fontStyleData.id) ?? null);
   const [fontStyle, setFontStyle] = (0, _react.useState)(fontStyleData);
@@ -79,6 +80,7 @@ const TypeTester = _ref => {
   let {
     typeTester: config
   } = (0, _react.useContext)(_ConfigContext.default);
+  const axesPosition = config.variableAxesPosition === 'auto' ? ((axes === null || axes === void 0 ? void 0 : axes.length) ?? 0) > 1 ? 'features-panel' : 'inline' : config.variableAxesPosition;
   const props = (0, _TypeTesterState.default)({
     id
   });
@@ -109,7 +111,11 @@ const TypeTester = _ref => {
     "data-shy": config.shy,
     "data-select-button-style": config.selectButtonStyle,
     "data-alignment": props.alignment
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, axesPosition === 'above' ? /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
+    id: id,
+    axes: axes,
+    fontStyle: fontStyle
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__toolbar"
   }, /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelectData.default, {
     fontStyle: fontStyle,
@@ -129,7 +135,7 @@ const TypeTester = _ref => {
       props.setFeaturesOpen(true);
     },
     config: config,
-    includeVariableAxesOption: Boolean(axes === null || axes === void 0 ? void 0 : axes.length)
+    includeVariableAxesOption: Boolean(axes === null || axes === void 0 ? void 0 : axes.length) && axesPosition === 'features-panel'
   }), config.priceText && fontStyle.sku && /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__toolbar__price-text",
     onMouseDown: e => e.preventDefault()
@@ -139,6 +145,7 @@ const TypeTester = _ref => {
     id: id,
     features: features,
     axes: axes,
+    axesPosition: axesPosition,
     fontStyle: fontStyle,
     onNeedsRefocus: onNeedsRefocus,
     groupEdit: groupEdit
@@ -163,7 +170,7 @@ const TypeTester = _ref => {
     id: id,
     fontStyle: fontStyle,
     features: features ?? null,
-    axes: axes ?? null
+    axes: axesPosition === 'features-panel' ? axes ?? null : null
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__text"
   }, /*#__PURE__*/_react.default.createElement(_FontStyle.default, {