fontdue-js 2.22.0 → 2.22.1

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

@@ -0,0 +1,137 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeTesterStandalonePreloadedQueryRenderer = TypeTesterStandalonePreloadedQueryRenderer;
+exports.default = TypeTesterStandalone;
+var _TypeTesterStandaloneQuery2 = _interopRequireDefault(require("../../__generated__/TypeTesterStandaloneQuery.graphql"));
+var _TypeTesterStandaloneChangedStylesQuery2 = _interopRequireDefault(require("../../__generated__/TypeTesterStandaloneChangedStylesQuery.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _index = _interopRequireDefault(require("./index"));
+var _TypeTesterContext = _interopRequireDefault(require("./TypeTesterContext"));
+var _types = require("./types");
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _useLicenseAndOrderVariables = require("../../hooks/useLicenseAndOrderVariables");
+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 changedStylesQuery = (_TypeTesterStandaloneChangedStylesQuery2.default.hash && _TypeTesterStandaloneChangedStylesQuery2.default.hash !== "98374227c6b2c3eceab5b48138e1a662" && console.error("The definition of 'TypeTesterStandaloneChangedStylesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneChangedStylesQuery2.default);
+function TypeTesterStandaloneComponent({
+  content,
+  direction,
+  axes,
+  features,
+  featuresSelected,
+  featureSettings = null,
+  variableSettings = null,
+  lineHeight,
+  letterSpacing,
+  alignment,
+  fontSize,
+  autofit,
+  onFocus,
+  onBlur,
+  data
+}) {
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  let defaultAlignment = config.initialAlignment;
+  if (direction === 'rtl') defaultAlignment = 'right';
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [changedStyle, setChangedStyle] = (0, _react.useState)('');
+  const [changedStylesFetchKey, setChangedStylesFetchKey] = (0, _react.useState)(0);
+  const {
+    licenseOptionsSpecs,
+    orderVariableSelections
+  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
+  const handleStyleSelect = (0, _react.useCallback)(fontStyleId => {
+    (0, _reactRelay.fetchQuery)(environment, changedStylesQuery, {
+      id: fontStyleId,
+      licenseOptions: licenseOptionsSpecs,
+      orderVariables: orderVariableSelections
+    }).subscribe({
+      complete: () => {
+        setChangedStyle(fontStyleId);
+        setChangedStylesFetchKey(prev => prev + 1);
+      }
+    });
+  }, [environment, changedStyle, licenseOptionsSpecs, orderVariableSelections]);
+  const changedStylesData = (0, _reactRelay.useLazyLoadQuery)(changedStylesQuery, {
+    id: changedStyle,
+    licenseOptions: licenseOptionsSpecs,
+    orderVariables: orderVariableSelections
+  }, {
+    fetchKey: changedStylesFetchKey,
+    fetchPolicy: 'store-only'
+  });
+  return /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
+    testers: {
+      standalone: {
+        content: content ?? 'The quick brown fox...',
+        autofit: autofit ?? false,
+        size: fontSize ?? 72,
+        lineHeight: lineHeight ?? 1,
+        letterSpacing: letterSpacing ?? 0,
+        alignment: alignment ?? defaultAlignment,
+        features: featureSettings?.filter(setting => setting.value === '1').map(setting => setting.feature) ?? featuresSelected ?? null,
+        variableSettings: variableSettings?.reduce((acc, {
+          axis,
+          value
+        }) => {
+          acc[axis] = value;
+          return acc;
+        }, {}) ?? null,
+        direction: direction ?? 'ltr'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    id: "standalone",
+    viewer: data.viewer,
+    fontStyle: changedStyle ? changedStylesData.node : data.viewer?.fontStyle,
+    onStyleSelect: handleStyleSelect,
+    axes: axes,
+    features: (0, _types.normalizeFeaturesProp)(features),
+    productId: data.viewer?.fontStyle?.family?.parent?.id ?? data.viewer?.fontStyle?.family?.id,
+    groupEdit: false,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+}
+const query = (_TypeTesterStandaloneQuery2.default.hash && _TypeTesterStandaloneQuery2.default.hash !== "57916b8e26a166271a80c5df1b3f68ec" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery2.default);
+function TypeTesterStandalonePreloadedQueryRenderer({
+  preloadedQuery,
+  ...rest
+}) {
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery, 'store-or-network', query);
+  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
+  return /*#__PURE__*/_react.default.createElement(TypeTesterStandaloneComponent, _extends({
+    data: data
+  }, rest));
+}
+function TypeTesterStandalone({
+  familyName,
+  styleName,
+  ...rest
+}) {
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {
+    familyName,
+    styleName,
+    selectable: config.selectable
+  });
+  const fontStyle = data.viewer?.fontStyle;
+  if (!fontStyle) {
+    console.log(`[TypeTester]: No FontStyle found for {familyName: "${familyName}", styleName: "${styleName}"}`);
+  }
+  return /*#__PURE__*/_react.default.createElement(TypeTesterStandaloneComponent, _extends({
+    data: data
+  }, rest));
+}

package/dist-cjs/components/TypeTester/TypeTesterStandalone.preload.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeTesterPreloaded = TypeTesterPreloaded;
+exports.loadTypeTesterQuery = loadTypeTesterQuery;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _TypeTesterStandaloneQuery = _interopRequireDefault(require("../../__generated__/TypeTesterStandaloneQuery.graphql"));
+var _FontdueProvider = _interopRequireDefault(require("../FontdueProvider"));
+var _TypeTesterStandalone = require("./TypeTesterStandalone");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+async function loadTypeTesterQuery(variables, options) {
+  return (0, _loadSerializableQuery.default)(_TypeTesterStandaloneQuery.default, {
+    familyName: variables.familyName,
+    styleName: variables.styleName,
+    selectable: variables.selectable ?? true
+  }, options);
+}
+// Self-wraps with FontdueProvider so consumers don't need to. The provider
+// state is a module-level singleton under the hood, so multiple
+// TypeTesterPreloaded (or other *Preloaded) components on a page all share
+// one Relay env + Redux store + auxiliary UI.
+function TypeTesterPreloaded(props) {
+  return /*#__PURE__*/_react.default.createElement(_FontdueProvider.default, null, /*#__PURE__*/_react.default.createElement(_TypeTesterStandalone.TypeTesterStandalonePreloadedQueryRenderer, props));
+}

package/dist-cjs/components/TypeTester/TypeTesterStandalone.server.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TypeTesterStandalone;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _TypeTesterStandalone = require("./TypeTesterStandalone");
+var _TypeTesterStandaloneQuery = _interopRequireDefault(require("../../__generated__/TypeTesterStandaloneQuery.graphql"));
+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); }
+async function TypeTesterStandalone({
+  familyName,
+  styleName,
+  ...rest
+}) {
+  const preloadedQuery = await (0, _loadSerializableQuery.default)(_TypeTesterStandaloneQuery.default, {
+    familyName,
+    styleName,
+    selectable: true
+  });
+  return /*#__PURE__*/_react.default.createElement(_TypeTesterStandalone.TypeTesterStandalonePreloadedQueryRenderer, _extends({
+    preloadedQuery: preloadedQuery
+  }, rest));
+}

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TypeTesterStandaloneElement = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TypeTesterStandalone = _interopRequireDefault(require("./TypeTesterStandalone"));
+var _utils = require("../../utils");
+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 isAlignment = str => {
+  return str === 'left' || str === 'center' || str === 'right';
+};
+const isDirection = str => {
+  return str === 'ltr' || str === 'rtl';
+};
+const parseBool = input => input === 'true' ? true : false;
+
+// parse a string like "wdth 1000, ital 0.5" into
+// [{ axis: "wdth", value: 1000 }, { axis: "ital", value: 0.5 }]
+function parseVariableSettings(input) {
+  if (!input) return null;
+  return input.split(/\s*,\s*/).map(settingString => {
+    const m = settingString.match(/^([A-Za-z0-9]{4}) (\d+(?:\.\d+)?)$/);
+    if (m && m.length > 2) {
+      return {
+        axis: m[1],
+        value: parseFloat(m[2])
+      };
+    } else {
+      console.warn(`fontdue-type-tester failed to parse variable-settings value: "${settingString}", ignoring`);
+    }
+  }).filter(_utils.notEmpty);
+}
+const TypeTesterStandaloneElement = ({
+  lineHeight,
+  letterSpacing,
+  fontSize,
+  axes,
+  features,
+  featuresSelected,
+  variableSettings,
+  alignment,
+  direction,
+  autofit,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(_TypeTesterStandalone.default, _extends({
+  autofit: parseBool(autofit),
+  lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
+  letterSpacing: letterSpacing ? parseFloat(letterSpacing) : undefined,
+  fontSize: fontSize ? parseFloat(fontSize) : undefined,
+  axes: axes?.split(',') ?? [],
+  features: features?.split(',') ?? [],
+  featureSettings: featuresSelected?.split(',').map(feature => ({
+    feature,
+    value: '1'
+  })),
+  alignment: isAlignment(alignment) ? alignment : undefined,
+  direction: isDirection(direction) ? direction : undefined,
+  variableSettings: parseVariableSettings(variableSettings)
+}, rest));
+exports.TypeTesterStandaloneElement = TypeTesterStandaloneElement;
+var _default = TypeTesterStandaloneElement;
+exports.default = _default;

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

@@ -0,0 +1,133 @@
+"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 }; }
+const useTypeTesterState = ({
+  id
+}) => {
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const {
+    testers,
+    globalFeaturesOpen,
+    dispatch
+  } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
+  const toolsPosition = config.typeTester.toolsPosition;
+  const {
+    content,
+    contentEdited,
+    size,
+    features,
+    focused,
+    featuresOpen,
+    autofit,
+    lineHeight,
+    letterSpacing,
+    alignment,
+    variableSettings,
+    direction
+  } = testers[id];
+  return {
+    autofit,
+    content,
+    setContent: value => {
+      dispatch({
+        type: 'SET_CONTENT',
+        id,
+        value
+      });
+    },
+    contentEdited,
+    size,
+    setSize: (value, options) => {
+      dispatch({
+        type: 'SET_SIZE',
+        value,
+        id,
+        propagate: options?.auto === false
+      });
+    },
+    lineHeight,
+    setLineHeight: value => dispatch({
+      type: 'SET_LINE_HEIGHT',
+      value,
+      id
+    }),
+    letterSpacing,
+    setLetterSpacing: value => dispatch({
+      type: 'SET_LETTER_SPACING',
+      value,
+      id
+    }),
+    alignment,
+    setAlignment: value => dispatch({
+      type: 'SET_ALIGNMENT',
+      value,
+      id
+    }),
+    focused,
+    setFocused: value => {
+      dispatch({
+        type: 'SET_FOCUSED',
+        value,
+        id
+      });
+    },
+    features,
+    setFeatures: value => {
+      dispatch({
+        type: 'SET_FEATURES',
+        value,
+        id
+      });
+    },
+    toggleFeature: feature => {
+      let value;
+      if (features.indexOf(feature) === -1) {
+        value = features.concat(feature);
+      } else {
+        value = features.filter(f => f !== feature);
+      }
+      dispatch({
+        type: 'SET_FEATURES',
+        value,
+        id
+      });
+    },
+    featuresOpen: toolsPosition === 'floating' ? globalFeaturesOpen : featuresOpen,
+    toggleFeaturesOpen: value => {
+      if (toolsPosition === 'floating') {
+        dispatch({
+          type: 'TOGGLE_GLOBAL_FEATURES_OPEN'
+        });
+      } else {
+        dispatch({
+          type: 'SET_FEATURES_OPEN',
+          value: value ?? !featuresOpen,
+          id
+        });
+      }
+    },
+    setFeaturesOpen: value => {
+      dispatch({
+        type: 'SET_FEATURES_OPEN',
+        value,
+        id
+      });
+    },
+    variableSettings,
+    setVariableSettings: value => dispatch({
+      type: 'SET_VARIABLE_SETTINGS',
+      value,
+      id
+    }),
+    direction
+  };
+};
+var _default = useTypeTesterState;
+exports.default = _default;

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

@@ -0,0 +1,101 @@
+"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 }; }
+const VARIABLE_AXES = 'VARIABLE_AXES';
+const TypeTesterStyleSelect = ({
+  families,
+  selectedFontStyleId,
+  selectedVariableSettings,
+  onSelectFontStyleValue,
+  onSelectVariableAxes,
+  onSelectFamilyId,
+  includeVariableAxesOption
+}) => {
+  const selectedFamily = families.find(family => family.fontStyles && family.fontStyles.some(({
+    id
+  }) => id === selectedFontStyleId));
+  const selectedFontStyle = selectedFamily && selectedFamily.fontStyles && selectedFamily.fontStyles.find(({
+    id
+  }) => id === selectedFontStyleId);
+  const handleSelectFontStyle = selection => {
+    if (selection === VARIABLE_AXES) {
+      onSelectVariableAxes();
+    } else if (selection.includes(':::')) {
+      const [fontStyleId, instanceName] = selection.split(':::');
+      const instance = selectedFamily?.fontStyles?.find(style => style.id === fontStyleId)?.variableInstances?.find(instance => instance.name === instanceName);
+      let variableSettings;
+      if (instance) variableSettings = (0, _utils.variableInstanceSettings)(instance);
+      onSelectFontStyleValue({
+        fontStyleId,
+        variableSettings
+      });
+    } else {
+      onSelectFontStyleValue({
+        fontStyleId: selection
+      });
+    }
+  };
+  if (!selectedFamily || !selectedFontStyle) return null;
+  let value = selectedFontStyleId;
+  if (selectedVariableSettings) {
+    const instance = selectedFamily?.fontStyles?.find(style => style.id === value)?.variableInstances?.find(instance => (0, _utils.compareVariableSettings)(instance, selectedVariableSettings));
+    if (instance) {
+      value = `${value}:::${instance.name}`;
+    } else {
+      value = null;
+    }
+  }
+  let isVariable = false;
+  let options = selectedFamily?.fontStyles?.flatMap(({
+    id,
+    name,
+    variableInstances
+  }) => {
+    if (variableInstances && variableInstances?.length > 0) {
+      isVariable = true;
+      return variableInstances.map(instance => ({
+        value: `${id}:::${instance.name}`,
+        text: instance.name
+      }));
+    }
+    return [{
+      value: id,
+      text: name
+    }];
+  });
+  if (isVariable && includeVariableAxesOption) {
+    options?.push({
+      value: VARIABLE_AXES,
+      text: 'Variable axes...'
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester-select"
+  }, /*#__PURE__*/_react.default.createElement(_Select.default, {
+    options: families.map(({
+      id,
+      name
+    }) => ({
+      value: id,
+      text: name
+    })),
+    value: selectedFamily.id,
+    onChange: e => onSelectFamilyId(e.target.value),
+    onClick: e => e.stopPropagation()
+  }), options && /*#__PURE__*/_react.default.createElement(_Select.default, {
+    options: options,
+    value: value,
+    nullText: "Custom",
+    onChange: e => handleSelectFontStyle(e.target.value),
+    onClick: e => e.stopPropagation()
+  }));
+};
+var _default = TypeTesterStyleSelect;
+exports.default = _default;

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

@@ -0,0 +1,102 @@
+"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;
+
+// get a score for similarity between two styles
+// 0 < n <= 1
+// where 1 = exact match
+const computeSimilarity = (left, right) => {
+  let weightDiff = null;
+  if (left.cssWeight && right.cssWeight) {
+    weightDiff = Math.abs(parseInt(left.cssWeight, 10) - parseInt(right.cssWeight, 10));
+  }
+
+  // since weight class values go from 1 to 1000
+  const weightSimilarity = weightDiff === null ? 0 : (1000 - weightDiff) / 1000;
+
+  // use 0.9 for non matching styles, since we prefer weight but if there's a matching style
+  // it shouldn't take preference over a closer weight
+  const styleSimilarity = left.cssStyle === right.cssStyle ? 1 : 0.9;
+
+  // it's possible to make this better but we'll just use the same algorithm as style for now
+  const stretchSimilarity = left.cssStretch === right.cssStretch ? 1 : 0.9;
+  return weightSimilarity * styleSimilarity * stretchSimilarity;
+};
+function TypeTesterStyleSelectData({
+  fontStyle: fontStyleKey,
+  viewer: viewerKey,
+  onSelectFontStyleValue,
+  onSelectVariableAxes,
+  config,
+  variableSettings,
+  includeVariableAxesOption
+}) {
+  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?.families?.edges?.map(edge => edge.node).filter(_utils.notEmpty).filter(family =>
+  // 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'
+  family.featureStyle?.supportedLanguages?.some(lang => fontStyle.supportedLanguages?.includes(lang)));
+  const handleSelectFamilyId = (0, _react.useCallback)(id => {
+    const family = familyData && familyData.find(family => family.id === id);
+    if (!family) return;
+    let fontStyleId = fontStyle.id;
+    let variableSettings;
+    if (family.isVariableFont) {
+      const newFontStyle = family.fontStyles?.[0];
+      if (newFontStyle) {
+        fontStyleId = newFontStyle.id;
+        const instance = newFontStyle.variableInstances?.[0];
+        if (instance) {
+          variableSettings = (0, _utils.variableInstanceSettings)(instance);
+        }
+      }
+    } else {
+      const styleWeightDifferences = family.fontStyles?.map(right => {
+        return {
+          id: right.id,
+          similarity: computeSimilarity(fontStyle, right)
+        };
+      }).filter(_utils.notEmpty) || [];
+      fontStyleId = styleWeightDifferences.reduce((closest, current) => {
+        if (current.similarity > closest.similarity) return current;
+        return closest;
+      }).id;
+    }
+    onSelectFontStyleValue({
+      fontStyleId,
+      variableSettings
+    });
+  }, [familyData, fontStyle]);
+  const instance = variableSettings ? fontStyle.variableInstances?.find(instance => (0, _utils.compareVariableSettings)(instance, variableSettings)) : null;
+  return config.selectable && familyData ? /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelect.default, {
+    families: familyData,
+    selectedFontStyleId: fontStyle.id,
+    onSelectFontStyleValue: onSelectFontStyleValue,
+    onSelectVariableAxes: onSelectVariableAxes,
+    onSelectFamilyId: handleSelectFamilyId,
+    selectedVariableSettings: variableSettings,
+    includeVariableAxesOption: includeVariableAxesOption
+  }) : fontStyle.family && /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__name"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__name__family"
+  }, fontStyle.family.name), ' ', /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__name__style"
+  }, variableSettings ? instance?.name ?? 'Custom' : fontStyle.name.replace(/ /g, '\xa0')));
+}