fontdue-js 2.22.4 → 3.0.0-alpha1

package/dist/components/Family/FamilyList.js

@@ -1,33 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FamilyList;
-var _FamilyList_node2 = _interopRequireDefault(require("../../__generated__/FamilyList_node.graphql"));
-var _react = _interopRequireDefault(require("react"));
-var _reactRelay = require("react-relay");
-var _FontStyle = _interopRequireDefault(require("../FontStyle"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _FamilyList_node from "../../__generated__/FamilyList_node.graphql.js";
+import React from 'react';
+import { graphql, useFragment } from 'react-relay';
+import FontStyle from '../FontStyle/index.js';
 const styleName = (normal, localized) => {
   if (normal === localized) return normal;
   return `${normal} ${localized}`;
 };
-function FamilyList(_ref) {
+export default function FamilyList(_ref) {
   var _node$fontStyles;
   let {
     node: nodeKey,
     text
   } = _ref;
-  const node = (0, _reactRelay.useFragment)((_FamilyList_node2.default.hash && _FamilyList_node2.default.hash !== "d52770ab2e7aaa83f392a5d80340f3ad" && 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_node2.default), nodeKey);
-  return /*#__PURE__*/_react.default.createElement("ul", {
+  const node = useFragment((_FamilyList_node.hash && _FamilyList_node.hash !== "d52770ab2e7aaa83f392a5d80340f3ad" && 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.createElement("ul", {
     className: "font-family-block__list",
     style: {
       fontFamily: node.name
     }
   }, (_node$fontStyles = node.fontStyles) === null || _node$fontStyles === void 0 ? void 0 : _node$fontStyles.map((style, i) => {
     var _style$variableInstan, _style$variableInstan2;
-    return /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    return /*#__PURE__*/React.createElement(FontStyle, {
       fontStyle: style,
       Component: "li",
       key: i,
@@ -37,7 +30,7 @@ function FamilyList(_ref) {
         name,
         coordinates
       } = _ref2;
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return /*#__PURE__*/React.createElement("span", {
         key: name,
         style: {
           fontVariationSettings: coordinates.map(_ref3 => {
@@ -49,6 +42,6 @@ function FamilyList(_ref) {
           }).join(',')
         }
       }, name, ' ');
-    }) : /*#__PURE__*/_react.default.createElement("span", null, text || styleName(style.name, style.name_localized), " "));
+    }) : /*#__PURE__*/React.createElement("span", null, text || styleName(style.name, style.name_localized), " "));
   }));
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Family_node$key } from '__generated__/Family_node.graphql';
+import { Family_node$key } from '__generated__/Family_node.graphql.js';
 interface FamilyBase_props {
     node: Family_node$key;
     size?: string;

package/dist/components/Family/index.js

@@ -1,88 +1,79 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Family;
-var _Family_node2 = _interopRequireDefault(require("../../__generated__/Family_node.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _reactRedux = require("react-redux");
-var _SelectButton = _interopRequireDefault(require("../SelectButton"));
-var _SKUPrice = _interopRequireDefault(require("../SKUPrice"));
-var _Price = require("../Price");
-var _FamilyList = _interopRequireDefault(require("./FamilyList"));
-var _reducer = require("../../reducer");
-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 }; }
-function Family(_ref) {
+import _Family_node from "../../__generated__/Family_node.graphql.js";
+import React, { Suspense, useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
+import { useSelector } from 'react-redux';
+import SelectButton from '../SelectButton/index.js';
+import SKUPrice from '../SKUPrice/index.js';
+import { PriceFormat } from '../Price/index.js';
+import FamilyList from './FamilyList.js';
+import { isSelected } from '../../reducer.js';
+import { pluralize } from '../../utils.js';
+export default function Family(_ref) {
   var _node$fontStyles, _node$fontStyles2, _node$families;
   let {
     node: nodeKey,
     size
   } = _ref;
-  const node = (0, _reactRelay.useFragment)((_Family_node2.default.hash && _Family_node2.default.hash !== "5c49167e8bf2458ab72604ff960636b2" && console.error("The definition of 'Family_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Family_node2.default), nodeKey);
-  const precartOpen = (0, _reactRedux.useSelector)(state => state.precartOpen);
-  const selector = node.sku ? (0, _reducer.isSelected)(node.sku.id) : () => false;
-  const selected = (0, _reactRedux.useSelector)(selector);
-  const [buyButtonIsHovered, setBuyButtonIsHovered] = (0, _react.useState)(false);
+  const node = useFragment((_Family_node.hash && _Family_node.hash !== "5c49167e8bf2458ab72604ff960636b2" && console.error("The definition of 'Family_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Family_node), nodeKey);
+  const precartOpen = useSelector(state => state.precartOpen);
+  const selector = node.sku ? isSelected(node.sku.id) : () => false;
+  const selected = useSelector(selector);
+  const [buyButtonIsHovered, setBuyButtonIsHovered] = useState(false);
   const isSuperFamily = node.collectionType === 'superfamily';
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "select-button-hover-parent font-family-block",
     "data-size": size,
     "data-selected": selected,
     "data-buy-button-hovered": buyButtonIsHovered
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "font-family-block__wrapper"
-  }, node.sku && /*#__PURE__*/_react.default.createElement("div", {
+  }, node.sku && /*#__PURE__*/React.createElement("div", {
     className: "font-family-block__select-button"
-  }, /*#__PURE__*/_react.default.createElement(_SelectButton.default, {
+  }, /*#__PURE__*/React.createElement(SelectButton, {
     sku: node.sku,
     productId: node.sku.id,
     onMouseEnter: () => setBuyButtonIsHovered(true),
     onMouseLeave: () => setBuyButtonIsHovered(false),
     className: "font-family-block__select-button-element"
-  }), precartOpen && !selected && /*#__PURE__*/_react.default.createElement("div", {
+  }), precartOpen && !selected && /*#__PURE__*/React.createElement("div", {
     className: "font-family-block__price"
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
+  }, /*#__PURE__*/React.createElement(SKUPrice, {
     sku: node.sku,
-    format: _Price.PriceFormat.Truncated
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+    format: PriceFormat.Truncated
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "font-family-block__label"
-  }, /*#__PURE__*/_react.default.createElement("h3", {
+  }, /*#__PURE__*/React.createElement("h3", {
     className: "font-family-block__name"
-  }, isSuperFamily ? `${node.name} Super family` : node.name), /*#__PURE__*/_react.default.createElement("span", {
+  }, isSuperFamily ? `${node.name} Super family` : node.name), /*#__PURE__*/React.createElement("span", {
     className: "font-family-block__separator"
-  }), /*#__PURE__*/_react.default.createElement("p", {
+  }), /*#__PURE__*/React.createElement("p", {
     className: "font-family-block__count"
-  }, (0, _utils.pluralize)(node.totalStyles ?? 0, node.isVariableFont ? 'font' : 'style')), node.isVariableFont ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+  }, pluralize(node.totalStyles ?? 0, node.isVariableFont ? 'font' : 'style')), node.isVariableFont ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "font-family-block__separator"
-  }), /*#__PURE__*/_react.default.createElement("p", {
+  }), /*#__PURE__*/React.createElement("p", {
     className: "font-family-block__count"
-  }, (0, _utils.pluralize)(((_node$fontStyles = node.fontStyles) === null || _node$fontStyles === void 0 ? void 0 : _node$fontStyles.reduce((total, style) => {
+  }, pluralize(((_node$fontStyles = node.fontStyles) === null || _node$fontStyles === void 0 ? void 0 : _node$fontStyles.reduce((total, style) => {
     var _style$variableAxes;
     return total + (((_style$variableAxes = style.variableAxes) === null || _style$variableAxes === void 0 ? void 0 : _style$variableAxes.length) ?? 0);
-  }, 0)) ?? 0, 'variable axis', 'variable axes')), /*#__PURE__*/_react.default.createElement("span", {
+  }, 0)) ?? 0, 'variable axis', 'variable axes')), /*#__PURE__*/React.createElement("span", {
     className: "font-family-block__separator"
-  }), /*#__PURE__*/_react.default.createElement("p", {
+  }), /*#__PURE__*/React.createElement("p", {
     className: "font-family-block__count"
-  }, (0, _utils.pluralize)(((_node$fontStyles2 = node.fontStyles) === null || _node$fontStyles2 === void 0 ? void 0 : _node$fontStyles2.reduce((total, style) => {
+  }, pluralize(((_node$fontStyles2 = node.fontStyles) === null || _node$fontStyles2 === void 0 ? void 0 : _node$fontStyles2.reduce((total, style) => {
     var _style$variableInstan;
     return total + (((_style$variableInstan = style.variableInstances) === null || _style$variableInstan === void 0 ? void 0 : _style$variableInstan.length) ?? 0);
-  }, 0)) ?? 0, 'named instance'))) : null), /*#__PURE__*/_react.default.createElement("div", {
+  }, 0)) ?? 0, 'named instance'))) : null), /*#__PURE__*/React.createElement("div", {
     className: "font-family-block__lists"
   }, isSuperFamily ? (_node$families = node.families) === null || _node$families === void 0 ? void 0 : _node$families.map((family, index) => {
     var _family$featureStyle;
-    return /*#__PURE__*/_react.default.createElement(_FamilyList.default, {
+    return /*#__PURE__*/React.createElement(FamilyList, {
       key: index,
       node: family,
       text: (_family$featureStyle = family.featureStyle) === null || _family$featureStyle === void 0 ? void 0 : _family$featureStyle.keyCharacters_localized
     });
-  }) : /*#__PURE__*/_react.default.createElement(_FamilyList.default, {
+  }) : /*#__PURE__*/React.createElement(FamilyList, {
     node: node
   }))));
 }

package/dist/components/FontFamilies/index.js

@@ -1,55 +1,45 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _FontFamiliesQuery2 = _interopRequireDefault(require("../../__generated__/FontFamiliesQuery.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRedux = require("react-redux");
-var _reactRelay = require("react-relay");
-var _productState = require("../Root/productState");
-var _Family = _interopRequireDefault(require("../Family"));
-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 _FontFamiliesQuery from "../../__generated__/FontFamiliesQuery.graphql.js";
+import React, { useEffect } from 'react';
+import { useStore } from 'react-redux';
+import { graphql, useRelayEnvironment, useLazyLoadQuery } from 'react-relay';
+import { populateProductState } from '../Root/productState.js';
+import Family from '../Family/index.js';
+import { useLicenseAndOrderVariables } from '../../hooks/useLicenseAndOrderVariables.js';
 function FontFamilies(_ref) {
   var _node$families;
   let {
     collectionId
   } = _ref;
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  const store = (0, _reactRedux.useStore)();
-  (0, _react.useEffect)(() => {
+  const environment = useRelayEnvironment();
+  const store = useStore();
+  useEffect(() => {
     // populate as soon as BuyButton mounts. this prepares the StoreModal
     // to be able to apply discounts as soon as the user clicks "BUY" on
     // a style. (this is necessary if the bundle price is <= single style price)
-    (0, _productState.populateProductState)(store, environment, collectionId);
+    populateProductState(store, environment, collectionId);
   }, [collectionId, store, environment]);
   const {
     licenseOptionsSpecs,
     orderVariableSelections
-  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
+  } = useLicenseAndOrderVariables();
   const {
     node
-  } = (0, _reactRelay.useLazyLoadQuery)((_FontFamiliesQuery2.default.hash && _FontFamiliesQuery2.default.hash !== "18eba6b750d3f714b964af66ecfcfa3b" && console.error("The definition of 'FontFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamiliesQuery2.default), {
+  } = useLazyLoadQuery((_FontFamiliesQuery.hash && _FontFamiliesQuery.hash !== "18eba6b750d3f714b964af66ecfcfa3b" && console.error("The definition of 'FontFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontFamiliesQuery), {
     collectionId,
     licenseOptions: licenseOptionsSpecs,
     orderVariables: orderVariableSelections
   });
   if (!node) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "font-families"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "font-families__items"
-  }, /*#__PURE__*/_react.default.createElement(_Family.default, {
+  }, /*#__PURE__*/React.createElement(Family, {
     node: node,
     size: "wide"
-  }), (_node$families = node.families) === null || _node$families === void 0 ? void 0 : _node$families.map((family, index) => /*#__PURE__*/_react.default.createElement(_Family.default, {
+  }), (_node$families = node.families) === null || _node$families === void 0 ? void 0 : _node$families.map((family, index) => /*#__PURE__*/React.createElement(Family, {
     key: index,
     node: family
   }))));
 }
-var _default = FontFamilies;
-exports.default = _default;
+export default FontFamilies;

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

@@ -1,5 +1,5 @@
 import React, { type JSX } from 'react';
-import { FontStyle_fontStyle$key } from '../../__generated__/FontStyle_fontStyle.graphql';
+import { FontStyle_fontStyle$key } from '../../__generated__/FontStyle_fontStyle.graphql.js';
 interface FontStyleProps {
     fontStyle: FontStyle_fontStyle$key;
     Component?: 'div' | 'span' | 'li';

package/dist/components/FontStyle/index.js

@@ -1,15 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FontStyle;
-var _FontStyle_fontStyle2 = _interopRequireDefault(require("../../__generated__/FontStyle_fontStyle.graphql"));
-var _react = _interopRequireDefault(require("react"));
-var _reactRelay = require("react-relay");
-var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function FontStyle(_ref) {
+import _FontStyle_fontStyle from "../../__generated__/FontStyle_fontStyle.graphql.js";
+import React from 'react';
+import { graphql, useFragment } from 'react-relay';
+import useFontStyle from '../useFontStyle.js';
+export default function FontStyle(_ref) {
   let {
     Component = 'div',
     fontStyle: fontStyleKey,
@@ -17,11 +10,11 @@ function FontStyle(_ref) {
     children,
     ...rest
   } = _ref;
-  const fontStyle = (0, _reactRelay.useFragment)((_FontStyle_fontStyle2.default.hash && _FontStyle_fontStyle2.default.hash !== "7891603bea1a3e40f40297bf1697eb3c" && console.error("The definition of 'FontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontStyle_fontStyle2.default), fontStyleKey);
+  const fontStyle = useFragment((_FontStyle_fontStyle.hash && _FontStyle_fontStyle.hash !== "7891603bea1a3e40f40297bf1697eb3c" && console.error("The definition of 'FontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontStyle_fontStyle), fontStyleKey);
   const {
     style: fontStyleStyle,
     loaded
-  } = (0, _useFontStyle.default)({
+  } = useFontStyle({
     fontStyle
   });
   const renderProps = {
@@ -31,7 +24,7 @@ function FontStyle(_ref) {
       ...style
     }
   };
-  return /*#__PURE__*/_react.default.createElement(Component, renderProps, typeof children === 'function' ? children({
+  return /*#__PURE__*/React.createElement(Component, renderProps, typeof children === 'function' ? children({
     loaded,
     style: fontStyleStyle
   }) : children);

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Store } from 'redux';
-import { Config } from '../ConfigContext';
-import { FontdueAction, FontdueState } from '../../reducer';
-import { Components } from '../ComponentsContext';
+import { Config } from '../ConfigContext.js';
+import { FontdueAction, FontdueState } from '../../reducer.js';
+import { Components } from '../ComponentsContext.js';
 export interface FontdueProvider_props {
     children?: React.ReactNode;
     url?: string;
@@ -11,4 +11,6 @@ export interface FontdueProvider_props {
     components?: Components;
     store?: Store<FontdueState, FontdueAction>;
 }
-export default function FontdueProviderClientComponent({ children, url, stripeIntegration, config, components, store, }: FontdueProvider_props): React.JSX.Element;
+export default function FontdueProviderClientComponent({ children, url, stripeIntegration, config, components, store, renderAuxUI, }: FontdueProvider_props & {
+    renderAuxUI?: boolean;
+}): React.JSX.Element;

package/dist/components/FontdueProvider/FontdueProviderClientComponent.js

@@ -1,60 +1,69 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FontdueProviderClientComponent;
-var _react = _interopRequireWildcard(require("react"));
-var _reactErrorBoundary = require("react-error-boundary");
-var _reactRedux = require("react-redux");
-var _reactRelay = require("react-relay");
-var _environment = require("../../relay/environment");
-var _ConfigContext = _interopRequireWildcard(require("../ConfigContext"));
-var _reducer = require("../../reducer");
-var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
-var _UrlContext = _interopRequireDefault(require("../UrlContext"));
-var _retryImport = _interopRequireDefault(require("../../retryImport"));
-var _corsError = require("../../corsError");
-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; }
-const ConsentBanner = /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../ConsentBanner')))));
-const Tracking = /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Tracking')))));
-const ServerConfigProvider = /*#__PURE__*/(0, _react.lazy)(() => (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../ServerConfigProvider')))));
-function FontdueProviderClientComponent(_ref) {
+import React, { Suspense, lazy, useRef } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Provider } from 'react-redux';
+import { RelayEnvironmentProvider } from 'react-relay';
+import { useCurrentEnvironment } from '../../relay/environment.js';
+import ConfigContext, { makeConfig } from '../ConfigContext.js';
+import { createDefaultStore } from '../../reducer.js';
+import ComponentsContext from '../ComponentsContext.js';
+import UrlContext from '../UrlContext.js';
+import retryImport from '../../retryImport.js';
+import { setCorsModalEnabled } from '../../corsError.js';
+const IS_SERVER = typeof window === typeof undefined;
+
+// Client-side Redux store is a module-level singleton so multiple
+// FontdueProviders on a page (e.g. one per Astro island) share cart state,
+// user state, etc. Server-side stays per-render.
+let clientStore = null;
+function useSharedStore(providedStore, config) {
+  const ref = useRef(null);
+  if (providedStore) return providedStore;
+  if (IS_SERVER) {
+    if (ref.current == null) ref.current = createDefaultStore(config);
+    return ref.current;
+  }
+  if (clientStore == null) clientStore = createDefaultStore(config);
+  return clientStore;
+}
+const ConsentBanner = /*#__PURE__*/lazy(() => retryImport(() => import('../ConsentBanner/index.js')));
+const Tracking = /*#__PURE__*/lazy(() => retryImport(() => import('../Tracking/index.js')));
+const ServerConfigProvider = /*#__PURE__*/lazy(() => retryImport(() => import('../ServerConfigProvider/index.js')));
+export default function FontdueProviderClientComponent(_ref) {
   let {
     children,
     url,
     stripeIntegration,
     config,
     components,
-    store
+    store,
+    renderAuxUI
   } = _ref;
-  const environment = (0, _environment.useCurrentEnvironment)({
+  const environment = useCurrentEnvironment({
     url,
     stripeIntegration
   });
-  const configValue = (0, _ConfigContext.makeConfig)(config);
-  (0, _corsError.setCorsModalEnabled)(configValue.corsErrorModal);
-  const storeRef = (0, _react.useRef)(store ?? (0, _reducer.createDefaultStore)(config));
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.RelayEnvironmentProvider, {
+  const configValue = makeConfig(config);
+  setCorsModalEnabled(configValue.corsErrorModal);
+  const sharedStore = useSharedStore(store, config);
+  return /*#__PURE__*/React.createElement(RelayEnvironmentProvider, {
     environment: environment
-  }, /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
-    store: storeRef.current
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }, /*#__PURE__*/React.createElement(Provider, {
+    store: sharedStore
+  }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, /*#__PURE__*/_react.default.createElement(_ConfigContext.default.Provider, {
+  }, /*#__PURE__*/React.createElement(ConfigContext.Provider, {
     value: configValue
-  }, /*#__PURE__*/_react.default.createElement(_UrlContext.default.Provider, {
+  }, /*#__PURE__*/React.createElement(UrlContext.Provider, {
     value: url ?? (typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_FONTDUE_URL : undefined) ?? ''
-  }, /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Provider, {
+  }, /*#__PURE__*/React.createElement(ComponentsContext.Provider, {
     value: components ?? {}
-  }, children, /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+  }, children, renderAuxUI && /*#__PURE__*/React.createElement(ErrorBoundary, {
     fallback: null
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, /*#__PURE__*/_react.default.createElement(ServerConfigProvider, {
+  }, /*#__PURE__*/React.createElement(ServerConfigProvider, {
     codeConfig: config
-  }, /*#__PURE__*/_react.default.createElement(ConsentBanner, null), /*#__PURE__*/_react.default.createElement(Tracking, null))))))))));
+  }, /*#__PURE__*/React.createElement(ConsentBanner, null), /*#__PURE__*/React.createElement(Tracking, null))))))))));
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FontdueProvider_props } from './FontdueProviderClientComponent';
+import type { FontdueProvider_props } from './FontdueProviderClientComponent.js';
 declare const FontdueProvider: ({ children, ...rest }: FontdueProvider_props) => React.JSX.Element;
-export { FontdueProvider_props };
+export type { FontdueProvider_props };
 export default FontdueProvider;

package/dist/components/FontdueProvider/index.js

@@ -1,20 +1,37 @@
-"use strict";
+'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TestModeBanner = _interopRequireDefault(require("../TestModeBanner"));
-var _ThemeConfig = _interopRequireDefault(require("../ThemeConfig"));
-var _FontdueProviderClientComponent = _interopRequireDefault(require("./FontdueProviderClientComponent"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FontdueProvider = _ref => {
+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 React, { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import TestModeBanner from '../TestModeBanner/index.js';
+import ThemeConfig from '../ThemeConfig/index.js';
+import FontdueProviderClientComponent from './FontdueProviderClientComponent.js';
+import useAuxUIOwner from './useAuxUIOwner.js';
+
+// Wrap each aux UI component in its own Suspense + ErrorBoundary so that its
+// query suspending (useLazyLoadQuery fetches on first client render) or
+// failing (CORS / offline / etc.) can't blank out the consumer's rendered
+// children. Without this, TestModeBanner's TestModeBannerQuery suspends the
+// whole provider subtree on hydration and the user sees a visible
+// unmount/remount flash on the TypeTester.
+function IsolatedAuxUI(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, children));
+}
+const FontdueProvider = _ref2 => {
   let {
     children,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_FontdueProviderClientComponent.default, rest, /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), /*#__PURE__*/_react.default.createElement(_ThemeConfig.default, null), children);
+  } = _ref2;
+  const isAuxOwner = useAuxUIOwner();
+  return /*#__PURE__*/React.createElement(FontdueProviderClientComponent, _extends({}, rest, {
+    renderAuxUI: isAuxOwner
+  }), isAuxOwner && /*#__PURE__*/React.createElement(IsolatedAuxUI, null, /*#__PURE__*/React.createElement(TestModeBanner, null)), isAuxOwner && /*#__PURE__*/React.createElement(IsolatedAuxUI, null, /*#__PURE__*/React.createElement(ThemeConfig, null)), children);
 };
-var _default = FontdueProvider;
-exports.default = _default;
+export default FontdueProvider;

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FontdueProvider_props } from './FontdueProviderClientComponent';
-export { FontdueProvider_props } from './FontdueProviderClientComponent';
+import type { FontdueProvider_props } from './FontdueProviderClientComponent.js';
+export type { FontdueProvider_props } from './FontdueProviderClientComponent.js';
 export default function FontdueProvider({ children, ...rest }: FontdueProvider_props): Promise<React.JSX.Element>;

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

@@ -1,26 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "FontdueProvider_props", {
-  enumerable: true,
-  get: function () {
-    return _FontdueProviderClientComponent.FontdueProvider_props;
-  }
-});
-exports.default = FontdueProvider;
-var _react = _interopRequireDefault(require("react"));
-var _TestModeBanner = _interopRequireDefault(require("../TestModeBanner"));
-var _index = _interopRequireDefault(require("../ThemeConfig/index.server"));
-var _FontdueProviderClientComponent = _interopRequireWildcard(require("./FontdueProviderClientComponent"));
-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 }; }
-async function FontdueProvider(_ref) {
+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 React, { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import TestModeBanner from '../TestModeBanner/index.js';
+import ThemeConfig from '../ThemeConfig/index.server.js';
+import FontdueProviderClientComponent from './FontdueProviderClientComponent.js';
+// Each aux UI component gets its own Suspense + ErrorBoundary so its query
+// suspending/failing can't blank out the consumer's rendered children during
+// hydration. See the non-RSC index.tsx for the same treatment.
+function IsolatedAuxUI(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, children));
+}
+export default async function FontdueProvider(_ref2) {
   let {
     children,
     ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_FontdueProviderClientComponent.default, rest, /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), /*#__PURE__*/_react.default.createElement(_index.default, null), children);
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(FontdueProviderClientComponent, _extends({}, rest, {
+    renderAuxUI: true
+  }), /*#__PURE__*/React.createElement(IsolatedAuxUI, null, /*#__PURE__*/React.createElement(TestModeBanner, null)), /*#__PURE__*/React.createElement(IsolatedAuxUI, null, /*#__PURE__*/React.createElement(ThemeConfig, null)), children);
 }