@elliemae/ds-left-navigation 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/outOfTheBox/ItemSubmenu/index.js

@@ -0,0 +1,135 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useCallback } from 'react';
+import Grid from '@elliemae/ds-grid';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';
+import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
+import '@elliemae/ds-icons';
+import 'react/jsx-runtime';
+import 'styled-components';
+import { StyledChevronLeft, StyledLabel } from './styled.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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.brand[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: {
+      dsId,
+      itemOpts: {
+        label,
+        RightComponent,
+        BottomComponent,
+        labelDataTestId,
+        labelOverflow: itemLabelOverflow
+      },
+      CollapsedComponent = () => null
+    },
+    ctx,
+    ctx: {
+      leftNavProps: {
+        openedItem,
+        labelOverflow: leftNavLabelOverflow,
+        onItemClick
+      },
+      expandedForAnimation,
+      selectedItem,
+      selectedParent,
+      setFocusedItem
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  const opened = openedItem === dsId;
+  const isSelected = selectedItem === dsId;
+  const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [dsId, isSelected, openedItem, selectedParent]);
+  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), {}, {
+        ariaLabel,
+        ariaExpanded: opened,
+        openable: expandedForAnimation && !opened,
+        closable: expandedForAnimation && opened,
+        selectable: !opened
+      })
+    }),
+    shadowStyle: shadowStyle,
+    hasBorderBottom: opened,
+    borderBottomMr: "12px"
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    cols: opened ? ['auto', 'auto'] : ['38px'],
+    gutter: "1px",
+    pl: opened ? 'xxs' : 0,
+    justifyItems: "center",
+    "data-testid": "leftnav-leftcomponent"
+  }, void 0, opened && /*#__PURE__*/_jsx(StyledChevronLeft, {
+    size: "m",
+    color: ['brand-primary', 800],
+    onClick: e => {
+      onItemClick(item, e);
+    },
+    "data-testid": "leftnav-leftcomponent-chevron",
+    tabIndex: 0,
+    onFocus: e => {
+      e.stopPropagation();
+      setFocusedItem(CHEVRON_BACK_DS_ID);
+    },
+    role: "button",
+    "aria-label": "Close ".concat(ariaLabel)
+  }), /*#__PURE__*/_jsx(CollapsedComponent, {
+    item: item,
+    ctx: ctx
+  })), /*#__PURE__*/_jsx(StyledLabel, {
+    ml: opened ? 'xxs' : '1px',
+    mt: "xxxs",
+    mb: "15px",
+    "data-testid": labelDataTestId || 'leftnav-itemlabel',
+    labelOverflow: labelOverflow
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: label,
+    placement: "bottom-start"
+  }) : label), /*#__PURE__*/_jsx(Grid, {
+    pl: "xs",
+    pr: opened ? 'xxs2' : 'xxs',
+    onFocus: e => {
+      e.stopPropagation();
+      setFocusedItem(null);
+    },
+    onKeyDown: e => e.stopPropagation(),
+    onClick: e => openedItem === dsId && e.stopPropagation(),
+    "data-testid": "leftnav-right-component"
+  }, void 0, RightComponent && /*#__PURE__*/_jsx(RightComponent, {
+    ctx: ctx,
+    item: item
+  })), BottomComponent && /*#__PURE__*/_jsx(Grid, {
+    style: {
+      gridColumn: 'span 3'
+    },
+    pb: "xxxs",
+    pl: "xxs",
+    pr: "xxs",
+    onFocus: e => {
+      e.stopPropagation();
+      setFocusedItem(null);
+    },
+    onKeyDown: e => e.stopPropagation(),
+    onClick: e => openedItem && e.stopPropagation()
+  }, void 0, /*#__PURE__*/_jsx(BottomComponent, {
+    ctx: ctx,
+    item: item
+  })));
+};
+
+export { ItemSubmenu };

package/esm/outOfTheBox/ItemSubmenu/styled.js

