ikualo-ui-kit-mobile 0.3.1 → 0.7.0

package/App.tsx

@@ -1,35 +1,46 @@
-import { PaperProvider, Text } from 'react-native-paper';
+import { PaperProvider } from 'react-native-paper';
 
-import { setGlobalTheme, getGlobalTheme } from './src/config/paper.config';
+import { darkTheme, lightTheme } from './src/config/paper.config';
 import { useFonts } from 'expo-font';
 import React, { useEffect } from 'react';
 import { Appearance } from 'react-native';
+import useStore from './src/store';
+import { PageTouchable } from './src';
+import { Views } from './src/elements/views/Views';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 export default function App() {
-  const theme = getGlobalTheme();
   const [fontsLoaded] = useFonts({
     MontserratLight: require('./assets/fonts/MontserratLight.ttf'), //300
     MontserratRegular: require('./assets/fonts/MontserratRegular.ttf'), //400
     MontserratSemiBold: require('./assets/fonts/MontserratSemiBold.ttf'), //600
     MontserratBold: require('./assets/fonts/MontserratBold.ttf'), //700
     MontserratExtraBold: require('./assets/fonts/MontserratExtraBold.ttf'), //900
+    MontserratAlternatesExtraBold: require('./assets/fonts/MontserratAlternatesExtraBold.ttf'), //900
+    MontserratAlternatesBold: require('./assets/fonts/MontserratAlternatesBold.ttf'), //700
   });
+  const { theme, setTheme } = useStore();
+
+
   useEffect(() => {
-    // vexo(process.env.EXPO_PUBLIC_API_KEY_VEXO ?? "");
     const listener = Appearance.addChangeListener(({ colorScheme }) => {
       if (colorScheme) {
-        setGlobalTheme(colorScheme);
+        setTheme(colorScheme === 'dark' ? darkTheme : lightTheme);
       }
     });
     return () => listener.remove();
   }, []);
+
   return (
-    <>
+    < GestureHandlerRootView >
+
       {fontsLoaded && (
-        <PaperProvider theme={theme}>
-          <Text>App</Text>
+        <PaperProvider theme={theme as any}>
+          <PageTouchable>
+            <Views />
+          </PageTouchable>
         </PaperProvider>
       )}
-    </>
+    </GestureHandlerRootView>
   );
 }

package/app.json

@@ -6,7 +6,8 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -37,27 +38,7 @@
     },
     "updates": {
       "url": "https://u.expo.dev/5c8b451c-3fd3-42d1-91fd-fc1190b6f425"
-    },
-    "plugins": [
-      "expo-localization",
-      [
-        "expo-local-authentication",
-        {
-          "faceIDPermission": "Allow Ikualo to use Face ID."
-        }
-      ],
-      [
-        "expo-secure-store",
-        {
-          "faceIDPermission": "Allow Ikualo to access your Face ID biometric data."
-        }
-      ],
-      [
-        "expo-location",
-        {
-          "locationAlwaysAndWhenInUsePermission": "Allow Ikualo to use your location."
-        }
-      ]
-    ]
+    }
+
   }
 }

package/assets/icons/svgs/ArrowRightIcon.tsx

@@ -0,0 +1,18 @@
+import Svg, { G, Path, Defs, Rect, ClipPath } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const ArrowRightIcon = (props:{style?:any}) => {
+    const theme = useStore().theme
+
+    return (
+    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" style={props.style}>
+        <G id="chevron_right" clip-path="url(#clip0_780_1607)">
+            <Path id="Vector" d="M9.28957 6.71002C8.89957 7.10002 8.89957 7.73002 9.28957 8.12002L13.1696 12L9.28957 15.88C8.89957 16.27 8.89957 16.9 9.28957 17.29C9.67957 17.68 10.3096 17.68 10.6996 17.29L15.2896 12.7C15.6796 12.31 15.6796 11.68 15.2896 11.29L10.6996 6.70002C10.3196 6.32002 9.67957 6.32002 9.28957 6.71002Z" fill={theme.colors.primary_300} />
+        </G>
+        <Defs>
+            <ClipPath id="clip0_780_1607">
+                <Rect width="24" height="24" fill="white" />
+            </ClipPath>
+        </Defs>
+    </Svg>)
+};

