@superdispatch/ui 0.16.0-alpha.0 → 0.16.0-alpha.1

package/dist-web/index.js

@@ -3,20 +3,16 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { MoreHoriz, Close, Warning, CheckCircle } from '@mui/icons-material';
-import { CircularProgress, Toolbar, Grid, Typography, Menu, MenuItem, styled, Avatar, ButtonBase, FormControl, FormControlLabel, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, CardContent, Card, Radio, RadioGroup, SnackbarContent as SnackbarContent$2, IconButton, Portal, Snackbar as Snackbar$2, Slide, autocompleteClasses, buttonClasses, checkboxClasses, chipClasses, dialogClasses, iconButtonClasses, listItemClasses, menuItemClasses, paginationItemClasses, radioClasses, switchClasses, formLabelClasses, inputBaseClasses, outlinedInputClasses, tooltipClasses, ThemeProvider as ThemeProvider$2, CssBaseline, createTheme } from '@mui/material';
+import { CircularProgress, Toolbar, Grid, Typography, Menu, MenuItem, styled, Avatar, ButtonBase, FormControl, FormControlLabel, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, CardContent, Card, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, IconButton, Portal, Snackbar as Snackbar$1, Slide, autocompleteClasses, buttonClasses, checkboxClasses, chipClasses, dialogClasses, iconButtonClasses, listItemClasses, menuItemClasses, paginationItemClasses, radioClasses, switchClasses, formLabelClasses, inputBaseClasses, outlinedInputClasses, tooltipClasses, ThemeProvider as ThemeProvider$1, CssBaseline, createTheme } from '@mui/material';
 import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo, useConstant } from '@superdispatch/hooks';
 import { forwardRef, useRef, useState, useLayoutEffect, useContext, createContext, useMemo, Children, useCallback } from 'react';
 import { LoadingButton, loadingButtonClasses } from '@mui/lab';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import styled$1, { css, ThemeProvider as ThemeProvider$4 } from 'styled-components';
-import { Grid as Grid$1, Button as Button$2, CircularProgress as CircularProgress$1, Toolbar as Toolbar$1, Typography as Typography$1, Menu as Menu$1, MenuItem as MenuItem$1, ButtonBase as ButtonBase$1, Avatar as Avatar$1, FormControl as FormControl$1, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1, FormHelperText as FormHelperText$1, FormLabel as FormLabel$1, FormGroup as FormGroup$1, useMediaQuery as useMediaQuery$1, Tooltip as Tooltip$1, SvgIcon as SvgIcon$1, AppBar as AppBar$1, List as List$1, Card as Card$1, CardContent as CardContent$1, Radio as Radio$1, RadioGroup as RadioGroup$1, SnackbarContent as SnackbarContent$3, IconButton as IconButton$1, Portal as Portal$1, Snackbar as Snackbar$3, Slide as Slide$1, CssBaseline as CssBaseline$1, createTheme as createTheme$1, createGenerateClassName as createGenerateClassName$1 } from '@material-ui/core';
+import styled$1, { css } from 'styled-components';
 import flattenChildren from 'react-keyed-flatten-children';
 import { makeStyles, StylesProvider, createGenerateClassName } from '@mui/styles';
 import clsx from 'clsx';
 import { createBreakpoints } from '@mui/system';
