@highfivve/ad-tag 5.8.30 → 5.8.32

package/lib/console/components/adSlotConfig.js

@@ -2,19 +2,13 @@ import React, { Fragment } from 'react';
 import { classList } from '../util/stringUtils';
 import { SizeConfigDebug } from './sizeConfigDebug';
 import { Tag } from './tag';
+import { SubHeadline, Tabs } from './ui';
 import { extractPrebidAdSlotConfigs } from '../util/prebid';
 import { SizeConfigService } from '../../ads/sizeConfigService';
-const defaultPanelState = {
-    showA9: false,
-    showPrebid: false,
-    showGeneral: false,
-    showSizeConfig: false
-};
 export class AdSlotConfig extends React.Component {
     constructor(props) {
         super(props);
         this.prebidConfig = (prebid) => {
-            const labels = this.props.labelConfigService.getSupportedLabels();
             const prebidAdUnits = extractPrebidAdSlotConfigs(prebid).map(config => config.adUnit);
             const hasMultipleBids = prebidAdUnits.length > 1;
             const elements = prebidAdUnits.map((prebidAdUnit, index) => {
@@ -24,33 +18,33 @@ export class AdSlotConfig extends React.Component {
                 const native = prebidAdUnit.mediaTypes.native;
                 return (React.createElement("div", { key: index },
                     index > 0 && React.createElement("hr", null),
-                    hasMultipleBids && React.createElement("h5", null,
+                    hasMultipleBids && React.createElement("h5", { className: "mb-1 mt-3 text-sm font-bold" },
                         index + 1,
                         ". config"),
-                    React.createElement("div", { className: "MoliDebug-tagContainer" },
-                        React.createElement("span", { className: "MoliDebug-tagLabel" }, "Code"),
+                    React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                        React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "Code"),
                         React.createElement(Tag, { variant: "green" }, prebidAdUnit.code || this.props.slot.domId)),
-                    banner && (React.createElement("div", { className: "MoliDebug-tagContainer" },
-                        React.createElement("span", { className: "MoliDebug-tagLabel" }, "Banner sizes"),
+                    banner && (React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                        React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "Banner sizes"),
                         this.validateSlotSizes(banner.sizes).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slotSizeConfig)))),
-                    video && (React.createElement("div", { className: "MoliDebug-tagContainer" },
-                        React.createElement("span", { className: "MoliDebug-tagLabel" }, "Video"),
+                    video && (React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                        React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "Video"),
                         React.createElement(Tag, { variant: "green" }, video.context),
                         !!video.playerSize &&
                             this.validateSlotSizes(this.isSingleVideoSize(video.playerSize) ? [video.playerSize] : video.playerSize).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slotSizeConfig)))),
-                    native && (React.createElement("div", { className: "MoliDebug-tagContainer" },
-                        React.createElement("span", { className: "MoliDebug-tagLabel" }, "Native"),
+                    native && (React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                        React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "Native"),
                         React.createElement(Tag, { variant: "green" }, "true"))),
                     prebidAdUnit.bids.map((bid, idx) => (React.createElement(Fragment, { key: idx },
                         React.createElement("hr", null),
-                        React.createElement("div", { className: "MoliDebug-tagContainer" },
-                            React.createElement("span", { className: "MoliDebug-tagLabel" },
+                        React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                            React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" },
                                 "Bidder #",
                                 idx + 1),
                             React.createElement(Tag, { variant: "blue" }, bid.bidder ?? bid.module)),
-                        React.createElement("div", { className: "MoliDebug-tagContainer" }, this.labelConfig(bid)),
-                        React.createElement("div", { className: "MoliDebug-tagContainer" },
-                            React.createElement("span", { className: "MoliDebug-tagLabel" }, "Params"),
+                        React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" }, this.labelConfig(bid)),
+                        React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                            React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "Params"),
                             React.createElement(Tag, null, JSON.stringify(bid.params))))))));
             });
             if (elements.length === 1) {
@@ -58,7 +52,7 @@ export class AdSlotConfig extends React.Component {
             }
             else {
                 return (React.createElement("div", null,
-                    React.createElement("h5", null,
+                    React.createElement("h5", { className: "mb-1 mt-3 text-sm font-bold" },
                         elements.length,
                         " bid configurations"),
                     elements));
@@ -67,19 +61,39 @@ export class AdSlotConfig extends React.Component {
         this.a9Config = (a9) => {
             const slotSizeConfig = this.props.slot.sizeConfig;
             return (React.createElement("div", null,
-                React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "Sizes"),
+                React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                    React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "Sizes"),
                     this.validateSlotSizes(this.props.slot.sizes.filter(AdSlotConfig.isFixedSize)).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slotSizeConfig))),
-                React.createElement("div", { className: "MoliDebug-tagContainer" }, this.labelConfig(a9))));
+                React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" }, this.labelConfig(a9))));
+        };
+        this.countMatchedSizeConfigs = () => {
+            const supportedLabels = this.props.labelConfigService.getSupportedLabels();
+            return (this.props.slot.sizeConfig ?? []).filter(entry => window.matchMedia(entry.mediaQuery).matches &&
+                (!entry.labelAll || entry.labelAll.every(label => supportedLabels.includes(label))) &&
+                (!entry.labelNone || !entry.labelNone.some(label => supportedLabels.includes(label)))).length;
+        };
+        this.countRequestedBidders = (slotVisible) => {
+            const supportedLabels = this.props.labelConfigService.getSupportedLabels();
+            const matchesLabels = (bid) => {
+                if (bid.labelAll) {
+                    return bid.labelAll.every(label => supportedLabels.includes(label));
+                }
+                if (bid.labelAny) {
+                    return bid.labelAny.some(label => supportedLabels.includes(label));
+                }
+                return true;
+            };
+            const prebidBidders = this.props.slot.prebid
+                ? extractPrebidAdSlotConfigs(this.props.slot.prebid)
+                    .flatMap(config => config.adUnit.bids)
+                    .filter(matchesLabels).length
+                : 0;
+            const a9Bidder = this.props.slot.a9 && slotVisible && this.isVisibleA9() ? 1 : 0;
+            return prebidBidders + a9Bidder;
         };
