fontdue-js 2.21.0 → 2.22.1

package/dist-cjs/components/TypeTester/TypeTesterToolbar.js

@@ -0,0 +1,94 @@
+"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 }; }
+const TypeTesterToolbar = ({
+  id,
+  features,
+  axes,
+  axesPosition,
+  fontStyle: fontStyleKey,
+  onNeedsRefocus,
+  groupEdit
+}) => {
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const props = (0, _TypeTesterState.default)({
+    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", {
+    className: "type-tester__toolbar__tools",
+    onMouseDown: e => {
+      if (e.target instanceof HTMLInputElement) return;
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__slider"
+  }, config.size.label && /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__slider__size-label"
+  }, config.size.label), config.textInput && /*#__PURE__*/_react.default.createElement(_TypeTesterInput.default, {
+    min: config.size.min,
+    max: config.size.max,
+    value: props.size,
+    onChange: props.setSize,
+    setFocused: props.setFocused
+  }), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+    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", {
+    className: "type-tester__slider__letter-spacing"
+  }, config.letterSpacing.label && /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__slider__line-height-label"
+  }, config.letterSpacing.label), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+    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", {
+    className: "type-tester__slider__line-height"
+  }, config.lineHeight.label && /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__slider__line-height-label"
+  }, config.lineHeight.label), /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+    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, {
+    id: id,
+    fontStyle: fontStyle,
+    axes: axes
+  }), (Boolean(features?.length) || Boolean(axes?.length) && axesPosition === 'features-panel') && /*#__PURE__*/_react.default.createElement(_TypeTesterFeaturesButton.default, {
+    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));
+};
+var _default = TypeTesterToolbar;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterVariableAxes.js

@@ -0,0 +1,65 @@
+"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 }; }
+const TypeTesterVariableAxes = ({
+  id,
+  fontStyle: fontStyleKey,
+  axes
+}) => {
+  const {
+    variableSettings,
+    setVariableSettings
+  } = (0, _TypeTesterState.default)({
+    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);
+  if (!variableSettings) return null;
+  if (!axes) return null;
+  const handleChange = (axis, value) => {
+    variableSettings[axis] = value;
+    setVariableSettings(variableSettings);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__variable-axes"
+  }, axes.filter(showAxis => showAxis in variableSettings) // only show the slider if the value is set
+  .map(showAxis => fontStyle.variableAxes?.find(({
+    axis
+  }) => axis === showAxis)).filter(_utils.notEmpty).map(({
+    axis,
+    name,
+    minValue,
+    maxValue
+  }) => {
+    const isSmall = Math.abs(maxValue - minValue) <= 1;
+    const value = variableSettings[axis];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: axis,
+      className: "type-tester__variable-axes__axis"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "type-tester__variable-axes__name"
+    }, name), /*#__PURE__*/_react.default.createElement("span", {
+      className: "type-tester__variable-axes__value"
+    }, isSmall ? value.toFixed(2) : value.toFixed(0)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "type-tester__variable-axes__slider"
+    }, /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
+      value: value,
+      min: minValue,
+      max: maxValue,
+      onChange: value => handleChange(axis, value),
+      stepSize: isSmall ? 0.01 : 1,
+      interpolator: "linear"
+    })));
+  }));
+};
+var _default = TypeTesterVariableAxes;
+exports.default = _default;

