fontdue-js 2.19.2 → 2.20.0

package/dist/__tests__/collectionBundleSelection.test.js

@@ -14,7 +14,6 @@ _vitest.vi.mock('react-relay', () => ({
 function makeState() {
   let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
-    stylesheets: [],
     cartOpen: false,
     precartOpen: false,
     selectedSkuIds: {},

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

@@ -6,29 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = CartItemProduct;
 var _CartItemProduct_product2 = _interopRequireDefault(require("../../../__generated__/CartItemProduct_product.graphql"));
 var _react = _interopRequireDefault(require("react"));
-var _Stylesheet = _interopRequireDefault(require("../../Stylesheet"));
 var _CollectionAa = require("../../CollectionAa");
 var _FontStyle = _interopRequireDefault(require("../../FontStyle"));
 var _reactRelay = require("react-relay");
 var _utils = require("../../../utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CartItemProduct(_ref) {
-  var _product$family, _product$featureStyle, _product$featureStyle2, _product$name, _product$variableInst;
+  var _product$name, _product$variableInst;
   let {
     product: productKey
   } = _ref;
-  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.hash !== "b28cd421e634ecb1162252d953233456" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product2.default), productKey);
-  let productCss;
-  if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontStyle') productCss = (_product$family = product.family) === null || _product$family === void 0 ? void 0 : _product$family.cssUrl;
-  if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontCollection') productCss = (_product$featureStyle = product.featureStyle) === null || _product$featureStyle === void 0 ? void 0 : (_product$featureStyle2 = _product$featureStyle.family) === null || _product$featureStyle2 === void 0 ? void 0 : _product$featureStyle2.cssUrl;
+  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.hash !== "a3931102e3ec08c57abd262038b5d74a" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product2.default), productKey);
   let productName = (product === null || product === void 0 ? void 0 : product.name) ?? '??';
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'FontStyle' && product.family) productName = `${product.family.name} ${product.name}`;
   if (((product === null || product === void 0 ? void 0 : product.__typename) === 'Bundle' || (product === null || product === void 0 ? void 0 : product.__typename) === 'CollectionBundle') && product.fontCollection && !((_product$name = product.name) !== null && _product$name !== void 0 && _product$name.startsWith(product.fontCollection.name))) productName = `${product.fontCollection.name} ${product.name}`;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "cart-item__aa"
-  }, product ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    href: productCss
-  }), ['FontCollection', 'Bundle', 'CollectionBundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/_react.default.createElement(_CollectionAa.CollectionAa, {
+  }, product ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['FontCollection', 'Bundle', 'CollectionBundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/_react.default.createElement(_CollectionAa.CollectionAa, {
     product: product
   }) : /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
     fontStyle: product

package/dist/components/CharacterViewer/index.js

@@ -17,7 +17,6 @@ var _reactRelay = require("react-relay");
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
 var _utils = require("../../utils");
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
-var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 var _StyleSelect = _interopRequireDefault(require("./StyleSelect"));
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
@@ -143,7 +142,7 @@ function flattenCharacterList(charSet, glyphNames) {
     }))
   };
 }
