@superdispatch/ui 0.40.2 → 0.42.0

package/dist-web/index.js

@@ -1,18 +1,20 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormHelperText as FormHelperText$4, FormControlLabel as FormControlLabel$1, Checkbox, FormControl as FormControl$2, FormLabel as FormLabel$2, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, useTheme, Card as Card$1, CardContent, IconButton, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, alpha, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
-import { MoreHoriz, Info, Close, Error, CheckCircle } from '@material-ui/icons';
+import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, AppBar, Drawer, IconButton, ButtonBase, Avatar, FormHelperText as FormHelperText$4, FormControlLabel as FormControlLabel$1, Checkbox, FormControl as FormControl$2, FormLabel as FormLabel$2, FormGroup, useMediaQuery, Tooltip, SvgIcon, List, useTheme, Card as Card$1, CardContent, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, alpha, CssBaseline, createTheme as createTheme$1, createGenerateClassName } from '@material-ui/core';
+import { MoreHoriz, ArrowBack, Close, Info, Error, CheckCircle } from '@material-ui/icons';
 import { makeStyles, StylesProvider, ThemeProvider as ThemeProvider$1 } from '@material-ui/styles';
 import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$2 } from 'styled-components';
+import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$3 } from 'styled-components';
 import { ResizeObserver } from '@juggle/resize-observer';
-import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo } from '@superdispatch/hooks';
-import clsx from 'clsx';
+import { useEventHandler, useValueObserver, useDeepEqualValue, useDeepEqualMemo } from '@superdispatch/hooks';
+import { clsx } from 'clsx';
 import flattenChildren from 'react-keyed-flatten-children';
 import { renderChildren as renderChildren$1 } from '@superdispatch/ui';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
+import { createTheme, ThemeProvider as ThemeProvider$2 } from '@mui/material/styles';
+import { StylesProvider as StylesProvider$1 } from '@mui/styles';
 
 var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
 var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -675,9 +677,340 @@ function isColorPropDark(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(ColorDark, name);
 }
 