package/assets/icons/svgs/CheckboxCheckedIcon.tsx

@@ -0,0 +1,16 @@
+import Svg, { G, Path, Defs, Rect, ClipPath } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const CheckboxCheckedIcon = () => {
+    const theme = useStore().theme
+    return (<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <G id="check_box" clip-path="url(#clip0_6849_6810)">
+            <Path id="Vector" d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM10.71 16.29C10.32 16.68 9.69 16.68 9.3 16.29L5.71 12.7C5.32 12.31 5.32 11.68 5.71 11.29C6.1 10.9 6.73 10.9 7.12 11.29L10 14.17L16.88 7.29C17.27 6.9 17.9 6.9 18.29 7.29C18.68 7.68 18.68 8.31 18.29 8.7L10.71 16.29Z" fill={theme.colors.icon} />
+        </G>
+        <Defs>
+            <ClipPath id="clip0_6849_6810">
+                <Rect width="24" height="24" fill="white" />
+            </ClipPath>
+        </Defs>
+    </Svg>)
+};

package/assets/icons/svgs/CheckboxEmptyIcon.tsx

@@ -0,0 +1,17 @@
+import Svg, { G, Path, Defs, Rect, ClipPath } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const CheckboxEmptyIcon = () => {
+    const theme=useStore().theme
+
+    return (<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <G id="check_box_outline_blank" clip-path="url(#clip0_6849_2668)">
+            <Path id="Vector" d="M18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" fill={theme.colors.icon} />
+        </G>
+        <Defs>
+            <ClipPath id="clip0_6849_2668">
+                <Rect width="24" height="24" fill="white" />
+            </ClipPath>
+        </Defs>
+    </Svg>)
+};

package/assets/icons/svgs/ErrorIcon.tsx

@@ -0,0 +1,13 @@
+import Svg, { G, Path, Defs, Rect, ClipPath } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const ErrorIcon = (props: { style?: any }) => {
+    const theme = useStore().theme
+
+    return (
+        <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" >
+            <G id="Icon">
+                <Path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 17V15H13V17H11ZM11 7V13H13V7H11Z" fill={theme.colors.error} />
+            </G>
+        </Svg>)
+};

package/assets/icons/svgs/ErrorInputIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { G, Path } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const ErrorInputIcon = (props: { style?: any }) => {
+    const theme = useStore().theme
+
+    return (
+        <Svg width="16" height="17" viewBox="0 0 16 17" fill="none">
+            <G id="Error">
+                <Path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M7.99992 2.31982C4.31992 2.31982 1.33325 5.30649 1.33325 8.98649C1.33325 12.6665 4.31992 15.6532 7.99992 15.6532C11.6799 15.6532 14.6666 12.6665 14.6666 8.98649C14.6666 5.30649 11.6799 2.31982 7.99992 2.31982ZM7.33325 12.3198V10.9865H8.66659V12.3198H7.33325ZM7.33325 5.65316V9.65316H8.66659V5.65316H7.33325Z"
+                    fill={theme.colors.error} />
+            </G>
+        </Svg>)
+};

package/assets/icons/svgs/EyeOffIcon.tsx

