@campxdev/react-blueprint 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -10,8 +10,8 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@mui/x-data-grid": "^7.5.1",
-    "@storybook/addon-backgrounds": "^8.1.5",
-    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-backgrounds": "^8.2.6",
+    "@storybook/addon-designs": "^8.0.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -68,21 +68,21 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^1.5.0",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-mdx-gfm": "^8.1.5",
-    "@storybook/addon-onboarding": "^8.1.5",
-    "@storybook/blocks": "^8.1.5",
-    "@storybook/preset-create-react-app": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
-    "@storybook/test": "^8.1.5",
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-interactions": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-mdx-gfm": "^8.2.6",
+    "@storybook/addon-onboarding": "^8.2.6",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/preset-create-react-app": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@storybook/react-webpack5": "^8.2.6",
+    "@storybook/test": "^8.2.6",
     "@types/js-cookie": "^3.0.5",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.1.5",
+    "storybook": "^8.2.6",
     "webpack": "^5.91.0"
   }
 }

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

@@ -1,20 +1,27 @@
-export const AlertFilledIcon = () => {
+import { useTheme } from "@mui/material";
+
+export const ErrorFilledIcon = ({
+  size = 16,
+  backgroundColor,
+}: {
+  backgroundColor?: string;
+  size?: number;
+}) => {
+  const theme = useTheme();
+  const color = theme.palette.tertiary.main;
   return (
     <svg
-      width="20"
-      height="21"
+      width={size}
+      height={size}
       viewBox="0 0 20 21"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      style={{
-        marginTop: "4px",
-      }}
     >
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M18.6663 10.5202C18.6663 15.3067 14.7861 19.1868 9.99967 19.1868C5.21321 19.1868 1.33301 15.3067 1.33301 10.5202C1.33301 5.73371 5.21321 1.85352 9.99967 1.85352C14.7861 1.85352 18.6663 5.73371 18.6663 10.5202ZM13.8747 15.3643C14.1319 15.3643 14.3789 15.2633 14.5624 15.083C14.7428 14.8996 14.8439 14.6526 14.8439 14.3954C14.8439 14.1381 14.7428 13.8911 14.5624 13.7077L11.375 10.5204L14.5624 7.33303C14.6527 7.24272 14.7243 7.13551 14.7732 7.01752C14.822 6.89953 14.8472 6.77307 14.8472 6.64536C14.8472 6.51765 14.822 6.39119 14.7732 6.2732C14.7243 6.15521 14.6527 6.048 14.5624 5.95769C14.4721 5.86739 14.3648 5.79575 14.2469 5.74688C14.1289 5.69801 14.0024 5.67285 13.8747 5.67285C13.747 5.67285 13.6205 5.69801 13.5025 5.74688C13.3845 5.79575 13.2773 5.86739 13.187 5.95769L9.99969 9.14503L6.81236 5.95769C6.62998 5.77531 6.38261 5.67285 6.12469 5.67285C5.86676 5.67285 5.6194 5.77531 5.43702 5.95769C5.25464 6.14007 5.15218 6.38743 5.15218 6.64536C5.15218 6.90329 5.25464 7.15065 5.43702 7.33303L8.62436 10.5204L5.43702 13.7077C5.34672 13.798 5.27508 13.9052 5.22621 14.0232C5.17734 14.1412 5.15218 14.2677 5.15218 14.3954C5.15218 14.5231 5.17734 14.6495 5.22621 14.7675C5.27508 14.8855 5.34672 14.9927 5.43702 15.083C5.52733 15.1733 5.63454 15.245 5.75253 15.2938C5.87052 15.3427 5.99698 15.3679 6.12469 15.3679C6.2524 15.3679 6.37886 15.3427 6.49685 15.2938C6.61484 15.245 6.72205 15.1733 6.81236 15.083L9.99969 11.8957L13.187 15.083C13.3705 15.2633 13.6175 15.3643 13.8747 15.3643Z"
-        fill="#F2353C"
+        fill={backgroundColor ?? color}
       />
     </svg>
   );

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

@@ -1,14 +1,21 @@
-export const InfoFilledIcon = () => {
+import { useTheme } from "@mui/material";
+
+export const InfoFilledIcon = ({
+  backgroundColor,
+  size = 16,
+}: {
+  backgroundColor?: string;
+  size?: number;
+}) => {
+  const theme = useTheme();
+  const color = theme.palette.highlight.highlightBlue;
   return (
     <svg
-      width="20"
-      height="21"
+      width={size}
+      height={size}
       viewBox="0 0 20 21"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      style={{
-        marginTop: "4px",
-      }}
     >
       <mask
         id="mask0_194_1775"
@@ -23,7 +30,7 @@ export const InfoFilledIcon = () => {
       <g mask="url(#mask0_194_1775)">
         <path
           d="M10.1517 1.83301C8.40751 1.83301 6.70251 2.35021 5.25229 3.31922C3.80207 4.28823 2.67176 5.66552 2.00429 7.27692C1.33683 8.88832 1.16219 10.6615 1.50246 12.3721C1.84273 14.0828 2.68263 15.6541 3.91594 16.8874C5.14925 18.1207 6.72059 18.9606 8.43124 19.3009C10.1419 19.6412 11.915 19.4665 13.5264 18.7991C15.1378 18.1316 16.5151 17.0013 17.4841 15.5511C18.4531 14.1008 18.9703 12.3958 18.9703 10.6517C18.9703 8.31282 18.0412 6.06976 16.3874 4.41594C14.7336 2.76211 12.4905 1.83301 10.1517 1.83301ZM10.1517 6.24234C10.3698 6.24234 10.583 6.30701 10.7643 6.42817C10.9456 6.54934 11.087 6.72155 11.1704 6.92304C11.2539 7.12452 11.2757 7.34623 11.2332 7.56013C11.1906 7.77402 11.0856 7.9705 10.9314 8.12471C10.7772 8.27892 10.5807 8.38394 10.3668 8.42649C10.1529 8.46903 9.93119 8.4472 9.72971 8.36374C9.52822 8.28028 9.35601 8.13895 9.23484 7.95762C9.11368 7.77628 9.04901 7.56309 9.04901 7.34501C9.04901 7.05256 9.16518 6.7721 9.37197 6.5653C9.57876 6.35851 9.85923 6.24234 10.1517 6.24234ZM11.805 15.061H8.49835C8.35212 15.061 8.21189 15.0029 8.10849 14.8995C8.0051 14.7961 7.94701 14.6559 7.94701 14.5097C7.94701 14.3635 8.0051 14.2232 8.10849 14.1198C8.21189 14.0164 8.35212 13.9583 8.49835 13.9583H9.04968V10.6517H8.49835C8.35212 10.6517 8.21189 10.5936 8.10849 10.4902C8.0051 10.3868 7.94701 10.2466 7.94701 10.1003C7.94701 9.95412 8.0051 9.81389 8.10849 9.71049C8.21189 9.6071 8.35212 9.54901 8.49835 9.54901H10.703C10.8492 9.54901 10.9895 9.6071 11.0929 9.71049C11.1963 9.81389 11.2543 9.95412 11.2543 10.1003V13.9583H11.8057C11.9519 13.9583 12.0921 14.0164 12.1955 14.1198C12.2989 14.2232 12.357 14.3635 12.357 14.5097C12.357 14.6559 12.2989 14.7961 12.1955 14.8995C12.0921 15.0029 11.9512 15.061 11.805 15.061Z"
-          fill="#4BAABE"
+          fill={backgroundColor ?? color}
         />
       </g>
     </svg>

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

@@ -1,20 +1,28 @@
-export const SuccessFilledIcon = () => {
+import { useTheme } from "@mui/material";
+
+export const SuccessFilledIcon = ({
+  backgroundColor,
+  size = 16,
+}: {
+  backgroundColor?: string;
+  size?: number;
+}) => {
+  const theme = useTheme();
+  const color = theme.palette.highlight.highlightGreen;
+
   return (
     <svg
-      width="20"
-      height="21"
+      width={size}
+      height={size}
       viewBox="0 0 20 21"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      style={{
-        marginTop: "4px",
-      }}
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M10.0039 1.69824C11.7457 1.69824 13.4484 2.21474 14.8967 3.18243C16.3449 4.15012 17.4737 5.52554 18.1402 7.13474C18.8068 8.74395 18.9812 10.5147 18.6414 12.223C18.3016 13.9313 17.4628 15.5005 16.2312 16.7322C14.9996 17.9638 13.4304 18.8025 11.722 19.1424C10.0137 19.4822 8.24297 19.3078 6.63377 18.6412C5.02456 17.9747 3.64915 16.8459 2.68146 15.3976C1.71377 13.9494 1.19727 12.2467 1.19727 10.5049C1.19762 8.16934 2.12558 5.92954 3.77707 4.27805C5.42856 2.62655 7.66837 1.6986 10.0039 1.69824ZM8.17527 13.3649L6.0186 11.2076C5.85141 11.0288 5.76022 10.7921 5.7643 10.5474C5.76838 10.3027 5.8674 10.0692 6.04046 9.89611C6.21352 9.72305 6.44707 9.62402 6.69178 9.61994C6.93648 9.61586 7.1732 9.70705 7.35193 9.87424L8.87193 11.3956L12.6526 7.61291C12.8313 7.44571 13.068 7.35453 13.3128 7.35861C13.5575 7.36269 13.791 7.46172 13.9641 7.63477C14.1371 7.80783 14.2362 8.04138 14.2402 8.28609C14.2443 8.53079 14.1531 8.76751 13.9859 8.94624L9.53927 13.3969C9.36204 13.5729 9.12239 13.6717 8.8726 13.6717C8.62281 13.6717 8.38315 13.5729 8.20593 13.3969L8.17593 13.3656L8.17527 13.3649Z"
-        fill="#88B053"
+        fill={backgroundColor ?? color}
       />
     </svg>
   );

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

@@ -1,14 +1,21 @@
-export const WarningFilledIcon = () => {
+import { useTheme } from "@mui/material";
+
+export const WarningFilledIcon = ({
+  size = 16,
+  backgroundColor,
+}: {
+  backgroundColor?: string;
+  size?: number;
+}) => {
+  const theme = useTheme();
+  const color = theme.palette.highlight.highlightOrange;
   return (
     <svg
-      width="20"
-      height="21"
+      width={size}
+      height={size}
       viewBox="0 0 20 21"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      style={{
-        marginTop: "4px",
-      }}
     >
       <mask
         id="mask0_194_1734"
@@ -25,7 +32,7 @@ export const WarningFilledIcon = () => {
           fill-rule="evenodd"
           clip-rule="evenodd"
           d="M8.67604 2.57149L0.492704 16.7448C0.344646 17.0009 0.266662 17.2914 0.266602 17.5871C0.266542 17.8829 0.344408 18.1735 0.492362 18.4296C0.640315 18.6857 0.853133 18.8983 1.10938 19.0459C1.36564 19.1936 1.65628 19.2712 1.95204 19.2708H18.3167C18.6123 19.2709 18.9026 19.1931 19.1586 19.0454C19.4146 18.8976 19.6271 18.6851 19.7749 18.4292C19.9227 18.1732 20.0005 17.8828 20.0004 17.5873C20.0004 17.2917 19.9225 17.0014 19.7747 16.7455L11.592 2.57149C11.4443 2.3155 11.2318 2.10292 10.9759 1.95511C10.7199 1.80731 10.4296 1.72949 10.134 1.72949C9.83849 1.72949 9.54814 1.80731 9.29221 1.95511C9.03627 2.10292 8.82376 2.3155 8.67604 2.57149ZM11.1914 7.10489C11.1914 6.52021 10.7175 6.04622 10.133 6.04622C9.54854 6.04622 9.07471 6.52021 9.07471 7.10489V11.4396C9.07471 12.0242 9.54854 12.4982 10.133 12.4982C10.7175 12.4982 11.1914 12.0242 11.1914 11.4396V7.10489ZM11.192 15.0476C11.192 15.6323 10.7181 16.1063 10.1334 16.1063C9.54869 16.1063 9.07471 15.6323 9.07471 15.0476C9.07471 14.4629 9.54869 13.9889 10.1334 13.9889C10.7181 13.9889 11.192 14.4629 11.192 15.0476Z"
-          fill="#ED9035"
+          fill={backgroundColor ?? color}
         />
       </g>
     </svg>

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

@@ -30,7 +30,7 @@ import { NotificationIcon } from "./IconComponents/NotificationIcon";
 import { PayxIcon } from "./IconComponents/PayxIcon";
 
 import { AdminIcon } from "./IconComponents/AdminIcon";
-import { AlertFilledIcon } from "./IconComponents/AlertFilledIcon";
+import { ErrorFilledIcon } from "./IconComponents/AlertFilledIcon";
 import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
 import { CrossIcon2 } from "./IconComponents/CrossIcon2";
 import { InfoFilledIcon } from "./IconComponents/InfoFilledIcon";
@@ -61,7 +61,7 @@ export const Icons = {
   SuccessFilledIcon,
   InfoFilledIcon,
   WarningFilledIcon,
-  AlertFilledIcon,
+  AlertFilledIcon: ErrorFilledIcon,
   CrossIcon2,
   LogoutIcon,
   TicketsIcon,

package/src/components/Feedback/Alert/Alert.tsx

@@ -0,0 +1,28 @@
+import { Alert as MuiAlert, AlertProps as MuiAlertProps } from "@mui/material";
+import { Icons } from "../../export";
+
+export type AlertProps = {
+  message: string;
+  severity: MuiAlertProps["severity"];
+} & MuiAlertProps;
+
+const getIcon = (severity: MuiAlertProps["severity"]) => {
+  switch (severity) {
+    case "success":
+      return <Icons.SuccessFilledIcon size={20} />;
+    case "error":
+      return <Icons.AlertFilledIcon size={20} />;
+    case "info":
+      return <Icons.InfoFilledIcon size={20} />;
+    case "warning":
+      return <Icons.WarningFilledIcon size={20} />;
+  }
+};
+
+export const Alert = ({ severity, message }: AlertProps) => {
+  return (
+    <MuiAlert severity={severity} icon={getIcon(severity)}>
+      {message}
+    </MuiAlert>
+  );
+};

package/src/components/Feedback/Snackbar/Snackbar.tsx

@@ -9,20 +9,20 @@ import {
 import { Typography } from "../../DataDisplay/Typography/Typography";
 import { Icons } from "../../export";
 
-export type Variant = "success" | "info" | "warning" | "alert";
+export type Severity = "success" | "info" | "warning" | "error";
 
 export type SnackbarProps = {
-  variant: Variant;
+  severity: Severity;
   message: string;
 } & MuiSnackbarProps;
 
 export const Snackbar = ({ ...props }: SnackbarProps) => {
   const theme = useTheme();
-  const getColor = (variant: Variant) => {
+  const getColor = (variant: Severity) => {
     switch (variant) {
       case "success":
         return theme.palette.highlight.highlightGreen;
-      case "alert":
+      case "error":
         return theme.palette.highlight.highlightRed;
       case "info":
         return theme.palette.highlight.highlightBlue;
@@ -32,11 +32,11 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
         return theme.palette.highlight.highlightGreen;
     }
   };
-  const getBackGroundColor = (variant: Variant) => {
+  const getBackGroundColor = (variant: Severity) => {
     switch (variant) {
       case "success":
         return theme.palette.highlight.greenBackground;
-      case "alert":
+      case "error":
         return theme.palette.highlight.redBackground;
       case "info":
         return theme.palette.highlight.blueBackground;
@@ -47,11 +47,11 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
     }
   };
 
-  const getIcon = (variant: Variant) => {
+  const getIcon = (variant: Severity) => {
     switch (variant) {
       case "success":
         return <Icons.SuccessFilledIcon />;
-      case "alert":
+      case "error":
         return <Icons.AlertFilledIcon />;
       case "info":
         return <Icons.InfoFilledIcon />;
@@ -77,29 +77,30 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
         sx={{
           height: "90px",
           width: "480px",
-          backgroundColor: getBackGroundColor(props.variant),
+          backgroundColor: getBackGroundColor(props.severity),
         }}
       >
         <Box
           sx={{
             width: "10px",
             height: "100%",
-            backgroundColor: getColor(props.variant),
+            backgroundColor: getColor(props.severity),
             borderRadius: "5px 0px 0px 5px",
           }}
         />
         <Stack width="100%" height="100%" direction={"row"} alignItems="center">
           <Stack direction="row" gap={1} justifyContent="space-evenly">
-            {getIcon(props.variant)}
+            <Box sx={{ marginTop: "2px" }}>{getIcon(props.severity)}</Box>
             <Stack direction={"column"}>
               <Typography variant="subtitle2">
-                {props.variant.toUpperCase()}
+                {props.severity.toUpperCase()}
               </Typography>
               <Typography variant="body2">{props.message}</Typography>
             </Stack>
           </Stack>
         </Stack>
-        <IconButton sx={{ margin: "5px" }} onClick={handleClose}>
+
+        <IconButton sx={{ margin: "25px" }} onClick={handleClose}>
           <Icons.CrossIcon2 />
         </IconButton>
       </Stack>

package/src/components/Feedback/exports.ts

@@ -1,3 +1,4 @@
+export * from "./Alert/Alert";
 export * from "./Snackbar/Snackbar";
 export * from "./Spinner/Spinner";
 export * from "./Tooltip/Tooltip";

package/src/components/Input/TextField/TextField.tsx

@@ -3,10 +3,12 @@ import {
   TextFieldProps as MuiTextFieldProps,
   StackProps,
 } from "@mui/material";
+import { Typography } from "../../export";
 import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
 
 export type TextFieldProps = {
   containerProps?: StackProps;
+  description?: string;
 } & MuiTextFieldProps;
 
 export const TextField = ({
@@ -16,6 +18,7 @@ export const TextField = ({
   onChange,
   required = false,
   containerProps,
+  description,
   ...rest
 }: TextFieldProps) => {
   return (
@@ -34,6 +37,7 @@ export const TextField = ({
         onChange={onChange}
         {...rest}
       />
+      <Typography variant="caption">{description}</Typography>
     </LabelWrapper>
   );
 };

package/src/components/Navigation/exports.ts

@@ -1,21 +1,8 @@
-import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
-import { CustomDialog } from "./DialogButton/DialogButton";
-import { DropDownButton } from "./DropDownMenu/DropDownButton";
-import { DropDownIcon } from "./DropDownMenu/DropDownIcon";
-import { DropdownMenu } from "./DropDownMenu/DropDownMenu";
-import { DropdownMenuItem } from "./DropDownMenu/DropdownMenuItem";
-import { Sidebar } from "./Sidebar/Sidebar";
-import { Stepper } from "./Stepper/Stepper";
-import { TabsContainer } from "./TabsContainer/TabsContainer";
-
-export {
-  Breadcrumbs,
-  CustomDialog,
-  DropDownButton,
-  DropDownIcon,
-  DropdownMenu,
-  DropdownMenuItem,
-  Sidebar,
-  Stepper,
-  TabsContainer,
-};
+export * from "./DialogButton/DialogButton";
+export * from "./DropDownMenu/DropDownButton";
+export * from "./DropDownMenu/DropDownIcon";
+export * from "./DropDownMenu/DropDownMenu";
+export * from "./DropDownMenu/DropdownMenuItem";
+export * from "./Sidebar/Sidebar";
+export * from "./Stepper/Stepper";
+export * from "./TabsContainer/TabsContainer";

package/src/stories/Feedback/Alert.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "../../components/export";
+
+export default {
+  title: "Feedback/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    severity: {
+      control: {
+        type: "select",
+        options: ["success", "info", "warning", "error"],
+      },
+    },
+    message: { control: "text" },
+  },
+} as Meta<typeof Alert>;
+
+export const AlertSuccess: StoryObj<typeof Alert> = {
+  render: (args) => <Alert {...args} />,
+  args: {
+    severity: "success",
+    message: "Success Message Comes Here",
+  },
+};

package/src/stories/Feedback/Snackbar.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-
-import { Snackbar } from "../../components/Feedback/Snackbar/Snackbar";
+import { Snackbar } from "../../components/export";
 
 export default {
   title: "Feedback/Snackbar",
@@ -22,7 +21,7 @@ export default {
 export const SnackbarSuccess: StoryObj<typeof Snackbar> = {
   render: (args) => <Snackbar {...args} />,
   args: {
-    variant: "success",
+    severity: "success",
     message: "Success or error or info or warning",
     open: true,
   },

package/src/stories/Feedback/Spinner.stories.tsx

@@ -1,6 +1,6 @@
 // Import React and other necessary elements
 import { Meta } from "@storybook/react";
-import { Spinner } from "../../components/Feedback/Spinner/Spinner";
+import { Spinner } from "../../components/export";
 
 // Make sure your TextField import is correct
 

package/src/stories/Feedback/Tooltip.stories.tsx

@@ -1,11 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
-
-import { Icons } from "../../components/Assets/Icons/Icons";
 import {
-  ToolTipContent,
+  Button,
+  Icons,
   Tooltip,
-} from "../../components/Feedback/Tooltip/Tooltip";
-import { Button } from "../../components/Input/Button/Button";
+  ToolTipContent,
+} from "../../components/export";
 
 export default {
   title: "Feedback/Tooltip",

package/src/stories/Feedback/Tutorial.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Tutorial } from "../../components/Feedback/Tutorial/Tutorial";
-import { Typography } from "../../components/DataDisplay/Typography/Typography";
-import { useTheme } from "@mui/material";
+import { Tutorial, Typography } from "../../components/export";
 
 export default {
   title: "Feedback/Tutorial",

package/src/themes/commonTheme.ts

@@ -56,6 +56,29 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiAlert: {
+        styleOverrides: {
+          root: {
+            maxWidth: "400px",
+            fontFamily: "Poppins",
+            fontWeight: 500,
+            fontSize: "14px",
+            color: ColorTokens.text.primary,
+          },
+          standardSuccess: {
+            backgroundColor: ColorTokens.highlight.greenBackground,
+          },
+          standardInfo: {
+            backgroundColor: ColorTokens.highlight.blueBackground,
+          },
+          standardWarning: {
+            backgroundColor: ColorTokens.highlight.orangeBackground,
+          },
+          standardError: {
+            backgroundColor: ColorTokens.highlight.redBackground,
+          },
+        },
+      },
       MuiIconButton: {
         defaultProps: {
           disableRipple: true,
@@ -196,7 +219,7 @@ export const getCommonTheme = (mode: Theme) => {
             fontSize: "14px ",
             fontFamily: "Poppins",
             fontWeight: 600,
-            maxWidth: "350px",
+            width: "350px",
             "&:hover": {
               boxShadow: "none ",
               "@media (hover: none )": {