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

package/dist-node/index.js

@@ -17,9 +17,6 @@ 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);
@@ -27,7 +24,7 @@ function colorMixin(textColor, backgroundColor, buttonHoverColor) {
 
 var StyledAlert = /*#__PURE__*/styled__default(lab.Alert).withConfig({
   displayName: "Alert__StyledAlert",
-  componentId: "SD__sc-ahws81-0"
+  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(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) {
@@ -87,7 +84,7 @@ var CustomTransition = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") CustomTransition.displayName = "CustomTransition";
 var BannerContent = /*#__PURE__*/styled__default(CustomTransition).withConfig({
   displayName: "Banner__BannerContent",
-  componentId: "SD__sc-1y16295-0"
+  componentId: "SD__sc-9kw31n-0"
 })(_ref2 => {
   var {
     border = 'bottom'
@@ -130,24 +127,18 @@ function createRuleNormalizer(rules) {
   };
 }
 
-var {
-  Color,
-  isColorProp,
-  parseResponsiveProp,
-  parseSpaceProp
-} = ui.v5; //
 // Colors
 //
 
 function normalizeColor(input) {
-  return isColorProp(input) ? Color[input] : undefined;
+  return ui.isColorProp(input) ? ui.Color[input] : undefined;
 } //
 // Space
 //
 
 
 function parseSpace(space) {
-  return "".concat(parseSpaceProp(space), "px");
+  return "".concat(ui.parseSpaceProp(space), "px");
 } //
 // Margins
 //
@@ -247,7 +238,7 @@ function injectRule(styles, key, breakpoint, value, normalizer) {
 
 var Box = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Box",
-  componentId: "SD__sc-1cy411s-0"
+  componentId: "SD__sc-1bc600y-0"
 })(props => {
   var {
     breakpoints
@@ -268,7 +259,7 @@ var Box = /*#__PURE__*/styled__default.div.withConfig({
       var prop = props[key];
 
       if (prop != null) {
-        var [mobile, tablet, desktop] = parseResponsiveProp(prop);
+        var [mobile, tablet, desktop] = ui.parseResponsiveProp(prop);
         var normalizer = normalizers[key];
         injectRule(styles, key, xs, mobile, normalizer);
         injectRule(styles, key, sm, tablet, normalizer);
@@ -281,14 +272,10 @@ var Box = /*#__PURE__*/styled__default.div.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-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);
+  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 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
     icon,
@@ -308,7 +295,7 @@ var ButtonArea = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     "data-variant": variant,
     "data-full-width": fullWidth
   }, props), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(Stack, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Stack, {
       align: "center",
       space: "xxsmall",
       children: [icon, /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -440,7 +427,7 @@ function getInvertedVariables(size) {
 
 var ButtonRoot$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Button__ButtonRoot",
-  componentId: "SD__sc-1yjd62w-0"
+  componentId: "SD__sc-1pwdpe3-0"
 })(_ref2 => {
   var {
     size,
@@ -453,19 +440,19 @@ var ButtonRoot$1 = /*#__PURE__*/styled__default.button.withConfig({
 });
 var ButtonLabel = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonLabel",
-  componentId: "SD__sc-1yjd62w-1"
+  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 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonStartIcon",
-  componentId: "SD__sc-1yjd62w-2"
+  componentId: "SD__sc-1pwdpe3-2"
 })(["margin-right:4px;"]);
 var ButtonEndIcon = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonEndIcon",
-  componentId: "SD__sc-1yjd62w-3"
+  componentId: "SD__sc-1pwdpe3-3"
 })(["margin-left:4px;"]);
 var ButtonPendingIndicator = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Button__ButtonPendingIndicator",
-  componentId: "SD__sc-1yjd62w-4"
+  componentId: "SD__sc-1pwdpe3-4"
 })(["left:50%;display:flex;position:absolute;visibility:visible;transform:translate(-50%);"]);
 
 function useButtonProps(_ref3) {
@@ -567,21 +554,17 @@ function mergeStyles(styles) {
 }
 
 var _excluded$3 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
-var {
-  Color: Color$2,
-  parseResponsiveProp: parseResponsiveProp$1
-} = ui.v5;
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   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
+  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 = {
   'heading-1': 'h1',
@@ -649,7 +632,7 @@ function textBoxMixin(noWrap, align, color, display, wrapOverflow) {
 
 var TextBoxRoot = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "TextBox__TextBoxRoot",
-  componentId: "SD__sc-1geakdj-0"
+  componentId: "SD__sc-9mywck-0"
 })(_ref2 => {
   var {
     theme,
@@ -674,11 +657,11 @@ var TextBox = /*#__PURE__*/react.forwardRef((_ref3, ref) => {
   } = _ref3,
       props = _objectWithoutProperties(_ref3, _excluded$3);
 
-  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);
+  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, _objectSpread(_objectSpread({}, props), {}, {
     as: as,
     ref: ref,
@@ -692,27 +675,18 @@ 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-l1c918-0"
+  componentId: "SD__sc-1906hic-0"
 })(_ref => {
   var {
     theme
   } = _ref;
-  return styled.css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], Color$3.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
+  return styled.css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], ui.Color.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
 });
 var DescriptionItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   var {
@@ -725,22 +699,22 @@ var DescriptionItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     id: idProp,
     'aria-label': ariaLabel
   } = _ref2;
-  var id = useUID(idProp);
+  var id = ui.useUID(idProp);
   var labelID = "".concat(id, "-label");
-  var isEmptyChildren = isEmptyReactNode(children);
-  return /*#__PURE__*/jsxRuntime.jsxs(Columns, {
+  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(Column, {
+    children: [!!(icon || inset) && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
       width: "content",
       children: /*#__PURE__*/jsxRuntime.jsx(DescriptionItemIcon, {
         children: icon
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(Column, {
+    }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
       width: "adaptive",
-      children: /*#__PURE__*/jsxRuntime.jsxs(Inline, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
         space: "xxsmall",
         noWrap: !wrap,
         children: [!!label && /*#__PURE__*/jsxRuntime.jsx(TextBox, {
@@ -763,12 +737,6 @@ var DescriptionItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "DescriptionItem";
 
 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);
@@ -782,15 +750,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(CardButton).withConfig({
+var StyledCardButton = /*#__PURE__*/styled__default(ui.CardButton).withConfig({
   displayName: "FileDropZone__StyledCardButton",
-  componentId: "SD__sc-neqvyq-0"
+  componentId: "SD__sc-5p1fk0-0"
 })(_ref => {
   var {
     status
   } = _ref;
   return {
-    backgroundColor: status === 'active' ? Color$4.Blue50 : undefined
+    backgroundColor: status === 'active' ? ui.Color.Blue50 : undefined
   };
 });
 
@@ -801,12 +769,12 @@ function UploadRejection(_ref2) {
   } = _ref2;
   var [error] = rejection.errors;
   if (!error) return null;
-  return /*#__PURE__*/jsxRuntime.jsxs(Columns$1, {
+  return /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
     align: "center",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Column$1, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
       width: "content",
       children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Error, {})
-    }), /*#__PURE__*/jsxRuntime.jsx(Column$1, {
+    }), /*#__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(maxSize)) : error.message
     })]
   });
@@ -823,7 +791,7 @@ var FileDropZone = /*#__PURE__*/react.forwardRef((props, ref) => {
         d: js.mdiUpload
       })
     }),
-    fallback = /*#__PURE__*/jsxRuntime.jsx(CardButton, {
+    fallback = /*#__PURE__*/jsxRuntime.jsx(ui.CardButton, {
       ref: ref,
       disabled: true,
       startIcon: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {
@@ -883,20 +851,13 @@ 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-1pro30e-0"
+  componentId: "SD__sc-hxbsiy-0"
 })(["overflow:hidden;line-height:22px;white-space:nowrap;text-overflow:ellipsis;"]);
 var FileListItemProgress = /*#__PURE__*/styled__default(material.CircularProgress).withConfig({
   displayName: "FileListItem__FileListItemProgress",
-  componentId: "SD__sc-1pro30e-1"
+  componentId: "SD__sc-hxbsiy-1"
 })(["font-size:24px;", "{font-size:14px;}"], _ref => {
   var {
     theme
@@ -930,10 +891,10 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     onRetry,
     onDelete
   } = _ref2;
-  var uid = useUID$1();
+  var uid = ui.useUID();
   var fileType = getFileType(name);
   var [isHoveredState, setIsHovered] = react.useState(false);
-  var isHovered = useResponsiveValue(true, isHoveredState);
+  var isHovered = ui.useResponsiveValue(true, isHoveredState);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: ref,
     onMouseOver: () => {
@@ -942,10 +903,10 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     onMouseLeave: () => {
       setIsHovered(false);
     },
-    children: /*#__PURE__*/jsxRuntime.jsxs(Columns$2, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
       align: "center",
       space: "xsmall",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Column$2, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         width: "content",
         children: status === 'error' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Error, {
           color: "error",
@@ -960,7 +921,7 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
           color: "action",
           fontSize: "small"
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(Column$2, {
+      }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         width: "fluid",
         children: /*#__PURE__*/jsxRuntime.jsx(FileListItemName, {
           id: uid,
@@ -972,7 +933,7 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
             children: name
           })
         })
-      }), status === 'error' && /*#__PURE__*/jsxRuntime.jsx(Column$2, {
+      }), status === 'error' && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         width: "content",
         children: /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
           title: "Retry",
@@ -984,7 +945,7 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
             })
           })
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(Column$2, {
+      }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         width: "content",
         children: status === 'loading' ? /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
           size: "small",
@@ -999,7 +960,7 @@ var FileListItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
             onClick: onDelete,
             children: !isHovered && status === 'success' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.CheckCircle, {
               fontSize: "small",
-              htmlColor: Color$5.Green300
+              htmlColor: ui.Color.Green300
             }) : /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Delete, {
               fontSize: "small"
             })
@@ -1011,23 +972,17 @@ 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-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);
+  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 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Sidebar__SidebarHeader",
-  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);
+  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 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Sidebar__SidebarTitle",
-  componentId: "SD__sc-14hfb05-2"
+  componentId: "SD__sc-b77o22-2"
 })(["height:64px;max-height:64px;display:flex;align-items:center;"]);
 var Sidebar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -1037,17 +992,17 @@ var Sidebar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     children,
     id: idProp
   } = _ref;
-  var id = useUID$2(idProp);
+  var id = ui.useUID(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(Columns$3, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
           space: "xsmall",
           align: "center",
-          children: [/*#__PURE__*/jsxRuntime.jsx(Column$3, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
             width: "fluid",
             children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
               variant: "heading-2",
@@ -1055,7 +1010,7 @@ var Sidebar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
               id: titleID,
               children: title
             })
-          }), !!count && /*#__PURE__*/jsxRuntime.jsx(Column$3, {
+          }), !!count && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
             width: "content",
             children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
               color: "secondary",
@@ -1074,11 +1029,11 @@ if (process.env.NODE_ENV !== "production") Sidebar.displayName = "Sidebar";
 
 var SidebarContainerRoot = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarContainer__SidebarContainerRoot",
-  componentId: "SD__sc-6u6mqe-0"
+  componentId: "SD__sc-uibj1m-0"
 })(["display:flex;height:inherit;max-height:inherit;min-height:inherit;"]);
 var SidebarContainerContent = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarContainer__SidebarContainerContent",
-  componentId: "SD__sc-6u6mqe-1"
+  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 = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -1096,7 +1051,7 @@ if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "Sideb
 
 var SidebarDividerRoot = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarDivider__SidebarDividerRoot",
-  componentId: "SD__sc-182lunj-0"
+  componentId: "SD__sc-5lwi2i-0"
 })(["padding:20px 24px;"]);
 var SidebarDivider = /*#__PURE__*/react.forwardRef((_, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(SidebarDividerRoot, {
@@ -1126,29 +1081,23 @@ 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-1srwx2n-0"
+  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, Color$7.Silver200, Color$7.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, ui.Color.Silver200, ui.Color.Blue300);
 });
 var SidebarMenuItemBadge = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemBadge",
-  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);
+  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 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarMenuItem__SidebarMenuItemSecondaryAction",
-  componentId: "SD__sc-1srwx2n-2"
+  componentId: "SD__sc-1sb5zqa-2"
 })(["top:50%;right:24px;position:absolute;transform:translate3d(0,-50%,0);"]);
 var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   var {
@@ -1184,33 +1133,33 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
       onClick: onClick,
       disabled: disabled,
       "aria-current": selected,
-      children: /*#__PURE__*/jsxRuntime.jsxs(Columns$4, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
         align: "center",
         space: "xsmall",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Column$4, {
-          children: /*#__PURE__*/jsxRuntime.jsx(Columns$4, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+          children: /*#__PURE__*/jsxRuntime.jsx(ui.Columns, {
             align: "center",
             space: "xsmall",
-            children: /*#__PURE__*/jsxRuntime.jsx(Column$4, {
+            children: /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
               width: "fluid",
-              children: /*#__PURE__*/jsxRuntime.jsxs(Columns$4, {
+              children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
                 align: "center",
                 space: "xsmall",
                 children: [!!avatar && /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemContextProvider, {
                   hovered: hovered,
                   disabled: disabled,
-                  children: /*#__PURE__*/jsxRuntime.jsx(Column$4, {
+                  children: /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
                     width: "content",
                     children: avatar
                   })
-                }), /*#__PURE__*/jsxRuntime.jsx(Column$4, {
+                }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
                   width: "adaptive",
                   children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
                     variant: selected ? 'body-semibold' : 'body',
                     noWrap: true,
                     children: children
                   })
-                }), external && /*#__PURE__*/jsxRuntime.jsx(Column$4, {
+                }), external && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
                   width: "content",
                   children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.OpenInNew, {
                     color: "action",
@@ -1220,12 +1169,12 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
               })
             })
           })
-        }), !!badge && /*#__PURE__*/jsxRuntime.jsx(Column$4, {
+        }), !!badge && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
           width: "content",
           children: /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemBadge, {
             children: badge
           })
-        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(Column$4, {
+        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
           width: "content",
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             ref: actionsPlaceholderRef
@@ -1234,7 +1183,7 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
       })
     }), (!!action || !!secondaryActions) && /*#__PURE__*/jsxRuntime.jsx(SidebarMenuItemSecondaryAction, {
       ref: actionsRef,
-      children: /*#__PURE__*/jsxRuntime.jsxs(Inline$1, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Inline, {
         children: [hovered && secondaryActions, action]
       })
     })]
@@ -1244,7 +1193,7 @@ if (process.env.NODE_ENV !== "production") SidebarMenuItem.displayName = "Sideba
 
 var SidebarMenuItemActionRoot = /*#__PURE__*/styled__default(material.IconButton).withConfig({
   displayName: "SidebarMenuItemAction__SidebarMenuItemActionRoot",
-  componentId: "SD__sc-4la7tu-0"
+  componentId: "SD__sc-1n50gmv-0"
 })(["& .MuiSvgIcon-root{font-size:16px;}"]);
 var SidebarMenuItemAction = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -1271,7 +1220,7 @@ function stopPropagation(event) {
 
 var SidebarMenuItemAvatarCheckbox = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarMenuItemAvatar__SidebarMenuItemAvatarCheckbox",
-  componentId: "SD__sc-bfi0pv-0"
+  componentId: "SD__sc-17mkvc7-0"
 })(["margin:-5px;"]);
 var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   var {
@@ -1313,13 +1262,9 @@ 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-7njpmq-0"
+  componentId: "SD__sc-1r0xx76-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 {
@@ -1329,10 +1274,10 @@ var SidebarSubheader = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx(SidebarSubheaderRoot, {
     ref: ref,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Columns$5, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
       space: "xsmall",
       align: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Column$5, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
           id: id,
           variant: "heading-6",
@@ -1340,7 +1285,7 @@ var SidebarSubheader = /*#__PURE__*/react.forwardRef((_ref, ref) => {
           noWrap: true,
           children: children
         })
-      }), !!action && /*#__PURE__*/jsxRuntime.jsx(Column$5, {
+      }), !!action && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
         width: "content",
         children: action
       })]
@@ -1349,1325 +1294,23 @@ var SidebarSubheader = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-
-
-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;
+exports.Alert = Alert;
+exports.AnchorButton = AnchorButton;
+exports.Banner = Banner;
+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;
 //# sourceMappingURL=index.js.map