@superdispatch/ui 0.21.5-alpha.4 → 0.21.6

package/dist-src/drawer/DrawerList.js

@@ -1,5 +1,11 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { List, styled } from '@mui/material';
+var _excluded = ["className"];
+import { List } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 
 function listItemMixins(theme, space) {
   return {
@@ -19,13 +25,26 @@ function listItemMixins(theme, space) {
   };
 }
 
-export var DrawerList = /*#__PURE__*/styled(List)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return _objectSpread(_objectSpread({
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  root: _objectSpread(_objectSpread({
     maxWidth: '100%'
   }, listItemMixins(theme, 3)), {}, {
     [theme.breakpoints.up('md')]: _objectSpread({}, listItemMixins(theme, 4))
-  });
-});
+  })
+}), {
+  name: 'SD-DrawerList'
+});
+export var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var styles = useStyles();
+  return /*#__PURE__*/_jsx(List, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    component: "div",
+    className: clsx(className, styles.root)
+  }));
+});
+if (process.env.NODE_ENV !== "production") DrawerList.displayName = "DrawerList";

package/dist-src/drawer/DrawerOverrides.js

@@ -1,16 +1,14 @@
 export function overrideDrawer(theme) {
-  theme.components.MuiDrawer = {
-    defaultProps: {
-      anchor: 'right'
-    },
-    styleOverrides: {
-      paper: {
-        maxWidth: '100%',
-        minWidth: '100%',
-        [theme.breakpoints.up('sm')]: {
-          minWidth: theme.spacing(54),
-          maxWidth: theme.breakpoints.values.sm
-        }
+  theme.props.MuiDrawer = {
+    anchor: 'right'
+  };
+  theme.overrides.MuiDrawer = {
+    paper: {
+      maxWidth: '100%',
+      minWidth: '100%',
+      [theme.breakpoints.up('sm')]: {
+        minWidth: theme.spacing(54),
+        maxWidth: theme.breakpoints.values.sm
       }
     }
   };

package/dist-src/drawer/DrawerTitle.js

@@ -1,32 +1,29 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction"];
-import { AppBar, Grid, styled, Toolbar, Typography } from '@mui/material';
+var _excluded = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
+import { AppBar, Grid, Toolbar, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var StyledAppBar = /*#__PURE__*/styled(AppBar)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
-    borderTop: 'none',
-    borderLeft: 'none',
-    borderRight: 'none',
-    transition: theme.transitions.create(['border-color']),
-    '&[data-sticky="false"]': {
-      borderBottomColor: Color.Transparent
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      borderTop: 'none',
+      borderLeft: 'none',
+      borderRight: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderBottomColor: Color.Transparent
+      }
     }
-  };
-});
-var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
+  },
+  appBarSticky: {},
+  toolbar: {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -35,60 +32,56 @@ var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
         paddingRight: theme.spacing(4)
       }
     }
-  };
-});
-var StartAction = /*#__PURE__*/styled(Grid)(_ref3 => {
-  var {
-    theme
-  } = _ref3;
-  return {
+  },
+  startAction: {
     marginRight: theme.spacing(0.5),
     '& .MuiIconButton-edgeStart': {
       marginLeft: theme.spacing(-2)
     }
-  };
-});
-var EndAction = /*#__PURE__*/styled(Grid)(_ref4 => {
-  var {
-    theme
-  } = _ref4;
-  return {
+  },
+  endAction: {
     marginLeft: theme.spacing(0.5),
     '& .MuiIconButton-edgeEnd': {
       marginRight: theme.spacing(-2)
     }
-  };
+  }
+}), {
+  name: 'SD-DrawerTitle'
 });
