@mui/docs 6.0.0-alpha.7 → 6.0.0-alpha.9

package/branding/brandingTheme.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
 import { createTheme, Theme, alpha } from '@mui/material/styles';
 // TODO: enable this once types conflict is fixed
@@ -94,57 +93,75 @@ export const getMetaThemeColor = mode => {
   return themeColor[mode];
 };
 export const getDesignTokens = mode => ({
-  palette: _extends({
-    primary: _extends({}, blue, mode === 'dark' && {
-      main: blue[400]
-    }),
-    secondary: _extends({}, grey, mode === 'light' && {
-      main: blueDark[100],
-      contrastText: blueDark[600]
-    }, mode === 'dark' && {
-      main: blueDark[700],
-      contrastText: blueDark[600]
-    }),
+  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)
-    }
-  }, {
+    mode,
+    ...(mode === 'dark' && {
+      background: {
+        default: blueDark[900],
+        paper: alpha(blueDark[800], 0.8)
+      }
+    }),
     common: {
       black: 'hsl(200, 10%, 4%)'
     },
-    text: _extends({}, mode === 'light' && {
-      primary: grey[900],
-      secondary: grey[800],
-      tertiary: grey[700]
-    }, mode === 'dark' && {
-      primary: '#fff',
-      secondary: grey[400],
-      tertiary: grey[500]
-    }),
-    grey: _extends({}, grey, mode === 'light' && {
-      main: grey[100],
-      contrastText: grey[600]
-    }, mode === 'dark' && {
-      main: grey[700],
-      contrastText: grey[600]
-    }),
+    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: _extends({}, success, mode === 'dark' && {
-      main: success[600]
-    }, mode === 'light' && {
-      main: success[700]
-    }),
+    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
   },
@@ -166,15 +183,16 @@ export const getDesignTokens = mode => ({
     fontFamilySystem: systemFont.join(','),
     fontWeightSemiBold: 600,
     fontWeightExtraBold: 800,
-    h1: _extends({
+    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]
-    }),
+      letterSpacing: -0.2,
+      ...(mode === 'light' && {
+        color: blueDark[900]
+      })
+    },
     h2: {
       fontFamily: ['"General Sans"', ...systemFont].join(','),
       fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
@@ -300,29 +318,95 @@ export function getThemedComponents() {
       MuiAlert: {
         styleOverrides: {
           root: {
-            padding: '12px 16px'
+            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[600], 0.3),
+            borderColor: alpha(theme.palette.warning[700], 0.15),
             '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.warning[700]
+              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.2),
+            backgroundColor: alpha(theme.palette.warning[700], 0.12),
             color: (theme.vars || theme).palette.warning[50],
             '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.warning[200]
+              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`
+              }
             }
           })],
-          icon: {
-            paddingTop: 12,
-            paddingBottom: 0
-          }
+          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: {
@@ -350,107 +434,135 @@ export function getThemedComponents() {
           root: ({
             theme,
             ownerState
-          }) => _extends({
-            transition: 'all 120ms ease-in'
-          }, ownerState.size === 'large' && _extends({}, theme.typography.body1, {
-            lineHeight: 21 / 16,
-            padding: theme.spacing('8px', '10px', '10px', '12px'),
-            fontWeight: theme.typography.fontWeightSemiBold,
-            borderRadius: 10,
-            '& > span': {
-              transition: '0.2s',
-              marginLeft: 4
-            },
-            '&:hover > span': {
-              transform: 'translateX(2px)'
-            }
-          }), ownerState.size === 'medium' && {
-            fontSize: defaultTheme.typography.pxToRem(15),
-            padding: theme.spacing('8px', '12px', '8px', '14px'),
-            fontWeight: theme.typography.fontWeightSemiBold,
-            borderRadius: 8,
-            '& > span': {
-              transition: '0.2s',
-              marginLeft: 4
-            },
-            '&:hover > span': {
-              transform: 'translateX(2px)'
-            }
-          }, ownerState.size === 'small' && {
-            padding: theme.spacing('6px', 1.5),
-            fontFamily: theme.typography.fontFamily,
-            fontSize: defaultTheme.typography.pxToRem(13),
-            fontWeight: theme.typography.fontWeightSemiBold,
-            borderRadius: 8,
-            '& .MuiButton-startIcon': {
-              transition: '0.15s',
-              marginRight: 4,
-              marginLeft: -1
-            },
-            '& .MuiButton-endIcon': {
-              transition: '0.15s',
-              marginLeft: 4
-            },
-            '&:hover': {
+          }) => ({
+            transition: 'all 120ms ease-in',
+            ...(ownerState.size === 'large' && {
+              ...theme.typography.body1,
+              lineHeight: 21 / 16,
+              padding: theme.spacing('8px', '10px', '10px', '12px'),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              borderRadius: 10,
+              '& > span': {
+                transition: '0.2s',
+                marginLeft: 4
+              },
+              '&:hover > span': {
+                transform: 'translateX(2px)'
+              }
+            }),
+            ...(ownerState.size === 'medium' && {
+              fontSize: defaultTheme.typography.pxToRem(15),
+              padding: theme.spacing('8px', '12px', '8px', '14px'),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              borderRadius: 8,
+              '& > span': {
+                transition: '0.2s',
+                marginLeft: 4
+              },
+              '&:hover > span': {
+                transform: 'translateX(2px)'
+              }
+            }),
+            ...(ownerState.size === 'small' && {
+              padding: theme.spacing('6px', 1.5),
+              fontFamily: theme.typography.fontFamily,
+              fontSize: defaultTheme.typography.pxToRem(13),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              borderRadius: 8,
               '& .MuiButton-startIcon': {
-                transform: 'translateX(-2px)'
+                transition: '0.15s',
+                marginRight: 4,
+                marginLeft: -1
               },
               '& .MuiButton-endIcon': {
-                transform: 'translateX(2px)'
+                transition: '0.15s',
+                marginLeft: 4
+              },
+              '&:hover': {
+                '& .MuiButton-startIcon': {
+                  transform: 'translateX(-2px)'
+                },
+                '& .MuiButton-endIcon': {
+                  transform: 'translateX(2px)'
+                }
               }
-            }
-          }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && _extends({
-            color: (theme.vars || theme).palette.text.primary,
-            backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
-            borderColor: (theme.vars || theme).palette.primaryDark[100],
-            boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
-            '&:hover': {
-              backgroundColor: (theme.vars || theme).palette.grey[50]
-            }
-          }, 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[600], 0.2)} 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': {
-              backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-              borderColor: (theme.vars || theme).palette.primaryDark[600]
-            }
-          })), ownerState.variant === 'outlined' && ownerState.color === 'primary' && _extends({
-            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[50], 0.8)} 0 2px 0 inset, ${alpha(theme.palette.primary[100], 0.4)} 0 -2px 0 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]
-            }
-          }, 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 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
-            '&:hover': {
-              backgroundColor: (theme.vars || theme).palette.primary[900],
-              borderColor: (theme.vars || theme).palette.primary[700]
-            }
-          })), 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: `linear-gradient(180deg, ${alpha(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
-            boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
-            '&:hover': {
-              backgroundColor: (theme.vars || theme).palette.primary[700]
-            },
-            '&:active': {
-              backgroundColor: (theme.vars || theme).palette.primaryDark[700]
-            }
-          }, ownerState.variant === 'text' && _extends({
-            color: (theme.vars || theme).palette.primary[600]
-          }, theme.applyDarkStyles({
-            color: (theme.vars || theme).palette.primary[300]
-          })))
+            }),
+            ...(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 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+              '&:hover': {
+                backgroundColor: (theme.vars || theme).palette.grey[50]
+              },
+              ...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[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': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                  borderColor: (theme.vars || theme).palette.primaryDark[600]
+                }
+              })
+            }),
+            ...(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[50], 0.8)} 0 2px 0 inset, ${alpha(theme.palette.primary[100], 0.4)} 0 -2px 0 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]
+              },
+              ...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 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[900],
+                  borderColor: (theme.vars || theme).palette.primary[700]
+                }
+              })
+            }),
+            ...(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: `linear-gradient(180deg, ${alpha(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
+              boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              '&:hover': {
+                backgroundColor: (theme.vars || theme).palette.primary[700]
+              },
+              '&:active': {
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700]
+              }
+            }),
+            ...(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]
+                }
+              })
+            }),
+            ...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
+              color: (theme.vars || theme).palette.primary[600],
+              ...theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[300]
+              })
+            })
+          })
         },
         variants: [{
           // @ts-ignore internal repo module augmentation issue
@@ -568,23 +680,39 @@ export function getThemedComponents() {
           },
           style: ({
             theme
-          }) => _extends({
+          }) => ({
             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)
-            }
-          }))
+            },
+            ...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,
+            ...(ownerState.size === 'small' && {
+              height: 32,
+              width: 32,
+              '& .MuiSvgIcon-root': {
+                fontSize: defaultTheme.typography.pxToRem(18)
+              }
+            })
+          })
+        },
         variants: [{
           props: {
             color: 'primary'
@@ -592,14 +720,11 @@ export function getThemedComponents() {
           style: ({
             theme
           }) => [{
-            height: 34,
-            width: 34,
             border: `1px solid`,
-            borderRadius: theme.shape.borderRadius,
             color: (theme.vars || theme).palette.primary.main,
             backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
             borderColor: (theme.vars || theme).palette.primaryDark[100],
-            boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 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]
@@ -608,10 +733,10 @@ export function getThemedComponents() {
             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.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+            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[500],
-              background: alpha(theme.palette.primaryDark[700], 0.4)
+              borderColor: (theme.vars || theme).palette.primaryDark[600],
+              background: alpha(theme.palette.primaryDark[700], 0.8)
             }
           })]
         }, {
@@ -621,14 +746,12 @@ export function getThemedComponents() {
           style: ({
             theme
           }) => [{
-            height: 34,
-            width: 34,
             color: (theme.vars || theme).palette.text.tertiary,
             borderRadius: theme.shape.borderRadius,
             border: `1px solid`,
             backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
             borderColor: (theme.vars || theme).palette.primaryDark[100],
-            boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
             '&:hover': {
               color: (theme.vars || theme).palette.primary.main,
               borderColor: (theme.vars || theme).palette.grey[300],
@@ -637,7 +760,7 @@ export function getThemedComponents() {
           }, 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.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+            boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 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': {
               color: (theme.vars || theme).palette.primary[400],
               borderColor: (theme.vars || theme).palette.primaryDark[500],
@@ -651,15 +774,26 @@ export function getThemedComponents() {
           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 12px',
+              borderRadius: '6px',
               fontSize: theme.typography.pxToRem(14),
-              fontWeight: 500,
+              fontWeight: theme.typography.fontWeightMedium,
               '&:hover, &:focus': {
                 backgroundColor: (theme.vars || theme).palette.grey[100],
                 color: (theme.vars || theme).palette.text.primary
@@ -681,7 +815,7 @@ export function getThemedComponents() {
                 backgroundColor: (theme.vars || theme).palette.primaryDark[700]
               },
               '&.Mui-selected': {
-                color: (theme.vars || theme).palette.primary[300],
+                color: (theme.vars || theme).palette.primary[200],
                 backgroundColor: alpha(theme.palette.primary[900], 0.4)
               }
             }
@@ -692,22 +826,21 @@ export function getThemedComponents() {
         styleOverrides: {
           paper: ({
             theme
-          }) => _extends({
-            boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)'
-          }, theme.applyDarkStyles({
-            boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)'
-          }))
+          }) => ({
+            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
-          }) => _extends({
-            borderColor: (theme.vars || theme).palette.grey[100]
-          }, theme.applyDarkStyles({
-            borderColor: alpha(theme.palette.primaryDark[500], 0.3)
-          }))
+          }) => ({
+            borderColor: (theme.vars || theme).palette.divider
+          })
         }
       },
       MuiLink: {
@@ -760,107 +893,131 @@ export function getThemedComponents() {
               variant
             },
             theme
-          }) => _extends({
+          }) => ({
             fontWeight: theme.typography.fontWeightSemiBold,
-            paddingBottom: 0.2
-          }, variant === 'outlined' && color === 'default' && _extends({
-            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' && _extends({
-            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' && _extends({
-            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' && _extends({
-            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' && _extends({}, color === 'default' && _extends({
-            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' && _extends({
-            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],
+            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': {
-                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]
-              }
-            }
-          }))), variant === 'light' && _extends({}, color === 'default' && _extends({
-            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' && _extends({
-            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' && _extends({
-            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]
-          }))))
+                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: {
@@ -930,7 +1087,7 @@ export function getThemedComponents() {
           root: ({
             theme,
             ownerState
-          }) => [_extends({
+          }) => [{
             backgroundImage: 'none',
             backgroundColor: '#fff',
             '&[href]': {
@@ -938,47 +1095,49 @@ export function getThemedComponents() {
             },
             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]}`
+            }),
+            ...(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: '2px'
+                }
               },
