fontdue-js 2.0.0-alpha6 → 2.0.0-alpha7

package/dist/components/BuyButton/index.js

@@ -4,18 +4,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.BuyButtonPreloadedIDQueryRenderer = BuyButtonPreloadedIDQueryRenderer;
+exports.BuyButtonPreloadedSlugQueryRenderer = BuyButtonPreloadedSlugQueryRenderer;
+exports.default = BuyButton;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
 var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
 var _productState = require("../Root/productState");
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 var _BuyButton_collection, _BuyButtonIDQuery, _BuyButtonSlugQuery;
 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); }
-function BuyButton(_ref) {
+function BuyButtonComponent(_ref) {
   let {
     collection: collectionKey,
     label,
@@ -59,35 +62,60 @@ function BuyButton(_ref) {
     type: "button"
   }, label ? label : `Buy ${collectionName ?? ''}`);
 }
+const idQuery = _BuyButtonIDQuery !== void 0 ? _BuyButtonIDQuery : (_BuyButtonIDQuery = require("../../__generated__/BuyButtonIDQuery.graphql"), _BuyButtonIDQuery.hash && _BuyButtonIDQuery.hash !== "239b8509e5cecdf8ba5d124f5f39ef5f" && console.error("The definition of 'BuyButtonIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonIDQuery);
 function BuyButtonIDQueryRenderer(_ref2) {
   let {
     collectionId,
     ...rest
   } = _ref2;
-  const data = (0, _reactRelay.useLazyLoadQuery)(_BuyButtonIDQuery !== void 0 ? _BuyButtonIDQuery : (_BuyButtonIDQuery = require("../../__generated__/BuyButtonIDQuery.graphql"), _BuyButtonIDQuery.hash && _BuyButtonIDQuery.hash !== "239b8509e5cecdf8ba5d124f5f39ef5f" && console.error("The definition of 'BuyButtonIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonIDQuery), {
+  const data = (0, _reactRelay.useLazyLoadQuery)(idQuery, {
     collectionId
   });
-  return /*#__PURE__*/_react.default.createElement(BuyButton, _extends({}, rest, data));
+  return /*#__PURE__*/_react.default.createElement(BuyButtonComponent, _extends({}, rest, data));
 }
-function BuyButtonSlugQueryRenderer(_ref3) {
+function BuyButtonPreloadedIDQueryRenderer(_ref3) {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref3;
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
+  return /*#__PURE__*/_react.default.createElement(BuyButtonComponent, _extends({}, rest, data));
+}
+const slugQuery = _BuyButtonSlugQuery !== void 0 ? _BuyButtonSlugQuery : (_BuyButtonSlugQuery = require("../../__generated__/BuyButtonSlugQuery.graphql"), _BuyButtonSlugQuery.hash && _BuyButtonSlugQuery.hash !== "465a1d1ddcd982c9f97e4c5daa5755d6" && console.error("The definition of 'BuyButtonSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonSlugQuery);
+function BuyButtonSlugQueryRenderer(_ref4) {
   var _data$viewer, _data$viewer$slug;
   let {
     collectionSlug,
     ...rest
-  } = _ref3;
-  const data = (0, _reactRelay.useLazyLoadQuery)(_BuyButtonSlugQuery !== void 0 ? _BuyButtonSlugQuery : (_BuyButtonSlugQuery = require("../../__generated__/BuyButtonSlugQuery.graphql"), _BuyButtonSlugQuery.hash && _BuyButtonSlugQuery.hash !== "465a1d1ddcd982c9f97e4c5daa5755d6" && console.error("The definition of 'BuyButtonSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonSlugQuery), {
+  } = _ref4;
+  const data = (0, _reactRelay.useLazyLoadQuery)(slugQuery, {
     collectionSlug
   });
-  return /*#__PURE__*/_react.default.createElement(BuyButton, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(BuyButtonComponent, _extends({}, rest, {
     collection: ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$slug = _data$viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection) ?? null
   }));
 }
-function BuyButtonQueryRenderer(_ref4) {
+function BuyButtonPreloadedSlugQueryRenderer(_ref5) {
+  var _data$viewer2, _data$viewer2$slug;
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref5;
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(slugQuery, queryRef);
+  return /*#__PURE__*/_react.default.createElement(BuyButtonComponent, _extends({}, rest, {
+    collection: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$slug = _data$viewer2.slug) === null || _data$viewer2$slug === void 0 ? void 0 : _data$viewer2$slug.collection) ?? null
+  }));
+}
+
+// default client export
+function BuyButton(_ref6) {
   let {
     collectionId,
     collectionSlug,
     ...rest
-  } = _ref4;
+  } = _ref6;
   if (collectionId) {
     return /*#__PURE__*/_react.default.createElement(BuyButtonIDQueryRenderer, _extends({
       collectionId: collectionId
@@ -99,6 +127,4 @@ function BuyButtonQueryRenderer(_ref4) {
     }, rest));
   }
   throw new Error('BuyButton expected either a collectionId or collectionSlug prop');
-}
-var _default = BuyButtonQueryRenderer;
-exports.default = _default;
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BuyButton_props } from './index';
+export default function BuyButton({ collectionId, collectionSlug, ...rest }: BuyButton_props): Promise<React.JSX.Element | null>;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BuyButton;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _BuyButtonIDQuery = _interopRequireDefault(require("../../__generated__/BuyButtonIDQuery.graphql"));
+var _BuyButtonSlugQuery = _interopRequireDefault(require("../../__generated__/BuyButtonSlugQuery.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 BuyButton(_ref) {
+  let {
+    collectionId,
+    collectionSlug,
+    ...rest
+  } = _ref;
+  if (collectionId) {
+    const preloadedQuery = await (0, _loadSerializableQuery.default)(_BuyButtonIDQuery.default, {
+      collectionId
+    });
+    return /*#__PURE__*/_react.default.createElement(_index.BuyButtonPreloadedIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  if (collectionSlug) {
+    const preloadedQuery = await (0, _loadSerializableQuery.default)(_BuyButtonSlugQuery.default, {
+      collectionSlug
+    });
+    return /*#__PURE__*/_react.default.createElement(_index.BuyButtonPreloadedSlugQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  return null;
+}

package/dist/components/CartButton/index-server.d.ts

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

package/dist/components/CartButton/index-server.js

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

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

@@ -1,8 +1,14 @@
 import React from 'react';
-interface CartButton_publicProps {
+import { CartButtonQuery } from '__generated__/CartButtonQuery.graphql';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
+export interface CartButton_props {
     label?: string;
     buttonStyle?: string;
     children?: React.ReactNode;
 }
-declare const CartButtonQueryRenderer: (params: CartButton_publicProps) => React.JSX.Element;
-export default CartButtonQueryRenderer;
+type PreloadedQuery = SerializablePreloadedQuery<CartButtonQuery>;
+export declare function CartButtonPreloadedQueryRenderer({ preloadedQuery, ...rest }: CartButton_props & {
+    preloadedQuery: PreloadedQuery;
+}): React.JSX.Element;
+export default function CartButton(props: CartButton_props): React.JSX.Element;
+export {};

package/dist/components/CartButton/index.js

@@ -4,12 +4,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CartButtonPreloadedQueryRenderer = CartButtonPreloadedQueryRenderer;
+exports.default = CartButton;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRedux = require("react-redux");
 var _reactRelay = require("react-relay");
 var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
 var _Icons = require("../Icons");
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 var _CartButton_order, _CartButtonQuery;
 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); }
@@ -26,7 +28,7 @@ const cartButtonCount = order => {
 const openCart = () => ({
   type: 'OPEN_CART'
 });
-const CartButton = _ref => {
+function CartButtonComponent(_ref) {
   let {
     label,
     buttonStyle,
@@ -65,13 +67,24 @@ const CartButton = _ref => {
   }, children ? children : buttonStyle === 'icon' ? /*#__PURE__*/_react.default.createElement(_Icons.CartNew, null) : /*#__PURE__*/_react.default.createElement("span", {
     className: "cart-button__label"
   }, label || 'Cart')));
-};
-const CartButtonQueryRenderer = params => {
+}
+const query = _CartButtonQuery !== void 0 ? _CartButtonQuery : (_CartButtonQuery = require("../../__generated__/CartButtonQuery.graphql"), _CartButtonQuery.hash && _CartButtonQuery.hash !== "5c0da5849bf1215a9d1f264831830f71" && console.error("The definition of 'CartButtonQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButtonQuery);
+function CartButtonPreloadedQueryRenderer(_ref2) {
   var _data$viewer;
-  const data = (0, _reactRelay.useLazyLoadQuery)(_CartButtonQuery !== void 0 ? _CartButtonQuery : (_CartButtonQuery = require("../../__generated__/CartButtonQuery.graphql"), _CartButtonQuery.hash && _CartButtonQuery.hash !== "5c0da5849bf1215a9d1f264831830f71" && console.error("The definition of 'CartButtonQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButtonQuery), {});
-  return /*#__PURE__*/_react.default.createElement(CartButton, _extends({}, params, {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref2;
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
+  return /*#__PURE__*/_react.default.createElement(CartButtonComponent, _extends({}, rest, {
     order: ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.currentOrder) ?? null
   }));
-};
-var _default = CartButtonQueryRenderer;
-exports.default = _default;
+}
+function CartButton(props) {
+  var _data$viewer2;
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  return /*#__PURE__*/_react.default.createElement(CartButtonComponent, _extends({}, props, {
+    order: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : _data$viewer2.currentOrder) ?? null
+  }));
+}

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

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

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

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

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

@@ -1,7 +1,15 @@
 import React from 'react';
-interface CharacterViewer_props {
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery';
+import { CharacterViewerIDQuery } from '__generated__/CharacterViewerIDQuery.graphql';
+import { CharacterViewerSlugQuery } from '__generated__/CharacterViewerSlugQuery.graphql';
+export interface CharacterViewer_props {
     collectionId?: string;
     collectionSlug?: string;
 }
-declare function CharacterViewerQueryRenderer({ collectionId, collectionSlug, }: CharacterViewer_props): React.JSX.Element;
-export default CharacterViewerQueryRenderer;
+export declare function CharacterViewerPreloadedIDQueryRenderer({ preloadedQuery, ...rest }: CharacterViewer_props & {
+    preloadedQuery: SerializablePreloadedQuery<CharacterViewerIDQuery>;
+}): React.JSX.Element | null;
+export declare function CharacterViewerPreloadedSlugQueryRenderer({ preloadedQuery, ...rest }: CharacterViewer_props & {
+    preloadedQuery: SerializablePreloadedQuery<CharacterViewerSlugQuery>;
+}): React.JSX.Element | null;
+export default function CharacterViewer({ collectionId, collectionSlug, }: CharacterViewer_props): React.JSX.Element;

package/dist/components/CharacterViewer/index.js

@@ -4,7 +4,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CharacterViewerPreloadedIDQueryRenderer = CharacterViewerPreloadedIDQueryRenderer;
+exports.CharacterViewerPreloadedSlugQueryRenderer = CharacterViewerPreloadedSlugQueryRenderer;
+exports.default = CharacterViewer;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
@@ -12,10 +14,12 @@ var _utils = require("../../utils");
 var _Select = _interopRequireDefault(require("../Select"));
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
 var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
-var _CharacterViewer_collection, _CharacterViewer_family, _CharacterViewer_Query, _CharacterViewer_SlugQuery;
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
+var _CharacterViewer_collection, _CharacterViewer_family, _CharacterViewerIDQuery, _CharacterViewerSlugQuery;
 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); }
 function useSize() {
   const ref = (0, _react.useRef)(null);
   const [size, setSize] = _react.default.useState();
@@ -99,8 +103,8 @@ const StyleSelect = _ref => {
     onChange: handleChange
   });
 };
-function CharacterViewer(_ref3) {
-  var _collection$children, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$characterB3, _fontStyle$featureCha5, _fontStyle$featureCha6;
+function CharacterViewerComponent(_ref3) {
+  var _collection$children, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _fontStyle$characterB, _fontStyle$characterB2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$featureCha5, _fontStyle$characterB3, _fontStyle$featureCha6, _fontStyle$featureCha7, _fontStyle$featureCha8;
   let {
     collection: collectionKey
   } = _ref3;
@@ -159,6 +163,12 @@ function CharacterViewer(_ref3) {
     width: featureMonitorWidth
   } = useSize();
   if (!fontStyle) return null;
+  const characterVariants = (_fontStyle$featureCha5 = fontStyle.featureCharacters) === null || _fontStyle$featureCha5 === void 0 ? void 0 : _fontStyle$featureCha5.filter(_ref4 => {
+    let {
+      feature
+    } = _ref4;
+    return feature.startsWith('cv');
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer"
   }, allCollections.filter(coll => coll.collectionType === 'family').map(coll => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
@@ -194,11 +204,11 @@ function CharacterViewer(_ref3) {
     style: {
       '--width': blocksWidth
     }
-  }, (_fontStyle$characterB3 = fontStyle.characterBlocks) === null || _fontStyle$characterB3 === void 0 ? void 0 : _fontStyle$characterB3.map((_ref4, i) => {
+  }, (_fontStyle$characterB3 = fontStyle.characterBlocks) === null || _fontStyle$characterB3 === void 0 ? void 0 : _fontStyle$characterB3.map((_ref5, i) => {
     let {
       name,
       characters
-    } = _ref4;
+    } = _ref5;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "character-viewer__block",
       key: i
@@ -214,7 +224,7 @@ function CharacterViewer(_ref3) {
       onMouseEnter: () => setActiveCharacter(chars),
       "data-selected": selectedCharacter === chars
     }, chars))));
-  }))), (_fontStyle$featureCha5 = fontStyle.featureCharacters) !== null && _fontStyle$featureCha5 !== void 0 && _fontStyle$featureCha5.length ? /*#__PURE__*/_react.default.createElement("div", {
+  }))), (_fontStyle$featureCha6 = fontStyle.featureCharacters) !== null && _fontStyle$featureCha6 !== void 0 && _fontStyle$featureCha6.length ? /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__features-map"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__feature-monitor"
@@ -266,12 +276,17 @@ function CharacterViewer(_ref3) {
     style: {
       '--width': blocksWidth
     }
-  }, (_fontStyle$featureCha6 = fontStyle.featureCharacters) === null || _fontStyle$featureCha6 === void 0 ? void 0 : _fontStyle$featureCha6.map((_ref5, i) => {
+  }, (_fontStyle$featureCha7 = fontStyle.featureCharacters) === null || _fontStyle$featureCha7 === void 0 ? void 0 : (_fontStyle$featureCha8 = _fontStyle$featureCha7.filter(_ref6 => {
+    let {
+      feature
+    } = _ref6;
+    return !feature.startsWith('cv');
+  })) === null || _fontStyle$featureCha8 === void 0 ? void 0 : _fontStyle$featureCha8.map((_ref7, i) => {
     let {
       name,
       feature,
       characters
-    } = _ref5;
+    } = _ref7;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "character-viewer__block",
       key: i
@@ -290,40 +305,92 @@ function CharacterViewer(_ref3) {
       onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
       "data-selected": (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[0]) === chars && (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[1]) === feature
     }, chars))));
-  }))) : null);
+  }), characterVariants !== null && characterVariants !== void 0 && characterVariants.length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__block",
+    key: "cv"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__block__name"
+  }, "Character Variants"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "character-viewer__block__characters",
+    style: {
+      ...style
+    },
+    onMouseLeave: handleFeatureCharacterMouseLeave
+  }, characterVariants.flatMap((_ref8, i) => {
+    let {
+      feature,
+      characters
+    } = _ref8;
+    return characters.map((chars, j) => /*#__PURE__*/_react.default.createElement("div", {
+      key: `${i}${j}`,
+      style: {
+        fontFeatureSettings: `'${feature}' 1`
+      },
+      onClick: () => setSelectedFeatureCharacter([chars, feature]),
+      onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
+      "data-selected": (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[0]) === chars && (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[1]) === feature
+    }, chars));
+  }))) : null)) : null);
 }
 _CharacterViewer_family !== void 0 ? _CharacterViewer_family : (_CharacterViewer_family = require("../../__generated__/CharacterViewer_family.graphql"), _CharacterViewer_family.hash && _CharacterViewer_family.hash !== "5f4b83f16d13a07812c8dcb035fbf47c" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family);
