@janiscommerce/ui-native 1.26.0 → 1.27.0-beta.0

package/dist/components/atoms/Icon/index.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-export interface Props {
-    name: string;
-    color?: string;
-    size?: number;
-    style?: any;
-}
-declare const Icon: FC<Props>;
-export default Icon;

package/dist/components/atoms/Icon/index.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
-import icoMoonConfig from './assets/fonts/selection.json';
-import { primary } from '../../../theme/palette';
-import { moderateScale, scaledForDevice } from '../../../scale';
-const IconComponent = createIconSetFromIcoMoon(icoMoonConfig, 'janis-font-icon', 'janis-font-icon.ttf');
-const Icon = ({ name, color = primary.main, size = 16, ...props }) => {
-    if (!name) {
-        return null;
-    }
-    const validateSize = scaledForDevice(size, moderateScale);
-    return <IconComponent name={name} color={color} size={validateSize} {...props}/>;
-};
-export default Icon;

package/dist/components/atoms/Image/index.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Props as NativeIconProps } from '../Icon';
-import { ViewStyle } from 'react-native';
-import { FastImageProps } from 'react-native-fast-image';
-interface ImageProps extends FastImageProps {
-    iconProps?: NativeIconProps;
-    iconBackgroundStyle?: ViewStyle;
-}
-declare const Image: ({ source, iconProps, iconBackgroundStyle, onError, ...props }: ImageProps) => React.JSX.Element;
-export default Image;

package/dist/components/atoms/Image/index.js

