@superdispatch/ui 0.20.4 → 0.21.5-alpha.0

package/dist-src/checkbox/CheckboxOverrides.js

@@ -1,60 +1,70 @@
-import { SvgIcon } from '@material-ui/core';
+import { checkboxClasses, SvgIcon } from '@mui/material';
 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.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"
+  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"
+        })]
       })
-    }),
-    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)
     },
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: Color.Silver500
+    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
+        }
       },
-      '&:hover:not($checked)': {
-        color: Color.Dark100
+      colorPrimary: {
+        ["&.".concat(checkboxClasses.checked, ".").concat(checkboxClasses.disabled)]: {
+          color: Color.Silver500
+        },
+        ["&:hover:not(.".concat(checkboxClasses.checked, ")")]: {
+          color: Color.Dark100
+        }
       }
     }
   };

package/dist-src/chip/ChipOverrides.js

@@ -1,102 +1,105 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { SvgIcon } from '@material-ui/core';
+import { chipClasses, SvgIcon } from '@mui/material';
 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.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.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.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
-    },
-    labelSmall: {
-      paddingLeft: 6,
-      paddingRight: 6,
-      [sm]: {
-        paddingLeft: 4,
-        paddingRight: 4
-      }
     },
-    clickable: {
-      '&:hover, &:focus': {
-        backgroundColor: 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'
       },
-      '&:active': {
-        boxShadow: undefined
+      labelSmall: {
+        paddingLeft: 6,
+        paddingRight: 6,
+        [sm]: {
+          paddingLeft: 4,
+          paddingRight: 4
+        }
       },
-      '&:focus': {
-        boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+      clickable: {
+        '&:hover, &:focus': {
+          backgroundColor: Color.Silver200
+        },
+        '&:active': {
+          boxShadow: 'unset'
+        },
+        '&:focus': {
+          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+        },
+        '&:active, &:hover': {
+          backgroundColor: Color.Silver300
+        }
       },
-      '&: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': {
+      deletable: {
+        '&:focus': {
+          backgroundColor: Color.Silver200,
+          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
+          }
+        },
         '& > svg': {
-          backgroundColor: Color.Silver400
+          borderRadius: '50%',
+          color: Color.Dark200,
+          fontSize: '1em'
         }
       },
-      '& > 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
+      deleteIconSmall: {
+        width: 'unset',
+        height: 'unset',
+        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: 'unset'
+      },
+      iconSmall: {
+        width: 'unset',
+        height: 'unset',
+        marginLeft: 8,
+        marginRight: 'unset',
+        [sm]: {
+          marginLeft: 4
+        }
       }
     }
   };

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

@@ -1,9 +1,7 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["size"];
-import { SvgIcon, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { styled, SvgIcon, Typography } from '@mui/material';
 import { forwardRef } from 'react';
 import { OverflowText } from "../overflow-text/OverflowText.js";
 import { Color } from "../theme/Color.js";
@@ -11,29 +9,18 @@ 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";
-
-function sizeVariant(theme, mobileSpacing, desktopSpacing) {
+var DescriptionListItemRoot = /*#__PURE__*/styled('div', {
+  name: 'SD-DescriptionListItem',
+  slot: 'Root'
+})({
+  display: 'flex',
+  alignItems: 'center'
+});
+var DescriptionListItemIcon = /*#__PURE__*/styled('div')(_ref => {
+  var {
+    theme
+  } = _ref;
   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': {
@@ -43,33 +30,11 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
         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;
 
@@ -82,15 +47,12 @@ 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("div", {
+  return /*#__PURE__*/_jsxs(DescriptionListItemRoot, {
     ref: ref,
-    className: styles.item,
     "aria-labelledby": label != null ? labelID : undefined,
-    children: [!!icon && /*#__PURE__*/_jsx("div", {
-      className: styles.icon,
+    children: [!!icon && /*#__PURE__*/_jsx(DescriptionListItemIcon, {
       children: icon
     }), /*#__PURE__*/_jsxs(OverflowText, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
       component: "span",
@@ -107,5 +69,46 @@ 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") DescriptionListItem.displayName = "DescriptionListItem";
+if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";

package/dist-src/dialog/DialogOverrides.js

@@ -1,36 +1,42 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { dialogClasses } from '@mui/material';
 export function overrideDialog(theme) {
-  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.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.overrides.MuiDialogTitle = {
-    root: _objectSpread({}, theme.typography.h3)
+  theme.components.MuiDialogTitle = {
+    defaultProps: {
+      // @ts-expect-error DialogTitleProps has missing type def
+      variant: 'h3'
+    }
   };
-  theme.overrides.MuiDialogContent = {
-    root: {
-      padding: theme.spacing(0, 3)
+  theme.components.MuiDialogContent = {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(0, 3)
+      }
     }
   };
-  theme.overrides.MuiDialogActions = {
-    root: {
-      padding: theme.spacing(3)
-    },
-    spacing: {
-      '& > :not(:first-child)': {
-        marginLeft: theme.spacing(2)
+  theme.components.MuiDialogActions = {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(3)
+      },
+      spacing: {
+        '& > :not(:first-child)': {
+          marginLeft: theme.spacing(2)
+        }
       }
     }
   };

package/dist-src/drawer/DrawerActions.js

@@ -1,31 +1,34 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
-import { AppBar, Toolbar } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+var _excluded = ["children"];
+import { AppBar, styled, Toolbar } from '@mui/material';
 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 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 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
     }
-  },
-  appBarSticky: {},
-  toolbar: {
+  };
+});
+var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -34,31 +37,26 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
         paddingRight: theme.spacing(4)
       }
     }
-  }
-}), {
-  name: 'SD-DrawerActions'
+  };
 });
-export var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
+export var DrawerActions = /*#__PURE__*/forwardRef((_ref3, appBarRef) => {
   var {
-    children,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+    children
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
 
-  var styles = useStyles();
   return /*#__PURE__*/_jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref4 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref4;
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/_jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/_jsx(Toolbar, {
-            className: styles.toolbar,
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/_jsx(StyledToolbar, {
             children: children
           })
         })), /*#__PURE__*/_jsx("div", {

package/dist-src/drawer/DrawerContent.js

@@ -1,31 +1,15 @@
-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: {
+import { styled } from '@mui/material';
+export var DrawerContent = /*#__PURE__*/styled('div', {
+  name: 'SD-DrawerContent'
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
     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";
+  };
+});