@superdispatch/ui 0.21.5-alpha.4 → 0.21.6

package/dist-src/tabs/TabsOverrides.js

@@ -1,44 +1,40 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { Color } from "../theme/Color.js";
 export function overrideTabs(theme) {
-  theme.components.MuiTabs = {
-    defaultProps: {
-      variant: 'scrollable',
-      textColor: 'primary',
-      indicatorColor: 'primary'
+  theme.props.MuiTabs = {
+    variant: 'scrollable',
+    textColor: 'primary',
+    indicatorColor: 'primary'
+  };
+  theme.overrides.MuiTabs = {
+    root: {
+      minHeight: theme.spacing(6)
     },
-    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
-        })
-      }
+    scrollButtons: {
+      opacity: 1,
+      color: Color.Dark100,
+      width: theme.spacing(4),
+      transition: theme.transitions.create('opacity', {
+        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.overrides.MuiTab = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      minHeight: theme.spacing(6),
+      transition: theme.transitions.create(['color'], {
+        duration: theme.transitions.duration.short
       }),
-      textColorPrimary: {
-        color: Color.Dark500,
-        '&:hover, &:focus': {
-          color: Color.Blue300
-        }
+      [theme.breakpoints.up('sm')]: {
+        minWidth: undefined,
+        fontSize: undefined,
+        padding: theme.spacing(0.75, 3)
+      }
+    }),
+    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 '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/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 { formLabelClasses, inputBaseClasses, outlinedInputClasses, SvgIcon } from '@mui/material';
+import { SvgIcon } from '@material-ui/core';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,192 +14,171 @@ 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.components.MuiTextField = {
-    defaultProps: {
-      minRows: 4,
-      maxRows: 4,
-      variant: 'outlined'
-    }
-  };
-  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.props.MuiTextField = {
+    minRows: 4,
+    maxRows: 4,
+    variant: 'outlined'
   };
-  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)
-        }
+  theme.overrides.MuiFormLabel = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      color: Color.Dark400,
+      '&$error': {
+        color: undefined
+      },
+      '&$focused': {
+        color: undefined
       },
-      inputMultiline: {
-        resize: 'vertical'
+      '&$disabled': {
+        color: undefined
       }
+    })
+  };
+  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)
+      }
+    },
+    inputMultiline: {
+      resize: 'vertical'
     }
   };
-  theme.components.MuiInputLabel = {
-    defaultProps: {
-      shrink: true
+  theme.props.MuiInputLabel = {
+    shrink: true
+  };
+  theme.overrides.MuiInputLabel = {
+    root: {
+      marginBottom: theme.spacing(0.5),
+      transformOrigin: 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'
+    formControl: {
+      top: undefined,
+      left: undefined,
+      position: undefined,
+      transform: undefined
+    },
+    shrink: {
+      transform: undefined,
+      transformOrigin: undefined
+    },
+    outlined: {
+      zIndex: undefined,
+      transform: undefined,
+      pointerEvents: undefined,
+      '&$shrink': {
+        transform: undefined
       }
     }
   };
-  theme.components.MuiOutlinedInput = {
-    defaultProps: {
-      notched: false
+  theme.props.MuiOutlinedInput = {
+    notched: false
+  };
+  theme.overrides.MuiOutlinedInput = {
+    root: {
+      '&:hover $notchedOutline': {
+        borderColor: undefined
+      }
     },
-    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: {
+    input: {
+      padding: theme.spacing(1.25, 1.5),
+      [sm]: {
         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'
-        }
+      }
+    },
+    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'
       }
     }
   };
-  theme.components.MuiSelect = {
-    defaultProps: {
-      IconComponent: SelectIcon
-    },
-    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)
-        }
+  theme.props.MuiSelect = {
+    IconComponent: SelectIcon
+  };
+  theme.overrides.MuiSelect = {
+    icon: {
+      top: 'calc(50% - 0.5em)',
+      '$disabled &': {
+        color: Color.Dark100
       },
-      select: {
+      fontSize: theme.spacing(3),
+      [sm]: {
+        fontSize: theme.spacing(2)
+      }
+    },
+    iconOutlined: {
+      right: theme.spacing(1.5),
+      [sm]: {
+        right: theme.spacing(1)
+      }
+    },
+    select: {
+      '&:focus': {
+        backgroundColor: undefined
+      }
+    },
+    selectMenu: {
+      '&&': {
         paddingRight: theme.spacing(4.5),
         [sm]: {
           right: theme.spacing(4)
-        },
-        '&:focus': {
-          backgroundColor: 'unset'
         }
       }
     }
   };
-  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)
+  theme.overrides.MuiInputAdornment = {
+    root: {
+      '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
+        fontSize: theme.spacing(3),
+        [sm]: {
+          fontSize: theme.spacing(2.5)
         }
       },
-      positionStart: {
-        '& .MuiIconButton-root': {
-          marginLeft: theme.spacing(-0.5),
-          [sm]: {
-            marginLeft: theme.spacing(-0.75)
-          }
+      '& .MuiIconButton-root': {
+        padding: theme.spacing(1)
+      }
+    },
+    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.components.MuiFormHelperText = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        marginTop: theme.spacing(0.5)
-      }),
-      contained: {
-        marginLeft: 'unset',
-        marginRight: 'unset'
-      }
+  theme.overrides.MuiFormHelperText = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      marginTop: theme.spacing(0.5)
+    }),
+    contained: {
+      marginLeft: undefined,
+      marginRight: undefined
     }
   };
 }

