fontdue-js 2.22.4 → 3.0.0-alpha1

package/dist/components/StoreModal/StoreModalFamilyButton.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FamilyButton;
-var _StoreModalFamilyButton_collection2 = _interopRequireDefault(require("../../__generated__/StoreModalFamilyButton_collection.graphql"));
-var _react = _interopRequireDefault(require("react"));
-var _reactRelay = require("react-relay");
-var _reactRedux = require("react-redux");
-var _SKUPrice = _interopRequireDefault(require("../SKUPrice"));
-var _Price = require("../Price");
-var _reducer = require("../../reducer");
-var _StoreModalFamilyButton = _interopRequireDefault(require("../elements/StoreModalFamilyButton"));
-var _FontStyle = _interopRequireDefault(require("../FontStyle"));
-var _useTotalStyles = _interopRequireDefault(require("../useTotalStyles"));
-var _utils = require("../../utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import _StoreModalFamilyButton_collection from "../../__generated__/StoreModalFamilyButton_collection.graphql.js";
+import React from 'react';
+import { graphql, useFragment } from 'react-relay';
+import { useSelector } from 'react-redux';
+import SKUPrice from '../SKUPrice/index.js';
+import { PriceFormat } from '../Price/index.js';
+import { isSelected } from '../../reducer.js';
+import StoreModalFamilyButtonElement from '../elements/StoreModalFamilyButton/index.js';
+import FontStyle from '../FontStyle/index.js';
+import useTotalStyles from '../useTotalStyles.js';
+import { pluralize } from '../../utils.js';
 const getFamilyType = collection => {
   if (collection.collectionType === 'superfamily') return 'Collection';
   return 'Family';
@@ -25,16 +18,16 @@ const getSuffix = collection => {
   if (collection.isVariableFont) return;
   return ' ' + getFamilyType(collection);
 };
-function FamilyButton(_ref) {
+export default function FamilyButton(_ref) {
   var _collection$featureSt, _collection$featureSt2;
   let {
     collection: collectionKey,
     onSelectSku,
     ...rest
   } = _ref;
-  const collection = (0, _reactRelay.useFragment)((_StoreModalFamilyButton_collection2.default.hash && _StoreModalFamilyButton_collection2.default.hash !== "3ca5466b4680374b74cf161a9bdef313" && console.error("The definition of 'StoreModalFamilyButton_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamilyButton_collection2.default), collectionKey);
-  const selector = collection.sku ? (0, _reducer.isSelected)(collection.sku.id) : () => false;
-  const selected = (0, _reactRedux.useSelector)(selector);
+  const collection = useFragment((_StoreModalFamilyButton_collection.hash && _StoreModalFamilyButton_collection.hash !== "3ca5466b4680374b74cf161a9bdef313" && console.error("The definition of 'StoreModalFamilyButton_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamilyButton_collection), collectionKey);
+  const selector = collection.sku ? isSelected(collection.sku.id) : () => false;
+  const selected = useSelector(selector);
   const handleClick = () => {
     if (!collection.sku) return;
     onSelectSku(collection.sku.id, !selected);
@@ -42,30 +35,30 @@ function FamilyButton(_ref) {
   const {
     totalStyles,
     variableFonts
-  } = (0, _useTotalStyles.default)({
+  } = useTotalStyles({
     fontCollection: collection
   });
   let label = [];
   if (totalStyles > 0) {
-    label.push((0, _utils.pluralize)(totalStyles, 'style'));
+    label.push(pluralize(totalStyles, 'style'));
   }
   if (variableFonts > 0) {
-    label.push((0, _utils.pluralize)(variableFonts, 'variable font'));
+    label.push(pluralize(variableFonts, 'variable font'));
   }
   const supportsEnglish = (_collection$featureSt = collection.featureStyle) === null || _collection$featureSt === void 0 ? void 0 : (_collection$featureSt2 = _collection$featureSt.supportedLanguages) === null || _collection$featureSt2 === void 0 ? void 0 : _collection$featureSt2.includes('en');
-  return /*#__PURE__*/_react.default.createElement(_StoreModalFamilyButton.default, _extends({
+  return /*#__PURE__*/React.createElement(StoreModalFamilyButtonElement, _extends({
     selected: selected,
     onClick: collection.sku ? handleClick : undefined,
     supportsEnglish: supportsEnglish ?? true
   }, rest), {
-    name: collection.featureStyle && supportsEnglish ? /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    name: collection.featureStyle && supportsEnglish ? /*#__PURE__*/React.createElement(FontStyle, {
       Component: "span",
       fontStyle: collection.featureStyle
-    }, collection.name, getSuffix(collection)) : /*#__PURE__*/_react.default.createElement("span", null, collection.name, " ", getSuffix(collection)),
+    }, collection.name, getSuffix(collection)) : /*#__PURE__*/React.createElement("span", null, collection.name, " ", getSuffix(collection)),
     label: label.join(', '),
-    price: collection.sku && /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+    price: collection.sku && /*#__PURE__*/React.createElement(SKUPrice, {
       sku: collection.sku,
-      format: _Price.PriceFormat.Truncated
+      format: PriceFormat.Truncated
     })
   });
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PreloadedQuery } from 'react-relay';
-import { StoreModalIndexQuery } from '__generated__/StoreModalIndexQuery.graphql';
+import { StoreModalIndexQuery } from '__generated__/StoreModalIndexQuery.graphql.js';
 interface StoreModalIndexProps {
     prepared: {
         indexQuery: PreloadedQuery<StoreModalIndexQuery>;

package/dist/components/StoreModal/StoreModalIndex.js

@@ -1,29 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _StoreModalIndexQuery2 = _interopRequireDefault(require("../../__generated__/StoreModalIndexQuery.graphql"));
-var _react = _interopRequireDefault(require("react"));
-var _reactRelay = require("react-relay");
-var _StoreModalPageContainer = _interopRequireDefault(require("../elements/StoreModalPageContainer"));
-var _StoreModalIndexItem = _interopRequireDefault(require("./StoreModalIndexItem"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _StoreModalIndexQuery from "../../__generated__/StoreModalIndexQuery.graphql.js";
+import React from 'react';
+import { graphql, usePreloadedQuery } from 'react-relay';
+import StoreModalPageContainer from '../elements/StoreModalPageContainer/index.js';
+import StoreModalIndexItem from './StoreModalIndexItem.js';
 const StoreModalIndex = _ref => {
   var _viewer$rootCollectio;
   let {
     prepared
   } = _ref;
-  const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalIndexQuery2.default.hash && _StoreModalIndexQuery2.default.hash !== "099c77808b41054885365ebe3eda03c8" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery2.default), prepared.indexQuery);
+  const data = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "099c77808b41054885365ebe3eda03c8" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
   const viewer = data.viewer;
   const edges = (viewer === null || viewer === void 0 ? void 0 : (_viewer$rootCollectio = viewer.rootCollections) === null || _viewer$rootCollectio === void 0 ? void 0 : _viewer$rootCollectio.edges) ?? [];
-  return /*#__PURE__*/_react.default.createElement(_StoreModalPageContainer.default, null, {
-    body: edges.map(edge => /*#__PURE__*/_react.default.createElement(_StoreModalIndexItem.default, {
+  return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
+    body: edges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexItem, {
       collection: edge.node,
       key: edge.node.id
     }))
   });
 };
-var _default = StoreModalIndex;
-exports.default = _default;
+export default StoreModalIndex;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StoreModalIndexItem_fontCollection$key } from '__generated__/StoreModalIndexItem_fontCollection.graphql';
+import { StoreModalIndexItem_fontCollection$key } from '__generated__/StoreModalIndexItem_fontCollection.graphql.js';
 interface StoreModalIndexItem_props {
     collection: StoreModalIndexItem_fontCollection$key;
 }

package/dist/components/StoreModal/StoreModalIndexItem.js

@@ -1,21 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _StoreModalIndexItem_fontCollection2 = _interopRequireDefault(require("../../__generated__/StoreModalIndexItem_fontCollection.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
-var _reactRelay = require("react-relay");
-var _StoreModalIndexItem = _interopRequireDefault(require("../elements/StoreModalIndexItem"));
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-var _FontStyle = _interopRequireDefault(require("../FontStyle"));
-var _useTotalStyles = _interopRequireDefault(require("../useTotalStyles"));
-var _utils = require("../../utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _StoreModalIndexItem_fontCollection from "../../__generated__/StoreModalIndexItem_fontCollection.graphql.js";
+import React, { useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import { graphql, useFragment } from 'react-relay';
+import StoreModalIndexItemElement from '../elements/StoreModalIndexItem/index.js';
+import ConfigContext from '../ConfigContext.js';
+import FontStyle from '../FontStyle/index.js';
+import useTotalStyles from '../useTotalStyles.js';
+import { getFeatureGlyphs, pluralize } from '../../utils.js';
 const StoreModalIndexItem = _ref => {
   var _data$featureStyle;
   let {
@@ -23,9 +14,9 @@ const StoreModalIndexItem = _ref => {
   } = _ref;
   const {
     storeModal: config
-  } = (0, _react.useContext)(_ConfigContext.default);
-  const data = (0, _reactRelay.useFragment)((_StoreModalIndexItem_fontCollection2.default.hash && _StoreModalIndexItem_fontCollection2.default.hash !== "8a990fad8dc50c9f00b391902e9bc482" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection2.default), collection);
-  const dispatch = (0, _reactRedux.useDispatch)();
+  } = useContext(ConfigContext);
+  const data = useFragment((_StoreModalIndexItem_fontCollection.hash && _StoreModalIndexItem_fontCollection.hash !== "8a990fad8dc50c9f00b391902e9bc482" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection), collection);
+  const dispatch = useDispatch();
   const handleClickProduct = productId => {
     dispatch({
       type: 'STORE_MODAL_NAVIGATE',
@@ -38,28 +29,27 @@ const StoreModalIndexItem = _ref => {
   const {
     totalStyles,
     variableFonts
-  } = (0, _useTotalStyles.default)({
+  } = useTotalStyles({
     fontCollection: data
   });
   let label = [];
   if (totalStyles > 0) {
-    label.push((0, _utils.pluralize)(totalStyles, 'style'));
+    label.push(pluralize(totalStyles, 'style'));
   }
   if (variableFonts > 0) {
-    label.push((0, _utils.pluralize)(variableFonts, 'variable font'));
+    label.push(pluralize(variableFonts, 'variable font'));
   }
-  return /*#__PURE__*/_react.default.createElement(_StoreModalIndexItem.default, {
+  return /*#__PURE__*/React.createElement(StoreModalIndexItemElement, {
     key: data.id,
     onClick: handleClickProduct.bind(null, data.id)
   }, {
-    aa: config.indexLayout === 'styled-aa' && (data.featureStyle ? /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    aa: config.indexLayout === 'styled-aa' && (data.featureStyle ? /*#__PURE__*/React.createElement(FontStyle, {
       fontStyle: data.featureStyle
-    }, (0, _utils.getFeatureGlyphs)((_data$featureStyle = data.featureStyle) === null || _data$featureStyle === void 0 ? void 0 : _data$featureStyle.supportedLanguages)) : null),
-    name: config.indexLayout === 'styled-font-names' ? data.featureStyle && /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    }, getFeatureGlyphs((_data$featureStyle = data.featureStyle) === null || _data$featureStyle === void 0 ? void 0 : _data$featureStyle.supportedLanguages)) : null),
+    name: config.indexLayout === 'styled-font-names' ? data.featureStyle && /*#__PURE__*/React.createElement(FontStyle, {
       fontStyle: data.featureStyle
     }, data.name) : data.name,
     label: label.join(', ')
   });
 };
-var _default = StoreModalIndexItem;
-exports.default = _default;
+export default StoreModalIndexItem;

package/dist/components/StoreModal/StoreModalLicenseeIsBillingSelection.js

@@ -1,29 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = StoreModalLicenseeIsBillingSelection;
-var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
-var _StoreModalLicenseeIsBillingIdentityElement = _interopRequireDefault(require("../elements/StoreModalLicenseeIsBillingIdentityElement"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function StoreModalLicenseeIsBillingSelection(_ref) {
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import StoreModalLicenseeIsBillingIdentityElement from '../elements/StoreModalLicenseeIsBillingIdentityElement.js';
+export default function StoreModalLicenseeIsBillingSelection(_ref) {
   let {
     disabled,
     children
   } = _ref;
-  const licenseeIsBillingIdentity = (0, _reactRedux.useSelector)(state => state.licenseeIsBillingIdentity);
-  const dispatch = (0, _reactRedux.useDispatch)();
-  const handleChange = (0, _react.useCallback)(licenseeIsBilling => {
+  const licenseeIsBillingIdentity = useSelector(state => state.licenseeIsBillingIdentity);
+  const dispatch = useDispatch();
+  const handleChange = useCallback(licenseeIsBilling => {
     dispatch({
       type: 'UPDATE_LICENSEE_IS_BILLING_IDENTITY',
       value: licenseeIsBilling
     });
   }, [dispatch]);
-  return /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingIdentityElement.default, {
+  return /*#__PURE__*/React.createElement(StoreModalLicenseeIsBillingIdentityElement, {
     disabled: disabled,
     value: licenseeIsBillingIdentity,
     onChange: handleChange

package/dist/components/StoreModal/StoreModalLoader.js

@@ -1,23 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 function StoreModalLoader(_ref) {
   let {
     children
   } = _ref;
-  const cartOpen = (0, _reactRedux.useSelector)(state => state.cartOpen);
-  (0, _react.useEffect)(() => {
+  const cartOpen = useSelector(state => state.cartOpen);
+  useEffect(() => {
     document.body.dataset.fontdueStoreModal = cartOpen ? 'open' : 'closed';
   }, [cartOpen]);
   if (!cartOpen) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }
-var _default = StoreModalLoader;
-exports.default = _default;
+export default StoreModalLoader;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { StoreModalOrderVariableSelection_viewer$key } from '__generated__/StoreModalOrderVariableSelection_viewer.graphql';
-import { StoreModalOrderVariableSelection_order$key } from '__generated__/StoreModalOrderVariableSelection_order.graphql';
-import { OrderVariableSelectionInput } from '../OrderVariableSelection';
+import { StoreModalOrderVariableSelection_viewer$key } from '__generated__/StoreModalOrderVariableSelection_viewer.graphql.js';
+import { StoreModalOrderVariableSelection_order$key } from '__generated__/StoreModalOrderVariableSelection_order.graphql.js';
+import { OrderVariableSelectionInput } from '../OrderVariableSelection/index.js';
 interface StoreModalOrderVariableSelectionProps {
     viewer: StoreModalOrderVariableSelection_viewer$key;
     order: StoreModalOrderVariableSelection_order$key;

package/dist/components/StoreModal/StoreModalOrderVariableSelection.js

@@ -1,26 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = StoreModalOrderVariableSelection;
-var _StoreModalOrderVariableSelection_order2 = _interopRequireDefault(require("../../__generated__/StoreModalOrderVariableSelection_order.graphql"));
-var _StoreModalOrderVariableSelection_viewer2 = _interopRequireDefault(require("../../__generated__/StoreModalOrderVariableSelection_viewer.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _OrderVariableSelection = _interopRequireDefault(require("../OrderVariableSelection"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function StoreModalOrderVariableSelection(_ref) {
+import _StoreModalOrderVariableSelection_order from "../../__generated__/StoreModalOrderVariableSelection_order.graphql.js";
+import _StoreModalOrderVariableSelection_viewer from "../../__generated__/StoreModalOrderVariableSelection_viewer.graphql.js";
+import React, { useCallback } from 'react';
+import { useFragment, graphql } from 'react-relay';
+import OrderVariableSelection from '../OrderVariableSelection/index.js';
+export default function StoreModalOrderVariableSelection(_ref) {
   var _order$orderVariableS, _viewer$orderVariable, _order$orderVariableS2, _order$orderVariableS3, _viewer$settings;
   let {
     viewer: viewerKey,
     order: orderKey,
     onSelectionChange
   } = _ref;
-  const viewer = (0, _reactRelay.useFragment)((_StoreModalOrderVariableSelection_viewer2.default.hash && _StoreModalOrderVariableSelection_viewer2.default.hash !== "b959e46df4274deb8a53ef227787c34a" && console.error("The definition of 'StoreModalOrderVariableSelection_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_viewer2.default), viewerKey);
-  const order = (0, _reactRelay.useFragment)((_StoreModalOrderVariableSelection_order2.default.hash && _StoreModalOrderVariableSelection_order2.default.hash !== "85bc6b91bb3e9b7ee708f776acf670fd" && console.error("The definition of 'StoreModalOrderVariableSelection_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_order2.default), orderKey);
+  const viewer = useFragment((_StoreModalOrderVariableSelection_viewer.hash && _StoreModalOrderVariableSelection_viewer.hash !== "b959e46df4274deb8a53ef227787c34a" && console.error("The definition of 'StoreModalOrderVariableSelection_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_viewer), viewerKey);
+  const order = useFragment((_StoreModalOrderVariableSelection_order.hash && _StoreModalOrderVariableSelection_order.hash !== "85bc6b91bb3e9b7ee708f776acf670fd" && console.error("The definition of 'StoreModalOrderVariableSelection_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_order), orderKey);
 
   // Transform order variable selections for the OrderVariableSelection component
   const selections = (_order$orderVariableS = order.orderVariableSelections) === null || _order$orderVariableS === void 0 ? void 0 : _order$orderVariableS.map(selection => {
@@ -52,7 +43,7 @@ function StoreModalOrderVariableSelection(_ref) {
   }))) ?? [];
 
   // Handle updating the order when selections change
-  const handleSelectionChange = (0, _react.useCallback)(newSelections => {
+  const handleSelectionChange = useCallback(newSelections => {
     if (!selections) return;
     // Combine new selections with ghost variables (we want to keep the ghost variables)
 
@@ -73,13 +64,13 @@ function StoreModalOrderVariableSelection(_ref) {
   }, [onSelectionChange, ghostVariables, selections]);
 
   // Handle removing a ghost variable
-  const handleRemoveGhostVariable = (0, _react.useCallback)(ghostVariableId => {
+  const handleRemoveGhostVariable = useCallback(ghostVariableId => {
     if (!selections) return;
     // Create a new array of selections without the removed ghost variable
     const filteredSelections = selections.filter(selection => selection.orderVariableId !== ghostVariableId);
     onSelectionChange(filteredSelections);
   }, [onSelectionChange, selections]);
-  return /*#__PURE__*/_react.default.createElement(_OrderVariableSelection.default, {
+  return /*#__PURE__*/React.createElement(OrderVariableSelection, {
     disabled: false,
     variables: viewer,
     selections: selections ?? [],
@@ -88,7 +79,7 @@ function StoreModalOrderVariableSelection(_ref) {
     onRemoveGhostVariable: handleRemoveGhostVariable,
     descriptionOverrides: descriptionOverrides
   }, {
-    label: /*#__PURE__*/_react.default.createElement("div", {
+    label: /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: ((_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.storeModalSelectOrderVariablesLabel) ?? ''
       }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PreloadedQuery } from 'react-relay';
-import { StoreModalProductQuery } from '__generated__/StoreModalProductQuery.graphql';
+import { StoreModalProductQuery } from '__generated__/StoreModalProductQuery.graphql.js';
 interface StoreModalProductProps {
     prepared: {
         productQuery: PreloadedQuery<StoreModalProductQuery>;

package/dist/components/StoreModal/StoreModalProduct.js

@@ -1,63 +1,54 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _StoreModalProductContent_collection2 = _interopRequireDefault(require("../../__generated__/StoreModalProductContent_collection.graphql"));
-var _StoreModalProductQuery2 = _interopRequireDefault(require("../../__generated__/StoreModalProductQuery.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _reactRedux = require("react-redux");
-var _StoreModalFamily = _interopRequireDefault(require("./StoreModalFamily"));
-var _StoreModalProductSummary = _interopRequireDefault(require("../StoreModalProductSummary"));
-var _StoreModalPageContainer = _interopRequireDefault(require("../elements/StoreModalPageContainer"));
-var _StoreModalProductLicenseSelection = _interopRequireDefault(require("../StoreModalProductLicenseSelection"));
-var _OrderVariableSelectionRedux = _interopRequireDefault(require("../OrderVariableSelection/OrderVariableSelectionRedux"));
-var _productState = require("../Root/productState");
-var _StoreModalProductRefetchQuery = _interopRequireDefault(require("../../__generated__/StoreModalProductRefetchQuery.graphql"));
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-var _useRefetchOnLicenseChanges = require("../../hooks/useRefetchOnLicenseChanges");
-var _StoreModalLicenseeIsBillingSelection = _interopRequireDefault(require("./StoreModalLicenseeIsBillingSelection"));
-var _useLicenseAndOrderVariables = require("../../hooks/useLicenseAndOrderVariables");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _StoreModalProductContent_collection from "../../__generated__/StoreModalProductContent_collection.graphql.js";
+import _StoreModalProductQuery from "../../__generated__/StoreModalProductQuery.graphql.js";
+import React, { Fragment, useCallback, useContext, useEffect, useMemo } from 'react';
+import { graphql, useRelayEnvironment, usePreloadedQuery, useRefetchableFragment } from 'react-relay';
+import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
+import StoreModalFamily from './StoreModalFamily.js';
+import StoreModalProductSummary from '../StoreModalProductSummary/index.js';
+import StoreModalPageContainer from '../elements/StoreModalPageContainer/index.js';
+import StoreModalProductLicenseSelection from '../StoreModalProductLicenseSelection/index.js';
+import OrderVariableSelectionRedux from '../OrderVariableSelection/OrderVariableSelectionRedux.js';
+import { populateProductState } from '../Root/productState.js';
+import StoreModalProductRefetchQuery from '../../__generated__/StoreModalProductRefetchQuery.graphql.js';
+import ConfigContext from '../ConfigContext.js';
+import { useRefetchOnLicenseChanges } from '../../hooks/useRefetchOnLicenseChanges.js';
+import StoreModalLicenseeIsBillingSelection from './StoreModalLicenseeIsBillingSelection.js';
+import { useLicenseAndOrderVariables } from '../../hooks/useLicenseAndOrderVariables.js';
 const StoreModalProduct = _ref => {
   var _config$storeModal, _viewer$orderVariable, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _collection$children;
   let {
     prepared
   } = _ref;
-  const config = (0, _react.useContext)(_ConfigContext.default);
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  const initialData = (0, _reactRelay.usePreloadedQuery)((_StoreModalProductQuery2.default.hash && _StoreModalProductQuery2.default.hash !== "b2803257576691f16a283d10e53439e3" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery2.default), prepared.productQuery);
-  const [data, refetch] = (0, _reactRelay.useRefetchableFragment)((_StoreModalProductContent_collection2.default.hash && _StoreModalProductContent_collection2.default.hash !== "0684ec2633ccc5d4d0866e7780df28cc" && console.error("The definition of 'StoreModalProductContent_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductContent_collection2.default), initialData.collection);
+  const config = useContext(ConfigContext);
+  const environment = useRelayEnvironment();
+  const initialData = usePreloadedQuery((_StoreModalProductQuery.hash && _StoreModalProductQuery.hash !== "b2803257576691f16a283d10e53439e3" && console.error("The definition of 'StoreModalProductQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductQuery), prepared.productQuery);
+  const [data, refetch] = useRefetchableFragment((_StoreModalProductContent_collection.hash && _StoreModalProductContent_collection.hash !== "0684ec2633ccc5d4d0866e7780df28cc" && console.error("The definition of 'StoreModalProductContent_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductContent_collection), initialData.collection);
   const collection = data;
   const {
     viewer
   } = initialData;
-  const refetchVariables = (0, _react.useMemo)(() => collection !== null && collection !== void 0 && collection.id ? {
+  const refetchVariables = useMemo(() => collection !== null && collection !== void 0 && collection.id ? {
     id: collection.id
   } : undefined, [collection === null || collection === void 0 ? void 0 : collection.id]);
-  (0, _useRefetchOnLicenseChanges.useRefetchOnLicenseChanges)({
+  useRefetchOnLicenseChanges({
     environment,
     refetch,
-    query: _StoreModalProductRefetchQuery.default,
+    query: StoreModalProductRefetchQuery,
     variables: refetchVariables
   });
-  const store = (0, _reactRedux.useStore)();
-  const dispatch = (0, _reactRedux.useDispatch)();
-  const handleSelectProduct = (0, _react.useCallback)((skuId, selected) => {
+  const store = useStore();
+  const dispatch = useDispatch();
+  const handleSelectProduct = useCallback((skuId, selected) => {
     dispatch({
       type: 'SELECT_SKU_ID',
       skuId,
       selected
     });
   }, [dispatch]);
-  (0, _react.useEffect)(() => {
-    if (collection !== null && collection !== void 0 && collection.id) (0, _productState.populateProductState)(store, environment, collection.id);
+  useEffect(() => {
+    if (collection !== null && collection !== void 0 && collection.id) populateProductState(store, environment, collection.id);
   }, [collection === null || collection === void 0 ? void 0 : collection.id]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     return () => {
       // unselect the skus when this component unmounts,
       // otherwise the user may have selected items from other products
@@ -68,89 +59,88 @@ const StoreModalProduct = _ref => {
     };
   }, []);
   const licensesPosition = config === null || config === void 0 ? void 0 : (_config$storeModal = config.storeModal) === null || _config$storeModal === void 0 ? void 0 : _config$storeModal.productLicensesPosition;
-  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions, _reactRedux.shallowEqual);
+  const licenseOptions = useSelector(state => state.licenseOptions, shallowEqual);
   const anyLicenseOptionsSelected = licenseOptions.length > 0;
-  const selectedSkuIds = (0, _reactRedux.useSelector)(state => state.selectedSkuIds, _reactRedux.shallowEqual);
+  const selectedSkuIds = useSelector(state => state.selectedSkuIds, shallowEqual);
   const anySkusSelected = Object.keys(selectedSkuIds).filter(skuId => selectedSkuIds[skuId]).length > 0;
-  const licenseeIsBillingIdentity = (0, _reactRedux.useSelector)(state => state.licenseeIsBillingIdentity);
+  const licenseeIsBillingIdentity = useSelector(state => state.licenseeIsBillingIdentity);
   const hasSelectionForLicenseeIsBillingIdentity = licenseeIsBillingIdentity !== null;
   const {
     orderVariableSelections
-  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
+  } = useLicenseAndOrderVariables();
   const requiredOrderVariablesNotYetSelected = (_viewer$orderVariable = viewer.orderVariables) === null || _viewer$orderVariable === void 0 ? void 0 : _viewer$orderVariable.filter(variable => variable.variableType === 'select').find(variable => !orderVariableSelections.find(selection => selection.orderVariableId === variable.id));
   if (!collection) {
-    return /*#__PURE__*/_react.default.createElement(_StoreModalPageContainer.default, null, {
+    return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
       body: 'Collection not found'
     });
   }
-  const selectLicenseeLabel = /*#__PURE__*/_react.default.createElement("div", {
+  const selectLicenseeLabel = /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: ((_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.storeModalSelectLicenseeLabel) ?? ''
     }
   });
-  const selectOrderVariablesLabel = /*#__PURE__*/_react.default.createElement("div", {
+  const selectOrderVariablesLabel = /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: ((_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.storeModalSelectOrderVariablesLabel) ?? ''
     }
   });
-  const selectLicensesLabel = /*#__PURE__*/_react.default.createElement("div", {
+  const selectLicensesLabel = /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: ((_viewer$settings3 = viewer.settings) === null || _viewer$settings3 === void 0 ? void 0 : _viewer$settings3.storeModalSelectLicensesLabel) ?? ''
     }
   });
-  const selectFontsLabel = /*#__PURE__*/_react.default.createElement("div", {
+  const selectFontsLabel = /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: ((_viewer$settings4 = viewer.settings) === null || _viewer$settings4 === void 0 ? void 0 : _viewer$settings4.storeModalSelectFontsLabel) ?? ''
     }
   });
-  return /*#__PURE__*/_react.default.createElement(_StoreModalPageContainer.default, null, {
-    body: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, licensesPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingSelection.default, {
+  return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
+    body: /*#__PURE__*/React.createElement(Fragment, null, licensesPosition === 'top' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StoreModalLicenseeIsBillingSelection, {
       disabled: false
     }, {
       label: selectLicenseeLabel
-    }), /*#__PURE__*/_react.default.createElement(_OrderVariableSelectionRedux.default, {
+    }), /*#__PURE__*/React.createElement(OrderVariableSelectionRedux, {
       viewer: viewer,
       disabled: !hasSelectionForLicenseeIsBillingIdentity
     }, {
       label: selectOrderVariablesLabel
-    }), /*#__PURE__*/_react.default.createElement(_StoreModalProductLicenseSelection.default, {
+    }), /*#__PURE__*/React.createElement(StoreModalProductLicenseSelection, {
       collection: collection,
       disabled: !hasSelectionForLicenseeIsBillingIdentity || Boolean(requiredOrderVariablesNotYetSelected)
     }, {
       label: selectLicensesLabel
-    })), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       className: "store-modal__families",
       "data-disabled": licensesPosition === 'top' ? !anyLicenseOptionsSelected || !hasSelectionForLicenseeIsBillingIdentity || !!requiredOrderVariablesNotYetSelected : false
-    }, /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, {
+    }, /*#__PURE__*/React.createElement(StoreModalFamily, {
       title: selectFontsLabel,
       collection: collection,
       onSelect: handleSelectProduct
-    }), (_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(child => /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, {
+    }), (_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(child => /*#__PURE__*/React.createElement(StoreModalFamily, {
       key: child.id,
       collection: child,
       onSelect: handleSelectProduct
-    }))), licensesPosition === 'bottom' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingSelection.default, {
+    }))), licensesPosition === 'bottom' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StoreModalLicenseeIsBillingSelection, {
       disabled: !anySkusSelected
     }, {
       label: selectLicenseeLabel
-    }), /*#__PURE__*/_react.default.createElement(_OrderVariableSelectionRedux.default, {
+    }), /*#__PURE__*/React.createElement(OrderVariableSelectionRedux, {
       viewer: viewer,
       disabled: !anySkusSelected || !hasSelectionForLicenseeIsBillingIdentity
     }, {
       label: selectOrderVariablesLabel
-    }), /*#__PURE__*/_react.default.createElement(_StoreModalProductLicenseSelection.default, {
+    }), /*#__PURE__*/React.createElement(StoreModalProductLicenseSelection, {
       collection: collection,
       disabled: !anySkusSelected || !hasSelectionForLicenseeIsBillingIdentity || Boolean(requiredOrderVariablesNotYetSelected)
     }, {
       label: selectLicensesLabel
     }))),
-    stickyFooter: viewer.stripeAccountId ? /*#__PURE__*/_react.default.createElement(_StoreModalProductSummary.default, {
+    stickyFooter: viewer.stripeAccountId ? /*#__PURE__*/React.createElement(StoreModalProductSummary, {
       viewer: viewer
-    }) : /*#__PURE__*/_react.default.createElement("div", null, "Please", ' ', /*#__PURE__*/_react.default.createElement("a", {
+    }) : /*#__PURE__*/React.createElement("div", null, "Please", ' ', /*#__PURE__*/React.createElement("a", {
       href: `${viewer.endpoint}/admin/settings/payments`,
       target: "_blank"
     }, "connect your Stripe account"), ' ', "to enable the cart.")
   });
 };
-var _default = StoreModalProduct;
-exports.default = _default;
+export default StoreModalProduct;