react-native-exp-fig 0.1.2 → 0.1.4

package/lib/typescript/module/src/styles/global/theme-provider.d.ts

@@ -0,0 +1,149 @@
+import React from "react";
+export declare const ThemeProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useTheme: () => {
+    borderWidths: {
+        thin: number;
+        thin_medium: number;
+        thin_bold: number;
+        thick: number;
+        thick_medium: number;
+        thick_bold: number;
+        thick_large: number;
+        hairline: number;
+    };
+    colors: {
+        neutral: {
+            25: string;
+            50: string;
+            75: string;
+            200: string;
+            300: string;
+            400: string;
+        };
+        black: {
+            10: string;
+            25: string;
+            100: string;
+            180: string;
+        };
+        blue: {
+            25: string;
+            50: string;
+            100: string;
+            150: string;
+            350: string;
+            375: string;
+            400: string;
+            500: string;
+            525: string;
+        };
+        red: {
+            400: string;
+            500: string;
+            800: string;
+            900: string;
+        };
+        gray: {
+            300: string;
+            350: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            850: string;
+            875: string;
+            900: string;
+            925: string;
+            950: string;
+        };
+        green: {
+            200: string;
+            250: string;
+            400: string;
+            500: string;
+        };
+        orange: {
+            500: string;
+            450: string;
+            150: string;
+        };
+        yellow: {
+            100: string;
+            50: string;
+            75: string;
+        };
+    };
+    fonts: {
+        inter_thin_100: string;
+        inter_extra_light_200: string;
+        inter_light_300: string;
+        inter_regular_400: string;
+        inter_medium_500: string;
+        inter_semi_bold_600: string;
+        inter_bold_700: string;
+        inter_extra_bold_800: string;
+        inter_bold: string;
+    };
+    fontSizes: {
+        "2xs": number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        "2xl": number;
+        "3xl": number;
+        "4xl": number;
+        "5xl": number;
+        "6xl": number;
+        "7xl": number;
+        "8xl": number;
+        "9xl": number;
+    };
+    margins: {
+        "2xs": number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        "2xl": number;
+        "3xl": number;
+        "4xl": number;
+        "5xl": number;
+        "6xl": number;
+        "7xl": number;
+        "8xl": number;
+        "9xl": number;
+    };
+    shadows: {
+        z1: string;
+        z2: string;
+    };
+    paddings: {
+        "2xs": number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        "2xl": number;
+        "3xl": number;
+        "4xl": number;
+        "5xl": number;
+        "6xl": number;
+        "7xl": number;
+        "8xl": number;
+        "9xl": number;
+    };
+    letterSpacing: {
+        o_16: number;
+        regular: number;
+        medium: number;
+        strong: number;
+    };
+};
+//# sourceMappingURL=theme-provider.d.ts.map

package/lib/typescript/module/src/styles/global/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/styles/global/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEjE,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiC,CAAC"}

package/lib/typescript/module/src/styles/theme/theme.d.ts

