@zezosoft/zezo-ott-react-native-ui-kit 1.0.5 → 1.0.7

package/src/components/Auth/QrLogin/QrLogin.tsx

@@ -9,14 +9,13 @@ import {
   Dimensions,
   TouchableOpacity,
   ActivityIndicator,
-  StatusBar,
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { Text } from '../../Text';
 import AppHeader from '../../Headers/AppHeader';
-import { useTheme } from '../../../theme/hook/useTheme';
-import type { AppTheme } from '../../../theme/themes';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../theme/themes';
 import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
 import {
   Camera,
@@ -26,6 +25,7 @@ import {
   type Code as BaseCode,
 } from 'react-native-vision-camera';
 import QrViewArea from './components/QrViewArea';
+import { AppStatusBar } from '../../common/AppStatusBar';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 const HEADER_HEIGHT = 25;
@@ -43,7 +43,7 @@ export type QrLoginProps = {
   scanButtonText?: string;
   onBackPress?: () => void;
   onScanSuccess?: (value: string) => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   cameraType?: 'back' | 'front';
   layout?: 'one' | 'two';
 };
@@ -65,7 +65,7 @@ export const QrLogin: React.FC<QrLoginProps> = ({
   cameraType = DEFAULTS.cameraType,
   layout = 'one',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const { colors } = appliedTheme;
 
   const [scanActive, setScanActive] = useState(false);
@@ -144,17 +144,13 @@ export const QrLogin: React.FC<QrLoginProps> = ({
 
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <StatusBar
-        translucent
-        backgroundColor="transparent"
-        barStyle={appliedTheme.dark ? 'light-content' : 'dark-content'}
-      />
+      <AppStatusBar theme={theme} />
 
       <View style={[styles.headerWrapper, { height: HEADER_HEIGHT }]}>
         <AppHeader
           title={title}
           onBackPress={onBackPress}
-          theme={appliedTheme}
+          theme={theme}
           titleAlign="left"
         />
       </View>
@@ -170,7 +166,7 @@ export const QrLogin: React.FC<QrLoginProps> = ({
                 codeScanner={codeScanner}
               />
               <QrViewArea
-                theme={appliedTheme}
+                theme={theme}
                 layout={layout}
                 headerHeight={HEADER_HEIGHT}
               />

package/src/components/Auth/QrLogin/components/QrViewArea.tsx

@@ -13,8 +13,8 @@ import {
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import Svg, { Rect } from 'react-native-svg';
-import type { AppTheme } from '../../../../theme/themes';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
@@ -22,7 +22,7 @@ type QrViewAreaProps = {
   scanBoxWidth?: number;
   layout?: 'one' | 'two';
   headerHeight?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const QrViewArea: React.FC<QrViewAreaProps> = ({
@@ -31,7 +31,7 @@ const QrViewArea: React.FC<QrViewAreaProps> = ({
   headerHeight = 60,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const { colors } = appliedTheme;
 
   const anim = useRef(new Animated.Value(0)).current;

package/src/components/Auth/SignUp/SignUp.tsx

@@ -18,12 +18,12 @@ import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import TextButton from '../../Button/TextButton';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type FormValues = {
@@ -52,7 +52,7 @@ export interface SignupProps {
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
   };
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   loadingSubmitBtn?: boolean;
   text?: {
     usernameLabel?: string;
@@ -120,7 +120,7 @@ const Signup: React.FC<SignupProps> = ({
     },
     mode: 'onChange',
   });
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -144,7 +144,7 @@ const Signup: React.FC<SignupProps> = ({
 
   return (
     <BackgroundLayout
-      theme={resolvedTheme}
+      theme={overrideTheme}
       backgroundImage={backgroundImage?.source}
       gradientSplitBackground={
         isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
@@ -160,7 +160,7 @@ const Signup: React.FC<SignupProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -205,7 +205,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.username?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                   />
                 )}
               />
@@ -236,7 +236,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -277,7 +277,7 @@ const Signup: React.FC<SignupProps> = ({
                     spellCheck={false}
                     autoCorrect={false}
                     autoComplete="off"
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                   />
                 )}
               />
@@ -312,7 +312,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.confirmPassword?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="none"
                     autoCapitalize="none"
                     spellCheck={false}
@@ -334,7 +334,7 @@ const Signup: React.FC<SignupProps> = ({
                   <Button.Primary
                     title={text?.signupButton || 'Sign up'}
                     disabled={!isValid}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     loading={loadingSubmitBtn || isLoading}
                     loadingText={text?.loadingSubmitBtnText || 'Signing up...'}
                     onPress={handleSubmit(handleFormSubmit)}

package/src/components/Auth/SplashScreen/SplashScreen.tsx

@@ -4,18 +4,16 @@
  */
 
 import React, { useEffect, useMemo, useCallback } from 'react';
-import { StatusBar, type ViewStyle } from 'react-native';
-import Color from 'color';
-
+import { type ViewStyle } from 'react-native';
 import SplashImage from './components/SplashImage/SplashImage';
 import SplashVideo from './components/SplashVideo/SplashVideo';
 import SplashLottie from './components/SplashLottie/SplashLottie';
 
-import { useTheme } from '../../../theme';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { useSplashCache } from '../../../hooks/useSplashCache';
+import { AppStatusBar } from '../../common/AppStatusBar';
 
 type SplashType = 'image' | 'video' | 'lottie-animation';
 
@@ -36,7 +34,7 @@ type SplashScreenProps = {
   splashScreenConfig: SplashScreenConfig;
   innerContainerStyle?: ViewStyle;
   onRedirect: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   backgroundImage?: {
     source?: string | null;
     onImageError?: (error: Error) => void;
@@ -70,7 +68,6 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
     backgroundColor: splashBgColor,
   } = splashScreenConfig;
 
-  const { theme } = useTheme(overrideTheme);
   const isRemote = splashSource.startsWith('http');
   const isImageSplash = splashType === 'image';
 
@@ -159,23 +156,6 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
     handleRedirect,
   ]);
 
-  /** 🎨 Safe Background Color Calculation */
-  const safeBgColor = useMemo(() => {
-    try {
-      if (!splashBgColor) return theme.colors.background;
-      const c = Color(splashBgColor);
-      return c.alpha() < 0.8 ? theme.colors.background : c.hex();
-    } catch {
-      return theme.colors.background;
-    }
-  }, [splashBgColor, theme.colors.background]);
-
-  const statusBarStyle: 'light-content' | 'dark-content' = Color(
-    safeBgColor
-  ).isDark()
-    ? 'light-content'
-    : 'dark-content';
-
   return (
     <BackgroundLayout
       backgroundImage={isImageSplash ? backgroundImage.source : undefined}
@@ -183,15 +163,22 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
       resizeMode={backgroundImage.resizeMode ?? 'cover'}
       innerContainerStyle={innerContainerStyle}
       onImageError={backgroundImage.onImageError}
-      theme={theme}
+      theme={overrideTheme}
       gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
     >
-      <StatusBar
-        translucent
-        backgroundColor="transparent"
-        barStyle={statusBarStyle}
+      <AppStatusBar
+        theme={{
+          ...overrideTheme,
+          dark: {
+            ...overrideTheme?.dark,
+            background: splashBgColor,
+          },
+          light: {
+            ...overrideTheme?.light,
+            background: splashBgColor,
+          },
+        }}
       />
-
       {renderSplashContent()}
     </BackgroundLayout>
   );

package/src/components/Auth/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -1,41 +1,53 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Thu 17 Oct 2025
+ * @lastModified Sat 25 Oct 2025
  */
-import React, { useMemo, useCallback, useState } from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
-import Video from 'react-native-video';
+
+import React, {
+  useMemo,
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+} from 'react';
+import { StyleSheet, Animated, View as RNView } from 'react-native';
+import Video, {
+  type OnLoadData,
+  type OnVideoErrorData,
+} from 'react-native-video';
 import Display from '../../../../../utils/Display';
-import { useTheme } from '../../../../../theme';
+import { useInternalTheme } from '../../../../../theme/hook';
+import { View } from '../../../../View';
+import { Loader } from '../../../../Loader/Loader';
 
 interface IProps {
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   source: string;
-  fullscreen: boolean;
+  fullscreen?: boolean;
   resizeMode?: 'cover' | 'contain' | 'stretch' | 'none';
   onEnd?: () => void;
   onLoadStart?: () => void;
-  onLoaded?: (data: any) => void;
-  onError?: (error: any) => void;
+  onLoaded?: (data: OnLoadData) => void;
+  onError?: (error: string) => void;
 }
 
 const SplashVideo: React.FC<IProps> = ({
-  fullscreen,
-  height,
+  fullscreen = false,
+  width = Display.fullWidth,
+  height = Display.fullHeight,
   source,
   resizeMode = 'cover',
-  width,
   onEnd,
   onLoadStart,
   onLoaded,
   onError,
 }) => {
-  const { theme: applyTheme } = useTheme();
-  const [loaded, setLoaded] = useState(false);
-  const fadeAnim = useMemo(() => new Animated.Value(0), []);
+  const { theme: applyTheme } = useInternalTheme();
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const [isLoaded, setIsLoaded] = useState(false);
 
-  // Video style
+  /** 🎨 Compute video dimensions */
   const videoStyle = useMemo(
     () => ({
       width: fullscreen ? Display.fullWidth : width,
@@ -44,77 +56,71 @@ const SplashVideo: React.FC<IProps> = ({
     [fullscreen, width, height]
   );
 
-  // Event handlers
+  /** 🌀 Fade-in animation */
+  const animateIn = useCallback(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  /** 📦 Resolve video URI */
+  const resolveUri = useCallback((src: string): string => {
+    if (!src) return '';
+    if (/^(https?|file):\/\//.test(src)) return src;
+    return `file://${src}`;
+  }, []);
+
+  /** 🔄 Video lifecycle handlers */
   const handleLoadStart = useCallback(() => {
-    setLoaded(false);
-    fadeAnim.setValue(0); // Reset fade animation
+    setIsLoaded(false);
+    fadeAnim.setValue(0);
     onLoadStart?.();
-  }, [onLoadStart, fadeAnim]);
+  }, [fadeAnim, onLoadStart]);
 
   const handleLoad = useCallback(
-    (data: any) => {
-      setLoaded(true);
-
-      // Fade-in animation
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 400, // 0.4s smooth fade
-        useNativeDriver: true,
-      }).start();
-
+    (data: OnLoadData) => {
+      setIsLoaded(true);
+      animateIn();
       onLoaded?.(data);
     },
-    [onLoaded, fadeAnim]
+    [animateIn, onLoaded]
   );
 
   const handleError = useCallback(
-    (e: any) => {
-      const error =
-        e?.error?.message ||
-        e?.message ||
-        e?.error ||
-        e ||
+    (err: OnVideoErrorData | any) => {
+      const errorMsg =
+        err?.error?.message ||
+        err?.message ||
+        JSON.stringify(err) ||
         'Unknown video error';
-      console.error('Video playback error:', error);
-      setLoaded(false);
-      onError?.(error);
+      console.error('🎬 SplashVideo Error:', errorMsg);
+      setIsLoaded(false);
+      onError?.(errorMsg);
     },
     [onError]
   );
 
-  const resolveUri = (src?: string): string => {
-    if (!src) return '';
-    if (
-      src.startsWith('http') ||
-      src.startsWith('https') ||
-      src.startsWith('file://')
-    ) {
-      return src;
-    }
-    return `file://${src}`;
-  };
+  /** 🧹 Cleanup animation */
+  useEffect(() => {
+    return () => fadeAnim.stopAnimation();
+  }, [fadeAnim]);
 
+  /** 🧱 Render */
   return (
-    <View
-      style={[
-        videoStyle,
-        styles.wrapper,
-        { backgroundColor: applyTheme.colors.background },
-      ]}
-    >
-      {/* Black background layer */}
-      {!loaded && (
-        <View
-          style={[
-            videoStyle,
-            styles.blackLayer,
-            { backgroundColor: applyTheme.colors.background },
-          ]}
-        />
+    <View style={styles.container}>
+      {/* Loader shown before video fully loads */}
+      {!isLoaded && (
+        <RNView style={styles.loaderWrapper}>
+          <Loader color={applyTheme.colors.primary} />
+        </RNView>
       )}
 
-      {/* Animated video */}
-      <Animated.View style={[videoStyle, { opacity: fadeAnim }]}>
+      {/* Video Layer */}
+      <Animated.View
+        style={[videoStyle, { opacity: fadeAnim, position: 'absolute' }]}
+      >
         <Video
           source={{ uri: resolveUri(source) }}
           style={videoStyle}
@@ -143,6 +149,8 @@ const SplashVideo: React.FC<IProps> = ({
           playWhenInactive={false}
           allowsExternalPlayback={false}
           automaticallyWaitsToMinimizeStalling
+          controls={false}
+          repeat={false}
         />
       </Animated.View>
     </View>
@@ -150,14 +158,22 @@ const SplashVideo: React.FC<IProps> = ({
 };
 
 const styles = StyleSheet.create({
-  wrapper: {
-    overflow: 'hidden',
+  container: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  blackLayer: {
-    ...StyleSheet.absoluteFillObject,
 
+  loaderWrapper: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
     zIndex: 1,
   },
+  loader: {
+    transform: [{ scale: 1.2 }],
+  },
 });
 
 export default React.memo(SplashVideo);

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -7,8 +7,9 @@ import {
   type ImageStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import type { ITheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { useSplashCache } from '../../hooks/useSplashCache';
+import { useInternalTheme } from '../../theme/hook';
 
 interface BackgroundLayoutProps {
   children: React.ReactNode;
@@ -17,7 +18,7 @@ interface BackgroundLayoutProps {
   gradientSplitBackground?: number;
   resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
   innerContainerStyle?: ViewStyle;
-  theme: ITheme;
+  theme?: ThemeOverride;
   onImageError?: (error: Error) => void;
 }
 
@@ -30,9 +31,10 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
     resizeMode = 'cover',
     innerContainerStyle,
     onImageError,
-    theme,
+    theme: themeOverride,
   } = props;
 
+  const { theme } = useInternalTheme(themeOverride);
   const {
     data: { backgroundPath: localPathBackground },
   } = useSplashCache({

package/src/components/BlogView/BlogView.tsx

@@ -9,10 +9,10 @@ import {
 } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import { Text } from '../Text';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import AppHeader from '../Headers/AppHeader';
 import { scale, moderateScale } from 'react-native-size-matters';
-import type { AppTheme, ITheme } from '../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type BlogViewProps = {
@@ -20,7 +20,7 @@ type BlogViewProps = {
   containerStyle?: ViewStyle;
   scrollable?: boolean;
   emptyText?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 
   // Header customization
   headerTitle?: string;
@@ -51,7 +51,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
   renderEmpty,
   isLoading = false,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
 
   const renderFinalHeader = () => {
     if (renderHeader) return renderHeader();
@@ -62,7 +62,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
         onRightPress={onRightPress}
         title={headerTitle}
         titleAlign="left"
-        theme={appliedTheme}
+        theme={theme}
         titleStyle={{
           ...styles.headerTitle,
           color: appliedTheme.colors.onBackground,
@@ -83,7 +83,9 @@ export const BlogView: React.FC<BlogViewProps> = ({
     if (renderContent) return renderContent();
     if (content) {
       return (
-        <Markdown style={getMarkdownStyles(appliedTheme)}>{content}</Markdown>
+        <Markdown style={getMarkdownStyles(appliedTheme, isDarkMode)}>
+          {content}
+        </Markdown>
       );
     }
 
@@ -130,7 +132,10 @@ export const BlogView: React.FC<BlogViewProps> = ({
   );
 };
 
-const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
+const getMarkdownStyles = (
+  theme: ITheme,
+  isDarkMode: boolean
+): { [key: string]: TextStyle } => {
   const baseColor = theme.colors.textPrimary;
 
   return {
@@ -161,7 +166,7 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
     ordered_list: { color: baseColor },
     link: { color: theme.colors.primary },
     blockquote: {
-      backgroundColor: theme.dark
+      backgroundColor: isDarkMode
         ? theme.colors.surfaceVariant
         : theme.colors.surface,
       color: theme.colors.onSurface,

package/src/components/Button/BackBtn.tsx

@@ -13,17 +13,17 @@ import {
 } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { BlurView } from '@react-native-community/blur';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 
 type BackBtnProps = {
   size?: number;
   color?: string;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   enableBlur?: boolean;
 };
 
@@ -36,7 +36,7 @@ const BackBtn: React.FC<BackBtnProps> = ({
   enableBlur = false,
 }) => {
   const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const handlePress = () => {
     if (onPress) {

package/src/components/Button/MenuBtn.tsx

@@ -21,15 +21,15 @@ import {
 import { Ellipsis } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BlurView } from '@react-native-community/blur';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import type { MenuAction } from '../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type MenuBtnProps = {
   actions: MenuAction[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   style?: StyleProp<ViewStyle>;
   enableBlur?: boolean;
 };
@@ -41,7 +41,7 @@ const MenuBtn: React.FC<MenuBtnProps> = ({
   enableBlur = false,
 }) => {
   const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [visible, setVisible] = useState(false);
   const [menuPosition, setMenuPosition] = useState<{
     top: number;