@redacto.io/consent-sdk-js 1.0.0-beta.1 → 1.1.0

package/dist/redacto.mjs

@@ -152,17 +152,6 @@ function createMediaQuery(query) {
   };
 }
 
-// src/core/jwt-decode.ts
-import { jwtDecode } from "jwt-decode";
-function decodeTokenSafely(token) {
-  try {
-    return jwtDecode(token);
-  } catch (error) {
-    console.warn("Failed to decode JWT token:", error);
-    return null;
-  }
-}
-
 // src/services/cache.ts
 var apiCache = /* @__PURE__ */ new Map();
 var CACHE_TTL = 5 * 60 * 1e3;
@@ -183,6 +172,141 @@ function clearApiCache() {
   apiCache.clear();
 }
 
+// src/core/jwt-decode.ts
+import { jwtDecode } from "jwt-decode";
+function decodeTokenSafely(token) {
+  try {
+    return jwtDecode(token);
+  } catch (error) {
+    console.warn("Failed to decode JWT token:", error);
+    return null;
+  }
+}
+
+// src/api/sandbox.ts
+var SANDBOX_TOKEN_HEADER = "X-Consent-Token";
+var resolveSandboxAuth = (options) => {
+  var _a, _b, _c, _d, _e, _f;
+  const token = (_a = options.token) == null ? void 0 : _a.trim();
+  if (!token) {
+    return null;
+  }
+  const organisationUuid = (_b = options.organisationUuid) == null ? void 0 : _b.trim();
+  const workspaceUuid = (_c = options.workspaceUuid) == null ? void 0 : _c.trim();
+  const ucic = (_d = options.sandboxUcic) == null ? void 0 : _d.trim();
+  const email = (_e = options.sandboxEmail) == null ? void 0 : _e.trim();
+  const mobile = (_f = options.sandboxMobile) == null ? void 0 : _f.trim();
+  if (!organisationUuid || !workspaceUuid) {
+    throw new Error(
+      "Sandbox mode requires organisationUuid and workspaceUuid"
+    );
+  }
+  if (!ucic && !email && !mobile) {
+    throw new Error("Sandbox mode requires a UCIC, email, or mobile");
+  }
+  return { token, ucic, email, mobile, organisationUuid, workspaceUuid };
+};
+var resolveRequestAuth = (accessToken, options) => {
+  const sandbox = resolveSandboxAuth(options);
+  if (sandbox) {
+    return {
+      organisationUuid: sandbox.organisationUuid,
+      workspaceUuid: sandbox.workspaceUuid,
+      sandbox
+    };
+  }
+  const decodedToken = accessToken ? decodeTokenSafely(accessToken) : null;
+  if (!decodedToken) {
+    throw new Error("Invalid access token");
+  }
+  const { organisation_uuid, workspace_uuid } = decodedToken;
+  if (!organisation_uuid || !workspace_uuid) {
+    throw new Error("Invalid token: missing organization or workspace UUID");
+  }
+  return {
+    organisationUuid: organisation_uuid,
+    workspaceUuid: workspace_uuid,
+    sandbox: null
+  };
+};
+var buildAuthHeaders = (accessToken, sandbox) => {
+  if (sandbox) {
+    return { [SANDBOX_TOKEN_HEADER]: sandbox.token };
+  }
+  return { Authorization: `Bearer ${accessToken}` };
+};
+var sandboxBodyIdentity = (sandbox) => {
+  const payload = {};
+  if (sandbox.ucic) {
+    payload.org_user_id = sandbox.ucic;
+  }
+  if (sandbox.email) {
+    payload.primary_email = sandbox.email;
+  }
+  if (sandbox.mobile) {
+    payload.primary_mobile = sandbox.mobile;
+  }
+  return payload;
+};
+var sandboxQueryIdentity = (sandbox) => sandboxBodyIdentity(sandbox);
+
+// src/api/constants.ts
+var CODE_BY_NAME = /* @__PURE__ */ new Map([
+  ["english", "en"],
+  ["assamese", "as"],
+  ["bengali", "bn"],
+  ["bodo", "brx"],
+  ["dogri", "doi"],
+  ["goan konkani", "gom"],
+  ["gujarati", "gu"],
+  ["hindi", "hi"],
+  ["kannada", "kn"],
+  ["kashmiri", "ks"],
+  ["maithili", "mai"],
+  ["malayalam", "ml"],
+  ["manipuri", "mni-Mtei"],
+  ["marathi", "mr"],
+  ["nepali", "ne"],
+  ["odia", "or"],
+  ["punjabi", "pa"],
+  ["sanskrit", "sa"],
+  ["santali", "sat"],
+  ["sindhi", "sd"],
+  ["tamil", "ta"],
+  ["telugu", "te"],
+  ["urdu", "ur"]
+]);
+var CODE_BY_LOWER = new Map(
+  [...CODE_BY_NAME.values()].map((c) => [c.toLowerCase(), c])
+);
+
+// src/api/language.ts
+function toLanguageCode(lang) {
+  var _a, _b;
+  if (!lang) {
+    return void 0;
+  }
+  const trimmed = lang.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  const lower = trimmed.toLowerCase();
+  return (_b = (_a = CODE_BY_LOWER.get(lower)) != null ? _a : CODE_BY_NAME.get(lower)) != null ? _b : trimmed;
+}
+function resolveDisplayLanguage(requested, defaultLanguage, translations) {
+  const fallback = defaultLanguage || "en";
+  const requestedCode = toLanguageCode(requested);
+  if (!requestedCode) {
+    return fallback;
+  }
+  for (const key of Object.keys(translations || {})) {
+    if (toLanguageCode(key) === requestedCode) {
+      return key;
+    }
+  }
+  return fallback;
+}
+
 // src/api/index.ts
 var BASE_URL = "https://api.redacto.io/consent";
 var BASE_URL_PUBLIC = "https://api.redacto.tech/consent";
