@mui/docs 7.0.0-alpha.0 → 7.0.0-alpha.1

package/branding/brandingTheme.js

@@ -1,5 +1,14 @@
-import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
-import { createTheme, Theme, alpha } from '@mui/material/styles';
+"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");
 // TODO: enable this once types conflict is fixed
 // declare module '@mui/material/Button' {
 //   interface ButtonPropsVariantOverrides {
@@ -7,8 +16,8 @@ import { createTheme, Theme, alpha } from '@mui/material/styles';
 //   }
 // }
 
-const defaultTheme = createTheme();
-export const blue = {
+const defaultTheme = (0, _styles.createTheme)();
+const blue = exports.blue = {
   50: 'hsl(210, 100%, 96%)',
   100: 'hsl(210, 100%, 90%)',
   200: 'hsl(210, 100%, 80%)',
@@ -21,7 +30,7 @@ export const blue = {
   800: 'hsl(210, 100%, 30%)',
   900: 'hsl(210, 100%, 23%)'
 };
-export const blueDark = {
+const blueDark = exports.blueDark = {
   50: 'hsl(210, 14%, 92%)',
   100: 'hsl(210, 14%, 87%)',
   200: 'hsl(210, 14%, 72%)',
@@ -34,7 +43,7 @@ export const blueDark = {
   800: 'hsl(210, 14%, 9%)',
   900: 'hsl(210, 14%, 7%)'
 };
-export const grey = {
+const grey = exports.grey = {
   50: 'hsl(215, 15%, 97%)',
   100: 'hsl(215, 15%, 92%)',
   200: 'hsl(215, 15%, 89%)',
@@ -46,7 +55,7 @@ export const grey = {
   800: 'hsl(215, 15%, 22%)',
   900: 'hsl(215, 15%, 12%)'
 };
-export const error = {
+const error = exports.error = {
   50: 'hsl(355, 98%, 97%)',
   100: 'hsl(355, 98%, 93%)',
   200: 'hsl(355, 98%, 87%)',
@@ -59,7 +68,7 @@ export const error = {
   800: 'hsl(355, 98%, 29%)',
   900: 'hsl(355, 98%, 17%)'
 };
-export const success = {
+const success = exports.success = {
   50: 'hsl(144, 72%, 95%)',
   100: 'hsl(144, 72%, 87%)',
   200: 'hsl(144, 72%, 77%)',
@@ -71,7 +80,7 @@ export const success = {
   800: 'hsl(144, 72%, 32%)',
   900: 'hsl(144, 72%, 21%)'
 };
-export const warning = {
+const warning = exports.warning = {
   50: 'hsl(48, 100%, 96%)',
   100: 'hsl(48, 100%, 88%)',
   200: 'hsl(48, 100%, 82%)',
@@ -85,14 +94,15 @@ export const 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"'];
-export const getMetaThemeColor = mode => {
+const getMetaThemeColor = mode => {
   const themeColor = {
     light: blue[600],
     dark: blueDark[900]
   };
   return themeColor[mode];
 };
-export const getDesignTokens = mode => ({
+exports.getMetaThemeColor = getMetaThemeColor;
+const getDesignTokens = mode => ({
   palette: {
     primary: {
       ...blue,
@@ -111,13 +121,13 @@ export const getDesignTokens = mode => ({
         contrastText: blueDark[600]
       })
     },
-    divider: mode === 'dark' ? alpha(blueDark[500], 0.3) : grey[100],
+    divider: mode === 'dark' ? (0, _styles.alpha)(blueDark[500], 0.3) : grey[100],
     primaryDark: blueDark,
     mode,
     ...(mode === 'dark' && {
       background: {
         default: blueDark[900],
-        paper: alpha(blueDark[800], 0.8)
+        paper: (0, _styles.alpha)(blueDark[800], 0.8)
       }
     }),
     common: {
@@ -158,8 +168,8 @@ export const getDesignTokens = mode => ({
     },
     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)})`
+      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)})`
     }
   },
   shape: {
@@ -312,7 +322,8 @@ export const getDesignTokens = mode => ({
     return this.applyStyles('dark', css);
   }
 });
-export function getThemedComponents() {
+exports.getDesignTokens = getDesignTokens;
+function getThemedComponents() {
   return {
     components: {
       MuiAlert: {
@@ -344,30 +355,30 @@ export function getThemedComponents() {
           }) => [
           // same styles from the MarkdownElement callout
           {
-            backgroundColor: alpha(theme.palette.warning[50], 0.5),
+            backgroundColor: (0, _styles.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),
+            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: `${alpha(theme.palette.warning.main, 0.4)} !important`,
+              textDecorationColor: `${(0, _styles.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),
+            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: `${alpha(theme.palette.warning[600], 0.4)} !important`,
+              textDecorationColor: `${(0, _styles.alpha)(theme.palette.warning[600], 0.4)} !important`,
               '&:hover': {
                 textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
               }
@@ -378,7 +389,7 @@ export function getThemedComponents() {
           }) => [
           // same styles from the MarkdownElement callout
           {
-            backgroundColor: alpha(theme.palette.success[50], 0.5),
+            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': {
@@ -387,21 +398,21 @@ export function getThemedComponents() {
             '& * 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`,
+              textDecorationColor: `${(0, _styles.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),
+            backgroundColor: (0, _styles.alpha)(theme.palette.success[700], 0.12),
             color: (theme.vars || theme).palette.success[50],
-            borderColor: alpha(theme.palette.success[400], 0.1),
+            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: `${alpha(theme.palette.success[600], 0.4)} !important`,
+              textDecorationColor: `${(0, _styles.alpha)(theme.palette.success[600], 0.4)} !important`,
               '&:hover': {
                 textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
               }
@@ -420,7 +431,7 @@ export function getThemedComponents() {
           }) => ({
             transition: 'all 100ms ease-in',
             '&:focus-visible': {
-              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+              outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
               outlineOffset: 2
             }
           })
@@ -490,9 +501,9 @@ export function getThemedComponents() {
             }),
             ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
               color: (theme.vars || theme).palette.text.primary,
-              backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
+              backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
               borderColor: (theme.vars || theme).palette.primaryDark[100],
-              boxShadow: `#FFF 0 1px 0 1px inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+              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`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.grey[50]
               },
@@ -501,9 +512,9 @@ export function getThemedComponents() {
               },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primaryDark[100],
-                borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-                backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                boxShadow: `${alpha(theme.palette.primaryDark[700], 0.3)} 0 1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                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`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                   borderColor: (theme.vars || theme).palette.primaryDark[600]
@@ -518,43 +529,43 @@ export function getThemedComponents() {
             }),
             ...(ownerState.variant === 'outlined' && ownerState.color === 'primary' && {
               color: (theme.vars || theme).palette.primary[600],
-              backgroundColor: alpha(theme.palette.primary[50], 0.2),
+              backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.2),
               borderColor: (theme.vars || theme).palette.primary[100],
-              boxShadow: `${alpha(theme.palette.primary[100], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
+              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`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.primary[50],
                 borderColor: (theme.vars || theme).palette.primary[200]
               },
               '&:active': {
-                backgroundColor: alpha(theme.palette.primary[100], 0.7)
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.7)
               },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primary[200],
-                borderColor: alpha(theme.palette.primary[900], 0.7),
-                backgroundColor: alpha(theme.palette.primary[900], 0.2),
-                boxShadow: `${alpha(theme.palette.primary[900], 0.2)} 0 1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                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`,
                 '&:hover': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.5),
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5),
                   borderColor: (theme.vars || theme).palette.primary[900]
                 },
                 '&:active': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.3)
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.3)
                 },
                 '&.Mui-disabled': {
                   background: 'none',
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
                   color: theme.palette.grey[500]
                 }
               })
             }),
             ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && {
               color: '#fff',
-              textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
+              textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
               backgroundColor: (theme.vars || theme).palette.primary[500],
               backgroundImage: 'transparent',
               border: '1px solid ',
               borderColor: (theme.vars || theme).palette.primary[600],
-              boxShadow: `${alpha(theme.palette.primary[400], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.primary[800], 0.4)} 0 -1px 0 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              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`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.primary[700],
                 borderColor: (theme.vars || theme).palette.primary[800]
@@ -562,7 +573,7 @@ export function getThemedComponents() {
               '&:active': {
                 backgroundColor: (theme.vars || theme).palette.primary[800],
                 borderColor: (theme.vars || theme).palette.primary[600],
-                boxShadow: `${alpha(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
+                boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
               },
               '&.Mui-disabled': {
                 color: theme.palette.grey[700],
@@ -579,12 +590,12 @@ export function getThemedComponents() {
             }),
             ...(ownerState.variant === 'contained' && ownerState.color === 'secondary' && {
               color: '#fff',
-              textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
+              textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
               backgroundColor: (theme.vars || theme).palette.primaryDark[500],
               backgroundImage: 'transparent',
               border: '1px solid ',
               borderColor: (theme.vars || theme).palette.primaryDark[600],
-              boxShadow: `${alpha(theme.palette.primaryDark[400], 0.5)} 0 1px 0 1px inset, ${alpha(theme.palette.primaryDark[800], 0.7)} 0 -1px 0 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              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`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.primaryDark[600],
                 borderColor: (theme.vars || theme).palette.primaryDark[700]
@@ -592,7 +603,7 @@ export function getThemedComponents() {
               '&:active': {
                 backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 borderColor: (theme.vars || theme).palette.primaryDark[600],
-                boxShadow: `${alpha(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
+                boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
               },
               '&.Mui-disabled': {
                 color: theme.palette.grey[700],
@@ -617,7 +628,7 @@ export function getThemedComponents() {
               },
               ...theme.applyDarkStyles({
                 '&:hover': {
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5)
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
                 },
                 '&:active': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700]
@@ -630,18 +641,18 @@ export function getThemedComponents() {
             ...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
               color: (theme.vars || theme).palette.primary[600],
               '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[100], 0.3)
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3)
               },
               '&:active': {
-                backgroundColor: alpha(theme.palette.primary[100], 0.5)
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.5)
               },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primary[300],
                 '&:hover': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.3)
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.3)
                 },
                 '&:active': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.1)
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.1)
                 },
                 '&.Mui-disabled': {
                   color: theme.palette.grey[500]
@@ -718,9 +729,9 @@ export function getThemedComponents() {
             position: 'relative',
             border: '1px solid',
             color: (theme.vars || theme).palette.grey[900],
-            backgroundColor: alpha(theme.palette.primary[50], 0.3),
+            backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.3),
             borderColor: (theme.vars || theme).palette.grey[200],
-            boxShadow: `0px 2px 2px ${alpha(theme.palette.primary[100], 0.2)}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.2)}`,
+            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)}`,
             fontFamily: theme.typography.fontFamilyCode,
             fontWeight: 400,
             fontSize: defaultTheme.typography.pxToRem(12),
@@ -777,7 +788,7 @@ export function getThemedComponents() {
             ...theme.applyDarkStyles({
               color: (theme.vars || theme).palette.primary[300],
               '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[800], 0.3)
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.3)
               }
             })
           })
@@ -796,7 +807,7 @@ export function getThemedComponents() {
               background: (theme.vars || theme).palette.grey[50],
               ...theme.applyDarkStyles({
                 borderColor: (theme.vars || theme).palette.primaryDark[600],
-                background: alpha(theme.palette.primaryDark[700], 0.8)
+                background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
               })
             },
             '&:active': {
@@ -822,25 +833,25 @@ export function getThemedComponents() {
             theme
           }) => [{
             color: (theme.vars || theme).palette.primary.main,
-            backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
+            backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
             border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            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`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.grey[300],
               background: (theme.vars || theme).palette.grey[50],
-              boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+              boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
             },
             '&:active': {
               background: (theme.vars || theme).palette.grey[100]
             }
           }, theme.applyDarkStyles({
             color: (theme.vars || theme).palette.primary[300],
-            borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-            backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-            boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+            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`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.primaryDark[600],
-              background: alpha(theme.palette.primaryDark[700], 0.8),
+              background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8),
               boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
             },
             '&:active': {
@@ -855,25 +866,25 @@ export function getThemedComponents() {
             theme
           }) => [{
             color: (theme.vars || theme).palette.text.secondary,
-            backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
+            backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
             border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            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`,
             '&:hover': {
               color: (theme.vars || theme).palette.text.primary,
               borderColor: (theme.vars || theme).palette.grey[300],
               background: (theme.vars || theme).palette.grey[50],
-              boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+              boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
             },
             '&:active': {
               background: (theme.vars || theme).palette.grey[100]
             }
           }, theme.applyDarkStyles({
-            borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-            backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-            boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+            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`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.primaryDark[600],
-              background: alpha(theme.palette.primaryDark[700], 0.8),
+              background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8),
               boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
             },
             '&:active': {
@@ -917,7 +928,7 @@ export function getThemedComponents() {
               '&.Mui-selected': {
                 fontWeight: 500,
                 color: (theme.vars || theme).palette.primary[600],
-                backgroundColor: alpha(theme.palette.primary[100], 0.6)
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.6)
               }
             }
           }, theme.applyDarkStyles({
@@ -929,7 +940,7 @@ export function getThemedComponents() {
               },
               '&.Mui-selected': {
                 color: (theme.vars || theme).palette.primary[200],
-                backgroundColor: alpha(theme.palette.primary[900], 0.4)
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.4)
               }
             }
           })]
@@ -974,7 +985,7 @@ export function getThemedComponents() {
               marginLeft: 2
             },
             '&:focus-visible': {
-              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+              outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
               outlineOffset: 2
             }
           })
@@ -1010,7 +1021,7 @@ export function getThemedComponents() {
             fontWeight: theme.typography.fontWeightSemiBold,
             paddingBottom: 0.2,
             ...(variant === 'outlined' && color === 'default' && {
-              backgroundColor: alpha(theme.palette.grey[50], 0.5),
+              backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
               color: (theme.vars || theme).palette.grey[900],
               borderColor: (theme.vars || theme).palette.grey[200],
               '&:hover': {
@@ -1018,9 +1029,9 @@ export function getThemedComponents() {
                 color: (theme.vars || theme).palette.grey[900]
               },
               ...theme.applyDarkStyles({
-                backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+                backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4),
                 color: (theme.vars || theme).palette.grey[300],
-                borderColor: alpha(theme.palette.primaryDark[500], 0.5),
+                borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
                 '&:hover': {
                   color: (theme.vars || theme).palette.grey[300],
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700]
@@ -1028,22 +1039,22 @@ export function getThemedComponents() {
               })
             }),
             ...(variant === 'outlined' && color === 'info' && {
-              backgroundColor: alpha(theme.palette.grey[50], 0.5),
+              backgroundColor: (0, _styles.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),
+                backgroundColor: (0, _styles.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),
+              backgroundColor: (0, _styles.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)
+                borderColor: (0, _styles.alpha)(theme.palette.primary[500], 0.2),
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[700], 0.2)
               })
             }),
             ...(variant === 'outlined' && color === 'success' && {
@@ -1052,21 +1063,21 @@ export function getThemedComponents() {
               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)
+                borderColor: (0, _styles.alpha)(theme.palette.success[300], 0.2),
+                background: (0, _styles.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),
+                backgroundColor: (0, _styles.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),
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.8),
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[600]
                   }
@@ -1074,7 +1085,7 @@ export function getThemedComponents() {
               }),
               ...(color === 'primary' && {
                 color: (theme.vars || theme).palette.primary[600],
-                backgroundColor: alpha(theme.palette.primary[100], 0.4),
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.4),
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primary[100]
                 },
@@ -1089,9 +1100,9 @@ export function getThemedComponents() {
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[100],
-                  backgroundColor: alpha(theme.palette.primary[800], 0.5),
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.5),
                   '&:hover': {
-                    backgroundColor: alpha(theme.palette.primary[900], 0.5)
+                    backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5)
                   },
                   '& .MuiChip-deleteIcon': {
                     color: (theme.vars || theme).palette.primary[100],
@@ -1107,10 +1118,10 @@ export function getThemedComponents() {
             ...(variant === 'light' && {
               ...(color === 'default' && {
                 color: (theme.vars || theme).palette.primary[700],
-                backgroundColor: alpha(theme.palette.primary[100], 0.3),
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3),
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[200],
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5)
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
                 })
               }),
               ...(color === 'warning' && {
@@ -1167,7 +1178,7 @@ export function getThemedComponents() {
           }, theme.applyDarkStyles({
             color: theme.palette.grey[300],
             '&:hover': {
-              backgroundColor: alpha(theme.palette.primaryDark[700], 0.4)
+              backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)
             },
             '&.Mui-selected': {
               color: '#fff',
@@ -1182,7 +1193,7 @@ export function getThemedComponents() {
       },
       MuiSelect: {
         defaultProps: {
-          IconComponent: ArrowDropDownRounded
+          IconComponent: _ArrowDropDownRounded.default
         },
         styleOverrides: {
           iconFilled: {
@@ -1196,27 +1207,27 @@ export function getThemedComponents() {
                 variant: 'outlined'
               },
               style: {
-                backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
+                backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
                 '& .MuiOutlinedInput-notchedOutline': {
                   border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-                  boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+                  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`
                 },
                 '&:not(.Mui-focused):hover': {
                   background: (theme.vars || theme).palette.grey[50],
                   '& .MuiOutlinedInput-notchedOutline': {
                     borderColor: (theme.vars || theme).palette.grey[300],
-                    boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+                    boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
                   }
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[300],
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
                   '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-                    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
+                    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`
                   },
                   '&:not(.Mui-focused):hover': {
-                    background: alpha(theme.palette.primaryDark[700], 0.8),
+                    background: (0, _styles.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`
@@ -1262,13 +1273,13 @@ export function getThemedComponents() {
               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`,
+                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`,
                 '&: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)}`,
+                  outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
                   outlineOffset: 2
                 }
               },
@@ -1283,13 +1294,13 @@ export function getThemedComponents() {
             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),
+              backgroundColor: (0, _styles.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`,
+                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`,
                 '&:hover': {
-                  borderColor: alpha(theme.palette.primary[600], 0.5),
-                  boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`
+                  borderColor: (0, _styles.alpha)(theme.palette.primary[600], 0.5),
+                  boxShadow: `0px 2px 8px ${(0, _styles.alpha)(theme.palette.primary[900], 0.6)}`
                 }
               },
               ':is(a&), :is(button&)': {
@@ -1355,14 +1366,14 @@ export function getThemedComponents() {
           }, theme.applyDarkStyles({
             borderColor: theme.palette.primaryDark[700],
             '&:hover': {
-              backgroundColor: alpha(theme.palette.primaryDark[600], 0.2)
+              backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)
             },
             '&.Mui-selected': {
               color: (theme.vars || theme).palette.primary[200],
               borderColor: `${(theme.vars || theme).palette.primary[800]} !important`,
-              backgroundColor: alpha(theme.palette.primary[900], 0.4),
+              backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.4),
               '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[900], 0.8),
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.8),
                 borderColor: `${(theme.vars || theme).palette.primary[400]} !important`
               }
             }
@@ -1396,7 +1407,7 @@ export function getThemedComponents() {
             padding: 0,
             borderRadius: 10,
             '&:has(input:focus-visible)': {
-              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+              outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
               outlineOffset: 2
             },
             '& .MuiSwitch-switchBase': {
@@ -1442,7 +1453,7 @@ export 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 ${alpha(theme.palette.grey[400], 0.2)}`,
+              boxShadow: `0 4px 16px ${(0, _styles.alpha)(theme.palette.grey[400], 0.2)}`,
               ...theme.applyDarkStyles({
                 backgroundColor: (theme.vars || theme).palette.primaryDark[800],
                 boxShadow: '0 4px 16px hsl(0, 100%, 1%)'
@@ -1475,9 +1486,9 @@ export function getThemedComponents() {
             '&.Mui-selected': {
               color: theme.palette.primary[100],
               borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
-              backgroundColor: alpha(theme.palette.primary[900], 0.5),
+              backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5),
               '&:hover': {
-                backgroundColor: alpha(theme.palette.primary[900], 0.8)
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.8)
               }
             }
           })]
@@ -1505,7 +1516,7 @@ export function getThemedComponents() {
             ...(ownerState.variant === 'elevation' && {
               border: '1px solid',
               borderColor: (theme.vars || theme).palette.grey[100],
-              boxShadow: `${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[300], 0.5)} 0 1px 8px 0`,
+              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`,
               ...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`
@@ -1517,11 +1528,11 @@ export function getThemedComponents() {
     }
   };
 }
-export const brandingDarkTheme = createTheme({
+const brandingDarkTheme = exports.brandingDarkTheme = (0, _styles.createTheme)({
   ...getDesignTokens('dark'),
   ...getThemedComponents()
 });
-export const brandingLightTheme = createTheme({
+const brandingLightTheme = exports.brandingLightTheme = (0, _styles.createTheme)({
   ...getDesignTokens('light'),
   ...getThemedComponents()
 });