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

package/dist-web/index.js

@@ -1,24 +1,27 @@
-import { CheckCircle, Info, Error, Image, Refresh, Delete, OpenInNew } from '@material-ui/icons';
-import { Alert as Alert$1 } from '@material-ui/lab';
-import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, useUID, isEmptyReactNode, Columns, Column, Inline, CardButton, useResponsiveValue } from '@superdispatch/ui';
+import { CheckCircle, Info, Error, Image, Refresh, Delete, OpenInNew } from '@mui/icons-material';
+import { Alert as Alert$2 } from '@mui/lab';
+import { Color as Color$8, v5, parseResponsiveProp as parseResponsiveProp$2, isColorProp as isColorProp$1, parseSpaceProp as parseSpaceProp$1, Stack as Stack$1, useUID as useUID$3, isEmptyReactNode as isEmptyReactNode$1, Columns as Columns$6, Column as Column$6, Inline as Inline$2, CardButton as CardButton$1, useResponsiveValue as useResponsiveValue$1 } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, Suspense, memo, useContext, createContext, useMemo, useRef, useLayoutEffect } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { CSSTransition } from 'react-transition-group';
-import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, Divider, Checkbox, Avatar } from '@material-ui/core';
+import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, Divider, Checkbox, Avatar } from '@mui/material';
 import { mdiUpload, mdiFilePdfBox, mdiTextBox } from '@mdi/js';
 import Dropzone from 'react-dropzone';
+import { CheckCircle as CheckCircle$1, Info as Info$1, Error as Error$1, Image as Image$1, Refresh as Refresh$1, Delete as Delete$1, OpenInNew as OpenInNew$1 } from '@material-ui/icons';
+import { Alert as Alert$3 } from '@material-ui/lab';
+import { ButtonBase as ButtonBase$1, Typography as Typography$1, CircularProgress as CircularProgress$1, SvgIcon as SvgIcon$1, Link as Link$1, Tooltip as Tooltip$1, IconButton as IconButton$1, Divider as Divider$1, Checkbox as Checkbox$1, Avatar as Avatar$1 } from '@material-ui/core';
 
 function colorMixin(textColor, backgroundColor, buttonHoverColor) {
   return css(["color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, backgroundColor, textColor, buttonHoverColor);
 }
 
-var StyledAlert = /*#__PURE__*/styled(Alert$1).withConfig({
+var StyledAlert = /*#__PURE__*/styled(Alert$2).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(Color.Green500, Color.Green50, Color.Green400), /*#__PURE__*/colorMixin(Color.Blue500, Color.Blue50, Color.Blue400), /*#__PURE__*/colorMixin(Color.Yellow500, Color.Yellow50, Color.Yellow400), /*#__PURE__*/colorMixin(Color.Red500, Color.Red50, Color.Red400));
+  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(Color$8.Green500, Color$8.Green50, Color$8.Green400), /*#__PURE__*/colorMixin(Color$8.Blue500, Color$8.Blue50, Color$8.Blue400), /*#__PURE__*/colorMixin(Color$8.Yellow500, Color$8.Yellow50, Color$8.Yellow400), /*#__PURE__*/colorMixin(Color$8.Red500, Color$8.Red50, Color$8.Red400));
 
 function toMaterialSeverity(severity) {
   return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
@@ -52,11 +55,11 @@ var _excluded = ["children"],
     _excluded2 = ["in"];
 
 function enterMixin(border) {
-  return css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], Color.Dark500, Color.White, border);
+  return css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], Color$8.Dark500, Color$8.White, border);
 }
 
 function enterAnimation(border) {
-  return keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], Color.White, Color.Dark500, Color.White, Color.Dark500, Color.White, Color.Dark500, enterMixin(border));
+  return keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], Color$8.White, Color$8.Dark500, Color$8.White, Color$8.Dark500, Color$8.White, Color$8.Dark500, enterMixin(border));
 }
 
 var CustomTransition = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -77,12 +80,12 @@ var CustomTransition = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") CustomTransition.displayName = "CustomTransition";
 var BannerContent = /*#__PURE__*/styled(CustomTransition).withConfig({
   displayName: "Banner__BannerContent",
-  componentId: "SD__sc-9kw31n-0"
+  componentId: "SD__sc-1y16295-0"
 })(_ref2 => {
   var {
     border = 'bottom'
   } = _ref2;
-  return 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;}"], Color.White, Color.White, enterAnimation(border), enterMixin(border), enterMixin(border));
+  return 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;}"], Color$8.White, Color$8.White, enterAnimation(border), enterMixin(border), enterMixin(border));
 });
 var Banner = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var {
@@ -120,9 +123,16 @@ function createRuleNormalizer(rules) {
   };
 }
 
+var {
+  Color,
+  isColorProp,
+  parseResponsiveProp,
+  parseSpaceProp
+} = v5;
+
+//
 // Colors
 //
-
 function normalizeColor(input) {
   return isColorProp(input) ? Color[input] : undefined;
 } //
