@campxdev/react-blueprint 0.1.14 → 0.1.16

package/src/themes/commonTheme.ts

@@ -3,14 +3,6 @@ import { TypographyOptions } from "@mui/material/styles/createTypography";
 import { DarkColorTokens, LightColorTokens } from "./colorTokens";
 import { customCssBaseline } from "./customCssBaseline";
 
-declare module "@mui/material/Typography" {
-  interface TypographyPropsVariantOverrides {
-    label1: true;
-    label2: true;
-    subtitle3: true;
-  }
-}
-
 export enum Theme {
   LIGHT = "light",
   DARK = "dark",
@@ -73,13 +65,6 @@ export const getCommonTheme = (mode: Theme) => {
           list: {
             minWidth: "240px",
             padding: 0,
-            "& li": {
-              borderBottom: "1212121A",
-              minHeight: "55px",
-              // ":hover": {
-              //   backgroundColor: "rgba(0, 0, 0, 0.025)",
-              // },
-            },
             "& > :last-child": {
               borderBottom: "none",
               "& li": {
@@ -91,18 +76,40 @@ export const getCommonTheme = (mode: Theme) => {
             borderRadius: "5px",
             border: `1px solid ${ColorTokens.secondary.main}`,
             marginTop: "10px",
-            boxShadow: "0px 5px 15px #0000001A",
+            boxShadow: `0px 5px 15px ${ColorTokens.secondary.main}`,
             "&::-webkit-scrollbar": {
               width: "0.5em",
               height: "0.5em",
             },
             "&::-webkit-scrollbar-thumb": {
-              backgroundColor: "rgba(0, 0, 0, 0.15)",
+              backgroundColor: ColorTokens.background.paper,
               borderRadius: "3px",
             },
           },
         },
       },
+      MuiMenuItem: {
+        styleOverrides: {
+          root: {
+            minHeight: "50px !important",
+            padding: "10px 16px",
+          },
+        },
+      },
+      MuiPagination: {
+        styleOverrides: {},
+      },
+      MuiPaginationItem: {
+        styleOverrides: {
+          root: {
+            background: ColorTokens.background.default,
+            "&.Mui-selected": {
+              background: ColorTokens.background.paper,
+              border: `1px solid ${ColorTokens.highlight.main}`,
+            },
+          },
+        },
+      },
       MuiButton: {
         defaultProps: {},
         styleOverrides: {
@@ -110,6 +117,7 @@ export const getCommonTheme = (mode: Theme) => {
             textTransform: "none",
             padding: "5px 30px ",
             maxHeight: "40px ",
+            minWidth: "250px",
             borderRadius: "5px ",
             boxShadow: "none ",
             fontSize: "14px ",
@@ -208,6 +216,9 @@ export const getCommonTheme = (mode: Theme) => {
               maxWidth: "400px",
             },
           },
+          paper: {
+            borderRadius: "10px",
+          },
         },
       },
       MuiOutlinedInput: {
@@ -235,11 +246,41 @@ export const getCommonTheme = (mode: Theme) => {
           underline: "none",
         },
       },
-      MuiFormLabel: {
+      MuiTabs: {
+        styleOverrides: {
+          root: {
+            "& .MuiTabs-flexContainer": {
+              borderBottom: `1px solid ${ColorTokens.grey.main}`,
+            },
+          },
+          indicator: {
+            display: "flex",
+            justifyContent: "center",
+            backgroundColor: "transparent",
+            height: "3px",
+            "& .MuiTabs-indicatorSpan": {
+              borderRadius: "30px",
+              width: "60%",
+              backgroundColor: ColorTokens.highlight.main,
+            },
+          },
+        },
+      },
+      MuiTab: {
+        defaultProps: {
+          disableRipple: true,
+        },
         styleOverrides: {
           root: {
+            color: ColorTokens.text.secondary,
             fontSize: "14px",
-            color: "#959595",
+            fontWeight: "600",
+            textTransform: "initial",
+            minHeight: "50px",
+            paddingBottom: "0px",
+            "&.Mui-selected": {
+              color: ColorTokens.text.primary,
+            },
           },
         },
       },

package/src/themes/darkTheme.ts

@@ -9,9 +9,8 @@ export const darkTheme = createTheme({
     secondary: DarkColorTokens.secondary,
     background: DarkColorTokens.background,
     text: DarkColorTokens.text,
-    // highlight: {
-    //   main: "#D4483E", // Highlight color for dark mode
-    // },
+    highlight: DarkColorTokens.highlight,
+    grey: DarkColorTokens.grey,
     // defaultProfileIcon: {
     //   main: "#293640", // Default profile images and icons color for dark mode
     // },

package/src/themes/lightTheme.ts

@@ -9,9 +9,8 @@ export const lightTheme = createTheme({
     secondary: LightColorTokens.secondary,
     background: LightColorTokens.background,
     text: LightColorTokens.text,
-    // highlight: {
-    //   main: "#D4483E", // Highlight color
-    // },
+    highlight: LightColorTokens.highlight,
+    grey: LightColorTokens.grey,
     // defaultProfileIcon: {
     //   main: "#BDD6E8", // Default profile images and icons color
     // },

package/src/utils/campxAxios.ts

@@ -14,7 +14,7 @@ export const campxAxios = axios.create({
   headers: {
     "x-tenant-id": tenantCode,
     ...(!isProduction
-      ? { campx_session_key: sessionKey || "6653ed32f34cbc245f22e7c8" }
+      ? { campx_session_key: sessionKey || "6658507d9912823dcae621cf" }
       : {}),
     "x-institution-id": institutionCode,
   },

package/tsconfig.json

@@ -21,7 +21,5 @@
     "types": ["node"],
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src", "./types"  ]
 }

package/types/theme.d.ts

@@ -0,0 +1,38 @@
+import "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Theme {
+    palette: {
+      primary: {
+        dark: string;
+        main: string;
+        light: string;
+      };
+      secondary: {
+        main: string;
+        light: string;
+        dark: string;
+      };
+      text: {
+        primary: string;
+        secondary: string;
+      };
+      background: {
+        paper: string;
+        default: string;
+      };
+      highlight: {
+        main: string;
+      };
+    };
+  }
+  export function createTheme(options?: CustomThemeOptions): CustomTheme;
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    label1: true;
+    label2: true;
+    subtitle3: true;
+  }
+}

package/src/assets/images/icons.tsx

@@ -1,427 +0,0 @@
-import { useTheme } from "@mui/material";
-
-export const AppsIcon = () => {
-  return (
-    <svg
-      id="apps"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-    >
-      <path
-        id="Path_15109"
-        data-name="Path 15109"
-        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
-        fill="#d4483e"
-      />
-      <path
-        id="Path_15110"
-        data-name="Path 15110"
-        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
-        fill="#f8d759"
-      />
-      <path
-        id="Path_15111"
-        data-name="Path 15111"
-        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
-        fill="#88b053"
-      />
-      <path
-        id="Path_15112"
-        data-name="Path 15112"
-        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
-        fill="#4baabe"
-      />
-    </svg>
-  );
-};
-
-export const HelpIcon = () => {
-  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"
-      viewBox="0 0 20 20"
-    >
-      <g id="message-question-2" data-name="message-question">
-        <path
-          id="Vector"
-          d="M12.5,16.667H4.1A3.877,3.877,0,0,1,0,12.593V4.074A3.893,3.893,0,0,1,4.167,0H12.5a3.893,3.893,0,0,1,4.167,4.074v8.52A3.893,3.893,0,0,1,12.5,16.667Z"
-          transform="translate(1.667 2.025)"
-          fill="none"
-          stroke={color}
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-        <path
-          id="Vector-2"
-          data-name="Vector"
-          d="M2.245,6.086V5.8A2.119,2.119,0,0,1,3.382,4,2.073,2.073,0,0,0,4.491,2.245,2.245,2.245,0,0,0,0,2.245"
-          transform="translate(7.755 5.594)"
-          fill="none"
-          stroke={color}
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-        <path
-          id="Vector-3"
-          data-name="Vector"
-          d="M0,0H20V20H0Z"
-          fill="none"
-          opacity="0"
-        />
-        <path
-          id="Vector-4"
-          data-name="Vector"
-          d="M.5.5H.508"
-          transform="translate(9.499 14.414)"
-          fill="none"
-          stroke={color}
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-      </g>
-    </svg>
-  );
-};
-
-export const NotificationIcon = () => {
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="18.125"
-        height="20"
-        viewBox="0 0 18.125 20"
-      >
-        <path
-          id="bell_10_"
-          data-name="bell (10)"
-          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
-          transform="translate(-0.986 -0.002)"
-          fill="#121212"
-        />
-      </svg>
-    </>
-  );
-};
-
-export const ExamResultIcon = () => {
-  const theme = useTheme();
-  const color = theme.palette.text.primary;
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="14.3"
-        height="20.3"
-        viewBox="0 0 15.3 20.3"
-      >
-        <path
-          id="mobile"
-          d="M13.833,0H7.167A4.172,4.172,0,0,0,3,4.167V15.833A4.172,4.172,0,0,0,7.167,20h6.667A4.172,4.172,0,0,0,18,15.833V4.167A4.172,4.172,0,0,0,13.833,0Zm2.5,15.833a2.5,2.5,0,0,1-2.5,2.5h-2.5V17.5a.833.833,0,1,0-1.667,0v.833h-2.5a2.5,2.5,0,0,1-2.5-2.5V4.167a2.5,2.5,0,0,1,2.5-2.5h6.667a2.5,2.5,0,0,1,2.5,2.5Zm-2.5-2.5a.833.833,0,0,1-.833.833H8A.833.833,0,1,1,8,12.5h5A.833.833,0,0,1,13.833,13.333Zm-5-2.5A.833.833,0,0,0,9.667,10V9.167h1.667V10A.833.833,0,0,0,13,10V6.667a2.5,2.5,0,1,0-5,0V10A.833.833,0,0,0,8.833,10.833Zm1.667-5a.833.833,0,0,1,.833.833V7.5H9.667V6.667A.833.833,0,0,1,10.5,5.833Z"
-          transform="translate(-2.85 0.15)"
-          stroke-width="0.3"
-          fill={color}
-        />
-      </svg>
-    </>
-  );
-};
-
-export const CareerIcon = () => {
-  const theme = useTheme();
-  const color = theme.palette.text.primary;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18.3"
-      height="20.3"
-      viewBox="0 0 20.3 20.3"
-    >
-      <path
-        id="briefcase"
-        d="M15.833,3.333h-.917A4.174,4.174,0,0,0,10.833,0H9.167A4.174,4.174,0,0,0,5.083,3.333H4.167A4.172,4.172,0,0,0,0,7.5v8.333A4.172,4.172,0,0,0,4.167,20H15.833A4.172,4.172,0,0,0,20,15.833V7.5a4.172,4.172,0,0,0-4.167-4.167ZM9.167,1.667h1.667A2.5,2.5,0,0,1,13.18,3.333H6.82A2.5,2.5,0,0,1,9.167,1.667ZM4.167,5H15.833a2.5,2.5,0,0,1,2.5,2.5V10H1.667V7.5A2.5,2.5,0,0,1,4.167,5ZM15.833,18.333H4.167a2.5,2.5,0,0,1-2.5-2.5V11.667h7.5V12.5a.833.833,0,0,0,1.667,0v-.833h7.5v4.167A2.5,2.5,0,0,1,15.833,18.333Z"
-        transform="translate(0.15 0.15)"
-        fill={color}
-        stroke-width="0.3"
-      />
-    </svg>
-  );
-};
-
-export const ClogWheelIcon = () => {
-  const theme = useTheme();
-  const color = theme.palette.text.primary;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16.595"
-      height="20"
-      viewBox="0 0 17.995 20"
-    >
-      <g
-        id="settings_11_"
-        data-name="settings (11)"
-        transform="translate(-1.203)"
-      >
-        <path
-          id="Path_1375"
-          data-name="Path 1375"
-          d="M11.333,8a3.333,3.333,0,1,0,3.333,3.333A3.333,3.333,0,0,0,11.333,8Zm0,5A1.667,1.667,0,1,1,13,11.333,1.667,1.667,0,0,1,11.333,13Z"
-          transform="translate(-1.133 -1.333)"
-          fill={color}
-        />
-        <path
-          id="Path_1376"
-          data-name="Path 1376"
-          d="M17.945,11.583l-.37-.213a7.583,7.583,0,0,0,0-2.742l.37-.213a2.5,2.5,0,1,0-2.5-4.333l-.371.214A7.481,7.481,0,0,0,12.7,2.927V2.5a2.5,2.5,0,1,0-5,0v.427A7.481,7.481,0,0,0,5.327,4.3l-.373-.216a2.5,2.5,0,1,0-2.5,4.333l.37.213a7.583,7.583,0,0,0,0,2.742l-.37.213a2.5,2.5,0,0,0,2.5,4.333l.371-.214A7.481,7.481,0,0,0,7.7,17.072V17.5a2.5,2.5,0,1,0,5,0v-.428A7.481,7.481,0,0,0,15.074,15.7l.373.215a2.5,2.5,0,1,0,2.5-4.333ZM15.822,8.437a5.873,5.873,0,0,1,0,3.125.833.833,0,0,0,.387.944l.9.522a.834.834,0,1,1-.833,1.444l-.9-.523a.833.833,0,0,0-1.012.138,5.82,5.82,0,0,1-2.7,1.563.833.833,0,0,0-.626.807V17.5a.833.833,0,0,1-1.667,0V16.457a.833.833,0,0,0-.626-.807,5.82,5.82,0,0,1-2.7-1.566.833.833,0,0,0-1.013-.138l-.9.523a.833.833,0,1,1-.833-1.443l.9-.522a.833.833,0,0,0,.387-.944,5.873,5.873,0,0,1,0-3.125.833.833,0,0,0-.388-.941l-.9-.522a.834.834,0,0,1,.833-1.444l.9.523a.833.833,0,0,0,1.012-.134,5.82,5.82,0,0,1,2.7-1.562.833.833,0,0,0,.626-.811V2.5a.833.833,0,1,1,1.667,0V3.543a.833.833,0,0,0,.626.808,5.82,5.82,0,0,1,2.7,1.566.833.833,0,0,0,1.012.137l.9-.522a.833.833,0,1,1,.833,1.443l-.9.522a.833.833,0,0,0-.386.941Z"
-          transform="translate(0 0)"
-          fill={color}
-        />
-      </g>
-    </svg>
-  );
-};
-
-export const RightIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    id="vuesax_linear_logout"
-    data-name="vuesax/linear/logout"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <g id="logout">
-      <g
-        id="Group_5120"
-        data-name="Group 5120"
-        transform="translate(3.614 9.381)"
-      >
-        <path
-          id="Vector"
-          d="M0,5.363,2.682,2.682,0,0"
-          transform="translate(8.045)"
-          fill="none"
-          stroke="#292d32"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-        <path
-          id="Vector-2"
-          data-name="Vector"
-          d="M0,0H10.653"
-          transform="translate(0 2.682)"
-          fill="none"
-          stroke="#292d32"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-      </g>
-      <path
-        id="Vector-3"
-        data-name="Vector"
-        d="M0,16.76A8.015,8.015,0,0,0,8.38,8.38,8.015,8.015,0,0,0,0,0"
-        transform="translate(12.246 3.62)"
-        fill="none"
-        stroke="#292d32"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.5"
-      />
-      <path
-        id="Vector-4"
-        data-name="Vector"
-        d="M0,24H24V0H0Z"
-        transform="translate(0 0)"
-        fill="none"
-        opacity="0"
-      />
-    </g>
-  </svg>
-);
-export const LeftIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <g
-      id="vuesax_linear_logout"
-      data-name="vuesax/linear/logout"
-      transform="translate(-364 -444)"
-    >
-      <g id="logout">
-        <g
-          id="Group_5120"
-          data-name="Group 5120"
-          transform="translate(373.659 453.381)"
-        >
-          <path
-            id="Vector"
-            d="M2.682,5.363,0,2.682,2.682,0"
-            transform="translate(0)"
-            fill="none"
-            stroke="#292d32"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-          <path
-            id="Vector-2"
-            data-name="Vector"
-            d="M10.653,0H0"
-            transform="translate(0.073 2.682)"
-            fill="none"
-            stroke="#292d32"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-        </g>
-        <path
-          id="Vector-3"
-          data-name="Vector"
-          d="M8.38,16.76A8.015,8.015,0,0,1,0,8.38,8.015,8.015,0,0,1,8.38,0"
-          transform="translate(367.374 447.62)"
-          fill="none"
-          stroke="#292d32"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-        <path
-          id="Vector-4"
-          data-name="Vector"
-          d="M0,0H24V24H0Z"
-          transform="translate(388 468) rotate(180)"
-          fill="none"
-          opacity="0"
-        />
-      </g>
-    </g>
-  </svg>
-);
-
-export const DashBoardIcon = () => {
-  const theme = useTheme();
-  const color = theme.palette.text.primary;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-    >
-      <g
-        id="vuesax_linear_chart-2"
-        data-name="vuesax/linear/chart-2"
-        transform="translate(-236 -188)"
-      >
-        <g id="chart-2" transform="translate(236 188)">
-          <path
-            id="Vector"
-            d="M4.667,13.333h4c3.333,0,4.667-1.333,4.667-4.667v-4C13.333,1.333,12,0,8.667,0h-4C1.333,0,0,1.333,0,4.667v4C0,12,1.333,13.333,4.667,13.333Z"
-            transform="translate(1.333 1.333)"
-            fill="none"
-            stroke={color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.2"
-          />
-          <path
-            id="Vector-2"
-            data-name="Vector"
-            d="M1.333,8.667A1.337,1.337,0,0,0,2.667,7.333v-6A1.333,1.333,0,0,0,0,1.333v6A1.333,1.333,0,0,0,1.333,8.667Z"
-            transform="translate(9 3.667)"
-            fill="none"
-            stroke={color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.2"
-          />
-          <path
-            id="Vector-3"
-            data-name="Vector"
-            d="M1.333,5A1.337,1.337,0,0,0,2.667,3.667V1.333A1.333,1.333,0,0,0,0,1.333V3.667A1.333,1.333,0,0,0,1.333,5Z"
-            transform="translate(4.333 7.333)"
-            fill="none"
-            stroke={color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.2"
-          />
-          <path
-            id="Vector-4"
-            data-name="Vector"
-            d="M0,0H16V16H0Z"
-            fill="none"
-            opacity="0"
-          />
-        </g>
-      </g>
-    </svg>
-  );
-};
-
-export const HomeIcon = () => {
-  const theme = useTheme();
-  const color = theme.palette.text.primary;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-    >
-      <g
-        id="vuesax_linear_home-2"
-        data-name="vuesax/linear/home-2"
-        transform="translate(-620 -188)"
-      >
-        <g id="home-2" transform="translate(620 188)">
-          <path
-            id="Vector"
-            d="M4.68.548l-3.593,2.8A3.172,3.172,0,0,0,0,5.562V10.5a2.817,2.817,0,0,0,2.807,2.813h7.72a2.815,2.815,0,0,0,2.807-2.807V5.655a3.149,3.149,0,0,0-1.2-2.3L8.013.468A2.991,2.991,0,0,0,4.68.548Z"
-            transform="translate(1.333 1.345)"
-            fill="none"
-            stroke={color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.2"
-          />
-          <path
-            id="Vector-2"
-            data-name="Vector"
-            d="M0,2V0"
-            transform="translate(8 9.993)"
-            fill="none"
-            stroke={color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.2"
-          />
-          <path
-            id="Vector-3"
-            data-name="Vector"
-            d="M0,0H16V16H0Z"
-            fill="none"
-            opacity="0"
-          />
-        </g>
-      </g>
-    </svg>
-  );
-};

package/src/components/DropDownMenu/MenuItemButton.tsx

@@ -1,24 +0,0 @@
-import { ListItemIcon, Typography } from "@mui/material";
-import { ReactNode } from "react";
-import { StyledMenuItem } from "./styles";
-
-export type MenuItemButtonProps = {
-  icon?: ReactNode;
-  label: ReactNode;
-  sx?: any;
-  onClick: () => void;
-};
-
-export const MenuItemButton = ({
-  icon,
-  label,
-  onClick,
-  sx = {},
-}: MenuItemButtonProps) => {
-  return (
-    <StyledMenuItem sx={sx} onClick={onClick}>
-      {icon && <ListItemIcon>{icon}</ListItemIcon>}
-      <Typography variant="subtitle3">{label}</Typography>
-    </StyledMenuItem>
-  );
-};

package/src/components/Input/Label/Label.tsx

@@ -1,11 +0,0 @@
-import { Typography } from "@mui/material";
-
-const Label = ({ label, required, name }: any) => {
-  if (typeof label !== "string") return label;
-  return (
-    <Typography htmlFor={name} component="label" variant="label1">
-      {label} {required && <span>{" *"}</span>}
-    </Typography>
-  );
-};
-export default Label;