@grainql/analytics-web 1.7.4 → 2.1.0

package/dist/react/page-tracking.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Page Tracking for Grain Analytics
+ * Automatically tracks page views with consent-aware behavior
+ */
+export interface PageTrackingConfig {
+    stripQueryParams: boolean;
+    debug?: boolean;
+}
+export interface PageTracker {
+    trackSystemEvent(eventName: string, properties: Record<string, unknown>): void;
+    hasConsent(category?: string): boolean;
+    getEffectiveUserId(): string;
+    getEphemeralSessionId(): string;
+}
+export declare class PageTrackingManager {
+    private config;
+    private tracker;
+    private isDestroyed;
+    private currentPath;
+    private originalPushState;
+    private originalReplaceState;
+    constructor(tracker: PageTracker, config: PageTrackingConfig);
+    /**
+     * Setup History API listeners (pushState, replaceState, popstate)
+     */
+    private setupHistoryListeners;
+    /**
+     * Setup hash change listener
+     */
+    private setupHashChangeListener;
+    /**
+     * Handle popstate event (back/forward navigation)
+     */
+    private handlePopState;
+    /**
+     * Handle hash change event
+     */
+    private handleHashChange;
+    /**
+     * Track the current page
+     */
+    private trackCurrentPage;
+    /**
+     * Extract path from URL, optionally stripping query parameters
+     */
+    private extractPath;
+    /**
+     * Get the current page path
+     */
+    getCurrentPage(): string | null;
+    /**
+     * Manually track a page view (for custom navigation)
+     */
+    trackPage(page: string, properties?: Record<string, unknown>): void;
+    /**
+     * Destroy the page tracker
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=page-tracking.d.ts.map

package/dist/react/page-tracking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-tracking.d.ts","sourceRoot":"","sources":["../../src/page-tracking.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC/E,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,kBAAkB,IAAI,MAAM,CAAC;IAC7B,qBAAqB,IAAI,MAAM,CAAC;CACjC;AAED,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,iBAAiB,CAAyC;IAClE,OAAO,CAAC,oBAAoB,CAA4C;gBAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,kBAAkB;IAY5D;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAqB7B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAK/B;;OAEG;IACH,OAAO,CAAC,cAAc,CAGpB;IAEF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAGtB;IAEF;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAmCxB;;OAEG;IACH,OAAO,CAAC,WAAW;IAmBnB;;OAEG;IACH,cAAc,IAAI,MAAM,GAAG,IAAI;IAI/B;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAgCnE;;OAEG;IACH,OAAO,IAAI,IAAI;CAyBhB"}

package/dist/react/page-tracking.js

@@ -0,0 +1,179 @@
+"use strict";
+/**
+ * Page Tracking for Grain Analytics
+ * Automatically tracks page views with consent-aware behavior
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageTrackingManager = void 0;
+class PageTrackingManager {
+    constructor(tracker, config) {
+        this.isDestroyed = false;
+        this.currentPath = null;
+        this.originalPushState = null;
+        this.originalReplaceState = null;
+        /**
+         * Handle popstate event (back/forward navigation)
+         */
+        this.handlePopState = () => {
+            if (this.isDestroyed)
+                return;
+            this.trackCurrentPage();
+        };
+        /**
+         * Handle hash change event
+         */
+        this.handleHashChange = () => {
+            if (this.isDestroyed)
+                return;
+            this.trackCurrentPage();
+        };
+        this.tracker = tracker;
+        this.config = config;
+        // Track initial page load
+        this.trackCurrentPage();
+        // Setup listeners
+        this.setupHistoryListeners();
+        this.setupHashChangeListener();
+    }
+    /**
+     * Setup History API listeners (pushState, replaceState, popstate)
+     */
+    setupHistoryListeners() {
+        if (typeof window === 'undefined' || typeof history === 'undefined')
+            return;
+        // Wrap pushState
+        this.originalPushState = history.pushState;
+        history.pushState = (state, title, url) => {
+            this.originalPushState?.call(history, state, title, url);
+            this.trackCurrentPage();
+        };
+        // Wrap replaceState
+        this.originalReplaceState = history.replaceState;
+        history.replaceState = (state, title, url) => {
+            this.originalReplaceState?.call(history, state, title, url);
+            this.trackCurrentPage();
+        };
+        // Listen to popstate (back/forward buttons)
+        window.addEventListener('popstate', this.handlePopState);
+    }
+    /**
+     * Setup hash change listener
+     */
+    setupHashChangeListener() {
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('hashchange', this.handleHashChange);
+    }
+    /**
+     * Track the current page
+     */
+    trackCurrentPage() {
+        if (this.isDestroyed || typeof window === 'undefined')
+            return;
+        const page = this.extractPath(window.location.href);
+        // Don't track if it's the same page
+        if (page === this.currentPath) {
+            return;
+        }
+        this.currentPath = page;
+        const hasConsent = this.tracker.hasConsent('analytics');
+        // Base properties (always included)
+        const properties = {
+            page,
+            timestamp: Date.now(),
+        };
+        // Enhanced properties when consent is granted
+        if (hasConsent) {
+            properties.referrer = document.referrer || '';
+            properties.title = document.title || '';
+            properties.full_url = window.location.href;
+        }
+        // Track the page view event
+        this.tracker.trackSystemEvent('page_view', properties);
+        if (this.config.debug) {
+            console.log('[Page Tracking] Tracked page view:', properties);
+        }
+    }
+    /**
+     * Extract path from URL, optionally stripping query parameters
+     */
+    extractPath(url) {
+        try {
+            const urlObj = new URL(url);
+            let path = urlObj.pathname + urlObj.hash;
+            if (!this.config.stripQueryParams && urlObj.search) {
+                path += urlObj.search;
+            }
+            return path;
+        }
+        catch (error) {
+            // If URL parsing fails, return the raw string
+            if (this.config.debug) {
+                console.warn('[Page Tracking] Failed to parse URL:', url, error);
+            }
+            return url;
+        }
+    }
+    /**
+     * Get the current page path
+     */
+    getCurrentPage() {
+        return this.currentPath;
+    }
+    /**
+     * Manually track a page view (for custom navigation)
+     */
+    trackPage(page, properties) {
+        if (this.isDestroyed)
+            return;
+        const hasConsent = this.tracker.hasConsent('analytics');
+        // Base properties
+        const baseProperties = {
+            page,
+            timestamp: Date.now(),
+            ...properties,
+        };
+        // Enhanced properties when consent is granted
+        if (hasConsent && typeof document !== 'undefined') {
+            if (!baseProperties.referrer) {
+                baseProperties.referrer = document.referrer || '';
+            }
+            if (!baseProperties.title) {
+                baseProperties.title = document.title || '';
+            }
+            if (!baseProperties.full_url && typeof window !== 'undefined') {
+                baseProperties.full_url = window.location.href;
+            }
+        }
+        this.tracker.trackSystemEvent('page_view', baseProperties);
+        if (this.config.debug) {
+            console.log('[Page Tracking] Manually tracked page:', baseProperties);
+        }
+    }
+    /**
+     * Destroy the page tracker
+     */
+    destroy() {
+        if (this.isDestroyed)
+            return;
+        // Restore original history methods
+        if (typeof history !== 'undefined') {
+            if (this.originalPushState) {
+                history.pushState = this.originalPushState;
+            }
+            if (this.originalReplaceState) {
+                history.replaceState = this.originalReplaceState;
+            }
+        }
+        // Remove event listeners
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('popstate', this.handlePopState);
+            window.removeEventListener('hashchange', this.handleHashChange);
+        }
+        this.isDestroyed = true;
+        if (this.config.debug) {
+            console.log('[Page Tracking] Destroyed');
+        }
+    }
+}
+exports.PageTrackingManager = PageTrackingManager;

