fontdue-js 1.12.4 → 2.0.0-alpha2

package/dist/components/Cart/index.js

@@ -11,69 +11,32 @@ var _reactRedux = require("react-redux");
 var _CartOrder = _interopRequireDefault(require("./CartOrder"));
 var _EmptyCart = _interopRequireDefault(require("./EmptyCart"));
 var _StripeProvider = _interopRequireDefault(require("../StripeProvider"));
-var _Cart_viewer, _CartQuery;
+var _CartQuery;
 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 CartBase = _ref => {
-  let {
-    status,
+function Cart() {
+  const {
     viewer
-  } = _ref;
+  } = (0, _reactRelay.useLazyLoadQuery)(_CartQuery !== void 0 ? _CartQuery : (_CartQuery = require("../../__generated__/CartQuery.graphql"), _CartQuery.hash && _CartQuery.hash !== "b74f61f6b7a71c169b202770100937ca" && console.error("The definition of 'CartQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartQuery), {});
+  const cartOpen = (0, _reactRedux.useSelector)(state => state.cartOpen);
   const {
     currentOrder
   } = viewer;
-  if (!currentOrder) return /*#__PURE__*/_react.default.createElement(_EmptyCart.default, {
-    status: status
-  });
-  return /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
-    viewer: viewer,
-    requireClientSecret: false
-  }, /*#__PURE__*/_react.default.createElement(_CartOrder.default, {
-    viewer: viewer,
-    order: currentOrder,
-    status: status
-  }));
-};
-const CartTransitionBase = _ref2 => {
-  let {
-    cartOpen,
-    ...props
-  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_Transition.default, {
     in: cartOpen,
     timeout: 200
-  }, status => /*#__PURE__*/_react.default.createElement(CartBase, _extends({
-    status: status
-  }, props)));
-};
-const CartTransition = (0, _reactRelay.createFragmentContainer)(CartTransitionBase, {
-  viewer: _Cart_viewer !== void 0 ? _Cart_viewer : (_Cart_viewer = require("../../__generated__/Cart_viewer.graphql"), _Cart_viewer.hash && _Cart_viewer.hash !== "f8014219785183b543a2133a9ff912b0" && console.error("The definition of 'Cart_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Cart_viewer)
-});
-const CartQueryRenderer = () => {
-  const cartOpen = (0, _reactRedux.useSelector)(state => state.cartOpen);
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    query: _CartQuery !== void 0 ? _CartQuery : (_CartQuery = require("../../__generated__/CartQuery.graphql"), _CartQuery.hash && _CartQuery.hash !== "310dc24fc7f5886c3ddb7cc7b8c0f4a2" && console.error("The definition of 'CartQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartQuery),
-    variables: {},
-    render: _ref3 => {
-      let {
-        error,
-        props
-      } = _ref3;
-      if (error) {
-        console.error(error);
-        return null;
-      }
-      if (props) {
-        return /*#__PURE__*/_react.default.createElement(CartTransition, {
-          viewer: props.viewer,
-          cartOpen: cartOpen
-        });
-      }
-      return null;
-    }
+  }, status => {
+    if (!currentOrder) return /*#__PURE__*/_react.default.createElement(_EmptyCart.default, {
+      status: status
+    });
+    return /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
+      viewer: viewer,
+      requireClientSecret: false
+    }, /*#__PURE__*/_react.default.createElement(_CartOrder.default, {
+      viewer: viewer,
+      order: currentOrder,
+      status: status
+    }));
   });
-};
-var _default = CartQueryRenderer;
+}
+var _default = Cart;
 exports.default = _default;

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

@@ -1,4 +1,4 @@
-import { Checkout_UpdateOrderErrors } from '__generated__/Checkout_UpdateOrderErrors.graphql';
+import { Checkout_UpdateOrderErrors$data } from '__generated__/Checkout_UpdateOrderErrors.graphql';
 export interface Customer {
     name: string | null;
     email: string | null;
@@ -17,7 +17,7 @@ export interface Identity {
     zip: string | null;
     vatNumber: string | null;
 }
-export declare type UpdateOrderErrors = Omit<Checkout_UpdateOrderErrors, ' $refType'>;
+export type UpdateOrderErrors = Omit<Checkout_UpdateOrderErrors$data, ' $fragmentType'>;
 export interface CartItemChangeInput {
     id: string;
     licenseSelections: SelectionInput[];

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

@@ -4,5 +4,5 @@ interface CartButton_publicProps {
     buttonStyle?: string;
     children?: React.ReactNode;
 }
-declare const CartButtonQueryRenderer: React.FC<CartButton_publicProps>;
+declare const CartButtonQueryRenderer: (params: CartButton_publicProps) => React.JSX.Element;
 export default CartButtonQueryRenderer;

package/dist/components/CartButton/index.js

@@ -25,15 +25,16 @@ const cartButtonCount = order => {
 const openCart = () => ({
   type: 'OPEN_CART'
 });
-const CartButtonBase = _ref => {
+const CartButton = _ref => {
   let {
     label,
     buttonStyle,
-    order,
+    order: orderKey,
     children
   } = _ref;
+  const order = (0, _reactRelay.useFragment)(_CartButton_order !== void 0 ? _CartButton_order : (_CartButton_order = require("../../__generated__/CartButton_order.graphql"), _CartButton_order.hash && _CartButton_order.hash !== "fe52953705bed993f9f94c1ae33d801a" && console.error("The definition of 'CartButton_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButton_order), orderKey);
+  const [count, setCount] = (0, _react.useState)(0);
   const dispatch = (0, _reactRedux.useDispatch)();
-  const count = cartButtonCount(order);
   const handleClick = (0, _react.useCallback)(() => {
     if (count > 0) {
       dispatch({
@@ -43,6 +44,10 @@ const CartButtonBase = _ref => {
     }
     dispatch(openCart());
   }, [count, dispatch]);
+  (0, _react.useEffect)(() => {
+    // set count only on the client, because on the server it's always gonna be zero
+    setCount(cartButtonCount(order));
+  }, [order, setCount]);
   if (!order) return null;
   if (order.stripeCharge && order.stripeCharge.paid) return null;
   return /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Consumer, null, components => components.CartButton ? /*#__PURE__*/_react.default.createElement(components.CartButton, {
@@ -60,33 +65,12 @@ const CartButtonBase = _ref => {
     className: "cart-button__label"
   }, label || 'Cart')));
 };
-const CartButton = (0, _reactRelay.createFragmentContainer)(CartButtonBase, {
-  order: _CartButton_order !== void 0 ? _CartButton_order : (_CartButton_order = require("../../__generated__/CartButton_order.graphql"), _CartButton_order.hash && _CartButton_order.hash !== "fe52953705bed993f9f94c1ae33d801a" && console.error("The definition of 'CartButton_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButton_order)
-});
 const CartButtonQueryRenderer = params => {
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    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),
-    variables: {},
-    render: _ref2 => {
-      let {
-        error,
-        props
-      } = _ref2;
-      if (error) {
-        console.error(error);
-        return null;
-      }
-      if (props) {
-        var _props$viewer;
-        return /*#__PURE__*/_react.default.createElement(CartButton, _extends({}, params, {
-          order: ((_props$viewer = props.viewer) === null || _props$viewer === void 0 ? void 0 : _props$viewer.currentOrder) ?? null
-        }));
-      }
-      return null;
-    }
-  });
+  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, {
+    order: ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.currentOrder) ?? null
+  }));
 };
 var _default = CartButtonQueryRenderer;
 exports.default = _default;

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

@@ -3,5 +3,5 @@ interface CharacterViewer_props {
     collectionId?: string;
     collectionSlug?: string;
 }
-declare const CharacterViewerQueryRenderer: React.FC<CharacterViewer_props>;
+declare function CharacterViewerQueryRenderer({ collectionId, collectionSlug, }: CharacterViewer_props): React.JSX.Element;
 export default CharacterViewerQueryRenderer;

package/dist/components/CharacterViewer/index.js

@@ -135,6 +135,9 @@ const CharacterViewerComponent = _ref3 => {
   const [selectedFeatureCharacter, setSelectedFeatureCharacter] = (0, _react.useState)();
   const [activeFeatureCharacter, setActiveFeatureCharacter] = (0, _react.useState)([(fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$featureCha = fontStyle.featureCharacters) === null || _fontStyle$featureCha === void 0 ? void 0 : (_fontStyle$featureCha2 = _fontStyle$featureCha[0]) === null || _fontStyle$featureCha2 === void 0 ? void 0 : _fontStyle$featureCha2.characters[0]) ?? '', fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$featureCha3 = fontStyle.featureCharacters) === null || _fontStyle$featureCha3 === void 0 ? void 0 : (_fontStyle$featureCha4 = _fontStyle$featureCha3[0]) === null || _fontStyle$featureCha4 === void 0 ? void 0 : _fontStyle$featureCha4.feature]);
   const visibleFeatureCharacter = activeFeatureCharacter ?? selectedFeatureCharacter;
+  const featureUnicodeDecimal = visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0].split('').map(char => char.charCodeAt(0).toString(10)).join(', ');
+  const featureUnicodeHex = visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0].split('').map(char => char.charCodeAt(0).toString(16).padStart(4, '0')).join(', ');
+  const featureHtmlEntities = visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0].split('').map(char => `&#x${char.charCodeAt(0).toString(16)};`).join('');
   const handleMouseLeave = () => {
     if (selectedCharacter) setActiveCharacter(undefined);
   };
@@ -250,7 +253,13 @@ const CharacterViewerComponent = _ref3 => {
       fontStyleId,
       variableSettings
     }
-  })), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacter[0].split('').map(char => char.charCodeAt(0).toString(10)).join(', ')), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacter[0].split('').map(char => char.charCodeAt(0).toString(16).padStart(4, '0')).join(', ')), /*#__PURE__*/_react.default.createElement("span", null, "OpenType feature"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacter[1]), /*#__PURE__*/_react.default.createElement("span", null, "HTML entities"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacter[0].split('').map(char => `&#x${char.charCodeAt(0).toString(16)};`).join(''))))), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", {
+    title: featureUnicodeDecimal
+  }, featureUnicodeDecimal), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", {
+    title: featureUnicodeHex
+  }, featureUnicodeHex), /*#__PURE__*/_react.default.createElement("span", null, "OpenType feature"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacter[1]), /*#__PURE__*/_react.default.createElement("span", null, "HTML entities"), /*#__PURE__*/_react.default.createElement("span", {
+    title: featureHtmlEntities
+  }, featureHtmlEntities)))), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer_blocks",
     style: {
       '--width': blocksWidth
@@ -285,52 +294,48 @@ _CharacterViewer_family !== void 0 ? _CharacterViewer_family : (_CharacterViewer
 const CharacterViewer = (0, _reactRelay.createFragmentContainer)(CharacterViewerComponent, {
   collection: _CharacterViewer_collection !== void 0 ? _CharacterViewer_collection : (_CharacterViewer_collection = require("../../__generated__/CharacterViewer_collection.graphql"), _CharacterViewer_collection.hash && _CharacterViewer_collection.hash !== "2f49d241268129a888942889cad0bebb" && console.error("The definition of 'CharacterViewer_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_collection)
 });
-const CharacterViewerQueryRenderer = _ref6 => {
+function CharacterViewerIdQueryRenderer(_ref6) {
+  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), {
+    collectionId
+  });
+  if (!data.node) return null;
+  return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
+    collection: data.node
+  });
+}
+function CharacterViewerSlugQueryRenderer(_ref7) {
+  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), {
+    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, {
+    collection: collection
+  });
+}
+function CharacterViewerQueryRenderer(_ref8) {
   let {
     collectionId,
     collectionSlug
-  } = _ref6;
-  const environment = (0, _reactRelay.useRelayEnvironment)();
+  } = _ref8;
   if (collectionId) {
-    return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-      query: _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),
-      variables: {
-        collectionId
-      },
-      environment: environment,
-      render: _ref7 => {
-        let {
-          props
-        } = _ref7;
-        const node = props === null || props === void 0 ? void 0 : props.node;
-        if (!node) return null;
-        return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
-          collection: node
-        });
-      }
+    return /*#__PURE__*/_react.default.createElement(CharacterViewerIdQueryRenderer, {
+      collectionId: collectionId
     });
   }
   if (collectionSlug) {
-    return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-      query: _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),
-      variables: {
-        collectionSlug
-      },
-      environment: environment,
-      render: _ref8 => {
-        var _props$viewer, _props$viewer$slug;
-        let {
-          props
-        } = _ref8;
-        const collection = props === null || props === void 0 ? void 0 : (_props$viewer = props.viewer) === null || _props$viewer === void 0 ? void 0 : (_props$viewer$slug = _props$viewer.slug) === null || _props$viewer$slug === void 0 ? void 0 : _props$viewer$slug.fontCollection;
-        if (!collection) return null;
-        return /*#__PURE__*/_react.default.createElement(CharacterViewer, {
-          collection: collection
-        });
-      }
+    return /*#__PURE__*/_react.default.createElement(CharacterViewerSlugQueryRenderer, {
+      collectionSlug: collectionSlug
     });
   }
