etendo-ui-library 1.0.82 → 1.0.83

package/.ondevice/storybook.requires.js

@@ -38,8 +38,7 @@ const getStories = () => {
     require('../components/navbar/Navbar.stories.tsx'),
     require('../components/pagination/Pagination.stories.tsx'),
     require('../components/states/States.stories.tsx'),
-    require('../components/statusbar/StatusBar.stories.tsx'),
-    require('../components/tab/Tabs.stories.tsx'),
+    require('../components/tab/Tab.stories.tsx'),
     require('../components/table/Table.stories.tsx'),
   ];
 };

package/components/button/Button.stories.tsx

@@ -6,7 +6,7 @@ import {View} from 'react-native';
 import {styles} from './Button.styles';
 import addMarginContainer from '../../helpers/addMargin';
 import {CheckIcon} from '../../assets/images/icons/CheckIcon';
-import { NEUTRALS_0 } from '../../styles/colors';
+import { NEUTRAL_0 } from '../../styles/colors';
 
 const meta: Meta = {
   title: 'Etendo/Button',
@@ -29,7 +29,7 @@ const Template1: Story<ButtonProps> = args => (
         onPress={() => {}}
         image={
           <CheckIcon
-            fill={NEUTRALS_0}
+            fill={NEUTRAL_0}
             style={{
               marginRight: 10,
               width: 12,

package/components/button/Button.styles.tsx

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import { NEUTRALS_0, PRIMARY_100, QUATERNARY_10, QUATERNARY_50, SECONDARY_100, SECONDARY_30, TERTIARY_50 } from '../../styles/colors';
+import { NEUTRAL_0, PRIMARY_100, QUATERNARY_10, QUATERNARY_50, SECONDARY_100, SECONDARY_30, TERTIARY_50 } from '../../styles/colors';
 import {buttonStyleVariant} from './Button.types';
 
 export const ButtonStyleVariant: buttonStyleVariant = {
@@ -14,7 +14,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       padding: 24,
     },
     text: {
-      color: NEUTRALS_0,
+      color: NEUTRAL_0,
       fontWeight: '600',
     },
     containerDisabled: {
@@ -25,10 +25,10 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       alignItems: 'center',
     },
     textDisabled: {
-      color: NEUTRALS_0,
+      color: NEUTRAL_0,
       fontWeight: 'bold',
     },
-    imageColor: NEUTRALS_0,
+    imageColor: NEUTRAL_0,
   },
   secondary: {
     container: {
@@ -84,7 +84,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
   },
   whiteBorder: {
     container: {
-      backgroundColor: NEUTRALS_0,
+      backgroundColor: NEUTRAL_0,
       borderRadius: 5,
       flexDirection: 'row',
       borderWidth: 2,
@@ -98,7 +98,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       fontWeight: 'bold',
     },
     containerDisabled: {
-      backgroundColor: NEUTRALS_0,
+      backgroundColor: NEUTRAL_0,
       borderRadius: 5,
       flexDirection: 'row',
       borderWidth: 2,
@@ -114,7 +114,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
   },
   white: {
     container: {
-      backgroundColor: NEUTRALS_0,
+      backgroundColor: NEUTRAL_0,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',
@@ -126,7 +126,7 @@ export const ButtonStyleVariant: buttonStyleVariant = {
       fontWeight: 'bold',
     },
     containerDisabled: {
-      backgroundColor: NEUTRALS_0,
+      backgroundColor: NEUTRAL_0,
       borderRadius: 5,
       flexDirection: 'row',
       justifyContent: 'center',

package/components/button/Button.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {Pressable, Text, View} from 'react-native';
-import { NEUTRALS_100, PRIMARY_100, PRIMARY_80, QUATERNARY_100, QUATERNARY_50, SECONDARY_50 } from '../../styles/colors';
+import { NEUTRAL_100, PRIMARY_100, PRIMARY_80, QUATERNARY_100, QUATERNARY_50, SECONDARY_50 } from '../../styles/colors';
 import {ButtonStyleVariant} from './Button.styles';
 import {ButtonProps, ButtonStyleType} from './Button.types';
 
@@ -32,9 +32,9 @@ const Button = ({
       case 'white':
         return QUATERNARY_100;
       case 'whiteBorder':
-        return NEUTRALS_100;
+        return NEUTRAL_100;
       case 'primary':
-        return NEUTRALS_100;
+        return NEUTRAL_100;
       default:
         return PRIMARY_100;
     }

package/components/cards/cardDropdown/CardDropdown.styles.ts

@@ -1,10 +1,10 @@
 import {StyleSheet} from 'react-native';
 import {
-  NEUTRALS_0,
-  NEUTRALS_10,
-  NEUTRALS_100,
-  NEUTRALS_40,
-  NEUTRALS_5,
+  NEUTRAL_0,
+  NEUTRAL_10,
+  NEUTRAL_100,
+  NEUTRAL_40,
+  NEUTRAL_5,
   PRIMARY_100,
   PRIMARY_30,
   PRIMARY_40,
@@ -243,19 +243,19 @@ export const styles = StyleSheet.create({
 
 export const CardVariant: CardStyleVariant = {
   primary: {
-    colorCardContainer: {backgroundColor: NEUTRALS_0},
+    colorCardContainer: {backgroundColor: NEUTRAL_0},
     colorCardImageContainer: {backgroundColor: QUATERNARY_50},
     colorCardTitle: {color: PRIMARY_100},
-    colorCardOptionContainer: {backgroundColor: NEUTRALS_0},
+    colorCardOptionContainer: {backgroundColor: NEUTRAL_0},
     colorCardOptionHeader: {
       backgroundColor: PRIMARY_100,
-      borderBottomColor: NEUTRALS_0,
+      borderBottomColor: NEUTRAL_0,
     },
-    colorCardOptionHeaderTitle: {color: NEUTRALS_0},
-    colorCardItemContainer: {borderBottomColor: NEUTRALS_10},
+    colorCardOptionHeaderTitle: {color: NEUTRAL_0},
+    colorCardItemContainer: {borderBottomColor: NEUTRAL_10},
     colorCardItemTitle: {color: PRIMARY_100},
     colorCardItemDescription: {color: TERTIARY_100},
-    colorCardOptionSkeletonContainer: {borderBottomColor: NEUTRALS_10},
+    colorCardOptionSkeletonContainer: {borderBottomColor: NEUTRAL_10},
     colorCardItemImageContainer: {backgroundColor: QUATERNARY_50},
     colorCardOptionSkeletonItem: TERTIARY_30,
     colorCardOptionSkeletonHeaderItem: PRIMARY_80,
@@ -266,28 +266,28 @@ export const CardVariant: CardStyleVariant = {
   secondary: {
     colorCardContainer: {backgroundColor: PRIMARY_100},
     colorCardImageContainer: {backgroundColor: PRIMARY_80},
-    colorCardTitle: {color: NEUTRALS_0},
+    colorCardTitle: {color: NEUTRAL_0},
     colorCardOptionContainer: {backgroundColor: PRIMARY_100},
     colorCardOptionHeader: {
       backgroundColor: PRIMARY_100,
-      borderBottomColor: NEUTRALS_100,
+      borderBottomColor: NEUTRAL_100,
     },
-    colorCardOptionHeaderTitle: {color: NEUTRALS_0},
-    colorCardItemContainer: {borderBottomColor: NEUTRALS_100},
-    colorCardItemTitle: {color: NEUTRALS_0},
+    colorCardOptionHeaderTitle: {color: NEUTRAL_0},
+    colorCardItemContainer: {borderBottomColor: NEUTRAL_100},
+    colorCardItemTitle: {color: NEUTRAL_0},
     colorCardItemDescription: {color: TERTIARY_50},
-    colorCardOptionSkeletonContainer: {borderBottomColor: NEUTRALS_0},
+    colorCardOptionSkeletonContainer: {borderBottomColor: NEUTRAL_100},
     colorCardItemImageContainer: {backgroundColor: PRIMARY_80},
     colorCardOptionSkeletonItem: PRIMARY_80,
     colorCardOptionSkeletonHeaderItem: PRIMARY_80,
-    colorCardArrowImageFill: NEUTRALS_0,
+    colorCardArrowImageFill: NEUTRAL_0,
     colorCardImageFill: SECONDARY_100,
-    colorCardImageOptionFill: NEUTRALS_0,
+    colorCardImageOptionFill: NEUTRAL_0,
   },
   disabledPrimary: {
-    colorCardContainer: {backgroundColor: NEUTRALS_5},
-    colorCardImageContainer: {backgroundColor: NEUTRALS_10},
-    colorCardTitle: {color: NEUTRALS_40},
+    colorCardContainer: {backgroundColor: NEUTRAL_5},
+    colorCardImageContainer: {backgroundColor: NEUTRAL_10},
+    colorCardTitle: {color: NEUTRAL_40},
     colorCardOptionContainer: {},
     colorCardOptionHeader: {},
     colorCardOptionHeaderTitle: {},
@@ -298,8 +298,8 @@ export const CardVariant: CardStyleVariant = {
     colorCardItemImageContainer: {},
     colorCardOptionSkeletonItem: '',
     colorCardOptionSkeletonHeaderItem: '',
-    colorCardArrowImageFill: NEUTRALS_40,
-    colorCardImageFill: NEUTRALS_40,
+    colorCardArrowImageFill: NEUTRAL_40,
+    colorCardImageFill: NEUTRAL_40,
     colorCardImageOptionFill: '',
   },
   disabledSecondary: {

package/components/cards/cardDropdown/CardDropdown.tsx

@@ -68,6 +68,12 @@ const CardDropdown = ({
     }
     setVisibleOptions(false);
   };
+  const handleTopLeft = (pageY:number, height:number) => {
+    if(windowHeight - heightDropdown - heightExtra > pageY - height){
+      return windowHeight - heightDropdown - heightExtra
+    }
+    return pageY + height - heightDropdown
+  }
 
   useEffect(() => {
     if (visibleOptions){ 
@@ -87,10 +93,9 @@ const CardDropdown = ({
           pageY: number,
         ) => {
           let dropdownHeight = pageY + heightDropdown;
-
           if (dropdownHeight > windowHeight) {
             setpositionModal({
-              top: windowHeight - heightDropdown - heightExtra,
+              top: handleTopLeft(pageY,height),
               left: pageX,
               width,
               height,

package/components/cards/cardDropdown/component/CardDropdownOptions.tsx

@@ -14,7 +14,7 @@ import {
   CardDropdownData,
   CardDropdownOptionsProps,
 } from '../CardDropdown.types';
-import { NEUTRALS_0, PRIMARY_60, QUATERNARY_10, SECONDARY_100 } from '../../../../styles/colors';
+import { NEUTRAL_0, PRIMARY_60, QUATERNARY_10, SECONDARY_100 } from '../../../../styles/colors';
 
 const CardDropdownOptions = ({
   data,
@@ -99,7 +99,7 @@ const CardDropdownOptions = ({
                   {title}
                 </Text>
                 <View style={styles.cardOptionArrowContainer}>
-                  <ArrowDown style={styles.cardOptionArrowImage} fill={NEUTRALS_0} />
+                  <ArrowDown style={styles.cardOptionArrowImage} fill={NEUTRAL_0} />
                 </View>
               </View>
             </TouchableOpacity>

package/components/docs/screens/changelog/ChangeLogScreen.style.ts

@@ -1,26 +1,26 @@
 import {StyleSheet} from 'react-native';
-import {NEUTRALS_10, NEUTRALS_100} from '../../../../styles/colors';
+import {NEUTRAL_10, NEUTRAL_100} from '../../../../styles/colors';
 
 export const styles = StyleSheet.create({
   title: {
     fontSize: 30,
     fontWeight: '600',
     marginBottom: 20,
-    color: NEUTRALS_100,
+    color: NEUTRAL_100,
   },
   version: {
     fontSize: 30,
     fontWeight: '600',
     marginBottom: 10,
-    color: NEUTRALS_100,
+    color: NEUTRAL_100,
     borderBottomWidth: 1,
-    borderColor: NEUTRALS_10,
+    borderColor: NEUTRAL_10,
   },
   feature: {
     fontSize: 18,
     fontWeight: '600',
-    color: NEUTRALS_100,
+    color: NEUTRAL_100,
     marginBottom: 10,
   },
-  items: {color: NEUTRALS_100, fontSize: 15, marginLeft: 20, marginBottom: 10},
+  items: {color: NEUTRAL_100, fontSize: 15, marginLeft: 20, marginBottom: 10},
 });

package/components/docs/screens/getStarted/GetStartedScreen.style.ts

@@ -1,9 +1,9 @@
 import {StyleSheet} from 'react-native';
 import {
-  NEUTRALS_0,
-  NEUTRALS_10,
-  NEUTRALS_100,
-  NEUTRALS_40,
+  NEUTRAL_0,
+  NEUTRAL_10,
+  NEUTRAL_100,
+  NEUTRAL_40,
 } from '../../../../styles/colors';
 
 export const styles = StyleSheet.create({
@@ -11,46 +11,46 @@ export const styles = StyleSheet.create({
     fontSize: 30,
     fontWeight: '600',
     marginBottom: 20,
-    color: NEUTRALS_100,
+    color: NEUTRAL_100,
   },
-  description: {color: NEUTRALS_100, marginBottom: 20},
+  description: {color: NEUTRAL_100, marginBottom: 20},
   subTitle: {
     fontSize: 26,
     fontWeight: '600',
     borderBottomWidth: 1,
-    borderBottomColor: NEUTRALS_10,
-    color: NEUTRALS_100,
+    borderBottomColor: NEUTRAL_10,
+    color: NEUTRAL_100,
   },
   clipboardContainer: {alignItems: 'flex-start'},
   clipboardTitle: {
     fontSize: 22,
     fontWeight: '600',
     marginTop: 20,
-    color: NEUTRALS_100,
+    color: NEUTRAL_100,
   },
   clipboardContent: {
     alignItems: 'flex-end',
     borderWidth: 1,
-    borderColor: NEUTRALS_10,
+    borderColor: NEUTRAL_10,
     padding: 15,
     paddingBottom: 0,
     paddingRight: 0,
   },
   clipboardText: {
     fontSize: 15,
-    color: NEUTRALS_100,
+    color: NEUTRAL_100,
     letterSpacing: 1,
     width: 400,
   },
   clipboardCopyContainer: {
     borderLeftWidth: 1,
     borderTopWidth: 1,
-    borderColor: NEUTRALS_10,
+    borderColor: NEUTRAL_10,
     padding: 2,
   },
   clipboardCopyText: {
     fontWeight: '600',
     paddingHorizontal: 10,
-    color: NEUTRALS_100,
+    color: NEUTRAL_100,
   },
 });

package/components/input/Input.style.tsx

@@ -8,10 +8,10 @@ import {ShowPassword} from '../../assets/images/icons/ShowPassword';
 import {
   DESTRUCTIVE_10,
   DESTRUCTIVE_100,
-  NEUTRALS_0,
-  NEUTRALS_10,
-  NEUTRALS_5,
-  NEUTRALS_60,
+  NEUTRAL_0,
+  NEUTRAL_10,
+  NEUTRAL_5,
+  NEUTRAL_60,
   PRIMARY_100,
   QUATERNARY_50,
   TERTIARY_100,
@@ -122,7 +122,7 @@ const defaultTextPlaceholder: TextStyle = {
 };
 
 const defaultHelperText: TextStyle = {
-  color: NEUTRALS_60,
+  color: NEUTRAL_60,
   fontSize: 14,
 };
 
@@ -170,7 +170,7 @@ export const inputStyleVariants: TypeInputStyleVariant = {
   readOnly: {
     titleStyle: defaultTitle,
     fieldStyle: {
-      field: [defaultField, {backgroundColor: NEUTRALS_5}],
+      field: [defaultField, {backgroundColor: NEUTRAL_5}],
       focus: defaultFocus,
       textDefault: defaultText,
       textPlaceholder: defaultTextPlaceholder,
@@ -264,10 +264,10 @@ export const styles = StyleSheet.create({
   },
   optionsContainer: {
     position: 'absolute',
-    backgroundColor: NEUTRALS_0,
+    backgroundColor: NEUTRAL_0,
     borderRadius: 5,
     borderWidth: 1.5,
-    borderColor: NEUTRALS_10,
+    borderColor: NEUTRAL_10,
     zIndex: 2,
   },
   optionsItemsContainer: {
@@ -276,7 +276,7 @@ export const styles = StyleSheet.create({
   optionFilterContainer: {
     height: 35,
     borderBottomWidth: 1,
-    borderBottomColor: NEUTRALS_10,
+    borderBottomColor: NEUTRAL_10,
     marginHorizontal: 9,
     display: 'flex',
     flexDirection: 'row',

package/components/input/components/InputOptions.tsx

@@ -12,7 +12,7 @@ import React, {useState} from 'react';
 import {styles} from '../Input.style';
 import {InputOptionsProps} from '../Input.types';
 import {SearchIcon} from '../../../assets/images/icons/SearchIcon';
-import { NEUTRALS_40, QUATERNARY_10 } from '../../../styles/colors';
+import { NEUTRAL_40, QUATERNARY_10 } from '../../../styles/colors';
 
 const InputOptions = ({
   data,
@@ -29,7 +29,9 @@ const InputOptions = ({
   const [indexHover, setIndexHover] = useState<number>(-1);
 
   const handleOptionSelected = (item: any, index: number) => {
-    onOptionSelected(item, index);
+    if(onOptionSelected){
+      onOptionSelected(item, index);
+    }
     onClose();
   };
 
@@ -102,7 +104,7 @@ const InputOptions = ({
               value={filterValue}
               onChangeText={onChangeFilterText}
               placeholder={placeholderText}
-              placeholderTextColor={NEUTRALS_40}
+              placeholderTextColor={NEUTRAL_40}
             />
           </View>
           <ScrollView

package/components/navbar/components/DrawerLateral/DrawerLateral.styles.ts

@@ -1,7 +1,7 @@
 import {StyleSheet} from 'react-native';
 import {
-  NEUTRALS_0,
-  NEUTRALS_60,
+  NEUTRAL_0,
+  NEUTRAL_60,
   PRIMARY_100,
   PRIMARY_80,
   QUATERNARY_10,
@@ -67,13 +67,13 @@ export const styles = StyleSheet.create({
     marginRight: 12,
   },
   modalCurrentLabel: {
-    color: NEUTRALS_0,
+    color: NEUTRAL_0,
     fontSize: 16,
   },
   modalSectionsContainer: {},
   modalSection: {},
   modalSectionTitle: {
-    color: NEUTRALS_60,
+    color: NEUTRAL_60,
     fontSize: 16,
   },
   modalSectionContentContainer: {
@@ -103,7 +103,7 @@ export const styles = StyleSheet.create({
     marginRight: 12,
   },
   modalSectionItemText: {
-    color: NEUTRALS_0,
+    color: NEUTRAL_0,
     fontSize: 16,
     width: 150,
   },
@@ -119,8 +119,8 @@ export const styles = StyleSheet.create({
     marginBottom: 20,
     marginTop: 5,
     borderLeftWidth: 1,
-    borderColor: NEUTRALS_60,
+    borderColor: NEUTRAL_60,
   },
-  copyright: {color: NEUTRALS_60},
-  version: {color: NEUTRALS_60},
+  copyright: {color: NEUTRAL_60},
+  version: {color: NEUTRAL_60},
 });

package/components/navbar/components/DrawerLateral/DrawerLateralHelper.tsx

@@ -1,6 +1,6 @@
 import {ColorValue, ViewStyle} from 'react-native';
 import {DrawerCurrentIndexType} from '../../Navbar.types';
-import { NEUTRALS_0, PRIMARY_80, SECONDARY_100 } from '../../../../styles/colors';
+import { NEUTRAL_0, PRIMARY_80, SECONDARY_100 } from '../../../../styles/colors';
 
 export const getCurrentSelectIndex = (
   indexSection: number,
@@ -42,7 +42,7 @@ export const getStyleImageSelected = (
   ) {
     return SECONDARY_100;
   }
-  return NEUTRALS_0;
+  return NEUTRAL_0;
 };
 
 export const getStyleImageSelectedSubSection = (
@@ -56,5 +56,5 @@ export const getStyleImageSelectedSubSection = (
   ) {
     return SECONDARY_100;
   }
-  return NEUTRALS_0;
+  return NEUTRAL_0;
 };

package/components/navbar/components/DrawerLateral/DrawerLateralSubMenu.tsx

@@ -12,7 +12,7 @@ import {
   getStyleImageSelectedSubSection,
   getStyleSelected,
 } from './DrawerLateralHelper';
-import { NEUTRALS_0 } from '../../../../styles/colors';
+import { NEUTRAL_0 } from '../../../../styles/colors';
 
 const DrawerLateralSubMenu = ({
   data,
@@ -84,7 +84,7 @@ const DrawerLateralSubMenu = ({
         >
           {label}
         </Text>
-        <ArrowDown style={styles.modalSectionMenuDropdownImage} fill={NEUTRALS_0} />
+        <ArrowDown style={styles.modalSectionMenuDropdownImage} fill={NEUTRAL_0} />
       </Pressable>
       {showSubMenu && (
         <View style={styles.modalSectionSubMenuContainer}>

package/components/navbar/components/EtendoLogo/EtendoLogo.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import {styles} from './EtendoLogo.styles';
 import {EtendoLogoProps} from '../../Navbar.types';
 import {EtendoWhiteLogo} from '../../../../assets/images/logo/EtendoWhiteLogo';
-import { NEUTRALS_0 } from '../../../../styles/colors';
+import { NEUTRAL_0 } from '../../../../styles/colors';
 
 const EtendoLogo = ({onPress}: EtendoLogoProps) => {
   return (
     <TouchableOpacity onPress={onPress}>
-      <EtendoWhiteLogo fill={NEUTRALS_0} style={styles.image} />
+      <EtendoWhiteLogo fill={NEUTRAL_0} style={styles.image} />
     </TouchableOpacity>
   );
 };

package/components/navbar/components/MenuBurger/MenuBurger.tsx

@@ -2,13 +2,13 @@ import {TouchableOpacity} from 'react-native';
 import React from 'react';
 import {MenuBurgerProps} from '../../Navbar.types';
 import {MenuburgerIcon} from '../../../../assets/images/icons/MenuburgerIcon';
-import {NEUTRALS_0} from '../../../../styles/colors';
+import {NEUTRAL_0} from '../../../../styles/colors';
 import {styles} from './MenuBurger.styles';
 
 const MenuBurger = ({onPress}: MenuBurgerProps) => {
   return (
     <TouchableOpacity onPress={onPress}>
-      <MenuburgerIcon fill={NEUTRALS_0} style={styles.menuBurgerImage} />
+      <MenuburgerIcon fill={NEUTRAL_0} style={styles.menuBurgerImage} />
     </TouchableOpacity>
   );
 };

package/components/navbar/components/Notification/Notification.styles.ts

@@ -1,11 +1,11 @@
 import {StyleSheet} from 'react-native';
 import {
   INITIAL_100,
-  NEUTRALS_0,
-  NEUTRALS_10,
-  NEUTRALS_100,
-  NEUTRALS_40,
-  NEUTRALS_5,
+  NEUTRAL_0,
+  NEUTRAL_10,
+  NEUTRAL_100,
+  NEUTRAL_40,
+  NEUTRAL_5,
   PRIMARY_100,
 } from '../../../../styles/colors';
 
@@ -24,7 +24,7 @@ export const styles = StyleSheet.create({
   },
   selectedOptionContainer: {
     padding: 10,
-    backgroundColor: NEUTRALS_40,
+    backgroundColor: NEUTRAL_40,
     borderRadius: 5,
   },
   selectedOption: {
@@ -32,7 +32,7 @@ export const styles = StyleSheet.create({
   },
   optionsContainer: {
     position: 'absolute',
-    backgroundColor: NEUTRALS_0,
+    backgroundColor: NEUTRAL_0,
     borderRadius: 5,
     zIndex: 2,
     width: 350,
@@ -41,26 +41,26 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     borderBottomWidth: 1,
-    borderBottomColor: NEUTRALS_10,
+    borderBottomColor: NEUTRAL_10,
     padding: 15,
   },
   option: {
     paddingVertical: 12,
     paddingHorizontal: 16,
     borderBottomWidth: 1,
-    borderBottomColor: NEUTRALS_5,
+    borderBottomColor: NEUTRAL_5,
     flexDirection: 'row',
     alignItems: 'center',
   },
   optionText: {
     fontSize: 12,
-    color: NEUTRALS_100,
+    color: NEUTRAL_100,
     marginBottom: 5,
     width: 300,
   },
   optionTimeText: {
     fontSize: 12,
-    color: NEUTRALS_40,
+    color: NEUTRAL_40,
   },
   optionMarkAllText: {color: INITIAL_100, fontSize: 12},
   optionNotificationText: {color: PRIMARY_100, fontWeight: '600', fontSize: 14},

package/components/navbar/components/Notification/Notification.tsx

@@ -5,7 +5,7 @@ import { BellIcon } from '../../../../assets/images/icons/BellIcon';
 import { NotificationProps, OptionNotificationItem, PosicionModalType } from '../../Navbar.types';
 import NotificationsOptions from './NotificationsOptions';
 import { styles } from './Notification.styles';
-import { NEUTRALS_0 } from '../../../../styles/colors';
+import { NEUTRAL_0 } from '../../../../styles/colors';
 
 const Notification = ({
   anyNotification,
@@ -65,9 +65,9 @@ const Notification = ({
         }}
       >
         {anyNotification ? (
-          <BellActiveIcon style={styles.imageNotification} fill={NEUTRALS_0} />
+          <BellActiveIcon style={styles.imageNotification} fill={NEUTRAL_0} />
         ) : (
-          <BellIcon style={styles.imageNotification} fill={NEUTRALS_0} />
+          <BellIcon style={styles.imageNotification} fill={NEUTRAL_0} />
         )}
       </TouchableOpacity>
       <Modal transparent={true} visible={showOptions} animationType="fade">