@@ -0,0 +1,12 @@
+import Grid from '@elliemae/ds-grid';
+import { ChevronSmallLeft } from '@elliemae/ds-icons';
+import styled from 'styled-components';
+
+const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1hegp8y-0"
+})(["font-size:14px;color:", ";word-break:", ";"], props => props.theme.colors.neutral[800], props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
+const StyledChevronLeft = /*#__PURE__*/styled(ChevronSmallLeft).withConfig({
+  componentId: "sc-1hegp8y-1"
+})(["cursor:pointer;:focus{outline:2px solid ", ";}"], props => props.theme.colors.brand[700]);
+
+export { StyledChevronLeft, StyledLabel };

package/esm/outOfTheBox/ItemTextLabel/index.js

@@ -0,0 +1,61 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
+import '@elliemae/ds-icons';
+import 'react/jsx-runtime';
+import 'styled-components';
+import '@elliemae/ds-grid';
+import { StyledLabel } from './styled.js';
+
+var _div;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const ItemTextLabel = props => {
+  const {
+    item,
+    item: {
+      itemOpts: {
+        label,
+        labelOverflow: itemLabelOverflow,
+        labelBold,
+        labelColor,
+        labelDataTestId
+      }
+    },
+    ctx: {
+      leftNavProps: {
+        labelOverflow: leftNavLabelOverflow
+      }
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  return /*#__PURE__*/_jsx(ItemRenderer, {
+    item: _objectSpread(_objectSpread({}, item), {}, {
+      CollapsedComponent: null
+    }),
+    minHeight: "32px",
+    paddingTop: "8px"
+  }, void 0, " ", _div || (_div = /*#__PURE__*/_jsx("div", {})), /*#__PURE__*/_jsx(StyledLabel, {
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
+    pl: "24px",
+    labelOverflow: labelOverflow,
+    labelBold: labelBold,
+    labelColor: labelColor,
+    mr: "xxs2",
+    pb: "xxxs"
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: label,
+    placement: "bottom-start"
+  }) : label));
+};
+
+export { ItemTextLabel };

package/esm/outOfTheBox/ItemTextLabel/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import Grid from '@elliemae/ds-grid';
+
+const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1v26p1i-0"
+})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, _ref => {
+  let {
+    labelColor,
+    theme
+  } = _ref;
+  return labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800];
+}, props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
+
+export { StyledLabel };

package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js

