@superdispatch/ui 0.20.4 → 0.21.5-alpha.0

package/dist-src/tabs/TabsOverrides.js

@@ -1,40 +1,44 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { Color } from "../theme/Color.js";
 export function overrideTabs(theme) {
-  theme.props.MuiTabs = {
-    variant: 'scrollable',
-    textColor: 'primary',
-    indicatorColor: 'primary'
-  };
-  theme.overrides.MuiTabs = {
-    root: {
-      minHeight: theme.spacing(6)
+  theme.components.MuiTabs = {
+    defaultProps: {
+      variant: 'scrollable',
+      textColor: 'primary',
+      indicatorColor: 'primary'
     },
-    scrollButtons: {
-      opacity: 1,
-      color: Color.Dark100,
-      width: theme.spacing(4),
-      transition: theme.transitions.create('opacity', {
-        duration: theme.transitions.duration.short
-      })
+    styleOverrides: {
+      root: {
+        minHeight: theme.spacing(6)
+      },
+      scrollButtons: {
+        opacity: 1,
+        color: Color.Dark100,
+        width: theme.spacing(4),
+        transition: theme.transitions.create('opacity', {
+          duration: theme.transitions.duration.short
+        })
+      }
     }
   };
-  theme.overrides.MuiTab = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      minHeight: theme.spacing(6),
-      transition: theme.transitions.create(['color'], {
-        duration: theme.transitions.duration.short
+  theme.components.MuiTab = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        minHeight: theme.spacing(6),
+        transition: theme.transitions.create(['color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [theme.breakpoints.up('sm')]: {
+          minWidth: 'unset',
+          fontSize: 'unset',
+          padding: theme.spacing(0.75, 3)
+        }
       }),
-      [theme.breakpoints.up('sm')]: {
-        minWidth: undefined,
-        fontSize: undefined,
-        padding: theme.spacing(0.75, 3)
-      }
-    }),
-    textColorPrimary: {
-      color: Color.Dark500,
-      '&:hover, &:focus': {
-        color: Color.Blue300
+      textColorPrimary: {
+        color: Color.Dark500,
+        '&:hover, &:focus': {
+          color: Color.Blue300
+        }
       }
     }
   };

package/dist-src/tag/Tag.js

@@ -1,8 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
-import { Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
+import { Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import cx from 'clsx';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";

package/dist-src/text-field/TextFieldOverrides.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { SvgIcon } from '@material-ui/core';
+import { formLabelClasses, inputBaseClasses, outlinedInputClasses, SvgIcon } from '@mui/material';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,171 +14,192 @@ var SelectIcon = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SvgIc
 if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon";
 export function overrideTextField(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.props.MuiTextField = {
-    minRows: 4,
-    maxRows: 4,
-    variant: 'outlined'
+  theme.components.MuiTextField = {
+    defaultProps: {
+      minRows: 4,
+      maxRows: 4,
+      variant: 'outlined'
+    }
   };
-  theme.overrides.MuiFormLabel = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: Color.Dark400,
-      '&$error': {
-        color: undefined
-      },
-      '&$focused': {
-        color: undefined
-      },
-      '&$disabled': {
-        color: undefined
-      }
-    })
+  theme.components.MuiFormLabel = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        color: Color.Dark400,
+        ["&.".concat(formLabelClasses.error)]: {
+          color: Color.Dark400
+        },
+        ["&.".concat(formLabelClasses.focused)]: {
+          color: Color.Dark400
+        },
+        ["&.".concat(formLabelClasses.disabled)]: {
+          color: Color.Dark400
+        }
+      })
+    }
   };
-  theme.overrides.MuiInputBase = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      '&$disabled': {
-        backgroundColor: Color.Silver100
-      }
-    }),
-    input: {
-      textOverflow: 'ellipsis',
-      height: theme.spacing(3),
-      [sm]: {
-        height: theme.spacing(2.5)
+  theme.components.MuiInputBase = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        ["&.".concat(inputBaseClasses.disabled)]: {
+          backgroundColor: Color.Silver100
+        }
+      }),
+      input: {
+        textOverflow: 'ellipsis',
+        height: theme.spacing(3),
+        [sm]: {
+          height: theme.spacing(2.5)
+        }
+      },
+      inputMultiline: {
+        resize: 'vertical'
       }
-    },
-    inputMultiline: {
-      resize: 'vertical'
     }
   };