package/dist/react/page-tracking.mjs

@@ -0,0 +1,175 @@
+/**
+ * Page Tracking for Grain Analytics
+ * Automatically tracks page views with consent-aware behavior
+ */
+export class PageTrackingManager {
+    constructor(tracker, config) {
+        this.isDestroyed = false;
+        this.currentPath = null;
+        this.originalPushState = null;
+        this.originalReplaceState = null;
+        /**
+         * Handle popstate event (back/forward navigation)
+         */
+        this.handlePopState = () => {
+            if (this.isDestroyed)
+                return;
+            this.trackCurrentPage();
+        };
+        /**
+         * Handle hash change event
+         */
+        this.handleHashChange = () => {
+            if (this.isDestroyed)
+                return;
+            this.trackCurrentPage();
+        };
+        this.tracker = tracker;
+        this.config = config;
+        // Track initial page load
+        this.trackCurrentPage();
+        // Setup listeners
+        this.setupHistoryListeners();
+        this.setupHashChangeListener();
+    }
+    /**
+     * Setup History API listeners (pushState, replaceState, popstate)
+     */
+    setupHistoryListeners() {
+        if (typeof window === 'undefined' || typeof history === 'undefined')
+            return;
+        // Wrap pushState
+        this.originalPushState = history.pushState;
+        history.pushState = (state, title, url) => {
+            this.originalPushState?.call(history, state, title, url);
+            this.trackCurrentPage();
+        };
+        // Wrap replaceState
+        this.originalReplaceState = history.replaceState;
+        history.replaceState = (state, title, url) => {
+            this.originalReplaceState?.call(history, state, title, url);
+            this.trackCurrentPage();
+        };
+        // Listen to popstate (back/forward buttons)
+        window.addEventListener('popstate', this.handlePopState);
+    }
+    /**
+     * Setup hash change listener
+     */
+    setupHashChangeListener() {
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('hashchange', this.handleHashChange);
+    }
+    /**
+     * Track the current page
+     */
+    trackCurrentPage() {
+        if (this.isDestroyed || typeof window === 'undefined')
+            return;
+        const page = this.extractPath(window.location.href);
+        // Don't track if it's the same page
+        if (page === this.currentPath) {
+            return;
+        }
+        this.currentPath = page;
+        const hasConsent = this.tracker.hasConsent('analytics');
+        // Base properties (always included)
+        const properties = {
+            page,
+            timestamp: Date.now(),
+        };
+        // Enhanced properties when consent is granted
+        if (hasConsent) {
+            properties.referrer = document.referrer || '';
+            properties.title = document.title || '';
+            properties.full_url = window.location.href;
+        }
+        // Track the page view event
+        this.tracker.trackSystemEvent('page_view', properties);
+        if (this.config.debug) {
+            console.log('[Page Tracking] Tracked page view:', properties);
+        }
+    }
+    /**
+     * Extract path from URL, optionally stripping query parameters
+     */
+    extractPath(url) {
+        try {
+            const urlObj = new URL(url);
+            let path = urlObj.pathname + urlObj.hash;
+            if (!this.config.stripQueryParams && urlObj.search) {
+                path += urlObj.search;
+            }
+            return path;
+        }
+        catch (error) {
+            // If URL parsing fails, return the raw string
+            if (this.config.debug) {
+                console.warn('[Page Tracking] Failed to parse URL:', url, error);
+            }
+            return url;
+        }
+    }
+    /**
+     * Get the current page path
+     */
+    getCurrentPage() {
+        return this.currentPath;
+    }
+    /**
+     * Manually track a page view (for custom navigation)
+     */
+    trackPage(page, properties) {
+        if (this.isDestroyed)
+            return;
+        const hasConsent = this.tracker.hasConsent('analytics');
+        // Base properties
+        const baseProperties = {
+            page,
+            timestamp: Date.now(),
+            ...properties,
+        };
+        // Enhanced properties when consent is granted
+        if (hasConsent && typeof document !== 'undefined') {
+            if (!baseProperties.referrer) {
+                baseProperties.referrer = document.referrer || '';
+            }
+            if (!baseProperties.title) {
+                baseProperties.title = document.title || '';
+            }
+            if (!baseProperties.full_url && typeof window !== 'undefined') {
+                baseProperties.full_url = window.location.href;
+            }
+        }
+        this.tracker.trackSystemEvent('page_view', baseProperties);
+        if (this.config.debug) {
+            console.log('[Page Tracking] Manually tracked page:', baseProperties);
+        }
+    }
+    /**
+     * Destroy the page tracker
+     */
+    destroy() {
+        if (this.isDestroyed)
+            return;
+        // Restore original history methods
+        if (typeof history !== 'undefined') {
+            if (this.originalPushState) {
+                history.pushState = this.originalPushState;
+            }
+            if (this.originalReplaceState) {
+                history.replaceState = this.originalReplaceState;
+            }
+        }
+        // Remove event listeners
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('popstate', this.handlePopState);
+            window.removeEventListener('hashchange', this.handleHashChange);
+        }
+        this.isDestroyed = true;
+        if (this.config.debug) {
+            console.log('[Page Tracking] Destroyed');
+        }
+    }
+}