-export var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
+export var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   var {
     title,
     titleTypographyProps,
     subtitle,
     subtitleTypographyProps,
     startAction,
-    endAction
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded);
+    endAction,
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
+  var styles = useStyles();
   return /*#__PURE__*/_jsx(VisibilityObserver, {
-    render: _ref6 => {
+    render: _ref2 => {
       var {
         ref,
         visibility
-      } = _ref6;
+      } = _ref2;
       return /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("div", {
           ref: ref
-        }), /*#__PURE__*/_jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+        }), /*#__PURE__*/_jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          "data-sticky": visibility === 'invisible',
-          children: /*#__PURE__*/_jsx(StyledToolbar, {
+          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
+          children: /*#__PURE__*/_jsx(Toolbar, {
+            className: styles.toolbar,
             children: /*#__PURE__*/_jsxs(Grid, {
               container: true,
               alignItems: "center",
-              children: [!!startAction && /*#__PURE__*/_jsx(StartAction, {
+              children: [!!startAction && /*#__PURE__*/_jsx(Grid, {
                 item: true,
+                className: styles.startAction,
                 children: startAction
               }), /*#__PURE__*/_jsxs(Grid, {
                 item: true,
@@ -105,8 +98,9 @@ export var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
                 }, subtitleTypographyProps), {}, {
                   children: subtitle
                 }))]
-              }), !!endAction && /*#__PURE__*/_jsx(EndAction, {
+              }), !!endAction && /*#__PURE__*/_jsx(Grid, {
                 item: true,
+                className: styles.endAction,
                 children: endAction
               })]
             })

package/dist-src/dropdown-button/DropdownButton.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["MenuListProps", "ButtonGroupProps", "children", "isLoading", "onClick", "label"];
-import { ButtonGroup, MenuList, Popover } from '@mui/material';
+import { ButtonGroup, MenuList, Popover } from '@material-ui/core';
 import * as React from 'react';
 import { forwardRef } from 'react';
 import styled from 'styled-components';

package/dist-src/grid/GridStack.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "alignItems"];
-import { Grid } from '@mui/material';
+import { Grid } from '@material-ui/core';
 import { Children, forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 

package/dist-src/grid/InlineGrid.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "wrap", "justify", "alignItems"];
-import { Grid } from '@mui/material';
+import { Grid } from '@material-ui/core';
 import { Children, forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -22,7 +22,7 @@ export var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref,
     wrap: wrap,
     container: true,
-    justifyContent: justify,
+    justify: justify,
     alignItems: alignItems,
     children: items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
       item: true,

package/dist-src/icon-button/IconButtonOverrides.js

@@ -1,60 +1,44 @@
-import { iconButtonClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overrideIconButton(theme) {
-  theme.components.MuiIconButton = {
-    styleOverrides: {
-      root: {
-        // no selector for default color
-        ["&:not(.".concat(iconButtonClasses.colorInherit, "):not(.").concat(iconButtonClasses.colorPrimary, "):not(.").concat(iconButtonClasses.colorSecondary, "):not(.").concat(iconButtonClasses.disabled, ")")]: {
-          color: Color.Dark100
-        },
-        backgroundColor: Color.Transparent,
-        transition: theme.transitions.create(['color', 'background-color'], {
-          duration: theme.transitions.duration.short
-        }),
-        '&:hover': {
-          backgroundColor: Color.Transparent
-        },
-        '&:active': {
-          color: Color.Dark500
-        },
-        '&:hover ': {
-          color: Color.Dark300
-        },
-        '&:focus': {
-          backgroundColor: Color.Silver400
-        },
-        ["&.".concat(iconButtonClasses.disabled)]: {
-          color: Color.Silver500
-        }
+  theme.overrides.MuiIconButton = {
+    root: {
+      color: Color.Dark100,
+      backgroundColor: Color.Transparent,
+      transition: theme.transitions.create(['color', 'background-color'], {
+        duration: theme.transitions.duration.short
+      }),
+      '&:hover': {
+        backgroundColor: Color.Transparent
       },
-      colorPrimary: {
-        '&:active': {
-          color: Color.Blue500
-        },
-        '&:hover ': {
-          color: Color.Blue300
-        },
-        '&:focus': {
-          backgroundColor: Color.Blue50
-        }
+      '&:active': {
+        color: Color.Dark500
       },
-      edgeEnd: {
-        marginRight: theme.spacing(-1)
+      '&:hover ': {
+        color: Color.Dark300
       },
-      edgeStart: {
-        marginLeft: theme.spacing(-1)
+      '&:focus': {
+        backgroundColor: Color.Silver400
       },
-      sizeSmall: {
-        padding: 3,
-        fontSize: theme.typography.pxToRem(18)
+      '&$disabled': {
+        color: Color.Silver500
+      }
+    },
+    colorPrimary: {
+      '&:active': {
+        color: Color.Blue500
       },
-      sizeMedium: {
-        padding: 12,
-        fontSize: theme.typography.pxToRem(24)
+      '&:hover ': {
+        color: Color.Blue300
       },
-      sizeLarge: {// todo declare large size
+      '&:focus': {
+        backgroundColor: Color.Blue50
       }
+    },
+    edgeEnd: {
+      marginRight: theme.spacing(-1)
+    },
+    edgeStart: {
+      marginLeft: theme.spacing(-1)
     }
   };
 }

package/dist-src/info-card/InfoCard.js

@@ -1,36 +1,35 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "square", "classes", "children", "className", "CardContentProps"];
-import { Card, CardContent, styled } from '@mui/material';
+var _excluded = ["size", "square", "classes", "children", "className", "CardContentProps"],
+    _excluded2 = ["content", "sizeLarge", "fullWidth"];
+import { Card, CardContent } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
 import { assignRef } from "../utils/mergeRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-var StyledCardContent = /*#__PURE__*/styled(CardContent)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
-    padding: theme.spacing(2)
-  };
-});
-var StyledCard = /*#__PURE__*/styled(Card)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
-    '&[data-full-width="true"]': {
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  root: {
+    '&$fullWidth': {
       borderRadius: 0,
       borderLeftWidth: 0,
       borderRightWidth: 0
-    },
-    ["&[data-size=\"large\"] > ".concat(StyledCardContent.toString())]: {
+    }
+  },
+  fullWidth: {},
+  sizeLarge: {},
+  content: {
+    padding: theme.spacing(2),
+    '$sizeLarge > &': {
       [theme.breakpoints.up('sm')]: {
         padding: theme.spacing(3)
       }
     }
-  };
+  }
+}), {
+  name: 'SD-InfoCard'
 });
-export var InfoCard = /*#__PURE__*/forwardRef((_ref3, _ref4) => {
+export var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
   var {
     size,
     square,
@@ -38,20 +37,31 @@ export var InfoCard = /*#__PURE__*/forwardRef((_ref3, _ref4) => {
     children,
     className,
     CardContentProps: cardContentProps = {}
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useStyles = useStyles({
+    classes
+  }),
+      {
+    content: contentClassName,
+    sizeLarge: sizeLargeClassName,
+    fullWidth: fullWidthClassName
+  } = _useStyles,
+      styles = _objectWithoutProperties(_useStyles, _excluded2);
 
   var [rootNode, setRootNode] = useState(null);
   var clientRect = rootNode === null || rootNode === void 0 ? void 0 : rootNode.getBoundingClientRect();
   var isFullWidth = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) === window.innerWidth;
-  return /*#__PURE__*/_jsx(StyledCard, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx(Card, _objectSpread(_objectSpread({}, props), {}, {
     ref: node => {
-      assignRef(_ref4, node);
+      assignRef(_ref2, node);
       setRootNode(node);
     },
-    "data-size": size,
-    "data-full-width": isFullWidth,
-    children: /*#__PURE__*/_jsx(StyledCardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
+    classes: styles,
+    className: clsx(className, isFullWidth && fullWidthClassName, size === 'large' && sizeLargeClassName),
+    children: /*#__PURE__*/_jsx(CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
+      className: clsx(cardContentProps.className, contentClassName),
       children: children
     }))
   }));

package/dist-src/link/LinkOverrides.js

@@ -5,42 +5,39 @@ function line(color) {
 }
 
 export function overrideLink(theme) {
-  theme.components.MuiLink = {
-    defaultProps: {
-      underline: 'none',
-      color: 'textPrimary'
-    },
-    styleOverrides: {
-      root: {
-        backgroundSize: '100% 1px',
-        backgroundRepeat: 'repeat-x',
-        backgroundPosition: '0 100%',
-        backgroundColor: Color.Transparent,
-        '&:focus': {
-          outline: 'none'
-        },
-        '&:hover, &:active': {
-          backgroundImage: line('currentColor')
-        }
+  theme.props.MuiLink = {
+    underline: 'none',
+    color: 'textPrimary'
+  };
+  theme.overrides.MuiLink = {
+    root: {
+      backgroundSize: '100% 1px',
+      backgroundRepeat: 'repeat-x',
+      backgroundPosition: '0 100%',
+      backgroundColor: Color.Transparent,
+      '&:focus': {
+        outline: 'none'
       },
-      // @ts-expect-error type def need in patch-package
-      colorTextPrimary: {
+      '&:hover, &:active': {
+        backgroundImage: line('currentColor')
+      },
+      '&.MuiTypography-colorTextPrimary': {
         backgroundImage: line(Color.Silver500),
         '&:focus, &:hover, &:active': {
           color: Color.Blue300,
           backgroundImage: line(Color.Blue300)
         }
-      },
-      button: {
-        // Reset button styles.
-        backgroundColor: 'unset',
-        // Override browser defaults.
-        fontSize: 'inherit',
-        textAlign: 'inherit',
-        lineHeight: 'inherit',
-        userSelect: 'inherit',
-        verticalAlign: 'inherit'
       }
+    },
+    button: {
+      // Reset button styles.
+      backgroundColor: undefined,
+      // Override browser defaults.
+      fontSize: 'inherit',
+      textAlign: 'inherit',
+      lineHeight: 'inherit',
+      userSelect: 'inherit',
+      verticalAlign: 'inherit'
     }
   };
 }

package/dist-src/list/ListOverrides.js

@@ -1,15 +1,12 @@
-import { listItemClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overrideList(theme) {
-  theme.components.MuiListItem = {
-    styleOverrides: {
-      root: {
-        ["&.".concat(listItemClasses.selected, ", &.").concat(listItemClasses.selected, ":hover")]: {
-          backgroundColor: Color.Blue50
-        },
-        '& .MuiTouchRipple-root': {
-          color: Color.Blue100
-        }
+  theme.overrides.MuiListItem = {
+    root: {
+      '&$selected, &$selected:hover': {
+        backgroundColor: Color.Blue50
+      },
+      '& .MuiTouchRipple-root': {
+        color: Color.Blue100
       }
     }
   };

package/dist-src/menu/MenuOverrides.js

@@ -1,34 +1,20 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { menuItemClasses } from '@mui/material';
-import { Color } from "../theme/Color.js";
 export function overrideMenu(theme) {
-  theme.components.MuiMenu = {
-    defaultProps: {
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      }
+  theme.props.MuiMenu = {
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
     }
   };
-  theme.components.MuiMenuItem = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1),
-        '& .MuiTouchRipple-root': {
-          color: Color.Blue100
-        },
-        ["&.".concat(menuItemClasses.selected, ", &.").concat(menuItemClasses.selected, ":hover")]: {
-          backgroundColor: Color.Blue50,
-          ["&.".concat(menuItemClasses.focusVisible)]: {
-            backgroundColor: Color.Blue50
-          }
-        }
-      })
-    }
+  theme.overrides.MuiMenuItem = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1)
+    })
   };
 }

package/dist-src/number-field/NumberField.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "inputRef", "onChange", "isNumericString", "thousandSeparator", "disableValueParsing"],
     _excluded2 = ["id", "InputProps"];
-import { TextField } from '@mui/material';
+import { TextField } from '@material-ui/core';
 import { forwardRef } from 'react';
 import NumberFormat from 'react-number-format';
 import { useUID } from "../utils/useUID.js";