@@ -0,0 +1,10 @@
+import Svg, { Path } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const EyeOnIcon = ({ isValid }: { isValid: boolean }) => {
+    const theme = useStore().theme
+    return (<Svg width="22" height="16" viewBox="0 0 22 16" fill="none" >
+        <Path id="Vector" d="M11 12.4863C12.25 12.4863 13.3125 12.0488 14.1875 11.1738C15.0625 10.2988 15.5 9.23633 15.5 7.98633C15.5 6.73633 15.0625 5.67383 14.1875 4.79883C13.3125 3.92383 12.25 3.48633 11 3.48633C9.75 3.48633 8.6875 3.92383 7.8125 4.79883C6.9375 5.67383 6.5 6.73633 6.5 7.98633C6.5 9.23633 6.9375 10.2988 7.8125 11.1738C8.6875 12.0488 9.75 12.4863 11 12.4863ZM11 10.6863C10.25 10.6863 9.6125 10.4238 9.0875 9.89883C8.5625 9.37383 8.3 8.73633 8.3 7.98633C8.3 7.23633 8.5625 6.59883 9.0875 6.07383C9.6125 5.54883 10.25 5.28633 11 5.28633C11.75 5.28633 12.3875 5.54883 12.9125 6.07383C13.4375 6.59883 13.7 7.23633 13.7 7.98633C13.7 8.73633 13.4375 9.37383 12.9125 9.89883C12.3875 10.4238 11.75 10.6863 11 10.6863ZM11 15.4863C8.56667 15.4863 6.35 14.8072 4.35 13.4488C2.35 12.0905 0.9 10.2697 0 7.98633C0.9 5.70299 2.35 3.88216 4.35 2.52383C6.35 1.16549 8.56667 0.486328 11 0.486328C13.4333 0.486328 15.65 1.16549 17.65 2.52383C19.65 3.88216 21.1 5.70299 22 7.98633C21.1 10.2697 19.65 12.0905 17.65 13.4488C15.65 14.8072 13.4333 15.4863 11 15.4863ZM11 13.4863C12.8833 13.4863 14.6125 12.9905 16.1875 11.9988C17.7625 11.0072 18.9667 9.66966 19.8 7.98633C18.9667 6.30299 17.7625 4.96549 16.1875 3.97383C14.6125 2.98216 12.8833 2.48633 11 2.48633C9.11667 2.48633 7.3875 2.98216 5.8125 3.97383C4.2375 4.96549 3.03333 6.30299 2.2 7.98633C3.03333 9.66966 4.2375 11.0072 5.8125 11.9988C7.3875 12.9905 9.11667 13.4863 11 13.4863Z"
+            fill={isValid ? theme.colors.icon : theme.colors.error} />
+    </Svg>)
+};

package/assets/icons/svgs/EyeOnIcon.tsx