-_CharacterViewer_family2.default.hash && _CharacterViewer_family2.default.hash !== "02c42505dc4e330bb7c9034ba54e12f6" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family2.default;
+_CharacterViewer_family2.default.hash && _CharacterViewer_family2.default.hash !== "162b1a99fe187b20ee8560018cd5b3ce" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family2.default;
 function areCombiningChars(input) {
   for (const char of input) {
     const codePoint = char.codePointAt(0);
@@ -171,8 +170,8 @@ function CharacterViewerComponent(_ref3) {
   let {
     collection: collectionKey
   } = _ref3;
-  const collection = (0, _reactRelay.useFragment)((_CharacterViewer_collection2.default.hash && _CharacterViewer_collection2.default.hash !== "806e33bb73206ac443c6880d2941131d" && console.error("The definition of 'CharacterViewer_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_collection2.default), collectionKey);
-  const [fontStyle, refetchFontStyle] = (0, _reactRelay.useRefetchableFragment)((_CharacterViewer_style2.default.hash && _CharacterViewer_style2.default.hash !== "cd4bc4064dd23132ba3bf3d207fe6cb9" && console.error("The definition of 'CharacterViewer_style' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_style2.default), collection.featureStyle);
+  const collection = (0, _reactRelay.useFragment)((_CharacterViewer_collection2.default.hash && _CharacterViewer_collection2.default.hash !== "c2116c3c2c795e5306c3a2a0ecd60137" && console.error("The definition of 'CharacterViewer_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_collection2.default), collectionKey);
+  const [fontStyle, refetchFontStyle] = (0, _reactRelay.useRefetchableFragment)((_CharacterViewer_style2.default.hash && _CharacterViewer_style2.default.hash !== "8cbf3328030930b88b3ec3601aaf7c45" && console.error("The definition of 'CharacterViewer_style' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_style2.default), collection.featureStyle);
   let families = [];
   if (collection.collectionType === 'family') families = [collection];
   if (collection.collectionType === 'superfamily' && collection.children) families = collection.children;
@@ -201,9 +200,7 @@ function CharacterViewerComponent(_ref3) {
   let {
     style
   } = (0, _useFontStyle.default)({
-    fontFamily: `${fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.cssFamily} ${fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.name}`,
-    fontWeight: '400',
-    fontStyle: 'normal'
+    fontStyle: fontStyle
   });
   if (variableSettings) {
     style = {
@@ -326,10 +323,7 @@ function CharacterViewerComponent(_ref3) {
       '--line-gap': fontStyle.verticalMetrics.lineGap ?? undefined,
       '--monitor-width': monitorWidth
     }
-  }, families.filter(coll => coll.collectionType === 'family').map(coll => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    key: coll.id,
-    href: coll.cssUrl
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__character-map"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor"

package/dist/components/ConfigContext.d.ts

@@ -8,12 +8,19 @@ interface FormConfig {
 interface StripeConfig {
     appearance?: Appearance;
 }
+interface SegmentAnalytics {
+    page: Function;
+    setAnonymousId: Function;
+}
 interface SegmentConfig {
     writeKey?: string;
+    analytics?: () => SegmentAnalytics;
     integrations?: Record<string, boolean>;
 }
 interface TrackingConfig {
     enabled?: boolean;
+    consentRequired?: boolean;
+    consentMessage?: string;
     segment?: SegmentConfig;
 }
 export interface Config {
@@ -88,6 +95,9 @@ export declare const makeConfig: (config?: Config) => {
     };
     tracking: {
         enabled: boolean;
+        consentRequired: boolean;
+        consentMessage: string | undefined;
+        segment: SegmentConfig | undefined;
     };
 };
 declare const _default: React.Context<{
@@ -155,6 +165,9 @@ declare const _default: React.Context<{
     };
     tracking: {
         enabled: boolean;
+        consentRequired: boolean;
+        consentMessage: string | undefined;
+        segment: SegmentConfig | undefined;
     };
 }>;
 export default _default;

package/dist/components/ConfigContext.js

@@ -59,7 +59,7 @@ const makeTypeTesterConfig = config => {
   };
 };
 const makeConfig = config => {
-  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$stripe, _config$tracking;
+  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
@@ -74,7 +74,11 @@ const makeConfig = config => {
       appearance: (config === null || config === void 0 ? void 0 : (_config$stripe = config.stripe) === null || _config$stripe === void 0 ? void 0 : _config$stripe.appearance) ?? null
     },
     tracking: {
-      enabled: (config === null || config === void 0 ? void 0 : (_config$tracking = config.tracking) === null || _config$tracking === void 0 ? void 0 : _config$tracking.enabled) ?? false // Explicit opt-in required
+      enabled: (config === null || config === void 0 ? void 0 : (_config$tracking = config.tracking) === null || _config$tracking === void 0 ? void 0 : _config$tracking.enabled) ?? false,
+      // Explicit opt-in required
+      consentRequired: (config === null || config === void 0 ? void 0 : (_config$tracking2 = config.tracking) === null || _config$tracking2 === void 0 ? void 0 : _config$tracking2.consentRequired) ?? false,
+      consentMessage: config === null || config === void 0 ? void 0 : (_config$tracking3 = config.tracking) === null || _config$tracking3 === void 0 ? void 0 : _config$tracking3.consentMessage,
+      segment: config === null || config === void 0 ? void 0 : (_config$tracking4 = config.tracking) === null || _config$tracking4 === void 0 ? void 0 : _config$tracking4.segment
     }
   };
 };

package/dist/components/ConsentBanner/consent.d.ts

@@ -0,0 +1,18 @@
+export declare function setClientAnonymousId(id: string): void;
+export declare function getClientAnonymousId(): string | undefined;
+/** Parse the _fontdue_cc cookie and check if it contains the given category. */
+export declare function hasConsent(category: string): boolean;
+/** Set the _fontdue_cc cookie with the given categories. */
+export declare function setConsent(categories: string[]): void;
+/**
+ * Call callback when the given consent category is granted.
+ * If already granted, calls immediately. Otherwise polls (500ms) and
+ * listens for the fontdue:consent event. Returns a cleanup function.
+ */
+export declare function onConsent(category: string, callback: () => void): () => void;
+/**
+ * Activate blocked scripts for the given consent category.
+ * Finds all <script type="text/plain" data-consent-category="<category>">
+ * elements and replaces them with executable copies.
+ */
+export declare function activateScripts(category: string): void;

package/dist/components/ConsentBanner/consent.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.activateScripts = activateScripts;
+exports.getClientAnonymousId = getClientAnonymousId;
+exports.hasConsent = hasConsent;
+exports.onConsent = onConsent;
+exports.setClientAnonymousId = setClientAnonymousId;
+exports.setConsent = setConsent;
+const CONSENT_COOKIE = '_fontdue_cc';
+const CONSENT_EVENT = 'fontdue:consent';
+const MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+
+/** Store the client-generated anonymous_id so it can be sent with consent events. */
+let clientAnonymousId;
+function setClientAnonymousId(id) {
+  clientAnonymousId = id;
+}
+function getClientAnonymousId() {
+  return clientAnonymousId;
+}
+
+/** Parse the _fontdue_cc cookie and check if it contains the given category. */
+function hasConsent(category) {
+  const match = document.cookie.match(new RegExp('(?:^|;\\s*)' + CONSENT_COOKIE + '=([^;]*)'));
+  if (!match) return false;
+  return match[1].split(',').includes(category);
+}
+
+/** Set the _fontdue_cc cookie with the given categories. */
+function setConsent(categories) {
+  document.cookie = CONSENT_COOKIE + '=' + categories.join(',') + ';path=/;max-age=' + MAX_AGE + ';SameSite=Lax;Secure';
+  window.dispatchEvent(new CustomEvent(CONSENT_EVENT, {
+    detail: {
+      categories
+    }
+  }));
+}
+
+/**
+ * Call callback when the given consent category is granted.
+ * If already granted, calls immediately. Otherwise polls (500ms) and
+ * listens for the fontdue:consent event. Returns a cleanup function.
+ */
+function onConsent(category, callback) {
+  if (hasConsent(category)) {
+    callback();
+    return () => {};
+  }
+  let called = false;
+  const check = () => {
+    if (!called && hasConsent(category)) {
+      called = true;
+      callback();
+      cleanup();
+    }
+  };
+  const interval = setInterval(check, 500);
+  window.addEventListener(CONSENT_EVENT, check);
+  const cleanup = () => {
+    clearInterval(interval);
+    window.removeEventListener(CONSENT_EVENT, check);
+  };
+  return cleanup;
+}
+
+/**
+ * Activate blocked scripts for the given consent category.
+ * Finds all <script type="text/plain" data-consent-category="<category>">
+ * elements and replaces them with executable copies.
+ */
+function activateScripts(category) {
+  const scripts = document.querySelectorAll(`script[type="text/plain"][data-consent-category="${category}"]`);
+  scripts.forEach(blocked => {
+    var _blocked$parentNode;
+    const script = document.createElement('script');
+
+    // Copy all attributes except type and data-consent-category
+    for (const attr of Array.from(blocked.attributes)) {
+      if (attr.name !== 'type' && attr.name !== 'data-consent-category') {
+        script.setAttribute(attr.name, attr.value);
+      }
+    }
+
+    // Copy inline content
+    if (blocked.textContent) {
+      script.textContent = blocked.textContent;
+    }
+    (_blocked$parentNode = blocked.parentNode) === null || _blocked$parentNode === void 0 ? void 0 : _blocked$parentNode.replaceChild(script, blocked);
+  });
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ConsentBanner: () => React.JSX.Element | null;
+export default ConsentBanner;

package/dist/components/ConsentBanner/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _UrlContext = require("../UrlContext");
+var _consent = require("./consent");
+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 DEFAULT_MESSAGE = 'We use cookies to analyze site usage and improve your\u00A0experience.';
+const ConsentBanner = () => {
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const url = (0, _UrlContext.useFontdueUrl)();
+
+  // Start dismissed to avoid hydration mismatch (server has no document.cookie).
+  // Check on the client in useEffect.
+  const [dismissed, setDismissed] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    if (!config.tracking.consentRequired) return;
+    if (!document.cookie.includes('_fontdue_cc=')) {
+      setDismissed(false);
+    }
+  }, [config.tracking.consentRequired]);
+  if (dismissed) return null;
+  const message = config.tracking.consentMessage || DEFAULT_MESSAGE;
+  const sendConsentEvent = categories => {
+    // Fire a tracking event so the server sets the _fontdue_state cookie
+    // on this response (rather than waiting for the next page load).
+    // Include the client anonymous_id so it gets synced to the cookie.
+    const body = {
+      event: 'Consent Granted',
+      properties: {
+        categories: categories.join(',')
+      }
+    };
+    const anonId = (0, _consent.getClientAnonymousId)();
+    if (anonId) body.anonymous_id = anonId;
+    fetch(`${url}/api/track`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      credentials: 'include',
+      body: JSON.stringify(body)
+    }).catch(() => {});
+  };
+  const handleAcceptAll = () => {
+    (0, _consent.setConsent)(['necessary', 'analytics']);
+    (0, _consent.activateScripts)('analytics');
+    if (config.tracking.enabled) {
+      sendConsentEvent(['necessary', 'analytics']);
+    }
+    setDismissed(true);
+  };
+  const handleReject = () => {
+    (0, _consent.setConsent)(['necessary']);
+    setDismissed(true);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fontdue-consent-banner",
+    role: "region",
+    "aria-label": "Cookie consent"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fontdue-consent-banner__container"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "fontdue-consent-banner__message"
+  }, message), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fontdue-consent-banner__actions"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "fontdue-consent-banner__button fontdue-consent-banner__button--secondary",
+    onClick: handleReject
+  }, "Necessary only"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "fontdue-consent-banner__button fontdue-consent-banner__button--primary",
+    onClick: handleAcceptAll
+  }, "Accept all"))));
+};
+var _default = ConsentBanner;
+exports.default = _default;

package/dist/components/Family/index.js

@@ -12,7 +12,6 @@ var _SelectButton = _interopRequireDefault(require("../SelectButton"));
 var _SKUPrice = _interopRequireDefault(require("../SKUPrice"));
 var _Price = require("../Price");
 var _FamilyList = _interopRequireDefault(require("./FamilyList"));
-var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 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); }
@@ -24,7 +23,7 @@ function Family(_ref) {
     node: nodeKey,
     size
   } = _ref;
-  const node = (0, _reactRelay.useFragment)((_Family_node2.default.hash && _Family_node2.default.hash !== "da6c597ec8c8b1672cb1596281a7fc2a" && 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 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);
@@ -35,9 +34,7 @@ function Family(_ref) {
     "data-size": size,
     "data-selected": selected,
     "data-buy-button-hovered": buyButtonIsHovered
-  }, /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    href: node.cssUrl
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "font-family-block__wrapper"
   }, node.sku && /*#__PURE__*/_react.default.createElement("div", {
     className: "font-family-block__select-button"

package/dist/components/FontStyle/index.js

@@ -17,18 +17,12 @@ function FontStyle(_ref) {
     children,
     ...rest
   } = _ref;
-  const fontStyle = (0, _reactRelay.useFragment)((_FontStyle_fontStyle2.default.hash && _FontStyle_fontStyle2.default.hash !== "c745ef2ecf5b7f3d0793bea2024d1e69" && 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 {
-    cssFamily,
-    name
-  } = fontStyle;
+  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 {
     style: fontStyleStyle,
     loaded
   } = (0, _useFontStyle.default)({
-    fontFamily: `${cssFamily} ${name}`,
-    fontWeight: '400',
-    fontStyle: 'normal'
+    fontStyle
   });
   const renderProps = {
     ...rest,

package/dist/components/FontdueProvider/FontdueProviderClientComponent.js

@@ -6,15 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
 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)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../ConsentBanner'))));
+const Tracking = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../Tracking'))));
+const ServerConfigProvider = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../ServerConfigProvider'))));
 function FontdueProviderClientComponent(_ref) {
   let {
     children,
@@ -38,7 +43,15 @@ function FontdueProviderClientComponent(_ref) {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(_ConfigContext.default.Provider, {
     value: configValue
+  }, /*#__PURE__*/_react.default.createElement(_UrlContext.default.Provider, {
+    value: url ?? (typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_FONTDUE_URL : undefined) ?? ''
   }, /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Provider, {
     value: components ?? {}
-  }, children)))));
+  }, children, /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(ServerConfigProvider, {
+    codeConfig: config
+  }, /*#__PURE__*/_react.default.createElement(ConsentBanner, null), /*#__PURE__*/_react.default.createElement(Tracking, null))))))))));
 }

