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

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-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-B8qroG0j.mjs';
+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';
 import { f as NoticeFontOptions } from './types-xaCyZUfo.mjs';
 
 /**

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-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-B8qroG0j.js';
+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';
 import { f as NoticeFontOptions } from './types-xaCyZUfo.js';
 
 /**

package/dist/index.js

@@ -1505,6 +1505,8 @@ var PREVIEW_FRAME_STYLE = {
 var LAYOUT_STYLE_ID = "redacto-notice-layout-styles";
 var DOCK_ATTRIBUTE = "data-redacto-sheet";
 var DOCKED = "dock";
+var PREVIEW_ATTRIBUTE = "data-redacto-preview";
+var PREVIEWED = "frame";
 var MOTION_ATTRIBUTE = "data-redacto-motion";
 var MOTION_OFF = "off";
 var NOTICE_ID_ATTRIBUTE = "data-redacto-notice-id";
@@ -1582,7 +1584,7 @@ var styles = {
     border: "none",
     display: "flex",
     flexDirection: "column",
-    maxHeight: "90vh",
+    maxHeight: "90%",
     zIndex: 1e3,
     margin: 0,
     padding: 0,
@@ -1963,7 +1965,14 @@ var styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     cursor: "pointer",
-    margin: 0,
+    // Longhands, not the `margin` shorthand: `declineSpacer` spreads
+    // `marginRight` over this on the wide row only, and React clears a
+    // longhand that sits beside a shorthand when a render drops it, which
+    // leaves the value order-dependent.
+    marginTop: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    marginLeft: 0,
     boxSizing: "border-box",
     textAlign: "center",
     fontFamily: "inherit"
@@ -3829,10 +3838,12 @@ var FLOAT_FRAMES_STILL = `
 var floatKeyframes = (frames) => [NOTICE_KEYFRAMES.float, NOTICE_KEYFRAMES.floatPill].map((name) => `@keyframes ${name} {${frames}
   }`).join("\n");
 var css = `
-  /* dvh tracks the phone's collapsing toolbars; vh stays inline as the
-     fallback for browsers without it. */
+  /* dvh tracks the phone's collapsing toolbars; the inline percentage stays
+     as the fallback for browsers without it. Never in the console preview:
+     there the frame is the containing block the inline cap is measured
+     against, and a viewport unit would overrule it with the window's height. */
   @supports (height: 100dvh) {
-    ${N}[${DOCK_ATTRIBUTE}="${DOCKED}"] {
+    ${N}[${DOCK_ATTRIBUTE}="${DOCKED}"]:not([${PREVIEW_ATTRIBUTE}]) {
       max-height: 92dvh !important;
     }
   }
@@ -4074,7 +4085,7 @@ var modalPosition = ({
   if (isMobile) {
     return layout.mobileSheet ? {
       ...edgeDock(radius),
-      maxHeight: "92vh",
+      maxHeight: "92%",
       paddingBottom: "env(safe-area-inset-bottom, 0px)"
     } : {};
   }
@@ -4087,7 +4098,7 @@ var modalPosition = ({
     case "bottom-bar":
       return {
         ...edgeDock(radius),
-        maxHeight: "70vh",
+        maxHeight: "70%",
         paddingLeft: `max(0px, calc((100% - ${BOTTOM_BAR_CONTENT_WIDTH}) / 2))`,
         paddingRight: `max(0px, calc((100% - ${BOTTOM_BAR_CONTENT_WIDTH}) / 2))`
       };
@@ -4308,7 +4319,7 @@ var stylePatch = (p, {
     ...blur,
     border: `1px solid ${p.sheetEdge}`,
     boxShadow: docked ? p.shadow : p.floatShadow,
-    maxHeight: "85vh",
+    maxHeight: "85%",
     overflow: "hidden",
     animation: `${NOTICE_KEYFRAMES.float} ${MOTION.dimMs}ms ${MOTION.outEase} both`
   },
@@ -5293,6 +5304,8 @@ var PurposeItem = ({
   initialDataElementSelections = {},
   controlSkin,
   rowClassName,
+  showsDataElements = true,
+  showsPurposeDescription = true,
   animateDisclosure = false
 }) => {
   var _a, _b;
@@ -5318,7 +5331,8 @@ var PurposeItem = ({
     }),
     [settings == null ? void 0 : settings.textColor]
   );
-  const dataElementsOpen = !collapsedPurposes[stateKey] && Boolean(purpose.data_elements) && purpose.data_elements.length > 0;
+  const hasDataElements = showsDataElements && Boolean(purpose.data_elements) && purpose.data_elements.length > 0;
+  const dataElementsOpen = !collapsedPurposes[stateKey] && hasDataElements;
   const dataElements = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
@@ -5448,24 +5462,26 @@ var PurposeItem = ({
         "div",
         {
           style: styles4.optionLeft,
-          onClick: () => onPurposeCollapse(purpose.uuid, productUuid),
-          role: "button",
-          tabIndex: 0,
-          "aria-expanded": !collapsedPurposes[stateKey],
-          "aria-controls": `purpose-${purpose.uuid}`,
-          "aria-label": `${collapsedPurposes[stateKey] ? "Expand" : "Collapse"} ${getTranslatedText(
-            `purposes.name`,
-            purpose.name,
-            purpose.uuid
-          )} details`,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onPurposeCollapse(purpose.uuid, productUuid);
+          ...hasDataElements && {
+            onClick: () => onPurposeCollapse(purpose.uuid, productUuid),
+            role: "button",
+            tabIndex: 0,
+            "aria-expanded": !collapsedPurposes[stateKey],
+            "aria-controls": `purpose-${purpose.uuid}`,
+            "aria-label": `${collapsedPurposes[stateKey] ? "Expand" : "Collapse"} ${getTranslatedText(
+              `purposes.name`,
+              purpose.name,
+              purpose.uuid
+            )} details`,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onPurposeCollapse(purpose.uuid, productUuid);
+              }
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            hasDataElements && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               CollapseChevron,
               {
                 open: !collapsedPurposes[stateKey],
@@ -5490,7 +5506,7 @@ var PurposeItem = ({
                 },
                 `purpose-name-${purpose.uuid}-${selectedLanguage}`
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              showsPurposeDescription && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "h3",
                 {
                   id: `purpose-description-${stateKey}`,
@@ -5532,7 +5548,7 @@ var PurposeItem = ({
         }
       )
     ] }),
-    animateDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapse, { open: dataElementsOpen, children: dataElements }) : dataElementsOpen && dataElements
+    hasDataElements && (animateDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapse, { open: dataElementsOpen, children: dataElements }) : dataElementsOpen && dataElements)
   ] }, purpose.uuid);
 };
 var RELATIONSHIP_OPTIONS = [
@@ -6527,6 +6543,9 @@ var NoticeConsentView = ({
   }, [noticeId]);
   const servedAppearance = content ? content.appearance : cachedAppearance;
   const showsProductSection = (servedAppearance == null ? void 0 : servedAppearance.show_product_section) !== false;
+  const showsDataElements = (servedAppearance == null ? void 0 : servedAppearance.show_data_elements) !== false;
+  const showsPurposeDescription = (servedAppearance == null ? void 0 : servedAppearance.show_purpose_description) !== false;
+  const showsPurposeSectionHeading = (servedAppearance == null ? void 0 : servedAppearance.show_purpose_section_heading) !== false;
   const noticeAppearance = useNoticeAppearance(
     servedAppearance,
     settings,
@@ -8187,7 +8206,7 @@ var NoticeConsentView = ({
     if (ttsAudioUrls.privacy_policy_anchor_text_audio_url) {
       sequence.push(ttsAudioUrls.privacy_policy_anchor_text_audio_url);
     }
-    if (ttsAudioUrls.purpose_section_heading_audio_url) {
+    if (showsPurposeSectionHeading && ttsAudioUrls.purpose_section_heading_audio_url) {
       sequence.push(ttsAudioUrls.purpose_section_heading_audio_url);
     }
     const purposesToProcess = categorizedPurposes ? [
@@ -8203,12 +8222,12 @@ var NoticeConsentView = ({
       if ((_a2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _a2.name_audio_url) {
         sequence.push(ttsAudioUrls.purposes_audio[purpose.uuid].name_audio_url);
       }
-      if ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url) {
+      if (showsPurposeDescription && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
         sequence.push(
           ttsAudioUrls.purposes_audio[purpose.uuid].description_audio_url
         );
       }
-      if (purpose.data_elements && purpose.data_elements.length > 0) {
+      if (showsDataElements && purpose.data_elements && purpose.data_elements.length > 0) {
         purpose.data_elements.forEach((dataElement) => {
           var _a3;
           if ((_a3 = ttsAudioUrls.data_elements_audio[dataElement.uuid]) == null ? void 0 : _a3.name_audio_url) {
@@ -8259,7 +8278,7 @@ var NoticeConsentView = ({
     if (ttsAudioUrls.privacy_policy_anchor_text_audio_url) {
       elementIds.push("privacy-policy-link");
     }
-    if (ttsAudioUrls.purpose_section_heading_audio_url) {
+    if (showsPurposeSectionHeading && ttsAudioUrls.purpose_section_heading_audio_url) {
       elementIds.push("purpose-section-heading");
     }
     const purposesToProcess = categorizedPurposes ? [
@@ -8275,10 +8294,10 @@ var NoticeConsentView = ({
       if ((_a2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _a2.name_audio_url) {
         elementIds.push(`purpose-name-${purpose.uuid}`);
       }
-      if ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url) {
+      if (showsPurposeDescription && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
         elementIds.push(`purpose-description-${purpose.uuid}`);
       }
-      if (purpose.data_elements && purpose.data_elements.length > 0) {
+      if (showsDataElements && purpose.data_elements && purpose.data_elements.length > 0) {
         purpose.data_elements.forEach((dataElement) => {
           var _a3;
           if ((_a3 = ttsAudioUrls.data_elements_audio[dataElement.uuid]) == null ? void 0 : _a3.name_audio_url) {
@@ -8823,6 +8842,7 @@ var NoticeConsentView = ({
         ...appearanceRootProps,
         ...PART_PROPS.root,
         ...docked && { [DOCK_ATTRIBUTE]: DOCKED },
+        ...previewContent && { [PREVIEW_ATTRIBUTE]: PREVIEWED },
         style: isLoading && showsLoaderPill && skin ? (
           // The dialog itself shrinks to a pill until the notice
           // arrives, then grows into the sheet: one element, so the
@@ -9366,7 +9386,7 @@ var NoticeConsentView = ({
                           `privacy-text-${selectedLanguage}`
                         )
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      showsPurposeSectionHeading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "h2",
                         {
                           id: "purpose-section-heading",
@@ -9389,6 +9409,8 @@ var NoticeConsentView = ({
                               (purpose) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                 PurposeItem,
                                 {
+                                  showsDataElements,
+                                  showsPurposeDescription,
                                   roomyControls,
                                   purpose,
                                   selectedPurposes,
@@ -9415,6 +9437,8 @@ var NoticeConsentView = ({
                             categorizedPurposes.needsConsent.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                               PurposeItem,
                               {
+                                showsDataElements,
+                                showsPurposeDescription,
                                 roomyControls,
                                 purpose,
                                 selectedPurposes,
@@ -9490,6 +9514,8 @@ var NoticeConsentView = ({
                                         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                           PurposeItem,
                                           {
+                                            showsDataElements,
+                                            showsPurposeDescription,
                                             purpose,
                                             productUuid: group.product.uuid,
                                             selectedPurposes,
@@ -9526,6 +9552,8 @@ var NoticeConsentView = ({
                             renderedPurposes.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                               PurposeItem,
                               {
+                                showsDataElements,
+                                showsPurposeDescription,
                                 roomyControls,
                                 purpose,
                                 selectedPurposes,

package/dist/index.mjs

@@ -1311,6 +1311,8 @@ var PREVIEW_FRAME_STYLE = {
 var LAYOUT_STYLE_ID = "redacto-notice-layout-styles";
 var DOCK_ATTRIBUTE = "data-redacto-sheet";
 var DOCKED = "dock";
+var PREVIEW_ATTRIBUTE = "data-redacto-preview";
+var PREVIEWED = "frame";
 var MOTION_ATTRIBUTE = "data-redacto-motion";
 var MOTION_OFF = "off";
 var NOTICE_ID_ATTRIBUTE = "data-redacto-notice-id";
@@ -1388,7 +1390,7 @@ var styles = {
     border: "none",
     display: "flex",
     flexDirection: "column",
-    maxHeight: "90vh",
+    maxHeight: "90%",
     zIndex: 1e3,
     margin: 0,
     padding: 0,
@@ -1769,7 +1771,14 @@ var styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     cursor: "pointer",
-    margin: 0,
+    // Longhands, not the `margin` shorthand: `declineSpacer` spreads
+    // `marginRight` over this on the wide row only, and React clears a
+    // longhand that sits beside a shorthand when a render drops it, which
+    // leaves the value order-dependent.
+    marginTop: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    marginLeft: 0,
     boxSizing: "border-box",
     textAlign: "center",
     fontFamily: "inherit"
@@ -2956,10 +2965,12 @@ var FLOAT_FRAMES_STILL = `
 var floatKeyframes = (frames) => [NOTICE_KEYFRAMES.float, NOTICE_KEYFRAMES.floatPill].map((name) => `@keyframes ${name} {${frames}
   }`).join("\n");
 var css = `
-  /* dvh tracks the phone's collapsing toolbars; vh stays inline as the
-     fallback for browsers without it. */
+  /* dvh tracks the phone's collapsing toolbars; the inline percentage stays
+     as the fallback for browsers without it. Never in the console preview:
+     there the frame is the containing block the inline cap is measured
+     against, and a viewport unit would overrule it with the window's height. */
   @supports (height: 100dvh) {
-    ${N}[${DOCK_ATTRIBUTE}="${DOCKED}"] {
+    ${N}[${DOCK_ATTRIBUTE}="${DOCKED}"]:not([${PREVIEW_ATTRIBUTE}]) {
       max-height: 92dvh !important;
     }
   }
@@ -3201,7 +3212,7 @@ var modalPosition = ({
   if (isMobile) {
     return layout.mobileSheet ? {
       ...edgeDock(radius),
-      maxHeight: "92vh",
+      maxHeight: "92%",
       paddingBottom: "env(safe-area-inset-bottom, 0px)"
     } : {};
   }
@@ -3214,7 +3225,7 @@ var modalPosition = ({
     case "bottom-bar":
       return {
         ...edgeDock(radius),
-        maxHeight: "70vh",
+        maxHeight: "70%",
         paddingLeft: `max(0px, calc((100% - ${BOTTOM_BAR_CONTENT_WIDTH}) / 2))`,
         paddingRight: `max(0px, calc((100% - ${BOTTOM_BAR_CONTENT_WIDTH}) / 2))`
       };
@@ -3435,7 +3446,7 @@ var stylePatch = (p, {
     ...blur,
     border: `1px solid ${p.sheetEdge}`,
     boxShadow: docked ? p.shadow : p.floatShadow,
-    maxHeight: "85vh",
+    maxHeight: "85%",
     overflow: "hidden",
     animation: `${NOTICE_KEYFRAMES.float} ${MOTION.dimMs}ms ${MOTION.outEase} both`
   },
@@ -4304,6 +4315,8 @@ var PurposeItem = ({
   initialDataElementSelections = {},
   controlSkin,
   rowClassName,
+  showsDataElements = true,
+  showsPurposeDescription = true,
   animateDisclosure = false
 }) => {
   var _a, _b;
@@ -4329,7 +4342,8 @@ var PurposeItem = ({
     }),
     [settings == null ? void 0 : settings.textColor]
   );
-  const dataElementsOpen = !collapsedPurposes[stateKey] && Boolean(purpose.data_elements) && purpose.data_elements.length > 0;
+  const hasDataElements = showsDataElements && Boolean(purpose.data_elements) && purpose.data_elements.length > 0;
+  const dataElementsOpen = !collapsedPurposes[stateKey] && hasDataElements;
   const dataElements = /* @__PURE__ */ jsx6(
     "div",
     {
@@ -4459,24 +4473,26 @@ var PurposeItem = ({
         "div",
         {
           style: styles4.optionLeft,
-          onClick: () => onPurposeCollapse(purpose.uuid, productUuid),
-          role: "button",
-          tabIndex: 0,
-          "aria-expanded": !collapsedPurposes[stateKey],
-          "aria-controls": `purpose-${purpose.uuid}`,
-          "aria-label": `${collapsedPurposes[stateKey] ? "Expand" : "Collapse"} ${getTranslatedText(
-            `purposes.name`,
-            purpose.name,
-            purpose.uuid
-          )} details`,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onPurposeCollapse(purpose.uuid, productUuid);
+          ...hasDataElements && {
+            onClick: () => onPurposeCollapse(purpose.uuid, productUuid),
+            role: "button",
+            tabIndex: 0,
+            "aria-expanded": !collapsedPurposes[stateKey],
+            "aria-controls": `purpose-${purpose.uuid}`,
+            "aria-label": `${collapsedPurposes[stateKey] ? "Expand" : "Collapse"} ${getTranslatedText(
+              `purposes.name`,
+              purpose.name,
+              purpose.uuid
+            )} details`,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onPurposeCollapse(purpose.uuid, productUuid);
+              }
             }
           },
           children: [
-            /* @__PURE__ */ jsx6(
+            hasDataElements && /* @__PURE__ */ jsx6(
               CollapseChevron,
               {
                 open: !collapsedPurposes[stateKey],
@@ -4501,7 +4517,7 @@ var PurposeItem = ({
                 },
                 `purpose-name-${purpose.uuid}-${selectedLanguage}`
               ),
-              /* @__PURE__ */ jsx6(
+              showsPurposeDescription && /* @__PURE__ */ jsx6(
                 "h3",
                 {
                   id: `purpose-description-${stateKey}`,
@@ -4543,7 +4559,7 @@ var PurposeItem = ({
         }
       )
     ] }),
-    animateDisclosure ? /* @__PURE__ */ jsx6(Collapse, { open: dataElementsOpen, children: dataElements }) : dataElementsOpen && dataElements
+    hasDataElements && (animateDisclosure ? /* @__PURE__ */ jsx6(Collapse, { open: dataElementsOpen, children: dataElements }) : dataElementsOpen && dataElements)
   ] }, purpose.uuid);
 };
 var RELATIONSHIP_OPTIONS = [
@@ -5538,6 +5554,9 @@ var NoticeConsentView = ({
   }, [noticeId]);
   const servedAppearance = content ? content.appearance : cachedAppearance;
   const showsProductSection = (servedAppearance == null ? void 0 : servedAppearance.show_product_section) !== false;
+  const showsDataElements = (servedAppearance == null ? void 0 : servedAppearance.show_data_elements) !== false;
+  const showsPurposeDescription = (servedAppearance == null ? void 0 : servedAppearance.show_purpose_description) !== false;
+  const showsPurposeSectionHeading = (servedAppearance == null ? void 0 : servedAppearance.show_purpose_section_heading) !== false;
   const noticeAppearance = useNoticeAppearance(
     servedAppearance,
     settings,
@@ -7198,7 +7217,7 @@ var NoticeConsentView = ({
     if (ttsAudioUrls.privacy_policy_anchor_text_audio_url) {
       sequence.push(ttsAudioUrls.privacy_policy_anchor_text_audio_url);
     }
-    if (ttsAudioUrls.purpose_section_heading_audio_url) {
+    if (showsPurposeSectionHeading && ttsAudioUrls.purpose_section_heading_audio_url) {
       sequence.push(ttsAudioUrls.purpose_section_heading_audio_url);
     }
     const purposesToProcess = categorizedPurposes ? [
@@ -7214,12 +7233,12 @@ var NoticeConsentView = ({
       if ((_a2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _a2.name_audio_url) {
         sequence.push(ttsAudioUrls.purposes_audio[purpose.uuid].name_audio_url);
       }
-      if ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url) {
+      if (showsPurposeDescription && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
         sequence.push(
           ttsAudioUrls.purposes_audio[purpose.uuid].description_audio_url
         );
       }
-      if (purpose.data_elements && purpose.data_elements.length > 0) {
+      if (showsDataElements && purpose.data_elements && purpose.data_elements.length > 0) {
         purpose.data_elements.forEach((dataElement) => {
           var _a3;
           if ((_a3 = ttsAudioUrls.data_elements_audio[dataElement.uuid]) == null ? void 0 : _a3.name_audio_url) {
@@ -7270,7 +7289,7 @@ var NoticeConsentView = ({
     if (ttsAudioUrls.privacy_policy_anchor_text_audio_url) {
       elementIds.push("privacy-policy-link");
     }
-    if (ttsAudioUrls.purpose_section_heading_audio_url) {
+    if (showsPurposeSectionHeading && ttsAudioUrls.purpose_section_heading_audio_url) {
       elementIds.push("purpose-section-heading");
     }
     const purposesToProcess = categorizedPurposes ? [
@@ -7286,10 +7305,10 @@ var NoticeConsentView = ({
       if ((_a2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _a2.name_audio_url) {
         elementIds.push(`purpose-name-${purpose.uuid}`);
       }
-      if ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url) {
+      if (showsPurposeDescription && ((_b2 = ttsAudioUrls.purposes_audio[purpose.uuid]) == null ? void 0 : _b2.description_audio_url)) {
         elementIds.push(`purpose-description-${purpose.uuid}`);
       }
-      if (purpose.data_elements && purpose.data_elements.length > 0) {
+      if (showsDataElements && purpose.data_elements && purpose.data_elements.length > 0) {
         purpose.data_elements.forEach((dataElement) => {
           var _a3;
           if ((_a3 = ttsAudioUrls.data_elements_audio[dataElement.uuid]) == null ? void 0 : _a3.name_audio_url) {
@@ -7834,6 +7853,7 @@ var NoticeConsentView = ({
         ...appearanceRootProps,
         ...PART_PROPS.root,
         ...docked && { [DOCK_ATTRIBUTE]: DOCKED },
+        ...previewContent && { [PREVIEW_ATTRIBUTE]: PREVIEWED },
         style: isLoading && showsLoaderPill && skin ? (
           // The dialog itself shrinks to a pill until the notice
           // arrives, then grows into the sheet: one element, so the
@@ -8377,7 +8397,7 @@ var NoticeConsentView = ({
                           `privacy-text-${selectedLanguage}`
                         )
                       ),
-                      /* @__PURE__ */ jsx6(
+                      showsPurposeSectionHeading && /* @__PURE__ */ jsx6(
                         "h2",
                         {
                           id: "purpose-section-heading",
@@ -8400,6 +8420,8 @@ var NoticeConsentView = ({
                               (purpose) => /* @__PURE__ */ jsx6(
                                 PurposeItem,
                                 {
+                                  showsDataElements,
+                                  showsPurposeDescription,
                                   roomyControls,
                                   purpose,
                                   selectedPurposes,
@@ -8426,6 +8448,8 @@ var NoticeConsentView = ({
                             categorizedPurposes.needsConsent.map((purpose) => /* @__PURE__ */ jsx6(
                               PurposeItem,
                               {
+                                showsDataElements,
+                                showsPurposeDescription,
                                 roomyControls,
                                 purpose,
                                 selectedPurposes,
@@ -8501,6 +8525,8 @@ var NoticeConsentView = ({
                                         return /* @__PURE__ */ jsx6(
                                           PurposeItem,
                                           {
+                                            showsDataElements,
+                                            showsPurposeDescription,
                                             purpose,
                                             productUuid: group.product.uuid,
                                             selectedPurposes,
@@ -8537,6 +8563,8 @@ var NoticeConsentView = ({
                             renderedPurposes.map((purpose) => /* @__PURE__ */ jsx6(
                               PurposeItem,
                               {
+                                showsDataElements,
+                                showsPurposeDescription,
                                 roomyControls,
                                 purpose,
                                 selectedPurposes,

package/dist/privacy-center.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { P as PrivacyCenterTheme } from './types-B8qroG0j.mjs';
+import { P as PrivacyCenterTheme } from './types-9S_PyqzL.mjs';
 import * as _tanstack_react_query from '@tanstack/react-query';
 
 /**

package/dist/privacy-center.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { P as PrivacyCenterTheme } from './types-B8qroG0j.js';
+import { P as PrivacyCenterTheme } from './types-9S_PyqzL.js';
 import * as _tanstack_react_query from '@tanstack/react-query';
 
 /**

package/dist/{types-B8qroG0j.d.mts → types-9S_PyqzL.d.mts}

@@ -55,6 +55,10 @@ type NoticeAppearance = Readonly<{
     collapsible_sections?: boolean;
     /** Only read when the notice covers one product. */
     show_product_section?: boolean;
+    /** Absent draws the data elements, and the chevron that opens them. */
+    show_data_elements?: boolean;
+    show_purpose_description?: boolean;
+    show_purpose_section_heading?: boolean;
     phone_footer?: string;
     auto_dark?: boolean;
     dark_colors?: NoticeAppearanceColors;

package/dist/{types-B8qroG0j.d.ts → types-9S_PyqzL.d.ts}

@@ -55,6 +55,10 @@ type NoticeAppearance = Readonly<{
     collapsible_sections?: boolean;
     /** Only read when the notice covers one product. */
     show_product_section?: boolean;
+    /** Absent draws the data elements, and the chevron that opens them. */
+    show_data_elements?: boolean;
+    show_purpose_description?: boolean;
+    show_purpose_section_heading?: boolean;
     phone_footer?: string;
     auto_dark?: boolean;
     dark_colors?: NoticeAppearanceColors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "11.0.0",
+  "version": "11.1.0-beta.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",