@elliemae/ds-legacy-left-navigation 1.0.0-rc.1

package/dist/cjs/outOfTheBox/index.js

@@ -0,0 +1,83 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var outOfTheBox_exports = {};
+__export(outOfTheBox_exports, {
+  outOfTheBoxComponents: () => outOfTheBoxComponents,
+  outOfTheBoxTypes: () => outOfTheBoxTypes
+});
+module.exports = __toCommonJS(outOfTheBox_exports);
+var React = __toESM(require("react"));
+var import_exported_related = require("../exported-related/index.js");
+var import_ItemControlledDrilldown = require("./ItemControlledDrilldown/index.js");
+var import_ItemUncontrolledDrilldown = require("./ItemUncontrolledDrilldown/index.js");
+var import_ItemHeader = require("./ItemHeader/index.js");
+var import_ItemLink = require("./ItemLink/index.js");
+var import_ItemSection = require("./ItemSection/index.js");
+var import_ItemSeparator = require("./ItemSeparator/index.js");
+var import_ItemSubmenu = require("./ItemSubmenu/index.js");
+var import_ItemTextLabel = require("./ItemTextLabel/index.js");
+var import_ItemWithDate = require("./ItemWithDate/index.js");
+var import_ItemSkeleton = require("./ItemSkeleton/index.js");
+__reExport(outOfTheBox_exports, require("./ItemControlledDrilldown/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemUncontrolledDrilldown/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemHeader/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemLink/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemSection/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemSeparator/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemSkeleton/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemSubmenu/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemTextLabel/index.js"), module.exports);
+__reExport(outOfTheBox_exports, require("./ItemWithDate/index.js"), module.exports);
+const outOfTheBoxTypes = Object.values(import_exported_related.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_SKELETON,
+  LEFT_NAV_ITEM_SUBMENU,
+  LEFT_NAV_ITEM_TEXT_LABEL,
+  LEFT_NAV_ITEM_WITH_DATE
+} = import_exported_related.ITEM_TYPES;
+const outOfTheBoxComponents = {
+  [LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN]: import_ItemControlledDrilldown.ItemControlledDrilldown,
+  [LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN]: import_ItemUncontrolledDrilldown.ItemUncontrolledDrilldown,
+  [LEFT_NAV_ITEM_HEADER]: import_ItemHeader.ItemHeader,
+  [LEFT_NAV_ITEM_LINK]: import_ItemLink.ItemLink,
+  [LEFT_NAV_ITEM_SECTION]: import_ItemSection.ItemSection,
+  [LEFT_NAV_ITEM_SEPARATOR]: import_ItemSeparator.ItemSeparator,
+  [LEFT_NAV_ITEM_SKELETON]: import_ItemSkeleton.ItemSkeleton,
+  [LEFT_NAV_ITEM_SUBMENU]: import_ItemSubmenu.ItemSubmenu,
+  [LEFT_NAV_ITEM_TEXT_LABEL]: import_ItemTextLabel.ItemTextLabel,
+  [LEFT_NAV_ITEM_WITH_DATE]: import_ItemWithDate.ItemWithDate
+};
+//# sourceMappingURL=index.js.map

