fontdue-js 1.12.4 → 2.0.0-alpha2

package/dist/components/TestFontsForm/index.js

@@ -9,11 +9,10 @@ var _reactRelay = require("react-relay");
 var _TextField = _interopRequireDefault(require("../TextField"));
 var _Icons = require("../Icons");
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
-var _TestFontsFormUpdateCustomerMutation, _TestFontsForm_viewer, _TestFontsForm_Query;
+var _TestFontsFormUpdateCustomerMutation, _TestFontsForm_Query;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const updateCustomerMutation = _TestFontsFormUpdateCustomerMutation !== void 0 ? _TestFontsFormUpdateCustomerMutation : (_TestFontsFormUpdateCustomerMutation = require("../../__generated__/TestFontsFormUpdateCustomerMutation.graphql"), _TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
 const TestFontsDownloading = _ref => {
   let {
@@ -27,14 +26,16 @@ const TestFontsDownloading = _ref => {
     href: archiveUrl
   }, "here"), ".")));
 };
-const TestFontsFormBase = _ref2 => {
+const TestFontsForm = _ref2 => {
   var _viewer$testFonts;
   let {
-    viewer,
     agreementLabel,
     downloadLabel = 'Download test fonts',
     newsletterCheckboxChecked = false
   } = _ref2;
+  const {
+    viewer
+  } = (0, _reactRelay.useLazyLoadQuery)(_TestFontsForm_Query !== void 0 ? _TestFontsForm_Query : (_TestFontsForm_Query = require("../../__generated__/TestFontsForm_Query.graphql"), _TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "b8838ac445fa9addb19af5a2d653e979" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query), {});
   const [email, setEmail] = (0, _react.useState)('');
   const [name, setName] = (0, _react.useState)('');
   const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(newsletterCheckboxChecked);
@@ -147,31 +148,5 @@ const TestFontsFormBase = _ref2 => {
     ref: downloadForm
   }));
 };
-const TestFontsForm = (0, _reactRelay.createFragmentContainer)(TestFontsFormBase, {
-  viewer: _TestFontsForm_viewer !== void 0 ? _TestFontsForm_viewer : (_TestFontsForm_viewer = require("../../__generated__/TestFontsForm_viewer.graphql"), _TestFontsForm_viewer.hash && _TestFontsForm_viewer.hash !== "4b3632aa1b6b2a5525ec749ab67f1cde" && console.error("The definition of 'TestFontsForm_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_viewer)
-});
-const TestFontsFormFetcher = params => {
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    query: _TestFontsForm_Query !== void 0 ? _TestFontsForm_Query : (_TestFontsForm_Query = require("../../__generated__/TestFontsForm_Query.graphql"), _TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "f04852025fc8b05aa370fb2ec1bea9da" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query),
-    variables: {},
-    render: _ref4 => {
-      let {
-        props,
-        error
-      } = _ref4;
-      if (error) {
-        console.error(error);
-        // TODO: centralize error component, report to sentry
-        return null;
-      }
-      if (props) {
-        return /*#__PURE__*/_react.default.createElement(TestFontsForm, _extends({}, params, props));
-      }
-      return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
-    }
-  });
-};
-var _default = TestFontsFormFetcher;
+var _default = TestFontsForm;
 exports.default = _default;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const TestModeBannerQueryRenderer: React.FC<{}>;
-export default TestModeBannerQueryRenderer;
+declare function TestModeBanner(): React.JSX.Element | null;
+export default TestModeBanner;

