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

package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useEffect } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-legacy-icons';\nimport { ItemRenderer, ITEM_TYPES } from '../../exported-related/index.js';\nimport { StyledLabel, StyledDate, StyledRightContainer, StyledArrowContainer } from '../styled.js';\nimport { ItemSeparator } from '../ItemSeparator/index.js';\nimport { ItemWithDate } from '../ItemWithDate/index.js';\nimport { ItemTextLabel } from '../ItemTextLabel/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\n\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>> = {\n  [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n  [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n  [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem: React.ComponentType<DSLeftNavigationT.ComponentProps> = (props) => {\n  const {\n    item,\n    item: { type, Component },\n    ctx,\n  } = props;\n\n  if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n    const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n    const currentIndent = item.itemOpts?.indent ?? 0;\n    const newItem = {\n      ...item,\n      itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n    };\n    return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n  }\n  if (!Component) return null;\n  // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n  return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      dsId,\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        startOpened,\n        items,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n      openedDrilldowns,\n      setOpenedDrilldowns,\n    },\n  } = props;\n\n  // Start opened functionality\n  useEffect(() => {\n    if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const opened = openedDrilldowns.includes(dsId as string);\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n  const arrowIcon = useMemo(() => {\n    const Component = opened ? ArrowheadDown : ArrowheadRight;\n    return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n  }, [opened]);\n\n  // Array of subitems\n  const subitems = useMemo(() => {\n    if (!opened || !items) return [];\n    return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n  }, [ctx, items, opened]);\n\n  const handleOnClick = useCallback(() => {\n    if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n    else setOpenedDrilldowns([...openedDrilldowns, dsId as string]);\n  }, [opened, setOpenedDrilldowns, openedDrilldowns, dsId]);\n\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        itemOpts: {\n          ariaExpanded: opened,\n          ariaRole: 'menuitem',\n          ...item.itemOpts,\n          openable: !opened,\n          closable: opened,\n        },\n        CollapsedComponent: null,\n      }}\n      subitems={subitems}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n      onClick={handleOnClick}\n    >\n      <StyledArrowContainer pl=\"xxs\" mt=\"-2px\">\n        {arrowIcon}\n      </StyledArrowContainer>\n      <StyledLabel\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n      >\n        {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n      </StyledLabel>\n      <StyledRightContainer\n        pr=\"xxs2\"\n        cols={['auto', 'auto']}\n        alignItems=\"center\"\n        gutter=\"xxs\"\n        data-testid=\"leftnav-right-component\"\n      >\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/outOfTheBox/ItemWithDate/index.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-legacy-truncated-tooltip-text";
+import { ItemRenderer } from "../../exported-related/index.js";
+import { StyledRightContainer, StyledLabel, StyledDate } from "../styled.js";
+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__ */ jsxs(
+    ItemRenderer,
+    {
+      item: {
+        ...item,
+        CollapsedComponent: null
+      },
+      minHeight: "32px",
+      paddingTop: "8px",
+      children: [
+        " ",
+        /* @__PURE__ */ jsx("div", {}),
+        /* @__PURE__ */ jsx(
+          StyledLabel,
+          {
+            pl: "xxs",
+            pb: "xxxs",
+            "data-testid": labelDataTestId || "leftnav-list-item-label",
+            labelOverflow,
+            labelBold,
+            labelColor,
+            children: labelOverflow === "truncate" && label ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label, placement: "bottom-start" }) : label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          StyledRightContainer,
+          {
+            pr: "xxs2",
+            cols: ["auto", "auto"],
+            alignItems: "center",
+            gutter: "xxs",
+            "data-testid": "leftnav-right-component",
+            children: [
+              /* @__PURE__ */ jsx(StyledDate, { ml: "xxs", "data-testid": "leftnav-list-item-date", children: labelRightSection }),
+              RightComponent && /* @__PURE__ */ jsx(RightComponent, { ctx, item })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ItemWithDate
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/outOfTheBox/ItemWithDate/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemWithDate/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { DSLeftNavigationT } from '../../react-desc-prop-types.js';\nimport { StyledRightContainer, StyledLabel, StyledDate } from '../styled.js';\n\nexport const ItemWithDate = (props: DSLeftNavigationT.ComponentProps): JSX.Element => {\n  const {\n    item,\n    item: {\n      itemOpts: {\n        label,\n        RightComponent,\n        labelRightSection,\n        labelOverflow: itemLabelOverflow,\n        labelBold,\n        labelColor,\n        labelDataTestId,\n      },\n    },\n    ctx,\n    ctx: {\n      leftNavProps: { labelOverflow: leftNavLabelOverflow },\n    },\n  } = props;\n\n  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n  return (\n    <ItemRenderer\n      item={{\n        ...item,\n        CollapsedComponent: null,\n      }}\n      minHeight=\"32px\"\n      paddingTop=\"8px\"\n    >\n      {/* Empty LeftComponent */} <div />\n      <StyledLabel\n        pl=\"xxs\"\n        pb=\"xxxs\"\n        data-testid={labelDataTestId || 'leftnav-list-item-label'}\n        labelOverflow={labelOverflow}\n        labelBold={labelBold}\n        labelColor={labelColor}\n      >\n        {labelOverflow === 'truncate' && label ? (\n          <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" />\n        ) : (\n          label\n        )}\n      </StyledLabel>\n      <StyledRightContainer\n        pr=\"xxs2\"\n        cols={['auto', 'auto']}\n        alignItems=\"center\"\n        gutter=\"xxs\"\n        data-testid=\"leftnav-right-component\"\n      >\n        <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n          {labelRightSection}\n        </StyledDate>\n        {RightComponent && <RightComponent ctx={ctx} item={item} />}\n      </StyledRightContainer>\n    </ItemRenderer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoCW,cAe5B,YAf4B;AAnClC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAE7B,SAAS,sBAAsB,aAAa,kBAAkB;AAEvD,MAAM,eAAe,CAAC,UAAyD;AACpF,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEgB;AAAA;AAAA,QAAC,oBAAC,SAAI;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB;AAAA,YAChC;AAAA,YACA;AAAA,YACA;AAAA,YAEC,4BAAkB,cAAc,QAC/B,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAEnE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM,CAAC,QAAQ,MAAM;AAAA,YACrB,YAAW;AAAA,YACX,QAAO;AAAA,YACP,eAAY;AAAA,YAEZ;AAAA,kCAAC,cAAW,IAAG,OAAM,eAAY,0BAC9B,6BACH;AAAA,cACC,kBAAkB,oBAAC,kBAAe,KAAU,MAAY;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/esm/outOfTheBox/index.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { ITEM_TYPES } from "../exported-related/index.js";
+import { ItemControlledDrilldown } from "./ItemControlledDrilldown/index.js";
+import { ItemUncontrolledDrilldown } from "./ItemUncontrolledDrilldown/index.js";
+import { ItemHeader } from "./ItemHeader/index.js";
+import { ItemLink } from "./ItemLink/index.js";
+import { ItemSection } from "./ItemSection/index.js";
+import { ItemSeparator } from "./ItemSeparator/index.js";
+import { ItemSubmenu } from "./ItemSubmenu/index.js";
+import { ItemTextLabel } from "./ItemTextLabel/index.js";
+import { ItemWithDate } from "./ItemWithDate/index.js";
+import { ItemSkeleton } from "./ItemSkeleton/index.js";
+export * from "./ItemControlledDrilldown/index.js";
+export * from "./ItemUncontrolledDrilldown/index.js";
+export * from "./ItemHeader/index.js";
+export * from "./ItemLink/index.js";
+export * from "./ItemSection/index.js";
+export * from "./ItemSeparator/index.js";
+export * from "./ItemSkeleton/index.js";
+export * from "./ItemSubmenu/index.js";
+export * from "./ItemTextLabel/index.js";
+export * 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_SKELETON,
+  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_SKELETON]: ItemSkeleton,
+  [LEFT_NAV_ITEM_SUBMENU]: ItemSubmenu,
+  [LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,
+  [LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate
+};
+export {
+  outOfTheBoxComponents,
+  outOfTheBoxTypes
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/outOfTheBox/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,kBAAkB;AAC3B,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEP,MAAM,mBAAmB,OAAO,OAAO,UAAU;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/esm/outOfTheBox/styled.js

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSButtonV2 } from "@elliemae/ds-legacy-button-v2";
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../constants/index.js";
+const StyledLabel = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: 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 = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_DATE })`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral[600]};
+  line-height: 14px;
+`;
+const StyledArrowContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.ARROW_CONTAINER
+})``;
+const StyledRightContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.RIGHT_CONTAINER
+})``;
+const StyledSectionLabel = styled("span", {
+  name: DSLeftNavigationName,
+  slot: 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 = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.VERTICAL_SEPARATOR
+})`
+  margin: 0 ${(props) => props.theme.space.xxs};
+  width: 1px;
+  height: 13px;
+  background: ${(props) => props.theme.colors.neutral[600]};
+`;
+const StyledRightLabel = styled("span", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.SECTION_RIGHT_LABEL
+})`
+  font-size: 12px;
+  line-height: 13px;
+`;
+const StyledSectionContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.SECTION_CONTAINER
+})``;
+const StyledBottomContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.BOTTOM_CONTAINER
+})`
+  grid-column: span 3;
+`;
+const StyledLeftContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.LEFT_CONTAINER
+})``;
+const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_LABEL })`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.neutral[800]};
+  word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
+`;
+const StyledChevronLeft = styled(DSButtonV2, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.ITEM_CHEVRON_BACK
+})`
+  padding: 0;
+  :focus {
+    outline: 2px solid ${(props) => props.theme.colors.brand[800]};
+  }
+`;
+export {
+  StyledArrowContainer,
+  StyledBottomContainer,
+  StyledChevronLeft,
+  StyledDate,
+  StyledItemLabel,
+  StyledLabel,
+  StyledLeftContainer,
+  StyledRightContainer,
+  StyledRightLabel,
+  StyledSectionContainer,
+  StyledSectionLabel,
+  StyledVerticalSeparator
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/outOfTheBox/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,cAAc,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,sBAAsB;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,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAI7C,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,QAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,iBACnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAG3B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGlD,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,sBAAsB,OAAO,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,WAAW,CAAC;AAAA;AAAA,WAIvG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACpC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/package.json

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

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

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { useGetGlobalAttributes } from "@elliemae/ds-legacy-props-helpers";
+import { LeftNavContext } from "../../LeftNavigationContext.js";
+import { LeftNavFooterItem } from "../LeftNavFooterItem/index.js";
+import { OutOfTheBoxMapItem } from "../OutOfTheBoxMapItem.js";
+import {
+  StyledLeftNavExpandAnimationWrapper,
+  StyledLeftNavAreasContainer,
+  StyledLeftNavHeaderArea,
+  StyledLeftNavBodyAreasContainer,
+  StyledLeftNavBodyHeaderArea,
+  StyledLeftNavBodyItemsArea
+} from "./styled.js";
+import { ItemSkeleton } from "../../outOfTheBox/ItemSkeleton/index.js";
+import { LeftNavLoading } from "../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
+  } = React2.useContext(LeftNavContext);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StyledLeftNavHeaderArea,
+      {
+        "data-testid": "leftnav-header-area",
+        selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
+        role: "group",
+        children: isSkeleton ? /* @__PURE__ */ jsx(ItemSkeleton, { item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } }, hasBorderBottom: true }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          HeaderComponent ? /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item: HeaderComponent }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(StyledLeftNavBodyAreasContainer, { cols: ["1fr"], rows: ["auto", "1fr"], role: "group", children: [
+      /* @__PURE__ */ jsx(
+        StyledLeftNavBodyHeaderArea,
+        {
+          "data-testid": "leftnav-body-header-area",
+          selected: !!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
+          role: "group",
+          isSkeleton,
+          children: isSkeleton ? /* @__PURE__ */ jsx(
+            ItemSkeleton,
+            {
+              item: {
+                dsId: "body-header-skeleton",
+                itemOpts: {
+                  skeletonVariant: "item"
+                }
+              }
+            }
+          ) : /* @__PURE__ */ jsx(Fragment, { children: BodyHeaderComponent ? /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item: BodyHeaderComponent }) : null })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StyledLeftNavBodyItemsArea,
+        {
+          selected: !withoutBodyShadow && openedItem !== null,
+          "data-testid": "leftnav-body-items-area",
+          tabIndex: -1,
+          role: "group",
+          isSkeleton,
+          children: isSkeleton ? /* @__PURE__ */ jsx(
+            ItemSkeleton,
+            {
+              item: {
+                dsId: "action-items-skeleton",
+                itemOpts: {
+                  skeletonVariant: "subitem"
+                }
+              }
+            }
+          ) : /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item }, item.dsId)) })
+        }
+      )
+    ] })
+  ] });
+};
+const LeftNavContent = () => {
+  const {
+    expandedForAnimation,
+    leftNavProps: {
+      expanded,
+      expandedWidth,
+      FooterLabelComponent,
+      footerLabel,
+      onFooterExpand,
+      onFooterClose,
+      loading
+    },
+    leftNavProps
+  } = React2.useContext(LeftNavContext);
+  const globalProps = useGetGlobalAttributes(leftNavProps);
+  return /* @__PURE__ */ jsx(
+    StyledLeftNavExpandAnimationWrapper,
+    {
+      expandedWidth,
+      expanded,
+      "data-testid": "leftnav-component",
+      "aria-label": leftNavScreenReaderInstructions,
+      ...globalProps,
+      children: /* @__PURE__ */ jsxs(
+        StyledLeftNavAreasContainer,
+        {
+          expandedWidth,
+          expanded: expandedForAnimation,
+          rows: loading ? ["1fr", "auto"] : ["auto", "1fr", "auto"],
+          cols: ["1fr"],
+          role: "menu",
+          children: [
+            loading && /* @__PURE__ */ jsx(LeftNavLoading, { expanded: expandedForAnimation }),
+            !loading && /* @__PURE__ */ jsx(LeftNavInnerContent, {}),
+            /* @__PURE__ */ jsx(
+              LeftNavFooterItem,
+              {
+                footerLabel,
+                FooterLabelComponent,
+                onFooterExpand,
+                onFooterClose
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var LeftNavContent_default = LeftNavContent;
+export {
+  LeftNavContent_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
+  "names": ["React"]
+}

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { styled } from "@elliemae/ds-legacy-system";
+import { DSLeftNavigationName, DSLeftNavigationSlots } from "../../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 = styled("nav", {
+  name: DSLeftNavigationName,
+  slot: 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 = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.AREAS_CONTAINER
+})`
+  width: ${(props) => props.expanded ? `calc(${props.expandedWidth} - 2px)` : "46px"};
+  height: 100%;
+`;
+const StyledLeftNavHeaderArea = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.HEADER_AREA
+})`
+  ${getLeftShadowStyles}
+`;
+const StyledLeftNavBodyAreasContainer = styled(Grid, {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER
+})`
+  width: 100%;
+`;
+const StyledLeftNavBodyHeaderArea = styled("div", {
+  name: DSLeftNavigationName,
+  slot: DSLeftNavigationSlots.BODY_HEADER_AREA
+})`
+  width: 100%;
+  ${({ isSkeleton }) => !isSkeleton ? getLeftShadowStyles : ""}
+`;
+const StyledLeftNavBodyItemsArea = styled("div", {
+  name: DSLeftNavigationName,
+  slot: 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"}` : ""};
+`;
+export {
+  StyledLeftNavAreasContainer,
+  StyledLeftNavBodyAreasContainer,
+  StyledLeftNavBodyHeaderArea,
+  StyledLeftNavBodyItemsArea,
+  StyledLeftNavExpandAnimationWrapper,
+  StyledLeftNavHeaderArea
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,sBAAsB,6BAA6B;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,sCAAsC,OAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,sBAAsB;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,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAIxE,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,kCAAkC,OAAO,MAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,WAAW,MAAO,CAAC,aAAa,sBAAsB;AAAA;AAGtD,MAAM,6BAA6B,OAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,YAAY,UAAU,MAAM,MAC3C,CAAC,aAAa,mBAAmB,WAAW,MAAM,OAAO,MAAM,GAAG,IAAI,kBAAkB;AAAA;",
+  "names": []
+}