@superdispatch/ui 0.21.5-alpha.4 → 0.21.6

package/dist-src/checkbox/CheckboxOverrides.js

@@ -1,70 +1,60 @@
-import { checkboxClasses, SvgIcon } from '@mui/material';
+import { SvgIcon } from '@material-ui/core';
 import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function overrideCheckbox(theme) {
-  theme.components.MuiCheckbox = {
-    defaultProps: {
-      color: 'primary',
-      icon: /*#__PURE__*/_jsx(SvgIcon, {
-        children: /*#__PURE__*/_jsx("rect", {
-          width: "17",
-          height: "17",
-          x: "3.5",
-          y: "3.5",
-          fill: Color.White,
-          stroke: "currentColor",
-          rx: "1.5"
-        })
-      }),
-      checkedIcon: /*#__PURE__*/_jsxs(SvgIcon, {
-        children: [/*#__PURE__*/_jsx("rect", {
-          width: "18",
-          height: "18",
-          x: "3",
-          y: "3",
-          fill: "currentColor",
-          rx: "2"
-        }), /*#__PURE__*/_jsx("path", {
-          fill: Color.White,
-          d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
-        })]
-      }),
-      indeterminateIcon: /*#__PURE__*/_jsxs(SvgIcon, {
-        children: [/*#__PURE__*/_jsx("rect", {
-          width: "18",
-          height: "18",
-          x: "3",
-          y: "3",
-          fill: "currentIcon",
-          rx: "2"
-        }), /*#__PURE__*/_jsx("path", {
-          fill: Color.White,
-          d: "M7 11h10v2H7v-2z"
-        })]
+  theme.props.MuiCheckbox = {
+    color: 'primary',
+    icon: /*#__PURE__*/_jsx(SvgIcon, {
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "17",
+        height: "17",
+        x: "3.5",
+        y: "3.5",
+        fill: Color.White,
+        stroke: "currentColor",
+        rx: "1.5"
       })
+    }),
+    checkedIcon: /*#__PURE__*/_jsxs(SvgIcon, {
+      children: [/*#__PURE__*/_jsx("rect", {
+        width: "18",
+        height: "18",
+        x: "3",
+        y: "3",
+        fill: "currentColor",
+        rx: "2"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: Color.White,
+        d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
+      })]
+    }),
+    indeterminateIcon: /*#__PURE__*/_jsxs(SvgIcon, {
+      children: [/*#__PURE__*/_jsx("rect", {
+        width: "18",
+        height: "18",
+        x: "3",
+        y: "3",
+        fill: "currentIcon",
+        rx: "2"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: Color.White,
+        d: "M7 11h10v2H7v-2z"
+      })]
+    })
+  };
+  theme.overrides.MuiCheckbox = {
+    root: {
+      color: Color.Dark100,
+      marginTop: theme.spacing(-0.625),
+      marginBottom: theme.spacing(-0.625)
     },
-    styleOverrides: {
-      root: {
-        color: Color.Dark100,
-        marginTop: theme.spacing(-0.625),
-        marginBottom: theme.spacing(-0.625)
-      },
-      indeterminate: {
-        ["&:not(.".concat(checkboxClasses.checked, ")")]: {
-          color: Color.Dark100
-        },
-        ["&.".concat(checkboxClasses.disabled)]: {
-          color: Color.Silver400
-        }
+    colorPrimary: {
+      '&$checked$disabled': {
+        color: Color.Silver500
       },
-      colorPrimary: {
-        ["&.".concat(checkboxClasses.checked, ".").concat(checkboxClasses.disabled)]: {
-          color: Color.Silver500
-        },
-        ["&:hover:not(.".concat(checkboxClasses.checked, ")")]: {
-          color: Color.Dark100
-        }
+      '&:hover:not($checked)': {
+        color: Color.Dark100
       }
     }
   };

package/dist-src/chip/ChipOverrides.js

@@ -1,105 +1,102 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { chipClasses, SvgIcon } from '@mui/material';
+import { SvgIcon } from '@material-ui/core';
 import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function overrideChip(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiChip = {
-    defaultProps: {
-      size: 'small',
-      deleteIcon: /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(SvgIcon, {
-          children: /*#__PURE__*/_jsx("path", {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z",
-            fill: "currentColor"
-          })
+  theme.props.MuiChip = {
+    size: 'small',
+    deleteIcon: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(SvgIcon, {
+        children: /*#__PURE__*/_jsx("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z",
+          fill: "currentColor"
         })
       })
+    })
+  };
+  theme.overrides.MuiChip = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      color: undefined,
+      height: undefined,
+      borderRadius: 4,
+      backgroundColor: Color.Silver200,
+      '&$disabled': {
+        opacity: undefined,
+        color: Color.Dark100
+      }
+    }),
+    sizeSmall: {
+      height: undefined
     },
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        color: 'unset',
-        height: 'unset',
-        borderRadius: 4,
-        backgroundColor: Color.Silver200,
-        ["&.".concat(chipClasses.disabled)]: {
-          opacity: 1,
-          color: Color.Dark100
-        }
-      }),
-      sizeSmall: {
-        height: 'unset'
-      },
-      labelSmall: {
-        paddingLeft: 6,
-        paddingRight: 6,
-        [sm]: {
-          paddingLeft: 4,
-          paddingRight: 4
-        }
+    labelSmall: {
+      paddingLeft: 6,
+      paddingRight: 6,
+      [sm]: {
+        paddingLeft: 4,
+        paddingRight: 4
+      }
+    },
+    clickable: {
+      '&:hover, &:focus': {
+        backgroundColor: undefined
       },
-      clickable: {
-        '&:hover, &:focus': {
-          backgroundColor: Color.Silver200
-        },
-        '&:active': {
-          boxShadow: 'unset'
-        },
-        '&:focus': {
-          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
-        },
-        '&:active, &:hover': {
-          backgroundColor: Color.Silver300
-        }
+      '&:active': {
+        boxShadow: undefined
       },
-      deletable: {
-        '&:focus': {
-          backgroundColor: Color.Silver200,
-          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
-        }
+      '&:focus': {
+        boxShadow: "0 0 0 2px ".concat(Color.Silver300)
       },
-      deleteIcon: {
-        width: 'unset',
-        height: 'unset',
-        display: 'flex',
-        fontSize: 14,
-        transition: theme.transitions.create('background-color'),
-        '&:active, &:hover, &:focus': {
-          '& > svg': {
-            backgroundColor: Color.Silver400
-          }
-        },
+      '&:active, &:hover': {
+        backgroundColor: Color.Silver300
+      }
+    },
+    deletable: {
+      '&:focus': {
+        backgroundColor: undefined,
+        boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+      }
+    },
+    deleteIcon: {
+      width: undefined,
+      height: undefined,
+      display: 'flex',
+      transition: theme.transitions.create('background-color'),
+      '&:active, &:hover, &:focus': {
         '& > svg': {
-          borderRadius: '50%',
-          color: Color.Dark200,
-          fontSize: '1em'
-        }
-      },
-      deleteIconSmall: {
-        width: 'unset',
-        height: 'unset',
-        padding: theme.spacing(0.5),
-        marginLeft: theme.spacing(-0.5),
-        marginRight: theme.spacing(0.25),
-        [sm]: {
-          marginRight: 0
+          backgroundColor: Color.Silver400
         }
       },
-      icon: {
-        color: Color.Dark100,
-        fontSize: '1em',
-        marginRight: 'unset'
-      },
-      iconSmall: {
-        width: 'unset',
-        height: 'unset',
-        marginLeft: 8,
-        marginRight: 'unset',
-        [sm]: {
-          marginLeft: 4
-        }
+      '& > svg': {
+        borderRadius: '50%',
+        color: Color.Dark200,
+        fontSize: '1em'
+      }
+    },
+    deleteIconSmall: {
+      width: undefined,
+      height: undefined,
+      padding: theme.spacing(0.5),
+      marginLeft: theme.spacing(-0.5),
+      marginRight: theme.spacing(0.25),
+      [sm]: {
+        marginRight: 0
+      }
+    },
+    icon: {
+      color: Color.Dark100,
+      fontSize: '1em',
+      marginRight: undefined
+    },
+    iconSmall: {
+      width: undefined,
+      height: undefined,
+      marginLeft: 8,
+      marginRight: undefined,
+      [sm]: {
+        marginLeft: 4
       }
     }
   };

package/dist-src/description-list/DescriptionList.js

@@ -1,7 +1,9 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size"];
-import { styled, SvgIcon, Typography } from '@mui/material';
+import { SvgIcon, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { OverflowText } from "../overflow-text/OverflowText.js";
 import { Color } from "../theme/Color.js";
@@ -9,18 +11,29 @@ import { isEmptyReactNode } from "../utils/isEmptyReactNode.js";
 import { useUID } from "../utils/useUID.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var DescriptionListItemRoot = /*#__PURE__*/styled('div', {
-  name: 'SD-DescriptionListItem',
-  slot: 'Root'
-})({
-  display: 'flex',
-  alignItems: 'center'
-});
-var DescriptionListItemIcon = /*#__PURE__*/styled('div')(_ref => {
-  var {
-    theme
-  } = _ref;
+
+function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   return {
+    '& > $list, & > $item': {
+      '&:not(:last-child)': {
+        paddingBottom: theme.spacing(mobileSpacing),
+        [theme.breakpoints.up('sm')]: {
+          paddingBottom: theme.spacing(desktopSpacing)
+        }
+      }
+    }
+  };
+}
+
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  list: sizeVariant(theme, 2, 1),
+  listSmall: sizeVariant(theme, 1, 0.5),
+  listLarge: sizeVariant(theme, 3, 2),
+  item: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
@@ -30,11 +43,33 @@ var DescriptionListItemIcon = /*#__PURE__*/styled('div')(_ref => {
         fontSize: theme.spacing(2)
       }
     }
-  };
+  }
+}), {
+  name: 'SD-DescriptionList'
+}); //
+// DescriptionList
+//
+
+export var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    size
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var styles = useStyles();
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    "data-size": size,
+    className: clsx(styles.list, {
+      'small': styles.listSmall,
+      'large': styles.listLarge
+    }[size])
+  }));
 }); //
 // DescriptionListItem
 //
 