@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import Icon from '../Icon';
-import { palette } from '../../../theme/palette';
-import { View, StyleSheet } from 'react-native';
-import FastImage from 'react-native-fast-image';
-const Image = ({ source, iconProps, iconBackgroundStyle = {}, onError, ...props }) => {
-    const [showPlaceholderImage, setShowPlaceholderImage] = useState(false);
-    const styles = StyleSheet.create({
-        iconBackground: {
-            backgroundColor: palette.white.light,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-    });
-    const placeholderStyle = [styles.iconBackground, iconBackgroundStyle, props.style].filter(Boolean);
-    const handleError = () => {
-        if (onError) {
-            onError();
-        }
-        setShowPlaceholderImage(true);
-    };
-    if (showPlaceholderImage || !source) {
-        return (<View style={placeholderStyle}>
-				<Icon name="exclamation_circle" color={palette.white.dark} size={36} {...iconProps}/>
-			</View>);
-    }
-    return <FastImage onError={handleError} source={source} {...props}/>;
-};
-export default Image;

package/dist/components/atoms/Input/index.d.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import { TextInput, KeyboardType, TextStyle } from 'react-native';
-import { Status } from './utils';
-export declare enum keyboardTypes {
-    default = "default",
-    numberPad = "number-pad",
-    decimalPad = "decimal-pad",
-    numeric = "numeric",
-    emailAddress = "email-address",
-    phonePad = "phone-pad",
-    url = "url"
-}
-interface InputProps {
-    disabled?: boolean;
-    readOnly?: boolean;
-    label: string;
-    placeholder: string;
-    value?: number | string;
-    inputColor?: string;
-    valueColor?: string;
-    status?: Status;
-    statusMessage?: string;
-    keyboardType?: KeyboardType;
-    onChange?: () => void;
-    onSubmitEditing?: () => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    style?: TextStyle;
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
-export default Input;

package/dist/components/atoms/Input/index.js

@@ -1,94 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { TextInput, StyleSheet, View, Text, } from 'react-native';
-import { getBorderColor, getInputInitialState, getLabelColor, getStatusMessageColor, raiseLabel, showStatusMessage, } from './utils';
-import { moderateScale, horizontalScale, scaledForDevice } from '../../../scale';
-export var keyboardTypes;
-(function (keyboardTypes) {
-    keyboardTypes["default"] = "default";
-    keyboardTypes["numberPad"] = "number-pad";
-    keyboardTypes["decimalPad"] = "decimal-pad";
-    keyboardTypes["numeric"] = "numeric";
-    keyboardTypes["emailAddress"] = "email-address";
-    keyboardTypes["phonePad"] = "phone-pad";
-    keyboardTypes["url"] = "url";
-})(keyboardTypes || (keyboardTypes = {}));
-const Input = React.forwardRef(({ disabled = false, readOnly = false, label, placeholder, value = '', inputColor = '#2979FF', valueColor = '#2F2F2F', status = 'error', statusMessage = '', keyboardType = keyboardTypes.default, onChange = () => { }, onSubmitEditing = () => { }, onFocus = () => { }, onBlur = () => { }, style, ...props }, ref) => {
-    const [inputState, setInputState] = useState('incomplete');
-    useEffect(() => {
-        setInputState(getInputInitialState(value?.toString()));
-    }, [value]);
-    if (!label || !placeholder) {
-        return null;
-    }
-    const onFocusHandler = () => {
-        setInputState('focus');
-        return onFocus();
-    };
-    const onEndEditingHandler = ({ nativeEvent, }) => {
-        const { text = '' } = nativeEvent;
-        if (text) {
-            setInputState('complete');
-            return onBlur();
-        }
-        setInputState('incomplete');
-        return onBlur();
-    };
-    const hasMessage = !!statusMessage;
-    const isLabelVisible = !disabled && !readOnly && (inputState !== 'incomplete' || hasMessage);
-    const validBorderColor = getBorderColor({ inputState, hasMessage, status, inputColor });
-    const validLabelColor = getLabelColor({
-        disabled,
-        readOnly,
-        inputColor,
-        inputState,
-        statusMessage,
-        status,
-    });
-    const validStatusMessageColor = getStatusMessageColor(status);
-    const validBottom = scaledForDevice(25, moderateScale);
-    const validHeight = scaledForDevice(50, moderateScale);
-    const validBorderBottomWidth = scaledForDevice(1, horizontalScale);
-    const validLineHeight = scaledForDevice(19, moderateScale);
-    const validFontSize = scaledForDevice(16, moderateScale);
-    const validateMarginTop = scaledForDevice(5, moderateScale);
-    const styles = StyleSheet.create({
-        container: {
-            width: '100%',
-        },
-        inputWrapper: {
-            height: validHeight,
-            borderBottomColor: validBorderColor,
-            borderBottomWidth: validBorderBottomWidth,
-            justifyContent: 'flex-end',
-        },
-        label: {
-            color: validLabelColor,
-            fontSize: validFontSize,
-            letterSpacing: 0,
-            lineHeight: validLineHeight,
-            position: 'absolute',
-            bottom: raiseLabel({ disabled, hasMessage, inputState }) ? validBottom : 0,
-        },
-        input: {
-            color: valueColor,
-            fontSize: validFontSize,
-            letterSpacing: 0,
-            lineHeight: validLineHeight,
-            padding: 0,
-        },
-        statusMessage: {
-            color: validStatusMessageColor,
-            marginTop: validateMarginTop,
-        },
-    });
-    return (<View style={styles.container}>
-				<View style={styles.inputWrapper}>
-					{isLabelVisible && <Text style={styles.label}>{label}</Text>}
-					<TextInput style={[styles.input, style]} ref={ref} onFocus={onFocusHandler} onEndEditing={onEndEditingHandler} onChange={onChange} onSubmitEditing={onSubmitEditing} placeholder={placeholder} editable={!(readOnly || disabled)} selectionColor={inputColor} keyboardType={keyboardType} value={value?.toString()} {...props}/>
-				</View>
-				{showStatusMessage(hasMessage, inputState) && (<View>
-						<Text style={styles.statusMessage}>{statusMessage}</Text>
-					</View>)}
-			</View>);
-});
-export default Input;

package/dist/components/atoms/Input/utils/index.d.ts

@@ -1,28 +0,0 @@
-import { palette } from '../../../../theme/palette';
-export type Status = keyof typeof palette;
-interface getBorderColorProps {
-    inputState: string;
-    hasMessage: boolean;
-    status: Status;
-    inputColor: string;
-}
-interface getLabelColorProps {
-    disabled: boolean;
-    readOnly: boolean;
-    inputColor: string;
-    inputState: string;
-    statusMessage: string;
-    status: Status;
-}
-interface raiseLabelProps {
-    disabled: boolean;
-    hasMessage: boolean;
-    inputState: string;
-}
-export declare const getInputInitialState: (value: string) => "incomplete" | "complete";
-export declare const getBorderColor: ({ inputState, hasMessage, status, inputColor, }: getBorderColorProps) => any;
-export declare const getLabelColor: ({ disabled, readOnly, inputColor, inputState, statusMessage, status, }: getLabelColorProps) => any;
-export declare const raiseLabel: ({ disabled, hasMessage, inputState }: raiseLabelProps) => boolean;
-export declare const showStatusMessage: (hasMessage: boolean, inputState: string) => boolean;
-export declare const getStatusMessageColor: (status: Status) => any;
-export {};

package/dist/components/atoms/Input/utils/index.js

@@ -1,44 +0,0 @@
-import { palette } from '../../../../theme/palette';
-export const getInputInitialState = (value) => {
-    if (!value) {
-        return 'incomplete';
-    }
-    return 'complete';
-};
-export const getBorderColor = ({ inputState, hasMessage, status, inputColor, }) => {
-    if (inputState === 'focus') {
-        return inputColor;
-    }
-    if (hasMessage) {
-        const colorPalette = palette[status];
-        if ('main' in colorPalette) {
-            return colorPalette.main;
-        }
-        return palette.error.main;
-    }
-    return palette.grey[500];
-};
-export const getLabelColor = ({ disabled, readOnly, inputColor, inputState, statusMessage, status, }) => {
-    if (disabled || readOnly) {
-        return palette.grey[500];
-    }
-    if (inputState === 'focus') {
-        return inputColor;
-    }
-    if (statusMessage) {
-        const colorPalette = palette[status];
-        if ('main' in colorPalette) {
-            return colorPalette.main;
-        }
-    }
-    return palette.grey[500];
-};
-export const raiseLabel = ({ disabled, hasMessage, inputState }) => !disabled && (inputState !== 'incomplete' || !!hasMessage);
-export const showStatusMessage = (hasMessage, inputState) => !!hasMessage && inputState !== 'focus';
-export const getStatusMessageColor = (status) => {
-    const colorPalette = palette[status];
-    if ('main' in colorPalette) {
-        return colorPalette.main;
-    }
-    return palette.error.main;
-};

package/dist/components/atoms/List/index.d.ts

@@ -1,26 +0,0 @@
-import React, { FC } from 'react';
-import { FlatListProps, ScrollViewProps } from 'react-native';
-type TypeData = any;
-type RCProps = {
-    item: TypeData;
-    index: number;
-};
-type TypeRenderComponent = ({ item, index }: RCProps) => React.ReactElement;
-export declare enum TypeList {
-    FlatList = "flatList",
-    ScrollView = "scrollView"
-}
-interface BaseProps {
-    data: TypeData[] | undefined;
-    renderComponent: TypeRenderComponent;
-    type?: TypeList;
-}
-type FlatListOnlyProps = Omit<FlatListProps<TypeData>, 'data' | 'renderItem'> & {
-    type?: TypeList.FlatList;
-};
-type ScrollViewOnlyProps = ScrollViewProps & {
-    type: TypeList.ScrollView;
-};
-type ListProps = BaseProps & (FlatListOnlyProps | ScrollViewOnlyProps);
-declare const List: FC<ListProps>;
-export default List;

package/dist/components/atoms/List/index.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { FlatList, ScrollView } from 'react-native';
-export var TypeList;
-(function (TypeList) {
-    TypeList["FlatList"] = "flatList";
-    TypeList["ScrollView"] = "scrollView";
-})(TypeList || (TypeList = {}));
-const List = ({ data, renderComponent, type = TypeList.FlatList, ...props }) => {
-    if (!data?.length) {
-        return null;
-    }
-    if (type === TypeList.ScrollView) {
-        const scrollProps = props;
-        return (<ScrollView {...scrollProps}>
-				{data.map((item, index) => renderComponent({ item, index }))}
-			</ScrollView>);
-    }
-    const cleanedFlatProps = props;
-    return (<FlatList data={data} renderItem={({ item, index }) => renderComponent({ item, index })} keyExtractor={(item, index) => String(item.id ?? index)} {...cleanedFlatProps}/>);
-};
-export default List;

package/dist/components/atoms/Loading/LoadingSvg/index.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Animated, ViewProps } from 'react-native';
-interface IanimatedView extends Animated.AnimatedProps<ViewProps> {
-    size?: number;
-    color?: string;
-}
-declare const LoadingSvg: ({ size, color, ...props }: IanimatedView) => React.JSX.Element;
-export default LoadingSvg;

package/dist/components/atoms/Loading/LoadingSvg/index.js

@@ -1,13 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { Animated } from 'react-native';
-import { white } from '../../../../theme/palette';
-const LoadingSvg = ({ size, color, ...props }) => {
-    return (<Animated.View {...props}>
-			<Svg x="0px" y="0px" width={size} height={size} viewBox="0 0 163 163">
-				<Path d="M134.1,136.4c-30.3,29.1-78.5,28-107.5-2.3c-29.1-30.3-28-78.5,2.3-107.5s78.5-28,107.5,2.3" fill="none" stroke={white.dark} strokeWidth="10.5546" strokeLinecap="round" strokeLinejoin="round"/>
-				<Path id="path-color" d="M78.4,5.5c42-1.7,77.4,30.9,79.1,72.9c1.7,42-30.9,77.4-72.9,79.1c-42,1.7-77.4-30.9-79.1-72.9" fill="none" stroke={color} strokeWidth="10.5546" strokeLinecap="round" strokeLinejoin="round"/>
-			</Svg>
-		</Animated.View>);
-};
-export default LoadingSvg;

package/dist/components/atoms/Loading/index.d.ts

@@ -1,12 +0,0 @@
-import React, { FC } from 'react';
-import { ViewStyle } from 'react-native';
-interface Props {
-    isLoading: boolean;
-    color?: string;
-    size?: number;
-    duration?: number;
-    children?: React.ReactNode | null;
-    style?: ViewStyle;
-}
-declare const Loading: FC<Props>;
-export default Loading;

package/dist/components/atoms/Loading/index.js

@@ -1,60 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { StyleSheet, View, Animated, Easing } from 'react-native';
-import LoadingSvg from './LoadingSvg';
-import { primary } from '../../../theme/palette';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
-const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) => Animated.loop(Animated.timing(rotationDegree, {
-    duration,
-    toValue: 360,
-    easing: timingAnimation,
-    useNativeDriver: true,
-})).start();
-const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000, children = null, style, ...props }) => {
-    const rotationDegree = useRef(new Animated.Value(0)).current;
-    const validWidth = scaledForDevice(size, horizontalScale);
-    const validHeight = scaledForDevice(size, moderateScale);
-    const validSize = scaledForDevice(size, moderateScale);
-    const styles = StyleSheet.create({
-        container: {
-            position: 'relative',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: validWidth,
-            height: validHeight,
-        },
-        spinner: {
-            position: 'absolute',
-            width: size,
-            height: size,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-    });
-    const animationSpinnerStyle = {
-        transform: [
-            {
-                rotateZ: rotationDegree.interpolate({
-                    inputRange: [0, 360],
-                    outputRange: ['0deg', '360deg'],
-                }),
-            },
-        ],
-    };
-    useEffect(() => {
-        if (isLoading) {
-            startRotationAnimation({
-                duration,
-                rotationDegree,
-                timingAnimation: Easing.linear,
-            });
-        }
-    }, [isLoading, duration, rotationDegree]);
-    if (!isLoading) {
-        return <></>;
-    }
-    return (<View style={[styles.container, style]} {...props}>
-			<LoadingSvg style={[styles.spinner, { ...animationSpinnerStyle }]} size={validSize} color={color}/>
-			{children}
-		</View>);
-};
-export default Loading;

package/dist/components/atoms/Modal/index.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { ModalProps as NativeModalProps, ViewStyle } from 'react-native';
-export interface UIModalProps extends NativeModalProps {
-    oncloseCallback?: () => void;
-    showCloseButton?: boolean;
-    fullScreen?: boolean;
-    modalContainerStyle?: ViewStyle;
-    canClose?: boolean;
-}
-export interface ModalMethods {
-    open?: () => void;
-    close?: () => void;
-}
-declare const Modal: React.ForwardRefExoticComponent<UIModalProps & React.RefAttributes<ModalMethods>>;
-export default Modal;

package/dist/components/atoms/Modal/index.js

@@ -1,83 +0,0 @@
-import Icon from '../Icon';
-import React, { useState, forwardRef, useImperativeHandle } from 'react';
-import { Modal as NativeModal, Pressable, StyleSheet, View, } from 'react-native';
-import { horizontalScale } from '../../../scale';
-import { verticalScale, moderateScale } from '../../../scale';
-import { palette } from '../../../theme/palette';
-const styles = StyleSheet.create({
-    Overlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.6)',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    ModalWrapper: {
-        backgroundColor: palette.base.white,
-        alignItems: 'center',
-        justifyContent: 'center',
-        elevation: 12,
-        minWidth: horizontalScale(50),
-        marginHorizontal: horizontalScale(24),
-        borderRadius: verticalScale(18),
-        zIndex: 1,
-    },
-    Shadow: {
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.25,
-    },
-    FullScreen: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: palette.base.white,
-        zIndex: 2,
-    },
-    HeaderWrapper: {
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-        zIndex: 3,
-        minHeight: verticalScale(52),
-        backgroundColor: palette.base.white,
-    },
-    CloseButton: {
-        position: 'absolute',
-        top: moderateScale(12),
-        right: moderateScale(12),
-    },
-});
-const Modal = forwardRef(({ children = null, oncloseCallback = undefined, showCloseButton = false, canClose = true, animationType = 'fade', transparent = true, fullScreen = false, modalContainerStyle = {}, ...props }, ref) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const renderCloseButton = fullScreen && showCloseButton;
-    const handleClose = () => {
-        if (oncloseCallback) {
-            oncloseCallback();
-        }
-        setIsVisible(false);
-    };
-    useImperativeHandle(ref, () => ({
-        open: () => setIsVisible(true),
-        close: () => setIsVisible(false),
-    }));
-    return (<NativeModal visible={isVisible} transparent={transparent} animationType={animationType} {...props} {...(canClose && {
-        onRequestClose: handleClose,
-    })}>
-				<View style={styles.Overlay}>
-					{!fullScreen && (<Pressable style={StyleSheet.absoluteFill} disabled={!canClose} onPress={handleClose}/>)}
-					<View style={fullScreen
-            ? styles.FullScreen
-            : [styles.ModalWrapper, styles.Shadow, modalContainerStyle]}>
-						{renderCloseButton && canClose && (<Pressable onPress={handleClose} style={styles.HeaderWrapper} accessibilityLabel="Close modal" accessibilityRole="button">
-								<Icon name="cross_light" size={24} color={palette.black.main} style={styles.CloseButton}/>
-							</Pressable>)}
-						{children}
-					</View>
-				</View>
-			</NativeModal>);
-});
-export default Modal;