package/dist-cjs/components/TypeTester/features.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const features = {
+  aalt: 'Access All Alternates',
+  abvf: 'Above-base Forms',
+  abvm: 'Above-base Mark Positioning',
+  abvs: 'Above-base Substitutions',
+  afrc: 'Alternative Fractions',
+  akhn: 'Akhands',
+  blwf: 'Below-base Forms',
+  blwm: 'Below-base Mark Positioning',
+  blws: 'Below-base Substitutions',
+  calt: 'Contextual Alternates',
+  case: 'Case-Sensitive Forms',
+  ccmp: 'Glyph Composition / Decomposition',
+  cfar: 'Conjunct Form After Ro',
+  cjct: 'Conjunct Forms',
+  clig: 'Contextual Ligatures',
+  cpct: 'Centered CJK Punctuation',
+  cpsp: 'Capital Spacing',
+  cswh: 'Contextual Swash',
+  curs: 'Cursive Positioning',
+  c2pc: 'Petite Capitals From Capitals',
+  c2sc: 'Small Capitals From Capitals',
+  dist: 'Distances',
+  dlig: 'Discretionary Ligatures',
+  dnom: 'Denominators',
+  dtls: 'Dotless Forms',
+  expt: 'Expert Forms',
+  falt: 'Final Glyph on Line Alternates',
+  fin2: 'Terminal Forms #2',
+  fin3: 'Terminal Forms #3',
+  fina: 'Terminal Forms',
+  flac: 'Flattened accent forms',
+  frac: 'Fractions',
+  fwid: 'Full Widths',
+  half: 'Half Forms',
+  haln: 'Halant Forms',
+  halt: 'Alternate Half Widths',
+  hist: 'Historical Forms',
+  hkna: 'Horizontal Kana Alternates',
+  hlig: 'Historical Ligatures',
+  hngl: 'Hangul',
+  hojo: 'Hojo Kanji Forms',
+  hwid: 'Half Widths',
+  init: 'Initial Forms',
+  isol: 'Isolated Forms',
+  ital: 'Italics',
+  jalt: 'Justification Alternates',
+  jp78: 'JIS78 Forms',
+  jp83: 'JIS83 Forms',
+  jp90: 'JIS90 Forms',
+  jp04: 'JIS2004 Forms',
+  kern: 'Kerning',
+  lfbd: 'Left Bounds',
+  liga: 'Standard Ligatures',
+  ljmo: 'Leading Jamo Forms',
+  lnum: 'Lining Figures',
+  locl: 'Localized Forms',
+  ltra: 'Left-to-right alternates',
+  ltrm: 'Left-to-right mirrored forms',
+  mark: 'Mark Positioning',
+  med2: 'Medial Forms #2',
+  medi: 'Medial Forms',
+  mgrk: 'Mathematical Greek',
+  mkmk: 'Mark to Mark Positioning',
+  mset: 'Mark Positioning via Substitution',
+  nalt: 'Alternate Annotation Forms',
+  nlck: 'NLC Kanji Forms',
+  nukt: 'Nukta Forms',
+  numr: 'Numerators',
+  onum: 'Oldstyle Figures',
+  opbd: 'Optical Bounds',
+  ordn: 'Ordinals',
+  ornm: 'Ornaments',
+  palt: 'Proportional Alternate Widths',
+  pcap: 'Petite Capitals',
+  pkna: 'Proportional Kana',
+  pnum: 'Proportional Figures',
+  pref: 'Pre-Base Forms',
+  pres: 'Pre-base Substitutions',
+  pstf: 'Post-base Forms',
+  psts: 'Post-base Substitutions',
+  pwid: 'Proportional Widths',
+  qwid: 'Quarter Widths',
+  rand: 'Randomize',
+  rclt: 'Required Contextual Alternates',
+  rkrf: 'Rakar Forms',
+  rlig: 'Required Ligatures',
+  rphf: 'Reph Forms',
+  rtbd: 'Right Bounds',
+  rtla: 'Right-to-left alternates',
+  rtlm: 'Right-to-left mirrored forms',
+  ruby: 'Ruby Notation Forms',
+  rvrn: 'Required Variation Alternates',
+  salt: 'Stylistic Alternates',
+  sinf: 'Scientific Inferiors',
+  size: 'Optical size',
+  smcp: 'Small Capitals',
+  smpl: 'Simplified Forms',
+  ss01: 'Stylistic Set 1',
+  ss02: 'Stylistic Set 2',
+  ss03: 'Stylistic Set 3',
+  ss04: 'Stylistic Set 4',
+  ss05: 'Stylistic Set 5',
+  ss06: 'Stylistic Set 6',
+  ss07: 'Stylistic Set 7',
+  ss08: 'Stylistic Set 8',
+  ss09: 'Stylistic Set 9',
+  ss10: 'Stylistic Set 10',
+  ss11: 'Stylistic Set 11',
+  ss12: 'Stylistic Set 12',
+  ss13: 'Stylistic Set 13',
+  ss14: 'Stylistic Set 14',
+  ss15: 'Stylistic Set 15',
+  ss16: 'Stylistic Set 16',
+  ss17: 'Stylistic Set 17',
+  ss18: 'Stylistic Set 18',
+  ss19: 'Stylistic Set 19',
+  ss20: 'Stylistic Set 20',
+  ssty: 'Math script style alternates',
+  stch: 'Stretching Glyph Decomposition',
+  subs: 'Subscript',
+  sups: 'Superscript',
+  swsh: 'Swash',
+  titl: 'Titling',
+  tjmo: 'Trailing Jamo Forms',
+  tnam: 'Traditional Name Forms',
+  tnum: 'Tabular Figures',
+  trad: 'Traditional Forms',
+  twid: 'Third Widths',
+  unic: 'Unicase',
+  valt: 'Alternate Vertical Metrics',
+  vatu: 'Vattu Variants',
+  vert: 'Vertical Writing',
+  vhal: 'Alternate Vertical Half Metrics',
+  vjmo: 'Vowel Jamo Forms',
+  vkna: 'Vertical Kana Alternates',
+  vkrn: 'Vertical Kerning',
+  vpal: 'Proportional Alternate Vertical Metrics',
+  vrt2: 'Vertical Alternates and Rotation',
+  vrtr: 'Vertical Alternates for Rotation',
+  zero: 'Slashed Zero'
+};
+var _default = features;
+exports.default = _default;