-function CharacterViewerIdQueryRenderer(_ref6) {
+const idQuery = _CharacterViewerIDQuery !== void 0 ? _CharacterViewerIDQuery : (_CharacterViewerIDQuery = require("../../__generated__/CharacterViewerIDQuery.graphql"), _CharacterViewerIDQuery.hash && _CharacterViewerIDQuery.hash !== "f90b09a4df6d95307b0a5d5fda487cdc" && console.error("The definition of 'CharacterViewerIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerIDQuery);
+function CharacterViewerIdQueryRenderer(_ref9) {
   let {
     collectionId
-  } = _ref6;
-  const data = (0, _reactRelay.useLazyLoadQuery)(_CharacterViewer_Query !== void 0 ? _CharacterViewer_Query : (_CharacterViewer_Query = require("../../__generated__/CharacterViewer_Query.graphql"), _CharacterViewer_Query.hash && _CharacterViewer_Query.hash !== "10b58f0e5e086adbcd2a0d4cd44c442c" && console.error("The definition of 'CharacterViewer_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_Query), {
+  } = _ref9;
+  const data = (0, _reactRelay.useLazyLoadQuery)(idQuery, {
     collectionId
   });
   if (!data.node) return null;
-  return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
+  return /*#__PURE__*/_react.default.createElement(CharacterViewerComponent, {
     collection: data.node
   });
 }
-function CharacterViewerSlugQueryRenderer(_ref7) {
+function CharacterViewerPreloadedIDQueryRenderer(_ref10) {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref10;
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
+  if (!data.node) return null;
+  return /*#__PURE__*/_react.default.createElement(CharacterViewerComponent, _extends({}, rest, {
+    collection: data.node
+  }));
+}
+function CharacterViewerSlugQueryRenderer(_ref11) {
   var _data$viewer, _data$viewer$slug;
   let {
     collectionSlug
-  } = _ref7;
-  const data = (0, _reactRelay.useLazyLoadQuery)(_CharacterViewer_SlugQuery !== void 0 ? _CharacterViewer_SlugQuery : (_CharacterViewer_SlugQuery = require("../../__generated__/CharacterViewer_SlugQuery.graphql"), _CharacterViewer_SlugQuery.hash && _CharacterViewer_SlugQuery.hash !== "de903e7c2640562aee374a900e089c9c" && console.error("The definition of 'CharacterViewer_SlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_SlugQuery), {
+  } = _ref11;
+  const data = (0, _reactRelay.useLazyLoadQuery)(_CharacterViewerSlugQuery !== void 0 ? _CharacterViewerSlugQuery : (_CharacterViewerSlugQuery = require("../../__generated__/CharacterViewerSlugQuery.graphql"), _CharacterViewerSlugQuery.hash && _CharacterViewerSlugQuery.hash !== "afa08a8f050e0434308892fea6e3c267" && console.error("The definition of 'CharacterViewerSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerSlugQuery), {
     collectionSlug
   });
   const collection = data === null || data === void 0 ? void 0 : (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$slug = _data$viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.fontCollection;
   if (!collection) return null;
-  return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
+  return /*#__PURE__*/_react.default.createElement(CharacterViewerComponent, {
     collection: collection
   });
 }
-function CharacterViewerQueryRenderer(_ref8) {
+function CharacterViewerPreloadedSlugQueryRenderer(_ref12) {
+  var _data$viewer2, _data$viewer2$slug;
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref12;
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
+  const collection = data === null || data === void 0 ? void 0 : (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$slug = _data$viewer2.slug) === null || _data$viewer2$slug === void 0 ? void 0 : _data$viewer2$slug.fontCollection;
+  if (!collection) return null;
+  return /*#__PURE__*/_react.default.createElement(CharacterViewerComponent, _extends({}, rest, {
+    collection: collection
+  }));
+}
+function CharacterViewer(_ref13) {
   let {
     collectionId,
     collectionSlug
-  } = _ref8;
+  } = _ref13;
   if (collectionId) {
     return /*#__PURE__*/_react.default.createElement(CharacterViewerIdQueryRenderer, {
       collectionId: collectionId
@@ -335,6 +402,4 @@ function CharacterViewerQueryRenderer(_ref8) {
     });
   }
   throw new Error('CharacterViewer expected either a collectionId or collectionSlug prop');
-}
-var _default = CharacterViewerQueryRenderer;
-exports.default = _default;
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CharacterViewer_props } from './index';
+export default function CharacterViewer({ collectionId, collectionSlug, ...rest }: CharacterViewer_props): Promise<React.JSX.Element | null>;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CharacterViewer;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _CharacterViewerIDQuery = _interopRequireDefault(require("../../__generated__/CharacterViewerIDQuery.graphql"));
+var _CharacterViewerSlugQuery = _interopRequireDefault(require("../../__generated__/CharacterViewerSlugQuery.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 CharacterViewer(_ref) {
+  let {
+    collectionId,
+    collectionSlug,
+    ...rest
+  } = _ref;
+  if (collectionId) {
+    const preloadedQuery = await (0, _loadSerializableQuery.default)(_CharacterViewerIDQuery.default, {
+      collectionId
+    });
+    return /*#__PURE__*/_react.default.createElement(_index.CharacterViewerPreloadedIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  if (collectionSlug) {
+    const preloadedQuery = await (0, _loadSerializableQuery.default)(_CharacterViewerSlugQuery.default, {
+      collectionSlug
+    });
+    return /*#__PURE__*/_react.default.createElement(_index.CharacterViewerPreloadedSlugQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  return null;
+}

package/dist/components/FontdueProvider/FontdueProviderClientComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Store } from 'redux';
+import { Config } from '../ConfigContext';
+import { FontdueAction, FontdueState } from '../../reducer';
+import { Components } from '../ComponentsContext';
+export interface FontdueProvider_props {
+    children?: React.ReactNode;
+    url: string;
+    stripeIntegration?: 'payment-element' | 'card-element';
+    config?: Config;
+    components?: Components;
+    store?: Store<FontdueState, FontdueAction>;
+}
+export default function FontdueProviderClientComponent({ children, url, stripeIntegration, config, components, store, }: FontdueProvider_props): React.JSX.Element;

package/dist/components/FontdueProvider/FontdueProviderClientComponent.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FontdueProviderClientComponent;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _reactRelay = require("react-relay");
+var _environment = require("../../relay/environment");
+var _ConfigContext = _interopRequireWildcard(require("../ConfigContext"));
+var _reducer = require("../../reducer");
+var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
+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 FontdueProviderClientComponent(_ref) {
+  let {
+    children,
+    url,
+    stripeIntegration,
+    config,
+    components,
+    store
+  } = _ref;
+  const environment = (0, _environment.useCurrentEnvironment)({
+    url,
+    stripeIntegration
+  });
+  const configValue = (0, _ConfigContext.makeConfig)(config);
+  const storeRef = (0, _react.useRef)(store ?? (0, _reducer.createDefaultStore)(config));
+  return /*#__PURE__*/_react.default.createElement(_reactRelay.RelayEnvironmentProvider, {
+    environment: environment
+  }, /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+    store: storeRef.current
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_ConfigContext.default.Provider, {
+    value: configValue
+  }, /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Provider, {
+    value: components ?? {}
+  }, children)))));
+}

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

@@ -1,15 +1,5 @@
 import React from 'react';
-import { Store } from 'redux';
-import { Config } from '../ConfigContext';
-import { Components } from '../ComponentsContext';
-import { FontdueAction, FontdueState } from '../../reducer';
-export interface FontdueProvider_props {
-    children?: React.ReactNode;
-    url: string;
-    stripeIntegration?: 'payment-element' | 'card-element';
-    config?: Config;
-    components?: Components;
-    store?: Store<FontdueState, FontdueAction>;
-}
-declare const FontdueProvider: ({ children, url, stripeIntegration, config, components, store, }: FontdueProvider_props) => React.JSX.Element;
+import { FontdueProvider_props } from './FontdueProviderClientComponent';
+export { FontdueProvider_props } from './FontdueProviderClientComponent';
+declare const FontdueProvider: ({ children, ...rest }: FontdueProvider_props) => React.JSX.Element;
 export default FontdueProvider;