package/dist/components/FontdueProvider/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Stylesheet = require("../Stylesheet");
 var _TestModeBanner = _interopRequireDefault(require("../TestModeBanner"));
 var _ThemeConfig = _interopRequireDefault(require("../ThemeConfig"));
 var _FontdueProviderClientComponent = _interopRequireDefault(require("./FontdueProviderClientComponent"));
@@ -15,7 +14,7 @@ const FontdueProvider = _ref => {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_FontdueProviderClientComponent.default, rest, /*#__PURE__*/_react.default.createElement(_Stylesheet.StylesheetContainer, null), /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), /*#__PURE__*/_react.default.createElement(_ThemeConfig.default, null), children);
+  return /*#__PURE__*/_react.default.createElement(_FontdueProviderClientComponent.default, rest, /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), /*#__PURE__*/_react.default.createElement(_ThemeConfig.default, null), children);
 };
 var _default = FontdueProvider;
 exports.default = _default;

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

@@ -11,7 +11,6 @@ Object.defineProperty(exports, "FontdueProvider_props", {
 });
 exports.default = FontdueProvider;
 var _react = _interopRequireDefault(require("react"));
-var _Stylesheet = require("../Stylesheet");
 var _TestModeBanner = _interopRequireDefault(require("../TestModeBanner"));
 var _index = _interopRequireDefault(require("../ThemeConfig/index.server"));
 var _FontdueProviderClientComponent = _interopRequireWildcard(require("./FontdueProviderClientComponent"));
