@superdispatch/ui 0.20.4 → 0.21.5-alpha.0

package/dist-src/overflow-text/OverflowText.js

@@ -1,56 +1,58 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["title", "enterDelay"],
-    _excluded2 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
-import { Tooltip, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+    _excluded2 = ["onClick", "children", "disableUnderline", "TooltipProps"];
+import { styled, Tooltip, Typography } from '@mui/material';
 import { forwardRef, useState } 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";
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  root: {
+var Root = /*#__PURE__*/styled(Typography, {
+  name: 'SD-OverflowText',
+  shouldForwardProp: prop => prop !== 'truncated'
+})(_ref => {
+  var {
+    truncated,
+    theme
+  } = _ref;
+  return _objectSpread({
     marginBottom: -1,
     borderBottom: '1px dashed transparent',
-    transition: theme.transitions.create('border'),
-    '&$truncated': {
-      cursor: 'pointer',
-      borderBottomColor: Color.Silver500
-    }
-  },
-  truncated: {},
-  sentinel: {
-    width: 1,
-    height: '100%',
-    display: 'inline-block'
-  }
-}), {
-  name: 'SD-OverflowText'
+    transition: theme.transitions.create('border')
+  }, truncated && {
+    cursor: 'pointer',
+    borderBottomColor: Color.Silver500
+  });
+});
+var Sential = /*#__PURE__*/styled('span', {
+  name: 'SD-OverflowText',
+  slot: 'Sential'
+})({
+  width: 1,
+  height: '100%',
+  display: 'inline-block'
 });
-export var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
+export var OverflowText = /*#__PURE__*/forwardRef((_ref2, rootRef) => {
   var {
     onClick: _onClick,
     children,
-    className,
     disableUnderline,
     TooltipProps: {
       title = children,
       enterDelay = 1000
     } = {}
-  } = _ref,
-      tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded),
-      props = _objectWithoutProperties(_ref, _excluded2);
+  } = _ref2,
+      tooltipProps = _objectWithoutProperties(_ref2.TooltipProps, _excluded),
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
   var [isOpen, setIsOpen] = useState(false);
-  var styles = useStyles();
   return /*#__PURE__*/_jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref3 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref3;
       var isTooltipEnabled = !!children && visibility === 'invisible';
       return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
         enterDelay: 1000,
@@ -63,17 +65,16 @@ export var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
         onClose: () => {
           setIsOpen(false);
         },
