@superdispatch/ui-lab 0.13.0 → 0.16.0-alpha.0

package/dist-node/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var icons = require('@material-ui/icons');
-var lab = require('@material-ui/lab');
+var iconsMaterial = require('@mui/icons-material');
+var lab = require('@mui/lab');
 var ui = require('@superdispatch/ui');
 var react = require('react');
 var styled = require('styled-components');
@@ -13,9 +13,13 @@ var styled__default = _interopDefault(styled);
 var jsxRuntime = require('react/jsx-runtime');
 var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread2'));
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var core = require('@material-ui/core');
+var reactTransitionGroup = require('react-transition-group');
+var material = require('@mui/material');
 var js = require('@mdi/js');
 var Dropzone = _interopDefault(require('react-dropzone'));
+var icons = require('@material-ui/icons');
+var lab$1 = require('@material-ui/lab');
+var core = require('@material-ui/core');
 
 function colorMixin(textColor, backgroundColor, buttonHoverColor) {
   return styled.css(["color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, backgroundColor, textColor, buttonHoverColor);
@@ -23,7 +27,7 @@ function colorMixin(textColor, backgroundColor, buttonHoverColor) {
 
 var StyledAlert = /*#__PURE__*/styled__default(lab.Alert).withConfig({
   displayName: "Alert__StyledAlert",
-  componentId: "SD__sc-1j6qebb-0"
+  componentId: "SD__sc-ahws81-0"
 })(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin(ui.Color.Green500, ui.Color.Green50, ui.Color.Green400), /*#__PURE__*/colorMixin(ui.Color.Blue500, ui.Color.Blue50, ui.Color.Blue400), /*#__PURE__*/colorMixin(ui.Color.Yellow500, ui.Color.Yellow50, ui.Color.Yellow400), /*#__PURE__*/colorMixin(ui.Color.Red500, ui.Color.Red50, ui.Color.Red400));
 
 function toMaterialSeverity(severity) {
@@ -31,9 +35,9 @@ function toMaterialSeverity(severity) {
 }
 
 var iconMapping = {
-  success: /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {}),
-  info: /*#__PURE__*/jsxRuntime.jsx(icons.Info, {}),
-  error: /*#__PURE__*/jsxRuntime.jsx(icons.Error, {})
+  success: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.CheckCircle, {}),
+  info: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Info, {}),
+  error: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Error, {})
 };
 var Alert = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -54,6 +58,60 @@ var Alert = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Alert.displayName = "Alert";
 
+var _excluded = ["children"],
+    _excluded2 = ["in"];
+
+function enterMixin(border) {
+  return styled.css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], ui.Color.Dark500, ui.Color.White, border);
+}
+
+function enterAnimation(border) {
+  return styled.keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], ui.Color.White, ui.Color.Dark500, ui.Color.White, ui.Color.Dark500, ui.Color.White, ui.Color.Dark500, enterMixin(border));
+}
+
+var CustomTransition = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    timeout: 3000,
+    classNames: props.className,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: children
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") CustomTransition.displayName = "CustomTransition";
+var BannerContent = /*#__PURE__*/styled__default(CustomTransition).withConfig({
+  displayName: "Banner__BannerContent",
+  componentId: "SD__sc-1y16295-0"
+})(_ref2 => {
+  var {
+    border = 'bottom'
+  } = _ref2;
+  return styled.css(["height:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:", ";background-color:", ";&-enter-active{animation:", " 2s 1s forwards;}&-enter-done{", ";}&-exit{", ";}&-exit-active{min-height:0;transition:min-height 2s 1s;}"], ui.Color.White, ui.Color.White, enterAnimation(border), enterMixin(border), enterMixin(border));
+});
+var Banner = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
+  var {
+    in: inProp
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2);
+
+  var [isIn, setIn] = react.useState(false); // transition is not triggered on initial render with `in: true`
+
+  react.useEffect(() => {
+    setIn(!!inProp);
+  }, [inProp]);
+  return /*#__PURE__*/jsxRuntime.jsx(BannerContent, _objectSpread({
+    ref: ref,
+    in: isIn
+  }, props));
+});
+if (process.env.NODE_ENV !== "production") Banner.displayName = "Banner";
+
 function createRuleNormalizer(rules) {
   return input => {
     if (typeof input == 'string') {
@@ -72,18 +130,24 @@ function createRuleNormalizer(rules) {
   };
 }
 
+var {
+  Color,
+  isColorProp,
+  parseResponsiveProp,
+  parseSpaceProp
+} = ui.v5; //
 // Colors
 //
 
 function normalizeColor(input) {
-  return ui.isColorProp(input) ? ui.Color[input] : undefined;
+  return isColorProp(input) ? Color[input] : undefined;
 } //
 // Space
 //
 
 
 function parseSpace(space) {
-  return "".concat(ui.parseSpaceProp(space), "px");
+  return "".concat(parseSpaceProp(space), "px");
 } //
 // Margins
 //
@@ -183,7 +247,7 @@ function injectRule(styles, key, breakpoint, value, normalizer) {
 
 var Box = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Box",
-  componentId: "SD__sc-1bc600y-0"
+  componentId: "SD__sc-1cy411s-0"
 })(props => {
   var {
     breakpoints
@@ -204,7 +268,7 @@ var Box = /*#__PURE__*/styled__default.div.withConfig({
       var prop = props[key];
 
       if (prop != null) {
-        var [mobile, tablet, desktop] = ui.parseResponsiveProp(prop);
+        var [mobile, tablet, desktop] = parseResponsiveProp(prop);
         var normalizer = normalizers[key];
         injectRule(styles, key, xs, mobile, normalizer);
         injectRule(styles, key, sm, tablet, normalizer);
@@ -216,11 +280,15 @@ var Box = /*#__PURE__*/styled__default.div.withConfig({
   return styles;
 });
 
-var _excluded = ["icon", "children", "variant", "active", "disabled", "fullWidth"];
-var ButtonRoot = /*#__PURE__*/styled__default(core.ButtonBase).withConfig({
+var _excluded$1 = ["icon", "children", "variant", "active", "disabled", "fullWidth"];
+var {
+  Color: Color$1,
+  Stack
+} = ui.v5;
+var ButtonRoot = /*#__PURE__*/styled__default(material.ButtonBase).withConfig({
   displayName: "ButtonArea__ButtonRoot",
-  componentId: "SD__sc-1czum63-0"
-})(["padding:12px 32px;border-width:1px;border-radius:4px;border-style:solid;border-color:", ";color:", ";background-color:", ";& svg{color:inherit;font-size:24px;}&[data-full-width='true']{width:100%;}&[data-disabled='true']{color:", ";border-color:", ";}&[data-variant='success']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}&[data-variant='danger']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}"], ui.Color.Silver500, ui.Color.Dark100, ui.Color.White, ui.Color.Silver500, ui.Color.Silver400, ui.Color.Green300, ui.Color.Green100, ui.Color.Green300, ui.Color.Green300, ui.Color.Green300, ui.Color.Green50, ui.Color.Red300, ui.Color.Red100, ui.Color.Red300, ui.Color.Red300, ui.Color.Red300, ui.Color.Red50);
+  componentId: "SD__sc-5sq1bg-0"
+})(["padding:12px 32px;border-width:1px;border-radius:4px;border-style:solid;border-color:", ";color:", ";background-color:", ";& svg{color:inherit;font-size:24px;}&[data-full-width='true']{width:100%;}&[data-disabled='true']{color:", ";border-color:", ";}&[data-variant='success']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}&[data-variant='danger']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}"], Color$1.Silver500, Color$1.Dark100, Color$1.White, Color$1.Silver500, Color$1.Silver400, Color$1.Green300, Color$1.Green100, Color$1.Green300, Color$1.Green300, Color$1.Green300, Color$1.Green50, Color$1.Red300, Color$1.Red100, Color$1.Red300, Color$1.Red300, Color$1.Red300, Color$1.Red50);
 var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
     icon,
@@ -230,7 +298,7 @@ var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     disabled,
     fullWidth
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded$1);
 
   return /*#__PURE__*/jsxRuntime.jsx(ButtonRoot, _objectSpread(_objectSpread({
     ref: ref,
@@ -240,10 +308,10 @@ var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     "data-variant": variant,
     "data-full-width": fullWidth
   }, props), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Stack, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Stack, {
       align: "center",
       space: "xxsmall",
-      children: [icon, /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+      children: [icon, /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
         variant: "h4",
         color: disabled ? 'inherit' : 'textPrimary',
         children: children
@@ -253,8 +321,8 @@ var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") ButtonArea.displayName = "ButtonArea";
 
-var _excluded$1 = ["children", "endIcon", "startIcon", "tabIndex", "active", "pending", "disabled", "size", "fullWidth", "variant"],
-    _excluded2 = ["type"],
+var _excluded$2 = ["children", "endIcon", "startIcon", "tabIndex", "active", "pending", "disabled", "size", "fullWidth", "variant"],
+    _excluded2$1 = ["type"],
     _excluded3 = ["href", "target"];
 
 function createButtonVariables(size, _ref) {
@@ -372,7 +440,7 @@ function getInvertedVariables(size) {
 
 var ButtonRoot$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Button__ButtonRoot",
-  componentId: "SD__sc-1pwdpe3-0"
+  componentId: "SD__sc-1yjd62w-0"
 })(_ref2 => {
   var {
     size,
@@ -385,19 +453,19 @@ var ButtonRoot$1 = /*#__PURE__*/styled__default.button.withConfig({
 });
 var ButtonLabel = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonLabel",
-  componentId: "SD__sc-1pwdpe3-1"
+  componentId: "SD__sc-1yjd62w-1"
 })(["display:inherit;align-items:inherit;justify-content:inherit;visibility:var(--button-visibility);--mui-svg-icon-size:var(--button-line-height);"]);
 var ButtonStartIcon = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonStartIcon",
-  componentId: "SD__sc-1pwdpe3-2"
+  componentId: "SD__sc-1yjd62w-2"
 })(["margin-right:4px;"]);
 var ButtonEndIcon = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonEndIcon",
-  componentId: "SD__sc-1pwdpe3-3"
+  componentId: "SD__sc-1yjd62w-3"
 })(["margin-left:4px;"]);
 var ButtonPendingIndicator = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonPendingIndicator",
-  componentId: "SD__sc-1pwdpe3-4"
+  componentId: "SD__sc-1yjd62w-4"
 })(["left:50%;display:flex;position:absolute;visibility:visible;transform:translate(-50%);"]);
 
 function useButtonProps(_ref3) {
@@ -413,7 +481,7 @@ function useButtonProps(_ref3) {
     fullWidth = false,
     variant = 'default'
   } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$1);
+      props = _objectWithoutProperties(_ref3, _excluded$2);
 
   var disabled = pending || disabledProp;
   var tabIndex = disabled ? -1 : tabIndexProp;
@@ -432,7 +500,7 @@ function useButtonProps(_ref3) {
       }), children, !!endIcon && /*#__PURE__*/jsxRuntime.jsx(ButtonEndIcon, {
         children: endIcon
       }), pending && /*#__PURE__*/jsxRuntime.jsx(ButtonPendingIndicator, {
-        children: /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {
           size: "1em",
           color: "inherit"
         })
@@ -445,7 +513,7 @@ var Button = /*#__PURE__*/react.forwardRef((_ref4, ref) => {
   var {
     type = 'button'
   } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded2);
+      props = _objectWithoutProperties(_ref4, _excluded2$1);
 
   var buttonProps = useButtonProps(props);
   return /*#__PURE__*/jsxRuntime.jsx(ButtonRoot$1, _objectSpread(_objectSpread({}, buttonProps), {}, {
@@ -498,17 +566,22 @@ function mergeStyles(styles) {
   return styles;
 }
 
-var _excluded$2 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
+var _excluded$3 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
+var {
+  Color: Color$2,
+  parseResponsiveProp: parseResponsiveProp$1
+} = ui.v5;
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
-  primary: ui.Color.Dark500,
-  secondary: ui.Color.Dark200,
-  white: ui.Color.White,
-  blue: ui.Color.Blue300,
-  green: ui.Color.Green300,
-  purple: ui.Color.Purple500,
-  red: ui.Color.Red300,
-  teal: ui.Color.Teal300,
-  yellow: ui.Color.Yellow300
+  inherit: 'inherit',
+  primary: Color$2.Dark500,
+  secondary: Color$2.Dark200,
+  white: Color$2.White,
+  blue: Color$2.Blue300,
+  green: Color$2.Green300,
+  purple: Color$2.Purple500,
+  red: Color$2.Red300,
+  teal: Color$2.Teal300,
+  yellow: Color$2.Yellow300
 });
 var VARIANT_TYPE_MAPPING = {
   'heading-1': 'h1',
@@ -576,7 +649,7 @@ function textBoxMixin(noWrap, align, color, display, wrapOverflow) {
 
 var TextBoxRoot = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "TextBox__TextBoxRoot",
-  componentId: "SD__sc-9mywck-0"
+  componentId: "SD__sc-1geakdj-0"
 })(_ref2 => {
   var {
     theme,
@@ -599,13 +672,13 @@ var TextBox = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
     noWrap = false,
     wrapOverflow = false
   } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$2);
+      props = _objectWithoutProperties(_ref3, _excluded$3);
 
-  var $align = ui.parseResponsiveProp(align);
-  var $color = ui.parseResponsiveProp(color);
-  var $noWrap = ui.parseResponsiveProp(noWrap);
-  var $display = ui.parseResponsiveProp(display);
-  var $wrapOverflow = ui.parseResponsiveProp(wrapOverflow);
+  var $align = parseResponsiveProp$1(align);
+  var $color = parseResponsiveProp$1(color);
+  var $noWrap = parseResponsiveProp$1(noWrap);
+  var $display = parseResponsiveProp$1(display);
+  var $wrapOverflow = parseResponsiveProp$1(wrapOverflow);
   return /*#__PURE__*/jsxRuntime.jsx(TextBoxRoot, _objectSpread(_objectSpread({}, props), {}, {
     as: as,
     ref: ref,
@@ -619,18 +692,27 @@ var TextBox = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
 });
 if (process.env.NODE_ENV !== "production") TextBox.displayName = "TextBox";
 
+var {
+  Color: Color$3,
+  Column,
+  Columns,
+  Inline,
+  isEmptyReactNode,
+  useUID
+} = ui.v5;
+
 function descriptionItemIconMixin(size) {
   return styled.css(["width:", "px;height:", "px;& > .MuiSvgIcon-root{font-size:", "px;}"], size, size + 4, size);
 }
 
 var DescriptionItemIcon = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DescriptionItem__DescriptionItemIcon",
-  componentId: "SD__sc-1906hic-0"
+  componentId: "SD__sc-l1c918-0"
 })(_ref => {
   var {
     theme
   } = _ref;
-  return styled.css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], ui.Color.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
+  return styled.css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], Color$3.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
 });
 var DescriptionItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   var {
@@ -643,22 +725,22 @@ var DescriptionItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     id: idProp,
     'aria-label': ariaLabel
   } = _ref2;
-  var id = ui.useUID(idProp);
+  var id = useUID(idProp);
   var labelID = "".concat(id, "-label");
-  var isEmptyChildren = ui.isEmptyReactNode(children);
-  return /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+  var isEmptyChildren = isEmptyReactNode(children);
+  return /*#__PURE__*/jsxRuntime.jsxs(Columns, {
     id: id,
     ref: ref,
     space: "xsmall",
     "aria-label": ariaLabel,
-    children: [!!(icon || inset) && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+    children: [!!(icon || inset) && /*#__PURE__*/jsxRuntime.jsx(Column, {
       width: "content",
       children: /*#__PURE__*/jsxRuntime.jsx(DescriptionItemIcon, {
         children: icon
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+    }), /*#__PURE__*/jsxRuntime.jsx(Column, {
       width: "adaptive",
-      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(Inline, {
         space: "xxsmall",
         noWrap: !wrap,
         children: [!!label && /*#__PURE__*/jsxRuntime.jsx(TextBox, {
@@ -680,7 +762,13 @@ var DescriptionItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "DescriptionItem";
 
-var _excluded$3 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
+var _excluded$4 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
+var {
+  CardButton,
+  Color: Color$4,
+  Column: Column$1,
+  Columns: Columns$1
+} = ui.v5;
 function toBytes(input, unit) {
   if (unit === 'gb') return input * (1 << 30);
   if (unit === 'mb') return input * (1 << 20);
@@ -694,15 +782,15 @@ function formatBytes(bytes) {
   var unit = BYTE_UNITS[unitIndex];
   return "".concat((bytes / Math.pow(KILOBYTE, unitIndex)).toFixed(2), " ").concat(unit);
 }
-var StyledCardButton = /*#__PURE__*/styled__default(ui.CardButton).withConfig({
+var StyledCardButton = /*#__PURE__*/styled__default(CardButton).withConfig({
   displayName: "FileDropZone__StyledCardButton",
-  componentId: "SD__sc-5p1fk0-0"
+  componentId: "SD__sc-neqvyq-0"
 })(_ref => {
   var {
     status
   } = _ref;
   return {
-    backgroundColor: status === 'active' ? ui.Color.Blue50 : undefined
+    backgroundColor: status === 'active' ? Color$4.Blue50 : undefined
   };
 });
 
@@ -713,12 +801,12 @@ function UploadRejection(_ref2) {
   } = _ref2;
   var [error] = rejection.errors;
   if (!error) return null;
-  return /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Columns$1, {
     align: "center",
-    children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Column$1, {
       width: "content",
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.Error, {})
-    }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Error, {})
+    }), /*#__PURE__*/jsxRuntime.jsx(Column$1, {
       children: error.code === 'file-too-large' ? maxSize == null ? 'Attachment size is too large' : "Attachment size should be less than ".concat(formatBytes(maxSize)) : error.message
     })]
   });
@@ -730,15 +818,15 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
     disabled = false,
     children: _children = 'Upload Attachments',
     hintText = 'or Drag & Drop files',
-    startIcon = /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, {
+    startIcon = /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, {
       children: /*#__PURE__*/jsxRuntime.jsx("path", {
         d: js.mdiUpload
       })
     }),
-    fallback = /*#__PURE__*/jsxRuntime.jsx(ui.CardButton, {
+    fallback = /*#__PURE__*/jsxRuntime.jsx(CardButton, {
       ref: ref,
       disabled: true,
-      startIcon: /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
+      startIcon: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {
         size: "1em",
         color: "inherit"
       }),
@@ -751,7 +839,7 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
     onDropRejected: _onDropRejected,
     onDropAccepted: _onDropAccepted
   } = props,
-      dropzoneProps = _objectWithoutProperties(props, _excluded$3);
+      dropzoneProps = _objectWithoutProperties(props, _excluded$4);
 
   return /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
     fallback: fallback,
@@ -795,25 +883,32 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FileDropZone.displayName = "FileDropZone";
 
+var {
+  Color: Color$5,
+  Column: Column$2,
+  Columns: Columns$2,
+  useResponsiveValue,
+  useUID: useUID$1
+} = ui.v5;
 var FileListItemName = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "FileListItem__FileListItemName",
-  componentId: "SD__sc-hxbsiy-0"
+  componentId: "SD__sc-1pro30e-0"
 })(["overflow:hidden;line-height:22px;white-space:nowrap;text-overflow:ellipsis;"]);
-var FileListItemProgress = /*#__PURE__*/styled__default(core.CircularProgress).withConfig({
+var FileListItemProgress = /*#__PURE__*/styled__default(material.CircularProgress).withConfig({
   displayName: "FileListItem__FileListItemProgress",
-  componentId: "SD__sc-hxbsiy-1"
+  componentId: "SD__sc-1pro30e-1"
 })(["font-size:24px;", "{font-size:14px;}"], _ref => {
   var {
     theme
   } = _ref;
   return theme.breakpoints.up('sm');
 });
-var PdfIcon = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+var PdfIcon = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
   children: /*#__PURE__*/jsxRuntime.jsx("path", {
     d: js.mdiFilePdfBox
   })
 })));
-var TextBoxIcon = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+var TextBoxIcon = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
   children: /*#__PURE__*/jsxRuntime.jsx("path", {
     d: js.mdiTextBox
   })
@@ -835,10 +930,10 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     onRetry,
     onDelete
   } = _ref2;
-  var uid = ui.useUID();
+  var uid = useUID$1();
   var fileType = getFileType(name);
   var [isHoveredState, setIsHovered] = react.useState(false);
-  var isHovered = ui.useResponsiveValue(true, isHoveredState);
+  var isHovered = useResponsiveValue(true, isHoveredState);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: ref,
     onMouseOver: () => {
@@ -847,29 +942,29 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     onMouseLeave: () => {
       setIsHovered(false);
     },
-    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Columns$2, {
       align: "center",
       space: "xsmall",
-      children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Column$2, {
         width: "content",
-        children: status === 'error' ? /*#__PURE__*/jsxRuntime.jsx(icons.Error, {
+        children: status === 'error' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Error, {
           color: "error",
           fontSize: "small"
         }) : fileType === 'pdf' ? /*#__PURE__*/jsxRuntime.jsx(PdfIcon, {
           color: "action",
           fontSize: "small"
-        }) : fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx(icons.Image, {
+        }) : fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Image, {
           color: "action",
           fontSize: "small"
         }) : /*#__PURE__*/jsxRuntime.jsx(TextBoxIcon, {
           color: "action",
           fontSize: "small"
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      }), /*#__PURE__*/jsxRuntime.jsx(Column$2, {
         width: "fluid",
         children: /*#__PURE__*/jsxRuntime.jsx(FileListItemName, {
           id: uid,
-          children: !url ? name : /*#__PURE__*/jsxRuntime.jsx(core.Link, {
+          children: !url ? name : /*#__PURE__*/jsxRuntime.jsx(material.Link, {
             href: url,
             noWrap: true,
             target: "_blank",
@@ -877,35 +972,35 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
             children: name
           })
         })
-      }), status === 'error' && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      }), status === 'error' && /*#__PURE__*/jsxRuntime.jsx(Column$2, {
         width: "content",
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
           title: "Retry",
-          children: /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+          children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
             size: "small",
             onClick: onRetry,
-            children: /*#__PURE__*/jsxRuntime.jsx(icons.Refresh, {
+            children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Refresh, {
               fontSize: "small"
             })
           })
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      }), /*#__PURE__*/jsxRuntime.jsx(Column$2, {
         width: "content",
-        children: status === 'loading' ? /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+        children: status === 'loading' ? /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
           size: "small",
           disabled: true,
           children: /*#__PURE__*/jsxRuntime.jsx(FileListItemProgress, {
             size: "1em"
           })
-        }) : /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+        }) : /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
           title: "Delete",
-          children: /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+          children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
             size: "small",
             onClick: onDelete,
-            children: !isHovered && status === 'success' ? /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {
+            children: !isHovered && status === 'success' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.CheckCircle, {
               fontSize: "small",
-              htmlColor: ui.Color.Green300
-            }) : /*#__PURE__*/jsxRuntime.jsx(icons.Delete, {
+              htmlColor: Color$5.Green300
+            }) : /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Delete, {
               fontSize: "small"
             })
           })
@@ -916,17 +1011,23 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FileListItem.displayName = "FileListItem";
 
+var {
+  Color: Color$6,
+  Column: Column$3,
+  Columns: Columns$3,
+  useUID: useUID$2
+} = ui.v5;
 var SidebarRoot = /*#__PURE__*/styled__default.aside.withConfig({
   displayName: "Sidebar__SidebarRoot",
-  componentId: "SD__sc-b77o22-0"
-})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;width:240px;height:100vh;background-color:", ";border-right:1px solid ", ";"], ui.Color.White, ui.Color.Silver400);
+  componentId: "SD__sc-14hfb05-0"
+})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;width:240px;height:100vh;background-color:", ";border-right:1px solid ", ";"], Color$6.White, Color$6.Silver400);
 var SidebarHeader = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Sidebar__SidebarHeader",
-  componentId: "SD__sc-b77o22-1"
-})(["top:0;z-index:1;position:sticky;padding-left:24px;padding-right:24px;padding-bottom:8px;background-color:", ";"], ui.Color.White);
+  componentId: "SD__sc-14hfb05-1"
+})(["top:0;z-index:1;position:sticky;padding-left:24px;padding-right:24px;padding-bottom:8px;background-color:", ";"], Color$6.White);
 var SidebarTitle = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Sidebar__SidebarTitle",
-  componentId: "SD__sc-b77o22-2"
+  componentId: "SD__sc-14hfb05-2"
 })(["height:64px;max-height:64px;display:flex;align-items:center;"]);
 var Sidebar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -936,17 +1037,17 @@ var Sidebar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     children,
     id: idProp
   } = _ref;
-  var id = ui.useUID(idProp);
+  var id = useUID$2(idProp);
   var titleID = "".concat(id, "-title");
   return /*#__PURE__*/jsxRuntime.jsxs(SidebarRoot, {
     id: id,
     ref: ref,
     children: [/*#__PURE__*/jsxRuntime.jsxs(SidebarHeader, {
       children: [/*#__PURE__*/jsxRuntime.jsx(SidebarTitle, {
-        children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(Columns$3, {
           space: "xsmall",
           align: "center",
-          children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Column$3, {
             width: "fluid",
             children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
               variant: "heading-2",
@@ -954,7 +1055,7 @@ var Sidebar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
               id: titleID,
               children: title
             })
-          }), !!count && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+          }), !!count && /*#__PURE__*/jsxRuntime.jsx(Column$3, {
             width: "content",
             children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
               color: "secondary",
@@ -973,11 +1074,11 @@ if (process.env.NODE_ENV !== "production") Sidebar.displayName = "Sidebar";
 
 var SidebarContainerRoot = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarContainer__SidebarContainerRoot",
-  componentId: "SD__sc-uibj1m-0"
+  componentId: "SD__sc-6u6mqe-0"
 })(["display:flex;height:inherit;max-height:inherit;min-height:inherit;"]);
 var SidebarContainerContent = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarContainer__SidebarContainerContent",
-  componentId: "SD__sc-uibj1m-1"
+  componentId: "SD__sc-6u6mqe-1"
 })(["height:inherit;max-height:inherit;min-height:inherit;width:calc(100% - 240px);min-width:calc(100% - 240px);max-width:calc(100% - 240px);"]);
 var SidebarContainer = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -995,12 +1096,12 @@ if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "Sideb
 
 var SidebarDividerRoot = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarDivider__SidebarDividerRoot",
-  componentId: "SD__sc-5lwi2i-0"
+  componentId: "SD__sc-182lunj-0"
 })(["padding:20px 24px;"]);
 var SidebarDivider = /*#__PURE__*/react.forwardRef((_, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(SidebarDividerRoot, {
     ref: ref,
-    children: /*#__PURE__*/jsxRuntime.jsx(core.Divider, {})
+    children: /*#__PURE__*/jsxRuntime.jsx(material.Divider, {})
   });
 });
 if (process.env.NODE_ENV !== "production") SidebarDivider.displayName = "SidebarDivider";
@@ -1025,23 +1126,29 @@ function SidebarMenuItemContextProvider(_ref) {
   });
 }
 
