@superdispatch/ui 0.12.0 → 0.16.0

package/dist-node/index.js

@@ -11,16 +11,16 @@ var core = require('@material-ui/core');
 var icons = require('@material-ui/icons');
 var styles = require('@material-ui/styles');
 var hooks = require('@superdispatch/hooks');
-var react = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = _interopDefault(require('clsx'));
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
+var clsx = _interopDefault(require('clsx'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var createBreakpoints = _interopDefault(require('@material-ui/core/styles/createBreakpoints'));
 
 var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
-var Button = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     size,
     children,
@@ -49,11 +49,114 @@ var Button = /*#__PURE__*/react.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__*/jsxRuntime.jsx("svg", {
+    viewBox: "0 0 8 4",
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      fill: "currentColor",
+      d: "M0.666687 0.666656L4.00002 3.99999L7.33335 0.666656H0.666687Z"
+    })
+  });
+}
+
+var CaretButton = /*#__PURE__*/styled__default(Button).withConfig({
+  displayName: "DropdownButton__CaretButton",
+  componentId: "SD__sc-8l84jm-0"
+})(["width:auto;", ";"], _ref => {
+  var {
+    variant
+  } = _ref;
+  return variant === 'contained' && "border-left: 1px solid ".concat(exports.Color.Blue500);
+});
+var DropdownButton = /*#__PURE__*/React.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] = React.useState(false);
+  var anchorRef = React.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(core.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__*/jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
+        ref: ref,
+        onClick: handleClick,
+        disabled: isLoading,
+        isLoading: isLoading
+      }, buttonProps), {}, {
+        children: label
+      })), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(CaretDownIcon, {})
+      })]
+    })), /*#__PURE__*/jsxRuntime.jsx(core.Popover, {
+      open: open,
+      onClose: handleClose,
+      anchorEl: anchorRef.current,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          minWidth: (_anchorRef$current2 = anchorRef.current) === null || _anchorRef$current2 === void 0 ? void 0 : _anchorRef$current2.clientWidth
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(core.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 = hooks.useEventHandler(observer);
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!node) {
       return;
     }
@@ -76,19 +179,19 @@ var useStyles = /*#__PURE__*/styles.makeStyles({
 }, {
   name: 'SD-AdaptiveToolbar'
 });
-var AdaptiveToolbar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     items
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      props = _objectWithoutProperties(_ref, _excluded$2);
 
   var styles = useStyles();
-  var itemNodes = react.useRef([]);
-  var optionsButtonRef = react.useRef(null);
-  var [firstHiddenIdx, setFirstHiddenIdx] = react.useState(-1);
+  var itemNodes = React.useRef([]);
+  var optionsButtonRef = React.useRef(null);
+  var [firstHiddenIdx, setFirstHiddenIdx] = React.useState(-1);
   var menuItems = firstHiddenIdx === -1 ? [] : items.slice(firstHiddenIdx);
-  var [menuButtonNode, setMenuButtonRef] = react.useState();
-  var [rootNode, setRootNode] = react.useState(null);
+  var [menuButtonNode, setMenuButtonRef] = React.useState();
+  var [rootNode, setRootNode] = React.useState(null);
   useResizeObserver(rootNode, node => {
     var _optionsButtonRef$cur;
 
@@ -123,7 +226,6 @@ var AdaptiveToolbar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
       container: true,
       spacing: 1,
-      wrap: "nowrap",
       ref: setRootNode,
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Grid, {
         item: true,
@@ -138,7 +240,16 @@ var AdaptiveToolbar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
             ref: node => {
               itemNodes.current[idx] = node;
             },
-            children: /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
+            children: item.dropdown ? /*#__PURE__*/jsxRuntime.jsx(DropdownButton, _objectSpread(_objectSpread({
+              type: "button",
+              onClick: item.onClick,
+              label: item.label
+            }, item.ButtonProps), {}, {
+              children: item.dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+                onClick: dropdownItem.onClick,
+                children: dropdownItem.label
+              }, dropdownItem.key))
+            })) : /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
               type: "button",
               onClick: item.onClick
             }, item.ButtonProps), {}, {
@@ -169,15 +280,30 @@ var AdaptiveToolbar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
           onClose: () => {
             setMenuButtonRef(undefined);
           },
-          children: menuItems.map(item => /*#__PURE__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsx(core.Divider, {})]
+            });
+          })
         })]
       })]
     })
@@ -202,6 +328,12 @@ if (process.env.NODE_ENV !== "production") AdaptiveToolbar.displayName = "Adapti
   Color["Grey400"] = "#323C4E";
   Color["Grey450"] = "#222F44";
   Color["Grey500"] = "#192334";
+  Color["Dark100"] = "#8F949E";
+  Color["Dark200"] = "#6A707C";
+  Color["Dark300"] = "#5B6371";
+  Color["Dark400"] = "#323C4E";
+  Color["Dark450"] = "#222F44";
+  Color["Dark500"] = "#192334";
   Color["Silver100"] = "#F6F7F8";
   Color["Silver200"] = "#F3F5F8";
   Color["Silver300"] = "#E8ECF0";
@@ -255,7 +387,7 @@ function isColorProp(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(exports.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__*/styles.makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
@@ -348,7 +480,7 @@ var useStyles$1 = /*#__PURE__*/styles.makeStyles(theme => {
 }, {
   name: 'SD-AvatarButton'
 });
-var AvatarButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var AvatarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     size,
     icon,
@@ -365,7 +497,7 @@ var AvatarButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     variant,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$3);
 
   var _useStyles = useStyles$1({
     classes
@@ -407,7 +539,7 @@ var AvatarButton = /*#__PURE__*/react.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__*/styles.makeStyles(theme => ({
   root: {
     width: '100%',
@@ -423,7 +555,7 @@ var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: exports.Color.Grey200,
+    color: exports.Color.Dark200,
     borderColor: exports.Color.Silver500,
     backgroundColor: exports.Color.Silver100
   },
@@ -479,7 +611,7 @@ var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-CardButton'
 });
-var CardButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var CardButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     hint,
     size,
@@ -491,7 +623,7 @@ var CardButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     startIcon,
     disabled
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
   var styles = useStyles$2({
     classes
@@ -530,8 +662,8 @@ var CardButton = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") CardButton.displayName = "CardButton";
 
-var _excluded$4 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
-var CheckboxField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var _excluded$5 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var CheckboxField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     label,
     error,
@@ -541,7 +673,7 @@ var CheckboxField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$5);
 
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, {
     error: error,
@@ -562,8 +694,8 @@ var CheckboxField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") CheckboxField.displayName = "CheckboxField";
 
-var _excluded$5 = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
-var CheckboxGroupField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var _excluded$6 = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var CheckboxGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     FormGroupProps: formGroupProps,
     label,
@@ -572,7 +704,7 @@ var CheckboxGroupField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$5);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -589,7 +721,7 @@ var CheckboxGroupField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") CheckboxGroupField.displayName = "CheckboxGroupField";
 
-var Context = /*#__PURE__*/react.createContext({});
+var Context = /*#__PURE__*/React.createContext({});
 
 function useBreakpoint(breakpoint) {
   return core.useMediaQuery(theme => theme.breakpoints.only(breakpoint));
@@ -606,7 +738,7 @@ function ResponsiveContextProvider(_ref) {
   var isLG = useBreakpoint('lg');
   var isXL = useBreakpoint('xl');
   var breakpoint = isXS ? 'xs' : isSM ? 'sm' : isMD ? 'md' : isLG ? 'lg' : isXL ? 'xl' : defaultBreakpoint;
-  var ctx = react.useMemo(() => ({
+  var ctx = React.useMemo(() => ({
     breakpoint
   }), [breakpoint]);
   return /*#__PURE__*/jsxRuntime.jsx(Context.Provider, {
@@ -615,7 +747,7 @@ function ResponsiveContextProvider(_ref) {
   });
 }
 function useResponsiveContext() {
-  return react.useContext(Context);
+  return React.useContext(Context);
 }
 
 function parseResponsiveProp(prop) {
@@ -710,7 +842,7 @@ var ColumnRoot = /*#__PURE__*/styled__default.div.withConfig({
   } = _ref;
   return styled.css(["min-width:0;", ";", "{", ";}", "{", ";}& > div{padding-top:var(--column-space-top);padding-left:var(--column-space-left);padding-bottom:var(--column-space-bottom);}&:last-child > div{padding-top:0;padding-bottom:0;}"], columnRootMixin(columnWidth[0]), theme.breakpoints.up('sm'), columnRootMixin(columnWidth[1]), theme.breakpoints.up('md'), columnRootMixin(columnWidth[2]));
 });
-var Column = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+var Column = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var {
     children,
     'aria-label': ariaLabel,
@@ -811,7 +943,7 @@ function renderChildren(node) {
   return node;
 }
 
-var _excluded$6 = ["render", "onChange"];
+var _excluded$7 = ["render", "onChange"];
 function useVisibilityObserver(node) {
   var {
     threshold = 0,
@@ -820,9 +952,9 @@ function useVisibilityObserver(node) {
     marginRight = '0px',
     marginBottom = '0px'
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var [state, setState] = react.useState('undetermined');
+  var [state, setState] = React.useState('undetermined');
   var rootMargin = "".concat(marginTop, " ").concat(marginRight, " ").concat(marginBottom, " ").concat(marginLeft);
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!node || !('IntersectionObserver' in window)) {
       setState('undetermined');
       return;
@@ -847,9 +979,9 @@ function VisibilityObserver(_ref2) {
     render,
     onChange
   } = _ref2,
-      options = _objectWithoutProperties(_ref2, _excluded$6);
+      options = _objectWithoutProperties(_ref2, _excluded$7);
 
-  var [node, setNode] = react.useState(null);
+  var [node, setNode] = React.useState(null);
   var visibility = useVisibilityObserver(node, options);
   var children = render({
     ref: setNode,
@@ -861,7 +993,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__*/styles.makeStyles(theme => ({
   root: {
@@ -882,7 +1014,7 @@ var useStyles$3 = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-OverflowText'
 });
-var OverflowText = /*#__PURE__*/react.forwardRef((_ref, rootRef) => {
+var OverflowText = /*#__PURE__*/React.forwardRef((_ref, rootRef) => {
   var {
     onClick: _onClick,
     children,
@@ -893,10 +1025,10 @@ var OverflowText = /*#__PURE__*/react.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] = react.useState(false);
+  var [isOpen, setIsOpen] = React.useState(false);
   var styles = useStyles$3();
   return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
     render: _ref2 => {
@@ -941,11 +1073,11 @@ function isEmptyReactNode(node) {
 
 var current = 0;
 function useUID(defaultID) {
-  var uid = react.useMemo(() => "uid_".concat(current += 1), []);
+  var uid = React.useMemo(() => "uid_".concat(current += 1), []);
   return defaultID || uid;
 }
 
-var _excluded$8 = ["size"];
+var _excluded$9 = ["size"];
 
 function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   return {
@@ -972,7 +1104,7 @@ var useStyles$4 = /*#__PURE__*/styles.makeStyles(theme => ({
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2)
@@ -985,11 +1117,11 @@ var useStyles$4 = /*#__PURE__*/styles.makeStyles(theme => ({
 // DescriptionList
 //
 
-var DescriptionList = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var DescriptionList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     size
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   var styles = useStyles$4();
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, props), {}, {
@@ -1005,7 +1137,7 @@ var DescriptionList = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 //
 
 if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";
-var DescriptionListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+var DescriptionListItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var _ref3, _contentTypographyPro, _contentTypographyPro2;
 
   var {
@@ -1045,7 +1177,7 @@ var DescriptionListItem = /*#__PURE__*/react.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__*/styles.makeStyles(theme => ({
   appBar: {
     '&&': {
@@ -1074,12 +1206,12 @@ var useStyles$5 = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-DrawerActions'
 });
-var DrawerActions = /*#__PURE__*/react.forwardRef((_ref, appBarRef) => {
+var DrawerActions = /*#__PURE__*/React.forwardRef((_ref, appBarRef) => {
   var {
     children,
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   var styles = useStyles$5();
   return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
@@ -1106,7 +1238,7 @@ var DrawerActions = /*#__PURE__*/react.forwardRef((_ref, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
 
-var _excluded$a = ["className"];
+var _excluded$b = ["className"];
 var useStyles$6 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     maxWidth: '100%',
@@ -1118,11 +1250,11 @@ var useStyles$6 = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-DrawerContent'
 });
-var DrawerContent = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var DrawerContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   var styles = useStyles$6();
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, props), {}, {
@@ -1132,7 +1264,7 @@ var DrawerContent = /*#__PURE__*/react.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 {
@@ -1161,11 +1293,11 @@ var useStyles$7 = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-DrawerList'
 });
-var DrawerList = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var DrawerList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var styles = useStyles$7();
   return /*#__PURE__*/jsxRuntime.jsx(core.List, _objectSpread(_objectSpread({}, props), {}, {
@@ -1176,7 +1308,7 @@ var DrawerList = /*#__PURE__*/react.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__*/styles.makeStyles(theme => ({
   appBar: {
     '&&': {
@@ -1215,7 +1347,7 @@ var useStyles$8 = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-DrawerTitle'
 });
-var DrawerTitle = /*#__PURE__*/react.forwardRef((_ref, appBarRef) => {
+var DrawerTitle = /*#__PURE__*/React.forwardRef((_ref, appBarRef) => {
   var {
     title,
     titleTypographyProps,
@@ -1225,7 +1357,7 @@ var DrawerTitle = /*#__PURE__*/react.forwardRef((_ref, appBarRef) => {
     endAction,
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var styles = useStyles$8();
   return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
@@ -1279,19 +1411,19 @@ var DrawerTitle = /*#__PURE__*/react.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`.
  */
 
-var GridStack = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var GridStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     children,
     alignItems = 'stretch'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
-  var items = react.Children.toArray(children);
+  var items = React.Children.toArray(children);
   return /*#__PURE__*/jsxRuntime.jsx(core.Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     container: true,
@@ -1308,21 +1440,21 @@ var GridStack = /*#__PURE__*/react.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.
  */
 
-var InlineGrid = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var InlineGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     children,
     wrap = 'wrap',
     justify = 'flex-start',
     alignItems = 'flex-start'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
-  var items = react.Children.toArray(children);
+  var items = React.Children.toArray(children);
   return /*#__PURE__*/jsxRuntime.jsx(core.Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     wrap: wrap,
@@ -1338,19 +1470,29 @@ var InlineGrid = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";
 
-var _excluded$f = ["size", "square", "classes", "children", "className", "CardContentProps"],
-    _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
 
+  return node => {
+    refs.forEach(ref => {
+      assignRef(ref, node);
+    });
+  };
+}
 function assignRef(ref, value) {
   if (ref) {
-    if (typeof ref === 'object') {
-      ref.current = value;
-    } else {
+    if (typeof ref === 'function') {
       ref(value);
+    } else {
+      ref.current = value;
     }
   }
 }
 
+var _excluded$g = ["size", "square", "classes", "children", "className", "CardContentProps"],
+    _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
 var useStyles$9 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     '&$fullWidth': {
@@ -1372,7 +1514,7 @@ var useStyles$9 = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-InfoCard'
 });
-var InfoCard = /*#__PURE__*/react.forwardRef((_ref, _ref2) => {
+var InfoCard = /*#__PURE__*/React.forwardRef((_ref, _ref2) => {
   var {
     size,
     square,
@@ -1381,7 +1523,7 @@ var InfoCard = /*#__PURE__*/react.forwardRef((_ref, _ref2) => {
     className,
     CardContentProps: cardContentProps = {}
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   var _useStyles = useStyles$9({
     classes
@@ -1393,7 +1535,7 @@ var InfoCard = /*#__PURE__*/react.forwardRef((_ref, _ref2) => {
   } = _useStyles,
       styles = _objectWithoutProperties(_useStyles, _excluded2$2);
 
-  var [rootNode, setRootNode] = react.useState(null);
+  var [rootNode, setRootNode] = React.useState(null);
   var clientRect = rootNode === null || rootNode === void 0 ? void 0 : rootNode.getBoundingClientRect();
   var isFullWidth = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) === window.innerWidth;
   return /*#__PURE__*/jsxRuntime.jsx(core.Card, _objectSpread(_objectSpread({}, props), {}, {
@@ -1429,7 +1571,7 @@ var InlineRoot = /*#__PURE__*/styled__default.div.withConfig({
   } = _ref;
   return styled.css(["padding-top:1px;&:before{content:'';display:block;}", " ", "{", "}", "{", "}"], inlineRootMixin(space[0], noWrap[0], verticalAlign[0], horizontalAlign[0]), theme.breakpoints.up('sm'), inlineRootMixin(space[1], noWrap[1], verticalAlign[1], horizontalAlign[1]), theme.breakpoints.up('md'), inlineRootMixin(space[2], noWrap[2], verticalAlign[2], horizontalAlign[2]));
 });
-var Inline = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+var Inline = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var {
     children,
     'aria-label': ariaLabel,
@@ -1460,8 +1602,8 @@ var Inline = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";
 
-var _excluded$g = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
-var RadioField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var _excluded$h = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     label,
     error,
@@ -1471,7 +1613,7 @@ var RadioField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, {
     error: error,
@@ -1491,8 +1633,8 @@ var RadioField = /*#__PURE__*/react.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 RadioGroupField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var _excluded$i = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     name,
     value = '',
@@ -1504,7 +1646,7 @@ var RadioGroupField = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$h);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$i);
 
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -1539,12 +1681,12 @@ 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__*/styles.makeStyles(theme => ({
   root: {
     color: exports.Color.White,
-    backgroundColor: exports.Color.Grey500,
+    backgroundColor: exports.Color.Dark500,
     '&$variantError': {
       color: exports.Color.White,
       backgroundColor: exports.Color.Red500
@@ -1575,7 +1717,7 @@ var useStyles$a = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-SnackbarContent'
 });
-var SnackbarContent = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     action,
     children,
@@ -1584,7 +1726,7 @@ var SnackbarContent = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     classes,
     variant = 'default'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   var _useStyles = useStyles$a({
     classes
@@ -1634,7 +1776,7 @@ var SnackbarContent = /*#__PURE__*/react.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__*/jsxRuntime.jsx(core.Slide, _objectSpread(_objectSpread({}, props), {}, {
@@ -1642,7 +1784,7 @@ function SlideTransition(props) {
   }));
 }
 
-var Snackbar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     open,
     action,
@@ -1653,7 +1795,7 @@ var Snackbar = /*#__PURE__*/react.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') {
@@ -1682,14 +1824,14 @@ var Snackbar = /*#__PURE__*/react.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
   console.log('`useSnackbarStack` is used outside of `SnackbarStackProvider`.');
 }
 
-var Context$1 = /*#__PURE__*/react.createContext({
+var Context$1 = /*#__PURE__*/React.createContext({
   clearStack: warnContext,
   addSnackbar: () => {
     warnContext();
@@ -1697,7 +1839,7 @@ var Context$1 = /*#__PURE__*/react.createContext({
   }
 });
 function useSnackbarStack() {
-  return react.useContext(Context$1);
+  return React.useContext(Context$1);
 }
 function SnackbarStackConsumer(_ref) {
   var {
@@ -1712,13 +1854,13 @@ function SnackbarStackProvider(_ref2) {
   var {
     children
   } = _ref2;
-  var [stack, setStack] = react.useState(new Map());
-  var transientKeyRef = react.useRef(0);
-  var getNextTransientKey = react.useCallback(() => TRANSIENT_KEY + String(transientKeyRef.current += 1), []);
-  var clearStack = react.useCallback(() => {
+  var [stack, setStack] = React.useState(new Map());
+  var transientKeyRef = React.useRef(0);
+  var getNextTransientKey = React.useCallback(() => TRANSIENT_KEY + String(transientKeyRef.current += 1), []);
+  var clearStack = React.useCallback(() => {
     setStack(x => x.size === 0 ? x : new Map());
   }, []);
-  var addSnackbar = react.useCallback(function (message) {
+  var addSnackbar = React.useCallback(function (message) {
     var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
         {
       onClose: _onClose,
@@ -1728,7 +1870,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$k);
+        props = _objectWithoutProperties(_ref3, _excluded$l);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -1779,7 +1921,7 @@ function SnackbarStackProvider(_ref2) {
       open: false
     });
   }, [stack]);
-  var api = react.useMemo(() => ({
+  var api = React.useMemo(() => ({
     clearStack,
     addSnackbar
   }), [clearStack, addSnackbar]);
@@ -1804,7 +1946,7 @@ var StackRoot = /*#__PURE__*/styled__default.div.withConfig({
   } = _ref;
   return styled.css(["width:100%;& > div{", ";", "{", ";}", "{", ";}}"], stackItemMixin(space[0], align[0]), theme.breakpoints.up('sm'), stackItemMixin(space[1], align[1]), theme.breakpoints.up('md'), stackItemMixin(space[2], align[2]));
 });
-var Stack = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+var Stack = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var {
     children,
     'aria-label': ariaLabel,
@@ -1825,7 +1967,7 @@ var Stack = /*#__PURE__*/react.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__*/styles.makeStyles(theme => ({
   root: {
     maxWidth: '100%',
@@ -1836,7 +1978,7 @@ var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   },
   variantSubtle: {
     '&$colorGrey': {
-      color: exports.Color.Grey300,
+      color: exports.Color.Dark300,
       backgroundColor: exports.Color.Silver200
     },
     '&$colorBlue': {
@@ -1867,7 +2009,7 @@ var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   variantBold: {
     color: exports.Color.White,
     '&$colorGrey': {
-      backgroundColor: exports.Color.Grey300
+      backgroundColor: exports.Color.Dark300
     },
     '&$colorBlue': {
       backgroundColor: exports.Color.Blue500
@@ -1898,7 +2040,7 @@ var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-Tag'
 });
-var Tag = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var Tag = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     color,
     variant,
@@ -1909,7 +2051,7 @@ var Tag = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     fontWeight = 'bold',
     component = 'div'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   var styles = useStyles$b({
     classes
@@ -2020,7 +2162,7 @@ function overrideAvatar(theme) {
       }
     }),
     colorDefault: {
-      color: exports.Color.Grey300,
+      color: exports.Color.Dark300,
       backgroundColor: exports.Color.Silver300
     }
   };
@@ -2215,7 +2357,7 @@ function overrideButton(theme) {
       '&[data-color="success"]': outlinedVariant(exports.Color.Green300, exports.Color.Green300, exports.Color.Green100, exports.Color.Green100, exports.Color.Green300, exports.Color.Green300, exports.Color.Green100, exports.Color.Green50, exports.Color.Green300, exports.Color.White),
       '&[data-color="white"]': outlinedVariant(exports.Color.White, exports.Color.White50, exports.Color.White50, exports.Color.White40, exports.Color.White, exports.Color.White50, exports.Color.White40, exports.Color.White10, exports.Color.White50, exports.Color.Transparent)
     },
-    outlinedPrimary: outlinedVariant(exports.Color.Grey500, exports.Color.Silver500, exports.Color.Silver500, exports.Color.Silver400, exports.Color.Blue300, exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Grey200, exports.Color.White),
+    outlinedPrimary: outlinedVariant(exports.Color.Dark500, exports.Color.Silver500, exports.Color.Silver500, exports.Color.Silver400, exports.Color.Blue300, exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Dark200, exports.Color.White),
     outlinedSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -2321,7 +2463,7 @@ function overrideCheckbox(theme) {
   };
   theme.overrides.MuiCheckbox = {
     root: {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       marginTop: theme.spacing(-0.625),
       marginBottom: theme.spacing(-0.625)
     },
@@ -2330,7 +2472,7 @@ function overrideCheckbox(theme) {
         color: exports.Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       }
     }
   };
@@ -2359,7 +2501,7 @@ function overrideChip(theme) {
       backgroundColor: exports.Color.Silver200,
       '&$disabled': {
         opacity: undefined,
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       }
     }),
     sizeSmall: {
@@ -2405,7 +2547,7 @@ function overrideChip(theme) {
       },
       '& > svg': {
         borderRadius: '50%',
-        color: exports.Color.Grey200,
+        color: exports.Color.Dark200,
         fontSize: '1em'
       }
     },
@@ -2420,7 +2562,7 @@ function overrideChip(theme) {
       }
     },
     icon: {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       fontSize: '1em',
       marginRight: undefined
     },
@@ -2443,6 +2585,14 @@ function overrideDialog(theme) {
   theme.overrides.MuiDialog = {
     paper: {
       margin: theme.spacing(3)
+    },
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+      '&$paperScrollBody': {
+        [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
+        }
+      }
     }
   };
   theme.overrides.MuiDialogTitle = {
@@ -2484,7 +2634,7 @@ function overrideDrawer(theme) {
 function overrideIconButton(theme) {
   theme.overrides.MuiIconButton = {
     root: {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       backgroundColor: exports.Color.Transparent,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.short
@@ -2493,10 +2643,10 @@ function overrideIconButton(theme) {
         backgroundColor: exports.Color.Transparent
       },
       '&:active': {
-        color: exports.Color.Grey500
+        color: exports.Color.Dark500
       },
       '&:hover ': {
-        color: exports.Color.Grey300
+        color: exports.Color.Dark300
       },
       '&:focus': {
         backgroundColor: exports.Color.Silver400
@@ -2604,7 +2754,7 @@ function overridePagination(theme) {
   var props = {};
   var overrides = {
     root: {
-      color: exports.Color.Grey400
+      color: exports.Color.Dark400
     },
     page: {
       '&:hover': {
@@ -2621,13 +2771,13 @@ function overridePagination(theme) {
           backgroundColor: exports.Color.Silver400
         },
         '&$disabled': {
-          color: exports.Color.Grey100,
+          color: exports.Color.Dark100,
           backgroundColor: exports.Color.Silver400
         }
       },
       '&$disabled': {
         opacity: undefined,
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       }
     }
   }; // Remove `Object.assign` after official release of `PaginationItem`.
@@ -2680,7 +2830,7 @@ function overrideRadio(theme) {
   };
   theme.overrides.MuiRadio = {
     root: {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       marginTop: theme.spacing(-0.625),
       marginBottom: theme.spacing(-0.625)
     },
@@ -2689,7 +2839,7 @@ function overrideRadio(theme) {
         color: exports.Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       }
     }
   };
@@ -2741,7 +2891,7 @@ function overrideSvgIcon(theme) {
       fontSize: 'var(--mui-svg-icon-size, 32px)'
     },
     colorAction: {
-      color: exports.Color.Grey100
+      color: exports.Color.Dark100
     }
   };
 }
@@ -2824,7 +2974,7 @@ function overrideSwitch(theme) {
         backgroundColor: exports.Color.Blue100
       },
       '&:hover + $track': {
-        backgroundColor: exports.Color.Grey100
+        backgroundColor: exports.Color.Dark100
       },
       '&.Mui-focusVisible + $track': {
         boxShadow: "0 0 0 3px ".concat(exports.Color.Blue100)
@@ -2845,7 +2995,7 @@ function overrideTabs(theme) {
     },
     scrollButtons: {
       opacity: 1,
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       width: theme.spacing(4),
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.short
@@ -2865,7 +3015,7 @@ function overrideTabs(theme) {
       }
     }),
     textColorPrimary: {
-      color: exports.Color.Grey500,
+      color: exports.Color.Dark500,
       '&:hover, &:focus': {
         color: exports.Color.Blue300
       }
@@ -2873,7 +3023,7 @@ function overrideTabs(theme) {
   };
 }
 
-var SelectIcon = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({
+var SelectIcon = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({
   ref: ref
 }, props), {}, {
   children: /*#__PURE__*/jsxRuntime.jsx("path", {
@@ -2891,7 +3041,7 @@ function overrideTextField(theme) {
   };
   theme.overrides.MuiFormLabel = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: exports.Color.Grey400,
+      color: exports.Color.Dark400,
       '&$error': {
         color: undefined
       },
@@ -2986,7 +3136,7 @@ function overrideTextField(theme) {
     icon: {
       top: 'calc(50% - 0.5em)',
       '$disabled &': {
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       },
       fontSize: theme.spacing(3),
       [sm]: {
@@ -3074,7 +3224,7 @@ function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: exports.Color.Grey400
+      backgroundColor: exports.Color.Dark400
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -3099,7 +3249,7 @@ function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: exports.Color.Grey400,
+      color: exports.Color.Dark400,
       fontSize: theme.spacing(1)
     }
   };
@@ -3232,10 +3382,10 @@ function createSuperDispatchTheme() {
         disabled: exports.Color.Silver400
       },
       text: {
-        primary: exports.Color.Grey500,
-        secondary: exports.Color.Grey200,
-        hint: exports.Color.Grey100,
-        disabled: exports.Color.Grey100
+        primary: exports.Color.Dark500,
+        secondary: exports.Color.Dark200,
+        hint: exports.Color.Dark100,
+        disabled: exports.Color.Dark100
       },
       divider: exports.Color.Silver400
     },
@@ -3388,7 +3538,7 @@ var useStyles$c = /*#__PURE__*/styles.makeStyles(theme => ({
 }), {
   name: 'SD-Tiles'
 });
-var Tiles = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+var Tiles = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     children,
     space: spaceProp = 1,
@@ -3414,24 +3564,6 @@ var Tiles = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Tiles.displayName = "Tiles";
 
-function mergeRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return node => {
-    refs.forEach(ref => {
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-      }
-    });
-  };
-}
-
 exports.AdaptiveToolbar = AdaptiveToolbar;
 exports.AvatarButton = AvatarButton;
 exports.Button = Button;
@@ -3446,6 +3578,7 @@ exports.DrawerActions = DrawerActions;
 exports.DrawerContent = DrawerContent;
 exports.DrawerList = DrawerList;
 exports.DrawerTitle = DrawerTitle;
+exports.DropdownButton = DropdownButton;
 exports.GridStack = GridStack;
 exports.InfoCard = InfoCard;
 exports.Inline = Inline;
@@ -3463,6 +3596,7 @@ exports.Tag = Tag;
 exports.ThemeProvider = ThemeProvider;
 exports.Tiles = Tiles;
 exports.VisibilityObserver = VisibilityObserver;
+exports.assignRef = assignRef;
 exports.isColorProp = isColorProp;
 exports.isEmptyReactNode = isEmptyReactNode;
 exports.mergeRefs = mergeRefs;