@janiscommerce/ui-native 1.3.0 → 1.4.0

package/dist/src/components/BaseButton/index.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { PressableProps, ViewStyle } from 'react-native';
+import { PressableProps, ViewStyle, TextStyle } from 'react-native';
 interface BaseButtonProps extends PressableProps {
     title?: string | null;
     icon?: string;
@@ -9,7 +9,7 @@ interface BaseButtonProps extends PressableProps {
     pressedColor?: string;
     style?: ViewStyle;
     iconStyle?: ViewStyle;
-    textStyle?: ViewStyle;
+    textStyle?: TextStyle;
     children?: React.ReactNode;
 }
 declare const BaseButton: FC<BaseButtonProps>;

package/dist/src/components/Select/Components/Dropdown/index.d.ts

@@ -1,13 +1,10 @@
-import { FC } from 'react';
-import { CustomOptionComponent, Option } from '../..';
-interface DropdownProps {
-    isShowedDropdown: boolean;
-    filteredOptions: Option[];
-    selectedOptions: Option[];
-    noOptionsMessage: string;
-    optionStyles?: {};
-    callbackOption: (option: Option) => void;
-    customOptionComponent?: CustomOptionComponent | null;
+import React, { FC } from 'react';
+import { DropdownMeasures } from '../..';
+export interface DropdownProps {
+    show: boolean;
+    setShow: (isShowed: boolean) => void;
+    children: React.Component | React.ReactNode;
+    measures: DropdownMeasures;
 }
 declare const Dropdown: FC<DropdownProps>;
 export default Dropdown;

package/dist/src/components/Select/Components/Dropdown/index.js

@@ -1,85 +1,23 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
-import { base, black, grey, primary, white } from '../../../../theme/palette';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../../../scale';
-const Dropdown = (props) => {
-    const { isShowedDropdown, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, } = props;
-    if (!isShowedDropdown) {
-        return null;
-    }
-    const handleSelectedOption = (option) => callbackOption(option);
-    const validPadding = scaledForDevice(8, moderateScale);
-    const validMaxHeight = scaledForDevice(168, moderateScale);
-    const validTop = scaledForDevice(60, moderateScale);
-    const validMarginBottom = scaledForDevice(20, moderateScale);
-    const validElevation = scaledForDevice(5, moderateScale);
-    const validHeight = scaledForDevice(42, moderateScale);
-    const validLeft = scaledForDevice(8, horizontalScale);
-    const validFontSize = scaledForDevice(14, moderateScale);
-    const validPaddingVertical = scaledForDevice(10, moderateScale);
+import { Modal, Pressable, StyleSheet, View } from 'react-native';
+const Dropdown = ({ show, setShow, children, measures }) => {
     const styles = StyleSheet.create({
-        container: {
+        background: {
             width: '100%',
-            padding: validPadding,
+            height: '100%',
         },
-        optionWrapper: {
+        dropdown: {
             position: 'absolute',
-            maxHeight: validMaxHeight,
-            borderColor: grey[200],
-            backgroundColor: base.white,
-            width: '100%',
-            top: validTop,
-            marginBottom: validMarginBottom,
-            elevation: validElevation,
-            zIndex: 10,
-            flex: 1,
-        },
-        option: {
-            width: '100%',
-            height: validHeight,
-            justifyContent: 'center',
-            alignItems: 'stretch',
-            paddingLeft: validLeft,
-        },
-        optionText: {
-            fontSize: validFontSize,
-            color: black.main,
-            fontWeight: '400',
-        },
-        noOptionText: {
-            fontSize: validFontSize,
-            color: grey[500],
-            fontWeight: '400',
-            paddingLeft: validLeft,
-            paddingVertical: validPaddingVertical,
+            height: '100%',
+            width: measures.width,
+            top: measures.pageY,
+            left: measures.pageX,
         },
     });
-    const renderOptions = filteredOptions?.length &&
-        filteredOptions.map((option) => {
-            const isSelectedOption = selectedOptions.some((selected) => selected.label === option.label);
-            const styleText = { ...styles.optionText, ...(isSelectedOption && { color: primary.main }) };
-            const styleOption = {
-                ...styles.option,
-                ...(isSelectedOption && { backgroundColor: white.light }),
-            };
-            const customProps = {
-                renderedOption: option,
-                filteredOptions,
-                selectedOptions,
-                callbackOptionSelected: callbackOption,
-            };
-            if (customOptionComponent) {
-                return customOptionComponent(customProps);
-            }
-            return (<TouchableOpacity style={{ ...styleOption, ...optionStyles }} key={option.label} onPress={() => handleSelectedOption(option)}>
-					<Text style={styleText}> {option.label}</Text>
-				</TouchableOpacity>);
-        });
-    const noRenderOptions = (<View aria-disabled>
-			<Text style={styles.noOptionText}> {noOptionsMessage}</Text>
-		</View>);
-    return (<ScrollView style={styles.optionWrapper} contentContainerStyle={styles.container}>
-			{filteredOptions?.length ? renderOptions : noRenderOptions}
-		</ScrollView>);
+    return (<Modal animationType="fade" transparent visible={show}>
+			<Pressable style={styles.background} onPress={() => setShow(false)}>
+				<View style={styles.dropdown}>{children}</View>
+			</Pressable>
+		</Modal>);
 };
 export default Dropdown;

package/dist/src/components/Select/Components/Modal/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { DropdownProps } from '../Dropdown';
+interface ModalProps extends DropdownProps {
+    isMulti: boolean;
+    modalAcceptText: string;
+}
+declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/src/components/Select/Components/Modal/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Modal as ModalComponent, StyleSheet, View } from 'react-native';
+import { base, primary, white } from '../../../../theme/palette';
+import BaseButton from '../../../BaseButton';
+import { moderateScale, scaledForDevice } from '../../../../scale';
+const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
+    const validBottom = scaledForDevice(20, moderateScale);
+    const validMinWidth = scaledForDevice(270, moderateScale);
+    const validPaddingTop = scaledForDevice(24, moderateScale);
+    const validPaddingBottom = scaledForDevice(12, moderateScale);
+    const validPaddingHorizontal = scaledForDevice(20, moderateScale);
+    const validLeft = scaledForDevice(8, moderateScale);
+    const validTop = scaledForDevice(4, moderateScale);
+    const validFontSize = scaledForDevice(13, moderateScale);
+    const styles = StyleSheet.create({
+        background: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#0009',
+        },
+        containerModal: {
+            justifyContent: 'space-between',
+        },
+        contentWrapper: {
+            bottom: validBottom,
+            minWidth: validMinWidth,
+            paddingTop: validPaddingTop,
+            paddingBottom: validPaddingBottom,
+            paddingLeft: validPaddingHorizontal,
+            paddingRight: validPaddingHorizontal,
+            backgroundColor: base.white,
+            elevation: 5,
+        },
+        buttonWrapper: {
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            flexWrap: 'wrap',
+            left: validLeft,
+            top: validTop,
+        },
+        button: {
+            backgroundColor: base.white,
+        },
+        buttonText: {
+            color: primary.main,
+            fontSize: validFontSize,
+            fontWeight: '700',
+            textTransform: 'uppercase',
+        },
+    });
+    return (<ModalComponent animationType="fade" transparent visible={show}>
+			<View style={styles.background}>
+				<View style={styles.contentWrapper}>
+					<View style={styles.containerModal}>{children}</View>
+					{isMulti && (<View style={styles.buttonWrapper}>
+							<BaseButton title={modalAcceptText} iconRight={false} pressedColor={white.main} style={styles.button} textStyle={styles.buttonText} onPress={() => setShow(false)}/>
+						</View>)}
+				</View>
+			</View>
+		</ModalComponent>);
+};
+export default Modal;

package/dist/src/components/Select/Components/Options/index.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { CustomOptionComponent, DropdownMeasures, Option, VariantOptions } from '../..';
+interface OptionsProps {
+    variantOptions: VariantOptions;
+    dropdownMeasures: DropdownMeasures;
+    isShowedOptions: boolean;
+    setIsShowedOptions: (isShowed: boolean) => void;
+    filteredOptions: Option[];
+    selectedOptions: Option[];
+    noOptionsMessage: string;
+    optionStyles?: {};
+    callbackOption: (option: Option) => void;
+    customOptionComponent?: CustomOptionComponent | null;
+    isMulti: boolean;
+    modalAcceptText: string;
+}
+declare const Options: FC<OptionsProps>;
+export default Options;

package/dist/src/components/Select/Components/Options/index.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
+import { base, black, grey, primary, white } from '../../../../theme/palette';
+import SwitcherComponent from '../SwitcherComponent';
+const Options = (props) => {
+    const { variantOptions, dropdownMeasures, isShowedOptions, setIsShowedOptions, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, isMulti, modalAcceptText, } = props;
+    const handleSelectedOption = (option) => callbackOption(option);
+    const isModal = variantOptions === 'Modal';
+    const styles = StyleSheet.create({
+        container: {
+            position: 'relative',
+            width: '100%',
+            padding: !isModal ? 8 : 0,
+        },
+        optionWrapper: {
+            position: !isModal ? 'absolute' : 'relative',
+            maxHeight: 168,
+            minHeight: 'auto',
+            borderColor: grey[200],
+            backgroundColor: base.white,
+            width: '100%',
+            top: !isModal ? 60 : 0,
+            marginBottom: 20,
+            elevation: !isModal ? 5 : 0,
+            flex: 1,
+        },
+        option: {
+            width: '100%',
+            height: 42,
+            justifyContent: 'center',
+            alignItems: 'stretch',
+            paddingLeft: 8,
+        },
+        optionText: {
+            color: black.main,
+            fontWeight: '400',
+        },
+        noOptionText: {
+            color: grey[500],
+            fontWeight: '400',
+            paddingLeft: 8,
+            paddingVertical: 10,
+        },
+    });
+    const renderOptions = filteredOptions?.length &&
+        filteredOptions.map((option) => {
+            const isSelectedOption = selectedOptions.some((selected) => selected.label === option.label);
+            const styleText = { ...styles.optionText, ...(isSelectedOption && { color: primary.main }) };
+            const styleOption = {
+                ...styles.option,
+                ...(isSelectedOption && { backgroundColor: white.light }),
+            };
+            const customProps = {
+                renderedOption: option,
+                filteredOptions,
+                selectedOptions,
+                callbackOptionSelected: callbackOption,
+            };
+            if (customOptionComponent) {
+                return customOptionComponent(customProps);
+            }
+            return (<TouchableOpacity style={{ ...styleOption, ...optionStyles }} key={option.label} onPress={() => handleSelectedOption(option)}>
+					<Text style={styleText}> {option.label}</Text>
+				</TouchableOpacity>);
+        });
+    const noRenderOptions = (<View aria-disabled>
+			<Text style={styles.noOptionText}> {noOptionsMessage}</Text>
+		</View>);
+    return (<SwitcherComponent measures={dropdownMeasures} variant={variantOptions} show={isShowedOptions} setShow={setIsShowedOptions} isMulti={isMulti} modalAcceptText={modalAcceptText}>
+			<ScrollView style={styles.optionWrapper} contentContainerStyle={styles.container}>
+				{filteredOptions?.length ? renderOptions : noRenderOptions}
+			</ScrollView>
+		</SwitcherComponent>);
+};
+export default Options;

package/dist/src/components/Select/Components/SwitcherComponent/index.d.ts

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { DropdownMeasures, VariantOptions } from '../..';
+interface SwitcherProps {
+    show: boolean;
+    isMulti: boolean;
+    variant: VariantOptions;
+    measures: DropdownMeasures;
+    children: React.Component | React.ReactNode;
+    modalAcceptText: string;
+    setShow: (isShowed: boolean) => void;
+}
+declare const SwitcherComponent: FC<SwitcherProps>;
+export default SwitcherComponent;

package/dist/src/components/Select/Components/SwitcherComponent/index.js

@@ -0,0 +1,8 @@
+import Dropdown from '../Dropdown';
+import Modal from '../Modal';
+const components = {
+    Dropdown,
+    Modal,
+};
+const SwitcherComponent = (props) => components[props?.variant](props);
+export default SwitcherComponent;

package/dist/src/components/Select/index.d.ts

@@ -9,6 +9,15 @@ declare enum KeyboardTypes {
     PhonePad = "phone-pad",
     URL = "url"
 }
+export declare enum VariantOptions {
+    Dropdown = "Dropdown",
+    Modal = "Modal"
+}
+export interface DropdownMeasures {
+    width: number;
+    pageY: number;
+    pageX: number;
+}
 export interface Option {
     label: string;
     value: string | number;
@@ -23,11 +32,11 @@ export type CustomOptionComponent = (props: CustomOptionComponentProps) => React
 interface SelectProps {
     options: Option[];
     label: string;
-    value?: string;
+    value?: Option[];
+    variantOptions?: VariantOptions;
     optionStyles?: {};
     placeholder?: string;
     inputProps?: TextInput;
-    isSearchable?: boolean;
     isMulti?: boolean;
     isDisabled?: boolean;
     noOptionsMessage?: string;
@@ -36,6 +45,7 @@ interface SelectProps {
     onFocus?: () => void;
     onSelectOption?: (selectedOptions: Option[]) => void;
     customOptionComponent?: CustomOptionComponent | null;
+    modalAcceptText?: string;
 }
 declare const Select: FC<SelectProps>;
 export default Select;

package/dist/src/components/Select/index.js

@@ -1,11 +1,10 @@
 /* istanbul ignore file */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Keyboard, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Keyboard, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { black, grey, primary } from '../../theme/palette';
 import { formatPlaceholderMulti } from './utils';
-import ChevronIcon from './Components/Icons/Chevron';
-import DeleteIcon from './Components/Icons/Delete';
-import Dropdown from './Components/Dropdown';
+import Options from './Components/Options';
+import Icon from '../Icon';
 import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 var KeyboardTypes;
 (function (KeyboardTypes) {
@@ -17,16 +16,26 @@ var KeyboardTypes;
     KeyboardTypes["PhonePad"] = "phone-pad";
     KeyboardTypes["URL"] = "url";
 })(KeyboardTypes || (KeyboardTypes = {}));
-const Select = ({ options, label, value = null, placeholder = '', optionStyles = {}, inputProps = {}, isSearchable = false, isMulti = false, isDisabled = false, noOptionsMessage = 'no options', multiOptionsText = '', keyboardType = KeyboardTypes.Default, onFocus = () => { }, onSelectOption = () => { }, customOptionComponent = null, ...props }) => {
+export var VariantOptions;
+(function (VariantOptions) {
+    VariantOptions["Dropdown"] = "Dropdown";
+    VariantOptions["Modal"] = "Modal";
+})(VariantOptions || (VariantOptions = {}));
+const Select = ({ options, label, value = null, variantOptions = VariantOptions.Dropdown, placeholder = '', optionStyles = {}, inputProps = {}, isMulti = false, isDisabled = false, noOptionsMessage = 'no options', multiOptionsText = null, keyboardType = KeyboardTypes.Default, onFocus = () => { }, onSelectOption = () => { }, customOptionComponent = null, modalAcceptText = 'accept', ...props }) => {
     const [inputValue, setInputValue] = useState('');
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [filteredOptions, setFilteredOptions] = useState(options);
-    const [isShowedDropdown, setIsShowedDropdown] = useState(false);
+    const [isShowedOptions, setIsShowedOptions] = useState(false);
+    const [dropdownMeasures, setDropdownMeasures] = useState({
+        width: 0,
+        pageY: 0,
+        pageX: 0,
+    });
     const inputRef = useRef(null);
-    const hasDefaultValue = value && options?.find((option) => option.label === value);
-    const isMoveLabel = isShowedDropdown || inputValue;
+    const hasDefaultValue = !!value?.length && options?.some((option) => option?.label === value[0]?.label);
+    const isMoveLabel = isShowedOptions || inputValue;
     const showDeleteIcon = isDisabled ? false : !!inputValue && !!selectedOptions?.length;
-    const isArrowRotated = isShowedDropdown ? '180deg' : '0deg';
+    const isArrowRotated = isShowedOptions ? '180deg' : '0deg';
     const filterOptions = (textValue) => {
         if (typeof textValue !== 'string' || !textValue.length) {
             return setFilteredOptions(options);
@@ -39,21 +48,19 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
         filterOptions(textValue);
     };
     const handleOnFocus = () => {
-        if (!isSearchable || isMulti) {
-            Keyboard.dismiss();
-        }
+        Keyboard.dismiss();
+        setIsShowedOptions(true);
         onFocus();
-        setIsShowedDropdown(true);
     };
     const setSingleOption = (option) => {
-        setIsShowedDropdown(false);
+        setIsShowedOptions(false);
         setSelectedOptions([option]);
         setInputValue(option.label);
     };
     const setMultiOptions = (option) => {
-        const optionMatcher = selectedOptions.some((previewOption) => previewOption === option);
+        const optionMatcher = !!selectedOptions.find((previewOption) => previewOption.value === option.value);
         const updateOption = optionMatcher
-            ? selectedOptions.filter((previewOption) => previewOption !== option)
+            ? selectedOptions.filter((previewOption) => previewOption.value !== option.value)
             : [...selectedOptions, option];
         setSelectedOptions(updateOption);
         setInputValue(formatPlaceholderMulti(updateOption, multiOptionsText));
@@ -63,11 +70,11 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
         if (isDisabled) {
             return null;
         }
-        setIsShowedDropdown(!isShowedDropdown);
+        setIsShowedOptions(!isShowedOptions);
         inputRef.current?.blur();
     };
     const handleResetOptions = () => {
-        setIsShowedDropdown(false);
+        setIsShowedOptions(false);
         setInputValue('');
         setSelectedOptions([]);
     };
@@ -75,16 +82,23 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
         if (!!selectedOptions?.length && !!inputValue) {
             onSelectOption(selectedOptions);
         }
-    }, [inputValue, onSelectOption, selectedOptions]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedOptions]);
     useEffect(() => {
         memoizedSelectedOptions();
-    }, [selectedOptions, inputValue, memoizedSelectedOptions]);
+    }, [selectedOptions, memoizedSelectedOptions]);
     useEffect(() => {
         if (hasDefaultValue) {
-            setSelectedOptions([hasDefaultValue]);
-            setInputValue(value);
+            setSelectedOptions(value);
+            setInputValue(formatPlaceholderMulti(value, multiOptionsText));
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasDefaultValue, value]);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.measure((x, y, width, height, pageX, pageY) => setDropdownMeasures({ width, pageX, pageY: pageY - 15 }));
+        }
+    }, [isShowedOptions]);
     const moveLabel = isMoveLabel ? 38 : 10;
     const validFontSize = scaledForDevice(16, moderateScale);
     const validMarginBottom = scaledForDevice(10, moderateScale);