+var {
+  Color: Color$7,
+  Column: Column$4,
+  Columns: Columns$4,
+  Inline: Inline$1
+} = ui.v5;
 var SidebarMenuItemRoot = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemRoot",
-  componentId: "SD__sc-1sb5zqa-0"
+  componentId: "SD__sc-1srwx2n-0"
 })(_ref => {
   var {
     hasAvatar
   } = _ref;
   var height = hasAvatar ? 48 : 40;
-  return styled.css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}}"], height, height, ui.Color.Silver200, ui.Color.Blue300);
+  return styled.css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}}"], height, height, Color$7.Silver200, Color$7.Blue300);
 });
 var SidebarMenuItemBadge = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemBadge",
-  componentId: "SD__sc-1sb5zqa-1"
-})(["font-size:12px;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";.MuiButtonBase-root[aria-current='true'] &{color:", ";background-color:", ";}"], ui.Color.Dark500, ui.Color.Silver300, ui.Color.White, ui.Color.Dark450);
+  componentId: "SD__sc-1srwx2n-1"
+})(["font-size:12px;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";.MuiButtonBase-root[aria-current='true'] &{color:", ";background-color:", ";}"], Color$7.Dark500, Color$7.Silver300, Color$7.White, Color$7.Dark450);
 var SidebarMenuItemSecondaryAction = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemSecondaryAction",
-  componentId: "SD__sc-1sb5zqa-2"
+  componentId: "SD__sc-1srwx2n-2"
 })(["top:50%;right:24px;position:absolute;transform:translate3d(0,-50%,0);"]);
 var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   var {
@@ -1073,39 +1180,39 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     onMouseLeave: () => {
       setHovered(false);
     },
-    children: [/*#__PURE__*/jsxRuntime.jsx(core.ButtonBase, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.ButtonBase, {
       onClick: onClick,
       disabled: disabled,
       "aria-current": selected,
-      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(Columns$4, {
         align: "center",
         space: "xsmall",
-        children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
-          children: /*#__PURE__*/jsxRuntime.jsx(ui.Columns, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Column$4, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Columns$4, {
             align: "center",
             space: "xsmall",
-            children: /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+            children: /*#__PURE__*/jsxRuntime.jsx(Column$4, {
               width: "fluid",
-              children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+              children: /*#__PURE__*/jsxRuntime.jsxs(Columns$4, {
                 align: "center",
                 space: "xsmall",
                 children: [!!avatar && /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemContextProvider, {
                   hovered: hovered,
                   disabled: disabled,
-                  children: /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+                  children: /*#__PURE__*/jsxRuntime.jsx(Column$4, {
                     width: "content",
                     children: avatar
                   })
-                }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+                }), /*#__PURE__*/jsxRuntime.jsx(Column$4, {
                   width: "adaptive",
                   children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
                     variant: selected ? 'body-semibold' : 'body',
                     noWrap: true,
                     children: children
                   })
-                }), external && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+                }), external && /*#__PURE__*/jsxRuntime.jsx(Column$4, {
                   width: "content",
-                  children: /*#__PURE__*/jsxRuntime.jsx(icons.OpenInNew, {
+                  children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.OpenInNew, {
                     color: "action",
                     fontSize: "small"
                   })
@@ -1113,12 +1220,12 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
               })
             })
           })
-        }), !!badge && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+        }), !!badge && /*#__PURE__*/jsxRuntime.jsx(Column$4, {
           width: "content",
           children: /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemBadge, {
             children: badge
           })
-        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(Column$4, {
           width: "content",
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             ref: actionsPlaceholderRef
@@ -1127,7 +1234,7 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
       })
     }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemSecondaryAction, {
       ref: actionsRef,
-      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(Inline$1, {
         children: [hovered && secondaryActions, action]
       })
     })]
