ota-components-module 1.3.0 → 1.3.2

package/lib/button/ThemedButton.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+export type ButtonType = 'primary' | 'secondary';
+export type ButtonSize = 'small' | 'regular';
+export type ButtonProps = {
+    testID?: string;
+    title: string;
+    onPress: () => void;
+    type?: ButtonType;
+    size?: ButtonSize;
+    disabled?: boolean;
+    style?: ViewStyle;
+    textstyle?: TextStyle;
+    primaryColor?: string;
+    backgroundColor?: string;
+    disabledColor?: string;
+};
+declare const ThemedButton: React.FC<ButtonProps>;
+export default ThemedButton;

package/lib/button/ThemedButton.js

@@ -0,0 +1,73 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var BaseStyle_1 = require("../utils/BaseStyle");
+var Label_1 = require("../typography/Label");
+var TextConstants_1 = require("../utils/TextConstants");
+var ThemedButton = function (_a) {
+    var testID = _a.testID, title = _a.title, onPress = _a.onPress, _b = _a.type, type = _b === void 0 ? 'primary' : _b, _c = _a.size, size = _c === void 0 ? 'regular' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, style = _a.style, textstyle = _a.textstyle, _e = _a.primaryColor, primaryColor = _e === void 0 ? BaseStyle_1.Colors.lightThemePrimaryColor : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? '#FFFFFF' : _f, _g = _a.disabledColor, disabledColor = _g === void 0 ? '#B8D8E8' : _g;
+    var getButtonStyle = function () {
+        var baseStyle = {
+            borderRadius: 30, // Rounded corners as shown in the image
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderWidth: type === 'secondary' ? 2 : 0,
+            borderColor: primaryColor,
+            height: 50
+        };
+        // Size variations
+        var sizeStyles = {
+            small: {
+                paddingVertical: 6,
+                paddingHorizontal: 16,
+                minWidth: 80,
+            },
+            regular: {
+                paddingVertical: 12,
+                paddingHorizontal: 24,
+                minWidth: 120,
+            },
+        };
+        // Type variations
+        var typeStyles = {
+            primary: {
+                backgroundColor: disabled ? disabledColor : primaryColor, // Lighter blue when disabled
+            },
+            secondary: {
+                backgroundColor: 'transparent',
+            },
+        };
+        return __assign(__assign(__assign(__assign({}, baseStyle), sizeStyles[size]), typeStyles[type]), style);
+    };
+    var getTextStyle = function () {
+        var baseStyle = {
+            textAlign: 'center',
+        };
+        // Type variations
+        var typeStyles = {
+            primary: {
+                color: backgroundColor,
+            },
+            secondary: {
+                color: primaryColor,
+            },
+        };
+        return __assign(__assign(__assign({}, baseStyle), typeStyles[type]), textstyle);
+    };
+    return (<react_native_1.TouchableOpacity testID={testID} style={getButtonStyle()} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      <Label_1.default text={title} size={size === 'small' ? TextConstants_1.TextSize.SMALL : TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.SEMI_BOLD} customStyle={getTextStyle()}/>
+    </react_native_1.TouchableOpacity>);
+};
+exports.default = ThemedButton;

package/lib/feedback/ActivityLoader.d.ts

@@ -0,0 +1,12 @@
+interface ActivityLoaderProps {
+    loading?: boolean;
+    message?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    shadowColor?: string;
+}
+/**
+ * A loading indicator component that displays a spinner and optional message
+ */
+declare const ActivityLoader: React.FC<ActivityLoaderProps>;
+export default ActivityLoader;