package/dist/components/TestModeBanner/index.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
-var _TestModeBanner_viewer, _TestModeBannerQuery;
+var _TestModeBannerQuery;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const getSwitchable = switchUrl => new URL(switchUrl).hostname === location.hostname;
-const TestModeBannerBase = _ref => {
-  let {
+function TestModeBanner() {
+  const {
     viewer
-  } = _ref;
+  } = (0, _reactRelay.useLazyLoadQuery)(_TestModeBannerQuery !== void 0 ? _TestModeBannerQuery : (_TestModeBannerQuery = require("../../__generated__/TestModeBannerQuery.graphql"), _TestModeBannerQuery.hash && _TestModeBannerQuery.hash !== "82e974c3c8bdef284e02f896ed1680c1" && console.error("The definition of 'TestModeBannerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestModeBannerQuery), {});
   if (!viewer) return null;
   if (!viewer.adminUser) return null;
   const {
@@ -37,25 +37,6 @@ const TestModeBannerBase = _ref => {
   }, switchable && /*#__PURE__*/_react.default.createElement("a", {
     href: switchUrl
   }, "Switch to ", isActive ? 'live' : 'test', " data"))));
-};
-const TestModeBanner = (0, _reactRelay.createFragmentContainer)(TestModeBannerBase, {
-  viewer: _TestModeBanner_viewer !== void 0 ? _TestModeBanner_viewer : (_TestModeBanner_viewer = require("../../__generated__/TestModeBanner_viewer.graphql"), _TestModeBanner_viewer.hash && _TestModeBanner_viewer.hash !== "fd9e7cafbd437e6a744cd73c3ad3a4f2" && console.error("The definition of 'TestModeBanner_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestModeBanner_viewer)
-});
-const TestModeBannerQueryRenderer = () => {
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    variables: {},
-    query: _TestModeBannerQuery !== void 0 ? _TestModeBannerQuery : (_TestModeBannerQuery = require("../../__generated__/TestModeBannerQuery.graphql"), _TestModeBannerQuery.hash && _TestModeBannerQuery.hash !== "567d27c6a520c933604bcb1cf436852e" && console.error("The definition of 'TestModeBannerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestModeBannerQuery),
-    render: _ref2 => {
-      let {
-        error,
-        props
-      } = _ref2;
-      if (error || !props) return null;
-      return /*#__PURE__*/_react.default.createElement(TestModeBanner, props);
-    }
-  });
-};
-var _default = TestModeBannerQueryRenderer;
+}
+var _default = TestModeBanner;
 exports.default = _default;

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

@@ -7,10 +7,10 @@ interface TextField_extraprops {
     errors?: string[] | null;
     prefix?: string;
 }
-declare type TextField_props = TextField_extraprops & (({
+type TextField_props = TextField_extraprops & (({
     Component?: 'input';
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) | ({
     Component: 'textarea';
 } & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>));
-declare const TextField: ({ Component, autocomplete, label, type, onChange, errors, prefix, ...rest }: TextField_props) => JSX.Element;
+declare const TextField: ({ Component, autocomplete, label, type, onChange, errors, prefix, ...rest }: TextField_props) => React.JSX.Element;
 export default TextField;

package/dist/components/TextField/index.js

@@ -26,7 +26,9 @@ const TextField = _ref => {
     className: "text-field__label-wrapper"
   }, label), /*#__PURE__*/_react.default.createElement("div", {
     className: "text-field__input-wrapper"
-  }, prefix, Component === 'input' && /*#__PURE__*/_react.default.createElement("input", _extends({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "text-field__prefix"
+  }, prefix), Component === 'input' && /*#__PURE__*/_react.default.createElement("input", _extends({}, rest, {
     type: type,
     onChange: e => onChange(e.target.value),
     className: "text-field__input",

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const ThemeConfigQueryRenderer: React.FC<{}>;
-export default ThemeConfigQueryRenderer;
+declare function ThemeConfig(): React.JSX.Element | null;
+export default ThemeConfig;

package/dist/components/ThemeConfig/index.js

@@ -6,41 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
-var _ThemeConfig_viewer, _ThemeConfigQuery;
+var _ThemeConfigQuery;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // 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
 
-const ThemeConfigBase = _ref => {
+function ThemeConfig() {
   var _viewer$themeConfig;
-  let {
+  const {
     viewer
-  } = _ref;
+  } = (0, _reactRelay.useLazyLoadQuery)(_ThemeConfigQuery !== void 0 ? _ThemeConfigQuery : (_ThemeConfigQuery = require("../../__generated__/ThemeConfigQuery.graphql"), _ThemeConfigQuery.hash && _ThemeConfigQuery.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."), _ThemeConfigQuery), {});
   if (!viewer) return null;
   const props = (viewer === null || viewer === void 0 ? void 0 : (_viewer$themeConfig = viewer.themeConfig) === null || _viewer$themeConfig === void 0 ? void 0 : _viewer$themeConfig.customProperties) ?? [];
   return /*#__PURE__*/_react.default.createElement("style", {
     type: "text/css"
   }, `:root { ${props.join(';')} }`);
-};
-const ThemeConfig = (0, _reactRelay.createFragmentContainer)(ThemeConfigBase, {
-  viewer: _ThemeConfig_viewer !== void 0 ? _ThemeConfig_viewer : (_ThemeConfig_viewer = require("../../__generated__/ThemeConfig_viewer.graphql"), _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)
-});
-const ThemeConfigQueryRenderer = () => {
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    variables: {},
-    query: _ThemeConfigQuery !== void 0 ? _ThemeConfigQuery : (_ThemeConfigQuery = require("../../__generated__/ThemeConfigQuery.graphql"), _ThemeConfigQuery.hash && _ThemeConfigQuery.hash !== "cfe3ece9452fba9074477f15e8fed78a" && console.error("The definition of 'ThemeConfigQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _ThemeConfigQuery),
-    render: _ref2 => {
-      let {
-        error,
-        props
-      } = _ref2;
-      if (error || !props) return null;
-      return /*#__PURE__*/_react.default.createElement(ThemeConfig, props);
-    }
-  });
-};
-var _default = ThemeConfigQueryRenderer;
+}
+var _default = ThemeConfig;
 exports.default = _default;

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

@@ -24,6 +24,7 @@ export interface TypeTestersInitialState {
         autofit: boolean;
         alignment: Alignment;
         variableSettings: VariableSettings | null;
+        features: Features | null;
     };
 }
 interface TypeTesterContextState {
@@ -31,7 +32,7 @@ interface TypeTesterContextState {
     globalFeaturesOpen: boolean;
     testers: TypeTestersState;
 }
-declare type TypeTesterContextAction = {
+type TypeTesterContextAction = {
     type: 'TOGGLE_MODE';
 } | {
     type: 'TOGGLE_GLOBAL_FEATURES_OPEN';
@@ -43,6 +44,7 @@ declare type TypeTesterContextAction = {
     type: 'SET_SIZE';
     id: string;
     value: Size;
+    propagate?: boolean;
 } | {
     type: 'SET_FEATURES';
     id: string;
@@ -74,6 +76,7 @@ export declare const TypeTesterContext: React.Context<TypeTesterContextState & {
 export interface TypeTesterContextProps {
     defaultMode?: 'group' | 'local';
     testers: TypeTestersInitialState;
+    children: React.ReactNode;
 }
-declare const TypeTesterContextComponent: React.FunctionComponent<TypeTesterContextProps>;
+declare const TypeTesterContextComponent: ({ children, testers: initialTestersState, defaultMode, }: TypeTesterContextProps) => React.JSX.Element;
 export default TypeTesterContextComponent;

package/dist/components/TypeTester/TypeTesterContext.js

@@ -10,9 +10,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const TypeTesterContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.TypeTesterContext = TypeTesterContext;
-const updateTester = (state, id, newState) => {
+const updateTester = (state, id, newState, propagate) => {
   const testers = state.testers;
-  if (state.mode === 'local') {
+  if (state.mode === 'local' || propagate === false) {
     return {
       ...state,
       testers: {
@@ -81,7 +81,7 @@ const groupReducer = (state, action) => {
     case 'SET_SIZE':
       return updateTester(state, action.id, {
         size: action.value
-      });
+      }, action.propagate);
     case 'SET_FEATURES':
       return updateTester(state, action.id, {
         features: action.value
@@ -137,7 +137,7 @@ const TypeTesterContextComponent = _ref => {
       size: initialState.size ?? 72,
       lineHeight: initialState.lineHeight ?? 1,
       autofit: initialState.autofit,
-      features: [],
+      features: initialState.features ?? [],
       featuresOpen: false,
       focused: false,
       alignment: initialState.alignment,

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

@@ -1,9 +1,9 @@
-import { TypeTesterFeatures_fontStyle } from '__generated__/TypeTesterFeatures_fontStyle.graphql';
+import { TypeTesterFeatures_fontStyle$data } from '__generated__/TypeTesterFeatures_fontStyle.graphql';
 interface TypeTesterFeatures_props {
     id: string;
-    fontStyle: TypeTesterFeatures_fontStyle;
+    fontStyle: TypeTesterFeatures_fontStyle$data;
     features: ReadonlyArray<string> | null;
     axes: ReadonlyArray<string> | null | undefined;
 }
-declare const _default: import("react-relay").Container<TypeTesterFeatures_props>;
+declare const _default: import("react-relay").Container<Omit<TypeTesterFeatures_props, "relay">>;
 export default _default;

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { UseTypeTesterStylerProps } from './useTypeTesterStyler';
-declare type TypeTesterFitterProps = UseTypeTesterStylerProps;
-declare const TypeTesterFitter: React.FC<TypeTesterFitterProps>;
+type TypeTesterFitterProps = UseTypeTesterStylerProps & {
+    children: React.ReactNode;
+};
+declare const TypeTesterFitter: ({ children, ...props }: TypeTesterFitterProps) => React.JSX.Element;
 export default TypeTesterFitter;

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

@@ -1,9 +1,9 @@
-import { TypeTesterFloatingToolbar_testers } from '__generated__/TypeTesterFloatingToolbar_testers.graphql';
+import { TypeTesterFloatingToolbar_testers$data } from '__generated__/TypeTesterFloatingToolbar_testers.graphql';
 interface TypeTesterFloatingToolbar_props {
-    testers: TypeTesterFloatingToolbar_testers;
+    testers: TypeTesterFloatingToolbar_testers$data;
     features?: ReadonlyArray<string> | null;
     axes?: ReadonlyArray<string> | null;
     onToolbarOpenClose?: (open: boolean) => void;
 }
-declare const _default: import("react-relay").Container<TypeTesterFloatingToolbar_props>;
+declare const _default: import("react-relay").Container<Omit<TypeTesterFloatingToolbar_props, "relay">>;
 export default _default;

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

@@ -6,6 +6,7 @@ interface TypeTesterStandalone {
     lineHeight?: number;
     fontSize?: number;
     features?: string[];
+    featuresSelected?: string[];
     content?: string;
     direction?: Direction;
     alignment?: Alignment;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -6,18 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
-var _reactStaticContainer = _interopRequireDefault(require("react-static-container"));
 var _index = _interopRequireDefault(require("./index"));
 var _TypeTesterContext = _interopRequireDefault(require("./TypeTesterContext"));
 var _TypeTesterStandalone_StyleQuery;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const TypeTesterStandalone = _ref => {
+  var _data$viewer, _data$viewer2, _data$viewer3, _data$viewer3$fontSty, _data$viewer3$fontSty2, _data$viewer3$fontSty3, _data$viewer4, _data$viewer4$fontSty, _data$viewer4$fontSty2;
   let {
     familyName,
     styleName,
     content,
     direction,
     features,
+    featuresSelected,
     lineHeight,
     alignment,
     fontSize,
@@ -25,45 +26,37 @@ const TypeTesterStandalone = _ref => {
     onFocus,
     onBlur
   } = _ref;
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    query: _TypeTesterStandalone_StyleQuery !== void 0 ? _TypeTesterStandalone_StyleQuery : (_TypeTesterStandalone_StyleQuery = require("../../__generated__/TypeTesterStandalone_StyleQuery.graphql"), _TypeTesterStandalone_StyleQuery.hash && _TypeTesterStandalone_StyleQuery.hash !== "a0c0f9c11fa8fcc0208bdf4c7ee109c9" && console.error("The definition of 'TypeTesterStandalone_StyleQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandalone_StyleQuery),
-    variables: {
-      familyName,
-      styleName
-    },
-    environment: environment,
-    render: _ref2 => {
-      var _props$viewer, _props$viewer2, _props$viewer2$fontSt, _props$viewer2$fontSt2, _props$viewer2$fontSt3, _props$viewer3, _props$viewer3$fontSt, _props$viewer3$fontSt2;
-      let {
-        props
-      } = _ref2;
-      return /*#__PURE__*/_react.default.createElement(_reactStaticContainer.default, {
-        shouldUpdate: props
-      }, props && /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
-        testers: {
-          standalone: {
-            content: content ?? 'The quick brown fox...',
-            autofit: autofit ?? false,
-            size: fontSize ?? 72,
-            lineHeight: lineHeight ?? 1,
-            alignment: alignment ?? 'left',
-            variableSettings: null
-          }
-        }
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
-        id: "standalone",
-        viewer: props.viewer,
-        fontStyle: (_props$viewer = props.viewer) === null || _props$viewer === void 0 ? void 0 : _props$viewer.fontStyle,
-        features: features,
-        direction: direction,
-        productId: ((_props$viewer2 = props.viewer) === null || _props$viewer2 === void 0 ? void 0 : (_props$viewer2$fontSt = _props$viewer2.fontStyle) === null || _props$viewer2$fontSt === void 0 ? void 0 : (_props$viewer2$fontSt2 = _props$viewer2$fontSt.family) === null || _props$viewer2$fontSt2 === void 0 ? void 0 : (_props$viewer2$fontSt3 = _props$viewer2$fontSt2.parent) === null || _props$viewer2$fontSt3 === void 0 ? void 0 : _props$viewer2$fontSt3.id) ?? ((_props$viewer3 = props.viewer) === null || _props$viewer3 === void 0 ? void 0 : (_props$viewer3$fontSt = _props$viewer3.fontStyle) === null || _props$viewer3$fontSt === void 0 ? void 0 : (_props$viewer3$fontSt2 = _props$viewer3$fontSt.family) === null || _props$viewer3$fontSt2 === void 0 ? void 0 : _props$viewer3$fontSt2.id),
-        groupEdit: false,
-        onFocus: onFocus,
-        onBlur: onBlur
-      })));
-    }
+  const data = (0, _reactRelay.useLazyLoadQuery)(_TypeTesterStandalone_StyleQuery !== void 0 ? _TypeTesterStandalone_StyleQuery : (_TypeTesterStandalone_StyleQuery = require("../../__generated__/TypeTesterStandalone_StyleQuery.graphql"), _TypeTesterStandalone_StyleQuery.hash && _TypeTesterStandalone_StyleQuery.hash !== "a0c0f9c11fa8fcc0208bdf4c7ee109c9" && console.error("The definition of 'TypeTesterStandalone_StyleQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandalone_StyleQuery), {
+    familyName,
+    styleName
   });
+  const fontStyle = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.fontStyle;
+  if (!fontStyle) {
+    console.log(`[TypeTester]: No FontStyle found for {familyName: "${familyName}", styleName: "${styleName}"}`);
+  }
+  return /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
+    testers: {
+      standalone: {
+        content: content ?? 'The quick brown fox...',
+        autofit: autofit ?? false,
+        size: fontSize ?? 72,
+        lineHeight: lineHeight ?? 1,
+        alignment: alignment ?? 'left',
+        features: featuresSelected ?? null,
+        variableSettings: null
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    id: "standalone",
+    viewer: data.viewer,
+    fontStyle: (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : _data$viewer2.fontStyle,
+    features: features,
+    direction: direction,
+    productId: ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$fontSty = _data$viewer3.fontStyle) === null || _data$viewer3$fontSty === void 0 ? void 0 : (_data$viewer3$fontSty2 = _data$viewer3$fontSty.family) === null || _data$viewer3$fontSty2 === void 0 ? void 0 : (_data$viewer3$fontSty3 = _data$viewer3$fontSty2.parent) === null || _data$viewer3$fontSty3 === void 0 ? void 0 : _data$viewer3$fontSty3.id) ?? ((_data$viewer4 = data.viewer) === null || _data$viewer4 === void 0 ? void 0 : (_data$viewer4$fontSty = _data$viewer4.fontStyle) === null || _data$viewer4$fontSty === void 0 ? void 0 : (_data$viewer4$fontSty2 = _data$viewer4$fontSty.family) === null || _data$viewer4$fontSty2 === void 0 ? void 0 : _data$viewer4$fontSty2.id),
+    groupEdit: false,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
 };
 var _default = TypeTesterStandalone;
 exports.default = _default;

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

@@ -5,6 +5,7 @@ interface TypeTesterElement_props {
     lineHeight?: string;
     fontSize?: string;
     features?: string;
+    featuresSelected?: string;
     content?: string;
     direction?: string;
     alignment?: string;

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -20,6 +20,7 @@ const TypeTesterStandaloneElement = _ref => {
     lineHeight,
     fontSize,
     features,
+    featuresSelected,
     alignment,
     direction,
     autofit,
@@ -30,6 +31,7 @@ const TypeTesterStandaloneElement = _ref => {
     lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
     fontSize: fontSize ? parseFloat(fontSize) : undefined,
     features: (features === null || features === void 0 ? void 0 : features.split(',')) ?? [],
+    featuresSelected: (featuresSelected === null || featuresSelected === void 0 ? void 0 : featuresSelected.split(',')) ?? [],
     alignment: isAlignment(alignment) ? alignment : undefined,
     direction: isDirection(direction) ? direction : undefined
   }, rest));

package/dist/components/TypeTester/TypeTesterState.js

@@ -43,11 +43,12 @@ const useTypeTesterState = _ref => {
     },
     contentEdited,
     size,
-    setSize: value => {
+    setSize: (value, options) => {
       dispatch({
         type: 'SET_SIZE',
         value,
-        id
+        id,
+        propagate: (options === null || options === void 0 ? void 0 : options.auto) === false
       });
     },
     lineHeight,

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

@@ -1,11 +1,11 @@
 import { VariableSettings } from '../../utils';
-import { TypeTesterStyleSelectData_fontStyle } from '../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql';
-import { TypeTesterStyleSelectData_viewer } from '../../__generated__/TypeTesterStyleSelectData_viewer.graphql';
+import { TypeTesterStyleSelectData_fontStyle$data } from '../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql';
+import { TypeTesterStyleSelectData_viewer$data } from '../../__generated__/TypeTesterStyleSelectData_viewer.graphql';
 import { TypeTesterConfig } from '.';
 interface TypeTesterStyleSelectDataProps {
-    fontStyle: TypeTesterStyleSelectData_fontStyle;
+    fontStyle: TypeTesterStyleSelectData_fontStyle$data;
     variableSettings: VariableSettings | null;
-    viewer: TypeTesterStyleSelectData_viewer | null;
+    viewer: TypeTesterStyleSelectData_viewer$data | null;
     onSelectFontStyleValue: (value: {
         fontStyleId: string;
         variableSettings?: VariableSettings;
@@ -14,5 +14,5 @@ interface TypeTesterStyleSelectDataProps {
     config: TypeTesterConfig;
     includeVariableAxesOption: boolean;
 }
-declare const _default: import("react-relay").Container<TypeTesterStyleSelectDataProps>;
+declare const _default: import("react-relay").Container<Omit<TypeTesterStyleSelectDataProps, "relay">>;
 export default _default;

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

@@ -1,4 +1,4 @@
-declare type Features = {
+type Features = {
     [key: string]: string;
 };
 declare const features: Features;

package/dist/components/TypeTester/index.js

@@ -155,9 +155,11 @@ const TypeTester = _ref => {
     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, {
+  }))))))), config.toolsPosition === 'inline' && (features || axes) && /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, {
     id: id,
     fontStyle: fontStyle,
     features: features ?? null,

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

@@ -1,8 +1,8 @@
 import { EditorState } from 'draft-js';
-export declare type Content = EditorState;
-export declare type Size = number;
-export declare type LineHeight = number;
-export declare type Features = string[];
-export declare type Alignment = 'left' | 'center' | 'right';
-export declare type Direction = 'ltr' | 'rtl';
-export declare type TypeTesterMode = 'local' | 'group';
+export type Content = EditorState;
+export type Size = number;
+export type LineHeight = number;
+export type Features = string[];
+export type Alignment = 'left' | 'center' | 'right';
+export type Direction = 'ltr' | 'rtl';
+export type TypeTesterMode = 'local' | 'group';

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

@@ -6,19 +6,19 @@ declare const useFeaturesData: ({ fontStyle }: useFeatures_props) => {
     featureNames: {
         [feature: string]: string;
     };
-    variableAxes: readonly {
-        readonly axis: string;
-        readonly name: string;
-        readonly minValue: number;
-        readonly maxValue: number;
-    }[] | null;
     fontFeatures: {
-        readonly supportedFeatures: readonly string[];
         readonly stylisticSetNames: readonly {
             readonly featureName: string;
             readonly humanName: string;
         }[];
+        readonly supportedFeatures: readonly string[];
     };
-    " $refType": "useFeaturesData_fontStyle";
+    variableAxes: readonly {
+        readonly axis: string;
+        readonly maxValue: number;
+        readonly minValue: number;
+        readonly name: string;
+    }[] | null;
+    " $fragmentType": "useFeaturesData_fontStyle";
 };
 export default useFeaturesData;

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -79,37 +79,33 @@ const useTypeTesterStyler = _ref => {
       newSize = Math.trunc(newSize);
     }
     clone.current.style.fontSize = `${newSize}px`;
+    latestSizeRef.current = newSize;
     setSize(newSize, {
       auto: true
     });
   };
-  (0, _react.useLayoutEffect)(() => {
-    // we can't run computeSize whenever size changes, because it triggers
-    // an infinite loop. but we need the size value to be up-to-date to do
-    // the calculataion above, so we track it separately
-    latestSizeRef.current = size;
-  }, [size]);
-  const windowWidth = (0, _throttled.useWindowWidth)({
-    fps: 60
-  });
-  (0, _react.useLayoutEffect)(computeSize, [windowWidth, autofit]);
   (0, _react.useLayoutEffect)(() => {
     var _ref$current;
-    if (!autofitOnChange) return;
     const $textElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.public-DraftStyleDefault-block');
     clone.current.innerHTML = ($textElement === null || $textElement === void 0 ? void 0 : $textElement.innerHTML) ?? '';
-    requestAnimationFrame(computeSize);
-  }, [content, autofitOnChange]);
-  (0, _react.useEffect)(() => {
-    var _ref$current2;
-    const $textElement = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelector('.public-DraftStyleDefault-block');
-    clone.current.innerHTML = ($textElement === null || $textElement === void 0 ? void 0 : $textElement.innerHTML) ?? '';
+    clone.current.style.fontSize = `${size}px`;
     document.body.appendChild(clone.current);
-    requestAnimationFrame(computeSize);
+    computeSize();
     return () => {
       document.body.removeChild(clone.current);
     };
   }, []);
+  const windowWidth = (0, _throttled.useWindowWidth)({
+    fps: 60
+  });
+  (0, _react.useLayoutEffect)(computeSize, [windowWidth, autofit]);
+  (0, _react.useLayoutEffect)(() => {
+    var _ref$current2;
+    if (!autofitOnChange) return;
+    const $textElement = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelector('.public-DraftStyleDefault-block');
+    clone.current.innerHTML = ($textElement === null || $textElement === void 0 ? void 0 : $textElement.innerHTML) ?? '';
+    computeSize();
+  }, [content, autofitOnChange]);
   const shouldTruncate = truncate && !focused;
   const style = {
     fontSize: autofit ? `${size}px` : `calc(var(--type-tester--adjustment, 1) * ${size}px)`,

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

@@ -7,5 +7,5 @@ interface TypeTestersElementProps {
     tags?: string;
     excludeTags?: string;
 }
-declare const TypeTestersElement: React.FC<TypeTestersElementProps>;
+declare function TypeTestersElement({ autofit, tags, excludeTags, defaultMode, ...rest }: TypeTestersElementProps): React.JSX.Element;
 export default TypeTestersElement;

package/dist/components/TypeTesters/TypeTestersElement.js

@@ -8,18 +8,25 @@ var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("./index"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const TypeTestersElement = _ref => {
+const getDefaultMode = (stringValue, autofit) => {
+  if (autofit) return 'local';
+  if (stringValue === 'group') return 'group';
+  return 'local';
+};
+function TypeTestersElement(_ref) {
   let {
     autofit,
     tags,
     excludeTags,
+    defaultMode,
     ...rest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_index.default, _extends({
     tags: tags === null || tags === void 0 ? void 0 : tags.split(','),
     excludeTags: excludeTags === null || excludeTags === void 0 ? void 0 : excludeTags.split(','),
-    autofit: autofit === 'true'
+    autofit: autofit === 'true',
+    defaultMode: getDefaultMode(defaultMode, autofit === 'true')
   }, rest));
-};
+}
 var _default = TypeTestersElement;
 exports.default = _default;