@@ -1135,9 +1242,9 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarMenuItem.displayName = "SidebarMenuItem";
 
-var SidebarMenuItemActionRoot = /*#__PURE__*/styled__default(core.IconButton).withConfig({
+var SidebarMenuItemActionRoot = /*#__PURE__*/styled__default(material.IconButton).withConfig({
   displayName: "SidebarMenuItemAction__SidebarMenuItemActionRoot",
-  componentId: "SD__sc-1n50gmv-0"
+  componentId: "SD__sc-4la7tu-0"
 })(["& .MuiSvgIcon-root{font-size:16px;}"]);
 var SidebarMenuItemAction = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -1145,7 +1252,7 @@ var SidebarMenuItemAction = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     placement,
     children
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
     title: title,
     placement: placement,
     children: /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemActionRoot, {
@@ -1164,7 +1271,7 @@ function stopPropagation(event) {
 
 var SidebarMenuItemAvatarCheckbox = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarMenuItemAvatar__SidebarMenuItemAvatarCheckbox",
-  componentId: "SD__sc-17mkvc7-0"
+  componentId: "SD__sc-bfi0pv-0"
 })(["margin:-5px;"]);
 var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -1185,7 +1292,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 
   if (value === true || hovered && value != null) {
     return /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemAvatarCheckbox, {
-      children: /*#__PURE__*/jsxRuntime.jsx(core.Checkbox, {
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
         color: "primary",
         checked: value,
         disabled: disabled,
@@ -1198,7 +1305,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     });
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
     ref: ref,
     "aria-hidden": true,
     children: initials
@@ -1206,10 +1313,14 @@ var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarMenuItemAvatar.displayName = "SidebarMenuItemAvatar";
 
+var {
+  Column: Column$5,
+  Columns: Columns$5
+} = ui.v5;
 var SidebarSubheaderRoot = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarSubheader__SidebarSubheaderRoot",
-  componentId: "SD__sc-1r0xx76-0"
-})(["height:40px;max-height:40px;padding-left:24px;padding-right:24px;"]);
+  componentId: "SD__sc-7njpmq-0"
+})(["display:flex;align-items:center;height:40px;max-height:40px;padding-left:24px;padding-right:24px;"]);
 var SidebarSubheader = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
     id,
