@superdispatch/ui 0.15.0 → 0.16.0

package/dist-web/index.js

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ResizeObserver } from '@juggle/resize-observer';
-import { Button as Button$1, CircularProgress, Toolbar, Grid, Typography, Menu, MenuItem, ButtonBase, Avatar, FormControl, FormControlLabel, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card, CardContent, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, IconButton, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
+import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormControl, FormControlLabel, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card, CardContent, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, IconButton, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
 import { MoreHoriz, Close, Warning, CheckCircle } from '@material-ui/icons';
 import { makeStyles, StylesProvider, ThemeProvider as ThemeProvider$1 } from '@material-ui/styles';
 import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo, useConstant } from '@superdispatch/hooks';
-import { forwardRef, useRef, useState, useLayoutEffect, useMemo, useContext, createContext, Children, useCallback } from 'react';
+import { forwardRef, useState, useRef, useLayoutEffect, useMemo, useContext, createContext, Children, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import styled, { css, ThemeProvider as ThemeProvider$2 } from 'styled-components';
+import clsx from 'clsx';
 import flattenChildren from 'react-keyed-flatten-children';
 import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
 
@@ -42,7 +42,110 @@ var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
 
-var _excluded$1 = ["items"];
+var _excluded$1 = ["MenuListProps", "ButtonGroupProps", "children", "isLoading", "onClick", "label"];
+
+function CaretDownIcon() {
+  return /*#__PURE__*/jsx("svg", {
+    viewBox: "0 0 8 4",
+    children: /*#__PURE__*/jsx("path", {
+      fill: "currentColor",
+      d: "M0.666687 0.666656L4.00002 3.99999L7.33335 0.666656H0.666687Z"
+    })
+  });
+}
+
+var CaretButton = /*#__PURE__*/styled(Button).withConfig({
+  displayName: "DropdownButton__CaretButton",
+  componentId: "SD__sc-8l84jm-0"
+})(["width:auto;", ";"], _ref => {
+  var {
+    variant
+  } = _ref;
+  return variant === 'contained' && "border-left: 1px solid ".concat(Color.Blue500);
+});
+var DropdownButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var _anchorRef$current2;
+
+  var {
+    MenuListProps,
+    ButtonGroupProps,
+    children,
+    isLoading,
+    onClick,
+    label
+  } = _ref2,
+      buttonProps = _objectWithoutProperties(_ref2, _excluded$1);
+
+  var uid = useUID();
+  var [open, setOpen] = useState(false);
+  var anchorRef = useRef(null);
+
+  function handleClick(event) {
+    setOpen(false);
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }
+
+  function handleToggle() {
+    setOpen(prevOpen => !prevOpen);
+  }
+
+  function handleClose(event) {
+    var _anchorRef$current;
+
+    if ((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event.currentTarget)) {
+      return;
+    }
+
+    setOpen(false);
+  }
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(ButtonGroup, _objectSpread(_objectSpread({}, ButtonGroupProps), {}, {
+      ref: mergeRefs(ButtonGroupProps === null || ButtonGroupProps === void 0 ? void 0 : ButtonGroupProps.ref, anchorRef),
+      fullWidth: (ButtonGroupProps === null || ButtonGroupProps === void 0 ? void 0 : ButtonGroupProps.fullWidth) || buttonProps.fullWidth,
+      children: [/*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+        ref: ref,
+        onClick: handleClick,
+        disabled: isLoading,
+        isLoading: isLoading
+      }, buttonProps), {}, {
+        children: label
+      })), /*#__PURE__*/jsx(CaretButton, {
+        onClick: handleToggle,
+        disabled: isLoading,
+        color: buttonProps.color,
+        variant: buttonProps.variant,
+        "aria-haspopup": "menu",
+        "aria-controls": open ? uid : undefined,
+        "aria-expanded": open ? 'true' : undefined,
+        children: /*#__PURE__*/jsx(CaretDownIcon, {})
+      })]
+    })), /*#__PURE__*/jsx(Popover, {
+      open: open,
+      onClose: handleClose,
+      anchorEl: anchorRef.current,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/jsx("div", {
+        style: {
+          minWidth: (_anchorRef$current2 = anchorRef.current) === null || _anchorRef$current2 === void 0 ? void 0 : _anchorRef$current2.clientWidth
+        },
+        children: /*#__PURE__*/jsx(MenuList, _objectSpread(_objectSpread({}, MenuListProps), {}, {
+          id: uid,
+          onClick: () => {
+            setOpen(false);
+          },
+          children: children
+        }))
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") DropdownButton.displayName = "DropdownButton";
+
+var _excluded$2 = ["items"];
 
 function useResizeObserver(node, observer) {
   var handler = useEventHandler(observer);
@@ -73,7 +176,7 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     items
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      props = _objectWithoutProperties(_ref, _excluded$2);
 
   var styles = useStyles();
   var itemNodes = useRef([]);
@@ -116,7 +219,6 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: /*#__PURE__*/jsxs(Grid, {
       container: true,
       spacing: 1,
-      wrap: "nowrap",
       ref: setRootNode,
       children: [/*#__PURE__*/jsx(Grid, {
         item: true,
@@ -131,7 +233,16 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
             ref: node => {
               itemNodes.current[idx] = node;
             },
-            children: /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+            children: item.dropdown ? /*#__PURE__*/jsx(DropdownButton, _objectSpread(_objectSpread({
+              type: "button",
+              onClick: item.onClick,
+              label: item.label
+            }, item.ButtonProps), {}, {
+              children: item.dropdown.map(dropdownItem => /*#__PURE__*/jsx(MenuItem, {
+                onClick: dropdownItem.onClick,
+                children: dropdownItem.label
+              }, dropdownItem.key))
+            })) : /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
               type: "button",
               onClick: item.onClick
             }, item.ButtonProps), {}, {
@@ -162,15 +273,30 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
           onClose: () => {
             setMenuButtonRef(undefined);
           },
-          children: menuItems.map(item => /*#__PURE__*/jsx(MenuItem, {
-            onClick: event => {
-              var _item$onClick;
-
-              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-              setMenuButtonRef(undefined);
-            },
-            children: item.label
-          }, item.key))
+          children: menuItems.map((item, index, arr) => {
+            var _item$dropdown;
+
+            var next = arr[index + 1];
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(MenuItem, {
+                onClick: event => {
+                  var _item$onClick;
+
+                  (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+                  setMenuButtonRef(undefined);
+                },
+                children: item.label
+              }, item.key), (_item$dropdown = item.dropdown) === null || _item$dropdown === void 0 ? void 0 : _item$dropdown.map(dropdownItem => /*#__PURE__*/jsx(MenuItem, {
+                onClick: event => {
+                  var _dropdownItem$onClick;
+
+                  (_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 ? void 0 : _dropdownItem$onClick.call(dropdownItem, event);
+                  setMenuButtonRef(undefined);
+                },
+                children: dropdownItem.label
+              }, dropdownItem.key)), next && item.groupKey !== next.groupKey && /*#__PURE__*/jsx(Divider, {})]
+            });
+          })
         })]
       })]
     })
@@ -256,7 +382,7 @@ function isColorProp(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color, name);
 }
 