@@ -0,0 +1,162 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+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 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useEffect, useMemo, useCallback } from 'react';
+import Grid from '@elliemae/ds-grid';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
+import { ITEM_TYPES } from '../../exported-related/constants.js';
+import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
+import 'react/jsx-runtime';
+import 'styled-components';
+import { StyledLabel, StyledDate } from './styled.js';
+import { ItemSeparator } from '../ItemSeparator/index.js';
+import { ItemWithDate } from '../ItemWithDate/index.js';
+import { ItemTextLabel } from '../ItemTextLabel/index.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// Subitem mapping
+const outOfTheBoxSubitemsComponents = {
+  [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,
+  [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,
+  [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel
+};
+
+const OutOfTheBoxMapSubitem = props => {
+  const {
+    item,
+    item: {
+      type,
+      Component
+    },
+    ctx
+  } = props;
+
+  if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
+    var _item$itemOpts$indent, _item$itemOpts;
+
+    const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
+    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), {}, {
+        indent: currentIndent + 44
+      })
+    });
+
+    return /*#__PURE__*/_jsx(OutOfTheBoxComponent, {
+      item: newItem,
+      ctx: ctx
+    });
+  } // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...
+
+
+  return /*#__PURE__*/_jsx(Component, {
+    item: item,
+    ctx: ctx
+  });
+};
+
+const ItemUncontrolledDrilldown = props => {
+  const {
+    item,
+    item: {
+      dsId,
+      itemOpts: {
+        label,
+        RightComponent,
+        labelRightSection,
+        labelOverflow: itemLabelOverflow,
+        labelBold,
+        labelColor,
+        startOpened,
+        items,
+        labelDataTestId
+      }
+    },
+    ctx,
+    ctx: {
+      leftNavProps: {
+        labelOverflow: leftNavLabelOverflow
+      },
+      openedDrilldowns,
+      setOpenedDrilldowns
+    }
+  } = props; // Start opened functionality
+
+  useEffect(() => {
+    if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId]);
+  }, []);
+  const opened = openedDrilldowns.includes(dsId);
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  const arrowIcon = useMemo(() => {
+    const Component = opened ? ArrowheadDown : ArrowheadRight;
+    return /*#__PURE__*/_jsx(Component, {
+      width: "24px",
+      height: "18px",
+      color: ['brand-primary', '800']
+    });
+  }, [opened]); // Array of subitems
+
+  const subitems = useMemo(() => {
+    if (!opened || !items) return [];
+    return items.map(subitem => /*#__PURE__*/_jsx(OutOfTheBoxMapSubitem, {
+      item: subitem,
+      ctx: ctx
+    }, subitem.dsId));
+  }, [items, opened]);
+  const handleOnClick = useCallback(() => {
+    if (opened) setOpenedDrilldowns(openedDrilldowns.filter(openedDrilldown => openedDrilldown !== dsId));else setOpenedDrilldowns([...openedDrilldowns, dsId]);
+  }, [opened, setOpenedDrilldowns, openedDrilldowns]);
+  return /*#__PURE__*/_jsx(ItemRenderer, {
+    item: _objectSpread(_objectSpread({}, item), {}, {
+      itemOpts: _objectSpread(_objectSpread({
+        ariaExpanded: opened,
+        ariaRole: 'menuitem'
+      }, item.itemOpts), {}, {
+        openable: !opened,
+        closable: opened
+      }),
+      CollapsedComponent: null
+    }),
+    subitems: subitems,
+    minHeight: "32px",
+    paddingTop: "8px",
+    onClick: handleOnClick
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    pl: "xxs",
+    mt: "-2px"
+  }, void 0, arrowIcon), /*#__PURE__*/_jsx(StyledLabel, {
+    pb: "xxxs",
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
+    labelOverflow: labelOverflow,
+    labelBold: labelBold,
+    labelColor: labelColor
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: label,
+    placement: "bottom-start"
+  }) : label), /*#__PURE__*/_jsx(Grid, {
+    pr: "xxs2",
+    cols: ['auto', 'auto'],
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx(StyledDate, {
+    ml: "xxs",
+    "data-testid": "leftnav-list-item-date"
+  }, void 0, labelRightSection), /*#__PURE__*/_jsx(Grid, {
+    pl: RightComponent ? 'xxs' : '0px'
+  }, void 0, RightComponent && /*#__PURE__*/_jsx(RightComponent, {
+    ctx: ctx,
+    item: item
+  }))));
+};
+
+export { ItemUncontrolledDrilldown };

package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import Grid from '@elliemae/ds-grid';
+
+const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-17rk89j-0"
+})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, _ref => {
+  let {
+    labelColor,
+    theme
+  } = _ref;
+  return labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800];
+}, props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
+const StyledDate = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-17rk89j-1"
+})(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);
+
+export { StyledDate, StyledLabel };

package/esm/outOfTheBox/ItemWithDate/index.js