package/dist/react/react/GrainProvider.d.ts

@@ -0,0 +1,11 @@
+/**
+ * GrainProvider - Context provider for Grain Analytics
+ *
+ * Supports two patterns:
+ * 1. Provider-managed: Pass `config` prop, provider creates and manages client lifecycle
+ * 2. External client: Pass `client` prop, user manages lifecycle
+ */
+import * as React from 'react';
+import type { GrainProviderProps } from './types';
+export declare function GrainProvider({ children, client, config }: GrainProviderProps): React.JSX.Element;
+//# sourceMappingURL=GrainProvider.d.ts.map

package/dist/react/react/GrainProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrainProvider.d.ts","sourceRoot":"","sources":["../../../src/react/GrainProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,kBAAkB,qBA8C7E"}

package/dist/react/react/GrainProvider.js

@@ -0,0 +1,45 @@
+"use strict";
+/**
+ * GrainProvider - Context provider for Grain Analytics
+ *
+ * Supports two patterns:
+ * 1. Provider-managed: Pass `config` prop, provider creates and manages client lifecycle
+ * 2. External client: Pass `client` prop, user manages lifecycle
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GrainProvider = GrainProvider;
+const React = require("react");
+const index_1 = require("../index");
+const context_1 = require("./context");
+function GrainProvider({ children, client, config }) {
+    // Validate props
+    if (client && config) {
+        throw new Error('GrainProvider: Cannot provide both "client" and "config" props. ' +
+            'Use "client" for external management or "config" for provider-managed client.');
+    }
+    if (!client && !config) {
+        throw new Error('GrainProvider: Must provide either "client" or "config" prop. ' +
+            'Use "client" to pass an existing GrainAnalytics instance, or "config" to create one automatically.');
+    }
+    const isProviderManaged = Boolean(config);
+    const clientRef = React.useRef(null);
+    // Initialize client if config is provided
+    if (isProviderManaged && !clientRef.current && config) {
+        clientRef.current = new index_1.GrainAnalytics(config);
+    }
+    // Use external client if provided
+    const activeClient = client || clientRef.current;
+    if (!activeClient) {
+        throw new Error('GrainProvider: Failed to initialize client');
+    }
+    // Cleanup on unmount (only for provider-managed clients)
+    React.useEffect(() => {
+        return () => {
+            if (isProviderManaged && clientRef.current) {
+                clientRef.current.destroy();
+                clientRef.current = null;
+            }
+        };
+    }, [isProviderManaged]);
+    return (React.createElement(context_1.GrainContext.Provider, { value: { client: activeClient, isProviderManaged } }, children));
+}

package/dist/react/react/GrainProvider.mjs

@@ -0,0 +1,42 @@
+/**
+ * GrainProvider - Context provider for Grain Analytics
+ *
+ * Supports two patterns:
+ * 1. Provider-managed: Pass `config` prop, provider creates and manages client lifecycle
+ * 2. External client: Pass `client` prop, user manages lifecycle
+ */
+import * as React from 'react';
+import { GrainAnalytics } from '../index';
+import { GrainContext } from './context';
+export function GrainProvider({ children, client, config }) {
+    // Validate props
+    if (client && config) {
+        throw new Error('GrainProvider: Cannot provide both "client" and "config" props. ' +
+            'Use "client" for external management or "config" for provider-managed client.');
+    }
+    if (!client && !config) {
+        throw new Error('GrainProvider: Must provide either "client" or "config" prop. ' +
+            'Use "client" to pass an existing GrainAnalytics instance, or "config" to create one automatically.');
+    }
+    const isProviderManaged = Boolean(config);
+    const clientRef = React.useRef(null);
+    // Initialize client if config is provided
+    if (isProviderManaged && !clientRef.current && config) {
+        clientRef.current = new GrainAnalytics(config);
+    }
+    // Use external client if provided
+    const activeClient = client || clientRef.current;
+    if (!activeClient) {
+        throw new Error('GrainProvider: Failed to initialize client');
+    }
+    // Cleanup on unmount (only for provider-managed clients)
+    React.useEffect(() => {
+        return () => {
+            if (isProviderManaged && clientRef.current) {
+                clientRef.current.destroy();
+                clientRef.current = null;
+            }
+        };
+    }, [isProviderManaged]);
+    return (React.createElement(GrainContext.Provider, { value: { client: activeClient, isProviderManaged } }, children));
+}