-  throw new Error('Unable to render CharacterViewer without a collectionId or collectionSlug');
-};
+  throw new Error('CharacterViewer expected either a collectionId or collectionSlug prop');
+}
 var _default = CharacterViewerQueryRenderer;
 exports.default = _default;

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

@@ -1,4 +1,4 @@
 import React from 'react';
-declare type InputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type InputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 declare const Checkbox: React.FC<InputProps>;
 export default Checkbox;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CollectionAa_product$key } from '__generated__/CollectionAa_product.graphql';
+interface CollectionAa_props {
+    product: CollectionAa_product$key | null;
+}
+export declare const CollectionAa: ({ product: productKey }: CollectionAa_props) => React.JSX.Element | null;
+interface CollectionAaQueryRenderer_props {
+    collectionId: string;
+}
+declare function CollectionAaQueryRenderer({ collectionId }: CollectionAaQueryRenderer_props): React.JSX.Element;
+export default CollectionAaQueryRenderer;

package/dist/components/CollectionAa/index.js

@@ -3,58 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CollectionAaFragment = void 0;
+exports.default = exports.CollectionAa = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
 var _FontStyle = _interopRequireDefault(require("../FontStyle"));
 var _CollectionAa_product, _CollectionAa_Query;
 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 CollectionAaBase = _ref => {
+const CollectionAa = _ref => {
   let {
-    product
+    product: productKey
   } = _ref;
+  const product = (0, _reactRelay.useFragment)(_CollectionAa_product !== void 0 ? _CollectionAa_product : (_CollectionAa_product = require("../../__generated__/CollectionAa_product.graphql"), _CollectionAa_product.hash && _CollectionAa_product.hash !== "c6b0113fe8474166dab3649c41880d84" && console.error("The definition of 'CollectionAa_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_product), productKey);
   let fontStyle;
-  if (product.__typename === 'Bundle') {
-    fontStyle = product.fontStyles[0];
-  } else {
+  if ((product === null || product === void 0 ? void 0 : product.__typename) === 'Bundle') {
+    var _product$fontStyles;
+    fontStyle = (_product$fontStyles = product.fontStyles) === null || _product$fontStyles === void 0 ? void 0 : _product$fontStyles[0];
+  } else if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection') {
     fontStyle = product.featureStyle;
   }
+  if (!fontStyle) return null;
   return /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
     fontStyle: fontStyle
   }, /*#__PURE__*/_react.default.createElement("span", null, "A"), /*#__PURE__*/_react.default.createElement("span", null, "a"));
 };
-const CollectionAaFragment = (0, _reactRelay.createFragmentContainer)(CollectionAaBase, {
-  product: _CollectionAa_product !== void 0 ? _CollectionAa_product : (_CollectionAa_product = require("../../__generated__/CollectionAa_product.graphql"), _CollectionAa_product.hash && _CollectionAa_product.hash !== "6322983997385dc8b7be1d2a52b74996" && console.error("The definition of 'CollectionAa_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_product)
-});
-exports.CollectionAaFragment = CollectionAaFragment;
-const CollectionAaQueryRenderer = _ref2 => {
+exports.CollectionAa = CollectionAa;
+function CollectionAaQueryRenderer(_ref2) {
   let {
-    collectionId,
-    ...rest
+    collectionId
   } = _ref2;
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    query: _CollectionAa_Query !== void 0 ? _CollectionAa_Query : (_CollectionAa_Query = require("../../__generated__/CollectionAa_Query.graphql"), _CollectionAa_Query.hash && _CollectionAa_Query.hash !== "fbe1f59d074d964464c71ea00d2bd90f" && console.error("The definition of 'CollectionAa_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_Query),
-    variables: {
-      collectionId
-    },
-    render: _ref3 => {
-      let {
-        error,
-        props
-      } = _ref3;
-      if (error) {
-        console.error(error);
-        return null;
-      }
-      if (props) {
-        return /*#__PURE__*/_react.default.createElement(CollectionAaFragment, _extends({}, rest, props));
-      }
-      return null;
-    }
+  const data = (0, _reactRelay.useLazyLoadQuery)(_CollectionAa_Query !== void 0 ? _CollectionAa_Query : (_CollectionAa_Query = require("../../__generated__/CollectionAa_Query.graphql"), _CollectionAa_Query.hash && _CollectionAa_Query.hash !== "fbe1f59d074d964464c71ea00d2bd90f" && console.error("The definition of 'CollectionAa_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_Query), {
+    collectionId
   });
-};
+  return /*#__PURE__*/_react.default.createElement(CollectionAa, data);
+}
 var _default = CollectionAaQueryRenderer;
 exports.default = _default;

package/dist/components/ComponentsContext.d.ts

@@ -1,21 +1,17 @@
 import React from 'react';
-import { Download_order } from '../__generated__/Download_order.graphql';
+import { Download_order$data } from '../__generated__/Download_order.graphql';
 export interface Download_moduleProps {
     open: boolean;
     dismiss: () => void;
-    order: Download_order;
+    order: Download_order$data;
     downloadFormRef: React.Ref<HTMLFormElement>;
 }
 export interface CartButton_moduleProps {
     count: number;
-    innerProps: {
-        onClick: () => void;
-    };
+    innerProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
 export interface BuyButton_moduleProps {
-    innerProps: {
-        onClick: () => void;
-    };
+    innerProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
 export interface SelectButton_moduleProps {
     productId: string;
@@ -26,12 +22,22 @@ export interface SelectButton_moduleProps {
         price: React.ReactNode;
     };
 }
+export interface PrecartCta_moduleProps {
+    onClick: () => void;
+    subtotal: {
+        amount: number;
+        currency: string;
+    };
+}
+export interface PrecartTopBar_moduleProps {
+    backToBrowse: () => void;
+}
 export interface Components {
-    BuyButton?: React.ComponentType<BuyButton_moduleProps>;
-    CartButton?: React.ComponentType<CartButton_moduleProps>;
+    BuyButton?: (props: BuyButton_moduleProps) => JSX.Element;
+    CartButton?: (props: CartButton_moduleProps) => JSX.Element;
     Download?: React.ComponentType<Download_moduleProps>;
-    PrecartCta?: React.Component;
-    PrecartTopBar?: React.Component;
+    PrecartCta?: React.ComponentType<PrecartCta_moduleProps>;
+    PrecartTopBar?: React.ComponentType<PrecartTopBar_moduleProps>;
     SelectButton?: React.ComponentType<SelectButton_moduleProps>;
 }
 declare const ComponentsContext: React.Context<Components>;

package/dist/components/ConfigContext.d.ts

@@ -9,7 +9,7 @@ export interface Config {
     storeModal?: StoreModalConfig;
     typeTester?: TypeTesterConfig;
 }
-export declare const makeConfig: (config?: Config | undefined) => {
+export declare const makeConfig: (config?: Config) => {
     typeTester: {
         autofitOnChange: boolean;
         truncate: boolean;
@@ -50,12 +50,12 @@ export declare const makeConfig: (config?: Config | undefined) => {
         } | undefined;
     };
     form: {
-        checkboxStyle: "cross" | "check";
+        checkboxStyle: "check" | "cross";
     };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
         indexExcludeTags: string[] | undefined;
-        productLicensesPosition: "bottom" | "top";
+        productLicensesPosition: "top" | "bottom";
     };
 };
 declare const _default: React.Context<{
@@ -99,12 +99,12 @@ declare const _default: React.Context<{
         } | undefined;
     };
     form: {
-        checkboxStyle: "cross" | "check";
+        checkboxStyle: "check" | "cross";
     };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
         indexExcludeTags: string[] | undefined;
-        productLicensesPosition: "bottom" | "top";
+        productLicensesPosition: "top" | "bottom";
     };
 }>;
 export default _default;

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

@@ -1,7 +1,7 @@
-import { CouponText_coupon } from '__generated__/CouponText_coupon.graphql';
+import { CouponText_coupon$data } from '__generated__/CouponText_coupon.graphql';
 interface CouponText_props {
-    coupon: CouponText_coupon;
+    coupon: CouponText_coupon$data;
     subtract?: number;
 }
-declare const _default: import("react-relay").Container<CouponText_props>;
+declare const _default: import("react-relay").Container<Omit<CouponText_props, "relay">>;
 export default _default;

package/dist/components/Family/FamilyList.d.ts

@@ -1,7 +1,7 @@
-import { FamilyList_node } from '__generated__/FamilyList_node.graphql';
+import { FamilyList_node$data } from '__generated__/FamilyList_node.graphql';
 interface FamilyList_props {
-    node: FamilyList_node;
+    node: FamilyList_node$data;
     text?: string;
 }
-declare const _default: import("react-relay").Container<FamilyList_props>;
+declare const _default: import("react-relay").Container<Omit<FamilyList_props, "relay">>;
 export default _default;

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

@@ -1,7 +1,7 @@
-import { Family_node } from '__generated__/Family_node.graphql';
+import { Family_node$data } from '__generated__/Family_node.graphql';
 interface FamilyBase_props {
-    node: Family_node;
+    node: Family_node$data;
     size?: string;
 }
-declare const Family: import("react-relay").Container<FamilyBase_props>;
+declare const Family: import("react-relay").Container<Omit<FamilyBase_props, "relay">>;
 export default Family;

package/dist/components/Family/index.js

@@ -47,10 +47,12 @@ const FamilyBase = _ref => {
     className: "font-family-block__select-button-element"
   }), precartOpen && !selected && /*#__PURE__*/_react.default.createElement("div", {
     className: "font-family-block__price"
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
   }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
     sku: node.sku,
     format: _Price.PriceFormat.Truncated
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "font-family-block__label"
   }, /*#__PURE__*/_react.default.createElement("h3", {
     className: "font-family-block__name"

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

@@ -1,6 +1,6 @@
 import React from 'react';
-interface FontFamiliesQueryRenderer_props {
+interface FontFamilies_props {
     collectionId: string;
 }
-declare const FontFamiliesQueryRenderer: React.FC<FontFamiliesQueryRenderer_props>;
-export default FontFamiliesQueryRenderer;
+declare function FontFamilies({ collectionId }: FontFamilies_props): React.JSX.Element | null;
+export default FontFamilies;

package/dist/components/FontFamilies/index.js

@@ -9,16 +9,28 @@ var _reactRedux = require("react-redux");
 var _reactRelay = require("react-relay");
 var _productState = require("../Root/productState");
 var _Family = _interopRequireDefault(require("../Family"));
-var _FontFamilies_node, _FontFamiliesQuery;
+var _FontFamiliesQuery;
 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 FontFamiliesBase = _ref => {
+function FontFamilies(_ref) {
   var _node$families;
   let {
-    node
+    collectionId
   } = _ref;
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const store = (0, _reactRedux.useStore)();
+  (0, _react.useEffect)(() => {
+    // populate as soon as BuyButton mounts. this prepares the StoreModal
+    // to be able to apply discounts as soon as the user clicks "BUY" on
+    // a style. (this is necessary if the bundle price is <= single style price)
+    (0, _productState.populateProductState)(store, environment, collectionId);
+  }, [collectionId, store, environment]);
+  const {
+    node
+  } = (0, _reactRelay.useLazyLoadQuery)(_FontFamiliesQuery !== void 0 ? _FontFamiliesQuery : (_FontFamiliesQuery = require("../../__generated__/FontFamiliesQuery.graphql"), _FontFamiliesQuery.hash && _FontFamiliesQuery.hash !== "191c350df0d719005af0d73c96884d40" && console.error("The definition of 'FontFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamiliesQuery), {
+    collectionId
+  });
   if (!node) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "font-families"
@@ -31,41 +43,6 @@ const FontFamiliesBase = _ref => {
     key: index,
     node: family
   }))));
-};
-const FontFamilies = (0, _reactRelay.createFragmentContainer)(FontFamiliesBase, {
-  node: _FontFamilies_node !== void 0 ? _FontFamilies_node : (_FontFamilies_node = require("../../__generated__/FontFamilies_node.graphql"), _FontFamilies_node.hash && _FontFamilies_node.hash !== "472d13cd7851f2c92785410aae4acf45" && console.error("The definition of 'FontFamilies_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamilies_node)
-});
-const FontFamiliesQueryRenderer = _ref2 => {
-  let {
-    collectionId,
-    ...rest
-  } = _ref2;
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  const store = (0, _reactRedux.useStore)();
-  (0, _react.useEffect)(() => {
-    // populate as soon as BuyButton mounts. this prepares the StoreModal
-    // to be able to apply discounts as soon as the user clicks "BUY" on
-    // a style. (this is necessary if the bundle price is <= single style price)
-    (0, _productState.populateProductState)(store, environment, collectionId);
-  }, [collectionId]);
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    query: _FontFamiliesQuery !== void 0 ? _FontFamiliesQuery : (_FontFamiliesQuery = require("../../__generated__/FontFamiliesQuery.graphql"), _FontFamiliesQuery.hash && _FontFamiliesQuery.hash !== "7ebbd2608511980e4e81ef400af80774" && console.error("The definition of 'FontFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamiliesQuery),
-    variables: {
-      collectionId
-    },
-    render: _ref3 => {
-      let {
-        error,
-        props
-      } = _ref3;
-      if (error) return /*#__PURE__*/_react.default.createElement("div", null, error.message);
-      if (props) {
-        return /*#__PURE__*/_react.default.createElement(FontFamilies, _extends({}, rest, props));
-      }
-      return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
-    }
-  });
-};
-var _default = FontFamiliesQueryRenderer;
+}
+var _default = FontFamilies;
 exports.default = _default;