fontdue-js 2.22.1 → 2.22.3

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

@@ -1,137 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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

@@ -1,26 +0,0 @@
-"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

@@ -1,65 +0,0 @@
-"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

@@ -1,133 +0,0 @@
-"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

@@ -1,101 +0,0 @@
-"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

@@ -1,102 +0,0 @@
-"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')));
-}