fontdue-js 2.0.0-alpha5 → 2.0.0-alpha7

package/dist/components/StoreModal/StoreModalStyleButton.d.ts

@@ -1,10 +1,9 @@
-import { RelayProp } from 'react-relay';
-import { StoreModalStyleButton_fontStyle$data } from '__generated__/StoreModalStyleButton_fontStyle.graphql';
+import React from 'react';
+import { StoreModalStyleButton_fontStyle$key } from '__generated__/StoreModalStyleButton_fontStyle.graphql';
 type StoreModalStyleButtonProps = {
-    relay: RelayProp;
-    fontStyle: StoreModalStyleButton_fontStyle$data;
+    fontStyle: StoreModalStyleButton_fontStyle$key;
     onSelectSku: (skuId: string, selected: boolean) => void;
     isVariableFont: boolean;
 };
-declare const _default: import("react-relay").Container<Omit<StoreModalStyleButtonProps, "relay">>;
-export default _default;
+export default function StoreModalStyleButton({ fontStyle: fontStyleKey, onSelectSku, isVariableFont, ...rest }: StoreModalStyleButtonProps): React.JSX.Element;
+export {};

package/dist/components/StoreModal/StoreModalStyleButton.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = StoreModalStyleButton;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
@@ -16,15 +16,15 @@ var _utils = require("../../utils");
 var _StoreModalStyleButton_fontStyle;
 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 StoreModalStyleButton = _ref => {
+function StoreModalStyleButton(_ref) {
   var _fontStyle$variableIn;
   let {
-    fontStyle,
+    fontStyle: fontStyleKey,
     onSelectSku,
-    relay,
     isVariableFont,
     ...rest
   } = _ref;
+  const fontStyle = (0, _reactRelay.useFragment)(_StoreModalStyleButton_fontStyle !== void 0 ? _StoreModalStyleButton_fontStyle : (_StoreModalStyleButton_fontStyle = require("../../__generated__/StoreModalStyleButton_fontStyle.graphql"), _StoreModalStyleButton_fontStyle.hash && _StoreModalStyleButton_fontStyle.hash !== "304b682b2f5ad1ead0c8652556185fe1" && console.error("The definition of 'StoreModalStyleButton_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalStyleButton_fontStyle), fontStyleKey);
   const selected = (0, _reactRedux.useSelector)((0, _reducer.isSelected)(fontStyle.sku ? fontStyle.sku.id : fontStyle.id));
   const handleSelect = () => {
     if (!fontStyle.sku) return;
@@ -50,8 +50,4 @@ const StoreModalStyleButton = _ref => {
       showCollectionSavings: !selected
     }) : null
   });
-};
-var _default = (0, _reactRelay.createFragmentContainer)(StoreModalStyleButton, {
-  fontStyle: _StoreModalStyleButton_fontStyle !== void 0 ? _StoreModalStyleButton_fontStyle : (_StoreModalStyleButton_fontStyle = require("../../__generated__/StoreModalStyleButton_fontStyle.graphql"), _StoreModalStyleButton_fontStyle.hash && _StoreModalStyleButton_fontStyle.hash !== "304b682b2f5ad1ead0c8652556185fe1" && console.error("The definition of 'StoreModalStyleButton_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalStyleButton_fontStyle)
-});
-exports.default = _default;
+}

package/dist/components/StoreModalProductLicenseSelection/StoreModalProductLicense.d.ts

@@ -1,6 +1,7 @@
-import { StoreModalProductLicense_license$data } from '../../__generated__/StoreModalProductLicense_license.graphql';
+import React from 'react';
+import { StoreModalProductLicense_license$key } from '../../__generated__/StoreModalProductLicense_license.graphql';
 interface StoreModalProductLicenseProps {
-    license: StoreModalProductLicense_license$data;
+    license: StoreModalProductLicense_license$key;
 }
-declare const _default: import("react-relay").Container<Omit<StoreModalProductLicenseProps, "relay">>;
-export default _default;
+export default function StoreModalProduceLicense({ license: licenseKey, }: StoreModalProductLicenseProps): React.JSX.Element;
+export {};

package/dist/components/StoreModalProductLicenseSelection/StoreModalProductLicense.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = StoreModalProduceLicense;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
@@ -37,10 +37,11 @@ const specFromLicense = license => {
   }
   return licenseOptionSpec;
 };
-const StoreModalProduceLicense = _ref => {
+function StoreModalProduceLicense(_ref) {
   let {
-    license
+    license: licenseKey
   } = _ref;
+  const license = (0, _reactRelay.useFragment)(_StoreModalProductLicense_license !== void 0 ? _StoreModalProductLicense_license : (_StoreModalProductLicense_license = require("../../__generated__/StoreModalProductLicense_license.graphql"), _StoreModalProductLicense_license.hash && _StoreModalProductLicense_license.hash !== "22e24165f79ce30a9190ace765d3d1ce" && console.error("The definition of 'StoreModalProductLicense_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicense_license), licenseKey);
   const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
   const selectedOptions = licenseOptions.find(_ref2 => {
     let {
@@ -136,8 +137,4 @@ const StoreModalProduceLicense = _ref => {
       return null;
     }).filter(Boolean)
   });
-};
-var _default = (0, _reactRelay.createFragmentContainer)(StoreModalProduceLicense, {
-  license: _StoreModalProductLicense_license !== void 0 ? _StoreModalProductLicense_license : (_StoreModalProductLicense_license = require("../../__generated__/StoreModalProductLicense_license.graphql"), _StoreModalProductLicense_license.hash && _StoreModalProductLicense_license.hash !== "22e24165f79ce30a9190ace765d3d1ce" && console.error("The definition of 'StoreModalProductLicense_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicense_license)
-});
-exports.default = _default;
+}

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

@@ -1,6 +1,7 @@
-import { StoreModalProductLicenseSelection_viewer$data } from '../../__generated__/StoreModalProductLicenseSelection_viewer.graphql';
+import React from 'react';
+import { StoreModalProductLicenseSelection_viewer$key } from '../../__generated__/StoreModalProductLicenseSelection_viewer.graphql';
 interface StoreModalProductLicenseSelectionProps {
-    viewer: StoreModalProductLicenseSelection_viewer$data;
+    viewer: StoreModalProductLicenseSelection_viewer$key;
 }
-declare const _default: import("react-relay").Container<Omit<StoreModalProductLicenseSelectionProps, "relay">>;
-export default _default;
+export default function StoreModalProductLicenseSelection({ viewer: viewerKey, }: StoreModalProductLicenseSelectionProps): React.JSX.Element;
+export {};

package/dist/components/StoreModalProductLicenseSelection/index.js

@@ -3,17 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = StoreModalProductLicenseSelection;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
 var _StoreModalProductLicense = _interopRequireDefault(require("./StoreModalProductLicense"));
 var _ContainerElement = _interopRequireDefault(require("./ContainerElement"));
 var _StoreModalProductLicenseSelection_viewer;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StoreModalProductLicenseSelection = _ref => {
+function StoreModalProductLicenseSelection(_ref) {
   let {
-    viewer
+    viewer: viewerKey
   } = _ref;
+  const viewer = (0, _reactRelay.useFragment)(_StoreModalProductLicenseSelection_viewer !== void 0 ? _StoreModalProductLicenseSelection_viewer : (_StoreModalProductLicenseSelection_viewer = require("../../__generated__/StoreModalProductLicenseSelection_viewer.graphql"), _StoreModalProductLicenseSelection_viewer.hash && _StoreModalProductLicenseSelection_viewer.hash !== "132699969de1b8ff9dafa8604b3c5f05" && console.error("The definition of 'StoreModalProductLicenseSelection_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicenseSelection_viewer), viewerKey);
   return /*#__PURE__*/_react.default.createElement(_ContainerElement.default, null, {
     title: 'Select licenses',
     licenses: viewer.licenses && viewer.licenses.map(license => license && /*#__PURE__*/_react.default.createElement(_StoreModalProductLicense.default, {
@@ -21,8 +22,4 @@ const StoreModalProductLicenseSelection = _ref => {
       license: license
     }))
   });
-};
-var _default = (0, _reactRelay.createFragmentContainer)(StoreModalProductLicenseSelection, {
-  viewer: _StoreModalProductLicenseSelection_viewer !== void 0 ? _StoreModalProductLicenseSelection_viewer : (_StoreModalProductLicenseSelection_viewer = require("../../__generated__/StoreModalProductLicenseSelection_viewer.graphql"), _StoreModalProductLicenseSelection_viewer.hash && _StoreModalProductLicenseSelection_viewer.hash !== "132699969de1b8ff9dafa8604b3c5f05" && console.error("The definition of 'StoreModalProductLicenseSelection_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductLicenseSelection_viewer)
-});
-exports.default = _default;
+}

package/dist/components/StoreModalProductSummary/index.js

@@ -102,6 +102,9 @@ const StoreModalProductSummary = _ref => {
           type: 'STORE_MODAL_NAVIGATE',
           route: 'cart'
         });
+      },
+      updater: store => {
+        store.invalidateStore();
       }
     });
   }, [selectedSkuIds, licenseOptions, dispatch]);

package/dist/components/Stylesheet/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

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

@@ -1,8 +1,12 @@
 import React from 'react';
-interface TestFontsForm_props {
+import { TestFontsForm_Query } from '../../__generated__/TestFontsForm_Query.graphql';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
+export interface TestFontsForm_props {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: boolean;
 }
-declare const TestFontsForm: ({ agreementLabel, downloadLabel, newsletterCheckboxChecked, }: TestFontsForm_props) => React.JSX.Element | null;
-export default TestFontsForm;
+export declare function TestFontsFormPreloadedQueryRenderer({ preloadedQuery, ...rest }: TestFontsForm_props & {
+    preloadedQuery: SerializablePreloadedQuery<TestFontsForm_Query>;
+}): React.JSX.Element;
+export default function TestFontsForm(props: TestFontsForm_props): React.JSX.Element;

package/dist/components/TestFontsForm/index.js

@@ -4,16 +4,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TestFontsFormPreloadedQueryRenderer = TestFontsFormPreloadedQueryRenderer;
+exports.default = TestFontsForm;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _TextField = _interopRequireDefault(require("../TextField"));
 var _Icons = require("../Icons");
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 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,16 +30,14 @@ const TestFontsDownloading = _ref => {
     href: archiveUrl
   }, "here"), ".")));
 };
-const TestFontsForm = _ref2 => {
-  var _viewer$testFonts;
+const TestFontsFormComponent = _ref2 => {
+  var _data$viewer$testFont;
   let {
+    data,
     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);
@@ -47,7 +48,7 @@ const TestFontsForm = _ref2 => {
   const [submitted, setSubmitted] = (0, _react.useState)(false);
   const downloadForm = (0, _react.useRef)(null);
   const environment = (0, _reactRelay.useRelayEnvironment)();
-  if (!viewer) return null;
+  if (!data.viewer) return null;
   const handleSubmit = e => {
     e.preventDefault();
     if (!eulaAgreed) {
@@ -85,10 +86,10 @@ const TestFontsForm = _ref2 => {
     });
   };
   const disabled = !eulaAgreed || !email || !name;
-  const settings = viewer.settings;
+  const settings = data.viewer.settings;
   const newsletterOptInLabel = settings === null || settings === void 0 ? void 0 : settings.newsletterOptInLabel;
   const eulaAgreementLabel = settings === null || settings === void 0 ? void 0 : settings.eulaAgreementLabel;
-  const archiveUrl = (_viewer$testFonts = viewer.testFonts) === null || _viewer$testFonts === void 0 ? void 0 : _viewer$testFonts.archiveUrl;
+  const archiveUrl = (_data$viewer$testFont = data.viewer.testFonts) === null || _data$viewer$testFont === void 0 ? void 0 : _data$viewer$testFont.archiveUrl;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts"
   }, error && /*#__PURE__*/_react.default.createElement("div", {
@@ -149,5 +150,21 @@ const TestFontsForm = _ref2 => {
     ref: downloadForm
   }));
 };
-var _default = TestFontsForm;
-exports.default = _default;
+const query = _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);
+function TestFontsFormPreloadedQueryRenderer(_ref4) {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref4;
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
+  return /*#__PURE__*/_react.default.createElement(TestFontsFormComponent, _extends({
+    data: data
+  }, rest));
+}
+function TestFontsForm(props) {
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  return /*#__PURE__*/_react.default.createElement(TestFontsFormComponent, _extends({
+    data: data
+  }, props));
+}

package/dist/components/TestFontsForm/index.server.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TestFontsForm_props } from './index';
+export default function TestFontsForm(props: TestFontsForm_props): Promise<React.JSX.Element>;

package/dist/components/TestFontsForm/index.server.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TestFontsForm;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _TestFontsForm_Query = _interopRequireDefault(require("../../__generated__/TestFontsForm_Query.graphql"));
+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); }
+async function TestFontsForm(props) {
+  const preloadedQuery = await (0, _loadSerializableQuery.default)(_TestFontsForm_Query.default, {});
+  return /*#__PURE__*/_react.default.createElement(_index.TestFontsFormPreloadedQueryRenderer, _extends({
+    preloadedQuery: preloadedQuery
+  }, props));
+}

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

