fontdue-js 2.28.0 → 3.0.0-alpha10

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,10 +13,10 @@ 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) => {
@@ -32,7 +25,7 @@ const TypeTesterVariableAxes = _ref => {
       [axis]: value
     });
   };
-  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 => {
@@ -43,7 +36,7 @@ const TypeTesterVariableAxes = _ref => {
       } = _ref2;
       return axis === showAxis;
     });
-  }).filter(_utils.notEmpty).map(_ref3 => {
+  }).filter(notEmpty).map(_ref3 => {
     let {
       axis,
       name,
@@ -60,19 +53,19 @@ const TypeTesterVariableAxes = _ref => {
     // the endpoints — most digits plus any minus sign. With tabular
     // figures (tnum, set in CSS) each character is a stable 1ch wide.
     const valueWidth = Math.max(format(minValue).length, format(maxValue).length);
-    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",
       style: {
         width: `${valueWidth}ch`
       }
-    }, format(value)), /*#__PURE__*/_react.default.createElement("div", {
+    }, format(value)), /*#__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,
@@ -82,5 +75,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,6 +1,6 @@
 import React from 'react';
-import { TypeTester_fontStyle$key } from '../../__generated__/TypeTester_fontStyle.graphql';
-import { Alignment, TypeTesterAxesPosition } from './types';
+import { TypeTester_fontStyle$key } from '../../__generated__/TypeTester_fontStyle.graphql.js';
+import { Alignment, TypeTesterAxesPosition } from './types.js';
 export interface TypeTesterConfig {
     min?: number;
     max?: number;

package/dist/components/TypeTester/index.js

@@ -1,29 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _TypeTester_fontStyle2 = _interopRequireDefault(require("../../__generated__/TypeTester_fontStyle.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _reactRedux = require("react-redux");
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-var _FontStyle = _interopRequireDefault(require("../FontStyle"));
-var _SKUPrice = _interopRequireDefault(require("../SKUPrice"));
-var _SelectButton = _interopRequireDefault(require("../SelectButton"));
-var _utils = require("../../utils");
-var _TypeTesterStyleSelectData = _interopRequireDefault(require("./TypeTesterStyleSelectData"));
-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 _hooks = require("../../hooks");
-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 }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import _TypeTester_fontStyle from "../../__generated__/TypeTester_fontStyle.graphql.js";
+import React, { Fragment, Suspense, useContext, useEffect, useRef, useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
+import { useSelector } from 'react-redux';
+import ConfigContext from '../ConfigContext.js';
+import FontStyle from '../FontStyle/index.js';
+import SKUPrice from '../SKUPrice/index.js';
+import SelectButton from '../SelectButton/index.js';
+import { isSelected } from '../../utils.js';
+import TypeTesterStyleSelectData from './TypeTesterStyleSelectData.js';
+import TypeTesterFeatures from './TypeTesterFeatures.js';
+import TypeTesterContent from './TypeTesterContent.js';
+import useTypeTesterState from './TypeTesterState.js';
+import TypeTesterToolbar from './TypeTesterToolbar.js';
+import TypeTesterVariableAxes from './TypeTesterVariableAxes.js';
+import { useDebouncedValue } from '../../hooks.js';
 const TypeTester = _ref => {
   let {
     id,
@@ -38,15 +29,15 @@ const TypeTester = _ref => {
     onStyleSelect,
     isLoading
   } = _ref;
-  const fontStyle = (0, _reactRelay.useFragment)((_TypeTester_fontStyle2.default.hash && _TypeTester_fontStyle2.default.hash !== "bf89a32c8a0661f2102bbcf8c6bd1aa7" && 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_fontStyle2.default), fontStyleKey);
-  const contentRef = (0, _react.useRef)(null);
-  const ref = (0, _react.useRef)(null);
-  const [buyButtonIsHovered, setBuyButtonIsHovered] = (0, _react.useState)(false);
+  const fontStyle = useFragment((_TypeTester_fontStyle.hash && _TypeTester_fontStyle.hash !== "bf89a32c8a0661f2102bbcf8c6bd1aa7" && 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 contentRef = useRef(null);
+  const ref = useRef(null);
+  const [buyButtonIsHovered, setBuyButtonIsHovered] = useState(false);
   let {
     typeTester: config
-  } = (0, _react.useContext)(_ConfigContext.default);
+  } = useContext(ConfigContext);
   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)({
+  const props = useTypeTesterState({
     id
   });
 
@@ -56,20 +47,20 @@ const TypeTester = _ref => {
   // preview and sliders keep reading the live `props.variableSettings`.
   // Keyed on the font style id so switching fonts snaps the instance name
   // immediately (in sync with the new style) rather than lagging the switch.
-  const nameVariableSettings = (0, _hooks.useDebouncedValue)(props.variableSettings, 200, fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.id);
-  (0, _react.useEffect)(() => {
+  const nameVariableSettings = useDebouncedValue(props.variableSettings, 200, fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.id);
+  useEffect(() => {
     if (onFocus && props.focused) onFocus();
     if (onBlur && !props.focused) onBlur();
   }, [props.focused]);
-  const selected = (0, _reactRedux.useSelector)(fontStyle && fontStyle.sku ? (0, _utils.isSelected)(fontStyle.sku.id) : () => false);
-  const precartOpen = (0, _reactRedux.useSelector)(state => state.precartOpen);
+  const selected = useSelector(fontStyle && fontStyle.sku ? isSelected(fontStyle.sku.id) : () => false);
+  const precartOpen = useSelector(state => state.precartOpen);
   const sku = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.sku;
   const onNeedsRefocus = () => {
     var _contentRef$current;
     (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.focus();
   };
   if (!fontStyle) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "type-tester select-button-hover-parent",
     ref: ref,
     "data-type-tester-id": id,
@@ -84,13 +75,13 @@ const TypeTester = _ref => {
     "data-alignment": props.alignment,
     "data-loading": isLoading,
     "data-tags": tags === null || tags === void 0 ? void 0 : tags.join(' ')
-  }, axesPosition === 'above' ? /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
+  }, axesPosition === 'above' ? /*#__PURE__*/React.createElement(TypeTesterVariableAxes, {
     id: id,
     axes: axes,
     fontStyle: fontStyle
-  }) : null, /*#__PURE__*/_react.default.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: "type-tester__toolbar"
-  }, /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelectData.default, {
+  }, /*#__PURE__*/React.createElement(TypeTesterStyleSelectData, {
     fontStyle: fontStyle,
     variableSettings: nameVariableSettings,
     onSelectFontStyleValue: _ref2 => {
@@ -108,12 +99,12 @@ const TypeTester = _ref => {
     },
     config: config,
     includeVariableAxesOption: Boolean(axes === null || axes === void 0 ? void 0 : axes.length) && axesPosition === 'features-panel'
-  }), config.priceText && fontStyle.sku && /*#__PURE__*/_react.default.createElement("div", {
+  }), config.priceText && fontStyle.sku && /*#__PURE__*/React.createElement("div", {
     className: "type-tester__toolbar__price-text",
     onMouseDown: e => e.preventDefault()
-  }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+  }, /*#__PURE__*/React.createElement(SKUPrice, {
     sku: fontStyle.sku
-  })), config.toolsPosition === 'inline' && /*#__PURE__*/_react.default.createElement(_TypeTesterToolbar.default, {
+  })), config.toolsPosition === 'inline' && /*#__PURE__*/React.createElement(TypeTesterToolbar, {
     id: id,
     features: features,
     axes: axes,
@@ -121,31 +112,31 @@ const TypeTester = _ref => {
     fontStyle: fontStyle,
     onNeedsRefocus: onNeedsRefocus,
     groupEdit: groupEdit
-  }), config.selectButton && sku && productId && /*#__PURE__*/_react.default.createElement("div", {
+  }), config.selectButton && sku && productId && /*#__PURE__*/React.createElement("div", {
     className: "type-tester__select-button-wrapper",
     onMouseDown: e => e.preventDefault()
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "type-tester__select-button"
-  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_SelectButton.default, {
+  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SelectButton, {
     productId: productId,
     sku: sku,
     onMouseEnter: () => setBuyButtonIsHovered(true),
     onMouseLeave: () => setBuyButtonIsHovered(false),
     className: "type-tester__select-button-element"
-  }), precartOpen && !selected && /*#__PURE__*/_react.default.createElement("div", {
+  }), precartOpen && !selected && /*#__PURE__*/React.createElement("div", {
     className: "type-tester__price"
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+  }, /*#__PURE__*/React.createElement(SKUPrice, {
     sku: sku
-  }))))))), config.toolsPosition === 'inline' && (features || axes) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, {
+  }))))))), config.toolsPosition === 'inline' && (features || axes) && /*#__PURE__*/React.createElement(TypeTesterFeatures, {
     id: id,
     fontStyle: fontStyle,
     features: features ?? null,
     axes: axesPosition === 'features-panel' ? axes ?? null : null
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "type-tester__text"
-  }, /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+  }, /*#__PURE__*/React.createElement(FontStyle, {
     fontStyle: fontStyle,
     className: "type-tester__text__font-style"
   }, _ref3 => {
@@ -155,7 +146,7 @@ const TypeTester = _ref => {
       verticalMetrics
     } = _ref3;
     if (loaded) {
-      return /*#__PURE__*/_react.default.createElement(_TypeTesterContent.default, _extends({}, props, {
+      return /*#__PURE__*/React.createElement(TypeTesterContent, _extends({}, props, {
         ref: contentRef,
         fontStyles: style,
         verticalMetrics: verticalMetrics,
@@ -167,7 +158,7 @@ const TypeTester = _ref => {
         columns: config.columns
       }));
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "type-tester__text__container",
       style: {
         fontSize: `${props.size}px`,
@@ -176,5 +167,4 @@ const TypeTester = _ref => {
     }, props.content.getCurrentContent().getPlainText());
   }))));
 };
-var _default = TypeTester;
-exports.default = _default;
+export default TypeTester;

package/dist/components/TypeTester/types.js

@@ -1,14 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.normalizeFeaturesProp = void 0;
-// Public-API feature prop. Accepts an array of feature codes, or the literal
+import "../../global-shim.js"; // Public-API feature prop. Accepts an array of feature codes, or the literal
 // string '*' to expose every feature the font supports.
-
-const normalizeFeaturesProp = features => features === '*' ? ['*'] : features ?? null;
+export const normalizeFeaturesProp = features => features === '*' ? ['*'] : features ?? null;
 
 // controls whether the type tester editing should apply to all of the
-// testers within a group
-exports.normalizeFeaturesProp = normalizeFeaturesProp;
+// testers within a group

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

@@ -1,4 +1,4 @@
-import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql';
+import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql.js';
 interface useFeatures_props {
     fontStyle: useFeaturesData_fontStyle$key;
 }

package/dist/components/TypeTester/useFeaturesData.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _useFeaturesData_fontStyle2 = _interopRequireDefault(require("../../__generated__/useFeaturesData_fontStyle.graphql"));
-var _reactRelay = require("react-relay");
-var _features = _interopRequireDefault(require("./features"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _useFeaturesData_fontStyle from "../../__generated__/useFeaturesData_fontStyle.graphql.js";
+import { graphql, useFragment } from 'react-relay';
+import featureNameData from './features.js';
 const getStylisticSetName = (feature, stylisticSetNames) => stylisticSetNames.find(_ref => {
   let {
     featureName
@@ -19,11 +12,11 @@ const useFeaturesData = _ref2 => {
   let {
     fontStyle
   } = _ref2;
-  const data = (0, _reactRelay.useFragment)((_useFeaturesData_fontStyle2.default.hash && _useFeaturesData_fontStyle2.default.hash !== "3c48a87b1b19f52e3dda10fc11f0030a" && console.error("The definition of 'useFeaturesData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFeaturesData_fontStyle2.default), fontStyle);
+  const data = useFragment((_useFeaturesData_fontStyle.hash && _useFeaturesData_fontStyle.hash !== "3c48a87b1b19f52e3dda10fc11f0030a" && console.error("The definition of 'useFeaturesData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFeaturesData_fontStyle), fontStyle);
   const featureNames = ((_data$fontFeatures = data.fontFeatures) === null || _data$fontFeatures === void 0 ? void 0 : _data$fontFeatures.supportedFeatures.reduce((acc, feature) => {
     let featureName = feature;
-    if (_features.default.hasOwnProperty(feature)) {
-      featureName = _features.default[feature];
+    if (featureNameData.hasOwnProperty(feature)) {
+      featureName = featureNameData[feature];
     }
     const stylisticSetName = getStylisticSetName(feature, data.fontFeatures.stylisticSetNames);
     if (stylisticSetName) {
@@ -37,5 +30,4 @@ const useFeaturesData = _ref2 => {
     featureNames
   };
 };
-var _default = useFeaturesData;
-exports.default = _default;
+export default useFeaturesData;

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

@@ -1,7 +1,7 @@
 import { EditorState } from 'draft-js';
-import { Alignment } from './types';
-import { VariableSettings } from '../../utils';
-import { VerticalMetrics } from '../useFontStyle';
+import { Alignment } from './types.js';
+import { VariableSettings } from '../../utils.js';
+import { VerticalMetrics } from '../useFontStyle.js';
 export type ColumnsConfig = false | {
     count: 'auto' | number;
     width: string;

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -1,12 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _useAutofit = _interopRequireDefault(require("../../hooks/useAutofit"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import "../../global-shim.js";
+import { useLayoutEffect } from 'react';
+import useAutofit from '../../hooks/useAutofit.js';
 const useTypeTesterStyler = _ref => {
   let {
     size,
@@ -35,7 +29,7 @@ const useTypeTesterStyler = _ref => {
   const {
     ref,
     fontSize: autofitSize
-  } = (0, _useAutofit.default)({
+  } = useAutofit({
     text,
     fontFamily: fontStyles.fontFamily,
     fontSize: size,
@@ -51,7 +45,7 @@ const useTypeTesterStyler = _ref => {
 
   // When autofit calculates a new size, push it into the shared state
   // before the browser paints to avoid a flash of wrapped text.
-  (0, _react.useLayoutEffect)(() => {
+  useLayoutEffect(() => {
     if (autofit && autofitSize !== size) {
       setSize(autofitSize, {
         auto: true
@@ -147,5 +141,4 @@ const useTypeTesterStyler = _ref => {
     style
   };
 };
-var _default = useTypeTesterStyler;
-exports.default = _default;
+export default useTypeTesterStyler;

package/dist/components/TypeTesters/TypeTestersElement.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _index = _interopRequireDefault(require("./index"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import TypeTesters from './index.js';
 const getDefaultMode = (stringValue, autofit) => {
   if (autofit) return 'local';
   if (stringValue === 'group') return 'group';
@@ -22,7 +15,7 @@ function TypeTestersElement(_ref) {
     features,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({
+  return /*#__PURE__*/React.createElement(TypeTesters, _extends({
     tags: tags === null || tags === void 0 ? void 0 : tags.split(','),
     excludeTags: excludeTags === null || excludeTags === void 0 ? void 0 : excludeTags.split(','),
     autofit: autofit ? autofit === 'true' : undefined,
@@ -30,5 +23,4 @@ function TypeTestersElement(_ref) {
     features: features === null || features === void 0 ? void 0 : features.split(',')
   }, rest));
 }
-var _default = TypeTestersElement;
-exports.default = _default;
+export default TypeTestersElement;

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { TypeTestersIDQuery } from '../../__generated__/TypeTestersIDQuery.graphql';
-import { TypeTestersSlugQuery } from '../../__generated__/TypeTestersSlugQuery.graphql';
-import { FeaturesProp } from '../TypeTester/types';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
+import { TypeTestersIDQuery } from '../../__generated__/TypeTestersIDQuery.graphql.js';
+import { TypeTestersSlugQuery } from '../../__generated__/TypeTestersSlugQuery.graphql.js';
+import { Config } from '../ConfigContext.js';
+import { FeaturesProp } from '../TypeTester/types.js';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
 export interface TypeTesters_props {
     collectionId?: string;
     collectionSlug?: string;
@@ -21,4 +22,20 @@ export declare function TypeTestersPreloadedIDQueryRenderer({ preloadedQuery, ..
 export declare function TypeTestersPreloadedSlugQueryRenderer({ preloadedQuery, ...rest }: TypeTesters_props & {
     preloadedQuery: SerializablePreloadedQuery<TypeTestersSlugQuery>;
 }): React.JSX.Element;
-export default function TypeTesters({ collectionId, collectionSlug, ...rest }: TypeTesters_props): React.JSX.Element | null;
+export type TypeTestersPreloadedQuery = SerializablePreloadedQuery<TypeTestersIDQuery> | SerializablePreloadedQuery<TypeTestersSlugQuery>;
+export type LoadTypeTestersQueryVariables = ({
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug: string;
+}) & {
+    tags?: string[] | null;
+    excludeTags?: string[] | null;
+};
+export declare function loadTypeTestersQuery(variables: LoadTypeTestersQueryVariables): Promise<TypeTestersPreloadedQuery>;
+export type TypeTesters_unifiedProps = TypeTesters_props & {
+    preloadedQuery?: TypeTestersPreloadedQuery;
+    config?: Config;
+};
+export default function TypeTesters({ collectionId, collectionSlug, preloadedQuery, config, ...rest }: TypeTesters_unifiedProps): React.JSX.Element | null;