package/lib/feedback/ActivityLoader.js

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_native_1 = require("react-native");
+var BaseStyle_1 = require("../utils/BaseStyle");
+var Label_1 = require("../typography/Label");
+var TextConstants_1 = require("../utils/TextConstants");
+/**
+ * A loading indicator component that displays a spinner and optional message
+ */
+var ActivityLoader = function (_a) {
+    var _b = _a.loading, loading = _b === void 0 ? true : _b, _c = _a.message, message = _c === void 0 ? "Loading..." : _c, _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;
+    if (!loading) {
+        return null;
+    }
+    var styles = getStyles(backgroundColor, textColor, shadowColor);
+    return (<react_native_1.View style={[styles.parent]}>
+      <react_native_1.View style={[styles.activityContainer, styles.shadowProp]}>
+        <react_native_1.ActivityIndicator size="large" color={textColor} style={{ marginTop: 20 }}/>
+        <Label_1.default text={message} size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.NORMAL} color={textColor} customStyle={styles.text}/>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+var getStyles = function (backgroundColor, textColor, shadowColor) { return react_native_1.StyleSheet.create({
+    shadowProp: __assign({ shadowColor: shadowColor, shadowOffset: { width: -2, height: 2 }, shadowOpacity: 0.2, shadowRadius: 5, elevation: react_native_1.Platform.OS === 'android' ? 5 : 0 }, (react_native_1.Platform.OS === 'android'
+        ? {
+            borderWidth: 0.5,
+            borderColor: 'rgba(0,0,0,0.05)',
+        }
+        : {})),
+    parent: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    activityContainer: {
+        width: 230,
+        height: 100,
+        borderRadius: 10,
+        backgroundColor: backgroundColor,
+    },
+    text: {
+        alignSelf: 'center',
+        marginTop: 4,
+        fontSize: 16,
+        color: textColor,
+    },
+}); };
+exports.default = ActivityLoader;

package/lib/feedback/CustomAlert.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { GestureResponderEvent, ViewStyle } from "react-native";
+interface CustomAlertProps {
+    visible: boolean;
+    title: string;
+    message: string | null;
+    positiveButtonText?: string;
+    negativeButtonText?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    shadowColor?: string;
+    onPositivePress: (event: GestureResponderEvent) => void;
+    onNegativePress?: (event: GestureResponderEvent) => void;
+    viewStyle?: ViewStyle | ViewStyle[];
+}
+/**
+ * A custom alert dialog component with configurable buttons
+ */
+declare const CustomAlert: React.FC<CustomAlertProps>;
+export default CustomAlert;

package/lib/feedback/CustomAlert.js

@@ -0,0 +1,96 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var BaseStyle_1 = require("../utils/BaseStyle");
+var Label_1 = require("../typography/Label");
+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 styles = getStyles(backgroundColor, textColor, shadowColor);
+    return (<react_native_1.Modal animationType="fade" transparent={true} visible={visible} statusBarTranslucent={true} 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}/>}
+          
+          <Label_1.default text={message} size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.NORMAL} color={textColor} customStyle={styles.message}/>
+          
+          <react_native_1.View style={styles.buttonContainer}>
+            <react_native_1.TouchableOpacity style={styles.textButton} testID="btnPositiveAction" onPress={onPositivePress}>
+              <Label_1.default text={positiveButtonText} size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.BOLD} color={textColor} customStyle={styles.text}/>
+            </react_native_1.TouchableOpacity>
+
+            {onNegativePress && (<react_native_1.View style={styles.buttonWrapper}>
+                <react_native_1.TouchableOpacity style={styles.textButton} testID="btnNegativeAction" onPress={onNegativePress}>
+                  <Label_1.default text={negativeButtonText} size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.BOLD} color={textColor} customStyle={styles.text}/>
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>)}
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+var getStyles = function (backgroundColor, textColor, shadowColor) { return react_native_1.StyleSheet.create({
+    centeredView: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 20,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+    },
+    modalView: __assign({ width: "100%", backgroundColor: backgroundColor, borderRadius: 20, padding: 20, alignItems: "center", shadowColor: shadowColor, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: react_native_1.Platform.OS === 'android' ? 5 : 0 }, (react_native_1.Platform.OS === 'android'
+        ? {
+            borderWidth: 0.5,
+            borderColor: 'rgba(0,0,0,0.05)',
+        }
+        : {})),
+    title: {
+        width: "100%",
+        textAlign: "left",
+        marginBottom: 10,
+    },
+    message: {
+        width: "100%",
+        textAlign: "left",
+        marginBottom: 20,
+        lineHeight: 26
+    },
+    buttonContainer: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        width: "100%",
+        marginTop: 20,
+        paddingHorizontal: 10,
+    },
+    singleButtonContainer: {
+        justifyContent: "center",
+    },
+    text: {
+        fontSize: 16,
+        fontWeight: "bold",
+        color: textColor,
+    },
+    buttonWrapper: {
+        // Ensures both buttons take equal width
+        marginStart: 35, // Adds spacing between buttons
+    },
+    textButton: {
+        paddingHorizontal: 10,
+        paddingVertical: 5
+    }
+}); };
+exports.default = CustomAlert;

