@campxdev/react-blueprint 0.1.21 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/DataDisplay/DataTable/TablePagination.tsx

@@ -3,9 +3,9 @@ import {
   PaginationProps as MuiPaginationProps,
   Stack,
 } from "@mui/material";
-import { DropdownMenuItem } from "../../DropDownMenu/DropdownMenuItem";
-import { Typography } from "../../Typography/Typography";
+import { DropdownMenuItem } from "../../Navigation/DropDownMenu/DropdownMenuItem";
 import { DropDownButton, DropdownMenu } from "../../export";
+import { Typography } from "../Typography/Typography";
 
 export type PaginationProps = {
   limit: number;
@@ -26,7 +26,9 @@ export const TablePagination = (props: PaginationProps) => {
       width="100%"
       padding="10px 30px"
     >
-      <Typography variant="caption">{`Showing ${offset + 1} - ${offset + limit} rows of ${totalCount}`}</Typography>
+      <Typography variant="caption">{`Showing ${offset + 1} - ${
+        offset + limit
+      } rows of ${totalCount}`}</Typography>
       <MuiPagination
         {...props}
         variant="outlined"

package/src/components/FeedBack/Spinner/Spinner.css

@@ -0,0 +1,32 @@
+.spinner {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+  scale: 0.4;
+}
+.spinner::before , .spinner::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid #7D60D9;
+  animation: prixClipFix 1.5s linear infinite ;
+}
+.spinner::after{
+  transform: rotate3d(90, 90, 0, 180deg );
+  border-color: #FF3D00;
+}
+
+@keyframes rotate {
+  0%   {transform: rotate(0deg)}
+  100%   {transform: rotate(360deg)}
+}
+
+@keyframes prixClipFix {
+    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+}

package/src/components/{Layout → FeedBack}/Spinner/Spinner.stories.tsx

@@ -17,4 +17,4 @@ export default {
 export const Primary = {
   render: (args: any) => <Spinner {...args} />,
   args: {},
-};
+};

package/src/components/{Layout → FeedBack}/Spinner/Spinner.tsx

@@ -2,4 +2,4 @@ import "./Spinner.css";
 
 export const Spinner = () => {
   return <div className="spinner"></div>;
-};
+};

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

