@superdispatch/ui-lab 0.25.3 → 0.26.0

package/dist-web/index.js

@@ -18,16 +18,13 @@ import { noop } from 'lodash';
 function colorMixin(textColor, iconColor, backgroundColor, buttonHoverColor) {
   return css(["color:", ";border-color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{color:", ";& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, textColor, backgroundColor, iconColor, iconColor, buttonHoverColor);
 }
-
 var StyledAlert = /*#__PURE__*/styled(Alert$1).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.Green300, Color.Green50, Color.Green400), /*#__PURE__*/colorMixin(Color.Blue500, Color.Blue300, Color.Blue50, Color.Blue400), /*#__PURE__*/colorMixin(Color.Yellow500, Color.Yellow300, Color.Yellow50, Color.Yellow400), /*#__PURE__*/colorMixin(Color.Red500, Color.Red300, Color.Red50, Color.Red400));
-
 function toMaterialSeverity(severity) {
   return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
 }
-
 var iconMapping = {
   success: /*#__PURE__*/jsx(CheckCircle, {}),
   info: /*#__PURE__*/jsx(Info, {}),
@@ -54,22 +51,18 @@ var Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") Alert.displayName = "Alert";
 
 var _excluded = ["children"],
-    _excluded2 = ["in"];
-
+  _excluded2 = ["in"];
 function enterMixin(border) {
   return css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], Color.Dark500, Color.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));
 }
-
 var CustomTransition = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    children
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     timeout: 3000,
@@ -91,12 +84,12 @@ var BannerContent = /*#__PURE__*/styled(CustomTransition).withConfig({
 });
 var Banner = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var {
-    in: inProp
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded2);
-
-  var [isIn, setIn] = useState(false); // transition is not triggered on initial render with `in: true`
+      in: inProp
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  var [isIn, setIn] = useState(false);
 
+  // transition is not triggered on initial render with `in: true`
   useEffect(() => {
     setIn(!!inProp);
   }, [inProp]);
@@ -111,52 +104,51 @@ function createRuleNormalizer(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(input) {
   return isColorProp(input) ? Color[input] : undefined;
-} //
+}
+
+//
 // Space
 //
 
-
 function parseSpace(space) {
   return "".concat(parseSpaceProp(space), "px");
-} //
+}
+
+//
 // Margins
 //
 
-
 function parseMargin(input) {
   if (input === 'auto') return input;
   var prefix = '';
-
   if (typeof input == 'string' && input.startsWith('-')) {
     prefix = '-';
     input = input.slice(1);
   }
-
   return prefix + parseSpace(input);
-} //
+}
+
+//
 // Borders
 //
 
-
 var normalizeBorderRadius = /*#__PURE__*/createRuleNormalizer({
   none: 0,
   small: 4,
@@ -167,7 +159,9 @@ var normalizeBorderWidth = /*#__PURE__*/createRuleNormalizer({
   small: 1,
   medium: 2,
   large: 4
-}); //
+});
+
+//
 // Rules
 //
 
@@ -216,25 +210,22 @@ var normalizers = {
   bottom: undefined,
   position: undefined
 };
-
 function injectRule(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 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Box",
   componentId: "SD__sc-1bc600y-0"
@@ -251,12 +242,10 @@ var Box = /*#__PURE__*/styled.div.withConfig({
     borderWidth: 0,
     borderStyle: 'solid'
   };
-
   for (var k in props) {
     if (Object.prototype.hasOwnProperty.call(props, k) && k in normalizers) {
       var key = k;
       var prop = props[key];
-
       if (prop != null) {
         var [mobile, tablet, desktop] = parseResponsiveProp(prop);
         var normalizer = normalizers[key];
@@ -266,7 +255,6 @@ var Box = /*#__PURE__*/styled.div.withConfig({
       }
     }
   }
-
   return styles;
 });
 
@@ -277,15 +265,14 @@ var ButtonRoot = /*#__PURE__*/styled(ButtonBase).withConfig({
 })(["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);
 var ButtonArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    icon,
-    children,
-    variant,
-    active,
-    disabled,
-    fullWidth
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-
+      icon,
+      children,
+      variant,
+      active,
+      disabled,
+      fullWidth
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/jsx(ButtonRoot, _objectSpread(_objectSpread({
     ref: ref,
     disabled: disabled,
@@ -308,9 +295,8 @@ var ButtonArea = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") ButtonArea.displayName = "ButtonArea";
 
 var _excluded$2 = ["children", "endIcon", "startIcon", "tabIndex", "active", "pending", "disabled", "size", "fullWidth", "variant"],
-    _excluded2$1 = ["type"],
-    _excluded3 = ["href", "target"];
-
+  _excluded2$1 = ["type"],
+  _excluded3 = ["href", "target"];
 function createButtonVariables(size, _ref) {
   var {
     fontSize = size === 'large' ? 16 : 14,
@@ -357,7 +343,6 @@ function createButtonVariables(size, _ref) {
     iconColor
   };
 }
-
 function getDefaultVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.White,
@@ -369,11 +354,9 @@ function getDefaultVariables(size) {
     backgroundColorDisabled: Color.Blue30
   });
 }
-
 function getPrimaryVariables(size) {
   return getDefaultVariables(size);
 }
-
 function getNeutralVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.Dark500,
@@ -388,7 +371,6 @@ function getNeutralVariables(size) {
     iconColor: Color.Dark100
   });
 }
-
 function getCriticalVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.Red500,
@@ -402,7 +384,6 @@ function getCriticalVariables(size) {
     backgroundColorDisabled: Color.Red50
   });
 }
-
 function getTextVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.Blue500,
@@ -413,7 +394,6 @@ function getTextVariables(size) {
     textColorDisabled: Color.Blue30
   });
 }
-
 function getInvertedVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.White,
@@ -426,7 +406,6 @@ function getInvertedVariables(size) {
     backgroundColorDisabled: Color.White08
   });
 }
