@redacto.io/consent-sdk-react 10.3.1-beta.0 → 10.4.0-beta.1

package/README.md

@@ -974,23 +974,116 @@ import { RedactoPrivacyCenter } from "@redacto.io/consent-sdk-react/privacy-cent
 
 **Props:**
 
-| Prop           | Type                                                                                                                       | Required | Default              | Description                                              |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------- | -------------------------------------------------------- |
-| `baseUrl`      | `string`                                                                                                                   | Yes      | -                    | Consent server base URL                                  |
-| `ledgerBaseUrl` | `string`                                                                                                                  | No       | -                    | Go ledger base URL. When set, user consents, group purposes, receipts, and manage-consent route through the ledger, and the DSAR form's product picker is overlaid from ledger-served consents. Omit to use the legacy `/dsar/privacy-center/*` routes. |
-| `slug`         | `string`                                                                                                                   | Yes      | -                    | Workspace slug                                           |
-| `accessToken`  | `string`                                                                                                                   | Yes      | -                    | JWT access token                                         |
-| `refreshToken` | `string`                                                                                                                   | Yes      | -                    | JWT refresh token                                        |
-| `onError`      | `(error: Error) => boolean`                                                                                                | Yes      | -                    | Error handler; return `true` if handled                  |
-| `settings`     | `{ theme?: "classic" \| "glass" }`                                                                                        | No       | -                    | Presentation options; `theme` picks the visual style (see [Theme](#privacy-center-appearance)). Colours always come from workspace branding |
-| `initialPage`  | `"consent-manager" \| "form" \| "activity" \| "case-details"`                                                              | No       | `"consent-manager"` | Page to render first                                     |
-| `onBack`       | `"back" \| "signout"`                                                                                                      | No       | -                    | Behaviour of the navbar back/signout control             |
+| Prop              | Type                                              | Required | Default             | Description |
+| ----------------- | ------------------------------------------------- | -------- | ------------------- | ----------- |
+| `baseUrl`         | `string`                                          | Yes      | -                   | Consent server base URL |
+| `ledgerBaseUrl`   | `string`                                          | No       | -                   | Go ledger base URL. When set, user consents, group purposes, receipts, and manage-consent route through the ledger, and the DSAR form's product picker is overlaid from ledger-served consents. Omit to use the legacy `/dsar/privacy-center/*` routes. |
+| `slug`            | `string`                                          | Yes      | -                   | Organisation slug |
+| `accessToken`     | `string`                                          | No       | -                   | JWT access token. Without one the Privacy Center waits for it, or shows its built-in sign-in when `builtInSignIn` is on (see [Sign-in](#privacy-center-sign-in)) |
+| `refreshToken`    | `string`                                          | No       | -                   | JWT refresh token |
+| `organisationUuid`| `string`                                          | No       | -                   | Organisation UUID for sign-in and settings when there is no token; looked up from `slug` when omitted (also the sandbox org) |
+| `workspaceUuid`   | `string`                                          | No       | -                   | Workspace UUID for sign-in when there is no token; looked up from `slug` when omitted (also the sandbox workspace) |
+| `onError`         | `(error: Error) => boolean`                       | Yes      | -                   | Error handler; return `true` if handled |
+| `settings`        | `PrivacyCenterSettings`                           | No       | -                   | Overrides for the settings published from the console, merged field by field per group (see [Settings](#privacy-center-settings)). `theme` is kept as an alias for `branding.style` |
+| `builtInSignIn`   | `boolean`                                         | No       | `false`             | Show the built-in OTP sign-in when there is no token. Off, the Privacy Center keeps its loading state until the host passes a token |
+| `initialPage`     | `"consent-manager" \| "form" \| "activity" \| "case-details" \| "notifications" \| "receipts"` | No | `"consent-manager"` | Page to render first; a section switched off in the settings falls back to the first enabled one |
+| `onBack`          | `"back" \| "signout"`                              | No       | -                   | Behaviour of the navbar back/signout control |
+| `onReady`         | `(event: { signedIn: boolean }) => void`          | No       | -                   | Called once, when the first screen (sign-in or the Privacy Center) is on show |
+| `onConsentChange` | `(change: PrivacyCenterConsentChange) => void`    | No       | -                   | Called after a consent was withdrawn, re-granted or renewed |
+| `onRequestSubmit` | `(request: PrivacyCenterRequestSubmission) => void` | No     | -                   | Called after a data request (case) was created |
+| `onSignOut`       | `(event: { reason: "user" \| "timeout" \| "session-expired" }) => void` | No | - | Called when the visitor is signed out |
+
+The callbacks never throw into the Privacy Center: an exception in a handler is logged and ignored. Their payloads:
+
+```ts
+type PrivacyCenterConsentChange = {
+  action: "revoke" | "regrant" | "renew";
+  purposeUuid: string;
+  productUuid: string | null;
+  dataElementUuids: readonly string[]; // empty when the change covered the whole purpose
+  nominatorUuid: string | null;        // set when acting on behalf of a nominator
+};
+
+type PrivacyCenterRequestSubmission = {
+  caseId: string;      // the case id shown to the visitor
+  caseUuid: string;
+  requestType: "access" | "correction" | "erasure" | "nomination" | "grievance";
+  productUuid: string | null; // null for nomination and grievance
+};
+```
+
+<a id="privacy-center-settings"></a>
+
+### Settings
+
+The Privacy Center reads the settings an admin publishes in the Redacto console (Rights Management › Privacy Center › Settings) from the public endpoint `GET {baseUrl}/public/organisations/{organisation_uuid}/privacy-center-settings/?lang={language}`. The organisation comes from `organisationUuid`, the access token, the session, or a lookup by `slug`. The settings are fetched again, localised, when the visitor changes language, and cached in memory per organisation and language.
+
+Rendering never waits for them: the Privacy Center starts with the defaults and swaps the published values in when they arrive. **With nothing published, or if the request fails, it looks and behaves exactly as before settings existed.**
+
+What the settings control:
+
+- **Branding**: classic or glass style, the organisation's own colours, font, name and logo instead of the workspace branding, logo height and corner radius.
+- **Menu**: section order, labels, and which sections are on. A section switched off disappears from the menu and can't be opened; switching off `notifications` hides the bell too.
+- **Welcome message** at the top of the consent manager.
+- **Requests**: which request types the form offers, in what order and under what names (narrowed to the server's own list when it sends one), which grievance categories are offered, whether erasure also revokes consent, and the default withdraw warning (a purpose's own warning still wins).
+- **Languages**: which languages the switcher offers, whether it shows, the default language and whether the browser's language is detected. Once settings are published (or the host overrides them), Urdu, Sindhi and Kashmiri render right to left; with nothing published the text direction is inherited as before.
+- **Session timeout**: sign the visitor out after 15, 30 or 60 minutes without activity.
+- **Footer**: links, privacy policy, grievance contact, copyright and "Powered by".
+- **Sign-in screen**: layout, background, copy, channels and default country code (see below).
+- **Custom CSS** (see below).
+
+Copy can use `{brand}`, `{legal}`, `{year}`, `{contact}` and `{name}`; `resolvePlaceholders(text, context)` is exported for the same substitution in your own UI.
+
+Override any of it in code; each group merges field by field over what was published:
+
+```tsx
+<RedactoPrivacyCenter
+  baseUrl={BASE_URL}
+  slug="acme-co"
+  accessToken={accessToken}
+  onError={() => false}
+  settings={{
+    branding: { style: "glass" },
+    portal: { welcome_enabled: true, session_timeout_minutes: 30 },
+    languages: { enabled: ["en", "hi"], default: "en" },
+  }}
+/>
+```
+
+The full shape is exported as `ResolvedPrivacyCenterSettings` (with `DEFAULT_PRIVACY_CENTER_SETTINGS`); `PrivacyCenterSettings` is the override type.
+
+<a id="privacy-center-sign-in"></a>
+
+### Sign-in
+
+Pass `builtInSignIn` and, with no `accessToken`, the Privacy Center shows its own sign-in instead of a loader: the visitor enters a mobile number or email, receives a one-time code (resend after 50 seconds) and is signed straight in with the tokens it issues. Layout (card, split or minimal), background, copy, channels (SMS, email or both), default country code, notice line and support link come from the `sign_in` settings. It is off by default, so a host that passes its token a moment after mounting never flashes a sign-in screen.
+
+```tsx
+<RedactoPrivacyCenter baseUrl={BASE_URL} slug="acme-co" builtInSignIn onError={() => false} />
+```
+
+### Custom CSS
+
+`custom_css` from the settings is injected inside an `@scope` for this Privacy Center only, after the same safety checks as a notice's custom CSS, so it never reaches the host page. Target these stable parts:
+
+| Part | Element |
+| --- | --- |
+| `[data-redacto-part="topbar"]` | Top bar |
+| `[data-redacto-part="nav"]` / `"nav-item"` | Menu and each menu entry |
+| `[data-redacto-part="welcome"]` | Welcome message |
+| `[data-redacto-part="consent-card"]` | Consent manager card (and each product card on phones) |
+| `[data-redacto-part="request-form"]` | Data request form |
+| `[data-redacto-part="button-primary"]` | Primary buttons |
+| `[data-redacto-part="footer"]` | Footer |
+| `[data-redacto-part="signin-card"]` | Sign-in form |
+
+The `--pc-*` theme variables are scoped the same way: workspace branding and the settings' colours apply to this Privacy Center (and its menus and tooltips) without writing to the host page's `<html>`.
 
 <a id="privacy-center-appearance"></a>
 
 ### Theme
 
-`settings.theme` picks the visual style; colours, logo and brand name still come from the workspace's branding.
+`settings.theme` (or `settings.branding.style`) picks the visual style; colours, logo and brand name come from the workspace's branding unless the published settings replace them.
 
 - **`classic`** (default): the standard look.
 - **`glass`**: frosted, translucent surfaces over a soft wash of the brand colour, pill-shaped controls and motion. On phones, dialogs and the navigation menu rise as bottom sheets; on wider screens dialogs float as centred cards. Motion respects `prefers-reduced-motion`.

package/dist/{chunk-RG4PVVKF.mjs → chunk-DGMUTOWJ.mjs}

@@ -218,6 +218,8 @@ var NOTICE_DISALLOWED_CSS_TOKENS = [
   "expression(",
   "behavior:"
 ];
+var CSS_SCOPE_AT_RULE = "@scope";
+var CSS_STRING_SPECIALS_RE = /["\\\n]/g;
 var CSS_ESCAPE_RE = /\\([0-9a-f]{1,6})(?:\r\n|[ \t\r\n\f])?|\\([\s\S])/gi;
 var CSS_BRACKET_PAIRS = {
   "{": "}",
@@ -255,6 +257,63 @@ var buildTtsCssVariables = (colors) => Object.fromEntries(
 );
 var buildTtsRootAttributes = (colors) => colors.tts_highlight_text ? { [TTS_TEXT_ATTRIBUTE]: "" } : {};
 
+// src/shared/appearance/customCss.ts
+var decodeCssEscapes = (value) => value.replace(
+  CSS_ESCAPE_RE,
+  (_match, hex, literal) => {
+    if (hex === void 0) {
+      return literal;
+    }
+    const codePoint = Number.parseInt(hex, HEX_RADIX);
+    if (codePoint === 0 || codePoint > MAX_CODE_POINT || codePoint >= SURROGATE_MIN && codePoint <= SURROGATE_MAX) {
+      return CSS_REPLACEMENT_CHARACTER;
+    }
+    return String.fromCodePoint(codePoint);
+  }
+);
+var hasBalancedBlocks = (css) => {
+  const open = [];
+  let quote;
+  let inComment = false;
+  for (let index = 0; index < css.length; index += 1) {
+    const char = css[index];
+    if (inComment) {
+      if (char === "*" && css[index + 1] === "/") {
+        inComment = false;
+        index += 1;
+      }
+    } else if (char === "\\") {
+      index += 1;
+    } else if (quote) {
+      if (char === quote) {
+        quote = void 0;
+      } else if (CSS_NEWLINES.includes(char)) {
+        return false;
+      }
+    } else if (char === "/" && css[index + 1] === "*") {
+      inComment = true;
+      index += 1;
+    } else if (CSS_QUOTES.includes(char)) {
+      quote = char;
+    } else if (char in CSS_BRACKET_PAIRS) {
+      open.push(CSS_BRACKET_PAIRS[char]);
+    } else if (CSS_CLOSING_BRACKETS.includes(char) && open.pop() !== char) {
+      return false;
+    }
+  }
+  return open.length === 0 && !quote && !inComment;
+};
+var isSafeCustomCss = (css) => {
+  if (css.length > NOTICE_CUSTOM_CSS_MAX_LENGTH || !hasBalancedBlocks(css)) {
+    return false;
+  }
+  const lowered = css.toLowerCase();
+  const decoded = decodeCssEscapes(css).toLowerCase();
+  return NOTICE_DISALLOWED_CSS_TOKENS.every(
+    (token) => !lowered.includes(token) && !decoded.includes(token)
+  );
+};
+
 // src/shared/appearance/registry.ts
 var DEFAULT_APPEARANCE = "classic";
 var APPEARANCE_ATTRIBUTE = "data-redacto-appearance";
@@ -325,63 +384,6 @@ var prefersReducedMotion = () => {
   return typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches) === true;
 };
 
-// src/shared/appearance/customCss.ts
-var decodeCssEscapes = (value) => value.replace(
-  CSS_ESCAPE_RE,
-  (_match, hex, literal) => {
-    if (hex === void 0) {
-      return literal;
-    }
-    const codePoint = Number.parseInt(hex, HEX_RADIX);
-    if (codePoint === 0 || codePoint > MAX_CODE_POINT || codePoint >= SURROGATE_MIN && codePoint <= SURROGATE_MAX) {
-      return CSS_REPLACEMENT_CHARACTER;
-    }
-    return String.fromCodePoint(codePoint);
-  }
-);
-var hasBalancedBlocks = (css) => {
-  const open = [];
-  let quote;
-  let inComment = false;
-  for (let index = 0; index < css.length; index += 1) {
-    const char = css[index];
-    if (inComment) {
-      if (char === "*" && css[index + 1] === "/") {
-        inComment = false;
-        index += 1;
-      }
-    } else if (char === "\\") {
-      index += 1;
-    } else if (quote) {
-      if (char === quote) {
-        quote = void 0;
-      } else if (CSS_NEWLINES.includes(char)) {
-        return false;
-      }
-    } else if (char === "/" && css[index + 1] === "*") {
-      inComment = true;
-      index += 1;
-    } else if (CSS_QUOTES.includes(char)) {
-      quote = char;
-    } else if (char in CSS_BRACKET_PAIRS) {
-      open.push(CSS_BRACKET_PAIRS[char]);
-    } else if (CSS_CLOSING_BRACKETS.includes(char) && open.pop() !== char) {
-      return false;
-    }
-  }
-  return open.length === 0 && !quote && !inComment;
-};
-var isSafeCustomCss = (css) => {
-  if (css.length > NOTICE_CUSTOM_CSS_MAX_LENGTH || !hasBalancedBlocks(css)) {
-    return false;
-  }
-  const lowered = css.toLowerCase();
-  const decoded = decodeCssEscapes(css).toLowerCase();
-  return NOTICE_DISALLOWED_CSS_TOKENS.every(
-    (token) => !lowered.includes(token) && !decoded.includes(token)
-  );
-};
-
 // src/shared/appearance/resolve.ts
 var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var pickColors = (raw) => {
@@ -687,6 +689,36 @@ var SANDBOX_TOKEN_HEADER = "X-Consent-Token";
 var DEFAULT_CONSENT_API_BASE_URL = "https://api.redacto.io/consent";
 var USER_SERVICE_PATH = "/user/api/0";
 
+// src/shared/appearance/scopedCss.ts
+var escapesScope = (style) => {
+  var _a, _b;
+  return Array.from((_b = (_a = style.sheet) == null ? void 0 : _a.cssRules) != null ? _b : []).some(
+    (rule) => !rule.cssText.startsWith(CSS_SCOPE_AT_RULE)
+  );
+};
+var applyScopedCustomCss = ({
+  scopeAttribute,
+  scopeId,
+  markerAttribute,
+  css
+}) => {
+  if (typeof document === "undefined" || !css.trim() || !isSafeCustomCss(css)) {
+    return () => void 0;
+  }
+  const id = scopeId.replace(CSS_STRING_SPECIALS_RE, "\\$&");
+  const style = document.createElement("style");
+  style.setAttribute(markerAttribute, scopeId);
+  style.textContent = `${CSS_SCOPE_AT_RULE} ([${scopeAttribute}="${id}"]) {
+${css}
+}`;
+  document.head.appendChild(style);
+  if (escapesScope(style)) {
+    style.remove();
+    return () => void 0;
+  }
+  return () => style.remove();
+};
+
 export {
   SANDBOX_TOKEN_HEADER,
   withIdempotencyKey,
@@ -724,5 +756,6 @@ export {
   Collapse,
   configureNoticeFonts,
   loadNoticeWebfont,
-  useMediaQuery
+  useMediaQuery,
+  applyScopedCustomCss
 };

package/dist/index.js

@@ -1297,6 +1297,96 @@ var noticeChromeCopy = (language) => {
 };
 var NOTICE_CHROME_LANGUAGES = Object.keys(TRANSLATIONS);
 
+// src/shared/appearance/constants.ts
+var NOTICE_COLOR_KEYS = [
+  "background",
+  "surface",
+  "heading",
+  "text",
+  "muted_text",
+  "link",
+  "border",
+  "overlay",
+  "accept_all_bg",
+  "accept_all_text",
+  "accept_bg",
+  "accept_text",
+  "decline_bg",
+  "decline_text",
+  "decline_border",
+  "language_bg",
+  "language_text",
+  "language_selected_bg",
+  "language_selected_text",
+  "toggle_on",
+  "toggle_off",
+  "toggle_knob",
+  "tts_highlight_bg",
+  "tts_highlight_text"
+];
+var NOTICE_SELECTION_CONTROLS = ["checkbox", "radio", "dropdown"];
+var NOTICE_CONTROL_STYLES = ["checkbox", "switch"];
+var NOTICE_RADIUS_MIN = 0;
+var NOTICE_RADIUS_MAX = 28;
+var NOTICE_MOBILE_LAYOUTS = ["modal", "sheet"];
+var NOTICE_DESKTOP_POSITIONS = [
+  "center",
+  "bottom-right",
+  "bottom-left",
+  "bottom-bar"
+];
+var NOTICE_BACKDROPS = ["dim", "none"];
+var NOTICE_PHONE_FOOTERS = ["stacked", "paired"];
+var NOTICE_TEXT_SCALES = ["sm", "md", "lg"];
+var DEFAULT_TEXT_SCALE = "md";
+var DEFAULT_DESKTOP_POSITION = "center";
+var NOTICE_TEXT_SCALE_FACTORS = {
+  sm: 0.92,
+  md: 1,
+  lg: 1.1
+};
+var NOTICE_WIDTH_MIN = 320;
+var NOTICE_WIDTH_MAX = 960;
+var NOTICE_LOGO_SIZE_MIN = 16;
+var NOTICE_LOGO_SIZE_MAX = 96;
+var NOTICE_CUSTOM_CSS_MAX_LENGTH = 2e4;
+var NOTICE_DISALLOWED_CSS_TOKENS = [
+  "</style",
+  "@import",
+  "javascript:",
+  "expression(",
+  "behavior:"
+];
+var CSS_SCOPE_AT_RULE = "@scope";
+var CSS_STRING_SPECIALS_RE = /["\\\n]/g;
+var CSS_ESCAPE_RE = /\\([0-9a-f]{1,6})(?:\r\n|[ \t\r\n\f])?|\\([\s\S])/gi;
+var CSS_BRACKET_PAIRS = {
+  "{": "}",
+  "(": ")",
+  "[": "]"
+};
+var CSS_CLOSING_BRACKETS = Object.values(CSS_BRACKET_PAIRS);
+var CSS_QUOTES = ['"', "'"];
+var CSS_NEWLINES = ["\n", "\r", "\f"];
+var CSS_REPLACEMENT_CHARACTER = "\uFFFD";
+var MAX_CODE_POINT = 1114111;
+var HEX_RADIX = 16;
+var SURROGATE_MIN = 55296;
+var SURROGATE_MAX = 57343;
+var NOTICE_HEX_COLOR_RE = /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var DEFAULT_TTS_HIGHLIGHT_BG = "#FFF9C4";
+var NOTICE_THEME_VARS = {
+  accent: "--redacto-accent",
+  controlOff: "--redacto-control-off",
+  knob: "--redacto-toggle-knob",
+  ttsBackground: "--redacto-tts-bg",
+  ttsText: "--redacto-tts-text"
+};
+var THEMED_ACCENT = `var(${NOTICE_THEME_VARS.accent}, #4f87ff)`;
+var THEMED_CONTROL_OFF = `var(${NOTICE_THEME_VARS.controlOff}, #d0d5dd)`;
+var THEMED_TTS_BACKGROUND = `var(${NOTICE_THEME_VARS.ttsBackground}, ${DEFAULT_TTS_HIGHLIGHT_BG})`;
+var TTS_TEXT_ATTRIBUTE = "data-redacto-tts-text";
+
 // src/RedactoNoticeConsent/constants.ts
 var DEFAULT_LOGO_POSITION = "left";
 var DEFAULT_PURPOSE_SECTION_HEADING = "Manage What You Share";
@@ -1414,8 +1504,6 @@ var MOTION_ATTRIBUTE = "data-redacto-motion";
 var MOTION_OFF = "off";
 var NOTICE_ID_ATTRIBUTE = "data-redacto-notice-id";
 var CUSTOM_CSS_ATTRIBUTE = "data-redacto-notice-css";
-var CSS_SCOPE_AT_RULE = "@scope";
-var CSS_STRING_SPECIALS_RE = /["\\\n]/g;
 var PX_LENGTH_RE = /^(\d+(?:\.\d+)?)px$/;
 var FONT_SIZE_PRECISION = 10;
 var DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
@@ -2153,94 +2241,6 @@ var NoticeFooter = ({
   ] });
 };
 
-// src/shared/appearance/constants.ts
-var NOTICE_COLOR_KEYS = [
-  "background",
-  "surface",
-  "heading",
-  "text",
-  "muted_text",
-  "link",
-  "border",
-  "overlay",
-  "accept_all_bg",
-  "accept_all_text",
-  "accept_bg",
-  "accept_text",
-  "decline_bg",
-  "decline_text",
-  "decline_border",
-  "language_bg",
-  "language_text",
-  "language_selected_bg",
-  "language_selected_text",
-  "toggle_on",
-  "toggle_off",
-  "toggle_knob",
-  "tts_highlight_bg",
-  "tts_highlight_text"
-];
-var NOTICE_SELECTION_CONTROLS = ["checkbox", "radio", "dropdown"];
-var NOTICE_CONTROL_STYLES = ["checkbox", "switch"];
-var NOTICE_RADIUS_MIN = 0;
-var NOTICE_RADIUS_MAX = 28;
-var NOTICE_MOBILE_LAYOUTS = ["modal", "sheet"];
-var NOTICE_DESKTOP_POSITIONS = [
-  "center",
-  "bottom-right",
-  "bottom-left",
-  "bottom-bar"
-];
-var NOTICE_BACKDROPS = ["dim", "none"];
-var NOTICE_PHONE_FOOTERS = ["stacked", "paired"];
-var NOTICE_TEXT_SCALES = ["sm", "md", "lg"];
-var DEFAULT_TEXT_SCALE = "md";
-var DEFAULT_DESKTOP_POSITION = "center";
-var NOTICE_TEXT_SCALE_FACTORS = {
-  sm: 0.92,
-  md: 1,
-  lg: 1.1
-};
-var NOTICE_WIDTH_MIN = 320;
-var NOTICE_WIDTH_MAX = 960;
-var NOTICE_LOGO_SIZE_MIN = 16;
-var NOTICE_LOGO_SIZE_MAX = 96;
-var NOTICE_CUSTOM_CSS_MAX_LENGTH = 2e4;
-var NOTICE_DISALLOWED_CSS_TOKENS = [
-  "</style",
-  "@import",
-  "javascript:",
-  "expression(",
-  "behavior:"
-];
-var CSS_ESCAPE_RE = /\\([0-9a-f]{1,6})(?:\r\n|[ \t\r\n\f])?|\\([\s\S])/gi;
-var CSS_BRACKET_PAIRS = {
-  "{": "}",
-  "(": ")",
-  "[": "]"
-};
-var CSS_CLOSING_BRACKETS = Object.values(CSS_BRACKET_PAIRS);
-var CSS_QUOTES = ['"', "'"];
-var CSS_NEWLINES = ["\n", "\r", "\f"];
-var CSS_REPLACEMENT_CHARACTER = "\uFFFD";
-var MAX_CODE_POINT = 1114111;
-var HEX_RADIX = 16;
-var SURROGATE_MIN = 55296;
-var SURROGATE_MAX = 57343;
-var NOTICE_HEX_COLOR_RE = /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
-var DEFAULT_TTS_HIGHLIGHT_BG = "#FFF9C4";
-var NOTICE_THEME_VARS = {
-  accent: "--redacto-accent",
-  controlOff: "--redacto-control-off",
-  knob: "--redacto-toggle-knob",
-  ttsBackground: "--redacto-tts-bg",
-  ttsText: "--redacto-tts-text"
-};
-var THEMED_ACCENT = `var(${NOTICE_THEME_VARS.accent}, #4f87ff)`;
-var THEMED_CONTROL_OFF = `var(${NOTICE_THEME_VARS.controlOff}, #d0d5dd)`;
-var THEMED_TTS_BACKGROUND = `var(${NOTICE_THEME_VARS.ttsBackground}, ${DEFAULT_TTS_HIGHLIGHT_BG})`;
-var TTS_TEXT_ATTRIBUTE = "data-redacto-tts-text";
-
 // src/shared/appearance/ttsCssVariables.ts
 var buildTtsCssVariables = (colors) => Object.fromEntries(
   [
@@ -4884,21 +4884,26 @@ var showsNoticePolicyLink = (productCount, entryCount) => entryCount === 0 || pr
 // src/RedactoNoticeConsent/useNoticeAppearance.ts
 var import_react7 = require("react");
 
-// src/RedactoNoticeConsent/services/customCss.ts
+// src/shared/appearance/scopedCss.ts
 var escapesScope = (style) => {
   var _a, _b;
   return Array.from((_b = (_a = style.sheet) == null ? void 0 : _a.cssRules) != null ? _b : []).some(
     (rule) => !rule.cssText.startsWith(CSS_SCOPE_AT_RULE)
   );
 };
-var applyNoticeCustomCss = (noticeId, css3) => {
-  if (typeof document === "undefined") {
+var applyScopedCustomCss = ({
+  scopeAttribute,
+  scopeId,
+  markerAttribute,
+  css: css3
+}) => {
+  if (typeof document === "undefined" || !css3.trim() || !isSafeCustomCss(css3)) {
     return () => void 0;
   }
-  const id = noticeId.replace(CSS_STRING_SPECIALS_RE, "\\$&");
+  const id = scopeId.replace(CSS_STRING_SPECIALS_RE, "\\$&");
   const style = document.createElement("style");
-  style.setAttribute(CUSTOM_CSS_ATTRIBUTE, noticeId);
-  style.textContent = `${CSS_SCOPE_AT_RULE} ([${NOTICE_ID_ATTRIBUTE}="${id}"]) {
+  style.setAttribute(markerAttribute, scopeId);
+  style.textContent = `${CSS_SCOPE_AT_RULE} ([${scopeAttribute}="${id}"]) {
 ${css3}
 }`;
   document.head.appendChild(style);
@@ -4909,6 +4914,14 @@ ${css3}
   return () => style.remove();
 };
 
+// src/RedactoNoticeConsent/services/customCss.ts
+var applyNoticeCustomCss = (noticeId, css3) => applyScopedCustomCss({
+  scopeAttribute: NOTICE_ID_ATTRIBUTE,
+  scopeId: noticeId,
+  markerAttribute: CUSTOM_CSS_ATTRIBUTE,
+  css: css3
+});
+
 // src/RedactoNoticeConsent/utils/mergeHostSettings.ts
 var definedColors = (colors) => Object.fromEntries(
   Object.entries(colors).filter(([, value]) => Boolean(value))

package/dist/index.mjs

@@ -15,6 +15,7 @@ import {
   THEMED_CONTROL_OFF,
   THEMED_TTS_BACKGROUND,
   TTS_TEXT_ATTRIBUTE,
+  applyScopedCustomCss,
   buildTtsCssVariables,
   buildTtsRootAttributes,
   configureNoticeFonts,
@@ -33,7 +34,7 @@ import {
   withAlpha,
   withColorScheme,
   withIdempotencyKey
-} from "./chunk-RG4PVVKF.mjs";
+} from "./chunk-DGMUTOWJ.mjs";
 import {
   NOTICE_FONT_ROOT_PROPS,
   REQUIRED_MARKER_ARIA_LABEL,
@@ -1312,8 +1313,6 @@ var MOTION_ATTRIBUTE = "data-redacto-motion";
 var MOTION_OFF = "off";
 var NOTICE_ID_ATTRIBUTE = "data-redacto-notice-id";
 var CUSTOM_CSS_ATTRIBUTE = "data-redacto-notice-css";
-var CSS_SCOPE_AT_RULE = "@scope";
-var CSS_STRING_SPECIALS_RE = /["\\\n]/g;
 var PX_LENGTH_RE = /^(\d+(?:\.\d+)?)px$/;
 var FONT_SIZE_PRECISION = 10;
 var DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
@@ -3989,29 +3988,12 @@ var showsNoticePolicyLink = (productCount, entryCount) => entryCount === 0 || pr
 import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
 
 // src/RedactoNoticeConsent/services/customCss.ts
-var escapesScope = (style) => {
-  var _a, _b;
-  return Array.from((_b = (_a = style.sheet) == null ? void 0 : _a.cssRules) != null ? _b : []).some(
-    (rule) => !rule.cssText.startsWith(CSS_SCOPE_AT_RULE)
-  );
-};
-var applyNoticeCustomCss = (noticeId, css3) => {
-  if (typeof document === "undefined") {
-    return () => void 0;
-  }
-  const id = noticeId.replace(CSS_STRING_SPECIALS_RE, "\\$&");
-  const style = document.createElement("style");
-  style.setAttribute(CUSTOM_CSS_ATTRIBUTE, noticeId);
-  style.textContent = `${CSS_SCOPE_AT_RULE} ([${NOTICE_ID_ATTRIBUTE}="${id}"]) {
-${css3}
-}`;
-  document.head.appendChild(style);
-  if (escapesScope(style)) {
-    style.remove();
-    return () => void 0;
-  }
-  return () => style.remove();
-};
+var applyNoticeCustomCss = (noticeId, css3) => applyScopedCustomCss({
+  scopeAttribute: NOTICE_ID_ATTRIBUTE,
+  scopeId: noticeId,
+  markerAttribute: CUSTOM_CSS_ATTRIBUTE,
+  css: css3
+});
 
 // src/RedactoNoticeConsent/utils/mergeHostSettings.ts
 var definedColors = (colors) => Object.fromEntries(