@@ -23,5 +22,5 @@ async function FontdueProvider(_ref) {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_FontdueProviderClientComponent.default, rest, /*#__PURE__*/_react.default.createElement(_Stylesheet.StylesheetContainer, null), /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), /*#__PURE__*/_react.default.createElement(_index.default, null), children);
+  return /*#__PURE__*/_react.default.createElement(_FontdueProviderClientComponent.default, rest, /*#__PURE__*/_react.default.createElement(_TestModeBanner.default, null), /*#__PURE__*/_react.default.createElement(_index.default, null), children);
 }

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Config } from '../ConfigContext';
+interface Props {
+    codeConfig?: Config;
+    children: React.ReactNode;
+}
+declare const ServerConfigProvider: ({ codeConfig, children }: Props) => React.JSX.Element;
+export default ServerConfigProvider;

package/dist/components/ServerConfigProvider/index.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ServerConfigProviderQuery2 = _interopRequireDefault(require("../../__generated__/ServerConfigProviderQuery.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+var _ConfigContext = _interopRequireWildcard(require("../ConfigContext"));
+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 }; }
+const query = (_ServerConfigProviderQuery2.default.hash && _ServerConfigProviderQuery2.default.hash !== "b20ad9bdada6a425ee660a8662a78840" && console.error("The definition of 'ServerConfigProviderQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _ServerConfigProviderQuery2.default);
+const ServerConfigProvider = _ref => {
+  var _data$viewer, _data$viewer$fontdueC;
+  let {
+    codeConfig,
+    children
+  } = _ref;
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  const tracking = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$fontdueC = _data$viewer.fontdueConfig) === null || _data$viewer$fontdueC === void 0 ? void 0 : _data$viewer$fontdueC.tracking;
+
+  // Server config is the base; code config overrides.
+  const merged = {
+    ...codeConfig,
+    tracking: {
+      enabled: tracking === null || tracking === void 0 ? void 0 : tracking.enabled,
+      consentRequired: tracking === null || tracking === void 0 ? void 0 : tracking.consentRequired,
+      consentMessage: (tracking === null || tracking === void 0 ? void 0 : tracking.consentMessage) ?? undefined,
+      ...(codeConfig === null || codeConfig === void 0 ? void 0 : codeConfig.tracking)
+    }
+  };
+  const configValue = (0, _ConfigContext.makeConfig)(merged);
+  return /*#__PURE__*/_react.default.createElement(_ConfigContext.default.Provider, {
+    value: configValue
+  }, children);
+};
+var _default = ServerConfigProvider;
+exports.default = _default;

package/dist/components/StoreModal/StoreModalContainer.js

@@ -9,9 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRedux = require("react-redux");
 var _StoreModalContainer = _interopRequireDefault(require("../elements/StoreModalContainer"));
 var _reactRelay = require("react-relay");
-var _relayRuntime = require("relay-runtime");
 var _StoreModalCheckoutContext = _interopRequireDefault(require("./StoreModalCheckoutContext"));
 var _CheckoutSteps = _interopRequireDefault(require("../Cart/CheckoutSteps"));
+var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
 var _StoreModalLoadingScreen = _interopRequireDefault(require("../elements/StoreModalLoadingScreen"));
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 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); }
@@ -37,24 +37,20 @@ const getBackLink = (history, currentRoute) => {
   if (!previous) return null;
   return getPageTitle(previous.name);
 };
