fontdue-js 2.19.2 → 2.20.0

package/dist/components/StoreModal/StoreModalIndexItem.js

@@ -11,21 +11,20 @@ var _reactRelay = require("react-relay");
 var _StoreModalIndexItem = _interopRequireDefault(require("../elements/StoreModalIndexItem"));
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 var _FontStyle = _interopRequireDefault(require("../FontStyle"));
-var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 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 }; }
 const StoreModalIndexItem = _ref => {
-  var _data$featureStyle$fa, _data$featureStyle, _data$featureStyle$fa2;
+  var _data$featureStyle;
   let {
     collection
   } = _ref;
   const {
     storeModal: config
   } = (0, _react.useContext)(_ConfigContext.default);
-  const data = (0, _reactRelay.useFragment)((_StoreModalIndexItem_fontCollection2.default.hash && _StoreModalIndexItem_fontCollection2.default.hash !== "c066b135c6b830ef95bfc0d307e46791" && 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 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)();
   const handleClickProduct = productId => {
     dispatch({
@@ -53,16 +52,12 @@ const StoreModalIndexItem = _ref => {
     key: data.id,
     onClick: handleClickProduct.bind(null, data.id)
   }, {
-    aa: config.indexLayout === 'styled-aa' && (data.featureStyle ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, ((_data$featureStyle$fa = data.featureStyle.family) === null || _data$featureStyle$fa === void 0 ? void 0 : _data$featureStyle$fa.cssUrl) && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-      href: data.featureStyle.family.cssUrl
-    }), /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    aa: config.indexLayout === 'styled-aa' && (data.featureStyle ? /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
       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(_react.Fragment, null, ((_data$featureStyle$fa2 = data.featureStyle.family) === null || _data$featureStyle$fa2 === void 0 ? void 0 : _data$featureStyle$fa2.cssUrl) && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-      href: data.featureStyle.family.cssUrl
-    }), /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    }, (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, {
       fontStyle: data.featureStyle
-    }, data.name)) : data.name,
+    }, data.name) : data.name,
     label: label.join(', ')
   });
 };

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

@@ -0,0 +1,2 @@
+declare const Tracking: () => null;
+export default Tracking;

package/dist/components/Tracking/index.js

