@vectoriox/iox-builder 4.31.0 → 4.31.2

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1631,7 +1631,11 @@ class OverlayService {
             if (host.classList[i].startsWith('iox-node-'))
                 return host;
         }
-        return host.firstElementChild || host;
+        // The node's own styled element always precedes its children in document order; for the
+        // Dialog it sits BELOW a classless fixed stage, where firstElementChild pointed the
+        // outline at the stage (live find 2026-10-10 — "can't select the white box").
+        const styled = host.querySelector('[class*="iox-node-"]');
+        return styled || host.firstElementChild || host;
     }
     // ── Node → Element registry ──────────────────────────────
     registerNode(node, element, componentRef) {
@@ -8490,6 +8494,22 @@ class BuilderDialogComponent {
         this.selectSub?.unsubscribe();
         this.instanceRegistry.unregister(this.nodeId);
     }
+    /** A click on the stage ITSELF is the backdrop click — children swallow everything else.
+     *  Closing clicks STOP here: the same click would bubble into canvas selection, and
+     *  select$ would reopen the dialog in the same breath (live find 2026-10-10 — "the X
+     *  doesn't work"). */
+    onStageClick(event) {
+        if (event.target !== event.currentTarget)
+            return;
+        if (this.closeOnBackdrop !== false && this.closeOnBackdrop !== 'false') {
+            event.stopPropagation();
+            this.designOpen = false;
+        }
+    }
+    onCloseClick(event) {
+        event.stopPropagation();
+        this.designOpen = false;
+    }
     onBackdrop() {
         if (this.closeOnBackdrop !== false && this.closeOnBackdrop !== 'false')
             this.designOpen = false;
@@ -8499,8 +8519,8 @@ class BuilderDialogComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderDialogComponent, isStandalone: false, selector: "app-builder-dialog", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", placement: "placement" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
-        <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue">
-            <div class="dialog-backdrop" (click)="onBackdrop()"></div>
+        <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
+             (click)="onStageClick($event)">
             <div [ngStyle]="style"
                  [ngClass]="'iox-node-' + nodeId"
                  class="dialog-surface"
@@ -8512,7 +8532,8 @@ class BuilderDialogComponent {
                         type="button"
                         class="dialog-close"
                         aria-label="Close dialog"
-                        (click)="designOpen = false">
+                        (mousedown)="$event.stopPropagation()"
+                        (click)="onCloseClick($event)">
                     <i class="ph-thin ph-x"></i>
                 </button>
 
@@ -8530,13 +8551,13 @@ class BuilderDialogComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50}.dialog-backdrop{position:absolute;inset:0;background:#0f172a73}.dialog-surface{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;max-width:calc(100% - 48px);max-height:calc(100% - 48px);overflow:auto}:host-context([dir=\"rtl\"]) .dialog-surface{transform:translate(50%,-50%)}.dialog-stage[data-placement=top] .dialog-surface{top:24px;transform:translate(-50%)}:host-context([dir=\"rtl\"]) .dialog-stage[data-placement=top] .dialog-surface{transform:translate(50%)}.dialog-stage[data-placement=bottom] .dialog-surface{top:auto;bottom:24px;transform:translate(-50%)}:host-context([dir=\"rtl\"]) .dialog-stage[data-placement=bottom] .dialog-surface{transform:translate(50%)}.dialog-stage[data-placement=start] .dialog-surface{inset-inline-start:24px;transform:translateY(-50%)}.dialog-stage[data-placement=end] .dialog-surface{inset-inline-start:auto;inset-inline-end:24px;transform:translateY(-50%)}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}.dialog-surface{box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-builder-dialog', template: `
-        <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue">
-            <div class="dialog-backdrop" (click)="onBackdrop()"></div>
+        <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
+             (click)="onStageClick($event)">
             <div [ngStyle]="style"
                  [ngClass]="'iox-node-' + nodeId"
                  class="dialog-surface"
@@ -8548,7 +8569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         type="button"
                         class="dialog-close"
                         aria-label="Close dialog"
-                        (click)="designOpen = false">
+                        (mousedown)="$event.stopPropagation()"
+                        (click)="onCloseClick($event)">
                     <i class="ph-thin ph-x"></i>
                 </button>
 
@@ -8566,7 +8588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50}.dialog-backdrop{position:absolute;inset:0;background:#0f172a73}.dialog-surface{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;max-width:calc(100% - 48px);max-height:calc(100% - 48px);overflow:auto}:host-context([dir=\"rtl\"]) .dialog-surface{transform:translate(50%,-50%)}.dialog-stage[data-placement=top] .dialog-surface{top:24px;transform:translate(-50%)}:host-context([dir=\"rtl\"]) .dialog-stage[data-placement=top] .dialog-surface{transform:translate(50%)}.dialog-stage[data-placement=bottom] .dialog-surface{top:auto;bottom:24px;transform:translate(-50%)}:host-context([dir=\"rtl\"]) .dialog-stage[data-placement=bottom] .dialog-surface{transform:translate(50%)}.dialog-stage[data-placement=start] .dialog-surface{inset-inline-start:24px;transform:translateY(-50%)}.dialog-stage[data-placement=end] .dialog-surface{inset-inline-start:auto;inset-inline-end:24px;transform:translateY(-50%)}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
+    `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}.dialog-surface{box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -9988,6 +10010,13 @@ function setTrait(node, name, value) {
         trait.default = value;
 }
 
+function text$1(content, styles, createConfig) {
+    const node = textNode(content, createConfig);
+    if (node)
+        for (const [prop, value] of Object.entries(styles))
+            setStyleTrait(node, prop, value);
+    return node;
+}
 /**
  * THE CONSENT PRESET (consent plan C3) — the banner as builder elements, which is the whole bet:
  * Wix ships a banner you cannot design, Webflow ships a design system and no banner; ours is a
@@ -10014,16 +10043,50 @@ const click = (actions) => ({
         target: 'self', duration: 0, delay: 0, easing: 'ease', ...a,
     })),
 });
-function button(label, createConfig, interaction) {
+const TOKEN$1 = (name, fallback) => `var(--iox-${name}, ${fallback})`;
+function button(label, createConfig, interaction, styles = {}) {
     const btn = createConfig('ButtonBlock');
     const text = textNode(label, createConfig);
     if (!btn || !text)
         return null;
     setTrait(btn, 'tag', 'button');
+    setStyleTrait(text, 'fontSize', 'inherit');
+    setStyleTrait(text, 'fontWeight', 'inherit');
+    setStyleTrait(text, 'color', 'inherit');
+    for (const [prop, value] of Object.entries(styles))
+        setStyleTrait(btn, prop, value);
     btn.children = [text];
     btn.interactions = [interaction];
     return btn;
 }
+/** The C1/C2 board button voices — Swiss by fallback, the brand's the moment tokens seed. */
+const SOLID = {
+    backgroundColor: TOKEN$1('brand-500', '#1f1d1b'), color: TOKEN$1('brandInk', '#ffffff'),
+    fontSize: '12px', fontWeight: '600', padding: '9px 16px',
+    borderRadius: TOKEN$1('radius-control', '4px'),
+};
+const OUTLINED = {
+    backgroundColor: 'transparent', color: TOKEN$1('ink', '#1f1d1b'),
+    borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('ink', '#1f1d1b'),
+    fontSize: '12px', fontWeight: '600', padding: '8px 16px',
+    borderRadius: TOKEN$1('radius-control', '4px'),
+};
+const QUIET = {
+    backgroundColor: 'transparent', color: TOKEN$1('inkMuted', '#4a453f'),
+    fontSize: '11px', fontWeight: '400', padding: '2px 4px', textDecoration: 'underline',
+};
+const SMALL_ALLOW = {
+    backgroundColor: 'transparent', color: TOKEN$1('ink', '#1f1d1b'),
+    borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('ink', '#1f1d1b'),
+    fontSize: '11px', fontWeight: '600', padding: '5px 10px',
+    borderRadius: TOKEN$1('radius-control', '4px'),
+};
+const SMALL_REFUSE = {
+    backgroundColor: 'transparent', color: TOKEN$1('inkMuted', '#6b6560'),
+    borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#d8d4d1'),
+    fontSize: '11px', fontWeight: '600', padding: '5px 10px',
+    borderRadius: TOKEN$1('radius-control', '4px'),
+};
 function row(createConfig, styles, children) {
     const container = createConfig('Container');
     if (!container || children.some(c => !c))
@@ -10045,57 +10108,97 @@ function buildConsentPreset(createConfig) {
     setTrait(banner, 'closeOnBackdrop', false); // clicking away is NOT consent
     setTrait(banner, 'showCloseButton', true); // the runtime records X as a "no"
     setTrait(banner, 'placement', 'bottom'); // A5: placement is the Dialog's own choice
-    setStyleTrait(banner, 'width', 'min(560px, calc(100vw - 32px))');
-    const heading = textNode('Privacy choices', createConfig);
-    if (heading)
-        setStyleTrait(heading, 'fontWeight', '600');
-    const body = textNode('We use cookies to understand how this site is used. You choose what we may use, and you can change your mind at any time.', createConfig);
-    const categoriesLine = textNode('Necessary — always on · Analytics · Marketing', createConfig);
+    // Board C1, Swiss column: a full-width bottom bar, hairline-ruled, surface-on-surface.
+    setStyleTrait(banner, 'width', '100%');
+    setStyleTrait(banner, 'borderRadius', '0px');
+    setStyleTrait(banner, 'padding', '14px 20px');
+    setStyleTrait(banner, 'backgroundColor', TOKEN$1('surface', '#ffffff'));
+    setStyleTrait(banner, 'borderWidth', '1px');
+    setStyleTrait(banner, 'borderStyle', 'solid');
+    setStyleTrait(banner, 'borderColor', TOKEN$1('ink', '#1f1d1b'));
+    setStyleTrait(banner, 'boxShadow', 'none');
+    const heading = text$1('Cookies on this site', { fontSize: '13px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
+    // The first layer NAMES the three categories (plan §7) — the board does it in the copy.
+    const body = text$1('We use analytics and marketing cookies only if you allow them. Necessary ones always run.', { fontSize: '11px', color: TOKEN$1('inkMuted', '#4a453f'), lineHeight: '1.5', maxWidth: '330px' }, createConfig);
+    const textCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '4px', flexGrow: '1' }, [heading, body]);
     const accept = button('Accept all', createConfig, click([
         { type: 'grantConsent' },
         { type: 'closeDialog', target: banner.id },
-    ]));
+    ]), SOLID);
     const reject = button('Reject all', createConfig, click([
         { type: 'denyConsent' },
         { type: 'closeDialog', target: banner.id },
-    ]));
+    ]), OUTLINED);
     const prefs = button('Preferences', createConfig, click([
         { type: 'openConsentPreferences', target: preferences.id },
-    ]));
-    const buttonsRow = row(createConfig, { display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }, [accept, reject, prefs]);
-    if (!heading || !body || !categoriesLine || !buttonsRow)
+    ]), QUIET);
+    const acceptRejectRow = row(createConfig, { display: 'flex', gap: '7px' }, [accept, reject]);
+    const buttonsCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '7px', alignItems: 'center' }, [acceptRejectRow, prefs]);
+    const bannerRow = row(createConfig, { display: 'flex', gap: '18px', alignItems: 'flex-start', flexWrap: 'wrap' }, [textCol, buttonsCol]);
+    if (!bannerRow)
         return null;
-    banner.children = [heading, body, categoriesLine, buttonsRow];
+    banner.children = [bannerRow];
     // ── the preferences modal ────────────────────────────────────────────────
     preferences.label = 'Consent preferences';
     setTrait(preferences, 'closeOnBackdrop', true);
     setTrait(preferences, 'showCloseButton', true);
-    const prefsHeading = textNode('Your privacy choices', createConfig);
-    if (prefsHeading)
-        setStyleTrait(prefsHeading, 'fontWeight', '600');
-    const categoryRow = (category, name) => {
+    setStyleTrait(preferences, 'width', 'min(480px, calc(100vw - 48px))');
+    setStyleTrait(preferences, 'padding', '18px 20px');
+    setStyleTrait(preferences, 'display', 'flex');
+    setStyleTrait(preferences, 'flexDirection', 'column');
+    setStyleTrait(preferences, 'gap', '12px');
+    const prefsHeading = text$1('Your privacy choices', { fontSize: '16px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
+    const prefsSub = text$1('Change these any time from “Cookie settings” in the footer.', { fontSize: '12px', color: TOKEN$1('inkMuted', '#6b6560') }, createConfig);
+    const CARD = {
+        display: 'flex', gap: '12px', alignItems: 'flex-start',
+        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#e6e3e1'),
+        borderRadius: TOKEN$1('radius-surface', '8px'), padding: '12px 14px',
+    };
+    const nameText = (s) => text$1(s, { fontSize: '13px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
+    const descText = (s) => text$1(s, { fontSize: '11px', color: TOKEN$1('inkMuted', '#6b6560'), lineHeight: '1.5' }, createConfig);
+    const textColOf = (name, desc) => row(createConfig, { display: 'flex', flexDirection: 'column', gap: '2px', flexGrow: '1' }, [nameText(name), descText(desc)]);
+    const alwaysOn = text$1('ALWAYS ON', {
+        fontSize: '10px', fontWeight: '600', color: TOKEN$1('inkMuted', '#6b6560'),
+        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#e6e3e1'),
+        borderRadius: '999px', padding: '3px 8px',
+    }, createConfig);
+    const necessaryCard = row(createConfig, CARD, [
+        textColOf('Necessary', 'Keeps the site working: your session, your language, this very choice. Always on.'),
+        alwaysOn,
+    ]);
+    const categoryCard = (category, name, desc) => {
         const allow = button('Allow', createConfig, click([
             { type: 'setConsentCategory', params: { category, granted: true } },
-        ]));
+        ]), SMALL_ALLOW);
         const refuse = button('Refuse', createConfig, click([
             { type: 'setConsentCategory', params: { category, granted: false } },
-        ]));
-        const pair = row(createConfig, { display: 'flex', gap: '8px' }, [allow, refuse]);
-        return row(createConfig, { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }, [textNode(name, createConfig), pair]);
+        ]), SMALL_REFUSE);
+        const pair = row(createConfig, { display: 'flex', gap: '6px' }, [allow, refuse]);
+        return row(createConfig, CARD, [textColOf(name, desc), pair]);
     };
-    const necessaryLine = textNode('Necessary — always on', createConfig);
-    const analyticsRow = categoryRow('analytics', 'Analytics');
-    const marketingRow = categoryRow('marketing', 'Marketing');
-    const done = button('Done', createConfig, click([
+    const analyticsCard = categoryCard('analytics', 'Analytics', 'Anonymous counts of visits and pages. Off means the analytics script never loads.');
+    const marketingCard = categoryCard('marketing', 'Marketing', 'Ads measurement and remarketing. Off means no ad cookies and no data shared.');
+    // Board C2's footer: bulk exits live here too — Reject | (grow) | Done | Accept.
+    const prefsReject = button('Reject all', createConfig, click([
+        { type: 'denyConsent' },
+        { type: 'closeDialog', target: preferences.id },
+    ]), OUTLINED);
+    const prefsDone = button('Done', createConfig, click([
+        { type: 'closeDialog', target: preferences.id },
+    ]), { ...OUTLINED, color: TOKEN$1('inkMuted', '#3d3833'), borderColor: TOKEN$1('line', '#d8d4d1') });
+    const prefsAccept = button('Accept all', createConfig, click([
+        { type: 'grantConsent' },
         { type: 'closeDialog', target: preferences.id },
-    ]));
-    if (!prefsHeading || !necessaryLine || !analyticsRow || !marketingRow || !done)
+    ]), SOLID);
+    const spacer = row(createConfig, { flexGrow: '1' }, []);
+    const footer = row(createConfig, { display: 'flex', gap: '8px', alignItems: 'center' }, [prefsReject, spacer, prefsDone, prefsAccept]);
+    if (!prefsHeading || !prefsSub || !necessaryCard || !analyticsCard || !marketingCard || !footer)
         return null;
-    preferences.children = [prefsHeading, necessaryLine, analyticsRow, marketingRow, done];
+    preferences.children = [prefsHeading, prefsSub, necessaryCard, analyticsCard, marketingCard, footer];
     // ── the withdrawal path (§7.3) ───────────────────────────────────────────
     const withdrawal = button('Cookie settings', createConfig, click([
         { type: 'openConsentPreferences', target: preferences.id },
-    ]));
+    ]), QUIET);
     if (!withdrawal)
         return null;
     withdrawal.label = 'Cookie settings';