@redacto.io/consent-sdk-react 5.3.0 → 7.0.0

package/src/RedactoPrivacyCenter/styles/variables.css

@@ -1,8 +1,7 @@
 /* CSS Custom Properties for Privacy Center SDK */
 /* These variables are scoped and won't conflict with host app styles */
 
-:root,
-[data-theme="light"] {
+:root {
   /* Colors */
   --pc-primary: #3b82f6;
   --pc-primary-hover: #2563eb;
@@ -89,45 +88,9 @@
   
   /* Icon filters for dark theme */
   --pc-icon-filter: 0;
-}
-
-[data-theme="dark"] {
-  /* Colors */
-  --pc-primary: #60a5fa;
-  --pc-primary-hover: #3b82f6;
-  --pc-primary-active: #2563eb;
-  --pc-secondary: #9ca3af;
-  --pc-secondary-hover: #6b7280;
-  --pc-success: #34d399;
-  --pc-error: #f87171;
-  --pc-warning: #fbbf24;
-  --pc-warning-bg: #78350f;
-  --pc-warning-border: #fbbf24;
-  --pc-warning-text: #fef3c7;
-  --pc-info: #60a5fa;
 
-  /* Backgrounds */
-  --pc-bg-shell: #111827;
-  --pc-bg-primary: #1b2435;
-  --pc-bg-secondary: #243044;
-  --pc-bg-tertiary: #31405a;
-  --pc-bg-hover: #243044;
-  --pc-bg-active: #31405a;
-  --pc-bg-overlay: rgba(0, 0, 0, 0.7);
-
-  /* Text */
-  --pc-text-primary: #f9fafb;
-  --pc-text-secondary: #d1d5db;
-  --pc-text-tertiary: #9ca3af;
-  --pc-text-inverse: #111827;
-  --pc-text-disabled: #6b7280;
-
-  /* Borders */
-  --pc-border-color: rgba(148, 163, 184, 0.18);
-  --pc-border-color-hover: rgba(148, 163, 184, 0.28);
-  --pc-border-color-focus: #60a5fa;
-  --pc-sidebar-shadow: 14px 0 36px rgba(2, 6, 23, 0.42), 1px 0 0 rgba(148, 163, 184, 0.08);
-  
-  /* Icon filters for dark theme */
-  --pc-icon-filter: 1;
+  /* Manage Consent toolbar: search, filters, export */
+  --pc-consent-toolbar-control-height: 2rem;
+  /* Header: language, notifications, theme (same pixel row as compact controls) */
+  --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
 }

package/src/RedactoPrivacyCenter/table/AdvancedTable.tsx

@@ -67,6 +67,7 @@ export default function AdvancedTable<TData extends Record<string, any>>({
   expandedComponent,
 }: AdvancedTableProps<TData>) {
   const { t } = useTranslation();
+  const [hoveredRowId, setHoveredRowId] = React.useState<string | null>(null);
   if (!table) return null;
 
   return (
@@ -111,8 +112,7 @@ export default function AdvancedTable<TData extends Record<string, any>>({
               const onRowClick = meta.onRowClick;
               const handleRowClick = onRowClick
                 ? (e: React.MouseEvent) => {
-                  e.preventDefault();
-                  onRowClick(row.original);
+                  onRowClick(row.original, row);
                 }
                 : undefined;
 
@@ -124,8 +124,23 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                 <React.Fragment key={row.id}>
                   <PCTable.Row
                     className={classNames?.rowClassName}
-                    style={onRowClick ? { cursor: 'pointer' } : {}}
+                    style={{
+                      ...(onRowClick ? { cursor: 'pointer' } : {}),
+                      ...(row.getIsExpanded() ? { borderBottom: 'none' } : {}),
+                      ...(hoveredRowId === row.id
+                        ? { backgroundColor: getVar('--pc-bg-hover') }
+                        : {}),
+                    }}
                     onClick={handleRowClick}
+                    onMouseEnter={() => setHoveredRowId(row.id)}
+                    onMouseLeave={(e) => {
+                      const nextSibling = e.currentTarget.nextElementSibling;
+                      const relatedTarget = e.relatedTarget as Node | null;
+                      if (nextSibling && relatedTarget && nextSibling.contains(relatedTarget)) {
+                        return;
+                      }
+                      setHoveredRowId((prev) => (prev === row.id ? null : prev));
+                    }}
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCellBasic
@@ -141,12 +156,16 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                     <PCTable.Row
                       className={classNames?.expandedRowClassName}
                       style={{
-                        overflow: 'hidden',
-                        transition: 'all 0.3s ease-in-out',
-                        maxHeight: row.getIsExpanded() ? '2000px' : '0',
-                        opacity: row.getIsExpanded() ? 1 : 0,
-                        height: row.getIsExpanded() ? 'auto' : '0',
-                        minHeight: row.getIsExpanded() ? 'auto' : '0',
+                        pointerEvents: row.getIsExpanded() ? 'auto' : 'none',
+                      }}
+                      onMouseEnter={() => setHoveredRowId(row.id)}
+                      onMouseLeave={(e) => {
+                        const previousSibling = e.currentTarget.previousElementSibling;
+                        const relatedTarget = e.relatedTarget as Node | null;
+                        if (previousSibling && relatedTarget && previousSibling.contains(relatedTarget)) {
+                          return;
+                        }
+                        setHoveredRowId((prev) => (prev === row.id ? null : prev));
                       }}
                     >
                       <PCTable.Cell
@@ -154,18 +173,19 @@ export default function AdvancedTable<TData extends Record<string, any>>({
                         className={classNames?.expandedCellClassName}
                         style={{
                           padding: row.getIsExpanded() ? undefined : '0',
-                          transition: 'all 0.3s ease-in-out',
-                          height: row.getIsExpanded() ? 'auto' : '0',
-                          paddingTop: row.getIsExpanded() ? undefined : '0',
-                          paddingBottom: row.getIsExpanded() ? undefined : '0',
+                          height: row.getIsExpanded() ? undefined : '0',
+                          border: 'none',
                         }}
                       >
                         <div
                           style={{
-                            transition: 'all 0.3s ease-in-out',
-                            transform: row.getIsExpanded() ? 'translateY(0)' : 'translateY(-8px)',
+                            overflow: 'hidden',
+                            maxHeight: row.getIsExpanded() ? '1200px' : '0',
                             opacity: row.getIsExpanded() ? 1 : 0,
-                            height: row.getIsExpanded() ? 'auto' : '0',
+                            transform: row.getIsExpanded() ? 'translateY(0)' : 'translateY(-6px)',
+                            transition:
+                              'max-height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 220ms ease',
+                            willChange: 'max-height, opacity, transform',
                           }}
                         >
                           {rowExpandedComponent(row)}

package/src/RedactoPrivacyCenter/table/AdvancedTablePagination.tsx

@@ -58,10 +58,10 @@ export default function AdvancedTablePagination<
         ...pcStyles.flexCol,
         ...pcStyles.itemsCenter,
         width: '100%',
-        paddingTop: getVar('--pc-spacing-sm'),
-        paddingBottom: getVar('--pc-spacing-sm'),
-        gap: getVar('--pc-spacing-sm'),
-        minHeight: '52px',
+        paddingTop: '0.375rem',
+        paddingBottom: '0.125rem',
+        gap: '0.375rem',
+        minHeight: '44px',
         opacity: shouldShowPagination ? 1 : 0.5,
         pointerEvents: shouldShowPagination ? 'auto' : 'none',
       }}
@@ -148,7 +148,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanPreviousPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -176,7 +175,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanPreviousPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -204,7 +202,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanNextPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -232,7 +229,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanNextPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -364,7 +360,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanPreviousPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -392,7 +387,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanPreviousPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -420,7 +414,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanNextPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),
@@ -448,7 +441,6 @@ export default function AdvancedTablePagination<
               disabled={!table.getCanNextPage()}
               style={{
                 borderRadius: '0.5rem',
-                boxShadow: getVar('--pc-shadow-sm'),
                 borderColor: getVar('--pc-border-color'),
                 color: getVar('--pc-text-primary'),
                 backgroundColor: getVar('--pc-bg-primary'),

package/src/RedactoPrivacyCenter/ui/Footer.tsx

@@ -1,13 +1,15 @@
 import { useTranslation } from 'react-i18next';
 import { pcStyles } from '../styles/pcStyles';
 import PoweredByRedacto from '../assets/poweredByRedacto.svg';
-import { useTheme } from '../context/theme';
+import { useBranding } from '../context/BrandingContext';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
 export default function Footer() {
   const { t } = useTranslation();
-  const { theme } = useTheme();
+  const branding = useBranding();
+
+  if (branding?.hide_platform_branding) return null;
 
   return (
     <footer
@@ -46,15 +48,7 @@ export default function Footer() {
             alignItems: 'center',
             justifyContent: 'center',
             minHeight: '1.75rem',
-            padding:
-              theme === 'dark' ? '0.25rem 0.5rem' : 0,
-            backgroundColor:
-              theme === 'dark' ? 'rgba(255, 255, 255, 0.92)' : 'transparent',
             borderRadius: '9999px',
-            boxShadow:
-              theme === 'dark'
-                ? '0 8px 18px rgba(2, 6, 23, 0.28)'
-                : 'none',
           }}
         >
           <img

package/src/RedactoPrivacyCenter/ui/PCInput.tsx

@@ -75,7 +75,7 @@ export function PCInput({
     return (
       <div className={className} style={wrapperStyle}>
         {label && <label style={pcStyles.inputLabel}>{label}</label>}
-        <div style={pcStyles.inputWithPrefix}>
+        <div className="pc-input-affix" style={pcStyles.inputWithPrefix}>
           {prefix && <span style={pcStyles.inputPrefix}>{prefix}</span>}
           <input
             ref={inputRef}

package/src/RedactoPrivacyCenter/ui/PCSelect.tsx

@@ -7,7 +7,7 @@ import {
   useLayoutEffect,
 } from 'react';
 import { pcStyles } from '../styles/pcStyles';
-import { ChevronDown, X } from 'lucide-react';
+import { ChevronDown, X, Check } from 'lucide-react';
 
 const getVar = (varName: string): string => `var(${varName})`;
 const useIsomorphicLayoutEffect =
@@ -32,6 +32,7 @@ export interface PCSelectProps {
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
   label?: ReactNode;
+  prefix?: ReactNode;
   /**
    * If true, the dropdown list width will match the trigger width.
    * Useful in tight filter rows where you want trigger + dropdown aligned.
@@ -40,6 +41,7 @@ export interface PCSelectProps {
   searchPlaceholder?: string;
   noOptionsMessage?: string;
   clearAriaLabel?: string;
+  showSelectedCheck?: boolean;
 }
 
 export function PCSelect({
@@ -55,10 +57,12 @@ export function PCSelect({
   disabled = false,
   size = 'md',
   label,
+  prefix,
   dropdownMatchTriggerWidth = false,
   searchPlaceholder = 'Search...',
   noOptionsMessage = 'No options found',
   clearAriaLabel = 'Clear selection',
+  showSelectedCheck = false,
 }: PCSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -112,7 +116,7 @@ export function PCSelect({
       const paddingLeft = parseFloat(computed.paddingLeft || '0') || 0;
       const paddingRight = parseFloat(computed.paddingRight || '0') || 0;
       // Chevron + spacing (and optional clear button) lives on the right
-      const iconAreaPx = clearable ? 52 : 32;
+      const iconAreaPx = clearable ? 52 : showSelectedCheck ? 46 : 32;
 
       const maxLabelWidth = options.reduce((max, opt) => {
         const w = measureTextWidth(opt.label ?? '', font);
@@ -267,6 +271,17 @@ export function PCSelect({
             setIsOpen((prev) => !prev);
           }}
         >
+          {prefix && (
+            <span style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              flexShrink: 0,
+              marginRight: '0.375rem',
+              color: pcStyles.textSecondary.color,
+            }}>
+              {prefix}
+            </span>
+          )}
           <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {value ? value.label : <span style={{ color: pcStyles.textSecondary.color }}>{placeholder}</span>}
           </span>
@@ -349,10 +364,14 @@ export function PCSelect({
                 <div
                   key={String(option.value)}
                   className="pc-select-option"
+                  data-selected={value?.value === option.value ? 'true' : 'false'}
                   style={{
                     ...optionStyle,
                     backgroundColor: getVar('--pc-bg-primary'),
-                    color: getVar('--pc-text-primary'),
+                    color:
+                      value?.value === option.value && showSelectedCheck
+                        ? getVar('--pc-primary')
+                        : getVar('--pc-text-primary'),
                     transition: 'background-color 0.2s ease, color 0.2s ease',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
@@ -360,7 +379,9 @@ export function PCSelect({
                     maxWidth: '100%',
                     ...(option.disabled && { opacity: 0.5, cursor: 'not-allowed' }),
                     ...(value?.value === option.value && {
-                      backgroundColor: getVar('--pc-bg-hover'),
+                      backgroundColor: showSelectedCheck
+                        ? 'rgba(59, 130, 246, 0.12)'
+                        : getVar('--pc-bg-hover'),
                     }),
                   }}
                   onClick={() => handleSelect(option)}
@@ -375,7 +396,32 @@ export function PCSelect({
                       : getVar('--pc-bg-primary');
                   }}
                 >
-                  {option.label}
+                  <span
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      gap: '0.5rem',
+                      width: '100%',
+                      minWidth: 0,
+                    }}
+                  >
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      {option.label}
+                    </span>
+                    {showSelectedCheck && (
+                      <span
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          opacity: value?.value === option.value ? 1 : 0,
+                          flexShrink: 0,
+                        }}
+                      >
+                        <Check size={14} strokeWidth={2.5} />
+                      </span>
+                    )}
+                  </span>
                 </div>
               ))
             )}

package/src/privacy-center.ts

@@ -37,11 +37,14 @@ export type {
   TokenExchangeResponse,
   FetchOrgParams,
   ConsentDataElement,
-  UserConsent,
+  PurposeItem,
+  ConsentGroup,
+  DisplayPurposeRow,
+  ConsentModalRecord,
+  GroupPurposesOut,
+  PaginationMeta,
   NominatorInfo,
   ConsentHistoryStatusSummary,
-  ProductConsentHistoryGroup,
-  NominatedPurposesGroup,
   Pagination,
   UserConsentDetail,
   UserConsentResponse,
@@ -70,6 +73,7 @@ export {
   createCaseRequest,
   fetchProducts,
   fetchUserConsents,
+  fetchGroupPurposes,
   manageConsent,
   fetchActivities,
   fetchCaseHistory,

package/src/RedactoPrivacyCenter/components/ThemeTransitionOverlay.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { IoSunnyOutline, IoMoonOutline } from 'react-icons/io5';
-import { useTheme } from '../context/theme';
-
-export default function ThemeTransitionOverlay() {
-  const { isTransitioning, targetTheme } = useTheme();
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const iconRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isTransitioning && overlayRef.current && iconRef.current) {
-      const overlay = overlayRef.current;
-      const icon = iconRef.current;
-      
-      // Trigger animation
-      overlay.style.display = 'flex';
-      // Force reflow to ensure display change is applied
-      overlay.offsetHeight;
-      overlay.style.opacity = '1';
-      icon.style.animation = 'none';
-      // Force reflow
-      icon.offsetHeight;
-      icon.style.animation = '';
-      
-      const timeout = setTimeout(() => {
-        if (overlay) {
-          overlay.style.opacity = '0';
-          setTimeout(() => {
-            if (overlay) {
-              overlay.style.display = 'none';
-            }
-          }, 300);
-        }
-      }, 1000);
-
-      return () => clearTimeout(timeout);
-    }
-  }, [isTransitioning, targetTheme]);
-
-  if (!targetTheme) return null;
-
-  const Icon = targetTheme === 'light' ? IoSunnyOutline : IoMoonOutline;
-  // Sun: golden yellow, Moon: soft blue/white
-  const iconColor = targetTheme === 'light' ? '#fbbf24' : '#c7d2fe';
-
-  return (
-    <div
-      ref={overlayRef}
-      className="pc-theme-transition-overlay"
-      style={{
-        display: 'none',
-        opacity: 0,
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none',
-        zIndex: 9999,
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'opacity 0.3s ease',
-      }}
-      aria-hidden="true"
-    >
-      <div
-        ref={iconRef}
-        className={`pc-theme-transition-icon pc-theme-transition-${targetTheme}`}
-        style={{
-          position: 'absolute',
-          bottom: '-150px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          fontSize: '120px',
-          color: iconColor,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Icon size={120} />
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/context/theme.tsx

@@ -1,127 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  type ReactNode,
-} from 'react';
-
-export type Theme = 'light' | 'dark';
-
-type ThemeContextType = {
-  theme: Theme;
-  toggleTheme: () => void;
-  setTheme: (theme: Theme) => void;
-  isTransitioning: boolean;
-  targetTheme: Theme | null;
-};
-
-const THEME_STORAGE_KEY = 'privacy-center-theme';
-
-const ThemeContext = createContext<ThemeContextType | null>(null);
-
-function getInitialTheme(defaultTheme?: Theme): Theme {
-  // If defaultTheme is provided, always use it (takes precedence over sessionStorage)
-  // This ensures that when a parent component explicitly sets a theme, it's respected
-  if (defaultTheme !== undefined) {
-    return defaultTheme;
-  }
-
-  // Otherwise, check sessionStorage first
-  if (typeof window !== 'undefined') {
-    const stored = sessionStorage.getItem(THEME_STORAGE_KEY);
-    if (stored === 'light' || stored === 'dark') {
-      return stored;
-    }
-
-    // Fallback to system preference
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-  }
-
-  return 'light';
-}
-
-type ThemeProviderProps = {
-  children: ReactNode;
-  defaultTheme?: Theme;
-};
-
-export const ThemeProvider = ({ children, defaultTheme }: ThemeProviderProps) => {
-  // Initialize with defaultTheme if provided, otherwise use stored/system preference
-  // When defaultTheme is provided, it takes precedence over sessionStorage
-  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme(defaultTheme));
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const [targetTheme, setTargetTheme] = useState<Theme | null>(null);
-  
-  // Ensure defaultTheme is applied on mount if provided
-  // This handles the case where sessionStorage had a different value
-  useEffect(() => {
-    if (defaultTheme !== undefined) {
-      setThemeState(defaultTheme);
-    }
-  }, []); // Only run on mount
-
-  const setTheme = useCallback((newTheme: Theme) => {
-    if (newTheme !== theme) {
-      setIsTransitioning(true);
-      setTargetTheme(newTheme);
-      setThemeState(newTheme);
-      // Reset transition state after animation completes
-      setTimeout(() => {
-        setIsTransitioning(false);
-        setTargetTheme(null);
-      }, 1000);
-    }
-  }, [theme]);
-
-  const toggleTheme = useCallback(() => {
-    setIsTransitioning(true);
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    setTargetTheme(newTheme);
-    setThemeState(newTheme);
-    // Reset transition state after animation completes
-    setTimeout(() => {
-      setIsTransitioning(false);
-      setTargetTheme(null);
-    }, 1000);
-  }, [theme]);
-
-  // Apply theme to document and persist to sessionStorage
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
-    sessionStorage.setItem(THEME_STORAGE_KEY, theme);
-  }, [theme]);
-
-  // Listen for system theme changes
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      // Only auto-switch if user hasn't explicitly set a preference
-      const stored = sessionStorage.getItem(THEME_STORAGE_KEY);
-      if (!stored) {
-        setThemeState(e.matches ? 'dark' : 'light');
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, isTransitioning, targetTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export const useTheme = (): ThemeContextType => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};