@@ -0,0 +1,151 @@
+/**
+ * IMPORTS
+ */
+/**
+ * EXPORTSS
+ */
+export declare const theme: {
+    borderWidths: {
+        thin: number;
+        thin_medium: number;
+        thin_bold: number;
+        thick: number;
+        thick_medium: number;
+        thick_bold: number;
+        thick_large: number;
+        hairline: number;
+    };
+    colors: {
+        neutral: {
+            25: string;
+            50: string;
+            75: string;
+            200: string;
+            300: string;
+            400: string;
+        };
+        black: {
+            10: string;
+            25: string;
+            100: string;
+            180: string;
+        };
+        blue: {
+            25: string;
+            50: string;
+            100: string;
+            150: string;
+            350: string;
+            375: string;
+            400: string;
+            500: string;
+            525: string;
+        };
+        red: {
+            400: string;
+            500: string;
+            800: string;
+            900: string;
+        };
+        gray: {
+            300: string;
+            350: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            850: string;
+            875: string;
+            900: string;
+            925: string;
+            950: string;
+        };
+        green: {
+            200: string;
+            250: string;
+            400: string;
+            500: string;
+        };
+        orange: {
+            500: string;
+            450: string;
+            150: string;
+        };
+        yellow: {
+            100: string;
+            50: string;
+            75: string;
+        };
+    };
+    fonts: {
+        inter_thin_100: string;
+        inter_extra_light_200: string;
+        inter_light_300: string;
+        inter_regular_400: string;
+        inter_medium_500: string;
+        inter_semi_bold_600: string;
+        inter_bold_700: string;
+        inter_extra_bold_800: string;
+        inter_bold: string;
+    };
+    fontSizes: {
+        "2xs": number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        "2xl": number;
+        "3xl": number;
+        "4xl": number;
+        "5xl": number;
+        "6xl": number;
+        "7xl": number;
+        "8xl": number;
+        "9xl": number;
+    };
+    margins: {
+        "2xs": number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        "2xl": number;
+        "3xl": number;
+        "4xl": number;
+        "5xl": number;
+        "6xl": number;
+        "7xl": number;
+        "8xl": number;
+        "9xl": number;
+    };
+    shadows: {
+        z1: string;
+        z2: string;
+    };
+    paddings: {
+        "2xs": number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        "2xl": number;
+        "3xl": number;
+        "4xl": number;
+        "5xl": number;
+        "6xl": number;
+        "7xl": number;
+        "8xl": number;
+        "9xl": number;
+    };
+    letterSpacing: {
+        o_16: number;
+        regular: number;
+        medium: number;
+        strong: number;
+    };
+};
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/module/src/styles/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../src/styles/theme/theme.ts"],"names":[],"mappings":"AAAA;;GAEG;AAwJH;;GAEG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASjB,CAAC"}

package/lib/typescript/module/src/utils/format-data/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Formata uma data do tipo Date para o formato DD/MM/YYYY
+ * @param date Objeto Date a ser formatado
+ * @returns String no formato DD/MM/YYYY
+ */
+declare const formatDate: (date: Date) => string;
+export { formatDate };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/utils/format-data/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/utils/format-data/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,QAAA,MAAM,UAAU,SAAU,IAAI,KAAG,MAMhC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/lib/typescript/module/src/utils/mutiply/index.d.ts

@@ -0,0 +1,2 @@
+export declare function multiply(a: number, b: number): number;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/utils/mutiply/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/utils/mutiply/index.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAErD"}

package/lib/typescript/module/src/utils/status-color/return-color.d.ts

@@ -0,0 +1,4 @@
+export declare type StatusType = "Aprovado" | "Reprovado" | "Pendente";
+declare function getStatusColor(status: StatusType): string;
+export { getStatusColor };
+//# sourceMappingURL=return-color.d.ts.map

package/lib/typescript/module/src/utils/status-color/return-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"return-color.d.ts","sourceRoot":"","sources":["../../../../../../src/utils/status-color/return-color.ts"],"names":[],"mappings":"AAEA,oBAAY,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/D,iBAAS,cAAc,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CAQlD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-native-exp-fig",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Lib para interfaces",
-  "source": "./src/index.ts",
-  "main": "./src/index.ts",
+  "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
+  "types": "./lib/typescript/module/src/index.d.ts",
+  "source": "./src/index",
   "exports": {
     ".": {
       "import": {
@@ -75,6 +76,7 @@
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
     "@evilmartians/lefthook": "^1.5.0",
+    "@react-native-community/bob": "^0.17.1",
     "@react-native/eslint-config": "^0.77.0",
     "@release-it/conventional-changelog": "^9.0.2",
     "@storybook/addon-actions": "^8.3.5",
@@ -122,10 +124,6 @@
   "resolutions": {
     "@types/react": "^18.2.44"
   },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
-  },
   "workspaces": [
     "example"
   ],
@@ -184,9 +182,10 @@
     "@storybook/test": "^8.3.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-matcher-utils": "^29.7.0",
-    "react": "18.3.1",
+    "react": "*",
     "react-dom": "^18.3.1",
-    "react-native": "0.75.4",
+    "react-native": "*",
+    "react-native-exp-fig": "^0.1.1",
     "react-native-gesture-handler": "^2.19.0",
     "react-native-reanimated": "^3.16.7",
     "react-native-safe-area-context": "^4.11.0",
@@ -196,5 +195,13 @@
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "4.8.4"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": "*"
   }
 }

