@superdispatch/ui 0.40.2 → 0.42.0

package/dist-src/app-drawer/AppDrawer.js

@@ -0,0 +1,77 @@
+import { Drawer as MuiDrawer, IconButton } from '@material-ui/core';
+import { ArrowBack as BackIcon, Close as CloseIcon } from '@material-ui/icons';
+import styled from 'styled-components';
+import { Button } from "../button/Button.js";
+import { DrawerActions } from "../drawer/DrawerActions.js";
+import { DrawerContent } from "../drawer/DrawerContent.js";
+import { DrawerTitle } from "../drawer/DrawerTitle.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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'
+};
+export function AppDrawer(_ref) {
+  var {
+    title,
+    subtitle,
+    children,
+    open,
+    onClose,
+    onBack,
+    primaryAction,
+    secondaryAction,
+    disableContentPadding = false,
+    disableCloseButton = false,
+    size = 'md'
+  } = _ref;
+  return /*#__PURE__*/_jsxs(MuiDrawer, {
+    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(BackIcon, {
+          color: "action"
+        })
+      }),
+      endAction: !disableCloseButton && /*#__PURE__*/_jsx(IconButton, {
+        onClick: onClose,
+        children: /*#__PURE__*/_jsx(CloseIcon, {
+          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
+        })]
+      })
+    })]
+  });
+}

package/dist-src/app-drawer/constants.js

@@ -0,0 +1 @@
+export var DRAWER_SIZE_VALUES = ['md', 'lg', 'xl', 'xxl'];

package/dist-src/avatar-button/AvatarButton.js

@@ -4,7 +4,7 @@ var _excluded = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef"
   _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
 import { Avatar, ButtonBase, CircularProgress } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -134,7 +134,10 @@ export 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,

package/dist-src/card-button/CardButton.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
 import { ButtonBase, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -100,10 +100,13 @@ export var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   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",

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["size"];
 import { SvgIcon, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { OverflowText } from "../overflow-text/OverflowText.js";
 import { ColorDynamic } from "../theme/Color.js";
@@ -59,9 +59,9 @@ export var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref,
     "data-size": size,
     className: clsx(styles.list, {
-      'small': styles.listSmall,
-      'large': styles.listLarge
-    }[size])
+      [styles.listSmall]: size === 'small',
+      [styles.listLarge]: size === 'large'
+    })
   }));
 });
 

package/dist-src/drawer/DrawerActions.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "className"];
 import { AppBar, Toolbar } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { ColorDynamic } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
@@ -36,6 +36,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
 }), {
   name: 'SD-DrawerActions'
 });
