@redacto.io/consent-sdk-react 11.1.0-beta.0 → 11.1.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -101,7 +101,6 @@ var loadNoticeWebfont = async (value, signal) => {
101
101
  };
102
102
 
103
103
  // src/shared/idempotency.ts
104
- var HEADER = "Idempotency-Key";
105
104
  var pending = /* @__PURE__ */ new Map();
106
105
  var MAX_PENDING = 16;
107
106
  var mintKey = () => {
@@ -149,7 +148,7 @@ ${body}`;
149
148
  if (entry.inFlight === 0 && !entry.keep) pending.delete(signature);
150
149
  };
151
150
  try {
152
- const result = await send({ [HEADER]: entry.key });
151
+ const result = await send(entry.key);
153
152
  settle(settledOnResolve(result));
154
153
  return result;
155
154
  } catch (error) {
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import React__default from 'react';
3
- import { A as AppearanceStyle, N as NoticeControlStyle, a as NoticeMobileLayout, b as NoticeDesktopPosition, c as NoticeBackdrop, d as NoticePhoneFooter, e as NoticeTextScale, f as NoticeAppearance } from './types-9S_PyqzL.mjs';
3
+ import { A as AppearanceStyle, N as NoticeControlStyle, a as NoticeMobileLayout, b as NoticeDesktopPosition, c as NoticeBackdrop, d as NoticePhoneFooter, e as NoticeTextScale, f as NoticeAppearance } from './types-CaqLBkJt.mjs';
4
4
  import { f as NoticeFontOptions } from './types-xaCyZUfo.mjs';
5
5
 
6
6
  /**
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import React__default from 'react';
3
- import { A as AppearanceStyle, N as NoticeControlStyle, a as NoticeMobileLayout, b as NoticeDesktopPosition, c as NoticeBackdrop, d as NoticePhoneFooter, e as NoticeTextScale, f as NoticeAppearance } from './types-9S_PyqzL.js';
3
+ import { A as AppearanceStyle, N as NoticeControlStyle, a as NoticeMobileLayout, b as NoticeDesktopPosition, c as NoticeBackdrop, d as NoticePhoneFooter, e as NoticeTextScale, f as NoticeAppearance } from './types-CaqLBkJt.js';
4
4
  import { f as NoticeFontOptions } from './types-xaCyZUfo.js';
5
5
 
6
6
  /**
package/dist/index.js CHANGED
@@ -226,7 +226,6 @@ var sandboxBodyIdentity = (sandbox) => {
226
226
  var sandboxQueryIdentity = (sandbox) => sandboxBodyIdentity(sandbox);
227
227
 
228
228
  // src/shared/idempotency.ts
229
- var HEADER = "Idempotency-Key";
230
229
  var pending = /* @__PURE__ */ new Map();
231
230
  var MAX_PENDING = 16;
232
231
  var mintKey = () => {
@@ -274,7 +273,7 @@ ${body}`;
274
273
  if (entry.inFlight === 0 && !entry.keep) pending.delete(signature);
275
274
  };
276
275
  try {
277
- const result = await send({ [HEADER]: entry.key });
276
+ const result = await send(entry.key);
278
277
  settle(settledOnResolve(result));
279
278
  return result;
280
279
  } catch (error) {
@@ -511,14 +510,13 @@ var submitConsentEvent = async ({
511
510
  const response = await withIdempotencyKey(
512
511
  url,
513
512
  serialisedBody,
514
- (idempotencyHeaders) => fetch(url, {
513
+ (idempotencyKey) => fetch(url, {
515
514
  method: "POST",
516
515
  headers: {
517
516
  ...buildAuthHeaders(accessToken, sandbox),
518
- "Content-Type": "application/json",
519
- ...idempotencyHeaders
517
+ "Content-Type": "application/json"
520
518
  },
521
- body: serialisedBody,
519
+ body: JSON.stringify({ ...requestBody, idempotency_key: idempotencyKey }),
522
520
  signal
523
521
  })
524
522
  );
@@ -5305,7 +5303,7 @@ var PurposeItem = ({
5305
5303
  controlSkin,
5306
5304
  rowClassName,
5307
5305
  showsDataElements = true,
5308
- showsPurposeDescription = true,
5306
+ descriptionPlacement = "always",
5309
5307
  animateDisclosure = false
5310
5308
  }) => {
5311
5309
  var _a, _b;
@@ -5332,11 +5330,30 @@ var PurposeItem = ({
5332
5330
  [settings == null ? void 0 : settings.textColor]
5333
5331
  );
5334
5332
  const hasDataElements = showsDataElements && Boolean(purpose.data_elements) && purpose.data_elements.length > 0;
5335
- const dataElementsOpen = !collapsedPurposes[stateKey] && hasDataElements;
5333
+ const descriptionText = getTranslatedText(
5334
+ `purposes.description`,
5335
+ purpose.description,
5336
+ purpose.uuid
5337
+ );
5338
+ const disclosesDescription = descriptionPlacement === "expanded" && descriptionText.trim() !== "";
5339
+ const hasDisclosure = hasDataElements || disclosesDescription;
5340
+ const dataElementsOpen = !collapsedPurposes[stateKey] && hasDisclosure;
5341
+ const purposeDescription = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
5342
+ "h3",
5343
+ {
5344
+ id: `purpose-description-${stateKey}`,
5345
+ style: {
5346
+ ...styles4.optionDescription,
5347
+ ...responsiveStyles.optionDescription,
5348
+ ...textStyle
5349
+ },
5350
+ children: descriptionText
5351
+ },
5352
+ `purpose-description-${purpose.uuid}-${selectedLanguage}`
5353
+ );
5336
5354
  const dataElements = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
5337
5355
  "div",
5338
5356
  {
5339
- id: `purpose-${purpose.uuid}`,
5340
5357
  style: {
5341
5358
  ...styles4.dataElementsContainer,
5342
5359
  ...roomyControls ? styles4.dataElementsContainerRoomy : null
@@ -5456,13 +5473,17 @@ var PurposeItem = ({
5456
5473
  },
5457
5474
  `purpose-${purpose.uuid}-container-${selectedLanguage}`
5458
5475
  );
5476
+ const disclosureContents = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
5477
+ disclosesDescription && purposeDescription,
5478
+ hasDataElements && dataElements
5479
+ ] });
5459
5480
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: rowClassName, children: [
5460
5481
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...PART_PROPS.purpose, style: styles4.optionItem, children: [
5461
5482
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
5462
5483
  "div",
5463
5484
  {
5464
5485
  style: styles4.optionLeft,
5465
- ...hasDataElements && {
5486
+ ...hasDisclosure && {
5466
5487
  onClick: () => onPurposeCollapse(purpose.uuid, productUuid),
5467
5488
  role: "button",
5468
5489
  tabIndex: 0,
@@ -5481,7 +5502,7 @@ var PurposeItem = ({
5481
5502
  }
5482
5503
  },
5483
5504
  children: [
5484
- hasDataElements && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
5505
+ hasDisclosure && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
5485
5506
  CollapseChevron,
5486
5507
  {
5487
5508
  open: !collapsedPurposes[stateKey],
@@ -5506,23 +5527,7 @@ var PurposeItem = ({
5506
5527
  },
5507
5528
  `purpose-name-${purpose.uuid}-${selectedLanguage}`
5508
5529
  ),
5509
- showsPurposeDescription && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
5510
- "h3",
5511
- {
5512
- id: `purpose-description-${stateKey}`,
5513
- style: {
5514
- ...styles4.optionDescription,
5515
- ...responsiveStyles.optionDescription,
5516
- ...textStyle
5517
- },
5518
- children: getTranslatedText(
5519
- `purposes.description`,
5520
- purpose.description,
5521
- purpose.uuid
5522
- )
5523
- },
5524
- `purpose-description-${purpose.uuid}-${selectedLanguage}`
5525
- )
5530
+ descriptionPlacement === "always" && purposeDescription
5526
5531
  ] })
5527
5532
  ]
5528
5533
  }
@@ -5548,7 +5553,13 @@ var PurposeItem = ({
5548
5553
  }
5549
5554
  )
5550
5555
  ] }),
5551
- hasDataElements && (animateDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapse, { open: dataElementsOpen, children: dataElements }) : dataElementsOpen && dataElements)
5556
+ hasDisclosure && (animateDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapse, { open: dataElementsOpen, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: `purpose-${purpose.uuid}`, children: disclosureContents }) }) : (
5557
+ // The container is always drawn, empty while the row is closed:
5558
+ // `aria-controls` on the chevron names it, and a control that points
5559
+ // at an element which is not in the document is worse than no
5560
+ // control at all.
5561
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: `purpose-${purpose.uuid}`, children: dataElementsOpen && disclosureContents })
5562
+ ))
5552
5563
  ] }, purpose.uuid);