@@ -0,0 +1,65 @@
+import { useTheme } from "@mui/material";
+
+export const ActiveDevicesIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      id="Active_Devices"
+      data-name="Active Devices"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      style={{
+        fill: color,
+      }}
+    >
+      <g id="monitor-mobbile">
+        <path
+          id="Vector"
+          d="M5.706,10.382H3.235C.756,10.382,0,9.625,0,7.147V3.235C0,.756.756,0,3.235,0H10.1c2.478,0,3.235.756,3.235,3.235a.489.489,0,0,1-.978,0c0-1.917-.339-2.256-2.256-2.256H3.235C1.317.978.978,1.317.978,3.235V7.147c0,1.917.339,2.256,2.256,2.256H5.706a.489.489,0,1,1,0,.978Z"
+          transform="translate(0.99 1.335)"
+        />
+        <path
+          id="Vector-2"
+          data-name="Vector"
+          d="M.489,3.932A.493.493,0,0,1,0,3.443V.489A.493.493,0,0,1,.489,0,.493.493,0,0,1,.978.489V3.443A.488.488,0,0,1,.489,3.932Z"
+          transform="translate(6.207 10.732)"
+        />
+        <path
+          id="Vector-3"
+          data-name="Vector"
+          d="M5.359,1H.459A.484.484,0,0,1,0,.5.484.484,0,0,1,.459,0h4.9a.484.484,0,0,1,.459.5A.484.484,0,0,1,5.359,1Z"
+          transform="translate(1.367 8.133)"
+        />
+        <path
+          id="Vector-4"
+          data-name="Vector"
+          d="M2.615.978H.489A.493.493,0,0,1,0,.489.493.493,0,0,1,.489,0H2.615A.493.493,0,0,1,3.1.489.493.493,0,0,1,2.615.978Z"
+          transform="translate(4.081 13.687)"
+        />
+        <path
+          id="Vector-5"
+          data-name="Vector"
+          d="M4.735,8.562H2.419C.613,8.562,0,7.949,0,6.143V2.419C0,.613.613,0,2.419,0H4.735C6.541,0,7.154.613,7.154,2.419V6.143C7.154,7.956,6.541,8.562,4.735,8.562ZM2.419.978C1.141.978.978,1.141.978,2.419V6.143c0,1.278.163,1.441,1.441,1.441H4.735c1.278,0,1.441-.163,1.441-1.441V2.419c0-1.278-.163-1.441-1.441-1.441Z"
+          transform="translate(7.856 6.102)"
+        />
+        <path
+          id="Vector-6"
+          data-name="Vector"
+          d="M.652,1.3a.657.657,0,0,1-.463-.189A.644.644,0,0,1,.052.9.709.709,0,0,1,0,.65.658.658,0,0,1,.189.193.68.68,0,0,1,.783.011L.9.05c.039.02.078.039.111.059A.647.647,0,0,1,1.3.65.709.709,0,0,1,1.252.9a.644.644,0,0,1-.137.209.4.4,0,0,1-.1.078A.619.619,0,0,1,.9,1.256a.788.788,0,0,1-.117.033A.444.444,0,0,1,.652,1.3Z"
+          transform="translate(10.804 11.244)"
+        />
+        <path
+          id="Vector-7"
+          data-name="Vector"
+          d="M0,0H16V16H0Z"
+          fill="none"
+          opacity="0"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { useTheme } from "@mui/material";
+
+export const CheckedCheckboxIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="Group_9716"
+        data-name="Group 9716"
+        transform="translate(-130 -30.299)"
+      >
+        <g
+          id="Rectangle_23617"
+          data-name="Rectangle 23617"
+          transform="translate(130 30.299)"
+          fill="#f8f8f8"
+          stroke="#323167"
+          stroke-width="1"
+        >
+          <rect width="20" height="20" rx="3" stroke="none" />
+          <rect x="0.5" y="0.5" width="19" height="19" rx="2.5" fill="none" />
+        </g>
+        <rect
+          id="Rectangle_23618"
+          data-name="Rectangle 23618"
+          width="8"
+          height="8"
+          rx="1"
+          transform="translate(136 36.299)"
+          fill="#323167"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { useTheme } from "@mui/material";
+
+export const CheckedRadioIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="Group_9717"
+        data-name="Group 9717"
+        transform="translate(-0.5 -29.5)"
+      >
+        <g
+          id="Rectangle_23801"
+          data-name="Rectangle 23801"
+          transform="translate(0.5 29.5)"
+          fill="#f8f8f8"
+          stroke="#323167"
+          stroke-width="1"
+        >
+          <rect width="20" height="20" rx="10" stroke="none" />
+          <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="none" />
+        </g>
+        <rect
+          id="Rectangle_23802"
+          data-name="Rectangle 23802"
+          width="8"
+          height="8"
+          rx="4"
+          transform="translate(6.5 35.5)"
+          fill="#323167"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,58 @@
+import { useTheme } from "@mui/material";
+
+export const DeviceIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        style={{
+          fill: color,
+        }}
+      >
+        <g
+          id="vuesax_outline_monitor"
+          data-name="vuesax/outline/monitor"
+          transform="translate(-428 -188)"
+        >
+          <g id="monitor" transform="translate(428 188)">
+            <path
+              id="Vector"
+              d="M13.592,13.933H4.325C1.008,13.933,0,12.925,0,9.608V4.325C0,1.008,1.008,0,4.325,0h9.258c3.317,0,4.325,1.008,4.325,4.325V9.6C17.917,12.925,16.908,13.933,13.592,13.933ZM4.325,1.25c-2.617,0-3.075.458-3.075,3.075V9.6c0,2.617.458,3.075,3.075,3.075h9.258c2.617,0,3.075-.458,3.075-3.075V4.325c0-2.617-.458-3.075-3.075-3.075Z"
+              transform="translate(1.042 1.042)"
+            />
+            <path
+              id="Vector-2"
+              data-name="Vector"
+              d="M.625,5.233A.63.63,0,0,1,0,4.608V.625A.63.63,0,0,1,.625,0,.63.63,0,0,1,1.25.625V4.608A.63.63,0,0,1,.625,5.233Z"
+              transform="translate(9.375 13.725)"
+            />
+            <path
+              id="Vector-3"
+              data-name="Vector"
+              d="M17.292,1.25H.625A.63.63,0,0,1,0,.625.63.63,0,0,1,.625,0H17.292a.63.63,0,0,1,.625.625A.63.63,0,0,1,17.292,1.25Z"
+              transform="translate(1.042 10.208)"
+            />
+            <path
+              id="Vector-4"
+              data-name="Vector"
+              d="M8.125,1.25H.625A.63.63,0,0,1,0,.625.63.63,0,0,1,.625,0h7.5A.63.63,0,0,1,8.75.625.63.63,0,0,1,8.125,1.25Z"
+              transform="translate(5.625 17.708)"
+            />
+            <path
+              id="Vector-5"
+              data-name="Vector"
+              d="M0,0H20V20H0Z"
+              fill="none"
+              opacity="0"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+};

