@campxdev/react-blueprint 0.1.40 → 0.1.42

package/package.json

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

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

@@ -1,6 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const ActiveDevicesIcon = () => {
+export const ActiveDevicesIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
@@ -9,8 +9,8 @@ export const ActiveDevicesIcon = () => {
       id="Active_Devices"
       data-name="Active Devices"
       xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
+      width={size}
+      height={size}
       viewBox="0 0 16 16"
       style={{
         fill: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const AdministratorIcon = () => {
+export const AdministratorIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <>
       <svg
-        width="30"
-        height="30"
+        width={size}
+        height={size}
         viewBox="0 0 30 30"
         style={{ fill: color }}
         xmlns="http://www.w3.org/2000/svg"

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

@@ -1,10 +1,10 @@
-export const AppsIcon = () => {
+export const AppsIcon = ({ size = 32 }) => {
   return (
     <svg
       id="apps"
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
     >
       <path

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

@@ -1,14 +1,14 @@
 import { useTheme } from "@mui/material";
 
-export const BulbIcon = () => {
+export const BulbIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.highlight.highlightBlue;
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="18"
+      width={size}
+      height={size}
       viewBox="0 0 20.182 21.03"
       style={{
         fill: color,

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

@@ -2,7 +2,6 @@ import { useTheme } from "@mui/material";
 
 export const CampxFullLogoIcon = () => {
   const theme = useTheme();
-
   const color = theme.palette.mode === "dark" ? "#FFFFFF" : "#1e19f5";
 
   return (

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

@@ -1,15 +1,15 @@
 import { useTheme } from "@mui/material";
 
-export const CampxIcon = () => {
+export const CampxIcon = ({ size = 32 }) => {
   const theme = useTheme();
 
   const color = theme.palette.mode === "dark" ? "white" : "blue";
-  console.log(color);
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="32"
+      width={size}
+      height={size}
       viewBox="0 5 101.234 104.906"
       style={{
         fill: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const CareerIcon = () => {
+export const CareerIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="18.3"
-      height="20.3"
+      width={size}
+      height={size}
       viewBox="0 0 20.3 20.3"
       style={{
         fill: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const CheckedCheckboxIcon = () => {
+export const CheckedCheckboxIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 20 20"
       style={{
         fill: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const CheckedRadioIcon = () => {
+export const CheckedRadioIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 20 20"
       style={{
         fill: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const ClogWheelIcon = () => {
+export const ClogWheelIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="16.595"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 17.995 20"
       style={{
         fill: color,

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

@@ -0,0 +1,37 @@
+import { useTheme } from "@mui/material";
+
+export const CommutexIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="Group_4542"
+      data-name="Group 4542"
+      width={size}
+      height={size}
+      viewBox="0 0 290.182 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#6a2886" />
+          <stop offset="1" stop-color="#8234a4" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Union_49"
+        data-name="Union 49"
+        d="M192.681,400l-47.861-65.881L96.953,400H.975L0,399.287,135.693,212.52H.09v-25h136.26L48.761,67.083l-.02.024L0,.029.02,0H97.5l47.866,65.876L193.223,0H289.2l.98.707L154.448,187.524h135.64v25H153.867l87.549,120.4.02-.024,48.742,67.079-.02.029Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const CrossIcon = () => {
+export const CrossIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="8"
-      height="8"
+      width={size}
+      height={size}
       viewBox="0 0 8 8"
       style={{
         stroke: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const DashBoardIcon = () => {
+export const DashBoardIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 16 16"
       style={{
         stroke: color,

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

@@ -1,14 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const DeviceIcon = () => {
+export const DeviceIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <div>
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
+        width={size}
+        height={size}
         viewBox="0 0 20 20"
         style={{
           fill: color,

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

@@ -0,0 +1,35 @@
+import { useTheme } from "@mui/material";
+
+export const EnrollxIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 362.673 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#007ab1" />
+          <stop offset="1" stop-color="#149ecd" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Union_6"
+        data-name="Union 6"
+        d="M0,400H.017L0,399.971l48.484-66.726.02.027L145.335,200h95.476l.972.706L96.985,400Zm179.158-80.166L266.226,200H361.7l.972.7L276.121,319.834ZM361.7,200Zm0,0H266.228l-87.2-120.01h96.963l86.68,119.3Zm-216.367,0L48.5,66.729l-.02.027L0,.027.017,0h96.97L241.782,199.294l-.972.706ZM217.908.046h0ZM217.91.046Zm-97,0-.015-.02.02-.027h96.968l.032.042v0ZM0,0H.017Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

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

@@ -1,14 +1,14 @@
 import { useTheme } from "@mui/material";
 
-export const ExamResultIcon = () => {
+export const ExamResultIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <>
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="14.3"
-        height="20.3"
+        width={size}
+        height={size}
         viewBox="0 0 15.3 20.3"
         style={{
           fill: color,

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

@@ -0,0 +1,34 @@
+import { useTheme } from "@mui/material";
+
+export const ExamxIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="Group_4477"
+      data-name="Group 4477"
+      width={size}
+      height={size}
+      viewBox="0 0 388.283 400"
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#d86b00" />
+          <stop offset="1" stop-color="#ed9035" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Subtraction_66"
+        data-name="Subtraction 66"
+        d="M388.261,400H291.294l-.021-.027L.018,400,0,399.973l48.481-66.729.018.023L145.334,200,48.5,66.728l-.018.027L0,.03.018,0H388.264l.019.03L339.8,66.755l-.018-.027L242.943,200l96.837,133.268.018-.023,48.486,66.729-.021.026ZM153.486,77.69h0l38.344,52.8V269.442l-38.346,52.8,81.253-.052-38.286-52.746V130.491l38.286-52.749-81.251-.051Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

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

@@ -3,9 +3,11 @@ import { useTheme } from "@mui/material";
 export const ExportIcon = ({
   sx = {},
   color,
+  size = 32,
 }: {
   sx?: any;
   color?: string;
+  size?: number;
 }) => {
   const theme = useTheme();
   color = color ?? theme.palette.text.primary;
@@ -14,8 +16,8 @@ export const ExportIcon = ({
     <>
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="25"
-        height="20"
+        width={size}
+        height={size}
         viewBox="0 0 30 30"
         style={{
           fill: color,

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

@@ -2,9 +2,11 @@ import { useTheme } from "@mui/material";
 export const FilterIcon = ({
   sx = {},
   color,
+  size = 32,
 }: {
   sx?: any;
   color?: string;
+  size?: number;
 }) => {
   const theme = useTheme();
   color = color ?? theme.palette.text.primary;
@@ -13,8 +15,8 @@ export const FilterIcon = ({
       <svg
         xmlns="http://www.w3.org/2000/svg"
         id="sort"
-        width="20"
-        height="20"
+        width={size}
+        height={size}
         viewBox="0 0 20 20"
         style={{
           fill: color,

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

@@ -1,14 +1,14 @@
 import { useTheme } from "@mui/material";
 
-export const HelpIcon = () => {
+export const HelpIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       id="message-question"
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 20 20"
       style={{
         stroke: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const HomeIcon = () => {
+export const HomeIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 16 16"
       style={{
         stroke: color,

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

@@ -0,0 +1,51 @@
+import { useTheme } from "@mui/material";
+
+export const HostelxIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="Group_4511"
+      data-name="Group 4511"
+      width={size}
+      height={size}
+      viewBox="0 0 580.128 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#573dab" />
+          <stop offset="1" stop-color="#7251dd" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Subtraction_9"
+        data-name="Subtraction 9"
+        d="M99.7,205.6H.02L0,205.576l49.844-68.6.019.026L148.351,1.456l48.808,67.169.019-.027,1.034,1.423L99.7,205.6ZM248.052,1.421h0L247.019,0h.538l1,.725-.5.694Z"
+        transform="translate(141.741 194.395)"
+        fill="url(#linear-gradient)"
+      />
+      <path
+        id="Union_40"
+        data-name="Union 40"
+        d="M99.7,400H.02L0,399.968l49.846-68.594.016.024,98.491-135.549.231.316,43-59.186.02.028L290.09,1.456l.486.668.3-.417L438.488,204.88l-.1.073L530.266,331.4l.02-.024,49.842,68.594-.021.029H480.422L381.915,264.414l.039-.052-49.86-68.574-.017.024,0,0v0l-.5-.692.024-.018-9.8-13.486.129.02-31.532-43.4L241.445,205.6h-.474l-44.659,61.423L99.7,400v0ZM191.174,1.74,189.928.032,189.949,0h2.489l-1.263,1.74v0ZM389.79,1.42,388.759,0h.538l1,.728-.5.692Z"
+        fill="url(#linear-gradient)"
+      />
+      <path
+        id="Subtraction_10"
+        data-name="Subtraction 10"
+        d="M247.558,205.6H149.408L51.1,70.308l49.841-68.6L248.556,204.879l-1,.725ZM1.244,1.741h0L0,.03.019,0H2.508L1.245,1.74Z"
+        transform="translate(189.93 194.394)"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

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

@@ -1,14 +1,14 @@
 import { useTheme } from "@mui/material";
 
-export const InfoIcon = () => {
+export const InfoIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.highlight.highlightBlue;
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
+      width={size}
+      height={size}
       viewBox="0 0 18 18"
       style={{
         fill: color,

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

@@ -1,6 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const InstitutionsIcon = () => {
+export const InstitutionsIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
@@ -8,8 +8,8 @@ export const InstitutionsIcon = () => {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       id="Institutions"
-      width="16"
-      height="16"
+      width={size}
+      height={size}
       viewBox="0 0 16 16"
       style={{
         fill: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const LeftIcon = () => {
+export const LeftIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       style={{
         stroke: color,

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

@@ -1,14 +1,14 @@
 import { useTheme } from "@mui/material";
 
-export const LocationIcon = () => {
+export const LocationIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="21"
-      height="21"
+      width={size}
+      height={size}
       viewBox="0 0 20 20"
       style={{
         fill: color,

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

@@ -5,7 +5,10 @@ interface LogoutIconProps {
   hoverColor?: string;
 }
 
-export const LogoutIcon: React.FC<LogoutIconProps> = ({ hoverColor }) => {
+export const LogoutIcon: React.FC<LogoutIconProps> = (
+  { hoverColor },
+  { size = 32 }
+) => {
   const theme = useTheme();
   const [isHovered, setIsHovered] = useState(false);
   const defaultColor = theme.palette.text.primary;
@@ -13,8 +16,8 @@ export const LogoutIcon: React.FC<LogoutIconProps> = ({ hoverColor }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const NavigationIcon = () => {
+export const NavigationIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="21"
-      height="21"
+      width={size}
+      height={size}
       viewBox="0 0 30 30"
       style={{
         fill: color,

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

@@ -1,14 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const NotificationIcon = () => {
+export const NotificationIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <>
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
+        width={size}
+        height={size}
         viewBox="0 0 20 20"
         style={{
           stroke: color,

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

@@ -0,0 +1,49 @@
+import { useTheme } from "@mui/material";
+
+export const PayxIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="Group_4464"
+      data-name="Group 4464"
+      width={size}
+      height={size}
+      viewBox="0 0 281.535 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.222"
+          y1="1"
+          x2="0.787"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#88b053" />
+          <stop offset="1" stop-color="#50840b" />
+        </linearGradient>
+      </defs>
+      <g id="Group_4461" data-name="Group 4461" transform="translate(0 0)">
+        <g id="Group_4460" data-name="Group 4460">
+          <path
+            id="Subtraction_8"
+            data-name="Subtraction 8"
+            d="M99.731,205.606,248.585.725l-1-.725H149.435L49.888,137.006l-.019-.027L.026,205.577l.019.029H99.731Z"
+            transform="translate(32.95 194.394)"
+            fill="url(#linear-gradient)"
+          />
+          <path
+            id="Subtraction_8-2"
+            data-name="Subtraction 8"
+            d="M148.88,0,.026,204.881l1,.725H99.176L198.723,68.6l.019.027L248.585.029,248.566,0H148.88Z"
+            transform="translate(-0.026 0)"
+            fill="url(#linear-gradient)"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { useTheme } from "@mui/material";
+
+export const PeoplexIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 532.854 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#d0002b" />
+          <stop offset="1" stop-color="#ea4a6b" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Union_42"
+        data-name="Union 42"
+        d="M279.636,400H151.53l-.024-.038,51.2-70.468L191.03,313.422,128.13,400H.024L0,399.959,64.052,311.8l.024.035,126.57-174.2.62.853,0-.006L266.8,242.03l75.965-103.542.006.009.385-.53,189.7,261.1-1.283.932H405.438l-62.9-86.573-11.8,16.247,50.617,69.389-1.283.932H279.64Zm0,0h0ZM290.045,50.418v0a50.416,50.416,0,1,1,100.832,0v0a50.416,50.416,0,1,1-100.832,0Zm-149.881,0v0a50.417,50.417,0,0,1,100.833,0v0a50.417,50.417,0,0,1-100.833,0Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const ProductFeaturesIcon = () => {
+export const ProductFeaturesIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
+      width={size}
+      height={size}
       viewBox="0 0 16 16"
       style={{
         stroke: color,

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

@@ -1,6 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const ProfileIcon = () => {
+export const ProfileIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
@@ -10,11 +10,11 @@ export const ProfileIcon = () => {
         xmlns="http://www.w3.org/2000/svg"
         id="My_Profile"
         data-name="My Profile"
-        width="16"
-        height="16"
+        width={size}
+        height={size}
         viewBox="0 0 16 16"
         style={{
-          fill: color, // Set fill color to use the theme's primary text color
+          fill: color,
         }}
       >
         <g id="user-octagon">

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

@@ -1,6 +1,6 @@
 import { useTheme } from "@mui/material";
 
-export const RightIcon = () => {
+export const RightIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
@@ -8,8 +8,8 @@ export const RightIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
       id="vuesax_linear_logout"
       data-name="vuesax/linear/logout"
-      width="24"
-      height="24"
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       style={{
         stroke: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const TicketsIcon = () => {
+export const TicketsIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
+      width={size}
+      height={size}
       viewBox="0 0 16 16"
     >
       <g

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const UnCheckedCheckboxIcon = () => {
+export const UnCheckedCheckboxIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.secondary.main;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 20 20"
       style={{
         fill: color,

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

@@ -1,13 +1,13 @@
 import { useTheme } from "@mui/material";
 
-export const UnCheckedRadioIcon = () => {
+export const UnCheckedRadioIcon = ({ size = 32 }) => {
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 20 20"
       style={{
         fill: color,

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

@@ -0,0 +1,35 @@
+import { useTheme } from "@mui/material";
+
+export const Union4Icon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 287.642 400"
+      style={{
+        stroke: color,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="1"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#cba100" />
+          <stop offset="1" stop-color="#f8d759" />
+        </linearGradient>
+      </defs>
+      <path
+        id="Union_4"
+        data-name="Union 4"
+        d="M241.763,400h.02Zm-96.968,0-.972-1.343L142.847,400H45.879l-.015-.024L73.94,361.328l20.405-28.086.02.024.972-1.338L0,200.7l.972-.7H96.445l47.378,65.2L191.2,200l-47.373-65.2L96.445,200H.972L0,199.3,95.337,68.071l-.972-1.338-.02.024L45.864.024,45.884,0h96.963l.977,1.343L144.795,0h96.968l.02.024L193.3,66.758l-.02-.024-.972,1.338L287.642,199.3l-.967.7.967.7L192.3,331.929l.972,1.338.02-.024,48.486,66.733-.02.024ZM45.864,0h.02Z"
+        fill="url(#linear-gradient)"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { useTheme } from "@mui/material";
+
+export const XIcon = ({ size = 32 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 689.881 714.902"
+      style={{
+        stroke: color,
+      }}
+    >
+      <path
+        id="Subtraction_130"
+        data-name="Subtraction 130"
+        d="M-3274.271-9547.1h-168.235l-99.271-136.635,86.525-119.091,184.132,253.437-3.152,2.289Zm-515.342,0h-168.234l-3.152-2.289,258.416-355.679L-3961-10260.741l1.733-1.259h170.4l172.806,237.845.035-.048,86.524,119.09-.035.049.12.164-86.525,119.091-.118-.162L-3789.613-9547.1h0Zm333.661-459.245h0l-86.525-119.091,99.222-136.567h170.4l1.733,1.259-184.833,254.4Z"
+        transform="translate(3961 10262)"
+        fill="#1e1ef5"
+      />
+    </svg>
+  );
+};

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

@@ -1,35 +1,43 @@
 import { ActiveDevicesIcon } from "./IconComponents/ActiveDevicesIcon";
+import { AdministratorIcon } from "./IconComponents/AdministratorIcon";
 import { AppsIcon } from "./IconComponents/AppsIcon";
+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 { CommutexIcon } from "./IconComponents/CommutexIcon";
+import { CrossIcon } from "./IconComponents/CrossIcon";
 import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
 import { DeviceIcon } from "./IconComponents/DeviceIcon";
+import { EnrollxIcon } from "./IconComponents/EnrollIcon";
 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 { BulbIcon } from "./IconComponents/BulbIcon";
-import { CampxIcon } from "./IconComponents/CampxIcon";
-import { CrossIcon } from "./IconComponents/CrossIcon";
 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 { PeoplexIcon } from "./IconComponents/PeoplexIcon";
 import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
 import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
-import { AdministratorIcon } from "./IconComponents/AdministratorIcon";
-import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
+import { Union4Icon } from "./IconComponents/Union4Icon";
+import { XIcon } from "./IconComponents/XIcon";
+
 export const Icons = {
   AppsIcon,
   CareerIcon,
@@ -62,4 +70,12 @@ export const Icons = {
   CampxIcon,
   AdministratorIcon,
   CampxFullLogoIcon,
+  CommutexIcon,
+  EnrollxIcon,
+  PeoplexIcon,
+  PayxIcon,
+  HostelxIcon,
+  ExamxIcon,
+  Union4Icon,
+  XIcon,
 };

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -32,7 +32,7 @@ export const AppHeader = ({
             alert("help button clicked");
           }}
         >
-          <HelpIcon />
+          <HelpIcon size={24} />
         </StyledIconButton>
         <UserBox fullName={userFullName} actions={[]} />
       </Stack>

package/src/components/Navigation/DropDownMenu/DropDownMenu.tsx

@@ -1,5 +1,5 @@
 import { Divider, Menu, MenuListProps, MenuProps } from "@mui/material";
-import { ReactNode, useState } from "react";
+import { Fragment, ReactNode, useState } from "react";
 
 export type DropdownMenuProps = {
   anchor: (props: { open: (e: any) => void }) => ReactNode;
@@ -53,10 +53,10 @@ export const DropdownMenu = ({
         {...menuProps}
       >
         {menu.map((item, index) => (
-          <>
+          <Fragment key={index}>
             {item}
             <Divider flexItem sx={{ margin: "0 !important" }} />
-          </>
+          </Fragment>
         ))}
       </Menu>
     </>