@redacto.io/consent-sdk-react 10.0.0-beta.11 → 10.0.0-beta.12

package/dist/index.mjs

@@ -2,9 +2,19 @@ import {
   SANDBOX_TOKEN_HEADER,
   useMediaQuery
 } from "./chunk-OGL6OC3A.mjs";
+import {
+  FONT_FAMILY_SEPARATOR,
+  FONT_NAME_QUOTE_CHARACTERS,
+  NOTICE_FONT_ENTRY_BY_ID,
+  NOTICE_FONT_FACE_STYLE_ID_PREFIX,
+  NOTICE_FONT_LOAD_ERROR_MESSAGE,
+  NOTICE_FONT_ROOT_PROPS,
+  injectNoticeFontStyles,
+  resolveNoticeFontFamily
+} from "./chunk-FEGTW73Q.mjs";
 
 // src/RedactoNoticeConsent/RedactoNoticeConsent.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef, useState } from "react";
 
 // src/RedactoNoticeConsent/api/index.ts
 import { jwtDecode as jwtDecode2 } from "jwt-decode";
@@ -779,6 +789,123 @@ var injectCheckboxStyles = () => {
   stylesInjected = true;
 };
 
+// src/shared/useNoticeFont.ts
+import { useEffect, useMemo } from "react";
+
+// src/shared/fonts/font-sources.generated.ts
+var NOTICE_FONT_SOURCE_IMPORTS = {
+  "montserrat": () => import("./montserrat.generated-NBTECYRW.mjs")
+};
+
+// src/shared/notice-webfont.ts
+var noticeFontOptions = {};
+var configureNoticeFonts = (options) => {
+  noticeFontOptions = { ...noticeFontOptions, ...options };
+};
+var toFamilyTokens = (value) => value.split(FONT_FAMILY_SEPARATOR).map(
+  (token) => token.trim().replace(FONT_NAME_QUOTE_CHARACTERS, "").toLowerCase()
+);
+var findNoticeFontEntry = (value) => {
+  const id = toFamilyTokens(value).find(
+    (token) => Boolean(NOTICE_FONT_ENTRY_BY_ID[token])
+  );
+  if (!id) {
+    return void 0;
+  }
+  return NOTICE_FONT_ENTRY_BY_ID[id];
+};
+var toFontFaceCss = (entry, sources) => sources.map(
+  ({ weight, url }) => [
+    "@font-face {",
+    `  font-family: "${entry.cssFamily}";`,
+    "  font-style: normal;",
+    `  font-weight: ${weight};`,
+    // `swap`, never the `auto` default: auto gives most browsers a ~3s block
+    // period with INVISIBLE text, which is unacceptable for a consent notice.
+    "  font-display: swap;",
+    // `local()` still leads: the bundled copy is Latin + Latin-Extended only,
+    // so a visitor's own installation covers more scripts than ours does.
+    `  src: local("${entry.cssFamily}"),`,
+    // Quoted url(): a data URI carries `,` and `;`, which are hostile to an
+    // unquoted url token. Base64 never contains a double quote.
+    `       url("${url}") format("woff2");`,
+    "}"
+  ].join("\n")
+).join("\n\n");
+var fontSourceLoads = /* @__PURE__ */ new Map();
+var loadFontSources = (entry, importSources) => {
+  const pending = fontSourceLoads.get(entry.id);
+  if (pending) {
+    return pending;
+  }
+  const load = importSources().then((module) => module.NOTICE_FONT_SOURCES).catch((error) => {
+    fontSourceLoads.delete(entry.id);
+    throw error;
+  });
+  fontSourceLoads.set(entry.id, load);
+  return load;
+};
+var injectedFontFaceIds = /* @__PURE__ */ new Set();
+var injectFontFace = (entry, sources) => {
+  if (injectedFontFaceIds.has(entry.id)) {
+    return;
+  }
+  injectedFontFaceIds.add(entry.id);
+  const styleId = `${NOTICE_FONT_FACE_STYLE_ID_PREFIX}${entry.slug}`;
+  if (document.getElementById(styleId)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = toFontFaceCss(entry, sources);
+  document.head.appendChild(style);
+};
+var loadNoticeWebfont = async (value, signal) => {
+  if (typeof document === "undefined" || noticeFontOptions.disabled) {
+    return;
+  }
+  if (signal == null ? void 0 : signal.aborted) {
+    return;
+  }
+  const entry = findNoticeFontEntry(value);
+  if (!entry || entry.source !== "webfont" || injectedFontFaceIds.has(entry.id)) {
+    return;
+  }
+  const importSources = NOTICE_FONT_SOURCE_IMPORTS[entry.slug];
+  if (!importSources) {
+    return;
+  }
+  try {
+    const sources = await loadFontSources(entry, importSources);
+    if (signal == null ? void 0 : signal.aborted) {
+      return;
+    }
+    injectFontFace(entry, sources);
+  } catch (error) {
+    console.error(NOTICE_FONT_LOAD_ERROR_MESSAGE, error);
+  }
+};
+
+// src/shared/useNoticeFont.ts
+var useNoticeFont = ({
+  hostFont,
+  noticeFont
+}) => {
+  const fontFamily = useMemo(
+    () => resolveNoticeFontFamily({ hostFont, noticeFont }),
+    [hostFont, noticeFont]
+  );
+  useEffect(() => {
+    injectNoticeFontStyles();
+  }, []);
+  useEffect(() => {
+    const controller = new AbortController();
+    void loadNoticeWebfont(fontFamily, controller.signal);
+    return () => controller.abort();
+  }, [fontFamily]);
+  return fontFamily;
+};
+
 // src/RedactoNoticeConsent/styles.ts
 var styles = {
   overlay: {
@@ -893,7 +1020,8 @@ var styles = {
     boxSizing: "border-box",
     textAlign: "left",
     cursor: "pointer",
-    backgroundColor: "#ffffff"
+    backgroundColor: "#ffffff",
+    fontFamily: "inherit"
   },
   middleSection: {
     margin: "0px",
@@ -1066,7 +1194,8 @@ var styles = {
     cursor: "pointer",
     margin: 0,
     boxSizing: "border-box",
-    textAlign: "center"
+    textAlign: "center",
+    fontFamily: "inherit"
   },
   acceptButton: {
     backgroundColor: "#4f87ff",
@@ -1219,19 +1348,17 @@ var PurposeItem = ({
   selectedLanguage,
   initialDataElementSelections = {}
 }) => {
-  const headingStyle = useMemo(
+  const headingStyle = useMemo2(
     () => ({
-      color: (settings == null ? void 0 : settings.headingColor) || "#323B4B",
-      fontFamily: (settings == null ? void 0 : settings.font) || "inherit"
+      color: (settings == null ? void 0 : settings.headingColor) || "#323B4B"
     }),
-    [settings]
+    [settings == null ? void 0 : settings.headingColor]
   );
-  const textStyle = useMemo(
+  const textStyle = useMemo2(
     () => ({
-      color: (settings == null ? void 0 : settings.textColor) || "#344054",
-      fontFamily: (settings == null ? void 0 : settings.font) || "inherit"
+      color: (settings == null ? void 0 : settings.textColor) || "#344054"
     }),
-    [settings]
+    [settings == null ? void 0 : settings.textColor]
   );
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { style: styles4.optionItem, children: [
@@ -1536,7 +1663,7 @@ var GuardianForm = ({
   const [openUpward, setOpenUpward] = useState(false);
   const dropdownRef = useRef(null);
   const optionsRef = useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isDropdownOpen) return;
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -1547,7 +1674,7 @@ var GuardianForm = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isDropdownOpen]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isDropdownOpen || !dropdownRef.current) return;
     const rect = dropdownRef.current.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
@@ -1589,7 +1716,7 @@ var GuardianForm = ({
         break;
     }
   };
-  useEffect(() => {
+  useEffect2(() => {
     var _a2;
     if (focusedIndex >= 0 && optionsRef.current) {
       const option = optionsRef.current.children[focusedIndex];
@@ -1600,14 +1727,12 @@ var GuardianForm = ({
   const textColor = (settings == null ? void 0 : settings.textColor) || "#344054";
   const bgColor = (settings == null ? void 0 : settings.backgroundColor) || "#ffffff";
   const radius = (settings == null ? void 0 : settings.borderRadius) || "8px";
-  const font = (settings == null ? void 0 : settings.font) || "inherit";
   const inputStyle = {
     width: "100%",
     padding: "10px 12px",
     border: `1px solid ${borderColor}`,
     borderRadius: radius,
     fontSize: "13px",
-    fontFamily: font,
     color: textColor,
     backgroundColor: bgColor,
     marginBottom: "2px",
@@ -1865,7 +1990,6 @@ var GuardianForm = ({
                             style: {
                               padding: "9px 12px",
                               fontSize: "13px",
-                              fontFamily: font,
                               color: isSelected ? accentColor : textColor,
                               backgroundColor: isFocused ? "#F3F4F6" : "transparent",
                               cursor: "pointer",
@@ -2406,7 +2530,7 @@ var RedactoNoticeConsent = ({
   reviewModeButtonText = "Continue"
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-  const sandboxParams = useMemo(
+  const sandboxParams = useMemo2(
     () => ({
       token,
       sandboxUcic: ucic,
@@ -2416,7 +2540,7 @@ var RedactoNoticeConsent = ({
     }),
     [token, ucic, email, mobile, organisationUuid, workspaceUuid]
   );
-  const propValidationError = useMemo(() => {
+  const propValidationError = useMemo2(() => {
     if (!(noticeId == null ? void 0 : noticeId.trim())) {
       return "RedactoNoticeConsent: 'noticeId' prop is required and cannot be empty";
     }
@@ -2522,7 +2646,7 @@ var RedactoNoticeConsent = ({
   const isPollingStatusRef = useRef(false);
   const verificationSessionTokenRef = useRef(null);
   const isMobile = useMediaQuery("(max-width: 768px)");
-  const responsiveStyles = useMemo(
+  const responsiveStyles = useMemo2(
     () => ({
       modal: {
         width: isMobile ? "90%" : "700px"
@@ -2603,28 +2727,29 @@ var RedactoNoticeConsent = ({
     }),
     [isMobile]
   );
-  const componentHeadingStyle = useMemo(
+  const fontFamily = useNoticeFont({
+    hostFont: settings == null ? void 0 : settings.font,
+    noticeFont: content == null ? void 0 : content.font_preference
+  });
+  const componentHeadingStyle = useMemo2(
     () => ({
-      color: (settings == null ? void 0 : settings.headingColor) || "#323B4B",
-      fontFamily: (settings == null ? void 0 : settings.font) || "inherit"
+      color: (settings == null ? void 0 : settings.headingColor) || "#323B4B"
     }),
-    [settings == null ? void 0 : settings.headingColor, settings == null ? void 0 : settings.font]
+    [settings == null ? void 0 : settings.headingColor]
   );
-  const componentTextStyle = useMemo(
+  const componentTextStyle = useMemo2(
     () => ({
-      color: (settings == null ? void 0 : settings.textColor) || "#344054",
-      fontFamily: (settings == null ? void 0 : settings.font) || "inherit"
+      color: (settings == null ? void 0 : settings.textColor) || "#344054"
     }),
-    [settings == null ? void 0 : settings.textColor, settings == null ? void 0 : settings.font]
+    [settings == null ? void 0 : settings.textColor]
   );
-  const sectionStyle = useMemo(
+  const sectionStyle = useMemo2(
     () => ({
-      color: (settings == null ? void 0 : settings.textColor) || "#344054",
-      fontFamily: (settings == null ? void 0 : settings.font) || "inherit"
+      color: (settings == null ? void 0 : settings.textColor) || "#344054"
     }),
-    [settings == null ? void 0 : settings.textColor, settings == null ? void 0 : settings.font]
+    [settings == null ? void 0 : settings.textColor]
   );
-  const areAllRequiredElementsChecked = useMemo(() => {
+  const areAllRequiredElementsChecked = useMemo2(() => {
     if (!content) return false;
     return content.purposes.every((purpose) => {
       const requiredElements = purpose.data_elements.filter(
@@ -2636,7 +2761,7 @@ var RedactoNoticeConsent = ({
     });
   }, [content, selectedDataElements]);
   const acceptDisabled = isSubmitting || !areAllRequiredElementsChecked;
-  useEffect(() => {
+  useEffect2(() => {
     var _a2, _b2;
     clearApiCache();
     isRequestInProgressRef.current = false;
@@ -2699,7 +2824,7 @@ var RedactoNoticeConsent = ({
     }
     isInitialMountRef.current = false;
   }, [accessToken]);
-  useEffect(() => {
+  useEffect2(() => {
     if (hasAlreadyConsented) {
       onAccept == null ? void 0 : onAccept();
     }
@@ -2931,7 +3056,7 @@ var RedactoNoticeConsent = ({
       isRequestInProgressRef.current = false;
     }
   };
-  useEffect(() => {
+  useEffect2(() => {
     injectCheckboxStyles();
     fetchNotice();
   }, [
@@ -3486,7 +3611,7 @@ var RedactoNoticeConsent = ({
     }
     clearConsentState();
   }, []);
-  const availableLanguages = useMemo(() => {
+  const availableLanguages = useMemo2(() => {
     if (!content) return [language];
     const pinned = ["English"];
     if (content.default_language && content.default_language !== "English" && content.default_language !== "en") {
@@ -3508,7 +3633,7 @@ var RedactoNoticeConsent = ({
     },
     [content]
   );
-  const audioSequence = useMemo(() => {
+  const audioSequence = useMemo2(() => {
     if (!ttsAudioUrls || !content) return [];
     const sequence = [];
     if (ttsAudioUrls.notice_banner_heading_audio_url) {
@@ -3573,7 +3698,7 @@ var RedactoNoticeConsent = ({
     }
     return sequence;
   }, [ttsAudioUrls, content, categorizedPurposes]);
-  const elementIdSequence = useMemo(() => {
+  const elementIdSequence = useMemo2(() => {
     if (!ttsAudioUrls || !content) return [];
     const elementIds = [];
     if (ttsAudioUrls.notice_banner_heading_audio_url) {
@@ -3706,7 +3831,7 @@ var RedactoNoticeConsent = ({
       playAudio();
     }
   }, [isPlaying, playAudio, pauseAudio]);
-  useEffect(() => {
+  useEffect2(() => {
     var _a2;
     if (!isPlaying || !content || audioSequence.length === 0) return;
     const currentIndex = currentAudioIndex;
@@ -3740,7 +3865,7 @@ var RedactoNoticeConsent = ({
     categorizedPurposes,
     collapsedPurposes
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     const removeAllHighlights = () => {
       document.querySelectorAll(".redacto-tts-highlight").forEach((el) => {
         el.classList.remove("redacto-tts-highlight");
@@ -3776,7 +3901,7 @@ var RedactoNoticeConsent = ({
       removeAllHighlights();
     };
   }, [highlightedElementId, isPlaying]);
-  useEffect(() => {
+  useEffect2(() => {
     setIsTTSAvailable(false);
     setTtsAudioUrls(null);
     stopAudio();
@@ -3808,7 +3933,8 @@ var RedactoNoticeConsent = ({
   }, [content, selectedLanguage, accessToken, sandboxParams, baseUrl, ledgerBaseUrl, getLanguageCode]);
   const modalStyle = {
     borderRadius: (settings == null ? void 0 : settings.borderRadius) || "8px",
-    backgroundColor: (settings == null ? void 0 : settings.backgroundColor) || "#ffffff"
+    backgroundColor: (settings == null ? void 0 : settings.backgroundColor) || "#ffffff",
+    fontFamily
   };
   const buttonStyle = {
     borderRadius: (settings == null ? void 0 : settings.borderRadius) || "8px"
@@ -3842,7 +3968,7 @@ var RedactoNoticeConsent = ({
   const handleCloseError = () => {
     setErrorMessage(null);
   };
-  useEffect(() => {
+  useEffect2(() => {
     const handleKeyDown = (event) => {
       if (!modalRef.current) return;
       const focusableElements = modalRef.current.querySelectorAll(
@@ -3881,13 +4007,13 @@ var RedactoNoticeConsent = ({
       modal == null ? void 0 : modal.removeEventListener("keydown", handleKeyDown);
     };
   }, [isLoading, handleDecline]);
-  useEffect(() => {
+  useEffect2(() => {
     stopAudio();
   }, [selectedLanguage, stopAudio]);
-  useEffect(() => {
+  useEffect2(() => {
     stopAudio();
   }, [content, stopAudio]);
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       var _a2, _b2;
       if (abortControllerRef.current) {
@@ -3913,7 +4039,7 @@ var RedactoNoticeConsent = ({
       }
     };
   }, [stopAudio]);
-  useEffect(() => {
+  useEffect2(() => {
     const persistedState = getConsentState();
     if (!persistedState) return;
     if (persistedState.noticeId && persistedState.noticeId !== noticeId) {
@@ -3963,6 +4089,7 @@ var RedactoNoticeConsent = ({
       "div",
       {
         ref: modalRef,
+        ...NOTICE_FONT_ROOT_PROPS,
         style: {
           ...styles.modal,
           ...responsiveStyles.modal,
@@ -4771,7 +4898,7 @@ var RedactoNoticeConsent = ({
 };
 
 // src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3, useRef as useRef2, useCallback as useCallback2, memo } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState3, useRef as useRef2, useCallback as useCallback2, memo } from "react";
 
 // src/RedactoNoticeConsentInline/api/index.ts
 var BASE_URL2 = "https://api.redacto.tech/consent";
@@ -4865,6 +4992,15 @@ var submitConsentEvent2 = async ({
 
 // src/RedactoNoticeConsentInline/styles.ts
 var styles2 = {
+  // Root of the embedded widget — the host supplies the surrounding card, so this
+  // is layout plus the font the rest of the widget inherits. (`container` below is
+  // a standalone-card variant that the current layout does not use.)
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    fontFamily: "inherit"
+  },
   overlay: {
     position: "fixed",
     top: 0,
@@ -5211,11 +5347,11 @@ var styles2 = {
 };
 
 // src/RedactoNoticeConsentInline/useMediaQuery.ts
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect3 } from "react";
 var useMediaQuery2 = (query) => {
   const getMatches = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
   const [matches, setMatches] = useState2(getMatches);
-  useEffect2(() => {
+  useEffect3(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
     const listener = (e) => {
@@ -5296,11 +5432,11 @@ var RedactoConsentInlineComponent = ({
   const [fetchError, setFetchError] = useState3(null);
   const [errorMessage, setErrorMessage] = useState3(null);
   const hasSubmittedRef = useRef2(false);
-  useEffect3(() => {
+  useEffect4(() => {
     injectSpinnerAnimation();
   }, []);
   const isMobile = useMediaQuery2("(max-width: 768px)");
-  const responsiveStyles = useMemo2(
+  const responsiveStyles = useMemo3(
     () => ({
       optionTitle: {
         fontSize: isMobile ? "14px" : "16px"
@@ -5318,7 +5454,7 @@ var RedactoConsentInlineComponent = ({
     }),
     [isMobile]
   );
-  const areAllRequiredElementsChecked = useMemo2(() => {
+  const areAllRequiredElementsChecked = useMemo3(() => {
     if (!content) return false;
     return content.purposes.every((purpose) => {
       const requiredElements = purpose.data_elements.filter(
@@ -5329,10 +5465,10 @@ var RedactoConsentInlineComponent = ({
       );
     });
   }, [content, selectedDataElements]);
-  useEffect3(() => {
+  useEffect4(() => {
     onValidationChange == null ? void 0 : onValidationChange(areAllRequiredElementsChecked);
   }, [areAllRequiredElementsChecked, onValidationChange]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (hasAlreadyConsented) {
       onAccept == null ? void 0 : onAccept();
     }
@@ -5443,14 +5579,14 @@ var RedactoConsentInlineComponent = ({
       }
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     const controller = new AbortController();
     void fetchNotice(controller.signal);
     return () => {
       controller.abort();
     };
   }, [org_uuid, workspace_uuid, notice_uuid, language, applicationId, accessToken]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!ledgerBaseUrl || applicationId) {
       return;
     }
@@ -5604,7 +5740,7 @@ var RedactoConsentInlineComponent = ({
       onAccept
     ]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (accessToken && content && areAllRequiredElementsChecked && !isSubmitting && !isCheckingConsent && !hasAlreadyConsented && !hasSubmittedRef.current) {
       hasSubmittedRef.current = true;
       const autoSubmit = async () => {
@@ -5626,7 +5762,7 @@ var RedactoConsentInlineComponent = ({
     hasAlreadyConsented,
     handleAcceptWithToken
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!accessToken) {
       hasSubmittedRef.current = false;
     }
@@ -5637,11 +5773,20 @@ var RedactoConsentInlineComponent = ({
   const textStyle = {
     color: (settings == null ? void 0 : settings.textColor) || "#344054"
   };
+  const fontFamily = useNoticeFont({
+    hostFont: settings == null ? void 0 : settings.font,
+    noticeFont: content == null ? void 0 : content.font_preference
+  });
+  const rootStyle = { ...styles2.root, fontFamily };
+  const loadingRootStyle = {
+    ...styles2.loadingContainer,
+    fontFamily
+  };
   if (hasAlreadyConsented || fetchError) {
     return null;
   }
   if (isLoading) {
-    return /* @__PURE__ */ jsxs2("div", { style: styles2.loadingContainer, children: [
+    return /* @__PURE__ */ jsxs2("div", { ...NOTICE_FONT_ROOT_PROPS, style: loadingRootStyle, children: [
       /* @__PURE__ */ jsx2("div", { style: styles2.loadingSpinner }),
       /* @__PURE__ */ jsx2("p", { style: { ...styles2.privacyText, ...textStyle }, children: "Loading..." })
     ] });
@@ -5649,7 +5794,7 @@ var RedactoConsentInlineComponent = ({
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+  return /* @__PURE__ */ jsxs2("div", { ...NOTICE_FONT_ROOT_PROPS, style: rootStyle, children: [
     errorMessage && /* @__PURE__ */ jsx2(
       "div",
       {
@@ -5828,7 +5973,7 @@ RedactoConsentInlineComponent.displayName = "RedactoConsentInline";
 var RedactoConsentInline = memo(RedactoConsentInlineComponent);
 
 // src/RedactoNoticeAssisted/RedactoNoticeAssisted.tsx
-import { useState as useState5, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useCallback as useCallback3 } from "react";
+import { useState as useState5, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef3, useCallback as useCallback3 } from "react";
 
 // src/RedactoNoticeAssisted/styles.ts
 var styles3 = {
@@ -5934,6 +6079,7 @@ var styles3 = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    fontFamily: "inherit",
     fontWeight: 400,
     fontSize: "12px",
     lineHeight: "150%",
@@ -6311,6 +6457,7 @@ var styles3 = {
     borderRadius: "8px",
     border: "1px solid #d0d5dd",
     textAlign: "center",
+    fontFamily: "inherit",
     fontSize: "18px",
     fontWeight: 500,
     color: "#101828",
@@ -6432,6 +6579,7 @@ var styles3 = {
     width: "100%",
     borderRadius: "8px",
     padding: "9px 45px",
+    fontFamily: "inherit",
     fontWeight: 400,
     fontSize: "16px",
     lineHeight: "150%",
@@ -6731,11 +6879,11 @@ var injectAssistedStyles = () => {
 };
 
 // src/RedactoNoticeAssisted/useMediaQuery.ts
-import { useState as useState4, useEffect as useEffect4 } from "react";
+import { useState as useState4, useEffect as useEffect5 } from "react";
 var useMediaQuery3 = (query) => {
   const getMatches = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
   const [matches, setMatches] = useState4(getMatches);
-  useEffect4(() => {
+  useEffect5(() => {
     if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
     const listener = (e) => {
@@ -8390,10 +8538,10 @@ var RedactoNoticeAssisted = ({
   const [isVerifying, setIsVerifying] = useState5(false);
   const [createError, setCreateError] = useState5(null);
   const [otpError, setOtpError] = useState5(null);
-  useEffect5(() => {
+  useEffect6(() => {
     injectAssistedStyles();
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const controller = new AbortController();
     setIsLoading(true);
     setFetchError(null);
@@ -8431,14 +8579,14 @@ var RedactoNoticeAssisted = ({
     });
     return () => controller.abort();
   }, [organisationUuid, workspaceUuid, noticeUuid, baseUrl]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (resendCountdown <= 0) return;
     const intervalId = window.setInterval(() => {
       setResendCountdown((prev) => prev <= 1 ? 0 : prev - 1);
     }, 1e3);
     return () => window.clearInterval(intervalId);
   }, [resendCountdown]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (step !== "verify") return;
     const id = window.setTimeout(
       () => scrollIntoViewSoft(verifyBlockRef.current),
@@ -8446,7 +8594,7 @@ var RedactoNoticeAssisted = ({
     );
     return () => window.clearTimeout(id);
   }, [step]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!otpSent) return;
     const id = window.setTimeout(
       () => scrollIntoViewSoft(otpSectionRef.current),
@@ -8454,7 +8602,7 @@ var RedactoNoticeAssisted = ({
     );
     return () => window.clearTimeout(id);
   }, [otpSent]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isLanguageDropdownOpen) return;
     const handleClickOutside = (e) => {
       if (languageContainerRef.current && !languageContainerRef.current.contains(e.target)) {
@@ -8469,7 +8617,7 @@ var RedactoNoticeAssisted = ({
   const isMobileValid = mobile.replace(/\D/g, "").length >= 10;
   const isEmailValid = EMAIL_REGEX.test(email.trim());
   const isContactValid = verifyMethod === "email" ? isEmailValid : isMobileValid;
-  const areAllRequiredElementsChecked = useMemo3(() => {
+  const areAllRequiredElementsChecked = useMemo4(() => {
     if (!content) return false;
     return content.purposes.every((purpose) => {
       const requiredElements = purpose.data_elements.filter(
@@ -8480,7 +8628,7 @@ var RedactoNoticeAssisted = ({
       );
     });
   }, [content, selectedDataElements]);
-  const normalizedDefaultLang = useMemo3(() => {
+  const normalizedDefaultLang = useMemo4(() => {
     const dl = content == null ? void 0 : content.default_language;
     if (!dl) return "English";
     return dl === "en" || dl === "EN" ? "English" : dl;
@@ -8489,7 +8637,7 @@ var RedactoNoticeAssisted = ({
     (lang) => lang === "English" || lang === "en" || lang === "EN",
     []
   );
-  const ts = useMemo3(
+  const ts = useMemo4(
     () => makeStaticT(toBcp47Code(selectedLanguage)),
     [selectedLanguage]
   );
@@ -8535,7 +8683,7 @@ var RedactoNoticeAssisted = ({
     },
     [content, selectedLanguage, isDefaultLanguage]
   );
-  const availableLanguages = useMemo3(() => {
+  const availableLanguages = useMemo4(() => {
     if (!content) return [selectedLanguage];
     const pinned = ["English"];
     if (normalizedDefaultLang && normalizedDefaultLang !== "English") {
@@ -8552,10 +8700,10 @@ var RedactoNoticeAssisted = ({
     "--ra-accent": primaryColor,
     "--ra-accent-soft": accentSoft
   };
-  const fontFamily = (content == null ? void 0 : content.font_preference) || void 0;
+  const fontFamily = useNoticeFont({ noticeFont: content == null ? void 0 : content.font_preference });
   const logoUrl = (content == null ? void 0 : content.logo_url) || redacto_logo_default2;
   const linkStyle = { ...styles3.link, color: secondaryColor };
-  const responsive = useMemo3(
+  const responsive = useMemo4(
     () => ({
       modal: { width: isMobile ? "90%" : "700px" },
       title: { fontSize: isMobile ? "16px" : "18px" },
@@ -8646,7 +8794,7 @@ var RedactoNoticeAssisted = ({
     setSelectedLanguage(lang);
     setIsLanguageDropdownOpen(false);
   }, []);
-  const audioSequence = useMemo3(() => {
+  const audioSequence = useMemo4(() => {
     if (!ttsAudioUrls || !content) return [];
     const sequence = [];
     if (ttsAudioUrls.notice_banner_heading_audio_url) {
@@ -8707,7 +8855,7 @@ var RedactoNoticeAssisted = ({
     }
     return sequence;
   }, [ttsAudioUrls, content]);
-  const elementIdSequence = useMemo3(() => {
+  const elementIdSequence = useMemo4(() => {
     if (!ttsAudioUrls || !content) return [];
     const elementIds = [];
     if (ttsAudioUrls.notice_banner_heading_audio_url) {
@@ -8836,7 +8984,7 @@ var RedactoNoticeAssisted = ({
       playAudio();
     }
   }, [isPlaying, playAudio, pauseAudio]);
-  useEffect5(() => {
+  useEffect6(() => {
     setIsTTSAvailable(false);
     setTtsAudioUrls(null);
     stopAudio();
@@ -8867,7 +9015,7 @@ var RedactoNoticeAssisted = ({
     baseUrl,
     stopAudio
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     var _a;
     if (!isPlaying || !content || audioSequence.length === 0) return;
     const currentIndex = currentAudioIndex;
@@ -8886,7 +9034,7 @@ var RedactoNoticeAssisted = ({
       audioOffset += totalPurposeAudioCount;
     }
   }, [isPlaying, currentAudioIndex, audioSequence, content, collapsedPurposes]);
-  useEffect5(() => {
+  useEffect6(() => {
     const removeAllHighlights = () => {
       document.querySelectorAll(".redacto-tts-highlight").forEach((el) => {
         el.classList.remove("redacto-tts-highlight");
@@ -9775,6 +9923,7 @@ var RedactoNoticeAssisted = ({
   return /* @__PURE__ */ jsx3("div", { style: styles3.overlay, children: /* @__PURE__ */ jsx3(
     "div",
     {
+      ...NOTICE_FONT_ROOT_PROPS,
       style: {
         ...styles3.modal,
         ...responsive.modal,
@@ -9909,7 +10058,7 @@ var MailIcon = ({
 );
 
 // src/RedactoNoticeConsent/components/DigiLockerCallback.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef4, useState as useState6 } from "react";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var DigiLockerCallback = ({
   accessToken: propAccessToken,
@@ -10167,7 +10316,7 @@ var DigiLockerCallback = ({
       }
     }
   }, [propAccessToken, baseUrl, onSuccess, onError, redirectToOriginalPage]);
-  useEffect6(() => {
+  useEffect7(() => {
     injectCheckboxStyles();
     handleCallback();
     return () => {
@@ -10385,5 +10534,6 @@ export {
   DigiLockerCallback,
   RedactoNoticeAssisted,
   RedactoNoticeConsent,
-  RedactoConsentInline as RedactoNoticeConsentInline
+  RedactoConsentInline as RedactoNoticeConsentInline,
+  configureNoticeFonts
 };