@@ -0,0 +1,12 @@
+import Svg, { G, Path } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const EyeOffIcon = ({ isValid }: { isValid: boolean }) => {
+    const theme = useStore().theme
+    return (<Svg width="24" height="25" viewBox="0 0 24 25" fill="none">
+        <G id="Icons/visibility_off_">
+            <Path id="Vector" d="M16.1 13.7861L14.65 12.3361C14.8 11.5528 14.575 10.8195 13.975 10.1361C13.375 9.4528 12.6 9.18613 11.65 9.33613L10.2 7.88613C10.4833 7.7528 10.7708 7.6528 11.0625 7.58613C11.3542 7.51947 11.6667 7.48613 12 7.48613C13.25 7.48613 14.3125 7.92363 15.1875 8.79863C16.0625 9.67363 16.5 10.7361 16.5 11.9861C16.5 12.3195 16.4667 12.632 16.4 12.9236C16.3333 13.2153 16.2333 13.5028 16.1 13.7861ZM19.3 16.9361L17.85 15.5361C18.4833 15.0528 19.0458 14.5236 19.5375 13.9486C20.0292 13.3736 20.45 12.7195 20.8 11.9861C19.9667 10.3028 18.7708 8.9653 17.2125 7.97363C15.6542 6.98197 13.9167 6.48613 12 6.48613C11.5167 6.48613 11.0417 6.51947 10.575 6.58613C10.1083 6.6528 9.65 6.7528 9.2 6.88613L7.65 5.33613C8.33333 5.0528 9.03333 4.8403 9.75 4.69863C10.4667 4.55697 11.2167 4.48613 12 4.48613C14.5167 4.48613 16.7583 5.18197 18.725 6.57363C20.6917 7.9653 22.1167 9.76947 23 11.9861C22.6167 12.9695 22.1125 13.882 21.4875 14.7236C20.8625 15.5653 20.1333 16.3028 19.3 16.9361ZM19.8 23.0861L15.6 18.9361C15.0167 19.1195 14.4292 19.257 13.8375 19.3486C13.2458 19.4403 12.6333 19.4861 12 19.4861C9.48333 19.4861 7.24167 18.7903 5.275 17.3986C3.30833 16.007 1.88333 14.2028 1 11.9861C1.35 11.1028 1.79167 10.282 2.325 9.52363C2.85833 8.7653 3.46667 8.08613 4.15 7.48613L1.4 4.68613L2.8 3.28613L21.2 21.6861L19.8 23.0861ZM5.55 8.88613C5.06667 9.31947 4.625 9.79447 4.225 10.3111C3.825 10.8278 3.48333 11.3861 3.2 11.9861C4.03333 13.6695 5.22917 15.007 6.7875 15.9986C8.34583 16.9903 10.0833 17.4861 12 17.4861C12.3333 17.4861 12.6583 17.4653 12.975 17.4236C13.2917 17.382 13.6167 17.3361 13.95 17.2861L13.05 16.3361C12.8667 16.3861 12.6917 16.4236 12.525 16.4486C12.3583 16.4736 12.1833 16.4861 12 16.4861C10.75 16.4861 9.6875 16.0486 8.8125 15.1736C7.9375 14.2986 7.5 13.2361 7.5 11.9861C7.5 11.8028 7.5125 11.6278 7.5375 11.4611C7.5625 11.2945 7.6 11.1195 7.65 10.9361L5.55 8.88613Z"
+                fill={isValid ? theme.colors.icon : theme.colors.error} />
+        </G>
+    </Svg>)
+};

package/assets/icons/svgs/InfoIcon.tsx

@@ -0,0 +1,11 @@
+import Svg, {Path } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const InfoIcon = (props:{style?:any}) => {
+    const theme = useStore().theme
+
+    return (
+        <Svg width="20" height="20" viewBox="0 0 20 20" fill="none" >
+        <Path id="Vector" d="M9 5H11V7H9V5ZM10 15C10.55 15 11 14.55 11 14V10C11 9.45 10.55 9 10 9C9.45 9 9 9.45 9 10V14C9 14.55 9.45 15 10 15ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" fill={theme.colors.info}/>
+        </Svg>)
+};

package/assets/icons/svgs/RadioButtonChecked.tsx

@@ -0,0 +1,16 @@
+import Svg, { G, Defs, ClipPath, Path, Rect } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const RadioButtonChecked = () => {
+    const { theme } = useStore();
+    return (<Svg width="25" height="24" viewBox="0 0 25 24" fill="none">
+        <G clip-path="url(#clip0_1325_2280)">
+            <Path d="M12.5996 2C7.07961 2 2.59961 6.48 2.59961 12C2.59961 17.52 7.07961 22 12.5996 22C18.1196 22 22.5996 17.52 22.5996 12C22.5996 6.48 18.1196 2 12.5996 2ZM9.88961 16.29L6.29961 12.7C5.90961 12.31 5.90961 11.68 6.29961 11.29C6.68961 10.9 7.31961 10.9 7.70961 11.29L10.5996 14.17L17.4796 7.29C17.8696 6.9 18.4996 6.9 18.8896 7.29C19.2796 7.68 19.2796 8.31 18.8896 8.7L11.2996 16.29C10.9196 16.68 10.2796 16.68 9.88961 16.29Z" fill={theme.colors.icon} />
+        </G>
+        <Defs>
+            <ClipPath id="clip0_1325_2280">
+                <Rect width="24" height="24" fill="white" transform="translate(0.599609)" />
+            </ClipPath>
+        </Defs>
+    </Svg>)
+};

