@mui/docs 9.0.0-alpha.2 → 9.0.0-alpha.4

package/branding/brandingTheme.mjs

@@ -1,1527 +0,0 @@
-import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
-import { createTheme, Theme, alpha } from '@mui/material/styles';
-// TODO: enable this once types conflict is fixed
-// declare module '@mui/material/Button' {
-//   interface ButtonPropsVariantOverrides {
-//     code: true;
-//   }
-// }
-
-const defaultTheme = createTheme();
-export const blue = {
-  50: 'hsl(210, 100%, 96%)',
-  100: 'hsl(210, 100%, 90%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 70%)',
-  400: 'hsl(210, 100%, 60%)',
-  main: 'hsl(210, 100%, 45%)',
-  500: 'hsl(210, 100%, 45%)',
-  600: 'hsl(210, 100%, 42%)',
-  700: 'hsl(210, 100%, 38%)',
-  800: 'hsl(210, 100%, 30%)',
-  900: 'hsl(210, 100%, 23%)'
-};
-export const blueDark = {
-  50: 'hsl(210, 14%, 92%)',
-  100: 'hsl(210, 14%, 87%)',
-  200: 'hsl(210, 14%, 72%)',
-  300: 'hsl(210, 14%, 56%)',
-  main: 'hsl(210, 14%, 56%)',
-  400: 'hsl(210, 14%, 36%)',
-  500: 'hsl(210, 14%, 28%)',
-  600: 'hsl(210, 14%, 22%)',
-  700: 'hsl(210, 14%, 13%)',
-  800: 'hsl(210, 14%, 9%)',
-  900: 'hsl(210, 14%, 7%)'
-};
-export const grey = {
-  50: 'hsl(215, 15%, 97%)',
-  100: 'hsl(215, 15%, 92%)',
-  200: 'hsl(215, 15%, 89%)',
-  300: 'hsl(215, 15%, 82%)',
-  400: 'hsl(215, 15%, 75%)',
-  500: 'hsl(215, 15%, 65%)',
-  600: 'hsl(215, 15%, 50%)',
-  700: 'hsl(215, 15%, 40%)',
-  800: 'hsl(215, 15%, 22%)',
-  900: 'hsl(215, 15%, 12%)'
-};
-export const error = {
-  50: 'hsl(355, 98%, 97%)',
-  100: 'hsl(355, 98%, 93%)',
-  200: 'hsl(355, 98%, 87%)',
-  300: 'hsl(355, 98%, 80%)',
-  400: 'hsl(355, 98%, 74%)',
-  500: 'hsl(355, 98%, 66%)',
-  main: 'hsl(355, 98%, 66%)',
-  600: 'hsl(355, 98%, 46%)',
-  700: 'hsl(355, 98%, 39%)',
-  800: 'hsl(355, 98%, 29%)',
-  900: 'hsl(355, 98%, 17%)'
-};
-export const success = {
-  50: 'hsl(144, 72%, 95%)',
-  100: 'hsl(144, 72%, 87%)',
-  200: 'hsl(144, 72%, 77%)',
-  300: 'hsl(144, 72%, 66%)',
-  400: 'hsl(144, 72%, 56%)',
-  500: 'hsl(144, 72%, 46%)',
-  600: 'hsl(144, 72%, 41%)',
-  700: 'hsl(144, 72%, 37%)',
-  800: 'hsl(144, 72%, 32%)',
-  900: 'hsl(144, 72%, 21%)'
-};
-export const warning = {
-  50: 'hsl(48, 100%, 96%)',
-  100: 'hsl(48, 100%, 88%)',
-  200: 'hsl(48, 100%, 82%)',
-  300: 'hsl(48, 100%, 64%)',
-  400: 'hsl(48, 100%, 48%)',
-  500: 'hsl(48, 100%, 44%)',
-  main: 'hsl(48, 100%, 44%)',
-  600: 'hsl(40, 100%, 40%)',
-  700: 'hsl(36, 100%, 34%)',
-  800: 'hsl(36, 100%, 27%)',
-  900: 'hsl(36, 100%, 18%)'
-};
-const systemFont = ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'];
-export const getMetaThemeColor = mode => {
-  const themeColor = {
-    light: blue[600],
-    dark: blueDark[900]
-  };
-  return themeColor[mode];
-};
-export const getDesignTokens = mode => ({
-  palette: {
-    primary: {
-      ...blue,
-      ...(mode === 'dark' && {
-        main: blue[400]
-      })
-    },
-    secondary: {
-      ...grey,
-      ...(mode === 'light' && {
-        main: blueDark[100],
-        contrastText: blueDark[600]
-      }),
-      ...(mode === 'dark' && {
-        main: blueDark[700],
-        contrastText: blueDark[600]
-      })
-    },
-    divider: mode === 'dark' ? alpha(blueDark[500], 0.3) : grey[100],
-    primaryDark: blueDark,
-    mode,
-    ...(mode === 'dark' && {
-      background: {
-        default: blueDark[900],
-        paper: alpha(blueDark[800], 0.8)
-      }
-    }),
-    common: {
-      black: 'hsl(200, 10%, 4%)'
-    },
-    text: {
-      ...(mode === 'light' && {
-        primary: grey[900],
-        secondary: grey[800],
-        tertiary: grey[700]
-      }),
-      ...(mode === 'dark' && {
-        primary: '#fff',
-        secondary: grey[400],
-        tertiary: grey[500]
-      })
-    },
-    grey: {
-      ...grey,
-      ...(mode === 'light' && {
-        main: grey[100],
-        contrastText: grey[600]
-      }),
-      ...(mode === 'dark' && {
-        main: grey[700],
-        contrastText: grey[600]
-      })
-    },
-    error,
-    success: {
-      ...success,
-      ...(mode === 'dark' && {
-        main: success[600]
-      }),
-      ...(mode === 'light' && {
-        main: success[700]
-      })
-    },
-    warning,
-    gradients: {
-      radioSubtle: mode === 'dark' ? `radial-gradient(100% 100% at 100% 100%, transparent 0, ${alpha(blue[900], 0.3)} 300%)` : `radial-gradient(100% 90% at 50% 0, transparent 0, ${alpha(blue[100], 0.3)} 300%)`,
-      linearSubtle: mode === 'dark' ? `linear-gradient(0deg, ${alpha(blue[900], 0.1)}, ${alpha(blueDark[900], 0.5)})` : `linear-gradient(0deg, ${alpha(blue[50], 0.4)}, ${alpha(grey[50], 0.1)})`
-    }
-  },
-  shape: {
-    borderRadius: 12
-  },
-  spacing: 8,
-  typography: {
-    fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
-    // Match VS Code
-    // https://github.com/microsoft/vscode/blob/b38691f611d1ce3ef437c67a1b047c757b7b4e53/src/vs/editor/common/config/editorOptions.ts#L4578-L4580
-    // https://github.com/microsoft/vscode/blob/d950552131d7350a45dac8b59bf179469c36c2ac/src/vs/editor/standalone/browser/standalone-tokens.css#L10
-    fontFamilyCode: ['Menlo',
-    // macOS
-    'Consolas',
-    // Windows
-    '"Droid Sans Mono"',
-    // Linux
-    'monospace' // fallback
-    ].join(','),
-    fontFamilyTagline: ['"General Sans"', ...systemFont].join(','),
-    fontFamilySystem: systemFont.join(','),
-    fontWeightSemiBold: 600,
-    fontWeightExtraBold: 800,
-    h1: {
-      fontFamily: ['"General Sans"', ...systemFont].join(','),
-      fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)',
-      fontWeight: 600,
-      lineHeight: 78 / 70,
-      letterSpacing: -0.2,
-      ...(mode === 'light' && {
-        color: blueDark[900]
-      })
-    },
-    h2: {
-      fontFamily: ['"General Sans"', ...systemFont].join(','),
-      fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
-      fontWeight: 600,
-      lineHeight: 44 / 36,
-      letterSpacing: -0.2,
-      color: mode === 'dark' ? grey[100] : blueDark[700]
-    },
-    h3: {
-      fontFamily: ['"General Sans"', ...systemFont].join(','),
-      fontSize: defaultTheme.typography.pxToRem(36),
-      lineHeight: 44 / 36,
-      letterSpacing: 0.2
-    },
-    h4: {
-      fontFamily: ['"General Sans"', ...systemFont].join(','),
-      fontSize: defaultTheme.typography.pxToRem(30),
-      lineHeight: 42 / 28,
-      letterSpacing: 0.2
-    },
-    h5: {
-      fontSize: defaultTheme.typography.pxToRem(24),
-      lineHeight: 36 / 24,
-      letterSpacing: 0.1,
-      color: mode === 'dark' ? blue[300] : blue.main
-    },
-    h6: {
-      fontSize: defaultTheme.typography.pxToRem(20),
-      lineHeight: 30 / 20
-    },
-    button: {
-      textTransform: 'initial',
-      fontWeight: 700,
-      letterSpacing: 0
-    },
-    subtitle1: {
-      fontSize: defaultTheme.typography.pxToRem(18),
-      lineHeight: 24 / 18,
-      letterSpacing: 0,
-      fontWeight: 500
-    },
-    body1: {
-      fontSize: defaultTheme.typography.pxToRem(16),
-      lineHeight: 24 / 16,
-      letterSpacing: 0
-    },
-    body2: {
-      fontSize: defaultTheme.typography.pxToRem(14),
-      lineHeight: 21 / 14,
-      letterSpacing: 0
-    },
-    caption: {
-      display: 'inline-block',
-      fontSize: defaultTheme.typography.pxToRem(12),
-      lineHeight: 18 / 12,
-      letterSpacing: 0,
-      fontWeight: 700
-    },
-    allVariants: {
-      scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)'
-    }
-  },
-  /**
-   * This utility exists to help transitioning to CSS variables page by page (prevent dark mode flicker).
-   * It will use the proper styling method based on the theme because the component might be on the page that does not support CSS variables yet.
-   *
-   * 😓 Without this utility:
-   * {
-   *   ...theme.vars ? {
-   *     color: theme.vars.palette.primary.main,
-   *     [theme.getColorScheme('dark')]: {
-   *       color: '#fff',
-   *     }
-   *   } : {
-   *     color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
-   *   }
-   * }
-   *
-   * 🤩 Using the utility:
-   * {
-   *   color: (theme.vars || theme).palette.primary.main,
-   *   ...theme.applyDarkStyles({
-   *     color: '#fff',
-   *   }),
-   * }
-   *
-   * -------------------------------------------------------------------------------------------------
-   * 💡 This util should be used in an array if the styles contain pseudo classes or nested selectors:
-   *
-   * ❌ There is a chance that the upper selectors could be overridden
-   * {
-   *    // the whole selector could be overridden
-   *   '&::before': {
-   *     color: ...
-   *   },
-   *   ...theme.applyDarkStyles({
-   *      '&::before': {
-   *        color: ...
-   *      }
-   *   })
-   * }
-   *
-   * ✅ use an array (supports in both emotion and styled-components)
-   * Only the `color` will be overridden in dark mode.
-   *  [
-   *    '&::before': {
-   *      color: ...
-   *    },
-   *    theme.applyDarkStyles({
-   *      '&::before': {
-   *        color: ...
-   *      }
-   *    })
-   *  ]
-   */
-  applyDarkStyles(css) {
-    return this.applyStyles('dark', css);
-  }
-});
-export function getThemedComponents() {
-  return {
-    components: {
-      MuiAlert: {
-        styleOverrides: {
-          root: {
-            padding: '16px',
-            gap: '12px',
-            fontSize: '1rem',
-            '& * ul': {
-              paddingLeft: '24px !important',
-              marginBottom: '0 !important'
-            },
-            // !important is used here to override the anchor tag color coming from MarkdownElement
-            '& .MuiAlert-icon': {
-              margin: 0,
-              marginTop: '2px',
-              padding: 0
-            },
-            '& .MuiAlert-message': {
-              padding: 0
-            }
-          },
-          icon: {
-            paddingTop: 10,
-            paddingBottom: 0
-          },
-          standardWarning: ({
-            theme
-          }) => [
-          // same styles from the MarkdownElement callout
-          {
-            backgroundColor: alpha(theme.palette.warning[50], 0.5),
-            color: (theme.vars || theme).palette.grey[900],
-            border: '1px solid',
-            borderColor: alpha(theme.palette.warning[700], 0.15),
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.warning[600]
-            },
-            '& * a': {
-              // !important is used here to override the anchor tag color coming from MarkdownElement
-              color: `${(theme.vars || theme).palette.warning[900]} !important`,
-              textDecorationColor: `${alpha(theme.palette.warning.main, 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.warning[700], 0.12),
-            color: (theme.vars || theme).palette.warning[50],
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.warning[400]
-            },
-            '& * a': {
-              color: `${(theme.vars || theme).palette.warning[100]} !important`,
-              textDecorationColor: `${alpha(theme.palette.warning[600], 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
-              }
-            }
-          })],
-          standardSuccess: ({
-            theme
-          }) => [
-          // same styles from the MarkdownElement callout
-          {
-            backgroundColor: alpha(theme.palette.success[50], 0.5),
-            color: (theme.vars || theme).palette.success[900],
-            border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.success[600]
-            },
-            '& * a': {
-              // !important is used here to override the anchor tag color coming from MarkdownElement
-              color: `${(theme.vars || theme).palette.success[900]} !important`,
-              textDecorationColor: `${alpha(theme.palette.success.main, 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.success[700], 0.12),
-            color: (theme.vars || theme).palette.success[50],
-            borderColor: alpha(theme.palette.success[400], 0.1),
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.success[500]
-            },
-            '& * a': {
-              color: `${(theme.vars || theme).palette.success[100]} !important`,
-              textDecorationColor: `${alpha(theme.palette.success[600], 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
-              }
-            }
-          })]
-        }
-      },
-      MuiButtonBase: {
-        defaultProps: {
-          disableTouchRipple: true,
-          disableRipple: true
-        },
-        styleOverrides: {
-          root: ({
-            theme
-          }) => ({
-            transition: 'all 100ms ease-in',
-            '&:focus-visible': {
-              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-              outlineOffset: 2
-            }
-          })
-        }
-      },
-      MuiButton: {
-        defaultProps: {
-          disableElevation: true
-        },
-        styleOverrides: {
-          root: ({
-            theme,
-            ownerState
-          }) => ({
-            transition: 'all 120ms ease-in',
-            ...(ownerState.size === 'large' && {
-              ...theme.typography.body1,
-              lineHeight: 1.5,
-              fontWeight: theme.typography.fontWeightMedium,
-              padding: theme.spacing('8px', '12px', '8px', '14px'),
-              borderRadius: 10,
-              '& > span': {
-                transition: '0.2s',
-                marginLeft: 4
-              },
-              '&:hover > span': {
-                transform: 'translateX(2px)'
-              }
-            }),
-            ...(ownerState.size === 'medium' && {
-              fontSize: defaultTheme.typography.pxToRem(15),
-              fontWeight: theme.typography.fontWeightMedium,
-              lineHeight: 1.25,
-              padding: theme.spacing('8px', '10px', '10px', '12px'),
-              borderRadius: 10,
-              '& > span': {
-                transition: '0.2s',
-                marginLeft: 4
-              },
-              '&:hover > span': {
-                transform: 'translateX(2px)'
-              }
-            }),
-            ...(ownerState.size === 'small' && {
-              padding: '6px 10px',
-              fontFamily: theme.typography.fontFamily,
-              fontSize: defaultTheme.typography.pxToRem(13),
-              fontWeight: theme.typography.fontWeightMedium,
-              borderRadius: 10,
-              '& .MuiButton-startIcon': {
-                transition: '0.15s',
-                marginRight: 4,
-                marginLeft: -1
-              },
-              '& .MuiButton-endIcon': {
-                transition: '0.15s',
-                marginLeft: 4
-              },
-              '&:hover': {
-                '& .MuiButton-startIcon': {
-                  transform: 'translateX(-2px)'
-                },
-                '& .MuiButton-endIcon': {
-                  transform: 'translateX(2px)'
-                }
-              }
-            }),
-            ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-              color: (theme.vars || theme).palette.text.primary,
-              backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
-              borderColor: (theme.vars || theme).palette.primaryDark[100],
-              boxShadow: `#FFF 0 1px 0 1px inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.grey[50]
-              },
-              '&:active': {
-                backgroundColor: (theme.vars || theme).palette.grey[100]
-              },
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primaryDark[100],
-                borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-                backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                boxShadow: `${alpha(theme.palette.primaryDark[700], 0.3)} 0 1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                  borderColor: (theme.vars || theme).palette.primaryDark[600]
-                },
-                '&:active': {
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[800]
-                },
-                '&.Mui-disabled:not(.MuiButton-loading)': {
-                  color: theme.palette.grey[500]
-                }
-              })
-            }),
-            ...(ownerState.variant === 'outlined' && ownerState.color === 'primary' && {
-              color: (theme.vars || theme).palette.primary[600],
-              backgroundColor: alpha(theme.palette.primary[50], 0.2),
-              borderColor: (theme.vars || theme).palette.primary[100],
-              boxShadow: `${alpha(theme.palette.primary[100], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primary[50],
-                borderColor: (theme.vars || theme).palette.primary[200]
-              },
-              '&:active': {
-                backgroundColor: alpha(theme.palette.primary[100], 0.7)
-              },
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[200],
-                borderColor: alpha(theme.palette.primary[900], 0.7),
-                backgroundColor: alpha(theme.palette.primary[900], 0.2),
-                boxShadow: `${alpha(theme.palette.primary[900], 0.2)} 0 1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
-                '&:hover': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.5),
-                  borderColor: (theme.vars || theme).palette.primary[900]
-                },
-                '&:active': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.3)
-                },
-                '&.Mui-disabled:not(.MuiButton-loading)': {
-                  background: 'none',
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                  color: theme.palette.grey[500]
-                }
-              })
-            }),
-            ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && {
-              color: '#fff',
-              textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
-              backgroundColor: (theme.vars || theme).palette.primary[500],
-              backgroundImage: 'transparent',
-              border: '1px solid ',
-              borderColor: (theme.vars || theme).palette.primary[600],
-              boxShadow: `${alpha(theme.palette.primary[400], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.primary[800], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primary[700],
-                borderColor: (theme.vars || theme).palette.primary[800]
-              },
-              '&:active': {
-                backgroundColor: (theme.vars || theme).palette.primary[800],
-                borderColor: (theme.vars || theme).palette.primary[600],
-                boxShadow: `${alpha(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
-              },
-              '&.Mui-disabled': {
-                color: theme.palette.grey[700],
-                textShadow: 'none',
-                borderColor: theme.palette.grey[400]
-              },
-              ...theme.applyDarkStyles({
-                '&.Mui-disabled:not(.MuiButton-loading)': {
-                  color: theme.palette.grey[400],
-                  textShadow: 'none',
-                  borderColor: theme.palette.grey[800]
-                }
-              })
-            }),
-            ...(ownerState.variant === 'contained' && ownerState.color === 'secondary' && {
-              color: '#fff',
-              textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
-              backgroundColor: (theme.vars || theme).palette.primaryDark[500],
-              backgroundImage: 'transparent',
-              border: '1px solid ',
-              borderColor: (theme.vars || theme).palette.primaryDark[600],
-              boxShadow: `${alpha(theme.palette.primaryDark[400], 0.5)} 0 1px 0 1px inset, ${alpha(theme.palette.primaryDark[800], 0.7)} 0 -1px 0 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primaryDark[600],
-                borderColor: (theme.vars || theme).palette.primaryDark[700]
-              },
-              '&:active': {
-                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                borderColor: (theme.vars || theme).palette.primaryDark[600],
-                boxShadow: `${alpha(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
-              },
-              '&.Mui-disabled': {
-                color: theme.palette.grey[700],
-                textShadow: 'none',
-                borderColor: theme.palette.grey[400]
-              },
-              ...theme.applyDarkStyles({
-                '&.Mui-disabled:not(.MuiButton-loading)': {
-                  color: theme.palette.grey[400],
-                  textShadow: 'none',
-                  borderColor: theme.palette.grey[800]
-                }
-              })
-            }),
-            ...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
-              color: (theme.vars || theme).palette.text.secondary,
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.grey[50]
-              },
-              '&:active': {
-                backgroundColor: (theme.vars || theme).palette.grey[200]
-              },
-              ...theme.applyDarkStyles({
-                '&:hover': {
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5)
-                },
-                '&:active': {
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
-                },
-                '&.Mui-disabled': {
-                  color: theme.palette.grey[500]
-                }
-              })
-            }),
-            ...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
-              color: (theme.vars || theme).palette.primary[600],
-              '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[100], 0.3)
-              },
-              '&:active': {
-                backgroundColor: alpha(theme.palette.primary[100], 0.5)
-              },
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300],
-                '&:hover': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.3)
-                },
-                '&:active': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.1)
-                },
-                '&.Mui-disabled:not(.MuiButton-loading)': {
-                  color: theme.palette.grey[500]
-                }
-              })
-            })
-          })
-        },
-        variants: [{
-          // @ts-ignore internal repo module augmentation issue
-          props: {
-            variant: 'code'
-          },
-          style: ({
-            theme
-          }) => [{
-            cursor: 'copy',
-            padding: 0,
-            width: 'max-content',
-            backgroundColor: 'transparent',
-            color: (theme.vars || theme).palette.grey[600],
-            fontFamily: theme.typography.fontFamilyCode,
-            fontWeight: 400,
-            fontSize: defaultTheme.typography.pxToRem(12),
-            lineHeight: 21 / 14,
-            letterSpacing: 0,
-            WebkitFontSmoothing: 'subpixel-antialiased',
-            '& .MuiButton-startIcon': {
-              color: (theme.vars || theme).palette.grey[400]
-            },
-            '& .MuiButton-endIcon': {
-              display: 'inline-block',
-              position: 'absolute',
-              color: (theme.vars || theme).palette.primary.main,
-              right: -22,
-              top: -1,
-              opacity: 0,
-              transitionProperty: 'opacity',
-              transitionDuration: '100ms',
-              transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)'
-            },
-            '&:hover, &.Mui-focusVisible': {
-              backgroundColor: 'transparent',
-              color: (theme.vars || theme).palette.primary.main,
-              '& .MuiButton-endIcon': {
-                color: (theme.vars || theme).palette.primary.main,
-                opacity: 1
-              }
-            }
-          }, theme.applyDarkStyles({
-            '& .MuiButton-endIcon': {
-              color: (theme.vars || theme).palette.primary[300]
-            },
-            '&:hover, &.Mui-focusVisible': {
-              color: (theme.vars || theme).palette.primary[300],
-              '& .MuiButton-endIcon': {
-                opacity: 1
-              }
-            }
-          })]
-        }, {
-          // @ts-ignore internal repo module augmentation issue
-          props: {
-            variant: 'codeOutlined'
-          },
-          style: ({
-            theme
-          }) => [{
-            display: 'inline-block',
-            justifyContent: 'start',
-            overflowX: 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            position: 'relative',
-            border: '1px solid',
-            color: (theme.vars || theme).palette.grey[900],
-            backgroundColor: alpha(theme.palette.primary[50], 0.3),
-            borderColor: (theme.vars || theme).palette.grey[200],
-            boxShadow: `0px 2px 2px ${alpha(theme.palette.primary[100], 0.2)}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.2)}`,
-            fontFamily: theme.typography.fontFamilyCode,
-            fontWeight: 400,
-            fontSize: defaultTheme.typography.pxToRem(12),
-            lineHeight: 21 / 14,
-            letterSpacing: 0,
-            WebkitFontSmoothing: 'subpixel-antialiased',
-            '& .MuiButton-endIcon': {
-              display: 'inline-block',
-              position: 'absolute',
-              top: 12,
-              right: 0,
-              marginRight: 10,
-              color: (theme.vars || theme).palette.grey[600]
-            },
-            '&:hover, &.Mui-focusVisible': {
-              borderColor: (theme.vars || theme).palette.primary.main,
-              backgroundColor: (theme.vars || theme).palette.primary[50],
-              color: (theme.vars || theme).palette.primary[600],
-              '& .MuiButton-endIcon': {
-                color: (theme.vars || theme).palette.primary.main
-              }
-            }
-          }, theme.applyDarkStyles({
-            color: (theme.vars || theme).palette.grey[500],
-            borderColor: (theme.vars || theme).palette.primaryDark[600],
-            backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-            boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)',
-            '& .MuiButton-endIcon': {
-              color: (theme.vars || theme).palette.grey[400]
-            },
-            '&:hover, &.Mui-focusVisible': {
-              backgroundColor: (theme.vars || theme).palette.primary[900],
-              color: (theme.vars || theme).palette.primary[100],
-              '& .MuiButton-endIcon': {
-                color: (theme.vars || theme).palette.primary[300]
-              }
-            }
-          })]
-        }, {
-          // @ts-ignore internal repo module augmentation issue
-          props: {
-            variant: 'link'
-          },
-          style: ({
-            theme
-          }) => ({
-            marginBottom: 1,
-            fontSize: theme.typography.pxToRem(14),
-            fontWeight: theme.typography.fontWeightBold,
-            color: (theme.vars || theme).palette.primary[600],
-            '&:hover': {
-              backgroundColor: (theme.vars || theme).palette.primary[50]
-            },
-            ...theme.applyDarkStyles({
-              color: (theme.vars || theme).palette.primary[300],
-              '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[800], 0.3)
-              }
-            })
-          })
-        }]
-      },
-      MuiIconButton: {
-        styleOverrides: {
-          root: ({
-            theme,
-            ownerState
-          }) => ({
-            borderRadius: theme.shape.borderRadius,
-            transition: 'all 100ms ease-in',
-            '&:hover': {
-              borderColor: (theme.vars || theme).palette.grey[300],
-              background: (theme.vars || theme).palette.grey[50],
-              ...theme.applyDarkStyles({
-                borderColor: (theme.vars || theme).palette.primaryDark[600],
-                background: alpha(theme.palette.primaryDark[700], 0.8)
-              })
-            },
-            '&:active': {
-              background: (theme.vars || theme).palette.grey[100],
-              ...theme.applyDarkStyles({
-                background: theme.palette.primaryDark[800]
-              })
-            },
-            ...(ownerState.size === 'small' && {
-              height: 32,
-              width: 32,
-              '& .MuiSvgIcon-root': {
-                fontSize: defaultTheme.typography.pxToRem(18)
-              }
-            })
-          })
-        },
-        variants: [{
-          props: {
-            color: 'primary'
-          },
-          style: ({
-            theme
-          }) => [{
-            color: (theme.vars || theme).palette.primary.main,
-            backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
-            border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
-            '&:hover': {
-              borderColor: (theme.vars || theme).palette.grey[300],
-              background: (theme.vars || theme).palette.grey[50],
-              boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
-            },
-            '&:active': {
-              background: (theme.vars || theme).palette.grey[100]
-            }
-          }, theme.applyDarkStyles({
-            color: (theme.vars || theme).palette.primary[300],
-            borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-            backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-            boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
-            '&:hover': {
-              borderColor: (theme.vars || theme).palette.primaryDark[600],
-              background: alpha(theme.palette.primaryDark[700], 0.8),
-              boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
-            },
-            '&:active': {
-              background: theme.palette.primaryDark[800]
-            }
-          })]
-        }, {
-          props: {
-            color: 'info'
-          },
-          style: ({
-            theme
-          }) => [{
-            color: (theme.vars || theme).palette.text.secondary,
-            backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
-            border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
-            '&:hover': {
-              color: (theme.vars || theme).palette.text.primary,
-              borderColor: (theme.vars || theme).palette.grey[300],
-              background: (theme.vars || theme).palette.grey[50],
-              boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
-            },
-            '&:active': {
-              background: (theme.vars || theme).palette.grey[100]
-            }
-          }, theme.applyDarkStyles({
-            borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-            backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-            boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
-            '&:hover': {
-              borderColor: (theme.vars || theme).palette.primaryDark[600],
-              background: alpha(theme.palette.primaryDark[700], 0.8),
-              boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
-            },
-            '&:active': {
-              background: theme.palette.primaryDark[800]
-            }
-          })]
-        }]
-      },
-      MuiMenu: {
-        styleOverrides: {
-          paper: ({
-            theme
-          }) => [{
-            padding: '6px',
-            minWidth: 160,
-            color: (theme.vars || theme).palette.text.secondary,
-            backgroundImage: 'none',
-            border: '1px solid',
-            backgroundColor: (theme.vars || theme).palette.background.paper,
-            borderColor: (theme.vars || theme).palette.grey[200],
-            '& .MuiMenu-list': {
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '2px',
-              '& .MuiDivider-root': {
-                margin: '4px -8px 4px -8px'
-              }
-            },
-            '& .MuiMenuItem-root': {
-              padding: '6px 8px',
-              borderRadius: '6px',
-              fontSize: theme.typography.pxToRem(14),
-              fontWeight: theme.typography.fontWeightMedium,
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.grey[100],
-                color: (theme.vars || theme).palette.text.primary
-              },
-              '&:focus-visible': {
-                outline: 'none'
-              },
-              '&.Mui-selected': {
-                fontWeight: 500,
-                color: (theme.vars || theme).palette.primary[600],
-                backgroundColor: alpha(theme.palette.primary[100], 0.6)
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: (theme.vars || theme).palette.primaryDark[900],
-            borderColor: (theme.vars || theme).palette.primaryDark[700],
-            '& .MuiMenuItem-root': {
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primaryDark[700]
-              },
-              '&.Mui-selected': {
-                color: (theme.vars || theme).palette.primary[200],
-                backgroundColor: alpha(theme.palette.primary[900], 0.4)
-              }
-            }
-          })]
-        }
-      },
-      MuiPopover: {
-        styleOverrides: {
-          paper: ({
-            theme
-          }) => ({
-            boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
-            ...theme.applyDarkStyles({
-              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)'
-            })
-          })
-        }
-      },
-      MuiDivider: {
-        styleOverrides: {
-          root: ({
-            theme
-          }) => ({
-            borderColor: (theme.vars || theme).palette.divider
-          })
-        }
-      },
-      MuiLink: {
-        defaultProps: {
-          underline: 'none'
-        },
-        styleOverrides: {
-          root: ({
-            theme
-          }) => ({
-            display: 'inline-flex',
-            alignItems: 'center',
-            fontWeight: theme.typography.fontWeightSemiBold,
-            '&.MuiTypography-body1 > svg': {
-              marginTop: 2
-            },
-            '& svg:last-child': {
-              marginLeft: 2
-            },
-            '&:focus-visible': {
-              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-              outlineOffset: 2
-            }
-          })
-        },
-        variants: [{
-          props: {
-            color: 'primary'
-          },
-          style: ({
-            theme
-          }) => [{
-            color: (theme.vars || theme).palette.primary[600],
-            '&:hover': {
-              color: (theme.vars || theme).palette.primary[700]
-            }
-          }, theme.applyDarkStyles({
-            color: (theme.vars || theme).palette.primary[300],
-            '&:hover': {
-              color: (theme.vars || theme).palette.primary[200]
-            }
-          })]
-        }]
-      },
-      MuiChip: {
-        styleOverrides: {
-          root: ({
-            ownerState: {
-              color,
-              variant
-            },
-            theme
-          }) => ({
-            fontWeight: theme.typography.fontWeightSemiBold,
-            paddingBottom: 0.2,
-            ...(variant === 'outlined' && color === 'default' && {
-              backgroundColor: alpha(theme.palette.grey[50], 0.5),
-              color: (theme.vars || theme).palette.grey[900],
-              borderColor: (theme.vars || theme).palette.grey[200],
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.grey[100],
-                color: (theme.vars || theme).palette.grey[900]
-              },
-              ...theme.applyDarkStyles({
-                backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
-                color: (theme.vars || theme).palette.grey[300],
-                borderColor: alpha(theme.palette.primaryDark[500], 0.5),
-                '&:hover': {
-                  color: (theme.vars || theme).palette.grey[300],
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700]
-                }
-              })
-            }),
-            ...(variant === 'outlined' && color === 'info' && {
-              backgroundColor: alpha(theme.palette.grey[50], 0.5),
-              color: (theme.vars || theme).palette.grey[900],
-              borderColor: (theme.vars || theme).palette.grey[200],
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.grey[300],
-                backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
-                borderColor: (theme.vars || theme).palette.primaryDark[600]
-              })
-            }),
-            ...(variant === 'outlined' && color === 'primary' && {
-              borderColor: (theme.vars || theme).palette.primary[100],
-              backgroundColor: alpha(theme.palette.primary[100], 0.2),
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300],
-                borderColor: alpha(theme.palette.primary[500], 0.2),
-                backgroundColor: alpha(theme.palette.primary[700], 0.2)
-              })
-            }),
-            ...(variant === 'outlined' && color === 'success' && {
-              borderColor: (theme.vars || theme).palette.success[100],
-              backgroundColor: (theme.vars || theme).palette.success[50],
-              color: (theme.vars || theme).palette.success[900],
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.success[300],
-                borderColor: alpha(theme.palette.success[300], 0.2),
-                background: alpha(theme.palette.success[800], 0.2)
-              })
-            }),
-            ...(variant === 'filled' && {
-              ...(color === 'default' && {
-                border: '1px solid transparent',
-                color: (theme.vars || theme).palette.primary[700],
-                backgroundColor: alpha(theme.palette.primary[100], 0.5),
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[100]
-                },
-                ...theme.applyDarkStyles({
-                  color: '#fff',
-                  backgroundColor: alpha(theme.palette.primaryDark[500], 0.8),
-                  '&:hover': {
-                    backgroundColor: (theme.vars || theme).palette.primaryDark[600]
-                  }
-                })
-              }),
-              ...(color === 'primary' && {
-                color: (theme.vars || theme).palette.primary[600],
-                backgroundColor: alpha(theme.palette.primary[100], 0.4),
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[100]
-                },
-                '& .MuiChip-deleteIcon': {
-                  color: (theme.vars || theme).palette.primary[600],
-                  '&:hover': {
-                    color: (theme.vars || theme).palette.primary[700]
-                  }
-                },
-                '&.Mui-focusVisible': {
-                  backgroundColor: (theme.vars || theme).palette.primary[200]
-                },
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[100],
-                  backgroundColor: alpha(theme.palette.primary[800], 0.5),
-                  '&:hover': {
-                    backgroundColor: alpha(theme.palette.primary[900], 0.5)
-                  },
-                  '& .MuiChip-deleteIcon': {
-                    color: (theme.vars || theme).palette.primary[100],
-                    '&:hover': {
-                      color: (theme.vars || theme).palette.primary[50]
-                    }
-                  }
-                })
-              })
-            }),
-            // for labelling product in the search
-            // @ts-ignore internal repo module augmentation issue
-            ...(variant === 'light' && {
-              ...(color === 'default' && {
-                color: (theme.vars || theme).palette.primary[700],
-                backgroundColor: alpha(theme.palette.primary[100], 0.3),
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[200],
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5)
-                })
-              }),
-              ...(color === 'warning' && {
-                color: (theme.vars || theme).palette.warning[900],
-                backgroundColor: (theme.vars || theme).palette.warning[100],
-                ...theme.applyDarkStyles({
-                  color: '#fff',
-                  backgroundColor: (theme.vars || theme).palette.warning[900]
-                })
-              }),
-              ...(color === 'success' && {
-                color: (theme.vars || theme).palette.success[900],
-                backgroundColor: (theme.vars || theme).palette.success[100],
-                ...theme.applyDarkStyles({
-                  color: '#fff',
-                  backgroundColor: (theme.vars || theme).palette.success[900]
-                })
-              })
-            })
-          })
-        }
-      },
-      MuiList: {
-        styleOverrides: {
-          root: {
-            padding: 0
-          }
-        }
-      },
-      MuiListItemButton: {
-        styleOverrides: {
-          root: ({
-            theme
-          }) => [{
-            padding: '8px',
-            textTransform: 'none',
-            fontWeight: 500,
-            fontSize: theme.typography.pxToRem(14),
-            color: theme.palette.grey[700],
-            borderRadius: 0,
-            '&:hover': {
-              backgroundColor: theme.palette.grey[50]
-            },
-            '&.Mui-selected': {
-              borderRadius: 10,
-              border: '1px solid',
-              color: (theme.vars || theme).palette.primary[500],
-              borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
-              backgroundColor: (theme.vars || theme).palette.primary[50],
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primary[100]
-              }
-            }
-          }, theme.applyDarkStyles({
-            color: theme.palette.grey[300],
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.primaryDark[700], 0.4)
-            },
-            '&.Mui-selected': {
-              color: '#fff',
-              borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
-              backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primaryDark[600]
-              }
-            }
-          })]
-        }
-      },
-      MuiSelect: {
-        defaultProps: {
-          IconComponent: ArrowDropDownRounded
-        },
-        styleOverrides: {
-          iconFilled: {
-            top: 'calc(50% - .25em)'
-          },
-          root: ({
-            theme
-          }) => ({
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
-                '& .MuiOutlinedInput-notchedOutline': {
-                  border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-                  boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
-                },
-                '&:not(.Mui-focused):hover': {
-                  background: (theme.vars || theme).palette.grey[50],
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: (theme.vars || theme).palette.grey[300],
-                    boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
-                  }
-                },
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[300],
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-                    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
-                  },
-                  '&:not(.Mui-focused):hover': {
-                    background: alpha(theme.palette.primaryDark[700], 0.8),
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      borderColor: (theme.vars || theme).palette.primaryDark[600],
-                      boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
-                    }
-                  }
-                })
-              }
-            }, {
-              props: {
-                size: 'small'
-              },
-              style: {
-                minHeight: 32,
-                '& [role="combobox"]': {
-                  paddingBlock: 5
-                }
-              }
-            }]
-          })
-        }
-      },
-      MuiTab: {
-        defaultProps: {
-          disableTouchRipple: true
-        }
-      },
-      MuiPaper: {
-        styleOverrides: {
-          root: ({
-            theme,
-            ownerState
-          }) => [{
-            backgroundImage: 'none',
-            backgroundColor: '#fff',
-            '&[href]': {
-              textDecorationLine: 'none'
-            },
-            transition: theme.transitions.create(['border', 'box-shadow'], {
-              duration: theme.transitions.duration.shortest
-            }),
-            ...(ownerState.variant === 'outlined' && {
-              display: 'block',
-              borderColor: (theme.vars || theme).palette.grey[100],
-              '&[href]': {
-                textDecorationLine: 'none',
-                boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
-                '&:hover': {
-                  borderColor: (theme.vars || theme).palette.primary[200],
-                  boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`
-                },
-                '&:focus-visible': {
-                  outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-                  outlineOffset: 2
-                }
-              },
-              ':is(a&), :is(button&)': {
-                '&:hover': {
-                  borderColor: (theme.vars || theme).palette.primary[200],
-                  boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`
-                }
-              }
-            })
-          }, theme.applyDarkStyles({
-            backgroundColor: (theme.vars || theme).palette.primaryDark[900],
-            ...(ownerState.variant === 'outlined' && {
-              borderColor: (theme.vars || theme).palette.primaryDark[700],
-              backgroundColor: alpha(theme.palette.primaryDark[800], 0.6),
-              '&[href]': {
-                textDecorationLine: 'none',
-                boxShadow: `${alpha(theme.palette.primaryDark[700], 0.4)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
-                '&:hover': {
-                  borderColor: alpha(theme.palette.primary[600], 0.5),
-                  boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`
-                }
-              },
-              ':is(a&), :is(button&)': {
-                '&:hover': {
-                  boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`
-                }
-              }
-            })
-          })]
-        }
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: ({
-            theme,
-            ownerState
-          }) => ({
-            padding: theme.spacing(1, 2),
-            borderColor: (theme.vars || theme).palette.divider,
-            ...(ownerState.variant === 'head' && {
-              color: (theme.vars || theme).palette.text.primary,
-              fontWeight: 700
-            }),
-            ...(ownerState.variant === 'body' && {
-              color: (theme.vars || theme).palette.text.secondary
-            })
-          })
-        }
-      },
-      MuiToggleButtonGroup: {
-        styleOverrides: {
-          root: ({
-            theme
-          }) => ({
-            backgroundColor: '#fff',
-            ...theme.applyDarkStyles({
-              backgroundColor: (theme.vars || theme).palette.primaryDark[900]
-            })
-          })
-        }
-      },
-      MuiToggleButton: {
-        styleOverrides: {
-          root: ({
-            theme,
-            ownerState
-          }) => [{
-            textTransform: 'none',
-            fontWeight: theme.typography.fontWeightMedium,
-            color: (theme.vars || theme).palette.text.secondary,
-            borderColor: theme.palette.grey[200],
-            ...(ownerState.size === 'small' && {
-              padding: '0.375rem 0.75rem'
-            }),
-            '&.Mui-selected': {
-              color: (theme.vars || theme).palette.primary[700],
-              borderColor: `${(theme.vars || theme).palette.primary[200]} !important`,
-              backgroundColor: (theme.vars || theme).palette.primary[50],
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primary[100]
-              }
-            }
-          }, theme.applyDarkStyles({
-            borderColor: theme.palette.primaryDark[700],
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.primaryDark[600], 0.2)
-            },
-            '&.Mui-selected': {
-              color: (theme.vars || theme).palette.primary[200],
-              borderColor: `${(theme.vars || theme).palette.primary[800]} !important`,
-              backgroundColor: alpha(theme.palette.primary[900], 0.4),
-              '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[900], 0.8),
-                borderColor: `${(theme.vars || theme).palette.primary[400]} !important`
-              }
-            }
-          })]
-        }
-      },
-      MuiTooltip: {
-        defaultProps: {
-          arrow: true
-        },
-        styleOverrides: {
-          tooltip: ({
-            theme
-          }) => ({
-            padding: '6px 8px',
-            borderRadius: 6,
-            backgroundColor: (theme.vars || theme).palette.grey[800],
-            '& .MuiTooltip-arrow': {
-              color: (theme.vars || theme).palette.grey[800]
-            }
-          })
-        }
-      },
-      MuiSwitch: {
-        styleOverrides: {
-          root: ({
-            theme
-          }) => ({
-            width: 32,
-            height: 20,
-            padding: 0,
-            borderRadius: 10,
-            '&:has(input:focus-visible)': {
-              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-              outlineOffset: 2
-            },
-            '& .MuiSwitch-switchBase': {
-              '&.Mui-checked': {
-                transform: 'translateX(12px)',
-                color: '#fff'
-              }
-            }
-          }),
-          switchBase: {
-            height: 20,
-            width: 20,
-            padding: 0,
-            color: '#fff',
-            '&.Mui-checked + .MuiSwitch-track': {
-              opacity: 1
-            }
-          },
-          track: ({
-            theme
-          }) => ({
-            opacity: 1,
-            borderRadius: 32,
-            backgroundColor: theme.palette.grey[400],
-            ...theme.applyDarkStyles({
-              backgroundColor: theme.palette.grey[800]
-            })
-          }),
-          thumb: {
-            flexShrink: 0,
-            width: '14px',
-            height: '14px'
-          }
-        }
-      },
-      MuiSnackbar: {
-        styleOverrides: {
-          root: ({
-            theme
-          }) => ({
-            '& .MuiSnackbarContent-root': {
-              backgroundColor: '#FFF',
-              color: (theme.vars || theme).palette.text.primary,
-              fontWeight: theme.typography.fontWeightMedium,
-              border: `1px solid ${(theme.vars || theme).palette.divider}`,
-              boxShadow: `0 4px 16px ${alpha(theme.palette.grey[400], 0.2)}`,
-              ...theme.applyDarkStyles({
-                backgroundColor: (theme.vars || theme).palette.primaryDark[800],
-                boxShadow: '0 4px 16px hsl(0, 100%, 1%)'
-              })
-            }
-          })
-        }
-      },
-      MuiPaginationItem: {
-        styleOverrides: {
-          root: ({
-            theme
-          }) => [{
-            textTransform: 'none',
-            fontWeight: theme.typography.fontWeightSemiBold,
-            color: theme.palette.grey[700],
-            borderColor: theme.palette.grey[200],
-            borderRadius: '8px',
-            '&.Mui-selected': {
-              color: (theme.vars || theme).palette.primary[500],
-              borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
-              backgroundColor: (theme.vars || theme).palette.primary[50],
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primary[100]
-              }
-            }
-          }, theme.applyDarkStyles({
-            color: theme.palette.grey[200],
-            borderColor: theme.palette.primaryDark[700],
-            '&.Mui-selected': {
-              color: theme.palette.primary[100],
-              borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
-              backgroundColor: alpha(theme.palette.primary[900], 0.5),
-              '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[900], 0.8)
-              }
-            }
-          })]
-        }
-      },
-      MuiCssBaseline: {
-        defaultProps: {
-          enableColorScheme: true
-        },
-        styleOverrides: {
-          html: {
-            overflowY: 'scroll'
-            // TODO add support for it,
-            // https://github.com/mui/material-ui/issues/40748
-            // scrollbarGutter: 'stable',
-          }
-        }
-      },
-      MuiCard: {
-        styleOverrides: {
-          root: ({
-            theme,
-            ownerState
-          }) => ({
-            ...(ownerState.variant === 'elevation' && {
-              border: '1px solid',
-              borderColor: (theme.vars || theme).palette.grey[100],
-              boxShadow: `${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[300], 0.5)} 0 1px 8px 0`,
-              ...theme.applyDarkStyles({
-                borderColor: (theme.vars || theme).palette.primaryDark[700],
-                boxShadow: `${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 8px 0`
-              })
-            })
-          })
-        }
-      }
-    }
-  };
-}
-export const brandingDarkTheme = createTheme({
-  ...getDesignTokens('dark'),
-  ...getThemedComponents()
-});
-export const brandingLightTheme = createTheme({
-  ...getDesignTokens('light'),
-  ...getThemedComponents()
-});