package/dist-src/theme/ThemeProvider.js

@@ -1,7 +1,8 @@
-import { createTheme, CssBaseline, ThemeProvider as MaterialThemeProvider } from '@mui/material';
-import { createGenerateClassName, StylesProvider } from '@mui/styles';
-import { createBreakpoints } from '@mui/system';
+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 { 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";
@@ -29,7 +30,6 @@ 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, todo
+        hint: Color.Dark100,
         disabled: Color.Dark100
       },
       divider: Color.Silver400
     },
     typography: createTypographyOptions(breakpoints),
-    components: {}
+    props: {},
+    overrides: {}
   });
-  overrideCard(theme);
-  overrideButton(theme);
   overrideAppBar(theme);
-  overridePaper(theme);
-  overrideTooltip(theme);
-  overrideSvgIcon(theme);
-  overrideToolbar(theme);
-  overrideIconButton(theme);
-  overrideTypography(theme);
-  overrideMenu(theme);
-  overrideAvatar(theme);
-  overrideTextField(theme);
   overrideAutocomplete(theme);
-  overrideCssBaseline(theme);
+  overrideAvatar(theme);
+  overrideButton(theme);
+  overrideCard(theme);
   overrideCheckbox(theme);
-  overrideRadio(theme);
-  overrideSwitch(theme);
   overrideChip(theme);
   overrideDialog(theme);
   overrideDrawer(theme);
-  overridePagination(theme);
-  overrideList(theme);
+  overrideIconButton(theme);
   overrideLink(theme);
+  overrideList(theme);
+  overrideMenu(theme);
+  overridePaper(theme);
+  overrideRadio(theme);
   overrideSnackbar(theme);
+  overrideSvgIcon(theme);
+  overrideSwitch(theme);
   overrideTabs(theme);
+  overrideTextField(theme);
+  overrideToolbar(theme);
+  overrideTooltip(theme);
+  overrideTypography(theme);
+  overridePagination(theme);
   return theme;
 }
 
@@ -132,9 +132,12 @@ export function ThemeProvider(_ref) {
     generateClassName: generateClassName,
     children: /*#__PURE__*/_jsxs(MaterialThemeProvider, {
       theme: theme,
-      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(ResponsiveContextProvider, {
-        children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
-          children: children
+      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(StyledThemeProvider, {
+        theme: theme,
+        children: /*#__PURE__*/_jsx(ResponsiveContextProvider, {
+          children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
+            children: children
+          })
         })
       })]
     })

package/dist-src/tiles/Tiles.js

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

package/dist-src/toolbar/ToolbarOverrides.js

@@ -1,14 +1,12 @@
 export function overrideToolbar(theme) {
-  theme.components.MuiToolbar = {
-    styleOverrides: {
-      regular: {
-        minHeight: theme.spacing(8)
-      },
-      gutters: {
-        [theme.breakpoints.up('sm')]: {
-          paddingLeft: theme.spacing(2),
-          paddingRight: theme.spacing(2)
-        }
+  theme.overrides.MuiToolbar = {
+    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,42 +1,39 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { tooltipClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overrideTooltip(theme) {
-  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
-          }
+  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
         }
       },
-      arrow: {
-        color: Color.Dark400,
-        fontSize: theme.spacing(1)
+      '&[x-placement*="right"] $arrow': {
+        '&::before': {
+          borderBottomLeftRadius: 2
+        }
+      },
+      '&[x-placement*="bottom"] $arrow': {
+        '&::before': {
+          borderTopLeftRadius: 2
+        }
       }
+    },
+    arrow: {
+      color: Color.Dark400,
+      fontSize: theme.spacing(1)
     }
   };
 }

package/dist-src/typography/TypographyOverrides.js

@@ -1,11 +1,3 @@
-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 {
@@ -111,9 +103,7 @@ export function createTypographyOptions(breakpoints) {
   };
 }
 export function overrideTypography(theme) {
-  theme.components.MuiTypography = {
-    defaultProps: {
-      variant: 'body2'
-    }
+  theme.props.MuiTypography = {
+    variant: 'body2'
   };
 }