-        this.toggleGeneral = () => this.setState({ showGeneral: !this.state.showGeneral });
-        this.toggleA9 = () => this.setState({ showA9: !this.state.showA9 });
-        this.togglePrebid = () => this.setState({ showPrebid: !this.state.showPrebid });
-        this.toggleSizeConfig = () => this.setState({ showSizeConfig: !this.state.showSizeConfig });
         this.isVisiblePrebid = () => {
             const prebid = this.props.slot.prebid;
             if (prebid) {
-                const labels = this.props.labelConfigService.getSupportedLabels();
                 return extractPrebidAdSlotConfigs(prebid)
                     .map(config => config.adUnit)
                     .some(prebidAdUnit => {
@@ -138,48 +152,28 @@ export class AdSlotConfig extends React.Component {
             const labelAnyMatches = !!labelAny && labelAny.some(label => supportedLabels.indexOf(label) > -1);
             return (React.createElement("div", null,
                 labelAll && labelAll.length > 0 && (React.createElement("div", null,
-                    React.createElement("span", { className: classList('MoliDebug-tagLabel', [labelAllMatches, 'MoliDebug-tag--greenText'], [!labelAllMatches, 'MoliDebug-tag--redText']) }, "labelAll"),
+                    React.createElement("span", { className: classList('inline-block min-w-36 max-w-96 pr-1 font-medium', [labelAllMatches, 'text-success'], [!labelAllMatches, 'text-error']) }, "labelAll"),
                     labelAll.map(label => (React.createElement(Tag, { key: label, variant: supportedLabels.indexOf(label) > -1 ? 'green' : 'red' }, label))))),
                 labelAny && labelAny.length > 0 && (React.createElement("div", null,
-                    React.createElement("span", { className: classList('MoliDebug-tagLabel', [labelAnyMatches, 'MoliDebug-tag--greenText'], [!labelAnyMatches, 'MoliDebug-tag--redText']) }, "labelAny"),
+                    React.createElement("span", { className: classList('inline-block min-w-36 max-w-96 pr-1 font-medium', [labelAnyMatches, 'text-success'], [!labelAnyMatches, 'text-error']) }, "labelAny"),
                     labelAll && labelAll.length > 0 && (React.createElement(Tag, { variant: 'yellow' }, "labelAll was already evaluated, labelAny is ignored")),
                     labelAny.map(label => {
                         const labelFound = supportedLabels.indexOf(label) > -1;
                         return (React.createElement(Tag, { key: label, variant: labelFound ? 'green' : 'red' }, label));
                     })))));
         };
-        if (props.parentElement) {
-            props.parentElement.classList.add('MoliDebug-posRelative');
-            const { width, height } = props.parentElement.getBoundingClientRect();
-            this.state = {
-                dimensions: { width, height },
-                ...defaultPanelState
-            };
-        }
-        else {
-            this.state = defaultPanelState;
-        }
+        this.state = {
+            expanded: !!props.initiallyExpanded,
+            activeTab: 'overview'
+        };
     }
     render() {
-        const { labelConfigService, slot, parentElement } = this.props;
-        const { dimensions, showGeneral, showA9, showPrebid, showSizeConfig } = this.state;
+        const { labelConfigService, slot } = this.props;
+        const { expanded, activeTab } = this.state;
         const slotValid = slot.behaviour.loaded === 'infinite' ? true : labelConfigService.filterSlot(slot);
         const slotElementExists = !!document.getElementById(slot.domId);
         const slotVisible = slotValid && slotElementExists;
         const isConfiguredInfiniteSlot = slot.behaviour.loaded === 'infinite' && !slotVisible;
-        const prebidValid = this.isVisiblePrebid();
-        const a9Valid = slotVisible && this.isVisibleA9();
-        function setSlotVisibilityIcon(slotVisible, loadingBehaviour) {
-            if (slotVisible) {
-                return '✔';
-            }
-            else if (isConfiguredInfiniteSlot) {
-                return '?';
-            }
-            else {
-                return 'x';
-            }
-        }
         const getBucketName = (bucket) => {
             if (!bucket) {
                 return 'default';
@@ -189,35 +183,69 @@ export class AdSlotConfig extends React.Component {
             }
             return bucket[labelConfigService.getDeviceLabel()] ?? 'default';
         };
-        return (React.createElement("div", { className: classList('MoliDebug-adSlot', [!!parentElement, 'MoliDebug-adSlot--overlay'], [!parentElement && slotVisible, 'is-rendered'], [!parentElement && !slotVisible, 'is-notRendered'], [isConfiguredInfiniteSlot, 'is-configuredInfinite']), style: dimensions },
-            React.createElement("div", { className: "MoliDebug-adSlot-buttons" },
-                !parentElement && (React.createElement("button", { title: slot.behaviour.loaded === 'infinite'
-                        ? `Configuration only used to copy on slots with infinite selector`
-                        : `Slot ${slotVisible ? '' : 'not '}rendered`, className: classList('MoliDebug-adSlot-button', [slotVisible, 'is-rendered'], [!slotVisible, 'is-notRendered'], [isConfiguredInfiniteSlot, 'is-configuredInfinite']), onClick: this.toggleGeneral }, setSlotVisibilityIcon(slotVisible, slot.behaviour.loaded))),
-                React.createElement("button", { title: "Show general slot info", className: classList('MoliDebug-adSlot-button', [showGeneral, 'is-active']), onClick: this.toggleGeneral }, "\u24D8"),
-                slot.a9 && (React.createElement("button", { title: "Show A9 config", className: classList('MoliDebug-adSlot-button', [showA9, 'is-active'], [a9Valid, 'is-rendered'], [!a9Valid, 'is-notRendered']), onClick: this.toggleA9 }, "A9")),
-                slot.prebid && (React.createElement("button", { title: "Show Prebid config", className: classList('MoliDebug-adSlot-button', [showPrebid, 'is-active'], [prebidValid, 'is-rendered'], [!prebidValid, 'is-notRendered']), onClick: this.togglePrebid }, "pb")),
-                slot.sizeConfig && (React.createElement("button", { title: "Show sizeConfig", className: classList('MoliDebug-adSlot-button MoliDebug-adSlot-button--sizeConfig', [slotValid, 'is-rendered'], [!slotValid, 'is-notRendered'], [showSizeConfig, 'is-active']), onClick: this.toggleSizeConfig })),
-                isConfiguredInfiniteSlot && (React.createElement("p", null, "Looking up infinite slots is currently not implemented"))),
-            showGeneral && (React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--blue MoliDebug-panel--collapsible" },
-                React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement(Tag, { variant: "green" }, slot.position),
-                    React.createElement(Tag, { variant: "yellow" }, slot.behaviour.loaded),
-                    slot.behaviour.bucket && (React.createElement(Tag, { variant: "blue" }, getBucketName(slot.behaviour.bucket)))),
-                React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement("span", { className: classList('MoliDebug-tagLabel', [slotElementExists, 'MoliDebug-tag--greenText'], [!slotElementExists, 'MoliDebug-tag--redText']) }, "DOM ID"),
-                    React.createElement(Tag, { variant: slotElementExists ? 'green' : 'red', title: `Slot ${slotElementExists ? '' : 'not '}found in DOM` }, slot.domId)),
-                React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "AdUnit path"),
-                    React.createElement(Tag, null, slot.adUnitPath)),
-                slot.sizes.length > 0 && (React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "Sizes"),
-                    this.validateSlotSizes(slot.sizes).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slot.sizeConfig)))),
-                React.createElement("div", { className: "MoliDebug-tagContainer" }, this.labelConfig(slot)))),
-            showA9 && slot.a9 && (React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--blue MoliDebug-panel--collapsible" }, this.a9Config(slot.a9))),
-            showPrebid && slot.prebid && (React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--blue MoliDebug-panel--collapsible" }, this.prebidConfig(slot.prebid))),
-            showSizeConfig && slot.sizeConfig && (React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--blue MoliDebug-panel--collapsible" },
-                React.createElement(SizeConfigDebug, { sizeConfig: slot.sizeConfig, supportedLabels: labelConfigService.getSupportedLabels() })))));
+        const tabItems = [
+            { id: 'overview', label: 'Overview' },
+            ...(slot.sizeConfig
+                ? [
+                    {
+                        id: 'sizeConfig',
+                        label: (React.createElement(React.Fragment, null,
+                            "Size Configs ",
+                            React.createElement(Tag, { variant: "grey" }, this.countMatchedSizeConfigs())))
+                    }
+                ]
+                : []),
+            ...(slot.prebid || slot.a9
+                ? [
+                    {
+                        id: 'bidders',
+                        label: (React.createElement(React.Fragment, null,
+                            "Bidder Params ",
+                            React.createElement(Tag, { variant: "grey" }, this.countRequestedBidders(slotVisible))))
+                    }
+                ]
+                : [])
+        ];
+        return (React.createElement("div", { className: classList('d-collapse d-collapse-arrow mb-2 rounded-md border-y-0 border-l-4 border-r-0 border-solid bg-base-200', [slotVisible, 'border-l-primary'], [!slotVisible, 'border-l-base-300']), title: slotVisible
+                ? 'Slot requested'
+                : isConfiguredInfiniteSlot
+                    ? 'Configuration only used to copy on slots with infinite selector'
+                    : 'Slot not requested' },
+            React.createElement("input", { type: "checkbox", checked: expanded, onChange: () => this.setState({ expanded: !expanded }), "aria-label": `toggle slot ${slot.domId}` }),
+            React.createElement("div", { className: "d-collapse-title flex min-h-0 flex-wrap items-center gap-1 py-2 text-sm font-semibold" },
+                React.createElement("span", { className: "break-all" }, slot.domId)),
+            React.createElement("div", { className: "d-collapse-content text-sm" },
+                React.createElement(Tabs, { tabs: tabItems, active: activeTab, onSelect: tab => this.setState({ activeTab: tab }), className: "mb-2" }),
+                activeTab === 'overview' && (React.createElement("div", null,
+                    React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                        React.createElement(Tag, { variant: "green" }, slot.position),
+                        React.createElement(Tag, { variant: "yellow" }, slot.behaviour.loaded),
+                        slot.behaviour.bucket && (React.createElement(Tag, { variant: "blue" }, getBucketName(slot.behaviour.bucket)))),
+                    isConfiguredInfiniteSlot && (React.createElement("p", { className: "mt-2" }, "Looking up infinite slots is currently not implemented")),
+                    React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                        React.createElement("span", { className: classList('inline-block min-w-36 max-w-96 pr-1 font-medium', [slotElementExists, 'text-success'], [!slotElementExists, 'text-error']) }, "DOM ID"),
+                        React.createElement(Tag, { variant: slotElementExists ? 'green' : 'red', title: `Slot ${slotElementExists ? '' : 'not '}found in DOM` }, slot.domId)),
+                    React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                        React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "AdUnit path"),
+                        React.createElement("pre", { className: "m-0 whitespace-pre-wrap break-all rounded bg-base-300 px-1.5 py-0.5 text-xs" }, slot.adUnitPath)),
+                    slot.sizes.length > 0 && (React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                        React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "Sizes"),
+                        this.validateSlotSizes(slot.sizes).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slot.sizeConfig)))),
+                    React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" }, this.labelConfig(slot)))),
+                activeTab === 'sizeConfig' && slot.sizeConfig && (React.createElement(SizeConfigDebug, { sizeConfig: slot.sizeConfig, supportedLabels: labelConfigService.getSupportedLabels() })),
+                activeTab === 'bidders' && (React.createElement("div", null,
+                    slot.prebid && (React.createElement(React.Fragment, null,
+                        React.createElement(SubHeadline, null,
+                            "Prebid",
+                            ' ',
+                            React.createElement(Tag, { variant: this.isVisiblePrebid() ? 'green' : 'red' }, this.isVisiblePrebid() ? 'valid' : 'invalid')),
+                        this.prebidConfig(slot.prebid))),
+                    slot.a9 && (React.createElement(React.Fragment, null,
+                        React.createElement(SubHeadline, null,
+                            "A9",
+                            ' ',
+                            React.createElement(Tag, { variant: slotVisible && this.isVisibleA9() ? 'green' : 'red' }, slotVisible && this.isVisibleA9() ? 'valid' : 'invalid')),
+                        this.a9Config(slot.a9))))))));
     }
     static isFixedSize(size) {
         return size !== 'fluid';

package/lib/console/components/consentConfig.js

@@ -65,7 +65,7 @@ export const ConsentConfig = () => {
             const cmpVendor = cmpVendors[consentState.tcModel.cmpId.toString()];
             if (cmpVendor) {
                 return (React.createElement(Tag, { variant: "grey" },
-                    React.createElement("a", { href: cmpVendor.website },
+                    React.createElement("a", { className: "d-link", href: cmpVendor.website },
                         cmpVendor.name,
                         " (id: ",
                         consentState.tcModel.cmpId.toString(),
@@ -82,42 +82,44 @@ export const ConsentConfig = () => {
     const consent = () => {
         const { gdprApplies, tcModel } = consentState;
         return (React.createElement("div", null,
-            React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" },
+            React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" },
                     React.createElement("a", { href: "https://iabeurope.eu/cmp-list/" }, "GDPR")),
                 !!gdprApplies),
-            React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" },
+            React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" },
                     React.createElement("a", { href: "https://iabeurope.eu/cmp-list/" }, "CMP ID")),
                 cmpVendorTag()),
-            React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" }, "Last updated"),
+            React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "Last updated"),
                 tcModel ? (React.createElement(Tag, null, tcModel.lastUpdated.toLocaleString())) : (React.createElement(Tag, { variant: "red" }, "Unknown"))),
-            React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" }, "TCF Policy Version"),
+            React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "TCF Policy Version"),
                 tcModel ? (React.createElement(Tag, null, tcModel.policyVersion.toString())) : (React.createElement(Tag, { variant: "red" }, "Unknown")))));
     };
     const isCmpFunctionAvailable = () => window.__tcfapi || typeof window.__tcfapi === 'function';
     const consentData = () => {
         if (isCmpFunctionAvailable()) {
             return (React.createElement("div", null,
-                React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "vendor list version"),
+                React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                    React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "vendor list version"),
                     React.createElement(Tag, null, consentState.tcModel
                         ? consentState.tcModel.vendorListVersion.toString()
                         : 'not found')),
-                React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "num vendors allowed"),
+                React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
+                    React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 font-medium" }, "num vendors allowed"),
                     React.createElement(Tag, null, consentState.tcModel
                         ? consentState.tcModel.vendorConsents.size.toString()
                         : 'not found')),
