fontdue-js 2.22.4 → 3.0.0-alpha2

package/dist/components/TypeTester/TypeTesterState.js

@@ -1,23 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _TypeTesterContext = require("./TypeTesterContext");
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { useContext } from 'react';
+import { TypeTesterContext } from './TypeTesterContext.js';
+import ConfigContext from '../ConfigContext.js';
 const useTypeTesterState = _ref => {
   let {
     id
   } = _ref;
-  const config = (0, _react.useContext)(_ConfigContext.default);
+  const config = useContext(ConfigContext);
   const {
     testers,
     globalFeaturesOpen,
     dispatch
-  } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
+  } = useContext(TypeTesterContext);
   const toolsPosition = config.typeTester.toolsPosition;
   const {
     content,
@@ -130,5 +123,4 @@ const useTypeTesterState = _ref => {
     direction
   };
 };
-var _default = useTypeTesterState;
-exports.default = _default;
+export default useTypeTesterState;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VariableInstance, VariableSettings } from '../../utils';
+import { VariableInstance, VariableSettings } from '../../utils.js';
 interface TypeTesterStyleSelectProps {
     families: {
         id: string;

package/dist/components/TypeTester/TypeTesterStyleSelect.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _utils = require("../../utils");
-var _Select = _interopRequireDefault(require("../Select"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import React from 'react';
+import { compareVariableSettings, variableInstanceSettings } from '../../utils.js';
+import Select from '../Select/index.js';
 const VARIABLE_AXES = 'VARIABLE_AXES';
 const TypeTesterStyleSelect = _ref => {
   var _selectedFamily$fontS7;
@@ -40,7 +33,7 @@ const TypeTesterStyleSelect = _ref => {
       const [fontStyleId, instanceName] = selection.split(':::');
       const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS = selectedFamily.fontStyles) === null || _selectedFamily$fontS === void 0 ? void 0 : (_selectedFamily$fontS2 = _selectedFamily$fontS.find(style => style.id === fontStyleId)) === null || _selectedFamily$fontS2 === void 0 ? void 0 : (_selectedFamily$fontS3 = _selectedFamily$fontS2.variableInstances) === null || _selectedFamily$fontS3 === void 0 ? void 0 : _selectedFamily$fontS3.find(instance => instance.name === instanceName);
       let variableSettings;
-      if (instance) variableSettings = (0, _utils.variableInstanceSettings)(instance);
+      if (instance) variableSettings = variableInstanceSettings(instance);
       onSelectFontStyleValue({
         fontStyleId,
         variableSettings
@@ -55,7 +48,7 @@ const TypeTesterStyleSelect = _ref => {
   let value = selectedFontStyleId;
   if (selectedVariableSettings) {
     var _selectedFamily$fontS4, _selectedFamily$fontS5, _selectedFamily$fontS6;
-    const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS4 = selectedFamily.fontStyles) === null || _selectedFamily$fontS4 === void 0 ? void 0 : (_selectedFamily$fontS5 = _selectedFamily$fontS4.find(style => style.id === value)) === null || _selectedFamily$fontS5 === void 0 ? void 0 : (_selectedFamily$fontS6 = _selectedFamily$fontS5.variableInstances) === null || _selectedFamily$fontS6 === void 0 ? void 0 : _selectedFamily$fontS6.find(instance => (0, _utils.compareVariableSettings)(instance, selectedVariableSettings));
+    const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS4 = selectedFamily.fontStyles) === null || _selectedFamily$fontS4 === void 0 ? void 0 : (_selectedFamily$fontS5 = _selectedFamily$fontS4.find(style => style.id === value)) === null || _selectedFamily$fontS5 === void 0 ? void 0 : (_selectedFamily$fontS6 = _selectedFamily$fontS5.variableInstances) === null || _selectedFamily$fontS6 === void 0 ? void 0 : _selectedFamily$fontS6.find(instance => compareVariableSettings(instance, selectedVariableSettings));
     if (instance) {
       value = `${value}:::${instance.name}`;
     } else {
@@ -87,9 +80,9 @@ const TypeTesterStyleSelect = _ref => {
       text: 'Variable axes...'
     });
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "type-tester-select"
-  }, /*#__PURE__*/_react.default.createElement(_Select.default, {
+  }, /*#__PURE__*/React.createElement(Select, {
     options: families.map(_ref5 => {
       let {
         id,
@@ -103,7 +96,7 @@ const TypeTesterStyleSelect = _ref => {
     value: selectedFamily.id,
     onChange: e => onSelectFamilyId(e.target.value),
     onClick: e => e.stopPropagation()
-  }), options && /*#__PURE__*/_react.default.createElement(_Select.default, {
+  }), options && /*#__PURE__*/React.createElement(Select, {
     options: options,
     value: value,
     nullText: "Custom",
@@ -111,5 +104,4 @@ const TypeTesterStyleSelect = _ref => {
     onClick: e => e.stopPropagation()
   }));
 };
-var _default = TypeTesterStyleSelect;
-exports.default = _default;
+export default TypeTesterStyleSelect;

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { VariableSettings } from '../../utils';
-import { TypeTesterStyleSelectData_fontStyle$key } from '../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql';
-import { TypeTesterStyleSelectData_viewer$key } from '../../__generated__/TypeTesterStyleSelectData_viewer.graphql';
-import { TypeTesterConfig } from '.';
+import { VariableSettings } from '../../utils.js';
+import { TypeTesterStyleSelectData_fontStyle$key } from '../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql.js';
+import { TypeTesterStyleSelectData_viewer$key } from '../../__generated__/TypeTesterStyleSelectData_viewer.graphql.js';
+import { TypeTesterConfig } from './index.js';
 interface TypeTesterStyleSelectDataProps {
     fontStyle: TypeTesterStyleSelectData_fontStyle$key;
     viewer: TypeTesterStyleSelectData_viewer$key | null;

package/dist/components/TypeTester/TypeTesterStyleSelectData.js

@@ -1,21 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = TypeTesterStyleSelectData;
-var _TypeTesterStyleSelectData_viewer2 = _interopRequireDefault(require("../../__generated__/TypeTesterStyleSelectData_viewer.graphql"));
-var _TypeTesterStyleSelectData_fontStyle2 = _interopRequireDefault(require("../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql"));
-var _TypeTesterStyleSelectData_fontStyleData2 = _interopRequireDefault(require("../../__generated__/TypeTesterStyleSelectData_fontStyleData.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _utils = require("../../utils");
-var _TypeTesterStyleSelect = _interopRequireDefault(require("./TypeTesterStyleSelect"));
-var _relayRuntime = require("relay-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-_TypeTesterStyleSelectData_fontStyleData2.default.hash && _TypeTesterStyleSelectData_fontStyleData2.default.hash !== "fb09207ccab08c7e73677486469a3c95" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyleData' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyleData2.default;
+import _TypeTesterStyleSelectData_viewer from "../../__generated__/TypeTesterStyleSelectData_viewer.graphql.js";
+import _TypeTesterStyleSelectData_fontStyle from "../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql.js";
+import _TypeTesterStyleSelectData_fontStyleData from "../../__generated__/TypeTesterStyleSelectData_fontStyleData.graphql.js";
+import React, { useCallback } from 'react';
+import { useFragment } from 'react-relay';
+import { compareVariableSettings, notEmpty, variableInstanceSettings } from '../../utils.js';
+import TypeTesterStyleSelect from './TypeTesterStyleSelect.js';
+import { graphql } from 'relay-runtime';
+_TypeTesterStyleSelectData_fontStyleData.hash && _TypeTesterStyleSelectData_fontStyleData.hash !== "fb09207ccab08c7e73677486469a3c95" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyleData' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyleData;
 
 // get a score for similarity between two styles
 // 0 < n <= 1
@@ -37,7 +28,7 @@ const computeSimilarity = (left, right) => {
   const stretchSimilarity = left.cssStretch === right.cssStretch ? 1 : 0.9;
   return weightSimilarity * styleSimilarity * stretchSimilarity;
 };
-function TypeTesterStyleSelectData(_ref) {
+export default function TypeTesterStyleSelectData(_ref) {
   var _viewer$families, _viewer$families$edge, _fontStyle$variableIn;
   let {
     fontStyle: fontStyleKey,
@@ -48,9 +39,9 @@ function TypeTesterStyleSelectData(_ref) {
     variableSettings,
     includeVariableAxesOption
   } = _ref;
-  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_fontStyle2.default.hash && _TypeTesterStyleSelectData_fontStyle2.default.hash !== "187778816a910be9ab709431d1d818b3" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyle2.default), fontStyleKey);
-  const viewer = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_viewer2.default.hash && _TypeTesterStyleSelectData_viewer2.default.hash !== "5e5834d9202f90bdde5a0a7db49e8639" && console.error("The definition of 'TypeTesterStyleSelectData_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_viewer2.default), viewerKey);
-  const familyData = viewer === null || viewer === void 0 ? void 0 : (_viewer$families = viewer.families) === null || _viewer$families === void 0 ? void 0 : (_viewer$families$edge = _viewer$families.edges) === null || _viewer$families$edge === void 0 ? void 0 : _viewer$families$edge.map(edge => edge.node).filter(_utils.notEmpty).filter(family => {
+  const fontStyle = useFragment((_TypeTesterStyleSelectData_fontStyle.hash && _TypeTesterStyleSelectData_fontStyle.hash !== "187778816a910be9ab709431d1d818b3" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyle), fontStyleKey);
+  const viewer = useFragment((_TypeTesterStyleSelectData_viewer.hash && _TypeTesterStyleSelectData_viewer.hash !== "5e5834d9202f90bdde5a0a7db49e8639" && console.error("The definition of 'TypeTesterStyleSelectData_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_viewer), viewerKey);
+  const familyData = viewer === null || viewer === void 0 ? void 0 : (_viewer$families = viewer.families) === null || _viewer$families === void 0 ? void 0 : (_viewer$families$edge = _viewer$families.edges) === null || _viewer$families$edge === void 0 ? void 0 : _viewer$families$edge.map(edge => edge.node).filter(notEmpty).filter(family => {
     var _family$featureStyle, _family$featureStyle$;
     return (// make sure the family options' supportedLanguages intersect with the current selection's supportedLanuages.
       // e.g. if the current font style only supports 'ar', only show families that include 'ar'
@@ -60,7 +51,7 @@ function TypeTesterStyleSelectData(_ref) {
       })
     );
   });
-  const handleSelectFamilyId = (0, _react.useCallback)(id => {
+  const handleSelectFamilyId = useCallback(id => {
     const family = familyData && familyData.find(family => family.id === id);
     if (!family) return;
     let fontStyleId = fontStyle.id;
@@ -73,7 +64,7 @@ function TypeTesterStyleSelectData(_ref) {
         fontStyleId = newFontStyle.id;
         const instance = (_newFontStyle$variabl = newFontStyle.variableInstances) === null || _newFontStyle$variabl === void 0 ? void 0 : _newFontStyle$variabl[0];
         if (instance) {
-          variableSettings = (0, _utils.variableInstanceSettings)(instance);
+          variableSettings = variableInstanceSettings(instance);
         }
       }
     } else {
@@ -83,7 +74,7 @@ function TypeTesterStyleSelectData(_ref) {
           id: right.id,
           similarity: computeSimilarity(fontStyle, right)
         };
-      }).filter(_utils.notEmpty)) || [];
+      }).filter(notEmpty)) || [];
       fontStyleId = styleWeightDifferences.reduce((closest, current) => {
         if (current.similarity > closest.similarity) return current;
         return closest;
@@ -94,8 +85,8 @@ function TypeTesterStyleSelectData(_ref) {
       variableSettings
     });
   }, [familyData, fontStyle]);
-  const instance = variableSettings ? (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(instance => (0, _utils.compareVariableSettings)(instance, variableSettings)) : null;
-  return config.selectable && familyData ? /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelect.default, {
+  const instance = variableSettings ? (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(instance => compareVariableSettings(instance, variableSettings)) : null;
+  return config.selectable && familyData ? /*#__PURE__*/React.createElement(TypeTesterStyleSelect, {
     families: familyData,
     selectedFontStyleId: fontStyle.id,
     onSelectFontStyleValue: onSelectFontStyleValue,
@@ -103,11 +94,11 @@ function TypeTesterStyleSelectData(_ref) {
     onSelectFamilyId: handleSelectFamilyId,
     selectedVariableSettings: variableSettings,
     includeVariableAxesOption: includeVariableAxesOption
-  }) : fontStyle.family && /*#__PURE__*/_react.default.createElement("div", {
+  }) : fontStyle.family && /*#__PURE__*/React.createElement("div", {
     className: "type-tester__name"
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "type-tester__name__family"
-  }, fontStyle.family.name), ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }, fontStyle.family.name), ' ', /*#__PURE__*/React.createElement("span", {
     className: "type-tester__name__style"
   }, variableSettings ? (instance === null || instance === void 0 ? void 0 : instance.name) ?? 'Custom' : fontStyle.name.replace(/ /g, '\xa0')));
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TypeTesterAxesPosition } from './types';
-import { TypeTesterToolbar_fontStyle$key } from '__generated__/TypeTesterToolbar_fontStyle.graphql';
+import { TypeTesterAxesPosition } from './types.js';
+import { TypeTesterToolbar_fontStyle$key } from '__generated__/TypeTesterToolbar_fontStyle.graphql.js';
 interface TypeTesterToolbar_props {
     id: string;
     features?: ReadonlyArray<string> | null;

package/dist/components/TypeTester/TypeTesterToolbar.js

@@ -1,23 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _TypeTesterToolbar_fontStyle2 = _interopRequireDefault(require("../../__generated__/TypeTesterToolbar_fontStyle.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _TypeTesterFeaturesButton = _interopRequireDefault(require("./TypeTesterFeaturesButton"));
-var _TypeTesterEditAll = _interopRequireDefault(require("./TypeTesterEditAll"));
-var _TypeTesterSlider = _interopRequireDefault(require("./TypeTesterSlider"));
-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");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _TypeTesterToolbar_fontStyle from "../../__generated__/TypeTesterToolbar_fontStyle.graphql.js";
+import React, { useContext } from 'react';
+import TypeTesterFeaturesButton from './TypeTesterFeaturesButton.js';
+import TypeTesterEditAll from './TypeTesterEditAll.js';
+import TypeTesterSlider from './TypeTesterSlider.js';
+import TypeTesterInput from './TypeTesterInput.js';
+import useTypeTesterState from './TypeTesterState.js';
+import TypeTesterAlignButtons from './TypeTesterAlignButtons.js';
+import ConfigContext from '../ConfigContext.js';
+import TypeTesterVariableAxes from './TypeTesterVariableAxes.js';
+import { graphql, useFragment } from 'react-relay';
 const TypeTesterToolbar = _ref => {
   let {
     id,
@@ -30,66 +21,65 @@ const TypeTesterToolbar = _ref => {
   } = _ref;
   const {
     typeTester: config
-  } = (0, _react.useContext)(_ConfigContext.default);
-  const props = (0, _TypeTesterState.default)({
+  } = useContext(ConfigContext);
+  const props = useTypeTesterState({
     id
   });
-  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterToolbar_fontStyle2.default.hash && _TypeTesterToolbar_fontStyle2.default.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_fontStyle2.default), fontStyleKey);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  const fontStyle = useFragment((_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.createElement("div", {
     className: "type-tester__toolbar__tools",
     onMouseDown: e => {
       if (e.target instanceof HTMLInputElement) return;
       e.preventDefault();
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "type-tester__slider"
-  }, config.size.label && /*#__PURE__*/_react.default.createElement("span", {
+  }, config.size.label && /*#__PURE__*/React.createElement("span", {
     className: "type-tester__slider__size-label"
-  }, config.size.label), config.textInput && /*#__PURE__*/_react.default.createElement(_TypeTesterInput.default, {
+  }, config.size.label), config.textInput && /*#__PURE__*/React.createElement(TypeTesterInput, {
     min: config.size.min,
     max: config.size.max,
     value: props.size,
     onChange: props.setSize,
     setFocused: props.setFocused
-  }), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+  }), /*#__PURE__*/React.createElement(TypeTesterSlider, {
     min: config.size.min,
     max: config.size.max,
     value: props.size,
     onChange: props.setSize,
     stepSize: 1,
     interpolator: "log10"
-  })), config.letterSpacing && /*#__PURE__*/_react.default.createElement("div", {
+  })), config.letterSpacing && /*#__PURE__*/React.createElement("div", {
     className: "type-tester__slider__letter-spacing"
-  }, config.letterSpacing.label && /*#__PURE__*/_react.default.createElement("span", {
+  }, config.letterSpacing.label && /*#__PURE__*/React.createElement("span", {
     className: "type-tester__slider__line-height-label"
-  }, config.letterSpacing.label), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+  }, config.letterSpacing.label), /*#__PURE__*/React.createElement(TypeTesterSlider, {
     min: config.letterSpacing.min,
     max: config.letterSpacing.max,
     value: props.letterSpacing,
     onChange: props.setLetterSpacing,
     stepSize: 0.01,
     interpolator: "linear"
-  })), config.lineHeight && /*#__PURE__*/_react.default.createElement("div", {
+  })), config.lineHeight && /*#__PURE__*/React.createElement("div", {
     className: "type-tester__slider__line-height"
-  }, config.lineHeight.label && /*#__PURE__*/_react.default.createElement("span", {
+  }, config.lineHeight.label && /*#__PURE__*/React.createElement("span", {
     className: "type-tester__slider__line-height-label"
-  }, config.lineHeight.label), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+  }, config.lineHeight.label), /*#__PURE__*/React.createElement(TypeTesterSlider, {
     min: config.lineHeight.min,
     max: config.lineHeight.max,
     value: props.lineHeight,
     onChange: props.setLineHeight,
     stepSize: 0.01,
     interpolator: "log10"
-  })), axesPosition === 'inline' && /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
+  })), axesPosition === 'inline' && /*#__PURE__*/React.createElement(TypeTesterVariableAxes, {
     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, {
+  }), (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.createElement(TypeTesterFeaturesButton, {
     id: id,
     fontStyle: fontStyle,
     onNeedsRefocus: onNeedsRefocus,
     features: features
-  }), config.alignmentButtons && /*#__PURE__*/_react.default.createElement(_TypeTesterAlignButtons.default, props), (groupEdit ?? config.groupEdit) && /*#__PURE__*/_react.default.createElement(_TypeTesterEditAll.default, props));
+  }), config.alignmentButtons && /*#__PURE__*/React.createElement(TypeTesterAlignButtons, props), (groupEdit ?? config.groupEdit) && /*#__PURE__*/React.createElement(TypeTesterEditAll, props));
 };
-var _default = TypeTesterToolbar;
-exports.default = _default;
+export default TypeTesterToolbar;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypeTesterVariableAxes_fontStyle$key } from '__generated__/TypeTesterVariableAxes_fontStyle.graphql';
+import { TypeTesterVariableAxes_fontStyle$key } from '__generated__/TypeTesterVariableAxes_fontStyle.graphql.js';
 interface TypeTesterVariableAxes_props {
     id: string;
     fontStyle: TypeTesterVariableAxes_fontStyle$key;

package/dist/components/TypeTester/TypeTesterVariableAxes.js

@@ -1,16 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _TypeTesterVariableAxes_fontStyle2 = _interopRequireDefault(require("../../__generated__/TypeTesterVariableAxes_fontStyle.graphql"));
-var _react = _interopRequireDefault(require("react"));
-var _TypeTesterSlider = _interopRequireDefault(require("./TypeTesterSlider"));
-var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
-var _reactRelay = require("react-relay");
-var _utils = require("../../utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _TypeTesterVariableAxes_fontStyle from "../../__generated__/TypeTesterVariableAxes_fontStyle.graphql.js";
+import React from 'react';
+import TypeTesterSlider from './TypeTesterSlider.js';
+import useTypeTesterState from './TypeTesterState.js';
+import { graphql, useFragment } from 'react-relay';
+import { notEmpty } from '../../utils.js';
 const TypeTesterVariableAxes = _ref => {
   let {
     id,
@@ -20,17 +13,17 @@ const TypeTesterVariableAxes = _ref => {
   const {
     variableSettings,
     setVariableSettings
-  } = (0, _TypeTesterState.default)({
+  } = useTypeTesterState({
     id
   });
-  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterVariableAxes_fontStyle2.default.hash && _TypeTesterVariableAxes_fontStyle2.default.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_fontStyle2.default), fontStyleKey);
+  const fontStyle = useFragment((_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) => {
     variableSettings[axis] = value;
     setVariableSettings(variableSettings);
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "type-tester__variable-axes"
   }, axes.filter(showAxis => showAxis in variableSettings) // only show the slider if the value is set
   .map(showAxis => {
@@ -41,7 +34,7 @@ const TypeTesterVariableAxes = _ref => {
       } = _ref2;
       return axis === showAxis;
     });
-  }).filter(_utils.notEmpty).map(_ref3 => {
+  }).filter(notEmpty).map(_ref3 => {
     let {
       axis,
       name,
@@ -50,16 +43,16 @@ const TypeTesterVariableAxes = _ref => {
     } = _ref3;
     const isSmall = Math.abs(maxValue - minValue) <= 1;
     const value = variableSettings[axis];
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: axis,
       className: "type-tester__variable-axes__axis"
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: "type-tester__variable-axes__name"
-    }, name), /*#__PURE__*/_react.default.createElement("span", {
+    }, name), /*#__PURE__*/React.createElement("span", {
       className: "type-tester__variable-axes__value"
-    }, isSmall ? value.toFixed(2) : value.toFixed(0)), /*#__PURE__*/_react.default.createElement("div", {
+    }, isSmall ? value.toFixed(2) : value.toFixed(0)), /*#__PURE__*/React.createElement("div", {
       className: "type-tester__variable-axes__slider"
-    }, /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+    }, /*#__PURE__*/React.createElement(TypeTesterSlider, {
       value: value,
       min: minValue,
       max: maxValue,
@@ -69,5 +62,4 @@ const TypeTesterVariableAxes = _ref => {
     })));
   }));
 };
-var _default = TypeTesterVariableAxes;
-exports.default = _default;
+export default TypeTesterVariableAxes;

package/dist/components/TypeTester/features.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 const features = {
   aalt: 'Access All Alternates',
   abvf: 'Above-base Forms',
@@ -146,5 +140,4 @@ const features = {
   vrtr: 'Vertical Alternates for Rotation',
   zero: 'Slashed Zero'
 };
-var _default = features;
-exports.default = _default;
+export default features;

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, TypeTesterAxesPosition } from './types';
+import { TypeTester_viewer$key } from '../../__generated__/TypeTester_viewer.graphql.js';
+import { TypeTester_fontStyle$key } from '../../__generated__/TypeTester_fontStyle.graphql.js';
+import { Alignment, TypeTesterAxesPosition } from './types.js';
 export interface TypeTesterConfig {
     min?: number;
     max?: number;