@@ -0,0 +1,76 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import Grid from '@elliemae/ds-grid';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
+import '@elliemae/ds-icons';
+import 'react/jsx-runtime';
+import 'styled-components';
+import { StyledLabel, StyledDate } from './styled.js';
+
+var _div;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const ItemWithDate = props => {
+  const {
+    item,
+    item: {
+      itemOpts: {
+        label,
+        RightComponent,
+        labelRightSection,
+        labelOverflow: itemLabelOverflow,
+        labelBold,
+        labelColor,
+        labelDataTestId
+      }
+    },
+    ctx,
+    ctx: {
+      leftNavProps: {
+        labelOverflow: leftNavLabelOverflow
+      }
+    }
+  } = props;
+  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
+  return /*#__PURE__*/_jsx(ItemRenderer, {
+    item: _objectSpread(_objectSpread({}, item), {}, {
+      CollapsedComponent: null
+    }),
+    minHeight: "32px",
+    paddingTop: "8px"
+  }, void 0, " ", _div || (_div = /*#__PURE__*/_jsx("div", {})), /*#__PURE__*/_jsx(StyledLabel, {
+    pl: "xxs",
+    pb: "xxxs",
+    "data-testid": labelDataTestId || 'leftnav-list-item-label',
+    labelOverflow: labelOverflow,
+    labelBold: labelBold,
+    labelColor: labelColor
+  }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: label,
+    placement: "bottom-start"
+  }) : label), /*#__PURE__*/_jsx(Grid, {
+    pr: "xxs2",
+    cols: ['auto', 'auto'],
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx(StyledDate, {
+    ml: "xxs",
+    "data-testid": "leftnav-list-item-date"
+  }, void 0, labelRightSection), /*#__PURE__*/_jsx(Grid, {
+    pl: RightComponent ? 'xxs' : '0px',
+    "data-testid": "leftnav-right-component"
+  }, void 0, RightComponent && /*#__PURE__*/_jsx(RightComponent, {
+    ctx: ctx,
+    item: item
+  }))));
+};
+
+export { ItemWithDate };

package/esm/outOfTheBox/ItemWithDate/styled.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import Grid from '@elliemae/ds-grid';
+
+const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-govmsc-0"
+})(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, _ref => {
+  let {
+    labelColor,
+    theme
+  } = _ref;
+  return labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800];
+}, props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
+const StyledDate = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-govmsc-1"
+})(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);
+
+export { StyledDate, StyledLabel };

package/esm/outOfTheBox/index.js