package/lib/feedback/DeleteImageConfirmationDialog.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface DeleteImageConfirmationDialogProps {
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+    primaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+}
+/**
+ * A confirmation dialog for deleting images
+ */
+declare const DeleteImageConfirmationDialog: React.FC<DeleteImageConfirmationDialogProps>;
+export default DeleteImageConfirmationDialog;

package/lib/feedback/DeleteImageConfirmationDialog.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_native_1 = require("react-native");
+var react_1 = require("react");
+var Label_1 = require("../typography/Label");
+var TextConstants_1 = require("../utils/TextConstants");
+var BottomTwoButtonLayoutComponent_1 = require("../layout/BottomTwoButtonLayoutComponent");
+/**
+ * A confirmation dialog for deleting images
+ */
+var DeleteImageConfirmationDialog = function (_a) {
+    var message = _a.message, _b = _a.primaryButtonText, primaryButtonText = _b === void 0 ? "Delete" : _b, _c = _a.secondaryButtonText, secondaryButtonText = _c === void 0 ? "Cancel" : _c, onConfirm = _a.onConfirm, onCancel = _a.onCancel, primaryColor = _a.primaryColor, backgroundColor = _a.backgroundColor, textColor = _a.textColor;
+    return (<react_native_1.View style={{ flex: 1 }}>
+      <Label_1.default text={message} size={TextConstants_1.TextSize.NORMAL} weight={TextConstants_1.TextWeight.NORMAL} textColorType="primary" customStyle={{ alignSelf: 'center', textAlign: 'center', paddingHorizontal: 15, color: textColor }}/>
+    
+      <BottomTwoButtonLayoutComponent_1.default primaryButtonTestID="btnDelete" secondaryButtonTestID="btnCancel" primaryButtonText={primaryButtonText} secondaryButtonText={secondaryButtonText} onPrimaryButtonPress={onConfirm} onSecondaryButtonPress={onCancel} isPrimaryButtonDisabled={false} isSecondaryButtonDisabled={false} containerStyle={{ elevation: 0, shadowOpacity: 0, borderTopWidth: 0 }} primaryColor={primaryColor} backgroundColor={backgroundColor}/>
+    </react_native_1.View>);
+};
+exports.default = DeleteImageConfirmationDialog;

package/lib/feedback/ProgressBar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ProgressBarProps {
+    progress: number;
+    maxValue?: number;
+    minValue?: number;
+    height?: number;
+    backgroundColor?: string;
+    progressColor?: string;
+    borderRadius?: number;
+}
+/**
+ * A progress bar component that visualizes progress as a horizontal bar
+ */
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/lib/feedback/ProgressBar.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var BaseStyle_1 = require("../utils/BaseStyle");
+/**
+ * A progress bar component that visualizes progress as a horizontal bar
+ */
+var ProgressBar = function (_a) {
+    var progress = _a.progress, _b = _a.maxValue, maxValue = _b === void 0 ? 1 : _b, _c = _a.minValue, minValue = _c === void 0 ? 0 : _c, _d = _a.height, height = _d === void 0 ? 6 : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? BaseStyle_1.Colors.lightGrayColor : _e, _f = _a.progressColor, progressColor = _f === void 0 ? '#6CB7D8' : _f, _g = _a.borderRadius, borderRadius = _g === void 0 ? 3 : _g;
+    // Calculate the width percentage based on progress, minValue, and maxValue
+    var normalizedProgress = Math.max(0, Math.min(1, (progress - minValue) / (maxValue - minValue)));
+    var width = "".concat(normalizedProgress * 100, "%");
+    return (<react_native_1.View style={[styles.container, { height: height, backgroundColor: backgroundColor, borderRadius: borderRadius }]}>
+      <react_native_1.View style={[
+            styles.progressIndicator,
+            {
+                width: width,
+                backgroundColor: progressColor,
+                borderRadius: borderRadius,
+            },
+        ]}/>
+    </react_native_1.View>);
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+        overflow: 'hidden',
+    },
+    progressIndicator: {
+        height: '100%',
+    },
+});
+exports.default = ProgressBar;