@@ -231,7 +241,7 @@ function injectRule(styles, key, breakpoint, value, normalizer) {
 
 var Box = /*#__PURE__*/styled.div.withConfig({
   displayName: "Box",
-  componentId: "SD__sc-1bc600y-0"
+  componentId: "SD__sc-1cy411s-0"
 })(props => {
   var {
     breakpoints
@@ -265,10 +275,14 @@ var Box = /*#__PURE__*/styled.div.withConfig({
 });
 
 var _excluded$1 = ["icon", "children", "variant", "active", "disabled", "fullWidth"];
+var {
+  Color: Color$1,
+  Stack
+} = v5;
 var ButtonRoot = /*#__PURE__*/styled(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:", ";}}"], Color.Silver500, Color.Dark100, Color.White, Color.Silver500, Color.Silver400, Color.Green300, Color.Green100, Color.Green300, Color.Green300, Color.Green300, Color.Green50, Color.Red300, Color.Red100, Color.Red300, Color.Red300, Color.Red300, 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__*/forwardRef((_ref, ref) => {
   var {
     icon,
@@ -315,14 +329,14 @@ function createButtonVariables(size, _ref) {
     paddingY = size === 'large' ? 8 : size === 'small' ? 2 : 6,
     paddingXMobile = size === 'large' ? 64 : 24,
     paddingYMobile = size === 'large' ? 14 : size === 'small' ? 4 : 10,
-    textColor = Color.Transparent,
+    textColor = Color$8.Transparent,
     textColorHovered = textColor,
     textColorDisabled = textColor,
-    outlineColor = Color.Transparent,
-    borderColor = Color.Transparent,
+    outlineColor = Color$8.Transparent,
+    borderColor = Color$8.Transparent,
     borderColorHovered = borderColor,
     borderColorDisabled = borderColor,
-    backgroundColor = Color.Transparent,
+    backgroundColor = Color$8.Transparent,
     backgroundColorHovered = backgroundColor,
     backgroundColorActive = backgroundColorHovered,
     backgroundColorDisabled = backgroundColor
@@ -352,13 +366,13 @@ function createButtonVariables(size, _ref) {
 
 function getDefaultVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.White,
-    outlineColor: Color.Blue100,
-    backgroundColor: Color.Blue300,
-    textColorHovered: Color.White,
-    backgroundColorHovered: Color.Blue500,
-    backgroundColorActive: Color.Blue400,
-    backgroundColorDisabled: Color.Blue100
+    textColor: Color$8.White,
+    outlineColor: Color$8.Blue100,
+    backgroundColor: Color$8.Blue300,
+    textColorHovered: Color$8.White,
+    backgroundColorHovered: Color$8.Blue500,
+    backgroundColorActive: Color$8.Blue400,
+    backgroundColorDisabled: Color$8.Blue100
   });
 }
 
@@ -368,59 +382,59 @@ function getPrimaryVariables(size) {
 
 function getNeutralVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Dark500,
-    borderColor: Color.Silver500,
-    outlineColor: Color.Blue100,
-    backgroundColor: Color.White,
-    textColorHovered: Color.Blue300,
-    borderColorHovered: Color.Blue300,
-    backgroundColorHovered: Color.Blue50,
-    backgroundColorActive: Color.Blue75,
-    textColorDisabled: Color.Silver500
+    textColor: Color$8.Dark500,
+    borderColor: Color$8.Silver500,
+    outlineColor: Color$8.Blue100,
+    backgroundColor: Color$8.White,
+    textColorHovered: Color$8.Blue300,
+    borderColorHovered: Color$8.Blue300,
+    backgroundColorHovered: Color$8.Blue50,
+    backgroundColorActive: Color$8.Blue75,
+    textColorDisabled: Color$8.Silver500
   });
 }
 
 function getCriticalVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Red300,
-    borderColor: Color.Red300,
-    outlineColor: Color.Red75,
-    backgroundColor: Color.Red50,
-    backgroundColorHovered: Color.Red75,
-    backgroundColorActive: Color.Red100,
-    textColorDisabled: Color.Red100,
-    borderColorDisabled: Color.Red100,
-    backgroundColorDisabled: Color.Red50
+    textColor: Color$8.Red300,
+    borderColor: Color$8.Red300,
+    outlineColor: Color$8.Red75,
+    backgroundColor: Color$8.Red50,
+    backgroundColorHovered: Color$8.Red75,
+    backgroundColorActive: Color$8.Red100,
+    textColorDisabled: Color$8.Red100,
+    borderColorDisabled: Color$8.Red100,
+    backgroundColorDisabled: Color$8.Red50
   });
 }
 
 function getTextVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.Blue400,
