@mui/docs 6.0.0-alpha.6 → 6.0.0-alpha.8

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)',
@@ -350,107 +368,118 @@ 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: `${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' && {
+              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' && {
+              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,20 +597,21 @@ 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: {
@@ -692,22 +722,24 @@ 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.grey[100],
+            ...theme.applyDarkStyles({
+              borderColor: alpha(theme.palette.primaryDark[500], 0.3)
+            })
+          })
         }
       },
       MuiLink: {
@@ -760,107 +792,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],
-              '&: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],
+            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[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 +986,7 @@ export function getThemedComponents() {
           root: ({
             theme,
             ownerState
-          }) => [_extends({
+          }) => [{
             backgroundImage: 'none',
             backgroundColor: '#fff',
             '&[href]': {
@@ -938,47 +994,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 +1044,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 +1061,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 +1074,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 +1090,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 +1139,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 +1202,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()
+});