ota-components-module 1.3.2 → 1.3.10

package/assets/images/back_arrow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.84844 7.0005L6.69844 9.8505C6.89844 10.0505 6.99427 10.2838 6.98594 10.5505C6.9776 10.8172 6.88177 11.0505 6.69844 11.2505C6.49844 11.4505 6.26094 11.5547 5.98594 11.563C5.71094 11.5713 5.47344 11.4755 5.27344 11.2755L0.698438 6.7005C0.498438 6.5005 0.398438 6.26717 0.398438 6.0005C0.398438 5.73383 0.498438 5.5005 0.698438 5.3005L5.27344 0.7255C5.47344 0.5255 5.71094 0.429667 5.98594 0.438C6.26094 0.446333 6.49844 0.5505 6.69844 0.7505C6.88177 0.9505 6.9776 1.18383 6.98594 1.4505C6.99427 1.71717 6.89844 1.9505 6.69844 2.1505L3.84844 5.0005H14.9984C15.2818 5.0005 15.5193 5.09633 15.7109 5.288C15.9026 5.47967 15.9984 5.71717 15.9984 6.0005C15.9984 6.28383 15.9026 6.52133 15.7109 6.713C15.5193 6.90467 15.2818 7.0005 14.9984 7.0005H3.84844Z" fill="#607184"/>
+</svg>

package/mri-manifest.json