-function getFontData(fontStyle) {
-  if (!fontStyle) return null;
-  const {
-    name,
-    cssFamily,
-    family
-  } = fontStyle;
-  return {
-    name: `${cssFamily} ${name}`,
-    cssUrl: (family === null || family === void 0 ? void 0 : family.cssUrl) ?? null
-  };
-}
 const StoreModalContainer = _ref => {
-  var _currentOrder, _currentOrder$orderIt, _settings, _settings2;
+  var _settings, _settings2, _currentOrder, _currentOrder$orderIt;
   let {
     children
   } = _ref;
-  const data = (0, _reactRelay.useLazyLoadQuery)((_StoreModalContainerQuery2.default.hash && _StoreModalContainerQuery2.default.hash !== "dd4757b9238f5ae8689c7191b4abe64c" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery2.default), {});
+  const data = (0, _reactRelay.useLazyLoadQuery)((_StoreModalContainerQuery2.default.hash && _StoreModalContainerQuery2.default.hash !== "ae784b9ab1842dacc5857b045b399701" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery2.default), {});
+  const uiFontStyle = (_settings = data.viewer.settings) === null || _settings === void 0 ? void 0 : _settings.uiFontStyle;
+  const uiFontStyleBold = (_settings2 = data.viewer.settings) === null || _settings2 === void 0 ? void 0 : _settings2.uiFontStyleBold;
+  (0, _useFontStyle.default)({
+    fontStyle: uiFontStyle
+  });
+  (0, _useFontStyle.default)({
+    fontStyle: uiFontStyleBold
+  });
   const dispatch = (0, _reactRedux.useDispatch)();
   const orderItemCount = ((_currentOrder = data.viewer.currentOrder) === null || _currentOrder === void 0 ? void 0 : (_currentOrder$orderIt = _currentOrder.orderItems) === null || _currentOrder$orderIt === void 0 ? void 0 : _currentOrder$orderIt.length) ?? 0;
   const showCartButton = orderItemCount > 0;
@@ -90,6 +86,8 @@ const StoreModalContainer = _ref => {
   };
   const [checkoutStep, setCheckoutStep] = (0, _react.useState)(_CheckoutSteps.default.Customer);
   const [checkoutError, setCheckoutError] = (0, _react.useState)(null);
+  const regularName = uiFontStyle ? `${uiFontStyle.cssFamily} ${uiFontStyle.name}` : null;
+  const boldName = uiFontStyleBold ? `${uiFontStyleBold.cssFamily} ${uiFontStyleBold.name}` : null;
   return /*#__PURE__*/_react.default.createElement(_StoreModalCheckoutContext.default.Provider, {
     value: {
       checkoutStep,
@@ -105,8 +103,8 @@ const StoreModalContainer = _ref => {
     showCartButton: showCartButton,
     orderItemCount: orderItemCount,
     fonts: {
-      regular: getFontData((_settings = data.viewer.settings) === null || _settings === void 0 ? void 0 : _settings.uiFontStyle),
-      bold: getFontData((_settings2 = data.viewer.settings) === null || _settings2 === void 0 ? void 0 : _settings2.uiFontStyleBold)
+      regular: regularName,
+      bold: boldName
     },
     routeName: currentRoute
   }, {

package/dist/components/StoreModal/StoreModalFamily.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _StoreModalFamilyButton = _interopRequireDefault(require("./StoreModalFamilyButton"));
 var _StoreModalStyleButton = _interopRequireDefault(require("./StoreModalStyleButton"));
-var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 var _StoreModalFamily = _interopRequireDefault(require("../elements/StoreModalFamily"));
 var _StoreModalBundleButton = _interopRequireDefault(require("./StoreModalBundleButton"));
 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); }
@@ -37,13 +36,10 @@ function StoreModalFamily(_ref) {
     onSelect,
     title
   } = _ref;
-  const collection = (0, _reactRelay.useFragment)((_StoreModalFamily_collection2.default.hash && _StoreModalFamily_collection2.default.hash !== "9c85d32d917e909af575bdda90949c0b" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection2.default), collectionKey);
+  const collection = (0, _reactRelay.useFragment)((_StoreModalFamily_collection2.default.hash && _StoreModalFamily_collection2.default.hash !== "73d00dd2b57a2b44a86ee085b4313d77" && console.error("The definition of 'StoreModalFamily_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalFamily_collection2.default), collectionKey);
   const fontStyles = (0, _react.useMemo)(() => stylesGrouped(collection), [collection]);
   if ((fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.length) === 0 && collection.collectionType === 'superfamily' && !collection.sku) return null;
   return /*#__PURE__*/_react.default.createElement(_StoreModalFamily.default, null, {
-    stylesheet: collection.cssUrl && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-      href: collection.cssUrl
-    }) || null,
     title,
     familyButton: /*#__PURE__*/_react.default.createElement(_StoreModalFamilyButton.default, {
       collection: collection,