@@ -1,3 +1,7 @@
 import React from 'react';
-declare function TestModeBanner(): React.JSX.Element | null;
-export default TestModeBanner;
+import { TestModeBannerQuery } from '../../__generated__/TestModeBannerQuery.graphql';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
+export declare function TestModeBannerPreloadedQueryRenderer({ preloadedQuery, }: {
+    preloadedQuery: SerializablePreloadedQuery<TestModeBannerQuery>;
+}): React.JSX.Element;
+export default function TestModeBanner(): React.JSX.Element;

package/dist/components/TestModeBanner/index.js

@@ -1,24 +1,27 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TestModeBannerPreloadedQueryRenderer = TestModeBannerPreloadedQueryRenderer;
+exports.default = TestModeBanner;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 var _TestModeBannerQuery;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const getSwitchable = switchUrl => new URL(switchUrl).hostname === location.hostname;
-function TestModeBanner() {
-  const {
-    viewer
-  } = (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;
+function TestModeBannerComponent(_ref) {
+  var _data$viewer;
+  let {
+    data
+  } = _ref;
+  if (!((_data$viewer = data.viewer) !== null && _data$viewer !== void 0 && _data$viewer.adminUser)) return null;
   const {
     isActive,
     switchUrl
-  } = viewer.testMode;
+  } = data.viewer.testMode;
   const switchable = getSwitchable(switchUrl);
 
   // current host !== the tenant switchUrl implies that this site is running
@@ -38,5 +41,20 @@ function TestModeBanner() {
     href: switchUrl
   }, "Switch to ", isActive ? 'live' : 'test', " data"))));
 }