+/** @deprecated Use `<AppDrawer>` instead. */
 export var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   var {
       children,
@@ -53,7 +54,9 @@ export var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
         children: [/*#__PURE__*/_jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
+          className: clsx(className, styles.appBar, {
+            [styles.appBarSticky]: visibility === 'invisible'
+          }),
           children: /*#__PURE__*/_jsx(Toolbar, {
             className: styles.toolbar,
             children: children

package/dist-src/drawer/DrawerContent.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className"];
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
@@ -16,6 +16,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
 }), {
   name: 'SD-DrawerContent'
 });
+/** @deprecated Use `<AppDrawer>` instead. */
 export var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
       className

package/dist-src/drawer/DrawerList.js

@@ -3,7 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["className"];
 import { List } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 function listItemMixins(theme, space) {

package/dist-src/drawer/DrawerOverrides.js

@@ -1,3 +1,4 @@
+/** @deprecated Use `<AppDrawer>` instead. */
 export function overrideDrawer(theme) {
   theme.props.MuiDrawer = {
     anchor: 'right'

package/dist-src/drawer/DrawerTitle.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
 import { AppBar, Grid, Toolbar, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { ColorDynamic } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
@@ -46,6 +46,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
 }), {
   name: 'SD-DrawerTitle'
 });
+/** @deprecated Use `<AppDrawer>` instead. */
 export var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   var {
       title,
@@ -70,7 +71,9 @@ export var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
         }), /*#__PURE__*/_jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
+          className: clsx(styles.appBar, className, {
+            [styles.appBarSticky]: visibility === 'invisible'
+          }),
           children: /*#__PURE__*/_jsx(Toolbar, {
             className: styles.toolbar,
             children: /*#__PURE__*/_jsxs(Grid, {

package/dist-src/index.js

@@ -1,5 +1,6 @@
 export * from "./adaptive-toolbar/AdaptiveToolbar.js";
 export * from "./adaptive-vertical-toolbar/AdaptiveVerticalToolbar.js";
+export * from "./app-drawer/AppDrawer.js";
 export * from "./avatar-button/AvatarButton.js";
 export * from "./button/Button.js";
 export * from "./card-button/CardButton.js";

package/dist-src/info-card/InfoCard.js

@@ -4,7 +4,7 @@ var _excluded = ["size", "square", "classes", "children", "className", "CardCont
   _excluded2 = ["content", "sizeLarge", "fullWidth"];
 import { Card, CardContent } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef, useState } from 'react';
 import { assignRef } from "../utils/mergeRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -57,7 +57,10 @@ export 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

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

@@ -4,7 +4,7 @@ var _excluded = ["title", "enterDelay"],
   _excluded2 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
 import { Tooltip, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef, useState } from 'react';
 import { ColorDynamic } from "../theme/Color.js";
 import { VisibilityObserver } from "../utils/VisibilityObserver.js";
@@ -68,7 +68,9 @@ export 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

package/dist-src/snackbar/SnackbarContent.js

@@ -5,7 +5,7 @@ var _excluded = ["action", "children", "onClose", "className", "classes", "varia
 import { Grid, IconButton, SnackbarContent as MuiSnackbarContent } from '@material-ui/core';
 import { CheckCircle, Close, Error } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { ColorDynamic } from "../theme/Color.js";
@@ -82,9 +82,9 @@ export 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

package/dist-src/tag/Tag.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
 import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import cx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Color, ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -109,19 +109,7 @@ export var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
     noWrap: noWrap,
     component: component,
     variant: fontWeight === 'bold' ? 'body1' : 'body2',
-    className: cx(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
   }));
 });

package/dist-src/theme/ThemeProvider.js

@@ -1,6 +1,8 @@
 import { createGenerateClassName, createTheme, CssBaseline } from '@material-ui/core';
 import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
 import { StylesProvider, ThemeProvider as MaterialThemeProvider } from '@material-ui/styles';
+import { createTheme as createMaterialV5Theme, ThemeProvider as MaterialV5ThemeProvider } from '@mui/material/styles';
+import { StylesProvider as MaterialV5StylesProvider } from '@mui/styles';
 import { useMemo } from 'react';
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { overrideAppBar } from "../app-bar/AppBarOverrides.js";
@@ -97,6 +99,41 @@ function createSuperDispatchTheme(type) {
   overridePreloader(theme);
   return theme;
 }
+function createThemeV5(type) {
+  var breakpoints = createBreakpoints({});
+  var color = type === 'dark' ? ColorDark : Color;
+  return createMaterialV5Theme({
+    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 {
@@ -134,19 +171,27 @@ export 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(MaterialThemeProvider, {
-      theme: theme,
-      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsxs(StyledThemeProvider, {
+    children: /*#__PURE__*/_jsx(MaterialV5StylesProvider, {
+      injectFirst: injectFirst,
+      generateClassName: generateClassName,
+      children: /*#__PURE__*/_jsx(MaterialThemeProvider, {
         theme: theme,
-        children: [/*#__PURE__*/_jsx(GlobalStyles, {}), /*#__PURE__*/_jsx(ResponsiveContextProvider, {
-          children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
-            children: children
-          })
-        })]
-      })]
+        children: /*#__PURE__*/_jsxs(MaterialV5ThemeProvider, {
+          theme: themeV5,
+          children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsxs(StyledThemeProvider, {
+            theme: theme,
+            children: [/*#__PURE__*/_jsx(GlobalStyles, {}), /*#__PURE__*/_jsx(ResponsiveContextProvider, {
+              children: /*#__PURE__*/_jsx(SnackbarStackProvider, {
+                children: children
+              })
+            })]
+          })]
+        })
+      })
     })
   });
 }

package/dist-src/tiles/Tiles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 import { useResponsivePropRecord } from "../props/ResponsiveProp.js";
@@ -74,11 +74,29 @@ export 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

package/dist-types/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ButtonProps as ButtonProps$1, ToolbarProps, AvatarClassKey, AvatarTypeMap, ButtonBaseProps, CheckboxProps, FormControlLabelProps, FormControlProps, FormGroupProps, FormLabelProps, FormHelperTextProps, TypographyProps, TooltipProps, ListProps, ListTypeMap, MenuListProps, ButtonGroupProps, GridProps, CardClassKey, CardProps, CardContentProps, IconButtonProps, StandardTextFieldProps, InputProps, RadioProps, RadioGroupProps, SnackbarContentProps as SnackbarContentProps$1, SnackbarContentClassKey as SnackbarContentClassKey$1, SnackbarProps as SnackbarProps$1, Theme } from '@material-ui/core';
+import { ButtonProps as ButtonProps$1, ToolbarProps, AvatarClassKey, AvatarTypeMap, ButtonBaseProps, CheckboxProps, FormControlLabelProps, FormControlProps, FormGroupProps, FormLabelProps, FormHelperTextProps, TypographyProps, TooltipProps, ListProps, ListTypeMap, MenuListProps, ButtonGroupProps, GridProps, CardClassKey, CardProps, CardContentProps, IconButtonProps, StandardTextFieldProps, InputProps, RadioProps, RadioGroupProps, SnackbarContentProps as SnackbarContentProps$1, SnackbarContentClassKey as SnackbarContentClassKey$1, SnackbarProps as SnackbarProps$1, Theme as Theme$1 } from '@material-ui/core';
 import { RefAttributes, ForwardRefExoticComponent, Key, ReactNode, MouseEvent, ReactElement, EventHandler, ButtonHTMLAttributes, Ref, ElementType, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, ConsumerProps } from 'react';
 import { ClassNameMap } from '@material-ui/styles';
 import { Property } from 'csstype';
