ota-components-module 1.3.2 → 1.3.9

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/lib/feedback/CustomAlert.d.ts

@@ -12,6 +12,7 @@ interface CustomAlertProps {
     onPositivePress: (event: GestureResponderEvent) => void;
     onNegativePress?: (event: GestureResponderEvent) => void;
     viewStyle?: ViewStyle | ViewStyle[];
+    onRequestClose?: (event: GestureResponderEvent) => void;
 }
 /**
  * A custom alert dialog component with configurable buttons

package/lib/feedback/CustomAlert.js

@@ -20,9 +20,9 @@ var TextConstants_1 = require("../utils/TextConstants");
  * A custom alert dialog component with configurable buttons
  */
 var CustomAlert = function (_a) {
-    var visible = _a.visible, title = _a.title, message = _a.message, _b = _a.positiveButtonText, positiveButtonText = _b === void 0 ? "OK" : _b, _c = _a.negativeButtonText, negativeButtonText = _c === void 0 ? "Cancel" : _c, onPositivePress = _a.onPositivePress, onNegativePress = _a.onNegativePress, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? BaseStyle_1.Colors.whiteColor : _d, _e = _a.textColor, textColor = _e === void 0 ? BaseStyle_1.Colors.textBlack : _e, _f = _a.shadowColor, shadowColor = _f === void 0 ? BaseStyle_1.Colors.shadowColor : _f, viewStyle = _a.viewStyle;
+    var visible = _a.visible, title = _a.title, message = _a.message, _b = _a.positiveButtonText, positiveButtonText = _b === void 0 ? "OK" : _b, _c = _a.negativeButtonText, negativeButtonText = _c === void 0 ? "Cancel" : _c, onPositivePress = _a.onPositivePress, onNegativePress = _a.onNegativePress, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? BaseStyle_1.Colors.whiteColor : _d, _e = _a.textColor, textColor = _e === void 0 ? BaseStyle_1.Colors.textBlack : _e, _f = _a.shadowColor, shadowColor = _f === void 0 ? BaseStyle_1.Colors.shadowColor : _f, viewStyle = _a.viewStyle, onRequestClose = _a.onRequestClose;
     var styles = getStyles(backgroundColor, textColor, shadowColor);
-    return (<react_native_1.Modal animationType="fade" transparent={true} visible={visible} statusBarTranslucent={true} onRequestClose={onNegativePress || onPositivePress}>
+    return (<react_native_1.Modal animationType="fade" transparent={true} visible={visible} statusBarTranslucent={true} onRequestClose={onRequestClose || onNegativePress || onPositivePress}>
       <react_native_1.View style={styles.centeredView}>
         <react_native_1.View style={[styles.modalView, viewStyle]}>
           {title && <Label_1.default text={title} size={TextConstants_1.TextSize.LARGE} weight={TextConstants_1.TextWeight.BOLD} color={textColor} customStyle={styles.title}/>}

package/lib/image/ImagePickerBottomSheet.d.ts

@@ -5,6 +5,8 @@ interface ImagePickerBottomSheetProps {
     onTakePhoto: () => void;
     onUploadFile: () => void;
     title?: string;
+    backgroundColor?: string;
+    textColor?: string;
 }
 declare const ImagePickerBottomSheet: React.FC<ImagePickerBottomSheetProps>;
 export default ImagePickerBottomSheet;

package/lib/image/ImagePickerBottomSheet.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var ImagePickerView_1 = require("./ImagePickerView");
 var BottomSheetDialog_1 = require("../layout/BottomSheetDialog");
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
 var ImagePickerBottomSheet = function (_a) {
-    var visible = _a.visible, onClose = _a.onClose, onTakePhoto = _a.onTakePhoto, onUploadFile = _a.onUploadFile, title = _a.title;
+    var visible = _a.visible, onClose = _a.onClose, onTakePhoto = _a.onTakePhoto, onUploadFile = _a.onUploadFile, title = _a.title, backgroundColor = _a.backgroundColor, textColor = _a.textColor;
     var ref = (0, react_1.useRef)(null);
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     var TakePhoto = function () {
         closeSheet();
         setTimeout(function () {
@@ -23,9 +25,9 @@ var ImagePickerBottomSheet = function (_a) {
             ref.current.closeBottomSheet();
         }
     };
-    return (<BottomSheetDialog_1.default visible={visible} onClose={onClose} height={200} // Adjust height as needed
-     ref={ref}>
-      <ImagePickerView_1.default title={title} onTakePhoto={TakePhoto} onUploadFile={UploadFile} onClose={closeSheet}/>
+    return (<BottomSheetDialog_1.default visible={visible} onClose={onClose} height={200 + insets.bottom} // Adjust height as needed
+     ref={ref} containerStyle={{ backgroundColor: backgroundColor }}>
+      <ImagePickerView_1.default title={title} onTakePhoto={TakePhoto} onUploadFile={UploadFile} onClose={closeSheet} backgroundColor={backgroundColor} textColor={textColor}/>
     </BottomSheetDialog_1.default>);
 };
 exports.default = ImagePickerBottomSheet;

package/lib/image/ImagePickerView.d.ts

@@ -4,6 +4,8 @@ interface ImagePickerViewProps {
     onTakePhoto: () => void;
     onUploadFile: () => void;
     onClose?: () => void;
+    backgroundColor?: string;
+    textColor?: string;
     containerStyle?: ViewStyle;
     title?: string;
 }

package/lib/image/ImagePickerView.js

@@ -9,25 +9,25 @@ var Label_1 = require("../typography/Label");
 var TextConstants_1 = require("../utils/TextConstants");
 var BaseStyle_1 = require("../utils/BaseStyle");
 var ImagePickerView = function (_a) {
-    var onTakePhoto = _a.onTakePhoto, onUploadFile = _a.onUploadFile, onClose = _a.onClose, containerStyle = _a.containerStyle, _b = _a.title, title = _b === void 0 ? 'Add an Image' : _b;
-    return (<react_native_1.View style={[styles.container, containerStyle]}>
-      <react_native_1.View style={styles.header}>
-        <Label_1.default text={title} size={TextConstants_1.TextSize.LARGE} weight={TextConstants_1.TextWeight.BOLD} textColorType="primary"/>
+    var onTakePhoto = _a.onTakePhoto, onUploadFile = _a.onUploadFile, onClose = _a.onClose, containerStyle = _a.containerStyle, backgroundColor = _a.backgroundColor, textColor = _a.textColor, _b = _a.title, title = _b === void 0 ? 'Add an Image' : _b;
+    return (<react_native_1.View style={[styles.container, containerStyle, { backgroundColor: backgroundColor }]}>
+      <react_native_1.View style={[styles.header]}>
+        <Label_1.default text={title} size={TextConstants_1.TextSize.LARGE} weight={TextConstants_1.TextWeight.BOLD} textColorType="primary" color={textColor}/>
         {onClose && (<react_native_1.TouchableOpacity onPress={onClose} style={styles.closeButton}>
-            <ic_close_svg_1.default width={24} height={24}/>
+            <ic_close_svg_1.default width={24} height={24} color={textColor}/>
           </react_native_1.TouchableOpacity>)}
       </react_native_1.View>
 
-      <react_native_1.TouchableOpacity style={styles.option} onPress={onTakePhoto} activeOpacity={0.7}>
-        <ic_camera_svg_1.default width={24} height={24} style={styles.icon}/>
-        <Label_1.default text="Take a photo" size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.NORMAL} textColorType="primary"/>
+      <react_native_1.TouchableOpacity style={[styles.option]} onPress={onTakePhoto} activeOpacity={0.7}>
+        <ic_camera_svg_1.default width={24} height={24} style={styles.icon} color={textColor}/>
+        <Label_1.default text="Take a photo" size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.NORMAL} textColorType="primary" color={textColor}/>
       </react_native_1.TouchableOpacity>
 
       <react_native_1.View style={styles.divider}/>
 
-      <react_native_1.TouchableOpacity style={styles.option} onPress={onUploadFile} activeOpacity={0.7}>
-         <ic_folder_svg_1.default width={24} height={24} style={styles.icon}/>
-         <Label_1.default text="Upload a file" size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.NORMAL} textColorType="primary"/>
+      <react_native_1.TouchableOpacity style={[styles.option]} onPress={onUploadFile} activeOpacity={0.7}>
+         <ic_folder_svg_1.default width={24} height={24} style={styles.icon} color={textColor}/>
+         <Label_1.default text="Upload a file" size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.NORMAL} textColorType="primary" color={textColor}/>
       </react_native_1.TouchableOpacity>
     </react_native_1.View>);
 };

package/lib/image/MultipleImagePreview.d.ts

@@ -9,6 +9,10 @@ type MultipleImagePreviewProps = {
      * Initial image index to display
      */
     initialIndex?: number;
+    /**
+     * Theme of the preview
+     */
+    theme: any;
     /**
      * Callback when the preview is closed
      */

package/lib/image/MultipleImagePreview.js

@@ -46,41 +46,72 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var vector_icons_1 = require("@expo/vector-icons");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
 var expo_image_1 = require("expo-image");
-var expo_checkbox_1 = require("expo-checkbox");
 var BaseStyle_1 = require("../utils/BaseStyle");
 var react_native_safe_area_context_1 = require("react-native-safe-area-context");
 var BottomSheetDialog_1 = require("../layout/BottomSheetDialog");
 var DeleteImageConfirmationDialog_1 = require("../feedback/DeleteImageConfirmationDialog");
 var Strings_1 = require("../utils/Strings");
-// Get screen dimensions
-var _a = react_native_1.Dimensions.get('window'), SCREEN_WIDTH = _a.width, SCREEN_HEIGHT = _a.height;
-// Check if we're running on web
-var isWeb = react_native_1.Platform.OS === 'web';
+var Utils_1 = require("@mri-software/ota-components-module/src/utils/Utils");
 /**
  * MultipleImagePreview component for displaying images
  */
 var MultipleImagePreview = function (_a) {
-    var images = _a.images, _b = _a.initialIndex, initialIndex = _b === void 0 ? 0 : _b, onClose = _a.onClose, onDelete = _a.onDelete, OnMarkDefault = _a.OnMarkDefault, _c = _a.showDeleteButton, showDeleteButton = _c === void 0 ? true : _c;
+    var images = _a.images, _b = _a.initialIndex, initialIndex = _b === void 0 ? 0 : _b, theme = _a.theme, onClose = _a.onClose, onDelete = _a.onDelete, OnMarkDefault = _a.OnMarkDefault, _c = _a.showDeleteButton, showDeleteButton = _c === void 0 ? true : _c;
     var _d = (0, react_1.useState)(initialIndex), activeIndex = _d[0], setActiveIndex = _d[1];
-    var _e = (0, react_1.useState)(true), visible = _e[0], setVisible = _e[1];
+    var _e = (0, react_1.useState)(0), deleteIndex = _e[0], setDeleteIndex = _e[1];
+    var _f = (0, react_1.useState)(true), visible = _f[0], setVisible = _f[1];
+    // Initialize with sorted images immediately - default image comes first
+    var _g = (0, react_1.useState)(function () {
+        return __spreadArray([], images, true).sort(function (a, b) {
+            if (a.isDefault)
+                return -1;
+            if (b.isDefault)
+                return 1;
+            return 0;
+        });
+    }), sortedImages = _g[0], setSortedImages = _g[1];
     var flatListRef = (0, react_1.useRef)(null);
     var bottomSheetRef = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(false), showDeleteConfirmation = _f[0], setShowDeleteConfirmation = _f[1];
+    var _h = (0, react_1.useState)(false), showDeleteConfirmation = _h[0], setShowDeleteConfirmation = _h[1];
     var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    // Calculate dimensions based on platform
+    var _j = (0, react_native_1.useWindowDimensions)(), windowWidth = _j.width, windowHeight = _j.height;
+    var isWeb = (0, Utils_1.isWebDevice)(windowWidth) ? true : false;
+    // Calculate dimensions based on platform - recalculates on window resize
     var dimensions = (0, react_1.useMemo)(function () {
         // For web, we need to ensure each item takes exactly one screen width
+        var horizontalPadding = isWeb ? 120 : 20;
+        var 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
+    var dialogContainerStyle = (0, react_1.useMemo)(function () {
+        if (isWeb) {
+            return {
+                alignSelf: 'center',
+                width: dimensions.imageWidth,
+                maxWidth: dimensions.imageWidth,
+            };
+        }
+        return {};
+    }, [isWeb, dimensions.imageWidth]);
     var closeSheet = function () {
         if (bottomSheetRef.current) {
             bottomSheetRef.current.closeBottomSheet();
@@ -94,15 +125,15 @@ var MultipleImagePreview = function (_a) {
         }, 300);
     };
     // Create styles with the calculated dimensions
-    var styles = previewStyles(insets.top, dimensions);
+    var styles = previewStyles(isWeb, insets.top, theme, windowWidth, windowHeight, dimensions);
     // Process images to handle both local and remote URLs
     var processedImages = (0, react_1.useMemo)(function () {
-        return images.map(function (image) {
+        return sortedImages.map(function (image) {
             // Check if the image is a local file path or a server URL
             var isLocalImage = image.imageBlobUrl.startsWith('data:') || image.imageBlobUrl.startsWith('/');
             return { uri: image, isLocal: isLocalImage };
         });
-    }, [images]);
+    }, [sortedImages, images]);
     // Scroll to initial index on mount
     (0, react_1.useEffect)(function () {
         if (flatListRef.current) {
@@ -121,20 +152,33 @@ var MultipleImagePreview = function (_a) {
     };
     var handleDelete = function () {
         if (onDelete) {
-            onDelete(activeIndex);
+            onDelete(deleteIndex);
         }
     };
     // Handle scroll end to update active index
     var handleScrollEnd = function (event) {
         var contentOffsetX = event.nativeEvent.contentOffset.x;
         var 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
+    var handleScroll = function (event) {
+        var _a;
+        if (react_native_1.Platform.OS === 'web') {
+            var contentOffsetX = (_a = event.nativeEvent.contentOffset) === null || _a === void 0 ? void 0 : _a.x;
+            if (contentOffsetX !== undefined) {
+                var newIndex = Math.round(contentOffsetX / dimensions.itemWidth);
+                if (newIndex !== activeIndex && newIndex >= 0 && newIndex < sortedImages.length) {
+                    setActiveIndex(newIndex);
+                }
+            }
+        }
+    };
     // Function to handle manual navigation between images
     var goToImage = function (index) {
-        if (flatListRef.current && index >= 0 && index < images.length) {
+        if (flatListRef.current && index >= 0 && index < sortedImages.length) {
             flatListRef.current.scrollToIndex({
                 index: index,
                 animated: true,
@@ -144,43 +188,57 @@ var MultipleImagePreview = function (_a) {
     };
     // Render each image item
     var renderItem = function (_a) {
-        var item = _a.item;
+        var item = _a.item, index = _a.index;
         return (<react_native_1.View style={styles.itemContainer}>
-        {OnMarkDefault && (<react_native_1.View style={styles.imageDefaultTextSection}>
-            <expo_checkbox_1.default style={{ borderColor: 'white', width: 20, height: 20 }} value={item.uri.isDefault} onValueChange={function (value) {
+        {/* Action buttons row above the image */}
+        <react_native_1.View style={styles.actionButtonsRow}>
+          {/* Favorite button on the left */}
+          {OnMarkDefault && (<react_native_1.TouchableOpacity style={styles.imageDefaultTextSection} onPress={function () {
+                    var newSorted = sortedImages.map(function (img, idx) { return (__assign(__assign({}, img), { isDefault: idx === index ? !item.uri.isDefault : (!item.uri.isDefault ? false : img.isDefault) })); });
+                    setSortedImages(newSorted);
                     if (OnMarkDefault) {
-                        OnMarkDefault(activeIndex, value);
+                        var originalIndex = images.findIndex(function (img) { return img.imageBlobUrl === item.uri.imageBlobUrl; });
+                        OnMarkDefault(originalIndex, !item.uri.isDefault);
                     }
-                }}/>
-            <react_native_1.Text style={styles.imageDefaultText}>Mark as Default</react_native_1.Text>
-          </react_native_1.View>)}
+                }} activeOpacity={0.7}>
+              <vector_icons_1.Ionicons name={item.uri.isDefault ? "star" : "star-outline"} size={24} color={theme.colors.primary}/>
+              <react_native_1.Text style={styles.imageDefaultText}>
+                {item.uri.isDefault ? "Favorite" : "Set as Favorite"}
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>)}
 
-        <expo_image_1.Image key={item.uri.imageBlobUrl} source={item.uri.imageBlobUrl} style={styles.image} contentFit="cover" placeholderContentFit='cover' transition={500} cachePolicy="disk" placeholder={require("../../assets/images/placeholder.png")}/>
+          {/* Spacer to push delete button to the right */}
+          <react_native_1.View style={{ flex: 1 }}/>
 
-        {/* Delete button overlay on the image */}
-        {showDeleteButton && onDelete && item.uri.isDefault !== true && (<react_native_1.TouchableOpacity style={styles.imageDeleteButton} onPress={function () {
+          {/* Delete button on the right */}
+          {showDeleteButton && onDelete && item.uri.isDefault !== true && (<react_native_1.TouchableOpacity style={styles.imageDeleteButton} onPress={function () {
                     if (item.isLocal) {
-                        handleDelete();
+                        onDelete(index);
                     }
                     else {
+                        setDeleteIndex(index);
                         setShowDeleteConfirmation(true);
                     }
                 }} activeOpacity={0.7}>
-            <vector_icons_1.Ionicons name="trash-outline" size={20} color="red"/>
-          </react_native_1.TouchableOpacity>)}
+              <vector_icons_1.Ionicons name="trash-outline" size={24} color={theme.colors.redColor}/>
+            </react_native_1.TouchableOpacity>)}
+        </react_native_1.View>
+
+        {/* Image below the buttons */}
+        <expo_image_1.Image key={item.uri.imageBlobUrl} source={item.uri.imageBlobUrl} style={styles.image} contentFit="cover" placeholderContentFit="cover" transition={500} cachePolicy="disk" placeholder={require("../../assets/images/placeholder.png")}/>
       </react_native_1.View>);
     };
     // Render header with close button
     var renderHeader = function () { return (<react_native_1.View style={styles.headerContainer}>
       <react_native_1.View style={{ flex: 1 }}/>
       <react_native_1.TouchableOpacity style={styles.closeButton} onPress={handleClose} activeOpacity={0.7}>
-        <vector_icons_1.Ionicons name="close-outline" size={30} color={BaseStyle_1.Colors.whiteColor}/>
+        <vector_icons_1.Ionicons name="close-outline" size={30} color={theme.colors.whiteColor}/>
       </react_native_1.TouchableOpacity>
     </react_native_1.View>); };
     // Render footer with pagination dots
     var renderFooter = function () { return (<react_native_1.View style={styles.footerContainer}>
       <react_native_1.View style={styles.dotsContainer}>
-        {images.map(function (_, index) { return (<react_native_1.TouchableOpacity key={index} style={[
+        {sortedImages.map(function (_, index) { return (<react_native_1.TouchableOpacity key={index} style={[
                 styles.dot,
                 index === activeIndex && styles.activeDot
             ]} onPress={function () { return goToImage(index); }} activeOpacity={0.7}/>); })}
@@ -194,7 +252,7 @@ var MultipleImagePreview = function (_a) {
       <react_native_1.SafeAreaView style={styles.container}>
         <react_native_1.View style={styles.galleryContainer}>
           {/* Image gallery */}
-          <react_native_1.FlatList ref={flatListRef} data={processedImages} renderItem={renderItem} horizontal pagingEnabled showsHorizontalScrollIndicator={false} initialNumToRender={processedImages.length} maxToRenderPerBatch={3} windowSize={5} keyExtractor={function (_, index) { return "image-".concat(index); }} onMomentumScrollEnd={handleScrollEnd} style={styles.flatList} contentContainerStyle={styles.flatListContent} snapToInterval={dimensions.itemWidth} snapToAlignment="center" decelerationRate="fast" getItemLayout={function (_, index) { return ({
+          <react_native_1.FlatList ref={flatListRef} data={processedImages} renderItem={renderItem} horizontal pagingEnabled showsHorizontalScrollIndicator={false} initialNumToRender={processedImages.length} maxToRenderPerBatch={3} windowSize={5} keyExtractor={function (_, index) { return "image-".concat(index); }} onMomentumScrollEnd={handleScrollEnd} onScroll={handleScroll} style={styles.flatList} contentContainerStyle={styles.flatListContent} snapToInterval={dimensions.itemWidth} snapToAlignment="center" decelerationRate="fast" getItemLayout={function (_, index) { return ({
             length: dimensions.itemWidth,
             offset: dimensions.itemWidth * index,
             index: index,
@@ -206,7 +264,7 @@ var MultipleImagePreview = function (_a) {
         {renderHeader()}
         {renderFooter()}
 
-        <BottomSheetDialog_1.default ref={bottomSheetRef} visible={showDeleteConfirmation} onClose={closeBottomSheet} height={200}>
+        <BottomSheetDialog_1.default ref={bottomSheetRef} visible={showDeleteConfirmation} onClose={closeBottomSheet} height={200} containerStyle={dialogContainerStyle}>
           <DeleteImageConfirmationDialog_1.default message={Strings_1.delete_image_confirmation_msg} onConfirm={function () { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 closeBottomSheet();
@@ -218,7 +276,7 @@ var MultipleImagePreview = function (_a) {
       </react_native_1.SafeAreaView>
     </react_native_1.Modal>);
 };
-var previewStyles = function (top, dimensions) { return react_native_1.StyleSheet.create({
+var previewStyles = function (isWeb, top, theme, windowWidth, windowHeight, dimensions) { return react_native_1.StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#000000CF',
@@ -228,7 +286,7 @@ var previewStyles = function (top, dimensions) { return react_native_1.StyleShee
         justifyContent: 'center',
         alignItems: 'center',
     },
-    flatList: __assign({ width: SCREEN_WIDTH }, (isWeb && {
+    flatList: __assign({ width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.itemWidth }, (isWeb && {
         scrollSnapType: 'x mandatory', // Web-specific for better snapping
         WebkitOverflowScrolling: 'touch', // Better scrolling on iOS Safari
     })),
@@ -237,72 +295,70 @@ var previewStyles = function (top, dimensions) { return react_native_1.StyleShee
         flexDirection: 'row',
     })),
     itemContainer: {
-        width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.itemWidth) || SCREEN_WIDTH,
+        width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.itemWidth) || windowWidth,
         justifyContent: 'center',
         alignItems: 'center',
-        paddingHorizontal: 20,
+        paddingHorizontal: isWeb ? 120 : 20,
     },
     image: {
-        width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.imageWidth) || SCREEN_WIDTH - 40,
-        height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.imageHeight) || SCREEN_HEIGHT * 0.4,
+        width: '100%',
+        height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.imageHeight) || windowHeight * 0.4,
         resizeMode: 'cover',
         borderRadius: 20,
-        borderColor: BaseStyle_1.Colors.whiteColor,
-        borderWidth: 1,
         shadowColor: BaseStyle_1.Colors.shadowColor,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.1,
         shadowRadius: 4,
         elevation: react_native_1.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,
@@ -319,11 +375,11 @@ var previewStyles = function (top, dimensions) { return react_native_1.StyleShee
         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/lib/index.d.ts

@@ -21,5 +21,10 @@ import Label from "./typography/Label";
 import SearchableList from "./list/SearchableList";
 import * as BaseStyle from "./utils/BaseStyle";
 import * as TextConstants from "./utils/TextConstants";
-export { ThemedButton, MultipleImagePreview, ImagePickerView, ImagePickerBottomSheet, StackedImage, CustomInput, FormField, CustomDropdown, SearchViewInput, KeyboardScrollView, BottomTwoButtonLayoutComponent, PropertyHeaderComponent, BottomSheetDialog, ActivityLoader, ProgressBar, CustomAlert, DeleteImageConfirmationDialog, Label, SearchableList, BaseStyle, TextConstants, CardView, };
+import CustomNavBar from "./navbar/CustomNavBar";
+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, ImagePickerView, ImagePickerBottomSheet, StackedImage, CustomInput, FormField, CustomDropdown, SearchViewInput, KeyboardScrollView, BottomTwoButtonLayoutComponent, PropertyHeaderComponent, BottomSheetDialog, ActivityLoader, ProgressBar, CustomAlert, DeleteImageConfirmationDialog, Label, SearchableList, BaseStyle, TextConstants, CardView, CustomNavBar, BackArrow, Camera, Close, Folder, };
 export type { BottomSheetDialogRef };

package/lib/index.js

@@ -1,7 +1,7 @@
 "use strict";
 // import all components from their respective folders
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardView = exports.TextConstants = exports.BaseStyle = exports.SearchableList = exports.Label = exports.DeleteImageConfirmationDialog = exports.CustomAlert = exports.ProgressBar = exports.ActivityLoader = exports.BottomSheetDialog = exports.PropertyHeaderComponent = exports.BottomTwoButtonLayoutComponent = exports.KeyboardScrollView = exports.SearchViewInput = exports.CustomDropdown = exports.FormField = exports.CustomInput = exports.StackedImage = exports.ImagePickerBottomSheet = exports.ImagePickerView = exports.MultipleImagePreview = exports.ThemedButton = void 0;
+exports.Folder = exports.Close = exports.Camera = exports.BackArrow = exports.CustomNavBar = exports.CardView = exports.TextConstants = exports.BaseStyle = exports.SearchableList = exports.Label = exports.DeleteImageConfirmationDialog = exports.CustomAlert = exports.ProgressBar = exports.ActivityLoader = exports.BottomSheetDialog = exports.PropertyHeaderComponent = exports.BottomTwoButtonLayoutComponent = exports.KeyboardScrollView = exports.SearchViewInput = exports.CustomDropdown = exports.FormField = exports.CustomInput = exports.StackedImage = exports.ImagePickerBottomSheet = exports.ImagePickerView = exports.MultipleImagePreview = exports.ThemedButton = void 0;
 // Button Components
 var ThemedButton_1 = require("./button/ThemedButton");
 exports.ThemedButton = ThemedButton_1.default;
@@ -54,3 +54,15 @@ var BaseStyle = require("./utils/BaseStyle");
 exports.BaseStyle = BaseStyle;
 var TextConstants = require("./utils/TextConstants");
 exports.TextConstants = TextConstants;
+// Navbar Components
+var CustomNavBar_1 = require("./navbar/CustomNavBar");
+exports.CustomNavBar = CustomNavBar_1.default;
+// SVG Icons
+var back_arrow_svg_1 = require("../assets/images/back_arrow.svg");
+exports.BackArrow = back_arrow_svg_1.default;
+var ic_camera_svg_1 = require("../assets/images/ic_camera.svg");
+exports.Camera = ic_camera_svg_1.default;
+var ic_close_svg_1 = require("../assets/images/ic_close.svg");
+exports.Close = ic_close_svg_1.default;
+var ic_folder_svg_1 = require("../assets/images/ic_folder.svg");
+exports.Folder = ic_folder_svg_1.default;

package/lib/input/CustomDropdown.d.ts

@@ -32,6 +32,7 @@ interface CustomDropdownProps {
      * Whether the dropdown is disabled
      */
     disabled?: boolean;
+    theme?: any;
 }
 /**
  * A customizable dropdown component