+if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";
 export var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var _ref3, _contentTypographyPro, _contentTypographyPro2;
 
@@ -47,12 +82,15 @@ export var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     contentTypographyProps,
     fallback
   } = _ref2;
+  var styles = useStyles();
   var labelID = useUID(labelTypographyProps === null || labelTypographyProps === void 0 ? void 0 : labelTypographyProps.id);
   var shouldRenderFallback = isEmptyReactNode(content);
-  return /*#__PURE__*/_jsxs(DescriptionListItemRoot, {
+  return /*#__PURE__*/_jsxs("div", {
     ref: ref,
+    className: styles.item,
     "aria-labelledby": label != null ? labelID : undefined,
-    children: [!!icon && /*#__PURE__*/_jsx(DescriptionListItemIcon, {
+    children: [!!icon && /*#__PURE__*/_jsx("div", {
+      className: styles.icon,
       children: icon
     }), /*#__PURE__*/_jsxs(OverflowText, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
       component: "span",
@@ -69,46 +107,5 @@ export var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       })), label != null && ' ', !shouldRenderFallback ? content : fallback]
     }))]
   });
-}); //
-// DescriptionList
-//
-
-if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
-var DescriptionListRoot = /*#__PURE__*/styled('div', {
-  name: 'SD-DescriptionList',
-  slot: 'Root'
-})(_ref4 => {
-  var {
-    theme
-  } = _ref4;
-  return _objectSpread(_objectSpread({}, sizeVariant(theme, 2, 1)), {}, {
-    '&[data-size="small"]': sizeVariant(theme, 1, 0.5),
-    '&[data-size="large"]': sizeVariant(theme, 3, 2)
-  });
-});
-
-function sizeVariant(theme, mobileSpacing, desktopSpacing) {
-  return {
-    ["& > ".concat(DescriptionListRoot.toString(), ", & > ").concat(DescriptionListItemRoot.toString())]: {
-      '&:not(:last-child)': {
-        paddingBottom: theme.spacing(mobileSpacing),
-        [theme.breakpoints.up('sm')]: {
-          paddingBottom: theme.spacing(desktopSpacing)
-        }
-      }
-    }
-  };
-}
-
-export var DescriptionList = /*#__PURE__*/forwardRef((_ref5, ref) => {
-  var {
-    size
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded);
-
-  return /*#__PURE__*/_jsx(DescriptionListRoot, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    "data-size": size
-  }));
 });