package/assets/icons/svgs/RadioButtonUnchecked.tsx

@@ -0,0 +1,16 @@
+import Svg, { G, Defs, ClipPath, Path, Rect } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const RadioButtonUnchecked = () => {
+    const { theme } = useStore();
+    return (<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <G clip-path="url(#clip0_1325_2287)">
+            <Path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill={theme.colors.background_focus} />
+        </G>
+        <Defs>
+            <ClipPath id="clip0_1325_2287">
+                <Rect width="24" height="24" fill="white" />
+            </ClipPath>
+        </Defs>
+    </Svg>)
+};

package/assets/icons/svgs/SuccessIcon.tsx

@@ -0,0 +1,18 @@
+import Svg, { G, Path, Defs, Rect, ClipPath } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const SuccessIcon = (props: { style?: any }) => {
+    const theme = useStore().theme
+
+    return (
+        <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <G id="trailing-icon" clip-path="url(#clip0_661_1172)">
+                <Path id="Vector" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" fill={theme.colors.success} />
+            </G>
+            <Defs>
+                <ClipPath id="clip0_661_1172">
+                    <Rect width="24" height="24" fill="white" />
+                </ClipPath>
+            </Defs>
+        </Svg>)
+};

package/assets/icons/svgs/TestIcon.tsx

@@ -0,0 +1,17 @@
+import Svg, { ClipPath, Defs, G, Path, Rect } from "react-native-svg";
+
+export const Test = ({ color, size, style }: { color?: any, size?: number, style?: any }) => {
+
+    return (
+        <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+            <G id="upload" clip-path="url(#clip0_334_1073)">
+                <Path id="Vector" d="M10 16H14C14.55 16 15 15.55 15 15V10H16.59C17.48 10 17.93 8.92 17.3 8.29L12.71 3.7C12.32 3.31 11.69 3.31 11.3 3.7L6.71 8.29C6.08 8.92 6.52 10 7.41 10H9V15C9 15.55 9.45 16 10 16ZM6 18H18C18.55 18 19 18.45 19 19C19 19.55 18.55 20 18 20H6C5.45 20 5 19.55 5 19C5 18.45 5.45 18 6 18Z"
+                    fill={color} />
+            </G>
+            <Defs>
+                <ClipPath id="clip0_334_1073">
+                    <Rect width={size} height={size} fill="white" />
+                </ClipPath>
+            </Defs>
+        </Svg>)
+};

package/assets/icons/svgs/WarningIcon.tsx

@@ -0,0 +1,13 @@
+import Svg, { G, Path } from "react-native-svg";
+import useStore from "../../../src/store";
+
+export const WarningIcon = (props: { style?: any }) => {
+    const theme = useStore().theme
+
+    return (
+        <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" >
+            <G id="trailing-icon">
+                <Path id="Vector" d="M4.47012 20.9999H19.5301C21.0701 20.9999 22.0301 19.3299 21.2601 17.9999L13.7301 4.98993C12.9601 3.65993 11.0401 3.65993 10.2701 4.98993L2.74012 17.9999C1.97012 19.3299 2.93012 20.9999 4.47012 20.9999ZM12.0001 13.9999C11.4501 13.9999 11.0001 13.5499 11.0001 12.9999V10.9999C11.0001 10.4499 11.4501 9.99993 12.0001 9.99993C12.5501 9.99993 13.0001 10.4499 13.0001 10.9999V12.9999C13.0001 13.5499 12.5501 13.9999 12.0001 13.9999ZM13.0001 17.9999H11.0001V15.9999H13.0001V17.9999Z" fill={theme.colors.warning} />
+            </G>
+        </Svg>)
+};

package/assets/icons/svgs/index.ts

