@campxdev/react-blueprint 1.1.7 → 1.1.9

package/.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-  "cSpell.words": ["autodocs", "Campx"]
+  "cSpell.words": [
+    "autodocs",
+    "Campx",
+    "Gifs"
+  ]
 }

package/craco.config.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const { getLoader, loaderByName } = require('@craco/craco');
+const packages = [];
+packages.push(path.dirname(require.resolve('@campxdev/campx-web-utils')));
+packages.push(path.dirname(require.resolve('@campxdev/react-blueprint')));
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      const { isFound, match } = getLoader(webpackConfig, loaderByName('babel-loader'));
+      if (isFound) {
+        const include = Array.isArray(match.loader.include) ? match.loader.include : [match.loader.include];
+        match.loader.include = include.concat(packages);
+      }
+
+      return webpackConfig;
+    },
+  },
+};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/campx-web-utils": "0.1.5",
+    "@campxdev/campx-web-utils": "0.2.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.20",
@@ -43,9 +43,9 @@
     "yalc": "^1.0.0-pre.53"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -72,6 +72,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1.6.1",
+    "@craco/craco": "^7.1.0",
     "@storybook/addon-essentials": "^8.2.6",
     "@storybook/addon-interactions": "^8.2.6",
     "@storybook/addon-links": "^8.2.6",

package/src/AppContent.tsx

