fontdue-js 2.28.0 → 3.0.0-alpha10

package/dist/components/ThemeConfig/index.js

@@ -1,44 +1,20 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ThemeConfigPreloadedQueryRenderer = ThemeConfigPreloadedQueryRenderer;
-exports.default = ThemeConfig;
-var _ThemeConfigQuery2 = _interopRequireDefault(require("../../__generated__/ThemeConfigQuery.graphql"));
-var _react = _interopRequireDefault(require("react"));
-var _reactRelay = require("react-relay");
-var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// gets the custom properties entered by users in the admin panel,
-// which also includes default values. we put the defaults there instead of
-// every call to var() so that we have defaults all in one place
+import _ThemeConfig_viewer from "../../__generated__/ThemeConfig_viewer.graphql.js";
+import React from 'react';
+import { graphql, useFragment } from 'react-relay';
+const fragment = (_ThemeConfig_viewer.hash && _ThemeConfig_viewer.hash !== "191db4fda0651cd596efa7f91699f895" && console.error("The definition of 'ThemeConfig_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _ThemeConfig_viewer);
 
-function ThemeConfigComponent(_ref) {
-  var _data$viewer$themeCon;
+// Renders custom properties entered by tenant admins (with library defaults)
+// as a single :root style block so var(...) lookups resolve everywhere.
+export default function ThemeConfig(_ref) {
+  var _data$themeConfig;
   let {
-    data
+    viewer
   } = _ref;
-  const props = ((_data$viewer$themeCon = data.viewer.themeConfig) === null || _data$viewer$themeCon === void 0 ? void 0 : _data$viewer$themeCon.customProperties) ?? [];
-  return /*#__PURE__*/_react.default.createElement("style", {
+  const data = useFragment(fragment, viewer);
+  const props = ((_data$themeConfig = data.themeConfig) === null || _data$themeConfig === void 0 ? void 0 : _data$themeConfig.customProperties) ?? [];
+  return /*#__PURE__*/React.createElement("style", {
     type: "text/css"
   }, `:root { ${props.join(';')} }`);
-}
-const query = (_ThemeConfigQuery2.default.hash && _ThemeConfigQuery2.default.hash !== "c259bee038c4d2ea14c758fba3381f57" && console.error("The definition of 'ThemeConfigQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _ThemeConfigQuery2.default);
-function ThemeConfigPreloadedQueryRenderer(_ref2) {
-  let {
-    preloadedQuery
-  } = _ref2;
-  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
-  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
-  return /*#__PURE__*/_react.default.createElement(ThemeConfigComponent, {
-    data: data
-  });
-}
-function ThemeConfig() {
-  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
-  return /*#__PURE__*/_react.default.createElement(ThemeConfigComponent, {
-    data: data
-  });
 }

package/dist/components/Tracking/index.js

@@ -1,15 +1,9 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-var _UrlContext = require("../UrlContext");
-var _consent = require("../ConsentBanner/consent");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { useContext, useEffect } from 'react';
+import ConfigContext from '../ConfigContext.js';
+import { useFontdueUrl } from '../UrlContext.js';
+import { hasConsent, onConsent, setClientAnonymousId } from '../ConsentBanner/consent.js';
 function getCampaignDataFromUrl() {
   const urlParams = new URLSearchParams(window.location.search);
   const campaign = {};
@@ -86,20 +80,20 @@ async function sendPageView(baseUrl, anonymousId) {
   }
 }
 const Tracking = () => {
-  const config = (0, _react.useContext)(_ConfigContext.default);
-  const url = (0, _UrlContext.useFontdueUrl)();
-  (0, _react.useEffect)(() => {
+  const config = useContext(ConfigContext);
+  const url = useFontdueUrl();
+  useEffect(() => {
     var _config$tracking$segm, _config$tracking$segm2;
     if (!config.tracking.enabled) return;
 
     // Generate client-side anonymous ID for cookieless tracking when consent is required
     const clientAnonymousId = config.tracking.consentRequired ? crypto.randomUUID() : undefined;
     if (clientAnonymousId) {
-      (0, _consent.setClientAnonymousId)(clientAnonymousId);
+      setClientAnonymousId(clientAnonymousId);
     }
 
     // Only send the client ID when in cookieless mode (consent required but not yet granted)
-    const analyticsConsent = (0, _consent.hasConsent)('analytics');
+    const analyticsConsent = hasConsent('analytics');
     const effectiveAnonymousId = clientAnonymousId && config.tracking.consentRequired && !analyticsConsent ? clientAnonymousId : undefined;
 
     // Send initial page view
@@ -130,7 +124,7 @@ const Tracking = () => {
         }
       };
       if (config.tracking.consentRequired) {
-        consentCleanup = (0, _consent.onConsent)('analytics', fireSegmentPage);
+        consentCleanup = onConsent('analytics', fireSegmentPage);
       } else {
         fireSegmentPage();
       }
@@ -162,5 +156,4 @@ const Tracking = () => {
   }, []);
   return null;
 };
-var _default = Tracking;
-exports.default = _default;
+export default Tracking;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alignment } from './types';
+import { Alignment } from './types.js';
 interface TypeTesterAlignButtons_props {
     alignment: Alignment;
     setAlignment: (value: Alignment) => void;

package/dist/components/TypeTester/TypeTesterAlignButtons.js

@@ -1,35 +1,27 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Align = require("../Icons/Align");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import React from 'react';
+import { AlignCenter, AlignLeft, AlignRight } from '../Icons/Align.js';
 const TypeTesterAlignButtons = _ref => {
   let {
     alignment,
     setAlignment
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "type-tester__align-buttons"
-  }, /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "type-tester__align-buttons__button",
     "data-active": alignment === 'left',
     onClick: () => setAlignment('left')
-  }, /*#__PURE__*/_react.default.createElement(_Align.AlignLeft, null)), /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/React.createElement(AlignLeft, null)), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "type-tester__align-buttons__button",
     "data-active": alignment === 'center',
     onClick: () => setAlignment('center')
-  }, /*#__PURE__*/_react.default.createElement(_Align.AlignCenter, null)), /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/React.createElement(AlignCenter, null)), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "type-tester__align-buttons__button",
     "data-active": alignment === 'right',
     onClick: () => setAlignment('right')
-  }, /*#__PURE__*/_react.default.createElement(_Align.AlignRight, null)));
+  }, /*#__PURE__*/React.createElement(AlignRight, null)));
 };