@@ -100,7 +114,7 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
             width: '100%',
             marginBottom: validMarginBottom,
             position: 'relative',
-            zIndex: isShowedDropdown ? 10 : 0,
+            zIndex: isShowedOptions ? 10 : 0,
         },
         wrapperInput: {
             position: 'relative',
@@ -127,7 +141,7 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
             letterSpacing: 0,
             borderBottomWidth: validBorderBottomWidth,
             color: black.main,
-            borderBottomColor: isShowedDropdown ? primary.main : grey[200],
+            borderBottomColor: isShowedOptions ? primary.main : grey[200],
         },
         arrowIcon: {
             position: 'absolute',
@@ -145,16 +159,20 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
             zIndex: 1,
         },
     });
-    return (<View style={styles.wrapper}>
-			<View style={styles.wrapperInput} {...props}>
-				{showDeleteIcon && <DeleteIcon style={styles.deleteIcon} onPress={handleResetOptions}/>}
-				<ChevronIcon style={styles.arrowIcon} color={isDisabled ? black.main : primary.main} onPress={handleCloseDropdown}/>
+    return (<View style={styles.wrapper} {...props}>
+			<View style={styles.wrapperInput}>
+				{isMulti && showDeleteIcon && (<Pressable onPress={handleResetOptions} style={styles.deleteIcon}>
+						<Icon size={20} color={black.main} name="cross_circle_flat"/>
+					</Pressable>)}
+				<Pressable style={styles.arrowIcon} onPress={handleCloseDropdown}>
+					<Icon size={20} color={isDisabled ? black.main : primary.main} name="chevron_down"/>
+				</Pressable>
 
 				<Text style={styles.label}>{label}</Text>
-				<TextInput ref={inputRef} style={styles.input} value={inputValue} placeholder={isMoveLabel && placeholder} showSoftInputOnFocus={!isMulti && isSearchable} caretHidden={!isSearchable} keyboardType={keyboardType} editable={!isDisabled} onFocus={handleOnFocus} onChangeText={handleChange} {...inputProps}/>
+				<TextInput ref={inputRef} style={styles.input} value={inputValue} placeholder={isMoveLabel && placeholder} showSoftInputOnFocus={false} caretHidden={true} keyboardType={keyboardType} editable={!isDisabled} onFocus={handleOnFocus} onChangeText={handleChange} {...inputProps}/>
 			</View>
 
-			<Dropdown isShowedDropdown={isShowedDropdown} filteredOptions={filteredOptions} selectedOptions={selectedOptions} noOptionsMessage={noOptionsMessage} optionStyles={optionStyles} callbackOption={handleSelectedOption} customOptionComponent={customOptionComponent}/>
+			<Options variantOptions={variantOptions} dropdownMeasures={dropdownMeasures} setIsShowedOptions={setIsShowedOptions} isShowedOptions={isShowedOptions} filteredOptions={filteredOptions} selectedOptions={selectedOptions} noOptionsMessage={noOptionsMessage} optionStyles={optionStyles} callbackOption={handleSelectedOption} customOptionComponent={customOptionComponent} isMulti={isMulti} modalAcceptText={modalAcceptText}/>
 		</View>);
 };
 export default Select;