-    outlineColor: Color.Blue100,
-    textColorHovered: Color.Blue500,
-    backgroundColorHovered: Color.Blue50,
-    backgroundColorActive: Color.Blue75,
-    textColorDisabled: Color.Blue100
+    textColor: Color$8.Blue400,
+    outlineColor: Color$8.Blue100,
+    textColorHovered: Color$8.Blue500,
+    backgroundColorHovered: Color$8.Blue50,
+    backgroundColorActive: Color$8.Blue75,
+    textColorDisabled: Color$8.Blue100
   });
 }
 
 function getInvertedVariables(size) {
   return createButtonVariables(size, {
-    textColor: Color.White,
-    outlineColor: Color.White40,
-    backgroundColor: Color.White20,
-    textColorHovered: Color.White,
-    backgroundColorHovered: Color.White40,
-    backgroundColorActive: Color.White20,
-    textColorDisabled: Color.White50,
-    backgroundColorDisabled: Color.White08
+    textColor: Color$8.White,
+    outlineColor: Color$8.White40,
+    backgroundColor: Color$8.White20,
+    textColorHovered: Color$8.White,
+    backgroundColorHovered: Color$8.White40,
+    backgroundColorActive: Color$8.White20,
+    textColorDisabled: Color$8.White50,
+    backgroundColorDisabled: Color$8.White08
   });
 }
 
 var ButtonRoot$1 = /*#__PURE__*/styled.button.withConfig({
   displayName: "Button__ButtonRoot",
-  componentId: "SD__sc-1pwdpe3-0"
+  componentId: "SD__sc-1yjd62w-0"
 })(_ref2 => {
   var {
     size,
@@ -429,23 +443,23 @@ var ButtonRoot$1 = /*#__PURE__*/styled.button.withConfig({
     fullWidth
   } = _ref2;
   var variables = variant === 'primary' ? getPrimaryVariables(size) : variant === 'neutral' ? getNeutralVariables(size) : variant === 'critical' ? getCriticalVariables(size) : variant === 'text' ? getTextVariables(size) : variant === 'inverted' ? getInvertedVariables(size) : getDefaultVariables(size);
-  return 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, 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']));
+  return 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, Color$8.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 = /*#__PURE__*/styled.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.span.withConfig({
   displayName: "Button__ButtonStartIcon",
-  componentId: "SD__sc-1pwdpe3-2"
+  componentId: "SD__sc-1yjd62w-2"
 })(["margin-right:4px;"]);
 var ButtonEndIcon = /*#__PURE__*/styled.span.withConfig({
   displayName: "Button__ButtonEndIcon",
-  componentId: "SD__sc-1pwdpe3-3"
+  componentId: "SD__sc-1yjd62w-3"
 })(["margin-left:4px;"]);
 var ButtonPendingIndicator = /*#__PURE__*/styled.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) {
@@ -547,17 +561,21 @@ function mergeStyles(styles) {
 }
 
 var _excluded$3 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
+var {
+  Color: Color$2,
+  parseResponsiveProp: parseResponsiveProp$1
+} = v5;
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   inherit: 'inherit',
-  primary: Color.Dark500,
-  secondary: Color.Dark200,
-  white: Color.White,
-  blue: Color.Blue300,
-  green: Color.Green300,
-  purple: Color.Purple500,
-  red: Color.Red300,
-  teal: Color.Teal300,
-  yellow: Color.Yellow300
+  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',
@@ -625,7 +643,7 @@ function textBoxMixin(noWrap, align, color, display, wrapOverflow) {
 
 var TextBoxRoot = /*#__PURE__*/styled.span.withConfig({
   displayName: "TextBox__TextBoxRoot",
-  componentId: "SD__sc-9mywck-0"
+  componentId: "SD__sc-1geakdj-0"
 })(_ref2 => {
   var {
     theme,
@@ -650,11 +668,11 @@ var TextBox = /*#__PURE__*/forwardRef((_ref3, ref) => {
   } = _ref3,
       props = _objectWithoutProperties(_ref3, _excluded$3);
 
-  var $align = parseResponsiveProp(align);
-  var $color = parseResponsiveProp(color);
-  var $noWrap = parseResponsiveProp(noWrap);
-  var $display = parseResponsiveProp(display);
-  var $wrapOverflow = 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__*/jsx(TextBoxRoot, _objectSpread(_objectSpread({}, props), {}, {
     as: as,
     ref: ref,
@@ -668,18 +686,27 @@ var TextBox = /*#__PURE__*/forwardRef((_ref3, ref) => {
 });
 if (process.env.NODE_ENV !== "production") TextBox.displayName = "TextBox";
 
+var {
+  Color: Color$3,
+  Column,
+  Columns,
+  Inline,
+  isEmptyReactNode,
+  useUID
+} = v5;
+
 function descriptionItemIconMixin(size) {
   return css(["width:", "px;height:", "px;& > .MuiSvgIcon-root{font-size:", "px;}"], size, size + 4, size);
 }
 
 var DescriptionItemIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "DescriptionItem__DescriptionItemIcon",
-  componentId: "SD__sc-1906hic-0"
+  componentId: "SD__sc-l1c918-0"
 })(_ref => {
   var {
     theme
   } = _ref;
-  return css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], Color.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
+  return css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], Color$3.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
 });
 var DescriptionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
@@ -730,6 +757,12 @@ var DescriptionItem = /*#__PURE__*/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
+} = v5;
 function toBytes(input, unit) {
   if (unit === 'gb') return input * (1 << 30);
   if (unit === 'mb') return input * (1 << 20);
@@ -745,13 +778,13 @@ function formatBytes(bytes) {
 }
 var StyledCardButton = /*#__PURE__*/styled(CardButton).withConfig({
   displayName: "FileDropZone__StyledCardButton",
-  componentId: "SD__sc-5p1fk0-0"
+  componentId: "SD__sc-neqvyq-0"
 })(_ref => {
   var {
     status
   } = _ref;
   return {
-    backgroundColor: status === 'active' ? Color.Blue50 : undefined
+    backgroundColor: status === 'active' ? Color$4.Blue50 : undefined
   };
 });
 
@@ -762,12 +795,12 @@ function UploadRejection(_ref2) {
   } = _ref2;
   var [error] = rejection.errors;
   if (!error) return null;
-  return /*#__PURE__*/jsxs(Columns, {
+  return /*#__PURE__*/jsxs(Columns$1, {
     align: "center",
-    children: [/*#__PURE__*/jsx(Column, {
+    children: [/*#__PURE__*/jsx(Column$1, {
       width: "content",
       children: /*#__PURE__*/jsx(Error, {})
-    }), /*#__PURE__*/jsx(Column, {
+    }), /*#__PURE__*/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
     })]
   });
@@ -844,13 +877,20 @@ var FileDropZone = /*#__PURE__*/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
+} = v5;
 var FileListItemName = /*#__PURE__*/styled.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(CircularProgress).withConfig({
   displayName: "FileListItem__FileListItemProgress",
-  componentId: "SD__sc-hxbsiy-1"
+  componentId: "SD__sc-1pro30e-1"
 })(["font-size:24px;", "{font-size:14px;}"], _ref => {
   var {
     theme
@@ -884,7 +924,7 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     onRetry,
     onDelete
   } = _ref2;
-  var uid = useUID();
+  var uid = useUID$1();
   var fileType = getFileType(name);
   var [isHoveredState, setIsHovered] = useState(false);
   var isHovered = useResponsiveValue(true, isHoveredState);
@@ -896,10 +936,10 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     onMouseLeave: () => {
       setIsHovered(false);
     },
-    children: /*#__PURE__*/jsxs(Columns, {
+    children: /*#__PURE__*/jsxs(Columns$2, {
       align: "center",
       space: "xsmall",
-      children: [/*#__PURE__*/jsx(Column, {
+      children: [/*#__PURE__*/jsx(Column$2, {
         width: "content",
         children: status === 'error' ? /*#__PURE__*/jsx(Error, {
           color: "error",
@@ -914,7 +954,7 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
           color: "action",
           fontSize: "small"
         })
-      }), /*#__PURE__*/jsx(Column, {
+      }), /*#__PURE__*/jsx(Column$2, {
         width: "fluid",
         children: /*#__PURE__*/jsx(FileListItemName, {
           id: uid,
@@ -926,7 +966,7 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
             children: name
           })
         })
-      }), status === 'error' && /*#__PURE__*/jsx(Column, {
+      }), status === 'error' && /*#__PURE__*/jsx(Column$2, {
         width: "content",
         children: /*#__PURE__*/jsx(Tooltip, {
           title: "Retry",
@@ -938,7 +978,7 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
             })
           })
         })
-      }), /*#__PURE__*/jsx(Column, {
+      }), /*#__PURE__*/jsx(Column$2, {
         width: "content",
         children: status === 'loading' ? /*#__PURE__*/jsx(IconButton, {
           size: "small",
@@ -953,7 +993,7 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
             onClick: onDelete,
             children: !isHovered && status === 'success' ? /*#__PURE__*/jsx(CheckCircle, {
               fontSize: "small",
-              htmlColor: Color.Green300
+              htmlColor: Color$5.Green300
             }) : /*#__PURE__*/jsx(Delete, {
               fontSize: "small"
             })
@@ -965,17 +1005,23 @@ var FileListItem = /*#__PURE__*/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
+} = v5;
 var SidebarRoot = /*#__PURE__*/styled.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 ", ";"], Color.White, 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.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:", ";"], 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.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__*/forwardRef((_ref, ref) => {
   var {
@@ -985,17 +1031,17 @@ var Sidebar = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     id: idProp
   } = _ref;
-  var id = useUID(idProp);
+  var id = useUID$2(idProp);
   var titleID = "".concat(id, "-title");
   return /*#__PURE__*/jsxs(SidebarRoot, {
     id: id,
     ref: ref,
     children: [/*#__PURE__*/jsxs(SidebarHeader, {
       children: [/*#__PURE__*/jsx(SidebarTitle, {
-        children: /*#__PURE__*/jsxs(Columns, {
+        children: /*#__PURE__*/jsxs(Columns$3, {
           space: "xsmall",
           align: "center",
-          children: [/*#__PURE__*/jsx(Column, {
+          children: [/*#__PURE__*/jsx(Column$3, {
             width: "fluid",
             children: /*#__PURE__*/jsx(TextBox, {
               variant: "heading-2",
@@ -1003,7 +1049,7 @@ var Sidebar = /*#__PURE__*/forwardRef((_ref, ref) => {
               id: titleID,
               children: title
             })
-          }), !!count && /*#__PURE__*/jsx(Column, {
+          }), !!count && /*#__PURE__*/jsx(Column$3, {
             width: "content",
             children: /*#__PURE__*/jsx(TextBox, {
               color: "secondary",
@@ -1022,11 +1068,11 @@ if (process.env.NODE_ENV !== "production") Sidebar.displayName = "Sidebar";
 
 var SidebarContainerRoot = /*#__PURE__*/styled.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.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__*/forwardRef((_ref, ref) => {
   var {
@@ -1044,7 +1090,7 @@ if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "Sideb
 
 var SidebarDividerRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarDivider__SidebarDividerRoot",
-  componentId: "SD__sc-5lwi2i-0"
+  componentId: "SD__sc-182lunj-0"
 })(["padding:20px 24px;"]);
 var SidebarDivider = /*#__PURE__*/forwardRef((_, ref) => {
   return /*#__PURE__*/jsx(SidebarDividerRoot, {
@@ -1074,23 +1120,29 @@ function SidebarMenuItemContextProvider(_ref) {
   });
 }
 
+var {
+  Color: Color$7,
+  Column: Column$4,
+  Columns: Columns$4,
+  Inline: Inline$1
+} = v5;
 var SidebarMenuItemRoot = /*#__PURE__*/styled.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 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.Silver200, Color.Blue300);
+  return 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.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:", ";}"], Color.Dark500, Color.Silver300, Color.White, 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.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__*/forwardRef((_ref2, ref) => {
   var {
@@ -1126,33 +1178,33 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       onClick: onClick,
       disabled: disabled,
       "aria-current": selected,
-      children: /*#__PURE__*/jsxs(Columns, {
+      children: /*#__PURE__*/jsxs(Columns$4, {
         align: "center",
         space: "xsmall",
-        children: [/*#__PURE__*/jsx(Column, {
-          children: /*#__PURE__*/jsx(Columns, {
+        children: [/*#__PURE__*/jsx(Column$4, {
+          children: /*#__PURE__*/jsx(Columns$4, {
             align: "center",
             space: "xsmall",
-            children: /*#__PURE__*/jsx(Column, {
+            children: /*#__PURE__*/jsx(Column$4, {
               width: "fluid",
-              children: /*#__PURE__*/jsxs(Columns, {
+              children: /*#__PURE__*/jsxs(Columns$4, {
                 align: "center",
                 space: "xsmall",
                 children: [!!avatar && /*#__PURE__*/jsx(SidebarMenuItemContextProvider, {
                   hovered: hovered,
                   disabled: disabled,
-                  children: /*#__PURE__*/jsx(Column, {
+                  children: /*#__PURE__*/jsx(Column$4, {
                     width: "content",
                     children: avatar
                   })
-                }), /*#__PURE__*/jsx(Column, {
+                }), /*#__PURE__*/jsx(Column$4, {
                   width: "adaptive",
                   children: /*#__PURE__*/jsx(TextBox, {
                     variant: selected ? 'body-semibold' : 'body',
                     noWrap: true,
                     children: children
                   })
-                }), external && /*#__PURE__*/jsx(Column, {
+                }), external && /*#__PURE__*/jsx(Column$4, {
                   width: "content",
                   children: /*#__PURE__*/jsx(OpenInNew, {
                     color: "action",
@@ -1162,12 +1214,12 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
               })
             })
           })
-        }), !!badge && /*#__PURE__*/jsx(Column, {
+        }), !!badge && /*#__PURE__*/jsx(Column$4, {
           width: "content",
           children: /*#__PURE__*/jsx(SidebarMenuItemBadge, {
             children: badge
           })
-        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsx(Column, {
+        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsx(Column$4, {
           width: "content",
           children: /*#__PURE__*/jsx("div", {
             ref: actionsPlaceholderRef
@@ -1176,7 +1228,7 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       })
     }), (!!action || !!secondaryActions) && /*#__PURE__*/jsx(SidebarMenuItemSecondaryAction, {
       ref: actionsRef,
-      children: /*#__PURE__*/jsxs(Inline, {
+      children: /*#__PURE__*/jsxs(Inline$1, {
         children: [hovered && secondaryActions, action]
       })
     })]
@@ -1186,7 +1238,7 @@ if (process.env.NODE_ENV !== "production") SidebarMenuItem.displayName = "Sideba
 
 var SidebarMenuItemActionRoot = /*#__PURE__*/styled(IconButton).withConfig({
   displayName: "SidebarMenuItemAction__SidebarMenuItemActionRoot",
-  componentId: "SD__sc-1n50gmv-0"
+  componentId: "SD__sc-4la7tu-0"
 })(["& .MuiSvgIcon-root{font-size:16px;}"]);
 var SidebarMenuItemAction = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -1213,7 +1265,7 @@ function stopPropagation(event) {
 
 var SidebarMenuItemAvatarCheckbox = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarMenuItemAvatar__SidebarMenuItemAvatarCheckbox",
-  componentId: "SD__sc-17mkvc7-0"
+  componentId: "SD__sc-bfi0pv-0"
 })(["margin:-5px;"]);
 var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -1255,9 +1307,13 @@ var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarMenuItemAvatar.displayName = "SidebarMenuItemAvatar";
 
+var {
+  Column: Column$5,
+  Columns: Columns$5
+} = v5;
 var SidebarSubheaderRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarSubheader__SidebarSubheaderRoot",
-  componentId: "SD__sc-1r0xx76-0"
+  componentId: "SD__sc-7njpmq-0"
 })(["display:flex;align-items:center;height:40px;max-height:40px;padding-left:24px;padding-right:24px;"]);
 var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -1267,10 +1323,10 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/jsx(SidebarSubheaderRoot, {
     ref: ref,
-    children: /*#__PURE__*/jsxs(Columns, {
+    children: /*#__PURE__*/jsxs(Columns$5, {
       space: "xsmall",
       align: "center",
-      children: [/*#__PURE__*/jsx(Column, {
+      children: [/*#__PURE__*/jsx(Column$5, {
         children: /*#__PURE__*/jsx(TextBox, {
           id: id,
           variant: "heading-6",
@@ -1278,7 +1334,7 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
           noWrap: true,
           children: children
         })
-      }), !!action && /*#__PURE__*/jsx(Column, {
+      }), !!action && /*#__PURE__*/jsx(Column$5, {
         width: "content",
         children: action
       })]
@@ -1287,5 +1343,1306 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, DescriptionItem, FileDropZone, FileListItem, Sidebar, SidebarContainer, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, 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 css(["color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, backgroundColor, textColor, buttonHoverColor);
+}
+
+var StyledAlert$1 = /*#__PURE__*/styled(Alert$3).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(Color$8.Green500, Color$8.Green50, Color$8.Green400), /*#__PURE__*/colorMixin$1(Color$8.Blue500, Color$8.Blue50, Color$8.Blue400), /*#__PURE__*/colorMixin$1(Color$8.Yellow500, Color$8.Yellow50, Color$8.Yellow400), /*#__PURE__*/colorMixin$1(Color$8.Red500, Color$8.Red50, Color$8.Red400));
+
+function toMaterialSeverity$1(severity) {
+  return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
+}
+
+var iconMapping$1 = {
+  success: /*#__PURE__*/jsx(CheckCircle$1, {}),
+  info: /*#__PURE__*/jsx(Info$1, {}),
+  error: /*#__PURE__*/jsx(Error$1, {})
+};
+var Alert$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    onClose: _onClose,
+    severity = 'positive'
+  } = _ref;
+  return /*#__PURE__*/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 css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], Color$8.Dark500, Color$8.White, border);
+}
+
+function enterAnimation$1(border) {
+  return keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], Color$8.White, Color$8.Dark500, Color$8.White, Color$8.Dark500, Color$8.White, Color$8.Dark500, enterMixin$1(border));
+}
+
+var CustomTransition$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$5);
+
+  return /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    timeout: 3000,
+    classNames: props.className,
+    children: /*#__PURE__*/jsx("div", {
+      children: children
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") CustomTransition$1.displayName = "CustomTransition";
+var BannerContent$1 = /*#__PURE__*/styled(CustomTransition$1).withConfig({
+  displayName: "Banner__BannerContent",
+  componentId: "SD__sc-9kw31n-0"
+})(_ref2 => {
+  var {
+    border = 'bottom'
+  } = _ref2;
+  return 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;}"], Color$8.White, Color$8.White, enterAnimation$1(border), enterMixin$1(border), enterMixin$1(border));
+});
+var Banner$1 = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  var {
+    in: inProp
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2$2);
+
+  var [isIn, setIn] = useState(false); // transition is not triggered on initial render with `in: true`
+
+  useEffect(() => {
+    setIn(!!inProp);
+  }, [inProp]);
+  return /*#__PURE__*/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 isColorProp$1(input) ? Color$8[input] : undefined;
+} //
+// Space
+//
+
+
+function parseSpace$1(space) {
+  return "".concat(parseSpaceProp$1(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.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] = parseResponsiveProp$2(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(ButtonBase$1).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:", ";}}"], Color$8.Silver500, Color$8.Dark100, Color$8.White, Color$8.Silver500, Color$8.Silver400, Color$8.Green300, Color$8.Green100, Color$8.Green300, Color$8.Green300, Color$8.Green300, Color$8.Green50, Color$8.Red300, Color$8.Red100, Color$8.Red300, Color$8.Red300, Color$8.Red300, Color$8.Red50);
+var ButtonArea$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    icon,
+    children,
+    variant,
+    active,
+    disabled,
+    fullWidth
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+
+  return /*#__PURE__*/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__*/jsxs(Stack$1, {
+      align: "center",
+      space: "xxsmall",
+      children: [icon, /*#__PURE__*/jsx(Typography$1, {
+        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 = Color$8.Transparent,
+    textColorHovered = textColor,
+    textColorDisabled = textColor,
+    outlineColor = Color$8.Transparent,
+    borderColor = Color$8.Transparent,
+    borderColorHovered = borderColor,
+    borderColorDisabled = borderColor,
+    backgroundColor = Color$8.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: Color$8.White,
+    outlineColor: Color$8.Blue100,
+    backgroundColor: Color$8.Blue300,
+    textColorHovered: Color$8.White,
+    backgroundColorHovered: Color$8.Blue500,
+    backgroundColorActive: Color$8.Blue400,
+    backgroundColorDisabled: Color$8.Blue100
+  });
+}
+
+function getPrimaryVariables$1(size) {
+  return getDefaultVariables$1(size);
+}
+
+function getNeutralVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: Color$8.Dark500,
+    borderColor: Color$8.Silver500,
+    outlineColor: Color$8.Blue100,
+    backgroundColor: Color$8.White,
+    textColorHovered: Color$8.Blue300,
+    borderColorHovered: Color$8.Blue300,
+    backgroundColorHovered: Color$8.Blue50,
+    backgroundColorActive: Color$8.Blue75,
+    textColorDisabled: Color$8.Silver500
+  });
+}
+
+function getCriticalVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: Color$8.Red300,
+    borderColor: Color$8.Red300,
+    outlineColor: Color$8.Red75,
+    backgroundColor: Color$8.Red50,
+    backgroundColorHovered: Color$8.Red75,
+    backgroundColorActive: Color$8.Red100,
+    textColorDisabled: Color$8.Red100,
+    borderColorDisabled: Color$8.Red100,
+    backgroundColorDisabled: Color$8.Red50
+  });
+}
+
+function getTextVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: Color$8.Blue400,
+    outlineColor: Color$8.Blue100,
+    textColorHovered: Color$8.Blue500,
+    backgroundColorHovered: Color$8.Blue50,
+    backgroundColorActive: Color$8.Blue75,
+    textColorDisabled: Color$8.Blue100
+  });
+}
+
+function getInvertedVariables$1(size) {
+  return createButtonVariables$1(size, {
+    textColor: Color$8.White,
+    outlineColor: Color$8.White40,
+    backgroundColor: Color$8.White20,
+    textColorHovered: Color$8.White,
+    backgroundColorHovered: Color$8.White40,
+    backgroundColorActive: Color$8.White20,
+    textColorDisabled: Color$8.White50,
+    backgroundColorDisabled: Color$8.White08
+  });
+}
+
+var ButtonRoot$3 = /*#__PURE__*/styled.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 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, Color$8.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.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.span.withConfig({
+  displayName: "Button__ButtonStartIcon",
+  componentId: "SD__sc-1pwdpe3-2"
+})(["margin-right:4px;"]);
+var ButtonEndIcon$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Button__ButtonEndIcon",
+  componentId: "SD__sc-1pwdpe3-3"
+})(["margin-left:4px;"]);
+var ButtonPendingIndicator$1 = /*#__PURE__*/styled.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__*/jsxs(ButtonLabel$1, {
+      children: [!!startIcon && /*#__PURE__*/jsx(ButtonStartIcon$1, {
+        children: startIcon
+      }), children, !!endIcon && /*#__PURE__*/jsx(ButtonEndIcon$1, {
+        children: endIcon
+      }), pending && /*#__PURE__*/jsx(ButtonPendingIndicator$1, {
+        children: /*#__PURE__*/jsx(CircularProgress$1, {
+          size: "1em",
+          color: "inherit"
+        })
+      })]
+    })
+  });
+}
+
+var Button$1 = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  var {
+    type = 'button'
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded2$3);
+
+  var buttonProps = useButtonProps$1(props);
+  return /*#__PURE__*/jsx(ButtonRoot$3, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    ref: ref,
+    type: type
+  }));
+});
+if (process.env.NODE_ENV !== "production") Button$1.displayName = "Button";
+var AnchorButton$1 = /*#__PURE__*/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__*/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: Color$8.Dark500,
+  secondary: Color$8.Dark200,
+  white: Color$8.White,
+  blue: Color$8.Blue300,
+  green: Color$8.Green300,
+  purple: Color$8.Purple500,
+  red: Color$8.Red300,
+  teal: Color$8.Teal300,
+  yellow: Color$8.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 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.span.withConfig({
+  displayName: "TextBox__TextBoxRoot",
+  componentId: "SD__sc-9mywck-0"
+})(_ref2 => {
+  var {
+    theme,
+    $noWrap,
+    $variant,
+    $align,
+    $color,
+    $display,
+    $wrapOverflow
+  } = _ref2;
+  return 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__*/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 = parseResponsiveProp$2(align);
+  var $color = parseResponsiveProp$2(color);
+  var $noWrap = parseResponsiveProp$2(noWrap);
+  var $display = parseResponsiveProp$2(display);
+  var $wrapOverflow = parseResponsiveProp$2(wrapOverflow);
+  return /*#__PURE__*/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 css(["width:", "px;height:", "px;& > .MuiSvgIcon-root{font-size:", "px;}"], size, size + 4, size);
+}
+
+var DescriptionItemIcon$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DescriptionItem__DescriptionItemIcon",
+  componentId: "SD__sc-1906hic-0"
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], Color$8.Dark100, descriptionItemIconMixin$1(20), theme.breakpoints.up('sm'), descriptionItemIconMixin$1(16));
+});
+var DescriptionItem$1 = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    icon,
+    wrap,
+    inset,
+    label,
+    children,
+    fallback,
+    id: idProp,
+    'aria-label': ariaLabel
+  } = _ref2;
+  var id = useUID$3(idProp);
+  var labelID = "".concat(id, "-label");
+  var isEmptyChildren = isEmptyReactNode$1(children);
+  return /*#__PURE__*/jsxs(Columns$6, {
+    id: id,
+    ref: ref,
+    space: "xsmall",
+    "aria-label": ariaLabel,
+    children: [!!(icon || inset) && /*#__PURE__*/jsx(Column$6, {
+      width: "content",
+      children: /*#__PURE__*/jsx(DescriptionItemIcon$1, {
+        children: icon
+      })
+    }), /*#__PURE__*/jsx(Column$6, {
+      width: "adaptive",
+      children: /*#__PURE__*/jsxs(Inline$2, {
+        space: "xxsmall",
+        noWrap: !wrap,
+        children: [!!label && /*#__PURE__*/jsx(TextBox$1, {
+          as: "label",
+          id: labelID,
+          color: "secondary",
+          children: label
+        }), /*#__PURE__*/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(CardButton$1).withConfig({
+  displayName: "FileDropZone__StyledCardButton",
+  componentId: "SD__sc-5p1fk0-0"
+})(_ref => {
+  var {
+    status
+  } = _ref;
+  return {
+    backgroundColor: status === 'active' ? Color$8.Blue50 : undefined
+  };
+});
+
+function UploadRejection$1(_ref2) {
+  var {
+    maxSize,
+    rejection
+  } = _ref2;
+  var [error] = rejection.errors;
+  if (!error) return null;
+  return /*#__PURE__*/jsxs(Columns$6, {
+    align: "center",
+    children: [/*#__PURE__*/jsx(Column$6, {
+      width: "content",
+      children: /*#__PURE__*/jsx(Error$1, {})
+    }), /*#__PURE__*/jsx(Column$6, {
+      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__*/forwardRef((props, ref) => {
+  var {
+    // CardButton
+    disabled = false,
+    children: _children = 'Upload Attachments',
+    hintText = 'or Drag & Drop files',
+    startIcon = /*#__PURE__*/jsx(SvgIcon$1, {
+      children: /*#__PURE__*/jsx("path", {
+        d: mdiUpload
+      })
+    }),
+    fallback = /*#__PURE__*/jsx(CardButton$1, {
+      ref: ref,
+      disabled: true,
+      startIcon: /*#__PURE__*/jsx(CircularProgress$1, {
+        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__*/jsx(Suspense, {
+    fallback: fallback,
+    children: /*#__PURE__*/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__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("input", _objectSpread({}, getInputProps())), /*#__PURE__*/jsx(StyledCardButton$1, _objectSpread(_objectSpread({}, getRootProps()), {}, {
+            ref: ref,
+            hint: hintText,
+            disabled: disabled,
+            startIcon: startIcon,
+            status: isDragActive ? 'active' : isDragReject ? 'error' : 'idle',
+            error: !!fileRejection && /*#__PURE__*/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.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(CircularProgress$1).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__*/memo(props => /*#__PURE__*/jsx(SvgIcon$1, _objectSpread(_objectSpread({}, props), {}, {
+  children: /*#__PURE__*/jsx("path", {
+    d: mdiFilePdfBox
+  })
+})));
+var TextBoxIcon$1 = /*#__PURE__*/memo(props => /*#__PURE__*/jsx(SvgIcon$1, _objectSpread(_objectSpread({}, props), {}, {
+  children: /*#__PURE__*/jsx("path", {
+    d: 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__*/forwardRef((_ref2, ref) => {
+  var {
+    url,
+    name,
+    status,
+    onRetry,
+    onDelete
+  } = _ref2;
+  var uid = useUID$3();
+  var fileType = getFileType$1(name);
+  var [isHoveredState, setIsHovered] = useState(false);
+  var isHovered = useResponsiveValue$1(true, isHoveredState);
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    onMouseOver: () => {
+      setIsHovered(true);
+    },
+    onMouseLeave: () => {
+      setIsHovered(false);
+    },
+    children: /*#__PURE__*/jsxs(Columns$6, {
+      align: "center",
+      space: "xsmall",
+      children: [/*#__PURE__*/jsx(Column$6, {
+        width: "content",
+        children: status === 'error' ? /*#__PURE__*/jsx(Error$1, {
+          color: "error",
+          fontSize: "small"
+        }) : fileType === 'pdf' ? /*#__PURE__*/jsx(PdfIcon$1, {
+          color: "action",
+          fontSize: "small"
+        }) : fileType === 'image' ? /*#__PURE__*/jsx(Image$1, {
+          color: "action",
+          fontSize: "small"
+        }) : /*#__PURE__*/jsx(TextBoxIcon$1, {
+          color: "action",
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/jsx(Column$6, {
+        width: "fluid",
+        children: /*#__PURE__*/jsx(FileListItemName$1, {
+          id: uid,
+          children: !url ? name : /*#__PURE__*/jsx(Link$1, {
+            href: url,
+            noWrap: true,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: name
+          })
+        })
+      }), status === 'error' && /*#__PURE__*/jsx(Column$6, {
+        width: "content",
+        children: /*#__PURE__*/jsx(Tooltip$1, {
+          title: "Retry",
+          children: /*#__PURE__*/jsx(IconButton$1, {
+            size: "small",
+            onClick: onRetry,
+            children: /*#__PURE__*/jsx(Refresh$1, {
+              fontSize: "small"
+            })
+          })
+        })
+      }), /*#__PURE__*/jsx(Column$6, {
+        width: "content",
+        children: status === 'loading' ? /*#__PURE__*/jsx(IconButton$1, {
+          size: "small",
+          disabled: true,
+          children: /*#__PURE__*/jsx(FileListItemProgress$1, {
+            size: "1em"
+          })
+        }) : /*#__PURE__*/jsx(Tooltip$1, {
+          title: "Delete",
+          children: /*#__PURE__*/jsx(IconButton$1, {
+            size: "small",
+            onClick: onDelete,
+            children: !isHovered && status === 'success' ? /*#__PURE__*/jsx(CheckCircle$1, {
+              fontSize: "small",
+              htmlColor: Color$8.Green300
+            }) : /*#__PURE__*/jsx(Delete$1, {
+              fontSize: "small"
+            })
+          })
+        })
+      })]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") FileListItem$1.displayName = "FileListItem";
+
+var SidebarRoot$1 = /*#__PURE__*/styled.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 ", ";"], Color$8.White, Color$8.Silver400);
+var SidebarHeader$1 = /*#__PURE__*/styled.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:", ";"], Color$8.White);
+var SidebarTitle$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Sidebar__SidebarTitle",
+  componentId: "SD__sc-b77o22-2"
+})(["height:64px;max-height:64px;display:flex;align-items:center;"]);
+var Sidebar$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    title,
+    count,
+    header,
+    children,
+    id: idProp
+  } = _ref;
+  var id = useUID$3(idProp);
+  var titleID = "".concat(id, "-title");
+  return /*#__PURE__*/jsxs(SidebarRoot$1, {
+    id: id,
+    ref: ref,
+    children: [/*#__PURE__*/jsxs(SidebarHeader$1, {
+      children: [/*#__PURE__*/jsx(SidebarTitle$1, {
+        children: /*#__PURE__*/jsxs(Columns$6, {
+          space: "xsmall",
+          align: "center",
+          children: [/*#__PURE__*/jsx(Column$6, {
+            width: "fluid",
+            children: /*#__PURE__*/jsx(TextBox$1, {
+              variant: "heading-2",
+              noWrap: true,
+              id: titleID,
+              children: title
+            })
+          }), !!count && /*#__PURE__*/jsx(Column$6, {
+            width: "content",
+            children: /*#__PURE__*/jsx(TextBox$1, {
+              color: "secondary",
+              children: count
+            })
+          })]
+        })
+      }), header]
+    }), /*#__PURE__*/jsx("div", {
+      "aria-labelledby": titleID,
+      children: children
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") Sidebar$1.displayName = "Sidebar";
+
+var SidebarContainerRoot$1 = /*#__PURE__*/styled.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.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__*/forwardRef((_ref, ref) => {
+  var {
+    sidebar,
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxs(SidebarContainerRoot$1, {
+    ref: ref,
+    children: [sidebar, /*#__PURE__*/jsx(SidebarContainerContent$1, {
+      children: children
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarContainer$1.displayName = "SidebarContainer";
+
+var SidebarDividerRoot$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarDivider__SidebarDividerRoot",
+  componentId: "SD__sc-5lwi2i-0"
+})(["padding:20px 24px;"]);
+var SidebarDivider$1 = /*#__PURE__*/forwardRef((_, ref) => {
+  return /*#__PURE__*/jsx(SidebarDividerRoot$1, {
+    ref: ref,
+    children: /*#__PURE__*/jsx(Divider$1, {})
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarDivider$1.displayName = "SidebarDivider";
+
+var context$1 = /*#__PURE__*/createContext({});
+function useSidebarMenuItemContext$1() {
+  return useContext(context$1);
+}
+function SidebarMenuItemContextProvider$1(_ref) {
+  var {
+    children,
+    hovered = false,
+    disabled = false
+  } = _ref;
+  var ctx = useMemo(() => ({
+    hovered,
+    disabled
+  }), [hovered, disabled]);
+  return /*#__PURE__*/jsx(context$1.Provider, {
+    value: ctx,
+    children: children
+  });
+}
+
+var SidebarMenuItemRoot$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarMenuItem__SidebarMenuItemRoot",
+  componentId: "SD__sc-1sb5zqa-0"
+})(_ref => {
+  var {
+    hasAvatar
+  } = _ref;
+  var height = hasAvatar ? 48 : 40;
+  return 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$8.Silver200, Color$8.Blue300);
+});
+var SidebarMenuItemBadge$1 = /*#__PURE__*/styled.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:", ";}"], Color$8.Dark500, Color$8.Silver300, Color$8.White, Color$8.Dark450);
+var SidebarMenuItemSecondaryAction$1 = /*#__PURE__*/styled.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__*/forwardRef((_ref2, ref) => {
+  var {
+    action,
+    avatar,
+    onClick,
+    external,
+    children,
+    disabled,
+    selected,
+    secondaryActions,
+    badge: badgeProp
+  } = _ref2;
+  var [hovered, setHovered] = useState(false);
+  var actionsRef = useRef(null);
+  var actionsPlaceholderRef = useRef(null);
+  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__*/jsxs(SidebarMenuItemRoot$1, {
+    ref: ref,
+    hasAvatar: !!avatar,
+    onMouseEnter: () => {
+      setHovered(true);
+    },
+    onMouseLeave: () => {
+      setHovered(false);
+    },
+    children: [/*#__PURE__*/jsx(ButtonBase$1, {
+      onClick: onClick,
+      disabled: disabled,
+      "aria-current": selected,
+      children: /*#__PURE__*/jsxs(Columns$6, {
+        align: "center",
+        space: "xsmall",
+        children: [/*#__PURE__*/jsx(Column$6, {
+          children: /*#__PURE__*/jsx(Columns$6, {
+            align: "center",
+            space: "xsmall",
+            children: /*#__PURE__*/jsx(Column$6, {
+              width: "fluid",
+              children: /*#__PURE__*/jsxs(Columns$6, {
+                align: "center",
+                space: "xsmall",
+                children: [!!avatar && /*#__PURE__*/jsx(SidebarMenuItemContextProvider$1, {
+                  hovered: hovered,
+                  disabled: disabled,
+                  children: /*#__PURE__*/jsx(Column$6, {
+                    width: "content",
+                    children: avatar
+                  })
+                }), /*#__PURE__*/jsx(Column$6, {
+                  width: "adaptive",
+                  children: /*#__PURE__*/jsx(TextBox$1, {
+                    variant: selected ? 'body-semibold' : 'body',
+                    noWrap: true,
+                    children: children
+                  })
+                }), external && /*#__PURE__*/jsx(Column$6, {
+                  width: "content",
+                  children: /*#__PURE__*/jsx(OpenInNew$1, {
+                    color: "action",
+                    fontSize: "small"
+                  })
+                })]
+              })
+            })
+          })
+        }), !!badge && /*#__PURE__*/jsx(Column$6, {
+          width: "content",
+          children: /*#__PURE__*/jsx(SidebarMenuItemBadge$1, {
+            children: badge
+          })
+        }), (!!action || !!secondaryActions) && /*#__PURE__*/jsx(Column$6, {
+          width: "content",
+          children: /*#__PURE__*/jsx("div", {
+            ref: actionsPlaceholderRef
+          })
+        })]
+      })
+    }), (!!action || !!secondaryActions) && /*#__PURE__*/jsx(SidebarMenuItemSecondaryAction$1, {
+      ref: actionsRef,
+      children: /*#__PURE__*/jsxs(Inline$2, {
+        children: [hovered && secondaryActions, action]
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarMenuItem$1.displayName = "SidebarMenuItem";
+
+var SidebarMenuItemActionRoot$1 = /*#__PURE__*/styled(IconButton$1).withConfig({
+  displayName: "SidebarMenuItemAction__SidebarMenuItemActionRoot",
+  componentId: "SD__sc-1n50gmv-0"
+})(["& .MuiSvgIcon-root{font-size:16px;}"]);
+var SidebarMenuItemAction$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    title,
+    placement,
+    children
+  } = _ref;
+  return /*#__PURE__*/jsx(Tooltip$1, {
+    title: title,
+    placement: placement,
+    children: /*#__PURE__*/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.div.withConfig({
+  displayName: "SidebarMenuItemAvatar__SidebarMenuItemAvatarCheckbox",
+  componentId: "SD__sc-17mkvc7-0"
+})(["margin:-5px;"]);
+var SidebarMenuItemAvatar$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    value,
+    onChange: _onChange
+  } = _ref;
+  var {
+    hovered,
+    disabled
+  } = useSidebarMenuItemContext$1();
+  var initials = 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__*/jsx(SidebarMenuItemAvatarCheckbox$1, {
+      children: /*#__PURE__*/jsx(Checkbox$1, {
+        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__*/jsx(Avatar$1, {
+    ref: ref,
+    "aria-hidden": true,
+    children: initials
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarMenuItemAvatar$1.displayName = "SidebarMenuItemAvatar";
+
+var SidebarSubheaderRoot$1 = /*#__PURE__*/styled.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__*/forwardRef((_ref, ref) => {
+  var {
+    id,
+    action,
+    children
+  } = _ref;
+  return /*#__PURE__*/jsx(SidebarSubheaderRoot$1, {
+    ref: ref,
+    children: /*#__PURE__*/jsxs(Columns$6, {
+      space: "xsmall",
+      align: "center",
+      children: [/*#__PURE__*/jsx(Column$6, {
+        children: /*#__PURE__*/jsx(TextBox$1, {
+          id: id,
+          variant: "heading-6",
+          color: "secondary",
+          noWrap: true,
+          children: children
+        })
+      }), !!action && /*#__PURE__*/jsx(Column$6, {
+        width: "content",
+        children: action
+      })]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") SidebarSubheader$1.displayName = "SidebarSubheader";
+
+export { Alert$1 as Alert, AnchorButton$1 as AnchorButton, Banner$1 as Banner, Box$1 as Box, Button$1 as Button, ButtonArea$1 as ButtonArea, DescriptionItem$1 as DescriptionItem, FileDropZone$1 as FileDropZone, FileListItem$1 as FileListItem, Sidebar$1 as Sidebar, SidebarContainer$1 as SidebarContainer, SidebarDivider$1 as SidebarDivider, SidebarMenuItem$1 as SidebarMenuItem, SidebarMenuItemAction$1 as SidebarMenuItemAction, SidebarMenuItemAvatar$1 as SidebarMenuItemAvatar, SidebarSubheader$1 as SidebarSubheader, TextBox$1 as TextBox, formatBytes$1 as formatBytes, toBytes$1 as toBytes, index as v5 };
 //# sourceMappingURL=index.js.map