package/src/common/icons-svg/bell/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconBell: React.FC<ISvgProps> = ({ size, color }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 32}
+    height={size ?? 32}
+    fill="none"
+    viewBox="0 0 32 32"
+  >
+    <Path
+      fill={color ?? "#2D3748"}
+      d="M28 8.888a1 1 0 0 1-1.348-.428 11.77 11.77 0 0 0-4.182-4.614 1.002 1.002 0 0 1 1.067-1.692 13.93 13.93 0 0 1 4.89 5.386A1 1 0 0 1 28 8.888M4.464 9a1 1 0 0 0 .887-.54c.955-1.886 2.4-3.48 4.183-4.614a1 1 0 0 0-1.068-1.692 13.93 13.93 0 0 0-4.89 5.386A1 1 0 0 0 4.464 9m23.262 12.993A2 2 0 0 1 26 25h-5.1a5 5 0 0 1-9.8 0H6a2 2 0 0 1-1.724-3.008C5.402 20.05 6 17.286 6 14a10 10 0 0 1 20 0c0 3.284.597 6.047 1.726 7.993M18.827 25h-5.655a3 3 0 0 0 5.655 0M26 23c-1.33-2.284-2-5.311-2-9a8 8 0 1 0-16 0c0 3.69-.673 6.718-2 9z"
+    ></Path>
+  </Svg>
+);
+
+export { SvgIconBell };

package/src/common/icons-svg/check-box-fill/index.tsx