@@ -1,10 +1,42 @@
 {
-    "version": 1,
-    "swaggerVersion": 1,
-    "baseUrl": "http://example.com/api/v1.0",
-    "apiKey": "x-api-key",
-    "property:details": {
-        "mobileComponent": "",
-        "webComponent": ""
+    "integration": {
+      "authentication": {
+        "apiKeyName": "Partner1",
+        "type": "api_key"
+      },
+      "baseUrl": ""
+    },
+    "integrator": {
+      "lightLogo": "https://devxapacptmasterbfy6d.blob.core.windows.net/attachments-da9c8e2f-31cb-4584-b926-6a9c12cf380… partner new 1",
+      "mriProviderId": "1234",
+      "name": "Partner1",
+      "type": "partner"
+    },
+    "manifestSpecVersion": 2,
+    "modules": {
+      "property:maintenance:owner": {
+        "mobileComponent": "ModuleMiniAppScreen",
+        "webComponent": null,
+        "activateLink": "PartnerActivationScreen",
+        "configurationLink": "PartnerConfigurationScreen",
+        "providerActions": [
+          "maintenance:show",
+          "provider:activated",
+          "provider:configured"
+        ],
+        "description": "maintenance second partner 2"
+      },
+      "property:maintenance:tenant": {
+        "mobileComponent": "ModuleMiniAppScreen",
+        "webComponent": null,
+        "activateLink": "PartnerActivationScreen",
+        "configurationLink": "PartnerConfigurationScreen",
+        "providerActions": [
+          "maintenance:show",
+          "provider:activated",
+          "provider:configured"
+        ],
+        "description": "maintenance second partner 2"
+      }
     }
-}
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ota-components-module",
-  "version": "1.3.2",
+  "version": "1.3.10",
   "description": "Reusable UI components for OTA applications",
   "main": "src/index.ts",
   "scripts": {
@@ -19,8 +19,8 @@
     "react-native-safe-area-context": "^5.6.2"
   },
   "devDependencies": {
+    "mri-cli-app-dev": "^2.0.12",
     "@types/node": "^24.0.8",
-    "mri-cli-app-dev": "^1.0.5",
     "typescript": "^5.9.2",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0"

package/src/feedback/CustomAlert.tsx

@@ -25,6 +25,7 @@ interface CustomAlertProps {
   onPositivePress: (event: GestureResponderEvent) => void;
   onNegativePress?: (event: GestureResponderEvent) => void;
   viewStyle?: ViewStyle | ViewStyle[];
+  onRequestClose?: (event: GestureResponderEvent) => void;
 }
 
 /**
@@ -41,7 +42,8 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
   backgroundColor = Colors.whiteColor,
   textColor = Colors.textBlack,
   shadowColor = Colors.shadowColor,
-  viewStyle
+  viewStyle,
+  onRequestClose
 }) => {
   const styles = getStyles(backgroundColor, textColor, shadowColor);
   return (
@@ -50,7 +52,7 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
       transparent={true}
       visible={visible}
       statusBarTranslucent={true}
-      onRequestClose={onNegativePress || onPositivePress}
+      onRequestClose={onRequestClose || onNegativePress || onPositivePress}
     >
       <View style={styles.centeredView}>
         <View style={[styles.modalView, viewStyle]}>

package/src/image/ImagePickerBottomSheet.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import ImagePickerView from './ImagePickerView';
 import BottomSheetDialog from '../layout/BottomSheetDialog';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface ImagePickerBottomSheetProps {
   visible: boolean;
@@ -8,6 +9,8 @@ interface ImagePickerBottomSheetProps {
   onTakePhoto: () => void;
   onUploadFile: () => void;
   title?: string;
+  backgroundColor?: string;
+  textColor?: string;
 }
 
 const ImagePickerBottomSheet: React.FC<ImagePickerBottomSheetProps> = ({
@@ -16,10 +19,13 @@ const ImagePickerBottomSheet: React.FC<ImagePickerBottomSheetProps> = ({
   onTakePhoto,
   onUploadFile,
   title,
+  backgroundColor,
+  textColor,
 }) => {
 
   const ref: any = useRef(null);
-
+  const insets = useSafeAreaInsets();
+  
   const TakePhoto = () => {
     closeSheet();
 
@@ -45,14 +51,17 @@ const ImagePickerBottomSheet: React.FC<ImagePickerBottomSheetProps> = ({
     <BottomSheetDialog
       visible={visible}
       onClose={onClose}
-      height={200} // Adjust height as needed
+      height={200 + insets.bottom} // Adjust height as needed
       ref={ref}
+      containerStyle={{ backgroundColor: backgroundColor }}
     >
       <ImagePickerView
         title={title}
         onTakePhoto={TakePhoto}
         onUploadFile={UploadFile}
         onClose={closeSheet}
+        backgroundColor={backgroundColor}
+        textColor={textColor}
       />
     </BottomSheetDialog>
   );

package/src/image/ImagePickerView.tsx

@@ -17,6 +17,8 @@ interface ImagePickerViewProps {
   onTakePhoto: () => void;
   onUploadFile: () => void;
   onClose?: () => void;
+  backgroundColor?: string;
+  textColor?: string;
   containerStyle?: ViewStyle;
   title?: string;
 }
@@ -26,43 +28,46 @@ const ImagePickerView: React.FC<ImagePickerViewProps> = ({
   onUploadFile,
   onClose,
   containerStyle,
+  backgroundColor,
+  textColor,
   title = 'Add an Image',
 }) => {
 
   return (
-    <View style={[styles.container, containerStyle]}>
-      <View style={styles.header}>
+    <View style={[styles.container, containerStyle, { backgroundColor }]}>
+      <View style={[styles.header]}>
         <Label 
           text={title}
           size={TextSize.LARGE}
           weight={TextWeight.BOLD}
           textColorType="primary"
+          color={textColor}
         />
         {onClose && (
           <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-            <CloseIcon width={24} height={24} />
+            <CloseIcon width={24} height={24} color={textColor} />
           </TouchableOpacity>
         )}
       </View>
 
       <TouchableOpacity
-        style={styles.option}
+        style={[styles.option]}
         onPress={onTakePhoto}
         activeOpacity={0.7}
       >
-        <CameraIcon width={24} height={24} style={styles.icon} />
-        <Label text="Take a photo" size={TextSize.NORMAL} weight={TextWeight.NORMAL} textColorType="primary" />
+        <CameraIcon width={24} height={24} style={styles.icon} color={textColor} />
+        <Label text="Take a photo" size={TextSize.NORMAL} weight={TextWeight.NORMAL} textColorType="primary" color={textColor} />
       </TouchableOpacity>
 
       <View style={styles.divider} />
 
       <TouchableOpacity
-        style={styles.option}
+        style={[styles.option]}
         onPress={onUploadFile}
         activeOpacity={0.7}
       >
-         <FolderIcon width={24} height={24} style={styles.icon} />
-         <Label text="Upload a file" size={TextSize.NORMAL} weight={TextWeight.NORMAL} textColorType="primary" />
+         <FolderIcon width={24} height={24} style={styles.icon} color={textColor} />
+         <Label text="Upload a file" size={TextSize.NORMAL} weight={TextWeight.NORMAL} textColorType="primary" color={textColor} />
       </TouchableOpacity>
     </View>
   );

package/src/image/MultipleImagePreview.tsx

@@ -10,21 +10,18 @@ import {
   SafeAreaView,
   Platform,
   Text,
+  useWindowDimensions,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
 } from 'react-native';
 import { Image } from 'expo-image';
-import Checkbox from 'expo-checkbox';
 import { Colors } from '../utils/BaseStyle';
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { PropertyImage } from '../models/PropertyImage';
 import BottomSheetDialog, { BottomSheetDialogRef } from '../layout/BottomSheetDialog';
 import DeleteImageConfirmationDialog from '../feedback/DeleteImageConfirmationDialog';
 import { delete_image_confirmation_msg } from '../utils/Strings';
-
-// Get screen dimensions
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
-
-// Check if we're running on web
-const isWeb = Platform.OS === 'web';
+import { isWebDevice } from '@mri-software/ota-components-module/src/utils/Utils';
 
 type ImageSource = {
   uri: PropertyImage;
@@ -40,6 +37,10 @@ type MultipleImagePreviewProps = {
    * Initial image index to display
    */
   initialIndex?: number;
+  /**
+   * Theme of the preview
+   */
+  theme: any;
   /**
    * Callback when the preview is closed
    */
@@ -64,28 +65,54 @@ type MultipleImagePreviewProps = {
 const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
   images,
   initialIndex = 0,
+  theme,
   onClose,
   onDelete,
   OnMarkDefault,
   showDeleteButton = true,
 }) => {
   const [activeIndex, setActiveIndex] = useState(initialIndex);
+  const [deleteIndex, setDeleteIndex] = useState(0);
   const [visible, setVisible] = useState(true);
+  // Initialize with sorted images immediately - default image comes first
+  const [sortedImages, setSortedImages] = useState<PropertyImage[]>(() => {
+    return [...images].sort((a, b) => {
+      if (a.isDefault) return -1;
+      if (b.isDefault) return 1;
+      return 0;
+    });
+  });
   const flatListRef = useRef<FlatList>(null);
   const bottomSheetRef = useRef<BottomSheetDialogRef>(null);
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
 
   const insets = useSafeAreaInsets();
-
-  // Calculate dimensions based on platform
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const isWeb = isWebDevice(windowWidth) ? true : false;
+  // Calculate dimensions based on platform - recalculates on window resize
   const dimensions = useMemo(() => {
     // For web, we need to ensure each item takes exactly one screen width
+    const horizontalPadding = isWeb ? 120 : 20;
+    const actualImageWidth = windowWidth - (horizontalPadding * 2);
+   
     return {
-      itemWidth: SCREEN_WIDTH,
-      imageWidth: isWeb ? SCREEN_WIDTH - 40 : SCREEN_WIDTH - 40,
-      imageHeight: isWeb ? SCREEN_HEIGHT * 0.6 : SCREEN_HEIGHT * 0.4
+      itemWidth: windowWidth,
+      imageWidth: actualImageWidth,
+      imageHeight: isWeb ? windowHeight * 0.6 : actualImageWidth
     };
-  }, []);
+  }, [windowWidth, windowHeight]);
+
+  // Add dialog container style for web
+  const dialogContainerStyle = useMemo(() => {
+    if (isWeb) {
+      return {
+        alignSelf: 'center' as const,
+        width: dimensions.imageWidth,
+        maxWidth: dimensions.imageWidth,
+      };
+    }
+    return {};
+  }, [isWeb, dimensions.imageWidth]);
 
   const closeSheet = () => {
     if (bottomSheetRef.current) {
@@ -103,16 +130,16 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
   };
 
   // Create styles with the calculated dimensions
-  const styles = previewStyles(insets.top, dimensions);
+  const styles = previewStyles(isWeb, insets.top, theme, windowWidth, windowHeight, dimensions);
 
   // Process images to handle both local and remote URLs
   const processedImages = useMemo(() => {
-    return images.map((image) => {
+    return sortedImages.map((image) => {
       // Check if the image is a local file path or a server URL
       const isLocalImage = image.imageBlobUrl.startsWith('data:') || image.imageBlobUrl.startsWith('/');
       return { uri: image, isLocal: isLocalImage };
     });
-  }, [images]);
+  }, [sortedImages, images]);
 
   // Scroll to initial index on mount
   useEffect(() => {
@@ -134,7 +161,7 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
 
   const handleDelete = () => {
     if (onDelete) {
-      onDelete(activeIndex);
+      onDelete(deleteIndex);
     }
   };
 
@@ -142,14 +169,27 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
   const handleScrollEnd = (event: any) => {
     const contentOffsetX = event.nativeEvent.contentOffset.x;
     const newIndex = Math.round(contentOffsetX / dimensions.itemWidth);
-    if (newIndex !== activeIndex && newIndex >= 0 && newIndex < images.length) {
+    if (newIndex !== activeIndex && newIndex >= 0 && newIndex < sortedImages.length) {
       setActiveIndex(newIndex);
     }
   };
 
+  // Handle scroll for web
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (Platform.OS === 'web') {
+      const contentOffsetX = event.nativeEvent.contentOffset?.x;
+      if (contentOffsetX !== undefined) {
+        const newIndex = Math.round(contentOffsetX / dimensions.itemWidth);
+        if (newIndex !== activeIndex && newIndex >= 0 && newIndex < sortedImages.length) {
+          setActiveIndex(newIndex);
+        }
+      }
+    }
+  };
+
   // Function to handle manual navigation between images
   const goToImage = (index: number) => {
-    if (flatListRef.current && index >= 0 && index < images.length) {
+    if (flatListRef.current && index >= 0 && index < sortedImages.length) {
       flatListRef.current.scrollToIndex({
         index,
         animated: true,
@@ -159,47 +199,72 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
   };
 
   // Render each image item
-  const renderItem = ({ item }: { item: ImageSource }) => {
+  const renderItem = ({ item, index }: { item: ImageSource, index: number }) => {
     return (
       <View style={styles.itemContainer}>
-        {OnMarkDefault && (
-          <View style={styles.imageDefaultTextSection}>
-            <Checkbox style={{borderColor: 'white', width: 20, height: 20}} value={item.uri.isDefault} onValueChange={(value: boolean) => {
-              if(OnMarkDefault) {
-                OnMarkDefault(activeIndex, value);
-              }
-            }} />
-            <Text style={styles.imageDefaultText}>Mark as Default</Text>
-          </View>
-        )}
+        {/* Action buttons row above the image */}
+        <View style={styles.actionButtonsRow}>
+          {/* Favorite button on the left */}
+          {OnMarkDefault && (
+            <TouchableOpacity
+              style={styles.imageDefaultTextSection}
+              onPress={() => {
+                const newSorted = sortedImages.map((img, idx) => ({
+                  ...img,
+                  isDefault: idx === index ? !item.uri.isDefault : (!item.uri.isDefault ? false : img.isDefault)
+                }));
+                setSortedImages(newSorted);
+                if (OnMarkDefault) {
+                  const originalIndex = images.findIndex(img => img.imageBlobUrl === item.uri.imageBlobUrl);
+                  OnMarkDefault(originalIndex, !item.uri.isDefault);
+                }
+              }}
+              activeOpacity={0.7}
+            >
+              <Ionicons
+                name={item.uri.isDefault ? "star" : "star-outline"}
+                size={24}
+                color={theme.colors.primary}
+              />
+              <Text style={styles.imageDefaultText}>
+                {item.uri.isDefault ? "Favorite" : "Set as Favorite"}
+              </Text>
+            </TouchableOpacity>
+          )}
+
+          {/* Spacer to push delete button to the right */}
+          <View style={{ flex: 1 }} />
 
+          {/* Delete button on the right */}
+          {showDeleteButton && onDelete && item.uri.isDefault !== true && (
+            <TouchableOpacity
+              style={styles.imageDeleteButton}
+              onPress={() => {
+                if (item.isLocal) {
+                  onDelete(index);
+                } else {
+                  setDeleteIndex(index);  
+                  setShowDeleteConfirmation(true);
+                }
+              }}
+              activeOpacity={0.7}
+            >
+              <Ionicons name="trash-outline" size={24} color={theme.colors.redColor} />
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {/* Image below the buttons */}
         <Image
           key={item.uri.imageBlobUrl}
           source={item.uri.imageBlobUrl}
           style={styles.image}
           contentFit="cover"
-          placeholderContentFit='cover'
+          placeholderContentFit="cover"
           transition={500}
           cachePolicy="disk"
           placeholder={require("../../assets/images/placeholder.png")}
         />
-
-        {/* Delete button overlay on the image */}
-        {showDeleteButton && onDelete && item.uri.isDefault !== true && (
-          <TouchableOpacity
-            style={styles.imageDeleteButton}
-            onPress={() => {
-              if(item.isLocal) {
-                handleDelete();
-              } else {
-                setShowDeleteConfirmation(true)
-              }
-            }}
-            activeOpacity={0.7}
-          >
-            <Ionicons name="trash-outline" size={20} color="red" />
-          </TouchableOpacity>
-        )}
       </View>
     );
   };
@@ -213,7 +278,7 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
         onPress={handleClose}
         activeOpacity={0.7}
       >
-        <Ionicons name="close-outline" size={30} color={Colors.whiteColor} />
+        <Ionicons name="close-outline" size={30} color={theme.colors.whiteColor} />
       </TouchableOpacity>
     </View>
   );
@@ -222,7 +287,7 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
   const renderFooter = () => (
     <View style={styles.footerContainer}>
       <View style={styles.dotsContainer}>
-        {images.map((_, index) => (
+        {sortedImages.map((_, index) => (
           <TouchableOpacity
             key={index}
             style={[
@@ -264,6 +329,7 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
             windowSize={5}
             keyExtractor={(_, index) => `image-${index}`}
             onMomentumScrollEnd={handleScrollEnd}
+            onScroll={handleScroll}
             style={styles.flatList}
             contentContainerStyle={styles.flatListContent}
             snapToInterval={dimensions.itemWidth}
@@ -288,6 +354,7 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
           visible={showDeleteConfirmation}
           onClose={closeBottomSheet}
           height={200}
+          containerStyle={dialogContainerStyle}
         >
           <DeleteImageConfirmationDialog
             message={delete_image_confirmation_msg}
@@ -303,7 +370,7 @@ const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
   );
 };
 
-const previewStyles = (top: number, dimensions?: { itemWidth: number, imageWidth: number, imageHeight: number }) => StyleSheet.create({
+const previewStyles = (isWeb: boolean, top: number, theme: any, windowWidth: number, windowHeight: number, dimensions?: { itemWidth: number, imageWidth: number, imageHeight: number }) => StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#000000CF',
@@ -314,7 +381,7 @@ const previewStyles = (top: number, dimensions?: { itemWidth: number, imageWidth
     alignItems: 'center',
   },
   flatList: {
-    width: SCREEN_WIDTH,
+    width: dimensions?.itemWidth,
     ...(isWeb && {
       scrollSnapType: 'x mandatory', // Web-specific for better snapping
       WebkitOverflowScrolling: 'touch', // Better scrolling on iOS Safari
@@ -328,72 +395,71 @@ const previewStyles = (top: number, dimensions?: { itemWidth: number, imageWidth
     }),
   },
   itemContainer: {
-    width: dimensions?.itemWidth || SCREEN_WIDTH,
+    width: dimensions?.itemWidth || windowWidth,
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 20,
+    paddingHorizontal: isWeb ? 120 : 20,
+
   },
   image: {
-    width: dimensions?.imageWidth || SCREEN_WIDTH - 40,
-    height: dimensions?.imageHeight || SCREEN_HEIGHT * 0.4,
+    width: '100%',
+    height: dimensions?.imageHeight || windowHeight * 0.4,
     resizeMode: 'cover',
     borderRadius: 20,
-    borderColor: Colors.whiteColor,
-    borderWidth: 1,
     shadowColor: Colors.shadowColor,
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
     shadowRadius: 4,
     elevation: Platform.OS === 'android' ? 4 : 0,
   },
-  headerContainer: {
-    position: 'absolute',
-    top: top,
-    right: 0,
-    left: 0,
-    height: 60,
-    paddingHorizontal: 15,
+  actionButtonsRow: {
     flexDirection: 'row',
-    justifyContent: 'flex-end', // Align to right side
-    alignItems: 'center',
-    zIndex: 100,
-    backgroundColor: "transparent",
-  },
-  closeButton: {
-    justifyContent: 'center',
+    width: '100%',
+    justifyContent: 'space-between',
     alignItems: 'center',
+    paddingHorizontal: 0,
+    marginBottom: 12,
+    minHeight: 44, // Ensure touchable area
   },
   imageDefaultTextSection: {
     flexDirection: 'row',
-    position: 'absolute',
-    top: 5,
-    left: 20,
-    borderRadius: 10,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
     justifyContent: 'center',
     alignItems: 'center',
-    zIndex: 10,
-    margin: 8,
-    paddingVertical: 12,
-    paddingHorizontal: 16
+    paddingVertical: 8,
+    paddingHorizontal: 12,
   },
   imageDefaultText: {
-    color: 'white',
+    color: theme.colors.primary,
     alignSelf: 'center',
     textAlign: 'center',
-    marginStart: 12
+    marginStart: 8,
+    fontSize: 16,
+    fontWeight: '500',
   },
   imageDeleteButton: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerContainer: {
     position: 'absolute',
-    top: 15,
-    right: 30,
+    top: top,
+    right: 0,
+    left: 0,
+    height: 60,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    zIndex: 100,
+    backgroundColor: "transparent",
+  },
+  closeButton: {
     width: 40,
     height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
     justifyContent: 'center',
     alignItems: 'center',
-    zIndex: 10,
   },
   footerContainer: {
     height: 60,
@@ -410,11 +476,11 @@ const previewStyles = (top: number, dimensions?: { itemWidth: number, imageWidth
     width: 8,
     height: 8,
     borderRadius: 4,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.colors.iconGrayColor,
     marginHorizontal: 4,
   },
   activeDot: {
-    backgroundColor: '#007AC6',
+    backgroundColor: theme.colors.primary,
     width: 10,
     height: 10,
     borderRadius: 5,

package/src/index.ts

@@ -40,6 +40,15 @@ import SearchableList from "./list/SearchableList";
 import * as BaseStyle from "./utils/BaseStyle";
 import * as TextConstants from "./utils/TextConstants";
 
+// Navbar Components
+import CustomNavBar from "./navbar/CustomNavBar";
+
+// SVG Icons
+import BackArrow from "../assets/images/back_arrow.svg";
+import Camera from "../assets/images/ic_camera.svg";
+import Close from "../assets/images/ic_close.svg";
+import Folder from "../assets/images/ic_folder.svg";
+
 export {
   ThemedButton,
   MultipleImagePreview,
@@ -63,6 +72,11 @@ export {
   BaseStyle,
   TextConstants,
   CardView,
+  CustomNavBar,
+  BackArrow,
+  Camera,
+  Close,
+  Folder,
 };
 
 export type { BottomSheetDialogRef };