@@ -194,17 +318,22 @@ var fetchConsentContent = async ({
   specific_uuid,
   validate_against = "all",
   include_fully_consented_data = false,
-  signal
+  signal,
+  ...sandboxParams
 }) => {
-  if (!noticeId || !accessToken || !validate_against) {
-    throw new Error("noticeId and accessToken are required");
+  if (!noticeId || !validate_against) {
+    throw new Error("noticeId is required");
   }
-  const decodedToken = decodeTokenSafely(accessToken);
-  if (!decodedToken) throw new Error("Invalid access token");
-  const { organisation_uuid: ORG, workspace_uuid: WS } = decodedToken;
-  if (!ORG || !WS) throw new Error("Invalid token: missing organization or workspace UUID");
+  if (!accessToken && !sandboxParams.token) {
+    throw new Error("accessToken or token is required");
+  }
+  const { organisationUuid: ORG, workspaceUuid: WS, sandbox } = resolveRequestAuth(
+    accessToken,
+    sandboxParams
+  );
   const apiBaseUrl = baseUrl || BASE_URL;
-  const cacheKey = `${accessToken}-${noticeId}-${validate_against}-${language}-${specific_uuid || ""}-${include_fully_consented_data}`;
+  const cacheIdentity = sandbox ? `sandbox:${sandbox.organisationUuid}:${sandbox.workspaceUuid}:${sandbox.ucic || sandbox.email || sandbox.mobile}` : accessToken;
+  const cacheKey = `${cacheIdentity}-${noticeId}-${validate_against}-${language}-${specific_uuid || ""}-${include_fully_consented_data}`;
   if (validate_against === "all" && !specific_uuid) {
     const cached = getCachedData(cacheKey);
     if (cached) return cached;
@@ -213,10 +342,15 @@ var fetchConsentContent = async ({
   if (specific_uuid) url.searchParams.append("specific_uuid", specific_uuid);
   url.searchParams.append("validate_against", validate_against);
   if (include_fully_consented_data) url.searchParams.append("include_fully_consented_data", "true");
+  if (sandbox) {
+    for (const [key, value] of Object.entries(sandboxQueryIdentity(sandbox))) {
+      if (value) url.searchParams.append(key, value);
+    }
+  }
   const response = await fetch(url.toString(), {
     method: "GET",
     headers: {
-      Authorization: `Bearer ${accessToken}`,
+      ...buildAuthHeaders(accessToken, sandbox),
       "Accept-Language": language
     },
     signal
@@ -242,18 +376,24 @@ var fetchConsentContentPublic = async ({
   org_uuid,
   workspace_uuid,
   notice_uuid,
+  accessToken,
   baseUrl,
   language = "en",
   specific_uuid
 }) => {
   const apiBaseUrl = baseUrl || BASE_URL_PUBLIC;
+  const noticesUrl = `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/notices`;
   const url = new URL(
-    `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/notices/get-notice/${notice_uuid}`
+    accessToken ? `${noticesUrl}/${notice_uuid}` : `${noticesUrl}/get-notice/${notice_uuid}`
   );
   if (specific_uuid) url.searchParams.append("specific_uuid", specific_uuid);
   const response = await fetch(url.toString(), {
     method: "GET",
-    headers: { "Content-Type": "application/json" }
+    headers: {
+      "Content-Type": "application/json",
+      "Accept-Language": language,
+      ...accessToken ? { Authorization: `Bearer ${accessToken}` } : {}
+    }
   });
   if (response.status === 401) {
     const error = new Error("Unauthorized");
@@ -280,16 +420,21 @@ var submitConsentEvent = async ({
   meta_data,
   guardianVerificationReference,
   selfDeclaredAdult,
-  signal
+  language,
+  signal,
+  ...sandboxParams
 }) => {
-  if (!noticeUuid || !accessToken || !Array.isArray(purposes)) {
-    throw new Error("noticeUuid, accessToken, and purposes array are required");
+  if (!noticeUuid || !Array.isArray(purposes)) {
+    throw new Error("noticeUuid and purposes array are required");
   }
-  const decodedToken = decodeTokenSafely(accessToken);
-  if (!decodedToken) throw new Error("Invalid access token");
-  const { organisation_uuid: ORG, workspace_uuid: WS } = decodedToken;
-  if (!ORG || !WS) throw new Error("Invalid token: missing organization or workspace UUID");
-  const apiBaseUrl = ledgerBaseUrl || baseUrl || BASE_URL;
+  if (!accessToken && !sandboxParams.token) {
+    throw new Error("accessToken or token is required");
+  }
+  const { organisationUuid: ORG, workspaceUuid: WS, sandbox } = resolveRequestAuth(
+    accessToken,
+    sandboxParams
+  );
+  const apiBaseUrl = (sandbox ? null : ledgerBaseUrl) || baseUrl || BASE_URL;
   const validatedPurposes = purposes.map((purpose) => {
     if (!purpose.uuid) throw new Error("Invalid purpose data: missing uuid");
     const dataElements = (purpose.data_elements || []).filter((element) => element.enabled).map((element) => ({
@@ -310,17 +455,19 @@ var submitConsentEvent = async ({
     declined: Boolean(declined),
     meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid, minor_age: meta_data.minor_age } : void 0,
     guardian_verification_reference: guardianVerificationReference,
-    self_declared_adult: selfDeclaredAdult
+    self_declared_adult: selfDeclaredAdult,
+    language: toLanguageCode(language)
   };
+  const requestBody = sandbox ? { ...payload, ...sandboxBodyIdentity(sandbox) } : payload;
   const response = await fetch(
     `${apiBaseUrl}/public/organisations/${ORG}/workspaces/${WS}/submit-consent`,
     {
       method: "POST",
       headers: {
-        Authorization: `Bearer ${accessToken}`,
+        ...buildAuthHeaders(accessToken, sandbox),
         "Content-Type": "application/json"
       },
-      body: JSON.stringify(payload),
+      body: JSON.stringify(requestBody),
       signal
     }
   );
@@ -352,7 +499,8 @@ var submitConsentEventPublic = async ({
   noticeUuid,
   purposes,
   declined,
-  meta_data
+  meta_data,
+  language
 }) => {
   var _a, _b;
   const apiBaseUrl = ledgerBaseUrl || baseUrl || BASE_URL_PUBLIC;
@@ -373,7 +521,8 @@ var submitConsentEventPublic = async ({
     select_all_mandatory: false,
     source: "WEB",
     declined,
-    meta_data
+    meta_data,
+    language: toLanguageCode(language)
   };
   const response = await fetch(
     `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`,
@@ -412,23 +561,32 @@ var submitConsentEventPublic = async ({
 var fetchTTSAudioUrls = async ({
   accessToken,
   baseUrl,
+  ledgerBaseUrl,
   noticeUuid,
   language,
-  signal
+  signal,
+  ...sandboxParams
 }) => {
-  if (!accessToken || !noticeUuid || !language) {
-    throw new Error("accessToken, noticeUuid, and language are required");
+  if (!accessToken && !sandboxParams.token || !noticeUuid || !language) {
+    throw new Error("accessToken (or token), noticeUuid, and language are required");
   }
-  const decodedToken = decodeTokenSafely(accessToken);
-  if (!decodedToken) throw new Error("Invalid access token");
-  const { organisation_uuid: ORG, workspace_uuid: WS } = decodedToken;
-  if (!ORG || !WS) throw new Error("Invalid token: missing organization or workspace UUID");
-  const apiBaseUrl = baseUrl || BASE_URL;
-  const url = `${apiBaseUrl}/public/organisations/${ORG}/workspaces/${WS}/notices/${noticeUuid}/audio/${language}`;
-  const response = await fetch(url, {
+  const { organisationUuid: ORG, workspaceUuid: WS, sandbox } = resolveRequestAuth(
+    accessToken,
+    sandboxParams
+  );
+  const apiBaseUrl = (sandbox ? null : ledgerBaseUrl) || baseUrl || BASE_URL;
+  const url = new URL(
+    `${apiBaseUrl}/public/organisations/${ORG}/workspaces/${WS}/notices/${noticeUuid}/audio/${language}`
+  );
+  if (sandbox) {
+    for (const [key, value] of Object.entries(sandboxQueryIdentity(sandbox))) {
+      if (value) url.searchParams.append(key, value);
+    }
+  }
+  const response = await fetch(url.toString(), {
     method: "GET",
     headers: {
-      Authorization: `Bearer ${accessToken}`,
+      ...buildAuthHeaders(accessToken, sandbox),
       Accept: "application/json"
     },
     signal
@@ -895,6 +1053,42 @@ var styles = {
     padding: 0,
     boxSizing: "border-box"
   },
+  // The main notice header is two stacked rows: the logo alone on row 1,
+  // aligned per active_config.logo_position, then the title and the
+  // TTS/language controls on row 2. `topSection` and `topLeft` above keep their
+  // single-row shape for the age-verification, guardian and verification
+  // screens, which have no controls to place and share those styles.
+  // Mirrors consent-sdk-react/src/RedactoNoticeConsent/styles.ts.
+  headerStack: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: "10px",
+    paddingBottom: "15px",
+    borderBottom: "none",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left"
+  },
+  logoRow: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
+  },
+  headerRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "10px",
+    width: "100%",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box"
+  },
   logo: {
     height: "32px",
     width: "auto",
@@ -1101,6 +1295,32 @@ var styles = {
     margin: 0,
     boxSizing: "border-box"
   },
+  /**
+   * The main notice footer. Wide: one row with decline pushed left and the
+   * accepts grouped right. Narrow: a full-width stack. Review mode keeps
+   * `bottomSection` — it collapses to a single button.
+   */
+  actionButtonRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: "12px",
+    paddingTop: "15px",
+    borderTop: "none",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box"
+  },
+  actionButtonStack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    paddingTop: "15px",
+    borderTop: "none",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box"
+  },
   button: {
     width: "100%",
     borderRadius: "8px",
@@ -1126,6 +1346,9 @@ var styles = {
   },
   languageSelectorContainer: {
     position: "relative",
+    // Shares `headerRow` with the title, which grows; without this a long
+    // heading squeezes the language button instead of wrapping itself.
+    flexShrink: 0,
     margin: 0,
     padding: 0,
     boxSizing: "border-box"
@@ -1184,6 +1407,51 @@ var styles = {
   }
 };
 
+// src/constants.ts
+var DEFAULT_LOGO_POSITION = "left";
+var DEFAULT_ACCEPT_ALL_BUTTON_TEXT = "Accept All";
+var DEFAULT_ACCEPT_SELECTED_BUTTON_TEXT = "Accept Selected";
+var DEFAULT_DECLINE_BUTTON_TEXT = "Decline";
+var ACCEPT_ALL_BUTTON_ID = "accept-all-button-text";
+var ACCEPT_SELECTED_BUTTON_ID = "confirm-button-text";
+var DECLINE_BUTTON_ID = "decline-button-text";
+var SUBMITTING_BUTTON_TEXT = "Submitting...";
+var LOGO_POSITION_JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var REQUIRED_MARKER_GLYPH = "*";
+var REQUIRED_MARKER_ARIA_LABEL = "required";
+var REQUIRED_MARKER_COLOR = "red";
+var REQUIRED_MARKER_GAP = "4px";
+var REQUIRED_MARKER_STYLE = {
+  color: REQUIRED_MARKER_COLOR,
+  marginLeft: REQUIRED_MARKER_GAP
+};
+var DPO_AUDIO_ELEMENT_MAP = [
+  { audioKey: "grievance_text_audio_url", elementId: "dpo-grievance-text" },
+  { audioKey: "grievance_anchor_text_audio_url", elementId: "dpo-grievance-link" },
+  { audioKey: "grievance_email_connector_text_audio_url", elementId: "dpo-grievance-email-connector" },
+  { audioKey: "grievance_email_audio_url", elementId: "dpo-grievance-email" },
+  { audioKey: "dp_board_text_audio_url", elementId: "dpo-dp-board-text" },
+  { audioKey: "dp_board_anchor_text_audio_url", elementId: "dpo-dp-board-link" },
+  { audioKey: "dpo_text_audio_url", elementId: "dpo-dpo-text" },
+  { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" }
+];
+
+// src/core/required-marker.ts
+function createRequiredMarker(label = REQUIRED_MARKER_ARIA_LABEL) {
+  return el(
+    "span",
+    { style: REQUIRED_MARKER_STYLE, "aria-label": label },
+    REQUIRED_MARKER_GLYPH
+  );
+}
+function hasRequiredDataElement(purpose) {
+  return purpose.data_elements.some((element) => element.required);
+}
+
 // src/modal/purposes.ts
 function renderModalPurposes(purposes, options) {
   var _a, _b;
@@ -1249,6 +1517,9 @@ function renderModalPurposes(purposes, options) {
       }
     });
     titleEl.textContent = getTranslatedText("purposes.name", purpose.name, purpose.uuid);
+    if (hasRequiredDataElement(purpose)) {
+      titleEl.appendChild(createRequiredMarker());
+    }
     titleElements.set(purpose.uuid, titleEl);
     const descEl = el("h3", {
       id: `purpose-description-${purpose.uuid}`,
@@ -1316,9 +1587,7 @@ function renderModalPurposes(purposes, options) {
         labelSpan.textContent = getTranslatedText("data_elements.name", dataElement.name, dataElement.uuid);
         dataElementLabels.set(combinedId, labelSpan);
         if (dataElement.required) {
-          const asterisk = el("span", { style: { color: "red", marginLeft: "4px" }, "aria-label": "required" });
-          asterisk.textContent = "*";
-          labelSpan.appendChild(asterisk);
+          labelSpan.appendChild(createRequiredMarker());
         }
         let deRightElement;
         if (!isAlreadyConsented) {
@@ -1687,18 +1956,6 @@ var updateConsentState = (updates) => {
   }
 };
 
-// src/constants.ts
-var DPO_AUDIO_ELEMENT_MAP = [
-  { audioKey: "grievance_text_audio_url", elementId: "dpo-grievance-text" },
-  { audioKey: "grievance_anchor_text_audio_url", elementId: "dpo-grievance-link" },
-  { audioKey: "grievance_email_connector_text_audio_url", elementId: "dpo-grievance-email-connector" },
-  { audioKey: "grievance_email_audio_url", elementId: "dpo-grievance-email" },
-  { audioKey: "dp_board_text_audio_url", elementId: "dpo-dp-board-text" },
-  { audioKey: "dp_board_anchor_text_audio_url", elementId: "dpo-dp-board-link" },
-  { audioKey: "dpo_text_audio_url", elementId: "dpo-dpo-text" },
-  { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" }
-];
-
 // src/modal/tts.ts
 var TTSManager = class {
   /**
@@ -1746,9 +2003,16 @@ var TTSManager = class {
       const response = await fetchTTSAudioUrls({
         accessToken: params.accessToken,
         baseUrl: params.baseUrl,
+        ledgerBaseUrl: params.ledgerBaseUrl,
         noticeUuid: params.noticeUuid,
         language: params.language,
-        signal: this.abortController.signal
+        signal: this.abortController.signal,
+        token: params.token,
+        sandboxUcic: params.sandboxUcic,
+        sandboxEmail: params.sandboxEmail,
+        sandboxMobile: params.sandboxMobile,
+        organisationUuid: params.organisationUuid,
+        workspaceUuid: params.workspaceUuid
       });
       this.audioUrls = response.detail;
       this.buildSequences(params.content);
@@ -1802,8 +2066,9 @@ var TTSManager = class {
         push(audioUrl, mapping.elementId);
       }
     }
-    push(urls.confirm_button_text_audio_url, "confirm-button-text");
-    push(urls.decline_button_text_audio_url, "decline-button-text");
+    push(urls.accept_all_button_text_audio_url, ACCEPT_ALL_BUTTON_ID);
+    push(urls.confirm_button_text_audio_url, ACCEPT_SELECTED_BUTTON_ID);
+    push(urls.decline_button_text_audio_url, DECLINE_BUTTON_ID);
     this.audioSequence = audioSeq;
     this.elementIdSequence = elementSeq;
   }
@@ -2694,14 +2959,17 @@ function renderVerificationScreen(options) {
 
 // src/modal/colors.ts
 function resolveColors(settings, activeConfig) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const primaryColor = (activeConfig == null ? void 0 : activeConfig.primary_color) || "#4f87ff";
   const secondaryColor = (activeConfig == null ? void 0 : activeConfig.secondary_color) || "#4f87ff";
   return {
     acceptBg: ((_b = (_a = settings == null ? void 0 : settings.button) == null ? void 0 : _a.accept) == null ? void 0 : _b.backgroundColor) || primaryColor,
     acceptText: ((_d = (_c = settings == null ? void 0 : settings.button) == null ? void 0 : _c.accept) == null ? void 0 : _d.textColor) || "#ffffff",
-    declineBg: ((_f = (_e = settings == null ? void 0 : settings.button) == null ? void 0 : _e.decline) == null ? void 0 : _f.backgroundColor) || "#ffffff",
-    declineText: ((_h = (_g = settings == null ? void 0 : settings.button) == null ? void 0 : _g.decline) == null ? void 0 : _h.textColor) || "#000000",
+    acceptShortcutBg: ((_f = (_e = settings == null ? void 0 : settings.button) == null ? void 0 : _e.acceptAll) == null ? void 0 : _f.backgroundColor) || "#ffffff",
+    acceptShortcutText: ((_h = (_g = settings == null ? void 0 : settings.button) == null ? void 0 : _g.acceptAll) == null ? void 0 : _h.textColor) || primaryColor,
+    acceptShortcutBorder: primaryColor,
+    declineBg: ((_j = (_i = settings == null ? void 0 : settings.button) == null ? void 0 : _i.decline) == null ? void 0 : _j.backgroundColor) || "#ffffff",
+    declineText: ((_l = (_k = settings == null ? void 0 : settings.button) == null ? void 0 : _k.decline) == null ? void 0 : _l.textColor) || "#000000",
     declineBorder: (settings == null ? void 0 : settings.borderColor) || "#d0d5dd",
     link: (settings == null ? void 0 : settings.link) || secondaryColor,
     heading: (settings == null ? void 0 : settings.headingColor) || "#323B4B",
@@ -2713,6 +2981,31 @@ function resolveColors(settings, activeConfig) {
   };
 }
 
+// src/modal/consentSelection.ts
+var dataElementKey = (purposeUuid, elementUuid) => `${purposeUuid}-${elementUuid}`;
+var buildSelectionForMode = (purposes, mode, current) => {
+  if (mode === "selected") {
+    return current;
+  }
+  const selectedPurposes = {};
+  const selectedDataElements = {};
+  purposes.forEach((purpose) => {
+    selectedPurposes[purpose.uuid] = true;
+    purpose.data_elements.forEach((element) => {
+      selectedDataElements[dataElementKey(purpose.uuid, element.uuid)] = element.enabled;
+    });
+  });
+  return { selectedPurposes, selectedDataElements };
+};
+
+// src/modal/layout.ts
+function resolveLogoPosition(raw) {
+  return raw === "center" || raw === "right" ? raw : DEFAULT_LOGO_POSITION;
+}
+function logoRowJustify(position) {
+  return LOGO_POSITION_JUSTIFY[position];
+}
+
 // src/modal/index.ts
 var ModalController = class {
   constructor(options) {
@@ -2737,6 +3030,7 @@ var ModalController = class {
     this.visibilityChangeHandler = null;
     // DOM refs for targeted updates
     this.acceptBtn = null;
+    this.acceptAllBtn = null;
     this.declineBtn = null;
     this.middleSection = null;
     this.errorEl = null;
@@ -2817,21 +3111,47 @@ var ModalController = class {
     this.langSelectorRefs = null;
   }
   // ─── Private ───
+  /**
+   * Sandbox auth options to forward to every API call. When `token` is set the
+   * API layer sends the single `X-Consent-Token` header, carries every supplied
+   * identifier in each request's payload, and reads org/workspace from these
+   * fields instead of decoding the JWT. Empty in the normal JWT flow.
+   */
+  sandboxParams() {
+    var _a;
+    const legacySubject = (_a = this.options.sandboxSubject) == null ? void 0 : _a.trim();
+    const legacyEmail = (legacySubject == null ? void 0 : legacySubject.includes("@")) ? legacySubject : void 0;
+    const legacyMobile = legacySubject && !legacySubject.includes("@") ? legacySubject : void 0;
+    return {
+      token: this.options.token,
+      // The static token carries no identity; carry every supplied identifier
+      // (ucic/email/mobile) so the server can pick the principal by precedence
+      // (UCIC > email > mobile) and keep the rest as the sandbox contact.
+      // sandboxUcic / sandboxEmail / sandboxMobile stay as fallbacks.
+      sandboxUcic: this.options.ucic || this.options.sandboxUcic,
+      sandboxEmail: this.options.email || this.options.sandboxEmail || legacyEmail,
+      sandboxMobile: this.options.mobile || this.options.sandboxMobile || legacyMobile,
+      organisationUuid: this.options.organisationUuid,
+      workspaceUuid: this.options.workspaceUuid
+    };
+  }
   async fetchNotice() {
     var _a, _b, _c, _d;
     this.abortController = new AbortController();
     this.store.setState({ isLoading: true, fetchError: null });
     try {
+      const noticeBaseUrl = this.options.ledgerBaseUrl && !this.options.applicationId && !this.options.token ? this.options.ledgerBaseUrl : this.options.baseUrl;
       const data = await fetchConsentContent({
         noticeId: this.options.noticeId,
         accessToken: this.options.accessToken,
         refreshToken: this.options.refreshToken,
-        baseUrl: this.options.baseUrl,
+        baseUrl: noticeBaseUrl,
         language: this.options.language,
         specific_uuid: this.options.applicationId,
         validate_against: this.options.validateAgainst || "all",
         include_fully_consented_data: this.options.includeFullyConsentedData,
-        signal: this.abortController.signal
+        signal: this.abortController.signal,
+        ...this.sandboxParams()
       });
       const activeConfig = data.detail.active_config;
       let purposeSelections = data.detail.purpose_selections;
@@ -2893,10 +3213,11 @@ var ModalController = class {
       if (this.options.includeFullyConsentedData && needsConsentPurposes.length === 0 && alreadyConsentedPurposes.length > 0) {
         isFullyConsentedReviewMode = true;
       }
-      let selectedLanguage = this.options.language || "en";
-      if (activeConfig.default_language) {
-        selectedLanguage = activeConfig.default_language;
-      }
+      const selectedLanguage = resolveDisplayLanguage(
+        this.options.language,
+        activeConfig.default_language,
+        activeConfig.supported_languages_and_translations
+      );
       let isMinorFlow = false;
       let showAgeVerification = false;
       let restoreState = {};
@@ -3194,49 +3515,32 @@ var ModalController = class {
     (_g = this.ttsManager) == null ? void 0 : _g.fetchAudioUrls({
       accessToken: this.options.accessToken,
       baseUrl: this.options.baseUrl,
+      ledgerBaseUrl: this.options.ledgerBaseUrl,
       noticeUuid: activeConfig.notice_uuid,
       language: this.getLanguageCode(state.selectedLanguage),
-      content: activeConfig
+      content: activeConfig,
+      ...this.sandboxParams()
     });
     const topRight = el("div", {
       style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 }
     }, this.ttsButton, this.langSelectorRefs.container);
-    let topSection;
-    if (isMobile) {
-      const headerRow = el(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "10px",
-            width: "100%"
-          }
-        },
-        ...logoImg ? [logoImg] : [],
+    const logoPosition = resolveLogoPosition(activeConfig.logo_position);
+    const headerRows = [];
+    if (logoImg) {
+      headerRows.push(
         el(
           "div",
-          { style: { marginLeft: "auto", display: "flex", alignItems: "center" } },
-          topRight
+          { style: { ...styles.logoRow, justifyContent: logoRowJustify(logoPosition) } },
+          logoImg
         )
       );
-      topSection = el(
-        "div",
-        {
-          style: {
-            ...styles.topSection,
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexWrap: "nowrap"
-          }
-        },
-        headerRow,
-        this.noticeTitleEl
-      );
-    } else {
-      const topLeft = el("div", { style: styles.topLeft }, logoImg, this.noticeTitleEl);
-      topSection = el("div", { style: styles.topSection }, topLeft, topRight);
     }
+    headerRows.push(el("div", { style: styles.headerRow }, this.noticeTitleEl, topRight));
+    const topSection = el(
+      "div",
+      { style: { ...styles.headerStack, gap: isMobile ? "12px" : "10px" } },
+      ...headerRows
+    );
     this.middleSection = el("div", { style: styles.middleSection });
     const baseTextStyle = { ...styles.privacyText, color: textColor, fontFamily: font, fontSize: isMobile ? "14px" : "16px" };
     const noticeTextSpan = el("span", { id: "privacy-notice-text" });
@@ -3427,24 +3731,57 @@ var ModalController = class {
         display: "none"
       }
     });
-    const acceptBtnText = state.isFullyConsentedReviewMode ? this.options.reviewModeButtonText || "Continue" : this.getTranslatedText("confirm_button_text", activeConfig.confirm_button_text);
+    const acceptBtnText = state.isFullyConsentedReviewMode ? this.options.reviewModeButtonText || "Continue" : this.getTranslatedText(
+      "confirm_button_text",
+      activeConfig.confirm_button_text || DEFAULT_ACCEPT_SELECTED_BUTTON_TEXT
+    );
+    const gridButtonBox = {
+      fontSize: isMobile ? "14px" : "16px",
+      padding: state.isFullyConsentedReviewMode ? isMobile ? "10px 20px" : "9px 45px" : "9px 20px",
+      width: state.isFullyConsentedReviewMode || isMobile ? "100%" : "auto",
+      whiteSpace: "normal",
+      wordBreak: "break-word"
+    };
     const acceptStyle = {
       ...styles.button,
-      ...styles.acceptButton,
-      backgroundColor: colors.acceptBg,
-      color: colors.acceptText,
+      ...state.isFullyConsentedReviewMode ? { ...styles.acceptButton, backgroundColor: colors.acceptBg, color: colors.acceptText } : {
+        ...styles.cancelButton,
+        backgroundColor: "#ffffff",
+        color: colors.acceptShortcutText,
+        borderColor: colors.acceptShortcutBorder
+      },
       borderRadius: colors.borderRadius,
-      fontSize: isMobile ? "14px" : "16px",
-      padding: isMobile ? "10px 20px" : "9px 45px"
+      ...gridButtonBox
     };
     this.acceptBtn = el("button", {
-      id: "confirm-button-text",
+      id: ACCEPT_SELECTED_BUTTON_ID,
       style: acceptStyle,
       type: "button",
-      onClick: () => this.handleAccept()
+      onClick: () => this.handleAccept("selected")
     });
     this.acceptBtn.textContent = acceptBtnText;
-    const declineBtnText = this.getTranslatedText("decline_button_text", activeConfig.decline_button_text);
+    const shortcutStyle = {
+      ...styles.button,
+      ...styles.acceptButton,
+      backgroundColor: colors.acceptBg,
+      color: colors.acceptText,
+      borderRadius: colors.borderRadius,
+      ...gridButtonBox
+    };
+    this.acceptAllBtn = el("button", {
+      id: ACCEPT_ALL_BUTTON_ID,
+      style: shortcutStyle,
+      type: "button",
+      onClick: () => this.handleAccept("all")
+    });
+    this.acceptAllBtn.textContent = this.getTranslatedText(
+      "accept_all_button_text",
+      activeConfig.accept_all_button_text || DEFAULT_ACCEPT_ALL_BUTTON_TEXT
+    );
+    const declineBtnText = this.getTranslatedText(
+      "decline_button_text",
+      activeConfig.decline_button_text || DEFAULT_DECLINE_BUTTON_TEXT
+    );
     const declineStyle = {
       ...styles.button,
       ...styles.cancelButton,
@@ -3452,11 +3789,13 @@ var ModalController = class {
       color: colors.declineText,
       borderColor: colors.declineBorder,
       borderRadius: colors.borderRadius,
-      fontSize: isMobile ? "14px" : "16px",
-      padding: isMobile ? "10px 20px" : "9px 45px"
+      ...gridButtonBox,
+      // Pushes everything after decline to the right edge, which is the whole
+      // of the wide layout. Inert in the stack and in review mode.
+      marginRight: state.isFullyConsentedReviewMode || isMobile ? "0" : "auto"
     };
     this.declineBtn = el("button", {
-      id: "decline-button-text",
+      id: DECLINE_BUTTON_ID,
       style: declineStyle,
       type: "button",
       onClick: () => this.handleDecline()
@@ -3464,12 +3803,19 @@ var ModalController = class {
     if (!state.isFullyConsentedReviewMode) {
       this.declineBtn.textContent = declineBtnText;
     }
-    const bottomSection = el("div", { style: styles.bottomSection });
-    if (!state.isFullyConsentedReviewMode) {
+    const bottomSection = el("div", {
+      style: state.isFullyConsentedReviewMode ? styles.bottomSection : isMobile ? styles.actionButtonStack : styles.actionButtonRow
+    });
+    if (state.isFullyConsentedReviewMode) {
+      bottomSection.appendChild(this.acceptBtn);
+    } else if (isMobile) {
+      bottomSection.appendChild(this.acceptAllBtn);
       bottomSection.appendChild(this.acceptBtn);
       bottomSection.appendChild(this.declineBtn);
     } else {
+      bottomSection.appendChild(this.declineBtn);
       bottomSection.appendChild(this.acceptBtn);
+      bottomSection.appendChild(this.acceptAllBtn);
     }
     const contentWrapper = el(
       "div",
@@ -3625,7 +3971,12 @@ var ModalController = class {
       selectedPurposes: { ...state.selectedPurposes, [purposeUuid]: shouldCheckPurpose }
     });
   }
-  async handleAccept() {
+  /**
+   * Shared by all three accept buttons. The mode only decides which
+   * purposes/data elements are submitted — everything downstream, including
+   * the host's `onAccept` callback, is identical.
+   */
+  async handleAccept(mode = "selected") {
     var _a, _b, _c;
     const state = this.store.getState();
     if (state.isSubmitting) return;
@@ -3644,6 +3995,16 @@ var ModalController = class {
     if (!content) return;
     this.abortController = new AbortController();
     this.store.setState({ isSubmitting: true, isSubmittingAccept: true, errorMessage: null });
+    const selection = buildSelectionForMode(content.purposes, mode, {
+      selectedPurposes: state.selectedPurposes,
+      selectedDataElements: state.selectedDataElements
+    });
+    if (mode !== "selected") {
+      this.store.setState({
+        selectedPurposes: selection.selectedPurposes,
+        selectedDataElements: selection.selectedDataElements
+      });
+    }
     try {
       const purposes = content.purposes.map((purpose) => {
         const dataElements = purpose.data_elements.filter((de) => de.enabled).map((de) => ({
@@ -3651,13 +4012,13 @@ var ModalController = class {
           name: de.name,
           enabled: de.enabled,
           required: de.required,
-          selected: state.selectedDataElements[`${purpose.uuid}-${de.uuid}`] || false
+          selected: selection.selectedDataElements[`${purpose.uuid}-${de.uuid}`] || false
         }));
         return {
           uuid: purpose.uuid,
           name: purpose.name,
           description: purpose.description,
-          selected: state.selectedPurposes[purpose.uuid] || false,
+          selected: selection.selectedPurposes[purpose.uuid] || false,
           data_elements: dataElements
         };
       });
@@ -3671,7 +4032,9 @@ var ModalController = class {
         meta_data: this.options.applicationId ? { specific_uuid: this.options.applicationId } : void 0,
         guardianVerificationReference: state.verificationReference || void 0,
         selfDeclaredAdult: state.selfDeclaredAdult || void 0,
-        signal: this.abortController.signal
+        language: state.selectedLanguage,
+        signal: this.abortController.signal,
+        ...this.sandboxParams()
       });
       this.options.onAccept();
       this.destroy();
@@ -3717,11 +4080,16 @@ var ModalController = class {
   }
   updateAcceptButtonState(state) {
     if (!this.acceptBtn || state.isFullyConsentedReviewMode) return;
+    const submitting = state.isSubmittingAccept || state.isSubmittingDecline;
     const allRequiredChecked = this.areAllRequiredChecked(state);
-    const disabled = !allRequiredChecked || state.isSubmittingAccept || state.isSubmittingDecline;
-    this.acceptBtn.disabled = disabled;
-    this.acceptBtn.style.opacity = disabled ? "0.5" : "1";
-    this.acceptBtn.style.cursor = disabled ? "not-allowed" : "pointer";
+    const setDisabled = (btn, disabled) => {
+      if (!btn) return;
+      btn.disabled = disabled;
+      btn.style.opacity = disabled ? "0.5" : "1";
+      btn.style.cursor = disabled ? "not-allowed" : "pointer";
+    };
+    setDisabled(this.acceptBtn, !allRequiredChecked || submitting);
+    setDisabled(this.acceptAllBtn, submitting);
   }
   updateCollapseState(state) {
     const updateRefs = (refs) => {
@@ -4094,25 +4462,34 @@ var ModalController = class {
   }
   updateButtonStates(state) {
     var _a;
-    if (this.acceptBtn) {
-      if (state.isSubmittingAccept) {
-        this.acceptBtn.textContent = "Submitting...";
-        this.acceptBtn.disabled = true;
-        this.acceptBtn.style.opacity = "0.7";
-        this.acceptBtn.style.cursor = "not-allowed";
-      } else {
-        const content = (_a = state.content) == null ? void 0 : _a.detail.active_config;
-        this.acceptBtn.textContent = state.isFullyConsentedReviewMode ? this.options.reviewModeButtonText || "Continue" : this.getTranslatedText("confirm_button_text", (content == null ? void 0 : content.confirm_button_text) || "Accept");
-        this.acceptBtn.disabled = false;
-        this.acceptBtn.style.opacity = "1";
-        this.acceptBtn.style.cursor = "pointer";
-      }
-    }
+    const content = (_a = state.content) == null ? void 0 : _a.detail.active_config;
+    const applySubmittingState = (btn, idleLabel) => {
+      if (!btn) return;
+      btn.textContent = state.isSubmittingAccept ? SUBMITTING_BUTTON_TEXT : idleLabel;
+      btn.disabled = state.isSubmittingAccept;
+      btn.style.opacity = state.isSubmittingAccept ? "0.7" : "1";
+      btn.style.cursor = state.isSubmittingAccept ? "not-allowed" : "pointer";
+    };
+    applySubmittingState(
+      this.acceptBtn,
+      state.isFullyConsentedReviewMode ? this.options.reviewModeButtonText || "Continue" : this.getTranslatedText(
+        "confirm_button_text",
+        (content == null ? void 0 : content.confirm_button_text) || DEFAULT_ACCEPT_SELECTED_BUTTON_TEXT
+      )
+    );
+    applySubmittingState(
+      this.acceptAllBtn,
+      this.getTranslatedText(
+        "accept_all_button_text",
+        (content == null ? void 0 : content.accept_all_button_text) || DEFAULT_ACCEPT_ALL_BUTTON_TEXT
+      )
+    );
     if (this.declineBtn) {
       this.declineBtn.disabled = state.isSubmitting;
       this.declineBtn.style.opacity = state.isSubmitting ? "0.7" : "1";
       this.declineBtn.style.cursor = state.isSubmitting ? "not-allowed" : "pointer";
     }
+    this.updateAcceptButtonState(state);
   }
 };
 
@@ -4313,6 +4690,9 @@ function renderInlinePurposes(purposes, options) {
       }
     });
     titleEl.textContent = getTranslatedText("purposes.name", purpose.name, purpose.uuid);
+    if (hasRequiredDataElement(purpose)) {
+      titleEl.appendChild(createRequiredMarker());
+    }
     titleElements.set(purpose.uuid, titleEl);
     const descEl = el("h3", {
       style: {
@@ -4365,12 +4745,7 @@ function renderInlinePurposes(purposes, options) {
         labelSpan.textContent = getTranslatedText("data_elements.name", dataElement.name, dataElement.uuid);
         dataElementLabels.set(combinedId, labelSpan);
         if (dataElement.required) {
-          const asterisk = el("span", {
-            style: { color: "red", marginLeft: "4px" },
-            "aria-label": "required"
-          });
-          asterisk.textContent = "*";
-          labelSpan.appendChild(asterisk);
+          labelSpan.appendChild(createRequiredMarker());
         }
         const deCheckbox = el("input", {
           type: "checkbox",
@@ -4416,6 +4791,8 @@ var InlineController = class {
     this.errorEl = null;
     this.hasSubmitted = false;
     this.hasCheckedLedgerConsent = false;
+    this.fetchedWithToken = false;
+    this.fetchGeneration = 0;
     this.unsubscribe = null;
     this.abortController = null;
     this.options = options;
@@ -4473,6 +4850,10 @@ var InlineController = class {
   }
   updateToken(accessToken) {
     this.options = { ...this.options, accessToken };
+    if (accessToken && !this.fetchedWithToken) {
+      void this.fetchNotice();
+      return;
+    }
     if (this.shouldCheckLedgerConsent()) {
       void this.checkLedgerConsent();
       return;
@@ -4488,17 +4869,20 @@ var InlineController = class {
   }
   async fetchNotice() {
     var _a, _b, _c, _d;
-    this.store.setState({ isLoading: true, fetchError: null });
+    const generation = ++this.fetchGeneration;
+    this.fetchedWithToken = Boolean(this.options.accessToken);
+    this.store.setState({ isLoading: true, fetchError: null, hasAlreadyConsented: false });
     try {
       const data = await fetchConsentContentPublic({
         org_uuid: this.options.org_uuid,
         workspace_uuid: this.options.workspace_uuid,
         notice_uuid: this.options.notice_uuid,
+        accessToken: this.options.accessToken,
         baseUrl: this.options.baseUrl,
         language: this.options.language,
         specific_uuid: this.options.applicationId
       });
-      if (this.isDestroyed()) {
+      if (this.isDestroyed() || generation !== this.fetchGeneration) {
         return;
       }
       const activeConfig = data.detail.active_config;
@@ -4516,13 +4900,17 @@ var InlineController = class {
       this.store.setState({
         content: activeConfig,
         isLoading: false,
-        selectedLanguage: activeConfig.default_language || this.options.language || "en",
+        selectedLanguage: resolveDisplayLanguage(
+          this.options.language,
+          activeConfig.default_language,
+          activeConfig.supported_languages_and_translations
+        ),
         collapsedPurposes: initialCollapsed,
         selectedPurposes: initialPurposes,
         selectedDataElements: initialElements
       });
     } catch (err) {
-      if (this.isDestroyed()) {
+      if (this.isDestroyed() || generation !== this.fetchGeneration) {
         return;
       }
       const error = err;
@@ -4839,7 +5227,8 @@ var InlineController = class {
           };
         }),
         declined: false,
-        meta_data: this.options.applicationId ? { specific_uuid: this.options.applicationId } : void 0
+        meta_data: this.options.applicationId ? { specific_uuid: this.options.applicationId } : void 0,
+        language: state.selectedLanguage
       });
       (_b = (_a = this.options).onAccept) == null ? void 0 : _b.call(_a);
       this.hasSubmitted = false;