package/src/components/Icons/IconComponents/ExportIcon.tsx

@@ -1,8 +1,14 @@
 import { useTheme } from "@mui/material";
 
-export const ExportIcon = () => {
+export const ExportIcon = ({
+  sx = {},
+  color,
+}: {
+  sx?: any;
+  color?: string;
+}) => {
   const theme = useTheme();
-  const color = theme.palette.text.primary;
+  color = color ?? theme.palette.text.primary;
 
   return (
     <>
@@ -13,6 +19,7 @@ export const ExportIcon = () => {
         viewBox="0 0 30 30"
         style={{
           fill: color,
+          ...sx,
         }}
       >
         <g

package/src/components/Icons/IconComponents/FilterIcon.tsx

@@ -1,7 +1,13 @@
 import { useTheme } from "@mui/material";
-export const FilterIcon = () => {
+export const FilterIcon = ({
+  sx = {},
+  color,
+}: {
+  sx?: any;
+  color?: string;
+}) => {
   const theme = useTheme();
-  const color = theme.palette.text.primary;
+  color = color ?? theme.palette.text.primary;
   return (
     <>
       <svg
@@ -12,6 +18,7 @@ export const FilterIcon = () => {
         viewBox="0 0 20 20"
         style={{
           fill: color,
+          ...sx,
         }}
       >
         <path

package/src/components/Icons/IconComponents/InfoIcon.tsx

@@ -0,0 +1,42 @@
+import { useTheme } from "@mui/material";
+
+export const InfoIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      style={{
+        fill: color,
+      }}
+    >
+      <g id="info_3_" data-name="info (3)" opacity="0.7">
+        <g id="Group_9534" data-name="Group 9534">
+          <g id="Group_9533" data-name="Group 9533">
+            <path
+              id="Path_38720"
+              data-name="Path 38720"
+              d="M201.062,218.823a.874.874,0,0,1-.527-.118.548.548,0,0,1-.151-.449,2.345,2.345,0,0,1,.049-.409,4.5,4.5,0,0,1,.106-.458l.482-1.659a2.509,2.509,0,0,0,.1-.5c0-.184.024-.311.024-.384a1.075,1.075,0,0,0-.38-.854,1.6,1.6,0,0,0-1.079-.327,2.8,2.8,0,0,0-.817.135q-.433.135-.911.323l-.139.539c.094-.033.208-.069.339-.11a1.388,1.388,0,0,1,.384-.057.785.785,0,0,1,.519.127.593.593,0,0,1,.135.445,1.941,1.941,0,0,1-.045.409q-.043.215-.11.454l-.486,1.667q-.059.232-.094.47a2.93,2.93,0,0,0-.029.409,1.066,1.066,0,0,0,.409.846,1.634,1.634,0,0,0,1.095.335,2.52,2.52,0,0,0,.817-.118q.347-.118.927-.339l.131-.515a2.254,2.254,0,0,1-.323.106A1.547,1.547,0,0,1,201.062,218.823Z"
+              transform="translate(-190.861 -206.143)"
+            />
+            <path
+              id="Path_38721"
+              data-name="Path 38721"
+              d="M250.533,128.3a1.243,1.243,0,0,0-1.634,0,.977.977,0,0,0,0,1.479,1.226,1.226,0,0,0,1.634,0,.981.981,0,0,0,0-1.479Z"
+              transform="translate(-239.82 -123.489)"
+            />
+            <path
+              id="Path_38722"
+              data-name="Path 38722"
+              d="M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0ZM9,17.182A8.182,8.182,0,1,1,17.182,9,8.182,8.182,0,0,1,9,17.182Z"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/InstitutionsIcon.tsx

@@ -0,0 +1,76 @@
+import { useTheme } from "@mui/material";
+
+export const InstitutionsIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      id="Institutions"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      style={{
+        fill: color,
+      }}
+    >
+      <g id="bank">
+        <path
+          id="Vector"
+          d="M12.309,6.483H1.091A1.1,1.1,0,0,1,0,5.392V3.323a1.133,1.133,0,0,1,.686-1.01L6.295.07a1.205,1.205,0,0,1,.81,0l5.609,2.244a1.141,1.141,0,0,1,.686,1.01V5.392A1.1,1.1,0,0,1,12.309,6.483ZM6.7.93a.174.174,0,0,0-.062.006L1.035,3.18a.235.235,0,0,0-.1.143V5.392a.154.154,0,0,0,.156.156H12.309a.154.154,0,0,0,.156-.156V3.323a.212.212,0,0,0-.1-.143L6.756.936A.139.139,0,0,0,6.7.93Z"
+          transform="translate(1.3 1.363)"
+        />
+        <path
+          id="Vector-2"
+          data-name="Vector"
+          d="M12.932,3.428H.467A.471.471,0,0,1,0,2.96V1.091A1.1,1.1,0,0,1,1.091,0H12.309A1.1,1.1,0,0,1,13.4,1.091V2.96A.471.471,0,0,1,12.932,3.428Zm-12-.935h11.53v-1.4a.154.154,0,0,0-.156-.156H1.091a.154.154,0,0,0-.156.156Z"
+          transform="translate(1.3 11.274)"
+        />
+        <path
+          id="Vector-3"
+          data-name="Vector"
+          d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
+          transform="translate(2.547 6.911)"
+        />
+        <path
+          id="Vector-4"
+          data-name="Vector"
+          d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
+          transform="translate(5.04 6.911)"
+        />
+        <path
+          id="Vector-5"
+          data-name="Vector"
+          d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
+          transform="translate(7.533 6.911)"
+        />
+        <path
+          id="Vector-6"
+          data-name="Vector"
+          d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
+          transform="translate(10.025 6.911)"
+        />
+        <path
+          id="Vector-7"
+          data-name="Vector"
+          d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
+          transform="translate(12.518 6.911)"
+        />
+        <path
+          id="Vector-8"
+          data-name="Vector"
+          d="M14.178.935H.467A.471.471,0,0,1,0,.467.471.471,0,0,1,.467,0H14.178a.471.471,0,0,1,.467.467A.471.471,0,0,1,14.178.935Z"
+          transform="translate(0.677 13.767)"
+        />
+        <path
+          id="Vector-9"
+          data-name="Vector"
+          d="M1.4,2.8A1.4,1.4,0,1,1,2.8,1.4,1.4,1.4,0,0,1,1.4,2.8Zm0-1.87A.467.467,0,1,0,1.87,1.4.471.471,0,0,0,1.4.935Z"
+          transform="translate(6.598 3.484)"
+        />
+        <path id="Vector-10" data-name="Vector" d="M0,0H16V16H0Z" opacity="0" />
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/LocationIcon.tsx

@@ -0,0 +1,50 @@
+import { useTheme } from "@mui/material";
+
+export const LocationIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="21"
+      viewBox="0 0 20 20"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="vuesax_outline_location"
+        data-name="vuesax/outline/location"
+        transform="translate(-428 -188)"
+        // opacity="0.7"
+      >
+        <g id="location" transform="translate(428 188)">
+          <path
+            id="Vector"
+            d="M3.225,6.442A3.221,3.221,0,1,1,6.45,3.225,3.227,3.227,0,0,1,3.225,6.442Zm0-5.192A1.975,1.975,0,1,0,5.2,3.225,1.979,1.979,0,0,0,3.225,1.25Z"
+            transform="translate(6.775 5.367)"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M7.814,17.925a4.976,4.976,0,0,1-3.442-1.392C1.914,14.167-.8,10.392.222,5.9A7.6,7.6,0,0,1,7.814,0h.008a7.6,7.6,0,0,1,7.592,5.908c1.017,4.492-1.7,8.258-4.158,10.625A4.976,4.976,0,0,1,7.814,17.925Zm0-16.675A6.293,6.293,0,0,0,1.447,6.175c-.9,3.925,1.567,7.308,3.8,9.45a3.688,3.688,0,0,0,5.142,0c2.225-2.142,4.692-5.525,3.808-9.45A6.317,6.317,0,0,0,7.814,1.25Z"
+            transform="translate(2.186 1.042)"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Vector-3"
+            data-name="Vector"
+            d="M0,0H20V20H0Z"
+            fill="none"
+            opacity="0"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/NavigationIcon.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from "@mui/material";
+
+export const NavigationIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="21"
+      viewBox="0 0 30 30"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="Mask_Group_125"
+        data-name="Mask Group 125"
+        transform="translate(-847 -594)"
+        clipPath="url(#clip-path)"
+      >
+        <path
+          id="share-square"
+          d="M17.555,19.621a5.165,5.165,0,0,1-5.163,5.163H5.163A5.165,5.165,0,0,1,0,19.621V12.392A5.165,5.165,0,0,1,5.163,7.229H6.2a1.033,1.033,0,0,1,0,2.065H5.163a3.107,3.107,0,0,0-3.1,3.1v7.229a3.107,3.107,0,0,0,3.1,3.1h7.229a3.107,3.107,0,0,0,3.1-3.1,1.033,1.033,0,1,1,2.065,0Zm6.33-13.538L18.3.31A1.019,1.019,0,0,0,16.843.289a1.029,1.029,0,0,0-.021,1.456L22.13,7.219H13.425a5.165,5.165,0,0,0-5.163,5.163v5.163a1.033,1.033,0,0,0,2.065,0V12.382a3.107,3.107,0,0,1,3.1-3.1h8.7l-5.308,5.473a1.027,1.027,0,0,0,.744,1.745,1.066,1.066,0,0,0,.744-.31l5.576-5.752a3.1,3.1,0,0,0,.01-4.368Z"
+          transform="translate(849.609 596.406)"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/ProfileIcon.tsx

@@ -0,0 +1,49 @@
+import { useTheme } from "@mui/material";
+
+export const ProfileIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        id="My_Profile"
+        data-name="My Profile"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        style={{
+          fill: color, // Set fill color to use the theme's primary text color
+        }}
+      >
+        <g id="user-octagon">
+          <path
+            id="Vector"
+            d="M6.56,14.337a2.585,2.585,0,0,1-1.3-.347L1.3,11.7A2.618,2.618,0,0,1,0,9.45V4.89A2.618,2.618,0,0,1,1.3,2.637L5.26.35a2.589,2.589,0,0,1,2.6,0l3.96,2.287a2.618,2.618,0,0,1,1.3,2.253V9.45a2.618,2.618,0,0,1-1.3,2.253L7.86,13.99A2.585,2.585,0,0,1,6.56,14.337ZM6.56,1a1.634,1.634,0,0,0-.8.213L1.8,3.5A1.6,1.6,0,0,0,1,4.89V9.45a1.612,1.612,0,0,0,.8,1.387l3.96,2.287a1.6,1.6,0,0,0,1.6,0l3.96-2.287a1.6,1.6,0,0,0,.8-1.387V4.89a1.612,1.612,0,0,0-.8-1.387L7.36,1.217A1.634,1.634,0,0,0,6.56,1Z"
+            transform="translate(1.44 0.83)"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M2.053,4.107A2.053,2.053,0,1,1,4.107,2.053,2.054,2.054,0,0,1,2.053,4.107ZM2.053,1A1.053,1.053,0,1,0,3.107,2.053,1.056,1.056,0,0,0,2.053,1Z"
+            transform="translate(5.947 3.727)"
+          />
+          <path
+            id="Vector-3"
+            data-name="Vector"
+            d="M5.833,3.173a.5.5,0,0,1-.5-.5A1.974,1.974,0,0,0,3.167,1,1.974,1.974,0,0,0,1,2.673a.5.5,0,0,1-.5.5.5.5,0,0,1-.5-.5A2.955,2.955,0,0,1,3.167,0,2.955,2.955,0,0,1,6.333,2.673.5.5,0,0,1,5.833,3.173Z"
+            transform="translate(4.833 8.433)"
+          />
+          <path
+            id="Vector-4"
+            data-name="Vector"
+            d="M0,0H16V16H0Z"
+            fill="none"
+            opacity="0"
+          />
+        </g>
+      </svg>
+    </>
+  );
+};

package/src/components/Icons/IconComponents/TooltipIcon.tsx

@@ -0,0 +1,26 @@
+import { useTheme } from "@mui/material";
+
+export const TooltipIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20.182"
+      height="21.03"
+      viewBox="0 0 20.182 21.03"
+      style={{
+        fill: color,
+      }}
+    >
+      <g id="light-bulb" transform="translate(-9.8)" opacity="0.7">
+        <path
+          id="XMLID_49_"
+          d="M22.288,18.377v.614a.975.975,0,0,1-.826.965l-.151.558a.7.7,0,0,1-.671.515h-1.5a.7.7,0,0,1-.671-.515l-.147-.558a.979.979,0,0,1-.831-.969v-.614a.591.591,0,0,1,.593-.593H21.7A.6.6,0,0,1,22.288,18.377ZM25.071,10.1a5.155,5.155,0,0,1-1.454,3.6,4.751,4.751,0,0,0-1.272,2.579.857.857,0,0,1-.848.723H18.281a.848.848,0,0,1-.844-.718,4.8,4.8,0,0,0-1.281-2.588A5.18,5.18,0,1,1,25.071,10.1Zm-4.6-3.137a.584.584,0,0,0-.584-.584,3.742,3.742,0,0,0-3.739,3.739.584.584,0,1,0,1.168,0,2.573,2.573,0,0,1,2.57-2.57A.582.582,0,0,0,20.475,6.958Zm-.584-3.743a.584.584,0,0,0,.584-.584V.584a.584.584,0,1,0-1.168,0V2.631A.584.584,0,0,0,19.891,3.215Zm-6.876,6.876a.584.584,0,0,0-.584-.584H10.384a.584.584,0,1,0,0,1.168h2.047A.582.582,0,0,0,13.015,10.091ZM29.4,9.507H27.351a.584.584,0,1,0,0,1.168H29.4a.584.584,0,1,0,0-1.168ZM14.205,14.955l-1.45,1.45a.583.583,0,0,0,.822.826l1.45-1.45a.583.583,0,0,0-.822-.826ZM25.166,5.4a.583.583,0,0,0,.411-.169l1.45-1.45a.584.584,0,1,0-.826-.826l-1.45,1.45a.582.582,0,0,0,0,.826A.593.593,0,0,0,25.166,5.4ZM14.205,5.227a.583.583,0,0,0,.822-.826l-1.45-1.45a.584.584,0,0,0-.826.826Zm11.372,9.727a.584.584,0,0,0-.826.826l1.45,1.45a.583.583,0,1,0,.822-.826Z"
+          transform="translate(0)"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/UncheckCheckBoxIcon.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from "@mui/material";
+
+export const UnCheckedCheckboxIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.secondary.main;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="Rectangle_23614"
+        data-name="Rectangle 23614"
+        fill="#f8f8f8"
+        stroke="rgba(18,18,18,0.1)"
+        stroke-width="1"
+      >
+        <rect width="20" height="20" rx="3" stroke="none" />
+        <rect x="0.5" y="0.5" width="19" height="19" rx="2.5" fill="none" />
+      </g>
+    </svg>
+  );
+};