@@ -0,0 +1,57 @@
+import { ITEM_TYPES } from '../exported-related/constants.js';
+import '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import '@elliemae/ds-grid';
+import 'styled-components';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import 'react/jsx-runtime';
+import '@elliemae/ds-icons';
+import { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';
+export { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';
+import { ItemUncontrolledDrilldown } from './ItemUncontrolledDrilldown/index.js';
+export { ItemUncontrolledDrilldown } from './ItemUncontrolledDrilldown/index.js';
+import { ItemHeader } from './ItemHeader/index.js';
+export { ItemHeader } from './ItemHeader/index.js';
+import { ItemLink } from './ItemLink/index.js';
+export { ItemLink } from './ItemLink/index.js';
+import { ItemSection } from './ItemSection/index.js';
+export { ItemSection } from './ItemSection/index.js';
+import { ItemSeparator } from './ItemSeparator/index.js';
+export { ItemSeparator } from './ItemSeparator/index.js';
+import { ItemSubmenu } from './ItemSubmenu/index.js';
+export { ItemSubmenu } from './ItemSubmenu/index.js';
+import { ItemTextLabel } from './ItemTextLabel/index.js';
+export { ItemTextLabel } from './ItemTextLabel/index.js';
+import { ItemWithDate } from './ItemWithDate/index.js';
+export { ItemWithDate } from './ItemWithDate/index.js';
+
+const outOfTheBoxTypes = Object.values(ITEM_TYPES);
+const {
+  LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN,
+  LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN,
+  LEFT_NAV_ITEM_HEADER,
+  LEFT_NAV_ITEM_LINK,
+  LEFT_NAV_ITEM_SECTION,
+  LEFT_NAV_ITEM_SEPARATOR,
+  LEFT_NAV_ITEM_SUBMENU,
+  LEFT_NAV_ITEM_TEXT_LABEL,
+  LEFT_NAV_ITEM_WITH_DATE
+} = ITEM_TYPES;
+const outOfTheBoxComponents = {
+  [LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN]: ItemControlledDrilldown,
+  [LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN]: ItemUncontrolledDrilldown,
+  [LEFT_NAV_ITEM_HEADER]: ItemHeader,
+  [LEFT_NAV_ITEM_LINK]: ItemLink,
+  [LEFT_NAV_ITEM_SECTION]: ItemSection,
+  [LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,
+  [LEFT_NAV_ITEM_SUBMENU]: ItemSubmenu,
+  [LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,
+  [LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate
+};
+
+export { outOfTheBoxComponents, outOfTheBoxTypes };

package/esm/parts/LeftNavContent/index.js

@@ -0,0 +1,77 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React from 'react';
+import { LeftNavContext } from '../../LeftNavigationContext.js';
+import { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';
+import { LeftNavContentWithScrollbar } from '../LeftNavContentWithScrollbar/index.js';
+import { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';
+import { StyledLeftNavExpandAnimationWrapper, StyledLeftNavAreasContainer, StyledLeftNavFooterArea, StyledLeftNavHeaderArea, StyledLeftNavBodyAreasContainer, StyledLeftNavBodyHeaderArea, StyledLeftNavBodyItemsArea } from './styled.js';
+import { LeftNavLoading } from '../LeftNavLoading/index.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _LeftNavInnerContent;
+const leftNavScreenReaderInstructions = 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' + 'To expand or select an item, use the Enter/Return or Space keys. ' + 'Expandable items can also be opened/closed with the Right/Left arrows. ' + 'The Home and End keys will take you to the first and last item respectively.';
+
+const LeftNavInnerContent = () => {
+  const {
+    leftNavProps: {
+      HeaderComponent,
+      BodyHeaderComponent,
+      openedItem,
+      items,
+      withoutBodyShadow
+    },
+    selectedItem
+  } = React.useContext(LeftNavContext);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(StyledLeftNavHeaderArea, {
+      "data-testid": "leftnav-header-area",
+      selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId)
+    }, void 0, HeaderComponent ? /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
+      item: HeaderComponent
+    }) : null), /*#__PURE__*/_jsx(StyledLeftNavBodyAreasContainer, {}, void 0, /*#__PURE__*/_jsx(StyledLeftNavBodyHeaderArea, {
+      "data-testid": "leftnav-body-header-area",
+      selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)
+    }, void 0, BodyHeaderComponent ? /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
+      item: BodyHeaderComponent
+    }) : null), /*#__PURE__*/_jsx(StyledLeftNavBodyItemsArea, {
+      selected: !withoutBodyShadow && openedItem !== null,
+      "data-testid": "leftnav-body-items-area",
+      tabIndex: -1
+    }, void 0, /*#__PURE__*/_jsx(LeftNavContentWithScrollbar, {}, void 0, items.map(item => /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
+      item: item
+    }, item.dsId)))))]
+  });
+};
+
+const LeftNavContent = () => {
+  const {
+    expandedForAnimation,
+    leftNavProps: {
+      expanded,
+      expandedWidth,
+      footerLabel,
+      onFooterExpand,
+      onFooterClose,
+      loading
+    }
+  } = React.useContext(LeftNavContext);
+  return /*#__PURE__*/_jsx(StyledLeftNavExpandAnimationWrapper, {
+    expandedWidth: expandedWidth,
+    expanded: expanded,
+    "data-testid": "leftnav-component",
+    "aria-label": leftNavScreenReaderInstructions
+  }, void 0, /*#__PURE__*/_jsx(StyledLeftNavAreasContainer, {
+    expandedWidth: expandedWidth,
+    expanded: expandedForAnimation
+  }, void 0, loading && /*#__PURE__*/_jsx(LeftNavLoading, {
+    expanded: expandedForAnimation
+  }), !loading && (_LeftNavInnerContent || (_LeftNavInnerContent = /*#__PURE__*/_jsx(LeftNavInnerContent, {}))), /*#__PURE__*/_jsx(StyledLeftNavFooterArea, {}, void 0, /*#__PURE__*/_jsx(LeftNavFooterItem, {
+    footerLabel: footerLabel,
+    onFooterExpand: onFooterExpand,
+    onFooterClose: onFooterClose
+  }))));
+};
+
+export { LeftNavContent as default };