-var _excluded$3 = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
+function renderChildren(node) {
+  if (node == null || typeof node == 'boolean') {
+    return null;
+  }
+
+  // Workaround for https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+  return node;
+}
+
+var _excluded$3 = ["render", "onChange"];
+function useVisibilityObserver(node) {
+  var {
+    threshold = 0,
+    marginTop = '0px',
+    marginLeft = '0px',
+    marginRight = '0px',
+    marginBottom = '0px'
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var [state, setState] = useState('undetermined');
+  var rootMargin = "".concat(marginTop, " ").concat(marginRight, " ").concat(marginBottom, " ").concat(marginLeft);
+  useLayoutEffect(() => {
+    if (!node || !('IntersectionObserver' in window)) {
+      setState('undetermined');
+      return;
+    }
+    var observer = new IntersectionObserver(_ref => {
+      var [entry] = _ref;
+      setState(entry !== null && entry !== void 0 && entry.isIntersecting && document.visibilityState === 'visible' ? 'visible' : 'invisible');
+    }, {
+      rootMargin,
+      threshold
+    });
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [node, threshold, rootMargin]);
+  return state;
+}
+function VisibilityObserver(_ref2) {
+  var {
+      render,
+      onChange
+    } = _ref2,
+    options = _objectWithoutProperties(_ref2, _excluded$3);
+  var [node, setNode] = useState(null);
+  var visibility = useVisibilityObserver(node, options);
+  var children = render({
+    ref: setNode,
+    visibility
+  });
+  useValueObserver(visibility, () => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(visibility);
+  });
+  return renderChildren(children);
+}
+
+var _excluded$4 = ["children", "className"];
+var useStyles$2 = /*#__PURE__*/makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      bottom: 0,
+      top: 'auto',
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderBottom: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderTopColor: ColorDynamic.Transparent
+      }
+    }
+  },
+  appBarSticky: {},
+  toolbar: {
+    '&.MuiToolbar-gutters': {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+      [theme.breakpoints.up('md')]: {
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4)
+      }
+    }
+  }
+}), {
+  name: 'SD-DrawerActions'
+});
+/** @deprecated Use `<AppDrawer>` instead. */
+var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  var styles = useStyles$2();
+  return /*#__PURE__*/jsx(VisibilityObserver, {
+    render: _ref2 => {
+      var {
+        ref,
+        visibility
+      } = _ref2;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
+          ref: appBarRef,
+          position: "sticky",
+          className: clsx(className, styles.appBar, {
+            [styles.appBarSticky]: visibility === 'invisible'
+          }),
+          children: /*#__PURE__*/jsx(Toolbar, {
+            className: styles.toolbar,
+            children: children
+          })
+        })), /*#__PURE__*/jsx("div", {
+          ref: ref
+        })]
+      });
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
+
+var _excluded$5 = ["className"];
+var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
+  root: {
+    maxWidth: '100%',
+    padding: theme.spacing(2, 3),
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2, 4)
+    }
+  }
+}), {
+  name: 'SD-DrawerContent'
+});
+/** @deprecated Use `<AppDrawer>` instead. */
+var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  var styles = useStyles$3();
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: clsx(styles.root, className)
+  }));
+});
+if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";
+
+var _excluded$6 = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
+var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      borderTop: 'none',
+      borderLeft: 'none',
+      borderRight: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderBottomColor: ColorDynamic.Transparent
+      }
+    }
+  },
+  appBarSticky: {},
+  toolbar: {
+    '&.MuiToolbar-gutters': {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+      [theme.breakpoints.up('md')]: {
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4)
+      }
+    }
+  },
+  startAction: {
+    marginRight: theme.spacing(0.5),
+    '& .MuiIconButton-edgeStart': {
+      marginLeft: theme.spacing(-2)
+    }
+  },
+  endAction: {
+    marginLeft: theme.spacing(0.5),
+    '& .MuiIconButton-edgeEnd': {
+      marginRight: theme.spacing(-2)
+    }
+  }
+}), {
+  name: 'SD-DrawerTitle'
+});
+/** @deprecated Use `<AppDrawer>` instead. */
+var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
+  var {
+      title,
+      titleTypographyProps,
+      subtitle,
+      subtitleTypographyProps,
+      startAction,
+      endAction,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  var styles = useStyles$4();
+  return /*#__PURE__*/jsx(VisibilityObserver, {
+    render: _ref2 => {
+      var {
+        ref,
+        visibility
+      } = _ref2;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          ref: ref
+        }), /*#__PURE__*/jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
+          ref: appBarRef,
+          position: "sticky",
+          className: clsx(styles.appBar, className, {
+            [styles.appBarSticky]: visibility === 'invisible'
+          }),
+          children: /*#__PURE__*/jsx(Toolbar, {
+            className: styles.toolbar,
+            children: /*#__PURE__*/jsxs(Grid, {
+              container: true,
+              direction: "column",
+              children: [/*#__PURE__*/jsx(Grid, {
+                item: true,
+                children: /*#__PURE__*/jsxs(Grid, {
+                  container: true,
+                  alignItems: "center",
+                  children: [!!startAction && /*#__PURE__*/jsx(Grid, {
+                    item: true,
+                    className: styles.startAction,
+                    children: startAction
+                  }), /*#__PURE__*/jsx(Grid, {
+                    item: true,
+                    xs: true,
+                    zeroMinWidth: true,
+                    children: /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
+                      variant: "h3",
+                      noWrap: true
+                    }, titleTypographyProps), {}, {
+                      children: title
+                    }))
+                  }), !!endAction && /*#__PURE__*/jsx(Grid, {
+                    item: true,
+                    className: styles.endAction,
+                    children: endAction
+                  })]
+                })
+              }), /*#__PURE__*/jsx(Grid, {
+                item: true,
+                children: !!subtitle && /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
+                  variant: "body2",
+                  noWrap: true
+                }, subtitleTypographyProps), {}, {
+                  children: subtitle
+                }))
+              })]
+            })
+          })
+        }))]
+      });
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";
+
+var StyledActionsLayout = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AppDrawer__StyledActionsLayout",
+  componentId: "SD__sc-1ivw8lf-0"
+})(["display:flex;gap:16px;"]);
+var sizeToMaxWidthMap = {
+  md: '432px',
+  lg: '600px',
+  xl: '746px',
+  xxl: '900px'
+};
+function AppDrawer(_ref) {
+  var {
+    title,
+    subtitle,
+    children,
+    open,
+    onClose,
+    onBack,
+    primaryAction,
+    secondaryAction,
+    disableContentPadding = false,
+    disableCloseButton = false,
+    size = 'md'
+  } = _ref;
+  return /*#__PURE__*/jsxs(Drawer, {
+    open: open,
+    onClose: onClose,
+    anchor: "right",
+    PaperProps: {
+      style: {
+        width: '100%',
+        maxWidth: sizeToMaxWidthMap[size]
+      }
+    },
+    children: [/*#__PURE__*/jsx(DrawerTitle, {
+      title: title,
+      subtitle: subtitle,
+      startAction: onBack && /*#__PURE__*/jsx(IconButton, {
+        onClick: onBack,
+        edge: "start",
+        children: /*#__PURE__*/jsx(ArrowBack, {
+          color: "action"
+        })
+      }),
+      endAction: !disableCloseButton && /*#__PURE__*/jsx(IconButton, {
+        onClick: onClose,
+        children: /*#__PURE__*/jsx(Close, {
+          color: "action"
+        })
+      })
+    }), disableContentPadding ? children : /*#__PURE__*/jsx(DrawerContent, {
+      children: children
+    }), (primaryAction || secondaryAction) && /*#__PURE__*/jsx(DrawerActions, {
+      children: /*#__PURE__*/jsxs(StyledActionsLayout, {
+        children: [primaryAction && /*#__PURE__*/jsx(Button, {
+          type: "button",
+          onClick: primaryAction.onClick,
+          variant: "contained",
+          children: primaryAction.label
+        }), secondaryAction && /*#__PURE__*/jsx(Button, {
+          type: "button",
+          onClick: secondaryAction.onClick,
+          variant: "outlined",
+          children: secondaryAction.label
+        })]
+      })
+    })]
+  });
+}
+
+var _excluded$7 = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
   _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