-        children: /*#__PURE__*/_jsxs(Typography, _objectSpread(_objectSpread({}, props), {}, {
+        children: /*#__PURE__*/_jsxs(Root, _objectSpread(_objectSpread({}, props), {}, {
           ref: rootRef,
           noWrap: true,
+          truncated: !disableUnderline && visibility === 'invisible',
           onClick: event => {
             setIsOpen(true);
             _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
           },
-          className: clsx(styles.root, className, !disableUnderline && visibility === 'invisible' && styles.truncated),
-          children: [children, !!children && /*#__PURE__*/_jsx("span", {
-            ref: ref,
-            className: styles.sentinel
+          children: [children, !!children && /*#__PURE__*/_jsx(Sential, {
+            ref: ref
           })]
         }))
       }));

package/dist-src/pagination/PaginationOverrides.js

@@ -1,40 +1,35 @@
+import { paginationItemClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overridePagination(theme) {
-  var props = {};
-  var overrides = {
-    root: {
-      color: Color.Dark400
-    },
-    page: {
-      '&:hover': {
-        backgroundColor: Color.Silver200
+  theme.components.MuiPaginationItem = {
+    styleOverrides: {
+      root: {
+        color: Color.Dark400
       },
-      '&$focusVisible': {
-        borderRadius: 4,
-        backgroundColor: Color.White,
-        border: "1px solid ".concat(Color.Blue100)
-      },
-      '&$selected': {
-        backgroundColor: Color.Silver400,
-        '&:hover, &$focusVisible': {
-          backgroundColor: Color.Silver400
+      page: {
+        '&:hover': {
+          backgroundColor: Color.Silver200
+        },
+        ["&.".concat(paginationItemClasses.focusVisible)]: {
+          borderRadius: 4,
+          backgroundColor: Color.White,
+          border: "1px solid ".concat(Color.Blue100)
         },
-        '&$disabled': {
-          color: Color.Dark100,
-          backgroundColor: Color.Silver400
+        ["&.".concat(paginationItemClasses.selected)]: {
+          backgroundColor: Color.Silver400,
+          ["&:hover, &.".concat(paginationItemClasses.focusVisible)]: {
+            backgroundColor: Color.Silver400
+          },
+          ["&.".concat(paginationItemClasses.disabled)]: {
+            color: Color.Dark100,
+            backgroundColor: Color.Silver400
+          }
+        },
+        ["&.".concat(paginationItemClasses.disabled)]: {
+          opacity: 1,
+          color: Color.Dark100
         }
-      },
-      '&$disabled': {
-        opacity: undefined,
-        color: Color.Dark100
       }
     }
-  }; // Remove `Object.assign` after official release of `PaginationItem`.
-
-  Object.assign(theme.props, {
-    MuiPaginationItem: props
-  });
-  Object.assign(theme.overrides, {
-    MuiPaginationItem: overrides
-  });
+  };
 }

package/dist-src/paper/PaperOverrides.js

@@ -1,11 +1,13 @@
 import { Color } from "../theme/Color.js";
 export function overridePaper(theme) {
-  theme.props.MuiPaper = {
-    elevation: 0
-  };
-  theme.overrides.MuiPaper = {
-    elevation0: {
-      border: "1px solid ".concat(Color.Silver400)
+  theme.components.MuiPaper = {
+    defaultProps: {
+      elevation: 0
+    },
+    styleOverrides: {
+      elevation0: {
+        border: "1px solid ".concat(Color.Silver400)
+      }
     }
   };
 }

package/dist-src/radio/RadioField.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
-import { FormControl, FormControlLabel, FormHelperText, Radio } from '@material-ui/core';
+import { FormControl, FormControlLabel, FormHelperText, Radio } from '@mui/material';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist-src/radio/RadioGroupField.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
-import { FormControl, FormHelperText, FormLabel, RadioGroup } from '@material-ui/core';
+import { FormControl, FormHelperText, FormLabel, RadioGroup } from '@mui/material';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist-src/radio/RadioOverrides.js

@@ -1,46 +1,48 @@
-import { SvgIcon } from '@material-ui/core';
+import { radioClasses, 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 overrideRadio(theme) {
-  theme.props.MuiRadio = {
-    color: 'primary',
-    icon: /*#__PURE__*/_jsx(SvgIcon, {
-      children: /*#__PURE__*/_jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "8.5",
-        fill: Color.White,
-        stroke: "currentColor"
+  theme.components.MuiRadio = {
+    defaultProps: {
+      color: 'primary',
+      icon: /*#__PURE__*/_jsx(SvgIcon, {
+        children: /*#__PURE__*/_jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "8.5",
+          fill: Color.White,
+          stroke: "currentColor"
+        })
+      }),
+      checkedIcon: /*#__PURE__*/_jsxs(SvgIcon, {
+        children: [/*#__PURE__*/_jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "8.5",
+          fill: "currentColor",
+          stroke: "currentColor"
+        }), /*#__PURE__*/_jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "4",
+          fill: Color.White
+        })]
       })
-    }),
-    checkedIcon: /*#__PURE__*/_jsxs(SvgIcon, {
-      children: [/*#__PURE__*/_jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "8.5",
-        fill: "currentColor",
-        stroke: "currentColor"
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "4",
-        fill: Color.White
-      })]
-    })
-  };
-  theme.overrides.MuiRadio = {
-    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)
       },
-      '&:hover:not($checked)': {
-        color: Color.Dark100
+      colorPrimary: {
+        ["&.".concat(radioClasses.disabled, ".").concat(radioClasses.checked)]: {
+          color: Color.Silver500
+        },
+        ["&:hover:not(.".concat(radioClasses.checked, ")")]: {
+          color: Color.Dark100
+        }
       }
     }
   };

package/dist-src/responsive/ResponsiveContext.js

@@ -1,4 +1,4 @@
-import { useMediaQuery } from '@material-ui/core';
+import { useMediaQuery } from '@mui/material';
 import { createContext, useContext, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var Context = /*#__PURE__*/createContext({});

package/dist-src/snackbar/Snackbar.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
-import { Portal, Slide, Snackbar as MaterialSnackbar } from '@material-ui/core';
+import { Portal, Slide, Snackbar as MaterialSnackbar } from '@mui/material';
 import { forwardRef } from 'react';
 import { SnackbarContent } from "./SnackbarContent.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist-src/snackbar/SnackbarContent.js

@@ -2,9 +2,9 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["action", "children", "onClose", "className", "classes", "variant"],
     _excluded2 = ["icon", "closeButton", "variantError", "variantSuccess"];
-import { Grid, IconButton, SnackbarContent as MuiSnackbarContent } from '@material-ui/core';
-import { CheckCircle, Close, Warning } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/styles';
+import { CheckCircle, Close, Warning } from '@mui/icons-material';
+import { Grid, IconButton, SnackbarContent as MuiSnackbarContent } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";

package/dist-src/snackbar/SnackbarOverrides.js

@@ -1,25 +1,35 @@
 export function overrideSnackbar(theme) {
-  theme.overrides.MuiSnackbar = {
-    anchorOriginBottomCenter: {
-      left: 0,
-      right: 0,
-      bottom: 0
+  theme.components.MuiSnackbar = {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      }
+    },
+    styleOverrides: {
+      anchorOriginBottomCenter: {
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
     }
   };
-  theme.overrides.MuiSnackbarContent = {
-    root: {
-      width: '100%',
-      borderRadius: 0,
-      minHeight: theme.spacing(7.5),
-      [theme.breakpoints.up('sm')]: {
-        width: theme.spacing(54),
-        maxWidth: theme.spacing(54),
-        borderRadius: theme.spacing(0.5)
+  theme.components.MuiSnackbarContent = {
+    styleOverrides: {
+      root: {
+        width: '100%',
+        borderRadius: 0,
+        minHeight: theme.spacing(7.5),
+        [theme.breakpoints.up('sm')]: {
+          width: theme.spacing(54),
+          maxWidth: theme.spacing(54),
+          borderRadius: theme.spacing(0.5)
+        }
+      },
+      message: {
+        flex: 1,
+        display: 'flex'
       }
-    },
-    message: {
-      flex: 1,
-      display: 'flex'
     }
   };
 }

package/dist-src/svg-icon/SvgIconOverrides.js

@@ -1,25 +1,35 @@
 import { Color } from "../theme/Color.js";
 export function overrideSvgIcon(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.overrides.MuiSvgIcon = {
-    root: {
-      display: 'inherit',
-      fontSize: 'var(--mui-svg-icon-size, 32px)',
-      [sm]: {
-        fontSize: 'var(--mui-svg-icon-size, 24px)'
+  theme.components.MuiSvgIcon = {
+    styleOverrides: {
+      root: {
+        display: 'inherit',
+        fontSize: 'var(--mui-svg-icon-size, 32px)',
+        [sm]: {
+          fontSize: 'var(--mui-svg-icon-size, 24px)'
+        }
+      },
+      fontSizeInherit: {
+        fontSize: 'inherit',
+        [sm]: {
+          fontSize: 'inherit'
+        }
+      },
+      fontSizeSmall: {
+        fontSize: 'var(--mui-svg-icon-size, 24px)',
+        [sm]: {
+          fontSize: 'var(--mui-svg-icon-size, 16px)'
+        }
+      },
+      fontSizeLarge: {
+        '&': {
+          fontSize: 'var(--mui-svg-icon-size, 32px)'
+        }
+      },
+      colorAction: {
+        color: Color.Dark100
       }
-    },
-    fontSizeSmall: {
-      fontSize: 'var(--mui-svg-icon-size, 24px)',
-      [sm]: {
-        fontSize: 'var(--mui-svg-icon-size, 16px)'
-      }
-    },
-    fontSizeLarge: {
-      fontSize: 'var(--mui-svg-icon-size, 32px)'
-    },
-    colorAction: {
-      color: Color.Dark100
     }
   };
 }

package/dist-src/switch/SwitchOverrides.js

@@ -1,86 +1,87 @@
+import { switchClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overrideSwitch(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.props.MuiSwitch = {
-    color: 'primary',
-    disableRipple: true,
-    disableFocusRipple: true
-  };
-  theme.overrides.MuiSwitch = {
-    root: {
-      width: theme.spacing(9.5),
-      height: theme.spacing(5.5),
-      padding: theme.spacing(0.75, 1.5),
-      [sm]: {
-        width: theme.spacing(8),
-        height: theme.spacing(4),
-        padding: theme.spacing(0.5, 1.5)
-      }
-    },
-    track: {
-      opacity: undefined,
-      boxShadow: "0 0 0 0 ".concat(Color.Transparent),
-      transition: theme.transitions.create(['box-shadow', 'background-color'], {
-        duration: theme.transitions.duration.shortest
-      }),
-      borderRadius: theme.spacing(2),
-      [sm]: {
-        borderRadius: theme.spacing(1.625)
-      }
-    },
-    thumb: {
-      color: Color.White,
-      boxShadow: undefined,
-      width: theme.spacing(3),
-      height: theme.spacing(3),
-      [sm]: {
-        width: theme.spacing(2),
-        height: theme.spacing(2)
-      }
+  theme.components.MuiSwitch = {
+    defaultProps: {
+      color: 'primary',
+      disableRipple: true,
+      disableFocusRipple: true
     },
-    switchBase: {
-      left: theme.spacing(1),
-      padding: theme.spacing(1.25, 1),
-      [sm]: {
-        padding: theme.spacing(1)
+    styleOverrides: {
+      root: {
+        width: theme.spacing(9.5),
+        height: theme.spacing(5.5),
+        padding: theme.spacing(0.75, 1.5),
+        [sm]: {
+          width: theme.spacing(8),
+          height: theme.spacing(4),
+          padding: theme.spacing(0.5, 1.5)
+        }
       },
-      '&$checked': {
-        transform: "translateX(".concat(theme.spacing(2.5), "px)"),
+      track: {
+        opacity: 1,
+        boxShadow: "0 0 0 0 ".concat(Color.Transparent),
+        transition: theme.transitions.create(['box-shadow', 'background-color'], {
+          duration: theme.transitions.duration.shortest
+        }),
+        borderRadius: theme.spacing(2),
         [sm]: {
-          transform: "translateX(".concat(theme.spacing(2), "px)")
+          borderRadius: theme.spacing(1.625)
         }
       },
-      '&$checked + $track': {
-        opacity: undefined
+      thumb: {
+        color: Color.White,
+        boxShadow: 'none',
+        width: theme.spacing(3),
+        height: theme.spacing(3),
+        [sm]: {
+          width: theme.spacing(2),
+          height: theme.spacing(2)
+        }
       },
-      '&$disabled + $track': {
-        opacity: undefined
-      }
-    },
-    colorPrimary: {
-      '&$checked': {
-        color: undefined,
-        '&:hover': {
-          backgroundColor: undefined,
-          '& + $track': {
-            backgroundColor: Color.Blue400
+      switchBase: {
+        left: theme.spacing(1),
+        padding: theme.spacing(1.25, 1),
+        [sm]: {
+          padding: theme.spacing(1)
+        },
+        ["&.".concat(switchClasses.checked)]: {
+          transform: "translateX(".concat(theme.spacing(2.5), ")"),
+          [sm]: {
+            transform: "translateX(".concat(theme.spacing(2), ")")
           }
+        },
+        ["&.".concat(switchClasses.checked, " + .").concat(switchClasses.track)]: {
+          opacity: 1
+        },
+        ["&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
+          opacity: 1
         }
       },
-      '& + $track': {
-        backgroundColor: Color.Silver500
-      },
-      '&$disabled + $track': {
-        backgroundColor: Color.Silver300
-      },
-      '&$checked$disabled + $track': {
-        backgroundColor: Color.Blue100
-      },
-      '&:hover + $track': {
-        backgroundColor: Color.Dark100
-      },
-      '&.Mui-focusVisible + $track': {
-        boxShadow: "0 0 0 3px ".concat(Color.Blue100)
+      colorPrimary: {
+        ["&.".concat(switchClasses.checked)]: {
+          '&:hover': {
+            ["& + .".concat(switchClasses.track)]: {
+              backgroundColor: Color.Blue400
+            }
+          }
+        },
+        ["& + .".concat(switchClasses.track)]: {
+          backgroundColor: Color.Silver500
+        },
+        ["&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
+          backgroundColor: Color.Silver300
+        },
+        ["&.".concat(switchClasses.checked, ".").concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
+          backgroundColor: Color.Blue100
+        },
+        ["&:hover + .".concat(switchClasses.track)]: {
+          backgroundColor: Color.Dark100
+        },
+        ["&.Mui-focusVisible + .".concat(switchClasses.track)]: {
+          boxShadow: "0 0 0 3px ".concat(Color.Blue100)
+        }
       }
     }
   };