@@ -0,0 +1,12 @@
+export * from './CheckboxCheckedIcon';
+export * from './CheckboxEmptyIcon';
+export * from './ArrowRightIcon';
+export * from './ErrorIcon';
+export * from './SuccessIcon';
+export * from './WarningIcon';
+export * from './InfoIcon';
+export * from './EyeOffIcon';
+export * from './EyeOnIcon';
+export * from './ErrorInputIcon';
+export * from './RadioButtonChecked';
+export * from './RadioButtonUnchecked';

package/assets/images/svgs/IconAppImage.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import Svg, { Path } from 'react-native-svg';
+import useStore from '../../../src/store';
 
 interface IFProps {
     style?: any;
 }
 export const IconAppImage = (props: IFProps) => {
     const { style } = props;
-
+    const theme=useStore().theme;
     return (
         <Svg width="22" height="30" viewBox="0 0 22 30" fill="none" style={style}>
-            <Path d="M17.1715 4.82216L4.70677 4.42262C3.82863 4.39764 3.12124 3.62354 3.14563 2.72458L3.17003 1.72573C3.19442 0.826772 3.9262 0.102609 4.82874 0.12758L17.2935 0.527118C18.1716 0.552089 18.879 1.3262 18.8546 2.22516L18.8302 3.224C18.8058 4.12296 18.0496 4.84713 17.1715 4.82216Z" fill="#7B7BFF" />
-            <Path d="M17.171 10.5184L4.70628 10.1189C3.82814 10.0939 3.12075 9.31983 3.14514 8.42087L3.16953 7.42202C3.19393 6.52306 3.92571 5.7989 4.82825 5.82387L17.293 6.22341C18.1711 6.24838 18.8785 7.02248 18.8541 7.92145L18.8297 8.92029C18.8053 9.84422 18.0491 10.5434 17.171 10.5184Z" fill="#7B7BFF" />
-            <Path d="M19.9012 19.9338C19.7305 20.9327 19.828 21.4071 20.1695 21.557C20.5842 21.7318 20.7794 22.2561 20.7306 22.7056L20.1451 28.7237C20.0963 29.273 19.6573 29.7475 19.1206 29.7974C17.8766 29.8973 16.413 29.298 15.5593 28.2992C15.1446 27.7997 14.4372 27.7248 13.9494 28.1244C12.559 29.273 11.0222 29.8474 9.09519 29.8723C2.99699 29.9223 -0.198463 25.1528 0.630892 19.2097L2.19203 12.6922C2.26521 12.1179 2.75307 11.6934 3.3141 11.6684L7.3877 11.6434C8.09509 11.6434 8.63173 12.2677 8.53416 12.9919L6.94863 19.5842C6.65591 21.6818 7.48527 22.9553 9.33912 22.9553C11.7052 22.9304 13.2908 21.1824 13.5835 19.0848L15.1446 12.5673C15.2178 11.993 15.7056 11.5685 16.2667 11.5435L20.3403 11.5186C21.0477 11.5186 21.5843 12.1428 21.4867 12.867L19.9012 19.9338Z" fill="#7B7BFF" />
+            <Path d="M17.1715 4.82216L4.70677 4.42262C3.82863 4.39764 3.12124 3.62354 3.14563 2.72458L3.17003 1.72573C3.19442 0.826772 3.9262 0.102609 4.82874 0.12758L17.2935 0.527118C18.1716 0.552089 18.879 1.3262 18.8546 2.22516L18.8302 3.224C18.8058 4.12296 18.0496 4.84713 17.1715 4.82216Z" fill={theme.colors.icon} />
+            <Path d="M17.171 10.5184L4.70628 10.1189C3.82814 10.0939 3.12075 9.31983 3.14514 8.42087L3.16953 7.42202C3.19393 6.52306 3.92571 5.7989 4.82825 5.82387L17.293 6.22341C18.1711 6.24838 18.8785 7.02248 18.8541 7.92145L18.8297 8.92029C18.8053 9.84422 18.0491 10.5434 17.171 10.5184Z" fill={theme.colors.icon} />
+            <Path d="M19.9012 19.9338C19.7305 20.9327 19.828 21.4071 20.1695 21.557C20.5842 21.7318 20.7794 22.2561 20.7306 22.7056L20.1451 28.7237C20.0963 29.273 19.6573 29.7475 19.1206 29.7974C17.8766 29.8973 16.413 29.298 15.5593 28.2992C15.1446 27.7997 14.4372 27.7248 13.9494 28.1244C12.559 29.273 11.0222 29.8474 9.09519 29.8723C2.99699 29.9223 -0.198463 25.1528 0.630892 19.2097L2.19203 12.6922C2.26521 12.1179 2.75307 11.6934 3.3141 11.6684L7.3877 11.6434C8.09509 11.6434 8.63173 12.2677 8.53416 12.9919L6.94863 19.5842C6.65591 21.6818 7.48527 22.9553 9.33912 22.9553C11.7052 22.9304 13.2908 21.1824 13.5835 19.0848L15.1446 12.5673C15.2178 11.993 15.7056 11.5685 16.2667 11.5435L20.3403 11.5186C21.0477 11.5186 21.5843 12.1428 21.4867 12.867L19.9012 19.9338Z" fill={theme.colors.icon} />
         </Svg>
     );
 };

