@iqworksai/consentiq-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,919 @@
+// src/provider.tsx
+import { createContext, useContext, useEffect, useState, useCallback, useMemo } from "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
+import { jsx } from "react/jsx-runtime";
+var ConsentIQContext = 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] = useState(null);
+  const [consent, setConsent] = useState(DEFAULT_CONSENT);
+  const [marketingConsent, setMarketingConsent] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [isBannerVisible, setIsBannerVisible] = useState(false);
+  const [isPreferenceCenterVisible, setIsPreferenceCenterVisible] = useState(false);
+  const [language, setLanguage] = useState("en");
+  const [regulation, setRegulation] = useState(null);
+  const [subjectId, setSubjectId] = useState("");
+  const [hasExistingConsent, setHasExistingConsent] = useState(false);
+  const apiClient = useMemo(
+    () => new ConsentIQApiClient(propertyKey, apiUrl, debug),
+    [propertyKey, apiUrl, debug]
+  );
+  const loadLocalConsent = 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 = useCallback((consentData) => {
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.setItem(CONSENT_STORAGE_KEY, JSON.stringify(consentData));
+    } catch {
+    }
+  }, []);
+  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 = 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 = useCallback(
+    (category) => {
+      return consent[category] === true;
+    },
+    [consent]
+  );
+  const hasMarketingConsent = useCallback(
+    (channel) => {
+      return marketingConsent[channel] === true;
+    },
+    [marketingConsent]
+  );
+  const acceptAll = 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 = 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 = useCallback(
+    async (updates) => {
+      const newConsent = {
+        ...consent,
+        ...updates,
+        necessary: true
+        // Always enforce necessary
+      };
+      setConsent(newConsent);
+      await submitConsent(newConsent, marketingConsent);
+    },
+    [consent, marketingConsent, submitConsent]
+  );
+  const updateMarketingConsent = useCallback(
+    async (updates) => {
+      const newMarketingConsent = { ...marketingConsent, ...updates };
+      setMarketingConsent(newMarketingConsent);
+      await submitConsent(consent, newMarketingConsent);
+    },
+    [consent, marketingConsent, submitConsent]
+  );
+  const showBanner = useCallback(() => {
+    setIsBannerVisible(true);
+    onOpen?.();
+  }, [onOpen]);
+  const hideBanner = useCallback(() => {
+    setIsBannerVisible(false);
+    onClose?.();
+  }, [onClose]);
+  const showPreferenceCenter = useCallback(() => {
+    setIsPreferenceCenterVisible(true);
+    setIsBannerVisible(false);
+    onOpen?.();
+  }, [onOpen]);
+  const hidePreferenceCenter = useCallback(() => {
+    setIsPreferenceCenterVisible(false);
+    onClose?.();
+  }, [onClose]);
+  const resetConsent = useCallback(() => {
+    setConsent(DEFAULT_CONSENT);
+    setMarketingConsent({});
+    setHasExistingConsent(false);
+    if (typeof window !== "undefined") {
+      localStorage.removeItem(CONSENT_STORAGE_KEY);
+      localStorage.removeItem("consentiq_subject_id");
+    }
+  }, []);
+  const contextValue = 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__ */ jsx(ConsentIQContext.Provider, { value: contextValue, children });
+}
+function useConsentIQ() {
+  const context = 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
+import { Fragment, jsx as jsx2, jsxs } from "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__ */ jsxs(Fragment, { children: [
+    resolvedPosition === "center" && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 9998
+        }
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx2(
+            "img",
+            {
+              src: bannerConfig.logoUrl,
+              alt: "",
+              style: { height: "1.5rem", marginBottom: "0.75rem" }
+            }
+          ),
+          translations.bannerTitle && /* @__PURE__ */ jsx2(
+            "h2",
+            {
+              style: {
+                fontSize: "1rem",
+                fontWeight: 600,
+                marginBottom: "0.5rem",
+                margin: 0
+              },
+              children: translations.bannerTitle
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "0.5rem",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: acceptAll,
+                    style: buttonPrimaryStyle,
+                    type: "button",
+                    children: translations.acceptAllText || "Accept All"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: rejectAll,
+                    style: buttonSecondaryStyle,
+                    type: "button",
+                    children: translations.rejectAllText || "Reject All"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: showPreferenceCenter,
+                    style: buttonLinkStyle,
+                    type: "button",
+                    children: translations.customizeText || "Customize"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/PreferenceCenter.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function PreferenceCenter({ className, theme, style }) {
+  const {
+    config,
+    consent,
+    isPreferenceCenterVisible,
+    isLoading,
+    language,
+    updateConsent,
+    hidePreferenceCenter
+  } = useConsentIQ();
+  const [localConsent, setLocalConsent] = useState2(consent);
+  useEffect2(() => {
+    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__ */ jsxs2("div", { style: containerStyle, className, children: [
+    /* @__PURE__ */ jsx3("div", { style: backdropStyle, onClick: hidePreferenceCenter }),
+    /* @__PURE__ */ jsxs2("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-label": "Cookie preferences", children: [
+      /* @__PURE__ */ jsxs2("div", { style: headerStyle, children: [
+        /* @__PURE__ */ jsx3("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 600 }, children: "Cookie Preferences" }),
+        /* @__PURE__ */ jsx3(
+          "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__ */ jsxs2("div", { style: bodyStyle, children: [
+        /* @__PURE__ */ jsx3("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__ */ jsxs2("div", { style: { display: "flex", gap: "0.5rem", marginBottom: "1.5rem" }, children: [
+          /* @__PURE__ */ jsx3("button", { onClick: handleAcceptAll, style: buttonTextStyle, type: "button", children: "Enable All" }),
+          /* @__PURE__ */ jsx3("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__ */ jsxs2("div", { style: categoryStyle, children: [
+            /* @__PURE__ */ jsxs2("div", { style: toggleContainerStyle, children: [
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsx3(
+                  "h3",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: "0.95rem",
+                      fontWeight: 600
+                    },
+                    children: categoryTranslation?.title || category.name
+                  }
+                ),
+                category.isRequired && /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "0.75rem",
+                      color: isDark ? "#94a3b8" : "#64748b",
+                      marginLeft: "0.5rem"
+                    },
+                    children: "(Required)"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx3(
+                Toggle,
+                {
+                  checked: isEnabled,
+                  onChange: () => handleToggle(category.code),
+                  disabled: category.isRequired,
+                  primaryColor: bannerConfig.primaryColor
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3(
+              "p",
+              {
+                style: {
+                  margin: "0.5rem 0 0",
+                  fontSize: "0.8rem",
+                  opacity: 0.7
+                },
+                children: categoryTranslation?.description || category.description
+              }
+            )
+          ] }, category.code);
+        })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: footerStyle, children: [
+        /* @__PURE__ */ jsx3("button", { onClick: hidePreferenceCenter, style: buttonSecondaryStyle, type: "button", children: "Cancel" }),
+        /* @__PURE__ */ jsx3("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__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      onClick: disabled ? void 0 : onChange,
+      style: trackStyle,
+      disabled,
+      children: /* @__PURE__ */ jsx3("span", { style: thumbStyle })
+    }
+  );
+}
+
+// src/components/ConsentGate.tsx
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+function ConsentGate({
+  category,
+  children,
+  fallback = null,
+  loading = null
+}) {
+  const { hasConsent, isLoading } = useConsentGate(category);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx4(Fragment2, { children: loading });
+  }
+  if (hasConsent) {
+    return /* @__PURE__ */ jsx4(Fragment2, { children });
+  }
+  return /* @__PURE__ */ jsx4(Fragment2, { children: fallback });
+}
+function withConsentGate(Component, category, FallbackComponent) {
+  return function ConsentGatedComponent(props) {
+    const { hasConsent, isLoading } = useConsentGate(category);
+    if (isLoading) {
+      return null;
+    }
+    if (hasConsent) {
+      return /* @__PURE__ */ jsx4(Component, { ...props });
+    }
+    if (FallbackComponent) {
+      return /* @__PURE__ */ jsx4(FallbackComponent, { ...props });
+    }
+    return null;
+  };
+}
+export {
+  ConsentGate,
+  ConsentIQApiClient,
+  ConsentIQProvider,
+  CookieBanner,
+  PreferenceCenter,
+  detectCountry,
+  detectLanguage,
+  generateSubjectId,
+  getOrCreateSubjectId,
+  useConsent,
+  useConsentGate,
+  useConsentIQ,
+  withConsentGate
+};