package/dist/react/react/components/ConsentBanner.d.ts

@@ -0,0 +1,16 @@
+/**
+ * ConsentBanner - Glassmorphic consent popup for GDPR compliance
+ * Follows Grain Design System specifications
+ */
+import * as React from 'react';
+export interface ConsentBannerProps {
+    position?: 'top' | 'bottom' | 'center';
+    theme?: 'light' | 'dark' | 'glass';
+    customText?: string;
+    onAccept?: () => void;
+    onDecline?: () => void;
+    showPreferences?: boolean;
+    privacyPolicyUrl?: string;
+}
+export declare function ConsentBanner({ position, theme, customText, onAccept, onDecline, showPreferences, privacyPolicyUrl, }: ConsentBannerProps): React.JSX.Element;
+//# sourceMappingURL=ConsentBanner.d.ts.map

package/dist/react/react/components/ConsentBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentBanner.d.ts","sourceRoot":"","sources":["../../../../src/react/components/ConsentBanner.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAmB,EACnB,KAAe,EACf,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,gBAAgB,GACjB,EAAE,kBAAkB,qBA8HpB"}

package/dist/react/react/components/ConsentBanner.js

@@ -0,0 +1,78 @@
+"use strict";
+/**
+ * ConsentBanner - Glassmorphic consent popup for GDPR compliance
+ * Follows Grain Design System specifications
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentBanner = ConsentBanner;
+const React = require("react");
+const useGrainAnalytics_1 = require("../hooks/useGrainAnalytics");
+function ConsentBanner({ position = 'bottom', theme = 'glass', customText, onAccept, onDecline, showPreferences = false, privacyPolicyUrl, }) {
+    const client = (0, useGrainAnalytics_1.useGrainAnalytics)();
+    const [visible, setVisible] = React.useState(false);
+    const [showPreferencesModal, setShowPreferencesModal] = React.useState(false);
+    React.useEffect(() => {
+        if (!client)
+            return;
+        // Check if user has already made a consent decision
+        const consentState = client.getConsentState();
+        if (!consentState) {
+            setVisible(true);
+        }
+    }, [client]);
+    const handleAccept = () => {
+        if (client) {
+            client.grantConsent(['necessary', 'analytics', 'functional']);
+        }
+        setVisible(false);
+        onAccept?.();
+    };
+    const handleDecline = () => {
+        if (client) {
+            client.revokeConsent();
+        }
+        setVisible(false);
+        onDecline?.();
+    };
+    const handleEscape = (e) => {
+        if (e.key === 'Escape') {
+            handleDecline();
+        }
+    };
+    if (!visible)
+        return null;
+    const defaultText = customText ||
+        "We use cookies and similar technologies to improve your experience. By accepting, you consent to our use of analytics and functional cookies.";
+    // Position styles
+    const positionStyles = {
+        top: 'top-4 left-4 right-4',
+        bottom: 'bottom-4 left-4 right-4',
+        center: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+    };
+    // Theme styles (glassmorphic by default)
+    const themeStyles = {
+        light: 'bg-white/95 border-gray-200 text-gray-900',
+        dark: 'bg-zinc-900/95 border-zinc-800 text-zinc-100',
+        glass: 'bg-zinc-950/40 backdrop-blur-xl border-zinc-800/40 text-zinc-100',
+    };
+    const buttonAcceptStyles = {
+        light: 'bg-blue-600 hover:bg-blue-700 text-white',
+        dark: 'bg-emerald-600 hover:bg-emerald-700 text-white',
+        glass: 'bg-emerald-600 hover:bg-emerald-700 text-white',
+    };
+    const buttonDeclineStyles = {
+        light: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
+        dark: 'bg-zinc-800 hover:bg-zinc-700 text-zinc-200',
+        glass: 'bg-zinc-900/60 hover:bg-zinc-800/60 text-zinc-300 border border-zinc-800/60',
+    };
+    return (React.createElement("div", { className: `fixed z-50 max-w-2xl ${positionStyles[position]}`, onKeyDown: handleEscape, role: "dialog", "aria-labelledby": "consent-title", "aria-describedby": "consent-description" },
+        React.createElement("div", { className: `rounded-lg shadow-2xl border p-6 transition-all ${themeStyles[theme]}` },
+            React.createElement("h2", { id: "consent-title", className: "text-lg font-semibold mb-2" }, "Cookie Consent"),
+            React.createElement("p", { id: "consent-description", className: "text-sm opacity-80 mb-4" }, defaultText),
+            privacyPolicyUrl && (React.createElement("a", { href: privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm underline opacity-70 hover:opacity-100 transition-opacity block mb-4" }, "Read our Privacy Policy")),
+            React.createElement("div", { className: "flex flex-wrap gap-2" },
+                React.createElement("button", { onClick: handleAccept, className: `px-4 py-2 rounded-lg font-medium transition-all ${buttonAcceptStyles[theme]}`, "aria-label": "Accept cookies" }, "Accept All"),
+                React.createElement("button", { onClick: handleDecline, className: `px-4 py-2 rounded-lg font-medium transition-all ${buttonDeclineStyles[theme]}`, "aria-label": "Decline cookies" }, "Decline"),
+                showPreferences && (React.createElement("button", { onClick: () => setShowPreferencesModal(true), className: `px-4 py-2 rounded-lg font-medium transition-all ${buttonDeclineStyles[theme]}`, "aria-label": "Manage preferences" }, "Manage Preferences")),
+                React.createElement("kbd", { className: "ml-auto px-2 py-1 bg-zinc-900/50 border border-zinc-800 rounded text-[10px] font-mono self-center" }, "ESC")))));
+}