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

package/NOTICE.md

@@ -0,0 +1,17 @@
+# Third-party font licences
+
+`@redacto.io/consent-sdk-react` bundles the webfonts below so a consent notice can render the font
+family chosen in the Redacto console without contacting any third-party server. The files are
+subset to Latin + Latin-Extended and converted to WOFF2; they are derived works of the upstreams
+listed here.
+
+| Family | Licence | Upstream |
+|---|---|---|
+| Montserrat | OFL-1.1 | https://github.com/google/fonts/tree/main/ofl/montserrat |
+
+None of these families carry a Reserved Font Name, so the derived files keep the original family
+names. The full licence text is reproduced in `fonts/licenses/` in the source repository and in
+each family's `LICENSE.txt` alongside the font files.
+
+The other font families the console offers (Arial, Georgia, Verdana, …) are **not** redistributed —
+they are referenced by name and resolved from whatever the visitor's device already has.

package/README.md

@@ -117,6 +117,80 @@ npm install @tanstack/react-query @tanstack/react-table \
 
 If you only use `RedactoNoticeConsent` or `RedactoNoticeConsentInline`, these peers are not needed.
 
+## Sandbox Mode (No Backend Required)
+
+Sandbox mode lets you build and test a full consent PoC — **notice → Privacy Center → DSAR** — straight from your app, with **no backend and no token minting**. Instead of your server generating a JWT, you paste a **static sandbox token** into the SDK. Everything you create is recorded as test data, isolated from your live records.
+
+Going live is a config swap, not a rewrite: drop the sandbox props and pass a real JWT (see [Backend Server Setup](#backend-server-setup)).
+
+### 1. Get your sandbox credentials
+
+In the **Redacto Dashboard → API Keys → Sandbox** tab, copy:
+
+- your **Sandbox token** (a static string; it never expires and needs no refresh)
+- your **Organization ID** and **Workspace ID** (shown under *Workspace identifiers* on the same page)
+
+### 2. Collect consent
+
+Pass the sandbox `token`, org/workspace, and a test identity (`email`, `mobile`, or `ucic`). No `accessToken` is needed:
+
+```tsx
+import { RedactoNoticeConsent } from "@redacto.io/consent-sdk-react";
+
+<RedactoNoticeConsent
+  noticeId={NOTICE_UUID}
+  token={SANDBOX_TOKEN}
+  organisationUuid={ORG_UUID}
+  workspaceUuid={WORKSPACE_UUID}
+  email="test.user@example.com" // or `mobile`, or `ucic`
+  onAccept={() => console.log("consent recorded (test)")}
+  onDecline={() => {}}
+/>;
+```
+
+### 3. Manage consent & raise a DSAR
+
+Point the Privacy Center at the same sandbox token and test identity. The same test user can now review the consent from step 2, withdraw it, and file a DSAR — end to end, all as test data:
+
+```tsx
+import { RedactoPrivacyCenter } from "@redacto.io/consent-sdk-react/privacy-center";
+
+<RedactoPrivacyCenter
+  token={SANDBOX_TOKEN}
+  organisationUuid={ORG_UUID}
+  workspaceUuid={WORKSPACE_UUID}
+  email="test.user@example.com" // or `mobile`, or `ucic`
+  slug="acme-co"
+  onError={(error) => {
+    console.error(error);
+    return false;
+  }}
+/>;
+```
+
+### Sandbox props
+
+| Prop                        | Required     | Description                                                                        |
+| --------------------------- | ------------ | --------------------------------------------------------------------------------- |
+| `token`                     | Yes          | Static sandbox token from the Dashboard. Its presence activates sandbox mode.      |
+| `organisationUuid`          | Yes          | Organization ID from the Dashboard.                                               |
+| `workspaceUuid`             | Yes          | Workspace ID from the Dashboard.                                                  |
+| `email` / `mobile` / `ucic` | One required | The test subject. Precedence when more than one is set: `ucic` > `email` > `mobile`. |
+
+`RedactoPrivacyCenter` takes the same sandbox props — `token`, `organisationUuid`, `workspaceUuid`, and `email` / `mobile` / `ucic`.
+
+### How it works
+
+- The SDK sends the sandbox token as an `X-Consent-Token` header and the test identity inside each request (query params on reads, body on writes) — no JWT decode, no token refresh (a `401` fails fast).
+- The server records everything under `environment=test`, namespaced so sandbox data never mixes with — or reads — your live records.
+- Sandbox always talks to the consent server; it never routes to the Go ledger.
+
+### Going live
+
+Sandbox and production use the same components. To ship, remove the sandbox props and pass a real `accessToken` / `refreshToken` (JWT) minted by your backend — see [Backend Server Setup](#backend-server-setup) below. New records are then written as `environment=live`.
+
+> Sandbox is available on `RedactoNoticeConsent` and `RedactoPrivacyCenter`. The inline (`RedactoNoticeConsentInline`) and assisted (`RedactoNoticeAssisted`) widgets are JWT/OTP-only.
+
 ### Backend Server Setup
 
 Before using the SDK components, you need to set up backend server endpoints that generate access tokens by calling Redacto's API. Your server should implement the following endpoints:
@@ -673,7 +747,7 @@ export function AssistedConsent() {
 
 ### Custom Styling
 
-`RedactoNoticeConsent` and `RedactoNoticeConsentInline` support extensive styling customization via the `settings` prop. (`RedactoNoticeAssisted` does not take a `settings` prop — it themes itself from the notice's API configuration, such as primary/secondary colour and font.)
+`RedactoNoticeConsent` and `RedactoNoticeConsentInline` support extensive styling customization via the `settings` prop, which overrides the notice's own API configuration. (`RedactoNoticeAssisted` does not take a `settings` prop — it themes itself entirely from the notice's API configuration, such as primary/secondary colour and font.)
 
 ```tsx
 const customSettings = {
@@ -699,7 +773,7 @@ const customSettings = {
   textColor: "#e6e6e6",
   borderColor: "white",
   link: "#9810fa",
-  font: "Arial, sans-serif", // Optional: custom font family
+  font: "Arial, sans-serif", // Optional: overrides the notice's Font Family
 };
 
 // Use in component
@@ -717,11 +791,75 @@ const customSettings = {
 - `borderColor`: Color for borders
 - `borderRadius`: Border radius for rounded corners
 - `link`: Color for links
-- `font`: Font family (optional)
+- `font`: Font family (optional) — overrides the Font Family configured on the notice
 - `button.accept`: Styles for accept button
 - `button.decline`: Styles for decline button
 - `button.language`: Styles for language selector
 
+#### Font family
+
+All three notice components apply the **Font Family** selected on the notice in the
+Redacto console (`active_config.font_preference`), so the rendered notice matches the
+console's live preview without any host configuration.
+
+Resolution order is `settings.font` → the notice's Font Family → the host page's font.
+Pass `settings.font` only when the host needs to override the configured family; omit it
+and the console selection is used. The selected family is expanded into a full CSS stack
+with a generic fallback (`Times New Roman` becomes `"Times New Roman", Times, serif`).
+
+The two sources are deliberately **not** interchangeable. The notice's own Font Family must be one
+of the families above; a stored value that is no longer offered renders as Arial, so the console and
+the notice can never disagree. `settings.font` is a host override and is respected verbatim — pass a
+family you have loaded yourself, or a full stack, and the SDK uses it as-is.
+
+**Available families.** One is a self-hosted webfont — Montserrat — and five are system families
+needing no download: Arial, Georgia, Times New Roman, Trebuchet MS, Verdana. The catalogue is
+also importable on its own for building a font picker:
+
+```ts
+import {
+  NOTICE_FONT_CATALOGUE,
+  toNoticeFontValue,
+} from "@redacto.io/consent-sdk-react/fonts";
+```
+
+That subpath is data plus one pure function, with no React dependency, so importing it does
+not pull in the notice components.
+
+#### Webfont loading
+
+**Nothing to set up.** Montserrat ships inside this package, so the font an admin picks in the
+console renders with no configuration, no network request, and no third-party origin to
+allowlist — which matters here because a consent notice renders *before* the visitor has
+consented to anything, and must not disclose their IP to anyone.
+
+Loading is on demand: the payload is a lazily-imported module, so a visitor downloads it (214KB)
+only when their notice actually uses Montserrat, and **nothing at all** when the notice uses a
+system family such as Arial or Georgia. `src` leads with `local()`, so a visitor who already has
+the family installed uses their own copy; and `font-display: swap` means notice text is never
+invisible while a font loads.
+
+To skip webfont loading entirely — to avoid the payload, or if your CSP omits `data:` from
+`font-src` — call `configureNoticeFonts` once at app bootstrap:
+
+```ts
+import { configureNoticeFonts } from "@redacto.io/consent-sdk-react";
+
+configureNoticeFonts({ disabled: true });
+```
+
+Selections then render via their fallback stack, which is a same-genre face.
+
+**Content-Security-Policy.** The fonts are inlined as `data:` URIs, so a host with a `font-src`
+directive must include `data:` (`font-src 'self'` blocks them, and `*` does not match the
+`data:` scheme). A blocked font degrades to the next family in the stack — no error, no blank
+notice.
+
+**Non-Latin scripts.** Montserrat carries Latin and Latin-Extended glyphs only. On a notice
+rendered in Hindi, Bengali, Tamil or another non-Latin script, per-glyph fallback means that
+text renders in the device's own face for the script — fully readable, but not in Montserrat.
+System families are unaffected.
+
 ## Component Comparison
 
 | Feature                 | `RedactoNoticeConsent`                    | `RedactoNoticeConsentInline`                | `RedactoNoticeAssisted`                          |

package/dist/chunk-FEGTW73Q.mjs

@@ -0,0 +1,182 @@
+// src/shared/font-catalogue.generated.ts
+var NOTICE_FONT_CATALOGUE = [
+  {
+    id: "montserrat",
+    slug: "montserrat",
+    value: "Montserrat",
+    label: "Montserrat",
+    cssFamily: "Montserrat",
+    stack: 'Montserrat, "Trebuchet MS", "Segoe UI", Arial, sans-serif',
+    genericFallback: "sans-serif",
+    source: "webfont",
+    weights: [400, 500, 600, 700],
+    formats: ["woff2", "ttf"]
+  },
+  {
+    id: "arial",
+    slug: "arial",
+    value: "Arial",
+    label: "Arial",
+    cssFamily: "Arial",
+    stack: "Arial, Helvetica, sans-serif",
+    genericFallback: "sans-serif",
+    source: "system"
+  },
+  {
+    id: "georgia",
+    slug: "georgia",
+    value: "Georgia",
+    label: "Georgia",
+    cssFamily: "Georgia",
+    stack: 'Georgia, "Times New Roman", Times, serif',
+    genericFallback: "serif",
+    source: "system"
+  },
+  {
+    id: "times new roman",
+    slug: "times-new-roman",
+    value: "Times New Roman",
+    label: "Times New Roman",
+    cssFamily: "Times New Roman",
+    stack: '"Times New Roman", Times, serif',
+    genericFallback: "serif",
+    source: "system"
+  },
+  {
+    id: "trebuchet ms",
+    slug: "trebuchet-ms",
+    value: "Trebuchet MS",
+    label: "Trebuchet MS",
+    cssFamily: "Trebuchet MS",
+    stack: '"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif',
+    genericFallback: "sans-serif",
+    source: "system"
+  },
+  {
+    id: "verdana",
+    slug: "verdana",
+    value: "Verdana",
+    label: "Verdana",
+    cssFamily: "Verdana",
+    stack: "Verdana, Geneva, sans-serif",
+    genericFallback: "sans-serif",
+    source: "system"
+  }
+];
+var NOTICE_FONT_ENTRY_BY_ID = Object.fromEntries(NOTICE_FONT_CATALOGUE.map((entry) => [entry.id, entry]));
+
+// src/shared/constants.ts
+var INHERIT_FONT_FAMILY = "inherit";
+var NOTICE_FONT_STACKS = Object.fromEntries(
+  NOTICE_FONT_CATALOGUE.map((entry) => [entry.id, entry.stack])
+);
+var NOTICE_FONT_GENERIC_FALLBACK = ", sans-serif";
+var DEFAULT_NOTICE_FONT_ID = "arial";
+var CSS_FONT_KEYWORDS = [
+  "inherit",
+  "initial",
+  "revert",
+  "revert-layer",
+  "unset",
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji",
+  "fangsong"
+];
+var UNSAFE_FONT_CHARACTERS = /["';{}\\]/g;
+var FONT_NAME_QUOTE_CHARACTERS = /["']/g;
+var FONT_FAMILY_SEPARATOR = ",";
+var NOTICE_FONT_FACE_STYLE_ID_PREFIX = "redacto-notice-font-face-";
+var NOTICE_FONT_LOAD_ERROR_MESSAGE = "[redacto] notice webfont payload failed to load; falling back to the next family in the stack";
+var NOTICE_FONT_ROOT_ATTRIBUTE = "data-redacto-notice-font";
+var NOTICE_FONT_ROOT_PROPS = {
+  [NOTICE_FONT_ROOT_ATTRIBUTE]: ""
+};
+var NOTICE_FONT_STYLE_ID = "redacto-notice-font-styles";
+var NOTICE_FONT_CSS = `
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] button,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] input,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] optgroup,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] option,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] select,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] textarea {
+    font-family: inherit;
+  }
+`;
+
+// src/shared/notice-font.ts
+var toFontFamilyValue = (value) => {
+  var _a;
+  if (value.includes(",")) {
+    return value;
+  }
+  const family = value.replace(UNSAFE_FONT_CHARACTERS, "").trim();
+  if (!family) {
+    return INHERIT_FONT_FAMILY;
+  }
+  const lowered = family.toLowerCase();
+  if (CSS_FONT_KEYWORDS.includes(lowered)) {
+    return lowered;
+  }
+  return (_a = NOTICE_FONT_STACKS[lowered]) != null ? _a : `"${family}"${NOTICE_FONT_GENERIC_FALLBACK}`;
+};
+var toNoticeFontEntry = (fontPreference) => {
+  var _a;
+  const stored = fontPreference == null ? void 0 : fontPreference.trim();
+  if (!stored) {
+    return void 0;
+  }
+  return (_a = NOTICE_FONT_ENTRY_BY_ID[stored.toLowerCase()]) != null ? _a : NOTICE_FONT_ENTRY_BY_ID[DEFAULT_NOTICE_FONT_ID];
+};
+var toNoticeFontValue = (fontPreference) => {
+  var _a;
+  return (_a = toNoticeFontEntry(fontPreference)) == null ? void 0 : _a.value;
+};
+var resolveNoticeFontFamily = ({
+  hostFont,
+  noticeFont
+}) => {
+  var _a, _b;
+  const host = hostFont == null ? void 0 : hostFont.trim();
+  if (host) {
+    return toFontFamilyValue(host);
+  }
+  return (_b = (_a = toNoticeFontEntry(noticeFont)) == null ? void 0 : _a.stack) != null ? _b : INHERIT_FONT_FAMILY;
+};
+var fontStylesInjected = false;
+var injectNoticeFontStyles = () => {
+  if (fontStylesInjected || typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(NOTICE_FONT_STYLE_ID)) {
+    fontStylesInjected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = NOTICE_FONT_STYLE_ID;
+  style.textContent = NOTICE_FONT_CSS;
+  document.head.appendChild(style);
+  fontStylesInjected = true;
+};
+
+export {
+  NOTICE_FONT_CATALOGUE,
+  NOTICE_FONT_ENTRY_BY_ID,
+  FONT_NAME_QUOTE_CHARACTERS,
+  FONT_FAMILY_SEPARATOR,
+  NOTICE_FONT_FACE_STYLE_ID_PREFIX,
+  NOTICE_FONT_LOAD_ERROR_MESSAGE,
+  NOTICE_FONT_ROOT_PROPS,
+  toNoticeFontValue,
+  resolveNoticeFontFamily,
+  injectNoticeFontStyles
+};

package/dist/fonts.d.mts

@@ -0,0 +1,35 @@
+import { N as NoticeFontEntry, a as NoticeFontSourceValue } from './types-6Aj7faxL.mjs';
+export { b as NoticeFontFormat, c as NoticeFontGenericFallback, d as NoticeSystemFont, e as NoticeWebFont } from './types-6Aj7faxL.mjs';
+
+/**
+ * Every font family the console can assign to a notice, in dropdown order
+ * (webfonts first, then system families). `source: "webfont"` families ship
+ * inside this package and load on demand; `"system"` families need no loading.
+ */
+declare const NOTICE_FONT_CATALOGUE: ReadonlyArray<NoticeFontEntry>;
+
+/**
+ * The family a stored `font_preference` will actually render in, canonically
+ * cased — the default family when the catalogue no longer offers the stored
+ * value, and `undefined` when nothing is stored. Lets a console dropdown show
+ * exactly what the notice will render.
+ */
+declare const toNoticeFontValue: (fontPreference?: string) => string | undefined;
+/**
+ * Resolves the `font-family` for a notice root. The two sources are deliberately
+ * NOT interchangeable:
+ *
+ * - `hostFont` is the integrator's own `settings.font`. They own it, so it is used
+ *   as given — a family they loaded themselves, or a full stack, both pass through.
+ * - `noticeFont` is the console's stored `font_preference`, which is constrained to
+ *   the catalogue. A value the console no longer offers resolves to the default
+ *   family rather than being emitted verbatim, so the console and the rendered
+ *   notice can never disagree. A side effect worth having: free text stored on the
+ *   server can no longer reach the emitted CSS at all.
+ *
+ * Blank on both sides inherits the host page's font — "never set" is not the same
+ * as "set to something unavailable".
+ */
+declare const resolveNoticeFontFamily: ({ hostFont, noticeFont, }: NoticeFontSourceValue) => string;
+
+export { NOTICE_FONT_CATALOGUE, NoticeFontEntry, resolveNoticeFontFamily, toNoticeFontValue };

package/dist/fonts.d.ts

@@ -0,0 +1,35 @@
+import { N as NoticeFontEntry, a as NoticeFontSourceValue } from './types-6Aj7faxL.js';
+export { b as NoticeFontFormat, c as NoticeFontGenericFallback, d as NoticeSystemFont, e as NoticeWebFont } from './types-6Aj7faxL.js';
+
+/**
+ * Every font family the console can assign to a notice, in dropdown order
+ * (webfonts first, then system families). `source: "webfont"` families ship
+ * inside this package and load on demand; `"system"` families need no loading.
+ */
+declare const NOTICE_FONT_CATALOGUE: ReadonlyArray<NoticeFontEntry>;
+
+/**
+ * The family a stored `font_preference` will actually render in, canonically
+ * cased — the default family when the catalogue no longer offers the stored
+ * value, and `undefined` when nothing is stored. Lets a console dropdown show
+ * exactly what the notice will render.
+ */
+declare const toNoticeFontValue: (fontPreference?: string) => string | undefined;
+/**
+ * Resolves the `font-family` for a notice root. The two sources are deliberately
+ * NOT interchangeable:
+ *
+ * - `hostFont` is the integrator's own `settings.font`. They own it, so it is used
+ *   as given — a family they loaded themselves, or a full stack, both pass through.
+ * - `noticeFont` is the console's stored `font_preference`, which is constrained to
+ *   the catalogue. A value the console no longer offers resolves to the default
+ *   family rather than being emitted verbatim, so the console and the rendered
+ *   notice can never disagree. A side effect worth having: free text stored on the
+ *   server can no longer reach the emitted CSS at all.
+ *
+ * Blank on both sides inherits the host page's font — "never set" is not the same
+ * as "set to something unavailable".
+ */
+declare const resolveNoticeFontFamily: ({ hostFont, noticeFont, }: NoticeFontSourceValue) => string;
+
+export { NOTICE_FONT_CATALOGUE, NoticeFontEntry, resolveNoticeFontFamily, toNoticeFontValue };

package/dist/fonts.js

@@ -0,0 +1,183 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/fonts.ts
+var fonts_exports = {};
+__export(fonts_exports, {
+  NOTICE_FONT_CATALOGUE: () => NOTICE_FONT_CATALOGUE,
+  resolveNoticeFontFamily: () => resolveNoticeFontFamily,
+  toNoticeFontValue: () => toNoticeFontValue
+});
+module.exports = __toCommonJS(fonts_exports);
+
+// src/shared/font-catalogue.generated.ts
+var NOTICE_FONT_CATALOGUE = [
+  {
+    id: "montserrat",
+    slug: "montserrat",
+    value: "Montserrat",
+    label: "Montserrat",
+    cssFamily: "Montserrat",
+    stack: 'Montserrat, "Trebuchet MS", "Segoe UI", Arial, sans-serif',
+    genericFallback: "sans-serif",
+    source: "webfont",
+    weights: [400, 500, 600, 700],
+    formats: ["woff2", "ttf"]
+  },
+  {
+    id: "arial",
+    slug: "arial",
+    value: "Arial",
+    label: "Arial",
+    cssFamily: "Arial",
+    stack: "Arial, Helvetica, sans-serif",
+    genericFallback: "sans-serif",
+    source: "system"
+  },
+  {
+    id: "georgia",
+    slug: "georgia",
+    value: "Georgia",
+    label: "Georgia",
+    cssFamily: "Georgia",
+    stack: 'Georgia, "Times New Roman", Times, serif',
+    genericFallback: "serif",
+    source: "system"
+  },
+  {
+    id: "times new roman",
+    slug: "times-new-roman",
+    value: "Times New Roman",
+    label: "Times New Roman",
+    cssFamily: "Times New Roman",
+    stack: '"Times New Roman", Times, serif',
+    genericFallback: "serif",
+    source: "system"
+  },
+  {
+    id: "trebuchet ms",
+    slug: "trebuchet-ms",
+    value: "Trebuchet MS",
+    label: "Trebuchet MS",
+    cssFamily: "Trebuchet MS",
+    stack: '"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif',
+    genericFallback: "sans-serif",
+    source: "system"
+  },
+  {
+    id: "verdana",
+    slug: "verdana",
+    value: "Verdana",
+    label: "Verdana",
+    cssFamily: "Verdana",
+    stack: "Verdana, Geneva, sans-serif",
+    genericFallback: "sans-serif",
+    source: "system"
+  }
+];
+var NOTICE_FONT_ENTRY_BY_ID = Object.fromEntries(NOTICE_FONT_CATALOGUE.map((entry) => [entry.id, entry]));
+
+// src/shared/constants.ts
+var INHERIT_FONT_FAMILY = "inherit";
+var NOTICE_FONT_STACKS = Object.fromEntries(
+  NOTICE_FONT_CATALOGUE.map((entry) => [entry.id, entry.stack])
+);
+var NOTICE_FONT_GENERIC_FALLBACK = ", sans-serif";
+var DEFAULT_NOTICE_FONT_ID = "arial";
+var CSS_FONT_KEYWORDS = [
+  "inherit",
+  "initial",
+  "revert",
+  "revert-layer",
+  "unset",
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji",
+  "fangsong"
+];
+var UNSAFE_FONT_CHARACTERS = /["';{}\\]/g;
+var NOTICE_FONT_ROOT_ATTRIBUTE = "data-redacto-notice-font";
+var NOTICE_FONT_ROOT_PROPS = {
+  [NOTICE_FONT_ROOT_ATTRIBUTE]: ""
+};
+var NOTICE_FONT_CSS = `
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] button,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] input,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] optgroup,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] option,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] select,
+  [${NOTICE_FONT_ROOT_ATTRIBUTE}] textarea {
+    font-family: inherit;
+  }
+`;
+
+// src/shared/notice-font.ts
+var toFontFamilyValue = (value) => {
+  var _a;
+  if (value.includes(",")) {
+    return value;
+  }
+  const family = value.replace(UNSAFE_FONT_CHARACTERS, "").trim();
+  if (!family) {
+    return INHERIT_FONT_FAMILY;
+  }
+  const lowered = family.toLowerCase();
+  if (CSS_FONT_KEYWORDS.includes(lowered)) {
+    return lowered;
+  }
+  return (_a = NOTICE_FONT_STACKS[lowered]) != null ? _a : `"${family}"${NOTICE_FONT_GENERIC_FALLBACK}`;
+};
+var toNoticeFontEntry = (fontPreference) => {
+  var _a;
+  const stored = fontPreference == null ? void 0 : fontPreference.trim();
+  if (!stored) {
+    return void 0;
+  }
+  return (_a = NOTICE_FONT_ENTRY_BY_ID[stored.toLowerCase()]) != null ? _a : NOTICE_FONT_ENTRY_BY_ID[DEFAULT_NOTICE_FONT_ID];
+};
+var toNoticeFontValue = (fontPreference) => {
+  var _a;
+  return (_a = toNoticeFontEntry(fontPreference)) == null ? void 0 : _a.value;
+};
+var resolveNoticeFontFamily = ({
+  hostFont,
+  noticeFont
+}) => {
+  var _a, _b;
+  const host = hostFont == null ? void 0 : hostFont.trim();
+  if (host) {
+    return toFontFamilyValue(host);
+  }
+  return (_b = (_a = toNoticeFontEntry(noticeFont)) == null ? void 0 : _a.stack) != null ? _b : INHERIT_FONT_FAMILY;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NOTICE_FONT_CATALOGUE,
+  resolveNoticeFontFamily,
+  toNoticeFontValue
+});

package/dist/fonts.mjs

@@ -0,0 +1,10 @@
+import {
+  NOTICE_FONT_CATALOGUE,
+  resolveNoticeFontFamily,
+  toNoticeFontValue
+} from "./chunk-FEGTW73Q.mjs";
+export {
+  NOTICE_FONT_CATALOGUE,
+  resolveNoticeFontFamily,
+  toNoticeFontValue
+};

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import react__default from 'react';
+import { f as NoticeFontOptions } from './types-6Aj7faxL.mjs';
 
 type Settings$1 = {
     button: {
@@ -127,6 +128,7 @@ type Settings = {
     headingColor?: string;
     textColor?: string;
     borderColor?: string;
+    font?: string;
 };
 
 type Props = Readonly<{
@@ -244,4 +246,13 @@ declare class ApiError extends Error {
     });
 }
 
-export { ApiError, type ApiErrorCode, type ConsentFlowState, DigiLockerCallback, type DigiLockerCallbackProps, type GuardianVerificationErrorCode, RedactoNoticeAssisted, type RedactoNoticeAssistedProps, RedactoNoticeConsent, RedactoConsentInline as RedactoNoticeConsentInline };
+/**
+ * Configures notice webfont loading. Optional — the fonts ship inside this
+ * package and load automatically, so an integrator never has to call this.
+ *
+ * Pass `disabled: true` to skip loading entirely; families then render via their
+ * fallback stack, which is a same-genre face.
+ */
+declare const configureNoticeFonts: (options: NoticeFontOptions) => void;
+
+export { ApiError, type ApiErrorCode, type ConsentFlowState, DigiLockerCallback, type DigiLockerCallbackProps, type GuardianVerificationErrorCode, NoticeFontOptions, RedactoNoticeAssisted, type RedactoNoticeAssistedProps, RedactoNoticeConsent, RedactoConsentInline as RedactoNoticeConsentInline, configureNoticeFonts };