fontdue-js 1.12.4 → 2.0.0-alpha2

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { RelayProp } from 'react-relay';
-import { FontStyle_fontStyle } from '../../__generated__/FontStyle_fontStyle.graphql';
+import { FontStyle_fontStyle$data } from '../../__generated__/FontStyle_fontStyle.graphql';
 interface FontStyleProps {
-    fontStyle: FontStyle_fontStyle;
+    fontStyle: FontStyle_fontStyle$data;
     relay: RelayProp;
     Component?: 'div' | 'span' | 'li';
     style?: React.CSSProperties;
@@ -11,5 +11,5 @@ interface FontStyleProps {
         style: React.CSSProperties;
     }) => React.ReactNode) | React.ReactNode;
 }
-declare const _default: import("react-relay").Container<React.HTMLAttributes<HTMLDivElement | HTMLSpanElement> & FontStyleProps>;
+declare const _default: import("react-relay").Container<Omit<Omit<React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>, "children"> & FontStyleProps, "relay">>;
 export default _default;

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

@@ -1,12 +1,15 @@
 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, }: FontdueProvider_props) => JSX.Element;
+declare const FontdueProvider: ({ children, url, stripeIntegration, config, components, store, }: FontdueProvider_props) => React.JSX.Element;
 export default FontdueProvider;

package/dist/components/FontdueProvider/index.js

@@ -7,12 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
-var _redux = require("redux");
 var _Stylesheet = require("../Stylesheet");
 var _ConfigContext = _interopRequireWildcard(require("../ConfigContext"));
 var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
 var _TestModeBanner = _interopRequireDefault(require("../TestModeBanner"));
-var _reducer = _interopRequireDefault(require("../../reducer"));
+var _reducer = require("../../reducer");
 var _relayEnvironment = _interopRequireDefault(require("../../relay-environment"));
 var _ThemeConfig = _interopRequireDefault(require("../ThemeConfig"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,41 +23,26 @@ const FontdueProvider = _ref => {
     url,
     stripeIntegration,
     config,
-    components
+    components,
+    store
   } = _ref;
   const environment = (0, _react.useRef)((0, _relayEnvironment.default)({
     url,
     stripeIntegration
   }));
   const configValue = (0, _ConfigContext.makeConfig)(config);
-  const store = (0, _react.useRef)((0, _redux.createStore)(_reducer.default, {
-    selectedSkuIds: {},
-    // { [skuId]: Boolean }
-    licenseOptions: [],
-    cartOpen: false,
-    precartOpen: false,
-    collectionStyleSkus: {},
-    skuPrices: {},
-    collectionSkus: {},
-    stylesheets: [],
-    fetchedCollectionIds: [],
-    storeModalRoute: {
-      name: 'index',
-      variables: {
-        excludeTags: configValue.storeModal.indexExcludeTags
-      }
-    },
-    storeModalHistory: []
-  }));
+  const storeRef = (0, _react.useRef)(store ?? (0, _reducer.createDefaultStore)(config));
   return /*#__PURE__*/_react.default.createElement(_reactRelay.RelayEnvironmentProvider, {
     environment: environment.current
   }, /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
-    store: store.current
-  }, /*#__PURE__*/_react.default.createElement(_Stylesheet.StylesheetContainer, null), /*#__PURE__*/_react.default.createElement(_ThemeConfig.default, null), /*#__PURE__*/_react.default.createElement(_ConfigContext.default.Provider, {
+    store: storeRef.current
+  }, /*#__PURE__*/_react.default.createElement(_Stylesheet.StylesheetContainer, null), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_ThemeConfig.default, null), /*#__PURE__*/_react.default.createElement(_ConfigContext.default.Provider, {
     value: configValue
   }, /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Provider, {
     value: components ?? {}
-  }, /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), children))));
+  }, /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), children)))));
 };
 var _default = FontdueProvider;
 exports.default = _default;

package/dist/components/Icons/Align.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare function AlignCenter(): JSX.Element;
-export declare function AlignLeft(): JSX.Element;
-export declare function AlignRight(): JSX.Element;
+import React from 'react';
+export declare function AlignCenter(): React.JSX.Element;
+export declare function AlignLeft(): React.JSX.Element;
+export declare function AlignRight(): React.JSX.Element;

package/dist/components/Icons/ArrowDownRight.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const ArrowDownRight: () => JSX.Element;
+import React from 'react';
+declare const ArrowDownRight: () => React.JSX.Element;
 export default ArrowDownRight;

