@superdispatch/ui 0.25.1 → 0.26.0

package/dist-web/index.js

@@ -16,15 +16,14 @@ import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
 var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
 var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    size,
-    children,
-    disabled,
-    isActive,
-    isLoading,
-    color = 'primary'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+      size,
+      children,
+      disabled,
+      isActive,
+      isLoading,
+      color = 'primary'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(Button$1, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     size: size,
@@ -44,7 +43,6 @@ var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
 
 var _excluded$1 = ["MenuListProps", "ButtonGroupProps", "children", "isLoading", "onClick", "label"];
-
 function CaretDownIcon() {
   return /*#__PURE__*/jsx("svg", {
     viewBox: "0 0 8 4",
@@ -54,7 +52,6 @@ function CaretDownIcon() {
     })
   });
 }
-
 var CaretButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "DropdownButton__CaretButton",
   componentId: "SD__sc-8l84jm-0"
@@ -66,40 +63,32 @@ var CaretButton = /*#__PURE__*/styled(Button).withConfig({
 });
 var DropdownButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var _anchorRef$current2;
-
   var {
-    MenuListProps,
-    ButtonGroupProps,
-    children,
-    isLoading,
-    onClick,
-    label
-  } = _ref2,
-      buttonProps = _objectWithoutProperties(_ref2, _excluded$1);
-
+      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),
@@ -152,7 +141,6 @@ function useResizeObserver(node, observer) {
     if (!node) {
       return;
     }
-
     var resizeObserver = new ResizeObserver(() => {
       handler(node);
     });
@@ -174,10 +162,9 @@ var useStyles = /*#__PURE__*/makeStyles({
 });
 var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    items
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$2);
-
+      items
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var styles = useStyles();
   var itemNodes = useRef([]);
   var optionsButtonRef = useRef(null);
@@ -187,7 +174,6 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var [rootNode, setRootNode] = useState(null);
   useResizeObserver(rootNode, node => {
     var _optionsButtonRef$cur;
-
     var rootRect = node.getBoundingClientRect();
     var rootWidth = rootRect.left + rootRect.width;
     var optionsButtonRect = (_optionsButtonRef$cur = optionsButtonRef.current) === null || _optionsButtonRef$cur === void 0 ? void 0 : _optionsButtonRef$cur.getBoundingClientRect();
@@ -197,21 +183,19 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     var hiddenIdx = mountedNodes.findIndex((itemNode, idx) => {
       itemNode.removeAttribute('hidden');
       var itemRect = itemNode.getBoundingClientRect();
-      var itemRightPosition = itemRect.left + itemRect.width; // Ignore options button width when checking last item.
+      var itemRightPosition = itemRect.left + itemRect.width;
 
+      // Ignore options button width when checking last item.
       if (idx === mountedNodes.length - 1) {
         return itemRightPosition > rootWidth;
       }
-
       return itemRightPosition > maxRightPosition;
     });
-
     if (hiddenIdx !== -1) {
       mountedNodes.slice(hiddenIdx).forEach(itemNode => {
         itemNode.setAttribute('hidden', 'true');
       });
     }
-
     setFirstHiddenIdx(hiddenIdx);
   });
   return /*#__PURE__*/jsx(Toolbar, _objectSpread(_objectSpread({}, props), {}, {
@@ -275,13 +259,11 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
           },
           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);
                 },
@@ -289,7 +271,6 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
               }, 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);
                 },
@@ -308,7 +289,6 @@ 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);
@@ -333,12 +313,10 @@ var useStyles$1 = /*#__PURE__*/makeStyles({
 }, {
   name: 'SD-AdaptiveVerticalToolbar'
 });
-
 var defaultMoreElement = /*#__PURE__*/jsx(Button, {
   type: "button",
   children: /*#__PURE__*/jsx(MoreHoriz, {})
 });
-
 var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     items,