@@ -1218,9 +1329,10 @@ var SidebarSubheader = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx(SidebarSubheaderRoot, {
     ref: ref,
-    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Columns$5, {
       space: "xsmall",
-      children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      align: "center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Column$5, {
         children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
           id: id,
           variant: "heading-6",
@@ -1228,7 +1340,7 @@ var SidebarSubheader = /*#__PURE__*/react.forwardRef((_ref, ref) => {
           noWrap: true,
           children: children
         })
-      }), !!action && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      }), !!action && /*#__PURE__*/jsxRuntime.jsx(Column$5, {
         width: "content",
         children: action
       })]
@@ -1237,22 +1349,1325 @@ var SidebarSubheader = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-exports.Alert = Alert;
-exports.AnchorButton = AnchorButton;
-exports.Box = Box;
-exports.Button = Button;
-exports.ButtonArea = ButtonArea;
-exports.DescriptionItem = DescriptionItem;
-exports.FileDropZone = FileDropZone;
-exports.FileListItem = FileListItem;
-exports.Sidebar = Sidebar;
-exports.SidebarContainer = SidebarContainer;
-exports.SidebarDivider = SidebarDivider;
-exports.SidebarMenuItem = SidebarMenuItem;
-exports.SidebarMenuItemAction = SidebarMenuItemAction;
-exports.SidebarMenuItemAvatar = SidebarMenuItemAvatar;
-exports.SidebarSubheader = SidebarSubheader;
-exports.TextBox = TextBox;
-exports.formatBytes = formatBytes;
-exports.toBytes = toBytes;
+
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Alert: Alert,
+  Banner: Banner,
+  Box: Box,
+  ButtonArea: ButtonArea,
+  Button: Button,
+  AnchorButton: AnchorButton,
+  DescriptionItem: DescriptionItem,
+  toBytes: toBytes,
+  formatBytes: formatBytes,
+  FileDropZone: FileDropZone,
+  FileListItem: FileListItem,
+  Sidebar: Sidebar,
+  SidebarContainer: SidebarContainer,
+  SidebarDivider: SidebarDivider,
+  SidebarMenuItem: SidebarMenuItem,
+  SidebarMenuItemAction: SidebarMenuItemAction,
+  SidebarMenuItemAvatar: SidebarMenuItemAvatar,
+  SidebarSubheader: SidebarSubheader,
+  TextBox: TextBox
+});
+
+function colorMixin$1(textColor, backgroundColor, buttonHoverColor) {
+  return styled.css(["color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, backgroundColor, textColor, buttonHoverColor);
+}
+
+var StyledAlert$1 = /*#__PURE__*/styled__default(lab$1.Alert).withConfig({
+  displayName: "Alert__StyledAlert",
+  componentId: "SD__sc-1j6qebb-0"
+})(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin$1(ui.Color.Green500, ui.Color.Green50, ui.Color.Green400), /*#__PURE__*/colorMixin$1(ui.Color.Blue500, ui.Color.Blue50, ui.Color.Blue400), /*#__PURE__*/colorMixin$1(ui.Color.Yellow500, ui.Color.Yellow50, ui.Color.Yellow400), /*#__PURE__*/colorMixin$1(ui.Color.Red500, ui.Color.Red50, ui.Color.Red400));
+
+function toMaterialSeverity$1(severity) {
+  return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
+}
+
+var iconMapping$1 = {
+  success: /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {}),
+  info: /*#__PURE__*/jsxRuntime.jsx(icons.Info, {}),
+  error: /*#__PURE__*/jsxRuntime.jsx(icons.Error, {})
+};
+var Alert$1 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    children,
+    onClose: _onClose,
+    severity = 'positive'
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAlert$1, {
+    ref: ref,
+    variant: "outlined",
+    iconMapping: iconMapping$1,
+    severity: toMaterialSeverity$1(severity),
+    onClose: () => {
+      _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+    },
+    children: children
+  });
+});
+if (process.env.NODE_ENV !== "production") Alert$1.displayName = "Alert";
+
+var _excluded$5 = ["children"],
+    _excluded2$2 = ["in"];
+
+function enterMixin$1(border) {
+  return styled.css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], ui.Color.Dark500, ui.Color.White, border);
+}
+
+function enterAnimation$1(border) {
+  return styled.keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], ui.Color.White, ui.Color.Dark500, ui.Color.White, ui.Color.Dark500, ui.Color.White, ui.Color.Dark500, enterMixin$1(border));
+}
+
+var CustomTransition$1 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$5);
+
+  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    timeout: 3000,
+    classNames: props.className,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: children
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") CustomTransition$1.displayName = "CustomTransition";
+var BannerContent$1 = /*#__PURE__*/styled__default(CustomTransition$1).withConfig({
+  displayName: "Banner__BannerContent",
+  componentId: "SD__sc-9kw31n-0"
+})(_ref2 => {
+  var {
+    border = 'bottom'
+  } = _ref2;
+  return styled.css(["height:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:", ";background-color:", ";&-enter-active{animation:", " 2s 1s forwards;}&-enter-done{", ";}&-exit{", ";}&-exit-active{min-height:0;transition:min-height 2s 1s;}"], ui.Color.White, ui.Color.White, enterAnimation$1(border), enterMixin$1(border), enterMixin$1(border));
+});
+var Banner$1 = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
+  var {
+    in: inProp
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2$2);
+
+  var [isIn, setIn] = react.useState(false); // transition is not triggered on initial render with `in: true`
+
+  react.useEffect(() => {
+    setIn(!!inProp);
+  }, [inProp]);
+  return /*#__PURE__*/jsxRuntime.jsx(BannerContent$1, _objectSpread({
+    ref: ref,
+    in: isIn
+  }, props));
+});
+if (process.env.NODE_ENV !== "production") Banner$1.displayName = "Banner";
+
+function createRuleNormalizer$1(rules) {
+  return input => {
+    if (typeof input == 'string') {
+      var value = rules[input];
+
+      if (typeof value == 'number') {
+        return "".concat(value, "px");
+      }
+
+      if (typeof value == 'string') {
+        return value;
+      }
+    }
+
+    return undefined;
+  };
+}
+
+// Colors
+//
+
+function normalizeColor$1(input) {
+  return ui.isColorProp(input) ? ui.Color[input] : undefined;
+} //
+// Space
+//
+
+
+function parseSpace$1(space) {
+  return "".concat(ui.parseSpaceProp(space), "px");
+} //
+// Margins
+//
+
+
+function parseMargin$1(input) {
+  if (input === 'auto') return input;
+  var prefix = '';
+
+  if (typeof input == 'string' && input.startsWith('-')) {
+    prefix = '-';
+    input = input.slice(1);
+  }
+
+  return prefix + parseSpace$1(input);
+} //
+// Borders
+//
+
+
+var normalizeBorderRadius$1 = /*#__PURE__*/createRuleNormalizer$1({
+  none: 0,
+  small: 4
+});
+var normalizeBorderWidth$1 = /*#__PURE__*/createRuleNormalizer$1({
+  none: 0,
+  small: 1,
+  medium: 2,
+  large: 4
+}); //
+// Rules
+//
+
+var normalizers$1 = {
+  display: undefined,
+  color: normalizeColor$1,
+  backgroundColor: normalizeColor$1,
+  borderColor: normalizeColor$1,
+  borderTopColor: normalizeColor$1,
+  borderLeftColor: normalizeColor$1,
+  borderRightColor: normalizeColor$1,
+  borderBottomColor: normalizeColor$1,
+  borderWidth: normalizeBorderWidth$1,
+  borderTopWidth: normalizeBorderWidth$1,
+  borderLeftWidth: normalizeBorderWidth$1,
+  borderRightWidth: normalizeBorderWidth$1,
+  borderBottomWidth: normalizeBorderWidth$1,
+  margin: parseMargin$1,
+  marginTop: parseMargin$1,
+  marginLeft: parseMargin$1,
+  marginRight: parseMargin$1,
+  marginBottom: parseMargin$1,
+  padding: parseSpace$1,
+  paddingTop: parseSpace$1,
+  paddingLeft: parseSpace$1,
+  paddingRight: parseSpace$1,
+  paddingBottom: parseSpace$1,
+  borderRadius: normalizeBorderRadius$1,
+  borderTopLeftRadius: normalizeBorderRadius$1,
+  borderTopRightRadius: normalizeBorderRadius$1,
+  borderBottomLeftRadius: normalizeBorderRadius$1,
+  borderBottomRightRadius: normalizeBorderRadius$1,
+  fontSize: undefined,
+  width: undefined,
+  maxWidth: undefined,
+  minWidth: undefined,
+  height: undefined,
+  maxHeight: undefined,
+  minHeight: undefined,
+  overflow: undefined,
+  overflowY: undefined,
+  overflowX: undefined,
+  top: undefined,
+  left: undefined,
+  right: undefined,
+  bottom: undefined,
+  position: undefined
+};
+
+function injectRule$1(styles, key, breakpoint, value, normalizer) {
+  if (normalizer != null) value = normalizer(value);
+
+  if (value != null) {
+    var rules = styles[breakpoint];
+
+    if (typeof rules != 'object') {
+      rules = {};
+      styles[breakpoint] = rules;
+    }
+
+    rules[key] = String(value);
+  }
+} //
+// Box
+//
+
+
+var Box$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Box",
+  componentId: "SD__sc-1bc600y-0"
+})(props => {
+  var {
+    breakpoints
+  } = props.theme;
+  var xs = breakpoints.up('xs');
+  var sm = breakpoints.up('sm');
+  var md = breakpoints.up('md');
+  var styles = {
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    borderStyle: 'solid'
+  };
+
+  for (var k in props) {
+    if (Object.prototype.hasOwnProperty.call(props, k) && k in normalizers$1) {
+      var key = k;
+      var prop = props[key];
+
+      if (prop != null) {
+        var [mobile, tablet, desktop] = ui.parseResponsiveProp(prop);
+        var normalizer = normalizers$1[key];
+        injectRule$1(styles, key, xs, mobile, normalizer);
+        injectRule$1(styles, key, sm, tablet, normalizer);
+        injectRule$1(styles, key, md, desktop, normalizer);
+      }
+    }
+  }
+
+  return styles;
+});
+
+var _excluded$6 = ["icon", "children", "variant", "active", "disabled", "fullWidth"];
+var ButtonRoot$2 = /*#__PURE__*/styled__default(core.ButtonBase).withConfig({
+  displayName: "ButtonArea__ButtonRoot",
+  componentId: "SD__sc-1czum63-0"
+})(["padding:12px 32px;border-width:1px;border-radius:4px;border-style:solid;border-color:", ";color:", ";background-color:", ";& svg{color:inherit;font-size:24px;}&[data-full-width='true']{width:100%;}&[data-disabled='true']{color:", ";border-color:", ";}&[data-variant='success']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}&[data-variant='danger']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}"], ui.Color.Silver500, ui.Color.Dark100, ui.Color.White, ui.Color.Silver500, ui.Color.Silver400, ui.Color.Green300, ui.Color.Green100, ui.Color.Green300, ui.Color.Green300, ui.Color.Green300, ui.Color.Green50, ui.Color.Red300, ui.Color.Red100, ui.Color.Red300, ui.Color.Red300, ui.Color.Red300, ui.Color.Red50);
+var ButtonArea$1 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    icon,
+    children,
+    variant,
+    active,
+    disabled,
+    fullWidth
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonRoot$2, _objectSpread(_objectSpread({
+    ref: ref,
+    disabled: disabled,
+    "data-active": active,
+    "data-disabled": disabled,
+    "data-variant": variant,
+    "data-full-width": fullWidth
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Stack, {
+      align: "center",
+      space: "xxsmall",
+      children: [icon, /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+        variant: "h4",
+        color: disabled ? 'inherit' : 'textPrimary',
+        children: children
+      })]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") ButtonArea$1.displayName = "ButtonArea";
+
+var _excluded$7 = ["children", "endIcon", "startIcon", "tabIndex", "active", "pending", "disabled", "size", "fullWidth", "variant"],
+    _excluded2$3 = ["type"],
+    _excluded3$1 = ["href", "target"];
+
+function createButtonVariables$1(size, _ref) {
+  var {
+    fontSize = size === 'large' ? 16 : 14,
+    lineHeight = size === 'large' ? 24 : 20,
+    fontSizeMobile = size === 'large' ? 18 : 16,
+    lineHeightMobile = size === 'large' ? 28 : 24,
+    paddingX = size === 'large' ? 32 : 16,
+    paddingY = size === 'large' ? 8 : size === 'small' ? 2 : 6,
+    paddingXMobile = size === 'large' ? 64 : 24,
+    paddingYMobile = size === 'large' ? 14 : size === 'small' ? 4 : 10,
+    textColor = ui.Color.Transparent,
+    textColorHovered = textColor,
+    textColorDisabled = textColor,
+    outlineColor = ui.Color.Transparent,
+    borderColor = ui.Color.Transparent,
+    borderColorHovered = borderColor,
+    borderColorDisabled = borderColor,
+    backgroundColor = ui.Color.Transparent,
+    backgroundColorHovered = backgroundColor,
+    backgroundColorActive = backgroundColorHovered,
+    backgroundColorDisabled = backgroundColor
+  } = _ref;
+  return {
+    paddingX,
+    paddingY,
+    fontSize,
+    lineHeight,
+    paddingXMobile,
+    paddingYMobile,
+    fontSizeMobile,
+    lineHeightMobile,
+    textColor,
+    borderColor,
+    outlineColor,
+    backgroundColor,
+    textColorHovered,
+    borderColorHovered,
+    backgroundColorHovered,
+    backgroundColorActive,
+    textColorDisabled,
+    borderColorDisabled,
+    backgroundColorDisabled
+  };
+}
+
+function getDefaultVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: ui.Color.White,
+    outlineColor: ui.Color.Blue100,
+    backgroundColor: ui.Color.Blue300,
+    textColorHovered: ui.Color.White,
+    backgroundColorHovered: ui.Color.Blue500,
+    backgroundColorActive: ui.Color.Blue400,
+    backgroundColorDisabled: ui.Color.Blue100
+  });
+}
+
+function getPrimaryVariables$1(size) {
+  return getDefaultVariables$1(size);
+}
+
+function getNeutralVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: ui.Color.Dark500,
+    borderColor: ui.Color.Silver500,
+    outlineColor: ui.Color.Blue100,
+    backgroundColor: ui.Color.White,
+    textColorHovered: ui.Color.Blue300,
+    borderColorHovered: ui.Color.Blue300,
+    backgroundColorHovered: ui.Color.Blue50,
+    backgroundColorActive: ui.Color.Blue75,
+    textColorDisabled: ui.Color.Silver500
+  });
+}
+
+function getCriticalVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: ui.Color.Red300,
+    borderColor: ui.Color.Red300,
+    outlineColor: ui.Color.Red75,
+    backgroundColor: ui.Color.Red50,
+    backgroundColorHovered: ui.Color.Red75,
+    backgroundColorActive: ui.Color.Red100,
+    textColorDisabled: ui.Color.Red100,
+    borderColorDisabled: ui.Color.Red100,
+    backgroundColorDisabled: ui.Color.Red50
+  });
+}
+
+function getTextVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: ui.Color.Blue400,
+    outlineColor: ui.Color.Blue100,
+    textColorHovered: ui.Color.Blue500,
+    backgroundColorHovered: ui.Color.Blue50,
+    backgroundColorActive: ui.Color.Blue75,
+    textColorDisabled: ui.Color.Blue100
+  });
+}
+
+function getInvertedVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: ui.Color.White,
+    outlineColor: ui.Color.White40,
+    backgroundColor: ui.Color.White20,
+    textColorHovered: ui.Color.White,
+    backgroundColorHovered: ui.Color.White40,
+    backgroundColorActive: ui.Color.White20,
+    textColorDisabled: ui.Color.White50,
+    backgroundColorDisabled: ui.Color.White08
+  });
+}
+
+var ButtonRoot$3 = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "Button__ButtonRoot",
+  componentId: "SD__sc-1pwdpe3-0"
+})(_ref2 => {
+  var {
+    size,
+    theme,
+    variant,
+    fullWidth
+  } = _ref2;
+  var variables = variant === 'primary' ? getPrimaryVariables$1(size) : variant === 'neutral' ? getNeutralVariables$1(size) : variant === 'critical' ? getCriticalVariables$1(size) : variant === 'text' ? getTextVariables$1(size) : variant === 'inverted' ? getInvertedVariables$1(size) : getDefaultVariables$1(size);
+  return styled.css(JSON.parse('["border:0;margin:0;outline:0;position:relative;vertical-align:middle;cursor:pointer;text-decoration:none;&[aria-disabled=\'true\']{cursor:default;pointer-events:none;}-moz-appearance:none;&::-moz-focus-inner{border-style:none;}-webkit-appearance:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;@media print{-webkit-print-color-adjust:exact;}--button-visibility:visible;--button-text-color:",";--button-border-color:",";--button-outline-color:",";--button-background-color:",";--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;","{--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;}&[aria-disabled=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";&[aria-busy=\'true\']{--button-visibility:hidden;}}&[aria-disabled=\'false\']{&[aria-expanded=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";}&,&[aria-expanded=\'true\']{&:focus{--button-outline-color:",";}@media (hover:hover) and (pointer:fine){&:hover{--button-text-color:",";--button-border-color:",";--button-background-color:",";}}&:active{--button-background-color:",";}}}display:inline-flex;align-items:center;justify-content:center;min-width:48px;width:",";border-radius:4px;font-family:",";font-weight:",";color:var(--button-text-color);background-color:var(--button-background-color);font-size:var(--button-font-size);line-height:var(--button-line-height);padding:var(--button-padding-y) var(--button-padding-x);box-shadow:inset 0 0 0 1px var(--button-border-color),0 0 0 2px var(--button-outline-color);transition:",";"]'), variables.textColor, variables.borderColor, ui.Color.Transparent, variables.backgroundColor, variables.paddingXMobile, variables.paddingYMobile, variables.fontSizeMobile, variables.lineHeightMobile, theme.breakpoints.up('sm'), variables.paddingX, variables.paddingY, variables.fontSize, variables.lineHeight, variables.textColorDisabled, variables.borderColorDisabled, variables.backgroundColorDisabled, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.outlineColor, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.backgroundColorActive, fullWidth ? '100%' : 'auto', theme.typography.fontFamily, theme.typography.fontWeightBold, theme.transitions.create(['color', 'box-shadow', 'background-color']));
+});
+var ButtonLabel$1 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "Button__ButtonLabel",
+  componentId: "SD__sc-1pwdpe3-1"
+})(["display:inherit;align-items:inherit;justify-content:inherit;visibility:var(--button-visibility);--mui-svg-icon-size:var(--button-line-height);"]);
+var ButtonStartIcon$1 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "Button__ButtonStartIcon",
+  componentId: "SD__sc-1pwdpe3-2"
+})(["margin-right:4px;"]);
+var ButtonEndIcon$1 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "Button__ButtonEndIcon",
+  componentId: "SD__sc-1pwdpe3-3"
+})(["margin-left:4px;"]);
+var ButtonPendingIndicator$1 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "Button__ButtonPendingIndicator",
+  componentId: "SD__sc-1pwdpe3-4"
+})(["left:50%;display:flex;position:absolute;visibility:visible;transform:translate(-50%);"]);
+
+function useButtonProps$1(_ref3) {
+  var {
+    children,
+    endIcon,
+    startIcon,
+    tabIndex: tabIndexProp = 0,
+    active = false,
+    pending = false,
+    disabled: disabledProp = false,
+    size = 'medium',
+    fullWidth = false,
+    variant = 'default'
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded$7);
+
+  var disabled = pending || disabledProp;
+  var tabIndex = disabled ? -1 : tabIndexProp;
+  return _objectSpread(_objectSpread({}, props), {}, {
+    size,
+    variant,
+    fullWidth,
+    tabIndex,
+    disabled,
+    'aria-busy': pending,
+    'aria-expanded': active,
+    'aria-disabled': disabled,
+    children: /*#__PURE__*/jsxRuntime.jsxs(ButtonLabel$1, {
+      children: [!!startIcon && /*#__PURE__*/jsxRuntime.jsx(ButtonStartIcon$1, {
+        children: startIcon
+      }), children, !!endIcon && /*#__PURE__*/jsxRuntime.jsx(ButtonEndIcon$1, {
+        children: endIcon
+      }), pending && /*#__PURE__*/jsxRuntime.jsx(ButtonPendingIndicator$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
+          size: "1em",
+          color: "inherit"
+        })
+      })]
+    })
+  });
+}
+
+var Button$1 = /*#__PURE__*/react.forwardRef((_ref4, ref) => {
+  var {
+    type = 'button'
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded2$3);
+
+  var buttonProps = useButtonProps$1(props);
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonRoot$3, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    ref: ref,
+    type: type
+  }));
+});
+if (process.env.NODE_ENV !== "production") Button$1.displayName = "Button";
+var AnchorButton$1 = /*#__PURE__*/react.forwardRef((_ref5, ref) => {
+  var {
+    href,
+    target
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded3$1);
+
+  var buttonProps = useButtonProps$1(props);
+  var rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonRoot$3, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    as: "a",
+    ref: ref,
+    rel: rel,
+    href: href,
+    target: target
+  }));
+});
+if (process.env.NODE_ENV !== "production") AnchorButton$1.displayName = "AnchorButton";
+
+function mergeStyles$1(styles) {
+  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    sources[_key - 1] = arguments[_key];
+  }
+
+  for (var source of sources) {
+    if (source) {
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          var stylesValue = styles[key];
+          var sourceValue = source[key];
+
+          if (typeof stylesValue == 'object' && typeof sourceValue == 'object') {
+            mergeStyles$1(stylesValue, sourceValue);
+          } else {
+            styles[key] = source[key];
+          }
+        }
+      }
+    }
+  }
+
+  return styles;
+}
+
+var _excluded$8 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
+var normalizeTextColor$1 = /*#__PURE__*/createRuleNormalizer$1({
+  inherit: 'inherit',
+  primary: ui.Color.Dark500,
+  secondary: ui.Color.Dark200,
+  white: ui.Color.White,
+  blue: ui.Color.Blue300,
+  green: ui.Color.Green300,
+  purple: ui.Color.Purple500,
+  red: ui.Color.Red300,
+  teal: ui.Color.Teal300,
+  yellow: ui.Color.Yellow300
+});
+var VARIANT_TYPE_MAPPING$1 = {
+  'heading-1': 'h1',
+  'heading-2': 'h2',
+  'heading-3': 'h3',
+  'heading-4': 'h4',
+  'heading-5': 'h5',
+  'heading-6': 'h6',
+  body: 'span',
+  'body-block': 'p',
+  'body-semibold': 'span',
+  caption: 'span'
+};
+
+function variantMixin$1(_ref, variant) {
+  var {
+    typography,
+    breakpoints
+  } = _ref;
+
+  switch (variant) {
+    case 'heading-1':
+      return typography.h1;
+
+    case 'heading-2':
+      return typography.h2;
+
+    case 'heading-3':
+      return typography.h3;
+
+    case 'heading-4':
+      return typography.h4;
+
+    case 'heading-5':
+      return typography.h5;
+
+    case 'heading-6':
+      return typography.h6;
+
+    case 'body':
+    default:
+      return typography.body2;
+
+    case 'body-block':
+      {
+        return mergeStyles$1({}, typography.body2, {
+          lineHeight: '24px',
+          [breakpoints.only('xs')]: {
+            lineHeight: '28px'
+          }
+        });
+      }
+
+    case 'body-semibold':
+      return typography.body1;
+
+    case 'caption':
+      return typography.caption;
+  }
+}
+
+function textBoxMixin$1(noWrap, align, color, display, wrapOverflow) {
+  return styled.css(["text-align:", ";color:", ";display:", ";overflow:", ";white-space:", ";overflow-wrap:", ";"], align, normalizeTextColor$1(color), display === 'initial' && (noWrap || align !== 'left') ? 'block' : display, noWrap ? 'hidden' : 'visible', noWrap ? 'nowrap' : 'normal', wrapOverflow ? 'break-word' : 'normal');
+}
+
+var TextBoxRoot$1 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "TextBox__TextBoxRoot",
+  componentId: "SD__sc-9mywck-0"
+})(_ref2 => {
+  var {
+    theme,
+    $noWrap,
+    $variant,
+    $align,
+    $color,
+    $display,
+    $wrapOverflow
+  } = _ref2;
+  return styled.css(["margin:0;padding:0;text-overflow:ellipsis;", ";", ";", "{", ";}", "{", ";}"], variantMixin$1(theme, $variant), textBoxMixin$1($noWrap[0], $align[0], $color[0], $display[0], $wrapOverflow[0]), theme.breakpoints.up('sm'), textBoxMixin$1($noWrap[1], $align[1], $color[1], $display[1], $wrapOverflow[1]), theme.breakpoints.up('md'), textBoxMixin$1($noWrap[2], $align[2], $color[2], $display[2], $wrapOverflow[2]));
+});
+var TextBox$1 = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
+  var {
+    variant: $variant = 'body',
+    as = VARIANT_TYPE_MAPPING$1[$variant],
+    align = 'left',
+    color = 'primary',
+    display = 'initial',
+    noWrap = false,
+    wrapOverflow = false
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded$8);
+
+  var $align = ui.parseResponsiveProp(align);
+  var $color = ui.parseResponsiveProp(color);
+  var $noWrap = ui.parseResponsiveProp(noWrap);
+  var $display = ui.parseResponsiveProp(display);
+  var $wrapOverflow = ui.parseResponsiveProp(wrapOverflow);
+  return /*#__PURE__*/jsxRuntime.jsx(TextBoxRoot$1, _objectSpread(_objectSpread({}, props), {}, {
+    as: as,
+    ref: ref,
+    $align: $align,
+    $color: $color,
+    $noWrap: $noWrap,
+    $display: $display,
+    $variant: $variant,
+    $wrapOverflow: $wrapOverflow
+  }));
+});
+if (process.env.NODE_ENV !== "production") TextBox$1.displayName = "TextBox";
+
+function descriptionItemIconMixin$1(size) {
+  return styled.css(["width:", "px;height:", "px;& > .MuiSvgIcon-root{font-size:", "px;}"], size, size + 4, size);
+}
+
+var DescriptionItemIcon$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DescriptionItem__DescriptionItemIcon",
+  componentId: "SD__sc-1906hic-0"
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return styled.css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], ui.Color.Dark100, descriptionItemIconMixin$1(20), theme.breakpoints.up('sm'), descriptionItemIconMixin$1(16));
+});
+var DescriptionItem$1 = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+  var {
+    icon,
+    wrap,
+    inset,
+    label,
+    children,
+    fallback,
+    id: idProp,
+    'aria-label': ariaLabel
+  } = _ref2;
+  var id = ui.useUID(idProp);
+  var labelID = "".concat(id, "-label");
+  var isEmptyChildren = ui.isEmptyReactNode(children);
+  return /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+    id: id,
+    ref: ref,
+    space: "xsmall",
+    "aria-label": ariaLabel,
+    children: [!!(icon || inset) && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      width: "content",
+      children: /*#__PURE__*/jsxRuntime.jsx(DescriptionItemIcon$1, {
+        children: icon
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      width: "adaptive",
+      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
+        space: "xxsmall",
+        noWrap: !wrap,
+        children: [!!label && /*#__PURE__*/jsxRuntime.jsx(TextBox$1, {
+          as: "label",
+          id: labelID,
+          color: "secondary",
+          children: label
+        }), /*#__PURE__*/jsxRuntime.jsx(TextBox$1, {
+          as: "div",
+          noWrap: !wrap,
+          wrapOverflow: !!wrap,
+          "aria-labelledby": label == null ? undefined : labelID,
+          color: isEmptyChildren && label == null ? 'secondary' : 'primary',
+          children: isEmptyChildren ? fallback : children
+        })]
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") DescriptionItem$1.displayName = "DescriptionItem";
+
+var _excluded$9 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
+function toBytes$1(input, unit) {
+  if (unit === 'gb') return input * (1 << 30);
+  if (unit === 'mb') return input * (1 << 20);
+  return input * (1 << 10);
+}
+var KILOBYTE$1 = 1024;
+var BYTE_UNITS$1 = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+function formatBytes$1(bytes) {
+  if (bytes === 0) return '0 Bytes';
+  var unitIndex = Math.floor(Math.log(bytes) / Math.log(KILOBYTE$1));
+  var unit = BYTE_UNITS$1[unitIndex];
+  return "".concat((bytes / Math.pow(KILOBYTE$1, unitIndex)).toFixed(2), " ").concat(unit);
+}
+var StyledCardButton$1 = /*#__PURE__*/styled__default(ui.CardButton).withConfig({
+  displayName: "FileDropZone__StyledCardButton",
+  componentId: "SD__sc-5p1fk0-0"
+})(_ref => {
+  var {
+    status
+  } = _ref;
+  return {
+    backgroundColor: status === 'active' ? ui.Color.Blue50 : undefined
+  };
+});
+
+function UploadRejection$1(_ref2) {
+  var {
+    maxSize,
+    rejection
+  } = _ref2;
+  var [error] = rejection.errors;
+  if (!error) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+    align: "center",
+    children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      width: "content",
+      children: /*#__PURE__*/jsxRuntime.jsx(icons.Error, {})
+    }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      children: error.code === 'file-too-large' ? maxSize == null ? 'Attachment size is too large' : "Attachment size should be less than ".concat(formatBytes$1(maxSize)) : error.message
+    })]
+  });
+}
+
+var FileDropZone$1 = /*#__PURE__*/react.forwardRef((props, ref) => {
+  var {
+    // CardButton
+    disabled = false,
+    children: _children = 'Upload Attachments',
+    hintText = 'or Drag & Drop files',
+    startIcon = /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, {
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: js.mdiUpload
+      })
+    }),
+    fallback = /*#__PURE__*/jsxRuntime.jsx(ui.CardButton, {
+      ref: ref,
+      disabled: true,
+      startIcon: /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
+        size: "1em",
+        color: "inherit"
+      }),
+      children: "Loading dependencies\u2026"
+    }),
+    // Dropzone
+    accept,
+    maxSize = Infinity,
+    maxFiles = Infinity,
+    onDropRejected: _onDropRejected,
+    onDropAccepted: _onDropAccepted
+  } = props,
+      dropzoneProps = _objectWithoutProperties(props, _excluded$9);
+
+  return /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+    fallback: fallback,
+    children: /*#__PURE__*/jsxRuntime.jsx(Dropzone, _objectSpread(_objectSpread({}, dropzoneProps), {}, {
+      accept: accept,
+      maxSize: maxSize,
+      maxFiles: maxFiles,
+      disabled: disabled,
+      onDropAccepted: files => {
+        _onDropAccepted === null || _onDropAccepted === void 0 ? void 0 : _onDropAccepted(files);
+      },
+      onDropRejected: fileRejections => {
+        _onDropRejected === null || _onDropRejected === void 0 ? void 0 : _onDropRejected(fileRejections);
+      },
+      children: _ref3 => {
+        var {
+          isDragActive,
+          isDragReject,
+          getRootProps,
+          getInputProps,
+          fileRejections: [fileRejection]
+        } = _ref3;
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("input", _objectSpread({}, getInputProps())), /*#__PURE__*/jsxRuntime.jsx(StyledCardButton$1, _objectSpread(_objectSpread({}, getRootProps()), {}, {
+            ref: ref,
+            hint: hintText,
+            disabled: disabled,
+            startIcon: startIcon,
+            status: isDragActive ? 'active' : isDragReject ? 'error' : 'idle',
+            error: !!fileRejection && /*#__PURE__*/jsxRuntime.jsx(UploadRejection$1, {
+              accept: accept,
+              maxSize: maxSize,
+              rejection: fileRejection
+            }),
+            children: _children
+          }))]
+        });
+      }
+    }))
+  });
+});
+if (process.env.NODE_ENV !== "production") FileDropZone$1.displayName = "FileDropZone";
+
+var FileListItemName$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "FileListItem__FileListItemName",
+  componentId: "SD__sc-hxbsiy-0"
+})(["overflow:hidden;line-height:22px;white-space:nowrap;text-overflow:ellipsis;"]);
+var FileListItemProgress$1 = /*#__PURE__*/styled__default(core.CircularProgress).withConfig({
+  displayName: "FileListItem__FileListItemProgress",
+  componentId: "SD__sc-hxbsiy-1"
+})(["font-size:24px;", "{font-size:14px;}"], _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.breakpoints.up('sm');
+});
+var PdfIcon$1 = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+  children: /*#__PURE__*/jsxRuntime.jsx("path", {
+    d: js.mdiFilePdfBox
+  })
+})));
+var TextBoxIcon$1 = /*#__PURE__*/react.memo(props => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+  children: /*#__PURE__*/jsxRuntime.jsx("path", {
+    d: js.mdiTextBox
+  })
+})));
+var PDF_FILE_PATTERN$1 = /\.pdf$/;
+var IMAGE_FILE_PATTERN$1 = /\.(gif|png|jpg|jpeg)$/;
+
+function getFileType$1(name) {
+  if (PDF_FILE_PATTERN$1.exec(name)) return 'pdf';
+  if (IMAGE_FILE_PATTERN$1.exec(name)) return 'image';
+  return 'unknown';
+}
+
+var FileListItem$1 = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+  var {
+    url,
+    name,
+    status,
+    onRetry,
+    onDelete
+  } = _ref2;
+  var uid = ui.useUID();
+  var fileType = getFileType$1(name);
+  var [isHoveredState, setIsHovered] = react.useState(false);
+  var isHovered = ui.useResponsiveValue(true, isHoveredState);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    onMouseOver: () => {
+      setIsHovered(true);
+    },
+    onMouseLeave: () => {
+      setIsHovered(false);
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+      align: "center",
+      space: "xsmall",
+      children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+        width: "content",
+        children: status === 'error' ? /*#__PURE__*/jsxRuntime.jsx(icons.Error, {
+          color: "error",
+          fontSize: "small"
+        }) : fileType === 'pdf' ? /*#__PURE__*/jsxRuntime.jsx(PdfIcon$1, {
+          color: "action",
+          fontSize: "small"
+        }) : fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx(icons.Image, {
+          color: "action",
+          fontSize: "small"
+        }) : /*#__PURE__*/jsxRuntime.jsx(TextBoxIcon$1, {
+          color: "action",
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+        width: "fluid",
+        children: /*#__PURE__*/jsxRuntime.jsx(FileListItemName$1, {
+          id: uid,
+          children: !url ? name : /*#__PURE__*/jsxRuntime.jsx(core.Link, {
+            href: url,
+            noWrap: true,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: name
+          })
+        })
+      }), status === 'error' && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+        width: "content",
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+          title: "Retry",
+          children: /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+            size: "small",
+            onClick: onRetry,
+            children: /*#__PURE__*/jsxRuntime.jsx(icons.Refresh, {
+              fontSize: "small"
+            })
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+        width: "content",
+        children: status === 'loading' ? /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+          size: "small",
+          disabled: true,
+          children: /*#__PURE__*/jsxRuntime.jsx(FileListItemProgress$1, {
+            size: "1em"
+          })
+        }) : /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+          title: "Delete",
+          children: /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+            size: "small",
+            onClick: onDelete,
+            children: !isHovered && status === 'success' ? /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircle, {
+              fontSize: "small",
+              htmlColor: ui.Color.Green300
+            }) : /*#__PURE__*/jsxRuntime.jsx(icons.Delete, {
+              fontSize: "small"
+            })
+          })
+        })
+      })]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") FileListItem$1.displayName = "FileListItem";
+
+var SidebarRoot$1 = /*#__PURE__*/styled__default.aside.withConfig({
+  displayName: "Sidebar__SidebarRoot",
+  componentId: "SD__sc-b77o22-0"
+})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;width:240px;height:100vh;background-color:", ";border-right:1px solid ", ";"], ui.Color.White, ui.Color.Silver400);
+var SidebarHeader$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Sidebar__SidebarHeader",
+  componentId: "SD__sc-b77o22-1"
+})(["top:0;z-index:1;position:sticky;padding-left:24px;padding-right:24px;padding-bottom:8px;background-color:", ";"], ui.Color.White);
+var SidebarTitle$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Sidebar__SidebarTitle",
+  componentId: "SD__sc-b77o22-2"
+})(["height:64px;max-height:64px;display:flex;align-items:center;"]);
+var Sidebar$1 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    title,
+    count,
+    header,
+    children,
+    id: idProp
+  } = _ref;
+  var id = ui.useUID(idProp);
+  var titleID = "".concat(id, "-title");
+  return /*#__PURE__*/jsxRuntime.jsxs(SidebarRoot$1, {
+    id: id,
+    ref: ref,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(SidebarHeader$1, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(SidebarTitle$1, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+          space: "xsmall",
+          align: "center",
+          children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+            width: "fluid",
+            children: /*#__PURE__*/jsxRuntime.jsx(TextBox$1, {
+              variant: "heading-2",
+              noWrap: true,
+              id: titleID,
+              children: title
+            })
+          }), !!count && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+            width: "content",
+            children: /*#__PURE__*/jsxRuntime.jsx(TextBox$1, {
+              color: "secondary",
+              children: count
+            })
+          })]
+        })
+      }), header]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      "aria-labelledby": titleID,
+      children: children
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") Sidebar$1.displayName = "Sidebar";
+
+var SidebarContainerRoot$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarContainer__SidebarContainerRoot",
+  componentId: "SD__sc-uibj1m-0"
+})(["display:flex;height:inherit;max-height:inherit;min-height:inherit;"]);
+var SidebarContainerContent$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarContainer__SidebarContainerContent",
+  componentId: "SD__sc-uibj1m-1"
+})(["height:inherit;max-height:inherit;min-height:inherit;width:calc(100% - 240px);min-width:calc(100% - 240px);max-width:calc(100% - 240px);"]);
+var SidebarContainer$1 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    sidebar,
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs(SidebarContainerRoot$1, {
+    ref: ref,
+    children: [sidebar, /*#__PURE__*/jsxRuntime.jsx(SidebarContainerContent$1, {
+      children: children
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarContainer$1.displayName = "SidebarContainer";
+
+var SidebarDividerRoot$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarDivider__SidebarDividerRoot",
+  componentId: "SD__sc-5lwi2i-0"
+})(["padding:20px 24px;"]);
+var SidebarDivider$1 = /*#__PURE__*/react.forwardRef((_, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(SidebarDividerRoot$1, {
+    ref: ref,
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Divider, {})
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarDivider$1.displayName = "SidebarDivider";
+
+var context$1 = /*#__PURE__*/react.createContext({});
+function useSidebarMenuItemContext$1() {
+  return react.useContext(context$1);
+}
+function SidebarMenuItemContextProvider$1(_ref) {
+  var {
+    children,
+    hovered = false,
+    disabled = false
+  } = _ref;
+  var ctx = react.useMemo(() => ({
+    hovered,
+    disabled
+  }), [hovered, disabled]);
+  return /*#__PURE__*/jsxRuntime.jsx(context$1.Provider, {
+    value: ctx,
+    children: children
+  });
+}
+
+var SidebarMenuItemRoot$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarMenuItem__SidebarMenuItemRoot",
+  componentId: "SD__sc-1sb5zqa-0"
+})(_ref => {
+  var {
+    hasAvatar
+  } = _ref;
+  var height = hasAvatar ? 48 : 40;
+  return styled.css(["position:relative;& > .MuiButtonBase-root{width:100%;display:flex;justify-content:flex-start;padding-left:24px;padding-right:24px;height:", "px;max-height:", "px;&[aria-current='true']{background-color:", ";box-shadow:inset 4px 0 0 ", ";}}"], height, height, ui.Color.Silver200, ui.Color.Blue300);
+});
+var SidebarMenuItemBadge$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarMenuItem__SidebarMenuItemBadge",
+  componentId: "SD__sc-1sb5zqa-1"
+})(["font-size:12px;line-height:16px;padding-left:4px;padding-right:4px;border-radius:100px;color:", ";background-color:", ";.MuiButtonBase-root[aria-current='true'] &{color:", ";background-color:", ";}"], ui.Color.Dark500, ui.Color.Silver300, ui.Color.White, ui.Color.Dark450);
+var SidebarMenuItemSecondaryAction$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarMenuItem__SidebarMenuItemSecondaryAction",
+  componentId: "SD__sc-1sb5zqa-2"
+})(["top:50%;right:24px;position:absolute;transform:translate3d(0,-50%,0);"]);
+var SidebarMenuItem$1 = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
+  var {
+    action,
+    avatar,
+    onClick,
+    external,
+    children,
+    disabled,
+    selected,
+    secondaryActions,
+    badge: badgeProp
+  } = _ref2;
+  var [hovered, setHovered] = react.useState(false);
+  var actionsRef = react.useRef(null);
+  var actionsPlaceholderRef = react.useRef(null);
+  react.useLayoutEffect(() => {
+    if (actionsRef.current && actionsPlaceholderRef.current) {
+      actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
+    }
+  });
+  var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
+  return /*#__PURE__*/jsxRuntime.jsxs(SidebarMenuItemRoot$1, {
+    ref: ref,
+    hasAvatar: !!avatar,
+    onMouseEnter: () => {
+      setHovered(true);
+    },
+    onMouseLeave: () => {
+      setHovered(false);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.ButtonBase, {
+      onClick: onClick,
+      disabled: disabled,
+      "aria-current": selected,
+      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+        align: "center",
+        space: "xsmall",
+        children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+          children: /*#__PURE__*/jsxRuntime.jsx(ui.Columns, {
+            align: "center",
+            space: "xsmall",
+            children: /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+              width: "fluid",
+              children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+                align: "center",
+                space: "xsmall",
+                children: [!!avatar && /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemContextProvider$1, {
+                  hovered: hovered,
+                  disabled: disabled,
+                  children: /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+                    width: "content",
+                    children: avatar
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+                  width: "adaptive",
+                  children: /*#__PURE__*/jsxRuntime.jsx(TextBox$1, {
+                    variant: selected ? 'body-semibold' : 'body',
+                    noWrap: true,
+                    children: children
+                  })
+                }), external && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+                  width: "content",
+                  children: /*#__PURE__*/jsxRuntime.jsx(icons.OpenInNew, {
+                    color: "action",
+                    fontSize: "small"
+                  })
+                })]
+              })
+            })
+          })
+        }), !!badge && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+          width: "content",
+          children: /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemBadge$1, {
+            children: badge
+          })
+        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+          width: "content",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            ref: actionsPlaceholderRef
+          })
+        })]
+      })
+    }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemSecondaryAction$1, {
+      ref: actionsRef,
+      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
+        children: [hovered && secondaryActions, action]
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarMenuItem$1.displayName = "SidebarMenuItem";
+
+var SidebarMenuItemActionRoot$1 = /*#__PURE__*/styled__default(core.IconButton).withConfig({
+  displayName: "SidebarMenuItemAction__SidebarMenuItemActionRoot",
+  componentId: "SD__sc-1n50gmv-0"
+})(["& .MuiSvgIcon-root{font-size:16px;}"]);
+var SidebarMenuItemAction$1 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    title,
+    placement,
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+    title: title,
+    placement: placement,
+    children: /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemActionRoot$1, {
+      ref: ref,
+      size: "small",
+      edge: "end",
+      children: children
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarMenuItemAction$1.displayName = "SidebarMenuItemAction";
+
+function stopPropagation$1(event) {
+  event.stopPropagation();
+}
+
+var SidebarMenuItemAvatarCheckbox$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarMenuItemAvatar__SidebarMenuItemAvatarCheckbox",
+  componentId: "SD__sc-17mkvc7-0"
+})(["margin:-5px;"]);
+var SidebarMenuItemAvatar$1 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    children,
+    value,
+    onChange: _onChange
+  } = _ref;
+  var {
+    hovered,
+    disabled
+  } = useSidebarMenuItemContext$1();
+  var initials = react.useMemo(() => {
+    var matches = children.match(/\b\w/g) || [];
+    var first = matches.shift() || '';
+    var last = matches.pop() || '';
+    return (first + last).toUpperCase();
+  }, [children]);
+
+  if (value === true || hovered && value != null) {
+    return /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemAvatarCheckbox$1, {
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Checkbox, {
+        color: "primary",
+        checked: value,
+        disabled: disabled,
+        onMouseDown: stopPropagation$1,
+        onTouchStart: stopPropagation$1,
+        onChange: (_, checked) => {
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange(checked);
+        }
+      })
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+    ref: ref,
+    "aria-hidden": true,
+    children: initials
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarMenuItemAvatar$1.displayName = "SidebarMenuItemAvatar";
+
+var SidebarSubheaderRoot$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarSubheader__SidebarSubheaderRoot",
+  componentId: "SD__sc-1r0xx76-0"
+})(["display:flex;align-items:center;height:40px;max-height:40px;padding-left:24px;padding-right:24px;"]);
+var SidebarSubheader$1 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  var {
+    id,
+    action,
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(SidebarSubheaderRoot$1, {
+    ref: ref,
+    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+      space: "xsmall",
+      align: "center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+        children: /*#__PURE__*/jsxRuntime.jsx(TextBox$1, {
+          id: id,
+          variant: "heading-6",
+          color: "secondary",
+          noWrap: true,
+          children: children
+        })
+      }), !!action && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+        width: "content",
+        children: action
+      })]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarSubheader$1.displayName = "SidebarSubheader";
+
+exports.Alert = Alert$1;
+exports.AnchorButton = AnchorButton$1;
+exports.Banner = Banner$1;
+exports.Box = Box$1;
+exports.Button = Button$1;
+exports.ButtonArea = ButtonArea$1;
+exports.DescriptionItem = DescriptionItem$1;
+exports.FileDropZone = FileDropZone$1;
+exports.FileListItem = FileListItem$1;
+exports.Sidebar = Sidebar$1;
+exports.SidebarContainer = SidebarContainer$1;
+exports.SidebarDivider = SidebarDivider$1;
+exports.SidebarMenuItem = SidebarMenuItem$1;
+exports.SidebarMenuItemAction = SidebarMenuItemAction$1;
+exports.SidebarMenuItemAvatar = SidebarMenuItemAvatar$1;
+exports.SidebarSubheader = SidebarSubheader$1;
+exports.TextBox = TextBox$1;
+exports.formatBytes = formatBytes$1;
+exports.toBytes = toBytes$1;
+exports.v5 = index;
 //# sourceMappingURL=index.js.map