@campxdev/react-blueprint 1.1.5 → 1.1.7

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "useTabs": false,
+  "bracketSameLine": false
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -10,6 +10,7 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@mui/x-data-grid": "^7.5.1",
+    "@mui/x-date-pickers": "^7.12.1",
     "@storybook/addon-backgrounds": "^8.2.6",
     "@storybook/addon-designs": "^8.0.3",
     "@testing-library/jest-dom": "^5.14.1",
@@ -21,6 +22,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.2",
+    "date-fns": "^3.6.0",
     "framer-motion": "^11.2.9",
     "global": "^4.4.0",
     "js-cookie": "^3.0.5",
@@ -29,6 +31,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
+    "react-hook-form": "^7.52.0",
     "react-joyride": "^2.8.2",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.24.0",

package/src/App.tsx

@@ -1,13 +1,19 @@
-import "./App.css";
-import {
-  AppHeader,
-  Button,
-  SearchBar,
-  UnAuthorized,
-} from "./components/export";
-import Providers from "./contexts/Providers";
+import { Button } from '@mui/material';
+import { useState } from 'react';
+import './App.css';
+import Chips from './components/DataDisplay/Chips/Chips';
+import { Tags } from './components/Input/Tags/Tags';
+import { AppHeader, SearchBar, UnAuthorized } from './components/export';
+import Providers from './contexts/Providers';
 
 function App() {
+  const [selected, setSelected] = useState<string | number | string[]>([]);
+  const sampleChips = [
+    { label: 'Chip1', value: 1 },
+    { label: 'Chip2', value: 2 },
+    { label: 'Chip3', value: 3 },
+  ];
+
   return (
     <Providers>
       <AppHeader
@@ -19,12 +25,22 @@ function App() {
       />
       <UnAuthorized
         component={
-          <Button sx={{ marginTop: "20px" }} variant="contained">
+          <Button sx={{ marginTop: '20px' }} variant="contained">
             Click Here to Login
           </Button>
         }
       />
-      <SearchBar onSearch={() => {}} value={""} placeholder="Search by Name" />
+      <SearchBar onSearch={() => {}} value={''} placeholder="Search by Name" />
+      <Chips
+        list={sampleChips}
+        singleSelection={false}
+        selected={selected}
+        onSelected={(selectedValue) => {
+          console.log(selectedValue, 'selectedValue');
+          setSelected(selectedValue);
+        }}
+      />
+      <Tags tags={sampleChips} />
     </Providers>
   );
 }

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

@@ -0,0 +1,41 @@
+import { useTheme } from '@mui/material';
+
+export const AcademicsIcon = () => {
+  const theme = useTheme();
+  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">
+        <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 }}
+          stroke-width="0.4"
+        />
+        <path
+          d="M10.0003 17.7002C9.83492 17.6991 9.67658 17.633 9.55955 17.5161C9.44252 17.3992 9.37622 17.2409 9.375 17.0755V4.57553C9.37605 4.41 9.44227 4.25156 9.55931 4.13451C9.67636 4.01746 9.83481 3.95124 10.0003 3.9502C10.1659 3.95124 10.3243 4.01746 10.4414 4.13451C10.5584 4.25156 10.6246 4.41 10.6257 4.57553V17.0755C10.6258 17.1576 10.6096 17.239 10.5782 17.3148C10.5468 17.3907 10.5008 17.4596 10.4427 17.5177C10.3846 17.5757 10.3156 17.6217 10.2397 17.653C10.1638 17.6843 10.0824 17.7004 10.0003 17.7002Z"
+          style={{
+            fill: color,
+            stroke: color,
+          }}
+          stroke-width="0.4"
+        />
+        <path
+          d="M6.45898 7.7002H4.58432C4.41891 7.69915 4.26056 7.63302 4.14353 7.51612C4.0265 7.39922 3.96021 7.24094 3.95898 7.07553C3.96003 6.91 4.02625 6.75156 4.1433 6.63451C4.26035 6.51746 4.41879 6.45124 4.58432 6.4502H6.45898C6.62451 6.45124 6.78296 6.51746 6.9 6.63451C7.01705 6.75156 7.08327 6.91 7.08432 7.07553C7.08309 7.24094 7.0168 7.39922 6.89977 7.51612C6.78274 7.63302 6.62439 7.69915 6.45898 7.7002Z"
+          style={{
+            fill: color,
+            stroke: color,
+          }}
+          stroke-width="0.4"
+        />
+        <path
+          d="M7.08432 10.2002H4.58432C4.41891 10.1991 4.26056 10.133 4.14353 10.0161C4.0265 9.89922 3.96021 9.74094 3.95898 9.57553C3.96003 9.41 4.02625 9.25156 4.1433 9.13451C4.26035 9.01746 4.41879 8.95124 4.58432 8.9502H7.08432C7.24984 8.95124 7.40829 9.01746 7.52534 9.13451C7.64238 9.25156 7.7086 9.41 7.70965 9.57553C7.70843 9.74094 7.64213 9.89922 7.5251 10.0161C7.40808 10.133 7.24973 10.1991 7.08432 10.2002Z"
+          style={{
+            fill: color,
+            stroke: color,
+          }}
+          stroke-width="0.4"
+        />
+      </svg>
+    </>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { useTheme } from '@mui/material';
+
+export const AccordionArrow = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      style={{
+        fill: color,
+        stroke: color,
+      }}
+    >
+      <path
+        d="M8.0006 11.9334L7.99752 11.9334C7.81529 11.9321 7.64033 11.8632 7.50626 11.7407L7.49841 11.7359L7.48101 11.7185L1.61434 5.85188L1.61432 5.85186C1.47684 5.71434 1.39961 5.52784 1.39961 5.33339C1.39961 5.13894 1.47684 4.95244 1.61432 4.81492L1.61436 4.81488C1.75188 4.6774 1.93838 4.60017 2.13283 4.60017C2.32728 4.60017 2.51378 4.6774 2.6513 4.81488L2.65132 4.8149L7.99896 10.1625L13.3455 4.81544L13.3456 4.81541C13.4831 4.67794 13.6696 4.6007 13.864 4.6007C14.0585 4.6007 14.245 4.67794 14.3825 4.81541L14.3825 4.81546C14.52 4.95298 14.5972 5.13947 14.5972 5.33392C14.5972 5.52838 14.52 5.71487 14.3825 5.85239L14.3825 5.85241L8.51585 11.7191L8.4929 11.742L8.48332 11.7468C8.35073 11.8653 8.17921 11.9319 8.0006 11.9334Z"
+        stroke-width="0.4"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,58 @@
+import { useTheme } from "@mui/material";
+export const DeleteIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.primary.light;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      style={{
+        stroke: color,
+      }}
+    >
+      <path
+        d="M1.49738 4.53314L1.39782 4.54251C1.40531 4.62215 1.42856 4.6995 1.46622 4.77007C1.50388 4.84064 1.55519 4.90302 1.61717 4.95358C1.67916 5.00414 1.75057 5.04188 1.82727 5.06459C1.90379 5.08725 1.98404 5.09451 2.06338 5.08595L3.42237 4.95271C6.92224 4.64465 10.4442 4.68925 13.9352 5.08584L13.9351 5.08647H13.9464H13.9997M1.49738 4.53314L1.39793 4.54364C1.38962 4.46499 1.39704 4.38547 1.41975 4.3097C1.44246 4.23394 1.48001 4.16345 1.53021 4.10234C1.58042 4.04122 1.64227 3.9907 1.71219 3.95371C1.78198 3.91678 1.85841 3.89408 1.93704 3.88692L3.29668 3.75362L3.29775 3.75351L3.29775 3.75352C6.87983 3.44101 10.4841 3.48576 14.0573 3.8871C14.2149 3.90362 14.3595 3.98169 14.4598 4.10434C14.5601 4.22702 14.6079 4.38435 14.5927 4.54206C14.5803 4.69059 14.5125 4.82903 14.4027 4.92989C14.2928 5.03089 14.1489 5.08679 13.9997 5.08647M1.49738 4.53314C1.50363 4.59958 1.52303 4.66412 1.55445 4.72299C1.58586 4.78187 1.62867 4.83391 1.68038 4.87609C1.7321 4.91828 1.79168 4.94976 1.85566 4.96871C1.91965 4.98766 1.98677 4.9937 2.05311 4.98647L3.41311 4.85314C6.91982 4.54445 10.4487 4.58911 13.9464 4.98647M1.49738 4.53314C1.49046 4.46767 1.49663 4.40148 1.51554 4.33842C1.53444 4.27536 1.5657 4.21668 1.60748 4.16581C1.64927 4.11494 1.70076 4.07289 1.75895 4.0421C1.81714 4.01131 1.88088 3.9924 1.94644 3.98647L3.30644 3.85314L13.9464 4.98647M13.9997 5.08647C13.9996 5.08647 13.9996 5.08647 13.9995 5.08647L13.9998 4.98647M13.9997 5.08647H13.9998V4.98647M13.9998 4.98647H13.9464M13.9998 4.98647C14.1239 4.98676 14.2436 4.94027 14.3351 4.85626C14.4265 4.77225 14.4829 4.65688 14.4931 4.53314C14.5059 4.40146 14.4661 4.27006 14.3824 4.16764C14.2986 4.06521 14.1778 4.00008 14.0462 3.98647L13.9464 4.98647"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+      <path
+        d="M5.07468 3.71743L5.07469 3.71743L5.22133 2.84394C5.2219 2.84055 5.22247 2.83715 5.22304 2.83373C5.27543 2.51925 5.3426 2.11602 5.60312 1.79426C5.87204 1.46213 6.3304 1.23398 7.12691 1.23398H8.87357C9.67435 1.23398 10.1342 1.4712 10.4026 1.80837C10.6622 2.13444 10.7278 2.53815 10.7768 2.83989L10.7786 2.85063L10.7787 2.85127L10.925 3.71613C10.94 3.79386 10.9394 3.87379 10.9232 3.95129C10.9069 4.0292 10.8752 4.10307 10.8299 4.16855C10.7847 4.23404 10.7268 4.28981 10.6596 4.33259C10.5925 4.37537 10.5175 4.4043 10.439 4.41767C10.3606 4.43104 10.2802 4.42858 10.2027 4.41044C10.1252 4.39231 10.0521 4.35886 9.98772 4.31206C9.92333 4.26526 9.86895 4.20605 9.82777 4.13793C9.78681 4.07015 9.75974 3.9949 9.74813 3.91656L9.60112 3.05045L9.60097 3.0496L9.60098 3.0496C9.57732 2.90251 9.55945 2.79316 9.53532 2.70778C9.51152 2.62358 9.48462 2.57445 9.45039 2.54159C9.4167 2.50925 9.36565 2.48289 9.27402 2.46533C9.18113 2.44754 9.05536 2.44038 8.87997 2.44038H7.13331C6.95723 2.44038 6.83142 2.44633 6.73849 2.46272C6.64667 2.4789 6.59676 2.50369 6.56418 2.53419C6.53112 2.56513 6.50461 2.61243 6.48051 2.69679C6.45609 2.78232 6.4375 2.89287 6.41219 3.04337L6.41205 3.04423L6.41204 3.04422L6.25855 3.91079C6.23551 4.05102 6.16346 4.17853 6.05521 4.27063C5.94717 4.36256 5.81008 4.41323 5.66826 4.41371C5.66775 4.41372 5.66724 4.41372 5.66672 4.41372L5.66664 4.31372C5.6377 4.31464 5.60873 4.3125 5.58024 4.30732L5.07468 3.71743ZM5.07468 3.71743L5.07457 3.71817C5.04963 3.87386 5.08679 4.03312 5.17806 4.1617C5.26929 4.29024 5.40732 4.37786 5.56247 4.40573L5.07468 3.71743Z"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+      <path
+        d="M3.26684 13.345L3.26681 13.345L3.26697 13.3472L3.26765 13.3568C3.30388 13.8692 3.34681 14.4764 3.68727 14.952C4.03647 15.4398 4.67908 15.7671 5.86005 15.7671H10.1401C11.321 15.7671 11.9636 15.4398 12.3128 14.9521C12.6533 14.4766 12.6962 13.8695 12.7325 13.3574L12.7331 13.3477L12.7332 13.3477L12.7333 13.3455L13.1652 4.49971C13.1652 4.49942 13.1652 4.49914 13.1652 4.49885C13.1753 4.34046 13.1224 4.18448 13.0179 4.06499C12.9131 3.9453 12.7653 3.872 12.6066 3.86116L12.6066 3.86114L12.6048 3.86105C12.4468 3.85306 12.2919 3.90684 12.1728 4.01104C12.0537 4.11523 11.9798 4.26165 11.9668 4.41934L11.9667 4.41934L11.9666 4.4227L11.5336 13.2674C11.5336 13.2677 11.5336 13.268 11.5335 13.2683C11.5168 13.5232 11.5029 13.7299 11.4705 13.9006C11.4384 14.0704 11.3897 14.1936 11.3108 14.2857C11.1535 14.4693 10.8422 14.5676 10.1401 14.5676H5.86005C5.16127 14.5676 4.85145 14.4693 4.69412 14.2857C4.61506 14.1935 4.56603 14.0701 4.53307 13.9002C4.49996 13.7295 4.48491 13.5228 4.46654 13.2679L4.033 4.42163L4.03303 4.42163L4.03284 4.41909C4.02104 4.26069 3.94742 4.11329 3.82789 4.00869C3.70835 3.9041 3.55247 3.8507 3.39391 3.86003L3.39391 3.86002L3.39267 3.86011C3.23395 3.87143 3.0861 3.94488 2.98118 4.06451C2.87638 4.184 2.82287 4.33995 2.8322 4.4986C2.83221 4.49878 2.83222 4.49897 2.83223 4.49915L3.26684 13.345Z"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+      <path
+        d="M9.10672 12.1L9.10735 12.1C9.26596 12.099 9.4178 12.0356 9.53002 11.9235C9.64224 11.8114 9.70581 11.6596 9.70699 11.501L9.70698 11.4996C9.70598 11.3409 9.64248 11.189 9.53024 11.0767C9.41801 10.9645 9.26607 10.901 9.10735 10.9L9.10735 10.9H9.10672H6.88699V10.9L6.88635 10.9C6.72763 10.901 6.5757 10.9645 6.46346 11.0767C6.35122 11.189 6.28773 11.3409 6.28672 11.4996L6.28671 11.4996L6.28672 11.501C6.28789 11.6596 6.35147 11.8114 6.46368 11.9235C6.5759 12.0356 6.72774 12.099 6.88635 12.1V12.1H6.88699L9.10672 12.1Z"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+      <path
+        d="M6.33313 9.43398V9.43398H6.33376L9.66656 9.43399L9.6672 9.43398C9.82581 9.43298 9.97765 9.36957 10.0899 9.25747C10.2021 9.14537 10.2657 8.9936 10.2668 8.83499L10.2668 8.83362C10.2658 8.67501 10.2024 8.52317 10.0903 8.41095C9.97822 8.29873 9.82645 8.23516 9.66784 8.23399V8.23398H9.6671H6.33376V8.23398L6.33313 8.23399C6.17441 8.23499 6.02247 8.29849 5.91024 8.41073C5.798 8.52296 5.7345 8.6749 5.7335 8.83362L5.73349 8.83362L5.7335 8.83499C5.73467 8.9936 5.79824 9.14537 5.91046 9.25747C6.02268 9.36957 6.17452 9.43298 6.33313 9.43398Z"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,43 @@
+import { useTheme } from "@mui/material";
+export const EditIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.primary.light;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      style={{
+        stroke: color,
+        fill: color,
+      }}
+    >
+      <path
+        d="M7.33416 1.23399V1.23398H7.3335H6.00016C4.17868 1.23398 2.85501 1.62271 1.98862 2.48911C1.12223 3.3555 0.733496 4.67917 0.733496 6.50065V10.5007C0.733496 12.3221 1.12223 13.6458 1.98862 14.5122C2.85501 15.3786 4.17868 15.7673 6.00016 15.7673H10.0002C11.8216 15.7673 13.1453 15.3786 14.0117 14.5122C14.8781 13.6458 15.2668 12.3221 15.2668 10.5007V9.16732C15.2668 9.00819 15.2036 8.85558 15.0911 8.74306C14.9786 8.63053 14.826 8.56732 14.6668 8.56732C14.5077 8.56732 14.3551 8.63053 14.2426 8.74306C14.13 8.85558 14.0668 9.00819 14.0668 9.16732V10.5007C14.0668 12.0303 13.7937 13.0374 13.1653 13.6658C12.5369 14.2942 11.5298 14.5673 10.0002 14.5673H6.00016C4.47055 14.5673 3.46347 14.2942 2.83504 13.6658C2.20662 13.0374 1.9335 12.0303 1.9335 10.5007V6.50065C1.9335 4.97104 2.20662 3.96395 2.83504 3.33553C3.46347 2.7071 4.47055 2.43398 6.00016 2.43398L7.3335 2.43399L7.33416 2.43398C7.49279 2.43294 7.64462 2.36945 7.7568 2.25728C7.86897 2.14511 7.93245 1.99328 7.9335 1.83464L7.9335 1.83332C7.93245 1.67469 7.86897 1.52286 7.7568 1.41069C7.64462 1.29851 7.49279 1.23503 7.33416 1.23399Z"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+      <path
+        d="M4.54154 11.9482L4.54147 11.9483L4.54469 11.9514C4.84632 12.2396 5.24897 12.3979 5.66607 12.3924C5.75692 12.3955 5.84783 12.3883 5.93707 12.371L7.94125 12.0847L7.94126 12.0848L7.94495 12.0841C8.39781 12.002 8.81772 11.7921 9.15512 11.479L9.15517 11.4791L9.15782 11.4764L14.4087 6.22558C14.955 5.75021 15.3154 5.09675 15.4259 4.38099L15.4267 4.38111L15.4271 4.3686C15.4395 3.93524 15.3541 3.50466 15.1771 3.10888C15.0007 2.71439 14.7379 2.36461 14.4082 2.08539C13.7346 1.41283 13.0434 1.06406 12.3404 1.06406C11.6365 1.06406 10.9442 1.41385 10.2697 2.08835L5.0164 7.34169L5.01635 7.34164L5.0138 7.34439C4.70078 7.68179 4.49082 8.1017 4.40871 8.55456L4.40865 8.55455L4.40812 8.55826L4.12169 10.5633C4.07798 10.8106 4.09309 11.0647 4.16583 11.3051C4.23873 11.546 4.36746 11.7664 4.54154 11.9482ZM11.1178 2.93644L11.1546 2.8997C11.5271 2.53723 11.873 2.30559 12.2383 2.27172C12.6101 2.23723 13.0326 2.40597 13.5564 2.92977L13.556 2.9302L13.5646 2.93711C13.7647 3.09737 13.9271 3.2996 14.0404 3.52954C14.1522 3.75631 14.2135 4.00456 14.2202 4.25722C14.1341 4.6918 13.9022 5.0841 13.5628 5.36915L13.5626 5.36886L13.5564 5.37502L8.30535 10.6261C8.15048 10.7619 7.9638 10.8563 7.76267 10.9006L5.75963 11.1867L5.75959 11.1865L5.75217 11.1881C5.68812 11.2023 5.62165 11.2014 5.55801 11.1855C5.49689 11.1702 5.43998 11.1415 5.39142 11.1014C5.35139 11.0529 5.32266 10.996 5.30738 10.9348C5.29147 10.8712 5.29057 10.8047 5.30475 10.7407L5.30503 10.7407L5.3061 10.7332L5.5922 8.73051C5.63789 8.52965 5.73226 8.34309 5.867 8.18726L11.1178 2.93644Z"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+      <path
+        d="M13.2331 7.15244C13.3645 7.15363 13.4925 7.11096 13.597 7.03118C13.7014 6.95138 13.7763 6.83902 13.8097 6.7119C13.8525 6.5585 13.8329 6.3944 13.7552 6.25538C13.6773 6.11609 13.5474 6.01333 13.3939 5.9696L13.3939 5.96959C12.7089 5.77455 12.085 5.40785 11.5814 4.90422C11.0779 4.4007 10.7112 3.77699 10.5161 3.09214C10.4953 3.01647 10.4597 2.94565 10.4115 2.88375C10.3631 2.82171 10.303 2.76984 10.2345 2.73114C10.166 2.69243 10.0906 2.66765 10.0125 2.65821C9.93437 2.64878 9.85518 2.65488 9.77945 2.67616L9.77945 2.67616L9.77847 2.67644C9.62576 2.72105 9.49669 2.82385 9.41905 2.9627C9.34141 3.10156 9.32142 3.26536 9.36338 3.41881L9.36338 3.41881L9.36366 3.41982C9.61503 4.3026 10.0876 5.10659 10.7366 5.75563C11.3854 6.40434 12.1889 6.87677 13.0711 7.12823C13.1235 7.14464 13.1782 7.15281 13.2331 7.15244ZM13.2331 7.15244C13.2328 7.15243 13.2324 7.15243 13.2321 7.15243L13.2332 7.05243L13.234 7.15243C13.2337 7.15243 13.2334 7.15243 13.2331 7.15244Z"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { useTheme } from '@mui/material';
+
+export const NoteIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.3335 3.83301C5.20116 3.83213 5.07449 3.77918 4.98091 3.6856C4.88733 3.59202 4.83437 3.46535 4.8335 3.33301V1.33301C4.83437 1.20067 4.88733 1.074 4.98091 0.98042C5.07449 0.88684 5.20116 0.833881 5.3335 0.833008C5.46583 0.833881 5.5925 0.88684 5.68608 0.98042C5.77966 1.074 5.83262 1.20067 5.8335 1.33301V3.33301C5.83262 3.46535 5.77966 3.59202 5.68608 3.6856C5.5925 3.77918 5.46583 3.83213 5.3335 3.83301Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+      <path
+        d="M10.6665 3.83301C10.5342 3.83213 10.4075 3.77918 10.3139 3.6856C10.2203 3.59202 10.1674 3.46535 10.1665 3.33301V1.33301C10.1674 1.20067 10.2203 1.074 10.3139 0.98042C10.4075 0.88684 10.5342 0.833881 10.6665 0.833008C10.7988 0.833881 10.9255 0.88684 11.0191 0.98042C11.1127 1.074 11.1656 1.20067 11.1665 1.33301V3.33301C11.1656 3.46535 11.1127 3.59202 11.0191 3.6856C10.9255 3.77918 10.7988 3.83213 10.6665 3.83301Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+      <path
+        d="M9.99984 9.16699H4.6665C4.53417 9.16612 4.4075 9.11316 4.31392 9.01958C4.22034 8.926 4.16738 8.79933 4.1665 8.66699C4.16738 8.53465 4.22034 8.40798 4.31392 8.3144C4.4075 8.22082 4.53417 8.16787 4.6665 8.16699H9.99984C10.1322 8.16787 10.2588 8.22082 10.3524 8.3144C10.446 8.40798 10.499 8.53465 10.4998 8.66699C10.499 8.79933 10.446 8.926 10.3524 9.01958C10.2588 9.11316 10.1322 9.16612 9.99984 9.16699Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+      <path
+        d="M7.99984 11.833H4.6665C4.53417 11.8321 4.4075 11.7792 4.31392 11.6856C4.22034 11.592 4.16738 11.4653 4.1665 11.333C4.16738 11.2007 4.22034 11.074 4.31392 10.9804C4.4075 10.8868 4.53417 10.8339 4.6665 10.833H7.99984C8.13218 10.8339 8.25885 10.8868 8.35243 10.9804C8.446 11.074 8.49896 11.2007 8.49984 11.333C8.49896 11.4653 8.446 11.592 8.35243 11.6856C8.25885 11.7792 8.13218 11.8321 7.99984 11.833Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+      <path
+        d="M10 15.1663H6C2.25333 15.1663 1.5 13.3997 1.5 10.5463V6.43301C1.5 3.27301 2.56667 1.98634 5.30667 1.83301H10.6933C13.4333 1.98634 14.5 3.27301 14.5 6.43301V10.5463C14.5 13.3997 13.7467 15.1663 10 15.1663ZM5.33333 2.83301C3.46667 2.93967 2.5 3.52634 2.5 6.43301V10.5463C2.5 13.0997 2.98667 14.1663 6 14.1663H10C13.0133 14.1663 13.5 13.0997 13.5 10.5463V6.43301C13.5 3.53301 12.54 2.93967 10.6533 2.83301H5.33333Z"
+        fill={color}
+        stroke="#121212"
+        stroke-width="0.4"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { useTheme } from "@mui/material";
+export const RedirectIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.secondary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <mask
+        id="mask0_3703_17689"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <path d="M20 0H0V20H20V0Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_3703_17689)">
+        <g opacity="0.5">
+          <path
+            d="M13.4416 14.6884C13.4414 15.6014 13.0786 16.4769 12.4331 17.1224C11.7875 17.768 10.9121 18.1307 9.99911 18.1309H5.18078C4.26784 18.1307 3.39236 17.768 2.74681 17.1224C2.10126 16.4769 1.7385 15.6014 1.73828 14.6884L1.73828 9.86595C1.7385 8.95301 2.10126 8.07752 2.74681 7.43198C3.39236 6.78643 4.26784 6.42367 5.18078 6.42345H5.86911C6.05167 6.42345 6.22675 6.49597 6.35584 6.62506C6.48493 6.75414 6.55745 6.92922 6.55745 7.11178C6.55745 7.29434 6.48493 7.46942 6.35584 7.59851C6.22675 7.7276 6.05167 7.80012 5.86911 7.80012H5.18078C4.63336 7.80166 4.1088 8.0198 3.72172 8.40689C3.33463 8.79397 3.11649 9.31853 3.11495 9.86595V14.6884C3.11671 15.2356 3.33483 15.7598 3.72171 16.1467C4.1086 16.5336 4.63282 16.7517 5.17995 16.7534H9.99995C10.5471 16.7517 11.0713 16.5336 11.4582 16.1467C11.8451 15.7598 12.0632 15.2356 12.0649 14.6884C12.0649 14.5059 12.1375 14.3308 12.2666 14.2017C12.3956 14.0726 12.5707 14.0001 12.7533 14.0001C12.9358 14.0001 13.1109 14.0726 13.24 14.2017C13.3691 14.3308 13.4416 14.5059 13.4416 14.6884ZM17.6624 5.65928L13.9374 1.81095C13.8752 1.74539 13.8004 1.69293 13.7175 1.65665C13.6347 1.62037 13.5454 1.601 13.455 1.59968C13.3646 1.59836 13.2748 1.61512 13.1909 1.64896C13.1071 1.68281 13.0308 1.73307 12.9666 1.79678C12.9013 1.85967 12.8491 1.9349 12.813 2.0181C12.7769 2.1013 12.7577 2.19083 12.7565 2.2815C12.7552 2.37217 12.772 2.46219 12.8058 2.54635C12.8396 2.63051 12.8897 2.70713 12.9533 2.77178L16.4883 6.41678H10.6883C9.77606 6.417 8.90121 6.77919 8.25578 7.42384C7.61035 8.06848 7.24711 8.9429 7.24578 9.85512V13.2976C7.24578 13.4802 7.3183 13.6553 7.44739 13.7843C7.57648 13.9134 7.75156 13.986 7.93411 13.986C8.11667 13.986 8.29175 13.9134 8.42084 13.7843C8.54993 13.6553 8.62245 13.4802 8.62245 13.2976V9.85512C8.62508 9.30842 8.84371 8.78493 9.23068 8.39874C9.61765 8.01255 10.1416 7.79498 10.6883 7.79345H16.4883L12.9458 11.4384C12.8502 11.5351 12.7855 11.658 12.76 11.7915C12.7344 11.9249 12.7492 12.063 12.8024 12.1881C12.8555 12.3132 12.9447 12.4196 13.0585 12.4939C13.1724 12.5682 13.3057 12.6069 13.4416 12.6051C13.6276 12.6037 13.8056 12.5295 13.9374 12.3984L17.6549 8.56512C18.0411 8.17927 18.2586 7.65613 18.2599 7.11024C18.2611 6.56436 18.046 6.04022 17.6616 5.65262L17.6624 5.65928Z"
+            fill-opacity="0.7"
+            style={{
+              fill: color,
+            }}
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { useTheme } from "@mui/material";
+export const ViewIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.primary.light;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="17"
+      height="17"
+      viewBox="0 0 17 17"
+      fill="none"
+      style={{
+        stroke: color,
+      }}
+    >
+      <path
+        d="M11.4861 8.49974V8.49968C11.4861 7.90903 11.3109 7.33164 10.9828 6.84053C10.6546 6.34942 10.1882 5.96664 9.64253 5.74061C9.09683 5.51458 8.49637 5.45543 7.91706 5.57067C7.33776 5.6859 6.80563 5.97032 6.38798 6.38798C5.97032 6.80563 5.6859 7.33776 5.57067 7.91706C5.45543 8.49637 5.51458 9.09684 5.74061 9.64253C5.96664 10.1882 6.34942 10.6546 6.84053 10.9828C7.33164 11.3109 7.90903 11.4861 8.49968 11.4861H8.49974C9.29163 11.4856 10.051 11.1709 10.6109 10.6109C11.1709 10.051 11.4856 9.29163 11.4861 8.49974ZM7.50738 7.01406C7.80105 6.81773 8.14634 6.71287 8.4996 6.71275C8.97329 6.71329 9.42743 6.90167 9.76243 7.23657C10.0974 7.57149 10.2859 8.02559 10.2866 8.49929C10.2866 8.85254 10.1818 9.19785 9.98559 9.49157C9.78932 9.78533 9.51035 10.0143 9.18396 10.1495C8.85757 10.2847 8.49841 10.3201 8.15189 10.2513C7.80538 10.1824 7.48707 10.0123 7.23722 9.7625C6.98737 9.51272 6.81719 9.19446 6.7482 8.84797C6.67922 8.50147 6.71452 8.1423 6.84965 7.81587C6.98478 7.48944 7.21367 7.21041 7.50738 7.01406Z"
+        stroke-width="0.2"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+      />
+      <path
+        d="M1.91337 10.5492L1.91326 10.5492L1.91597 10.5535C3.55651 13.1219 5.95159 14.613 8.49998 14.613C11.042 14.613 13.4371 13.1218 15.0776 10.5535L15.0777 10.5536L15.0802 10.5492C15.4361 9.92477 15.6233 9.21841 15.6233 8.49966C15.6233 7.78091 15.4361 7.07455 15.0802 6.45014L15.0803 6.45007L15.0776 6.44583C13.4371 3.87748 11.0415 2.38633 8.49998 2.38633C5.95848 2.38633 3.56294 3.87748 1.91606 6.44568L1.91595 6.44561L1.91337 6.45014C1.55741 7.07455 1.37021 7.78091 1.37021 8.49966C1.37021 9.21841 1.55741 9.92477 1.91337 10.5492ZM2.93272 7.0904C4.35937 4.85317 6.38993 3.58633 8.49998 3.58633C10.61 3.58633 12.6406 4.85317 14.0672 7.09039C14.3041 7.52223 14.4283 8.00683 14.4283 8.49939C14.4283 8.99196 14.3041 9.47656 14.0672 9.9084C12.6406 12.1456 10.61 13.4125 8.49998 13.4125C6.38991 13.4125 4.35937 12.1461 2.93272 9.9084C2.69586 9.47656 2.57168 8.99196 2.57168 8.49939C2.57168 8.00683 2.69586 7.52223 2.93272 7.0904Z"
+        style={{
+          fill: color,
+          stroke: color,
+        }}
+        stroke-width="0.2"
+      />
+    </svg>
+  );
+};

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