@@ -356,7 +334,6 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var [rootNode, setRootNode] = useState(null);
   useResizeObserver(rootNode, node => {
     var _optionsButtonRef$cur;
-
     var rootRect = node.getBoundingClientRect();
     var rootHeight = rootRect.bottom;
     var optionsButtonRect = (_optionsButtonRef$cur = optionsButtonRef.current) === null || _optionsButtonRef$cur === void 0 ? void 0 : _optionsButtonRef$cur.getBoundingClientRect();
@@ -365,21 +342,19 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     var mountedNodes = itemNodes.current.filter(x => x != null);
     var hiddenIdx = mountedNodes.findIndex((itemNode, idx) => {
       itemNode.removeAttribute('hidden');
-      var itemRect = itemNode.getBoundingClientRect(); // Ignore options button height when checking last item.
+      var itemRect = itemNode.getBoundingClientRect();
 
+      // Ignore options button height when checking last item.
       if (idx === mountedNodes.length - 1) {
         return itemRect.bottom > rootHeight;
       }
-
       return itemRect.bottom > maxBottomPosition;
     });
-
     if (hiddenIdx !== -1) {
       mountedNodes.slice(hiddenIdx).forEach(itemNode => {
         itemNode.setAttribute('hidden', 'true');
       });
     }
-
     setFirstHiddenIdx(hiddenIdx);
   });
   return /*#__PURE__*/jsxs(Grid, {
@@ -419,7 +394,6 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
           return [/*#__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);
             },
@@ -433,7 +407,6 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName = "AdaptiveVerticalToolbar";
 
 var Color;
-
 (function (Color) {
   Color["White"] = "#fff";
   Color["White50"] = "rgba(255, 255, 255, 0.5)";
@@ -513,13 +486,12 @@ var Color;
   Color["Yellow300"] = "#E8671C";
   Color["Yellow500"] = "#B84807";
 })(Color || (Color = {}));
-
 function isColorProp(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color, name);
 }
 
 var _excluded$3 = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
-    _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
+  _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
 var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
   return {
@@ -614,35 +586,33 @@ var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
 });
 var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    size,
-    icon,
-    isLoading = false,
-    classes,
-    disabled = false,
-    avatarRef,
-    className,
-    alt,
-    imgProps,
-    sizes,
-    src,
-    srcSet,
-    variant,
-    children
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-
+      size,
+      icon,
+      isLoading = false,
+      classes,
+      disabled = false,
+      avatarRef,
+      className,
+      alt,
+      imgProps,
+      sizes,
+      src,
+      srcSet,
+      variant,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var _useStyles = useStyles$2({
-    classes
-  }),
-      {
-    button: buttonClassName,
-    overlay: overlayClassName,
-    progress: progressClassName,
-    withIcon: withIconClassName,
-    sizeLarge: sizeLargeClassName
-  } = _useStyles,
-      avatarClasses = _objectWithoutProperties(_useStyles, _excluded2);
-
+      classes
+    }),
+    {
+      button: buttonClassName,
+      overlay: overlayClassName,
+      progress: progressClassName,
+      withIcon: withIconClassName,
+      sizeLarge: sizeLargeClassName
+    } = _useStyles,
+    avatarClasses = _objectWithoutProperties(_useStyles, _excluded2);
   return /*#__PURE__*/jsxs(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "aria-busy": isLoading,
@@ -745,18 +715,17 @@ var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
 });
 var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    hint,
-    size,
-    error,
-    classes,
-    className,
-    children,
-    endIcon,
-    startIcon,
-    disabled
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-
+      hint,
+      size,
+      error,
+      classes,
+      className,
+      children,
+      endIcon,
+      startIcon,
+      disabled
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var styles = useStyles$3({
     classes
   });
@@ -809,16 +778,15 @@ var FormHelperText = /*#__PURE__*/styled(FormHelperText$4).withConfig({
 })(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    label,
-    error,
-    checked,
-    onBlur,
-    onChange,
-    helperText,
-    FormControlLabelProps: formControlLabelProps
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$5);
-
+      label,
+      error,
+      checked,
+      onBlur,
+      onChange,
+      helperText,
+      FormControlLabelProps: formControlLabelProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$5);
   return /*#__PURE__*/jsxs(FormControl, {
     error: error,
     children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
@@ -849,15 +817,14 @@ var FormHelperText$1 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
 })(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    FormGroupProps: formGroupProps,
-    label,
-    FormLabelProps: formLabelProps,
-    helperText,
-    FormHelperTextProps: formHelperTextProps,
-    children
-  } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$6);
-
+      FormGroupProps: formGroupProps,
+      label,
+      FormLabelProps: formLabelProps,
+      helperText,
+      FormHelperTextProps: formHelperTextProps,
+      children
+    } = _ref,
+    formControlProps = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/jsxs(FormControl$2, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
     children: [!!label && /*#__PURE__*/jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
@@ -874,11 +841,9 @@ var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") CheckboxGroupField.displayName = "CheckboxGroupField";
 
 var Context = /*#__PURE__*/createContext({});
-
 function useBreakpoint(breakpoint) {
   return useMediaQuery(theme => theme.breakpoints.only(breakpoint));
 }
-
 function ResponsiveContextProvider(_ref) {
   var {
     children,
@@ -904,7 +869,6 @@ function useResponsiveContext() {
 
 function parseResponsiveProp(prop) {
   var _tablet, _desktop;
-
   if (typeof prop != 'object') return [prop, prop, prop];
   var [mobile, tablet, desktop] = prop;
   (_tablet = tablet) !== null && _tablet !== void 0 ? _tablet : tablet = mobile;
@@ -946,44 +910,32 @@ function useResponsivePropRecord(prop) {
 function computeFlexBasis(scale) {
   return "".concat(scale * 100, "%");
 }
-
 function flexBasisMixin(width) {
   switch (width) {
     case '1/2':
       return computeFlexBasis(1 / 2);
-
     case '1/3':
       return computeFlexBasis(1 / 3);
-
     case '2/3':
       return computeFlexBasis(2 / 3);
-
     case '1/4':
       return computeFlexBasis(1 / 4);
-
     case '3/4':
       return computeFlexBasis(3 / 4);
-
     case '1/5':
       return computeFlexBasis(1 / 5);
-
     case '2/5':
       return computeFlexBasis(2 / 5);
-
     case '3/5':
       return computeFlexBasis(3 / 5);
-
     case '4/5':
       return computeFlexBasis(4 / 5);
   }
-
   return 'auto';
 }
-
 function columnRootMixin(width) {
   return css(["flex-grow:0;flex-basis:", ";width:", ";flex-shrink:", ";"], flexBasisMixin(width), width === 'fluid' ? '100%' : 'auto', width === 'fluid' || width === 'adaptive' ? 1 : 0);
 }
-
 var ColumnRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "Column__ColumnRoot",
   componentId: "SD__sc-m9n6o6-0"
@@ -1020,10 +972,8 @@ function parseAlignProp(align) {
     case 'left':
     default:
       return 'initial';
-
     case 'center':
       return 'center';
-
     case 'right':
     case 'bottom':
       return 'flex-end';
@@ -1039,25 +989,18 @@ function parseSpaceProp(prop) {
     case 'none':
     default:
       return 0;
-
     case 'xxsmall':
       return 4;
-
     case 'xsmall':
       return 8;
-
     case 'small':
       return 16;
-
     case 'medium':
       return 24;
-
     case 'large':
       return 32;
-
     case 'xlarge':
       return 40;
-
     case 'xxlarge':
       return 48;
   }
@@ -1067,7 +1010,6 @@ function columnsRootMixin(align, spaceProp, isReversed, isCollapsed) {
   var space = parseSpaceProp(spaceProp);
   return css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
 }
-
 var Columns = /*#__PURE__*/styled.div.withConfig({
   displayName: "Columns",
   componentId: "SD__sc-1a73118-0"
@@ -1089,9 +1031,9 @@ var Columns = /*#__PURE__*/styled.div.withConfig({
 function renderChildren(node) {
   if (node == null || typeof node == 'boolean') {
     return null;
-  } // Workaround for https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
-
+  }
 
+  // Workaround for https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
   return node;
 }
 
@@ -1111,7 +1053,6 @@ function useVisibilityObserver(node) {
       setState('undetermined');
       return;
     }
-
     var observer = new IntersectionObserver(_ref => {
       var [entry] = _ref;
       setState(entry !== null && entry !== void 0 && entry.isIntersecting && document.visibilityState === 'visible' ? 'visible' : 'invisible');
@@ -1128,11 +1069,10 @@ function useVisibilityObserver(node) {
 }
 function VisibilityObserver(_ref2) {
   var {
-    render,
-    onChange
-  } = _ref2,
-      options = _objectWithoutProperties(_ref2, _excluded$7);
-
+      render,
+      onChange
+    } = _ref2,
+    options = _objectWithoutProperties(_ref2, _excluded$7);
   var [node, setNode] = useState(null);
   var visibility = useVisibilityObserver(node, options);
   var children = render({
@@ -1146,7 +1086,7 @@ function VisibilityObserver(_ref2) {
 }
 
 var _excluded$8 = ["title", "enterDelay"],
-    _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
+  _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
 var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     marginBottom: -1,
@@ -1168,18 +1108,17 @@ var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
 });
 var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
   var {
-    onClick: _onClick,
-    children,
-    className,
-    disableUnderline,
-    TooltipProps: {
-      title = children,
-      enterDelay = 1000
-    } = {}
-  } = _ref,
-      tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$8),
-      props = _objectWithoutProperties(_ref, _excluded2$1);
-
+      onClick: _onClick,
+      children,
+      className,
+      disableUnderline,
+      TooltipProps: {
+        title = children,
+        enterDelay = 1000
+      } = {}
+    } = _ref,
+    tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$8),
+    props = _objectWithoutProperties(_ref, _excluded2$1);
   var [isOpen, setIsOpen] = useState(false);
   var styles = useStyles$4();
   return /*#__PURE__*/jsx(VisibilityObserver, {
@@ -1230,7 +1169,6 @@ function useUID(defaultID) {
 }
 
 var _excluded$9 = ["size"];
-
 function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   return {
     '& > $list, & > $item': {
@@ -1243,7 +1181,6 @@ function sizeVariant(theme, mobileSpacing, desktopSpacing) {
     }
   };
 }
-
 var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
   list: sizeVariant(theme, 2, 1),
   listSmall: sizeVariant(theme, 1, 0.5),
@@ -1265,16 +1202,17 @@ var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
   }
 }), {
   name: 'SD-DescriptionList'
-}); //
+});
+
+//
 // DescriptionList
 //
 
 var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    size
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$9);
-
+      size
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var styles = useStyles$5();
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
@@ -1284,14 +1222,14 @@ var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
       'large': styles.listLarge
     }[size])
   }));
