@hanzo/ui 8.29.11 → 8.29.13

package/dist/consent/Consent.cjs

@@ -10,23 +10,34 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * nothing from an ad platform, no Google, and no event on our own stream before
  * Accept, and Google Consent Mode v2 starts denied.
  *
- *  - every visitor, wherever they are, is asked: a banner with Accept all,
- *    Reject all and Choose, until they have chosen. Nothing optional loads first.
+ *  - every visitor, wherever they are, is asked: a bar with Manage preferences,
+ *    Accept all and a ×, until they have chosen. Nothing optional loads first.
+ *  - the bar's × is a choice, not a dismissal: it stores essential cookies only
+ *    and closes, so refusing is one press, exactly as accepting is.
+ *  - Manage preferences opens the Cookie Preferences sheet: a modal with one
+ *    section per category, Strictly Necessary always on, the rest switches that
+ *    start off until chosen, and the policy links.
  *  - Global Privacy Control or Do Not Track is the visitor's answer already: they
  *    are not asked, nothing optional runs, and the switches are locked off.
- *  - cloud serves the policy with the site's tag config; the banner redraws when
- *    it arrives, and asks again when the policy version changes.
+ *  - cloud serves the policy with the site's tag config; the bar redraws when it
+ *    arrives, and asks again when the policy version changes.
  *