-  theme.props.MuiInputLabel = {
-    shrink: true
-  };
-  theme.overrides.MuiInputLabel = {
-    root: {
-      marginBottom: theme.spacing(0.5),
-      transformOrigin: undefined
-    },
-    formControl: {
-      top: undefined,
-      left: undefined,
-      position: undefined,
-      transform: undefined
+  theme.components.MuiInputLabel = {
+    defaultProps: {
+      shrink: true
     },
-    shrink: {
-      transform: undefined,
-      transformOrigin: undefined
-    },
-    outlined: {
-      zIndex: undefined,
-      transform: undefined,
-      pointerEvents: undefined,
-      '&$shrink': {
-        transform: undefined
+    styleOverrides: {
+      root: {
+        marginBottom: theme.spacing(0.5),
+        transformOrigin: 'unset'
+      },
+      formControl: {
+        top: 'unset',
+        left: 'unset',
+        position: 'unset',
+        transform: 'unset'
+      },
+      shrink: {
+        transform: 'unset',
+        transformOrigin: 'unset'
+      },
+      outlined: {
+        zIndex: 'unset',
+        transform: 'unset',
+        pointerEvents: 'unset'
       }
     }
   };
-  theme.props.MuiOutlinedInput = {
-    notched: false
-  };
-  theme.overrides.MuiOutlinedInput = {
-    root: {
-      '&:hover $notchedOutline': {
-        borderColor: undefined
-      }
+  theme.components.MuiOutlinedInput = {
+    defaultProps: {
+      notched: false
     },
-    input: {
-      padding: theme.spacing(1.25, 1.5),
-      [sm]: {
+    styleOverrides: {
+      root: {
+        ["&:hover .".concat(outlinedInputClasses.notchedOutline)]: {
+          borderColor: Color.Silver500
+        }
+      },
+      input: {
+        padding: theme.spacing(1.25, 1.5),
+        [sm]: {
+          padding: theme.spacing(0.75, 1)
+        },
+        '&.MuiInputBase-inputAdornedStart': {
+          paddingLeft: 0
+        },
+        '&.MuiInputBase-inputAdornedEnd': {
+          paddingRight: 0
+        }
+      },
+      inputMultiline: {
+        padding: 0,
+        [sm]: {
+          padding: 0
+        }
+      },
+      multiline: {
         padding: theme.spacing(0.75, 1)
-      }
-    },
-    multiline: {
-      padding: theme.spacing(0.75, 1)
-    },
-    adornedStart: {
-      paddingLeft: theme.spacing(1)
-    },
-    adornedEnd: {
-      paddingRight: theme.spacing(1)
-    },
-    notchedOutline: {
-      top: 0,
-      borderColor: Color.Silver500,
-      '& legend': {
-        display: 'none'
+      },
+      adornedStart: {
+        paddingLeft: theme.spacing(1)
+      },
+      adornedEnd: {
+        paddingRight: theme.spacing(1)
+      },
+      notchedOutline: {
+        top: 0,
+        borderColor: Color.Silver500,
+        '& legend': {
+          display: 'none'
+        }
       }
     }
   };
-  theme.props.MuiSelect = {
-    IconComponent: SelectIcon
-  };
-  theme.overrides.MuiSelect = {
-    icon: {
-      top: 'calc(50% - 0.5em)',
-      '$disabled &': {
-        color: Color.Dark100
-      },
-      fontSize: theme.spacing(3),
-      [sm]: {
-        fontSize: theme.spacing(2)
-      }
-    },
-    iconOutlined: {
-      right: theme.spacing(1.5),
-      [sm]: {
-        right: theme.spacing(1)
-      }
+  theme.components.MuiSelect = {
+    defaultProps: {
+      IconComponent: SelectIcon
     },
-    select: {
-      '&:focus': {
-        backgroundColor: undefined
-      }
-    },
-    selectMenu: {
-      '&&': {
+    styleOverrides: {
+      icon: {
+        top: 'calc(50% - 0.5em)',
+        '$disabled &': {
+          color: Color.Dark100
+        },
+        fontSize: theme.spacing(3),
+        [sm]: {
+          fontSize: theme.spacing(2)
+        }
+      },
+      iconOutlined: {
+        right: theme.spacing(1.5),
+        [sm]: {
+          right: theme.spacing(1)
+        }
+      },
+      select: {
         paddingRight: theme.spacing(4.5),
         [sm]: {
           right: theme.spacing(4)
+        },
+        '&:focus': {
+          backgroundColor: 'unset'
         }
       }
     }
   };
-  theme.overrides.MuiInputAdornment = {
-    root: {
-      '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
-        fontSize: theme.spacing(3),
-        [sm]: {
-          fontSize: theme.spacing(2.5)
+  theme.components.MuiInputAdornment = {
+    styleOverrides: {
+      root: {
+        '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
+          fontSize: theme.spacing(3),
+          [sm]: {
+            fontSize: theme.spacing(2.5)
+          }
+        },
+        '& .MuiIconButton-root': {
+          padding: theme.spacing(1)
         }
       },
-      '& .MuiIconButton-root': {
-        padding: theme.spacing(1)
-      }
-    },
-    positionStart: {
-      '& .MuiIconButton-root': {
-        marginLeft: theme.spacing(-0.5),
-        [sm]: {
-          marginLeft: theme.spacing(-0.75)
+      positionStart: {
+        '& .MuiIconButton-root': {
+          marginLeft: theme.spacing(-0.5),
+          [sm]: {
+            marginLeft: theme.spacing(-0.75)
+          }
         }
-      }
-    },
-    positionEnd: {
-      '& .MuiIconButton-root': {
-        marginRight: theme.spacing(-0.5),
-        [sm]: {
-          marginRight: theme.spacing(-0.75)
+      },
+      positionEnd: {
+        '& .MuiIconButton-root': {
+          marginRight: theme.spacing(-0.5),
+          [sm]: {
+            marginRight: theme.spacing(-0.75)
+          }
         }
       }
     }
   };
-  theme.overrides.MuiFormHelperText = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      marginTop: theme.spacing(0.5)
-    }),
-    contained: {
-      marginLeft: undefined,
-      marginRight: undefined
+  theme.components.MuiFormHelperText = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        marginTop: theme.spacing(0.5)
+      }),
+      contained: {
+        marginLeft: 'unset',
+        marginRight: 'unset'
+      }
     }
   };
 }

package/dist-src/theme/CssBaselineOverrides.js

@@ -0,0 +1,8 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+export function overrideCssBaseline(theme) {
+  theme.components.MuiCssBaseline = {
+    styleOverrides: {
+      body: _objectSpread({}, theme.typography.body2)
+    }
+  };
+}

package/dist-src/theme/ThemeProvider.js

@@ -1,8 +1,7 @@
-import { createGenerateClassName, createTheme, CssBaseline } from '@material-ui/core';
-import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
-import { StylesProvider, ThemeProvider as MaterialThemeProvider } from '@material-ui/styles';
+import { createTheme, CssBaseline, ThemeProvider as MaterialThemeProvider } from '@mui/material';
+import { createGenerateClassName, StylesProvider } from '@mui/styles';
+import { createBreakpoints } from '@mui/system';
 import { useConstant } from '@superdispatch/hooks';
-import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { overrideAppBar } from "../app-bar/AppBarOverrides.js";
 import { overrideAutocomplete } from "../autocomplete/AutocompleteOverrides.js";
 import { overrideAvatar } from "../avatar/AvatarOverrides.js";
@@ -30,6 +29,7 @@ import { overrideToolbar } from "../toolbar/ToolbarOverrides.js";
 import { overrideTooltip } from "../tooltip/TooltipOverrides.js";
 import { createTypographyOptions, overrideTypography } from "../typography/TypographyOverrides.js";
 import { Color } from "./Color.js";
+import { overrideCssBaseline } from "./CssBaselineOverrides.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -52,39 +52,39 @@ function createSuperDispatchTheme() {
       text: {
         primary: Color.Dark500,
         secondary: Color.Dark200,
-        hint: Color.Dark100,
+        // hint: Color.Dark100, todo
         disabled: Color.Dark100
       },
       divider: Color.Silver400
     },
     typography: createTypographyOptions(breakpoints),
-    props: {},
-    overrides: {}
+    components: {}
   });
+  overrideCard(theme);
+  overrideButton(theme);
   overrideAppBar(theme);
-  overrideAutocomplete(theme);
+  overridePaper(theme);
+  overrideTooltip(theme);
+  overrideSvgIcon(theme);
+  overrideToolbar(theme);
+  overrideIconButton(theme);
+  overrideTypography(theme);
+  overrideMenu(theme);
   overrideAvatar(theme);
-  overrideButton(theme);
-  overrideCard(theme);
+  overrideTextField(theme);
+  overrideAutocomplete(theme);
+  overrideCssBaseline(theme);
   overrideCheckbox(theme);
+  overrideRadio(theme);
+  overrideSwitch(theme);
   overrideChip(theme);
   overrideDialog(theme);
   overrideDrawer(theme);
-  overrideIconButton(theme);
-  overrideLink(theme);
+  overridePagination(theme);
   overrideList(theme);
-  overrideMenu(theme);
-  overridePaper(theme);
-  overrideRadio(theme);
+  overrideLink(theme);
   overrideSnackbar(theme);
-  overrideSvgIcon(theme);
-  overrideSwitch(theme);
   overrideTabs(theme);
-  overrideTextField(theme);
-  overrideToolbar(theme);
-  overrideTooltip(theme);
-  overrideTypography(theme);
-  overridePagination(theme);
   return theme;
 }
 
@@ -132,12 +132,9 @@ export function ThemeProvider(_ref) {
     generateClassName: generateClassName,
     children: /*#__PURE__*/_jsxs(MaterialThemeProvider, {
       theme: theme,
-      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(StyledThemeProvider, {
-        theme: theme,
-        children: /*#__PURE__*/_jsx(ResponsiveContextProvider, {
-          children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
-            children: children
-          })
+      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(ResponsiveContextProvider, {
+        children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
+          children: children
         })
       })]
     })

package/dist-src/tiles/Tiles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
@@ -8,12 +8,13 @@ var PREVENT_COLLAPSE = 1;
 
 function spaceVariant(theme, space) {
   var gap = theme.spacing(space);
+  var parsedGap = parseInt(gap);
   return {
     '&:before': {
-      marginTop: -gap - PREVENT_COLLAPSE
+      marginTop: -parsedGap - PREVENT_COLLAPSE
     },
     '& > $container': {
-      marginLeft: -gap,
+      marginLeft: -parsedGap,
       '& > $child > $childContainer': {
         marginTop: gap,
         marginLeft: gap

package/dist-src/toolbar/ToolbarOverrides.js

@@ -1,12 +1,14 @@
 export function overrideToolbar(theme) {
-  theme.overrides.MuiToolbar = {
-    regular: {
-      minHeight: theme.spacing(8)
-    },
-    gutters: {
-      [theme.breakpoints.up('sm')]: {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
+  theme.components.MuiToolbar = {
+    styleOverrides: {
+      regular: {
+        minHeight: theme.spacing(8)
+      },
+      gutters: {
+        [theme.breakpoints.up('sm')]: {
+          paddingLeft: theme.spacing(2),
+          paddingRight: theme.spacing(2)
+        }
       }
     }
   };

package/dist-src/tooltip/TooltipOverrides.js

@@ -1,39 +1,42 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { tooltipClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overrideTooltip(theme) {
-  theme.props.MuiTooltip = {
-    arrow: true
-  };
-  theme.overrides.MuiTooltip = {
-    tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      padding: theme.spacing(1, 1.5),
-      backgroundColor: Color.Dark400
-    }),
-    popperArrow: {
-      '&[x-placement*="top"] $arrow': {
-        '&::before': {
-          borderBottomRightRadius: 2
-        }
-      },
-      '&[x-placement*="left"] $arrow': {
-        '&::before': {
-          borderTopRightRadius: 2
-        }
-      },
-      '&[x-placement*="right"] $arrow': {
-        '&::before': {
-          borderBottomLeftRadius: 2
+  theme.components.MuiTooltip = {
+    defaultProps: {
+      arrow: true
+    },
+    styleOverrides: {
+      tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        padding: theme.spacing(1, 1.5),
+        backgroundColor: Color.Dark400
+      }),
+      popperArrow: {
+        ["&[data-popper-placement*=\"top\"] .".concat(tooltipClasses.arrow)]: {
+          '&::before': {
+            borderBottomRightRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"left\"] .".concat(tooltipClasses.arrow)]: {
+          '&::before': {
+            borderTopRightRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"right\"] .".concat(tooltipClasses.arrow)]: {
+          '&::before': {
+            borderBottomLeftRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"bottom\"] .".concat(tooltipClasses.arrow)]: {
+          '&::before': {
+            borderTopLeftRadius: 2
+          }
         }
       },
-      '&[x-placement*="bottom"] $arrow': {
-        '&::before': {
-          borderTopLeftRadius: 2
-        }
+      arrow: {
+        color: Color.Dark400,
+        fontSize: theme.spacing(1)
       }
-    },
-    arrow: {
-      color: Color.Dark400,
-      fontSize: theme.spacing(1)
     }
   };
 }

package/dist-src/typography/TypographyOverrides.js

@@ -1,3 +1,11 @@
+function createCSSVarName(component, property) {
+  return "--mui-".concat(component, "-").concat(property);
+}
+
+export var typographyVars = {
+  color: /*#__PURE__*/createCSSVarName('typography', 'color'),
+  backgroundImage: /*#__PURE__*/createCSSVarName('typography', 'backgroundImage')
+};
 export function createTypographyOptions(breakpoints) {
   var xsOnly = breakpoints.only('xs');
   return {
@@ -103,7 +111,9 @@ export function createTypographyOptions(breakpoints) {
   };
 }
 export function overrideTypography(theme) {
-  theme.props.MuiTypography = {
-    variant: 'body2'
+  theme.components.MuiTypography = {
+    defaultProps: {
+      variant: 'body2'
+    }
   };
 }