-var _excluded$2 = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
+var _excluded$3 = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
     _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
 var useStyles$1 = /*#__PURE__*/makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
@@ -366,7 +492,7 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$3);
 
   var _useStyles = useStyles$1({
     classes
@@ -408,7 +534,7 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") AvatarButton.displayName = "AvatarButton";
 
-var _excluded$3 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
+var _excluded$4 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
 var useStyles$2 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     width: '100%',
@@ -492,7 +618,7 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     startIcon,
     disabled
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
   var styles = useStyles$2({
     classes
@@ -531,7 +657,7 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") CardButton.displayName = "CardButton";
 
-var _excluded$4 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded$5 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
 var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     label,
@@ -542,7 +668,7 @@ var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$5);
 
   return /*#__PURE__*/jsxs(FormControl, {
     error: error,
@@ -563,7 +689,7 @@ var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") CheckboxField.displayName = "CheckboxField";
 
-var _excluded$5 = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var _excluded$6 = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
 var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     FormGroupProps: formGroupProps,
@@ -573,7 +699,7 @@ var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$5);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -812,7 +938,7 @@ function renderChildren(node) {
   return node;
 }
 
-var _excluded$6 = ["render", "onChange"];
+var _excluded$7 = ["render", "onChange"];
 function useVisibilityObserver(node) {
   var {
     threshold = 0,
@@ -848,7 +974,7 @@ function VisibilityObserver(_ref2) {
     render,
     onChange
   } = _ref2,
-      options = _objectWithoutProperties(_ref2, _excluded$6);
+      options = _objectWithoutProperties(_ref2, _excluded$7);
 
   var [node, setNode] = useState(null);
   var visibility = useVisibilityObserver(node, options);
@@ -862,7 +988,7 @@ function VisibilityObserver(_ref2) {
   return renderChildren(children);
 }
 
-var _excluded$7 = ["title", "enterDelay"],
+var _excluded$8 = ["title", "enterDelay"],
     _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
 var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
   root: {
@@ -894,7 +1020,7 @@ var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
       enterDelay = 1000
     } = {}
   } = _ref,
-      tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$7),
+      tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$8),
       props = _objectWithoutProperties(_ref, _excluded2$1);
 
   var [isOpen, setIsOpen] = useState(false);
@@ -946,7 +1072,7 @@ function useUID(defaultID) {
   return defaultID || uid;
 }
 
-var _excluded$8 = ["size"];
+var _excluded$9 = ["size"];
 
 function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   return {
@@ -990,7 +1116,7 @@ var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     size
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   var styles = useStyles$4();
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
@@ -1046,7 +1172,7 @@ var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
 
-var _excluded$9 = ["children", "className"];
+var _excluded$a = ["children", "className"];
 var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
   appBar: {
     '&&': {
@@ -1080,7 +1206,7 @@ var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
     children,
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   var styles = useStyles$5();
   return /*#__PURE__*/jsx(VisibilityObserver, {
@@ -1107,7 +1233,7 @@ var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
 
-var _excluded$a = ["className"];
+var _excluded$b = ["className"];
 var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     maxWidth: '100%',
@@ -1123,7 +1249,7 @@ var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   var styles = useStyles$6();
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
@@ -1133,7 +1259,7 @@ var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";
 
-var _excluded$b = ["className"];
+var _excluded$c = ["className"];
 
 function listItemMixins(theme, space) {
   return {
@@ -1166,7 +1292,7 @@ var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var styles = useStyles$7();
   return /*#__PURE__*/jsx(List, _objectSpread(_objectSpread({}, props), {}, {
@@ -1177,7 +1303,7 @@ var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerList.displayName = "DrawerList";
 
-var _excluded$c = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
+var _excluded$d = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
 var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
   appBar: {
     '&&': {
@@ -1226,7 +1352,7 @@ var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
     endAction,
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var styles = useStyles$8();
   return /*#__PURE__*/jsx(VisibilityObserver, {
@@ -1280,7 +1406,7 @@ var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";
 
-var _excluded$d = ["children", "alignItems"];
+var _excluded$e = ["children", "alignItems"];
 
 /**
  * @deprecated in favor of `Stack`.
@@ -1290,7 +1416,7 @@ var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     alignItems = 'stretch'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   var items = Children.toArray(children);
   return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
@@ -1309,7 +1435,7 @@ var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") GridStack.displayName = "GridStack";
 
-var _excluded$e = ["children", "wrap", "justify", "alignItems"];
+var _excluded$f = ["children", "wrap", "justify", "alignItems"];
 
 /**
  * @deprecated in favor of `Inline` component.
@@ -1321,7 +1447,7 @@ var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     justify = 'flex-start',
     alignItems = 'flex-start'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   var items = Children.toArray(children);
   return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
@@ -1360,7 +1486,7 @@ function assignRef(ref, value) {
   }
 }
 
-var _excluded$f = ["size", "square", "classes", "children", "className", "CardContentProps"],
+var _excluded$g = ["size", "square", "classes", "children", "className", "CardContentProps"],
     _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
 var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
   root: {
@@ -1392,7 +1518,7 @@ var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
     className,
     CardContentProps: cardContentProps = {}
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   var _useStyles = useStyles$9({
     classes
@@ -1471,7 +1597,7 @@ var Inline = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";
 
-var _excluded$g = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded$h = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
 var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     label,
@@ -1482,7 +1608,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   return /*#__PURE__*/jsxs(FormControl, {
     error: error,
@@ -1502,7 +1628,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";
 
-var _excluded$h = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var _excluded$i = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
 var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     name,
@@ -1515,7 +1641,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$h);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$i);
 
   return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -1550,7 +1676,7 @@ function useCollapseBreakpoint(collapseBreakpoint) {
   return breakpointIDX < collapseBreakpointIDX;
 }
 
-var _excluded$i = ["action", "children", "onClose", "className", "classes", "variant"],
+var _excluded$j = ["action", "children", "onClose", "className", "classes", "variant"],
     _excluded2$3 = ["icon", "closeButton", "variantError", "variantSuccess"];
 var useStyles$a = /*#__PURE__*/makeStyles(theme => ({
   root: {
@@ -1595,7 +1721,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     classes,
     variant = 'default'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   var _useStyles = useStyles$a({
     classes
@@ -1645,7 +1771,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SnackbarContent.displayName = "SnackbarContent";
 
-var _excluded$j = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
+var _excluded$k = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
 
 function SlideTransition(props) {
   return /*#__PURE__*/jsx(Slide, _objectSpread(_objectSpread({}, props), {}, {
@@ -1664,7 +1790,7 @@ var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     hasCloseButton = onClose != null,
     TransitionComponent = SlideTransition
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   function handleClose(reason) {
     if (reason !== 'clickaway') {
@@ -1693,7 +1819,7 @@ var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Snackbar.displayName = "Snackbar";
 
-var _excluded$k = ["onClose", "variant", "key", "id", "autoHideDuration"];
+var _excluded$l = ["onClose", "variant", "key", "id", "autoHideDuration"];
 
 function warnContext() {
   // eslint-disable-next-line no-console
@@ -1739,7 +1865,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$k);
+        props = _objectWithoutProperties(_ref3, _excluded$l);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -1836,7 +1962,7 @@ var Stack = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";
 
-var _excluded$l = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
+var _excluded$m = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
 var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
   root: {
     maxWidth: '100%',
@@ -1920,7 +2046,7 @@ var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontWeight = 'bold',
     component = 'div'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   var styles = useStyles$b({
     classes
@@ -3433,5 +3559,5 @@ var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Tiles.displayName = "Tiles";
 
-export { AdaptiveToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, GridStack, InfoCard, Inline, InlineGrid, OverflowText, RadioField, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, DropdownButton, GridStack, InfoCard, Inline, InlineGrid, OverflowText, RadioField, RadioGroupField, ResponsiveContextProvider, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
 //# sourceMappingURL=index.js.map