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

package/branding/brandingTheme.js

@@ -1,14 +1,5 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getMetaThemeColor = exports.getDesignTokens = exports.error = exports.brandingLightTheme = exports.brandingDarkTheme = exports.blueDark = exports.blue = void 0;
-exports.getThemedComponents = getThemedComponents;
-exports.warning = exports.success = exports.grey = void 0;
-var _ArrowDropDownRounded = _interopRequireDefault(require("@mui/icons-material/ArrowDropDownRounded"));
-var _styles = require("@mui/material/styles");
+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 {
@@ -16,8 +7,8 @@ var _styles = require("@mui/material/styles");
 //   }
 // }
 
-const defaultTheme = (0, _styles.createTheme)();
-const blue = exports.blue = {
+const defaultTheme = createTheme();
+export const blue = {
   50: 'hsl(210, 100%, 96%)',
   100: 'hsl(210, 100%, 90%)',
   200: 'hsl(210, 100%, 80%)',
@@ -30,7 +21,7 @@ const blue = exports.blue = {
   800: 'hsl(210, 100%, 30%)',
   900: 'hsl(210, 100%, 23%)'
 };
-const blueDark = exports.blueDark = {
+export const blueDark = {
   50: 'hsl(210, 14%, 92%)',
   100: 'hsl(210, 14%, 87%)',
   200: 'hsl(210, 14%, 72%)',
@@ -43,7 +34,7 @@ const blueDark = exports.blueDark = {
   800: 'hsl(210, 14%, 9%)',
   900: 'hsl(210, 14%, 7%)'
 };
-const grey = exports.grey = {
+export const grey = {
   50: 'hsl(215, 15%, 97%)',
   100: 'hsl(215, 15%, 92%)',
   200: 'hsl(215, 15%, 89%)',
@@ -55,7 +46,7 @@ const grey = exports.grey = {
   800: 'hsl(215, 15%, 22%)',
   900: 'hsl(215, 15%, 12%)'
 };
-const error = exports.error = {
+export const error = {
   50: 'hsl(355, 98%, 97%)',
   100: 'hsl(355, 98%, 93%)',
   200: 'hsl(355, 98%, 87%)',
@@ -68,7 +59,7 @@ const error = exports.error = {
   800: 'hsl(355, 98%, 29%)',
   900: 'hsl(355, 98%, 17%)'
 };
-const success = exports.success = {
+export const success = {
   50: 'hsl(144, 72%, 95%)',
   100: 'hsl(144, 72%, 87%)',
   200: 'hsl(144, 72%, 77%)',
@@ -80,7 +71,7 @@ const success = exports.success = {
   800: 'hsl(144, 72%, 32%)',
   900: 'hsl(144, 72%, 21%)'
 };
-const warning = exports.warning = {
+export const warning = {
   50: 'hsl(48, 100%, 96%)',
   100: 'hsl(48, 100%, 88%)',
   200: 'hsl(48, 100%, 82%)',
@@ -94,15 +85,14 @@ const warning = exports.warning = {
   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"'];
-const getMetaThemeColor = mode => {
+export const getMetaThemeColor = mode => {
   const themeColor = {
     light: blue[600],
     dark: blueDark[900]
   };
   return themeColor[mode];
 };
-exports.getMetaThemeColor = getMetaThemeColor;
-const getDesignTokens = mode => ({
+export const getDesignTokens = mode => ({
   palette: {
     primary: {
       ...blue,
@@ -121,13 +111,13 @@ const getDesignTokens = mode => ({
         contrastText: blueDark[600]
       })
     },
-    divider: mode === 'dark' ? (0, _styles.alpha)(blueDark[500], 0.3) : grey[100],
+    divider: mode === 'dark' ? alpha(blueDark[500], 0.3) : grey[100],
     primaryDark: blueDark,
     mode,
     ...(mode === 'dark' && {
       background: {
         default: blueDark[900],
-        paper: (0, _styles.alpha)(blueDark[800], 0.8)
+        paper: alpha(blueDark[800], 0.8)
       }
     }),
     common: {
@@ -168,8 +158,8 @@ const getDesignTokens = mode => ({
     },
     warning,
     gradients: {
-      radioSubtle: mode === 'dark' ? `radial-gradient(100% 100% at 100% 100%, transparent 0, ${(0, _styles.alpha)(blue[900], 0.3)} 300%)` : `radial-gradient(100% 90% at 50% 0, transparent 0, ${(0, _styles.alpha)(blue[100], 0.3)} 300%)`,
-      linearSubtle: mode === 'dark' ? `linear-gradient(0deg, ${(0, _styles.alpha)(blue[900], 0.1)}, ${(0, _styles.alpha)(blueDark[900], 0.5)})` : `linear-gradient(0deg, ${(0, _styles.alpha)(blue[50], 0.4)}, ${(0, _styles.alpha)(grey[50], 0.1)})`
+      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: {
@@ -322,13 +312,14 @@ const getDesignTokens = mode => ({
     return this.applyStyles('dark', css);
   }
 });
-exports.getDesignTokens = getDesignTokens;
-function getThemedComponents() {
+export function getThemedComponents() {
   return {
     components: {
       MuiAlert: {
         styleOverrides: {
-          root: {
+          root: ({
+            theme
+          }) => ({
             padding: '16px',
             gap: '12px',
             fontSize: '1rem',
@@ -344,80 +335,85 @@ function getThemedComponents() {
             },
             '& .MuiAlert-message': {
               padding: 0
-            }
-          },
+            },
+            variants: [{
+              // same styles from the MarkdownElement callout
+              props: {
+                variant: 'standard',
+                color: 'warning'
+              },
+              style: [{
+                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`
+                  }
+                }
+              })]
+            }, {
+              // same styles from the MarkdownElement callout
+              props: {
+                variant: 'standard',
+                color: 'success'
+              },
+              style: [{
+                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`
+                  }
+                }
+              })]
+            }]
+          }),
           icon: {
             paddingTop: 10,
             paddingBottom: 0
-          },
-          standardWarning: ({
-            theme
-          }) => [
-          // same styles from the MarkdownElement callout
-          {
-            backgroundColor: (0, _styles.alpha)(theme.palette.warning[50], 0.5),
-            color: (theme.vars || theme).palette.grey[900],
-            border: '1px solid',
-            borderColor: (0, _styles.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: `${(0, _styles.alpha)(theme.palette.warning.main, 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: (0, _styles.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: `${(0, _styles.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: (0, _styles.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: `${(0, _styles.alpha)(theme.palette.success.main, 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: (0, _styles.alpha)(theme.palette.success[700], 0.12),
-            color: (theme.vars || theme).palette.success[50],
-            borderColor: (0, _styles.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: `${(0, _styles.alpha)(theme.palette.success[600], 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
-              }
-            }
-          })]
+          }
         }
       },
       MuiButtonBase: {
@@ -431,7 +427,7 @@ function getThemedComponents() {
           }) => ({
             transition: 'all 100ms ease-in',
             '&:focus-visible': {
-              outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
+              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
               outlineOffset: 2
             }
           })
@@ -501,9 +497,9 @@ function getThemedComponents() {
             }),
             ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
               color: (theme.vars || theme).palette.text.primary,
-              backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
+              backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
               borderColor: (theme.vars || theme).palette.primaryDark[100],
-              boxShadow: `#FFF 0 1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+              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]
               },
@@ -512,9 +508,9 @@ function getThemedComponents() {
               },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primaryDark[100],
-                borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
-                backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
-                boxShadow: `${(0, _styles.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`,
+                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]
@@ -529,43 +525,43 @@ function getThemedComponents() {
             }),
             ...(ownerState.variant === 'outlined' && ownerState.color === 'primary' && {
               color: (theme.vars || theme).palette.primary[600],
-              backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.2),
+              backgroundColor: alpha(theme.palette.primary[50], 0.2),
               borderColor: (theme.vars || theme).palette.primary[100],
-              boxShadow: `${(0, _styles.alpha)(theme.palette.primary[100], 0.4)} 0 -1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
+              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: (0, _styles.alpha)(theme.palette.primary[100], 0.7)
+                backgroundColor: alpha(theme.palette.primary[100], 0.7)
               },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primary[200],
-                borderColor: (0, _styles.alpha)(theme.palette.primary[900], 0.7),
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
-                boxShadow: `${(0, _styles.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`,
+                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: (0, _styles.alpha)(theme.palette.primary[900], 0.5),
+                  backgroundColor: alpha(theme.palette.primary[900], 0.5),
                   borderColor: (theme.vars || theme).palette.primary[900]
                 },
                 '&:active': {
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.3)
+                  backgroundColor: alpha(theme.palette.primary[900], 0.3)
                 },
                 '&.Mui-disabled:not(.MuiButton-loading)': {
                   background: 'none',
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
+                  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 ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
+              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: `${(0, _styles.alpha)(theme.palette.primary[400], 0.5)} 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[800], 0.4)} 0 -1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              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]
@@ -573,7 +569,7 @@ function getThemedComponents() {
               '&:active': {
                 backgroundColor: (theme.vars || theme).palette.primary[800],
                 borderColor: (theme.vars || theme).palette.primary[600],
-                boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
+                boxShadow: `${alpha(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
               },
               '&.Mui-disabled': {
                 color: theme.palette.grey[700],
@@ -590,12 +586,12 @@ function getThemedComponents() {
             }),
             ...(ownerState.variant === 'contained' && ownerState.color === 'secondary' && {
               color: '#fff',
-              textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
+              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: `${(0, _styles.alpha)(theme.palette.primaryDark[400], 0.5)} 0 1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.primaryDark[800], 0.7)} 0 -1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              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]
@@ -603,7 +599,7 @@ function getThemedComponents() {
               '&:active': {
                 backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 borderColor: (theme.vars || theme).palette.primaryDark[600],
-                boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
+                boxShadow: `${alpha(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
               },
               '&.Mui-disabled': {
                 color: theme.palette.grey[700],
@@ -628,7 +624,7 @@ function getThemedComponents() {
               },
               ...theme.applyDarkStyles({
                 '&:hover': {
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5)
                 },
                 '&:active': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700]
@@ -641,18 +637,18 @@ function getThemedComponents() {
             ...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
               color: (theme.vars || theme).palette.primary[600],
               '&:hover': {
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3)
+                backgroundColor: alpha(theme.palette.primary[100], 0.3)
               },
               '&:active': {
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.5)
+                backgroundColor: alpha(theme.palette.primary[100], 0.5)
               },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primary[300],
                 '&:hover': {
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.3)
+                  backgroundColor: alpha(theme.palette.primary[900], 0.3)
                 },
                 '&:active': {
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.1)
+                  backgroundColor: alpha(theme.palette.primary[900], 0.1)
                 },
                 '&.Mui-disabled:not(.MuiButton-loading)': {
                   color: theme.palette.grey[500]
@@ -729,9 +725,9 @@ function getThemedComponents() {
             position: 'relative',
             border: '1px solid',
             color: (theme.vars || theme).palette.grey[900],
-            backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.3),
+            backgroundColor: alpha(theme.palette.primary[50], 0.3),
             borderColor: (theme.vars || theme).palette.grey[200],
-            boxShadow: `0px 2px 2px ${(0, _styles.alpha)(theme.palette.primary[100], 0.2)}, inset 0px 4px 4px ${(0, _styles.alpha)(theme.palette.primary[100], 0.2)}`,
+            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),
@@ -788,7 +784,7 @@ function getThemedComponents() {
             ...theme.applyDarkStyles({
               color: (theme.vars || theme).palette.primary[300],
               '&:hover': {
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.3)
+                backgroundColor: alpha(theme.palette.primary[800], 0.3)
               }
             })
           })
@@ -807,7 +803,7 @@ function getThemedComponents() {
               background: (theme.vars || theme).palette.grey[50],
               ...theme.applyDarkStyles({
                 borderColor: (theme.vars || theme).palette.primaryDark[600],
-                background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
+                background: alpha(theme.palette.primaryDark[700], 0.8)
               })
             },
             '&:active': {
@@ -833,25 +829,25 @@ function getThemedComponents() {
             theme
           }) => [{
             color: (theme.vars || theme).palette.primary.main,
-            backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
+            backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
             border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            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: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+              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: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
-            backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
-            boxShadow: `${(0, _styles.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`,
+            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: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8),
+              background: alpha(theme.palette.primaryDark[700], 0.8),
               boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
             },
             '&:active': {
@@ -866,25 +862,25 @@ function getThemedComponents() {
             theme
           }) => [{
             color: (theme.vars || theme).palette.text.secondary,
-            backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
+            backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
             border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            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: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+              boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
             },
             '&:active': {
               background: (theme.vars || theme).palette.grey[100]
             }
           }, theme.applyDarkStyles({
-            borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
-            backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
-            boxShadow: `${(0, _styles.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`,
+            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: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8),
+              background: alpha(theme.palette.primaryDark[700], 0.8),
               boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
             },
             '&:active': {
@@ -928,7 +924,7 @@ function getThemedComponents() {
               '&.Mui-selected': {
                 fontWeight: 500,
                 color: (theme.vars || theme).palette.primary[600],
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.6)
+                backgroundColor: alpha(theme.palette.primary[100], 0.6)
               }
             }
           }, theme.applyDarkStyles({
@@ -940,7 +936,7 @@ function getThemedComponents() {
               },
               '&.Mui-selected': {
                 color: (theme.vars || theme).palette.primary[200],
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.4)
+                backgroundColor: alpha(theme.palette.primary[900], 0.4)
               }
             }
           })]
@@ -985,7 +981,7 @@ function getThemedComponents() {
               marginLeft: 2
             },
             '&:focus-visible': {
-              outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
+              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
               outlineOffset: 2
             }
           })
@@ -1021,7 +1017,7 @@ function getThemedComponents() {
             fontWeight: theme.typography.fontWeightSemiBold,
             paddingBottom: 0.2,
             ...(variant === 'outlined' && color === 'default' && {
-              backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
+              backgroundColor: alpha(theme.palette.grey[50], 0.5),
               color: (theme.vars || theme).palette.grey[900],
               borderColor: (theme.vars || theme).palette.grey[200],
               '&:hover': {
@@ -1029,9 +1025,9 @@ function getThemedComponents() {
                 color: (theme.vars || theme).palette.grey[900]
               },
               ...theme.applyDarkStyles({
-                backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4),
+                backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
                 color: (theme.vars || theme).palette.grey[300],
-                borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
+                borderColor: alpha(theme.palette.primaryDark[500], 0.5),
                 '&:hover': {
                   color: (theme.vars || theme).palette.grey[300],
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700]
@@ -1039,22 +1035,22 @@ function getThemedComponents() {
               })
             }),
             ...(variant === 'outlined' && color === 'info' && {
-              backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
+              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: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5),
+                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: (0, _styles.alpha)(theme.palette.primary[100], 0.2),
+              backgroundColor: alpha(theme.palette.primary[100], 0.2),
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primary[300],
-                borderColor: (0, _styles.alpha)(theme.palette.primary[500], 0.2),
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[700], 0.2)
+                borderColor: alpha(theme.palette.primary[500], 0.2),
+                backgroundColor: alpha(theme.palette.primary[700], 0.2)
               })
             }),
             ...(variant === 'outlined' && color === 'success' && {
@@ -1063,21 +1059,21 @@ function getThemedComponents() {
               color: (theme.vars || theme).palette.success[900],
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.success[300],
-                borderColor: (0, _styles.alpha)(theme.palette.success[300], 0.2),
-                background: (0, _styles.alpha)(theme.palette.success[800], 0.2)
+                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: (0, _styles.alpha)(theme.palette.primary[100], 0.5),
+                backgroundColor: alpha(theme.palette.primary[100], 0.5),
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primary[100]
                 },
                 ...theme.applyDarkStyles({
                   color: '#fff',
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.8),
+                  backgroundColor: alpha(theme.palette.primaryDark[500], 0.8),
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[600]
                   }
@@ -1085,7 +1081,7 @@ function getThemedComponents() {
               }),
               ...(color === 'primary' && {
                 color: (theme.vars || theme).palette.primary[600],
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.4),
+                backgroundColor: alpha(theme.palette.primary[100], 0.4),
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primary[100]
                 },
@@ -1100,9 +1096,9 @@ function getThemedComponents() {
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[100],
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.5),
+                  backgroundColor: alpha(theme.palette.primary[800], 0.5),
                   '&:hover': {
-                    backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5)
+                    backgroundColor: alpha(theme.palette.primary[900], 0.5)
                   },
                   '& .MuiChip-deleteIcon': {
                     color: (theme.vars || theme).palette.primary[100],
@@ -1118,10 +1114,10 @@ function getThemedComponents() {
             ...(variant === 'light' && {
               ...(color === 'default' && {
                 color: (theme.vars || theme).palette.primary[700],
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3),
+                backgroundColor: alpha(theme.palette.primary[100], 0.3),
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[200],
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5)
                 })
               }),
               ...(color === 'warning' && {
@@ -1178,7 +1174,7 @@ function getThemedComponents() {
           }, theme.applyDarkStyles({
             color: theme.palette.grey[300],
             '&:hover': {
-              backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)
+              backgroundColor: alpha(theme.palette.primaryDark[700], 0.4)
             },
             '&.Mui-selected': {
               color: '#fff',
@@ -1193,7 +1189,7 @@ function getThemedComponents() {
       },
       MuiSelect: {
         defaultProps: {
-          IconComponent: _ArrowDropDownRounded.default
+          IconComponent: ArrowDropDownRounded
         },
         styleOverrides: {
           iconFilled: {
@@ -1207,27 +1203,27 @@ function getThemedComponents() {
                 variant: 'outlined'
               },
               style: {
-                backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
+                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, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+                  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: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+                    boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
                   }
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[300],
-                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
                   '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
-                    boxShadow: `${(0, _styles.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`
+                    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: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8),
+                    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`
@@ -1273,13 +1269,13 @@ function getThemedComponents() {
               borderColor: (theme.vars || theme).palette.grey[100],
               '&[href]': {
                 textDecorationLine: 'none',
-                boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                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 ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
+                  outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
                   outlineOffset: 2
                 }
               },
@@ -1294,13 +1290,13 @@ function getThemedComponents() {
             backgroundColor: (theme.vars || theme).palette.primaryDark[900],
             ...(ownerState.variant === 'outlined' && {
               borderColor: (theme.vars || theme).palette.primaryDark[700],
-              backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.6),
+              backgroundColor: alpha(theme.palette.primaryDark[800], 0.6),
               '&[href]': {
                 textDecorationLine: 'none',
-                boxShadow: `${(0, _styles.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`,
+                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: (0, _styles.alpha)(theme.palette.primary[600], 0.5),
-                  boxShadow: `0px 2px 8px ${(0, _styles.alpha)(theme.palette.primary[900], 0.6)}`
+                  borderColor: alpha(theme.palette.primary[600], 0.5),
+                  boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`
                 }
               },
               ':is(a&), :is(button&)': {
@@ -1366,14 +1362,14 @@ function getThemedComponents() {
           }, theme.applyDarkStyles({
             borderColor: theme.palette.primaryDark[700],
             '&:hover': {
-              backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)
+              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: (0, _styles.alpha)(theme.palette.primary[900], 0.4),
+              backgroundColor: alpha(theme.palette.primary[900], 0.4),
               '&:hover': {
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.8),
+                backgroundColor: alpha(theme.palette.primary[900], 0.8),
                 borderColor: `${(theme.vars || theme).palette.primary[400]} !important`
               }
             }
@@ -1407,7 +1403,7 @@ function getThemedComponents() {
             padding: 0,
             borderRadius: 10,
             '&:has(input:focus-visible)': {
-              outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
+              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
               outlineOffset: 2
             },
             '& .MuiSwitch-switchBase': {
@@ -1453,7 +1449,7 @@ function getThemedComponents() {
               color: (theme.vars || theme).palette.text.primary,
               fontWeight: theme.typography.fontWeightMedium,
               border: `1px solid ${(theme.vars || theme).palette.divider}`,
-              boxShadow: `0 4px 16px ${(0, _styles.alpha)(theme.palette.grey[400], 0.2)}`,
+              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%)'
@@ -1486,9 +1482,9 @@ function getThemedComponents() {
             '&.Mui-selected': {
               color: theme.palette.primary[100],
               borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
-              backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5),
+              backgroundColor: alpha(theme.palette.primary[900], 0.5),
               '&:hover': {
-                backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.8)
+                backgroundColor: alpha(theme.palette.primary[900], 0.8)
               }
             }
           })]
@@ -1516,7 +1512,7 @@ function getThemedComponents() {
             ...(ownerState.variant === 'elevation' && {
               border: '1px solid',
               borderColor: (theme.vars || theme).palette.grey[100],
-              boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[300], 0.5)} 0 1px 8px 0`,
+              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`
@@ -1528,11 +1524,11 @@ function getThemedComponents() {
     }
   };
 }
-const brandingDarkTheme = exports.brandingDarkTheme = (0, _styles.createTheme)({
+export const brandingDarkTheme = createTheme({
   ...getDesignTokens('dark'),
   ...getThemedComponents()
 });
-const brandingLightTheme = exports.brandingLightTheme = (0, _styles.createTheme)({
+export const brandingLightTheme = createTheme({
   ...getDesignTokens('light'),
   ...getThemedComponents()
 });