-var _default = TestModeBanner;
-exports.default = _default;
+const query = _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);
+function TestModeBannerPreloadedQueryRenderer(_ref2) {
+  let {
+    preloadedQuery
+  } = _ref2;
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
+  return /*#__PURE__*/_react.default.createElement(TestModeBannerComponent, {
+    data: data
+  });
+}
+function TestModeBanner() {
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  return /*#__PURE__*/_react.default.createElement(TestModeBannerComponent, {
+    data: data
+  });
+}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function TestModeBanner(): Promise<React.JSX.Element>;

package/dist/components/TestModeBanner/index.server.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TestModeBanner;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _TestModeBannerQuery = _interopRequireDefault(require("../../__generated__/TestModeBannerQuery.graphql"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+async function TestModeBanner() {
+  const preloadedQuery = await (0, _loadSerializableQuery.default)(_TestModeBannerQuery.default, {});
+  return /*#__PURE__*/_react.default.createElement(_index.TestModeBannerPreloadedQueryRenderer, {
+    preloadedQuery: preloadedQuery
+  });
+}

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

@@ -1,3 +1,7 @@
 import React from 'react';
-declare function ThemeConfig(): React.JSX.Element | null;
-export default ThemeConfig;
+import { ThemeConfigQuery } from '../../__generated__/ThemeConfigQuery.graphql';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
+export declare function ThemeConfigPreloadedQueryRenderer({ preloadedQuery, }: {
+    preloadedQuery: SerializablePreloadedQuery<ThemeConfigQuery>;
+}): React.JSX.Element;
+export default function ThemeConfig(): React.JSX.Element;

package/dist/components/ThemeConfig/index.js

@@ -1,27 +1,44 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ThemeConfigPreloadedQueryRenderer = ThemeConfigPreloadedQueryRenderer;
+exports.default = ThemeConfig;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 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
 
-function ThemeConfig() {
-  var _viewer$themeConfig;
-  const {
-    viewer
-  } = (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) ?? [];
+function ThemeConfigComponent(_ref) {
+  var _data$viewer$themeCon;
+  let {
+    data
+  } = _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", {
     type: "text/css"
   }, `:root { ${props.join(';')} }`);
 }
-var _default = ThemeConfig;
-exports.default = _default;
+const query = _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);
+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/ThemeConfig/index.server.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function ThemeConfig(): Promise<React.JSX.Element>;

