@superdispatch/ui 0.21.5-alpha.4 → 0.21.6

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

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

package/dist-src/pagination/PaginationOverrides.js

@@ -1,35 +1,40 @@
-import { paginationItemClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overridePagination(theme) {
-  theme.components.MuiPaginationItem = {
-    styleOverrides: {
-      root: {
-        color: Color.Dark400
+  var props = {};
+  var overrides = {
+    root: {
+      color: Color.Dark400
+    },
+    page: {
+      '&:hover': {
+        backgroundColor: Color.Silver200
       },
-      page: {
-        '&:hover': {
-          backgroundColor: Color.Silver200
-        },
-        ["&.".concat(paginationItemClasses.focusVisible)]: {
-          borderRadius: 4,
-          backgroundColor: Color.White,
-          border: "1px solid ".concat(Color.Blue100)
-        },
-        ["&.".concat(paginationItemClasses.selected)]: {
-          backgroundColor: Color.Silver400,
-          ["&:hover, &.".concat(paginationItemClasses.focusVisible)]: {
-            backgroundColor: Color.Silver400
-          },
-          ["&.".concat(paginationItemClasses.disabled)]: {
-            color: Color.Dark100,
-            backgroundColor: Color.Silver400
-          }
+      '&$focusVisible': {
+        borderRadius: 4,
+        backgroundColor: Color.White,
+        border: "1px solid ".concat(Color.Blue100)
+      },
+      '&$selected': {
+        backgroundColor: Color.Silver400,
+        '&:hover, &$focusVisible': {
+          backgroundColor: Color.Silver400
         },
-        ["&.".concat(paginationItemClasses.disabled)]: {
-          opacity: 1,
-          color: Color.Dark100
+        '&$disabled': {
+          color: Color.Dark100,
+          backgroundColor: Color.Silver400
         }
+      },
+      '&$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,13 +1,11 @@
 import { Color } from "../theme/Color.js";
 export function overridePaper(theme) {
-  theme.components.MuiPaper = {
-    defaultProps: {
-      elevation: 0
-    },
-    styleOverrides: {
-      elevation0: {
-        border: "1px solid ".concat(Color.Silver400)
-      }
+  theme.props.MuiPaper = {
+    elevation: 0
+  };
+  theme.overrides.MuiPaper = {
+    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 '@mui/material';
+import { FormControl, FormControlLabel, FormHelperText, Radio } from '@material-ui/core';
 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 '@mui/material';
+import { FormControl, FormHelperText, FormLabel, RadioGroup } from '@material-ui/core';
 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,48 +1,46 @@
-import { radioClasses, 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 overrideRadio(theme) {
-  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
-        })]
+  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"
       })
+    }),
+    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)
     },
-    styleOverrides: {
-      root: {
-        color: Color.Dark100,
-        marginTop: theme.spacing(-0.625),
-        marginBottom: theme.spacing(-0.625)
+    colorPrimary: {
+      '&$checked$disabled': {
+        color: Color.Silver500
       },
-      colorPrimary: {
-        ["&.".concat(radioClasses.disabled, ".").concat(radioClasses.checked)]: {
-          color: Color.Silver500
-        },
-        ["&:hover:not(.".concat(radioClasses.checked, ")")]: {
-          color: Color.Dark100
-        }
+      '&:hover:not($checked)': {
+        color: Color.Dark100
       }
     }
   };

package/dist-src/responsive/ResponsiveContext.js

@@ -1,4 +1,4 @@
-import { useMediaQuery } from '@mui/material';
+import { useMediaQuery } from '@material-ui/core';
 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 '@mui/material';
+import { Portal, Slide, Snackbar as MaterialSnackbar } from '@material-ui/core';
 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 { CheckCircle, Close, Warning } from '@mui/icons-material';
-import { Grid, IconButton, SnackbarContent as MuiSnackbarContent } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+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 clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Color } from "../theme/Color.js";

package/dist-src/snackbar/SnackbarOverrides.js

@@ -1,35 +1,25 @@
 export function overrideSnackbar(theme) {
-  theme.components.MuiSnackbar = {
-    defaultProps: {
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      }
-    },
-    styleOverrides: {
-      anchorOriginBottomCenter: {
-        left: 0,
-        right: 0,
-        bottom: 0
-      }
+  theme.overrides.MuiSnackbar = {
+    anchorOriginBottomCenter: {
+      left: 0,
+      right: 0,
+      bottom: 0
     }
   };
-  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'
+  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)
       }
+    },
+    message: {
+      flex: 1,
+      display: 'flex'
     }
   };
 }

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

@@ -1,35 +1,25 @@
 import { Color } from "../theme/Color.js";
 export function overrideSvgIcon(theme) {
   var sm = theme.breakpoints.up('sm');
-  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
+  theme.overrides.MuiSvgIcon = {
+    root: {
+      display: 'inherit',
+      fontSize: 'var(--mui-svg-icon-size, 32px)',
+      [sm]: {
+        fontSize: 'var(--mui-svg-icon-size, 24px)'
       }
+    },
+    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,87 +1,86 @@
-import { switchClasses } from '@mui/material';
 import { Color } from "../theme/Color.js";
 export function overrideSwitch(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiSwitch = {
-    defaultProps: {
-      color: 'primary',
-      disableRipple: true,
-      disableFocusRipple: true
+  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)
+      }
     },
-    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)
-        }
+    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)
+      }
+    },
+    switchBase: {
+      left: theme.spacing(1),
+      padding: theme.spacing(1.25, 1),
+      [sm]: {
+        padding: theme.spacing(1)
       },
-      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),
+      '&$checked': {
+        transform: "translateX(".concat(theme.spacing(2.5), "px)"),
         [sm]: {
-          borderRadius: theme.spacing(1.625)
+          transform: "translateX(".concat(theme.spacing(2), "px)")
         }
       },
-      thumb: {
-        color: Color.White,
-        boxShadow: 'none',
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        [sm]: {
-          width: theme.spacing(2),
-          height: theme.spacing(2)
-        }
+      '&$checked + $track': {
+        opacity: undefined
       },
-      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), ")")
+      '&$disabled + $track': {
+        opacity: undefined
+      }
+    },
+    colorPrimary: {
+      '&$checked': {
+        color: undefined,
+        '&:hover': {
+          backgroundColor: undefined,
+          '& + $track': {
+            backgroundColor: Color.Blue400
           }
-        },
-        ["&.".concat(switchClasses.checked, " + .").concat(switchClasses.track)]: {
-          opacity: 1
-        },
-        ["&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
-          opacity: 1
         }
       },
-      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)
-        }
+      '& + $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)
       }
     }
   };