@superdispatch/ui 0.41.0 → 0.43.0

package/dist-node/index.js

@@ -15,7 +15,7 @@ var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var resizeObserver = require('@juggle/resize-observer');
 var hooks = require('@superdispatch/hooks');
-var clsx = _interopDefault(require('clsx'));
+var clsx = require('clsx');
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var ui = require('@superdispatch/ui');
 var reactNumberFormat = require('react-number-format');
@@ -678,9 +678,340 @@ function isColorPropDark(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(exports.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] = React.useState('undetermined');
+  var rootMargin = "".concat(marginTop, " ").concat(marginRight, " ").concat(marginBottom, " ").concat(marginLeft);
+  React.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] = React.useState(null);
+  var visibility = useVisibilityObserver(node, options);
+  var children = render({
+    ref: setNode,
+    visibility
+  });
+  hooks.useValueObserver(visibility, () => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(visibility);
+  });
+  return renderChildren(children);
+}
+
+var _excluded$4 = ["children", "className"];
+var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      bottom: 0,
+      top: 'auto',
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderBottom: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderTopColor: exports.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__*/React.forwardRef((_ref, appBarRef) => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  var styles = useStyles$2();
+  return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
+    render: _ref2 => {
+      var {
+        ref,
+        visibility
+      } = _ref2;
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.AppBar, _objectSpread(_objectSpread({}, props), {}, {
+          ref: appBarRef,
+          position: "sticky",
+          className: clsx.clsx(className, styles.appBar, {
+            [styles.appBarSticky]: visibility === 'invisible'
+          }),
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
+            className: styles.toolbar,
+            children: children
+          })
+        })), /*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: ref
+        })]
+      });
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
+
+var _excluded$5 = ["className"];
+var useStyles$3 = /*#__PURE__*/styles.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__*/React.forwardRef((_ref, ref) => {
+  var {
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  var styles = useStyles$3();
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: clsx.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__*/styles.makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      borderTop: 'none',
+      borderLeft: 'none',
+      borderRight: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderBottomColor: exports.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__*/React.forwardRef((_ref, appBarRef) => {
+  var {
+      title,
+      titleTypographyProps,
+      subtitle,
+      subtitleTypographyProps,
+      startAction,
+      endAction,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  var styles = useStyles$4();
+  return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
+    render: _ref2 => {
+      var {
+        ref,
+        visibility
+      } = _ref2;
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: ref
+        }), /*#__PURE__*/jsxRuntime.jsx(core.AppBar, _objectSpread(_objectSpread({}, props), {}, {
+          ref: appBarRef,
+          position: "sticky",
+          className: clsx.clsx(styles.appBar, className, {
+            [styles.appBarSticky]: visibility === 'invisible'
+          }),
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
+            className: styles.toolbar,
+            children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+              container: true,
+              direction: "column",
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+                item: true,
+                children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+                  container: true,
+                  alignItems: "center",
+                  children: [!!startAction && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+                    item: true,
+                    className: styles.startAction,
+                    children: startAction
+                  }), /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+                    item: true,
+                    xs: true,
+                    zeroMinWidth: true,
+                    children: /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({
+                      variant: "h3",
+                      noWrap: true
+                    }, titleTypographyProps), {}, {
+                      children: title
+                    }))
+                  }), !!endAction && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+                    item: true,
+                    className: styles.endAction,
+                    children: endAction
+                  })]
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+                item: true,
+                children: !!subtitle && /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({
+                  variant: "body2",
+                  noWrap: true
+                }, subtitleTypographyProps), {}, {
+                  children: subtitle
+                }))
+              })]
+            })
+          })
+        }))]
+      });
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";
+
+var StyledActionsLayout = /*#__PURE__*/styled__default.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__*/jsxRuntime.jsxs(core.Drawer, {
+    open: open,
+    onClose: onClose,
+    anchor: "right",
+    PaperProps: {
+      style: {
+        width: '100%',
+        maxWidth: sizeToMaxWidthMap[size]
+      }
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(DrawerTitle, {
+      title: title,
+      subtitle: subtitle,
+      startAction: onBack && /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+        onClick: onBack,
+        edge: "start",
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowBack, {
+          color: "action"
+        })
+      }),
+      endAction: !disableCloseButton && /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+        onClick: onClose,
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.Close, {
+          color: "action"
+        })
+      })
+    }), disableContentPadding ? children : /*#__PURE__*/jsxRuntime.jsx(DrawerContent, {
+      children: children
+    }), (primaryAction || secondaryAction) && /*#__PURE__*/jsxRuntime.jsx(DrawerActions, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(StyledActionsLayout, {
+        children: [primaryAction && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
+          type: "button",
+          variant: "contained"
+        }, primaryAction), {}, {
+          children: primaryAction.label
+        })), secondaryAction && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
+          type: "button",
+          variant: "outlined"
+        }, secondaryAction), {}, {
+          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__*/styles.makeStyles(theme => {
+var useStyles$5 = /*#__PURE__*/styles.makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
   return {
     button: {
@@ -789,8 +1120,8 @@ var AvatarButton = /*#__PURE__*/React.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
     }),
     {
@@ -806,7 +1137,10 @@ var AvatarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     "aria-busy": isLoading,
     "aria-disabled": disabled,
     disabled: disabled || isLoading,
-    className: clsx(className, buttonClassName, !!icon && withIconClassName, size === 'large' && sizeLargeClassName),
+    className: clsx.clsx(className, buttonClassName, {
+      [withIconClassName]: !!icon,
+      [sizeLargeClassName]: size === 'large'
+    }),
     children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
       ref: avatarRef,
       classes: avatarClasses,
@@ -829,8 +1163,8 @@ var AvatarButton = /*#__PURE__*/React.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__*/styles.makeStyles(theme => ({
+var _excluded$8 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
+var useStyles$6 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     width: '100%',
     display: 'flex',
@@ -916,23 +1250,26 @@ var CardButton = /*#__PURE__*/React.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__*/jsxRuntime.jsx(core.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.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__*/jsxRuntime.jsxs(core.Typography, {
       variant: "h4",
       color: "inherit",
       className: styles.label,
       children: [!!startIcon && /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: clsx(styles.icon, styles.startIcon),
+        className: clsx.clsx(styles.icon, styles.startIcon),
         children: startIcon
       }), error]
     }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -941,10 +1278,10 @@ var CardButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         color: "inherit",
         className: styles.label,
         children: [!!startIcon && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: clsx(styles.icon, styles.startIcon),
+          className: clsx.clsx(styles.icon, styles.startIcon),
           children: startIcon
         }), children, !!endIcon && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: clsx(styles.icon, styles.endIcon),
+          className: clsx.clsx(styles.icon, styles.endIcon),
           children: endIcon
         })]
       }), !!hint && /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
@@ -958,7 +1295,7 @@ var CardButton = /*#__PURE__*/React.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__default(core.FormControl).withConfig({
   displayName: "CheckboxField__FormControl",
   componentId: "SD__sc-1wxu0g6-0"
@@ -978,7 +1315,7 @@ var CheckboxField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       FormControlProps: formControlProps,
       FormControlLabelProps: formControlLabelProps
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/jsxRuntime.jsxs(FormControl, _objectSpread(_objectSpread({
     error: error
   }, formControlProps), {}, {
@@ -998,7 +1335,7 @@ var CheckboxField = /*#__PURE__*/React.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__default(core.FormLabel).withConfig({
   displayName: "CheckboxGroudField__FormLabel",
   componentId: "SD__sc-1lihyfy-0"
@@ -1016,7 +1353,7 @@ var CheckboxGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       FormHelperTextProps: formHelperTextProps,
       children
     } = _ref,
-    formControlProps = _objectWithoutProperties(_ref, _excluded$6);
+    formControlProps = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
     children: [!!label && /*#__PURE__*/jsxRuntime.jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
@@ -1185,103 +1522,46 @@ function parseSpaceProp(prop) {
       return 4;
     case 'xsmall':
       return 8;
-    case 'small':
-      return 16;
-    case 'medium':
-      return 24;
-    case 'large':
-      return 32;
-    case 'xlarge':
-      return 40;
-    case 'xxlarge':
-      return 48;
-  }
-}
-
-function columnsRootMixin(align, horizontalAlign, spaceProp, isReversed, isCollapsed) {
-  var space = parseSpaceProp(spaceProp);
-  return styled.css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";justify-content:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), parseAlignProp(horizontalAlign), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
-}
-var Columns = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "Columns",
-  componentId: "SD__sc-1a73118-0"
-})(_ref => {
-  var {
-    theme,
-    collapseBelow,
-    align: alignProp = 'top',
-    horizontalAlign: horizontalAlignProp = 'left',
-    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 styled.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] = React.useState('undetermined');
-  var rootMargin = "".concat(marginTop, " ").concat(marginRight, " ").concat(marginBottom, " ").concat(marginLeft);
-  React.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;
+    case 'small':
+      return 16;
+    case 'medium':
+      return 24;
+    case 'large':
+      return 32;
+    case 'xlarge':
+      return 40;
+    case 'xxlarge':
+      return 48;
+  }
 }
-function VisibilityObserver(_ref2) {
-  var {
-      render,
-      onChange
-    } = _ref2,
-    options = _objectWithoutProperties(_ref2, _excluded$7);
-  var [node, setNode] = React.useState(null);
-  var visibility = useVisibilityObserver(node, options);
-  var children = render({
-    ref: setNode,
-    visibility
-  });
-  hooks.useValueObserver(visibility, () => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(visibility);
-  });
-  return renderChildren(children);
+
+function columnsRootMixin(align, horizontalAlign, spaceProp, isReversed, isCollapsed) {
+  var space = parseSpaceProp(spaceProp);
+  return styled.css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";justify-content:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), parseAlignProp(horizontalAlign), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
 }
+var Columns = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Columns",
+  componentId: "SD__sc-1a73118-0"
+})(_ref => {
+  var {
+    theme,
+    collapseBelow,
+    align: alignProp = 'top',
+    horizontalAlign: horizontalAlignProp = 'left',
+    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 styled.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__*/styles.makeStyles(theme => ({
+var useStyles$7 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     marginBottom: -1,
     borderBottom: '1px dashed transparent',
@@ -1311,10 +1591,10 @@ var OverflowText = /*#__PURE__*/React.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] = React.useState(false);
-  var styles = useStyles$4();
+  var styles = useStyles$7();
   return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
     render: _ref2 => {
       var {
@@ -1340,7 +1620,9 @@ var OverflowText = /*#__PURE__*/React.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.clsx(styles.root, {
+            [styles.truncated]: !disableUnderline && visibility === 'invisible'
+          }, className),
           children: [children, !!children && /*#__PURE__*/jsxRuntime.jsx("span", {
             ref: ref,
             className: styles.sentinel
@@ -1362,7 +1644,7 @@ function useUID(defaultID) {
   return defaultID || uid;
 }
 
-var _excluded$9 = ["size"];
+var _excluded$c = ["size"];
 function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   return {
     '& > $list, & > $item': {
@@ -1375,7 +1657,7 @@ function sizeVariant(theme, mobileSpacing, desktopSpacing) {
     }
   };
 }
-var useStyles$5 = /*#__PURE__*/styles.makeStyles(theme => ({
+var useStyles$8 = /*#__PURE__*/styles.makeStyles(theme => ({
   list: sizeVariant(theme, 2, 1),
   listSmall: sizeVariant(theme, 1, 0.5),
   listLarge: sizeVariant(theme, 3, 2),
@@ -1406,15 +1688,15 @@ var DescriptionList = /*#__PURE__*/React.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__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "data-size": size,
-    className: clsx(styles.list, {
-      'small': styles.listSmall,
-      'large': styles.listLarge
-    }[size])
+    className: clsx.clsx(styles.list, {
+      [styles.listSmall]: size === 'small',
+      [styles.listLarge]: size === 'large'
+    })
   }));
 });
 
@@ -1433,7 +1715,7 @@ var DescriptionListItem = /*#__PURE__*/React.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__*/jsxRuntime.jsxs("div", {
@@ -1461,92 +1743,7 @@ var DescriptionListItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
 
-var _excluded$a = ["children", "className"];
-var useStyles$6 = /*#__PURE__*/styles.makeStyles(theme => ({
-  appBar: {
-    '&&': {
-      bottom: 0,
-      top: 'auto',
-      borderLeft: 'none',
-      borderRight: 'none',
-      borderBottom: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderTopColor: exports.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__*/React.forwardRef((_ref, appBarRef) => {
-  var {
-      children,
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  var styles = useStyles$6();
-  return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
-    render: _ref2 => {
-      var {
-        ref,
-        visibility
-      } = _ref2;
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.AppBar, _objectSpread(_objectSpread({}, props), {}, {
-          ref: appBarRef,
-          position: "sticky",
-          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
-            className: styles.toolbar,
-            children: children
-          })
-        })), /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: ref
-        })]
-      });
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
-
-var _excluded$b = ["className"];
-var useStyles$7 = /*#__PURE__*/styles.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__*/React.forwardRef((_ref, ref) => {
-  var {
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
-  var styles = useStyles$7();
-  return /*#__PURE__*/jsxRuntime.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': {
@@ -1564,7 +1761,7 @@ function listItemMixins(theme, space) {
     }
   };
 }
-var useStyles$8 = /*#__PURE__*/styles.makeStyles(theme => ({
+var useStyles$9 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: _objectSpread(_objectSpread({
     maxWidth: '100%'
   }, listItemMixins(theme, 3)), {}, {
@@ -1577,128 +1774,16 @@ var DrawerList = /*#__PURE__*/React.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__*/jsxRuntime.jsx(core.List, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     component: "div",
-    className: clsx(className, styles.root)
+    className: clsx.clsx(className, styles.root)
   }));
 });
 if (process.env.NODE_ENV !== "production") DrawerList.displayName = "DrawerList";
 
-var _excluded$d = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
-var useStyles$9 = /*#__PURE__*/styles.makeStyles(theme => ({
-  appBar: {
-    '&&': {
-      borderTop: 'none',
-      borderLeft: 'none',
-      borderRight: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderBottomColor: exports.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__*/React.forwardRef((_ref, appBarRef) => {
-  var {
-      title,
-      titleTypographyProps,
-      subtitle,
-      subtitleTypographyProps,
-      startAction,
-      endAction,
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$d);
-  var styles = useStyles$9();
-  return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
-    render: _ref2 => {
-      var {
-        ref,
-        visibility
-      } = _ref2;
-      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: ref
-        }), /*#__PURE__*/jsxRuntime.jsx(core.AppBar, _objectSpread(_objectSpread({}, props), {}, {
-          ref: appBarRef,
-          position: "sticky",
-          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
-            className: styles.toolbar,
-            children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
-              container: true,
-              direction: "column",
-              children: [/*#__PURE__*/jsxRuntime.jsx(core.Grid, {
-                item: true,
-                children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
-                  container: true,
-                  alignItems: "center",
-                  children: [!!startAction && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
-                    item: true,
-                    className: styles.startAction,
-                    children: startAction
-                  }), /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
-                    item: true,
-                    xs: true,
-                    zeroMinWidth: true,
-                    children: /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({
-                      variant: "h3",
-                      noWrap: true
-                    }, titleTypographyProps), {}, {
-                      children: title
-                    }))
-                  }), !!endAction && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
-                    item: true,
-                    className: styles.endAction,
-                    children: endAction
-                  })]
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
-                item: true,
-                children: !!subtitle && /*#__PURE__*/jsxRuntime.jsx(core.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`.
@@ -1819,9 +1904,12 @@ var InfoCard = /*#__PURE__*/React.forwardRef((_ref, _ref2) => {
       setRootNode(node);
     },
     classes: styles,
-    className: clsx(className, isFullWidth && fullWidthClassName, size === 'large' && sizeLargeClassName),
+    className: clsx.clsx(className, {
+      [sizeLargeClassName]: size === 'large',
+      [fullWidthClassName]: isFullWidth
+    }),
     children: /*#__PURE__*/jsxRuntime.jsx(core.CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
-      className: clsx(cardContentProps.className, contentClassName),
+      className: clsx.clsx(cardContentProps.className, contentClassName),
       children: children
     }))
   }));
@@ -2309,10 +2397,10 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(core.SnackbarContent, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     classes: styles,
-    className: clsx(className, {
-      'error': variantError,
-      'success': variantSuccess
-    }[variant]),
+    className: clsx.clsx(className, {
+      [variantError]: variant === 'error',
+      [variantSuccess]: variant === 'success'
+    }),
     message: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
         className: icon
@@ -2627,19 +2715,7 @@ var Tag = /*#__PURE__*/React.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.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
   }));
 });
@@ -3196,6 +3272,7 @@ function overrideDialog(theme) {
   };
 }
 
+/** @deprecated Use `<AppDrawer>` instead. */
 function overrideDrawer(theme) {
   theme.props.MuiDrawer = {
     anchor: 'right'
@@ -4327,11 +4404,29 @@ var Tiles = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var columns = useResponsivePropRecord(columnsProp);
   return /*#__PURE__*/jsxRuntime.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.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__*/jsxRuntime.jsx("div", {
       className: styles.container,
       children: flattenChildren(children).map((child, idx) => /*#__PURE__*/jsxRuntime.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.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__*/jsxRuntime.jsx("div", {
           className: styles.childContainer,
           children: child
@@ -4358,6 +4453,7 @@ function ExitTransitionPlaceholder(_ref) {
 
 exports.AdaptiveToolbar = AdaptiveToolbar;
 exports.AdaptiveVerticalToolbar = AdaptiveVerticalToolbar;
+exports.AppDrawer = AppDrawer;
 exports.AvatarButton = AvatarButton;
 exports.Button = Button;
 exports.CardButton = CardButton;