package/assets/images/svgs/TestImage.tsx

@@ -0,0 +1,8 @@
+import Svg, { Path } from "react-native-svg"
+
+export const TestImage = (props: { size?: number, color?: string }) => {
+
+    return <Svg width="78" height="83" viewBox="0 0 490 492" fill="none">
+        <Path d="M0 246C0 434.601 204.167 552.477 367.5 458.176C443.303 414.411 490 333.53 490 246C490 57.399 285.833 -60.477 122.5 33.824C46.6965 77.589 0 158.47 0 246Z" fill="#EEE7FB" />
+    </Svg>
+}

package/assets/images/svgs/index.ts

@@ -0,0 +1,3 @@
+export * from './HugImage';
+export * from './TestImage';
+export * from './IconAppImage';

package/assets/styles/elements/alert.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
-import { getGlobalTheme } from '../../../src/config/paper.config';
+import { ITheme } from '../../../src/models';
 
-const styleAlerts = StyleSheet.create({
+export const getStyleAlerts =(theme: ITheme)=> StyleSheet.create({
   alert: {
     position: 'absolute',
     top: 56,
@@ -14,24 +14,24 @@ const styleAlerts = StyleSheet.create({
     padding: 16,
   },
   'alert--info': {
-    backgroundColor: getGlobalTheme().colors.lightInfo,
-    borderLeftColor: getGlobalTheme().colors.darkInfo,
+    backgroundColor: theme.colors.background_info,
+    borderLeftColor: theme.colors.info,
   },
   'alert--warning': {
-    backgroundColor: getGlobalTheme().colors.lightWarning,
-    borderLeftColor: getGlobalTheme().colors.darkWarning,
+    backgroundColor: theme.colors.background_warning,
+    borderLeftColor: theme.colors.warning,
   },
   'alert--success': {
-    backgroundColor: getGlobalTheme().colors.lightSuccess,
-    borderLeftColor: getGlobalTheme().colors.darkSuccess,
+    backgroundColor: theme.colors.background_success,
+    borderLeftColor: theme.colors.success,
   },
   'alert--error': {
-    backgroundColor: getGlobalTheme().colors.lightRed,
-    borderLeftColor: getGlobalTheme().colors.darkRed,
+    backgroundColor: theme.colors.background_error,
+    borderLeftColor: theme.colors.error,
   },
-  'alert-container-text': { flexDirection: 'row', gap: 8 },
-  'alert-container-title': { fontSize: 14, fontFamily: 'MontserratBold', color: getGlobalTheme().colors.text, alignSelf: 'center' },
+  'alert-container-text': { 
+    flexDirection: 'row', 
+    gap: 8 },
+
   'alert-body': { marginTop: 8 },
 });
-
-export { styleAlerts };