package/dist/components/atoms/RadioButton/index.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-declare const checkLocation: readonly ["left", "right"];
-type positions = (typeof checkLocation)[number];
-declare const CheckSizeValues: {
-    sm: number;
-    md: number;
-    lg: number;
-};
-type sizeType = typeof CheckSizeValues;
-type sizeKeys = keyof sizeType;
-interface RadioButtonProps {
-    children?: React.ReactNode | string;
-    selected?: boolean;
-    onPress?: () => {};
-    checkPosition?: positions;
-    disabled?: boolean;
-    checkSize?: sizeKeys;
-    style?: ViewStyle;
-}
-declare const RadioButton: ({ children, onPress, selected, checkPosition, checkSize, disabled, style, ...props }: RadioButtonProps) => React.JSX.Element;
-export default RadioButton;

package/dist/components/atoms/RadioButton/index.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import Typography from '../Typography';
-import CheckBox from '../CheckBox';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
-const checkLocation = ['left', 'right'];
-const CheckSizeValues = {
-    sm: 16,
-    md: 24,
-    lg: 32,
-};
-const validPaddingHorizontal = scaledForDevice(16, horizontalScale);
-const validMarginVertical = scaledForDevice(10, moderateScale);
-const validMarginHorizontal = scaledForDevice(15, horizontalScale);
-const styles = StyleSheet.create({
-    container: {
-        alignItems: 'center',
-        paddingHorizontal: validPaddingHorizontal,
-        marginVertical: validMarginVertical,
-        height: 'auto',
-    },
-    row: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-    },
-    reverseRow: {
-        flexDirection: 'row-reverse',
-        justifyContent: 'space-between',
-    },
-    checkToLeft: {
-        marginLeft: validMarginHorizontal,
-    },
-    checkToRight: {
-        marginRight: validMarginHorizontal,
-    },
-});
-const RadioButton = ({ children, onPress, selected = false, checkPosition = 'left', checkSize = 'sm', disabled = false, style, ...props }) => {
-    const { container, row, reverseRow, checkToLeft, checkToRight } = styles;
-    const isStringChild = typeof children === 'string';
-    const checkLeft = checkPosition === 'left';
-    const customSize = CheckSizeValues[checkSize];
-    return (<TouchableOpacity style={[container, checkLeft ? row : reverseRow, style]} disabled={disabled} onPress={onPress} {...props}>
-			<CheckBox checked={selected} disabled={disabled} customSize={customSize} borderRadius={customSize / 2} onPress={onPress}/>
-			<View style={checkLeft ? checkToLeft : checkToRight}>
-				{children && (isStringChild ? <Typography>{children}</Typography> : children)}
-			</View>
-		</TouchableOpacity>);
-};
-export default RadioButton;