5553
5564
  };
5554
5565
  var RELATIONSHIP_OPTIONS = [
@@ -6466,7 +6477,7 @@ var NoticeConsentView = ({
6466
6477
  forceMobile,
6467
6478
  forceColorScheme
6468
6479
  }) => {
6469
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
6480
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M;
6470
6481
  const endpoints = useResolvedEndpoints(baseUrlProp, ledgerBaseUrlProp, {
6471
6482
  warn: !previewContent
6472
6483
  });
@@ -6544,7 +6555,7 @@ var NoticeConsentView = ({
6544
6555
  const servedAppearance = content ? content.appearance : cachedAppearance;
6545
6556
  const showsProductSection = (servedAppearance == null ? void 0 : servedAppearance.show_product_section) !== false;
6546
6557
  const showsDataElements = (servedAppearance == null ? void 0 : servedAppearance.show_data_elements) !== false;
6547
- const showsPurposeDescription = (servedAppearance == null ? void 0 : servedAppearance.show_purpose_description) !== false;
6558
+ const descriptionPlacement = (_a = servedAppearance == null ? void 0 : servedAppearance.purpose_description) != null ? _a : "always";
6548
6559
  const showsPurposeSectionHeading = (servedAppearance == null ? void 0 : servedAppearance.show_purpose_section_heading) !== false;
6549
6560
  const noticeAppearance = useNoticeAppearance(
6550
6561
  servedAppearance,
@@ -6734,8 +6745,8 @@ var NoticeConsentView = ({
6734
6745
  const docked = isDocked(layout, isMobile);
6735
6746
  const headingColor = (noticeSettings == null ? void 0 : noticeSettings.headingColor) || DEFAULT_HEADING_COLOR;
6736
6747
  const textColor = (noticeSettings == null ? void 0 : noticeSettings.textColor) || DEFAULT_TEXT_COLOR;
6737
- const classicAccentColor = ((_b = (_a = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _a.accept) == null ? void 0 : _b.backgroundColor) || (content == null ? void 0 : content.primary_color) || (content ? DEFAULT_ACCENT_COLOR : headingColor);
6738
- const accentColor = (_e = appearanceColors.toggle_on) != null ? _e : hasNoticeSkin(appearance) ? ((_d = (_c = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _c.acceptAll) == null ? void 0 : _d.backgroundColor) || classicAccentColor : classicAccentColor;
6748
+ const classicAccentColor = ((_c = (_b = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _b.accept) == null ? void 0 : _c.backgroundColor) || (content == null ? void 0 : content.primary_color) || (content ? DEFAULT_ACCENT_COLOR : headingColor);
6749
+ const accentColor = (_f = appearanceColors.toggle_on) != null ? _f : hasNoticeSkin(appearance) ? ((_e = (_d = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _d.acceptAll) == null ? void 0 : _e.backgroundColor) || classicAccentColor : classicAccentColor;
6739
6750
  const variantStyles = (0, import_react9.useMemo)(
6740
6751
  () => buildVariantStyles(
6741
6752
  styles,
@@ -6769,7 +6780,7 @@ var NoticeConsentView = ({
6769
6780
  docked
6770
6781
  ]
6771
6782
  );
6772
- const textScale = NOTICE_TEXT_SCALE_FACTORS[(_f = noticeAppearance.textScale) != null ? _f : DEFAULT_TEXT_SCALE];
6783
+ const textScale = NOTICE_TEXT_SCALE_FACTORS[(_g = noticeAppearance.textScale) != null ? _g : DEFAULT_TEXT_SCALE];
6773
6784
  const styles4 = (0, import_react9.useMemo)(
6774
6785
  () => {
6775
6786
  var _a2;
@@ -6834,7 +6845,7 @@ var NoticeConsentView = ({
6834
6845
  ...otpLocked && styles4.otpGateLocked
6835
6846
  };
6836
6847
  const drawsSwitches = layout.switchControl;
6837
- const roomyControls = drawsSwitches || ((_g = noticeSettings == null ? void 0 : noticeSettings.selectionControl) != null ? _g : DEFAULT_SELECTION_CONTROL) !== "checkbox";
6848
+ const roomyControls = drawsSwitches || ((_h = noticeSettings == null ? void 0 : noticeSettings.selectionControl) != null ? _h : DEFAULT_SELECTION_CONTROL) !== "checkbox";
6838
6849
  const appearanceRootProps = {
6839
6850
  [NOTICE_ROOT_ATTRIBUTE]: "",
6840
6851
  [NOTICE_ID_ATTRIBUTE]: noticeId,
@@ -8222,7 +8233,7 @@ var NoticeConsentView = ({
8222
8233
  if ((_a2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _a2.name_audio_url) {
8223
8234
  sequence.push(ttsAudioUrls.purposes_audio[purpose.uuid].name_audio_url);
8224
8235
  }
8225
- if (showsPurposeDescription && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
8236
+ if (descriptionPlacement !== "hidden" && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
8226
8237
  sequence.push(
8227
8238
  ttsAudioUrls.purposes_audio[purpose.uuid].description_audio_url
8228
8239
  );
@@ -8294,8 +8305,10 @@ var NoticeConsentView = ({
8294
8305
  if ((_a2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _a2.name_audio_url) {
8295
8306
  elementIds.push(`purpose-name-${purpose.uuid}`);
8296
8307
  }
8297
- if (showsPurposeDescription && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
8298
- elementIds.push(`purpose-description-${purpose.uuid}`);
8308
+ if (descriptionPlacement !== "hidden" && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
8309
+ elementIds.push(
8310
+ descriptionPlacement === "always" ? `purpose-description-${purpose.uuid}` : null
8311
+ );
8299
8312
  }
8300
8313
  if (showsDataElements && purpose.data_elements && purpose.data_elements.length > 0) {
8301
8314
  purpose.data_elements.forEach((dataElement) => {
@@ -8544,20 +8557,20 @@ var NoticeConsentView = ({
8544
8557
  };
8545
8558
  const acceptAllButtonStyle = {
8546
8559
  ...buttonStyle2,
8547
- backgroundColor: ((_i = (_h = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _h.acceptAll) == null ? void 0 : _i.backgroundColor) || ((_k = (_j = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _j.accept) == null ? void 0 : _k.backgroundColor) || (content == null ? void 0 : content.primary_color) || "#4f87ff",
8548
- color: ((_m = (_l = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _l.acceptAll) == null ? void 0 : _m.textColor) || ((_o = (_n = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _n.accept) == null ? void 0 : _o.textColor) || "#ffffff"
8560
+ backgroundColor: ((_j = (_i = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _i.acceptAll) == null ? void 0 : _j.backgroundColor) || ((_l = (_k = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _k.accept) == null ? void 0 : _l.backgroundColor) || (content == null ? void 0 : content.primary_color) || "#4f87ff",
8561
+ color: ((_n = (_m = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _m.acceptAll) == null ? void 0 : _n.textColor) || ((_p = (_o = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _o.accept) == null ? void 0 : _p.textColor) || "#ffffff"
8549
8562
  };
8550
8563
  const acceptSelectedButtonStyle = {
8551
8564
  ...buttonStyle2,
8552
- backgroundColor: (_p = appearanceColors.accept_bg) != null ? _p : skin ? skin.palette.accentWash : "#ffffff",
8553
- color: (_q = appearanceColors.accept_text) != null ? _q : accentColor,
8554
- borderColor: skin ? "transparent" : (_r = appearanceColors.accept_text) != null ? _r : accentColor
8565
+ backgroundColor: (_q = appearanceColors.accept_bg) != null ? _q : skin ? skin.palette.accentWash : "#ffffff",
8566
+ color: (_r = appearanceColors.accept_text) != null ? _r : accentColor,
8567
+ borderColor: skin ? "transparent" : (_s = appearanceColors.accept_text) != null ? _s : accentColor
8555
8568
  };
8556
8569
  const declineButtonStyle = {
8557
8570
  ...buttonStyle2,
8558
- backgroundColor: ((_t = (_s = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _s.decline) == null ? void 0 : _t.backgroundColor) || (skin ? "transparent" : "#ffffff"),
8559
- color: ((_v = (_u = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _u.decline) == null ? void 0 : _v.textColor) || (skin ? textColor : "#000000"),
8560
- borderColor: (_w = appearanceColors.decline_border) != null ? _w : (noticeSettings == null ? void 0 : noticeSettings.borderColor) || (skin ? skin.palette.outline : "#d0d5dd")
8571
+ backgroundColor: ((_u = (_t = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _t.decline) == null ? void 0 : _u.backgroundColor) || (skin ? "transparent" : "#ffffff"),
8572
+ color: ((_w = (_v = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _v.decline) == null ? void 0 : _w.textColor) || (skin ? textColor : "#000000"),
8573
+ borderColor: (_x = appearanceColors.decline_border) != null ? _x : (noticeSettings == null ? void 0 : noticeSettings.borderColor) || (skin ? skin.palette.outline : "#d0d5dd")
8561
8574
  };
8562
8575
  const confirmHint = (0, import_react9.useMemo)(() => {
8563
8576
  var _a2;
@@ -8638,7 +8651,7 @@ var NoticeConsentView = ({
8638
8651
  [content]
8639
8652
  );
8640
8653
  const showNoticePolicyLink = showsNoticePolicyLink(
8641
- (_y = (_x = content == null ? void 0 : content.products) == null ? void 0 : _x.length) != null ? _y : 0,
8654
+ (_z = (_y = content == null ? void 0 : content.products) == null ? void 0 : _y.length) != null ? _z : 0,
8642
8655
  productPolicyLinks.length
8643
8656
  );
8644
8657
  const handleAcceptAll = () => handleAccept("all");
@@ -8649,20 +8662,20 @@ var NoticeConsentView = ({
8649
8662
  const languageSelectorStyle = {
8650
8663
  borderRadius: hostRadius || styleRadii.button,
8651
8664
  borderColor: (noticeSettings == null ? void 0 : noticeSettings.borderColor) || (skin ? skin.palette.hairline : "#d0d5dd"),
8652
- backgroundColor: ((_A = (_z = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _z.language) == null ? void 0 : _A.backgroundColor) || (skin ? skin.palette.control : "#ffffff"),
8653
- color: ((_C = (_B = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _B.language) == null ? void 0 : _C.textColor) || (skin ? headingColor : "#344054")
8665
+ backgroundColor: ((_B = (_A = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _A.language) == null ? void 0 : _B.backgroundColor) || (skin ? skin.palette.control : "#ffffff"),
8666
+ color: ((_D = (_C = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _C.language) == null ? void 0 : _D.textColor) || (skin ? headingColor : "#344054")
8654
8667
  };
8655
8668
  const { borderRadius: _chipRadius, ...languageChipColors } = languageSelectorStyle;
8656
8669
  const languageMenuStyle = skin ? {
8657
- ...((_E = (_D = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _D.language) == null ? void 0 : _E.backgroundColor) && {
8670
+ ...((_F = (_E = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _E.language) == null ? void 0 : _F.backgroundColor) && {
8658
8671
  backgroundColor: noticeSettings.button.language.backgroundColor
8659
8672
  },
8660
8673
  color: languageSelectorStyle.color
8661
8674
  } : languageChipColors;
8662
8675
  const selectedLanguageItemStyle = {
8663
8676
  ...languageMenuStyle,
8664
- backgroundColor: ((_G = (_F = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _F.language) == null ? void 0 : _G.selectedBackgroundColor) || (skin ? skin.palette.accentWash : "#f3f4f6"),
8665
- color: ((_I = (_H = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _H.language) == null ? void 0 : _I.selectedTextColor) || (skin ? headingColor : "#344054"),
8677
+ backgroundColor: ((_H = (_G = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _G.language) == null ? void 0 : _H.selectedBackgroundColor) || (skin ? skin.palette.accentWash : "#f3f4f6"),
8678
+ color: ((_J = (_I = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _I.language) == null ? void 0 : _J.selectedTextColor) || (skin ? headingColor : "#344054"),
8666
8679
  fontWeight: 600
8667
8680
  };
8668
8681
  const isSectionOpen = (section) => openSections[section] || isTalkbackActive;
@@ -9410,7 +9423,7 @@ var NoticeConsentView = ({
9410
9423
  PurposeItem,
9411
9424
  {
9412
9425
  showsDataElements,
9413
- showsPurposeDescription,
9426
+ descriptionPlacement,
9414
9427
  roomyControls,
9415
9428
  purpose,
9416
9429
  selectedPurposes,
@@ -9438,7 +9451,7 @@ var NoticeConsentView = ({
9438
9451
  PurposeItem,
9439
9452
  {
9440
9453
  showsDataElements,
9441
- showsPurposeDescription,
9454
+ descriptionPlacement,
9442
9455
  roomyControls,
9443
9456
  purpose,
9444
9457
  selectedPurposes,
@@ -9515,7 +9528,7 @@ var NoticeConsentView = ({
9515
9528
  PurposeItem,
9516
9529
  {
9517
9530
  showsDataElements,
9518
- showsPurposeDescription,
9531
+ descriptionPlacement,
9519
9532
  purpose,
9520
9533
  productUuid: group.product.uuid,
9521
9534
  selectedPurposes,
@@ -9553,7 +9566,7 @@ var NoticeConsentView = ({
9553
9566
  PurposeItem,
9554
9567
  {
9555
9568
  showsDataElements,
9556
- showsPurposeDescription,
9569
+ descriptionPlacement,
9557
9570
  roomyControls,
9558
9571
  purpose,
9559
9572
  selectedPurposes,
@@ -9755,8 +9768,8 @@ var NoticeConsentView = ({
9755
9768
  }
9756
9769
  ),
9757
9770
  otpLocked && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...PART_PROPS.otp, style: styles4.otpGatePanel, children: [
9758
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles4.otpGateTitle, children: (_J = otpGate == null ? void 0 : otpGate.title) != null ? _J : chrome.otpTitle }),
9759
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles4.otpGateDescription, children: (_K = otpGate == null ? void 0 : otpGate.description) != null ? _K : chrome.otpDescription }),
9771
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles4.otpGateTitle, children: (_K = otpGate == null ? void 0 : otpGate.title) != null ? _K : chrome.otpTitle }),
9772
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles4.otpGateDescription, children: (_L = otpGate == null ? void 0 : otpGate.description) != null ? _L : chrome.otpDescription }),
9760
9773
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles4.otpGateDigits, children: Array.from({ length: OTP_GATE_LENGTH }).map(
9761
9774
  (_, i) => {
9762
9775
  var _a2;
@@ -9829,7 +9842,7 @@ var NoticeConsentView = ({
9829
9842
  },
9830
9843
  onClick: handleOtpConfirm,
9831
9844
  disabled: otpBusy || otpCode.length !== OTP_GATE_LENGTH,
9832
- children: otpBusy ? chrome.otpVerifying : (_L = otpGate == null ? void 0 : otpGate.submitLabel) != null ? _L : chrome.otpSubmit
9845
+ children: otpBusy ? chrome.otpVerifying : (_M = otpGate == null ? void 0 : otpGate.submitLabel) != null ? _M : chrome.otpSubmit
9833
9846
  }
9834
9847
  )
9835
9848
  ] }),
@@ -9994,14 +10007,13 @@ var submitConsentEvent2 = async ({
9994
10007
  const response = await withIdempotencyKey(
9995
10008
  url,
9996
10009
  serialisedBody,
9997
- (idempotencyHeaders) => fetch(url, {
10010
+ (idempotencyKey) => fetch(url, {
9998
10011
  method: "POST",
9999
10012
  headers: {
10000
10013
  Authorization: `Bearer ${accessToken}`,
10001
- "Content-Type": "application/json",
10002
- ...idempotencyHeaders
10014
+ "Content-Type": "application/json"
10003
10015
  },
10004
- body: serialisedBody
10016
+ body: JSON.stringify({ ...payload, idempotency_key: idempotencyKey })
10005
10017
  })
10006
10018
  );
10007
10019
  if (!response.ok) {
@@ -12349,15 +12361,14 @@ var submitAssistedConsent = async ({
12349
12361
  const response = await withIdempotencyKey(
12350
12362
  url,
12351
12363
  serialisedBody,
12352
- (idempotencyHeaders) => fetch(url, {
12364
+ (idempotencyKey) => fetch(url, {
12353
12365
  method: "POST",
12354
12366
  headers: {
12355
12367
  accept: "application/json",
12356
12368
  Authorization: `Bearer ${accessToken}`,
12357
- "Content-Type": "application/json",
12358
- ...idempotencyHeaders
12369
+ "Content-Type": "application/json"
12359
12370
  },
12360
- body: serialisedBody,
12371
+ body: JSON.stringify({ ...payload, idempotency_key: idempotencyKey }),
12361
12372
  signal
12362
12373
  })
12363
12374
  );
package/dist/index.mjs CHANGED
@@ -36,7 +36,7 @@ import {
36
36
  withAlpha,
37
37
  withColorScheme,
38
38
  withIdempotencyKey
39
- } from "./chunk-W45JQYDG.mjs";
39
+ } from "./chunk-GP2II2WM.mjs";
40
40
  import {
41
41
  NOTICE_FONT_ROOT_PROPS,
42
42
  REQUIRED_MARKER_ARIA_LABEL,
@@ -407,14 +407,13 @@ var submitConsentEvent = async ({
407
407
  const response = await withIdempotencyKey(
408
408
  url,
409
409
  serialisedBody,
410
- (idempotencyHeaders) => fetch(url, {
410
+ (idempotencyKey) => fetch(url, {
411
411
  method: "POST",
412
412
  headers: {
413
413
  ...buildAuthHeaders(accessToken, sandbox),
414
- "Content-Type": "application/json",
415
- ...idempotencyHeaders
414
+ "Content-Type": "application/json"
416
415
  },
417
- body: serialisedBody,
416
+ body: JSON.stringify({ ...requestBody, idempotency_key: idempotencyKey }),
418
417
  signal
419
418
  })
420
419
  );
@@ -4316,7 +4315,7 @@ var PurposeItem = ({
4316
4315
  controlSkin,
4317
4316
  rowClassName,
4318
4317
  showsDataElements = true,
4319
- showsPurposeDescription = true,
4318
+ descriptionPlacement = "always",
4320
4319
  animateDisclosure = false
4321
4320
  }) => {
4322
4321
  var _a, _b;
@@ -4343,11 +4342,30 @@ var PurposeItem = ({
4343
4342
  [settings == null ? void 0 : settings.textColor]
4344
4343
  );
4345
4344
  const hasDataElements = showsDataElements && Boolean(purpose.data_elements) && purpose.data_elements.length > 0;
4346
- const dataElementsOpen = !collapsedPurposes[stateKey] && hasDataElements;
4345
+ const descriptionText = getTranslatedText(
4346
+ `purposes.description`,
4347
+ purpose.description,
4348
+ purpose.uuid
4349
+ );
4350
+ const disclosesDescription = descriptionPlacement === "expanded" && descriptionText.trim() !== "";
4351
+ const hasDisclosure = hasDataElements || disclosesDescription;
4352
+ const dataElementsOpen = !collapsedPurposes[stateKey] && hasDisclosure;
4353
+ const purposeDescription = /* @__PURE__ */ jsx6(
4354
+ "h3",
4355
+ {
4356
+ id: `purpose-description-${stateKey}`,
4357
+ style: {
4358
+ ...styles4.optionDescription,
4359
+ ...responsiveStyles.optionDescription,
4360
+ ...textStyle
4361
+ },
4362
+ children: descriptionText
4363
+ },
4364
+ `purpose-description-${purpose.uuid}-${selectedLanguage}`
4365
+ );
4347
4366
  const dataElements = /* @__PURE__ */ jsx6(
4348
4367
  "div",
4349
4368
  {
4350
- id: `purpose-${purpose.uuid}`,
4351
4369
  style: {
4352
4370
  ...styles4.dataElementsContainer,
4353
4371
  ...roomyControls ? styles4.dataElementsContainerRoomy : null
@@ -4467,13 +4485,17 @@ var PurposeItem = ({
4467
4485
  },
4468
4486
  `purpose-${purpose.uuid}-container-${selectedLanguage}`
4469
4487
  );
4488
+ const disclosureContents = /* @__PURE__ */ jsxs5(Fragment3, { children: [
4489
+ disclosesDescription && purposeDescription,
4490
+ hasDataElements && dataElements
4491
+ ] });
4470
4492
  return /* @__PURE__ */ jsxs5("div", { className: rowClassName, children: [
4471
4493
  /* @__PURE__ */ jsxs5("div", { ...PART_PROPS.purpose, style: styles4.optionItem, children: [
4472
4494
  /* @__PURE__ */ jsxs5(
4473
4495
  "div",
4474
4496
  {
4475
4497
  style: styles4.optionLeft,
4476
- ...hasDataElements && {
4498
+ ...hasDisclosure && {
4477
4499
  onClick: () => onPurposeCollapse(purpose.uuid, productUuid),
4478
4500
  role: "button",
4479
4501
  tabIndex: 0,
@@ -4492,7 +4514,7 @@ var PurposeItem = ({
4492
4514
  }
4493
4515
  },
4494
4516
  children: [
4495
- hasDataElements && /* @__PURE__ */ jsx6(
4517
+ hasDisclosure && /* @__PURE__ */ jsx6(
4496
4518
  CollapseChevron,
4497
4519
  {
4498
4520
  open: !collapsedPurposes[stateKey],
@@ -4517,23 +4539,7 @@ var PurposeItem = ({
4517
4539
  },
4518
4540
  `purpose-name-${purpose.uuid}-${selectedLanguage}`
4519
4541
  ),
4520
- showsPurposeDescription && /* @__PURE__ */ jsx6(
4521
- "h3",
4522
- {
4523
- id: `purpose-description-${stateKey}`,
4524
- style: {
4525
- ...styles4.optionDescription,
4526
- ...responsiveStyles.optionDescription,
4527
- ...textStyle
4528
- },
4529
- children: getTranslatedText(
4530
- `purposes.description`,
4531
- purpose.description,
4532
- purpose.uuid
4533
- )
4534
- },
4535
- `purpose-description-${purpose.uuid}-${selectedLanguage}`
4536
- )
4542
+ descriptionPlacement === "always" && purposeDescription
4537
4543
  ] })
4538
4544
  ]
4539
4545
  }
@@ -4559,7 +4565,13 @@ var PurposeItem = ({
4559
4565
  }
4560
4566
  )
4561
4567
  ] }),
4562
- hasDataElements && (animateDisclosure ? /* @__PURE__ */ jsx6(Collapse, { open: dataElementsOpen, children: dataElements }) : dataElementsOpen && dataElements)
4568
+ hasDisclosure && (animateDisclosure ? /* @__PURE__ */ jsx6(Collapse, { open: dataElementsOpen, children: /* @__PURE__ */ jsx6("div", { id: `purpose-${purpose.uuid}`, children: disclosureContents }) }) : (
4569
+ // The container is always drawn, empty while the row is closed:
4570
+ // `aria-controls` on the chevron names it, and a control that points
4571
+ // at an element which is not in the document is worse than no
4572
+ // control at all.
4573
+ /* @__PURE__ */ jsx6("div", { id: `purpose-${purpose.uuid}`, children: dataElementsOpen && disclosureContents })
4574
+ ))
4563
4575
  ] }, purpose.uuid);
4564
4576
  };
4565
4577
  var RELATIONSHIP_OPTIONS = [
@@ -5477,7 +5489,7 @@ var NoticeConsentView = ({
5477
5489
  forceMobile,
5478
5490
  forceColorScheme
5479
5491
  }) => {
5480
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
5492
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M;
5481
5493
  const endpoints = useResolvedEndpoints(baseUrlProp, ledgerBaseUrlProp, {
5482
5494
  warn: !previewContent
5483
5495
  });
@@ -5555,7 +5567,7 @@ var NoticeConsentView = ({
5555
5567
  const servedAppearance = content ? content.appearance : cachedAppearance;
5556
5568
  const showsProductSection = (servedAppearance == null ? void 0 : servedAppearance.show_product_section) !== false;
5557
5569
  const showsDataElements = (servedAppearance == null ? void 0 : servedAppearance.show_data_elements) !== false;
5558
- const showsPurposeDescription = (servedAppearance == null ? void 0 : servedAppearance.show_purpose_description) !== false;
5570
+ const descriptionPlacement = (_a = servedAppearance == null ? void 0 : servedAppearance.purpose_description) != null ? _a : "always";
5559
5571
  const showsPurposeSectionHeading = (servedAppearance == null ? void 0 : servedAppearance.show_purpose_section_heading) !== false;
5560
5572
  const noticeAppearance = useNoticeAppearance(
5561
5573
  servedAppearance,
@@ -5745,8 +5757,8 @@ var NoticeConsentView = ({
5745
5757
  const docked = isDocked(layout, isMobile);
5746
5758
  const headingColor = (noticeSettings == null ? void 0 : noticeSettings.headingColor) || DEFAULT_HEADING_COLOR;
5747
5759
  const textColor = (noticeSettings == null ? void 0 : noticeSettings.textColor) || DEFAULT_TEXT_COLOR;
5748
- const classicAccentColor = ((_b = (_a = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _a.accept) == null ? void 0 : _b.backgroundColor) || (content == null ? void 0 : content.primary_color) || (content ? DEFAULT_ACCENT_COLOR : headingColor);
5749
- const accentColor = (_e = appearanceColors.toggle_on) != null ? _e : hasNoticeSkin(appearance) ? ((_d = (_c = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _c.acceptAll) == null ? void 0 : _d.backgroundColor) || classicAccentColor : classicAccentColor;
5760
+ const classicAccentColor = ((_c = (_b = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _b.accept) == null ? void 0 : _c.backgroundColor) || (content == null ? void 0 : content.primary_color) || (content ? DEFAULT_ACCENT_COLOR : headingColor);
5761
+ const accentColor = (_f = appearanceColors.toggle_on) != null ? _f : hasNoticeSkin(appearance) ? ((_e = (_d = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _d.acceptAll) == null ? void 0 : _e.backgroundColor) || classicAccentColor : classicAccentColor;
5750
5762
  const variantStyles = useMemo3(
5751
5763
  () => buildVariantStyles(
5752
5764
  styles,
@@ -5780,7 +5792,7 @@ var NoticeConsentView = ({
5780
5792
  docked
5781
5793
  ]
5782
5794
  );
5783
- const textScale = NOTICE_TEXT_SCALE_FACTORS[(_f = noticeAppearance.textScale) != null ? _f : DEFAULT_TEXT_SCALE];
5795
+ const textScale = NOTICE_TEXT_SCALE_FACTORS[(_g = noticeAppearance.textScale) != null ? _g : DEFAULT_TEXT_SCALE];
5784
5796
  const styles4 = useMemo3(
5785
5797
  () => {
5786
5798
  var _a2;
@@ -5845,7 +5857,7 @@ var NoticeConsentView = ({
5845
5857
  ...otpLocked && styles4.otpGateLocked
5846
5858
  };
5847
5859
  const drawsSwitches = layout.switchControl;
5848
- const roomyControls = drawsSwitches || ((_g = noticeSettings == null ? void 0 : noticeSettings.selectionControl) != null ? _g : DEFAULT_SELECTION_CONTROL) !== "checkbox";
5860
+ const roomyControls = drawsSwitches || ((_h = noticeSettings == null ? void 0 : noticeSettings.selectionControl) != null ? _h : DEFAULT_SELECTION_CONTROL) !== "checkbox";
5849
5861
  const appearanceRootProps = {
5850
5862
  [NOTICE_ROOT_ATTRIBUTE]: "",
5851
5863
  [NOTICE_ID_ATTRIBUTE]: noticeId,
@@ -7233,7 +7245,7 @@ var NoticeConsentView = ({
7233
7245
  if ((_a2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _a2.name_audio_url) {
7234
7246
  sequence.push(ttsAudioUrls.purposes_audio[purpose.uuid].name_audio_url);
7235
7247
  }
7236
- if (showsPurposeDescription && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
7248
+ if (descriptionPlacement !== "hidden" && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
7237
7249
  sequence.push(
7238
7250
  ttsAudioUrls.purposes_audio[purpose.uuid].description_audio_url
7239
7251
  );
@@ -7305,8 +7317,10 @@ var NoticeConsentView = ({
7305
7317
  if ((_a2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _a2.name_audio_url) {
7306
7318
  elementIds.push(`purpose-name-${purpose.uuid}`);
7307
7319
  }
7308
- if (showsPurposeDescription && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
7309
- elementIds.push(`purpose-description-${purpose.uuid}`);
7320
+ if (descriptionPlacement !== "hidden" && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
7321
+ elementIds.push(
7322
+ descriptionPlacement === "always" ? `purpose-description-${purpose.uuid}` : null
7323
+ );
7310
7324
  }
7311
7325
  if (showsDataElements && purpose.data_elements && purpose.data_elements.length > 0) {
7312
7326
  purpose.data_elements.forEach((dataElement) => {
@@ -7555,20 +7569,20 @@ var NoticeConsentView = ({
7555
7569
  };
7556
7570
  const acceptAllButtonStyle = {
7557
7571
  ...buttonStyle2,
7558
- backgroundColor: ((_i = (_h = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _h.acceptAll) == null ? void 0 : _i.backgroundColor) || ((_k = (_j = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _j.accept) == null ? void 0 : _k.backgroundColor) || (content == null ? void 0 : content.primary_color) || "#4f87ff",
7559
- color: ((_m = (_l = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _l.acceptAll) == null ? void 0 : _m.textColor) || ((_o = (_n = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _n.accept) == null ? void 0 : _o.textColor) || "#ffffff"
7572
+ backgroundColor: ((_j = (_i = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _i.acceptAll) == null ? void 0 : _j.backgroundColor) || ((_l = (_k = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _k.accept) == null ? void 0 : _l.backgroundColor) || (content == null ? void 0 : content.primary_color) || "#4f87ff",
7573
+ color: ((_n = (_m = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _m.acceptAll) == null ? void 0 : _n.textColor) || ((_p = (_o = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _o.accept) == null ? void 0 : _p.textColor) || "#ffffff"
7560
7574
  };
7561
7575
  const acceptSelectedButtonStyle = {
7562
7576
  ...buttonStyle2,
7563
- backgroundColor: (_p = appearanceColors.accept_bg) != null ? _p : skin ? skin.palette.accentWash : "#ffffff",
7564
- color: (_q = appearanceColors.accept_text) != null ? _q : accentColor,
7565
- borderColor: skin ? "transparent" : (_r = appearanceColors.accept_text) != null ? _r : accentColor
7577
+ backgroundColor: (_q = appearanceColors.accept_bg) != null ? _q : skin ? skin.palette.accentWash : "#ffffff",
7578
+ color: (_r = appearanceColors.accept_text) != null ? _r : accentColor,
7579
+ borderColor: skin ? "transparent" : (_s = appearanceColors.accept_text) != null ? _s : accentColor
7566
7580
  };
7567
7581
  const declineButtonStyle = {
7568
7582
  ...buttonStyle2,
7569
- backgroundColor: ((_t = (_s = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _s.decline) == null ? void 0 : _t.backgroundColor) || (skin ? "transparent" : "#ffffff"),
7570
- color: ((_v = (_u = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _u.decline) == null ? void 0 : _v.textColor) || (skin ? textColor : "#000000"),
7571
- borderColor: (_w = appearanceColors.decline_border) != null ? _w : (noticeSettings == null ? void 0 : noticeSettings.borderColor) || (skin ? skin.palette.outline : "#d0d5dd")
7583
+ backgroundColor: ((_u = (_t = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _t.decline) == null ? void 0 : _u.backgroundColor) || (skin ? "transparent" : "#ffffff"),
7584
+ color: ((_w = (_v = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _v.decline) == null ? void 0 : _w.textColor) || (skin ? textColor : "#000000"),
7585
+ borderColor: (_x = appearanceColors.decline_border) != null ? _x : (noticeSettings == null ? void 0 : noticeSettings.borderColor) || (skin ? skin.palette.outline : "#d0d5dd")
7572
7586
  };
7573
7587
  const confirmHint = useMemo3(() => {
7574
7588
  var _a2;
@@ -7649,7 +7663,7 @@ var NoticeConsentView = ({
7649
7663
  [content]
7650
7664
  );
7651
7665
  const showNoticePolicyLink = showsNoticePolicyLink(
7652
- (_y = (_x = content == null ? void 0 : content.products) == null ? void 0 : _x.length) != null ? _y : 0,
7666
+ (_z = (_y = content == null ? void 0 : content.products) == null ? void 0 : _y.length) != null ? _z : 0,
7653
7667
  productPolicyLinks.length
7654
7668
  );
7655
7669
  const handleAcceptAll = () => handleAccept("all");
@@ -7660,20 +7674,20 @@ var NoticeConsentView = ({
7660
7674
  const languageSelectorStyle = {
7661
7675
  borderRadius: hostRadius || styleRadii.button,
7662
7676
  borderColor: (noticeSettings == null ? void 0 : noticeSettings.borderColor) || (skin ? skin.palette.hairline : "#d0d5dd"),
7663
- backgroundColor: ((_A = (_z = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _z.language) == null ? void 0 : _A.backgroundColor) || (skin ? skin.palette.control : "#ffffff"),
7664
- color: ((_C = (_B = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _B.language) == null ? void 0 : _C.textColor) || (skin ? headingColor : "#344054")
7677
+ backgroundColor: ((_B = (_A = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _A.language) == null ? void 0 : _B.backgroundColor) || (skin ? skin.palette.control : "#ffffff"),
7678
+ color: ((_D = (_C = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _C.language) == null ? void 0 : _D.textColor) || (skin ? headingColor : "#344054")
7665
7679
  };
7666
7680
  const { borderRadius: _chipRadius, ...languageChipColors } = languageSelectorStyle;
7667
7681
  const languageMenuStyle = skin ? {
7668
- ...((_E = (_D = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _D.language) == null ? void 0 : _E.backgroundColor) && {
7682
+ ...((_F = (_E = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _E.language) == null ? void 0 : _F.backgroundColor) && {
7669
7683
  backgroundColor: noticeSettings.button.language.backgroundColor
7670
7684
  },
7671
7685
  color: languageSelectorStyle.color
7672
7686
  } : languageChipColors;
7673
7687
  const selectedLanguageItemStyle = {
7674
7688
  ...languageMenuStyle,
7675
- backgroundColor: ((_G = (_F = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _F.language) == null ? void 0 : _G.selectedBackgroundColor) || (skin ? skin.palette.accentWash : "#f3f4f6"),
7676
- color: ((_I = (_H = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _H.language) == null ? void 0 : _I.selectedTextColor) || (skin ? headingColor : "#344054"),
7689
+ backgroundColor: ((_H = (_G = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _G.language) == null ? void 0 : _H.selectedBackgroundColor) || (skin ? skin.palette.accentWash : "#f3f4f6"),
7690
+ color: ((_J = (_I = noticeSettings == null ? void 0 : noticeSettings.button) == null ? void 0 : _I.language) == null ? void 0 : _J.selectedTextColor) || (skin ? headingColor : "#344054"),
7677
7691
  fontWeight: 600
7678
7692
  };
7679
7693
  const isSectionOpen = (section) => openSections[section] || isTalkbackActive;
@@ -8421,7 +8435,7 @@ var NoticeConsentView = ({
8421
8435
  PurposeItem,
8422
8436
  {
8423
8437
  showsDataElements,
8424
- showsPurposeDescription,
8438
+ descriptionPlacement,
8425
8439
  roomyControls,
8426
8440
  purpose,
8427
8441
  selectedPurposes,
@@ -8449,7 +8463,7 @@ var NoticeConsentView = ({
8449
8463
  PurposeItem,
8450
8464
  {
8451
8465
  showsDataElements,
8452
- showsPurposeDescription,
8466
+ descriptionPlacement,
8453
8467
  roomyControls,
8454
8468
  purpose,
8455
8469
  selectedPurposes,
@@ -8526,7 +8540,7 @@ var NoticeConsentView = ({
8526
8540
  PurposeItem,
8527
8541
  {
8528
8542
  showsDataElements,
8529
- showsPurposeDescription,
8543
+ descriptionPlacement,
8530
8544
  purpose,
8531
8545
  productUuid: group.product.uuid,
8532
8546
  selectedPurposes,
@@ -8564,7 +8578,7 @@ var NoticeConsentView = ({
8564
8578
  PurposeItem,
8565
8579
  {
8566
8580
  showsDataElements,
8567
- showsPurposeDescription,
8581
+ descriptionPlacement,
8568
8582
  roomyControls,
8569
8583
  purpose,
8570
8584
  selectedPurposes,
@@ -8766,8 +8780,8 @@ var NoticeConsentView = ({
8766
8780
  }
8767
8781
  ),
8768
8782
  otpLocked && /* @__PURE__ */ jsxs5("div", { ...PART_PROPS.otp, style: styles4.otpGatePanel, children: [
8769
- /* @__PURE__ */ jsx6("p", { style: styles4.otpGateTitle, children: (_J = otpGate == null ? void 0 : otpGate.title) != null ? _J : chrome.otpTitle }),
8770
- /* @__PURE__ */ jsx6("p", { style: styles4.otpGateDescription, children: (_K = otpGate == null ? void 0 : otpGate.description) != null ? _K : chrome.otpDescription }),
8783
+ /* @__PURE__ */ jsx6("p", { style: styles4.otpGateTitle, children: (_K = otpGate == null ? void 0 : otpGate.title) != null ? _K : chrome.otpTitle }),
8784
+ /* @__PURE__ */ jsx6("p", { style: styles4.otpGateDescription, children: (_L = otpGate == null ? void 0 : otpGate.description) != null ? _L : chrome.otpDescription }),
8771
8785
  /* @__PURE__ */ jsx6("div", { style: styles4.otpGateDigits, children: Array.from({ length: OTP_GATE_LENGTH }).map(
8772
8786
  (_, i) => {
8773
8787
  var _a2;
@@ -8840,7 +8854,7 @@ var NoticeConsentView = ({
8840
8854
  },
8841
8855
  onClick: handleOtpConfirm,
8842
8856
  disabled: otpBusy || otpCode.length !== OTP_GATE_LENGTH,
8843
- children: otpBusy ? chrome.otpVerifying : (_L = otpGate == null ? void 0 : otpGate.submitLabel) != null ? _L : chrome.otpSubmit
8857
+ children: otpBusy ? chrome.otpVerifying : (_M = otpGate == null ? void 0 : otpGate.submitLabel) != null ? _M : chrome.otpSubmit
8844
8858
  }
8845
8859
  )
8846
8860
  ] }),
@@ -9005,14 +9019,13 @@ var submitConsentEvent2 = async ({
9005
9019
  const response = await withIdempotencyKey(
9006
9020
  url,
9007
9021
  serialisedBody,
9008
- (idempotencyHeaders) => fetch(url, {
9022
+ (idempotencyKey) => fetch(url, {
9009
9023
  method: "POST",
9010
9024
  headers: {
9011
9025
  Authorization: `Bearer ${accessToken}`,
9012
- "Content-Type": "application/json",
9013
- ...idempotencyHeaders
9026
+ "Content-Type": "application/json"
9014
9027
  },
9015
- body: serialisedBody
9028
+ body: JSON.stringify({ ...payload, idempotency_key: idempotencyKey })
9016
9029
  })
9017
9030
  );
9018
9031
  if (!response.ok) {
@@ -11360,15 +11373,14 @@ var submitAssistedConsent = async ({
11360
11373
  const response = await withIdempotencyKey(
11361
11374
  url,
11362
11375
  serialisedBody,
11363
- (idempotencyHeaders) => fetch(url, {
11376
+ (idempotencyKey) => fetch(url, {
11364
11377
  method: "POST",
11365
11378
  headers: {
11366
11379
  accept: "application/json",
11367
11380
  Authorization: `Bearer ${accessToken}`,
11368
- "Content-Type": "application/json",
11369
- ...idempotencyHeaders
11381
+ "Content-Type": "application/json"
11370
11382
  },
11371
- body: serialisedBody,
11383
+ body: JSON.stringify({ ...payload, idempotency_key: idempotencyKey }),
11372
11384
  signal
11373
11385
  })
11374
11386
  );
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ReactNode } from 'react';
3
- import { P as PrivacyCenterTheme } from './types-9S_PyqzL.mjs';
3
+ import { P as PrivacyCenterTheme } from './types-CaqLBkJt.mjs';
4
4
  import * as _tanstack_react_query from '@tanstack/react-query';
5
5
 
6
6
  /**
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ReactNode } from 'react';
3
- import { P as PrivacyCenterTheme } from './types-9S_PyqzL.js';
3
+ import { P as PrivacyCenterTheme } from './types-CaqLBkJt.js';
4
4
  import * as _tanstack_react_query from '@tanstack/react-query';
5
5
 
6
6
  /**
@@ -10190,7 +10190,6 @@ var useAuth = () => {
10190
10190
  var import_react6 = require("react");
10191
10191
 
10192
10192
  // src/shared/idempotency.ts
10193
- var HEADER = "Idempotency-Key";
10194
10193
  var pending = /* @__PURE__ */ new Map();
10195
10194
  var MAX_PENDING = 16;
10196
10195
  var mintKey = () => {
@@ -10238,7 +10237,7 @@ ${body}`;
10238
10237
  if (entry.inFlight === 0 && !entry.keep) pending.delete(signature);
10239
10238
  };
10240
10239
  try {
10241
- const result = await send({ [HEADER]: entry.key });
10240
+ const result = await send(entry.key);
10242
10241
  settle(settledOnResolve(result));
10243
10242
  return result;
10244
10243
  } catch (error) {
@@ -10733,19 +10732,16 @@ function createConsentClient(baseUrl, ledgerBaseUrl) {
10733
10732
  };
10734
10733
  const url = ledgerUrl(baseRequest, "/submit-consent");
10735
10734
  const serialisedBody = JSON.stringify(body);
10736
- return withIdempotencyKey(url, serialisedBody, (idempotencyHeaders) => {
10737
- const headers = new Headers(options == null ? void 0 : options.headers);
10738
- Object.entries(idempotencyHeaders).forEach(
10739
- ([name, value]) => headers.set(name, value)
10740
- );
10741
- return privacyCenterApiFetch(url, {
10735
+ return withIdempotencyKey(
10736
+ url,
10737
+ serialisedBody,
10738
+ (idempotencyKey) => privacyCenterApiFetch(url, {
10742
10739
  ...options,
10743
10740
  method: "POST",
10744
- body: serialisedBody,
10745
- headers,
10741
+ body: JSON.stringify({ ...body, idempotency_key: idempotencyKey }),
10746
10742
  authToken: resolveAuthToken(authToken, baseRequest)
10747
- });
10748
- });
10743
+ })
10744
+ );
10749
10745
  },
10750
10746
  /**
10751
10747
  * Get activities (privacy center)
@@ -22,7 +22,7 @@ import {
22
22
  warnEndpointUsage,
23
23
  warnSlugDeprecated,
24
24
  withIdempotencyKey
25
- } from "./chunk-W45JQYDG.mjs";
25
+ } from "./chunk-GP2II2WM.mjs";
26
26
  import {
27
27
  INHERIT_FONT_FAMILY,
28
28
  resolveNoticeFontFamily
@@ -10512,19 +10512,16 @@ function createConsentClient(baseUrl, ledgerBaseUrl) {
10512
10512
  };
10513
10513
  const url = ledgerUrl(baseRequest, "/submit-consent");
10514
10514
  const serialisedBody = JSON.stringify(body);
10515
- return withIdempotencyKey(url, serialisedBody, (idempotencyHeaders) => {
10516
- const headers = new Headers(options == null ? void 0 : options.headers);
10517
- Object.entries(idempotencyHeaders).forEach(
10518
- ([name, value]) => headers.set(name, value)
10519
- );
10520
- return privacyCenterApiFetch(url, {
10515
+ return withIdempotencyKey(
10516
+ url,
10517
+ serialisedBody,
10518
+ (idempotencyKey) => privacyCenterApiFetch(url, {
10521
10519
  ...options,
10522
10520
  method: "POST",
10523
- body: serialisedBody,
10524
- headers,
10521
+ body: JSON.stringify({ ...body, idempotency_key: idempotencyKey }),
10525
10522
  authToken: resolveAuthToken(authToken, baseRequest)
10526
- });
10527
- });
10523
+ })
10524
+ );
10528
10525
  },
10529
10526
  /**
10530
10527
  * Get activities (privacy center)
@@ -16,6 +16,8 @@ declare const NOTICE_BACKDROPS: readonly ["dim", "none"];
16
16
  declare const NOTICE_PHONE_FOOTERS: readonly ["stacked", "paired"];
17
17
  declare const NOTICE_TEXT_SCALES: readonly ["sm", "md", "lg"];
18
18
 
19
+ type PurposeDescriptionPlacement = "always" | "expanded" | "hidden";
20
+
19
21
  /**
20
22
  * Surface and layout family a notice is drawn with, chosen in the Redacto
21
23
  * console and served on `active_config.appearance.style`. Colours never come
@@ -57,7 +59,8 @@ type NoticeAppearance = Readonly<{
57
59
  show_product_section?: boolean;
58
60
  /** Absent draws the data elements, and the chevron that opens them. */
59
61
  show_data_elements?: boolean;
60
- show_purpose_description?: boolean;
62
+ /** Where the purpose description goes. Absent draws it on the row. */
63
+ purpose_description?: PurposeDescriptionPlacement;
61
64
  show_purpose_section_heading?: boolean;
62
65
  phone_footer?: string;
63
66
  auto_dark?: boolean;
@@ -16,6 +16,8 @@ declare const NOTICE_BACKDROPS: readonly ["dim", "none"];
16
16
  declare const NOTICE_PHONE_FOOTERS: readonly ["stacked", "paired"];
17
17
  declare const NOTICE_TEXT_SCALES: readonly ["sm", "md", "lg"];
18
18
 
19
+ type PurposeDescriptionPlacement = "always" | "expanded" | "hidden";
20
+
19
21
  /**
20
22
  * Surface and layout family a notice is drawn with, chosen in the Redacto
21
23
  * console and served on `active_config.appearance.style`. Colours never come
@@ -57,7 +59,8 @@ type NoticeAppearance = Readonly<{
57
59
  show_product_section?: boolean;
58
60
  /** Absent draws the data elements, and the chevron that opens them. */
59
61
  show_data_elements?: boolean;
60
- show_purpose_description?: boolean;
62
+ /** Where the purpose description goes. Absent draws it on the row. */
63
+ purpose_description?: PurposeDescriptionPlacement;
61
64
  show_purpose_section_heading?: boolean;
62
65
  phone_footer?: string;
63
66
  auto_dark?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redacto.io/consent-sdk-react",
3
- "version": "11.1.0-beta.0",
3
+ "version": "11.1.0-beta.2",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",