-import { MoreHoriz as MoreHoriz$1, Close as Close$1, Warning as Warning$1, CheckCircle as CheckCircle$1 } from '@material-ui/icons';
-import { makeStyles as makeStyles$1, StylesProvider as StylesProvider$1, ThemeProvider as ThemeProvider$3 } from '@material-ui/styles';
-import createBreakpoints$1 from '@material-ui/core/styles/createBreakpoints';
 
 var _excluded = ["size", "children", "isActive", "isLoading", "color"];
 var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -698,7 +694,7 @@ function columnRootMixin(width) {
 
 var ColumnRoot = /*#__PURE__*/styled$1.div.withConfig({
   displayName: "Column__ColumnRoot",
-  componentId: "SD__sc-nqzztj-0"
+  componentId: "SD__sc-m9n6o6-0"
 })(_ref => {
   var {
     theme,
@@ -782,7 +778,7 @@ function columnsRootMixin(align, spaceProp, isReversed, isCollapsed) {
 
 var Columns = /*#__PURE__*/styled$1.div.withConfig({
   displayName: "Columns",
-  componentId: "SD__sc-1uebhbi-0"
+  componentId: "SD__sc-1a73118-0"
 })(_ref => {
   var {
     theme,
@@ -1278,13 +1274,13 @@ var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
       props = _objectWithoutProperties(_ref, _excluded$b);
 
   var items = Children.toArray(children);
-  return /*#__PURE__*/jsx(Grid$1, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     container: true,
     wrap: "nowrap",
     direction: "column",
     alignItems: alignItems,
-    children: items.map((item, idx) => /*#__PURE__*/jsx(Grid$1, {
+    children: items.map((item, idx) => /*#__PURE__*/jsx(Grid, {
       item: true,
       zeroMinWidth: true,
       xs: alignItems === 'stretch' ? 12 : undefined,
@@ -1309,13 +1305,13 @@ var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
       props = _objectWithoutProperties(_ref, _excluded$c);
 
   var items = Children.toArray(children);
-  return /*#__PURE__*/jsx(Grid$1, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     wrap: wrap,
     container: true,
-    justify: justify,
+    justifyContent: justify,
     alignItems: alignItems,
-    children: items.map((item, idx) => /*#__PURE__*/jsx(Grid$1, {
+    children: items.map((item, idx) => /*#__PURE__*/jsx(Grid, {
       item: true,
       zeroMinWidth: true,
       children: item
@@ -1406,7 +1402,7 @@ function inlineRootMixin(spaceProp, noWrap, verticalAlign, horizontalAlign) {
 
 var InlineRoot = /*#__PURE__*/styled$1.div.withConfig({
   displayName: "Inline__InlineRoot",
-  componentId: "SD__sc-1tgkwtt-0"
+  componentId: "SD__sc-13du4wm-0"
 })(_ref => {
   var {
     theme,
@@ -1571,7 +1567,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
       styles = _objectWithoutProperties(_useStyles, _excluded2$1);
 
   var Icon = variant === 'error' ? Warning : variant === 'success' ? CheckCircle : undefined;
-  return /*#__PURE__*/jsx(SnackbarContent$2, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(SnackbarContent$1, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     classes: styles,
     className: clsx(className, {
@@ -1635,7 +1631,7 @@ var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   }
 
   return /*#__PURE__*/jsx(Portal, {
-    children: /*#__PURE__*/jsx(Snackbar$2, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsx(Snackbar$1, _objectSpread(_objectSpread({}, props), {}, {
       ref: ref,
       open: open,
       TransitionComponent: TransitionComponent,
@@ -1768,7 +1764,7 @@ function stackItemMixin(space, align) {
 
 var StackRoot = /*#__PURE__*/styled$1.div.withConfig({
   displayName: "Stack__StackRoot",
-  componentId: "SD__sc-dmzxni-0"
+  componentId: "SD__sc-qkml7c-0"
 })(_ref => {
   var {
     theme,
@@ -2602,84 +2598,6 @@ function overrideList(theme) {
   };
 }
 
-var Color$1;
-
-(function (Color) {
-  Color["White"] = "#fff";
-  Color["White50"] = "rgba(255, 255, 255, 0.5)";
-  Color["White40"] = "rgba(255, 255, 255, 0.4)";
-  Color["White20"] = "rgba(255, 255, 255, 0.2)";
-  Color["White10"] = "rgba(255, 255, 255, 0.1)";
-  Color["White08"] = "rgba(255, 255, 255, 0.08)";
-  Color["Transparent"] = "rgba(0, 0, 0, 0)";
-  Color["Black"] = "#000";
-  Color["Black50"] = "rgba(0, 0, 0, 0.5)";
-  Color["Black20"] = "rgba(0, 0, 0, 0.2)";
-  Color["Grey100"] = "#8F949E";
-  Color["Grey200"] = "#6A707C";
-  Color["Grey300"] = "#5B6371";
-  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";
-  Color["Silver400"] = "#E1E5EA";
-  Color["Silver500"] = "#C4CDD5";
-  Color["Blue50"] = "#EBF4FF";
-  Color["Blue75"] = "#CCE5FF";
-  Color["Blue100"] = "#A8D1FF";
-  Color["Blue200"] = "#66ADFF";
-  Color["Blue300"] = "#0075FF";
-  Color["Blue400"] = "#0063DB";
-  Color["Blue500"] = "#0050B2";
-  Color["Green50"] = "#ECF9EF";
-  Color["Green75"] = "#C8F4D1";
-  Color["Green100"] = "#90EAAE";
-  Color["Green200"] = "#5DDA87";
-  Color["Green300"] = "#1FA84D";
-  Color["Green400"] = "#1E8F46";
-  Color["Green500"] = "#19803D";
-  Color["Purple50"] = "#EFEEFC";
-  Color["Purple75"] = "#DCDBF5";
-  Color["Purple100"] = "#CBC8EE";
-  Color["Purple200"] = "#A7A1E8";
-  Color["Purple300"] = "#6559CF";
-  Color["Purple400"] = "#473ABB";
-  Color["Purple500"] = "#3A2F9D";
-  Color["Red50"] = "#FFEDEB";
-  Color["Red75"] = "#FDD9D3";
-  Color["Red100"] = "#FDC2BA";
-  Color["Red200"] = "#FE988B";
-  Color["Red300"] = "#EE3017";
-  Color["Red400"] = "#D9210D";
-  Color["Red500"] = "#C31909";
-  Color["Teal50"] = "#E3F6FC";
-  Color["Teal75"] = "#BEEDF9";
-  Color["Teal100"] = "#91E3F8";
-  Color["Teal200"] = "#61D3EF";
-  Color["Teal300"] = "#00A0CC";
-  Color["Teal400"] = "#008DB8";
-  Color["Teal500"] = "#007DA3";
-  Color["Yellow50"] = "#FFF9E5";
-  Color["Yellow75"] = "#FFF1C2";
-  Color["Yellow100"] = "#FFE494";
-  Color["Yellow200"] = "#FFDC6B";
-  Color["Yellow300"] = "#FFCB47";
-  Color["Yellow400"] = "#FFA91F";
-  Color["Yellow500"] = "#DB7500";
-})(Color$1 || (Color$1 = {}));
-
-function isColorProp$1(name) {
-  return typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color$1, name);
-}
-
 function overrideMenu(theme) {
   theme.components.MuiMenu = {
     defaultProps: {
@@ -2699,12 +2617,12 @@ function overrideMenu(theme) {
         paddingTop: theme.spacing(1),
         paddingBottom: theme.spacing(1),
         '& .MuiTouchRipple-root': {
-          color: Color$1.Blue100
+          color: Color.Blue100
         },
         ["&.".concat(menuItemClasses.selected, ", &.").concat(menuItemClasses.selected, ":hover")]: {
-          backgroundColor: Color$1.Blue50,
+          backgroundColor: Color.Blue50,
           ["&.".concat(menuItemClasses.focusVisible)]: {
-            backgroundColor: Color$1.Blue50
+            backgroundColor: Color.Blue50
           }
         }
       })
@@ -3479,7 +3397,7 @@ function ThemeProvider(_ref) {
   return /*#__PURE__*/jsx(StylesProvider, {
     injectFirst: injectFirst,
     generateClassName: generateClassName,
-    children: /*#__PURE__*/jsxs(ThemeProvider$2, {
+    children: /*#__PURE__*/jsxs(ThemeProvider$1, {
       theme: theme,
       children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsx(ResponsiveContextProvider, {
         children: /*#__PURE__*/jsx(SnackbarStackProvider, {
@@ -3579,3400 +3497,5 @@ var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Tiles.displayName = "Tiles";
 
-
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AdaptiveToolbar: AdaptiveToolbar,
-  AvatarButton: AvatarButton,
-  Button: Button,
-  CardButton: CardButton,
-  CheckboxField: CheckboxField,
-  CheckboxGroupField: CheckboxGroupField,
-  Column: Column,
-  Columns: Columns,
-  DescriptionListItem: DescriptionListItem,
-  DescriptionList: DescriptionList,
-  DrawerActions: DrawerActions,
-  DrawerContent: DrawerContent,
-  DrawerList: DrawerList,
-  DrawerTitle: DrawerTitle,
-  GridStack: GridStack,
-  InlineGrid: InlineGrid,
-  InfoCard: InfoCard,
-  Inline: Inline,
-  OverflowText: OverflowText,
-  parseAlignProp: parseAlignProp,
-  parseCollapsedBelow: parseCollapsedBelow,
-  parseResponsiveProp: parseResponsiveProp,
-  useResponsiveProp: useResponsiveProp,
-  useResponsiveValue: useResponsiveValue,
-  useResponsivePropRecord: useResponsivePropRecord,
-  parseSpaceProp: parseSpaceProp,
-  RadioField: RadioField,
-  RadioGroupField: RadioGroupField,
-  Snackbar: Snackbar,
-  SnackbarContent: SnackbarContent,
-  useSnackbarStack: useSnackbarStack,
-  SnackbarStackConsumer: SnackbarStackConsumer,
-  SnackbarStackProvider: SnackbarStackProvider,
-  Stack: Stack,
-  Tag: Tag,
-  get Color () { return Color; },
-  isColorProp: isColorProp,
-  ThemeProvider: ThemeProvider,
-  Tiles: Tiles,
-  isEmptyReactNode: isEmptyReactNode,
-  mergeRefs: mergeRefs,
-  assignRef: assignRef,
-  renderChildren: renderChildren,
-  useUID: useUID,
-  useVisibilityObserver: useVisibilityObserver,
-  VisibilityObserver: VisibilityObserver
-});
-
-var _excluded$k = ["size", "children", "disabled", "isActive", "isLoading", "color"];
-var Button$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    size,
-    children,
-    disabled,
-    isActive,
-    isLoading,
-    color = 'primary'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
-
-  return /*#__PURE__*/jsx(Button$2, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    size: size,
-    "data-color": color,
-    "aria-busy": isLoading,
-    "aria-expanded": isActive,
-    disabled: disabled || isLoading,
-    color: color === 'primary' ? color : 'default',
-    children: !isLoading ? children : /*#__PURE__*/jsxs(Fragment, {
-      children: [children, /*#__PURE__*/jsx(CircularProgress$1, {
-        size: "1em",
-        color: "inherit"
-      })]
-    })
-  }));
-});
-if (process.env.NODE_ENV !== "production") Button$1.displayName = "Button";
-
-var _excluded$l = ["items"];
-
-function useResizeObserver$1(node, observer) {
-  var handler = useEventHandler(observer);
-  useLayoutEffect(() => {
-    if (!node) {
-      return;
-    }
-
-    var resizeObserver = new ResizeObserver(() => {
-      handler(node);
-    });
-    resizeObserver.observe(node);
-    handler(node);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [node, handler]);
-}
-
-var useStyles$3 = /*#__PURE__*/makeStyles$1({
-  actions: {
-    overflow: 'hidden'
-  }
-}, {
-  name: 'SD-AdaptiveToolbar'
-});
-var AdaptiveToolbar$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    items
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
-
-  var styles = useStyles$3();
-  var itemNodes = useRef([]);
-  var optionsButtonRef = useRef(null);
-  var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
-  var menuItems = firstHiddenIdx === -1 ? [] : items.slice(firstHiddenIdx);
-  var [menuButtonNode, setMenuButtonRef] = useState();
-  var [rootNode, setRootNode] = useState(null);
-  useResizeObserver$1(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();
-    var optionsButtonWidth = (optionsButtonRect === null || optionsButtonRect === void 0 ? void 0 : optionsButtonRect.width) || 0;
-    var maxRightPosition = rootWidth - optionsButtonWidth;
-    var mountedNodes = itemNodes.current.filter(x => x != null);
-    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.
-
-      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$1, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    children: /*#__PURE__*/jsxs(Grid$1, {
-      container: true,
-      spacing: 1,
-      wrap: "nowrap",
-      ref: setRootNode,
-      children: [/*#__PURE__*/jsx(Grid$1, {
-        item: true,
-        className: styles.actions,
-        children: /*#__PURE__*/jsx(Grid$1, {
-          container: true,
-          spacing: 1,
-          wrap: "nowrap",
-          component: "div",
-          children: items.map((item, idx) => /*#__PURE__*/jsx(Grid$1, {
-            item: true,
-            ref: node => {
-              itemNodes.current[idx] = node;
-            },
-            children: /*#__PURE__*/jsx(Button$1, _objectSpread(_objectSpread({
-              type: "button",
-              onClick: item.onClick
-            }, item.ButtonProps), {}, {
-              children: /*#__PURE__*/jsx(Typography$1, {
-                noWrap: true,
-                variant: "inherit",
-                children: item.label
-              })
-            }))
-          }, item.key))
-        })
-      }), menuItems.length > 0 && /*#__PURE__*/jsxs(Grid$1, {
-        item: true,
-        ref: optionsButtonRef,
-        component: "div",
-        children: [/*#__PURE__*/jsx(Button$1, {
-          type: "button",
-          onClick: _ref2 => {
-            var {
-              currentTarget
-            } = _ref2;
-            setMenuButtonRef(currentTarget);
-          },
-          children: /*#__PURE__*/jsx(MoreHoriz$1, {})
-        }), /*#__PURE__*/jsx(Menu$1, {
-          open: !!menuButtonNode,
-          anchorEl: menuButtonNode,
-          onClose: () => {
-            setMenuButtonRef(undefined);
-          },
-          children: menuItems.map(item => /*#__PURE__*/jsx(MenuItem$1, {
-            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))
-        })]
-      })]
-    })
-  }));
-});
-if (process.env.NODE_ENV !== "production") AdaptiveToolbar$1.displayName = "AdaptiveToolbar";
-
-var _excluded$m = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
-    _excluded2$2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
-var useStyles$4 = /*#__PURE__*/makeStyles$1(theme => {
-  var sm = theme.breakpoints.up('sm');
-  return {
-    button: {
-      borderRadius: '50%',
-      '&[disabled], &[aria-busy="true"]': {
-        '& > $overlay': {
-          backgroundColor: Color$1.White50
-        }
-      },
-      '&:not([disabled])[aria-busy="false"]': {
-        '&:hover, &:focus': {
-          '&$withIcon > $overlay': {
-            backgroundColor: Color$1.Black50,
-            '& > svg': {
-              opacity: 1
-            }
-          },
-          '&:not($withIcon) > $overlay': {
-            backgroundColor: Color$1.Black20
-          }
-        }
-      }
-    },
-    overlay: {
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      position: 'absolute',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: '50%',
-      backgroundColor: Color$1.Transparent,
-      transition: theme.transitions.create('background-color'),
-      '& > svg': {
-        opacity: 0,
-        color: Color$1.White,
-        transition: theme.transitions.create('opacity'),
-        fontSize: theme.spacing(3),
-        [sm]: {
-          fontSize: theme.spacing(2)
-        }
-      }
-    },
-    progress: {
-      top: 0,
-      left: 0,
-      position: 'absolute',
-      fontSize: theme.spacing(5),
-      [sm]: {
-        fontSize: theme.spacing(4)
-      }
-    },
-    withIcon: {},
-    sizeLarge: {
-      '& > $root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
-        width: theme.spacing(7),
-        height: theme.spacing(7),
-        [sm]: {
-          width: theme.spacing(8),
-          height: theme.spacing(8)
-        }
-      }),
-      '& > $overlay': {
-        '& > $progress': {
-          fontSize: theme.spacing(7),
-          [sm]: {
-            fontSize: theme.spacing(8)
-          }
-        },
-        '& > svg': {
-          fontSize: theme.spacing(4),
-          [sm]: {
-            fontSize: theme.spacing(3)
-          }
-        }
-      }
-    },
-    root: {},
-    colorDefault: {},
-    circular: {},
-    rounded: {},
-    square: {},
-    img: {},
-    fallback: {}
-  };
-}, {
-  name: 'SD-AvatarButton'
-});
-var AvatarButton$1 = /*#__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$m);
-
-  var _useStyles = useStyles$4({
-    classes
-  }),
-      {
-    button: buttonClassName,
-    overlay: overlayClassName,
-    progress: progressClassName,
-    withIcon: withIconClassName,
-    sizeLarge: sizeLargeClassName
-  } = _useStyles,
-      avatarClasses = _objectWithoutProperties(_useStyles, _excluded2$2);
-
-  return /*#__PURE__*/jsxs(ButtonBase$1, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    "aria-busy": isLoading,
-    "aria-disabled": disabled,
-    disabled: disabled || isLoading,
-    className: clsx(className, buttonClassName, !!icon && withIconClassName, size === 'large' && sizeLargeClassName),
-    children: [/*#__PURE__*/jsx(Avatar$1, {
-      ref: avatarRef,
-      classes: avatarClasses,
-      variant: variant,
-      alt: alt,
-      src: src,
-      sizes: sizes,
-      srcSet: srcSet,
-      imgProps: imgProps,
-      children: children
-    }), /*#__PURE__*/jsxs("div", {
-      className: overlayClassName,
-      children: [icon, isLoading && /*#__PURE__*/jsx(CircularProgress$1, {
-        size: "1em",
-        className: progressClassName,
-        thickness: size === 'large' ? 2.5 : 1.5
-      })]
-    })]
-  }));
-});
-if (process.env.NODE_ENV !== "production") AvatarButton$1.displayName = "AvatarButton";
-
-var _excluded$n = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
-var useStyles$5 = /*#__PURE__*/makeStyles$1(theme => ({
-  root: {
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    backgroundColor: Color$1.White,
-    border: '1px dashed',
-    borderRadius: theme.spacing(0.5),
-    padding: theme.spacing(1.5),
-    minHeight: theme.spacing(13),
-    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
-  },
-  disabled: {
-    color: Color$1.Dark200,
-    borderColor: Color$1.Silver500,
-    backgroundColor: Color$1.Silver100
-  },
-  error: {
-    color: Color$1.Red300,
-    borderColor: Color$1.Red300,
-    backgroundColor: Color$1.Red50,
-    '&:focus': {
-      backgroundColor: Color$1.Red75
-    }
-  },
-  primary: {
-    color: Color$1.Blue300,
-    borderColor: Color$1.Silver500,
-    '&:focus': {
-      backgroundColor: Color$1.Blue50
-    },
-    '&:hover, &:active': {
-      borderColor: Color$1.Blue300,
-      backgroundColor: Color$1.Blue50
-    }
-  },
-  sizeSmall: {
-    minHeight: theme.spacing(6)
-  },
-  sizeLarge: {
-    minHeight: theme.spacing(17.5)
-  },
-  label: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  icon: {
-    display: 'flex',
-    '& svg': {
-      fontSize: theme.spacing(3),
-      [theme.breakpoints.up('sm')]: {
-        fontSize: theme.spacing(2.5)
-      }
-    }
-  },
-  startIcon: {
-    marginRight: theme.spacing(1),
-    marginLeft: theme.spacing(-0.5)
-  },
-  endIcon: {
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(-0.5)
-  },
-  hint: {
-    marginTop: theme.spacing(0.5)
-  }
-}), {
-  name: 'SD-CardButton'
-});
-var CardButton$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    hint,
-    size,
-    error,
-    classes,
-    className,
-    children,
-    endIcon,
-    startIcon,
-    disabled
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$n);
-
-  var styles = useStyles$5({
-    classes
-  });
-  return /*#__PURE__*/jsx(ButtonBase$1, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    disabled: disabled,
-    className: clsx(styles.root, className, disabled ? styles.disabled : error ? styles.error : styles.primary, {
-      'small': styles.sizeSmall,
-      'large': styles.sizeLarge
-    }[size]),
-    children: error ? /*#__PURE__*/jsx(Typography$1, {
-      variant: "h4",
-      color: "inherit",
-      className: styles.label,
-      children: error
-    }) : /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsxs(Typography$1, {
-        variant: "h4",
-        color: "inherit",
-        className: styles.label,
-        children: [!!startIcon && /*#__PURE__*/jsx("span", {
-          className: clsx(styles.icon, styles.startIcon),
-          children: startIcon
-        }), children, !!endIcon && /*#__PURE__*/jsx("span", {
-          className: clsx(styles.icon, styles.endIcon),
-          children: endIcon
-        })]
-      }), !!hint && /*#__PURE__*/jsx(Typography$1, {
-        color: "textSecondary",
-        className: styles.hint,
-        children: hint
-      })]
-    })
-  }));
-});
-if (process.env.NODE_ENV !== "production") CardButton$1.displayName = "CardButton";
-
-var _excluded$o = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
-var CheckboxField$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    label,
-    error,
-    checked,
-    onBlur,
-    onChange,
-    helperText,
-    FormControlLabelProps: formControlLabelProps
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
-
-  return /*#__PURE__*/jsxs(FormControl$1, {
-    error: error,
-    children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
-      label: label,
-      checked: checked,
-      onBlur: onBlur,
-      onChange: onChange,
-      control: /*#__PURE__*/jsx(Checkbox$1, _objectSpread({
-        ref: ref,
-        color: "primary",
-        disableRipple: true
-      }, props))
-    })), helperText && /*#__PURE__*/jsx(FormHelperText$1, {
-      children: helperText
-    })]
-  });
-});
-if (process.env.NODE_ENV !== "production") CheckboxField$1.displayName = "CheckboxField";
-
-var _excluded$p = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
-var CheckboxGroupField$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    FormGroupProps: formGroupProps,
-    label,
-    FormLabelProps: formLabelProps,
-    helperText,
-    FormHelperTextProps: formHelperTextProps,
-    children
-  } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$p);
-
-  return /*#__PURE__*/jsxs(FormControl$1, _objectSpread(_objectSpread({}, formControlProps), {}, {
-    hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsx(FormLabel$1, _objectSpread(_objectSpread({}, formLabelProps), {}, {
-      children: label
-    })), /*#__PURE__*/jsx(FormGroup$1, _objectSpread(_objectSpread({
-      ref: ref
-    }, formGroupProps), {}, {
-      children: children
-    })), !!helperText && /*#__PURE__*/jsx(FormHelperText$1, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
-      children: helperText
-    }))]
-  }));
-});
-if (process.env.NODE_ENV !== "production") CheckboxGroupField$1.displayName = "CheckboxGroupField";
-
-var Context$2 = /*#__PURE__*/createContext({});
-
-function useBreakpoint$1(breakpoint) {
-  return useMediaQuery$1(theme => theme.breakpoints.only(breakpoint));
-}
-
-function ResponsiveContextProvider$1(_ref) {
-  var {
-    children,
-    defaultBreakpoint
-  } = _ref;
-  var isXS = useBreakpoint$1('xs');
-  var isSM = useBreakpoint$1('sm');
-  var isMD = useBreakpoint$1('md');
-  var isLG = useBreakpoint$1('lg');
-  var isXL = useBreakpoint$1('xl');
-  var breakpoint = isXS ? 'xs' : isSM ? 'sm' : isMD ? 'md' : isLG ? 'lg' : isXL ? 'xl' : defaultBreakpoint;
-  var ctx = useMemo(() => ({
-    breakpoint
-  }), [breakpoint]);
-  return /*#__PURE__*/jsx(Context$2.Provider, {
-    value: ctx,
-    children: children
-  });
-}
-function useResponsiveContext$1() {
-  return useContext(Context$2);
-}
-
-function parseResponsiveProp$1(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;
-  (_desktop = desktop) !== null && _desktop !== void 0 ? _desktop : desktop = tablet;
-  return [mobile, tablet, desktop];
-}
-function useResponsiveProp$1(prop) {
-  return useDeepEqualValue(parseResponsiveProp$1(prop));
-}
-function useResponsiveValue$1(xs, sm) {
-  var md = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : sm;
-  var lg = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : md;
-  var xl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : lg;
-  var {
-    breakpoint = 'xs'
-  } = useResponsiveContext$1();
-  return {
-    xs,
-    sm,
-    md,
-    lg,
-    xl
-  }[breakpoint];
-}
-function useResponsivePropRecord$1(prop) {
-  if (typeof prop != 'object') prop = {
-    xs: prop
-  };
-  var {
-    xs,
-    sm,
-    md,
-    lg,
-    xl
-  } = prop;
-  return useResponsiveValue$1(xs, sm !== null && sm !== void 0 ? sm : xs, md, lg, xl);
-}
-
-function computeFlexBasis$1(scale) {
-  return "".concat(scale * 100, "%");
-}
-
-function flexBasisMixin$1(width) {
-  switch (width) {
-    case '1/2':
-      return computeFlexBasis$1(1 / 2);
-
-    case '1/3':
-      return computeFlexBasis$1(1 / 3);
-
-    case '2/3':
-      return computeFlexBasis$1(2 / 3);
-
-    case '1/4':
-      return computeFlexBasis$1(1 / 4);
-
-    case '3/4':
-      return computeFlexBasis$1(3 / 4);
-
-    case '1/5':
-      return computeFlexBasis$1(1 / 5);
-
-    case '2/5':
-      return computeFlexBasis$1(2 / 5);
-
-    case '3/5':
-      return computeFlexBasis$1(3 / 5);
-
-    case '4/5':
-      return computeFlexBasis$1(4 / 5);
-  }
-
-  return 'auto';
-}
-
-function columnRootMixin$1(width) {
-  return css(["flex-grow:0;flex-basis:", ";width:", ";flex-shrink:", ";"], flexBasisMixin$1(width), width === 'fluid' ? '100%' : 'auto', width === 'fluid' || width === 'adaptive' ? 1 : 0);
-}
-
-var ColumnRoot$1 = /*#__PURE__*/styled$1.div.withConfig({
-  displayName: "Column__ColumnRoot",
-  componentId: "SD__sc-m9n6o6-0"
-})(_ref => {
-  var {
-    theme,
-    columnWidth
-  } = _ref;
-  return 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$1(columnWidth[0]), theme.breakpoints.up('sm'), columnRootMixin$1(columnWidth[1]), theme.breakpoints.up('md'), columnRootMixin$1(columnWidth[2]));
-});
-var Column$1 = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  var {
-    children,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    width = 'fluid'
-  } = _ref2;
-  var columnWidth = useResponsiveProp$1(width);
-  return /*#__PURE__*/jsx(ColumnRoot$1, {
-    ref: ref,
-    columnWidth: columnWidth,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    children: /*#__PURE__*/jsx("div", {
-      children: children
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") Column$1.displayName = "Column";
-
-function parseAlignProp$1(align) {
-  switch (align) {
-    case 'top':
-    case 'left':
-    default:
-      return 'initial';
-
-    case 'center':
-      return 'center';
-
-    case 'right':
-    case 'bottom':
-      return 'flex-end';
-  }
-}
-
-function parseCollapsedBelow$1(collapsedBelow) {
-  return [collapsedBelow === 'tablet' || collapsedBelow === 'desktop', collapsedBelow === 'desktop', false];
-}
-
-function parseSpaceProp$1(prop) {
-  switch (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;
-  }
-}
-
-function columnsRootMixin$1(align, spaceProp, isReversed, isCollapsed) {
-  var space = parseSpaceProp$1(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$1(align), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
-}
-
-var Columns$1 = /*#__PURE__*/styled$1.div.withConfig({
-  displayName: "Columns",
-  componentId: "SD__sc-1a73118-0"
-})(_ref => {
-  var {
-    theme,
-    collapseBelow,
-    align: alignProp = 'top',
-    space: spaceProp = 'none',
-    reverse: reverseProp = false
-  } = _ref;
-  var align = parseResponsiveProp$1(alignProp);
-  var space = parseResponsiveProp$1(spaceProp);
-  var reverse = parseResponsiveProp$1(reverseProp);
-  var collapsed = parseCollapsedBelow$1(collapseBelow);
-  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin$1(align[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin$1(align[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin$1(align[2], space[2], reverse[2], collapsed[2]));
-});
-
-function renderChildren$1(node) {
-  if (node == null || typeof node == 'boolean') {
-    return null;
-  } // Workaround for https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
-
-
-  return node;
-}
-
-var _excluded$q = ["render", "onChange"];
-function useVisibilityObserver$1(node) {
-  var {
-    threshold = 0,
-    marginTop = '0px',
-    marginLeft = '0px',
-    marginRight = '0px',
-    marginBottom = '0px'
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var [state, setState] = useState('undetermined');
-  var rootMargin = "".concat(marginTop, " ").concat(marginRight, " ").concat(marginBottom, " ").concat(marginLeft);
-  useLayoutEffect(() => {
-    if (!node || !('IntersectionObserver' in window)) {
-      setState('undetermined');
-      return;
-    }
-
-    var observer = new IntersectionObserver(_ref => {
-      var [entry] = _ref;
-      setState(entry !== null && entry !== void 0 && entry.isIntersecting ? 'visible' : 'invisible');
-    }, {
-      rootMargin,
-      threshold
-    });
-    observer.observe(node);
-    return () => {
-      observer.disconnect();
-    };
-  }, [node, threshold, rootMargin]);
-  return state;
-}
-function VisibilityObserver$1(_ref2) {
-  var {
-    render,
-    onChange
-  } = _ref2,
-      options = _objectWithoutProperties(_ref2, _excluded$q);
-
-  var [node, setNode] = useState(null);
-  var visibility = useVisibilityObserver$1(node, options);
-  var children = render({
-    ref: setNode,
-    visibility
-  });
-  useValueObserver(visibility, () => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(visibility);
-  });
-  return renderChildren$1(children);
-}
-
-var _excluded$r = ["title", "enterDelay"],
-    _excluded2$3 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
-var useStyles$6 = /*#__PURE__*/makeStyles$1(theme => ({
-  root: {
-    marginBottom: -1,
-    borderBottom: '1px dashed transparent',
-    transition: theme.transitions.create('border'),
-    '&$truncated': {
-      cursor: 'pointer',
-      borderBottomColor: Color$1.Silver500
-    }
-  },
-  truncated: {},
-  sentinel: {
-    width: 1,
-    height: '100%',
-    display: 'inline-block'
-  }
-}), {
-  name: 'SD-OverflowText'
-});
-var OverflowText$1 = /*#__PURE__*/forwardRef((_ref, rootRef) => {
-  var {
-    onClick: _onClick,
-    children,
-    className,
-    disableUnderline,
-    TooltipProps: {
-      title = children,
-      enterDelay = 1000
-    } = {}
-  } = _ref,
-      tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$r),
-      props = _objectWithoutProperties(_ref, _excluded2$3);
-
-  var [isOpen, setIsOpen] = useState(false);
-  var styles = useStyles$6();
-  return /*#__PURE__*/jsx(VisibilityObserver$1, {
-    render: _ref2 => {
-      var {
-        ref,
-        visibility
-      } = _ref2;
-      var isTooltipEnabled = !!children && visibility === 'invisible';
-      return /*#__PURE__*/jsx(Tooltip$1, _objectSpread(_objectSpread({}, tooltipProps), {}, {
-        enterDelay: 1000,
-        title: title || '',
-        disableFocusListener: true,
-        open: isOpen && isTooltipEnabled,
-        onOpen: () => {
-          setIsOpen(true);
-        },
-        onClose: () => {
-          setIsOpen(false);
-        },
-        children: /*#__PURE__*/jsxs(Typography$1, _objectSpread(_objectSpread({}, props), {}, {
-          ref: rootRef,
-          noWrap: true,
-          onClick: event => {
-            setIsOpen(true);
-            _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
-          },
-          className: clsx(styles.root, className, !disableUnderline && visibility === 'invisible' && styles.truncated),
-          children: [children, !!children && /*#__PURE__*/jsx("span", {
-            ref: ref,
-            className: styles.sentinel
-          })]
-        }))
-      }));
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") OverflowText$1.displayName = "OverflowText";
-
-function isEmptyReactNode$1(node) {
-  return node == null || typeof node == 'boolean' || typeof node == 'string' && node.length === 0;
-}
-
-var current$1 = 0;
-function useUID$1(defaultID) {
-  var uid = useMemo(() => "uid_".concat(current$1 += 1), []);
-  return defaultID || uid;
-}
-
-var _excluded$s = ["size"];
-
-function sizeVariant$1(theme, mobileSpacing, desktopSpacing) {
-  return {
-    '& > $list, & > $item': {
-      '&:not(:last-child)': {
-        paddingBottom: theme.spacing(mobileSpacing),
-        [theme.breakpoints.up('sm')]: {
-          paddingBottom: theme.spacing(desktopSpacing)
-        }
-      }
-    }
-  };
-}
-
-var useStyles$7 = /*#__PURE__*/makeStyles$1(theme => ({
-  list: sizeVariant$1(theme, 2, 1),
-  listSmall: sizeVariant$1(theme, 1, 0.5),
-  listLarge: sizeVariant$1(theme, 3, 2),
-  item: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  icon: {
-    display: 'inline-flex',
-    marginRight: theme.spacing(1),
-    '& > .MuiSvgIcon-root': {
-      color: Color$1.Dark100,
-      fontSize: theme.spacing(3),
-      [theme.breakpoints.up('sm')]: {
-        fontSize: theme.spacing(2)
-      }
-    }
-  }
-}), {
-  name: 'SD-DescriptionList'
-}); //
-// DescriptionList
-//
-
-var DescriptionList$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    size
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$s);
-
-  var styles = useStyles$7();
-  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    "data-size": size,
-    className: clsx(styles.list, {
-      'small': styles.listSmall,
-      'large': styles.listLarge
-    }[size])
-  }));
-}); //
-// DescriptionListItem
-//
-
-if (process.env.NODE_ENV !== "production") DescriptionList$1.displayName = "DescriptionList";
-var DescriptionListItem$1 = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  var _ref3, _contentTypographyPro, _contentTypographyPro2;
-
-  var {
-    inset,
-    icon = inset ? /*#__PURE__*/jsx(SvgIcon$1, {}) : null,
-    label,
-    labelTypographyProps,
-    content,
-    contentTypographyProps,
-    fallback
-  } = _ref2;
-  var styles = useStyles$7();
-  var labelID = useUID$1(labelTypographyProps === null || labelTypographyProps === void 0 ? void 0 : labelTypographyProps.id);
-  var shouldRenderFallback = isEmptyReactNode$1(content);
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    className: styles.item,
-    "aria-labelledby": label != null ? labelID : undefined,
-    children: [!!icon && /*#__PURE__*/jsx("div", {
-      className: styles.icon,
-      children: icon
-    }), /*#__PURE__*/jsxs(OverflowText$1, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
-      component: "span",
-      color: shouldRenderFallback && label == null ? 'textSecondary' : 'textPrimary',
-      TooltipProps: _objectSpread(_objectSpread({}, contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : contentTypographyProps.TooltipProps), {}, {
-        title: (_ref3 = (_contentTypographyPro = contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : (_contentTypographyPro2 = contentTypographyProps.TooltipProps) === null || _contentTypographyPro2 === void 0 ? void 0 : _contentTypographyPro2.title) !== null && _contentTypographyPro !== void 0 ? _contentTypographyPro : content) !== null && _ref3 !== void 0 ? _ref3 : undefined
-      }),
-      children: [label != null && /*#__PURE__*/jsx(Typography$1, _objectSpread(_objectSpread({}, labelTypographyProps), {}, {
-        id: labelID,
-        variant: "body2",
-        component: "span",
-        color: "textSecondary",
-        children: label
-      })), label != null && ' ', !shouldRenderFallback ? content : fallback]
-    }))]
-  });
-});
-if (process.env.NODE_ENV !== "production") DescriptionListItem$1.displayName = "DescriptionListItem";
-
-var _excluded$t = ["children", "className"];
-var useStyles$8 = /*#__PURE__*/makeStyles$1(theme => ({
-  appBar: {
-    '&&': {
-      bottom: 0,
-      top: 'auto',
-      borderLeft: 'none',
-      borderRight: 'none',
-      borderBottom: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderTopColor: Color$1.Transparent
-      }
-    }
-  },
-  appBarSticky: {},
-  toolbar: {
-    '&.MuiToolbar-gutters': {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3),
-      [theme.breakpoints.up('md')]: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4)
-      }
-    }
-  }
-}), {
-  name: 'SD-DrawerActions'
-});
-var DrawerActions$1 = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
-  var {
-    children,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$t);
-
-  var styles = useStyles$8();
-  return /*#__PURE__*/jsx(VisibilityObserver$1, {
-    render: _ref2 => {
-      var {
-        ref,
-        visibility
-      } = _ref2;
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(AppBar$1, _objectSpread(_objectSpread({}, props), {}, {
-          ref: appBarRef,
-          position: "sticky",
-          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsx(Toolbar$1, {
-            className: styles.toolbar,
-            children: children
-          })
-        })), /*#__PURE__*/jsx("div", {
-          ref: ref
-        })]
-      });
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") DrawerActions$1.displayName = "DrawerActions";
-
-var _excluded$u = ["className"];
-var useStyles$9 = /*#__PURE__*/makeStyles$1(theme => ({
-  root: {
-    maxWidth: '100%',
-    padding: theme.spacing(2, 3),
-    [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(2, 4)
-    }
-  }
-}), {
-  name: 'SD-DrawerContent'
-});
-var DrawerContent$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$u);
-
-  var styles = useStyles$9();
-  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    className: clsx(styles.root, className)
-  }));
-});
-if (process.env.NODE_ENV !== "production") DrawerContent$1.displayName = "DrawerContent";
-
-var _excluded$v = ["className"];
-
-function listItemMixins$1(theme, space) {
-  return {
-    '& .MuiListItem-gutters': {
-      paddingLeft: theme.spacing(space),
-      paddingRight: theme.spacing(space),
-      '&.MuiListItem-secondaryAction': {
-        paddingRight: theme.spacing(space * 2)
-      },
-      '& .MuiListItemSecondaryAction-root': {
-        right: theme.spacing(space),
-        '& .MuiIconButton-edgeEnd': {
-          marginRight: theme.spacing(-(space / 2))
-        }
-      }
-    }
-  };
-}
-
-var useStyles$a = /*#__PURE__*/makeStyles$1(theme => ({
-  root: _objectSpread(_objectSpread({
-    maxWidth: '100%'
-  }, listItemMixins$1(theme, 3)), {}, {
-    [theme.breakpoints.up('md')]: _objectSpread({}, listItemMixins$1(theme, 4))
-  })
-}), {
-  name: 'SD-DrawerList'
-});
-var DrawerList$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$v);
-
-  var styles = useStyles$a();
-  return /*#__PURE__*/jsx(List$1, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    component: "div",
-    className: clsx(className, styles.root)
-  }));
-});
-if (process.env.NODE_ENV !== "production") DrawerList$1.displayName = "DrawerList";
-
-var _excluded$w = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
-var useStyles$b = /*#__PURE__*/makeStyles$1(theme => ({
-  appBar: {
-    '&&': {
-      borderTop: 'none',
-      borderLeft: 'none',
-      borderRight: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderBottomColor: Color$1.Transparent
-      }
-    }
-  },
-  appBarSticky: {},
-  toolbar: {
-    '&.MuiToolbar-gutters': {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3),
-      [theme.breakpoints.up('md')]: {
-        paddingLeft: theme.spacing(4),
-        paddingRight: theme.spacing(4)
-      }
-    }
-  },
-  startAction: {
-    marginRight: theme.spacing(0.5),
-    '& .MuiIconButton-edgeStart': {
-      marginLeft: theme.spacing(-2)
-    }
-  },
-  endAction: {
-    marginLeft: theme.spacing(0.5),
-    '& .MuiIconButton-edgeEnd': {
-      marginRight: theme.spacing(-2)
-    }
-  }
-}), {
-  name: 'SD-DrawerTitle'
-});
-var DrawerTitle$1 = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
-  var {
-    title,
-    titleTypographyProps,
-    subtitle,
-    subtitleTypographyProps,
-    startAction,
-    endAction,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$w);
-
-  var styles = useStyles$b();
-  return /*#__PURE__*/jsx(VisibilityObserver$1, {
-    render: _ref2 => {
-      var {
-        ref,
-        visibility
-      } = _ref2;
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx("div", {
-          ref: ref
-        }), /*#__PURE__*/jsx(AppBar$1, _objectSpread(_objectSpread({}, props), {}, {
-          ref: appBarRef,
-          position: "sticky",
-          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsx(Toolbar$1, {
-            className: styles.toolbar,
-            children: /*#__PURE__*/jsxs(Grid$1, {
-              container: true,
-              alignItems: "center",
-              children: [!!startAction && /*#__PURE__*/jsx(Grid$1, {
-                item: true,
-                className: styles.startAction,
-                children: startAction
-              }), /*#__PURE__*/jsxs(Grid$1, {
-                item: true,
-                xs: true,
-                zeroMinWidth: true,
-                children: [/*#__PURE__*/jsx(Typography$1, _objectSpread(_objectSpread({
-                  variant: "h3",
-                  noWrap: true
-                }, titleTypographyProps), {}, {
-                  children: title
-                })), !!subtitle && /*#__PURE__*/jsx(Typography$1, _objectSpread(_objectSpread({
-                  variant: "body2",
-                  noWrap: true
-                }, subtitleTypographyProps), {}, {
-                  children: subtitle
-                }))]
-              }), !!endAction && /*#__PURE__*/jsx(Grid$1, {
-                item: true,
-                className: styles.endAction,
-                children: endAction
-              })]
-            })
-          })
-        }))]
-      });
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") DrawerTitle$1.displayName = "DrawerTitle";
-
-var _excluded$x = ["children", "alignItems"];
-
-/**
- * @deprecated in favor of `Stack`.
- */
-var GridStack$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    children,
-    alignItems = 'stretch'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$x);
-
-  var items = Children.toArray(children);
-  return /*#__PURE__*/jsx(Grid$1, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    container: true,
-    wrap: "nowrap",
-    direction: "column",
-    alignItems: alignItems,
-    children: items.map((item, idx) => /*#__PURE__*/jsx(Grid$1, {
-      item: true,
-      zeroMinWidth: true,
-      xs: alignItems === 'stretch' ? 12 : undefined,
-      children: item
-    }, idx))
-  }));
-});
-if (process.env.NODE_ENV !== "production") GridStack$1.displayName = "GridStack";
-
-var _excluded$y = ["children", "wrap", "justify", "alignItems"];
-
-/**
- * @deprecated in favor of `Inline` component.
- */
-var InlineGrid$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    children,
-    wrap = 'wrap',
-    justify = 'flex-start',
-    alignItems = 'flex-start'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$y);
-
-  var items = Children.toArray(children);
-  return /*#__PURE__*/jsx(Grid$1, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    wrap: wrap,
-    container: true,
-    justify: justify,
-    alignItems: alignItems,
-    children: items.map((item, idx) => /*#__PURE__*/jsx(Grid$1, {
-      item: true,
-      zeroMinWidth: true,
-      children: item
-    }, idx))
-  }));
-});
-if (process.env.NODE_ENV !== "production") InlineGrid$1.displayName = "InlineGrid";
-
-function mergeRefs$1() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return node => {
-    refs.forEach(ref => {
-      assignRef$1(ref, node);
-    });
-  };
-}
-function assignRef$1(ref, value) {
-  if (ref) {
-    if (typeof ref === 'function') {
-      ref(value);
-    } else {
-      ref.current = value;
-    }
-  }
-}
-
-var _excluded$z = ["size", "square", "classes", "children", "className", "CardContentProps"],
-    _excluded2$4 = ["content", "sizeLarge", "fullWidth"];
-var useStyles$c = /*#__PURE__*/makeStyles$1(theme => ({
-  root: {
-    '&$fullWidth': {
-      borderRadius: 0,
-      borderLeftWidth: 0,
-      borderRightWidth: 0
-    }
-  },
-  fullWidth: {},
-  sizeLarge: {},
-  content: {
-    padding: theme.spacing(2),
-    '$sizeLarge > &': {
-      [theme.breakpoints.up('sm')]: {
-        padding: theme.spacing(3)
-      }
-    }
-  }
-}), {
-  name: 'SD-InfoCard'
-});
-var InfoCard$1 = /*#__PURE__*/forwardRef((_ref, _ref2) => {
-  var {
-    size,
-    square,
-    classes,
-    children,
-    className,
-    CardContentProps: cardContentProps = {}
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$z);
-
-  var _useStyles = useStyles$c({
-    classes
-  }),
-      {
-    content: contentClassName,
-    sizeLarge: sizeLargeClassName,
-    fullWidth: fullWidthClassName
-  } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$4);
-
-  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;
-  return /*#__PURE__*/jsx(Card$1, _objectSpread(_objectSpread({}, props), {}, {
-    ref: node => {
-      assignRef$1(_ref2, node);
-      setRootNode(node);
-    },
-    classes: styles,
-    className: clsx(className, isFullWidth && fullWidthClassName, size === 'large' && sizeLargeClassName),
-    children: /*#__PURE__*/jsx(CardContent$1, _objectSpread(_objectSpread({}, cardContentProps), {}, {
-      className: clsx(cardContentProps.className, contentClassName),
-      children: children
-    }))
-  }));
-});
-if (process.env.NODE_ENV !== "production") InfoCard$1.displayName = "InfoCard";
-
-function inlineRootMixin$1(spaceProp, noWrap, verticalAlign, horizontalAlign) {
-  var space = parseSpaceProp$1(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$1(verticalAlign), parseAlignProp$1(horizontalAlign), space, space);
-}
-
-var InlineRoot$1 = /*#__PURE__*/styled$1.div.withConfig({
-  displayName: "Inline__InlineRoot",
-  componentId: "SD__sc-13du4wm-0"
-})(_ref => {
-  var {
-    theme,
-    space,
-    noWrap,
-    verticalAlign,
-    horizontalAlign
-  } = _ref;
-  return css(["padding-top:1px;&:before{content:'';display:block;}", " ", "{", "}", "{", "}"], inlineRootMixin$1(space[0], noWrap[0], verticalAlign[0], horizontalAlign[0]), theme.breakpoints.up('sm'), inlineRootMixin$1(space[1], noWrap[1], verticalAlign[1], horizontalAlign[1]), theme.breakpoints.up('md'), inlineRootMixin$1(space[2], noWrap[2], verticalAlign[2], horizontalAlign[2]));
-});
-var Inline$1 = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  var {
-    children,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    noWrap: noWrapProp = false,
-    space: spaceProp = 'xsmall',
-    verticalAlign: verticalAlignProp = 'top',
-    horizontalAlign: horizontalAlignProp = 'left'
-  } = _ref2;
-  var space = useResponsiveProp$1(spaceProp);
-  var noWrap = useResponsiveProp$1(noWrapProp);
-  var verticalAlign = useResponsiveProp$1(verticalAlignProp);
-  var horizontalAlign = useResponsiveProp$1(horizontalAlignProp);
-  return /*#__PURE__*/jsx(InlineRoot$1, {
-    ref: ref,
-    space: space,
-    noWrap: noWrap,
-    verticalAlign: verticalAlign,
-    horizontalAlign: horizontalAlign,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    children: /*#__PURE__*/jsx("div", {
-      children: flattenChildren(children).map((child, idx) => /*#__PURE__*/jsx("div", {
-        children: child
-      }, idx))
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") Inline$1.displayName = "Inline";
-
-var _excluded$A = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
-var RadioField$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    label,
-    error,
-    checked,
-    onBlur,
-    onChange,
-    helperText,
-    FormControlLabelProps: formControlLabelProps
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$A);
-
-  return /*#__PURE__*/jsxs(FormControl$1, {
-    error: error,
-    children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
-      label: label,
-      checked: checked,
-      onBlur: onBlur,
-      onChange: onChange,
-      control: /*#__PURE__*/jsx(Radio$1, _objectSpread({
-        ref: ref,
-        color: "primary"
-      }, props))
-    })), helperText && /*#__PURE__*/jsx(FormHelperText$1, {
-      children: helperText
-    })]
-  });
-});
-if (process.env.NODE_ENV !== "production") RadioField$1.displayName = "RadioField";
-
-var _excluded$B = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
-var RadioGroupField$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    name,
-    value = '',
-    onChange,
-    RadioGroupProps: radioGroupProps,
-    label,
-    FormLabelProps: formLabelProps,
-    helperText,
-    FormHelperTextProps: formHelperTextProps,
-    children
-  } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$B);
-
-  return /*#__PURE__*/jsxs(FormControl$1, _objectSpread(_objectSpread({}, formControlProps), {}, {
-    hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsx(FormLabel$1, _objectSpread(_objectSpread({}, formLabelProps), {}, {
-      children: label
-    })), /*#__PURE__*/jsx(RadioGroup$1, _objectSpread(_objectSpread({
-      ref: ref
-    }, radioGroupProps), {}, {
-      name: name,
-      value: value,
-      onChange: onChange,
-      children: children
-    })), !!helperText && /*#__PURE__*/jsx(FormHelperText$1, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
-      children: helperText
-    }))]
-  }));
-});
-if (process.env.NODE_ENV !== "production") RadioGroupField$1.displayName = "RadioGroupField";
-
-var BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
-function useCollapseBreakpoint(collapseBreakpoint) {
-  var {
-    breakpoint = 'xs'
-  } = useResponsiveContext$1();
-
-  if (collapseBreakpoint == null) {
-    return false;
-  }
-
-  var breakpointIDX = BREAKPOINTS.indexOf(breakpoint);
-  var collapseBreakpointIDX = BREAKPOINTS.indexOf(collapseBreakpoint);
-  return breakpointIDX < collapseBreakpointIDX;
-}
-
-var _excluded$C = ["action", "children", "onClose", "className", "classes", "variant"],
-    _excluded2$5 = ["icon", "closeButton", "variantError", "variantSuccess"];
-var useStyles$d = /*#__PURE__*/makeStyles$1(theme => ({
-  root: {
-    color: Color$1.White,
-    backgroundColor: Color$1.Dark500,
-    '&$variantError': {
-      color: Color$1.White,
-      backgroundColor: Color$1.Red500
-    }
-  },
-  action: {
-    paddingLeft: theme.spacing(1)
-  },
-  message: {
-    alignItems: 'center',
-    [theme.breakpoints.down('xs')]: {
-      fontSize: theme.spacing(2)
-    }
-  },
-  icon: {
-    marginRight: theme.spacing(1),
-    fontSize: theme.spacing(3)
-  },
-  closeButton: {
-    color: Color$1.White40,
-    '&:hover, &:focus': {
-      backgroundColor: Color$1.White08,
-      color: Color$1.White40
-    }
-  },
-  variantError: {},
-  variantSuccess: {}
-}), {
-  name: 'SD-SnackbarContent'
-});
-var SnackbarContent$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    action,
-    children,
-    onClose,
-    className,
-    classes,
-    variant = 'default'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$C);
-
-  var _useStyles = useStyles$d({
-    classes
-  }),
-      {
-    icon,
-    closeButton,
-    variantError,
-    variantSuccess
-  } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$5);
-
-  var Icon = variant === 'error' ? Warning$1 : variant === 'success' ? CheckCircle$1 : undefined;
-  return /*#__PURE__*/jsx(SnackbarContent$3, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    classes: styles,
-    className: clsx(className, {
-      'error': variantError,
-      'success': variantSuccess
-    }[variant]),
-    message: /*#__PURE__*/jsxs(Fragment, {
-      children: [Icon && /*#__PURE__*/jsx(Icon, {
-        className: icon
-      }), children]
-    }),
-    action: !action && !onClose ? null : /*#__PURE__*/jsxs(Grid$1, {
-      container: true,
-      spacing: 1,
-      alignItems: "center",
-      wrap: "nowrap",
-      children: [!!action && /*#__PURE__*/jsx(Grid$1, {
-        item: true,
-        children: action
-      }), onClose && /*#__PURE__*/jsx(Grid$1, {
-        item: true,
-        children: /*#__PURE__*/jsx(IconButton$1, {
-          "aria-label": "close",
-          onClick: onClose,
-          className: closeButton,
-          children: /*#__PURE__*/jsx(Close$1, {
-            fontSize: "small"
-          })
-        })
-      })]
-    })
-  }));
-});
-if (process.env.NODE_ENV !== "production") SnackbarContent$1.displayName = "SnackbarContent";
-
-var _excluded$D = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
-
-function SlideTransition$1(props) {
-  return /*#__PURE__*/jsx(Slide$1, _objectSpread(_objectSpread({}, props), {}, {
-    direction: "up"
-  }));
-}
-
-var Snackbar$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    open,
-    action,
-    variant,
-    onClose,
-    children,
-    ContentProps,
-    hasCloseButton = onClose != null,
-    TransitionComponent = SlideTransition$1
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$D);
-
-  function handleClose(reason) {
-    if (reason !== 'clickaway') {
-      onClose === null || onClose === void 0 ? void 0 : onClose(reason === 'timeout' ? 'timeout' : 'explicit');
-    }
-  }
-
-  return /*#__PURE__*/jsx(Portal$1, {
-    children: /*#__PURE__*/jsx(Snackbar$3, _objectSpread(_objectSpread({}, props), {}, {
-      ref: ref,
-      open: open,
-      TransitionComponent: TransitionComponent,
-      onClose: (_, reason) => {
-        handleClose(reason);
-      },
-      children: /*#__PURE__*/jsx(SnackbarContent$1, _objectSpread(_objectSpread({}, ContentProps), {}, {
-        action: action,
-        variant: variant,
-        onClose: !hasCloseButton ? undefined : () => {
-          handleClose('explicit');
-        },
-        children: children
-      }))
-    }))
-  });
-});
-if (process.env.NODE_ENV !== "production") Snackbar$1.displayName = "Snackbar";
-
-var _excluded$E = ["onClose", "variant", "key", "id", "autoHideDuration"];
-
-function warnContext$1() {
-  // eslint-disable-next-line no-console
-  console.log('`useSnackbarStack` is used outside of `SnackbarStackProvider`.');
-}
-
-var Context$3 = /*#__PURE__*/createContext({
-  clearStack: warnContext$1,
-  addSnackbar: () => {
-    warnContext$1();
-    return warnContext$1;
-  }
-});
-function useSnackbarStack$1() {
-  return useContext(Context$3);
-}
-function SnackbarStackConsumer$1(_ref) {
-  var {
-    children
-  } = _ref;
-  return /*#__PURE__*/jsx(Context$3.Consumer, {
-    children: children
-  });
-}
-var TRANSIENT_KEY$1 = '@@transient@@';
-function SnackbarStackProvider$1(_ref2) {
-  var {
-    children
-  } = _ref2;
-  var [stack, setStack] = useState(new Map());
-  var transientKeyRef = useRef(0);
-  var getNextTransientKey = useCallback(() => TRANSIENT_KEY$1 + String(transientKeyRef.current += 1), []);
-  var clearStack = useCallback(() => {
-    setStack(x => x.size === 0 ? x : new Map());
-  }, []);
-  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$E);
-
-    function removeSnackbar() {
-      setStack(prev => {
-        if (prev.has(key)) {
-          var next = new Map(prev);
-          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.
-
-
-        if (typeof prevKey == 'string' && prevKey.startsWith(TRANSIENT_KEY$1)) {
-          next.delete(prevKey);
-        }
-      }
-
-      return next.set(key, _objectSpread(_objectSpread({}, props), {}, {
-        id,
-        key,
-        variant,
-        autoHideDuration,
-        children: message,
-        onClose: reason => {
-          removeSnackbar();
-          _onClose === null || _onClose === void 0 ? void 0 : _onClose(reason);
-        }
-      }));
-    });
-    return removeSnackbar;
-  }, [getNextTransientKey]);
-  var snackbarProps = useDeepEqualMemo(prev => {
-    var next = Array.from(stack.values()).pop();
-    return next ? _objectSpread(_objectSpread({}, next), {}, {
-      open: true
-    }) : _objectSpread(_objectSpread({}, prev), {}, {
-      open: false
-    });
-  }, [stack]);
-  var api = useMemo(() => ({
-    clearStack,
-    addSnackbar
-  }), [clearStack, addSnackbar]);
-  return /*#__PURE__*/jsxs(Context$3.Provider, {
-    value: api,
-    children: [children, /*#__PURE__*/jsx(Snackbar$1, _objectSpread({}, snackbarProps))]
-  });
-}
-
-function stackItemMixin$1(space, align) {
-  return css(["flex-direction:column;align-items:", ";display:", ";&:empty{display:none;}&:not(:empty) ~ div{padding-top:", "px;}"], parseAlignProp$1(align), align === 'left' ? 'block' : 'flex', parseSpaceProp$1(space));
-}
-
-var StackRoot$1 = /*#__PURE__*/styled$1.div.withConfig({
-  displayName: "Stack__StackRoot",
-  componentId: "SD__sc-qkml7c-0"
-})(_ref => {
-  var {
-    theme,
-    space,
-    align
-  } = _ref;
-  return css(["width:100%;& > div{", ";", "{", ";}", "{", ";}}"], stackItemMixin$1(space[0], align[0]), theme.breakpoints.up('sm'), stackItemMixin$1(space[1], align[1]), theme.breakpoints.up('md'), stackItemMixin$1(space[2], align[2]));
-});
-var Stack$1 = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  var {
-    children,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    space = 'xsmall',
-    align = 'left'
-  } = _ref2;
-  return /*#__PURE__*/jsx(StackRoot$1, {
-    ref: ref,
-    align: parseResponsiveProp$1(align),
-    space: parseResponsiveProp$1(space),
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    children: flattenChildren(children).map((child, idx) => /*#__PURE__*/jsx("div", {
-      children: child
-    }, idx))
-  });
-});
-if (process.env.NODE_ENV !== "production") Stack$1.displayName = "Stack";
-
-var _excluded$F = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
-var useStyles$e = /*#__PURE__*/makeStyles$1(theme => ({
-  root: {
-    maxWidth: '100%',
-    alignItems: 'center',
-    display: 'inline-flex',
-    borderRadius: theme.spacing(0.5),
-    padding: theme.spacing(0, 0.5)
-  },
-  variantSubtle: {
-    '&$colorGrey': {
-      color: Color$1.Dark300,
-      backgroundColor: Color$1.Silver200
-    },
-    '&$colorBlue': {
-      color: Color$1.Blue500,
-      backgroundColor: Color$1.Blue50
-    },
-    '&$colorGreen': {
-      color: Color$1.Green500,
-      backgroundColor: Color$1.Green50
-    },
-    '&$colorPurple': {
-      color: Color$1.Purple500,
-      backgroundColor: Color$1.Purple50
-    },
-    '&$colorRed': {
-      color: Color$1.Red500,
-      backgroundColor: Color$1.Red50
-    },
-    '&$colorTeal': {
-      color: Color$1.Teal500,
-      backgroundColor: Color$1.Teal50
-    },
-    '&$colorYellow': {
-      color: Color$1.Yellow500,
-      backgroundColor: Color$1.Yellow50
-    }
-  },
-  variantBold: {
-    color: Color$1.White,
-    '&$colorGrey': {
-      backgroundColor: Color$1.Dark300
-    },
-    '&$colorBlue': {
-      backgroundColor: Color$1.Blue500
-    },
-    '&$colorGreen': {
-      backgroundColor: Color$1.Green500
-    },
-    '&$colorPurple': {
-      backgroundColor: Color$1.Purple500
-    },
-    '&$colorRed': {
-      backgroundColor: Color$1.Red500
-    },
-    '&$colorTeal': {
-      backgroundColor: Color$1.Teal500
-    },
-    '&$colorYellow': {
-      backgroundColor: Color$1.Yellow500
-    }
-  },
-  colorGrey: {},
-  colorBlue: {},
-  colorGreen: {},
-  colorPurple: {},
-  colorRed: {},
-  colorTeal: {},
-  colorYellow: {}
-}), {
-  name: 'SD-Tag'
-});
-var Tag$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    color,
-    variant,
-    children,
-    classes,
-    className,
-    noWrap = true,
-    fontWeight = 'bold',
-    component = 'div'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$F);
-
-  var styles = useStyles$e({
-    classes
-  });
-  return /*#__PURE__*/jsx(Typography$1, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    noWrap: noWrap,
-    component: component,
-    variant: fontWeight === 'bold' ? 'body1' : 'body2',
-    className: clsx(styles.root, className, {
-      'grey': styles.colorGrey,
-      'blue': styles.colorBlue,
-      'green': styles.colorGreen,
-      'purple': styles.colorPurple,
-      'red': styles.colorRed,
-      'teal': styles.colorTeal,
-      'yellow': styles.colorYellow
-    }[color], {
-      'subtle': styles.variantSubtle,
-      'bold': styles.variantBold
-    }[variant]),
-    children: children
-  }));
-});
-if (process.env.NODE_ENV !== "production") Tag$1.displayName = "Tag";
-
-function overrideAppBar$1(theme) {
-  theme.props.MuiAppBar = {
-    elevation: 0,
-    color: 'inherit',
-    position: 'static'
-  };
-}
-
-function overrideAutocomplete$1(theme) {
-  var sm = theme.breakpoints.up('sm'); // Remove `Object.assign` after official release of `Autocomplete`.
-
-  Object.assign(theme.props, {
-    MuiAutocomplete: {
-      popupIcon: /*#__PURE__*/jsx(SvgIcon$1, {
-        children: /*#__PURE__*/jsx("path", {
-          d: "M12 16.5L6 9h12l-6 7.5z",
-          fill: "currentColor"
-        })
-      })
-    }
-  });
-  Object.assign(theme.overrides, {
-    MuiAutocomplete: {
-      paper: _objectSpread({}, theme.typography.body2),
-      tag: {
-        margin: '4px',
-        [sm]: {
-          margin: '2px'
-        }
-      },
-      endAdornment: {
-        top: 0,
-        bottom: 0,
-        display: 'flex',
-        alignItems: 'center'
-      },
-      popupIndicator: {
-        '& .MuiSvgIcon-root': {
-          fontSize: '24px',
-          [sm]: {
-            fontSize: '16px'
-          }
-        }
-      },
-      inputRoot: {
-        '&[class*="MuiOutlinedInput-root"]': {
-          padding: '6px 8px',
-          '& $input': {
-            width: '144px',
-            padding: '4px'
-          },
-          '& $input:first-child': {
-            paddingLeft: undefined
-          },
-          '& $endAdornment': {
-            right: '12px'
-          },
-          [sm]: {
-            padding: theme.spacing(0.5, 0.75),
-            '& $input': {
-              padding: '2px'
-            },
-            '& $endAdornment': {
-              right: '8px'
-            }
-          }
-        }
-      }
-    }
-  });
-}
-
-function overrideAvatar$1(theme) {
-  theme.overrides.MuiAvatar = {
-    root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
-      textTransform: 'uppercase',
-      width: theme.spacing(5),
-      height: theme.spacing(5),
-      [theme.breakpoints.up('sm')]: {
-        width: theme.spacing(4),
-        height: theme.spacing(4)
-      }
-    }),
-    colorDefault: {
-      color: Color$1.Dark300,
-      backgroundColor: Color$1.Silver300
-    }
-  };
-}
-
-function outlineShadow$1() {
-  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color$1.Transparent;
-  return "0 0 0 ".concat(size, "px ").concat(color);
-}
-
-function textVariant$1(text, outline, background, progress) {
-  return {
-    color: text,
-    boxShadow: outlineShadow$1(),
-    backgroundColor: Color$1.Transparent,
-    '&:hover': {
-      backgroundColor: background
-    },
-    '&[aria-expanded="true"]': {
-      backgroundColor: background
-    },
-    '&:focus': {
-      backgroundColor: background,
-      boxShadow: outlineShadow$1(2, outline)
-    },
-    '&$disabled': {
-      color: outline,
-      boxShadow: outlineShadow$1(),
-      backgroundColor: Color$1.Transparent
-    },
-    '&$disabled[aria-busy="true"]': {
-      color: progress
-    }
-  };
-}
-
-function outlinedBorder$1(borderColor) {
-  var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color$1.Transparent;
-  return "inset 0 0 0 1px ".concat(borderColor, ", 0 0 0 2px ").concat(outlineColor);
-}
-
-function outlinedVariant$1(staleText, staleBorder, disabledText, disabledBorder, activeText, activeBorder, activeOutline, activeBackground, progress, backgroundColor) {
-  return {
-    backgroundColor,
-    color: staleText,
-    border: undefined,
-    boxShadow: outlinedBorder$1(staleBorder),
-    '&:hover': {
-      color: activeText,
-      border: undefined,
-      backgroundColor: activeBackground,
-      boxShadow: outlinedBorder$1(activeBorder)
-    },
-    '&[aria-expanded="true"]': {
-      color: activeText,
-      backgroundColor: activeBackground,
-      boxShadow: outlinedBorder$1(activeBorder)
-    },
-    '&:focus': {
-      boxShadow: outlinedBorder$1(activeBorder, activeOutline)
-    },
-    '&$disabled': {
-      backgroundColor,
-      color: disabledText,
-      boxShadow: outlinedBorder$1(disabledBorder)
-    },
-    '&$disabled[aria-busy="true"]': {
-      color: progress
-    }
-  };
-}
-
-function containedVariant$1(text, backgroundColor, outline, active, disabledText, disabledBackground) {
-  return {
-    color: text,
-    backgroundColor,
-    boxShadow: outlineShadow$1(),
-    '&:hover': {
-      backgroundColor: active
-    },
-    '&[aria-expanded="true"]': {
-      backgroundColor: active
-    },
-    '&:focus': {
-      boxShadow: outlineShadow$1(3, outline)
-    },
-    '&$disabled': {
-      color: disabledText,
-      boxShadow: outlineShadow$1(),
-      backgroundColor: disabledBackground
-    }
-  };
-}
-
-function overrideButton$1(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.props.MuiButton = {
-    color: 'primary',
-    variant: 'outlined',
-    disableFocusRipple: true
-  };
-  theme.overrides.MuiButton = {
-    root: {
-      color: undefined,
-      minWidth: theme.spacing(6),
-      transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
-      padding: theme.spacing(1.25, 3),
-      [sm]: {
-        padding: theme.spacing(0.75, 2)
-      },
-      '&:hover': {
-        backgroundColor: undefined,
-        '&$disabled': {
-          backgroundColor: undefined
-        },
-        '@media (hover: none)': {
-          backgroundColor: undefined
-        }
-      },
-      '&$disabled': {
-        color: undefined
-      },
-      '&[aria-busy="true"]': {
-        '& $label': {
-          visibility: 'hidden',
-          '& > [role="progressbar"]': {
-            position: 'absolute',
-            visibility: 'visible',
-            top: 'calc(50% - 0.5em)',
-            left: 'calc(50% - 0.5em)',
-            fontSize: theme.spacing(2),
-            '$sizeLarge &': {
-              fontSize: theme.spacing(3)
-            }
-          }
-        }
-      }
-    },
-    label: {
-      '& > .MuiSvgIcon-root': {
-        fontSize: '24px',
-        [sm]: {
-          fontSize: '20px'
-        },
-        '$sizeLarge &': {
-          fontSize: '28px',
-          [sm]: {
-            fontSize: '24px'
-          }
-        }
-      }
-    },
-    sizeSmall: {
-      padding: theme.spacing(0.5, 3),
-      [sm]: {
-        padding: theme.spacing(0.25, 2)
-      }
-    },
-    sizeLarge: {
-      fontSize: '18px',
-      lineHeight: '28px',
-      padding: theme.spacing(1.75, 8),
-      [sm]: {
-        fontSize: '16px',
-        lineHeight: '24px',
-        padding: theme.spacing(1, 4)
-      }
-    },
-    text: {
-      padding: undefined,
-      '&[data-color="error"]': textVariant$1(Color$1.Red300, Color$1.Red100, Color$1.Red50, Color$1.Red200),
-      '&[data-color="success"]': textVariant$1(Color$1.Green300, Color$1.Green100, Color$1.Green50, Color$1.Green200),
-      '&[data-color="white"]': textVariant$1(Color$1.White, Color$1.White50, Color$1.White10, Color$1.White50)
-    },
-    textPrimary: textVariant$1(Color$1.Blue300, Color$1.Blue100, Color$1.Blue50, Color$1.Blue200),
-    textSizeSmall: {
-      padding: undefined,
-      fontSize: undefined
-    },
-    textSizeLarge: {
-      padding: undefined,
-      fontSize: undefined
-    },
-    outlined: {
-      border: undefined,
-      padding: undefined,
-      '&$disabled': {
-        border: undefined
-      },
-      '&[data-color="error"]': outlinedVariant$1(Color$1.Red300, Color$1.Red300, Color$1.Red100, Color$1.Red100, Color$1.Red300, Color$1.Red300, Color$1.Red100, Color$1.Red50, Color$1.Red300, Color$1.White),
-      '&[data-color="success"]': outlinedVariant$1(Color$1.Green300, Color$1.Green300, Color$1.Green100, Color$1.Green100, Color$1.Green300, Color$1.Green300, Color$1.Green100, Color$1.Green50, Color$1.Green300, Color$1.White),
-      '&[data-color="white"]': outlinedVariant$1(Color$1.White, Color$1.White50, Color$1.White50, Color$1.White40, Color$1.White, Color$1.White50, Color$1.White40, Color$1.White10, Color$1.White50, Color$1.Transparent)
-    },
-    outlinedPrimary: outlinedVariant$1(Color$1.Dark500, Color$1.Silver500, Color$1.Silver500, Color$1.Silver400, Color$1.Blue300, Color$1.Blue300, Color$1.Blue100, Color$1.Blue50, Color$1.Dark200, Color$1.White),
-    outlinedSizeSmall: {
-      padding: undefined,
-      fontSize: undefined
-    },
-    outlinedSizeLarge: {
-      padding: undefined,
-      fontSize: undefined
-    },
-    contained: {
-      boxShadow: undefined,
-      backgroundColor: undefined,
-      '&:hover': {
-        boxShadow: undefined,
-        backgroundColor: undefined,
-        '&$disabled': {
-          backgroundColor: undefined
-        },
-        '@media (hover: none)': {
-          boxShadow: undefined,
-          backgroundColor: undefined
-        }
-      },
-      '&:active': {
-        boxShadow: undefined
-      },
-      '&$focusVisible': {
-        boxShadow: undefined
-      },
-      '&$disabled': {
-        color: undefined,
-        boxShadow: undefined,
-        backgroundColor: undefined
-      },
-      '&[data-color="error"]': containedVariant$1(Color$1.White, Color$1.Red300, Color$1.Red100, Color$1.Red500, Color$1.White, Color$1.Red100),
-      '&[data-color="success"]': containedVariant$1(Color$1.White, Color$1.Green300, Color$1.Green100, Color$1.Green500, Color$1.White, Color$1.Green100),
-      '&[data-color="white"]': containedVariant$1(Color$1.White, Color$1.White20, Color$1.White40, Color$1.White40, Color$1.White50, Color$1.White08)
-    },
-    containedPrimary: containedVariant$1(Color$1.White, Color$1.Blue300, Color$1.Blue100, Color$1.Blue500, Color$1.White, Color$1.Blue100),
-    containedSizeSmall: {
-      padding: undefined,
-      fontSize: undefined
-    },
-    containedSizeLarge: {
-      padding: undefined,
-      fontSize: undefined
-    }
-  };
-}
-
-function overrideCard$1(theme) {
-  theme.props.MuiCard = {
-    variant: 'outlined'
-  };
-  theme.overrides.MuiCardContent = {
-    root: {
-      '&:last-child': {
-        paddingBottom: undefined
-      }
-    }
-  };
-}
-
-function overrideCheckbox$1(theme) {
-  theme.props.MuiCheckbox = {
-    color: 'primary',
-    icon: /*#__PURE__*/jsx(SvgIcon$1, {
-      children: /*#__PURE__*/jsx("rect", {
-        width: "17",
-        height: "17",
-        x: "3.5",
-        y: "3.5",
-        fill: Color$1.White,
-        stroke: "currentColor",
-        rx: "1.5"
-      })
-    }),
-    checkedIcon: /*#__PURE__*/jsxs(SvgIcon$1, {
-      children: [/*#__PURE__*/jsx("rect", {
-        width: "18",
-        height: "18",
-        x: "3",
-        y: "3",
-        fill: "currentColor",
-        rx: "2"
-      }), /*#__PURE__*/jsx("path", {
-        fill: Color$1.White,
-        d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
-      })]
-    }),
-    indeterminateIcon: /*#__PURE__*/jsxs(SvgIcon$1, {
-      children: [/*#__PURE__*/jsx("rect", {
-        width: "18",
-        height: "18",
-        x: "3",
-        y: "3",
-        fill: "currentIcon",
-        rx: "2"
-      }), /*#__PURE__*/jsx("path", {
-        fill: Color$1.White,
-        d: "M7 11h10v2H7v-2z"
-      })]
-    })
-  };
-  theme.overrides.MuiCheckbox = {
-    root: {
-      color: Color$1.Dark100,
-      marginTop: theme.spacing(-0.625),
-      marginBottom: theme.spacing(-0.625)
-    },
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: Color$1.Silver500
-      },
-      '&:hover:not($checked)': {
-        color: Color$1.Dark100
-      }
-    }
-  };
-}
-
-function overrideChip$1(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.props.MuiChip = {
-    size: 'small',
-    deleteIcon: /*#__PURE__*/jsx("div", {
-      children: /*#__PURE__*/jsx(SvgIcon$1, {
-        children: /*#__PURE__*/jsx("path", {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z",
-          fill: "currentColor"
-        })
-      })
-    })
-  };
-  theme.overrides.MuiChip = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: undefined,
-      height: undefined,
-      borderRadius: 4,
-      backgroundColor: Color$1.Silver200,
-      '&$disabled': {
-        opacity: undefined,
-        color: Color$1.Dark100
-      }
-    }),
-    sizeSmall: {
-      height: undefined
-    },
-    labelSmall: {
-      paddingLeft: 6,
-      paddingRight: 6,
-      [sm]: {
-        paddingLeft: 4,
-        paddingRight: 4
-      }
-    },
-    clickable: {
-      '&:hover, &:focus': {
-        backgroundColor: undefined
-      },
-      '&:active': {
-        boxShadow: undefined
-      },
-      '&:focus': {
-        boxShadow: "0 0 0 2px ".concat(Color$1.Silver300)
-      },
-      '&:active, &:hover': {
-        backgroundColor: Color$1.Silver300
-      }
-    },
-    deletable: {
-      '&:focus': {
-        backgroundColor: undefined,
-        boxShadow: "0 0 0 2px ".concat(Color$1.Silver300)
-      }
-    },
-    deleteIcon: {
-      width: undefined,
-      height: undefined,
-      display: 'flex',
-      transition: theme.transitions.create('background-color'),
-      '&:active, &:hover, &:focus': {
-        '& > svg': {
-          backgroundColor: Color$1.Silver400
-        }
-      },
-      '& > svg': {
-        borderRadius: '50%',
-        color: Color$1.Dark200,
-        fontSize: '1em'
-      }
-    },
-    deleteIconSmall: {
-      width: undefined,
-      height: undefined,
-      padding: theme.spacing(0.5),
-      marginLeft: theme.spacing(-0.5),
-      marginRight: theme.spacing(0.25),
-      [sm]: {
-        marginRight: 0
-      }
-    },
-    icon: {
-      color: Color$1.Dark100,
-      fontSize: '1em',
-      marginRight: undefined
-    },
-    iconSmall: {
-      width: undefined,
-      height: undefined,
-      marginLeft: 8,
-      marginRight: undefined,
-      [sm]: {
-        marginLeft: 4
-      }
-    }
-  };
-}
-
-function overrideDialog$1(theme) {
-  theme.props.MuiDialogTitle = {
-    disableTypography: true
-  };
-  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 = {
-    root: _objectSpread({}, theme.typography.h3)
-  };
-  theme.overrides.MuiDialogContent = {
-    root: {
-      padding: theme.spacing(0, 3)
-    }
-  };
-  theme.overrides.MuiDialogActions = {
-    root: {
-      padding: theme.spacing(3)
-    },
-    spacing: {
-      '& > :not(:first-child)': {
-        marginLeft: theme.spacing(2)
-      }
-    }
-  };
-}
-
-function overrideDrawer$1(theme) {
-  theme.props.MuiDrawer = {
-    anchor: 'right'
-  };
-  theme.overrides.MuiDrawer = {
-    paper: {
-      maxWidth: '100%',
-      minWidth: '100%',
-      [theme.breakpoints.up('sm')]: {
-        minWidth: theme.spacing(54),
-        maxWidth: theme.breakpoints.values.sm
-      }
-    }
-  };
-}
-
-function overrideIconButton$1(theme) {
-  theme.overrides.MuiIconButton = {
-    root: {
-      color: Color$1.Dark100,
-      backgroundColor: Color$1.Transparent,
-      transition: theme.transitions.create(['color', 'background-color'], {
-        duration: theme.transitions.duration.short
-      }),
-      '&:hover': {
-        backgroundColor: Color$1.Transparent
-      },
-      '&:active': {
-        color: Color$1.Dark500
-      },
-      '&:hover ': {
-        color: Color$1.Dark300
-      },
-      '&:focus': {
-        backgroundColor: Color$1.Silver400
-      },
-      '&$disabled': {
-        color: Color$1.Silver500
-      }
-    },
-    colorPrimary: {
-      '&:active': {
-        color: Color$1.Blue500
-      },
-      '&:hover ': {
-        color: Color$1.Blue300
-      },
-      '&:focus': {
-        backgroundColor: Color$1.Blue50
-      }
-    },
-    edgeEnd: {
-      marginRight: theme.spacing(-1)
-    },
-    edgeStart: {
-      marginLeft: theme.spacing(-1)
-    }
-  };
-}
-
-function line$1(color) {
-  return "linear-gradient(to right, ".concat(color, " 0%, ").concat(color, " 100%)");
-}
-
-function overrideLink$1(theme) {
-  theme.props.MuiLink = {
-    underline: 'none',
-    color: 'textPrimary'
-  };
-  theme.overrides.MuiLink = {
-    root: {
-      backgroundSize: '100% 1px',
-      backgroundRepeat: 'repeat-x',
-      backgroundPosition: '0 100%',
-      backgroundColor: Color$1.Transparent,
-      '&:focus': {
-        outline: 'none'
-      },
-      '&:hover, &:active': {
-        backgroundImage: line$1('currentColor')
-      },
-      '&.MuiTypography-colorTextPrimary': {
-        backgroundImage: line$1(Color$1.Silver500),
-        '&:focus, &:hover, &:active': {
-          color: Color$1.Blue300,
-          backgroundImage: line$1(Color$1.Blue300)
-        }
-      }
-    },
-    button: {
-      // Reset button styles.
-      backgroundColor: undefined,
-      // Override browser defaults.
-      fontSize: 'inherit',
-      textAlign: 'inherit',
-      lineHeight: 'inherit',
-      userSelect: 'inherit',
-      verticalAlign: 'inherit'
-    }
-  };
-}
-
-function overrideList$1(theme) {
-  theme.overrides.MuiListItem = {
-    root: {
-      '&$selected, &$selected:hover': {
-        backgroundColor: Color$1.Blue50
-      },
-      '& .MuiTouchRipple-root': {
-        color: Color$1.Blue100
-      }
-    }
-  };
-}
-
-function overrideMenu$1(theme) {
-  theme.props.MuiMenu = {
-    getContentAnchorEl: null,
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'left'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'left'
-    }
-  };
-  theme.overrides.MuiMenuItem = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
-    })
-  };
-}
-
-function overridePagination$1(theme) {
-  var props = {};
-  var overrides = {
-    root: {
-      color: Color$1.Dark400
-    },
-    page: {
-      '&:hover': {
-        backgroundColor: Color$1.Silver200
-      },
-      '&$focusVisible': {
-        borderRadius: 4,
-        backgroundColor: Color$1.White,
-        border: "1px solid ".concat(Color$1.Blue100)
-      },
-      '&$selected': {
-        backgroundColor: Color$1.Silver400,
-        '&:hover, &$focusVisible': {
-          backgroundColor: Color$1.Silver400
-        },
-        '&$disabled': {
-          color: Color$1.Dark100,
-          backgroundColor: Color$1.Silver400
-        }
-      },
-      '&$disabled': {
-        opacity: undefined,
-        color: Color$1.Dark100
-      }
-    }
-  }; // Remove `Object.assign` after official release of `PaginationItem`.
-
-  Object.assign(theme.props, {
-    MuiPaginationItem: props
-  });
-  Object.assign(theme.overrides, {
-    MuiPaginationItem: overrides
-  });
-}
-
-function overridePaper$1(theme) {
-  theme.props.MuiPaper = {
-    elevation: 0
-  };
-  theme.overrides.MuiPaper = {
-    elevation0: {
-      border: "1px solid ".concat(Color$1.Silver400)
-    }
-  };
-}
-
-function overrideRadio$1(theme) {
-  theme.props.MuiRadio = {
-    color: 'primary',
-    icon: /*#__PURE__*/jsx(SvgIcon$1, {
-      children: /*#__PURE__*/jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "8.5",
-        fill: Color$1.White,
-        stroke: "currentColor"
-      })
-    }),
-    checkedIcon: /*#__PURE__*/jsxs(SvgIcon$1, {
-      children: [/*#__PURE__*/jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "8.5",
-        fill: "currentColor",
-        stroke: "currentColor"
-      }), /*#__PURE__*/jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "4",
-        fill: Color$1.White
-      })]
-    })
-  };
-  theme.overrides.MuiRadio = {
-    root: {
-      color: Color$1.Dark100,
-      marginTop: theme.spacing(-0.625),
-      marginBottom: theme.spacing(-0.625)
-    },
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: Color$1.Silver500
-      },
-      '&:hover:not($checked)': {
-        color: Color$1.Dark100
-      }
-    }
-  };
-}
-
-function overrideSnackbar$1(theme) {
-  theme.overrides.MuiSnackbar = {
-    anchorOriginBottomCenter: {
-      left: 0,
-      right: 0,
-      bottom: 0
-    }
-  };
-  theme.overrides.MuiSnackbarContent = {
-    root: {
-      width: '100%',
-      borderRadius: 0,
-      minHeight: theme.spacing(7.5),
-      [theme.breakpoints.up('sm')]: {
-        width: theme.spacing(54),
-        maxWidth: theme.spacing(54),
-        borderRadius: theme.spacing(0.5)
-      }
-    },
-    message: {
-      flex: 1,
-      display: 'flex'
-    }
-  };
-}
-
-function overrideSvgIcon$1(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.overrides.MuiSvgIcon = {
-    root: {
-      display: 'inherit',
-      fontSize: 'var(--mui-svg-icon-size, 32px)',
-      [sm]: {
-        fontSize: 'var(--mui-svg-icon-size, 24px)'
-      }
-    },
-    fontSizeSmall: {
-      fontSize: 'var(--mui-svg-icon-size, 24px)',
-      [sm]: {
-        fontSize: 'var(--mui-svg-icon-size, 16px)'
-      }
-    },
-    fontSizeLarge: {
-      fontSize: 'var(--mui-svg-icon-size, 32px)'
-    },
-    colorAction: {
-      color: Color$1.Dark100
-    }
-  };
-}
-
-function overrideSwitch$1(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.props.MuiSwitch = {
-    color: 'primary',
-    disableRipple: true,
-    disableFocusRipple: true
-  };
-  theme.overrides.MuiSwitch = {
-    root: {
-      width: theme.spacing(9.5),
-      height: theme.spacing(5.5),
-      padding: theme.spacing(0.75, 1.5),
-      [sm]: {
-        width: theme.spacing(8),
-        height: theme.spacing(4),
-        padding: theme.spacing(0.5, 1.5)
-      }
-    },
-    track: {
-      opacity: undefined,
-      boxShadow: "0 0 0 0 ".concat(Color$1.Transparent),
-      transition: theme.transitions.create(['box-shadow', 'background-color'], {
-        duration: theme.transitions.duration.shortest
-      }),
-      borderRadius: theme.spacing(2),
-      [sm]: {
-        borderRadius: theme.spacing(1.625)
-      }
-    },
-    thumb: {
-      color: Color$1.White,
-      boxShadow: undefined,
-      width: theme.spacing(3),
-      height: theme.spacing(3),
-      [sm]: {
-        width: theme.spacing(2),
-        height: theme.spacing(2)
-      }
-    },
-    switchBase: {
-      left: theme.spacing(1),
-      padding: theme.spacing(1.25, 1),
-      [sm]: {
-        padding: theme.spacing(1)
-      },
-      '&$checked': {
-        transform: "translateX(".concat(theme.spacing(2.5), "px)"),
-        [sm]: {
-          transform: "translateX(".concat(theme.spacing(2), "px)")
-        }
-      },
-      '&$checked + $track': {
-        opacity: undefined
-      },
-      '&$disabled + $track': {
-        opacity: undefined
-      }
-    },
-    colorPrimary: {
-      '&$checked': {
-        color: undefined,
-        '&:hover': {
-          backgroundColor: undefined,
-          '& + $track': {
-            backgroundColor: Color$1.Blue400
-          }
-        }
-      },
-      '& + $track': {
-        backgroundColor: Color$1.Silver500
-      },
-      '&$disabled + $track': {
-        backgroundColor: Color$1.Silver300
-      },
-      '&$checked$disabled + $track': {
-        backgroundColor: Color$1.Blue100
-      },
-      '&:hover + $track': {
-        backgroundColor: Color$1.Dark100
-      },
-      '&.Mui-focusVisible + $track': {
-        boxShadow: "0 0 0 3px ".concat(Color$1.Blue100)
-      }
-    }
-  };
-}
-
-function overrideTabs$1(theme) {
-  theme.props.MuiTabs = {
-    variant: 'scrollable',
-    textColor: 'primary',
-    indicatorColor: 'primary'
-  };
-  theme.overrides.MuiTabs = {
-    root: {
-      minHeight: theme.spacing(6)
-    },
-    scrollButtons: {
-      opacity: 1,
-      color: Color$1.Dark100,
-      width: theme.spacing(4),
-      transition: theme.transitions.create('opacity', {
-        duration: theme.transitions.duration.short
-      })
-    }
-  };
-  theme.overrides.MuiTab = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      minHeight: theme.spacing(6),
-      transition: theme.transitions.create(['color'], {
-        duration: theme.transitions.duration.short
-      }),
-      [theme.breakpoints.up('sm')]: {
-        minWidth: undefined,
-        fontSize: undefined,
-        padding: theme.spacing(0.75, 3)
-      }
-    }),
-    textColorPrimary: {
-      color: Color$1.Dark500,
-      '&:hover, &:focus': {
-        color: Color$1.Blue300
-      }
-    }
-  };
-}
-
-var SelectIcon$1 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/jsx(SvgIcon$1, _objectSpread(_objectSpread({
-  ref: ref
-}, props), {}, {
-  children: /*#__PURE__*/jsx("path", {
-    d: "M12 16.5L6 9h12l-6 7.5z",
-    fill: "currentColor"
-  })
-})));
-if (process.env.NODE_ENV !== "production") SelectIcon$1.displayName = "SelectIcon";
-function overrideTextField$1(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.props.MuiTextField = {
-    minRows: 4,
-    maxRows: 4,
-    variant: 'outlined'
-  };
-  theme.overrides.MuiFormLabel = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: Color$1.Dark400,
-      '&$error': {
-        color: undefined
-      },
-      '&$focused': {
-        color: undefined
-      },
-      '&$disabled': {
-        color: undefined
-      }
-    })
-  };
-  theme.overrides.MuiInputBase = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      '&$disabled': {
-        backgroundColor: Color$1.Silver100
-      }
-    }),
-    input: {
-      textOverflow: 'ellipsis',
-      height: theme.spacing(3),
-      [sm]: {
-        height: theme.spacing(2.5)
-      }
-    },
-    inputMultiline: {
-      resize: 'vertical'
-    }
-  };
-  theme.props.MuiInputLabel = {
-    shrink: true
-  };
-  theme.overrides.MuiInputLabel = {
-    root: {
-      marginBottom: theme.spacing(0.5),
-      transformOrigin: undefined
-    },
-    formControl: {
-      top: undefined,
-      left: undefined,
-      position: undefined,
-      transform: undefined
-    },
-    shrink: {
-      transform: undefined,
-      transformOrigin: undefined
-    },
-    outlined: {
-      zIndex: undefined,
-      transform: undefined,
-      pointerEvents: undefined,
-      '&$shrink': {
-        transform: undefined
-      }
-    }
-  };
-  theme.props.MuiOutlinedInput = {
-    notched: false
-  };
-  theme.overrides.MuiOutlinedInput = {
-    root: {
-      '&:hover $notchedOutline': {
-        borderColor: undefined
-      }
-    },
-    input: {
-      padding: theme.spacing(1.25, 1.5),
-      [sm]: {
-        padding: theme.spacing(0.75, 1)
-      }
-    },
-    multiline: {
-      padding: theme.spacing(0.75, 1)
-    },
-    adornedStart: {
-      paddingLeft: theme.spacing(1)
-    },
-    adornedEnd: {
-      paddingRight: theme.spacing(1)
-    },
-    notchedOutline: {
-      top: 0,
-      borderColor: Color$1.Silver500,
-      '& legend': {
-        display: 'none'
-      }
-    }
-  };
-  theme.props.MuiSelect = {
-    IconComponent: SelectIcon$1
-  };
-  theme.overrides.MuiSelect = {
-    icon: {
-      top: 'calc(50% - 0.5em)',
-      '$disabled &': {
-        color: Color$1.Dark100
-      },
-      fontSize: theme.spacing(3),
-      [sm]: {
-        fontSize: theme.spacing(2)
-      }
-    },
-    iconOutlined: {
-      right: theme.spacing(1.5),
-      [sm]: {
-        right: theme.spacing(1)
-      }
-    },
-    select: {
-      '&:focus': {
-        backgroundColor: undefined
-      }
-    },
-    selectMenu: {
-      '&&': {
-        paddingRight: theme.spacing(4.5),
-        [sm]: {
-          right: theme.spacing(4)
-        }
-      }
-    }
-  };
-  theme.overrides.MuiInputAdornment = {
-    root: {
-      '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
-        fontSize: theme.spacing(3),
-        [sm]: {
-          fontSize: theme.spacing(2.5)
-        }
-      },
-      '& .MuiIconButton-root': {
-        padding: theme.spacing(1)
-      }
-    },
-    positionStart: {
-      '& .MuiIconButton-root': {
-        marginLeft: theme.spacing(-0.5),
-        [sm]: {
-          marginLeft: theme.spacing(-0.75)
-        }
-      }
-    },
-    positionEnd: {
-      '& .MuiIconButton-root': {
-        marginRight: theme.spacing(-0.5),
-        [sm]: {
-          marginRight: theme.spacing(-0.75)
-        }
-      }
-    }
-  };
-  theme.overrides.MuiFormHelperText = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      marginTop: theme.spacing(0.5)
-    }),
-    contained: {
-      marginLeft: undefined,
-      marginRight: undefined
-    }
-  };
-}
-
-function overrideToolbar$1(theme) {
-  theme.overrides.MuiToolbar = {
-    regular: {
-      minHeight: theme.spacing(8)
-    },
-    gutters: {
-      [theme.breakpoints.up('sm')]: {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
-      }
-    }
-  };
-}
-
-function overrideTooltip$1(theme) {
-  theme.props.MuiTooltip = {
-    arrow: true
-  };
-  theme.overrides.MuiTooltip = {
-    tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      padding: theme.spacing(1, 1.5),
-      backgroundColor: Color$1.Dark400
-    }),
-    popperArrow: {
-      '&[x-placement*="top"] $arrow': {
-        '&::before': {
-          borderBottomRightRadius: 2
-        }
-      },
-      '&[x-placement*="left"] $arrow': {
-        '&::before': {
-          borderTopRightRadius: 2
-        }
-      },
-      '&[x-placement*="right"] $arrow': {
-        '&::before': {
-          borderBottomLeftRadius: 2
-        }
-      },
-      '&[x-placement*="bottom"] $arrow': {
-        '&::before': {
-          borderTopLeftRadius: 2
-        }
-      }
-    },
-    arrow: {
-      color: Color$1.Dark400,
-      fontSize: theme.spacing(1)
-    }
-  };
-}
-
-function createTypographyOptions$1(breakpoints) {
-  var xsOnly = breakpoints.only('xs');
-  return {
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-    fontWeightBold: 600,
-    fontFamily: '"Inter", sans-serif',
-    h1: {
-      fontSize: '32px',
-      lineHeight: '40px',
-      fontWeight: 700,
-      [xsOnly]: {
-        fontSize: '28px',
-        lineHeight: '36px'
-      }
-    },
-    h2: {
-      fontSize: '24px',
-      lineHeight: '28px',
-      fontWeight: 500,
-      [xsOnly]: {
-        fontSize: '22px',
-        lineHeight: '26px'
-      }
-    },
-    h3: {
-      fontSize: '20px',
-      lineHeight: '28px',
-      fontWeight: 500,
-      [xsOnly]: {
-        fontSize: '20px',
-        lineHeight: '26px'
-      }
-    },
-    h4: {
-      fontSize: '16px',
-      lineHeight: '24px',
-      fontWeight: 500,
-      [xsOnly]: {
-        fontSize: '17px',
-        lineHeight: '26px'
-      }
-    },
-    h5: {
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: 600,
-      [xsOnly]: {
-        fontSize: '16px',
-        lineHeight: '24px'
-      }
-    },
-    h6: {
-      fontSize: '12px',
-      lineHeight: '16px',
-      fontWeight: 700,
-      letterSpacing: '0.1em',
-      textTransform: 'uppercase',
-      [xsOnly]: {
-        fontSize: '14px',
-        lineHeight: '20px'
-      }
-    },
-    body1: {
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: 600,
-      [xsOnly]: {
-        fontSize: '16px',
-        lineHeight: '24px'
-      }
-    },
-    body2: {
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: 400,
-      [xsOnly]: {
-        fontSize: '16px',
-        lineHeight: '24px'
-      }
-    },
-    caption: {
-      fontSize: '12px',
-      lineHeight: '16px',
-      fontWeight: 400,
-      [xsOnly]: {
-        fontSize: '14px',
-        lineHeight: '20px'
-      }
-    },
-    button: {
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: 600,
-      textTransform: undefined,
-      [xsOnly]: {
-        fontSize: '16px',
-        lineHeight: '24px'
-      }
-    }
-  };
-}
-function overrideTypography$1(theme) {
-  theme.props.MuiTypography = {
-    variant: 'body2'
-  };
-}
-
-function createSuperDispatchTheme$1() {
-  var breakpoints = createBreakpoints$1({});
-  var theme = createTheme$1({
-    breakpoints,
-    palette: {
-      primary: {
-        main: Color$1.Blue300
-      },
-      error: {
-        main: Color$1.Red300
-      },
-      action: {
-        hover: Color$1.Silver100,
-        selected: Color$1.Silver300,
-        disabled: Color$1.Silver400
-      },
-      text: {
-        primary: Color$1.Dark500,
-        secondary: Color$1.Dark200,
-        hint: Color$1.Dark100,
-        disabled: Color$1.Dark100
-      },
-      divider: Color$1.Silver400
-    },
-    typography: createTypographyOptions$1(breakpoints),
-    props: {},
-    overrides: {}
-  });
-  overrideAppBar$1(theme);
-  overrideAutocomplete$1(theme);
-  overrideAvatar$1(theme);
-  overrideButton$1(theme);
-  overrideCard$1(theme);
-  overrideCheckbox$1(theme);
-  overrideChip$1(theme);
-  overrideDialog$1(theme);
-  overrideDrawer$1(theme);
-  overrideIconButton$1(theme);
-  overrideLink$1(theme);
-  overrideList$1(theme);
-  overrideMenu$1(theme);
-  overridePaper$1(theme);
-  overrideRadio$1(theme);
-  overrideSnackbar$1(theme);
-  overrideSvgIcon$1(theme);
-  overrideSwitch$1(theme);
-  overrideTabs$1(theme);
-  overrideTextField$1(theme);
-  overrideToolbar$1(theme);
-  overrideTooltip$1(theme);
-  overrideTypography$1(theme);
-  overridePagination$1(theme);
-  return theme;
-}
-
-var generateMaterialClassName$1 = /*#__PURE__*/createGenerateClassName$1();
-
-function generateClassName$1(rule, sheet) {
-  var {
-    meta,
-    link
-  } = (sheet === null || sheet === void 0 ? void 0 : sheet.options) || {};
-
-  if (meta && rule.type === 'style') {
-    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$1(rule, sheet);
-}
-
-function ThemeProvider$1(_ref) {
-  var {
-    modifier,
-    children,
-    injectFirst = true
-  } = _ref;
-  var theme = useConstant(() => {
-    var nextTheme = createSuperDispatchTheme$1();
-    return !modifier ? nextTheme : modifier(nextTheme);
-  });
-  return /*#__PURE__*/jsx(StylesProvider$1, {
-    injectFirst: injectFirst,
-    generateClassName: generateClassName$1,
-    children: /*#__PURE__*/jsxs(ThemeProvider$3, {
-      theme: theme,
-      children: [/*#__PURE__*/jsx(CssBaseline$1, {}), /*#__PURE__*/jsx(ThemeProvider$4, {
-        theme: theme,
-        children: /*#__PURE__*/jsx(ResponsiveContextProvider$1, {
-          children: /*#__PURE__*/jsx(SnackbarStackProvider$1, {
-            children: children
-          })
-        })
-      })]
-    })
-  });
-}
-
-var PREVENT_COLLAPSE$1 = 1;
-
-function spaceVariant$1(theme, space) {
-  var gap = theme.spacing(space);
-  return {
-    '&:before': {
-      marginTop: -gap - PREVENT_COLLAPSE$1
-    },
-    '& > $container': {
-      marginLeft: -gap,
-      '& > $child > $childContainer': {
-        marginTop: gap,
-        marginLeft: gap
-      }
-    }
-  };
-}
-
-function columnVariant$1(columns) {
-  return {
-    flex: "0 0 ".concat(100 / columns, "%")
-  };
-}
-
-var useStyles$f = /*#__PURE__*/makeStyles$1(theme => ({
-  root: {
-    paddingTop: PREVENT_COLLAPSE$1,
-    '&:before': {
-      content: '""',
-      display: 'block',
-      marginTop: -PREVENT_COLLAPSE$1
-    }
-  },
-  container: {
-    display: 'flex',
-    flexWrap: 'wrap'
-  },
-  child: {
-    minWidth: 0
-  },
-  childContainer: {
-    height: '100%'
-  },
-  space1: spaceVariant$1(theme, 1),
-  space2: spaceVariant$1(theme, 2),
-  space3: spaceVariant$1(theme, 3),
-  space4: spaceVariant$1(theme, 4),
-  space5: spaceVariant$1(theme, 5),
-  space6: spaceVariant$1(theme, 6),
-  space7: spaceVariant$1(theme, 7),
-  space8: spaceVariant$1(theme, 8),
-  space9: spaceVariant$1(theme, 9),
-  space10: spaceVariant$1(theme, 10),
-  columns1: columnVariant$1(1),
-  columns2: columnVariant$1(2),
-  columns3: columnVariant$1(3),
-  columns4: columnVariant$1(4),
-  columns5: columnVariant$1(5),
-  columns6: columnVariant$1(6)
-}), {
-  name: 'SD-Tiles'
-});
-var Tiles$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    children,
-    space: spaceProp = 1,
-    columns: columnsProp = 1
-  } = _ref;
-  var styles = useStyles$f({});
-  var space = useResponsivePropRecord$1(spaceProp);
-  var columns = useResponsivePropRecord$1(columnsProp);
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    className: clsx(styles.root, space === 1 && styles.space1, space === 2 && styles.space2, space === 3 && styles.space3, space === 4 && styles.space4, space === 5 && styles.space5, space === 6 && styles.space6, space === 7 && styles.space7, space === 8 && styles.space8, space === 9 && styles.space9, space === 10 && styles.space10),
-    children: /*#__PURE__*/jsx("div", {
-      className: styles.container,
-      children: flattenChildren(children).map((child, idx) => /*#__PURE__*/jsx("div", {
-        className: clsx(styles.child, columns === 1 && styles.columns1, columns === 2 && styles.columns2, columns === 3 && styles.columns3, columns === 4 && styles.columns4, columns === 5 && styles.columns5, columns === 6 && styles.columns6),
-        children: /*#__PURE__*/jsx("div", {
-          className: styles.childContainer,
-          children: child
-        })
-      }, idx))
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") Tiles$1.displayName = "Tiles";
-
-export { AdaptiveToolbar$1 as AdaptiveToolbar, AvatarButton$1 as AvatarButton, Button$1 as Button, CardButton$1 as CardButton, CheckboxField$1 as CheckboxField, CheckboxGroupField$1 as CheckboxGroupField, Color$1 as Color, Column$1 as Column, Columns$1 as Columns, DescriptionList$1 as DescriptionList, DescriptionListItem$1 as DescriptionListItem, DrawerActions$1 as DrawerActions, DrawerContent$1 as DrawerContent, DrawerList$1 as DrawerList, DrawerTitle$1 as DrawerTitle, GridStack$1 as GridStack, InfoCard$1 as InfoCard, Inline$1 as Inline, InlineGrid$1 as InlineGrid, OverflowText$1 as OverflowText, RadioField$1 as RadioField, RadioGroupField$1 as RadioGroupField, ResponsiveContextProvider$1 as ResponsiveContextProvider, Snackbar$1 as Snackbar, SnackbarContent$1 as SnackbarContent, SnackbarStackConsumer$1 as SnackbarStackConsumer, SnackbarStackProvider$1 as SnackbarStackProvider, Stack$1 as Stack, Tag$1 as Tag, ThemeProvider$1 as ThemeProvider, Tiles$1 as Tiles, VisibilityObserver$1 as VisibilityObserver, assignRef$1 as assignRef, isColorProp$1 as isColorProp, isEmptyReactNode$1 as isEmptyReactNode, mergeRefs$1 as mergeRefs, parseAlignProp$1 as parseAlignProp, parseCollapsedBelow$1 as parseCollapsedBelow, parseResponsiveProp$1 as parseResponsiveProp, parseSpaceProp$1 as parseSpaceProp, renderChildren$1 as renderChildren, useCollapseBreakpoint, useResponsiveContext$1 as useResponsiveContext, useResponsiveProp$1 as useResponsiveProp, useResponsivePropRecord$1 as useResponsivePropRecord, useResponsiveValue$1 as useResponsiveValue, useSnackbarStack$1 as useSnackbarStack, useUID$1 as useUID, useVisibilityObserver$1 as useVisibilityObserver, index as v5 };
+export { AdaptiveToolbar, AvatarButton, Button, CardButton, CheckboxField, CheckboxGroupField, Color, Column, Columns, DescriptionList, DescriptionListItem, DrawerActions, DrawerContent, DrawerList, DrawerTitle, GridStack, InfoCard, Inline, InlineGrid, OverflowText, RadioField, RadioGroupField, Snackbar, SnackbarContent, SnackbarStackConsumer, SnackbarStackProvider, Stack, Tag, ThemeProvider, Tiles, VisibilityObserver, assignRef, isColorProp, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
 //# sourceMappingURL=index.js.map