package/lib/image/ImagePickerBottomSheet.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ImagePickerBottomSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    onTakePhoto: () => void;
+    onUploadFile: () => void;
+    title?: string;
+}
+declare const ImagePickerBottomSheet: React.FC<ImagePickerBottomSheetProps>;
+export default ImagePickerBottomSheet;

package/lib/image/ImagePickerBottomSheet.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var ImagePickerView_1 = require("./ImagePickerView");
+var BottomSheetDialog_1 = require("../layout/BottomSheetDialog");
+var ImagePickerBottomSheet = function (_a) {
+    var visible = _a.visible, onClose = _a.onClose, onTakePhoto = _a.onTakePhoto, onUploadFile = _a.onUploadFile, title = _a.title;
+    var ref = (0, react_1.useRef)(null);
+    var TakePhoto = function () {
+        closeSheet();
+        setTimeout(function () {
+            onTakePhoto();
+        }, 1000);
+    };
+    var UploadFile = function () {
+        closeSheet();
+        setTimeout(function () {
+            onUploadFile();
+        }, 1000);
+    };
+    var closeSheet = function () {
+        if (ref.current) {
+            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}/>
+    </BottomSheetDialog_1.default>);
+};
+exports.default = ImagePickerBottomSheet;

package/lib/image/ImagePickerView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface ImagePickerViewProps {
+    onTakePhoto: () => void;
+    onUploadFile: () => void;
+    onClose?: () => void;
+    containerStyle?: ViewStyle;
+    title?: string;
+}
+declare const ImagePickerView: React.FC<ImagePickerViewProps>;
+export default ImagePickerView;

package/lib/image/ImagePickerView.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var ic_camera_svg_1 = require("../../assets/images/ic_camera.svg");
+var ic_folder_svg_1 = require("../../assets/images/ic_folder.svg");
+var ic_close_svg_1 = require("../../assets/images/ic_close.svg");
+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"/>
+        {onClose && (<react_native_1.TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <ic_close_svg_1.default width={24} height={24}/>
+          </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>
+
+      <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>
+    </react_native_1.View>);
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: BaseStyle_1.Colors.whiteColor,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingStart: 16,
+        paddingBottom: 16
+    },
+    closeButton: {
+        padding: 4,
+    },
+    option: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 16,
+        paddingHorizontal: 16,
+    },
+    icon: {
+        marginRight: 16,
+    },
+    divider: {
+        height: 1,
+        backgroundColor: BaseStyle_1.Colors.lightGrayColor,
+        marginHorizontal: 16,
+    },
+});
+exports.default = ImagePickerView;

package/lib/image/MultipleImagePreview.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PropertyImage } from '../models/PropertyImage';
+type MultipleImagePreviewProps = {
+    /**
+     * Array of image URIs to display. Can be local file paths or server URLs.
+     */
+    images: PropertyImage[];
+    /**
+     * Initial image index to display
+     */
+    initialIndex?: number;
+    /**
+     * Callback when the preview is closed
+     */
+    onClose?: () => void;
+    /**
+     * Callback when an image is deleted
+     */
+    onDelete?: (index: number) => void;
+    /**
+     * Callback when an image is set as default
+     */
+    OnMarkDefault?: (index: number, value: boolean) => void;
+    /**
+     * Whether to show the delete button
+     */
+    showDeleteButton?: boolean;
+};
+/**
+ * MultipleImagePreview component for displaying images
+ */
+declare const MultipleImagePreview: React.FC<MultipleImagePreviewProps>;
+export default MultipleImagePreview;