@elliemae/ds-left-navigation 2.0.0-alpha.10 → 2.0.0-alpha.11

package/cjs/common/getFocusedByKeyboardStyle.js

@@ -2,18 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const commonFocusedByKeyboardBorder = (props, height, width) => `
-  &:before {
-    content: '';
-    position: absolute;
-    height: ${height};
-    width: ${width};
-    top: 0;
-    left: 0px;
-    border: 1px solid ${props.theme.colors.brand[600]};
-    pointer-events: none;
-  }
-`;
+const commonFocusedByKeyboardBorder = (props, height, width) => "\n  &:before {\n    content: '';\n    position: absolute;\n    height: ".concat(height, ";\n    width: ").concat(width, ";\n    top: 0;\n    left: 0px;\n    border: 1px solid ").concat(props.theme.colors.brand[600], ";\n    pointer-events: none;\n  }\n");
 
 const getFocusedByKeyboardBorderStyle = (props, height = '100%', width = '100%') => {
   if (props.focused && props.focusedByKey) return commonFocusedByKeyboardBorder(props, height, width);

package/cjs/common/getItemBackgroundStyle.js

@@ -2,18 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const commonItemBackgroundStyle = (color, hoverColor, activeColor) => `
-
-  background: ${color};
-
-  :hover {
-    background: ${hoverColor};
-  }
-
-  :active {
-    background: ${activeColor};
-  }
-`;
+const commonItemBackgroundStyle = (color, hoverColor, activeColor) => "\n\n  background: ".concat(color, ";\n\n  :hover {\n    background: ").concat(hoverColor, ";\n  }\n\n  :active {\n    background: ").concat(activeColor, ";\n  }\n");
 
 const getItemBackgroundStyle = props => {
   if (props.selected && !props.opened) return commonItemBackgroundStyle(props.theme.colors.brand[200], props.theme.colors.brand[200], props.theme.colors.brand[200]);

package/cjs/common/getLeftBorderStyle.js

@@ -2,21 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const commonLeftBorderStyle = (color, hoverColor, activeColor) => `
-
-  -webkit-box-shadow: inset 4px 0 0 0 ${color};
-          box-shadow: inset 4px 0 0 0 ${color};
-
-  :hover {
-    -webkit-box-shadow: inset 4px 0 0 0 ${hoverColor};
-            box-shadow: inset 4px 0 0 0 ${hoverColor};
-  }
-
-  :active {
-    -webkit-box-shadow: inset 4px 0 0 0 ${activeColor};
-            box-shadow: inset 4px 0 0 0 ${activeColor};
-  }
-`;
+const commonLeftBorderStyle = (color, hoverColor, activeColor) => "\n\n  -webkit-box-shadow: inset 4px 0 0 0 ".concat(color, ";\n          box-shadow: inset 4px 0 0 0 ").concat(color, ";\n\n  :hover {\n    -webkit-box-shadow: inset 4px 0 0 0 ").concat(hoverColor, ";\n            box-shadow: inset 4px 0 0 0 ").concat(hoverColor, ";\n  }\n\n  :active {\n    -webkit-box-shadow: inset 4px 0 0 0 ").concat(activeColor, ";\n            box-shadow: inset 4px 0 0 0 ").concat(activeColor, ";\n  }\n");
 
 const getLeftBorderStyle = props => {
   if (props.selected) return commonLeftBorderStyle(props.theme.colors.brand[400], props.theme.colors.brand[400], props.theme.colors.brand[400]);

package/cjs/common/getScrollbarStyle.js

@@ -2,29 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const getScrolbarStyle = () => `
-  ::-webkit-scrollbar {
-    width: 14px;
-  }
-  ::-webkit-scrollbar-thumb {
-    height: 6px;
-    border: 4px solid rgba(0, 0, 0, 0);
-
-    background-clip: padding-box;
-
-    background-color: rgba(105, 116, 137, 0.5);
-
-    border-radius: 7px;
-    -webkit-border-radius: 7px;
-  }
-  ::-webkit-scrollbar-button {
-    width: 0;
-    height: 0;
-    display: none;
-  }
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-`;
+const getScrolbarStyle = () => "\n  ::-webkit-scrollbar {\n    width: 14px;\n  }\n  ::-webkit-scrollbar-thumb {\n    height: 6px;\n    border: 4px solid rgba(0, 0, 0, 0);\n\n    background-clip: padding-box;\n\n    background-color: rgba(105, 116, 137, 0.5);\n\n    border-radius: 7px;\n    -webkit-border-radius: 7px;\n  }\n  ::-webkit-scrollbar-button {\n    width: 0;\n    height: 0;\n    display: none;\n  }\n  ::-webkit-scrollbar-corner {\n    background-color: transparent;\n  }\n";
 
 exports.getScrolbarStyle = getScrolbarStyle;

package/cjs/configs/useLeftNavConfig.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var useGlobalKeyListeners = require('./useGlobalKeyListeners.js');
 var useLeftNavItems = require('./useLeftNavItems.js');

package/cjs/configs/useLeftNavItems.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var constants = require('../exported-related/constants.js');
 require('@babel/runtime/helpers/jsx');
@@ -16,23 +17,22 @@ require('@elliemae/ds-icons/AlertsSmallFill');
 require('@elliemae/ds-icons/MessagesSmallFill');
 require('@elliemae/ds-icons/OpenWindow');
 
-/* eslint-disable complexity */
 const notFocuseableItems = [constants.ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, constants.ITEM_TYPES.LEFT_NAV_ITEM_SECTION]; // Walks the array of items
 // Drilldowns are tree-like structures
 
 const walkItems = (items, openedDrilldowns, callback) => {
   items.forEach(item => {
     if (typeof item.type === 'string') {
-      var _item$itemOpts, _item$itemOpts2, _item$itemOpts3;
+      var _item$itemOpts$items, _item$itemOpts, _item$itemOpts2, _item$itemOpts$items2, _item$itemOpts3;
 
       // Out of the box item
       if (notFocuseableItems.includes(item.type)) return; // not focuseable
 
       callback(item.dsId); // If it's an opened uncontrolled drilldown
 
-      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems(((_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.items) ?? [], openedDrilldowns, callback); // If it's an opened controlled drilldown
+      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems((_item$itemOpts$items = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 ? _item$itemOpts$items : [], openedDrilldowns, callback); // If it's an opened controlled drilldown
 
-      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && (_item$itemOpts2 = item.itemOpts) !== null && _item$itemOpts2 !== void 0 && _item$itemOpts2.isOpened) walkItems(((_item$itemOpts3 = item.itemOpts) === null || _item$itemOpts3 === void 0 ? void 0 : _item$itemOpts3.items) ?? [], openedDrilldowns, callback);
+      if (item.type === constants.ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && (_item$itemOpts2 = item.itemOpts) !== null && _item$itemOpts2 !== void 0 && _item$itemOpts2.isOpened) walkItems((_item$itemOpts$items2 = (_item$itemOpts3 = item.itemOpts) === null || _item$itemOpts3 === void 0 ? void 0 : _item$itemOpts3.items) !== null && _item$itemOpts$items2 !== void 0 ? _item$itemOpts$items2 : [], openedDrilldowns, callback);
     } else {
       var _item$itemOpts4;
 

package/cjs/exported-related/ItemRenderer/index.js

@@ -29,7 +29,8 @@ const ItemRenderer = props => {
         ariaLabel,
         ariaRole,
         ariaLive,
-        ariaExpanded
+        ariaExpanded,
+        ariaDescribedBy
       },
       CollapsedComponent
     },
@@ -85,7 +86,7 @@ const ItemRenderer = props => {
     }, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledItem, {
       ref: visibleItemsRefs.current[dsId],
       pt: paddingTop,
-      pl: indent === undefined ? 'xxxs' : `${indent}px`,
+      pl: indent === undefined ? 'xxxs' : "".concat(indent, "px"),
       minHeight: minHeight,
       shadowStyle: shadowStyle,
       alignItems: "flex-start",
@@ -100,6 +101,7 @@ const ItemRenderer = props => {
       onFocus: handleFocus,
       "data-testid": "leftnav-item-container",
       tabIndex: focuseable ? 0 : -1,
+      "aria-describedby": ariaDescribedBy,
       "aria-expanded": ariaExpanded,
       role: ariaRole,
       "aria-label": ariaLabel,
@@ -117,7 +119,7 @@ const ItemRenderer = props => {
         marginLeft: opened ? '16px' : '0px',
         marginRight: borderBottomMr,
         height: '1px',
-        width: `calc(100% - ${borderBottomMr} - ${opened ? '16px' : '0px'})`,
+        width: "calc(100% - ".concat(borderBottomMr, " - ").concat(opened ? '16px' : '0px', ")"),
         backgroundColor: '#E0E3E8'
       }
     })), subitems]

package/cjs/exported-related/ItemRenderer/styled.js

@@ -42,17 +42,7 @@ const StyledItem = /*#__PURE__*/styled__default["default"](Grid__default["defaul
 })(["cursor:", ";min-height:", ";background:", ";:hover{background:", ";}:active{background:", ";}", ";outline:none;", ""], props => props.selectable && !props.opened ? 'pointer' : 'auto', props => props.minHeight, getItemBackground, getItemHoverBackground, ({
   selectable,
   theme
-}) => selectable ? theme.colors.brand[200] : 'white', props => props.shadowStyle(props.theme), props => props.focused && props.focusedByKey ? `
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border: 1px solid ${props.theme.colors.brand[600]};
-        pointer-events: none;
-      }` : '');
+}) => selectable ? theme.colors.brand[200] : 'white', props => props.shadowStyle(props.theme), props => props.focused && props.focusedByKey ? "\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        border: 1px solid ".concat(props.theme.colors.brand[600], ";\n        pointer-events: none;\n      }") : '');
 
 exports.StyledItem = StyledItem;
 exports.StyledItemWrapper = StyledItemWrapper;

package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js

@@ -22,7 +22,8 @@ const itemDefaultProps = {
   ariaLabel: '',
   ariaRole: 'menuitem',
   ariaLive: 'off',
-  ariaExpanded: undefined
+  ariaExpanded: undefined,
+  ariaDescribedBy: undefined
 }; // Make use Item props with defaults
 
 const usePropsWithDefaults = props => {

package/cjs/index.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('overlayscrollbars/css/OverlayScrollbars.css');
 var propTypes = require('./prop-types.js');
 var LeftNavigation = require('./LeftNavigation.js');
 var constants = require('./exported-related/constants.js');

package/cjs/outOfTheBox/ItemControlledDrilldown/index.js

@@ -50,10 +50,10 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts;
+    var _item$itemOpts$indent, _item$itemOpts;
 
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    const currentIndent = ((_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) ?? 0;
+    const currentIndent = (_item$itemOpts$indent = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) !== null && _item$itemOpts$indent !== void 0 ? _item$itemOpts$indent : 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {

package/cjs/outOfTheBox/ItemHeader/index.js

@@ -29,6 +29,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const ItemHeader = props => {
+  var _item$itemOpts$ariaLa;
+
   const {
     item,
     item: {
@@ -53,7 +55,7 @@ const ItemHeader = props => {
     }
   } = props;
   const opened = openedItem === dsId;
-  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');
+  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
   return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({
@@ -87,7 +89,7 @@ const ItemHeader = props => {
       setFocusedItem(constants.CHEVRON_BACK_DS_ID);
     },
     role: "button",
-    "aria-label": `Close ${ariaLabel}`
+    "aria-label": "Close ".concat(ariaLabel)
   }), /*#__PURE__*/_jsx__default["default"](CollapsedComponent, {
     item: item,
     ctx: ctx

package/cjs/outOfTheBox/ItemLink/index.js

@@ -28,17 +28,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const notOpenedShadowStyle = isSelected => theme => `
-  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
-
-  :hover {
-    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.neutral[300]};
-  }
-
-  :active {
-    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
-  }
-`;
+const notOpenedShadowStyle = isSelected => theme => "\n  box-shadow: inset 4px 0 0 0 ".concat(isSelected ? theme.colors.brand[400] : 'transparent', ";\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ").concat(isSelected ? theme.colors.brand[400] : theme.colors.neutral[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
 
 const ItemLink = props => {
   const {
@@ -61,7 +51,7 @@ const ItemLink = props => {
     }
   } = props;
   const isSelected = selectedItem === dsId;
-  const shadowStyle = React.useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inherit`, [isSelected, !openedItem]);
+  const shadowStyle = React.useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inherit", [isSelected, !openedItem]);
   return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread({

package/cjs/outOfTheBox/ItemSection/index.js

@@ -48,8 +48,7 @@ const ItemSection = props => {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
         selectable: false,
-        focuseable: false,
-        ariaLive: 'polite'
+        focuseable: false
       }),
       CollapsedComponent: null
     }),

package/cjs/outOfTheBox/ItemSubmenu/index.js

@@ -29,19 +29,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const notOpenedShadowStyle = isSelected => theme => `
-  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
-
-  :hover {
-    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.neutral[300]};
-  }
-
-  :active {
-    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
-  }
-`;
+const notOpenedShadowStyle = isSelected => theme => "\n  box-shadow: inset 4px 0 0 0 ".concat(isSelected ? theme.colors.brand[400] : 'transparent', ";\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ").concat(isSelected ? theme.colors.brand[400] : theme.colors.neutral[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
 
 const ItemSubmenu = props => {
+  var _item$itemOpts$ariaLa;
+
   const {
     item,
     item: {
@@ -68,8 +60,8 @@ const ItemSubmenu = props => {
   } = props;
   const opened = openedItem === dsId;
   const isSelected = selectedItem === dsId;
-  const shadowStyle = React.useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inherit`, [isSelected, !openedItem]);
-  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');
+  const shadowStyle = React.useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inherit", [isSelected, !openedItem]);
+  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
   return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
@@ -103,7 +95,7 @@ const ItemSubmenu = props => {
       setFocusedItem(constants.CHEVRON_BACK_DS_ID);
     },
     role: "button",
-    "aria-label": `Close ${ariaLabel}`
+    "aria-label": "Close ".concat(ariaLabel)
   }), /*#__PURE__*/_jsx__default["default"](CollapsedComponent, {
     item: item,
     ctx: ctx

package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var Grid = require('@elliemae/ds-grid');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
@@ -53,10 +54,10 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts;
+    var _item$itemOpts$indent, _item$itemOpts;
 
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    const currentIndent = ((_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) ?? 0;
+    const currentIndent = (_item$itemOpts$indent = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) !== null && _item$itemOpts$indent !== void 0 ? _item$itemOpts$indent : 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {

package/cjs/parts/LeftNavContent/styled.js

@@ -13,18 +13,10 @@ const getLeftShadowStyles = ({
   theme
 }) => {
   if (!selected) {
-    return `
-      box-shadow: inset 4px 0 0 0 transparent;
-      :hover {
-        box-shadow: inset 4px 0 0 0 ${theme.colors.neutral[300]};
-      }
-      :active {
-        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
-      }
-    `;
+    return "\n      box-shadow: inset 4px 0 0 0 transparent;\n      :hover {\n        box-shadow: inset 4px 0 0 0 ".concat(theme.colors.neutral[300], ";\n      }\n      :active {\n        box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n      }\n    ");
   }
 
-  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;
+  return "box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[400], ";");
 };
 
 const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled__default["default"].nav.withConfig({
@@ -32,7 +24,7 @@ const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled__default["defaul
 })(["width:", ";transition:width ", " 350ms;box-shadow:-1px 0 0 0 ", ";border:1px solid ", ";overflow:hidden;height:100%;position:relative;"], props => props.expanded ? props.expandedWidth : '48px', props => props.expanded ? 'ease-out' : 'ease-in', props => props.theme.colors.neutral[100], props => props.theme.colors.neutral[100]);
 const StyledLeftNavAreasContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1hvvtkb-1"
-})(["position:absolute;width:", ";height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'left-nav-header' 'left-nav-body' 'left-nav-footer';"], props => props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px');
+})(["position:absolute;width:", ";height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'left-nav-header' 'left-nav-body' 'left-nav-footer';"], props => props.expanded ? "calc(".concat(props.expandedWidth, " - 2px)") : '46px');
 const StyledLeftNavHeaderArea = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1hvvtkb-2"
 })(["grid-area:left-nav-header;", ""], getLeftShadowStyles);

package/cjs/parts/LeftNavContentWithScrollbar/index.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var OverlayScrollbars = require('overlayscrollbars');
+require('overlayscrollbars/css/OverlayScrollbars.css');
 var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 

package/cjs/parts/LeftNavFooterItem/index.js

@@ -69,7 +69,7 @@ const LeftNavFooterItem = props => {
     onFocus: () => setFocusedItem(id),
     "data-testid": "leftnav-item-container",
     role: "menuitem",
-    "aria-label": expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`,
+    "aria-label": expandedForAnimation ? "Footer, ".concat(footerLabel) : "Expand left navigation",
     children: !expandedForAnimation ? /*#__PURE__*/_jsx__default["default"](MenuExpand__default["default"], {
       size: "m",
       color: ['brand-primary', 800],

package/esm/common/getFocusedByKeyboardStyle.js

@@ -1,15 +1,4 @@
-const commonFocusedByKeyboardBorder = (props, height, width) => `
-  &:before {
-    content: '';
-    position: absolute;
-    height: ${height};
-    width: ${width};
-    top: 0;
-    left: 0px;
-    border: 1px solid ${props.theme.colors.brand[600]};
-    pointer-events: none;
-  }
-`;
+const commonFocusedByKeyboardBorder = (props, height, width) => "\n  &:before {\n    content: '';\n    position: absolute;\n    height: ".concat(height, ";\n    width: ").concat(width, ";\n    top: 0;\n    left: 0px;\n    border: 1px solid ").concat(props.theme.colors.brand[600], ";\n    pointer-events: none;\n  }\n");
 
 const getFocusedByKeyboardBorderStyle = (props, height = '100%', width = '100%') => {
   if (props.focused && props.focusedByKey) return commonFocusedByKeyboardBorder(props, height, width);

package/esm/common/getItemBackgroundStyle.js

@@ -1,15 +1,4 @@
-const commonItemBackgroundStyle = (color, hoverColor, activeColor) => `
-
-  background: ${color};
-
-  :hover {
-    background: ${hoverColor};
-  }
-
-  :active {
-    background: ${activeColor};
-  }
-`;
+const commonItemBackgroundStyle = (color, hoverColor, activeColor) => "\n\n  background: ".concat(color, ";\n\n  :hover {\n    background: ").concat(hoverColor, ";\n  }\n\n  :active {\n    background: ").concat(activeColor, ";\n  }\n");
 
 const getItemBackgroundStyle = props => {
   if (props.selected && !props.opened) return commonItemBackgroundStyle(props.theme.colors.brand[200], props.theme.colors.brand[200], props.theme.colors.brand[200]);

package/esm/common/getLeftBorderStyle.js

@@ -1,18 +1,4 @@
-const commonLeftBorderStyle = (color, hoverColor, activeColor) => `
-
-  -webkit-box-shadow: inset 4px 0 0 0 ${color};
-          box-shadow: inset 4px 0 0 0 ${color};
-
-  :hover {
-    -webkit-box-shadow: inset 4px 0 0 0 ${hoverColor};
-            box-shadow: inset 4px 0 0 0 ${hoverColor};
-  }
-
-  :active {
-    -webkit-box-shadow: inset 4px 0 0 0 ${activeColor};
-            box-shadow: inset 4px 0 0 0 ${activeColor};
-  }
-`;
+const commonLeftBorderStyle = (color, hoverColor, activeColor) => "\n\n  -webkit-box-shadow: inset 4px 0 0 0 ".concat(color, ";\n          box-shadow: inset 4px 0 0 0 ").concat(color, ";\n\n  :hover {\n    -webkit-box-shadow: inset 4px 0 0 0 ").concat(hoverColor, ";\n            box-shadow: inset 4px 0 0 0 ").concat(hoverColor, ";\n  }\n\n  :active {\n    -webkit-box-shadow: inset 4px 0 0 0 ").concat(activeColor, ";\n            box-shadow: inset 4px 0 0 0 ").concat(activeColor, ";\n  }\n");
 
 const getLeftBorderStyle = props => {
   if (props.selected) return commonLeftBorderStyle(props.theme.colors.brand[400], props.theme.colors.brand[400], props.theme.colors.brand[400]);

package/esm/common/getScrollbarStyle.js

@@ -1,26 +1,3 @@
-const getScrolbarStyle = () => `
-  ::-webkit-scrollbar {
-    width: 14px;
-  }
-  ::-webkit-scrollbar-thumb {
-    height: 6px;
-    border: 4px solid rgba(0, 0, 0, 0);
-
-    background-clip: padding-box;
-
-    background-color: rgba(105, 116, 137, 0.5);
-
-    border-radius: 7px;
-    -webkit-border-radius: 7px;
-  }
-  ::-webkit-scrollbar-button {
-    width: 0;
-    height: 0;
-    display: none;
-  }
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-`;
+const getScrolbarStyle = () => "\n  ::-webkit-scrollbar {\n    width: 14px;\n  }\n  ::-webkit-scrollbar-thumb {\n    height: 6px;\n    border: 4px solid rgba(0, 0, 0, 0);\n\n    background-clip: padding-box;\n\n    background-color: rgba(105, 116, 137, 0.5);\n\n    border-radius: 7px;\n    -webkit-border-radius: 7px;\n  }\n  ::-webkit-scrollbar-button {\n    width: 0;\n    height: 0;\n    display: none;\n  }\n  ::-webkit-scrollbar-corner {\n    background-color: transparent;\n  }\n";
 
 export { getScrolbarStyle };

package/esm/configs/useLeftNavConfig.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React from 'react';
 import { useGlobalKeyListeners } from './useGlobalKeyListeners.js';
 import { useLeftNavItems } from './useLeftNavItems.js';

package/esm/configs/useLeftNavItems.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo, useRef, createRef } from 'react';
 import { ITEM_TYPES, FOOTER_DS_ID } from '../exported-related/constants.js';
 import '@babel/runtime/helpers/esm/jsx';
@@ -12,23 +13,22 @@ import '@elliemae/ds-icons/AlertsSmallFill';
 import '@elliemae/ds-icons/MessagesSmallFill';
 import '@elliemae/ds-icons/OpenWindow';
 
-/* eslint-disable complexity */
 const notFocuseableItems = [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR, ITEM_TYPES.LEFT_NAV_ITEM_SECTION]; // Walks the array of items
 // Drilldowns are tree-like structures
 
 const walkItems = (items, openedDrilldowns, callback) => {
   items.forEach(item => {
     if (typeof item.type === 'string') {
-      var _item$itemOpts, _item$itemOpts2, _item$itemOpts3;
+      var _item$itemOpts$items, _item$itemOpts, _item$itemOpts2, _item$itemOpts$items2, _item$itemOpts3;
 
       // Out of the box item
       if (notFocuseableItems.includes(item.type)) return; // not focuseable
 
       callback(item.dsId); // If it's an opened uncontrolled drilldown
 
-      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems(((_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.items) ?? [], openedDrilldowns, callback); // If it's an opened controlled drilldown
+      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN && openedDrilldowns.includes(item.dsId)) walkItems((_item$itemOpts$items = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 ? _item$itemOpts$items : [], openedDrilldowns, callback); // If it's an opened controlled drilldown
 
-      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && (_item$itemOpts2 = item.itemOpts) !== null && _item$itemOpts2 !== void 0 && _item$itemOpts2.isOpened) walkItems(((_item$itemOpts3 = item.itemOpts) === null || _item$itemOpts3 === void 0 ? void 0 : _item$itemOpts3.items) ?? [], openedDrilldowns, callback);
+      if (item.type === ITEM_TYPES.LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN && (_item$itemOpts2 = item.itemOpts) !== null && _item$itemOpts2 !== void 0 && _item$itemOpts2.isOpened) walkItems((_item$itemOpts$items2 = (_item$itemOpts3 = item.itemOpts) === null || _item$itemOpts3 === void 0 ? void 0 : _item$itemOpts3.items) !== null && _item$itemOpts$items2 !== void 0 ? _item$itemOpts$items2 : [], openedDrilldowns, callback);
     } else {
       var _item$itemOpts4;
 

package/esm/exported-related/ItemRenderer/index.js

@@ -20,7 +20,8 @@ const ItemRenderer = props => {
         ariaLabel,
         ariaRole,
         ariaLive,
-        ariaExpanded
+        ariaExpanded,
+        ariaDescribedBy
       },
       CollapsedComponent
     },
@@ -76,7 +77,7 @@ const ItemRenderer = props => {
     }, void 0, /*#__PURE__*/jsx(StyledItem, {
       ref: visibleItemsRefs.current[dsId],
       pt: paddingTop,
-      pl: indent === undefined ? 'xxxs' : `${indent}px`,
+      pl: indent === undefined ? 'xxxs' : "".concat(indent, "px"),
       minHeight: minHeight,
       shadowStyle: shadowStyle,
       alignItems: "flex-start",
@@ -91,6 +92,7 @@ const ItemRenderer = props => {
       onFocus: handleFocus,
       "data-testid": "leftnav-item-container",
       tabIndex: focuseable ? 0 : -1,
+      "aria-describedby": ariaDescribedBy,
       "aria-expanded": ariaExpanded,
       role: ariaRole,
       "aria-label": ariaLabel,
@@ -108,7 +110,7 @@ const ItemRenderer = props => {
         marginLeft: opened ? '16px' : '0px',
         marginRight: borderBottomMr,
         height: '1px',
-        width: `calc(100% - ${borderBottomMr} - ${opened ? '16px' : '0px'})`,
+        width: "calc(100% - ".concat(borderBottomMr, " - ").concat(opened ? '16px' : '0px', ")"),
         backgroundColor: '#E0E3E8'
       }
     })), subitems]

package/esm/exported-related/ItemRenderer/styled.js

@@ -33,16 +33,6 @@ const StyledItem = /*#__PURE__*/styled(Grid).withConfig({
 })(["cursor:", ";min-height:", ";background:", ";:hover{background:", ";}:active{background:", ";}", ";outline:none;", ""], props => props.selectable && !props.opened ? 'pointer' : 'auto', props => props.minHeight, getItemBackground, getItemHoverBackground, ({
   selectable,
   theme
-}) => selectable ? theme.colors.brand[200] : 'white', props => props.shadowStyle(props.theme), props => props.focused && props.focusedByKey ? `
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border: 1px solid ${props.theme.colors.brand[600]};
-        pointer-events: none;
-      }` : '');
+}) => selectable ? theme.colors.brand[200] : 'white', props => props.shadowStyle(props.theme), props => props.focused && props.focusedByKey ? "\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        border: 1px solid ".concat(props.theme.colors.brand[600], ";\n        pointer-events: none;\n      }") : '');
 
 export { StyledItem, StyledItemWrapper };

package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js

@@ -14,7 +14,8 @@ const itemDefaultProps = {
   ariaLabel: '',
   ariaRole: 'menuitem',
   ariaLive: 'off',
-  ariaExpanded: undefined
+  ariaExpanded: undefined,
+  ariaDescribedBy: undefined
 }; // Make use Item props with defaults
 
 const usePropsWithDefaults = props => {

package/esm/index.js

@@ -1,4 +1,3 @@
-import 'overlayscrollbars/css/OverlayScrollbars.css';
 export { LeftNavItemOptionsSchema, LeftNavItemPropsSchema } from './prop-types.js';
 export { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as default } from './LeftNavigation.js';
 export { CHEVRON_BACK_DS_ID, FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID, ITEM_TYPES, LABEL_OVERFLOW } from './exported-related/constants.js';

package/esm/outOfTheBox/ItemControlledDrilldown/index.js

@@ -38,10 +38,10 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts;
+    var _item$itemOpts$indent, _item$itemOpts;
 
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    const currentIndent = ((_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) ?? 0;
+    const currentIndent = (_item$itemOpts$indent = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) !== null && _item$itemOpts$indent !== void 0 ? _item$itemOpts$indent : 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {

package/esm/outOfTheBox/ItemHeader/index.js

@@ -19,6 +19,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const ItemHeader = props => {
+  var _item$itemOpts$ariaLa;
+
   const {
     item,
     item: {
@@ -43,7 +45,7 @@ const ItemHeader = props => {
     }
   } = props;
   const opened = openedItem === dsId;
-  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');
+  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
   return /*#__PURE__*/_jsx(ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({
@@ -77,7 +79,7 @@ const ItemHeader = props => {
       setFocusedItem(CHEVRON_BACK_DS_ID);
     },
     role: "button",
-    "aria-label": `Close ${ariaLabel}`
+    "aria-label": "Close ".concat(ariaLabel)
   }), /*#__PURE__*/_jsx(CollapsedComponent, {
     item: item,
     ctx: ctx

package/esm/outOfTheBox/ItemLink/index.js

@@ -18,17 +18,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const notOpenedShadowStyle = isSelected => theme => `
-  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
-
-  :hover {
-    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.neutral[300]};
-  }
-
-  :active {
-    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
-  }
-`;
+const notOpenedShadowStyle = isSelected => theme => "\n  box-shadow: inset 4px 0 0 0 ".concat(isSelected ? theme.colors.brand[400] : 'transparent', ";\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ").concat(isSelected ? theme.colors.brand[400] : theme.colors.neutral[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
 
 const ItemLink = props => {
   const {
@@ -51,7 +41,7 @@ const ItemLink = props => {
     }
   } = props;
   const isSelected = selectedItem === dsId;
-  const shadowStyle = useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inherit`, [isSelected, !openedItem]);
+  const shadowStyle = useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inherit", [isSelected, !openedItem]);
   return /*#__PURE__*/_jsx(ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread({

package/esm/outOfTheBox/ItemSection/index.js

@@ -38,8 +38,7 @@ const ItemSection = props => {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
         selectable: false,
-        focuseable: false,
-        ariaLive: 'polite'
+        focuseable: false
       }),
       CollapsedComponent: null
     }),

package/esm/outOfTheBox/ItemSubmenu/index.js

@@ -19,19 +19,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const notOpenedShadowStyle = isSelected => theme => `
-  box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};
-
-  :hover {
-    box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.neutral[300]};
-  }
-
-  :active {
-    box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
-  }
-`;
+const notOpenedShadowStyle = isSelected => theme => "\n  box-shadow: inset 4px 0 0 0 ".concat(isSelected ? theme.colors.brand[400] : 'transparent', ";\n\n  :hover {\n    box-shadow: inset 4px 0 0 0 ").concat(isSelected ? theme.colors.brand[400] : theme.colors.neutral[300], ";\n  }\n\n  :active {\n    box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n  }\n");
 
 const ItemSubmenu = props => {
+  var _item$itemOpts$ariaLa;
+
   const {
     item,
     item: {
@@ -58,8 +50,8 @@ const ItemSubmenu = props => {
   } = props;
   const opened = openedItem === dsId;
   const isSelected = selectedItem === dsId;
-  const shadowStyle = useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inherit`, [isSelected, !openedItem]);
-  const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');
+  const shadowStyle = useCallback(theme => !openedItem ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inherit", [isSelected, !openedItem]);
+  const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
   return /*#__PURE__*/_jsx(ItemRenderer, {
     item: _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
@@ -93,7 +85,7 @@ const ItemSubmenu = props => {
       setFocusedItem(CHEVRON_BACK_DS_ID);
     },
     role: "button",
-    "aria-label": `Close ${ariaLabel}`
+    "aria-label": "Close ".concat(ariaLabel)
   }), /*#__PURE__*/_jsx(CollapsedComponent, {
     item: item,
     ctx: ctx

package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useEffect, useMemo, useCallback } from 'react';
 import Grid from '@elliemae/ds-grid';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
@@ -41,10 +42,10 @@ const OutOfTheBoxMapSubitem = props => {
   } = props;
 
   if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
-    var _item$itemOpts;
+    var _item$itemOpts$indent, _item$itemOpts;
 
     const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
-    const currentIndent = ((_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) ?? 0;
+    const currentIndent = (_item$itemOpts$indent = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) !== null && _item$itemOpts$indent !== void 0 ? _item$itemOpts$indent : 0;
 
     const newItem = _objectSpread(_objectSpread({}, item), {}, {
       itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {

package/esm/parts/LeftNavContent/styled.js

@@ -5,18 +5,10 @@ const getLeftShadowStyles = ({
   theme
 }) => {
   if (!selected) {
-    return `
-      box-shadow: inset 4px 0 0 0 transparent;
-      :hover {
-        box-shadow: inset 4px 0 0 0 ${theme.colors.neutral[300]};
-      }
-      :active {
-        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
-      }
-    `;
+    return "\n      box-shadow: inset 4px 0 0 0 transparent;\n      :hover {\n        box-shadow: inset 4px 0 0 0 ".concat(theme.colors.neutral[300], ";\n      }\n      :active {\n        box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n      }\n    ");
   }
 
-  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;
+  return "box-shadow: inset 4px 0 0 0 ".concat(theme.colors.brand[400], ";");
 };
 
 const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled.nav.withConfig({
@@ -24,7 +16,7 @@ const StyledLeftNavExpandAnimationWrapper = /*#__PURE__*/styled.nav.withConfig({
 })(["width:", ";transition:width ", " 350ms;box-shadow:-1px 0 0 0 ", ";border:1px solid ", ";overflow:hidden;height:100%;position:relative;"], props => props.expanded ? props.expandedWidth : '48px', props => props.expanded ? 'ease-out' : 'ease-in', props => props.theme.colors.neutral[100], props => props.theme.colors.neutral[100]);
 const StyledLeftNavAreasContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1hvvtkb-1"
-})(["position:absolute;width:", ";height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'left-nav-header' 'left-nav-body' 'left-nav-footer';"], props => props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px');
+})(["position:absolute;width:", ";height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'left-nav-header' 'left-nav-body' 'left-nav-footer';"], props => props.expanded ? "calc(".concat(props.expandedWidth, " - 2px)") : '46px');
 const StyledLeftNavHeaderArea = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1hvvtkb-2"
 })(["grid-area:left-nav-header;", ""], getLeftShadowStyles);

package/esm/parts/LeftNavContentWithScrollbar/index.js

@@ -1,7 +1,9 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useEffect } from 'react';
 import OverlayScrollbars from 'overlayscrollbars';
+import 'overlayscrollbars/css/OverlayScrollbars.css';
 import styled from 'styled-components';
 import { jsxs } from 'react/jsx-runtime';
 

package/esm/parts/LeftNavFooterItem/index.js

@@ -59,7 +59,7 @@ const LeftNavFooterItem = props => {
     onFocus: () => setFocusedItem(id),
     "data-testid": "leftnav-item-container",
     role: "menuitem",
-    "aria-label": expandedForAnimation ? `Footer, ${footerLabel}` : `Expand left navigation`,
+    "aria-label": expandedForAnimation ? "Footer, ".concat(footerLabel) : "Expand left navigation",
     children: !expandedForAnimation ? /*#__PURE__*/_jsx(MenuExpand, {
       size: "m",
       color: ['brand-primary', 800],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-left-navigation",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Left Navigation",
   "module": "./esm/index.js",
@@ -241,9 +241,10 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-alpha.10",
-    "@elliemae/ds-icons": "2.0.0-alpha.10",
-    "@elliemae/ds-system": "2.0.0-alpha.10",
+    "@elliemae/ds-basic": "2.0.0-alpha.11",
+    "@elliemae/ds-icons": "2.0.0-alpha.11",
+    "@elliemae/ds-system": "2.0.0-alpha.11",
+    "overlayscrollbars": "^1.13.1",
     "prop-types": "~15.7.2",
     "react-virtual": "~2.3.2",
     "tree-model": "~1.0.7"

package/types/index.d.d.ts

@@ -39,6 +39,7 @@ export interface itemOptsT {
     ariaRole?: string;
     ariaLive?: string;
     ariaExpanded?: boolean;
+    ariaDescribedBy?: string;
     items?: GenericItemItemProps[];
 }
 export interface ComponentProps {

package/types/index.d.ts

@@ -1,4 +1,3 @@
-import 'overlayscrollbars/css/OverlayScrollbars.css';
 export { LeftNavItemPropsSchema, LeftNavItemOptionsSchema } from './prop-types';
-export { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as default, } from './LeftNavigation';
+export { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as default } from './LeftNavigation';
 export * from './exported-related';

package/types/parts/LeftNavContentWithScrollbar/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'overlayscrollbars/css/OverlayScrollbars.css';
 export interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }

package/types/parts/LeftNavFooterItem/styled.d.ts

@@ -7,4 +7,4 @@ export declare const StyledItemWrapper: import("styled-components").StyledCompon
 export declare const StyledItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
 export declare const StyledSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
-export declare const StyledMenuCollapse: import("styled-components").StyledComponent<(rest: any) => JSX.Element, any, {}, never>;
+export declare const StyledMenuCollapse: import("styled-components").StyledComponent<(rest: Record<string, unknown>) => JSX.Element, any, {}, never>;

package/cjs/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": false
-}

package/esm/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": false
-}