-if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";
+if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";

package/dist-src/dialog/DialogOverrides.js

@@ -1,42 +1,36 @@
-import { dialogClasses } from '@mui/material';
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 export function overrideDialog(theme) {
-  theme.components.MuiDialog = {
-    styleOverrides: {
-      paper: {
-        margin: theme.spacing(3)
-      },
-      paperWidthXs: {
-        maxWidth: Math.max(theme.breakpoints.values.xs, 360),
-        ["&.".concat(dialogClasses.paperScrollBody)]: {
-          [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
-            maxWidth: 'calc(100% - 64px)'
-          }
+  theme.props.MuiDialogTitle = {
+    disableTypography: true
+  };
+  theme.overrides.MuiDialog = {
+    paper: {
+      margin: theme.spacing(3)
+    },
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+      '&$paperScrollBody': {
+        [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
         }
       }
     }
   };
-  theme.components.MuiDialogTitle = {
-    defaultProps: {
-      // @ts-expect-error DialogTitleProps has missing type def
-      variant: 'h3'
-    }
+  theme.overrides.MuiDialogTitle = {
+    root: _objectSpread({}, theme.typography.h3)
   };
-  theme.components.MuiDialogContent = {
-    styleOverrides: {
-      root: {
-        padding: theme.spacing(0, 3)
-      }
+  theme.overrides.MuiDialogContent = {
+    root: {
+      padding: theme.spacing(0, 3)
     }
   };
-  theme.components.MuiDialogActions = {
-    styleOverrides: {
-      root: {
-        padding: theme.spacing(3)
-      },
-      spacing: {
-        '& > :not(:first-child)': {
-          marginLeft: theme.spacing(2)
-        }
+  theme.overrides.MuiDialogActions = {
+    root: {
+      padding: theme.spacing(3)
+    },
+    spacing: {
+      '& > :not(:first-child)': {
+        marginLeft: theme.spacing(2)
       }
     }
   };

package/dist-src/drawer/DrawerActions.js

@@ -1,34 +1,31 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
-import { AppBar, styled, Toolbar } from '@mui/material';
+var _excluded = ["children", "className"];
+import { AppBar, Toolbar } 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 { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var StyledAppBar = /*#__PURE__*/styled(AppBar)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
-    bottom: 0,
-    top: 'auto',
-    borderLeft: 'none',
-    borderRight: 'none',
-    borderBottom: 'none',
-    transition: theme.transitions.create(['border-color']),
-    '&[data-sticky="false"]': {
-      borderTopColor: Color.Transparent
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      bottom: 0,
+      top: 'auto',
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderBottom: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderTopColor: Color.Transparent
+      }
     }
-  };
-});
-var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
+  },
+  appBarSticky: {},
+  toolbar: {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -37,26 +34,31 @@ var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
         paddingRight: theme.spacing(4)
       }
     }
-  };
+  }
+}), {
+  name: 'SD-DrawerActions'
 });