package/dist-cjs/components/TypeTester/index.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TypeTester_viewer2 = _interopRequireDefault(require("../../__generated__/TypeTester_viewer.graphql"));
+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"));
+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); }
+const TypeTester = ({
+  id,
+  productId,
+  fontStyle: fontStyleKey,
+  viewer: viewerKey,
+  tags,
+  onFocus,
+  onBlur,
+  features,
+  axes,
+  groupEdit,
+  onStyleSelect,
+  isLoading
+}) => {
+  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 viewer = (0, _reactRelay.useFragment)((_TypeTester_viewer2.default.hash && _TypeTester_viewer2.default.hash !== "26c2b3145462407675ab9b202b0d1b4c" && 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_viewer2.default), viewerKey);
+  const contentRef = (0, _react.useRef)(null);
+  const ref = (0, _react.useRef)(null);
+  const [buyButtonIsHovered, setBuyButtonIsHovered] = (0, _react.useState)(false);
+  let {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const axesPosition = config.variableAxesPosition === 'auto' ? (axes?.length ?? 0) > 1 ? 'features-panel' : 'inline' : config.variableAxesPosition;
+  const props = (0, _TypeTesterState.default)({
+    id
+  });
+  (0, _react.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 sku = fontStyle?.sku;
+  const onNeedsRefocus = () => {
+    contentRef.current?.focus();
+  };
+  if (!fontStyle) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester select-button-hover-parent",
+    ref: ref,
+    "data-type-tester-id": id,
+    "data-focused": props.focused,
+    "data-selected": selected,
+    "data-buy-button-hovered": buyButtonIsHovered,
+    "data-large-font-size": props.size > 72,
+    "data-direction": props.direction,
+    "data-autofit": props.autofit,
+    "data-shy": config.shy,
+    "data-select-button-style": config.selectButtonStyle,
+    "data-alignment": props.alignment,
+    "data-loading": isLoading,
+    "data-tags": tags?.join(' ')
+  }, 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,
+    variableSettings: props.variableSettings,
+    viewer: viewer,
+    onSelectFontStyleValue: ({
+      fontStyleId,
+      variableSettings
+    }) => {
+      onStyleSelect(fontStyleId);
+      props.setVariableSettings(variableSettings ?? null);
+      props.setFeatures([]);
+      onNeedsRefocus();
+    },
+    onSelectVariableAxes: () => {
+      props.setFeaturesOpen(true);
+    },
+    config: config,
+    includeVariableAxesOption: Boolean(axes?.length) && axesPosition === 'features-panel'
+  }), config.priceText && fontStyle.sku && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__toolbar__price-text",
+    onMouseDown: e => e.preventDefault()
+  }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+    sku: fontStyle.sku
+  })), config.toolsPosition === 'inline' && /*#__PURE__*/_react.default.createElement(_TypeTesterToolbar.default, {
+    id: id,
+    features: features,
+    axes: axes,
+    axesPosition: axesPosition,
+    fontStyle: fontStyle,
+    onNeedsRefocus: onNeedsRefocus,
+    groupEdit: groupEdit
+  }), config.selectButton && sku && productId && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__select-button-wrapper",
+    onMouseDown: e => e.preventDefault()
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__select-button"
+  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_SelectButton.default, {
+    productId: productId,
+    sku: sku,
+    onMouseEnter: () => setBuyButtonIsHovered(true),
+    onMouseLeave: () => setBuyButtonIsHovered(false),
+    className: "type-tester__select-button-element"
+  }), precartOpen && !selected && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__price"
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+    sku: sku
+  }))))))), config.toolsPosition === 'inline' && (features || axes) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, {
+    id: id,
+    fontStyle: fontStyle,
+    features: features ?? null,
+    axes: axesPosition === 'features-panel' ? axes ?? null : null
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__text"
+  }, /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    fontStyle: fontStyle,
+    className: "type-tester__text__font-style"
+  }, ({
+    loaded,
+    style
+  }) => {
+    if (loaded) {
+      return /*#__PURE__*/_react.default.createElement(_TypeTesterContent.default, _extends({}, props, {
+        ref: contentRef,
+        fontStyles: style,
+        truncate: config.truncate,
+        direction: props.direction,
+        min: config.size.min,
+        max: config.size.max,
+        autofitOnChange: config.autofitOnChange,
+        columns: config.columns
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "type-tester__text__container",
+      style: {
+        fontSize: `${props.size}px`,
+        textAlign: props.alignment
+      }
+    }, props.content.getCurrentContent().getPlainText());
+  }))));
+};
+var _default = TypeTester;
+exports.default = _default;