-var _default = TypeTesterAlignButtons;
-exports.default = _default;
+export default TypeTesterAlignButtons;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypeTesterConfig } from '.';
+import { TypeTesterConfig } from './index.js';
 interface Bullet_props {
     checked: boolean;
     config: TypeTesterConfig;

package/dist/components/TypeTester/TypeTesterBullet.js

@@ -1,11 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import React from 'react';
 const Bullet = _ref => {
   let {
     checked,
@@ -16,9 +9,8 @@ const Bullet = _ref => {
     'data-checked': checked
   };
   if (config.bulletStyle === 'round') {
-    return /*#__PURE__*/_react.default.createElement("span", props, checked ? '●' : '○');
+    return /*#__PURE__*/React.createElement("span", props, checked ? '●' : '○');
   }
-  return /*#__PURE__*/_react.default.createElement("span", props, checked ? '■' : '□');
+  return /*#__PURE__*/React.createElement("span", props, checked ? '■' : '□');
 };
-var _default = Bullet;
-exports.default = _default;
+export default Bullet;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { UseTypeTesterStylerProps } from './useTypeTesterStyler';
-import { Alignment, Content } from './types';
+import { UseTypeTesterStylerProps } from './useTypeTesterStyler.js';
+import { Alignment, Content } from './types.js';
 export interface TypeTesterContentRef {
     focus: () => void;
 }

package/dist/components/TypeTester/TypeTesterContent.js

@@ -1,17 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _useTypeTesterStyler = _interopRequireDefault(require("./useTypeTesterStyler"));
-var _draftJs = require("draft-js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 _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 TypeTesterContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import "../../global-shim.js";
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import useTypeTesterStyler from './useTypeTesterStyler.js';
+import { Editor } from 'draft-js';
+const TypeTesterContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     content,
     setContent,
@@ -20,21 +12,31 @@ const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     alignment,
     ...props
   } = _ref;
-  const editorRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, () => ({
+  const editorRef = useRef(null);
+  useImperativeHandle(ref, () => ({
     focus: () => {
       var _editorRef$current;
       (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.focus();
     }
   }));
-  const style = (0, _useTypeTesterStyler.default)({
+  const style = useTypeTesterStyler({
     ...props,
     content,
     alignment
   });
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, style, {
+
+  // draft-js's Editor produces different DOM than plain text on server (just
+  // the content string) vs client (full DraftEditor-* subtree). Hydrating
+  // that mismatch causes React to discard the SSR subtree and client-render
+  // the whole tester from scratch — visible as an unmount/remount flash.
+  // Defer Editor mount until after hydration so the initial client render
+  // matches the SSR output exactly.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const plainText = content.getCurrentContent().getPlainText();
+  return /*#__PURE__*/React.createElement("div", _extends({}, style, {
     className: "type-tester__text__container"
-  }), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+  }), mounted ? /*#__PURE__*/React.createElement(Editor, {
     ref: editorRef,
     editorState: content,
     onChange: value => setContent(value),
@@ -44,7 +46,6 @@ const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     stripPastedStyles: true,
     textDirectionality: direction === 'rtl' ? 'RTL' : 'LTR',
     textAlignment: alignment
-  }));
+  }) : plainText);
 });
-var _default = TypeTesterContent;
-exports.default = _default;
+export default TypeTesterContent;

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

@@ -1,6 +1,6 @@
 import React, { Dispatch } from 'react';
-import { VariableSettings } from '../../utils';
-import { Content, Features, Size, Alignment, TypeTesterMode, Direction } from './types';
+import { VariableSettings } from '../../utils.js';
+import { Content, Features, Size, Alignment, TypeTesterMode, Direction } from './types.js';
 interface TypeTesterState {
     content: Content;
     contentEdited: boolean;

package/dist/components/TypeTester/TypeTesterContext.js

@@ -1,15 +1,9 @@
-"use strict";
+'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TypeTesterContext = void 0;
-var _draftJs = require("draft-js");
-var _react = _interopRequireWildcard(require("react"));
-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; }
-const TypeTesterContext = /*#__PURE__*/(0, _react.createContext)({});
-exports.TypeTesterContext = TypeTesterContext;
+import "../../global-shim.js";
+import { ContentState, EditorState } from 'draft-js';
+import React, { createContext, useReducer } from 'react';
+export const TypeTesterContext = /*#__PURE__*/createContext({});
 const updateTester = (state, id, newState, propagate) => {
   const testers = state.testers;
   if (state.mode === 'local' || propagate === false) {
@@ -40,7 +34,7 @@ const updateTester = (state, id, newState, propagate) => {
             // the selection state seems to be globally tied to the browser selection,
             // so the cursor jumps to the other tester. we have to make a new
             // EditorState with a copy of the content
-            content = _draftJs.EditorState.createWithContent(newState.content.getCurrentContent());
+            content = EditorState.createWithContent(newState.content.getCurrentContent());
           }
         }
       }
@@ -134,7 +128,7 @@ const TypeTesterContextComponent = _ref => {
   } = _ref;
   const testers = Object.keys(initialTestersState).reduce((acc, id) => {
     const initialState = initialTestersState[id];
-    const content = _draftJs.EditorState.createWithContent(_draftJs.ContentState.createFromText(initialState.content ?? ''));
+    const content = EditorState.createWithContent(ContentState.createFromText(initialState.content ?? ''));
     acc[id] = {
       content,
       contentEdited: false,
@@ -151,17 +145,16 @@ const TypeTesterContextComponent = _ref => {
     };
     return acc;
   }, {});
-  const [value, dispatch] = (0, _react.useReducer)(groupReducer, {
+  const [value, dispatch] = useReducer(groupReducer, {
     mode: defaultMode,
     globalFeaturesOpen: false,
     testers
   });
-  return /*#__PURE__*/_react.default.createElement(TypeTesterContext.Provider, {
+  return /*#__PURE__*/React.createElement(TypeTesterContext.Provider, {
     value: {
       ...value,
       dispatch
     }
   }, children);
 };
-var _default = TypeTesterContextComponent;
-exports.default = _default;
+export default TypeTesterContextComponent;

package/dist/components/TypeTester/TypeTesterEditAll.js

@@ -1,36 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _TypeTesterContext = require("./TypeTesterContext");
-var _TypeTesterBullet = _interopRequireDefault(require("./TypeTesterBullet"));
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
+import React, { useContext } from 'react';
+import { TypeTesterContext } from './TypeTesterContext.js';
+import Bullet from './TypeTesterBullet.js';
+import ConfigContext from '../ConfigContext.js';
 const TypeTesterEditAll = () => {
   const {
     typeTester: config
-  } = (0, _react.useContext)(_ConfigContext.default);
+  } = useContext(ConfigContext);
   const {
     mode,
     dispatch
-  } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
-  return /*#__PURE__*/_react.default.createElement("button", {
+  } = useContext(TypeTesterContext);
+  return /*#__PURE__*/React.createElement("button", {
     className: "type-tester__edit-all",
     onClick: () => dispatch({
       type: 'TOGGLE_MODE'
     }),
     type: "button"
-  }, /*#__PURE__*/_react.default.createElement(_TypeTesterBullet.default, {
+  }, /*#__PURE__*/React.createElement(Bullet, {
     checked: mode === 'group',
     config: config
-  }), ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }), ' ', /*#__PURE__*/React.createElement("span", {
     className: "type-tester__edit-all__text"
   }, "Affect all styles"));
 };
-var _default = TypeTesterEditAll;
-exports.default = _default;
+export default TypeTesterEditAll;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VariableInstance } from '../../utils';
+import { VariableInstance } from '../../utils.js';
 export interface TypeTesterFamilyListItem {
     id: string;
     name: string;

package/dist/components/TypeTester/TypeTesterFamilies.js

@@ -1,64 +1,53 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = TypeTesterFamiliesProvider;
-exports.typeTesterFamiliesStylesQuery = exports.typeTesterFamiliesQuery = void 0;
-exports.useTypeTesterFamilies = useTypeTesterFamilies;
-var _TypeTesterFamiliesStylesQuery2 = _interopRequireDefault(require("../../__generated__/TypeTesterFamiliesStylesQuery.graphql"));
-var _TypeTesterFamiliesQuery2 = _interopRequireDefault(require("../../__generated__/TypeTesterFamiliesQuery.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _utils = require("../../utils");
-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 _TypeTesterFamiliesStylesQuery from "../../__generated__/TypeTesterFamiliesStylesQuery.graphql.js";
+import _TypeTesterFamiliesQuery from "../../__generated__/TypeTesterFamiliesQuery.graphql.js";
+import React, { createContext, useCallback, useContext, useRef, useState } from 'react';
+import { fetchQuery, graphql, useRelayEnvironment } from 'react-relay';
+import { notEmpty } from '../../utils.js';
+
 // A single, lightweight family-list entry for the type tester family switcher.
 // These are all cheap stored columns (plus the once-per-page language filter),
 // so this query never triggers per-style font-binary parsing.
 
 const noop = () => {};
-const TypeTesterFamiliesContext = /*#__PURE__*/(0, _react.createContext)({
+const TypeTesterFamiliesContext = /*#__PURE__*/createContext({
   families: null,
   loadingFamilies: false,
   loadFamilies: noop,
   getFamilyStyles: () => undefined,
   loadFamilyStyles: noop
 });
-function useTypeTesterFamilies() {
-  return (0, _react.useContext)(TypeTesterFamiliesContext);
+export function useTypeTesterFamilies() {
+  return useContext(TypeTesterFamiliesContext);
 }
 
 // The family-switcher dropdown list. Cheap fields only; `featureStyle
 // { supportedLanguages }` resolves the language filter once per page (instead
 // of once per type tester) — see FD-685.
-const typeTesterFamiliesQuery = (_TypeTesterFamiliesQuery2.default.hash && _TypeTesterFamiliesQuery2.default.hash !== "cda53ca94a4951ee5ba29cc57281a002" && console.error("The definition of 'TypeTesterFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFamiliesQuery2.default);
+export const typeTesterFamiliesQuery = (_TypeTesterFamiliesQuery.hash && _TypeTesterFamiliesQuery.hash !== "cda53ca94a4951ee5ba29cc57281a002" && console.error("The definition of 'TypeTesterFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFamiliesQuery);
 
 // The styles/instances for a single family, fetched lazily when that family is
 // opened or switched to. `variableInstances` font-binary parsing is therefore
 // scoped to one family rather than the whole library.
-exports.typeTesterFamiliesQuery = typeTesterFamiliesQuery;
-const typeTesterFamiliesStylesQuery = (_TypeTesterFamiliesStylesQuery2.default.hash && _TypeTesterFamiliesStylesQuery2.default.hash !== "feee079c690b83b56cfb01cb81f36dce" && console.error("The definition of 'TypeTesterFamiliesStylesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFamiliesStylesQuery2.default);
-exports.typeTesterFamiliesStylesQuery = typeTesterFamiliesStylesQuery;
-function TypeTesterFamiliesProvider(_ref) {
+export const typeTesterFamiliesStylesQuery = (_TypeTesterFamiliesStylesQuery.hash && _TypeTesterFamiliesStylesQuery.hash !== "feee079c690b83b56cfb01cb81f36dce" && console.error("The definition of 'TypeTesterFamiliesStylesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFamiliesStylesQuery);
+export default function TypeTesterFamiliesProvider(_ref) {
   let {
     children
   } = _ref;
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  const [families, setFamilies] = (0, _react.useState)(null);
-  const [loadingFamilies, setLoadingFamilies] = (0, _react.useState)(false);
-  const familiesRequested = (0, _react.useRef)(false);
-  const [familyStyles, setFamilyStyles] = (0, _react.useState)(() => new Map());
-  const familyStylesRequested = (0, _react.useRef)(new Set());
-  const loadFamilies = (0, _react.useCallback)(() => {
+  const environment = useRelayEnvironment();
+  const [families, setFamilies] = useState(null);
+  const [loadingFamilies, setLoadingFamilies] = useState(false);
+  const familiesRequested = useRef(false);
+  const [familyStyles, setFamilyStyles] = useState(() => new Map());
+  const familyStylesRequested = useRef(new Set());
+  const loadFamilies = useCallback(() => {
     if (familiesRequested.current) return;
     familiesRequested.current = true;
     setLoadingFamilies(true);
-    (0, _reactRelay.fetchQuery)(environment, typeTesterFamiliesQuery, {}).toPromise().then(data => {
+    fetchQuery(environment, typeTesterFamiliesQuery, {}).toPromise().then(data => {
       var _data$viewer, _data$viewer$families;
-      const list = ((data === null || data === void 0 ? void 0 : (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$families = _data$viewer.families) === null || _data$viewer$families === void 0 ? void 0 : _data$viewer$families.edges) ?? []).map(edge => edge === null || edge === void 0 ? void 0 : edge.node).filter(_utils.notEmpty).map(node => ({
+      const list = ((data === null || data === void 0 ? void 0 : (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$families = _data$viewer.families) === null || _data$viewer$families === void 0 ? void 0 : _data$viewer$families.edges) ?? []).map(edge => edge === null || edge === void 0 ? void 0 : edge.node).filter(notEmpty).map(node => ({
         id: node.id,
         name: node.name,
         isVariableFont: node.isVariableFont,
@@ -72,14 +61,14 @@ function TypeTesterFamiliesProvider(_ref) {
       familiesRequested.current = false;
     }).finally(() => setLoadingFamilies(false));
   }, [environment]);
-  const setEntry = (0, _react.useCallback)((familyId, entry) => {
+  const setEntry = useCallback((familyId, entry) => {
     setFamilyStyles(prev => {
       const next = new Map(prev);
       next.set(familyId, entry);
       return next;
     });
   }, []);
-  const loadFamilyStyles = (0, _react.useCallback)(familyId => {
+  const loadFamilyStyles = useCallback(familyId => {
     if (!familyId || familyStylesRequested.current.has(familyId)) return;
     familyStylesRequested.current.add(familyId);
     setEntry(familyId, {
@@ -87,7 +76,7 @@ function TypeTesterFamiliesProvider(_ref) {
       isVariableFont: false,
       styles: null
     });
-    (0, _reactRelay.fetchQuery)(environment, typeTesterFamiliesStylesQuery, {
+    fetchQuery(environment, typeTesterFamiliesStylesQuery, {
       familyId
     }).toPromise().then(data => {
       const node = data === null || data === void 0 ? void 0 : data.node;
@@ -115,8 +104,8 @@ function TypeTesterFamiliesProvider(_ref) {
       });
     });
   }, [environment, setEntry]);
-  const getFamilyStyles = (0, _react.useCallback)(familyId => familyStyles.get(familyId), [familyStyles]);
-  return /*#__PURE__*/_react.default.createElement(TypeTesterFamiliesContext.Provider, {
+  const getFamilyStyles = useCallback(familyId => familyStyles.get(familyId), [familyStyles]);
+  return /*#__PURE__*/React.createElement(TypeTesterFamiliesContext.Provider, {
     value: {
       families,
       loadingFamilies,

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

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