@campxdev/react-blueprint 0.1.40 → 0.1.41

package/package.json

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

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

@@ -1,6 +1,8 @@
 import { useTheme } from "@mui/material";
 
+
 export const ActiveDevicesIcon = () => {
+  const size = 32
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
@@ -9,8 +11,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,14 @@
 import { useTheme } from "@mui/material";
 
 export const AdministratorIcon = () => {
+  const 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,12 @@
 export const AppsIcon = () => {
+  const 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,15 @@
 import { useTheme } from "@mui/material";
 
 export const BulbIcon = () => {
+  const 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/CampxIcon.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from "@mui/material";
 
 export const CampxIcon = () => {
+  const size = 32;
   const theme = useTheme();
 
   const color = theme.palette.mode === "dark" ? "white" : "blue";
@@ -8,8 +9,8 @@ export const CampxIcon = () => {
   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,14 @@
 import { useTheme } from "@mui/material";
 
 export const CareerIcon = () => {
+  const 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,14 @@
 import { useTheme } from "@mui/material";
 
 export const CheckedCheckboxIcon = () => {
+  const 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,14 @@
 import { useTheme } from "@mui/material";
 
 export const CheckedRadioIcon = () => {
+  const 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,14 @@
 import { useTheme } from "@mui/material";
 
 export const ClogWheelIcon = () => {
+  const 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/CrossIcon.tsx

@@ -1,13 +1,14 @@
 import { useTheme } from "@mui/material";
 
 export const CrossIcon = () => {
+  const 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,14 @@
 import { useTheme } from "@mui/material";
 
 export const DashBoardIcon = () => {
+  const 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,15 @@
 import { useTheme } from "@mui/material";
 
 export const DeviceIcon = () => {
+  const 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/ExamResultIcon.tsx

@@ -1,14 +1,15 @@
 import { useTheme } from "@mui/material";
 
 export const ExamResultIcon = () => {
+  const 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/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,15 @@
 import { useTheme } from "@mui/material";
 
 export const HelpIcon = () => {
+  const 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,14 @@
 import { useTheme } from "@mui/material";
 
 export const HomeIcon = () => {
+  const 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/InfoIcon.tsx

@@ -1,14 +1,15 @@
 import { useTheme } from "@mui/material";
 
 export const InfoIcon = () => {
+  const 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,7 @@
 import { useTheme } from "@mui/material";
 
 export const InstitutionsIcon = () => {
+  const size = 32;
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
@@ -8,8 +9,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,14 @@
 import { useTheme } from "@mui/material";
 
 export const LeftIcon = () => {
+  const 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,15 @@
 import { useTheme } from "@mui/material";
 
 export const LocationIcon = () => {
+  const 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

@@ -6,6 +6,7 @@ interface LogoutIconProps {
 }
 
 export const LogoutIcon: React.FC<LogoutIconProps> = ({ hoverColor }) => {
+  const size = 32;
   const theme = useTheme();
   const [isHovered, setIsHovered] = useState(false);
   const defaultColor = theme.palette.text.primary;
@@ -13,8 +14,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,14 @@
 import { useTheme } from "@mui/material";
 
 export const NavigationIcon = () => {
+  const 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,15 @@
 import { useTheme } from "@mui/material";
 
 export const NotificationIcon = () => {
+  const 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/ProductFeaturesIcon.tsx

@@ -1,13 +1,14 @@
 import { useTheme } from "@mui/material";
 
 export const ProductFeaturesIcon = () => {
+  const 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,7 @@
 import { useTheme } from "@mui/material";
 
 export const ProfileIcon = () => {
+  const size = 32;
   const theme = useTheme();
   const color = theme.palette.text.primary;
 
@@ -10,8 +11,8 @@ 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

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

@@ -1,6 +1,7 @@
 import { useTheme } from "@mui/material";
 
 export const RightIcon = () => {
+  const size = 32;
   const theme = useTheme();
   const color = theme.palette.text.primary;
   return (
@@ -8,8 +9,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,14 @@
 import { useTheme } from "@mui/material";
 
 export const TicketsIcon = () => {
+  const 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,14 @@
 import { useTheme } from "@mui/material";
 
 export const UnCheckedCheckboxIcon = () => {
+  const 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,14 @@
 import { useTheme } from "@mui/material";
 
 export const UnCheckedRadioIcon = () => {
+  const 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/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>
     </>