@campxdev/react-blueprint 0.1.39 → 0.1.41

package/package.json

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

package/src/App.tsx

@@ -1,5 +1,5 @@
 import "./App.css";
-import { AppHeader, AppsMenu } from "./components/export";
+import { AppHeader } from "./components/export";
 import Providers from "./contexts/Providers";
 
 function App() {
@@ -8,7 +8,6 @@ function App() {
       <AppHeader
         clientName="Anurag University"
         actions={[<p>asdjflsf</p>]}
-        appsMenu={<AppsMenu apps={["exams", "square", "admin"]} />}
         userFullName="Srikanth Yellapragada"
         collapsed={false}
       />

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/Layout/AppHeader/styles/styles.tsx

@@ -1,19 +1,17 @@
 import { Box, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 
-const sidebarWidth = { collapsed: "60px", expanded: "240px" };
-
 export const StyledHeader = styled("header")(
-  ({ theme, collapsed }: { theme?: any; collapsed: boolean }) => ({
+  ({ theme }: { theme?: any; collapsed: boolean }) => ({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     height: "60px",
+    width: "100%",
     backgroundColor: theme.palette.background.paper,
     justifyContent: "space-between",
     padding: "0 32px",
     borderRadius: "8px",
-    marginTop: "12px",
   })
 );
 

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>
     </>

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -65,7 +65,7 @@ export const Sidebar = ({
   };
 
   return (
-    <StyledSidebarContainer direction="column" spacing={2}>
+    <StyledSidebarContainer direction="column" spacing="12px">
       <StyledLogoArea collapsed={collapsed}>
         {collapsed ? <CampxIcon /> : <CampxFullLogoIcon />}
       </StyledLogoArea>

package/src/components/Navigation/Sidebar/styles.tsx

@@ -11,10 +11,9 @@ import { Link } from "react-router-dom";
 export const createSidebarStyles = (collapsed: boolean) => {
   const StyledSidebarContainer = styled(Stack)(({ theme }) => {
     return {
-      height: "100vh",
-      marginLeft: "12px",
-      marginTop: "12px",
+      height: "calc(100vh - 24px)",
       width: collapsed ? "60px" : "240px",
+      margin: "12px",
       backgroundColor: theme.palette.surface.defaultBackground,
     };
   });
@@ -41,10 +40,8 @@ export const createSidebarStyles = (collapsed: boolean) => {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    padding: theme.spacing(2),
     borderRadius: "8px",
     backgroundColor: theme.palette.surface.paperBackground,
-    transition: "max-height 0.3s ease-out",
     height: "60px",
   }));
   interface StyledListItemProps {

package/src/components/export.ts

@@ -3,7 +3,5 @@ export * from "./DataDisplay/export";
 export * from "./Input/export";
 export * from "./Layout/AppHeader/AppHeader";
 
-export * from "./Layout/AppHeader/AppsMenu";
-export * from "./Layout/PageContent/PageContent";
-export * from "./Navigation/exports";
 export * from "./Feedback/exports";
+export * from "./Navigation/exports";

package/src/stories/Layout/AppHeader.stories.tsx

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { AppsMenu } from "../../components/export";
+
+import { Box } from "@mui/material";
 import {
   AppHeader,
   AppHeaderProps,
 } from "../../components/Layout/AppHeader/AppHeader";
-import { Box } from "@mui/material";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof AppHeader> = {

package/src/stories/Navigation/TabsContainer.stories.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { PageContent } from "../../components/Layout/PageContent/PageContent";
+
 import {
   TabsContainer,
   TabsContainerProps,
@@ -24,11 +24,7 @@ type Story = StoryObj<typeof TabsContainer>;
 
 // Primary story
 export const Primary: Story = {
-  render: (args: TabsContainerProps) => (
-    <PageContent sx={{ padding: "0px" }}>
-      <TabsContainer {...args} />{" "}
-    </PageContent>
-  ),
+  render: (args: TabsContainerProps) => <TabsContainer {...args} />,
   args: {
     tabs: [
       {

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

@@ -1,159 +0,0 @@
-import AppsOutageIcon from "@mui/icons-material/AppsOutage";
-import { Box, IconButton, Link, Menu, Typography, styled } from "@mui/material";
-import { useState } from "react";
-import { applications } from "../../../utils/applications";
-import { institutionKey, urlTenantKey } from "../../../utils/constants";
-import { Icons } from "../../export";
-
-export const AppsMenu = ({ apps }: { apps: string[] }) => {
-  const [anchorEl, setAnchorEl] = useState<any>(null);
-  const open = Boolean(anchorEl);
-  const applicationList = applications?.filter((item) =>
-    apps.includes(item.key)
-  );
-
-  const handleClick = (event: any) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <StyledIconButton onClick={handleClick}>
-        <Icons.AppsIcon />
-      </StyledIconButton>
-      <Menu
-        transitionDuration={150}
-        elevation={2}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        TransitionProps={{
-          unmountOnExit: false,
-        }}
-        sx={{
-          "& .MuiPaper-root": {
-            "&>:last-child": {
-              paddingBottom: "0px",
-            },
-          },
-        }}
-      >
-        {applicationList.length !== 0 ? (
-          <>
-            <Box sx={{ padding: "0.3rem 1rem" }}>
-              <Typography variant="body2">Switch to</Typography>
-            </Box>
-            <Box>
-              {applicationList.map((item, index) => {
-                return (
-                  <Link
-                    href={item.path + `/${urlTenantKey}/${institutionKey}`}
-                    key={index}
-                  >
-                    <StyledMenuItemContainer
-                      key={index}
-                      onClick={() => {
-                        window.location.href = item.path;
-                        handleClose();
-                      }}
-                    >
-                      <MenuItem item={item} />
-                    </StyledMenuItemContainer>
-                  </Link>
-                );
-              })}
-            </Box>
-          </>
-        ) : (
-          <StyledNoAppContainer>
-            <AppsOutageIcon sx={{ width: "40px", height: "40px" }} />
-            <Typography variant="body2">
-              No Application have been assigned
-            </Typography>
-          </StyledNoAppContainer>
-        )}
-      </Menu>
-    </>
-  );
-};
-
-const MenuItem = ({ item }: any) => {
-  return (
-    <StyledMenuItem>
-      <StyledImageBox>
-        <img
-          src={item.icon}
-          style={{ width: "20px", height: "20px" }}
-          alt="icon"
-        />
-      </StyledImageBox>
-      <Box>
-        <Typography variant="subtitle2">{item?.title}</Typography>
-        <Typography variant="caption">{item?.description}</Typography>
-      </Box>
-    </StyledMenuItem>
-  );
-};
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  padding: "18px",
-  backgroundColor: "black",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "0px",
-  height: "60px",
-  width: "60px",
-  border: `1px solid ${theme.palette.background.default}`,
-}));
-
-const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
-  cursor: "pointer",
-  padding: "5px 0px",
-}));
-
-const StyledMenuItem = styled(Box)({
-  height: "68px",
-  width: "380px",
-  padding: "40px 20px",
-  transition: "background ease 0.3s",
-  "&:hover": {
-    background: "rgba(0, 0, 0, 0.03)",
-  },
-  display: "flex",
-  alignItems: "center",
-  gap: "20px",
-});
-
-const StyledImageBox = styled(Box)(() => ({
-  height: "40px",
-  width: "40px",
-  boxShadow: "0px 5px 5px 0px rgba(48, 62, 99,0.1) ",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "5px",
-}));
-
-const StyledNoAppContainer = styled(Box)({
-  width: "300px",
-  height: "300px",
-  display: "flex",
-  alignItems: "center",
-  flexDirection: "column",
-  justifyContent: "center",
-  gap: "10px",
-});

package/src/components/Layout/PageContent/PageContent.tsx

@@ -1,32 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-export const StyledContainer = styled(Box)(({ theme }) => ({
-  width: "100%",
-  height: "calc(100vh - 120px)",
-  overflowY: "auto",
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: "5px",
-  "&::-webkit-scrollbar": {
-    width: "0.4em",
-    height: "0.4em",
-  },
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderRadius: "3px",
-  },
-  "@media (max-width: 1024px)": {
-    marginLeft: 0,
-  },
-  padding: "20px",
-  marginTop: "10px",
-}));
-
-export const PageContent = ({
-  children,
-  sx,
-}: {
-  children: React.ReactNode;
-  sx?: any;
-}) => {
-  return <StyledContainer sx={sx}> {children}</StyledContainer>;
-};

package/src/stories/Layout/PageContent.stories.tsx

@@ -1,26 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { PageContent } from "../../components/Layout/PageContent/PageContent";
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof PageContent> = {
-  title: "Layout/PageContent",
-  component: PageContent,
-  tags: ["autodocs"],
-  argTypes: {
-    children: {
-      control: "object",
-      description: "The content of the component",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PageContent>;
-
-// Primary story
-export const Primary: Story = {
-  render: (args: any) => <PageContent {...args} />,
-  args: {
-    children: <>Tickets</>,
-  },
-};