-
 function getSuccessVariables(size) {
   return createButtonVariables(size, {
     textColor: Color.White,
@@ -438,7 +417,6 @@ function getSuccessVariables(size) {
     backgroundColorDisabled: Color.Green30
   });
 }
-
 var ButtonRoot$1 = /*#__PURE__*/styled.button.withConfig({
   displayName: "Button__ButtonRoot",
   componentId: "SD__sc-1pwdpe3-0"
@@ -468,22 +446,20 @@ var ButtonPendingIndicator = /*#__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(_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$2);
-
+      children,
+      endIcon,
+      startIcon,
+      tabIndex: tabIndexProp = 0,
+      active = false,
+      pending = false,
+      disabled: disabledProp = false,
+      size = 'medium',
+      fullWidth = false,
+      variant = 'default'
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded$2);
   var disabled = pending || disabledProp;
   var tabIndex = disabled ? -1 : tabIndexProp;
   return _objectSpread(_objectSpread({}, props), {}, {
@@ -509,13 +485,11 @@ function useButtonProps(_ref3) {
     })
   });
 }
-
 var Button = /*#__PURE__*/forwardRef((_ref4, ref) => {
   var {
-    type = 'button'
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded2$1);
-
+      type = 'button'
+    } = _ref4,
+    props = _objectWithoutProperties(_ref4, _excluded2$1);
   var buttonProps = useButtonProps(props);
   return /*#__PURE__*/jsx(ButtonRoot$1, _objectSpread(_objectSpread({}, buttonProps), {}, {
     ref: ref,
@@ -525,11 +499,10 @@ var Button = /*#__PURE__*/forwardRef((_ref4, ref) => {
 if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
 var AnchorButton = /*#__PURE__*/forwardRef((_ref5, ref) => {
   var {
-    href,
-    target
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded3);
-
+      href,
+      target
+    } = _ref5,
+    props = _objectWithoutProperties(_ref5, _excluded3);
   var buttonProps = useButtonProps(props);
   var rel = target === '_blank' ? 'noopener noreferrer' : undefined;
   return /*#__PURE__*/jsx(ButtonRoot$1, _objectSpread(_objectSpread({}, buttonProps), {}, {
@@ -551,7 +524,6 @@ var ChatContainer = /*#__PURE__*/styled('div').withConfig({
   } = _ref;
   return "\n  display: flex;\n  flex-direction: column-reverse;\n  overflow: auto;\n  justify-content: ".concat(isEmpty ? 'center' : 'end', ";\n  width: 100%;\n  height: 100%;\n  min-width: 300px;\n  max-width: 560px;\n  min-height: 368px;\n  max-height: 696px;\n  padding: 16px;\n  box-sizing: border-box;\n");
 });
-
 function emptyPlaceholder(text) {
   return /*#__PURE__*/jsx(Typography, {
     color: "textSecondary",
@@ -559,7 +531,6 @@ function emptyPlaceholder(text) {
     children: text
   });
 }
-
 var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     children,
@@ -628,10 +599,9 @@ ChatMessage.displayName = 'ChatMessage';
 var _excluded$3 = ["fullViewportHeight"];
 var Container = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    fullViewportHeight
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-
+      fullViewportHeight
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var nodeRef = useRef(null);
   useLayoutEffect(() => {
     if (!fullViewportHeight) {
@@ -639,10 +609,8 @@ var Container = /*#__PURE__*/forwardRef((_ref, ref) => {
         nodeRef.current.style.removeProperty('height');
         nodeRef.current.style.removeProperty('--vh');
       }
-
       return;
     }
-
     function updateHeight() {
       if (nodeRef.current) {
         // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
@@ -650,7 +618,6 @@ var Container = /*#__PURE__*/forwardRef((_ref, ref) => {
         nodeRef.current.style.setProperty('--vh', "".concat(window.innerHeight * 0.01, "px"));
       }
     }
-
     updateHeight();
     window.addEventListener('resize', updateHeight);
     return () => {
@@ -668,14 +635,12 @@ function mergeStyles(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(stylesValue, sourceValue);
           } else {
@@ -685,7 +650,6 @@ function mergeStyles(styles) {
       }
     }
   }
-
   return styles;
 }
 
@@ -714,36 +678,27 @@ var VARIANT_TYPE_MAPPING = {
   'body-semibold': 'span',
   caption: 'span'
 };
-
 function variantMixin(_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({}, typography.body2, {
@@ -753,19 +708,15 @@ function variantMixin(_ref, variant) {
           }
         });
       }
-
     case 'body-semibold':
       return typography.body1;
-
     case 'caption':
       return typography.caption;
   }
 }
-
 function textBoxMixin(noWrap, align, color, display, wrapOverflow) {
   return css(["text-align:", ";color:", ";display:", ";overflow:", ";white-space:", ";overflow-wrap:", ";"], align, normalizeTextColor(color), display === 'initial' && (noWrap || align !== 'left') ? 'block' : display, noWrap ? 'hidden' : 'visible', noWrap ? 'nowrap' : 'normal', wrapOverflow ? 'break-word' : 'normal');
 }
-
 var TextBoxRoot = /*#__PURE__*/styled.span.withConfig({
   displayName: "TextBox__TextBoxRoot",
   componentId: "SD__sc-9mywck-0"
@@ -783,16 +734,15 @@ var TextBoxRoot = /*#__PURE__*/styled.span.withConfig({
 });
 var TextBox = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var {
-    variant: $variant = 'body',
-    as = VARIANT_TYPE_MAPPING[$variant],
-    align = 'left',
-    color = 'primary',
-    display = 'initial',
-    noWrap = false,
-    wrapOverflow = false
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$4);
-
+      variant: $variant = 'body',
+      as = VARIANT_TYPE_MAPPING[$variant],
+      align = 'left',
+      color = 'primary',
+      display = 'initial',
+      noWrap = false,
+      wrapOverflow = false
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded$4);
   var $align = parseResponsiveProp(align);
   var $color = parseResponsiveProp(color);
   var $noWrap = parseResponsiveProp(noWrap);
@@ -814,7 +764,6 @@ if (process.env.NODE_ENV !== "production") TextBox.displayName = "TextBox";
 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"
@@ -924,7 +873,6 @@ var StyledCardButton = /*#__PURE__*/styled(CardButton).withConfig({
     backgroundColor: status === 'active' ? Color.Blue50 : undefined
   };
 });
-
 function UploadRejection(_ref2) {
   var {
     maxSize,
@@ -942,36 +890,34 @@ function UploadRejection(_ref2) {
     })]
   });
 }
-
 var FileDropZone = /*#__PURE__*/forwardRef((props, ref) => {
   var {
-    // CardButton
-    disabled = false,
-    children: _children = 'Upload Attachments',
-    hintText = 'or Drag & Drop files',
-    startIcon = /*#__PURE__*/jsx(SvgIcon, {
-      children: /*#__PURE__*/jsx("path", {
-        d: mdiUpload
-      })
-    }),
-    fallback = /*#__PURE__*/jsx(CardButton, {
-      ref: ref,
-      disabled: true,
-      startIcon: /*#__PURE__*/jsx(CircularProgress, {
-        size: "1em",
-        color: "inherit"
+      // CardButton
+      disabled = false,
+      children: _children = 'Upload Attachments',
+      hintText = 'or Drag & Drop files',
+      startIcon = /*#__PURE__*/jsx(SvgIcon, {
+        children: /*#__PURE__*/jsx("path", {
+          d: mdiUpload
+        })
       }),
-      children: "Loading dependencies\u2026"
-    }),
-    // Dropzone
-    accept,
-    maxSize = Infinity,
-    maxFiles = Infinity,
-    onDropRejected: _onDropRejected,
-    onDropAccepted: _onDropAccepted
-  } = props,
-      dropzoneProps = _objectWithoutProperties(props, _excluded$5);
-
+      fallback = /*#__PURE__*/jsx(CardButton, {
+        ref: ref,
+        disabled: true,
+        startIcon: /*#__PURE__*/jsx(CircularProgress, {
+          size: "1em",
+          color: "inherit"
+        }),
+        children: "Loading dependencies\u2026"
+      }),
+      // Dropzone
+      accept,
+      maxSize = Infinity,
+      maxFiles = Infinity,
+      onDropRejected: _onDropRejected,
+      onDropAccepted: _onDropAccepted
+    } = props,
+    dropzoneProps = _objectWithoutProperties(props, _excluded$5);
   return /*#__PURE__*/jsx(Suspense, {
     fallback: fallback,
     children: /*#__PURE__*/jsx(Dropzone, _objectSpread(_objectSpread({}, dropzoneProps), {}, {
@@ -1039,13 +985,11 @@ var TextBoxIcon = /*#__PURE__*/memo(props => /*#__PURE__*/jsx(SvgIcon, _objectSp
 })));
 var PDF_FILE_PATTERN = /\.pdf$/;
 var IMAGE_FILE_PATTERN = /\.(gif|png|jpg|jpeg)$/;
-
 function getFileType(name) {
   if (PDF_FILE_PATTERN.exec(name)) return 'pdf';
   if (IMAGE_FILE_PATTERN.exec(name)) return 'image';
   return 'unknown';
 }
-
 var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     url,
@@ -1141,15 +1085,14 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 if (process.env.NODE_ENV !== "production") FileListItem.displayName = "FileListItem";
 
 var _excluded$6 = ["color", "target", "rel"],
-    _excluded2$2 = ["children", "linkComponent"];
+  _excluded2$2 = ["children", "linkComponent"];
 var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    color,
-    target = '_blank',
-    rel = 'noreferrer noopener'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$6);
-
+      color,
+      target = '_blank',
+      rel = 'noreferrer noopener'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/jsx(Link, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     rel: rel,
@@ -1160,15 +1103,13 @@ if (process.env.NODE_ENV !== "production") DefaultLinkComponent.displayName = "D
 DefaultLinkComponent.displayName = 'DefaultLinkComponent';
 function LinkedText(_ref2) {
   var {
-    children,
-    linkComponent = DefaultLinkComponent
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$2);
-
+      children,
+      linkComponent = DefaultLinkComponent
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2$2);
   if (!children) {
     return null;
   }
-
   return /*#__PURE__*/jsx(Anchorme, _objectSpread(_objectSpread({}, props), {}, {
     linkComponent: linkComponent,
     children: children
@@ -1238,11 +1179,10 @@ function NavbarBottomBar(_ref) {
     },
     children: [items.map(_ref2 => {
       var {
-        active,
-        hasBadge
-      } = _ref2,
-          item = _objectWithoutProperties(_ref2, _excluded$7);
-
+          active,
+          hasBadge
+        } = _ref2,
+        item = _objectWithoutProperties(_ref2, _excluded$7);
       return /*#__PURE__*/createElement(StyledBottomNavigationAction, _objectSpread(_objectSpread({}, item), {}, {
         key: item.value,
         icon: hasBadge ? /*#__PURE__*/jsxs(IconWrapper, {
@@ -1342,8 +1282,9 @@ function NavbarAccordion(_ref) {
     setDrawerOpen,
     isNavbarExpanded
   } = useNavbarContext();
-  var [isExpanded, setExpanded] = useState(true); // sync accordion state with Desktop menu state
+  var [isExpanded, setExpanded] = useState(true);
 
+  // sync accordion state with Desktop menu state
   useEffect(() => {
     setExpanded(isNavbarExpanded);
   }, [isNavbarExpanded]);
@@ -1355,7 +1296,6 @@ function NavbarAccordion(_ref) {
     expanded: isExpanded,
     onClick: event => {
       _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
-
       if (isNavbarExpanded) {
         setExpanded(!isExpanded);
       }
@@ -1384,10 +1324,8 @@ function NavbarAccordion(_ref) {
         gutter: prev && prev.groupKey !== item.groupKey,
         onClick: event => {
           var _item$onClick;
-
           event.stopPropagation();
           (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-
           if (!event.isDefaultPrevented()) {
             setDrawerOpen(false);
           }
@@ -1494,7 +1432,6 @@ function NavbarList(_ref5) {
       children: filteredItems.map(item => {
         var index = filteredItems.indexOf(item);
         var prev = filteredItems[index - 1];
-
         if ('items' in item) {
           return /*#__PURE__*/createElement(NavbarAccordion, _objectSpread(_objectSpread({}, item), {}, {
             key: item.key,
@@ -1502,15 +1439,12 @@ function NavbarList(_ref5) {
             onClick: item.onClick
           }));
         }
-
         return /*#__PURE__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
           key: item.key,
           gutter: prev && prev.groupKey !== item.groupKey,
           onClick: event => {
             var _item$onClick;
-
             (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-
             if (!event.isDefaultPrevented()) {
               setDrawerOpen(false);
             }
@@ -1605,22 +1539,19 @@ var StyledTypography = /*#__PURE__*/styled(Typography).withConfig({
 })(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], Color.Silver500, Color.White);
 function NavbarAvatar(_ref) {
   var {
-    title,
-    subtitle,
-    children
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$8);
-
+      title,
+      subtitle,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var {
     isNavbarExpanded
   } = useNavbarContext();
-
   if (!isNavbarExpanded) {
     return /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
       children: children
     }));
   }
-
   return /*#__PURE__*/jsxs(Columns, {
     space: "xsmall",
     align: "center",
@@ -1670,16 +1601,13 @@ function NavbarMenu(_ref2) {
     setDrawerOpen
   } = useNavbarContext();
   var [anchor, setAnchor] = useState(null);
-
   function showProfileMenu(event) {
     setAnchor(event.currentTarget);
   }
-
   function hideProfileMenu() {
     setAnchor(null);
     setDrawerOpen(false);
   }
-
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Wrapper$1, {
       onClick: showProfileMenu,
@@ -1775,11 +1703,9 @@ if (process.env.NODE_ENV !== "production") Sidebar.displayName = "Sidebar";
 var Context = /*#__PURE__*/createContext(null);
 function useSidebarContext() {
   var context = useContext(Context);
-
   if (!context) {
     throw new Error('SidebarContext is used outside Provider');
   }
-
   return context;
 }
 var SidebarContainerSidebar = /*#__PURE__*/styled.div.withConfig({
@@ -1830,27 +1756,23 @@ if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "Sideb
 var _excluded$9 = ["onClick", "children"];
 function SidebarBackButton(_ref) {
   var {
-    onClick: _onClick,
-    children = /*#__PURE__*/jsx(ArrowBack, {
-      fontSize: "small"
-    })
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$9);
-
+      onClick: _onClick,
+      children = /*#__PURE__*/jsx(ArrowBack, {
+        fontSize: "small"
+      })
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var isCollapsed = useCollapseBreakpoint('sm');
   var {
     openSidebar
   } = useSidebarContext();
-
   if (!isCollapsed) {
     return null;
   }
-
   return /*#__PURE__*/jsx(IconButton, _objectSpread(_objectSpread({}, props), {}, {
     size: "small",
     onClick: event => {
       _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
-
       if (!event.isDefaultPrevented()) {
         openSidebar();
       }
@@ -2033,7 +1955,6 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
   useLayoutEffect(() => {
     var rootNode = rootRef.current;
-
     if (rootNode) {
       if (isHoverSupported) {
         rootNode.addEventListener('mouseenter', () => {
@@ -2056,7 +1977,6 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       "aria-current": selected,
       onClick: event => {
         _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
-
         if (!event.isDefaultPrevented() && openContentOnClick) {
           openSidebarContent();
         }
@@ -2145,7 +2065,6 @@ if (process.env.NODE_ENV !== "production") SidebarMenuItemAction.displayName = "
 function stopPropagation(event) {
   event.stopPropagation();
 }
-
 var SidebarMenuItemAvatarCheckbox = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarMenuItemAvatar__SidebarMenuItemAvatarCheckbox",
   componentId: "SD__sc-17mkvc7-0"
@@ -2166,7 +2085,6 @@ var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
     var last = matches.pop() || '';
     return (first + last).toUpperCase();
   }, [children]);
-
   if (value === true || hovered && value != null) {
     return /*#__PURE__*/jsx(SidebarMenuItemAvatarCheckbox, {
       children: /*#__PURE__*/jsx(Checkbox, {
@@ -2182,7 +2100,6 @@ var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
       })
     });
   }
-
   return /*#__PURE__*/jsx(Avatar, {
     ref: ref,
     "aria-hidden": true,