-var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
+var useStyles$5 = /*#__PURE__*/makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
   return {
     button: {
@@ -786,8 +1119,8 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       variant,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  var _useStyles = useStyles$2({
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  var _useStyles = useStyles$5({
       classes
     }),
     {
@@ -803,7 +1136,10 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     "aria-busy": isLoading,
     "aria-disabled": disabled,
     disabled: disabled || isLoading,
-    className: clsx(className, buttonClassName, !!icon && withIconClassName, size === 'large' && sizeLargeClassName),
+    className: clsx(className, buttonClassName, {
+      [withIconClassName]: !!icon,
+      [sizeLargeClassName]: size === 'large'
+    }),
     children: [/*#__PURE__*/jsx(Avatar, {
       ref: avatarRef,
       classes: avatarClasses,
@@ -826,8 +1162,8 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") AvatarButton.displayName = "AvatarButton";
 
-var _excluded$4 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
-var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
+var _excluded$8 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
+var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     width: '100%',
     display: 'flex',
@@ -913,17 +1249,20 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       startIcon,
       disabled
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  var styles = useStyles$3({
+    props = _objectWithoutProperties(_ref, _excluded$8);
+  var styles = useStyles$6({
     classes
   });
   return /*#__PURE__*/jsx(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     disabled: disabled,
-    className: clsx(styles.root, className, disabled ? styles.disabled : error ? styles.error : styles.primary, {
-      'small': styles.sizeSmall,
-      'large': styles.sizeLarge
-    }[size]),
+    className: clsx(styles.root, {
+      [styles.disabled]: disabled,
+      [styles.error]: !disabled && error,
+      [styles.primary]: !disabled && !error,
+      [styles.sizeSmall]: size === 'small',
+      [styles.sizeLarge]: size === 'large'
+    }, className),
     children: error ? /*#__PURE__*/jsxs(Typography, {
       variant: "h4",
       color: "inherit",
@@ -955,7 +1294,7 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") CardButton.displayName = "CardButton";
 
-var _excluded$5 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlProps", "FormControlLabelProps"];
+var _excluded$9 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlProps", "FormControlLabelProps"];
 var FormControl = /*#__PURE__*/styled(FormControl$2).withConfig({
   displayName: "CheckboxField__FormControl",
   componentId: "SD__sc-1wxu0g6-0"
@@ -975,7 +1314,7 @@ var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
       FormControlProps: formControlProps,
       FormControlLabelProps: formControlLabelProps
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({
     error: error
   }, formControlProps), {}, {
@@ -995,7 +1334,7 @@ var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") CheckboxField.displayName = "CheckboxField";
 
-var _excluded$6 = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var _excluded$a = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
 var FormLabel = /*#__PURE__*/styled(FormLabel$2).withConfig({
   displayName: "CheckboxGroudField__FormLabel",
   componentId: "SD__sc-1lihyfy-0"
@@ -1013,7 +1352,7 @@ var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
       FormHelperTextProps: formHelperTextProps,
       children
     } = _ref,
-    formControlProps = _objectWithoutProperties(_ref, _excluded$6);
+    formControlProps = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/jsxs(FormControl$2, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
     children: [!!label && /*#__PURE__*/jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
@@ -1211,74 +1550,17 @@ var Columns = /*#__PURE__*/styled.div.withConfig({
     space: spaceProp = 'none',
     reverse: reverseProp = false
   } = _ref;
-  var align = parseResponsiveProp(alignProp);
-  var horizontalAlign = parseResponsiveProp(horizontalAlignProp);
-  var space = parseResponsiveProp(spaceProp);
-  var reverse = parseResponsiveProp(reverseProp);
-  var collapsed = parseCollapsedBelow(collapseBelow);
-  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin(align[0], horizontalAlign[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin(align[1], horizontalAlign[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin(align[2], horizontalAlign[2], space[2], reverse[2], collapsed[2]));
-});
-
-function renderChildren(node) {
-  if (node == null || typeof node == 'boolean') {
-    return null;
-  }
-
-  // Workaround for https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
-  return node;
-}
-
-var _excluded$7 = ["render", "onChange"];
-function useVisibilityObserver(node) {
-  var {
-    threshold = 0,
-    marginTop = '0px',
-    marginLeft = '0px',
-    marginRight = '0px',
-    marginBottom = '0px'
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var [state, setState] = useState('undetermined');
-  var rootMargin = "".concat(marginTop, " ").concat(marginRight, " ").concat(marginBottom, " ").concat(marginLeft);
-  useLayoutEffect(() => {
-    if (!node || !('IntersectionObserver' in window)) {
-      setState('undetermined');
-      return;
-    }
-    var observer = new IntersectionObserver(_ref => {
-      var [entry] = _ref;
-      setState(entry !== null && entry !== void 0 && entry.isIntersecting && document.visibilityState === 'visible' ? 'visible' : 'invisible');
-    }, {
-      rootMargin,
-      threshold
-    });
-    observer.observe(node);
-    return () => {
-      observer.disconnect();
-    };
-  }, [node, threshold, rootMargin]);
-  return state;
-}
-function VisibilityObserver(_ref2) {
-  var {
-      render,
-      onChange
-    } = _ref2,
-    options = _objectWithoutProperties(_ref2, _excluded$7);
-  var [node, setNode] = useState(null);
-  var visibility = useVisibilityObserver(node, options);
-  var children = render({
-    ref: setNode,
-    visibility
-  });
-  useValueObserver(visibility, () => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(visibility);
-  });
-  return renderChildren(children);
-}
+  var align = parseResponsiveProp(alignProp);
+  var horizontalAlign = parseResponsiveProp(horizontalAlignProp);
+  var space = parseResponsiveProp(spaceProp);
+  var reverse = parseResponsiveProp(reverseProp);
+  var collapsed = parseCollapsedBelow(collapseBelow);
+  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin(align[0], horizontalAlign[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin(align[1], horizontalAlign[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin(align[2], horizontalAlign[2], space[2], reverse[2], collapsed[2]));
+});
 
-var _excluded$8 = ["title", "enterDelay"],
+var _excluded$b = ["title", "enterDelay"],
   _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
-var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$7 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     marginBottom: -1,
     borderBottom: '1px dashed transparent',
@@ -1308,10 +1590,10 @@ var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
         enterDelay = 1000
       } = {}
     } = _ref,
-    tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$8),
+    tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$b),
     props = _objectWithoutProperties(_ref, _excluded2$1);
   var [isOpen, setIsOpen] = useState(false);
-  var styles = useStyles$4();
+  var styles = useStyles$7();
   return /*#__PURE__*/jsx(VisibilityObserver, {
     render: _ref2 => {
       var {
@@ -1337,7 +1619,9 @@ var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
             setIsOpen(true);
             _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
           },
-          className: clsx(styles.root, className, !disableUnderline && visibility === 'invisible' && styles.truncated),
+          className: clsx(styles.root, {
+            [styles.truncated]: !disableUnderline && visibility === 'invisible'
+          }, className),
           children: [children, !!children && /*#__PURE__*/jsx("span", {
             ref: ref,
             className: styles.sentinel
@@ -1359,7 +1643,7 @@ function useUID(defaultID) {
   return defaultID || uid;
 }
 
-var _excluded$9 = ["size"];
+var _excluded$c = ["size"];
 function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   return {
     '& > $list, & > $item': {
@@ -1372,7 +1656,7 @@ function sizeVariant(theme, mobileSpacing, desktopSpacing) {
     }
   };
 }
-var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
   list: sizeVariant(theme, 2, 1),
   listSmall: sizeVariant(theme, 1, 0.5),
   listLarge: sizeVariant(theme, 3, 2),
@@ -1403,15 +1687,15 @@ var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
-  var styles = useStyles$5();
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  var styles = useStyles$8();
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "data-size": size,
     className: clsx(styles.list, {
-      'small': styles.listSmall,
-      'large': styles.listLarge
-    }[size])
+      [styles.listSmall]: size === 'small',
+      [styles.listLarge]: size === 'large'
+    })
   }));
 });
 
@@ -1430,7 +1714,7 @@ var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     contentTypographyProps,
     fallback
   } = _ref2;
-  var styles = useStyles$5();
+  var styles = useStyles$8();
   var labelID = useUID(labelTypographyProps === null || labelTypographyProps === void 0 ? void 0 : labelTypographyProps.id);
   var shouldRenderFallback = isEmptyReactNode(content);
   return /*#__PURE__*/jsxs("div", {
@@ -1458,92 +1742,7 @@ var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
 
-var _excluded$a = ["children", "className"];
-var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
-  appBar: {
-    '&&': {
-      bottom: 0,
-      top: 'auto',
-      borderLeft: 'none',
-      borderRight: 'none',
-      borderBottom: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderTopColor: ColorDynamic.Transparent
-      }
-    }
-  },
-  appBarSticky: {},
-  toolbar: {
-    '&.MuiToolbar-gutters': {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3),
-      [theme.breakpoints.up('md')]: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4)
-      }
-    }
-  }
-}), {
-  name: 'SD-DrawerActions'
-});
-var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
-  var {
-      children,
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  var styles = useStyles$6();
-  return /*#__PURE__*/jsx(VisibilityObserver, {
-    render: _ref2 => {
-      var {
-        ref,
-        visibility
-      } = _ref2;
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
-          ref: appBarRef,
-          position: "sticky",
-          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsx(Toolbar, {
-            className: styles.toolbar,
-            children: children
-          })
-        })), /*#__PURE__*/jsx("div", {
-          ref: ref
-        })]
-      });
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
-
-var _excluded$b = ["className"];
-var useStyles$7 = /*#__PURE__*/makeStyles(theme => ({
-  root: {
-    maxWidth: '100%',
-    padding: theme.spacing(2, 3),
-    [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(2, 4)
-    }
-  }
-}), {
-  name: 'SD-DrawerContent'
-});
-var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
-  var styles = useStyles$7();
-  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    className: clsx(styles.root, className)
-  }));
-});
-if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";
-
-var _excluded$c = ["className"];
+var _excluded$d = ["className"];
 function listItemMixins(theme, space) {
   return {
     '& .MuiListItem-gutters': {
@@ -1561,7 +1760,7 @@ function listItemMixins(theme, space) {
     }
   };
 }
-var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
   root: _objectSpread(_objectSpread({
     maxWidth: '100%'
   }, listItemMixins(theme, 3)), {}, {
@@ -1574,8 +1773,8 @@ var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       className
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$c);
-  var styles = useStyles$8();
+    props = _objectWithoutProperties(_ref, _excluded$d);
+  var styles = useStyles$9();
   return /*#__PURE__*/jsx(List, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     component: "div",
@@ -1584,118 +1783,6 @@ var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerList.displayName = "DrawerList";
 
-var _excluded$d = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
-var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
-  appBar: {
-    '&&': {
-      borderTop: 'none',
-      borderLeft: 'none',
-      borderRight: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderBottomColor: ColorDynamic.Transparent
-      }
-    }
-  },
-  appBarSticky: {},
-  toolbar: {
-    '&.MuiToolbar-gutters': {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3),
-      [theme.breakpoints.up('md')]: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4)
-      }
-    }
-  },
-  startAction: {
-    marginRight: theme.spacing(0.5),
-    '& .MuiIconButton-edgeStart': {
-      marginLeft: theme.spacing(-2)
-    }
-  },
-  endAction: {
-    marginLeft: theme.spacing(0.5),
-    '& .MuiIconButton-edgeEnd': {
-      marginRight: theme.spacing(-2)
-    }
-  }
-}), {
-  name: 'SD-DrawerTitle'
-});
-var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
-  var {
-      title,
-      titleTypographyProps,
-      subtitle,
-      subtitleTypographyProps,
-      startAction,
-      endAction,
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$d);
-  var styles = useStyles$9();
-  return /*#__PURE__*/jsx(VisibilityObserver, {
-    render: _ref2 => {
-      var {
-        ref,
-        visibility
-      } = _ref2;
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx("div", {
-          ref: ref
-        }), /*#__PURE__*/jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
-          ref: appBarRef,
-          position: "sticky",
-          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsx(Toolbar, {
-            className: styles.toolbar,
-            children: /*#__PURE__*/jsxs(Grid, {
-              container: true,
-              direction: "column",
-              children: [/*#__PURE__*/jsx(Grid, {
-                item: true,
-                children: /*#__PURE__*/jsxs(Grid, {
-                  container: true,
-                  alignItems: "center",
-                  children: [!!startAction && /*#__PURE__*/jsx(Grid, {
-                    item: true,
-                    className: styles.startAction,
-                    children: startAction
-                  }), /*#__PURE__*/jsx(Grid, {
-                    item: true,
-                    xs: true,
-                    zeroMinWidth: true,
-                    children: /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
-                      variant: "h3",
-                      noWrap: true
-                    }, titleTypographyProps), {}, {
-                      children: title
-                    }))
-                  }), !!endAction && /*#__PURE__*/jsx(Grid, {
-                    item: true,
-                    className: styles.endAction,
-                    children: endAction
-                  })]
-                })
-              }), /*#__PURE__*/jsx(Grid, {
-                item: true,
-                children: !!subtitle && /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
-                  variant: "body2",
-                  noWrap: true
-                }, subtitleTypographyProps), {}, {
-                  children: subtitle
-                }))
-              })]
-            })
-          })
-        }))]
-      });
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";
-
 var _excluded$e = ["children", "alignItems"];
 /**
  * @deprecated in favor of `Stack`.
@@ -1816,7 +1903,10 @@ var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
       setRootNode(node);
     },
     classes: styles,
-    className: clsx(className, isFullWidth && fullWidthClassName, size === 'large' && sizeLargeClassName),
+    className: clsx(className, {
+      [sizeLargeClassName]: size === 'large',
+      [fullWidthClassName]: isFullWidth
+    }),
     children: /*#__PURE__*/jsx(CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
       className: clsx(cardContentProps.className, contentClassName),
       children: children
@@ -2306,9 +2396,9 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref,
     classes: styles,
     className: clsx(className, {
-      'error': variantError,
-      'success': variantSuccess
-    }[variant]),
+      [variantError]: variant === 'error',
+      [variantSuccess]: variant === 'success'
+    }),
     message: /*#__PURE__*/jsxs(Fragment, {
       children: [Icon && /*#__PURE__*/jsx(Icon, {
         className: icon
@@ -2623,19 +2713,7 @@ var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
     noWrap: noWrap,
     component: component,
     variant: fontWeight === 'bold' ? 'body1' : 'body2',
-    className: clsx(styles.root, className, {
-      'grey': styles.colorGrey,
-      'dark': styles.colorDark,
-      'blue': styles.colorBlue,
-      'green': styles.colorGreen,
-      'purple': styles.colorPurple,
-      'red': styles.colorRed,
-      'teal': styles.colorTeal,
-      'yellow': styles.colorYellow
-    }[color], {
-      'subtle': styles.variantSubtle,
-      'bold': styles.variantBold
-    }[variant]),
+    className: clsx(styles.root, color === 'grey' && styles.colorGrey, color === 'dark' && styles.colorDark, color === 'blue' && styles.colorBlue, color === 'green' && styles.colorGreen, color === 'purple' && styles.colorPurple, color === 'red' && styles.colorRed, color === 'teal' && styles.colorTeal, color === 'yellow' && styles.colorYellow, variant === 'subtle' && styles.variantSubtle, variant === 'bold' && styles.variantBold, className),
     children: children
   }));
 });
