fontdue-js 2.0.0-alpha5 → 2.0.0-alpha6

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.0.0
+
+- __Breaking change__: This is a major upgrade to support React 18 concurrent mode, including changes to how we resolve data using Suspense via Relay. Upgrading meant we require some new features only available in React 18. But this change also means that Fontdue components can now fully resolve during server-side rendering (e.g. in Next.js), making for much smoother initial page loads.
+
 ## 1.12.3
 
 - Fix Stripe integration for Apple Pay

package/README.md

@@ -2,35 +2,20 @@
 
 This package exports [Fontdue.js](https://docs.fontdue.com/fontduejs) components for React projects.
 
+## Installation
+
+``` shell
+npm install fontdue-js@latest
+```
+
 ## Usage
 
-1. Wrap the root of your project with the [`FontdueProvider`](#fontdueprovider) component. For example in a Next.js app, add it to your `_app.tsx`.
+1. Wrap the root of your project with the [`FontdueProvider`](#fontdueprovider) component. For example in a Next.js app, add it to your `app/layout.tsx` or `pages/_app.tsx`.
 2. Include the `url` property with your Fontdue store URL.
 3. Render the [`StoreModal`](#storemodal) component so that is it available on every page.
 4. Import the `fontdue-js/fontdue.css` CSS file. (This example uses Next.js)
 
-### Example
-
-```tsx
-import type { AppProps } from 'next/app';
-import Head from 'next/head';
-import React from 'react';
-import FontdueProvider from 'fontdue-js/FontdueProvider';
-import StoreModal from 'fontdue-js/StoreModal';
-import 'fontdue-js/fontdue.css';
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <FontdueProvider url="https://example.fontdue.com" config={{}}>
-      <Component {...pageProps} />
-
-      <StoreModal />
-    </FontdueProvider>
-  );
-}
-
-export default MyApp;
-```
+For details on integrating into your Next.js app, read our [Next.js guide](https://docs.fontdue.com/nextjs)
 
 ## IDs
 
@@ -45,7 +30,7 @@ You may alternatively specify a `collectionSlug` for these components, which can
 
 ## `FontdueProvider`
 
-The FontdueProvider provides necessary context for all the other Fontdue.js components, so it must be an ancestor of all other components. See example above for usage.
+The FontdueProvider provides necessary context for all the other Fontdue.js components, so it must be an ancestor of all other components. See example in our [guide](https://docs.fontdue.com/nextjs).
 
 ```tsx
 import FontdueProvider from 'fontdue-js/FontdueProvider';

package/dist/components/Cart/CartItem/VariableTextInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface VariableTextInput_props {
+    defaultValue: string | null;
+    onChange: (value: {
+        variableText: string | null | undefined;
+    }) => void;
+    placeholder: string;
+}
+export default function VariableTextInput({ defaultValue, onChange, placeholder, ...rest }: VariableTextInput_props): React.JSX.Element;
+export {};

package/dist/components/Cart/CartItem/VariableTextInput.js

@@ -3,103 +3,77 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+exports.default = VariableTextInput;
+var _react = _interopRequireWildcard(require("react"));
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-class VariableTextInput extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "submit", () => {
-      this.setState({
-        editing: false
-      });
-      if (this.state.value) {
-        if (this.props.defaultValue !== this.state.value) {
-          this.props.onChange({
-            variableText: this.state.value
-          });
-          this.setState({
-            submitting: true
-          });
-        }
-      } else {
-        this.setState({
-          value: this.props.defaultValue,
-          editing: !this.props.defaultValue
+function VariableTextInput(_ref) {
+  let {
+    defaultValue,
+    onChange,
+    placeholder,
+    ...rest
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(defaultValue || '');
+  const [editing, setEditing] = (0, _react.useState)(!defaultValue);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const inputRef = (0, _react.useRef)(null);
+  function submit() {
+    setEditing(false);
+    if (value) {
+      if (defaultValue !== value) {
+        onChange({
+          variableText: value
         });
+        setSubmitting(true);
       }
-    });
-    _defineProperty(this, "handleBlur", () => this.submit());
-    _defineProperty(this, "handleSubmit", e => {
-      e.preventDefault();
-      this.submit();
-    });
-    _defineProperty(this, "handleChange", e => this.setState({
-      value: e.target.value
-    }));
-    _defineProperty(this, "handleEditButtonClick", () => {
-      this.setState({
-        editing: true
-      }, () => {
-        if (this.input && this.input.current) {
-          this.input.current.focus();
-        }
-      });
-    });
-    this.state = {
-      value: props.defaultValue || '',
-      editing: !props.defaultValue,
-      submitting: false
-    };
-    this.input = /*#__PURE__*/_react.default.createRef();
-  }
-  componentWillReceiveProps(nextProps) {
-    if (this.state.submitting && nextProps.defaultValue !== this.props.defaultValue) {
-      this.setState({
-        submitting: false,
-        value: nextProps.defaultValue,
-        editing: !nextProps.defaultValue
-      });
+    } else {
+      setValue(defaultValue || '');
+      setEditing(!defaultValue);
     }
   }
-  render() {
-    const {
-      defaultValue,
-      onChange,
-      placeholder,
-      ...rest
-    } = this.props;
-    const {
-      editing,
-      submitting
-    } = this.state;
-    if (submitting) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "cart-item__license-variable__loading"
-      }, "Updating...");
-    }
+  function handleBlur() {
+    submit();
+  }
+  function handleSubmit(e) {
+    e.preventDefault();
+    submit();
+  }
+  function handleChange(e) {
+    setValue(e.target.value);
+  }
+  function handleEditButtonClick() {
+    setEditing(true);
+  }
+  (0, _react.useEffect)(() => {
     if (editing) {
-      return /*#__PURE__*/_react.default.createElement("form", {
-        onSubmit: this.handleSubmit
-      }, /*#__PURE__*/_react.default.createElement("input", _extends({
-        ref: this.input,
-        className: "cart-item__license-variable__text-input",
-        "data-empty": !this.state.value,
-        type: "text",
-        value: this.state.value,
-        onChange: this.handleChange,
-        onBlur: this.handleBlur,
-        placeholder: `Enter ${placeholder}`
-      }, rest)));
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
-    return /*#__PURE__*/_react.default.createElement("button", {
-      className: "cart-item__license-variable__text-input-button",
-      type: "button",
-      onClick: this.handleEditButtonClick
-    }, defaultValue, " ", /*#__PURE__*/_react.default.createElement("span", null, "Edit"));
+  }, [editing]);
+  if (submitting) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "cart-item__license-variable__loading"
+    }, "Updating...");
+  }
+  if (editing) {
+    return /*#__PURE__*/_react.default.createElement("form", {
+      onSubmit: handleSubmit
+    }, /*#__PURE__*/_react.default.createElement("input", _extends({
+      ref: inputRef,
+      className: "cart-item__license-variable__text-input",
+      "data-empty": !value,
+      type: "text",
+      value: value,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      placeholder: `Enter ${placeholder}`
+    }, rest)));
   }
-}
-var _default = VariableTextInput;
-exports.default = _default;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: "cart-item__license-variable__text-input-button",
+    type: "button",
+    onClick: handleEditButtonClick
+  }, defaultValue, " ", /*#__PURE__*/_react.default.createElement("span", null, "Edit"));
+}

package/dist/components/Cart/CartItem/index.d.ts

@@ -1,10 +1,11 @@
-import { CartItem_node$data } from '../../../__generated__/CartItem_node.graphql';
-import { CartItem_viewer$data } from '../../../__generated__/CartItem_viewer.graphql';
+import React from 'react';
+import { CartItem_node$key } from '../../../__generated__/CartItem_node.graphql';
+import { CartItem_viewer$key } from '../../../__generated__/CartItem_viewer.graphql';
 import { CartItemChangeInput } from '../types';
 interface CartItem_props {
-    viewer: CartItem_viewer$data;
-    node: CartItem_node$data;
+    viewer: CartItem_viewer$key;
+    node: CartItem_node$key;
     onChange: (value: CartItemChangeInput) => void;
 }
-declare const CartItem: import("react-relay").Container<Omit<CartItem_props, "relay">>;
-export default CartItem;
+export default function CartItem({ node: nodeKey, viewer: viewerKey, onChange, }: CartItem_props): React.JSX.Element | null;
+export {};

package/dist/components/Cart/CartItem/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = CartItem;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _Price = _interopRequireDefault(require("../../Price"));
@@ -13,7 +13,7 @@ var _Icons = require("../../Icons");
 var _VariableTextInput = _interopRequireDefault(require("./VariableTextInput"));
 var _VariableTableAmounts = _interopRequireDefault(require("../../VariableTableAmounts"));
 var _Stylesheet = _interopRequireDefault(require("../../Stylesheet"));
-var _CartItem_license, _CartItem_variable, _CartItem_licenseSelection, _CartItem_product, _CartItem_node, _CartItem_viewer;
+var _CartItem_node, _CartItem_viewer, _CartItem_license, _CartItem_variable, _CartItem_licenseSelection, _CartItem_product;
 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; }
@@ -246,13 +246,15 @@ const productCss = product => {
   if (product.__typename === 'FontStyle') return (_product$family = product.family) === null || _product$family === void 0 ? void 0 : _product$family.cssUrl;
   if (product.__typename === 'FontCollection') return (_product$featureStyle = product.featureStyle) === null || _product$featureStyle === void 0 ? void 0 : (_product$featureStyle2 = _product$featureStyle.family) === null || _product$featureStyle2 === void 0 ? void 0 : _product$featureStyle2.cssUrl;
 };
-const CartItemBase = _ref10 => {
+function CartItem(_ref10) {
   var _node$sku$product, _node$sku$product2, _node$sku$product2$va, _node$sku$product3;
   let {
-    node,
-    viewer,
+    node: nodeKey,
+    viewer: viewerKey,
     onChange
   } = _ref10;
+  const node = (0, _reactRelay.useFragment)(_CartItem_node !== void 0 ? _CartItem_node : (_CartItem_node = require("../../../__generated__/CartItem_node.graphql"), _CartItem_node.hash && _CartItem_node.hash !== "ef096db653a67b0bba9b2ff3cfdad957" && console.error("The definition of 'CartItem_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_node), nodeKey);
+  const viewer = (0, _reactRelay.useFragment)(_CartItem_viewer !== void 0 ? _CartItem_viewer : (_CartItem_viewer = require("../../../__generated__/CartItem_viewer.graphql"), _CartItem_viewer.hash && _CartItem_viewer.hash !== "f15fed25380b024244e25b4c411183a2" && console.error("The definition of 'CartItem_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_viewer), viewerKey);
   const [closeButtonIsHovered, setCloseButtonIsHovered] = (0, _react.useState)(false);
   const closeButtonMouseEnter = () => {
     setCloseButtonIsHovered(true);
@@ -304,14 +306,8 @@ const CartItemBase = _ref10 => {
     orderItem: node,
     onAddLicense: license => onChange(inputFromLicenseAddition(node, license))
   }));
-};
+}
 _CartItem_license !== void 0 ? _CartItem_license : (_CartItem_license = require("../../../__generated__/CartItem_license.graphql"), _CartItem_license.hash && _CartItem_license.hash !== "3d3c0b942c4cb8683b41bb52ab637339" && console.error("The definition of 'CartItem_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_license);
 _CartItem_variable !== void 0 ? _CartItem_variable : (_CartItem_variable = require("../../../__generated__/CartItem_variable.graphql"), _CartItem_variable.hash && _CartItem_variable.hash !== "3e4dbfb04637c3535a85a0b920aa148b" && console.error("The definition of 'CartItem_variable' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_variable);
 _CartItem_licenseSelection !== void 0 ? _CartItem_licenseSelection : (_CartItem_licenseSelection = require("../../../__generated__/CartItem_licenseSelection.graphql"), _CartItem_licenseSelection.hash && _CartItem_licenseSelection.hash !== "623e900c36a5bb9ad347ddcad84598e3" && console.error("The definition of 'CartItem_licenseSelection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_licenseSelection);
-_CartItem_product !== void 0 ? _CartItem_product : (_CartItem_product = require("../../../__generated__/CartItem_product.graphql"), _CartItem_product.hash && _CartItem_product.hash !== "228788dc0026bbd807c5e299620953c0" && console.error("The definition of 'CartItem_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_product);
-const CartItem = (0, _reactRelay.createFragmentContainer)(CartItemBase, {
-  node: _CartItem_node !== void 0 ? _CartItem_node : (_CartItem_node = require("../../../__generated__/CartItem_node.graphql"), _CartItem_node.hash && _CartItem_node.hash !== "ef096db653a67b0bba9b2ff3cfdad957" && console.error("The definition of 'CartItem_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_node),
-  viewer: _CartItem_viewer !== void 0 ? _CartItem_viewer : (_CartItem_viewer = require("../../../__generated__/CartItem_viewer.graphql"), _CartItem_viewer.hash && _CartItem_viewer.hash !== "f15fed25380b024244e25b4c411183a2" && console.error("The definition of 'CartItem_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_viewer)
-});
-var _default = CartItem;
-exports.default = _default;
+_CartItem_product !== void 0 ? _CartItem_product : (_CartItem_product = require("../../../__generated__/CartItem_product.graphql"), _CartItem_product.hash && _CartItem_product.hash !== "228788dc0026bbd807c5e299620953c0" && console.error("The definition of 'CartItem_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_product);

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { OrderItemInput } from '../../__generated__/CartStateUpdateMutation.graphql';
-import { CartState_order$data } from '../../__generated__/CartState_order.graphql';
+import { CartState_order$key } from '../../__generated__/CartState_order.graphql';
 interface CartStateProps {
-    order: CartState_order$data;
+    order: CartState_order$key;
     children: (props: {
         onUpdateOrder: (item: OrderItemInput) => void;
         onRemoveDiscount: () => void;
@@ -10,5 +10,5 @@ interface CartStateProps {
         errors: any;
     }) => React.ReactElement<any>;
 }
-declare const _default: import("react-relay").Container<Omit<CartStateProps, "relay">>;
-export default _default;
+export default function CartState({ order: orderKey, children }: CartStateProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/components/Cart/CartState.js

@@ -3,17 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = CartState;
 var _react = require("react");
 var _reactRelay = require("react-relay");
 var _CartStateUpdateMutation, _CartStateRemoveDiscountMutation, _CartState_order;
 const orderChangeMutation = _CartStateUpdateMutation !== void 0 ? _CartStateUpdateMutation : (_CartStateUpdateMutation = require("../../__generated__/CartStateUpdateMutation.graphql"), _CartStateUpdateMutation.hash && _CartStateUpdateMutation.hash !== "0074879fb29466e5a947a8776a86c5f6" && console.error("The definition of 'CartStateUpdateMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateUpdateMutation);
 const removeDiscountMutation = _CartStateRemoveDiscountMutation !== void 0 ? _CartStateRemoveDiscountMutation : (_CartStateRemoveDiscountMutation = require("../../__generated__/CartStateRemoveDiscountMutation.graphql"), _CartStateRemoveDiscountMutation.hash && _CartStateRemoveDiscountMutation.hash !== "a1ce9ee438492737524704a36bbf6713" && console.error("The definition of 'CartStateRemoveDiscountMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateRemoveDiscountMutation);
-const CartState = _ref => {
+function CartState(_ref) {
   let {
-    order,
+    order: orderKey,
     children
   } = _ref;
+  const order = (0, _reactRelay.useFragment)(_CartState_order !== void 0 ? _CartState_order : (_CartState_order = require("../../__generated__/CartState_order.graphql"), _CartState_order.hash && _CartState_order.hash !== "a4267a6dccade27c1af1b1a71922a10f" && console.error("The definition of 'CartState_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartState_order), orderKey);
   const [error, setError] = (0, _react.useState)(null);
   const [errors, setErrors] = (0, _react.useState)(null);
   const environment = (0, _reactRelay.useRelayEnvironment)();
@@ -77,8 +78,4 @@ const CartState = _ref => {
     errors: errors,
     error: error
   });
-};
-var _default = (0, _reactRelay.createFragmentContainer)(CartState, {
-  order: _CartState_order !== void 0 ? _CartState_order : (_CartState_order = require("../../__generated__/CartState_order.graphql"), _CartState_order.hash && _CartState_order.hash !== "a4267a6dccade27c1af1b1a71922a10f" && console.error("The definition of 'CartState_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartState_order)
-});
-exports.default = _default;
+}

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

@@ -1,9 +1,10 @@
-import { CartTotals_order$data } from '../../__generated__/CartTotals_order.graphql';
+import React from 'react';
+import { CartTotals_order$key } from '../../__generated__/CartTotals_order.graphql';
 interface CartTotalsProps {
-    order: CartTotals_order$data;
+    order: CartTotals_order$key;
     onRemoveDiscount?: () => void;
     allowDiscountRemoval?: boolean;
     hideTotal?: boolean;
 }
-declare const _default: import("react-relay").Container<Omit<CartTotalsProps, "relay">>;
-export default _default;
+export default function CartTotals({ order: orderKey, onRemoveDiscount, allowDiscountRemoval, hideTotal, }: CartTotalsProps): React.JSX.Element;
+export {};

package/dist/components/Cart/CartTotals.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = CartTotals;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
 var _relayRuntime = require("relay-runtime");
@@ -33,13 +33,14 @@ const PriceBlock = _ref => {
     invert: invert
   }), belowPrice));
 };
-const CartTotals = _ref2 => {
+function CartTotals(_ref2) {
   let {
-    order,
+    order: orderKey,
     onRemoveDiscount,
     allowDiscountRemoval = true,
     hideTotal = false
   } = _ref2;
+  const order = (0, _reactRelay.useFragment)(_CartTotals_order !== void 0 ? _CartTotals_order : (_CartTotals_order = require("../../__generated__/CartTotals_order.graphql"), _CartTotals_order.hash && _CartTotals_order.hash !== "698ea8bf4dd91473e057e19df6dc51b1" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order), orderKey);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__price-blocks",
     "data-has-discount": Boolean(order.discount),
@@ -77,8 +78,4 @@ const CartTotals = _ref2 => {
     price: order.total,
     "data-line": "total"
   }));
-};
-var _default = (0, _reactRelay.createFragmentContainer)(CartTotals, {
-  order: _CartTotals_order !== void 0 ? _CartTotals_order : (_CartTotals_order = require("../../__generated__/CartTotals_order.graphql"), _CartTotals_order.hash && _CartTotals_order.hash !== "698ea8bf4dd91473e057e19df6dc51b1" && console.error("The definition of 'CartTotals_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartTotals_order)
-});
-exports.default = _default;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IdentityBox_identity$key } from '__generated__/IdentityBox_identity.graphql';
+interface IdentityBox_props {
+    identity: IdentityBox_identity$key;
+    title: React.ReactNode;
+    children: {
+        icon: React.ReactNode;
+    };
+    onClick: () => void;
+}
+export default function IdentityBox({ identity: identityKey, title, onClick, children: { icon }, }: IdentityBox_props): React.JSX.Element;
+export {};

package/dist/components/Cart/IdentityBox.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = IdentityBox;
 var _reactRelay = require("react-relay");
 var _react = _interopRequireDefault(require("react"));
 var _IdentityBox_identity;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const IdentityBox = _ref => {
+function IdentityBox(_ref) {
   let {
-    identity,
+    identity: identityKey,
     title,
     onClick,
     children: {
       icon
     }
   } = _ref;
+  const identity = (0, _reactRelay.useFragment)(_IdentityBox_identity !== void 0 ? _IdentityBox_identity : (_IdentityBox_identity = require("../../__generated__/IdentityBox_identity.graphql"), _IdentityBox_identity.hash && _IdentityBox_identity.hash !== "d93d9cb6f2c86580fb57b4de6782ec9d" && console.error("The definition of 'IdentityBox_identity' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _IdentityBox_identity), identityKey);
   return /*#__PURE__*/_react.default.createElement("button", {
     className: "cart__review__button",
     type: "button",
@@ -34,8 +35,4 @@ const IdentityBox = _ref => {
   }, identity.phoneFormatted), identity.vatNumber && /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__review__section"
   }, "VAT: ", identity.vatNumber));
-};
-var _default = (0, _reactRelay.createFragmentContainer)(IdentityBox, {
-  identity: _IdentityBox_identity !== void 0 ? _IdentityBox_identity : (_IdentityBox_identity = require("../../__generated__/IdentityBox_identity.graphql"), _IdentityBox_identity.hash && _IdentityBox_identity.hash !== "d93d9cb6f2c86580fb57b4de6782ec9d" && console.error("The definition of 'IdentityBox_identity' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _IdentityBox_identity)
-});
-exports.default = _default;
+}

package/dist/components/CharacterViewer/index.js

@@ -12,7 +12,7 @@ var _utils = require("../../utils");
 var _Select = _interopRequireDefault(require("../Select"));
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
 var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
-var _CharacterViewer_family, _CharacterViewer_collection, _CharacterViewer_Query, _CharacterViewer_SlugQuery;
+var _CharacterViewer_collection, _CharacterViewer_family, _CharacterViewer_Query, _CharacterViewer_SlugQuery;
 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; }
@@ -99,11 +99,12 @@ const StyleSelect = _ref => {
     onChange: handleChange
   });
 };
-const CharacterViewerComponent = _ref3 => {
+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;
   let {
-    collection
+    collection: collectionKey
   } = _ref3;
+  const collection = (0, _reactRelay.useFragment)(_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), collectionKey);
   const allCollections = [collectionInfo(collection)].concat(((_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(collectionInfo)) ?? []);
   const initialFontStyle = collection.featureStyle ?? ((_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle[0]) ?? ((_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : (_collection$children3 = _collection$children2[0]) === null || _collection$children3 === void 0 ? void 0 : (_collection$children4 = _collection$children3.fontStyles) === null || _collection$children4 === void 0 ? void 0 : _collection$children4[0]);
   let initialVariableSettings;
@@ -290,11 +291,8 @@ const CharacterViewerComponent = _ref3 => {
       "data-selected": (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[0]) === chars && (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[1]) === feature
     }, chars))));
   }))) : 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);
-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)
-});
 function CharacterViewerIdQueryRenderer(_ref6) {
   let {
     collectionId

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

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

package/dist/components/CouponText/index.js

@@ -3,18 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = CouponText;
 var _reactRelay = require("react-relay");
 var _react = _interopRequireWildcard(require("react"));
 var _Price = require("../Price");
 var _CouponText_coupon;
 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 CouponText = _ref => {
+function CouponText(_ref) {
   let {
-    coupon,
+    coupon: couponKey,
     subtract = 0
   } = _ref;
+  const coupon = (0, _reactRelay.useFragment)(_CouponText_coupon !== void 0 ? _CouponText_coupon : (_CouponText_coupon = require("../../__generated__/CouponText_coupon.graphql"), _CouponText_coupon.hash && _CouponText_coupon.hash !== "1d8116645b5f96a820af21db9e15f375" && console.error("The definition of 'CouponText_coupon' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CouponText_coupon), couponKey);
   if (coupon.type === 'credit') {
     const amountRemaining = {
       ...coupon.creditAmountRemaining,
@@ -29,8 +30,4 @@ const CouponText = _ref => {
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, `${coupon.percentAmount}% off`);
   }
   return null;
-};
-var _default = (0, _reactRelay.createFragmentContainer)(CouponText, {
-  coupon: _CouponText_coupon !== void 0 ? _CouponText_coupon : (_CouponText_coupon = require("../../__generated__/CouponText_coupon.graphql"), _CouponText_coupon.hash && _CouponText_coupon.hash !== "1d8116645b5f96a820af21db9e15f375" && console.error("The definition of 'CouponText_coupon' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CouponText_coupon)
-});
-exports.default = _default;
+}

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

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

package/dist/components/Family/FamilyList.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = FamilyList;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
 var _FontStyle = _interopRequireDefault(require("../FontStyle"));
@@ -13,12 +13,13 @@ const styleName = (normal, localized) => {
   if (normal === localized) return normal;
   return `${normal} ${localized}`;
 };
-const FamilyList = _ref => {
+function FamilyList(_ref) {
   var _node$fontStyles;
   let {
-    node,
+    node: nodeKey,
     text
   } = _ref;
+  const node = (0, _reactRelay.useFragment)(_FamilyList_node !== void 0 ? _FamilyList_node : (_FamilyList_node = require("../../__generated__/FamilyList_node.graphql"), _FamilyList_node.hash && _FamilyList_node.hash !== "3e59cb2493f7c235fe19c70689ca2fc6" && console.error("The definition of 'FamilyList_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FamilyList_node), nodeKey);
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: "font-family-block__list",
     style: {
@@ -30,8 +31,4 @@ const FamilyList = _ref => {
     key: i,
     className: "font-family-block__list__item"
   }, /*#__PURE__*/_react.default.createElement("span", null, text || styleName(style.name, style.name_localized), " "))));
-};
-var _default = (0, _reactRelay.createFragmentContainer)(FamilyList, {
-  node: _FamilyList_node !== void 0 ? _FamilyList_node : (_FamilyList_node = require("../../__generated__/FamilyList_node.graphql"), _FamilyList_node.hash && _FamilyList_node.hash !== "3e59cb2493f7c235fe19c70689ca2fc6" && console.error("The definition of 'FamilyList_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FamilyList_node)
-});
-exports.default = _default;
+}