@@ -7,6 +7,7 @@ import { CommonProps } from '@material-ui/core/OverridableComponent';
 import { NumericFormatProps, PatternFormatProps } from 'react-number-format';
 import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 import { SkeletonClassKey } from '@material-ui/lab';
+import { Theme } from '@mui/material/styles';
 
 interface ButtonProps extends RefAttributes<HTMLButtonElement>, Omit<ButtonProps$1, 'color'> {
     rel?: string;
@@ -52,6 +53,40 @@ interface AdaptiveVerticalToolbarProps extends RefAttributes<HTMLDivElement> {
 }
 declare const AdaptiveVerticalToolbar: ForwardRefExoticComponent<AdaptiveVerticalToolbarProps>;
 
+declare const DRAWER_SIZE_VALUES: readonly ["md", "lg", "xl", "xxl"];
+
+declare type AppDrawerSize = typeof DRAWER_SIZE_VALUES[number];
+interface DrawerActionDef {
+    label: string;
+    form?: string;
+    onClick: () => void;
+}
+interface AppDrawerProps {
+    title: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    primaryAction?: DrawerActionDef;
+    secondaryAction?: DrawerActionDef;
+    size?: AppDrawerSize;
+    /**
+     * By default renders the children with content
+     * padding wrapper as it's the most common use case.
+     */
+    disableContentPadding?: boolean;
+    /**
+     * By default renders the close button in the header.
+     * Set to true to hide it.
+     */
+    disableCloseButton?: boolean;
+    /**
+     * Renders a back button in the header
+     */
+    onBack?: () => void;
+    open: boolean;
+    onClose: () => void;
+}
+declare function AppDrawer({ title, subtitle, children, open, onClose, onBack, primaryAction, secondaryAction, disableContentPadding, disableCloseButton, size, }: AppDrawerProps): JSX.Element;
+
 declare type AvatarButtonClassKey = 'button' | 'overlay' | 'progress' | 'withIcon' | 'sizeLarge' | Exclude<AvatarClassKey, 'circle'>;
 interface AvatarButtonProps extends RefAttributes<HTMLButtonElement>, ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'small' | 'large';
@@ -177,9 +212,11 @@ interface DescriptionListItemProps {
 declare const DescriptionListItem: ForwardRefExoticComponent<DescriptionListItemProps & RefAttributes<HTMLDivElement>>;
 
 declare type DrawerActionsProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+/** @deprecated Use `<AppDrawer>` instead. */
 declare const DrawerActions: ForwardRefExoticComponent<DrawerActionsProps & RefAttributes<HTMLDivElement>>;
 
 declare type DrawerContentProps = HTMLAttributes<HTMLDivElement>;
+/** @deprecated Use `<AppDrawer>` instead. */
 declare const DrawerContent: ForwardRefExoticComponent<DrawerContentProps & RefAttributes<HTMLDivElement>>;
 
 declare type DrawerListProps = Omit<ListProps<'div'>, 'component'>;
@@ -194,6 +231,7 @@ interface DrawerTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'
     startAction?: ReactNode;
     endAction?: ReactNode;
 }
+/** @deprecated Use `<AppDrawer>` instead. */
 declare const DrawerTitle: ForwardRefExoticComponent<DrawerTitleProps & RefAttributes<HTMLDivElement>>;
 
 interface DropdownButtonProps extends Omit<ButtonProps, 'children'> {
@@ -730,12 +768,16 @@ declare function isColorProp(name: unknown): name is ColorProp;
 declare function isColorDynamicProp(name: unknown): name is ColorDynamicProp;
 declare function isColorPropDark(name: unknown): name is ColorDarkProp;
 
+declare module '@mui/styles/defaultTheme' {
+    type DefaultTheme = Theme;
+}
 declare module '@material-ui/core/styles/overrides' {
     interface ComponentNameToClassKey {
         MuiSkeleton: SkeletonClassKey;
     }
 }
-declare type SuperDispatchTheme = Readonly<Required<Theme>>;
+declare type DefaultTheme = Theme;
+declare type SuperDispatchTheme = Readonly<Required<Theme$1>>;
 
 interface ThemeProviderProps {
     children?: ReactNode;
@@ -790,4 +832,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
 }
 declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
 
-export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorDark, ColorDarkProp, ColorDynamic, ColorDynamicProp, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, ExitTransitionPlaceholder, GridStack, GridStackProps, HorizontalAlign, Image, InfoCard, InfoCardClassKey, InfoCardProps, InfoTooltip, Inline, InlineGrid, InlineGridProps, InlineProps, LightDark, MinBreakpoint, NegativeSpaceProp, NumberField, NumberFieldProps, OverflowText, OverflowTextProps, PartialResponsivePropRecord, PatternField, PatternFieldProps, RadioCardItemProps, RadioField, RadioFieldCard, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorDynamicProp, isColorProp, isColorPropDark, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AppDrawer, AppDrawerProps, AppDrawerSize, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorDark, ColorDarkProp, ColorDynamic, ColorDynamicProp, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DefaultTheme, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActionDef, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, ExitTransitionPlaceholder, GridStack, GridStackProps, HorizontalAlign, Image, InfoCard, InfoCardClassKey, InfoCardProps, InfoTooltip, Inline, InlineGrid, InlineGridProps, InlineProps, LightDark, MinBreakpoint, NegativeSpaceProp, NumberField, NumberFieldProps, OverflowText, OverflowTextProps, PartialResponsivePropRecord, PatternField, PatternFieldProps, RadioCardItemProps, RadioField, RadioFieldCard, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorDynamicProp, isColorProp, isColorPropDark, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };