@elliemae/ds-left-navigation-tree 0.0.0-stage → 3.80.0-next.39

package/dist/cjs/parts/styled.js

@@ -0,0 +1,221 @@
+"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 name2 in all)
+    __defProp(target, name2, { get: all[name2], 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,
+  StyledCollapsedContainer: () => StyledCollapsedContainer,
+  StyledFooterButton: () => StyledFooterButton,
+  StyledFooterLabel: () => StyledFooterLabel,
+  StyledFooterMenu: () => StyledFooterMenu,
+  StyledFooterSeparator: () => StyledFooterSeparator,
+  StyledGroup: () => StyledGroup,
+  StyledHeaderDisclosure: () => StyledHeaderDisclosure,
+  StyledItem: () => StyledItem,
+  StyledItemLabel: () => StyledItemLabel,
+  StyledItemRow: () => StyledItemRow,
+  StyledItemSeparator: () => StyledItemSeparator,
+  StyledLeftContainer: () => StyledLeftContainer,
+  StyledRightContainer: () => StyledRightContainer,
+  StyledRoot: () => StyledRoot,
+  StyledSectionContainer: () => StyledSectionContainer,
+  StyledSectionLabel: () => StyledSectionLabel,
+  StyledTree: () => StyledTree
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../constants/index.js");
+const SLOTS = import_constants.LEFT_NAVIGATION_TREE_SLOTS;
+const name = import_constants.DSLeftNavigationTreeName;
+const StyledRoot = (0, import_ds_system.styled)("nav", { name, slot: SLOTS.ROOT })`
+  display: flex;
+  flex-direction: column;
+  width: ${({ expanded, expandedWidth }) => expanded ? expandedWidth : "48px"};
+  transition: width ${({ expanded }) => expanded ? "ease-out" : "ease-in"} 350ms;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+`;
+const StyledTree = (0, import_ds_system.styled)("ul", { name, slot: SLOTS.TREE })`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  ${({ isHeaderContent, theme }) => isHeaderContent ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ""}
+`;
+const StyledGroup = (0, import_ds_system.styled)("ul", { name, slot: SLOTS.GROUP })`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const StyledSectionContainer = (0, import_ds_system.styled)("ul", { name, slot: SLOTS.SECTION_CONTAINER })`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const StyledSectionLabel = (0, import_ds_system.styled)("span", { name, slot: SLOTS.SECTION_LABEL })`
+  display: block;
+  padding: 8px 12px 4px;
+  font-size: 1rem;
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  color: ${({ theme }) => theme.colors.neutral[700]};
+`;
+const StyledItemSeparator = (0, import_ds_system.styled)("div", { name, slot: SLOTS.ITEM_SEPARATOR })`
+  height: 1px;
+  margin: 4px 12px;
+  background: ${({ theme }) => theme.colors.neutral[100]};
+`;
+const StyledItem = (0, import_ds_system.styled)("li", { name, slot: SLOTS.ITEM })`
+  list-style: none;
+  outline: none;
+  ${({ isOpenSection, theme }) => isOpenSection ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ""}
+  &:focus-visible > [data-row] {
+    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    outline-offset: -2px;
+  }
+`;
+const StyledItemRow = (0, import_ds_system.styled)("div", { name, slot: SLOTS.ITEM_ROW })`
+  /** Labels wrap: side content aligns to the first line (spec "date is pinned on the right side of the first line"). */
+  --row-first-line: ${({ isTall }) => isTall ? "24px" : "16px"};
+  display: flex;
+  align-items: flex-start;
+  column-gap: 8px;
+  min-height: ${({ isTall }) => isTall ? "48px" : "32px"};
+  padding-block: ${({ isTall }) => isTall ? "12px" : "8px"};
+  box-sizing: border-box;
+  padding-left: ${({ rowPadding }) => `${rowPadding}px`};
+  ${({ isSticky }) => isSticky ? "position: sticky; top: 0; z-index: 1;" : ""}
+  padding-right: 8px;
+  cursor: pointer;
+  background: ${({ isCurrent, theme }) => isCurrent ? theme.colors.brand[200] : theme.colors.neutral["000"]};
+  box-shadow: inset 4px 0 0 0
+    ${({ isCurrent, isSelectedParent, theme }) => isCurrent || isSelectedParent ? theme.colors.brand[500] : "transparent"};
+  ${({ isCurrent, theme }) => isCurrent ? `outline: 1px solid ${theme.colors.brand[500]}; outline-offset: -1px;` : ""}
+  &:hover {
+    background: ${({ theme }) => theme.colors.brand[200]};
+    box-shadow: inset 4px 0 0 0
+      ${({ isCurrent, isSelectedParent, theme }) => isCurrent || isSelectedParent ? theme.colors.brand[500] : theme.colors.brand[300]};
+  }
+`;
+const StyledItemLabel = (0, import_ds_system.styled)("span", { name, slot: SLOTS.ITEM_LABEL })`
+  font-size: ${({ isTall }) => isTall ? "1.0769rem" : "1rem"};
+  line-height: ${({ isTall }) => isTall ? "17px" : "16px"};
+  padding-block: ${({ isTall }) => isTall ? "3.5px" : "0"};
+  color: ${({ theme }) => theme.colors.neutral[800]};
+  word-break: ${({ labelOverflow }) => labelOverflow === "wrapAll" ? "break-all" : "normal"};
+  overflow-wrap: anywhere;
+  flex: 1;
+  min-width: 0;
+`;
+const StyledLeftContainer = (0, import_ds_system.styled)("span", { name, slot: SLOTS.LEFT_CONTAINER })`
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--row-first-line, auto);
+`;
+const StyledCollapsedContainer = (0, import_ds_system.styled)("span", { name, slot: SLOTS.COLLAPSED_CONTAINER })`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--row-first-line, auto);
+`;
+const StyledRightContainer = (0, import_ds_system.styled)("span", { name, slot: SLOTS.RIGHT_CONTAINER })`
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--row-first-line, auto);
+`;
+const StyledArrowContainer = (0, import_ds_system.styled)("span", { name, slot: SLOTS.ARROW_CONTAINER })`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-height: var(--row-first-line, auto);
+  ${({ isLeading }) => isLeading ? "width: 16px; margin-inline-end: -8px;" : ""}
+`;
+const StyledHeaderDisclosure = (0, import_ds_system.styled)("button", { name, slot: SLOTS.HEADER_DISCLOSURE })`
+  --row-first-line: 24px;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 8px 0 12px;
+  border: none;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+  box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => isOpen ? theme.colors.brand[500] : "transparent"};
+  text-align: left;
+  font-size: 1.0769rem;
+  color: ${({ theme }) => theme.colors.neutral[800]};
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme }) => theme.colors.brand[200]};
+    box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => isOpen ? theme.colors.brand[500] : theme.colors.brand[300]};
+  }
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    outline-offset: -2px;
+  }
+`;
+const StyledFooterMenu = (0, import_ds_system.styled)("div", { name, slot: SLOTS.FOOTER_MENU })`
+  display: grid;
+  grid-template-columns: ${({ expanded }) => expanded ? "1fr auto auto" : "1fr"};
+  align-items: center;
+  column-gap: 8px;
+  margin-top: auto;
+  min-height: 48px;
+  padding: 0 4px 0 12px;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+`;
+const StyledFooterLabel = (0, import_ds_system.styled)("span", { name, slot: SLOTS.FOOTER_LABEL })`
+  font-size: 11px;
+  line-height: 14px;
+  color: ${({ theme }) => theme.colors.neutral[500]};
+`;
+const StyledFooterSeparator = (0, import_ds_system.styled)("span", { name, slot: SLOTS.FOOTER_SEPARATOR })`
+  width: 1px;
+  height: 16px;
+  background: ${({ theme }) => theme.colors.neutral[100]};
+`;
+const StyledFooterButton = (0, import_ds_system.styled)("button", { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+  }
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/styled.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS } from '../constants/index.js';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\n\nconst SLOTS = LEFT_NAVIGATION_TREE_SLOTS;\nconst name = DSLeftNavigationTreeName;\n\nexport const StyledRoot = styled('nav', { name, slot: SLOTS.ROOT })<{ expanded: boolean; expandedWidth: string }>`\n  display: flex;\n  flex-direction: column;\n  width: ${({ expanded, expandedWidth }) => (expanded ? expandedWidth : '48px')};\n  transition: width ${({ expanded }) => (expanded ? 'ease-out' : 'ease-in')} 350ms;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledTree = styled('ul', { name, slot: SLOTS.TREE })<{ isHeaderContent: boolean }>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  ${({ isHeaderContent, theme }) =>\n    isHeaderContent\n      ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }`\n      : ''}\n`;\n\nexport const StyledGroup = styled('ul', { name, slot: SLOTS.GROUP })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionContainer = styled('ul', { name, slot: SLOTS.SECTION_CONTAINER })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('span', { name, slot: SLOTS.SECTION_LABEL })`\n  display: block;\n  padding: 8px 12px 4px;\n  font-size: 1rem;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme }) => theme.colors.neutral[700]};\n`;\n\nexport const StyledItemSeparator = styled('div', { name, slot: SLOTS.ITEM_SEPARATOR })`\n  height: 1px;\n  margin: 4px 12px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\n/**\n * The focus ring is drawn on the row of the focused treeitem only: the `li` holds the whole\n * expanded subtree, so an outline on it would surround every descendant row.\n */\nexport const StyledItem = styled('li', { name, slot: SLOTS.ITEM })<{ isOpenSection: boolean }>`\n  list-style: none;\n  outline: none;\n  ${({ isOpenSection, theme }) =>\n    isOpenSection ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ''}\n  &:focus-visible > [data-row] {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledItemRow = styled('div', { name, slot: SLOTS.ITEM_ROW })<{\n  rowPadding: number;\n  isTall: boolean;\n  isSticky: boolean;\n  isCurrent: boolean;\n  isSelectedParent: boolean;\n}>`\n  /** Labels wrap: side content aligns to the first line (spec \"date is pinned on the right side of the first line\"). */\n  --row-first-line: ${({ isTall }) => (isTall ? '24px' : '16px')};\n  display: flex;\n  align-items: flex-start;\n  column-gap: 8px;\n  min-height: ${({ isTall }) => (isTall ? '48px' : '32px')};\n  padding-block: ${({ isTall }) => (isTall ? '12px' : '8px')};\n  box-sizing: border-box;\n  padding-left: ${({ rowPadding }) => `${rowPadding}px`};\n  ${({ isSticky }) => (isSticky ? 'position: sticky; top: 0; z-index: 1;' : '')}\n  padding-right: 8px;\n  cursor: pointer;\n  background: ${({ isCurrent, theme }) => (isCurrent ? theme.colors.brand[200] : theme.colors.neutral['000'])};\n  box-shadow: inset 4px 0 0 0\n    ${({ isCurrent, isSelectedParent, theme }) =>\n      isCurrent || isSelectedParent ? theme.colors.brand[500] : 'transparent'};\n  ${({ isCurrent, theme }) => (isCurrent ? `outline: 1px solid ${theme.colors.brand[500]}; outline-offset: -1px;` : '')}\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0\n      ${({ isCurrent, isSelectedParent, theme }) =>\n        isCurrent || isSelectedParent ? theme.colors.brand[500] : theme.colors.brand[300]};\n  }\n`;\n\nexport const StyledItemLabel = styled('span', { name, slot: SLOTS.ITEM_LABEL })<{\n  isTall: boolean;\n  labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n}>`\n  font-size: ${({ isTall }) => (isTall ? '1.0769rem' : '1rem')};\n  line-height: ${({ isTall }) => (isTall ? '17px' : '16px')};\n  padding-block: ${({ isTall }) => (isTall ? '3.5px' : '0')};\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  word-break: ${({ labelOverflow }) => (labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  overflow-wrap: anywhere;\n  flex: 1;\n  min-width: 0;\n`;\n\nexport const StyledLeftContainer = styled('span', { name, slot: SLOTS.LEFT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledCollapsedContainer = styled('span', { name, slot: SLOTS.COLLAPSED_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledRightContainer = styled('span', { name, slot: SLOTS.RIGHT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledArrowContainer = styled('span', { name, slot: SLOTS.ARROW_CONTAINER })<{ isLeading: boolean }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  min-height: var(--row-first-line, auto);\n  ${({ isLeading }) => (isLeading ? 'width: 16px; margin-inline-end: -8px;' : '')}\n`;\n\nexport const StyledHeaderDisclosure = styled('button', { name, slot: SLOTS.HEADER_DISCLOSURE })<{\n  isRail: boolean;\n  isOpen: boolean;\n}>`\n  --row-first-line: 24px;\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n  width: 100%;\n  min-height: 48px;\n  padding: 0 8px 0 12px;\n  border: none;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : 'transparent')};\n  text-align: left;\n  font-size: 1.0769rem;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : theme.colors.brand[300])};\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\nexport const StyledFooterMenu = styled('div', { name, slot: SLOTS.FOOTER_MENU })<{ expanded: boolean }>`\n  display: grid;\n  grid-template-columns: ${({ expanded }) => (expanded ? '1fr auto auto' : '1fr')};\n  align-items: center;\n  column-gap: 8px;\n  margin-top: auto;\n  min-height: 48px;\n  padding: 0 4px 0 12px;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterLabel = styled('span', { name, slot: SLOTS.FOOTER_LABEL })`\n  font-size: 11px;\n  line-height: 14px;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const StyledFooterSeparator = styled('span', { name, slot: SLOTS.FOOTER_SEPARATOR })`\n  width: 1px;\n  height: 16px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterButton = styled('button', { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,uBAAqE;AAGrE,MAAM,QAAQ;AACd,MAAM,OAAO;AAEN,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,WAGvD,CAAC,EAAE,UAAU,cAAc,MAAO,WAAW,gBAAgB,MAAO;AAAA,sBACzD,CAAC,EAAE,SAAS,MAAO,WAAW,aAAa,SAAU;AAAA;AAAA;AAAA,sBAGrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,2BACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGnD,MAAM,iBAAa,yBAAO,MAAM,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK7D,CAAC,EAAE,iBAAiB,MAAM,MAC1B,kBACI,kEAAkE,MAAM,OAAO,MAAM,GAAG,CAAC,QACzF,EAAE;AAAA;AAGH,MAAM,kBAAc,yBAAO,MAAM,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAM5D,MAAM,6BAAyB,yBAAO,MAAM,EAAE,MAAM,MAAM,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMnF,MAAM,yBAAqB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA,iBAInE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA,WAC/C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG5C,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,MAAM,MAAM,eAAe,CAAC;AAAA;AAAA;AAAA,gBAGrE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAOjD,MAAM,iBAAa,yBAAO,MAAM,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAG7D,CAAC,EAAE,eAAe,MAAM,MACxB,gBAAgB,kEAAkE,MAAM,OAAO,MAAM,GAAG,CAAC,QAAQ,EAAE;AAAA;AAAA,yBAE9F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,oBAAgB,yBAAO,OAAO,EAAE,MAAM,MAAM,MAAM,SAAS,CAAC;AAAA;AAAA,sBAQnD,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA,gBAIhD,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,MAAO;AAAA,mBACvC,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,KAAM;AAAA;AAAA,kBAE1C,CAAC,EAAE,WAAW,MAAM,GAAG,UAAU,IAAI;AAAA,IACnD,CAAC,EAAE,SAAS,MAAO,WAAW,0CAA0C,EAAG;AAAA;AAAA;AAAA,gBAG/D,CAAC,EAAE,WAAW,MAAM,MAAO,YAAY,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA,MAEvG,CAAC,EAAE,WAAW,kBAAkB,MAAM,MACtC,aAAa,mBAAmB,MAAM,OAAO,MAAM,GAAG,IAAI,aAAa;AAAA,IACzE,CAAC,EAAE,WAAW,MAAM,MAAO,YAAY,sBAAsB,MAAM,OAAO,MAAM,GAAG,CAAC,4BAA4B,EAAG;AAAA;AAAA,kBAErG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,QAEhD,CAAC,EAAE,WAAW,kBAAkB,MAAM,MACtC,aAAa,mBAAmB,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAIlF,MAAM,sBAAkB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,WAAW,CAAC;AAAA,eAI/D,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,MAAO;AAAA,iBAC7C,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,MAAO;AAAA,mBACxC,CAAC,EAAE,OAAO,MAAO,SAAS,UAAU,GAAI;AAAA,WAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACnC,CAAC,EAAE,cAAc,MAAO,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAAA;AAAA;AAAA;AAMtF,MAAM,0BAAsB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAM/E,MAAM,+BAA2B,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzF,MAAM,2BAAuB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMjF,MAAM,2BAAuB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpF,CAAC,EAAE,UAAU,MAAO,YAAY,0CAA0C,EAAG;AAAA;AAG1E,MAAM,6BAAyB,yBAAO,UAAU,EAAE,MAAM,MAAM,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAYjE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,gCAC1B,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,MAAM,OAAO,MAAM,GAAG,IAAI,aAAc;AAAA;AAAA;AAAA,WAG9F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,kBAGjC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,kCACtB,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAE;AAAA;AAAA;AAAA,yBAG5F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAIxD,MAAM,uBAAmB,yBAAO,OAAO,EAAE,MAAM,MAAM,MAAM,YAAY,CAAC;AAAA;AAAA,2BAEpD,CAAC,EAAE,SAAS,MAAO,WAAW,kBAAkB,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG3D,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,WAGvE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG5C,MAAM,4BAAwB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,iBAAiB,CAAC;AAAA;AAAA;AAAA,gBAG1E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGjD,MAAM,yBAAqB,yBAAO,UAAU,EAAE,MAAM,MAAM,MAAM,qBAAqB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAWpE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,125 @@
+"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 react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSLeftNavigationTreeItemOptsPropTypes: () => DSLeftNavigationTreeItemOptsPropTypes,
+  DSLeftNavigationTreeItemOptsSchema: () => DSLeftNavigationTreeItemOptsSchema,
+  DSLeftNavigationTreeItemPropTypes: () => DSLeftNavigationTreeItemPropTypes,
+  DSLeftNavigationTreeItemSchema: () => DSLeftNavigationTreeItemSchema,
+  DSLeftNavigationTreePropTypes: () => DSLeftNavigationTreePropTypes,
+  DSLeftNavigationTreePropTypesSchema: () => DSLeftNavigationTreePropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
+const noop = () => null;
+const defaultProps = {
+  items: [],
+  expanded: false,
+  expandedWidth: "240px",
+  labelOverflow: "wrap",
+  footerLabel: "",
+  disableDefaultSelection: false,
+  openedItem: null,
+  onItemClick: noop,
+  onItemOpenedChange: noop,
+  onSelectedChange: noop,
+  onFocusChange: noop,
+  onFooterExpand: noop,
+  onFooterClose: noop
+};
+const DSLeftNavigationTreePropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSLeftNavigationTreeName, import_constants.LEFT_NAVIGATION_TREE_SLOTS),
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  items: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description(
+    "The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached"
+  ).defaultValue([]),
+  expanded: import_ds_props_helpers.PropTypes.bool.description("Whether the panel is expanded or collapsed to the icon-only rail").defaultValue(false),
+  expandedWidth: import_ds_props_helpers.PropTypes.string.description("Width of the panel when expanded").defaultValue("240px"),
+  labelOverflow: import_ds_props_helpers.PropTypes.oneOf(["wrap", "wrapAll"]).description("How labels wrap").defaultValue("wrap"),
+  footerLabel: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.node, import_ds_props_helpers.PropTypes.string]).description("Text shown in the footer next to the collapse button").defaultValue(""),
+  selectedItem: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.oneOf([null])]).description(
+    'Id of the current page, exposed as aria-current="page" (aria-selected is never set). null means no current page; undefined lets the component track it'
+  ),
+  selectedParent: import_ds_props_helpers.PropTypes.string.description(
+    "Id of the item that shows the selected-parent indicator. When undefined, every ancestor of the current page shows it"
+  ),
+  disableDefaultSelection: import_ds_props_helpers.PropTypes.bool.description("Whether opening a parent should only expand it, without making its first page the current page").defaultValue(false),
+  HeaderComponent: import_ds_props_helpers.PropTypes.object.description(
+    "Item rendered as the header disclosure button above the tree. While it is open, pass its content as items (selecting its first item is up to you), and clear openedItem when the panel collapses so the rail shows your root items. Only dsId, label, CollapsedComponent, RightComponent and labelOverflow are used"
+  ),
+  openedItem: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.oneOf([null])]).description("Id of the header item when the header is open. Other ids are ignored").defaultValue(null),
+  onItemClick: import_ds_props_helpers.PropTypes.func.description(
+    "Called when an item or the header is activated with click, Enter or Space. In the collapsed rail, expand the panel from here when the item is a parent. After a page activation, move focus to your content if needed; after a parent activation, leave focus on the parent"
+  ).signature("((item: DSLeftNavigationTreeT.Item, e: React.MouseEvent | React.KeyboardEvent) => void)").defaultValue(() => null),
+  onItemOpenedChange: import_ds_props_helpers.PropTypes.func.description("Called when a parent requests to open or close").signature(
+    "((item: DSLeftNavigationTreeT.Item, nextIsOpened: boolean, e: React.MouseEvent | React.KeyboardEvent) => void)"
+  ).defaultValue(() => null),
+  onSelectedChange: import_ds_props_helpers.PropTypes.func.description("Called with the id of the item that becomes the current page").signature("((id: string) => void)").defaultValue(() => null),
+  onFocusChange: import_ds_props_helpers.PropTypes.func.description("Called with the id of the item that receives focus").signature("((id: string) => void)").defaultValue(() => null),
+  onFooterExpand: import_ds_props_helpers.PropTypes.func.description("Called when the footer button expands the panel").signature("((e: React.MouseEvent | React.KeyboardEvent) => void)").defaultValue(() => null),
+  onFooterClose: import_ds_props_helpers.PropTypes.func.description("Called when the footer button collapses the panel. Clear openedItem here if the header is open").signature("((e: React.MouseEvent | React.KeyboardEvent) => void)").defaultValue(() => null)
+};
+const DSLeftNavigationTreePropTypesSchema = DSLeftNavigationTreePropTypes;
+const itemTypes = Object.values(import_constants.LEFT_NAVIGATION_TREE_ITEM_TYPES);
+const DSLeftNavigationTreeItemPropTypes = {
+  dsId: import_ds_props_helpers.PropTypes.string.description("Unique identifier of the item").isRequired,
+  type: import_ds_props_helpers.PropTypes.oneOf(itemTypes).description("Item type: leaf, parent, section or separator").isRequired,
+  CollapsedComponent: import_ds_props_helpers.PropTypes.func.description(
+    "Icon rendered next to the label and alone in the collapsed rail; root items without it do not appear in the rail. Receives { item }"
+  ).signature("React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>"),
+  itemOpts: import_ds_props_helpers.PropTypes.object.description("Item options")
+};
+const DSLeftNavigationTreeItemOptsPropTypes = {
+  label: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.node]).description(
+    "Visible label and accessible name of the item. Type-ahead only matches labels passed as strings"
+  ),
+  items: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description("Children of a parent or a section"),
+  isOpened: import_ds_props_helpers.PropTypes.bool.description(
+    "Controlled open state of a parent. When defined, the component only requests changes through onItemOpenedChange. Keep it defined (or undefined) for the whole life of the item"
+  ),
+  startOpened: import_ds_props_helpers.PropTypes.bool.description("Open state of an uncontrolled parent until the user opens or closes it"),
+  selectable: import_ds_props_helpers.PropTypes.bool.description("Whether the leaf can become the current page").defaultValue(true),
+  labelOverflow: import_ds_props_helpers.PropTypes.oneOf(["wrap", "wrapAll"]).description("Overrides the component labelOverflow"),
+  RightComponent: import_ds_props_helpers.PropTypes.func.description(
+    "Non-interactive content after the label, exposed as the item description, so it must contain text (give an icon-only badge a visually hidden text). Receives { item }"
+  ).signature("React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>")
+};
+const LeftNavigationTreeItem = () => null;
+LeftNavigationTreeItem.displayName = "LeftNavigationTreeItem";
+const DSLeftNavigationTreeItemSchema = (0, import_ds_props_helpers.describe)(LeftNavigationTreeItem);
+DSLeftNavigationTreeItemSchema.propTypes = DSLeftNavigationTreeItemPropTypes;
+const LeftNavigationTreeItemOpts = () => null;
+LeftNavigationTreeItemOpts.displayName = "LeftNavigationTreeItemOpts";
+const DSLeftNavigationTreeItemOptsSchema = (0, import_ds_props_helpers.describe)(LeftNavigationTreeItemOpts);
+DSLeftNavigationTreeItemOptsSchema.propTypes = DSLeftNavigationTreeItemOptsPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  describe,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport {\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_ITEM_TYPES,\n  LEFT_NAVIGATION_TREE_SLOTS,\n} from './constants/index.js';\nimport type { LEFT_NAVIGATION_TREE_REGION_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated.js';\n\nexport declare namespace DSLeftNavigationTreeT {\n  export type ItemType = (typeof LEFT_NAVIGATION_TREE_ITEM_TYPES)[keyof typeof LEFT_NAVIGATION_TREE_ITEM_TYPES];\n\n  export type LabelOverflowT = 'wrap' | 'wrapAll';\n\n  export type InteractionEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;\n\n  export interface ItemComponentProps {\n    item: Item;\n  }\n\n  export interface ItemOpts {\n    label?: string | JSX.Element;\n    items?: readonly Item[];\n    isOpened?: boolean;\n    startOpened?: boolean;\n    selectable?: boolean;\n    labelOverflow?: LabelOverflowT;\n    RightComponent?: React.ComponentType<ItemComponentProps>;\n  }\n\n  export interface Item {\n    dsId: string;\n    type: ItemType;\n    CollapsedComponent?: React.ComponentType<ItemComponentProps> | null;\n    itemOpts?: ItemOpts;\n  }\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    items: readonly Item[];\n    expanded: boolean;\n    expandedWidth: string;\n    labelOverflow: LabelOverflowT;\n    footerLabel: React.ReactNode;\n    disableDefaultSelection: boolean;\n    openedItem: string | null;\n    onItemClick: (item: Item, e: InteractionEvent) => void;\n    onItemOpenedChange: (item: Item, nextIsOpened: boolean, e: InteractionEvent) => void;\n    onSelectedChange: (id: string) => void;\n    onFocusChange: (id: string) => void;\n    onFooterExpand: (e: InteractionEvent) => void;\n    onFooterClose: (e: InteractionEvent) => void;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSLeftNavigationTreeName,\n    typeof LEFT_NAVIGATION_TREE_SLOTS\n  > {\n    selectedItem?: string | null;\n    selectedParent?: string;\n    HeaderComponent?: Item;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface ItemSlotArguments {\n    item: Item;\n    level: number;\n    isOpen: boolean;\n    isCurrent: boolean;\n  }\n\n  export type SlotFunctionArguments = {\n    dsLeftnavigationtreeRoot: () => object;\n    dsLeftnavigationtreeTree: () => object;\n    dsLeftnavigationtreeItem: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemRow: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemLabel: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeLeftContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeCollapsedContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeRightContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeArrowContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeGroup: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeSectionContainer: () => object;\n    dsLeftnavigationtreeSectionLabel: () => object;\n    dsLeftnavigationtreeItemSeparator: () => object;\n    dsLeftnavigationtreeHeaderDisclosure: () => object;\n    dsLeftnavigationtreeFooterMenu: () => object;\n    dsLeftnavigationtreeFooterLabel: () => object;\n    dsLeftnavigationtreeFooterSeparator: () => object;\n    dsLeftnavigationtreeFooterMenuCollapse: () => object;\n  };\n\n  export type FocusRegion =\n    (typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES)[keyof typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES];\n\n  export type InternalAtoms = {\n    focusRegion: FocusRegion;\n    focusedItemId: string | null;\n    toggles: Record<string, boolean>;\n    internalSelectedItem: string | null;\n  };\n\n  export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n\n  export type Selectors = Record<string, never>;\n  export type Reducers = Record<string, never>;\n  export type InternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n}\n\nconst noop = () => null;\n\nexport const defaultProps: DSLeftNavigationTreeT.DefaultProps = {\n  items: [],\n  expanded: false,\n  expandedWidth: '240px',\n  labelOverflow: 'wrap',\n  footerLabel: '',\n  disableDefaultSelection: false,\n  openedItem: null,\n  onItemClick: noop,\n  onItemOpenedChange: noop,\n  onSelectedChange: noop,\n  onFocusChange: noop,\n  onFooterExpand: noop,\n  onFooterClose: noop,\n};\n\nexport const DSLeftNavigationTreePropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Props> = {\n  ...getPropsPerSlotPropTypes(DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description(\n      'The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached',\n    )\n    .defaultValue([]),\n  expanded: PropTypes.bool\n    .description('Whether the panel is expanded or collapsed to the icon-only rail')\n    .defaultValue(false),\n  expandedWidth: PropTypes.string.description('Width of the panel when expanded').defaultValue('240px'),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('How labels wrap').defaultValue('wrap'),\n  footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string])\n    .description('Text shown in the footer next to the collapse button')\n    .defaultValue(''),\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description(\n    'Id of the current page, exposed as aria-current=\"page\" (aria-selected is never set). null means no current page; undefined lets the component track it',\n  ),\n  selectedParent: PropTypes.string.description(\n    'Id of the item that shows the selected-parent indicator. When undefined, every ancestor of the current page shows it',\n  ),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether opening a parent should only expand it, without making its first page the current page')\n    .defaultValue(false),\n  HeaderComponent: PropTypes.object.description(\n    'Item rendered as the header disclosure button above the tree. While it is open, pass its content as items (selecting its first item is up to you), and clear openedItem when the panel collapses so the rail shows your root items. Only dsId, label, CollapsedComponent, RightComponent and labelOverflow are used',\n  ),\n  openedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])])\n    .description('Id of the header item when the header is open. Other ids are ignored')\n    .defaultValue(null),\n  onItemClick: PropTypes.func\n    .description(\n      'Called when an item or the header is activated with click, Enter or Space. In the collapsed rail, expand the panel from here when the item is a parent. After a page activation, move focus to your content if needed; after a parent activation, leave focus on the parent',\n    )\n    .signature('((item: DSLeftNavigationTreeT.Item, e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onItemOpenedChange: PropTypes.func\n    .description('Called when a parent requests to open or close')\n    .signature(\n      '((item: DSLeftNavigationTreeT.Item, nextIsOpened: boolean, e: React.MouseEvent | React.KeyboardEvent) => void)',\n    )\n    .defaultValue(() => null),\n  onSelectedChange: PropTypes.func\n    .description('Called with the id of the item that becomes the current page')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('Called with the id of the item that receives focus')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFooterExpand: PropTypes.func\n    .description('Called when the footer button expands the panel')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onFooterClose: PropTypes.func\n    .description('Called when the footer button collapses the panel. Clear openedItem here if the header is open')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n};\n\nexport const DSLeftNavigationTreePropTypesSchema =\n  DSLeftNavigationTreePropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Props>;\n\nconst itemTypes = Object.values(LEFT_NAVIGATION_TREE_ITEM_TYPES);\n\nexport const DSLeftNavigationTreeItemPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Item> = {\n  dsId: PropTypes.string.description('Unique identifier of the item').isRequired,\n  type: PropTypes.oneOf(itemTypes).description('Item type: leaf, parent, section or separator').isRequired,\n  CollapsedComponent: PropTypes.func\n    .description(\n      'Icon rendered next to the label and alone in the collapsed rail; root items without it do not appear in the rail. Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const DSLeftNavigationTreeItemOptsPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.ItemOpts> = {\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(\n    'Visible label and accessible name of the item. Type-ahead only matches labels passed as strings',\n  ),\n  items: PropTypes.arrayOf(PropTypes.object).description('Children of a parent or a section'),\n  isOpened: PropTypes.bool.description(\n    'Controlled open state of a parent. When defined, the component only requests changes through onItemOpenedChange. Keep it defined (or undefined) for the whole life of the item',\n  ),\n  startOpened: PropTypes.bool.description('Open state of an uncontrolled parent until the user opens or closes it'),\n  selectable: PropTypes.bool.description('Whether the leaf can become the current page').defaultValue(true),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('Overrides the component labelOverflow'),\n  RightComponent: PropTypes.func\n    .description(\n      'Non-interactive content after the label, exposed as the item description, so it must contain text (give an icon-only badge a visually hidden text). Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n};\n\nconst LeftNavigationTreeItem = () => null;\nLeftNavigationTreeItem.displayName = 'LeftNavigationTreeItem';\nexport const DSLeftNavigationTreeItemSchema = describe(LeftNavigationTreeItem);\nDSLeftNavigationTreeItemSchema.propTypes =\n  DSLeftNavigationTreeItemPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Item>;\n\nconst LeftNavigationTreeItemOpts = () => null;\nLeftNavigationTreeItemOpts.displayName = 'LeftNavigationTreeItemOpts';\nexport const DSLeftNavigationTreeItemOptsSchema = describe(LeftNavigationTreeItemOpts);\nDSLeftNavigationTreeItemOptsSchema.propTypes =\n  DSLeftNavigationTreeItemOptsPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.ItemOpts>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/typescript-testing/DSLeftNavigationTreeNamespace.js

@@ -0,0 +1,172 @@
+"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 __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 React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import__ = require("../index.js");
+const Icon = (_props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true" });
+const Badge = ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.dsId });
+const items = [
+  {
+    dsId: "pipeline",
+    type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF,
+    CollapsedComponent: Icon,
+    itemOpts: { label: "Pipeline" }
+  },
+  {
+    dsId: "loan",
+    type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.PARENT,
+    CollapsedComponent: Icon,
+    itemOpts: {
+      label: "Loan",
+      startOpened: true,
+      RightComponent: Badge,
+      items: [{ dsId: "borrower", type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF, itemOpts: { label: "Borrower" } }]
+    }
+  },
+  { dsId: "separator", type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.SEPARATOR },
+  {
+    dsId: "tools",
+    type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.SECTION,
+    itemOpts: {
+      label: "Tools",
+      items: [
+        { dsId: "calculator", type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF, itemOpts: { label: "Calculator" } },
+        {
+          dsId: "contact-us",
+          type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF,
+          itemOpts: { label: "Contact us", selectable: false, labelOverflow: "wrapAll" }
+        }
+      ]
+    }
+  }
+];
+const controlledParent = {
+  dsId: "controlled",
+  type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.PARENT,
+  itemOpts: { label: "Controlled", isOpened: false, items: [] }
+};
+const header = {
+  dsId: "header",
+  type: import__.LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF,
+  itemOpts: { label: "Loan summary" }
+};
+const testRequiredProps = {};
+const testOptionalProps = {
+  selectedItem: "borrower",
+  selectedParent: "loan",
+  HeaderComponent: header,
+  dsLeftnavigationtreeRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  }
+};
+const testPartialDefaults = {
+  items: [...items, controlledParent],
+  expanded: true
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  items,
+  expanded: false,
+  expandedWidth: "240px",
+  labelOverflow: "wrapAll",
+  footerLabel: "v1.0",
+  disableDefaultSelection: false,
+  openedItem: null,
+  onItemClick: (item, e) => {
+  },
+  onItemOpenedChange: (item, nextIsOpened, e) => {
+  },
+  onSelectedChange: (id) => {
+  },
+  onFocusChange: (id) => {
+  },
+  onFooterExpand: (e) => {
+  },
+  onFooterClose: (e) => {
+  }
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const itemSlot = ({ item, isCurrent }) => ({
+  "data-testid": isCurrent ? `current-${item.dsId}` : item.dsId
+});
+const testExplicitDefinition = {
+  items,
+  selectedItem: null,
+  labelOverflow: "wrap",
+  onItemOpenedChange: (item, nextIsOpened) => {
+  },
+  dsLeftnavigationtreeItem: itemSlot
+};
+const testInferedTypeCompatibility = {
+  items,
+  expanded: true,
+  footerLabel: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "v1.0" })
+};
+const testDefinitionAsConst = {
+  items,
+  labelOverflow: "wrapAll",
+  openedItem: "header"
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSLeftNavigationTree, { ...testExplicitDefinition }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.DSLeftNavigationTree,
+    {
+      items,
+      expanded: true,
+      selectedItem: "borrower",
+      HeaderComponent: header,
+      openedItem: null,
+      onItemClick: (item, e) => {
+      },
+      onSelectedChange: (id) => {
+      },
+      "aria-label": "Loan"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSLeftNavigationTree, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSLeftNavigationTree, { ...testDefinitionAsConst })
+] });
+//# sourceMappingURL=DSLeftNavigationTreeNamespace.js.map

package/dist/cjs/typescript-testing/DSLeftNavigationTreeNamespace.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/DSLeftNavigationTreeNamespace.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSLeftNavigationTree, LEFT_NAVIGATION_TREE_ITEM_TYPES, type DSLeftNavigationTreeT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSLeftNavigationTreeT.Props;\ntype ComponentPropsInternals = DSLeftNavigationTreeT.InternalProps;\ntype ComponentPropsDefaultProps = DSLeftNavigationTreeT.DefaultProps;\ntype ComponentPropsOptionalProps = DSLeftNavigationTreeT.OptionalProps;\ntype ComponentPropsRequiredProps = DSLeftNavigationTreeT.RequiredProps;\n\nconst Icon = (_props: DSLeftNavigationTreeT.ItemComponentProps) => <svg aria-hidden=\"true\" />;\nconst Badge = ({ item }: DSLeftNavigationTreeT.ItemComponentProps) => <span>{item.dsId}</span>;\n\nconst items: DSLeftNavigationTreeT.Item[] = [\n  {\n    dsId: 'pipeline',\n    type: LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF,\n    CollapsedComponent: Icon,\n    itemOpts: { label: 'Pipeline' },\n  },\n  {\n    dsId: 'loan',\n    type: LEFT_NAVIGATION_TREE_ITEM_TYPES.PARENT,\n    CollapsedComponent: Icon,\n    itemOpts: {\n      label: 'Loan',\n      startOpened: true,\n      RightComponent: Badge,\n      items: [{ dsId: 'borrower', type: LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF, itemOpts: { label: 'Borrower' } }],\n    },\n  },\n  { dsId: 'separator', type: LEFT_NAVIGATION_TREE_ITEM_TYPES.SEPARATOR },\n  {\n    dsId: 'tools',\n    type: LEFT_NAVIGATION_TREE_ITEM_TYPES.SECTION,\n    itemOpts: {\n      label: 'Tools',\n      items: [\n        { dsId: 'calculator', type: LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF, itemOpts: { label: 'Calculator' } },\n        {\n          dsId: 'contact-us',\n          type: LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF,\n          itemOpts: { label: 'Contact us', selectable: false, labelOverflow: 'wrapAll' },\n        },\n      ],\n    },\n  },\n];\n\nconst controlledParent = {\n  dsId: 'controlled',\n  type: LEFT_NAVIGATION_TREE_ITEM_TYPES.PARENT,\n  itemOpts: { label: 'Controlled', isOpened: false, items: [] },\n} as const;\n\nconst header = {\n  dsId: 'header',\n  type: LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF,\n  itemOpts: { label: 'Loan summary' },\n} as DSLeftNavigationTreeT.Item;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  selectedItem: 'borrower',\n  selectedParent: 'loan',\n  HeaderComponent: header,\n  dsLeftnavigationtreeRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  items: [...items, controlledParent],\n  expanded: true,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  items,\n  expanded: false,\n  expandedWidth: '240px',\n  labelOverflow: 'wrapAll',\n  footerLabel: 'v1.0',\n  disableDefaultSelection: false,\n  openedItem: null,\n  onItemClick: (item, e) => {},\n  onItemOpenedChange: (item, nextIsOpened, e) => {},\n  onSelectedChange: (id) => {},\n  onFocusChange: (id) => {},\n  onFooterExpand: (e) => {},\n  onFooterClose: (e) => {},\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// per-node slot functions receive { item, level, isOpen, isCurrent }; consumers type them through SlotFunctionArguments\nconst itemSlot: DSLeftNavigationTreeT.SlotFunctionArguments['dsLeftnavigationtreeItem'] = ({ item, isCurrent }) => ({\n  'data-testid': isCurrent ? `current-${item.dsId}` : item.dsId,\n});\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  items,\n  selectedItem: null,\n  labelOverflow: 'wrap',\n  onItemOpenedChange: (item, nextIsOpened) => {},\n  dsLeftnavigationtreeItem: itemSlot,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  items,\n  expanded: true,\n  footerLabel: <span>v1.0</span>,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  items,\n  labelOverflow: 'wrapAll',\n  openedItem: 'header',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with spread operator */}\n    <DSLeftNavigationTree {...testExplicitDefinition} />\n    {/* works with inline values */}\n    <DSLeftNavigationTree\n      items={items}\n      expanded\n      selectedItem=\"borrower\"\n      HeaderComponent={header}\n      openedItem={null}\n      onItemClick={(item, e) => {}}\n      onSelectedChange={(id) => {}}\n      aria-label=\"Loan\"\n    />\n    <DSLeftNavigationTree {...testInferedTypeCompatibility} />\n    <DSLeftNavigationTree {...testDefinitionAsConst} />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACU4C;AATnE,eAAkG;AASlG,MAAM,OAAO,CAAC,WAAqD,4CAAC,SAAI,eAAY,QAAO;AAC3F,MAAM,QAAQ,CAAC,EAAE,KAAK,MAAgD,4CAAC,UAAM,eAAK,MAAK;AAEvF,MAAM,QAAsC;AAAA,EAC1C;AAAA,IACE,MAAM;AAAA,IACN,MAAM,yCAAgC;AAAA,IACtC,oBAAoB;AAAA,IACpB,UAAU,EAAE,OAAO,WAAW;AAAA,EAChC;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM,yCAAgC;AAAA,IACtC,oBAAoB;AAAA,IACpB,UAAU;AAAA,MACR,OAAO;AAAA,MACP,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,OAAO,CAAC,EAAE,MAAM,YAAY,MAAM,yCAAgC,MAAM,UAAU,EAAE,OAAO,WAAW,EAAE,CAAC;AAAA,IAC3G;AAAA,EACF;AAAA,EACA,EAAE,MAAM,aAAa,MAAM,yCAAgC,UAAU;AAAA,EACrE;AAAA,IACE,MAAM;AAAA,IACN,MAAM,yCAAgC;AAAA,IACtC,UAAU;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,QACL,EAAE,MAAM,cAAc,MAAM,yCAAgC,MAAM,UAAU,EAAE,OAAO,aAAa,EAAE;AAAA,QACpG;AAAA,UACE,MAAM;AAAA,UACN,MAAM,yCAAgC;AAAA,UACtC,UAAU,EAAE,OAAO,cAAc,YAAY,OAAO,eAAe,UAAU;AAAA,QAC/E;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB;AAAA,EACvB,MAAM;AAAA,EACN,MAAM,yCAAgC;AAAA,EACtC,UAAU,EAAE,OAAO,cAAc,UAAU,OAAO,OAAO,CAAC,EAAE;AAC9D;AAEA,MAAM,SAAS;AAAA,EACb,MAAM;AAAA,EACN,MAAM,yCAAgC;AAAA,EACtC,UAAU,EAAE,OAAO,eAAe;AACpC;AAEA,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD;AAAA,EACrD,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,0BAA0B;AAAA,IACxB,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAIA,MAAM,sBAA2D;AAAA,EAC/D,OAAO,CAAC,GAAG,OAAO,gBAAgB;AAAA,EAClC,UAAU;AACZ;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE;AAAA,EACA,UAAU;AAAA,EACV,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AAAA,EACb,yBAAyB;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa,CAAC,MAAM,MAAM;AAAA,EAAC;AAAA,EAC3B,oBAAoB,CAAC,MAAM,cAAc,MAAM;AAAA,EAAC;AAAA,EAChD,kBAAkB,CAAC,OAAO;AAAA,EAAC;AAAA,EAC3B,eAAe,CAAC,OAAO;AAAA,EAAC;AAAA,EACxB,gBAAgB,CAAC,MAAM;AAAA,EAAC;AAAA,EACxB,eAAe,CAAC,MAAM;AAAA,EAAC;AACzB;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,WAAoF,CAAC,EAAE,MAAM,UAAU,OAAO;AAAA,EAClH,eAAe,YAAY,WAAW,KAAK,IAAI,KAAK,KAAK;AAC3D;AAGA,MAAM,yBAA+C;AAAA,EACnD;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,oBAAoB,CAAC,MAAM,iBAAiB;AAAA,EAAC;AAAA,EAC7C,0BAA0B;AAC5B;AAGA,MAAM,+BAA+B;AAAA,EACnC;AAAA,EACA,UAAU;AAAA,EACV,aAAa,4CAAC,UAAK,kBAAI;AACzB;AAEA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf,YAAY;AACd;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,iCAAsB,GAAG,wBAAwB;AAAA,EAElD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAQ;AAAA,MACR,cAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,aAAa,CAAC,MAAM,MAAM;AAAA,MAAC;AAAA,MAC3B,kBAAkB,CAAC,OAAO;AAAA,MAAC;AAAA,MAC3B,cAAW;AAAA;AAAA,EACb;AAAA,EACA,4CAAC,iCAAsB,GAAG,8BAA8B;AAAA,EACxD,4CAAC,iCAAsB,GAAG,uBAAuB;AAAA,GACnD;",
+  "names": []
+}