@@ -1,60 +1,67 @@
-import { ActiveDevicesIcon } from "./IconComponents/ActiveDevicesIcon";
-import { AdministratorIcon } from "./IconComponents/AdministratorIcon";
-import { AppsIcon } from "./IconComponents/AppsIcon";
-import { BulbIcon } from "./IconComponents/BulbIcon";
-import { CampxIcon } from "./IconComponents/CampxIcon";
-import { CareerIcon } from "./IconComponents/CareerIcon";
-import { CheckedCheckboxIcon } from "./IconComponents/CheckedCheckBoxIcon";
-import { CheckedRadioIcon } from "./IconComponents/CheckedRadioIcon";
-import { ClogWheelIcon } from "./IconComponents/ClogWheelIcon";
-import { CommutexIcon } from "./IconComponents/CommutexIcon";
-import { CompletedStateIcon } from "./IconComponents/CompletedStateIcon";
-import { CrossIcon } from "./IconComponents/CrossIcon";
-import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
-import { DeviceIcon } from "./IconComponents/DeviceIcon";
-import { EnrollxIcon } from "./IconComponents/EnrollxIcon";
-import { ExamResultIcon } from "./IconComponents/ExamResultIcon";
-import { ExamxIcon } from "./IconComponents/ExamxIcon";
-import { ExportIcon } from "./IconComponents/ExportIcon";
-import { FilterIcon } from "./IconComponents/FilterIcon";
-import { HelpIcon } from "./IconComponents/HelpIcon";
-import { HomeIcon } from "./IconComponents/HomeIcon";
-import { HostelxIcon } from "./IconComponents/HostelxIcon";
-import { InfoIcon } from "./IconComponents/InfoIcon";
-import { InstitutionsIcon } from "./IconComponents/InstitutionsIcon";
-import { LeftIcon } from "./IconComponents/LeftIcon";
-import { LocationIcon } from "./IconComponents/LocationIcon";
-import { LogoutIcon } from "./IconComponents/LogoutIcon";
-import { NavigationIcon } from "./IconComponents/NavigationIcon";
-import { NotificationIcon } from "./IconComponents/NotificationIcon";
-import { PayxIcon } from "./IconComponents/PayxIcon";
-
-import { AdminIcon } from "./IconComponents/AdminIcon";
-import { ErrorFilledIcon } from "./IconComponents/AlertFilledIcon";
-import { ArrowBackIcon } from "./IconComponents/ArrowBackIcon";
-import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
-import { CollapseIcon } from "./IconComponents/CollapseIcon";
-import { CrossIcon2 } from "./IconComponents/CrossIcon2";
-import { ExpandIcon } from "./IconComponents/ExpandIcon";
-import { InfoFilledIcon } from "./IconComponents/InfoFilledIcon";
-import { PeoplexIcon } from "./IconComponents/PeoplexIcon";
-import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
-import { ProfileIcon } from "./IconComponents/ProfileIcon";
-import { RedoIcon } from "./IconComponents/RedoIcon";
-import { RightIcon } from "./IconComponents/RightIcon";
-import { SaveIcon } from "./IconComponents/SaveIcon";
-import { SearchIcon } from "./IconComponents/SearchIcon";
-import { ShareIcon } from "./IconComponents/ShareIcon";
-import { SuccessFilledIcon } from "./IconComponents/SuccessFilledIcon";
-import { TicketsIcon } from "./IconComponents/TicketsIcon";
-import { UmsIcon } from "./IconComponents/UmsIcon";
-import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
-import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
-import { VisibilityOffIcon } from "./IconComponents/VisibiityOffIcon";
-import { VisibilityIcon } from "./IconComponents/VisibilityIcon";
-import { WarningFilledIcon } from "./IconComponents/WarningFilledIcon";
+import { AcademicsIcon } from './IconComponents/AcademicIcon';
+import { AccordionArrow } from './IconComponents/AccordionArrow';
+import { ActiveDevicesIcon } from './IconComponents/ActiveDevicesIcon';
+import { AdminIcon } from './IconComponents/AdminIcon';
+import { AdministratorIcon } from './IconComponents/AdministratorIcon';
+import { ErrorFilledIcon } from './IconComponents/AlertFilledIcon';
+import { AppsIcon } from './IconComponents/AppsIcon';
+import { ArrowBackIcon } from './IconComponents/ArrowBackIcon';
+import { BulbIcon } from './IconComponents/BulbIcon';
+import { CampxFullLogoIcon } from './IconComponents/CampxFullLogoIcon';
+import { CampxIcon } from './IconComponents/CampxIcon';
+import { CareerIcon } from './IconComponents/CareerIcon';
+import { CheckedCheckboxIcon } from './IconComponents/CheckedCheckBoxIcon';
+import { CheckedRadioIcon } from './IconComponents/CheckedRadioIcon';
+import { ClogWheelIcon } from './IconComponents/ClogWheelIcon';
+import { CollapseIcon } from './IconComponents/CollapseIcon';
+import { CommutexIcon } from './IconComponents/CommutexIcon';
+import { CompletedStateIcon } from './IconComponents/CompletedStateIcon';
+import { CrossIcon } from './IconComponents/CrossIcon';
+import { CrossIcon2 } from './IconComponents/CrossIcon2';
+import { DashBoardIcon } from './IconComponents/DashBoardIcon';
+import { DeleteIcon } from './IconComponents/DeleteIcon';
+import { DeviceIcon } from './IconComponents/DeviceIcon';
+import { EditIcon } from './IconComponents/EditIcon';
+import { EnrollxIcon } from './IconComponents/EnrollxIcon';
+import { ExamResultIcon } from './IconComponents/ExamResultIcon';
+import { ExamxIcon } from './IconComponents/ExamxIcon';
+import { ExpandIcon } from './IconComponents/ExpandIcon';
+import { ExportIcon } from './IconComponents/ExportIcon';
+import { FilterIcon } from './IconComponents/FilterIcon';
+import { HelpIcon } from './IconComponents/HelpIcon';
+import { HomeIcon } from './IconComponents/HomeIcon';
+import { HostelxIcon } from './IconComponents/HostelxIcon';
+import { InfoFilledIcon } from './IconComponents/InfoFilledIcon';
+import { InfoIcon } from './IconComponents/InfoIcon';
+import { InstitutionsIcon } from './IconComponents/InstitutionsIcon';
+import { LeftIcon } from './IconComponents/LeftIcon';
+import { LocationIcon } from './IconComponents/LocationIcon';
+import { LogoutIcon } from './IconComponents/LogoutIcon';
+import { NavigationIcon } from './IconComponents/NavigationIcon';
+import { NoteIcon } from './IconComponents/NoteIcon';
+import { NotificationIcon } from './IconComponents/NotificationIcon';
+import { PayxIcon } from './IconComponents/PayxIcon';
+import { PeoplexIcon } from './IconComponents/PeoplexIcon';
+import { ProductFeaturesIcon } from './IconComponents/ProductFeaturesIcon';
+import { ProfileIcon } from './IconComponents/ProfileIcon';
+import { RedirectIcon } from './IconComponents/RedirectIcon';
+import { RedoIcon } from './IconComponents/RedoIcon';
+import { RightIcon } from './IconComponents/RightIcon';
+import { SaveIcon } from './IconComponents/SaveIcon';
+import { SearchIcon } from './IconComponents/SearchIcon';
+import { ShareIcon } from './IconComponents/ShareIcon';
+import { SuccessFilledIcon } from './IconComponents/SuccessFilledIcon';
+import { TicketsIcon } from './IconComponents/TicketsIcon';
+import { UmsIcon } from './IconComponents/UmsIcon';
+import { UnCheckedCheckboxIcon } from './IconComponents/UncheckCheckBoxIcon';
+import { UnCheckedRadioIcon } from './IconComponents/UncheckedRadioIcon';
+import { ViewIcon } from './IconComponents/ViewIcon';
+import { VisibilityOffIcon } from './IconComponents/VisibiityOffIcon';
+import { VisibilityIcon } from './IconComponents/VisibilityIcon';
+import { WarningFilledIcon } from './IconComponents/WarningFilledIcon';
 
 export const Icons = {
+  NoteIcon,
   RedoIcon,
   ArrowBackIcon,
   CollapseIcon,
@@ -77,6 +84,7 @@ export const Icons = {
   AlertFilledIcon: ErrorFilledIcon,
   CrossIcon2,
   LogoutIcon,
+  AccordionArrow,
   TicketsIcon,
   FilterIcon,
   ExportIcon,
@@ -109,4 +117,9 @@ export const Icons = {
   ShareIcon,
   SaveIcon,
   SearchIcon,
+  DeleteIcon,
+  EditIcon,
+  ViewIcon,
+  RedirectIcon,
+  AcademicsIcon,
 };