@@ -0,0 +1,166 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _UrlContext = require("../UrlContext");
+var _consent = require("../ConsentBanner/consent");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getCampaignDataFromUrl() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const campaign = {};
+  const properties = {};
+  let hasCampaign = false;
+  let hasProperties = false;
+  const utmMapping = {
+    utm_source: 'source',
+    utm_medium: 'medium',
+    utm_campaign: 'name',
+    utm_term: 'term',
+    utm_content: 'content'
+  };
+  for (const [urlParam, campaignKey] of Object.entries(utmMapping)) {
+    const value = urlParams.get(urlParam);
+    if (value) {
+      campaign[campaignKey] = value;
+      hasCampaign = true;
+    }
+  }
+  const clickIds = ['gclid', 'fbclid'];
+  for (const param of clickIds) {
+    const value = urlParams.get(param);
+    if (value) {
+      properties[param] = value;
+      hasProperties = true;
+    }
+  }
+  return {
+    campaign: hasCampaign ? campaign : null,
+    properties: hasProperties ? properties : null
+  };
+}
+async function sendPageView(baseUrl, anonymousId) {
+  try {
+    const {
+      campaign,
+      properties: clickIdProperties
+    } = getCampaignDataFromUrl();
+    const properties = {
+      url: window.location.href,
+      path: window.location.pathname,
+      referrer: document.referrer,
+      title: document.title,
+      search: window.location.search,
+      ...clickIdProperties
+    };
+    const context = {
+      userAgent: navigator.userAgent
+    };
+    if (campaign) {
+      context.campaign = campaign;
+    }
+    const body = {
+      properties,
+      context
+    };
+    if (anonymousId) {
+      body.anonymous_id = anonymousId;
+    }
+    const response = await fetch(`${baseUrl}/api/track/page`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      credentials: 'include',
+      body: JSON.stringify(body)
+    });
+    const data = await response.json();
+    return data.anonymous_id || null;
+  } catch (error) {
+    console.debug('Tracking error:', error);
+    return null;
+  }
+}
+const Tracking = () => {
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const url = (0, _UrlContext.useFontdueUrl)();
+  (0, _react.useEffect)(() => {
+    var _config$tracking$segm, _config$tracking$segm2;
+    if (!config.tracking.enabled) return;
+
+    // Generate client-side anonymous ID for cookieless tracking when consent is required
+    const clientAnonymousId = config.tracking.consentRequired ? crypto.randomUUID() : undefined;
+    if (clientAnonymousId) {
+      (0, _consent.setClientAnonymousId)(clientAnonymousId);
+    }
+
+    // Only send the client ID when in cookieless mode (consent required but not yet granted)
+    const analyticsConsent = (0, _consent.hasConsent)('analytics');
+    const effectiveAnonymousId = clientAnonymousId && config.tracking.consentRequired && !analyticsConsent ? clientAnonymousId : undefined;
+
+    // Send initial page view
+    const pageViewPromise = sendPageView(url, effectiveAnonymousId);
+
+    // Segment SDK for device-mode integrations (e.g. Google Tag Manager)
+    // The analytics factory is provided by the entry point — it calls AnalyticsBrowser.load()
+    // when invoked. We defer calling it until after consent when consentRequired is true.
+    const loadAnalytics = (_config$tracking$segm = config.tracking.segment) === null || _config$tracking$segm === void 0 ? void 0 : _config$tracking$segm.analytics;
+    const integrations = ((_config$tracking$segm2 = config.tracking.segment) === null || _config$tracking$segm2 === void 0 ? void 0 : _config$tracking$segm2.integrations) || {
+      All: false,
+      'Google Tag Manager': true
+    };
+    let consentCleanup;
+    if (loadAnalytics) {
+      const fireSegmentPage = async () => {
+        try {
+          const analytics = loadAnalytics();
+          const anonymousId = await pageViewPromise;
+          if (anonymousId) {
+            await analytics.setAnonymousId(anonymousId);
+          }
+          await analytics.page(undefined, undefined, undefined, {
+            integrations
+          });
+        } catch (error) {
+          console.debug('Segment SDK error:', error);
+        }
+      };
+      if (config.tracking.consentRequired) {
+        consentCleanup = (0, _consent.onConsent)('analytics', fireSegmentPage);
+      } else {
+        fireSegmentPage();
+      }
+    }
+
+    // Track client-side route changes
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    const handleRouteChange = () => {
+      // Defer slightly to let document.title update
+      setTimeout(() => sendPageView(url), 0);
+    };
+    history.pushState = function () {
+      originalPushState(...arguments);
+      handleRouteChange();
+    };
+    history.replaceState = function () {
+      originalReplaceState(...arguments);
+      handleRouteChange();
+    };
+    window.addEventListener('popstate', handleRouteChange);
+    return () => {
+      var _consentCleanup;
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+      window.removeEventListener('popstate', handleRouteChange);
+      (_consentCleanup = consentCleanup) === null || _consentCleanup === void 0 ? void 0 : _consentCleanup();
+    };
+  }, []);
+  return null;
+};
+var _default = Tracking;
+exports.default = _default;