package/dist/cjs/outOfTheBox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/outOfTheBox/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport { ITEM_TYPES } from '../exported-related/index.js';\nimport { ItemControlledDrilldown } from './ItemControlledDrilldown/index.js';\nimport { ItemUncontrolledDrilldown } from './ItemUncontrolledDrilldown/index.js';\nimport { ItemHeader } from './ItemHeader/index.js';\nimport { ItemLink } from './ItemLink/index.js';\nimport { ItemSection } from './ItemSection/index.js';\nimport { ItemSeparator } from './ItemSeparator/index.js';\nimport { ItemSubmenu } from './ItemSubmenu/index.js';\nimport { ItemTextLabel } from './ItemTextLabel/index.js';\nimport { ItemWithDate } from './ItemWithDate/index.js';\nimport { ItemSkeleton } from './ItemSkeleton/index.js';\n\nexport * from './ItemControlledDrilldown/index.js';\nexport * from './ItemUncontrolledDrilldown/index.js';\nexport * from './ItemHeader/index.js';\nexport * from './ItemLink/index.js';\nexport * from './ItemSection/index.js';\nexport * from './ItemSeparator/index.js';\nexport * from './ItemSkeleton/index.js';\nexport * from './ItemSubmenu/index.js';\nexport * from './ItemTextLabel/index.js';\nexport * from './ItemWithDate/index.js';\n\nexport const outOfTheBoxTypes = Object.values(ITEM_TYPES);\nconst {\n  LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN,\n  LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN,\n  LEFT_NAV_ITEM_HEADER,\n  LEFT_NAV_ITEM_LINK,\n  LEFT_NAV_ITEM_SECTION,\n  LEFT_NAV_ITEM_SEPARATOR,\n  LEFT_NAV_ITEM_SKELETON,\n  LEFT_NAV_ITEM_SUBMENU,\n  LEFT_NAV_ITEM_TEXT_LABEL,\n  LEFT_NAV_ITEM_WITH_DATE,\n} = ITEM_TYPES;\n\nexport const outOfTheBoxComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n  [LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN]: ItemControlledDrilldown,\n  [LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN]: ItemUncontrolledDrilldown,\n  [LEFT_NAV_ITEM_HEADER]: ItemHeader,\n  [LEFT_NAV_ITEM_LINK]: ItemLink,\n  [LEFT_NAV_ITEM_SECTION]: ItemSection,\n  [LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n  [LEFT_NAV_ITEM_SKELETON]: ItemSkeleton,\n  [LEFT_NAV_ITEM_SUBMENU]: ItemSubmenu,\n  [LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n  [LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA2B;AAC3B,qCAAwC;AACxC,uCAA0C;AAC1C,wBAA2B;AAC3B,sBAAyB;AACzB,yBAA4B;AAC5B,2BAA8B;AAC9B,yBAA4B;AAC5B,2BAA8B;AAC9B,0BAA6B;AAC7B,0BAA6B;AAE7B,gCAAc,+CAdd;AAeA,gCAAc,iDAfd;AAgBA,gCAAc,kCAhBd;AAiBA,gCAAc,gCAjBd;AAkBA,gCAAc,mCAlBd;AAmBA,gCAAc,qCAnBd;AAoBA,gCAAc,oCApBd;AAqBA,gCAAc,mCArBd;AAsBA,gCAAc,qCAtBd;AAuBA,gCAAc,oCAvBd;AAyBO,MAAM,mBAAmB,OAAO,OAAO,kCAAU;AACxD,MAAM;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,IAAI;AAEG,MAAM,wBAA+F;AAAA,EAC1G,CAAC,kCAAkC,GAAG;AAAA,EACtC,CAAC,oCAAoC,GAAG;AAAA,EACxC,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,kBAAkB,GAAG;AAAA,EACtB,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,sBAAsB,GAAG;AAAA,EAC1B,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,wBAAwB,GAAG;AAAA,EAC5B,CAAC,uBAAuB,GAAG;AAC7B;",
+  "names": []
+}

package/dist/cjs/outOfTheBox/styled.js

@@ -0,0 +1,126 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledArrowContainer: () => StyledArrowContainer,
+  StyledBottomContainer: () => StyledBottomContainer,
+  StyledChevronLeft: () => StyledChevronLeft,
+  StyledDate: () => StyledDate,
+  StyledItemLabel: () => StyledItemLabel,
+  StyledLabel: () => StyledLabel,
+  StyledLeftContainer: () => StyledLeftContainer,
+  StyledRightContainer: () => StyledRightContainer,
+  StyledRightLabel: () => StyledRightLabel,
+  StyledSectionContainer: () => StyledSectionContainer,
+  StyledSectionLabel: () => StyledSectionLabel,
+  StyledVerticalSeparator: () => StyledVerticalSeparator
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_ds_legacy_button_v2 = require("@elliemae/ds-legacy-button-v2");
+var import_constants = require("../constants/index.js");
+const StyledLabel = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.ITEM_LABEL
+})`
+  font-size: 13px;
+  font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
+  color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
+  line-height: 14px;
+  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
+`;
+const StyledDate = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.DSLeftNavigationSlots.ITEM_DATE })`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral[600]};
+  line-height: 14px;
+`;
+const StyledArrowContainer = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.ARROW_CONTAINER
+})``;
+const StyledRightContainer = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.RIGHT_CONTAINER
+})``;
+const StyledSectionLabel = (0, import_ds_legacy_system.styled)("span", {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.SECTION_LABEL
+})`
+  font-size: 13px;
+  color: ${(props) => props.theme.colors.neutral[700]};
+  margin-left: ${(props) => props.theme.space.xxs};
+  line-height: 13px;
+`;
+const StyledVerticalSeparator = (0, import_ds_legacy_system.styled)("div", {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.VERTICAL_SEPARATOR
+})`
+  margin: 0 ${(props) => props.theme.space.xxs};
+  width: 1px;
+  height: 13px;
+  background: ${(props) => props.theme.colors.neutral[600]};
+`;
+const StyledRightLabel = (0, import_ds_legacy_system.styled)("span", {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.SECTION_RIGHT_LABEL
+})`
+  font-size: 12px;
+  line-height: 13px;
+`;
+const StyledSectionContainer = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.SECTION_CONTAINER
+})``;
+const StyledBottomContainer = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.BOTTOM_CONTAINER
+})`
+  grid-column: span 3;
+`;
+const StyledLeftContainer = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.LEFT_CONTAINER
+})``;
+const StyledItemLabel = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.DSLeftNavigationSlots.ITEM_LABEL })`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.neutral[800]};
+  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
+`;
+const StyledChevronLeft = (0, import_ds_legacy_system.styled)(import_ds_legacy_button_v2.DSButtonV2, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.ITEM_CHEVRON_BACK
+})`
+  padding: 0;
+  :focus {
+    outline: 2px solid ${(props) => props.theme.colors.brand[800]};
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/outOfTheBox/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/outOfTheBox/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled, type Theme } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { DSButtonV2 } from '@elliemae/ds-legacy-button-v2';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../constants/index.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n  labelBold?: boolean;\n  labelOverflow?: string;\n  labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ITEM_LABEL,\n})<StyledLabelT>`\n  font-size: 13px;\n  font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n  color: ${({ labelColor, theme }) =>\n    labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n  line-height: 14px;\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_DATE })`\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 14px;\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.SECTION_LABEL,\n})`\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  margin-left: ${(props) => props.theme.space.xxs};\n  line-height: 13px;\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.VERTICAL_SEPARATOR,\n})`\n  margin: 0 ${(props) => props.theme.space.xxs};\n  width: 1px;\n  height: 13px;\n  background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled('span', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.SECTION_RIGHT_LABEL,\n})`\n  font-size: 12px;\n  line-height: 13px;\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BOTTOM_CONTAINER,\n})`\n  grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_LABEL })<{\n  labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n  font-size: 14px;\n  color: ${(props) => props.theme.colors.neutral[800]};\n  word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ITEM_CHEVRON_BACK,\n})`\n  padding: 0;\n  :focus {\n    outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmC;AACnC,4BAAqB;AACrB,iCAA2B;AAC3B,uBAA4D;AAUrD,MAAM,kBAAc,gCAAO,4BAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,iBAEgB,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,YAAY,WAAW,MAAM,MAAM,YAAY;AAAA,WAC/F,CAAC,EAAE,YAAY,MAAM,MAC5B,aAAa,MAAM,OAAO,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAEtE,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,iBAAa,gCAAO,4BAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAI7C,MAAM,2BAAuB,gCAAO,4BAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,2BAAuB,gCAAO,4BAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,yBAAqB,gCAAO,QAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,iBACnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,8BAA0B,gCAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAG3B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGlD,MAAM,uBAAmB,gCAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,6BAAyB,gCAAO,4BAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,4BAAwB,gCAAO,4BAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,0BAAsB,gCAAO,4BAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,sBAAkB,gCAAO,4BAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,WAAW,CAAC;AAAA;AAAA,WAIvG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACpC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,wBAAoB,gCAAO,uCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/package.json

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

package/dist/cjs/parts/LeftNavContent/index.js

@@ -0,0 +1,158 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LeftNavContent_exports = {};
+__export(LeftNavContent_exports, {
+  default: () => LeftNavContent_default
+});
+module.exports = __toCommonJS(LeftNavContent_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
+var import_LeftNavigationContext = require("../../LeftNavigationContext.js");
+var import_LeftNavFooterItem = require("../LeftNavFooterItem/index.js");
+var import_OutOfTheBoxMapItem = require("../OutOfTheBoxMapItem.js");
+var import_styled = require("./styled.js");
+var import_ItemSkeleton = require("../../outOfTheBox/ItemSkeleton/index.js");
+var import_LeftNavLoading = require("../LeftNavLoading/index.js");
+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, isSkeleton },
+    selectedItem
+  } = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.StyledLeftNavHeaderArea,
+      {
+        "data-testid": "leftnav-header-area",
+        selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
+        role: "group",
+        children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSkeleton.ItemSkeleton, { item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } }, hasBorderBottom: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          " ",
+          HeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item: HeaderComponent }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLeftNavBodyAreasContainer, { cols: ["1fr"], rows: ["auto", "1fr"], role: "group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styled.StyledLeftNavBodyHeaderArea,
+        {
+          "data-testid": "leftnav-body-header-area",
+          selected: !!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
+          role: "group",
+          isSkeleton,
+          children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ItemSkeleton.ItemSkeleton,
+            {
+              item: {
+                dsId: "body-header-skeleton",
+                itemOpts: {
+                  skeletonVariant: "item"
+                }
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: BodyHeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item: BodyHeaderComponent }) : null })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styled.StyledLeftNavBodyItemsArea,
+        {
+          selected: !withoutBodyShadow && openedItem !== null,
+          "data-testid": "leftnav-body-items-area",
+          tabIndex: -1,
+          role: "group",
+          isSkeleton,
+          children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ItemSkeleton.ItemSkeleton,
+            {
+              item: {
+                dsId: "action-items-skeleton",
+                itemOpts: {
+                  skeletonVariant: "subitem"
+                }
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item }, item.dsId)) })
+        }
+      )
+    ] })
+  ] });
+};
+const LeftNavContent = () => {
+  const {
+    expandedForAnimation,
+    leftNavProps: {
+      expanded,
+      expandedWidth,
+      FooterLabelComponent,
+      footerLabel,
+      onFooterExpand,
+      onFooterClose,
+      loading
+    },
+    leftNavProps
+  } = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
+  const globalProps = (0, import_ds_legacy_props_helpers.useGetGlobalAttributes)(leftNavProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledLeftNavExpandAnimationWrapper,
+    {
+      expandedWidth,
+      expanded,
+      "data-testid": "leftnav-component",
+      "aria-label": leftNavScreenReaderInstructions,
+      ...globalProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_styled.StyledLeftNavAreasContainer,
+        {
+          expandedWidth,
+          expanded: expandedForAnimation,
+          rows: loading ? ["1fr", "auto"] : ["auto", "1fr", "auto"],
+          cols: ["1fr"],
+          role: "menu",
+          children: [
+            loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavLoading.LeftNavLoading, { expanded: expandedForAnimation }),
+            !loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftNavInnerContent, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_LeftNavFooterItem.LeftNavFooterItem,
+              {
+                footerLabel,
+                FooterLabelComponent,
+                onFooterExpand,
+                onFooterClose
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var LeftNavContent_default = LeftNavContent;
+//# sourceMappingURL=index.js.map

package/dist/cjs/parts/LeftNavContent/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/LeftNavContent/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-legacy-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n  StyledLeftNavExpandAnimationWrapper,\n  StyledLeftNavAreasContainer,\n  StyledLeftNavHeaderArea,\n  StyledLeftNavBodyAreasContainer,\n  StyledLeftNavBodyHeaderArea,\n  StyledLeftNavBodyItemsArea,\n} from './styled.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\nconst leftNavScreenReaderInstructions =\n  'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n  'To expand or select an item, use the Enter/Return or Space keys. ' +\n  'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n  'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n  const {\n    leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },\n    selectedItem,\n  } = React.useContext(LeftNavContext);\n  return (\n    <>\n      <StyledLeftNavHeaderArea\n        data-testid=\"leftnav-header-area\"\n        selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n        role=\"group\"\n      >\n        {isSkeleton ? (\n          <ItemSkeleton item={{ dsId: 'header-skeleton', itemOpts: { skeletonVariant: 'item' } }} hasBorderBottom />\n        ) : (\n          <> {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}</>\n        )}\n      </StyledLeftNavHeaderArea>\n      <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']} role=\"group\">\n        <StyledLeftNavBodyHeaderArea\n          data-testid=\"leftnav-body-header-area\"\n          selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n          role=\"group\"\n          isSkeleton={isSkeleton}\n        >\n          {isSkeleton ? (\n            <ItemSkeleton\n              item={{\n                dsId: 'body-header-skeleton',\n                itemOpts: {\n                  skeletonVariant: 'item',\n                },\n              }}\n            />\n          ) : (\n            <>{BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}</>\n          )}\n        </StyledLeftNavBodyHeaderArea>\n        <StyledLeftNavBodyItemsArea\n          selected={!withoutBodyShadow && openedItem !== null}\n          data-testid=\"leftnav-body-items-area\"\n          tabIndex={-1}\n          role=\"group\"\n          isSkeleton={isSkeleton}\n        >\n          {isSkeleton ? (\n            <ItemSkeleton\n              item={{\n                dsId: 'action-items-skeleton',\n                itemOpts: {\n                  skeletonVariant: 'subitem',\n                },\n              }}\n            />\n          ) : (\n            <>\n              {items.map((item) => (\n                <OutOfTheBoxMapItem item={item} key={item.dsId} />\n              ))}\n            </>\n          )}\n        </StyledLeftNavBodyItemsArea>\n      </StyledLeftNavBodyAreasContainer>\n    </>\n  );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n  const {\n    expandedForAnimation,\n    leftNavProps: {\n      expanded,\n      expandedWidth,\n      FooterLabelComponent,\n      footerLabel,\n      onFooterExpand,\n      onFooterClose,\n      loading,\n    },\n    leftNavProps,\n  } = React.useContext(LeftNavContext);\n\n  const globalProps = useGetGlobalAttributes(leftNavProps);\n\n  return (\n    <StyledLeftNavExpandAnimationWrapper\n      expandedWidth={expandedWidth}\n      expanded={expanded}\n      data-testid=\"leftnav-component\"\n      aria-label={leftNavScreenReaderInstructions}\n      {...globalProps}\n    >\n      <StyledLeftNavAreasContainer\n        expandedWidth={expandedWidth}\n        expanded={expandedForAnimation}\n        rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n        cols={['1fr']}\n        role={'menu'}\n      >\n        {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n        {!loading && <LeftNavInnerContent />}\n        <LeftNavFooterItem\n          footerLabel={footerLabel}\n          FooterLabelComponent={FooterLabelComponent}\n          onFooterExpand={onFooterExpand}\n          onFooterClose={onFooterClose}\n        />\n      </StyledLeftNavAreasContainer>\n    </StyledLeftNavExpandAnimationWrapper>\n  );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/parts/LeftNavContent/styled.js

@@ -0,0 +1,107 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledLeftNavAreasContainer: () => StyledLeftNavAreasContainer,
+  StyledLeftNavBodyAreasContainer: () => StyledLeftNavBodyAreasContainer,
+  StyledLeftNavBodyHeaderArea: () => StyledLeftNavBodyHeaderArea,
+  StyledLeftNavBodyItemsArea: () => StyledLeftNavBodyItemsArea,
+  StyledLeftNavExpandAnimationWrapper: () => StyledLeftNavExpandAnimationWrapper,
+  StyledLeftNavHeaderArea: () => StyledLeftNavHeaderArea
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_constants = require("../../constants/index.js");
+const getLeftShadowStyles = ({
+  selected,
+  selectedParent,
+  theme
+}) => {
+  if (!selected && !selectedParent) {
+    return `
+      box-shadow: inset 4px 0 0 0 transparent;
+      :hover {
+        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};
+      }
+      :active {
+        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
+      }
+    `;
+  }
+  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;
+};
+const StyledLeftNavExpandAnimationWrapper = (0, import_ds_legacy_system.styled)("nav", {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.ROOT
+})`
+  width: ${(props) => props.expanded ? props.expandedWidth : "48px"};
+  transition: width ${(props) => props.expanded ? "ease-out" : "ease-in"} 350ms;
+  box-shadow: -1px 0 0 0 ${(props) => props.theme.colors.neutral[100]};
+  border: 1px solid ${(props) => props.theme.colors.neutral[100]};
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+`;
+const StyledLeftNavAreasContainer = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.AREAS_CONTAINER
+})`
+  width: ${(props) => props.expanded ? `calc(${props.expandedWidth} - 2px)` : "46px"};
+  height: 100%;
+`;
+const StyledLeftNavHeaderArea = (0, import_ds_legacy_system.styled)("div", {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.HEADER_AREA
+})`
+  ${getLeftShadowStyles}
+`;
+const StyledLeftNavBodyAreasContainer = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.BODY_AREAS_CONTAINER
+})`
+  width: 100%;
+`;
+const StyledLeftNavBodyHeaderArea = (0, import_ds_legacy_system.styled)("div", {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.BODY_HEADER_AREA
+})`
+  width: 100%;
+  ${({ isSkeleton }) => !isSkeleton ? getLeftShadowStyles : ""}
+`;
+const StyledLeftNavBodyItemsArea = (0, import_ds_legacy_system.styled)("div", {
+  name: import_constants.DSLeftNavigationName,
+  slot: import_constants.DSLeftNavigationSlots.BODY_ITEMS_AREA
+})`
+  width: 100%;
+  overflow: auto;
+  box-shadow: ${({ isSkeleton, selected, theme }) => !isSkeleton ? `inset 4px 0 0 0 ${selected ? theme.colors.brand[400] : "transparent"}` : ""};
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/parts/LeftNavContent/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/LeftNavContent/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-legacy-grid';\nimport type { Theme } from '@elliemae/ds-legacy-system';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\ntype LeftNavProps = {\n  expanded: boolean;\n  expandedWidth: string;\n};\n\nconst getLeftShadowStyles = ({\n  selected,\n  selectedParent,\n  theme,\n}: {\n  selected: boolean;\n  selectedParent?: boolean;\n  theme: Theme;\n}) => {\n  if (!selected && !selectedParent) {\n    return `\n      box-shadow: inset 4px 0 0 0 transparent;\n      :hover {\n        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};\n      }\n      :active {\n        box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n      }\n    `;\n  }\n  return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;\n};\n\nexport const StyledLeftNavExpandAnimationWrapper = styled('nav', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.ROOT,\n})<LeftNavProps>`\n  width: ${(props) => (props.expanded ? props.expandedWidth : '48px')};\n  transition: width ${(props) => (props.expanded ? 'ease-out' : 'ease-in')} 350ms;\n  box-shadow: -1px 0 0 0 ${(props) => props.theme.colors.neutral[100]};\n  border: 1px solid ${(props) => props.theme.colors.neutral[100]};\n  overflow: hidden;\n  height: 100%;\n  position: relative;\n`;\n\nexport const StyledLeftNavAreasContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.AREAS_CONTAINER,\n})<LeftNavProps>`\n  width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n  height: 100%;\n`;\n\nexport const StyledLeftNavHeaderArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n  ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled(Grid, {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER,\n})`\n  width: 100%;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BODY_HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean; isSkeleton: boolean }>`\n  width: 100%;\n  ${({ isSkeleton }) => (!isSkeleton ? getLeftShadowStyles : '')}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled('div', {\n  name: DSLeftNavigationName,\n  slot: DSLeftNavigationSlots.BODY_ITEMS_AREA,\n})<{ selected: boolean; isSkeleton: boolean }>`\n  width: 100%;\n  overflow: auto;\n  box-shadow: ${({ isSkeleton, selected, theme }) =>\n    !isSkeleton ? `inset 4px 0 0 0 ${selected ? theme.colors.brand[400] : 'transparent'}` : ''};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,4BAAqB;AAErB,8BAAuB;AACvB,uBAA4D;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,sCAGtB,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,EAG1D;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM,GAAG;AAC9D;AAEO,MAAM,0CAAsC,gCAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB;AAAA,sBACxC,CAAC,UAAW,MAAM,WAAW,aAAa;AAAA,2BACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,sBAC9C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAMxD,MAAM,kCAA8B,gCAAO,4BAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAIxE,MAAM,8BAA0B,gCAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,sCAAkC,gCAAO,4BAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,kCAA8B,gCAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,sBAAsB;AAAA;AAGtD,MAAM,iCAA6B,gCAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,YAAY,UAAU,MAAM,MAC3C,CAAC,aAAa,mBAAmB,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI,kBAAkB;AAAA;",
+  "names": []
+}