package/dist/components/atoms/StatusChip/index.d.ts

@@ -1,8 +0,0 @@
-import React, { ReactElement } from 'react';
-import { ViewProps } from 'react-native';
-interface StatusChipProps extends ViewProps {
-    children?: ReactElement | string;
-    background?: string;
-}
-declare const StatusChip: ({ children, ...props }: StatusChipProps) => React.JSX.Element | null;
-export default StatusChip;

package/dist/components/atoms/StatusChip/index.js

@@ -1,44 +0,0 @@
-import React, { isValidElement } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { base, grey, primary } from '../../../theme/palette';
-import Typography from '../Typography';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
-const validHeight = scaledForDevice(24, moderateScale);
-const validPadding = scaledForDevice(12, horizontalScale);
-const validBorderRadius = scaledForDevice(12, moderateScale);
-const validBorderWidth = scaledForDevice(1, moderateScale);
-const validFontSize = scaledForDevice(13, moderateScale);
-const validLineHeight = scaledForDevice(18, moderateScale);
-const styles = ({ background }) => StyleSheet.create({
-    ViewStyles: {
-        height: validHeight,
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingLeft: validPadding,
-        paddingRight: validPadding,
-        borderRadius: validBorderRadius,
-        backgroundColor: background ?? base.white,
-        borderWidth: validBorderWidth,
-        borderColor: background ?? grey['300'],
-    },
-    TextStyles: {
-        fontSize: validFontSize,
-        lineHeight: validLineHeight,
-        fontFamily: 'Roboto',
-        fontWeight: '900',
-        textAlign: 'center',
-        color: background ? base.white : primary.main,
-    },
-});
-const StatusChip = ({ children, ...props }) => {
-    const isChildrenAString = typeof children === 'string';
-    const isCustomComponent = isValidElement(children);
-    const hasToRenderStatusChip = !children || (!isChildrenAString && !isCustomComponent);
-    if (hasToRenderStatusChip) {
-        return null;
-    }
-    return (<View style={styles(props).ViewStyles} {...props}>
-			{isCustomComponent ? (children) : (<Typography style={styles(props).TextStyles}>{children}</Typography>)}
-		</View>);
-};
-export default StatusChip;