@superdispatch/ui 0.12.0 → 0.16.0

package/dist-src/adaptive-toolbar/AdaptiveToolbar.js

@@ -2,13 +2,15 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["items"];
 import { ResizeObserver } from '@juggle/resize-observer';
-import { Grid, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core';
+import { Divider, Grid, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core';
 import { MoreHoriz } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
 import { useEventHandler } from '@superdispatch/hooks';
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import { Button } from "../button/Button.js";
+import { DropdownButton } from "../dropdown-button/DropdownButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 function useResizeObserver(node, observer) {
@@ -83,7 +85,6 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: /*#__PURE__*/_jsxs(Grid, {
       container: true,
       spacing: 1,
-      wrap: "nowrap",
       ref: setRootNode,
       children: [/*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -98,7 +99,16 @@ export 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), {}, {
@@ -129,15 +139,30 @@ export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
           onClose: () => {
             setMenuButtonRef(undefined);
           },
-          children: menuItems.map(item => /*#__PURE__*/_jsx(MenuItem, {
-            onClick: event => {
-              var _item$onClick;
+          children: menuItems.map((item, index, arr) => {
+            var _item$dropdown;
 
-              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-              setMenuButtonRef(undefined);
-            },
-            children: item.label
-          }, item.key))
+            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, {})]
+            });
+          })
         })]
       })]
     })

package/dist-src/avatar/AvatarOverrides.js

@@ -12,7 +12,7 @@ export function overrideAvatar(theme) {
       }
     }),
     colorDefault: {
-      color: Color.Grey300,
+      color: Color.Dark300,
       backgroundColor: Color.Silver300
     }
   };

package/dist-src/button/ButtonOverrides.js

@@ -189,7 +189,7 @@ export function overrideButton(theme) {
       '&[data-color="success"]': outlinedVariant(Color.Green300, Color.Green300, Color.Green100, Color.Green100, Color.Green300, Color.Green300, Color.Green100, Color.Green50, Color.Green300, Color.White),
       '&[data-color="white"]': outlinedVariant(Color.White, Color.White50, Color.White50, Color.White40, Color.White, Color.White50, Color.White40, Color.White10, Color.White50, Color.Transparent)
     },
-    outlinedPrimary: outlinedVariant(Color.Grey500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Grey200, Color.White),
+    outlinedPrimary: outlinedVariant(Color.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
     outlinedSizeSmall: {
       padding: undefined,
       fontSize: undefined

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

@@ -24,7 +24,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: Color.Grey200,
+    color: Color.Dark200,
     borderColor: Color.Silver500,
     backgroundColor: Color.Silver100
   },

package/dist-src/checkbox/CheckboxOverrides.js

@@ -45,7 +45,7 @@ export function overrideCheckbox(theme) {
   };
   theme.overrides.MuiCheckbox = {
     root: {
-      color: Color.Grey100,
+      color: Color.Dark100,
       marginTop: theme.spacing(-0.625),
       marginBottom: theme.spacing(-0.625)
     },
@@ -54,7 +54,7 @@ export function overrideCheckbox(theme) {
         color: Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: Color.Grey100
+        color: Color.Dark100
       }
     }
   };

package/dist-src/chip/ChipOverrides.js

@@ -25,7 +25,7 @@ export function overrideChip(theme) {
       backgroundColor: Color.Silver200,
       '&$disabled': {
         opacity: undefined,
-        color: Color.Grey100
+        color: Color.Dark100
       }
     }),
     sizeSmall: {
@@ -71,7 +71,7 @@ export function overrideChip(theme) {
       },
       '& > svg': {
         borderRadius: '50%',
-        color: Color.Grey200,
+        color: Color.Dark200,
         fontSize: '1em'
       }
     },
@@ -86,7 +86,7 @@ export function overrideChip(theme) {
       }
     },
     icon: {
-      color: Color.Grey100,
+      color: Color.Dark100,
       fontSize: '1em',
       marginRight: undefined
     },

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

@@ -37,7 +37,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
-      color: Color.Grey100,
+      color: Color.Dark100,
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2)

package/dist-src/dialog/DialogOverrides.js

