First Commit

2026-03-21 11:55:27 +01:00
commit 2e8a29b4d0
1757 changed files with 166084 additions and 0 deletions
@@ -0,0 +1,76 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+// @project
+import { withAlpha } from '@/utils/colorUtils';
+
+const TaskAltOutlinedIcon = (props) => (
+  <SvgIcon {...props} fontSize="inherit">
+    <path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>
+  </SvgIcon>
+);
+
+/***************************  OVERRIDES - ALERT  ***************************/
+
+export default function Alert(theme) {
+  const { vars } = theme;
+
+  const standardVariant = ({ ownerState }) => {
+    if (ownerState.severity === 'primary' || ownerState.severity === 'secondary') {
+      const paletteColor = vars.palette[ownerState.severity];
+
+      return {
+        color: vars.palette.text.secondary,
+        backgroundColor: withAlpha(paletteColor.lighter, 0.25),
+        '& .MuiAlert-icon': { color: paletteColor.main }
+      };
+    }
+  };
+
+  const outlinedVariant = ({ ownerState }) => {
+    if (ownerState.severity === 'primary' || ownerState.severity === 'secondary') {
+      const paletteColor = vars.palette[ownerState.severity];
+
+      return {
+        color: vars.palette.text.secondary,
+        '& .MuiAlert-icon': { color: paletteColor.main }
+      };
+    }
+  };
+
+  const filledVariant = ({ ownerState }) => {
+    if (ownerState.severity === 'primary' || ownerState.severity === 'secondary') {
+      const paletteColor = vars.palette[ownerState.severity];
+
+      return {
+        color: vars.palette.common.white,
+        backgroundColor: paletteColor.main,
+        '& .MuiAlert-icon': {
+          color: vars.palette.common.white
+        }
+      };
+    }
+  };
+
+  return {
+    MuiAlert: {
+      defaultProps: {
+        iconMapping: {
+          primary: <TaskAltOutlinedIcon />,
+          secondary: <TaskAltOutlinedIcon />
+        }
+      },
+      styleOverrides: {
+        icon: {
+          fontSize: 20
+        },
+        root: {
+          variants: [
+            { props: { variant: 'standard' }, style: standardVariant },
+            { props: { variant: 'outlined' }, style: outlinedVariant },
+            { props: { variant: 'filled' }, style: filledVariant }
+          ]
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,93 @@
+// @project
+import { AvatarSize } from '@/enum';
+
+// @assets
+import { IconUser } from '@tabler/icons-react';
+
+const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
+
+/***************************  AVATAR - SIZE  ***************************/
+
+const badgeSX = { border: '2px solid', borderRadius: '50%' };
+
+const avatarSizes = (theme) => ({
+  [AvatarSize.BADGE]: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: 400,
+    width: 20,
+    height: 20,
+    '& ~ span.MuiBadge-dot': { ...badgeSX, borderWidth: 1 },
+    '& svg': { width: 14, height: 14 }
+  },
+  [AvatarSize.XS]: {
+    ...theme.typography.caption,
+    width: 32,
+    height: 32,
+    '& ~ span.MuiBadge-dot': { width: 10, height: 10, ...badgeSX },
+    '& svg': { width: 16, height: 16 }
+  },
+  [AvatarSize.SM]: {
+    ...theme.typography.caption,
+    width: 40,
+    height: 40,
+    '& ~ span.MuiBadge-dot': { width: 12, height: 12, ...badgeSX },
+    '& svg': { width: 16, height: 16 }
+  }
+});
+
+/***************************  OVERRIDES - AVATAR  ***************************/
+
+export default function Avatar(theme) {
+  const sizeVariants = (theme) => {
+    const styles = avatarSizes(theme);
+
+    return Object.values(AvatarSize).map((size) => ({
+      props: { size },
+      style: styles[size]
+    }));
+  };
+
+  const colorVariants = colors.map((color) => {
+    const paletteColor = theme.vars.palette[color];
+
+    return {
+      props: { color },
+      style: {
+        color: paletteColor.main,
+        backgroundColor: paletteColor.light
+      }
+    };
+  });
+
+  return {
+    MuiAvatar: {
+      defaultProps: {
+        children: <IconUser />,
+        color: 'primary',
+        size: AvatarSize.SM
+      },
+      styleOverrides: {
+        root: {
+          variants: [
+            {
+              props: { color: 'default' },
+              style: {
+                color: theme.vars.palette.primary.darker,
+                backgroundColor: theme.vars.palette.primary.lighter
+              }
+            },
+            ...colorVariants,
+            ...sizeVariants(theme),
+            {
+              props: { variant: 'rounded' },
+              style: {
+                borderRadius: 8
+              }
+            }
+          ]
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,18 @@
+/***************************  OVERRIDES - AVATAR GROUP  ***************************/
+
+export default function AvatarGroup() {
+  return {
+    MuiAvatarGroup: {
+      defaultProps: {
+        slotProps: {
+          additionalAvatar: {
+            color: 'default'
+          }
+        }
+      },
+      styleOverrides: {
+        avatar: { width: 32, height: 32 }
+      }
+    }
+  };
+}
@@ -0,0 +1,16 @@
+// @project
+import { withAlpha } from '@/utils/colorUtils';
+
+/***************************  OVERRIDES - BACKDROP  ***************************/
+
+export default function Backdrop(theme) {
+  return {
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: withAlpha(theme.vars.palette.grey[900], 0.2)
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,13 @@
+/***************************  OVERRIDES - BAR LABEL  ***************************/
+
+export default function BarLabel(theme) {
+  return {
+    MuiBarLabel: {
+      styleOverrides: {
+        root: {
+          fill: theme.vars.palette.text.secondary
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,15 @@
+/***************************  COMPONENT - BREADCRUMBS  ***************************/
+
+export default function Breadcrumbs(theme) {
+  return {
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        separator: {
+          color: theme.vars.palette.text.secondary,
+          marginLeft: 4,
+          marginRight: 4
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,95 @@
+// @project
+import { generateFocusStyle } from '@/utils/generateFocusStyle';
+
+// Define the list of colors that the Radio component will support
+const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
+
+/***************************  OVERRIDES - BUTTON  ***************************/
+
+export default function Button(theme) {
+  const boxShadow = {
+    boxShadow: theme.vars.customShadows.button,
+    '&:hover': {
+      boxShadow: theme.vars.customShadows.button
+    }
+  };
+
+  const outlinedColorVariants = colors.map((color) => {
+    const paletteColor = theme.vars.palette[color];
+    return {
+      props: { variant: 'outlined', color },
+      style: {
+        ...boxShadow,
+        borderColor: paletteColor.lighter,
+        ...(color === 'secondary' && {
+          borderColor: theme.vars.palette.divider,
+          color: theme.vars.palette.text.primary
+        })
+      }
+    };
+  });
+
+  return {
+    MuiButton: {
+      defaultProps: {
+        disableFocusRipple: true
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          '&.Mui-disabled': {
+            cursor: 'not-allowed',
+            pointerEvents: 'auto',
+            '&:hover': {
+              backgroundColor: 'transparent',
+              '&.MuiButton-contained': {
+                backgroundColor: theme.vars.palette.action.disabledBackground
+              }
+            }
+          },
+          '&:focus-visible': {
+            ...generateFocusStyle(theme.vars.palette.primary.main)
+          },
+          variants: [
+            ...outlinedColorVariants,
+            {
+              props: { variant: 'text', color: 'secondary' },
+              style: {
+                color: theme.vars.palette.text.primary
+              }
+            }
+          ]
+        },
+        contained: { ...boxShadow },
+        startIcon: {
+          marginLeft: 0,
+          marginRight: 4
+        },
+        endIcon: {
+          marginLeft: 4
+        },
+        sizeSmall: {
+          height: 36,
+          fontSize: 12,
+          lineHeight: '16px',
+          letterSpacing: 0,
+          padding: 10
+        },
+        sizeMedium: {
+          height: 42,
+          fontSize: 14,
+          lineHeight: '18px',
+          letterSpacing: 0,
+          padding: 12
+        },
+        sizeLarge: {
+          height: 48,
+          fontSize: 16,
+          lineHeight: '20px',
+          letterSpacing: 0,
+          padding: '16px 18px'
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,11 @@
+/***************************  OVERRIDES - CARD ACTIONS  ***************************/
+
+export default function CardActions(theme) {
+  return {
+    MuiCardActions: {
+      styleOverrides: {
+        root: { padding: 20, borderTop: `1px solid ${theme.vars.palette.divider}` }
+      }
+    }
+  };
+}
@@ -0,0 +1,9 @@
+/***************************  OVERRIDES - CARD CONTENT  ***************************/
+
+export default function CardContent() {
+  return {
+    MuiCardContent: {
+      styleOverrides: { root: { padding: 20 } }
+    }
+  };
+}
@@ -0,0 +1,14 @@
+/***************************  OVERRIDES - CARD HEADER  ***************************/
+
+export default function CardHeader(theme) {
+  return {
+    MuiCardHeader: {
+      styleOverrides: {
+        root: { padding: 20, borderBottom: `1px solid ${theme.vars.palette.divider}` },
+        action: { margin: 0 },
+        content: {},
+        title: { '& ~ span.MuiCardHeader-subheader': { marginTop: 4 } }
+      }
+    }
+  };
+}
@@ -0,0 +1,18 @@
+/***************************  OVERRIDES - CHARTS AXIS  ***************************/
+
+export default function ChartsAxis(theme) {
+  return {
+    MuiChartsAxis: {
+      styleOverrides: {
+        root: {
+          '& .MuiChartsAxis-tickLabel': {
+            fill: theme.vars.palette.text.secondary
+          },
+          '& .MuiChartsAxis-line': {
+            stroke: theme.vars.palette.divider
+          }
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,13 @@
+/***************************  OVERRIDES - CHARTS AXIS HIGHLIGHT  ***************************/
+
+export default function ChartsAxiasHighlight(theme) {
+  return {
+    MuiChartsAxisHighlight: {
+      styleOverrides: {
+        root: {
+          stroke: theme.vars.palette.grey[600]
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,24 @@
+/***************************  OVERRIDES - CHARTS TOOLTIP  ***************************/
+
+export default function ChartsTooltip(theme) {
+  return {
+    MuiChartsTooltip: {
+      styleOverrides: {
+        root: {
+          '& .MuiChartsTooltip-paper': {
+            border: `1px solid ${theme.vars.palette.divider}`,
+            borderRadius: 8,
+            boxShadow: theme.vars.customShadows.section
+          },
+          '& .MuiChartsTooltip-row': {
+            '&:first-of-type .MuiChartsTooltip-cell': { paddingTop: 14 },
+            '&:last-of-type .MuiChartsTooltip-cell': { paddingBottom: 14 }
+          },
+          '& .MuiChartsTooltip-cell': { paddingTop: 6, paddingBottom: 6 },
+          '& .MuiChartsTooltip-labelCell': { '& .MuiTypography-root': { color: theme.vars.palette.text.secondary } },
+          '& .MuiChartsTooltip-valueCell': { '& .MuiTypography-root': { ...theme.typography.subtitle1 } }
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,88 @@
+// @project
+import { generateFocusStyle } from '@/utils/generateFocusStyle';
+
+// @assets
+import { IconX } from '@tabler/icons-react';
+
+const validPaletteKeys = ['primary', 'secondary', 'error', 'warning', 'info', 'success'];
+const isValidPaletteKey = (value) => validPaletteKeys.includes(value);
+
+/***************************  OVERRIDES - CHIP  ***************************/
+
+export default function Chip(theme) {
+  return {
+    MuiChip: {
+      defaultProps: {
+        variant: 'light', // Default variant is 'light'
+        deleteIcon: <IconX size={16} />
+      },
+      styleOverrides: {
+        root: {
+          height: '100%',
+          '&.Mui-focusVisible': {
+            ...generateFocusStyle(theme.vars.palette.primary.main)
+          },
+          variants: [
+            {
+              props: { variant: 'text' }, // Variant for text Chip
+              style: ({ ownerState }) => {
+                const paletteColor = isValidPaletteKey(ownerState.color) ? theme.vars.palette[ownerState.color] : undefined;
+                return {
+                  backgroundColor: 'transparent', // Transparent background for text variant
+                  ...(paletteColor && {
+                    color: paletteColor.main
+                  }),
+                  '& .MuiChip-label': {
+                    padding: 0
+                  },
+                  '& .MuiChip-icon': {
+                    marginRight: 2,
+                    marginLeft: 0
+                  },
+                  '& .MuiChip-avatar': {
+                    marginLeft: 0,
+                    marginRight: 4,
+                    ...(paletteColor && {
+                      color: paletteColor.main,
+                      backgroundColor: paletteColor.light
+                    })
+                  },
+                  '&[position="right"]': {
+                    '& .MuiChip-icon': {
+                      marginLeft: 2, // Adjust margin when icon is on the right
+                      marginRight: 0
+                    },
+                    '& .MuiChip-avatar': {
+                      marginLeft: 4, // Adjust margin when avatar is on the right
+                      marginRight: 0
+                    }
+                  }
+                };
+              }
+            }
+          ]
+        },
+        avatar: {
+          borderRadius: '50%', // Circular avatar
+          padding: 2
+        },
+        icon: {
+          fontSize: 10,
+          lineHeight: 14,
+          fontWeight: 400,
+          width: 20,
+          height: 20,
+          borderRadius: '50%', // Circular icon
+          padding: 3
+        },
+        avatarSmall: {
+          width: 16,
+          height: 16,
+          padding: 1.5,
+          ...theme.typography.caption // Small avatar typography
+        },
+        labelSmall: theme.typography.caption1 // Small label typography
+      }
+    }
+  };
+}
@@ -0,0 +1,25 @@
+// @project
+import { withAlpha } from '@/utils/colorUtils';
+
+/***************************  OVERRIDES - FORM CONTROL LABEL  ***************************/
+
+export default function FormControlLabel(theme) {
+  return {
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            cursor: 'not-allowed'
+          }
+        },
+        label: {
+          '&.Mui-disabled': {
+            color: withAlpha(theme.vars.palette.text.disabled, 0.8)
+          }
+        },
+        labelPlacementStart: { marginRight: 0, '& .MuiSwitch-root': { marginLeft: 12 } },
+        labelPlacementEnd: { '& .MuiSwitch-root': { marginRight: 12 } }
+      }
+    }
+  };
+}
@@ -0,0 +1,19 @@
+/***************************  OVERRIDES - FORM HELPER TEXT  ***************************/
+
+export default function FormHelperText(theme) {
+  return {
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          marginTop: 6,
+          marginLeft: 0,
+          marginRight: 0,
+          color: theme.vars.palette.grey[700],
+          '&.Mui-error': {
+            color: theme.vars.palette.error.main
+          }
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,100 @@
+// @project
+import { withAlpha } from '@/utils/colorUtils';
+import { generateFocusStyle } from '@/utils/generateFocusStyle';
+
+const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
+
+/***************************  COMPONENT - ICON BUTTON  ***************************/
+
+export default function IconButton(theme) {
+  const createColorVariant = (color, variant, styleFn, theme) => {
+    const paletteColor = theme.vars.palette[color];
+    return {
+      props: { variant, color },
+      style: styleFn(paletteColor)
+    };
+  };
+
+  const commonDisabledStyles = {
+    '&.Mui-disabled': {
+      backgroundColor: theme.vars.palette.action.disabledBackground
+    },
+    '&.Mui-disabled:not(.MuiIconButton-loading)': {
+      color: theme.vars.palette.action.disabled
+    }
+  };
+
+  const colorTextVariants = colors.map((color) =>
+    createColorVariant(
+      color,
+      undefined,
+      (paletteColor) => ({
+        color: paletteColor.main
+      }),
+      theme
+    )
+  );
+
+  const colorContainedVariants = colors.map((color) =>
+    createColorVariant(
+      color,
+      'contained',
+      (paletteColor) => ({
+        color: paletteColor.contrastText,
+        backgroundColor: paletteColor.main,
+        '&:hover': {
+          backgroundColor: paletteColor.dark
+        },
+        ...commonDisabledStyles
+      }),
+      theme
+    )
+  );
+
+  const colorOutlinedVariants = colors.map((color) =>
+    createColorVariant(
+      color,
+      'outlined',
+      (paletteColor) => ({
+        color: paletteColor.main,
+        border: `1px solid ${paletteColor.lighter}`,
+        ...(color === 'secondary' && { color: theme.vars.palette.text.primary, borderColor: theme.vars.palette.divider }),
+        '&.Mui-disabled': {
+          backgroundColor: withAlpha(theme.vars.palette.grey[700], 0.04),
+          borderColor: theme.vars.palette.action.disabledBackground
+        },
+        '&.Mui-disabled:not(.MuiIconButton-loading)': {
+          color: theme.vars.palette.action.disabled
+        }
+      }),
+      theme
+    )
+  );
+
+  return {
+    MuiIconButton: {
+      defaultProps: {
+        disableFocusRipple: true,
+        color: 'primary'
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          '& .MuiTouchRipple-root span': {
+            borderRadius: 8
+          },
+          '&.Mui-disabled': {
+            pointerEvents: 'auto',
+            cursor: 'not-allowed'
+          },
+          '&:focus-visible': {
+            ...generateFocusStyle(theme.vars.palette.primary.main)
+          },
+          variants: [...colorTextVariants, ...colorContainedVariants, ...colorOutlinedVariants]
+        },
+        sizeSmall: { width: 36, height: 36 },
+        sizeMedium: { width: 42, height: 42 }
+      }
+    }
+  };
+}
@@ -0,0 +1,16 @@
+/***************************  COMPONENT - INPUT ADORNMENT  ***************************/
+
+export default function InputAdornment(theme) {
+  return {
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: {
+          color: theme.vars.palette.text.secondary,
+          '& svg': { width: 16, height: 16, color: theme.vars.palette.text.secondary }
+        },
+        positionStart: { marginRight: 6 },
+        positionEnd: { marginLeft: 6 }
+      }
+    }
+  };
+}
@@ -0,0 +1,21 @@
+/***************************  OVERRIDES - INPUT LABEL  ***************************/
+
+export default function InputLabel(theme) {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          ...theme.typography.body2,
+          color: theme.vars.palette.text.primary,
+          marginBottom: 6,
+          '&.Mui-error': {
+            color: theme.vars.palette.error.main
+          }
+        },
+        asterisk: {
+          color: theme.vars.palette.error.main
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,39 @@
+const validPaletteKeys = ['primary', 'secondary', 'error', 'warning', 'info', 'success'];
+const isValidPaletteKey = (value) => validPaletteKeys.includes(value);
+
+/***************************  COMPONENT - LINEAR PROGRESS  ***************************/
+
+export default function LinearProgress(theme) {
+  return {
+    MuiLinearProgress: {
+      defaultProps: {
+        variant: 'determinate'
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => {
+          const paletteColor = isValidPaletteKey(ownerState.color) ? theme.vars.palette[ownerState.color] : undefined;
+          return {
+            '& .MuiLinearProgress-bar': {
+              backgroundColor: paletteColor.main
+            },
+            borderRadius: 24,
+            backgroundColor: theme.vars.palette.grey[100],
+            variants: [
+              {
+                props: { type: 'light' },
+                style: {
+                  '& .MuiLinearProgress-bar': {
+                    opacity: 0.6
+                  }
+                }
+              }
+            ]
+          };
+        },
+        bar: {
+          borderRadius: 24
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,18 @@
+/***************************  OVERRIDES - MENU  ***************************/
+
+export default function ListItemButton(theme) {
+  return {
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          padding: '10px 8px',
+          borderRadius: 4,
+          '&.Mui-selected': {
+            backgroundColor: theme.vars.palette.primary.lighter,
+            '&:hover': { backgroundColor: theme.vars.palette.primary.light }
+          }
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,11 @@
+/***************************  OVERRIDES - MENU  ***************************/
+
+export default function ListItemIcon() {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: { minWidth: 26, color: 'inherit' }
+      }
+    }
+  };
+}
@@ -0,0 +1,14 @@
+/***************************  OVERRIDES - LIST ITEM TEXT  ***************************/
+
+export default function ListItemText() {
+  return {
+    MuiListItemText: {
+      defaultProps: {
+        primaryTypographyProps: { variant: 'body2' }
+      },
+      styleOverrides: {
+        root: { marginTop: 0, marginBottom: 0 }
+      }
+    }
+  };
+}
@@ -0,0 +1,63 @@
+// @project
+import { generateFocusStyle } from '@/utils/generateFocusStyle';
+
+/***************************  COMPONENT - OUTLINED INPUT  ***************************/
+
+export default function OutlinedInput(theme) {
+  return {
+    MuiOutlinedInput: {
+      defaultProps: {
+        size: 'small'
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          boxShadow: theme.vars.customShadows.button,
+          background: theme.vars.palette.background.default,
+          paddingLeft: 10,
+          paddingRight: 10,
+          '&.MuiInputBase-colorPrimary': {
+            '&:not(.Mui-error):not(.Mui-disabled):not(.Mui-focused):hover': {
+              '& .MuiOutlinedInput-notchedOutline': { borderColor: theme.vars.palette.primary.main }
+            },
+            '&:not(.Mui-error).Mui-focused': {
+              '& .MuiOutlinedInput-notchedOutline': { borderWidth: '1px', boxShadow: theme.vars.customShadows.focus }
+            }
+          },
+          '&.Mui-disabled': {
+            cursor: 'not-allowed',
+            input: { cursor: 'not-allowed' },
+            '& .MuiOutlinedInput-notchedOutline': { borderColor: theme.vars.palette.divider },
+            '& .MuiInputAdornment-root': { color: theme.vars.palette.secondary.main, opacity: 0.6 }
+          },
+          '&.Mui-error': {
+            '&.Mui-focused': {
+              '& .MuiOutlinedInput-notchedOutline': { ...generateFocusStyle(theme.vars.palette.error.main), borderWidth: '1px' }
+            }
+          },
+          variants: [
+            {
+              props: { size: 'small' },
+              style: { ...theme.typography.body2, '& input': { paddingTop: 7.94, paddingBottom: 7.94 } }
+            }
+          ]
+        },
+        notchedOutline: { borderColor: theme.vars.palette.divider },
+        colorSecondary: {
+          '&:not(.Mui-error):not(.Mui-disabled):not(.Mui-focused):hover': {
+            '& .MuiOutlinedInput-notchedOutline': { borderColor: theme.vars.palette.grey[600] }
+          },
+          '&:not(.Mui-error).Mui-focused': {
+            '& .MuiOutlinedInput-notchedOutline': {
+              border: '1px solid',
+              borderColor: theme.vars.palette.grey[600],
+              boxShadow: theme.vars.customShadows.focus
+            }
+          }
+        },
+        multiline: { padding: 10 },
+        input: { paddingLeft: 0, paddingRight: 0 }
+      }
+    }
+  };
+}
@@ -0,0 +1,13 @@
+/***************************  OVERRIDES - POPPER  ***************************/
+
+export default function Popper() {
+  return {
+    MuiPopper: {
+      styleOverrides: {
+        root: {
+          zIndex: 1201
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,108 @@
+const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
+
+/***************************  SWITCH - SIZE  ***************************/
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { width: 34, height: 20, base: 14, thumb: 16, trackRadius: 16 };
+    default:
+      return { width: 38, height: 22, base: 16, thumb: 18, trackRadius: 16 };
+  }
+}
+
+function switchStyle(size) {
+  const sizes = getSizeStyle(size);
+
+  return {
+    width: sizes.width,
+    height: sizes.height,
+    '& .MuiSwitch-switchBase': {
+      padding: 2,
+      '&.Mui-checked': {
+        transform: `translateX(${sizes.base}px)`
+      }
+    },
+    '& .MuiSwitch-thumb': {
+      width: sizes.thumb,
+      height: sizes.thumb
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: sizes.trackRadius
+    }
+  };
+}
+
+/***************************  OVERRIDES - SWITCH  ***************************/
+
+export default function Switch(theme) {
+  const colorVariants = colors.map((color) => {
+    const paletteColor = theme.vars.palette[color];
+
+    return {
+      props: { color },
+      style: {
+        '& .MuiSwitch-switchBase': {
+          '&.Mui-checked': {
+            '& ~ .MuiSwitch-track': {
+              backgroundColor: paletteColor.main
+            }
+          },
+          '&:not(.Mui-checked) ~ .MuiSwitch-track': {
+            backgroundColor: theme.vars.palette.secondary.lighter
+          }
+        }
+      }
+    };
+  });
+
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          color: theme.vars.palette.text.primary,
+          padding: 0,
+          display: 'flex',
+          variants: [...colorVariants]
+        },
+        track: {
+          opacity: 1,
+          backgroundColor: theme.vars.palette.secondary.lighter,
+          boxSizing: 'border-box'
+        },
+        thumb: {
+          borderRadius: '50%',
+          transition: theme.transitions.create(['width'], {
+            duration: 200
+          })
+        },
+        switchBase: {
+          '&.Mui-checked': {
+            color: theme.vars.palette.background.default,
+            '& ~ .MuiSwitch-track': {
+              opacity: 1
+            },
+            '&.Mui-disabled': {
+              color: theme.vars.palette.background.paper,
+              '~.MuiSwitch-track': {
+                opacity: 0.1
+              }
+            }
+          },
+          '&.Mui-disabled': {
+            color: theme.vars.palette.background.paper,
+            '~.MuiSwitch-track': {
+              opacity: 0.3
+            },
+            cursor: 'not-allowed',
+            pointerEvents: 'auto',
+            '&:hover': {
+              backgroundColor: 'transparent'
+            }
+          }
+        },
+        sizeSmall: { ...switchStyle('small'), '& ~ .MuiFormControlLabel-label': theme.typography.body2 }
+      }
+    }
+  };
+}
@@ -0,0 +1,51 @@
+// @project
+import { withAlpha } from '@/utils/colorUtils';
+
+/***************************  OVERRIDES - TAB  ***************************/
+
+export default function Tab(theme) {
+  return {
+    MuiTab: {
+      defaultProps: {
+        disableFocusRipple: true
+      },
+      styleOverrides: {
+        root: {
+          ...theme.typography.h6,
+          fontWeight: 400,
+          minWidth: 'auto',
+          minHeight: 42,
+          padding: '10px 16px',
+          color: withAlpha(theme.vars.palette.text.secondary, 0.6),
+          '&:hover': {
+            color: theme.vars.palette.text.secondary
+          },
+          '&:focus-visible': {
+            boxShadow: 'none',
+            backgroundColor: withAlpha(theme.vars.palette.grey[500], 0.25)
+          },
+          '&.Mui-disabled': {
+            color: withAlpha(theme.vars.palette.text.secondary, 0.3),
+            pointerEvents: 'auto',
+            cursor: 'not-allowed',
+            '&:hover': {
+              color: withAlpha(theme.vars.palette.text.secondary, 0.3),
+              backgroundColor: 'transparent'
+            }
+          },
+          '& .MuiTouchRipple-root span': {
+            backgroundColor: withAlpha(theme.vars.palette.secondary.main, 0.3)
+          }
+        },
+        textColorSecondary: {
+          '&.Mui-selected': {
+            color: theme.vars.palette.text.primary,
+            '&:hover': {
+              backgroundColor: withAlpha(theme.vars.palette.grey[200], 0.25)
+            }
+          }
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,87 @@
+// @project
+import { TabsType } from '@/enum';
+import { withAlpha } from '@/utils/colorUtils';
+
+const segmentedBorderRadius = 8;
+
+/***************************  OVERRIDES - TABS  ***************************/
+
+export default function Tabs(theme) {
+  return {
+    MuiTabs: {
+      defaultProps: {
+        indicatorColor: 'secondary',
+        textColor: 'secondary'
+      },
+
+      styleOverrides: {
+        root: {
+          minHeight: 42,
+          variants: [
+            {
+              props: { type: TabsType.SEGMENTED, variant: 'fullWidth' },
+              style: {
+                width: '100%'
+              }
+            },
+            {
+              props: { type: TabsType.SEGMENTED },
+              style: {
+                display: 'inline-flex',
+                borderRadius: segmentedBorderRadius,
+                overflow: 'hidden',
+                minHeight: 38,
+                '& .MuiTabs-indicator': {
+                  display: 'none'
+                },
+                '& .MuiTab-root': {
+                  ...theme.typography.body2,
+                  color: theme.vars.palette.text.secondary,
+                  textTransform: 'none',
+                  minHeight: 38,
+                  padding: '9px 12px',
+                  borderRadius: 0,
+                  border: `1px solid ${theme.vars.palette.grey[200]}`,
+                  '&:first-of-type': {
+                    borderTopLeftRadius: segmentedBorderRadius,
+                    borderBottomLeftRadius: segmentedBorderRadius
+                  },
+                  '&:last-of-type': {
+                    borderTopRightRadius: segmentedBorderRadius,
+                    borderBottomRightRadius: segmentedBorderRadius
+                  },
+                  '&:not(:first-of-type)': {
+                    borderLeft: 'none' // Prevent double border between tab
+                  },
+                  '&.Mui-selected': {
+                    backgroundColor: theme.vars.palette.grey[100],
+                    '&:hover': {
+                      backgroundColor: theme.vars.palette.grey[200]
+                    }
+                  },
+                  '&:hover': {
+                    backgroundColor: withAlpha(theme.vars.palette.grey[200], 0.25)
+                  },
+                  '&.Mui-disabled': {
+                    color: theme.vars.palette.action.disabled
+                  }
+                },
+                '& .Mui-focusVisible': {
+                  backgroundColor: withAlpha(theme.vars.palette.grey[500], 0.25),
+                  '&.Mui-selected': {
+                    backgroundColor: withAlpha(theme.vars.palette.secondary.light, 0.5)
+                  }
+                }
+              }
+            }
+          ]
+        },
+        indicator: ({ ownerState }) => ({
+          ...(ownerState.indicatorColor === 'secondary' && {
+            backgroundColor: theme.vars.palette.text.primary
+          })
+        })
+      }
+    }
+  };
+}
@@ -0,0 +1,24 @@
+/***************************  COMPONENT - TOOLTIP  ***************************/
+
+export default function Tooltip(theme) {
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          ...theme.typography.caption,
+          color: theme.vars.palette.secondary.darker,
+          backgroundColor: theme.vars.palette.secondary.lighter,
+          padding: 6,
+          borderRadius: 8,
+          boxShadow: theme.vars.customShadows.tooltip,
+          '& svg': {
+            opacity: 0.7
+          }
+        },
+        arrow: {
+          color: theme.vars.palette.secondary.lighter
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,69 @@
+// @third-party
+import { merge } from 'lodash-es';
+
+// @project
+import Alert from './Alert';
+import Avatar from './Avatar';
+import AvatarGroup from './AvatarGroup';
+import Backdrop from './Backdrop';
+import BarLabel from './BarLabel';
+import Breadcrumbs from './Breadcrumbs';
+import Button from './Button';
+import CardActions from './CardActions';
+import CardContent from './CardContent';
+import CardHeader from './CardHeader';
+import ChartsAxis from './ChartsAxis';
+import ChartsAxiasHighlight from './ChartsAxisHighlight';
+import ChartsTooltip from './ChartsTooltip';
+import Chip from './Chip';
+import FormControlLabel from './FormControlLabel';
+import FormHelperText from './FormHelperText';
+import IconButton from './IconButton';
+import InputAdornment from './InputAdornment';
+import InputLabel from './InputLabel';
+import LinearProgress from './LinearProgress';
+import ListItemButton from './ListItemButton';
+import ListItemIcon from './ListItemIcon';
+import ListItemText from './ListItemText';
+import OutlinedInput from './OutlinedInput';
+import Popper from './Popper';
+import Switch from './Switch';
+import Tab from './Tab';
+import Tabs from './Tabs';
+import Tooltip from './Tooltip';
+
+/***************************  OVERRIDES - MAIN  ***************************/
+
+export default function ComponentsOverrides(theme) {
+  return merge(
+    Alert(theme),
+    Avatar(theme),
+    AvatarGroup(),
+    Backdrop(theme),
+    BarLabel(theme),
+    Breadcrumbs(theme),
+    Button(theme),
+    CardActions(theme),
+    CardContent(),
+    CardHeader(theme),
+    ChartsAxis(theme),
+    ChartsAxiasHighlight(theme),
+    ChartsTooltip(theme),
+    Chip(theme),
+    FormControlLabel(theme),
+    FormHelperText(theme),
+    IconButton(theme),
+    InputAdornment(theme),
+    InputLabel(theme),
+    LinearProgress(theme),
+    ListItemButton(theme),
+    ListItemIcon(),
+    ListItemText(),
+    OutlinedInput(theme),
+    Popper(),
+    Switch(theme),
+    Tab(theme),
+    Tabs(theme),
+    Tooltip(theme)
+  );
+}