package/dist/src/components/Select/utils/index.d.ts

@@ -1,2 +1,2 @@
 import { Option } from '..';
-export declare const formatPlaceholderMulti: (options: Option[], optionsText: string) => string;
+export declare const formatPlaceholderMulti: (options: Option[], optionsText: string | null) => string;

package/dist/src/components/Select/utils/index.js

@@ -2,7 +2,6 @@ export const formatPlaceholderMulti = (options, optionsText) => {
     if (!options.length) {
         return '';
     }
-    return options.length > 1
-        ? `${options[0].label}  (+${options.length - 1} ${optionsText})`
-        : options[0].label;
+    const validOptionText = `(+${options.length - 1}${optionsText ? ` ${optionsText}` : ''})`;
+    return options.length > 1 ? `${options[0].label}  ${validOptionText}` : options[0].label;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",

package/dist/src/components/Select/Components/Icons/Chevron/index.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-interface IconProps {
-    color?: string;
-    size?: number;
-    iconStyles?: {};
-    style?: ViewStyle;
-    onPress?: () => void;
-}
-declare const Chevron: {
-    ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
-    defaultProps: {
-        color: string;
-        onPress: () => void;
-    };
-};
-export default Chevron;

package/dist/src/components/Select/Components/Icons/Chevron/index.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { primary } from '../../../../../theme/palette';
-import Svg, { Path } from 'react-native-svg';
-import { moderateScale, scaledForDevice } from '../../../../../scale';
-const Chevron = ({ style, color, size = 21, onPress, ...props }) => {
-    const validSize = scaledForDevice(size, moderateScale);
-    return (<Pressable onPress={onPress} style={style} {...props}>
-			<View>
-				<Svg width={validSize} height={validSize} viewBox="0 0 16 16">
-					<Path d="M8.17432 11.1055L3 6.49316L4.33106 5L8.17627 8.42773L12.0132 5.01904L13.3413 6.51416L8.17432 11.1055Z" fill={color}/>
-				</Svg>
-			</View>
-		</Pressable>);
-};
-Chevron.defaultProps = {
-    color: primary.main,
-    onPress: () => { },
-};
-export default Chevron;

package/dist/src/components/Select/Components/Icons/Delete/index.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-interface IconProps {
-    color?: string;
-    size?: number;
-    iconStyles?: {};
-    style?: ViewStyle;
-    onPress?: () => void;
-}
-declare const Delete: {
-    ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
-    defaultProps: {
-        color: string;
-        onPress: () => void;
-    };
-};
-export default Delete;

package/dist/src/components/Select/Components/Icons/Delete/index.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { black } from '../../../../../theme/palette';
-import Svg, { Path } from 'react-native-svg';
-import { moderateScale, scaledForDevice } from '../../../../../scale';
-const Delete = ({ style, color, size = 21, onPress, ...props }) => {
-    const validSize = scaledForDevice(size, moderateScale);
-    return (<Pressable onPress={onPress} style={style} {...props}>
-			<View>
-				<Svg width={validSize} height={validSize} viewBox="0 0 16 16">
-					<Path fill-rule="evenodd" clip-rule="evenodd" d="M1 8C1 4.13403 4.13397 1 8 1C11.866 1 15 4.13403 15 8C15 11.866 11.866 15 8 15C4.13397 15 1 11.866 1 8ZM10.03 11.4441L11.4441 10.03L9.41406 8L11.4441 5.96997L10.03 4.55591L8 6.58594L5.96997 4.55591L4.55591 5.96997L6.58594 8L4.55591 10.03L5.96997 11.4441L8 9.41406L10.03 11.4441Z" fill={color}/>
-				</Svg>
-			</View>
-		</Pressable>);
-};
-Delete.defaultProps = {
-    color: black.main,
-    onPress: () => { },
-};
-export default Delete;