@@ -6,6 +6,14 @@ export 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 = {

package/dist-src/dropdown-button/DropdownButton.js

@@ -0,0 +1,114 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["MenuListProps", "ButtonGroupProps", "children", "isLoading", "onClick", "label"];
+import { ButtonGroup, MenuList, Popover } from '@material-ui/core';
+import * as React from 'react';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Color, mergeRefs, useUID } from "../index.js";
+import { Button } from "../button/Button.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+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);
+});
+export var DropdownButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var _anchorRef$current2;
+
+  var {
+    MenuListProps,
+    ButtonGroupProps,
+    children,
+    isLoading,
+    onClick,
+    label
+  } = _ref2,
+      buttonProps = _objectWithoutProperties(_ref2, _excluded);
+
+  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__*/_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";
+export default DropdownButton;

package/dist-src/icon-button/IconButtonOverrides.js

@@ -2,7 +2,7 @@ import { Color } from "../theme/Color.js";
 export function overrideIconButton(theme) {
   theme.overrides.MuiIconButton = {
     root: {
-      color: Color.Grey100,
+      color: Color.Dark100,
       backgroundColor: Color.Transparent,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.short
@@ -11,10 +11,10 @@ export function overrideIconButton(theme) {
         backgroundColor: Color.Transparent
       },
       '&:active': {
-        color: Color.Grey500
+        color: Color.Dark500
       },
       '&:hover ': {
-        color: Color.Grey300
+        color: Color.Dark300
       },
       '&:focus': {
         backgroundColor: Color.Silver400

package/dist-src/index.js

@@ -11,6 +11,7 @@ export * from "./drawer/DrawerActions.js";
 export * from "./drawer/DrawerContent.js";
 export * from "./drawer/DrawerList.js";
 export * from "./drawer/DrawerTitle.js";
+export * from "./dropdown-button/DropdownButton.js";
 export * from "./grid/GridStack.js";
 export * from "./grid/InlineGrid.js";
 export * from "./info-card/InfoCard.js";

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

@@ -6,18 +6,8 @@ import { Card, CardContent } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
+import { assignRef } from "../utils/mergeRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-
-function assignRef(ref, value) {
-  if (ref) {
-    if (typeof ref === 'object') {
-      ref.current = value;
-    } else {
-      ref(value);
-    }
-  }
-}
-
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {
     '&$fullWidth': {

package/dist-src/pagination/PaginationOverrides.js

@@ -3,7 +3,7 @@ export function overridePagination(theme) {
   var props = {};
   var overrides = {
     root: {
-      color: Color.Grey400
+      color: Color.Dark400
     },
     page: {
       '&:hover': {
@@ -20,13 +20,13 @@ export function overridePagination(theme) {
           backgroundColor: Color.Silver400
         },
         '&$disabled': {
-          color: Color.Grey100,
+          color: Color.Dark100,
           backgroundColor: Color.Silver400
         }
       },
       '&$disabled': {
         opacity: undefined,
-        color: Color.Grey100
+        color: Color.Dark100
       }
     }
   }; // Remove `Object.assign` after official release of `PaginationItem`.

package/dist-src/radio/RadioOverrides.js

@@ -31,7 +31,7 @@ export function overrideRadio(theme) {
   };
   theme.overrides.MuiRadio = {
     root: {
-      color: Color.Grey100,
+      color: Color.Dark100,
       marginTop: theme.spacing(-0.625),
       marginBottom: theme.spacing(-0.625)
     },
@@ -40,7 +40,7 @@ export function overrideRadio(theme) {
         color: Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: Color.Grey100
+        color: Color.Dark100
       }
     }
   };

package/dist-src/snackbar/SnackbarContent.js

@@ -14,7 +14,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {
     color: Color.White,
-    backgroundColor: Color.Grey500,
+    backgroundColor: Color.Dark500,
     '&$variantError': {
       color: Color.White,
       backgroundColor: Color.Red500

package/dist-src/svg-icon/SvgIconOverrides.js

@@ -19,7 +19,7 @@ export function overrideSvgIcon(theme) {
       fontSize: 'var(--mui-svg-icon-size, 32px)'
     },
     colorAction: {
-      color: Color.Grey100
+      color: Color.Dark100
     }
   };
 }

package/dist-src/switch/SwitchOverrides.js

@@ -77,7 +77,7 @@ export function overrideSwitch(theme) {
         backgroundColor: Color.Blue100
       },
       '&:hover + $track': {
-        backgroundColor: Color.Grey100
+        backgroundColor: Color.Dark100
       },
       '&.Mui-focusVisible + $track': {
         boxShadow: "0 0 0 3px ".concat(Color.Blue100)

package/dist-src/tabs/TabsOverrides.js

@@ -12,7 +12,7 @@ export function overrideTabs(theme) {
     },
     scrollButtons: {
       opacity: 1,
-      color: Color.Grey100,
+      color: Color.Dark100,
       width: theme.spacing(4),
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.short
@@ -32,7 +32,7 @@ export function overrideTabs(theme) {
       }
     }),
     textColorPrimary: {
-      color: Color.Grey500,
+      color: Color.Dark500,
       '&:hover, &:focus': {
         color: Color.Blue300
       }

package/dist-src/tag/Tag.js

@@ -17,7 +17,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
   },
   variantSubtle: {
     '&$colorGrey': {
-      color: Color.Grey300,
+      color: Color.Dark300,
       backgroundColor: Color.Silver200
     },
     '&$colorBlue': {
@@ -48,7 +48,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
   variantBold: {
     color: Color.White,
     '&$colorGrey': {
-      backgroundColor: Color.Grey300
+      backgroundColor: Color.Dark300
     },
     '&$colorBlue': {
       backgroundColor: Color.Blue500

package/dist-src/text-field/TextFieldOverrides.js

@@ -21,7 +21,7 @@ export function overrideTextField(theme) {
   };
   theme.overrides.MuiFormLabel = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: Color.Grey400,
+      color: Color.Dark400,
       '&$error': {
         color: undefined
       },
@@ -116,7 +116,7 @@ export function overrideTextField(theme) {
     icon: {
       top: 'calc(50% - 0.5em)',
       '$disabled &': {
-        color: Color.Grey100
+        color: Color.Dark100
       },
       fontSize: theme.spacing(3),
       [sm]: {

package/dist-src/theme/Color.js

@@ -17,6 +17,12 @@ export var Color;
   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";

package/dist-src/theme/ThemeProvider.js

@@ -50,10 +50,10 @@ function createSuperDispatchTheme() {
         disabled: Color.Silver400
       },
       text: {
-        primary: Color.Grey500,
-        secondary: Color.Grey200,
-        hint: Color.Grey100,
-        disabled: Color.Grey100
+        primary: Color.Dark500,
+        secondary: Color.Dark200,
+        hint: Color.Dark100,
+        disabled: Color.Dark100
       },
       divider: Color.Silver400
     },

package/dist-src/tooltip/TooltipOverrides.js

@@ -7,7 +7,7 @@ export function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: Color.Grey400
+      backgroundColor: Color.Dark400
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -32,7 +32,7 @@ export function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: Color.Grey400,
+      color: Color.Dark400,
       fontSize: theme.spacing(1)
     }
   };

package/dist-src/utils/mergeRefs.js

@@ -5,13 +5,16 @@ export function mergeRefs() {
 
   return node => {
     refs.forEach(ref => {
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-      }
+      assignRef(ref, node);
     });
   };
+}
+export function assignRef(ref, value) {
+  if (ref) {
+    if (typeof ref === 'function') {
+      ref(value);
+    } else {
+      ref.current = value;
+    }
+  }
 }

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, GridProps, CardClassKey, CardProps, CardContentProps, 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, RadioProps, RadioGroupProps, SnackbarContentProps as SnackbarContentProps$1, SnackbarContentClassKey as SnackbarContentClassKey$1, SnackbarProps as SnackbarProps$1, Theme } from '@material-ui/core';
 import { RefAttributes, ForwardRefExoticComponent, Key, ReactNode, MouseEvent, ButtonHTMLAttributes, Ref, ElementType, HTMLAttributes, ReactElement, ConsumerProps } from 'react';
 import { ClassNameMap } from '@material-ui/styles';
 import { Property } from 'csstype';
@@ -15,9 +15,16 @@ interface ButtonProps extends RefAttributes<HTMLButtonElement>, Omit<ButtonProps
 }
 declare const Button: ForwardRefExoticComponent<ButtonProps>;
 
+interface AdaptiveToolbarDropdownItem {
+    key: Key;
+    label: ReactNode;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
 interface AdaptiveToolbarItem {
     key: Key;
+    groupKey?: Key;
     label: ReactNode;
+    dropdown?: AdaptiveToolbarDropdownItem[];
     onClick?: (event: MouseEvent<HTMLElement>) => void;
     ButtonProps?: Omit<ButtonProps, 'type' | 'onClick'>;
 }
@@ -168,6 +175,14 @@ interface DrawerTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'
 }
 declare const DrawerTitle: ForwardRefExoticComponent<DrawerTitleProps & RefAttributes<HTMLDivElement>>;
 
+interface DropdownButtonProps extends Omit<ButtonProps, 'children'> {
+    label?: ReactNode;
+    children: ReactNode;
+    MenuListProps?: Omit<MenuListProps, 'id'>;
+    ButtonGroupProps?: ButtonGroupProps;
+}
+declare const DropdownButton: ForwardRefExoticComponent<Pick<DropdownButtonProps, "className" | "style" | "classes" | "innerRef" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "label" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "disableFocusRipple" | "href" | "size" | "variant" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "rel" | "target" | "isActive" | "isLoading" | "MenuListProps" | "ButtonGroupProps"> & RefAttributes<HTMLButtonElement>>;
+
 interface GridStackProps extends RefAttributes<HTMLDivElement>, Pick<GridProps, 'style' | 'className' | 'children' | 'spacing' | 'alignItems'> {
 }
 /**
@@ -293,12 +308,24 @@ declare enum Color {
     Black = "#000",
     Black50 = "rgba(0, 0, 0, 0.5)",
     Black20 = "rgba(0, 0, 0, 0.2)",
+    /**@deprecated Use Dark100 */
     Grey100 = "#8F949E",
+    /**@deprecated Use Dark200 */
     Grey200 = "#6A707C",
+    /**@deprecated Use Dark300 */
     Grey300 = "#5B6371",
+    /**@deprecated Use Dark400 */
     Grey400 = "#323C4E",
+    /**@deprecated Use Dark450 */
     Grey450 = "#222F44",
+    /**@deprecated Use Dark500 */
     Grey500 = "#192334",
+    Dark100 = "#8F949E",
+    Dark200 = "#6A707C",
+    Dark300 = "#5B6371",
+    Dark400 = "#323C4E",
+    Dark450 = "#222F44",
+    Dark500 = "#192334",
     Silver100 = "#F6F7F8",
     Silver200 = "#F3F5F8",
     Silver300 = "#E8ECF0",
@@ -371,6 +398,7 @@ declare const Tiles: ForwardRefExoticComponent<TilesProps & RefAttributes<HTMLDi
 declare function isEmptyReactNode(node: ReactNode): node is null | undefined | boolean | string;
 
 declare function mergeRefs<T>(...refs: Array<null | undefined | Ref<T>>): (node: T) => void;
+declare function assignRef<T>(ref: Ref<T> | undefined, value: T): void;
 
 declare function renderChildren(node: ReactNode): null | ReactElement;
 
@@ -395,4 +423,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
 }
 declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
 
-export { AdaptiveToolbar, AdaptiveToolbarItem, AdaptiveToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, ElementVisibility, GridStack, GridStackProps, HorizontalAlign, InfoCard, InfoCardClassKey, InfoCardProps, Inline, InlineGrid, InlineGridProps, InlineProps, NegativeSpaceProp, OverflowText, OverflowTextProps, PartialResponsivePropRecord, RadioField, 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, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
+export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, GridStack, GridStackProps, HorizontalAlign, InfoCard, InfoCardClassKey, InfoCardProps, Inline, InlineGrid, InlineGridProps, InlineProps, NegativeSpaceProp, OverflowText, OverflowTextProps, PartialResponsivePropRecord, RadioField, 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, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };