@iqworksai/consentiq-react 0.1.0

package/dist/index.js

@@ -0,0 +1,958 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ConsentGate: () => ConsentGate,
+  ConsentIQApiClient: () => ConsentIQApiClient,
+  ConsentIQProvider: () => ConsentIQProvider,
+  CookieBanner: () => CookieBanner,
+  PreferenceCenter: () => PreferenceCenter,
+  detectCountry: () => detectCountry,
+  detectLanguage: () => detectLanguage,
+  generateSubjectId: () => generateSubjectId,
+  getOrCreateSubjectId: () => getOrCreateSubjectId,
+  useConsent: () => useConsent,
+  useConsentGate: () => useConsentGate,
+  useConsentIQ: () => useConsentIQ,
+  withConsentGate: () => withConsentGate
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+
+// src/api-client.ts
+var DEFAULT_API_URL = "https://api.consentiq.io";
+var ConsentIQApiClient = class {
+  constructor(propertyKey, apiUrl, debug = false) {
+    this.propertyKey = propertyKey;
+    this.apiUrl = apiUrl || DEFAULT_API_URL;
+    this.debug = debug;
+  }
+  log(...args) {
+    if (this.debug) {
+      console.log("[ConsentIQ]", ...args);
+    }
+  }
+  async fetch(url, options) {
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        ...options?.headers
+      }
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Unknown error" }));
+      throw new Error(error.error || `HTTP ${response.status}`);
+    }
+    return response.json();
+  }
+  /**
+   * Fetch property configuration including banner settings and translations
+   */
+  async getConfig() {
+    this.log("Fetching config for property:", this.propertyKey);
+    const config = await this.fetch(
+      `${this.apiUrl}/api/public/config/${this.propertyKey}`
+    );
+    this.log("Config loaded:", config);
+    return config;
+  }
+  /**
+   * Get existing consent for a subject
+   */
+  async getConsent(subjectId) {
+    this.log("Fetching consent for subject:", subjectId);
+    const response = await this.fetch(
+      `${this.apiUrl}/api/public/consent/${this.propertyKey}/${subjectId}`
+    );
+    this.log("Consent loaded:", response.consent);
+    return response.consent;
+  }
+  /**
+   * Submit consent to the server
+   */
+  async submitConsent(data) {
+    this.log("Submitting consent:", data);
+    const response = await this.fetch(`${this.apiUrl}/api/public/consent`, {
+      method: "POST",
+      body: JSON.stringify({
+        propertyKey: this.propertyKey,
+        ...data
+      })
+    });
+    this.log("Consent submitted:", response);
+    return response;
+  }
+  /**
+   * Verify a consent record
+   */
+  async verifyConsent(consentId) {
+    return this.fetch(`${this.apiUrl}/api/public/verify/${consentId}`);
+  }
+};
+function generateSubjectId() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function getOrCreateSubjectId() {
+  const STORAGE_KEY = "consentiq_subject_id";
+  if (typeof window === "undefined") {
+    return generateSubjectId();
+  }
+  try {
+    let subjectId = localStorage.getItem(STORAGE_KEY);
+    if (!subjectId) {
+      subjectId = generateSubjectId();
+      localStorage.setItem(STORAGE_KEY, subjectId);
+    }
+    return subjectId;
+  } catch {
+    return generateSubjectId();
+  }
+}
+function detectCountry() {
+  if (typeof navigator === "undefined") return void 0;
+  const language = navigator.language || navigator.userLanguage;
+  if (language) {
+    const parts = language.split("-");
+    if (parts.length > 1) {
+      return parts[1].toUpperCase();
+    }
+  }
+  return void 0;
+}
+function detectLanguage(supportedLanguages) {
+  if (typeof navigator === "undefined") return supportedLanguages[0] || "en";
+  const browserLanguages = navigator.languages || [navigator.language];
+  for (const lang of browserLanguages) {
+    const code = lang.split("-")[0].toLowerCase();
+    if (supportedLanguages.includes(code)) {
+      return code;
+    }
+  }
+  return supportedLanguages[0] || "en";
+}
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ConsentIQContext = (0, import_react.createContext)(null);
+var DEFAULT_CONSENT = {
+  necessary: true,
+  // Always true
+  analytics: false,
+  marketing: false,
+  preferences: false,
+  social: false
+};
+var CONSENT_STORAGE_KEY = "consentiq_consent";
+function ConsentIQProvider({
+  children,
+  propertyKey,
+  apiUrl,
+  subjectId: providedSubjectId,
+  autoGenerateSubjectId = true,
+  onConsentChange,
+  onOpen,
+  onClose,
+  autoShow = true,
+  language: preferredLanguage,
+  debug = false
+}) {
+  const [config, setConfig] = (0, import_react.useState)(null);
+  const [consent, setConsent] = (0, import_react.useState)(DEFAULT_CONSENT);
+  const [marketingConsent, setMarketingConsent] = (0, import_react.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [isBannerVisible, setIsBannerVisible] = (0, import_react.useState)(false);
+  const [isPreferenceCenterVisible, setIsPreferenceCenterVisible] = (0, import_react.useState)(false);
+  const [language, setLanguage] = (0, import_react.useState)("en");
+  const [regulation, setRegulation] = (0, import_react.useState)(null);
+  const [subjectId, setSubjectId] = (0, import_react.useState)("");
+  const [hasExistingConsent, setHasExistingConsent] = (0, import_react.useState)(false);
+  const apiClient = (0, import_react.useMemo)(
+    () => new ConsentIQApiClient(propertyKey, apiUrl, debug),
+    [propertyKey, apiUrl, debug]
+  );
+  const loadLocalConsent = (0, import_react.useCallback)(() => {
+    if (typeof window === "undefined") return null;
+    try {
+      const saved = localStorage.getItem(CONSENT_STORAGE_KEY);
+      if (saved) {
+        return JSON.parse(saved);
+      }
+    } catch {
+    }
+    return null;
+  }, []);
+  const saveLocalConsent = (0, import_react.useCallback)((consentData) => {
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.setItem(CONSENT_STORAGE_KEY, JSON.stringify(consentData));
+    } catch {
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    async function initialize() {
+      try {
+        const sid = providedSubjectId || (autoGenerateSubjectId ? getOrCreateSubjectId() : "");
+        setSubjectId(sid);
+        const propertyConfig = await apiClient.getConfig();
+        setConfig(propertyConfig);
+        const detectedLang = preferredLanguage || detectLanguage(propertyConfig.property.supportedLanguages);
+        setLanguage(detectedLang);
+        const country = detectCountry();
+        if (country && propertyConfig.geoRules) {
+          for (const rule of propertyConfig.geoRules) {
+            if (rule.countries.includes(country)) {
+              setRegulation(rule.regulation);
+              break;
+            }
+          }
+        }
+        if (sid) {
+          const existingConsent = await apiClient.getConsent(sid).catch(() => null);
+          if (existingConsent) {
+            setConsent(existingConsent.cookieConsents);
+            if (existingConsent.marketingConsents) {
+              setMarketingConsent(existingConsent.marketingConsents);
+            }
+            setHasExistingConsent(true);
+            saveLocalConsent(existingConsent.cookieConsents);
+          } else {
+            const localConsent = loadLocalConsent();
+            if (localConsent) {
+              setConsent(localConsent);
+              setHasExistingConsent(true);
+            }
+          }
+        }
+        setIsLoading(false);
+        if (autoShow && !hasExistingConsent) {
+          setIsBannerVisible(true);
+          onOpen?.();
+        }
+      } catch (error) {
+        console.error("[ConsentIQ] Failed to initialize:", error);
+        setIsLoading(false);
+      }
+    }
+    initialize();
+  }, [
+    propertyKey,
+    apiClient,
+    providedSubjectId,
+    autoGenerateSubjectId,
+    preferredLanguage,
+    autoShow,
+    loadLocalConsent,
+    saveLocalConsent,
+    onOpen,
+    hasExistingConsent
+  ]);
+  const submitConsent = (0, import_react.useCallback)(
+    async (cookieConsents, marketingConsents) => {
+      if (!subjectId) return;
+      try {
+        await apiClient.submitConsent({
+          subjectId,
+          cookieConsents,
+          marketingConsents,
+          geoCountry: detectCountry(),
+          consentMethod: isPreferenceCenterVisible ? "preference_center" : "banner"
+        });
+        saveLocalConsent(cookieConsents);
+        onConsentChange?.(cookieConsents, marketingConsents);
+      } catch (error) {
+        console.error("[ConsentIQ] Failed to submit consent:", error);
+      }
+    },
+    [subjectId, apiClient, isPreferenceCenterVisible, saveLocalConsent, onConsentChange]
+  );
+  const hasConsent = (0, import_react.useCallback)(
+    (category) => {
+      return consent[category] === true;
+    },
+    [consent]
+  );
+  const hasMarketingConsent = (0, import_react.useCallback)(
+    (channel) => {
+      return marketingConsent[channel] === true;
+    },
+    [marketingConsent]
+  );
+  const acceptAll = (0, import_react.useCallback)(async () => {
+    const allAccepted = { ...DEFAULT_CONSENT };
+    if (config) {
+      for (const category of config.categories) {
+        if (category.enabled) {
+          allAccepted[category.code] = true;
+        }
+      }
+    } else {
+      allAccepted.analytics = true;
+      allAccepted.marketing = true;
+      allAccepted.preferences = true;
+      allAccepted.social = true;
+    }
+    setConsent(allAccepted);
+    await submitConsent(allAccepted, marketingConsent);
+    setIsBannerVisible(false);
+    setIsPreferenceCenterVisible(false);
+    onClose?.();
+  }, [config, marketingConsent, submitConsent, onClose]);
+  const rejectAll = (0, import_react.useCallback)(async () => {
+    const allRejected = {
+      necessary: true,
+      // Always true
+      analytics: false,
+      marketing: false,
+      preferences: false,
+      social: false
+    };
+    setConsent(allRejected);
+    await submitConsent(allRejected, {});
+    setIsBannerVisible(false);
+    setIsPreferenceCenterVisible(false);
+    onClose?.();
+  }, [submitConsent, onClose]);
+  const updateConsent = (0, import_react.useCallback)(
+    async (updates) => {
+      const newConsent = {
+        ...consent,
+        ...updates,
+        necessary: true
+        // Always enforce necessary
+      };
+      setConsent(newConsent);
+      await submitConsent(newConsent, marketingConsent);
+    },
+    [consent, marketingConsent, submitConsent]
+  );
+  const updateMarketingConsent = (0, import_react.useCallback)(
+    async (updates) => {
+      const newMarketingConsent = { ...marketingConsent, ...updates };
+      setMarketingConsent(newMarketingConsent);
+      await submitConsent(consent, newMarketingConsent);
+    },
+    [consent, marketingConsent, submitConsent]
+  );
+  const showBanner = (0, import_react.useCallback)(() => {
+    setIsBannerVisible(true);
+    onOpen?.();
+  }, [onOpen]);
+  const hideBanner = (0, import_react.useCallback)(() => {
+    setIsBannerVisible(false);
+    onClose?.();
+  }, [onClose]);
+  const showPreferenceCenter = (0, import_react.useCallback)(() => {
+    setIsPreferenceCenterVisible(true);
+    setIsBannerVisible(false);
+    onOpen?.();
+  }, [onOpen]);
+  const hidePreferenceCenter = (0, import_react.useCallback)(() => {
+    setIsPreferenceCenterVisible(false);
+    onClose?.();
+  }, [onClose]);
+  const resetConsent = (0, import_react.useCallback)(() => {
+    setConsent(DEFAULT_CONSENT);
+    setMarketingConsent({});
+    setHasExistingConsent(false);
+    if (typeof window !== "undefined") {
+      localStorage.removeItem(CONSENT_STORAGE_KEY);
+      localStorage.removeItem("consentiq_subject_id");
+    }
+  }, []);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      consent,
+      marketingConsent,
+      config,
+      isLoading,
+      isBannerVisible,
+      isPreferenceCenterVisible,
+      language,
+      regulation,
+      hasConsent,
+      hasMarketingConsent,
+      acceptAll,
+      rejectAll,
+      updateConsent,
+      updateMarketingConsent,
+      showBanner,
+      hideBanner,
+      showPreferenceCenter,
+      hidePreferenceCenter,
+      resetConsent
+    }),
+    [
+      consent,
+      marketingConsent,
+      config,
+      isLoading,
+      isBannerVisible,
+      isPreferenceCenterVisible,
+      language,
+      regulation,
+      hasConsent,
+      hasMarketingConsent,
+      acceptAll,
+      rejectAll,
+      updateConsent,
+      updateMarketingConsent,
+      showBanner,
+      hideBanner,
+      showPreferenceCenter,
+      hidePreferenceCenter,
+      resetConsent
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConsentIQContext.Provider, { value: contextValue, children });
+}
+function useConsentIQ() {
+  const context = (0, import_react.useContext)(ConsentIQContext);
+  if (!context) {
+    throw new Error("useConsentIQ must be used within a ConsentIQProvider");
+  }
+  return context;
+}
+function useConsent(category) {
+  const { hasConsent } = useConsentIQ();
+  return hasConsent(category);
+}
+function useConsentGate(category) {
+  const { hasConsent, isLoading } = useConsentIQ();
+  return {
+    hasConsent: hasConsent(category),
+    isLoading
+  };
+}
+
+// src/components/CookieBanner.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CookieBanner({ className, position, theme, style }) {
+  const {
+    config,
+    isBannerVisible,
+    isLoading,
+    language,
+    acceptAll,
+    rejectAll,
+    showPreferenceCenter
+  } = useConsentIQ();
+  if (isLoading || !isBannerVisible || !config) {
+    return null;
+  }
+  const bannerConfig = config.banner;
+  const translations = config.translations[language] || config.translations[config.property.defaultLanguage] || {};
+  const resolvedPosition = position || bannerConfig.position || "bottom";
+  const resolvedTheme = theme || bannerConfig.theme || "dark";
+  const effectiveTheme = resolvedTheme === "auto" ? typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : resolvedTheme;
+  const positionStyles = {
+    position: "fixed",
+    zIndex: 9999,
+    ...resolvedPosition === "bottom" && { bottom: 0, left: 0, right: 0 },
+    ...resolvedPosition === "top" && { top: 0, left: 0, right: 0 },
+    ...resolvedPosition === "bottom-left" && { bottom: "1rem", left: "1rem", maxWidth: "400px" },
+    ...resolvedPosition === "bottom-right" && { bottom: "1rem", right: "1rem", maxWidth: "400px" },
+    ...resolvedPosition === "center" && {
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      maxWidth: "500px",
+      width: "90%"
+    }
+  };
+  const themeStyles = {
+    backgroundColor: effectiveTheme === "dark" ? "#1e293b" : "#ffffff",
+    color: effectiveTheme === "dark" ? "#f1f5f9" : "#1e293b",
+    borderColor: effectiveTheme === "dark" ? "#334155" : "#e2e8f0"
+  };
+  const buttonPrimaryStyle = {
+    backgroundColor: bannerConfig.primaryColor || "#3b82f6",
+    color: "#ffffff",
+    padding: "0.5rem 1rem",
+    borderRadius: "0.5rem",
+    border: "none",
+    cursor: "pointer",
+    fontWeight: 500,
+    fontSize: "0.875rem"
+  };
+  const buttonSecondaryStyle = {
+    backgroundColor: effectiveTheme === "dark" ? "#475569" : "#e2e8f0",
+    color: effectiveTheme === "dark" ? "#f1f5f9" : "#1e293b",
+    padding: "0.5rem 1rem",
+    borderRadius: "0.5rem",
+    border: "none",
+    cursor: "pointer",
+    fontWeight: 500,
+    fontSize: "0.875rem"
+  };
+  const buttonLinkStyle = {
+    background: "none",
+    border: "none",
+    color: effectiveTheme === "dark" ? "#94a3b8" : "#64748b",
+    cursor: "pointer",
+    fontSize: "0.875rem",
+    padding: "0.5rem"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    resolvedPosition === "center" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 9998
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className,
+        style: {
+          ...positionStyles,
+          ...themeStyles,
+          padding: "1rem",
+          borderRadius: resolvedPosition === "bottom" || resolvedPosition === "top" ? 0 : "0.75rem",
+          border: "1px solid",
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          ...style
+        },
+        role: "dialog",
+        "aria-label": "Cookie consent",
+        "aria-modal": resolvedPosition === "center",
+        children: [
+          bannerConfig.showLogo && bannerConfig.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "img",
+            {
+              src: bannerConfig.logoUrl,
+              alt: "",
+              style: { height: "1.5rem", marginBottom: "0.75rem" }
+            }
+          ),
+          translations.bannerTitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "h2",
+            {
+              style: {
+                fontSize: "1rem",
+                fontWeight: 600,
+                marginBottom: "0.5rem",
+                margin: 0
+              },
+              children: translations.bannerTitle
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "p",
+            {
+              style: {
+                fontSize: "0.875rem",
+                lineHeight: 1.5,
+                margin: "0.5rem 0 1rem",
+                opacity: 0.9
+              },
+              children: translations.bannerDescription || "We use cookies to enhance your experience. By continuing, you agree to our use of cookies."
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "0.5rem",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: acceptAll,
+                    style: buttonPrimaryStyle,
+                    type: "button",
+                    children: translations.acceptAllText || "Accept All"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: rejectAll,
+                    style: buttonSecondaryStyle,
+                    type: "button",
+                    children: translations.rejectAllText || "Reject All"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: showPreferenceCenter,
+                    style: buttonLinkStyle,
+                    type: "button",
+                    children: translations.customizeText || "Customize"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/PreferenceCenter.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function PreferenceCenter({ className, theme, style }) {
+  const {
+    config,
+    consent,
+    isPreferenceCenterVisible,
+    isLoading,
+    language,
+    updateConsent,
+    hidePreferenceCenter
+  } = useConsentIQ();
+  const [localConsent, setLocalConsent] = (0, import_react2.useState)(consent);
+  (0, import_react2.useEffect)(() => {
+    setLocalConsent(consent);
+  }, [consent]);
+  if (isLoading || !isPreferenceCenterVisible || !config) {
+    return null;
+  }
+  const bannerConfig = config.banner;
+  const translations = config.translations[language] || config.translations[config.property.defaultLanguage] || {};
+  const resolvedTheme = theme || bannerConfig.theme || "dark";
+  const effectiveTheme = resolvedTheme === "auto" ? typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : resolvedTheme;
+  const isDark = effectiveTheme === "dark";
+  const handleToggle = (categoryCode) => {
+    setLocalConsent((prev) => ({
+      ...prev,
+      [categoryCode]: !prev[categoryCode]
+    }));
+  };
+  const handleSave = async () => {
+    await updateConsent(localConsent);
+    hidePreferenceCenter();
+  };
+  const handleAcceptAll = () => {
+    const allAccepted = {
+      necessary: true,
+      analytics: true,
+      marketing: true,
+      preferences: true,
+      social: true
+    };
+    for (const category of config.categories) {
+      if (category.enabled) {
+        allAccepted[category.code] = true;
+      }
+    }
+    setLocalConsent(allAccepted);
+  };
+  const handleRejectAll = () => {
+    const allRejected = {
+      necessary: true,
+      analytics: false,
+      marketing: false,
+      preferences: false,
+      social: false
+    };
+    for (const category of config.categories) {
+      allRejected[category.code] = category.isRequired;
+    }
+    setLocalConsent(allRejected);
+  };
+  const containerStyle = {
+    position: "fixed",
+    inset: 0,
+    zIndex: 9999,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "1rem"
+  };
+  const backdropStyle = {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  };
+  const modalStyle = {
+    position: "relative",
+    backgroundColor: isDark ? "#1e293b" : "#ffffff",
+    color: isDark ? "#f1f5f9" : "#1e293b",
+    borderRadius: "0.75rem",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    maxWidth: "600px",
+    width: "100%",
+    maxHeight: "80vh",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    ...style
+  };
+  const headerStyle = {
+    padding: "1rem 1.5rem",
+    borderBottom: `1px solid ${isDark ? "#334155" : "#e2e8f0"}`,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  };
+  const bodyStyle = {
+    padding: "1.5rem",
+    overflowY: "auto",
+    flex: 1
+  };
+  const footerStyle = {
+    padding: "1rem 1.5rem",
+    borderTop: `1px solid ${isDark ? "#334155" : "#e2e8f0"}`,
+    display: "flex",
+    gap: "0.5rem",
+    justifyContent: "flex-end"
+  };
+  const categoryStyle = {
+    padding: "1rem",
+    backgroundColor: isDark ? "#0f172a" : "#f8fafc",
+    borderRadius: "0.5rem",
+    marginBottom: "0.75rem"
+  };
+  const toggleContainerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  };
+  const buttonPrimaryStyle = {
+    backgroundColor: bannerConfig.primaryColor || "#3b82f6",
+    color: "#ffffff",
+    padding: "0.5rem 1rem",
+    borderRadius: "0.5rem",
+    border: "none",
+    cursor: "pointer",
+    fontWeight: 500,
+    fontSize: "0.875rem"
+  };
+  const buttonSecondaryStyle = {
+    backgroundColor: isDark ? "#475569" : "#e2e8f0",
+    color: isDark ? "#f1f5f9" : "#1e293b",
+    padding: "0.5rem 1rem",
+    borderRadius: "0.5rem",
+    border: "none",
+    cursor: "pointer",
+    fontWeight: 500,
+    fontSize: "0.875rem"
+  };
+  const buttonTextStyle = {
+    background: "none",
+    border: "none",
+    color: isDark ? "#94a3b8" : "#64748b",
+    cursor: "pointer",
+    fontSize: "0.875rem",
+    padding: "0.5rem"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: containerStyle, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: backdropStyle, onClick: hidePreferenceCenter }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-label": "Cookie preferences", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: headerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 600 }, children: "Cookie Preferences" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            onClick: hidePreferenceCenter,
+            style: {
+              background: "none",
+              border: "none",
+              fontSize: "1.5rem",
+              cursor: "pointer",
+              color: isDark ? "#94a3b8" : "#64748b",
+              lineHeight: 1
+            },
+            "aria-label": "Close",
+            type: "button",
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: bodyStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { marginTop: 0, marginBottom: "1.5rem", opacity: 0.8, fontSize: "0.875rem" }, children: translations.bannerDescription || "Manage your cookie preferences. Some cookies are essential for the site to function properly." }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "1.5rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleAcceptAll, style: buttonTextStyle, type: "button", children: "Enable All" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleRejectAll, style: buttonTextStyle, type: "button", children: "Disable All" })
+        ] }),
+        config.categories.filter((cat) => cat.enabled).map((category) => {
+          const categoryTranslation = translations.categories?.[category.code];
+          const isEnabled = localConsent[category.code] ?? category.defaultState;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: categoryStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: toggleContainerStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "h3",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: "0.95rem",
+                      fontWeight: 600
+                    },
+                    children: categoryTranslation?.title || category.name
+                  }
+                ),
+                category.isRequired && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "0.75rem",
+                      color: isDark ? "#94a3b8" : "#64748b",
+                      marginLeft: "0.5rem"
+                    },
+                    children: "(Required)"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                Toggle,
+                {
+                  checked: isEnabled,
+                  onChange: () => handleToggle(category.code),
+                  disabled: category.isRequired,
+                  primaryColor: bannerConfig.primaryColor
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "p",
+              {
+                style: {
+                  margin: "0.5rem 0 0",
+                  fontSize: "0.8rem",
+                  opacity: 0.7
+                },
+                children: categoryTranslation?.description || category.description
+              }
+            )
+          ] }, category.code);
+        })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: footerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: hidePreferenceCenter, style: buttonSecondaryStyle, type: "button", children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleSave, style: buttonPrimaryStyle, type: "button", children: translations.savePreferencesText || "Save Preferences" })
+      ] })
+    ] })
+  ] });
+}
+function Toggle({
+  checked,
+  onChange,
+  disabled,
+  primaryColor
+}) {
+  const trackStyle = {
+    position: "relative",
+    width: "44px",
+    height: "24px",
+    backgroundColor: checked ? primaryColor || "#3b82f6" : "#94a3b8",
+    borderRadius: "12px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    transition: "background-color 0.2s"
+  };
+  const thumbStyle = {
+    position: "absolute",
+    top: "2px",
+    left: checked ? "22px" : "2px",
+    width: "20px",
+    height: "20px",
+    backgroundColor: "#ffffff",
+    borderRadius: "50%",
+    transition: "left 0.2s",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      onClick: disabled ? void 0 : onChange,
+      style: trackStyle,
+      disabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: thumbStyle })
+    }
+  );
+}
+
+// src/components/ConsentGate.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ConsentGate({
+  category,
+  children,
+  fallback = null,
+  loading = null
+}) {
+  const { hasConsent, isLoading } = useConsentGate(category);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: loading });
+  }
+  if (hasConsent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: fallback });
+}
+function withConsentGate(Component, category, FallbackComponent) {
+  return function ConsentGatedComponent(props) {
+    const { hasConsent, isLoading } = useConsentGate(category);
+    if (isLoading) {
+      return null;
+    }
+    if (hasConsent) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...props });
+    }
+    if (FallbackComponent) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FallbackComponent, { ...props });
+    }
+    return null;
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConsentGate,
+  ConsentIQApiClient,
+  ConsentIQProvider,
+  CookieBanner,
+  PreferenceCenter,
+  detectCountry,
+  detectLanguage,
+  generateSubjectId,
+  getOrCreateSubjectId,
+  useConsent,
+  useConsentGate,
+  useConsentIQ,
+  withConsentGate
+});