@@ -3192,6 +3270,7 @@ function overrideDialog(theme) {
   };
 }
 
+/** @deprecated Use `<AppDrawer>` instead. */
 function overrideDrawer(theme) {
   theme.props.MuiDrawer = {
     anchor: 'right'
@@ -4095,7 +4174,7 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
 function createSuperDispatchTheme(type) {
   var breakpoints = createBreakpoints({});
   var color = type === 'dark' ? ColorDark : Color;
-  var theme = createTheme({
+  var theme = createTheme$1({
     breakpoints,
     palette: {
       type,
@@ -4156,6 +4235,41 @@ function createSuperDispatchTheme(type) {
   overridePreloader(theme);
   return theme;
 }
+function createThemeV5(type) {
+  var breakpoints = createBreakpoints({});
+  var color = type === 'dark' ? ColorDark : Color;
+  return createTheme({
+    breakpoints,
+    palette: {
+      mode: type,
+      primary: {
+        main: color.Blue300
+      },
+      error: {
+        main: color.Red300
+      },
+      action: {
+        hover: color.Silver200,
+        selected: color.Blue50,
+        disabled: color.Silver400
+      },
+      text: {
+        primary: color.Dark500,
+        secondary: color.Dark300,
+        disabled: color.Dark100
+      },
+      common: {
+        white: color.White,
+        black: color.Black
+      },
+      divider: color.Silver400,
+      background: {
+        paper: color.White
+      }
+    },
+    components: {}
+  });
+}
 var generateMaterialClassName = /*#__PURE__*/createGenerateClassName();
 function generateClassName(rule, sheet) {
   var {
@@ -4193,19 +4307,27 @@ function ThemeProvider(_ref) {
     return !modifier ? nextTheme : modifier(nextTheme);
     // eslint-disable-next-line react-hooks/exhaustive-deps -- modifier may update on every render
   }, [mode]);
+  var themeV5 = createThemeV5(mode);
   return /*#__PURE__*/jsx(StylesProvider, {
     injectFirst: injectFirst,
     generateClassName: generateClassName,
-    children: /*#__PURE__*/jsxs(ThemeProvider$1, {
-      theme: theme,
-      children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsxs(ThemeProvider$2, {
+    children: /*#__PURE__*/jsx(StylesProvider$1, {
+      injectFirst: injectFirst,
+      generateClassName: generateClassName,
+      children: /*#__PURE__*/jsx(ThemeProvider$1, {
         theme: theme,
-        children: [/*#__PURE__*/jsx(GlobalStyles, {}), /*#__PURE__*/jsx(ResponsiveContextProvider, {
-          children: /*#__PURE__*/jsx(SnackbarStackProvider, {
-            children: children
-          })
-        })]
-      })]
+        children: /*#__PURE__*/jsxs(ThemeProvider$2, {
+          theme: themeV5,
+          children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsxs(ThemeProvider$3, {
+            theme: theme,
+            children: [/*#__PURE__*/jsx(GlobalStyles, {}), /*#__PURE__*/jsx(ResponsiveContextProvider, {
+              children: /*#__PURE__*/jsx(SnackbarStackProvider, {
+                children: children
+              })
+            })]
+          })]
+        })
+      })
     })
   });
 }
@@ -4280,11 +4402,29 @@ var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
   var columns = useResponsivePropRecord(columnsProp);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
-    className: clsx(styles.root, space === 1 && styles.space1, space === 2 && styles.space2, space === 3 && styles.space3, space === 4 && styles.space4, space === 5 && styles.space5, space === 6 && styles.space6, space === 7 && styles.space7, space === 8 && styles.space8, space === 9 && styles.space9, space === 10 && styles.space10),
+    className: clsx(styles.root, {
+      [styles.space1]: space === 1,
+      [styles.space2]: space === 2,
+      [styles.space3]: space === 3,
+      [styles.space4]: space === 4,
+      [styles.space5]: space === 5,
+      [styles.space6]: space === 6,
+      [styles.space7]: space === 7,
+      [styles.space8]: space === 8,
+      [styles.space9]: space === 9,
+      [styles.space10]: space === 10
+    }),
     children: /*#__PURE__*/jsx("div", {
       className: styles.container,
       children: flattenChildren(children).map((child, idx) => /*#__PURE__*/jsx("div", {
-        className: clsx(styles.child, columns === 1 && styles.columns1, columns === 2 && styles.columns2, columns === 3 && styles.columns3, columns === 4 && styles.columns4, columns === 5 && styles.columns5, columns === 6 && styles.columns6),
+        className: clsx(styles.child, {
+          [styles.columns1]: columns === 1,
+          [styles.columns2]: columns === 2,
+          [styles.columns3]: columns === 3,
+          [styles.columns4]: columns === 4,
+          [styles.columns5]: columns === 5,
+          [styles.columns6]: columns === 6
+        }),
         children: /*#__PURE__*/jsx("div", {
           className: styles.childContainer,
           children: child
@@ -4309,5 +4449,5 @@ function ExitTransitionPlaceholder(_ref) {
   return renderChildren(children);
 }
 
-export { AdaptiveToolbar, AdaptiveVerticalToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, ColorDark, ColorDynamic, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, ExitTransitionPlaceholder, GridStack, Image, InfoCard, InfoTooltip, Inline, InlineGrid, LightDark, NumberField, OverflowText, PatternField, RadioField, RadioFieldCard, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorDynamicProp, isColorProp, isColorPropDark, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveVerticalToolbar, AppDrawer, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, ColorDark, ColorDynamic, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, ExitTransitionPlaceholder, GridStack, Image, InfoCard, InfoTooltip, Inline, InlineGrid, LightDark, NumberField, OverflowText, PatternField, RadioField, RadioFieldCard, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorDynamicProp, isColorProp, isColorPropDark, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
 //# sourceMappingURL=index.js.map