package/dist/components/TypeTester/TypeTesterSlider.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRanger = require("../../react-ranger");
 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 _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); }
 const logInterpolator = {
   getPercentageForValue: (val, min, max) => {
     const minSign = Math.sign(min);
@@ -58,13 +59,19 @@ const TypeTesterSlider = _ref => {
   });
   return /*#__PURE__*/_react.default.createElement("div", getTrackProps({
     className: 'type-tester__slider__track'
-  }), handles.map(_ref2 => {
+  }), handles.map((_ref2, index) => {
     let {
       getHandleProps
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement("button", getHandleProps({
+    const {
+      key,
+      ...handleProps
+    } = getHandleProps({
       className: 'type-tester__slider__handle'
-    }));
+    });
+    return /*#__PURE__*/_react.default.createElement("button", _extends({
+      key: key ?? index
+    }, handleProps));
   }));
 };
 var _default = TypeTesterSlider;

package/dist/components/TypeTester/index.js

@@ -9,7 +9,6 @@ var _TypeTester_fontStyle2 = _interopRequireDefault(require("../../__generated__
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
-var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 var _FontStyle = _interopRequireDefault(require("../FontStyle"));
 var _SKUPrice = _interopRequireDefault(require("../SKUPrice"));
@@ -40,7 +39,7 @@ const TypeTester = _ref => {
     onStyleSelect,
     isLoading
   } = _ref;
-  const fontStyle = (0, _reactRelay.useFragment)((_TypeTester_fontStyle2.default.hash && _TypeTester_fontStyle2.default.hash !== "aa93e79e779011b33066d07dcd52c7b9" && console.error("The definition of 'TypeTester_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_fontStyle2.default), fontStyleKey);
+  const fontStyle = (0, _reactRelay.useFragment)((_TypeTester_fontStyle2.default.hash && _TypeTester_fontStyle2.default.hash !== "bf89a32c8a0661f2102bbcf8c6bd1aa7" && console.error("The definition of 'TypeTester_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_fontStyle2.default), fontStyleKey);
   const viewer = (0, _reactRelay.useFragment)((_TypeTester_viewer2.default.hash && _TypeTester_viewer2.default.hash !== "26c2b3145462407675ab9b202b0d1b4c" && console.error("The definition of 'TypeTester_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_viewer2.default), viewerKey);
   const contentRef = (0, _react.useRef)(null);
   const ref = (0, _react.useRef)(null);
@@ -64,9 +63,7 @@ const TypeTester = _ref => {
     (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.focus();
   };
   if (!fontStyle) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fontStyle.family && fontStyle.family.cssUrl && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    href: fontStyle.family.cssUrl
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester select-button-hover-parent",
     ref: ref,
     "data-type-tester-id": id,

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -5,26 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _throttled = require("@react-hook/window-size/throttled");
-var _reactDeviceDetect = require("react-device-detect");
-const createClone = styles => {
-  const clone = document.createElement('div');
-  clone.style.display = 'inline-block';
-  clone.style.whiteSpace = 'pre';
-  clone.style.position = 'absolute';
-  clone.style.top = '0';
-  clone.style.width = '0';
-  clone.style.overflow = 'scroll';
-  clone.style.visibility = 'hidden';
-  clone.style.fontFamily = `${styles.fontFamily}`;
-  clone.style.fontWeight = `${styles.fontWeight}`;
-  clone.style.fontStyle = `${styles.fontStyle}`;
-  clone.style.wordWrap = 'normal';
-  clone.style.letterSpacing = `${styles.letterSpacing}`;
-  clone.style.fontVariationSettings = styles.fontVariationSettings;
-  clone.style.fontFeatureSettings = styles.fontFeatureSettings;
-  return clone;
-};
+var _useAutofit = _interopRequireDefault(require("../../hooks/useAutofit"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useTypeTesterStyler = _ref => {
   let {
     size,
@@ -45,76 +27,36 @@ const useTypeTesterStyler = _ref => {
     variableSettings,
     columns
   } = _ref;
-  const ref = (0, _react.useRef)(null);
   const fontVariationSettings = variableSettings ? Object.keys(variableSettings).map(axis => `'${axis}' ${variableSettings[axis]}`).join(',') : undefined;
   const fontFeatureSettings = features.map(feature => `"${feature}"`).join(', ');
-  const clone = (0, _react.useRef)(createClone({
-    ...fontStyles,
-    letterSpacing: `${letterSpacing}em`,
+  const sideBuffer = autofit ? 10 : 0;
+  const text = content.getCurrentContent().getPlainText();
+  const {
+    ref,
+    fontSize: autofitSize
+  } = (0, _useAutofit.default)({
+    text,
+    fontFamily: fontStyles.fontFamily,
+    fontSize: size,
+    min,
+    max,
+    letterSpacing,
+    fontWeight: fontStyles.fontWeight,
+    fontStyle: fontStyles.fontStyle,
     fontVariationSettings,
-    fontFeatureSettings
-  }));
-  const latestSizeRef = (0, _react.useRef)(size);
-  let sideBuffer = autofit ? 10 : 0;
-  const computeSize = () => {
-    if (!autofit) return;
-    if (!ref.current) return;
-
-    // stop autofitting after user edited content
-    if (contentEdited === true && !autofitOnChange) return;
-    const availableWidth = ref.current.clientWidth - sideBuffer;
-    if (!availableWidth) return;
-    const $textElement = ref.current.querySelector('.public-DraftStyleDefault-block');
-    if (!$textElement) {
-      console.warn('Didnt find editor text element');
-      return;
-    }
-    const currentWidth = clone.current.scrollWidth;
-    const ratio = availableWidth / currentWidth;
-    let newSize = Math.min(Math.max(min, ratio * latestSizeRef.current), max);
-
-    // safari rounds font sizes, so it's impossible to get the width exactly right
-    //
-    // https://bugs.webkit.org/show_bug.cgi?id=46987
-    // "Yeah, we purposely round the font sizes so that we get a higher
-    //    hit rate in our various caches."
-    //
-    // so we truncate it since we prefer it slightly smaller than slightly bigger
-    if (_reactDeviceDetect.isSafari || _reactDeviceDetect.isMobileSafari) {
-      newSize = Math.trunc(newSize);
-    }
-    clone.current.style.fontSize = `${newSize}px`;
-    latestSizeRef.current = newSize;
-    setSize(newSize, {
-      auto: true
-    });
-  };
-  (0, _react.useLayoutEffect)(() => {
-    var _ref$current;
-    const $textElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.public-DraftStyleDefault-block');
-    clone.current.innerHTML = ($textElement === null || $textElement === void 0 ? void 0 : $textElement.innerHTML) ?? '';
-    clone.current.style.fontSize = `${size}px`;
-    document.body.appendChild(clone.current);
-    computeSize();
-    return () => {
-      document.body.removeChild(clone.current);
-    };
-  }, []);
-  const windowWidth = (0, _throttled.useWindowWidth)({
-    fps: 60
+    enabled: autofit && (!contentEdited || autofitOnChange),
+    padding: sideBuffer
   });
-  (0, _react.useLayoutEffect)(computeSize, [windowWidth, autofit]);
-  (0, _react.useLayoutEffect)(() => {
-    clone.current.style.letterSpacing = `${letterSpacing}em`;
-    computeSize();
-  }, [letterSpacing]);
+
+  // When autofit calculates a new size, push it into the shared state
+  // before the browser paints to avoid a flash of wrapped text.
   (0, _react.useLayoutEffect)(() => {
-    var _ref$current2;
-    if (!autofitOnChange) return;
-    const $textElement = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelector('.public-DraftStyleDefault-block');
-    clone.current.innerHTML = ($textElement === null || $textElement === void 0 ? void 0 : $textElement.innerHTML) ?? '';
-    computeSize();
-  }, [content, autofitOnChange]);
+    if (autofit && autofitSize !== size) {
+      setSize(autofitSize, {
+        auto: true
+      });
+    }
+  }, [autofitSize]);
   const shouldTruncate = truncate && !focused;
   const style = {
     fontSize: autofit ? `${size}px` : `calc(var(--type-tester--adjustment, 1) * ${size}px)`,

package/dist/components/UrlContext.d.ts

@@ -0,0 +1,3 @@
+declare const UrlContext: import("react").Context<string>;
+export declare function useFontdueUrl(): string;
+export default UrlContext;

package/dist/components/UrlContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useFontdueUrl = useFontdueUrl;
+var _react = require("react");
+const FONTDUE_URL = typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_FONTDUE_URL : undefined;
+const UrlContext = /*#__PURE__*/(0, _react.createContext)(FONTDUE_URL ?? '');
+function useFontdueUrl() {
+  return (0, _react.useContext)(UrlContext);
+}
+var _default = UrlContext;
+exports.default = _default;

package/dist/components/elements/StoreModalContainer/index.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-interface FontData {
-    name: string;
-    cssUrl: string | null;
-}
 interface StoreModalContainerProps {
     onClickBackground?: () => void;
     onClickClose?: () => void;
@@ -12,8 +8,8 @@ interface StoreModalContainerProps {
     orderItemCount: number;
     routeName: string;
     fonts: {
-        regular: FontData | null;
-        bold: FontData | null;
+        regular: string | null;
+        bold: string | null;
     };
     children: {
         backText?: React.ReactNode;

package/dist/components/elements/StoreModalContainer/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Icons = require("../../Icons");
 var _StoreModalContainerContext = _interopRequireDefault(require("./StoreModalContainerContext"));
-var _Stylesheet = _interopRequireDefault(require("../../Stylesheet"));
-var _utils = require("../../../utils");
 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; }
@@ -43,18 +41,15 @@ const StoreModalContainer = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__container__overlay",
     "data-route": routeName
-  }, [fonts.regular, fonts.bold].filter(_utils.notEmpty).map(font => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    key: font.name,
-    href: font.cssUrl
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__container__background",
     onClick: onClickBackground
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__container__container",
     ref: container,
     style: {
-      '--font-family': fonts.regular ? `"${fonts.regular.name}"` : undefined,
-      '--font-family__bold': fonts.bold ? `"${fonts.bold.name}"` : undefined,
+      '--font-family': fonts.regular ? `"${fonts.regular}"` : undefined,
+      '--font-family__bold': fonts.bold ? `"${fonts.bold}"` : undefined,
       fontFamily: 'var(--font-family, inherit)'
     }
   }, /*#__PURE__*/_react.default.createElement("nav", {

package/dist/components/elements/StoreModalFamily/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 interface StoreModalFamilyProps {
     children: {
-        stylesheet: React.ReactElement<any> | null;
         title: React.ReactNode;
         familyButton: React.ReactElement<any>;
         bundles?: React.ReactElement<any>[] | null;

package/dist/components/elements/StoreModalFamily/index.js

@@ -9,7 +9,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const StoreModalFamily = _ref => {
   let {
     children: {
-      stylesheet,
       bundles,
       familyButton,
       styleGroups,
@@ -18,7 +17,7 @@ const StoreModalFamily = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__family__container"
-  }, stylesheet, title && /*#__PURE__*/_react.default.createElement("h3", {
+  }, title && /*#__PURE__*/_react.default.createElement("h3", {
     className: "store-modal__family__title"
   }, title), /*#__PURE__*/_react.default.cloneElement(familyButton, {
     className: 'store-modal__family__family-button'

package/dist/components/useConsent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns true when the visitor has granted consent for the given category.
+ * Re-renders automatically when consent changes (e.g. the visitor clicks
+ * "Accept all" on the consent banner).
+ *
+ * @example
+ * const analyticsConsent = useConsent('analytics');
+ */
+export declare function useConsent(category: string): boolean;

package/dist/components/useConsent.js

@@ -0,0 +1,26 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useConsent = useConsent;
+var _react = require("react");
+var _consent = require("./ConsentBanner/consent");
+const CONSENT_EVENT = 'fontdue:consent';
+function subscribe(callback) {
+  window.addEventListener(CONSENT_EVENT, callback);
+  return () => window.removeEventListener(CONSENT_EVENT, callback);
+}
+
+/**
+ * Returns true when the visitor has granted consent for the given category.
+ * Re-renders automatically when consent changes (e.g. the visitor clicks
+ * "Accept all" on the consent banner).
+ *
+ * @example
+ * const analyticsConsent = useConsent('analytics');
+ */
+function useConsent(category) {
+  return (0, _react.useSyncExternalStore)(subscribe, () => (0, _consent.hasConsent)(category), () => false);
+}

package/dist/components/useFont.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface FontSource {
+    readonly url: string | null;
+    readonly format: string | null;
+}
+interface UseFontProps {
+    fontFamily: string;
+    webfontSources?: ReadonlyArray<FontSource | null> | null;
+    fontWeight?: React.CSSProperties['fontWeight'];
+    fontStyle?: string;
+}
+/**
+ * Hook to load and detect web fonts.
+ *
+ * When `webfontSources` is provided, loads the font directly via the FontFace
+ * API (no CSS @font-face required). When omitted, falls back to
+ * `document.fonts.load()` to detect fonts loaded by CSS @font-face rules.
+ *
+ * Usage:
+ *   const { style, loaded } = useFont({
+ *     fontFamily: "Tonka Regular",
+ *     webfontSources: [{ url: "https://...", format: "woff2" }],
+ *   });
+ */
+declare const useFont: ({ fontFamily, webfontSources, fontWeight, fontStyle: fontStyleProp, }: UseFontProps) => {
+    style: React.CSSProperties;
+    loaded: boolean;
+};
+export default useFont;

package/dist/components/useFont.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _fontLoader = require("../fontLoader");
+const FALLBACK_FAMILY = 'Fallback';
+
+/**
+ * Hook to load and detect web fonts.
+ *
+ * When `webfontSources` is provided, loads the font directly via the FontFace
+ * API (no CSS @font-face required). When omitted, falls back to
+ * `document.fonts.load()` to detect fonts loaded by CSS @font-face rules.
+ *
+ * Usage:
+ *   const { style, loaded } = useFont({
+ *     fontFamily: "Tonka Regular",
+ *     webfontSources: [{ url: "https://...", format: "woff2" }],
+ *   });
+ */
+const useFont = _ref => {
+  let {
+    fontFamily,
+    webfontSources,
+    fontWeight = 400,
+    fontStyle: fontStyleProp = 'normal'
+  } = _ref;
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const mounted = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!fontFamily) return;
+    if (webfontSources && webfontSources.length > 0) {
+      // Load directly via FontFace API
+      (0, _fontLoader.loadFont)(fontFamily, webfontSources).then(() => {
+        if (mounted.current) setLoaded(true);
+      }).catch(console.error);
+    } else {
+      // Fall back to detecting CSS-loaded fonts
+      let cancelled = false;
+      const tryLoad = () => {
+        document.fonts.load(`${fontStyleProp} ${fontWeight} 16px "${fontFamily}"`).then(fontFaces => {
+          if (!cancelled && fontFaces.length > 0) setLoaded(true);
+        }).catch(() => {});
+      };
+      tryLoad();
+      document.fonts.addEventListener('loadingdone', tryLoad);
+      return () => {
+        cancelled = true;
+        document.fonts.removeEventListener('loadingdone', tryLoad);
+      };
+    }
+  }, [fontFamily]);
+  const cssStyle = loaded ? {
+    fontFamily: `"${fontFamily}", ${FALLBACK_FAMILY}`,
+    fontWeight,
+    fontStyle: fontStyleProp
+  } : {
+    fontFamily: FALLBACK_FAMILY,
+    fontWeight: 'normal',
+    fontStyle: 'normal'
+  };
+  return {
+    style: cssStyle,
+    loaded
+  };
+};
+var _default = useFont;
+exports.default = _default;