- * `Consent` mounts once near the root; `ConsentLink` goes wherever a footer
- * link goes and opens the panel from anywhere. `brand` names who is asking.
+ * `Consent` mounts once near the root. `openConsent()`, `ConsentLink` and any
+ * link to `#choices` (the footer's Privacy choices) open the sheet from anywhere.
+ * `brand` names who is asking; `cookies`, `privacy` and `terms` are the brand's
+ * own policies.
  */
 const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const event_1 = require("@hanzo/event");
 const react_1 = require("react");
 const button_1 = require("../backends/gui/button.cjs");
+const dir_1 = require("../backends/gui/dir.cjs");
 const switch_1 = require("../backends/gui/switch.cjs");
 const slot_1 = require("../backends/gui/slot.cjs");
 const OPEN = 'hzconsent-open';
+/** The address that opens the sheet, from any link on any page. */
+const HASH = '#choices';
 /** Opens the choices from anywhere. */
 const openConsent = () => {
     if (typeof window !== 'undefined')
@@ -34,24 +45,56 @@ const openConsent = () => {
 };
 exports.openConsent = openConsent;
 const kinds = (brand) => [
-    { key: 'analytics', title: 'Analytics', body: `Counts visits and finds what is broken, so ${brand} can get better.` },
-    { key: 'marketing', title: 'Marketing', body: 'Lets ad platforms measure the sign-ups and orders their ads led to.' },
-    { key: 'ads', title: 'Personalized ads', body: 'Lets those platforms use your visit to show you ads elsewhere.' },
+    {
+        id: 'necessary',
+        title: 'Strictly Necessary Cookies',
+        body: 'These cookies are needed for the site to work, so they are always on. They keep you signed in and your session secure, protect forms against cross-site request forgery, spread traffic across servers, remember the choice you make here, and keep what you have typed into a form. They are not used to track you, and they store no personally identifiable tracking information.',
+    },
+    {
+        id: 'analytics',
+        key: 'analytics',
+        title: 'Performance Cookies',
+        body: `These cookies count visits and where they come from, so ${brand} can measure and improve how the site performs: which pages are used most and least, how visitors move around, and what is broken. What they collect is aggregated.`,
+    },
+    {
+        id: 'marketing',
+        key: 'marketing',
+        title: 'Marketing Cookies',
+        body: `These cookies let advertising platforms measure the sign-ups and orders their ads led to, so ${brand} can tell which ads work. The platforms set them through this site, and they remember the ad you arrived from.`,
+    },
+    {
+        id: 'ads',
+        key: 'ads',
+        title: 'Sell, Share, or Use Your Data for Targeted Advertising',
+        body: 'Some US state privacy laws treat letting advertising platforms use what they learn from your visit to show you ads on other sites and apps as a “sale” or “sharing” of your personal information, or as “targeted advertising”, and give you the right to opt out. On, those platforms may use your visit to choose the ads you see elsewhere. It stays off unless you turn it on; to opt out, move this toggle to the left and select Save preferences.',
+    },
 ];
-/** The banner's inset from the window's foot and sides: 16px, or the device's inset and 8px where that is wider. */
+/** The bar's and the sheet's inset from the window's edges: 16px, or the device's inset and 8px where that is wider. */
 const EDGE = {
+    top: 'max(16px, calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px))',
     bottom: 'max(16px, calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px))',
     left: 'max(16px, calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 8px))',
     right: 'max(16px, calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 8px))',
 };
+/** The panel both wear: the card's ground, edge, corner (`$6`, the sign-in card's) and floating shadow. */
+const PANEL = {
+    bg: '$background',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$6',
+    shadowColor: 'rgba(0,0,0,0.25)',
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+};
 /**
- * Where the banner sits: fixed to the foot of the window, clear of the home
+ * Where the bar sits: fixed to the foot of the window, clear of the home
  * indicator and the notch, centred. It stands on design's banner rung
  * (`--z-banner`): over the page and its dock, under every overlay — a dialog, a
  * menu, a phone drawer — and is answered once they close.
  */
 const frame = {
     ...(0, slot_1.slot)('consent'),
+    ...PANEL,
     role: 'dialog',
     'aria-label': 'Cookie preferences',
     position: 'fixed',
@@ -60,46 +103,166 @@ const frame = {
     r: EDGE.right,
     mx: 'auto',
     z: 'var(--z-banner, 50)',
-    py: '$2.5',
-    px: '$3.5',
-    rounded: '$5',
-    borderWidth: 1,
-    borderColor: '$borderColor',
-    bg: '$background',
-    shadowColor: 'rgba(0,0,0,0.25)',
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 8 },
+    py: '$3',
+    paddingInlineStart: '$4',
+    // Clear of the × in the corner: its 32px, and 12px either side.
+    paddingInlineEnd: 56,
 };
 /** The bar is as wide as its line and buttons, up to the window less its inset. */
 const FIT = { width: 'fit-content' };
-/** A link in the banner's line: the line's own ink, underlined, never broken across lines. */
+/** The one filled control in the bar and in the sheet: the ink, as the sign-in card's Continue. */
+const ACT = { bg: '$ink', color: '$background', borderColor: '$ink', hoverStyle: { opacity: 0.92 } };
+/** A link in the sheet's intro: the line's own ink, underlined, never broken across lines. */
 const INLINE = { color: 'inherit', textDecoration: 'underline', whiteSpace: 'nowrap' };
-const Consent = ({ privacy = 'https://hanzo.ai/privacy', brand = 'Hanzo' }) => {
+/** The sheet covers the window, on design's modal rung, over a scrim of its own. */
+const COVER = { position: 'fixed', t: 0, r: 0, b: 0, l: 0 };
+/** What Tab may land on inside the sheet. */
+const FOCUSABLE = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/** A section's button never submits a form the sheet sits in. gui's stack props do not name `type`. */
+const BUTTON = { type: 'button' };
+const Consent = ({ cookies = 'https://hanzo.ai/cookies', privacy = 'https://hanzo.ai/privacy', terms = 'https://hanzo.ai/terms', brand = 'Hanzo', }) => {
     const [shown, setShown] = (0, react_1.useState)(false);
     const [choosing, setChoosing] = (0, react_1.useState)(false);
     const [draft, setDraft] = (0, react_1.useState)({ analytics: false, marketing: false, ads: false });
+    const [expanded, setExpanded] = (0, react_1.useState)({});
     // The choices are open because the visitor asked for them. A policy that
     // arrives after (cloud answers ~150ms into a page opened at #choices) redraws
-    // the banner's question, and must not close what was asked for.
+    // the bar's question, and must not close what was asked for.
     const asked = (0, react_1.useRef)(false);
-    // The browser refused, as the page sees it or as cloud saw the request.
-    const locked = typeof window !== 'undefined' && (0, event_1.declined)();
+    // What had focus when the sheet opened, given it back when the sheet closes.
+    const back = (0, react_1.useRef)(null);
+    const sheet = (0, react_1.useRef)(null);
+    const manage = (0, react_1.useRef)(null);
+    const opened = (0, react_1.useRef)(false);
+    // The switches were filled from a stored choice, not left off.
+    const seeded = (0, react_1.useRef)(false);
+    const id = (0, react_1.useId)();
+    // The browser refused, as the page sees it or as cloud saw the request. State,
+    // so cloud's answer redraws an open sheet.
+    const [locked, setLocked] = (0, react_1.useState)(false);
+    const choose = () => {
+        // Already open: the visitor's unsaved switches and the focus to return stay as they are.
+        if (asked.current)
+            return;
+        const at = document.activeElement;
+        back.current = at instanceof HTMLElement && at !== document.body ? at : null;
+        asked.current = true;
+        setLocked((0, event_1.declined)());
+        seeded.current = (0, event_1.storedConsent)();
+        setDraft((0, event_1.readConsent)());
+        setChoosing(true);
+        setShown(true);
+    };
+    // Closing without a choice: a visitor who has not chosen is asked again by the bar.
+    const close = () => {
+        asked.current = false;
+        setChoosing(false);
+        setShown((0, event_1.asks)());
+    };
     (0, react_1.useEffect)(() => {
-        const sync = () => setShown((0, event_1.asks)() || asked.current);
+        const sync = () => {
+            setShown((0, event_1.asks)() || asked.current);
+            setLocked((0, event_1.declined)());
+            // A policy version the stored choice was not made under: the switches the
+            // sheet opened with were an old grant, and are off until chosen again.
+            if (asked.current && seeded.current && !(0, event_1.storedConsent)()) {
+                seeded.current = false;
+                setDraft((0, event_1.readConsent)());
+            }
+        };
         sync();
-        const open = () => {
-            asked.current = true;
-            setDraft((0, event_1.readConsent)());
-            setChoosing(true);
-            setShown(true);
+        // `#choices` opens the sheet: on arrival, on a hash change, and on a press of
+        // any link on this site to it, so the footer's Privacy choices and a link in
+        // a page are the same control.
+        const hash = () => {
+            if (window.location.hash !== HASH)
+                return;
+            // The router's own entry state is kept: only the address loses its hash. A
+            // microtask, so a router that wraps replaceState in its own mount effect
+            // (Next's, which runs after this child's) records the address without it.
+            queueMicrotask(() => history.replaceState(history.state, '', window.location.pathname + window.location.search));
+            choose();
+        };
+        // A plain press only: a modified one (new tab, new window) keeps the browser's
+        // meaning, and the page it opens at #choices opens the sheet on arrival.
+        const press = (e) => {
+            if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                return;
+            // The attribute, not `.href`: an SVG link's `.href` is not a string.
+            const a = e.target?.closest?.('a[href]');
+            const href = a?.getAttribute('href');
+            const target = a?.getAttribute('target');
+            if (!href || a?.hasAttribute('download') || (target && target !== '_self'))
+                return;
+            let to;
+            try {
+                to = new URL(href, document.baseURI);
+            }
+            catch {
+                return;
+            }
+            if (to.hash !== HASH || to.origin !== window.location.origin)
+                return;
+            e.preventDefault();
+            choose();
         };
-        window.addEventListener(OPEN, open);
+        hash();
+        window.addEventListener(OPEN, choose);
         window.addEventListener(event_1.POLICY_EVENT, sync);
+        window.addEventListener('hashchange', hash);
+        document.addEventListener('click', press, { capture: true });
         return () => {
-            window.removeEventListener(OPEN, open);
+            window.removeEventListener(OPEN, choose);
             window.removeEventListener(event_1.POLICY_EVENT, sync);
+            window.removeEventListener('hashchange', hash);
+            document.removeEventListener('click', press, { capture: true });
         };
     }, []);
+    // Focus moves into the sheet when it opens, stays inside it while it is open,
+    // and returns to what opened it (or the bar's Manage preferences) when it closes.
+    (0, react_1.useEffect)(() => {
+        if (!choosing) {
+            if (!opened.current)
+                return;
+            opened.current = false;
+            const el = back.current;
+            back.current = null;
+            if (el?.isConnected)
+                el.focus();
+            else
+                manage.current?.focus();
+            return;
+        }
+        opened.current = true;
+        const all = () => [...(sheet.current?.querySelectorAll(FOCUSABLE) ?? [])];
+        all()[0]?.focus();
+        const keys = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                close();
+                return;
+            }
+            if (e.key !== 'Tab')
+                return;
+            const list = all();
+            const first = list[0];
+            const last = list[list.length - 1];
+            if (!first || !last)
+                return;
+            const at = document.activeElement;
+            const inside = !!at && !!sheet.current?.contains(at);
+            if (e.shiftKey && (at === first || !inside)) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && (at === last || !inside)) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener('keydown', keys);
+        return () => document.removeEventListener('keydown', keys);
+    }, [choosing]);
     if (!shown)
         return null;
     const done = (fn) => () => {
@@ -108,21 +271,18 @@ const Consent = ({ privacy = 'https://hanzo.ai/privacy', brand = 'Hanzo' }) => {
         setShown(false);
         setChoosing(false);
     };
-    const choose = () => {
-        asked.current = true;
-        setDraft((0, event_1.readConsent)());
-        setChoosing(true);
-        setShown(true);
-    };
     if (choosing)
-        return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...frame, maxW: 440, gap: "$3", maxH: `calc(100dvh - var(--safe-top, env(safe-area-inset-top, 0px)) - var(--header, 0px) - ${EDGE.bottom} - 16px)`, overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, children: [`Choose what ${brand} may measure and share. You can change this at any time. `, (0, jsx_runtime_1.jsx)("a", { href: privacy, style: INLINE, children: "Privacy policy" })] }), locked ? ((0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$soft", m: 0, children: "Your browser asks sites not to track you, so all of these stay off." })) : null, kinds(brand).map((k) => {
-                    const off = locked;
-                    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", items: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, children: [(0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", fontWeight: "500", m: 0, children: k.title }), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$1", color: "$soft", m: 0, children: k.body })] }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": k.title, disabled: off, checked: off ? false : draft[k.key], onCheckedChange: (v) => setDraft({ ...draft, [k.key]: v === true }) })] }, k.key));
-                }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", variant: "secondary", onClick: done(event_1.rejectAll), children: "Reject all" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", onClick: done(() => (0, event_1.saveConsent)(draft)), children: "Save choices" })] })] }));
-    // One bar: the line and its link, then the buttons. They share a row where
-    // the line fits beside them and the buttons drop under it where it does not,
-    // so a phone shows the line over one row of buttons and nothing breaks mid-control.
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...frame, style: FIT, maxW: 960, flexWrap: "wrap", items: "center", columnGap: "$4", rowGap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { shrink: 1, minW: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, children: ['Cookies measure visits and ads once you accept. ', (0, jsx_runtime_1.jsx)("a", { href: privacy, style: INLINE, children: "Privacy policy" })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", marginInlineStart: "auto", items: "center", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", variant: "link", onClick: choose, children: "Choose" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", variant: "secondary", onClick: done(event_1.rejectAll), children: "Reject all" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", onClick: done(event_1.acceptAll), children: "Accept all" })] })] }));
+        return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent-sheet'), ...COVER, z: "var(--z-modal, 600)", items: "center", justify: "center", 
+            // The device's insets are physical sides, so the shorthand names them in order.
+            style: { padding: `${EDGE.top} ${EDGE.right} ${EDGE.bottom} ${EDGE.left}` }, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ...COVER, position: "absolute", z: 0, bg: "rgba(0,0,0,0.6)", "aria-hidden": true, onPress: close }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent'), ...PANEL, ref: sheet, role: "dialog", "aria-modal": true, "aria-labelledby": `${id}-title`, position: "relative", width: "100%", maxW: 560, maxH: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", pt: "$5", pb: "$3", paddingInlineStart: "$5", paddingInlineEnd: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { render: "h2", id: `${id}-title`, m: 0, fontSize: "$6", lineHeight: "$6", fontWeight: "600", color: "$ink", children: "Cookie Preferences" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": "Close", onClick: close, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { shrink: 1, minH: 0, overflowY: "auto", px: "$5", pb: "$2", style: { overscrollBehavior: 'contain' }, children: [(0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { size: "$2", color: "$aside", m: 0, pb: "$3", children: ['We use cookies and similar technologies to provide our services, measure performance, and support advertising. Essential cookies are required for the site to work and cannot be turned off. You can allow or reject optional cookies below. Learn more in our ', (0, jsx_runtime_1.jsx)("a", { href: cookies, style: INLINE, children: "Cookie Policy" }), ', ', (0, jsx_runtime_1.jsx)("a", { href: privacy, style: INLINE, children: "Privacy Policy" }), ', and ', (0, jsx_runtime_1.jsx)("a", { href: terms, style: INLINE, children: "Terms of Service" }), "."] }), locked ? ((0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, pb: "$3", children: "Your browser asks sites not to track you, so all of these stay off." })) : null, kinds(brand).map((k) => {
+                                    const open = expanded[k.id] === true;
+                                    const body = `${id}-${k.id}`;
+                                    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent-section'), borderTopWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$3", minH: 52, py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "h3", flex: 1, minW: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "button", ...BUTTON, "aria-expanded": open, "aria-controls": body, onPress: () => setExpanded({ ...expanded, [k.id]: !open }), flex: 1, minW: 0, items: "center", gap: "$2", p: 0, bg: "transparent", borderWidth: 0, cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, rotate: open ? '180deg' : '0deg', opacity: 0.7, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", lineHeight: "$3", fontWeight: "600", color: "$ink", ...(0, dir_1.align)('start'), children: k.title })] }) }), k.key ? ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": k.title, "aria-describedby": body, disabled: locked, checked: locked ? false : draft[k.key], onCheckedChange: (v) => setDraft({ ...draft, [k.key]: v === true }) })) : ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "600", color: "$ink", whiteSpace: "nowrap", children: "Always Active" }))] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { id: body, display: open ? 'flex' : 'none', pb: "$3", paddingInlineStart: 24, children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$aside", m: 0, children: k.body }) })] }, k.id));
+                                })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flexWrap: "wrap", gap: "$2", px: "$5", py: "$4", borderTopWidth: 1, borderColor: "$borderColor", children: [locked ? null : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "secondary", grow: 1, onClick: done(event_1.acceptAll), children: "Accept all" })), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", ...ACT, grow: 1, onClick: done(() => (0, event_1.saveConsent)(draft)), children: "Save preferences" })] })] })] }));
+    // One bar: the line, then the buttons. They share a row where the line fits
+    // beside them and the buttons drop under it where it does not, so a phone shows
+    // the line over one row of buttons and nothing breaks mid-control.
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...frame, style: FIT, maxW: 1200, flexWrap: "wrap", items: "center", columnGap: "$4", rowGap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { shrink: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, children: `Essential cookies keep ${brand} running. With your OK, optional cookies help us measure performance and ads.` }) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", marginInlineStart: "auto", items: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ref: manage, type: "button", size: "sm", variant: "secondary", onClick: choose, children: "Manage preferences" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", ...ACT, onClick: done(event_1.acceptAll), children: "Accept all" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": "Close and use essential cookies only", position: "absolute", t: "$3", insetInlineEnd: "$3", onClick: done(event_1.rejectAll), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })] }));
 };
 exports.Consent = Consent;
 /** The footer link that reopens the choices, in every footer and every region. */