package/dist/components/ThemeConfig/index.server.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ThemeConfig;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _ThemeConfigQuery = _interopRequireDefault(require("../../__generated__/ThemeConfigQuery.graphql"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+async function ThemeConfig() {
+  const preloadedQuery = await (0, _loadSerializableQuery.default)(_ThemeConfigQuery.default, {});
+  return /*#__PURE__*/_react.default.createElement(_index.ThemeConfigPreloadedQueryRenderer, {
+    preloadedQuery: preloadedQuery
+  });
+}

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

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

package/dist/components/TypeTester/TypeTesterFeatures.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = TypeTesterFeatures;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _TypeTesterBullet = _interopRequireDefault(require("../TypeTester/TypeTesterBullet"));
@@ -52,14 +52,15 @@ const shouldIncludeFeature = (supportedFeatures, feature) => {
   if (!supportedFeatures) return false;
   return supportedFeatures.indexOf(feature) >= 0;
 };
-const TypeTesterFeatures = _ref => {
+function TypeTesterFeatures(_ref) {
   var _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4;
   let {
     id,
-    fontStyle,
+    fontStyle: fontStyleKey,
     features: showFeatures,
     axes: showAxes
   } = _ref;
+  const fontStyle = (0, _reactRelay.useFragment)(_TypeTesterFeatures_fontStyle !== void 0 ? _TypeTesterFeatures_fontStyle : (_TypeTesterFeatures_fontStyle = require("../../__generated__/TypeTesterFeatures_fontStyle.graphql"), _TypeTesterFeatures_fontStyle.hash && _TypeTesterFeatures_fontStyle.hash !== "25582c33916ebaadd2f674b1d0b6bf4b" && console.error("The definition of 'TypeTesterFeatures_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_fontStyle), fontStyleKey);
   const {
     typeTester: config
   } = (0, _react.useContext)(_ConfigContext.default);
@@ -138,8 +139,4 @@ const TypeTesterFeatures = _ref => {
     "data-selection-style": selectionStyle,
     "data-columns": (_config$openTypeFeatu3 = config.openTypeFeatures) !== null && _config$openTypeFeatu3 !== void 0 && (_config$openTypeFeatu4 = _config$openTypeFeatu3.columns) !== null && _config$openTypeFeatu4 !== void 0 && _config$openTypeFeatu4.length ? 'set' : 'auto'
   }, featuresColumns)));
-};
-var _default = (0, _reactRelay.createFragmentContainer)(TypeTesterFeatures, {
-  fontStyle: _TypeTesterFeatures_fontStyle !== void 0 ? _TypeTesterFeatures_fontStyle : (_TypeTesterFeatures_fontStyle = require("../../__generated__/TypeTesterFeatures_fontStyle.graphql"), _TypeTesterFeatures_fontStyle.hash && _TypeTesterFeatures_fontStyle.hash !== "25582c33916ebaadd2f674b1d0b6bf4b" && console.error("The definition of 'TypeTesterFeatures_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_fontStyle)
-});
-exports.default = _default;
+}

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

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

package/dist/components/TypeTester/TypeTesterFloatingToolbar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = TypeTesterFloatingToolbar;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _TypeTesterContext = require("./TypeTesterContext");
@@ -13,14 +13,15 @@ var _TypeTesterFloatingToolbar_testers;
 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; }
-const TypeTesterFloatingToolbar = _ref => {
+function TypeTesterFloatingToolbar(_ref) {
   var _testersData$find;
   let {
-    testers: testersData,
+    testers: testersKey,
     features,
     axes,
     onToolbarOpenClose
   } = _ref;
+  const testersData = (0, _reactRelay.useFragment)(_TypeTesterFloatingToolbar_testers !== void 0 ? _TypeTesterFloatingToolbar_testers : (_TypeTesterFloatingToolbar_testers = require("../../__generated__/TypeTesterFloatingToolbar_testers.graphql"), _TypeTesterFloatingToolbar_testers.hash && _TypeTesterFloatingToolbar_testers.hash !== "3b87269ef35fe6c6cfabcc7a2e330a3c" && console.error("The definition of 'TypeTesterFloatingToolbar_testers' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFloatingToolbar_testers), testersKey);
   const {
     testers
   } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
@@ -72,8 +73,4 @@ const TypeTesterFloatingToolbar = _ref => {
     axes: axes,
     fontStyle: fontStyle
   })));
-};
-var _default = (0, _reactRelay.createFragmentContainer)(TypeTesterFloatingToolbar, {
-  testers: _TypeTesterFloatingToolbar_testers !== void 0 ? _TypeTesterFloatingToolbar_testers : (_TypeTesterFloatingToolbar_testers = require("../../__generated__/TypeTesterFloatingToolbar_testers.graphql"), _TypeTesterFloatingToolbar_testers.hash && _TypeTesterFloatingToolbar_testers.hash !== "3b87269ef35fe6c6cfabcc7a2e330a3c" && console.error("The definition of 'TypeTesterFloatingToolbar_testers' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFloatingToolbar_testers)
-});
-exports.default = _default;
+}

package/dist/components/TypeTester/TypeTesterSlider.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactRanger = require("react-ranger");
+var _reactRanger = require("../../react-ranger");
 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; }
 const logInterpolator = {