-export var DrawerActions = /*#__PURE__*/forwardRef((_ref3, appBarRef) => {
+export var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   var {
-    children
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded);
+    children,
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
+  var styles = useStyles();
   return /*#__PURE__*/_jsx(VisibilityObserver, {
-    render: _ref4 => {
+    render: _ref2 => {
       var {
         ref,
         visibility
-      } = _ref4;
+      } = _ref2;
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/_jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          "data-sticky": visibility === 'invisible',
-          children: /*#__PURE__*/_jsx(StyledToolbar, {
+          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
+          children: /*#__PURE__*/_jsx(Toolbar, {
+            className: styles.toolbar,
             children: children
           })
         })), /*#__PURE__*/_jsx("div", {

package/dist-src/drawer/DrawerContent.js

@@ -1,15 +1,31 @@
-import { styled } from '@mui/material';
-export var DrawerContent = /*#__PURE__*/styled('div', {
-  name: 'SD-DrawerContent'
-})(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"];
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useStyles = /*#__PURE__*/makeStyles(theme => ({
+  root: {
     maxWidth: '100%',
     padding: theme.spacing(2, 3),
     [theme.breakpoints.up('md')]: {
       padding: theme.spacing(2, 4)
     }
-  };
-});
+  }
+}), {
+  name: 'SD-DrawerContent'
+});
+export var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var styles = useStyles();
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: clsx(styles.root, className)
+  }));
+});
+if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";