package/dist/components/Icons/ArrowLeft.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const ArrowLeft: () => JSX.Element;
+import React from 'react';
+declare const ArrowLeft: () => React.JSX.Element;
 export default ArrowLeft;

package/dist/components/Icons/ArrowRight.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const ArrowRight: () => JSX.Element;
+import React from 'react';
+declare const ArrowRight: () => React.JSX.Element;
 export default ArrowRight;

package/dist/components/Icons/CarrotDown.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CarrotDown: () => JSX.Element;
+import React from 'react';
+declare const CarrotDown: () => React.JSX.Element;
 export default CarrotDown;

package/dist/components/Icons/CarrotUp.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CarrotUp: () => JSX.Element;
+import React from 'react';
+declare const CarrotUp: () => React.JSX.Element;
 export default CarrotUp;

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Cart: () => JSX.Element;
+import React from 'react';
+declare const Cart: () => React.JSX.Element;
 export default Cart;

package/dist/components/Icons/CartNew.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Cart: () => JSX.Element;
+import React from 'react';
+declare const Cart: () => React.JSX.Element;
 export default Cart;

package/dist/components/Icons/Check.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Check: () => JSX.Element;
+import React from 'react';
+declare const Check: () => React.JSX.Element;
 export default Check;

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Checkbox: () => JSX.Element;
+import React from 'react';
+declare const Checkbox: () => React.JSX.Element;
 export default Checkbox;

package/dist/components/Icons/CheckboxChecked.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CheckboxChecked: () => JSX.Element;
+import React from 'react';
+declare const CheckboxChecked: () => React.JSX.Element;
 export default CheckboxChecked;

package/dist/components/Icons/CheckboxCrossed.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CheckboxCrossed: () => JSX.Element;
+import React from 'react';
+declare const CheckboxCrossed: () => React.JSX.Element;
 export default CheckboxCrossed;

package/dist/components/Icons/CircledCheck.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CircledCheck: () => JSX.Element;
+import React from 'react';
+declare const CircledCheck: () => React.JSX.Element;
 export default CircledCheck;

package/dist/components/Icons/CircledInfo.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CircledInfo: () => JSX.Element;
+import React from 'react';
+declare const CircledInfo: () => React.JSX.Element;
 export default CircledInfo;

package/dist/components/Icons/CircledMinus.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CircledMinus: () => JSX.Element;
+import React from 'react';
+declare const CircledMinus: () => React.JSX.Element;
 export default CircledMinus;

package/dist/components/Icons/ColorPicker.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const ColorPicker: () => JSX.Element;
+import React from 'react';
+declare const ColorPicker: () => React.JSX.Element;
 export default ColorPicker;

package/dist/components/Icons/CreditCard.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CreditCard: () => JSX.Element;
+import React from 'react';
+declare const CreditCard: () => React.JSX.Element;
 export default CreditCard;

package/dist/components/Icons/DownloadFonts.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const DownloadFonts: () => JSX.Element;
+import React from 'react';
+declare const DownloadFonts: () => React.JSX.Element;
 export default DownloadFonts;

package/dist/components/Icons/FrowningFace.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const FrowningFace: () => JSX.Element;
+import React from 'react';
+declare const FrowningFace: () => React.JSX.Element;
 export default FrowningFace;

package/dist/components/Icons/License.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const License: () => JSX.Element;
+import React from 'react';
+declare const License: () => React.JSX.Element;
 export default License;

package/dist/components/Icons/Receipt.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Receipt: () => JSX.Element;
+import React from 'react';
+declare const Receipt: () => React.JSX.Element;
 export default Receipt;

package/dist/components/Icons/User.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const User: () => JSX.Element;
+import React from 'react';
+declare const User: () => React.JSX.Element;
 export default User;

