fix(Map): use properly typed optional theme context

Fixes TypeScript errors by properly importing and typing ThemeContext for optional theme support.

Changes:
- Import ThemeContext and ThemeContextValue types directly
- Use React.useContext(ThemeContext) with proper typing
- Optional theme context with null check
- Fallback to 'var(--ai-color-brand-primary)' if theme unavailable
- Changed fallback from '#e4002b' to CSS variable for generic library

TypeScript Fixes:
- Properly typed themeContext: ThemeContextValue | null
- No more TS2339 errors on brandColors/theme properties
- Removed unused useThemeContext import

Result: MapContent works with or without ThemeProvider, fully typed and error-free.

Author: JakeLin

packages/ui/src/components/Map/MapContent.tsx

@@ -5,7 +5,8 @@ import 'leaflet/dist/leaflet.css';
 import type { MapViewProps } from './MapView';
 import type { LocationData } from './types';
 import { Features } from '../Feature/Features';
-import { useThemeContext } from '../../providers/ThemeProvider';
+import { ThemeContext } from '../../providers/ThemeProvider';
+import type { ThemeContextValue } from '../../providers/ThemeProvider';
 import styles from './Map.module.css';
 
 // Component to handle map flying to selected location
@@ -223,13 +224,15 @@ export const MapContent: React.FC<MapViewProps> = ({
 
   const markerRefs = useRef<Map<string, L.Marker>>(new Map());
 
-  // Get resolved brand color from theme
-  const { brandColors, theme } = useThemeContext();
+  // Get resolved brand color from theme (optional - graceful fallback)
+  const themeContext: ThemeContextValue | null = React.useContext(ThemeContext);
+  const brandColors = themeContext?.brandColors;
+  const theme = themeContext?.theme || 'light';
   const primaryColor = brandColors?.primary;
   const MARKER_COLOR =
     typeof primaryColor === 'string'
       ? primaryColor
-      : primaryColor?.[theme] || primaryColor?.light || '#e4002b';
+      : primaryColor?.[theme] || primaryColor?.light || 'var(--ai-color-brand-primary)';
 
   const defaultIcon = useMemo(
     () =>