-              '&:focus-visible': {
-                outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-                outlineOffset: '2px'
+              ':is(a&), :is(button&)': {
+                '&:hover': {
+                  borderColor: (theme.vars || theme).palette.primary[200],
+                  boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`
+                }
               }
-            },
-            ':is(a&), :is(button&)': {
-              '&:hover': {
-                borderColor: (theme.vars || theme).palette.primary[200],
-                boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`
-              }
-            }
-          }), theme.applyDarkStyles(_extends({
-            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}`
+            })
+          }, 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: {
@@ -986,14 +1145,16 @@ export function getThemedComponents() {
           root: ({
             theme,
             ownerState
-          }) => _extends({
+          }) => ({
             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
+            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
+            })
           })
         }
       },
@@ -1001,11 +1162,12 @@ export function getThemedComponents() {
         styleOverrides: {
           root: ({
             theme
-          }) => _extends({
-            backgroundColor: '#fff'
-          }, theme.applyDarkStyles({
-            backgroundColor: (theme.vars || theme).palette.primaryDark[900]
-          }))
+          }) => ({
+            backgroundColor: '#fff',
+            ...theme.applyDarkStyles({
+              backgroundColor: (theme.vars || theme).palette.primaryDark[900]
+            })
+          })
         }
       },
       MuiToggleButton: {
@@ -1013,14 +1175,14 @@ export function getThemedComponents() {
           root: ({
             theme,
             ownerState
-          }) => [_extends({
+          }) => [{
             textTransform: 'none',
             fontWeight: theme.typography.fontWeightMedium,
             color: theme.palette.text.secondary,
-            borderColor: theme.palette.grey[200]
-          }, ownerState.size === 'small' && {
-            padding: '0.375rem 0.75rem'
-          }, {
+            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`,
@@ -1029,7 +1191,7 @@ export function getThemedComponents() {
                 backgroundColor: (theme.vars || theme).palette.primary[100]
               }
             }
-          }), theme.applyDarkStyles({
+          }, theme.applyDarkStyles({
             borderColor: theme.palette.primaryDark[700],
             '&:hover': {
               backgroundColor: alpha(theme.palette.primaryDark[600], 0.2)
@@ -1078,13 +1240,14 @@ export function getThemedComponents() {
           },
           track: ({
             theme
-          }) => _extends({
+          }) => ({
             opacity: 1,
             borderRadius: 32,
-            backgroundColor: theme.palette.grey[400]
-          }, theme.applyDarkStyles({
-            backgroundColor: theme.palette.grey[800]
-          })),
+            backgroundColor: theme.palette.grey[400],
+            ...theme.applyDarkStyles({
+              backgroundColor: theme.palette.grey[800]
+            })
+          }),
           thumb: {
             flexShrink: 0,
             width: '14px',
@@ -1140,5 +1303,11 @@ export function getThemedComponents() {
     }
   };
 }
-export const brandingDarkTheme = createTheme(_extends({}, getDesignTokens('dark'), getThemedComponents()));
-export const brandingLightTheme = createTheme(_extends({}, getDesignTokens('light'), getThemedComponents()));
+export const brandingDarkTheme = createTheme({
+  ...getDesignTokens('dark'),
+  ...getThemedComponents()
+});
+export const brandingLightTheme = createTheme({
+  ...getDesignTokens('light'),
+  ...getThemedComponents()
+});