package/dist/components/Icons/X.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const X: () => JSX.Element;
+import React from 'react';
+declare const X: () => React.JSX.Element;
 export default X;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface NewsletterSignup_baseProps {
+interface NewsletterSignup_props {
     optInLabel?: string;
     successLabel?: string;
     buttonLabel?: string;
@@ -7,5 +7,5 @@ interface NewsletterSignup_baseProps {
     title?: string;
     intro?: string;
 }
-declare const NewsletterSignupFetcher: React.FC<NewsletterSignup_baseProps>;
-export default NewsletterSignupFetcher;
+declare function NewsletterSignup({ optInLabel: optInLabelProp, successLabel: successLabelProp, buttonLabel, optInCheckboxChecked, title, intro, }: NewsletterSignup_props): React.JSX.Element;
+export default NewsletterSignup;

package/dist/components/NewsletterSignup/index.js

@@ -8,24 +8,24 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _TextField = _interopRequireDefault(require("../TextField"));
 var _Check = _interopRequireDefault(require("../Icons/Check"));
-var _NewsletterSignupUpdateCustomerMutation, _NewsletterSignup_viewer, _NewsletterSignup_Query;
+var _NewsletterSignupUpdateCustomerMutation, _NewsletterSignup_Query;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const updateCustomerMutation = _NewsletterSignupUpdateCustomerMutation !== void 0 ? _NewsletterSignupUpdateCustomerMutation : (_NewsletterSignupUpdateCustomerMutation = require("../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql"), _NewsletterSignupUpdateCustomerMutation.hash && _NewsletterSignupUpdateCustomerMutation.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation);
-const NewsletterSignup = _ref => {
-  var _data$settings, _data$settings2;
+function NewsletterSignup(_ref) {
+  var _viewer$settings, _viewer$settings2;
   let {
     optInLabel: optInLabelProp,
     successLabel: successLabelProp,
     buttonLabel = 'Subscribe',
     optInCheckboxChecked = false,
     title,
-    intro,
-    viewer
+    intro
   } = _ref;
-  const data = (0, _reactRelay.useFragment)(_NewsletterSignup_viewer !== void 0 ? _NewsletterSignup_viewer : (_NewsletterSignup_viewer = require("../../__generated__/NewsletterSignup_viewer.graphql"), _NewsletterSignup_viewer.hash && _NewsletterSignup_viewer.hash !== "05823550a311988e999fd9b95cc39dac" && console.error("The definition of 'NewsletterSignup_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignup_viewer), viewer);
+  const {
+    viewer
+  } = (0, _reactRelay.useLazyLoadQuery)(_NewsletterSignup_Query !== void 0 ? _NewsletterSignup_Query : (_NewsletterSignup_Query = require("../../__generated__/NewsletterSignup_Query.graphql"), _NewsletterSignup_Query.hash && _NewsletterSignup_Query.hash !== "6b9f4a1620992851f85b89130eaa7bb0" && console.error("The definition of 'NewsletterSignup_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignup_Query), {});
   const [name, setName] = (0, _react.useState)('');
   const [email, setEmail] = (0, _react.useState)('');
   const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(optInCheckboxChecked);
@@ -69,8 +69,8 @@ const NewsletterSignup = _ref => {
     });
   };
   const disabled = submitting || !newsletterOptIn || !email || !name;
-  const optInLabel = optInLabelProp || (data === null || data === void 0 ? void 0 : (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : _data$settings.newsletterOptInLabel);
-  const successLabel = (successLabelProp || (data === null || data === void 0 ? void 0 : (_data$settings2 = data.settings) === null || _data$settings2 === void 0 ? void 0 : _data$settings2.newsletterSuccessLabel)) ?? 'Success!';
+  const optInLabel = optInLabelProp || (viewer === null || viewer === void 0 ? void 0 : (_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.newsletterOptInLabel);
+  const successLabel = (successLabelProp || (viewer === null || viewer === void 0 ? void 0 : (_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.newsletterSuccessLabel)) ?? 'Success!';
   if (submitted) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "newsletter-signup"
@@ -129,32 +129,9 @@ const NewsletterSignup = _ref => {
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "submit-button",
     disabled: disabled
-  }, submitting ? 'Submitting...' : buttonLabel, /*#__PURE__*/_react.default.createElement("span", {
+  }, submitting ? 'Submitting...' : buttonLabel, ' ', /*#__PURE__*/_react.default.createElement("span", {
     className: "submit-button__arrow"
   }, ' →')))));
-};
-const NewsletterSignupFetcher = params => {
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    query: _NewsletterSignup_Query !== void 0 ? _NewsletterSignup_Query : (_NewsletterSignup_Query = require("../../__generated__/NewsletterSignup_Query.graphql"), _NewsletterSignup_Query.hash && _NewsletterSignup_Query.hash !== "ede23ce8fe999201dacb066fcef009af" && console.error("The definition of 'NewsletterSignup_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignup_Query),
-    variables: {},
-    render: _ref3 => {
-      let {
-        props,
-        error
-      } = _ref3;
-      if (error) {
-        console.error(error);
-        // TODO: centralize error component, report to sentry
-        return null;
-      }
-      if (props) {
-        return /*#__PURE__*/_react.default.createElement(NewsletterSignup, _extends({}, params, props));
-      }
-      return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
-    }
-  });
-};
-var _default = NewsletterSignupFetcher;
+}
+var _default = NewsletterSignup;
 exports.default = _default;

package/dist/components/Precart/License.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { License_node$key } from '__generated__/License_node.graphql';
+interface License_props {
+    node: License_node$key;
+    selected: boolean;
+    onSelectLicense: (id: string, checked: boolean) => void;
+    onSelectLicenseOption: (id: string, variableId: string, optionId: string) => void;
+}
+declare const License: ({ node: nodeKey, selected, onSelectLicense, onSelectLicenseOption, }: License_props) => React.JSX.Element | null;
+export default License;

package/dist/components/Precart/License.js

@@ -5,19 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _reactRelay = require("react-relay");
+var _reactRedux = require("react-redux");
 var _react = _interopRequireDefault(require("react"));
 var _Icons = require("../Icons");
 var _License_node;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const LicenseBase = _ref => {
+const License = _ref => {
   let {
-    node,
+    node: nodeKey,
     selected,
     onSelectLicense,
-    selectedLicenseOptions,
     onSelectLicenseOption
   } = _ref;
+  const node = (0, _reactRelay.useFragment)(_License_node !== void 0 ? _License_node : (_License_node = require("../../__generated__/License_node.graphql"), _License_node.hash && _License_node.hash !== "215059eeecc274d540639b4247513ee2" && console.error("The definition of 'License_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _License_node), nodeKey);
   if (!node) return null;
+  const selectedLicenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
   const selectedOptions = selectedLicenseOptions.find(spec => spec.licenseId === node.id);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "pre-cart__license",
@@ -32,23 +34,24 @@ const LicenseBase = _ref => {
     type: "checkbox",
     checked: selected,
     value: node.id,
-    onChange: onSelectLicense.bind(null, node.id)
+    onChange: e => onSelectLicense(node.id, e.target.checked)
   })), selected && /*#__PURE__*/_react.default.createElement("a", {
     href: node.url,
     "aria-label": "Info",
     className: "pre-cart__license__icon",
     "data-label": "info"
   }, /*#__PURE__*/_react.default.createElement(_Icons.CircledInfo, null))), selected && /*#__PURE__*/_react.default.createElement("ul", null, node.variables && node.variables.map(variable => {
-    const selectedLicenseOption = selectedOptions.licenseOptions[variable.id];
+    var _variable$options, _variable$options$fin;
+    const selectedLicenseOption = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.licenseOptions[variable.id];
     if (variable.variableType === 'text') return null;
-    const selectedLicenseAmount = variable.options.find(option => option.id === selectedLicenseOption).amount;
+    const selectedLicenseAmount = variable === null || variable === void 0 ? void 0 : (_variable$options = variable.options) === null || _variable$options === void 0 ? void 0 : (_variable$options$fin = _variable$options.find(option => option.id === selectedLicenseOption)) === null || _variable$options$fin === void 0 ? void 0 : _variable$options$fin.amount;
     return /*#__PURE__*/_react.default.createElement("li", {
       key: variable.id
     }, /*#__PURE__*/_react.default.createElement("label", {
       className: "pre-cart__license__option"
     }, "\u21B3 ", selectedLicenseAmount, /*#__PURE__*/_react.default.createElement(_Icons.CarrotDown, null), /*#__PURE__*/_react.default.createElement("select", {
       value: selectedLicenseOption || '',
-      onChange: onSelectLicenseOption.bind(null, node.id, variable.id)
+      onChange: e => onSelectLicenseOption(node.id, variable.id, e.target.value)
     }, /*#__PURE__*/_react.default.createElement("option", {
       value: "",
       disabled: true
@@ -58,8 +61,5 @@ const LicenseBase = _ref => {
     }, option.amount)))));
   })));
 };
-const License = (0, _reactRelay.createFragmentContainer)(LicenseBase, {
-  node: _License_node !== void 0 ? _License_node : (_License_node = require("../../__generated__/License_node.graphql"), _License_node.hash && _License_node.hash !== "215059eeecc274d540639b4247513ee2" && console.error("The definition of 'License_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _License_node)
-});
 var _default = License;
 exports.default = _default;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type PrecartQueryRenderer_props = {
+    collectionId: string;
+};
+declare function PrecartQueryRenderer({ collectionId, ...rest }: PrecartQueryRenderer_props): React.JSX.Element;
+export default PrecartQueryRenderer;