-}); //
+});
+
+//
 // DescriptionListItem
 //
-
 if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";
 var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var _ref3, _contentTypographyPro, _contentTypographyPro2;
-
   var {
     inset,
     icon = inset ? /*#__PURE__*/jsx(SvgIcon, {}) : null,
@@ -1360,11 +1298,10 @@ var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
 });
 var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   var {
-    children,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$a);
-
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var styles = useStyles$6();
   return /*#__PURE__*/jsx(VisibilityObserver, {
     render: _ref2 => {
@@ -1404,10 +1341,9 @@ var useStyles$7 = /*#__PURE__*/makeStyles(theme => ({
 });
 var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$b);
-
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var styles = useStyles$7();
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
@@ -1417,7 +1353,6 @@ var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";
 
 var _excluded$c = ["className"];
-
 function listItemMixins(theme, space) {
   return {
     '& .MuiListItem-gutters': {
@@ -1435,7 +1370,6 @@ function listItemMixins(theme, space) {
     }
   };
 }
-
 var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
   root: _objectSpread(_objectSpread({
     maxWidth: '100%'
@@ -1447,10 +1381,9 @@ var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
 });
 var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
-
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var styles = useStyles$8();
   return /*#__PURE__*/jsx(List, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
@@ -1501,16 +1434,15 @@ var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
 });
 var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   var {
-    title,
-    titleTypographyProps,
-    subtitle,
-    subtitleTypographyProps,
-    startAction,
-    endAction,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$d);
-
+      title,
+      titleTypographyProps,
+      subtitle,
+      subtitleTypographyProps,
+      startAction,
+      endAction,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var styles = useStyles$9();
   return /*#__PURE__*/jsx(VisibilityObserver, {
     render: _ref2 => {
@@ -1564,17 +1496,15 @@ var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
 if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";
 
 var _excluded$e = ["children", "alignItems"];
-
 /**
  * @deprecated in favor of `Stack`.
  */
 var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    children,
-    alignItems = 'stretch'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
-
+      children,
+      alignItems = 'stretch'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var items = Children.toArray(children);
   return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
@@ -1593,19 +1523,17 @@ var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") GridStack.displayName = "GridStack";
 
 var _excluded$f = ["children", "wrap", "justify", "alignItems"];
-
 /**
  * @deprecated in favor of `Inline` component.
  */
 var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    children,
-    wrap = 'wrap',
-    justify = 'flex-start',
-    alignItems = 'flex-start'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
-
+      children,
+      wrap = 'wrap',
+      justify = 'flex-start',
+      alignItems = 'flex-start'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var items = Children.toArray(children);
   return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
@@ -1623,7 +1551,7 @@ var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";
 
 var _excluded$g = ["size", "square", "classes", "children", "className", "CardContentProps"],
-    _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
+  _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
 var useStyles$a = /*#__PURE__*/makeStyles(theme => ({
   root: {
     '&$fullWidth': {
@@ -1647,25 +1575,23 @@ var useStyles$a = /*#__PURE__*/makeStyles(theme => ({
 });
 var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
   var {
-    size,
-    square,
-    classes,
-    children,
-    className,
-    CardContentProps: cardContentProps = {}
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
-
+      size,
+      square,
+      classes,
+      children,
+      className,
+      CardContentProps: cardContentProps = {}
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var _useStyles = useStyles$a({
-    classes
-  }),
-      {
-    content: contentClassName,
-    sizeLarge: sizeLargeClassName,
-    fullWidth: fullWidthClassName
-  } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$2);
-
+      classes
+    }),
+    {
+      content: contentClassName,
+      sizeLarge: sizeLargeClassName,
+      fullWidth: fullWidthClassName
+    } = _useStyles,
+    styles = _objectWithoutProperties(_useStyles, _excluded2$2);
   var [rootNode, setRootNode] = 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;
@@ -1691,17 +1617,16 @@ var Root = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;"]);
 var InfoTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    children,
-    iconButtonProps,
-    fontSize = 'small',
-    TextProps,
-    title,
-    isOpen,
-    onClick,
-    onClose
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$h);
-
+      children,
+      iconButtonProps,
+      fontSize = 'small',
+      TextProps,
+      title,
+      isOpen,
+      onClick,
+      onClose
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var tooltip = /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({
     open: isOpen,
     title: title,
@@ -1721,7 +1646,6 @@ var InfoTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
       })
     }))
   }));
-
   if (!children) return tooltip;
   return /*#__PURE__*/jsxs(Root, {
     children: [/*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, TextProps), {}, {
@@ -1735,7 +1659,6 @@ function inlineRootMixin(spaceProp, noWrap, verticalAlign, horizontalAlign) {
   var space = parseSpaceProp(spaceProp);
   return css(["&:before{margin-top:", "px;}& > div{display:flex;margin-left:-", "px;flex-wrap:", ";align-items:", ";justify-content:", ";& > div{&:empty{display:none;}min-width:0;flex-shrink:0;max-width:100%;margin-top:", "px;margin-left:", "px;}}"], -space - 1, space, noWrap ? 'nowrap' : 'wrap', parseAlignProp(verticalAlign), parseAlignProp(horizontalAlign), space, space);
 }
-
 var InlineRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "Inline__InlineRoot",
   componentId: "SD__sc-13du4wm-0"
@@ -1781,19 +1704,17 @@ var Inline = /*#__PURE__*/forwardRef((_ref2, ref) => {
 if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";
 
 var _excluded$i = ["value", "inputRef", "onChange", "valueIsNumericString", "thousandSeparator", "disableValueParsing"],
-    _excluded2$3 = ["id", "InputProps"];
-
+  _excluded2$3 = ["id", "InputProps"];
 function NumberInputComponent(_ref) {
   var {
-    value,
-    inputRef,
-    onChange,
-    valueIsNumericString = true,
-    thousandSeparator = true,
-    disableValueParsing
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
-
+      value,
+      inputRef,
+      onChange,
+      valueIsNumericString = true,
+      thousandSeparator = true,
+      disableValueParsing
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/jsx(NumericFormat, _objectSpread(_objectSpread({}, props), {}, {
     value: value !== null && value !== void 0 ? value : '',
     inputMode: "decimal",
@@ -1802,29 +1723,25 @@ function NumberInputComponent(_ref) {
     thousandSeparator: thousandSeparator,
     allowedDecimalSeparators: ['.', ','],
     onValueChange: (values, sourceInfo) => {
-      var _values$floatValue;
-
-      var floatValue = (_values$floatValue = values.floatValue) !== null && _values$floatValue !== void 0 ? _values$floatValue : null;
+      var inputValue = values.value;
       var {
         event
-      } = sourceInfo; // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-
+      } = sourceInfo;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, event), {}, {
         target: _objectSpread(_objectSpread({}, event === null || event === void 0 ? void 0 : event.target), {}, {
-          value: disableValueParsing ? values.value : floatValue
+          value: inputValue
         })
       }));
     }
   }));
 }
-
 var NumberField = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
-    id,
-    InputProps
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$3);
-
+      id,
+      InputProps
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2$3);
   var uid = useUID(id);
   return /*#__PURE__*/jsx(TextField, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
@@ -1840,19 +1757,19 @@ NumberField.displayName = 'NumberField';
 var _excluded$j = ["id", "value", "onChange", "inputMode", "valueIsNumericString", "onValueChange"];
 var PatternField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    id,
-    value,
-    onChange,
-    inputMode = 'decimal',
-    valueIsNumericString = true,
-    onValueChange: _onValueChange
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
-
+      id,
+      value,
+      onChange,
+      inputMode = 'decimal',
+      valueIsNumericString = true,
+      onValueChange: _onValueChange
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var uid = useUID(id);
   return /*#__PURE__*/jsx(PatternFormat, _objectSpread(_objectSpread({}, props), {}, {
     id: uid,
-    value: value !== null && value !== void 0 ? value : '' // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    value: value !== null && value !== void 0 ? value : ''
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     ,
     inputMode: inputMode,
     getInputRef: ref,
@@ -1885,16 +1802,15 @@ var FormHelperText$2 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
 })(["color:", ";margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    label,
-    error,
-    checked,
-    onBlur,
-    onChange,
-    helperText,
-    FormControlLabelProps: formControlLabelProps
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
-
+      label,
+      error,
+      checked,
+      onBlur,
+      onChange,
+      helperText,
+      FormControlLabelProps: formControlLabelProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/jsxs(FormControl$1, {
     error: error,
     children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
@@ -1941,17 +1857,16 @@ var Caption = /*#__PURE__*/styled.div.withConfig({
 })(["padding-left:30px;"]);
 var RadioFieldCard = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
-    name,
-    value,
-    label,
-    caption,
-    disabled,
-    icon,
-    checked,
-    onChange
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded$l);
-
+      name,
+      value,
+      label,
+      caption,
+      disabled,
+      icon,
+      checked,
+      onChange
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded$l);
   return /*#__PURE__*/jsx(Card, {
     disabled: disabled,
     children: /*#__PURE__*/jsx(ClickableCard, _objectSpread(_objectSpread({
@@ -2003,18 +1918,17 @@ var FormHelperText$3 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
 })(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    name,
-    value = '',
-    onChange,
-    RadioGroupProps: radioGroupProps,
-    label,
-    FormLabelProps: formLabelProps,
-    helperText,
-    FormHelperTextProps: formHelperTextProps,
-    children
-  } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$m);
-
+      name,
+      value = '',
+      onChange,
+      RadioGroupProps: radioGroupProps,
+      label,
+      FormLabelProps: formLabelProps,
+      helperText,
+      FormHelperTextProps: formHelperTextProps,
+      children
+    } = _ref,
+    formControlProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsxs(FormControl$2, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
     children: [!!label && /*#__PURE__*/jsx(FormLabel$1, _objectSpread(_objectSpread({}, formLabelProps), {}, {
@@ -2038,11 +1952,9 @@ function useCollapseBreakpoint(collapseBreakpoint) {
   var {
     breakpoint = 'xs'
   } = useResponsiveContext();
-
   if (collapseBreakpoint == null) {
     return false;
   }
-
   var breakpointIDX = BREAKPOINTS.indexOf(breakpoint);
   var collapseBreakpointIDX = BREAKPOINTS.indexOf(collapseBreakpoint);
   return breakpointIDX < collapseBreakpointIDX;
@@ -2053,18 +1965,16 @@ function useMinBreakpoint(minBreakpoint) {
   var {
     breakpoint = 'xs'
   } = useResponsiveContext();
-
   if (minBreakpoint == null) {
     return false;
   }
-
   var breakpointIDX = BREAKPOINTS$1.indexOf(breakpoint);
   var minBreakpointIDX = BREAKPOINTS$1.indexOf(minBreakpoint);
   return minBreakpointIDX < breakpointIDX;
 }
 
 var _excluded$n = ["action", "children", "onClose", "className", "classes", "variant"],
-    _excluded2$4 = ["icon", "closeButton", "variantError", "variantSuccess"];
+  _excluded2$4 = ["icon", "closeButton", "variantError", "variantSuccess"];
 var PaddedContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "SnackbarContent__PaddedContent",
   componentId: "SD__sc-1jca4d5-0"
@@ -2114,26 +2024,24 @@ var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
 });
 var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    action,
-    children,
-    onClose,
-    className,
-    classes,
-    variant = 'default'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$n);
-
+      action,
+      children,
+      onClose,
+      className,
+      classes,
+      variant = 'default'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var _useStyles = useStyles$b({
-    classes
-  }),
-      {
-    icon,
-    closeButton,
-    variantError,
-    variantSuccess
-  } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$4);
-
+      classes
+    }),
+    {
+      icon,
+      closeButton,
+      variantError,
+      variantSuccess
+    } = _useStyles,
+    styles = _objectWithoutProperties(_useStyles, _excluded2$4);
   var Icon = variant === 'error' ? Error : variant === 'success' ? CheckCircle : undefined;
   return /*#__PURE__*/jsx(SnackbarContent$1, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
@@ -2174,32 +2082,28 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") SnackbarContent.displayName = "SnackbarContent";
 
 var _excluded$o = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
-
 function SlideTransition(props) {
   return /*#__PURE__*/jsx(Slide, _objectSpread(_objectSpread({}, props), {}, {
     direction: "up"
   }));
 }
-
 var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    open,
-    action,
-    variant,
-    onClose,
-    children,
-    ContentProps,
-    hasCloseButton = onClose != null,
-    TransitionComponent = SlideTransition
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
-
+      open,
+      action,
+      variant,
+      onClose,
+      children,
+      ContentProps,
+      hasCloseButton = onClose != null,
+      TransitionComponent = SlideTransition
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$o);
   function handleClose(reason) {
     if (reason !== 'clickaway') {
       onClose === null || onClose === void 0 ? void 0 : onClose(reason === 'timeout' ? 'timeout' : 'explicit');
     }
   }
-
   return /*#__PURE__*/jsx(Portal, {
     children: /*#__PURE__*/jsx(Snackbar$1, _objectSpread(_objectSpread({}, props), {}, {
       ref: ref,
@@ -2222,12 +2126,10 @@ var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") Snackbar.displayName = "Snackbar";
 
 var _excluded$p = ["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__*/createContext({
   clearStack: warnContext,
   addSnackbar: () => {
@@ -2259,16 +2161,16 @@ function SnackbarStackProvider(_ref2) {
   }, []);
   var addSnackbar = useCallback(function (message) {
     var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        {
-      onClose: _onClose,
-      variant,
-      key = variant !== 'error' ? // We don't want non error snackbars without key to pop back.
-      getNextTransientKey() : typeof message === 'string' ? message : Math.random(),
-      id = String(key),
-      autoHideDuration = 5000
-    } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$p);
-
+      {
+        onClose: _onClose,
+        variant,
+        key = variant !== 'error' ?
+        // We don't want non error snackbars without key to pop back.
+        getNextTransientKey() : typeof message === 'string' ? message : Math.random(),
+        id = String(key),
+        autoHideDuration = 5000
+      } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded$p);
     function removeSnackbar() {
       setStack(prev => {
         if (prev.has(key)) {
@@ -2276,26 +2178,22 @@ function SnackbarStackProvider(_ref2) {
           next.delete(key);
           return next;
         }
-
         return prev;
       });
     }
-
     setStack(prev => {
       var next = new Map(prev);
-
       for (var prevKey of prev.keys()) {
         // Ensure that we insert value to the end of the map.
         if (Object.is(key, prevKey)) {
           next.delete(key);
-        } // Ensure that transient snackbar will not pop back.
-
+        }
 
+        // Ensure that transient snackbar will not pop back.
         if (typeof prevKey == 'string' && prevKey.startsWith(TRANSIENT_KEY)) {
           next.delete(prevKey);
         }
       }
-
       return next.set(key, _objectSpread(_objectSpread({}, props), {}, {
         id,
         key,
@@ -2331,7 +2229,6 @@ function SnackbarStackProvider(_ref2) {
 function stackItemMixin(space, align) {
   return css(["flex-direction:column;align-items:", ";display:", ";&:empty{display:none;}&:not(:empty) ~ div{padding-top:", "px;}"], parseAlignProp(align), align === 'left' ? 'block' : 'flex', parseSpaceProp(space));
 }
-
 var StackRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "Stack__StackRoot",
   componentId: "SD__sc-qkml7c-0"
@@ -2439,17 +2336,16 @@ var useStyles$c = /*#__PURE__*/makeStyles(theme => ({
 });
 var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    color,
-    variant,
-    children,
-    classes,
-    className,
-    noWrap = true,
-    fontWeight = 'bold',
-    component = 'div'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$q);
-
+      color,
+      variant,
+      children,
+      classes,
+      className,
+      noWrap = true,
+      fontWeight = 'bold',
+      component = 'div'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var styles = useStyles$c({
     classes
   });
@@ -2484,8 +2380,9 @@ function overrideAppBar(theme) {
 }
 
 function overrideAutocomplete(theme) {
-  var sm = theme.breakpoints.up('sm'); // Remove `Object.assign` after official release of `Autocomplete`.
+  var sm = theme.breakpoints.up('sm');
 
+  // Remove `Object.assign` after official release of `Autocomplete`.
   Object.assign(theme.props, {
     MuiAutocomplete: {
       popupIcon: /*#__PURE__*/jsx(SvgIcon, {
@@ -2570,7 +2467,6 @@ function outlineShadow() {
   var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color.Transparent;
   return "0 0 0 ".concat(size, "px ").concat(color);
 }
-
 function textVariant(text, outline, background, progress) {
   return {
     color: text,
@@ -2596,12 +2492,10 @@ function textVariant(text, outline, background, progress) {
     }
   };
 }
-
 function outlinedBorder(borderColor) {
   var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color.Transparent;
   return "inset 0 0 0 1px ".concat(borderColor, ", 0 0 0 2px ").concat(outlineColor);
 }
-
 function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, activeText, activeBorder, activeOutline, activeBackground, progress, backgroundColor) {
   return {
     backgroundColor,
@@ -2632,7 +2526,6 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
     }
   };
 }
-
 function containedVariant(text, backgroundColor, outline, active, disabledText, disabledBackground) {
   return {
     color: text,
@@ -2654,7 +2547,6 @@ function containedVariant(text, backgroundColor, outline, active, disabledText,
     }
   };
 }
-
 function overrideButton(theme) {
   var sm = theme.breakpoints.up('sm');
   theme.props.MuiButton = {
@@ -3087,7 +2979,6 @@ function overrideIconButton(theme) {
 function line(color) {
   return "linear-gradient(to right, ".concat(color, " 0%, ").concat(color, " 100%)");
 }
-
 function overrideLink(theme) {
   theme.props.MuiLink = {
     underline: 'always',
@@ -3228,8 +3119,9 @@ function overridePagination(theme) {
         color: Color.Dark100
       }
     }
-  }; // Remove `Object.assign` after official release of `PaginationItem`.
+  };
 
+  // Remove `Object.assign` after official release of `PaginationItem`.
   Object.assign(theme.props, {
     MuiPaginationItem: props
   });
@@ -3308,6 +3200,13 @@ function overrideRadio(theme) {
 
 function overrideSnackbar(theme) {
   theme.overrides.MuiSnackbar = {
+    root: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      padding: theme.spacing(0),
+      background: 'transparent'
+    },
     anchorOriginBottomCenter: {
       left: 0,
       right: 0,
@@ -3944,40 +3843,31 @@ function createSuperDispatchTheme() {
   overridePreloader(theme);
   return theme;
 }
-
 var generateMaterialClassName = /*#__PURE__*/createGenerateClassName();
-
 function generateClassName(rule, sheet) {
   var {
     meta,
     link
   } = (sheet === null || sheet === void 0 ? void 0 : sheet.options) || {};
-
   if (meta && rule.type === 'style') {
     if (meta.startsWith('MuiSnackbar') && sheet) {
       return "SDSnackbar-".concat(rule.key);
     }
-
     if (meta.startsWith('SD-')) {
       return "".concat(meta, "-").concat(rule.key);
     }
-
     if (meta.startsWith('Mui')) {
       var isPseudoClass = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected'].includes(rule.key);
-
       if (isPseudoClass) {
         return "Mui-".concat(rule.key);
       }
-
       if (!link) {
         return "".concat(meta, "-").concat(rule.key);
       }
     }
   }
-
   return generateMaterialClassName(rule, sheet);
 }
-
 function ThemeProvider(_ref) {
   var {
     modifier,
@@ -4006,7 +3896,6 @@ function ThemeProvider(_ref) {
 }
 
 var PREVENT_COLLAPSE = 1;
-
 function spaceVariant(theme, space) {
   var gap = theme.spacing(space);
   return {
@@ -4022,13 +3911,11 @@ function spaceVariant(theme, space) {
     }
   };
 }
-
 function columnVariant(columns) {
   return {
     flex: "0 0 ".concat(100 / columns, "%")
   };
 }
-
 var useStyles$d = /*#__PURE__*/makeStyles(theme => ({
   root: {
     paddingTop: PREVENT_COLLAPSE,