@@ -18,7 +18,7 @@ const SvgIconCheckBoxFill: React.FC<ISvgProps> = ({ color, size, ...res }) => (
     {...res}
   >
     <Path
-      fill={color ? color : "#F3F3F3 "}
+      fill={color ? color : "#F3F3F3"}
       d="M16.28 9.22a.748.748 0 0 1 0 1.06l-5.25 5.25a.747.747 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l1.72 1.72 4.72-4.72a.749.749 0 0 1 1.06 0ZM21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5Zm-1.5 15v-15h-15v15h15Z"
     />
   </Svg>

package/src/common/icons-svg/check-box-outline/index.tsx

@@ -18,7 +18,7 @@ const SvgIconCheckBoxOutline: React.FC<ISvgProps> = ({ color, size, ...res }) =>
     {...res}
   >
     <Path
-      fill={color ? color : "#F3F3F3 "}
+      fill={color ? color : "#F3F3F3"}
       d="M19.5 3h-15A1.5 1.5 0 0 0 3 4.5v15A1.5 1.5 0 0 0 4.5 21h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 19.5 3Zm-3.22 7.28-5.25 5.25a.747.747 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l1.72 1.72 4.72-4.72a.751.751 0 0 1 1.06 1.06Z"
     />
   </Svg>

package/src/common/icons-svg/check-circle/index.tsx

@@ -4,20 +4,33 @@
 import * as React from "react";
 import Svg, { Path } from "react-native-svg";
 
+// typings
 import { ISvgProps } from "../interface";
 
-const SvgIconCheckCircle: React.FC<ISvgProps> = ({ color, width, height }) => (
+const SvgIconCheckCircle: React.FC<ISvgProps> = ({ color, size, background }) => (
   <Svg
-    //@ts-ignore
+    // @ts-ignore
     xmlns="http://www.w3.org/2000/svg"
-    width={width ?? 26}
-    height={height ?? 26}
+    width={size ?? "40"}
+    height={size ?? "40"}
     fill="none"
+    viewBox="0 0 40 40"
   >
     <Path
-      fill={color ?? "#25BA76"}
-      d="M13 0a13 13 0 1 0 13 13A13.013 13.013 0 0 0 13 0Zm5.707 10.707-7 7a1.001 1.001 0 0 1-1.415 0l-3-3a1 1 0 1 1 1.416-1.415L11 15.587l6.293-6.293a1 1 0 1 1 1.415 1.415Z"
-    />
+      fill={background ?? "#38A238"}
+      stroke={background ?? "#38A238"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M20 35c8.284 0 15-6.716 15-15S28.284 5 20 5 5 11.716 5 20s6.716 15 15 15"
+    ></Path>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M26.875 16.25 17.703 25l-4.578-4.375"
+    ></Path>
   </Svg>
 );
 

package/src/common/icons-svg/closed/index.tsx

@@ -8,9 +8,9 @@ import Svg, { Path, G, Defs, ClipPath } from "react-native-svg";
  */
 import { ISvgProps } from "../interface";
 
-const SvgIconClosed: React.FC<ISvgProps> = ({ color }) => (
+const SvgIconClosed: React.FC<ISvgProps> = ({ color, size }) => (
   // @ts-expect-error
-  <Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none">
+  <Svg xmlns="http://www.w3.org/2000/svg" width={size ?? 24} height={size ?? 24} fill="none">
     <G
       stroke={color ?? "#1e1e1e"}
       strokeLinecap="round"

package/src/common/icons-svg/constants/index.ts

@@ -16,6 +16,7 @@ const SVG_NAME = {
   FILE_TEXT: "Pedido Faturado",
   TRUCK: "Pedido Enviado",
   PACKAGE_CHECK: "Pedido Entregue",
+  PLUS: "plus",
   EYE_SLASH: "eye-slash",
   EYE: "eye",
   CALENDAR: "calendar",
@@ -37,6 +38,13 @@ const SVG_NAME = {
   LOADING: "currency-circle-dollar",
   COIL: "package",
   HISTORY: "chart-bar",
+  BELL: "bell",
+  FILES: "files",
+  LIFEBUOY: "lifebuoy",
+  RECUSED: "recused",
+  EXCLAMATION_CIRCLE: "exclamation-circle",
+  X_CIRCLE: "x-circle",
+  ELLIPSE: "ellipsis",
 };
 
 /**

package/src/common/icons-svg/ellipse/index.tsx

@@ -0,0 +1,27 @@
+/*
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Circle } from "react-native-svg";
+
+// typing
+import { ISvgProps } from "../interface";
+
+const SvgIconEllipse: React.FC<ISvgProps> = ({ size, color, ...res }) => (
+  <Svg
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "8"}
+    height={size ?? "8"}
+    fill="none"
+    viewBox="0 0 8 8"
+    {...res}
+  >
+    <Circle cx="4" cy="4" r="4" fill={color ?? "#20AD48"}></Circle>
+  </Svg>
+);
+
+/*
+ * EXPORTS
+ */
+export { SvgIconEllipse };

package/src/common/icons-svg/exclamation-circle/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, G, Defs, ClipPath } from "react-native-svg";
+
+// typings
+import { ISvgProps } from "../interface";
+
+const SvgIconExclamationCircle: React.FC<ISvgProps> = ({ color, size, background }) => (
+  <Svg
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "36"}
+    height={size ?? "36"}
+    fill="none"
+    viewBox="0 0 36 36"
+  >
+    <G clipPath="url(#a)">
+      <Path
+        fill={background ?? "#F4B31D"}
+        d="M36 18a18 18 0 1 1-36 0 18 18 0 0 1 36 0M18 9a2.036 2.036 0 0 0-2.025 2.239l.787 7.89a1.242 1.242 0 0 0 2.476 0l.787-7.89A2.035 2.035 0 0 0 18 9m.005 13.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill={color ?? "#fff"} d="M0 0h36v36H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export { SvgIconExclamationCircle };

package/src/common/icons-svg/files/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconFiles: React.FC<ISvgProps> = ({ size, color }) => (
+  <Svg
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <Path
+      fill={color ?? "#837676"}
+      d="m20.03 6.22-3.75-3.75a.75.75 0 0 0-.53-.22h-7.5a1.5 1.5 0 0 0-1.5 1.5v1.5h-1.5a1.5 1.5 0 0 0-1.5 1.5v13.5a1.5 1.5 0 0 0 1.5 1.5h10.5a1.5 1.5 0 0 0 1.5-1.5v-1.5h1.5a1.5 1.5 0 0 0 1.5-1.5V6.75a.75.75 0 0 0-.22-.53m-4.28 14.03H5.25V6.75h7.19l3.31 3.31v10.19m3-3h-1.5v-7.5a.75.75 0 0 0-.22-.53l-3.75-3.75a.75.75 0 0 0-.53-.22h-4.5v-1.5h7.19l3.31 3.31zm-5.25-3a.75.75 0 0 1-.75.75h-4.5a.75.75 0 1 1 0-1.5h4.5a.75.75 0 0 1 .75.75m0 3a.75.75 0 0 1-.75.75h-4.5a.75.75 0 1 1 0-1.5h4.5a.75.75 0 0 1 .75.75"
+    ></Path>
+  </Svg>
+);
+
+export { SvgIconFiles };

package/src/common/icons-svg/index.tsx

@@ -38,12 +38,20 @@ import { SvgIconClosed } from "./closed";
 import { SvgPackage } from "./package";
 import { SvgChartBar } from "./chart-bar";
 import { SvgTruckTrailer } from "./truck-trailer";
+import { SvgIconBell } from "./bell";
+import { SvgIconFiles } from "./files";
+import { SvgIconLifebuoy } from "./lifebuoy";
+import { SvgIconRecused } from "./recused";
+import { SvgIconExclamationCircle } from "./exclamation-circle";
+import { SvgIconPlus } from "./plus";
+import { SvgIconXCirle } from "./x-circle";
 
 // typing
 import { ISvgProps } from "./interface";
 
 // styles
 import { theme } from "../../styles/theme/theme";
+import { SvgIconEllipse } from "./ellipse";
 
 const Icons: React.FC<ISvgProps> = ({ icon, color, size }) => {
   switch (icon) {
@@ -140,6 +148,30 @@ const Icons: React.FC<ISvgProps> = ({ icon, color, size }) => {
     case "CLOSED":
       return <SvgIconClosed color={color} size={size} icon={"CLOSED"} />;
 
+    case "BELL":
+      return <SvgIconBell color={color} size={size} icon={"BELL"} />;
+
+    case "FILES":
+      return <SvgIconFiles color={color} size={size} icon={"FILES"} />;
+
+    case "LIFEBUOY":
+      return <SvgIconLifebuoy color={color} size={size} icon={"LIFEBUOY"} />;
+
+    case "RECUSED":
+      return <SvgIconRecused color={color} size={size} icon={"RECUSED"} />;
+
+    case "EXCLAMATION_CIRCLE":
+      return <SvgIconExclamationCircle color={color} size={size} icon={"EXCLAMATION_CIRCLE"} />;
+
+    case "PLUS":
+      return <SvgIconPlus color={color} size={size} icon={"PLUS"} />;
+
+    case "X_CIRCLE":
+      return <SvgIconXCirle color={color} size={size} icon={"X_CIRCLE"} />;
+
+    case "ELLIPSE":
+      return <SvgIconEllipse color={color} size={size} icon={"ELLIPSE"} />;
+
     default:
       return <SvgIconCameraPlus color={color} size={size} icon={"CAMERA_PLUS"} />;
   }

package/src/common/icons-svg/interface.d.ts

@@ -11,6 +11,7 @@ interface ISvgProps extends SvgProps {
   color?: string;
   size?: number;
   icon: keyof typeof SVG_NAME;
+  background?: string;
 }
 /**
  * EXPORTS