package/dist-cjs/components/TypeTester/types.js

@@ -0,0 +1,14 @@
+"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
+// string '*' to expose every feature the font supports.
+
+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;

package/dist-cjs/components/TypeTester/useFeaturesData.js

@@ -0,0 +1,36 @@
+"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 }; }
+const getStylisticSetName = (feature, stylisticSetNames) => stylisticSetNames.find(({
+  featureName
+}) => featureName === feature);
+const useFeaturesData = ({
+  fontStyle
+}) => {
+  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 featureNames = data.fontFeatures?.supportedFeatures.reduce((acc, feature) => {
+    let featureName = feature;
+    if (_features.default.hasOwnProperty(feature)) {
+      featureName = _features.default[feature];
+    }
+    const stylisticSetName = getStylisticSetName(feature, data.fontFeatures.stylisticSetNames);
+    if (stylisticSetName) {
+      featureName = stylisticSetName.humanName;
+    }
+    acc[feature] = featureName;
+    return acc;
+  }, {}) ?? [];
+  return {
+    ...data,
+    featureNames
+  };
+};
+var _default = useFeaturesData;
+exports.default = _default;

package/dist-cjs/components/TypeTester/useTypeTesterStyler.js

@@ -0,0 +1,83 @@
+"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 }; }
+const useTypeTesterStyler = ({
+  size,
+  autofit,
+  autofitOnChange,
+  features,
+  setSize,
+  min,
+  max,
+  truncate,
+  focused,
+  lineHeight,
+  letterSpacing,
+  fontStyles,
+  content,
+  contentEdited,
+  alignment,
+  variableSettings,
+  columns
+}) => {
+  const fontVariationSettings = variableSettings ? Object.keys(variableSettings).map(axis => `'${axis}' ${variableSettings[axis]}`).join(',') : undefined;
+  const fontFeatureSettings = features.map(feature => `"${feature}"`).join(', ');
+  const sideBuffer = autofit ? 10 : 0;
+  const text = content.getCurrentContent().getPlainText();
+  const {
+    ref,
+    fontSize: autofitSize
+  } = (0, _useAutofit.default)({
+    text,
+    fontFamily: fontStyles.fontFamily,
+    fontSize: size,
+    min,
+    max,
+    letterSpacing,
+    fontWeight: fontStyles.fontWeight,
+    fontStyle: fontStyles.fontStyle,
+    fontVariationSettings,
+    enabled: autofit && (!contentEdited || autofitOnChange),
+    padding: sideBuffer
+  });
+
+  // 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)(() => {
+    if (autofit && autofitSize !== size) {
+      setSize(autofitSize, {
+        auto: true
+      });
+    }
+  }, [autofitSize]);
+  const shouldTruncate = truncate && !focused;
+  const style = {
+    fontSize: autofit ? `${size}px` : `calc(var(--type-tester--adjustment, 1) * ${size}px)`,
+    lineHeight: `${lineHeight}`,
+    height: shouldTruncate ? `${size * lineHeight}px` : 'auto',
+    overflow: shouldTruncate ? 'hidden' : 'visible',
+    fontFeatureSettings,
+    marginRight: alignment !== 'right' ? -sideBuffer : 0,
+    marginLeft: alignment === 'right' ? -sideBuffer : 0,
+    letterSpacing: `${letterSpacing}em`,
+    fontVariationSettings,
+    textAlign: alignment,
+    ...(columns && {
+      columnCount: columns.count,
+      columnWidth: columns.width,
+      columnGap: columns.gap
+    })
+  };
+  return {
+    ref,
+    style
+  };
+};
+var _default = useTypeTesterStyler;
+exports.default = _default;

package/dist-cjs/components/TypeTesters/TypeTestersElement.js

@@ -0,0 +1,33 @@
+"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); }
+const getDefaultMode = (stringValue, autofit) => {
+  if (autofit) return 'local';
+  if (stringValue === 'group') return 'group';
+  return 'local';
+};
+function TypeTestersElement({
+  autofit,
+  tags,
+  excludeTags,
+  defaultMode,
+  features,
+  ...rest
+}) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({
+    tags: tags?.split(','),
+    excludeTags: excludeTags?.split(','),
+    autofit: autofit ? autofit === 'true' : undefined,
+    defaultMode: getDefaultMode(defaultMode, autofit === 'true'),
+    features: features?.split(',')
+  }, rest));
+}
+var _default = TypeTestersElement;
+exports.default = _default;