@@ -1,9 +1,9 @@
-import { useQuery } from "react-query";
-import { AppHeader } from "./components/export";
-import { campxAxios } from "./utils/campxAxios";
+import { axios } from '@campxdev/campx-web-utils';
+import { useQuery } from 'react-query';
+import { AppHeader } from './components/export';
 
 const fetchClubRequests = () => {
-  return campxAxios.get(`/square/clubs`).then((res) => res.data);
+  return axios.get(`/square/clubs`).then((res) => res.data);
 };
 
 function AppContent() {
@@ -12,7 +12,7 @@ function AppContent() {
     isLoading,
     error,
     refetch,
-  } = useQuery("club-requests", fetchClubRequests);
+  } = useQuery('club-requests', fetchClubRequests);
 
   if (isLoading) {
     return <div>Loading...</div>;
@@ -20,7 +20,7 @@ function AppContent() {
 
   if (error) {
     // No need to handle the error locally, it will be caught by ErrorBoundary
-    console.error("Error fetching club requests:", error);
+    console.error('Error fetching club requests:', error);
     throw error; // Re-throw the error to be caught by the ErrorBoundary
   }
 

package/src/assets/fonts/heebo/index.ts

@@ -1,3 +1,3 @@
-const heeboSemiBold = require("./Heebo-SemiBold.ttf");
-const heeboMedium = require("./Heebo-Medium.ttf");
+const heeboSemiBold = require('./Heebo-SemiBold.ttf');
+const heeboMedium = require('./Heebo-Medium.ttf');
 export { heeboMedium, heeboSemiBold };

package/src/assets/fonts/poppins/index.ts

@@ -1,9 +1,9 @@
 //semibold, medium, light, regular
-const semiboldPoppins = require("./Poppins-SemiBold.ttf");
-const mediumPoppins = require("./Poppins-Medium.ttf");
-const lightPoppins = require("./Poppins-Light.ttf");
-const regularPoppins = require("./Poppins-Regular.ttf");
-const boldPoppins = require("./Poppins-Bold.ttf");
+const semiboldPoppins = require('./Poppins-SemiBold.ttf');
+const mediumPoppins = require('./Poppins-Medium.ttf');
+const lightPoppins = require('./Poppins-Light.ttf');
+const regularPoppins = require('./Poppins-Regular.ttf');
+const boldPoppins = require('./Poppins-Bold.ttf');
 
 export {
   boldPoppins,

package/src/assets/images/gif/index.ts

@@ -0,0 +1,11 @@
+import ConfirmationAlert from '../gif/confirmation-alert.gif';
+import DeleteConfirmationAlert from '../gif/delete-confirmation-alert.gif';
+import UploadFile from '../gif/upload-file.gif';
+import UploadingFile from '../gif/uploading-file.gif';
+
+export const AnimatedGifs = {
+  ConfirmationAlert,
+  DeleteConfirmationAlert,
+  UploadFile,
+  UploadingFile,
+};

package/src/assets/images/svg/index.ts

@@ -1,29 +1,13 @@
-import commuteSmall from "./commutex_small.svg";
-import emptyListImage from "./Emptylistmage.svg";
-import enrollSmall from "./enroll_logo.svg";
-import errorCactus from "./error-cactus.svg";
-import examsSmall from "./exams_small.svg";
-import helpIcon from "./help-icon.svg";
-import hostelSmall from "./hostel_small.svg";
-import internalServerError from "./Internalserverimage.svg";
-import noConnection from "./no-connection.svg";
-import payxSmall from "./payx_small.svg";
-import peopleSmall from "./people_small.svg";
-import squareSmall from "./square_small.svg";
-import unAuthorized from "./unauthorized.svg";
+import emptyListImage from './Emptylistmage.svg';
+import errorCactus from './error-cactus.svg';
+import internalServerError from './Internalserverimage.svg';
+import noConnection from './no-connection.svg';
+import unAuthorized from './unauthorized.svg';
 
 export {
-  commuteSmall,
   emptyListImage,
-  enrollSmall,
   errorCactus,
-  examsSmall,
-  helpIcon,
-  hostelSmall,
   internalServerError,
   noConnection,
-  payxSmall,
-  peopleSmall,
-  squareSmall,
   unAuthorized,
 };

package/src/components/Assets/ErrorPages/InternalServerError.tsx

@@ -1,7 +1,7 @@
-import { internalServerError } from "../../../assets/images/svg";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Button } from "../../export";
-import { StyledBox } from "./styles";
+import { internalServerError } from '../../../assets/images/svg';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Button } from '../../export';
+import { StyledBox } from './styles';
 
 export const InternalServerError = ({ resetBoundary }: any) => {
   return (
@@ -10,8 +10,8 @@ export const InternalServerError = ({ resetBoundary }: any) => {
         <img
           src={internalServerError}
           alt="page not found"
-          width={"350px"}
-          style={{ margin: "20px" }}
+          width={'350px'}
+          style={{ margin: '20px' }}
         />
         <Typography variant="subtitle1">Internal Server Error</Typography>
         <Typography variant="body2">
@@ -19,7 +19,7 @@ export const InternalServerError = ({ resetBoundary }: any) => {
         </Typography>
         <Typography variant="body2">Please try again later.</Typography>
         <Button
-          sx={{ marginTop: "20px" }}
+          sx={{ marginTop: '20px' }}
           variant="contained"
           onClick={() => resetBoundary()}
         >

package/src/components/Assets/ErrorPages/NoInternetConnection.tsx

@@ -1,7 +1,7 @@
-import { noConnection } from "../../../assets/images/svg";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Button } from "../../export";
-import { StyledBox } from "./styles";
+import { noConnection } from '../../../assets/images/svg';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Button } from '../../export';
+import { StyledBox } from './styles';
 
 export const NoInterneConnection = ({ resetBoundary }: any) => {
   return (
@@ -10,8 +10,8 @@ export const NoInterneConnection = ({ resetBoundary }: any) => {
         <img
           src={noConnection}
           alt="page not found"
-          width={"350px"}
-          style={{ margin: "20px" }}
+          width={'350px'}
+          style={{ margin: '20px' }}
         />
         <Typography variant="subtitle1">No Internet Connection</Typography>
         <Typography variant="body2">
@@ -21,7 +21,7 @@ export const NoInterneConnection = ({ resetBoundary }: any) => {
           internet connection and try again.
         </Typography>
         <Button
-          sx={{ marginTop: "20px" }}
+          sx={{ marginTop: '20px' }}
           variant="contained"
           onClick={() => resetBoundary()}
         >

package/src/components/Assets/ErrorPages/NoItemFound.tsx

@@ -1,7 +1,7 @@
-import { emptyListImage } from "../../../assets/images/svg";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Button } from "../../export";
-import { StyledBox } from "./styles";
+import { emptyListImage } from '../../../assets/images/svg';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Button } from '../../export';
+import { StyledBox } from './styles';
 
 export const NoItemFound = ({ resetBoundary }: any) => {
   return (
@@ -10,8 +10,8 @@ export const NoItemFound = ({ resetBoundary }: any) => {
         <img
           src={emptyListImage}
           alt="page not found"
-          width={"350px"}
-          style={{ margin: "20px" }}
+          width={'350px'}
+          style={{ margin: '20px' }}
         />
         <Typography variant="subtitle1">No Items Found</Typography>
         <Typography variant="body2">
@@ -21,7 +21,7 @@ export const NoItemFound = ({ resetBoundary }: any) => {
           items or adjust your filter criteria.
         </Typography>
         <Button
-          sx={{ marginTop: "20px" }}
+          sx={{ marginTop: '20px' }}
           variant="contained"
           onClick={() => resetBoundary()}
         >

package/src/components/Assets/ErrorPages/PageNotFound.tsx

@@ -1,6 +1,6 @@
-import { errorCactus } from "../../../assets/images/svg";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { StyledBox } from "./styles";
+import { errorCactus } from '../../../assets/images/svg';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { StyledBox } from './styles';
 
 export const PageNotFound = () => {
   return (
@@ -9,8 +9,8 @@ export const PageNotFound = () => {
         <img
           src={errorCactus}
           alt="page not found"
-          width={"350px"}
-          style={{ margin: "20px" }}
+          width={'350px'}
+          style={{ margin: '20px' }}
         />
         <Typography variant="subtitle1">Page Not Found.</Typography>
         <Typography variant="body2">

package/src/components/Assets/ErrorPages/UnAuthorized.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-import { unAuthorized } from "../../../assets/images/svg";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { StyledBox } from "./styles";
+import { ReactNode } from 'react';
+import { unAuthorized } from '../../../assets/images/svg';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { StyledBox } from './styles';
 
 export const UnAuthorized = ({ component }: { component?: ReactNode }) => {
   return (
@@ -10,8 +10,8 @@ export const UnAuthorized = ({ component }: { component?: ReactNode }) => {
         <img
           src={unAuthorized}
           alt="page not found"
-          width={"350px"}
-          style={{ margin: "20px" }}
+          width={'350px'}
+          style={{ margin: '20px' }}
         />
         <Typography variant="subtitle1">Unauthorized Access</Typography>
         <Typography variant="body2">

package/src/components/Assets/ErrorPages/styles.tsx

@@ -1,29 +1,29 @@
-import { Alert, Box, styled } from "@mui/material";
+import { Alert, Box, styled } from '@mui/material';
 
 export const StyledAlert = styled(Alert)(({ theme }) => ({
-  height: "60px",
+  height: '60px',
   border: `1px solid ${theme.palette.error.main}`,
-  display: "flex",
-  alignItems: "center",
-  "& .MuiAlert-message": {
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiAlert-message': {
     padding: 0,
   },
-  "& .MuiTypography-root": {
+  '& .MuiTypography-root': {
     margin: 0,
   },
-  position: "relative",
-  "& .retryBtn": {
-    color: "#661b2a",
-    position: "absolute",
+  position: 'relative',
+  '& .retryBtn': {
+    color: '#661b2a',
+    position: 'absolute',
     right: 8,
     top: 8,
   },
 }));
 
 export const StyledBox = styled(Box)(({ theme }) => ({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
 }));

package/src/components/Assets/Icons/IconComponents/AcademicIcon.tsx

@@ -5,7 +5,13 @@ export const AcademicsIcon = () => {
   const color = theme.palette.text.primary;
   return (
     <>
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M10.0001 18.3986C9.75295 18.4012 9.50914 18.3411 9.29147 18.2239C7.39801 17.2642 5.36941 16.5986 3.27547 16.2499L3.03414 16.2166C2.48868 16.133 1.99007 15.8601 1.62581 15.4456C1.26154 15.0311 1.05489 14.5016 1.04214 13.9499V3.88322C1.03855 3.56619 1.10171 3.25195 1.22751 2.96092C1.35332 2.66989 1.53895 2.40859 1.77234 2.194C2.00573 1.9794 2.28167 1.81632 2.58221 1.71534C2.88276 1.61436 3.20118 1.57775 3.5168 1.60789C5.68976 1.86244 7.78803 2.55725 9.68347 3.64989L9.88347 3.76656C9.95755 3.79813 10.0407 3.80098 10.1168 3.77455L10.2501 3.69122C12.1495 2.5944 14.2492 1.88898 16.4255 1.61656H16.5255C16.8345 1.59029 17.1455 1.62937 17.4384 1.73125C17.7313 1.83314 17.9995 1.99553 18.2255 2.20789C18.4599 2.42226 18.6465 2.68374 18.7728 2.97521C18.8992 3.26668 18.9626 3.58156 18.9588 3.89922V13.9579C18.9471 14.5111 18.7397 15.0423 18.3736 15.4572C18.0075 15.8722 17.5063 16.144 16.9588 16.2246L16.6841 16.2579C14.5975 16.6056 12.5766 17.2715 10.6921 18.2326C10.4801 18.3478 10.2414 18.4051 10.0001 18.3986ZM3.3168 2.84989C3.05807 2.84665 2.8078 2.94199 2.6168 3.11655C2.51238 3.21476 2.42957 3.33367 2.37367 3.46567C2.31777 3.59768 2.29 3.73988 2.29214 3.88322V13.9499C2.30335 14.1985 2.39842 14.4359 2.56186 14.6236C2.72529 14.8112 2.94745 14.938 3.19214 14.9832L3.44214 15.0166C5.67583 15.3843 7.83989 16.0925 9.8588 17.1166C9.92936 17.1477 10.0078 17.1564 10.0835 17.1412C12.1066 16.1007 14.2803 15.3838 16.5255 15.0166L16.8088 14.9832C17.0541 14.9392 17.277 14.8128 17.4406 14.6249C17.6043 14.437 17.6989 14.1989 17.7088 13.9499V3.89122C17.711 3.7467 17.6832 3.60329 17.6274 3.46999C17.5715 3.33668 17.4887 3.21636 17.3841 3.11655C17.2752 3.02111 17.1484 2.94835 17.011 2.90256C16.8737 2.85677 16.7285 2.83886 16.5841 2.84989H16.4841C14.5277 3.11065 12.6402 3.74722 10.9255 4.72456L10.7921 4.81656C10.5576 4.95487 10.2905 5.02848 10.0182 5.02988C9.74592 5.03129 9.47812 4.96044 9.24214 4.82456L9.04214 4.70789C7.30552 3.72903 5.3948 3.09794 3.4168 2.84989H3.3168Z"
           style={{ stroke: color, fill: color }}

package/src/components/Assets/Icons/IconComponents/ActiveDevicesIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const ActiveDevicesIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/AdminIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const AdminIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/AdministratorIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const AdministratorIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/AlertFilledIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const ErrorFilledIcon = ({
   size = 16,

package/src/components/Assets/Icons/IconComponents/ArrowBackIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const ArrowBackIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/AttachmentIcon.tsx

@@ -0,0 +1,32 @@
+export const AttachmentIcon = ({ size = 24 }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_2077_7126)">
+        <path
+          d="M19.5 24.5H4.5C2.01453 24.5 0 22.4855 0 20V5C0 2.51453 2.01453 0.5 4.5 0.5H19.5C21.9855 0.5 24 2.51453 24 5V20C24 22.4855 21.9855 24.5 19.5 24.5Z"
+          fill="#4BAABE"
+        />
+        <path
+          d="M12.375 18.5C10.3072 18.5 8.625 16.8178 8.625 14.75V9.5C8.625 9.22406 8.8493 8.99976 9.12524 8.99976C9.40118 8.99976 9.62549 9.22333 9.62549 9.5V14.75C9.62549 16.2657 10.8593 17.5002 12.3757 17.5002C13.8922 17.5002 15.126 16.2665 15.126 14.75V9.25024C15.126 8.28583 14.3408 7.50049 13.3762 7.50049C12.4118 7.50049 11.625 8.28491 11.625 9.25024V14.2505C11.625 14.6638 11.9617 15.0005 12.375 15.0005C12.7883 15.0005 13.125 14.6638 13.125 14.2505V9.5C13.125 9.22406 13.3493 8.99976 13.6252 8.99976C13.9012 8.99976 14.1255 9.22333 14.1255 9.5V14.2498C14.1255 15.2142 13.3403 15.9995 12.3757 15.9995C11.4113 15.9995 10.626 15.2142 10.626 14.2498V9.24951C10.6252 7.73376 11.859 6.5 13.3748 6.5C14.8905 6.5 16.125 7.73376 16.125 9.25024V14.75C16.125 16.8178 14.4428 18.5 12.375 18.5Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2077_7126">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/BulbIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const BulbIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/CampxFullLogoIcon.tsx

@@ -1,8 +1,8 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const CampxFullLogoIcon = () => {
   const theme = useTheme();
-  const color = theme.palette.mode === "dark" ? "#FFFFFF" : "#1e19f5";
+  const color = theme.palette.mode === 'dark' ? '#FFFFFF' : '#1e19f5';
 
   return (
     <svg
@@ -11,7 +11,7 @@ export const CampxFullLogoIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 1177.77 217.66"
       style={{
-        strokeWidth: "0px",
+        strokeWidth: '0px',
         fill: theme.palette.text.primary,
       }}
     >

package/src/components/Assets/Icons/IconComponents/CampxIcon.tsx

@@ -1,9 +1,9 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const CampxIcon = ({ size = 16 }) => {
   const theme = useTheme();
 
-  const color = theme.palette.mode === "dark" ? "white" : "blue";
+  const color = theme.palette.mode === 'dark' ? 'white' : 'blue';
 
   return (
     <svg

package/src/components/Assets/Icons/IconComponents/CareerIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const CareerIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/CheckedCheckBoxIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const CheckedCheckboxIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/CheckedRadioIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const CheckedRadioIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/ClogWheelIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const ClogWheelIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/CollapseIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const CollapseIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/CrossIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const CrossIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/DashBoardIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const DashBoardIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/DeleteIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 export const DeleteIcon = ({ size = 16 }) => {
   const theme = useTheme();
   const color = theme.palette.primary.light;

package/src/components/Assets/Icons/IconComponents/DeviceIcon.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material";
+import { useTheme } from '@mui/material';
 
 export const DeviceIcon = ({ size = 16 }) => {
   const theme = useTheme();

package/src/components/Assets/Icons/IconComponents/DocumentIcon.tsx

@@ -0,0 +1,52 @@
+export const DocumentIcon = ({ size = 24 }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_2077_7034)">
+        <path
+          d="M20.6914 7.07352V22.9539C20.6914 23.8079 19.9987 24.5 19.1453 24.5H4.85516C4.00114 24.5 3.30908 23.8079 3.30908 22.9539V2.04608C3.30904 1.19206 4.0011 0.5 4.85516 0.5H14.1179L20.6914 7.07352Z"
+          fill="#518EF8"
+        />
+        <path
+          d="M16.4439 12.5493H7.55518V13.537H16.4439V12.5493Z"
+          fill="white"
+        />
+        <path
+          d="M16.4439 14.7554H7.55518V15.7431H16.4439V14.7554Z"
+          fill="white"
+        />
+        <path
+          d="M16.4439 16.9609H7.55518V17.9486H16.4439V16.9609Z"
+          fill="white"
+        />
+        <path
+          d="M13.8765 19.167H7.55518V20.1547H13.8765V19.167Z"
+          fill="white"
+        />
+        <path
+          d="M15.0146 6.93052L20.6913 9.26916V7.07334L17.4728 6.12305L15.0146 6.93052Z"
+          fill="#3A5BBC"
+        />
+        <path
+          d="M20.6912 7.07352H15.6638C14.8097 7.07352 14.1177 6.38145 14.1177 5.52744V0.5L20.6912 7.07352Z"
+          fill="#ACD1FC"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2077_7034">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};