-                React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement("span", { className: "MoliDebug-tagLabelBtn", "data-toggle": "collapse", "data-target": "#collapsePurposes", "aria-expanded": "false", "aria-controls": "collapsePurposes" }, "allowed purposes"),
-                    React.createElement(Tag, null, consentState.tcModel
-                        ? consentState.tcModel.purposeConsents.size.toString()
-                        : 'not found'),
-                    React.createElement("div", { className: "collapse", id: "collapsePurposes" },
-                        React.createElement("a", { href: "https://iabeurope.eu/iab-europe-transparency-consent-framework-policies/#Appendix_A_Purposes_and_Features_Definitions" }, "Purpose and Feature definitions"),
+                React.createElement("div", { className: "d-collapse d-collapse-arrow mt-2 rounded-md bg-base-200" },
+                    React.createElement("input", { type: "checkbox", "aria-label": "toggle allowed purposes" }),
+                    React.createElement("div", { className: "d-collapse-title min-h-0 py-2 text-sm font-medium" },
+                        "allowed purposes",
+                        React.createElement(Tag, null, consentState.tcModel
+                            ? consentState.tcModel.purposeConsents.size.toString()
+                            : 'not found')),
+                    React.createElement("div", { className: "d-collapse-content text-sm" },
+                        React.createElement("a", { className: "d-link", href: "https://iabeurope.eu/iab-europe-transparency-consent-framework-policies/#Appendix_A_Purposes_and_Features_Definitions" }, "Purpose and Feature definitions"),
                         React.createElement("br", null),
                         consentState.tcModel &&
                             Array.from(consentState.tcModel.purposeConsents).map(([id, accepted]) => {
@@ -126,9 +128,10 @@ export const ConsentConfig = () => {
                                     ": ",
                                     accepted ? 'accepted' : 'denied'));
                             }))),
-                React.createElement("div", { className: "MoliDebug-tagContainer" },
-                    React.createElement("span", { className: "MoliDebug-tagLabelBtn", "data-toggle": "collapse", "data-target": "#collapseConsentString", "aria-expanded": "false", "aria-controls": "collapseConsentString" }, "consent string"),
-                    React.createElement("div", { className: "collapse", id: "collapseConsentString" },
+                React.createElement("div", { className: "d-collapse d-collapse-arrow mt-2 rounded-md bg-base-200" },
+                    React.createElement("input", { type: "checkbox", "aria-label": "toggle consent string" }),
+                    React.createElement("div", { className: "d-collapse-title min-h-0 py-2 text-sm font-medium" }, "consent string"),
+                    React.createElement("div", { className: "d-collapse-content text-sm" },
                         React.createElement(Tag, null, consentState.tcString ? consentState.tcString : 'not found')))));
         }
     };