package/dist/consent/Consent.d.ts

@@ -1,12 +1,16 @@
 /** Opens the choices from anywhere. */
 export declare const openConsent: () => void;
 export type ConsentProps = {
+    /** Where the cookie policy lives. */
+    cookies?: string;
     /** Where the privacy policy lives. */
     privacy?: string;
+    /** Where the terms of service live. */
+    terms?: string;
     /** Who is asking: the brand the visitor is on. */
     brand?: string;
 };
-declare const Consent: ({ privacy, brand }: ConsentProps) => import("react").JSX.Element | null;
+declare const Consent: ({ cookies, privacy, terms, brand, }: ConsentProps) => import("react").JSX.Element | null;
 /** The footer link that reopens the choices, in every footer and every region. */
 declare const ConsentLink: ({ label }: {
     label?: string;

package/dist/consent/Consent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Consent.d.ts","sourceRoot":"","sources":["../../src/consent/Consent.tsx"],"names":[],"mappings":"AA6BA,uCAAuC;AACvC,eAAO,MAAM,WAAW,QAAO,IAE9B,CAAA;AAiDD,MAAM,MAAM,YAAY,GAAG;IACzB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,OAAO,uBAA+D,YAAY,uCA0HvF,CAAA;AAED,kFAAkF;AAClF,QAAA,MAAM,WAAW,cAAmC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAIrE,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"Consent.d.ts","sourceRoot":"","sources":["../../src/consent/Consent.tsx"],"names":[],"mappings":"AAyCA,uCAAuC;AACvC,eAAO,MAAM,WAAW,QAAO,IAE9B,CAAA;AA0FD,MAAM,MAAM,YAAY,GAAG;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,OAAO,wCAKV,YAAY,uCA4Sd,CAAA;AAED,kFAAkF;AAClF,QAAA,MAAM,WAAW,cAAmC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAIrE,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA"}