@elliemae/ds-global-header 3.0.0-next.49 → 3.0.0-next.52

package/dist/cjs/{components → parts}/Breadcrumb/PureBreadcrumb.js

@@ -51,22 +51,42 @@ __export(PureBreadcrumb_exports, {
 module.exports = __toCommonJS(PureBreadcrumb_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_styles = require("./styles");
+var import_exported_related = require("../../exported-related");
 const PureBreadcrumb = import_react.default.memo((_a) => {
-  var _b = _a, { onClick, isSelected, length, label, hasNext, id } = _b, rest = __objRest(_b, ["onClick", "isSelected", "length", "label", "hasNext", "id"]);
-  return /* @__PURE__ */ import_react.default.createElement(import_styles.BreadcrumbItem, null, /* @__PURE__ */ import_react.default.createElement(import_styles.LabelButton, __spreadValues({
+  var _b = _a, {
     onClick,
-    "aria-selected": isSelected,
-    "data-testid": "gh-breadcrumb-btn",
+    onKeyDown,
+    isSelected,
+    length,
+    label,
+    hasNext,
     id
-  }, (0, import_ds_utilities.getDataProps)(rest)), /* @__PURE__ */ import_react.default.createElement(import_styles.Label, {
+  } = _b, rest = __objRest(_b, [
+    "onClick",
+    "onKeyDown",
+    "isSelected",
+    "length",
+    "label",
+    "hasNext",
+    "id"
+  ]);
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledBreadcrumbItem, {
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.ITEM
+  }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLink, __spreadValues({
+    onClick,
+    onKeyDown,
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK,
+    "aria-current": isSelected,
+    id,
+    tabIndex: "0"
+  }, rest), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
     isSelected: !!isSelected,
-    isOnlyItem: length === 1
-  }, label)), hasNext && /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallRight, {
+    isOnlyItem: length === 1,
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK_LABEL
+  }, label)), hasNext && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledChevron, {
     size: "m",
-    fill: "#FFF"
+    "aria-hidden": true
   }));
 });
 //# sourceMappingURL=PureBreadcrumb.js.map

package/dist/cjs/parts/Breadcrumb/PureBreadcrumb.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Breadcrumb/PureBreadcrumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { StyledBreadcrumbItem, StyledLink, StyledLabel, StyledChevron } from './styles';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\n\nexport const PureBreadcrumb = React.memo(\n  ({\n    onClick,\n    onKeyDown,\n    isSelected,\n    length,\n    label,\n    hasNext,\n    id,\n    ...rest\n  }: DSGlobalHeaderInternalsT.BreadcrumbItem) => (\n    <StyledBreadcrumbItem data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM}>\n      <StyledLink\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK}\n        aria-current={isSelected}\n        id={id}\n        tabIndex=\"0\"\n        {...rest}\n      >\n        <StyledLabel\n          isSelected={!!isSelected}\n          isOnlyItem={length === 1}\n          data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK_LABEL}\n        >\n          {label}\n        </StyledLabel>\n      </StyledLink>\n      {hasNext && <StyledChevron size=\"m\" aria-hidden />}\n    </StyledBreadcrumbItem>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAA6E;AAC7E,8BAAyC;AAGlC,MAAM,iBAAiB,qBAAM,KAClC,CAAC,OAS2C;AAT3C,eACC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAPD,IAQI,iBARJ,IAQI;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,4DAAC;AAAA,IAAqB,eAAa,iDAAyB,WAAW;AAAA,KACrE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAa,iDAAyB,WAAW;AAAA,IACjD,gBAAc;AAAA,IACd;AAAA,IACA,UAAS;AAAA,KACL,OAEJ,mDAAC;AAAA,IACC,YAAY,CAAC,CAAC;AAAA,IACd,YAAY,WAAW;AAAA,IACvB,eAAa,iDAAyB,WAAW;AAAA,KAEhD,KACH,CACF,GACC,WAAW,mDAAC;AAAA,IAAc,MAAK;AAAA,IAAI,eAAW;AAAA,GAAC,CAClD;AAAA,CAEJ;",
+  "names": []
+}

package/dist/cjs/{components → parts}/Breadcrumb/styles.js

@@ -20,27 +20,51 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  BreadcrumbItem: () => BreadcrumbItem,
-  Label: () => Label,
-  LabelButton: () => LabelButton,
-  Pipe: () => Pipe
+  StyledBreadcrumbContainer: () => StyledBreadcrumbContainer,
+  StyledBreadcrumbItem: () => StyledBreadcrumbItem,
+  StyledBreadcrumbList: () => StyledBreadcrumbList,
+  StyledChevron: () => StyledChevron,
+  StyledLabel: () => StyledLabel,
+  StyledLink: () => StyledLink,
+  StyledPipe: () => StyledPipe
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-const Pipe = import_styled_components.default.span`
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_theming = require("../../exported-related/theming");
+const StyledBreadcrumbContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.BREADCRUMB.CONTAINER })``;
+const StyledBreadcrumbList = (0, import_ds_system.styled)("ul", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.BREADCRUMB.LIST })`
+  display: grid;
+  grid-auto-flow: column;
+  min-width: fit-content;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+`;
+const StyledPipe = (0, import_ds_system.styled)("span", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.BREADCRUMB.PIPE })`
   margin: 0 7px 0 0;
-  border-left: ${({ showIconOnly }) => showIconOnly ? "none" : "1px solid #fff"};
+  border-left: ${({ theme, showIconOnly }) => showIconOnly ? "none" : `1px solid ${theme.colors.neutral["000"]}`};
   height: 20px;
 `;
-const BreadcrumbItem = import_styled_components.default.div`
+const StyledChevron = (0, import_ds_system.styled)(import_ds_icons.ChevronSmallRight, {
+  name: import_theming.COMPONENT_NAME,
+  slot: import_theming.slots.BREADCRUMB.CHEVRON
+})`
+  fill: ${({ theme }) => theme.colors.neutral["000"]};
+`;
+const StyledBreadcrumbItem = (0, import_ds_system.styled)("li", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.BREADCRUMB.ITEM })`
   display: flex;
   align-items: center;
-  height: 100%;
+  height: 40px;
 `;
-const LabelButton = import_styled_components.default.button`
+const StyledLink = (0, import_ds_system.styled)("a", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.BREADCRUMB.ITEM_LINK })`
   width: fit-content;
-  height: 100%;
+  height: 40px;
+  display: grid;
+  place-items: center;
   margin: 0;
   padding: 0;
   border: 1px solid transparent;
@@ -62,12 +86,13 @@ const LabelButton = import_styled_components.default.button`
     }
   }
 `;
-const Label = import_styled_components.default.p`
+const StyledLabel = (0, import_ds_system.styled)("span", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.BREADCRUMB.ITEM_LINK_LABEL })`
   color: ${({ theme }) => theme.colors.neutral["000"]};
   ${({ theme, isSelected }) => `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral["000"] : "transparent"}`};
   font-size: 16px;
+  line-height: 1;
   text-transform: uppercase;
-  border-bottom: ${({ isSelected, isOnlyItem }) => `2px solid ${isSelected && !isOnlyItem ? "#FFF" : "transparent"}`};
+  border-bottom: ${({ theme, isSelected, isOnlyItem }) => `2px solid ${isSelected && !isOnlyItem ? theme.colors.neutral["000"] : "transparent"}`};
   margin: 3px 5px 0 5px;
   :hover {
     ${({ theme }) => `-webkit-text-stroke: 0.4px ${theme.colors.neutral["000"]}`};

package/dist/cjs/parts/Breadcrumb/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Breadcrumb/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { COMPONENT_NAME, slots } from '../../exported-related/theming';\n\ninterface PipeT {\n  showIconOnly: boolean;\n}\n\ninterface ChevronT {\n  size: string;\n}\n\ninterface LabelT {\n  isSelected: boolean;\n  isOnlyItem: boolean;\n}\n\nexport const StyledBreadcrumbContainer = styled(Grid, { name: COMPONENT_NAME, slot: slots.BREADCRUMB.CONTAINER })``;\n\nexport const StyledBreadcrumbList = styled('ul', { name: COMPONENT_NAME, slot: slots.BREADCRUMB.LIST })`\n  display: grid;\n  grid-auto-flow: column;\n  min-width: fit-content;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  height: 100%;\n`;\n\nexport const StyledPipe = styled('span', { name: COMPONENT_NAME, slot: slots.BREADCRUMB.PIPE })<PipeT>`\n  margin: 0 7px 0 0;\n  border-left: ${({ theme, showIconOnly }) => (showIconOnly ? 'none' : `1px solid ${theme.colors.neutral['000']}`)};\n  height: 20px;\n`;\n\nexport const StyledChevron = styled(ChevronSmallRight, {\n  name: COMPONENT_NAME,\n  slot: slots.BREADCRUMB.CHEVRON,\n})<ChevronT>`\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledBreadcrumbItem = styled('li', { name: COMPONENT_NAME, slot: slots.BREADCRUMB.ITEM })`\n  display: flex;\n  align-items: center;\n  height: 40px;\n`;\n\nexport const StyledLink = styled('a', { name: COMPONENT_NAME, slot: slots.BREADCRUMB.ITEM_LINK })`\n  width: fit-content;\n  height: 40px;\n  display: grid;\n  place-items: center;\n  margin: 0;\n  padding: 0;\n  border: 1px solid transparent;\n  background-color: transparent;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: -5px;\n      width: calc(100% + 10px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n\nexport const StyledLabel = styled('span', { name: COMPONENT_NAME, slot: slots.BREADCRUMB.ITEM_LINK_LABEL })<LabelT>`\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  ${({ theme, isSelected }) =>\n    `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral['000'] : 'transparent'}`};\n  font-size: 16px;\n  line-height: 1;\n  text-transform: uppercase;\n  border-bottom: ${({ theme, isSelected, isOnlyItem }) =>\n    `2px solid ${isSelected && !isOnlyItem ? theme.colors.neutral['000'] : 'transparent'}`};\n  margin: 3px 5px 0 5px;\n  :hover {\n    ${({ theme }) => `-webkit-text-stroke: 0.4px ${theme.colors.neutral['000']}`};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,sBAAkC;AAClC,qBAAsC;AAe/B,MAAM,4BAA4B,6BAAO,qBAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,WAAW,UAAU,CAAC;AAEzG,MAAM,uBAAuB,6BAAO,MAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,WAAW,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,aAAa,6BAAO,QAAQ,EAAE,MAAM,+BAAgB,MAAM,qBAAM,WAAW,KAAK,CAAC;AAAA;AAAA,iBAE7E,CAAC,EAAE,OAAO,mBAAoB,eAAe,SAAS,aAAa,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIlG,MAAM,gBAAgB,6BAAO,mCAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,qBAAM,WAAW;AACzB,CAAC;AAAA,UACS,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvC,MAAM,uBAAuB,6BAAO,MAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,WAAW,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAM/F,MAAM,aAAa,6BAAO,KAAK,EAAE,MAAM,+BAAgB,MAAM,qBAAM,WAAW,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAqBtE,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,cAAc,6BAAO,QAAQ,EAAE,MAAM,+BAAgB,MAAM,qBAAM,WAAW,gBAAgB,CAAC;AAAA,WAC/F,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC3C,CAAC,EAAE,OAAO,iBACV,+BAA+B,aAAa,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA,mBAI3D,CAAC,EAAE,OAAO,YAAY,iBACrC,aAAa,cAAc,CAAC,aAAa,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA,MAGrE,CAAC,EAAE,YAAY,8BAA8B,MAAM,OAAO,QAAQ;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js

@@ -0,0 +1,65 @@
+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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useGlobalHeaderBreadcrumb_exports = {};
+__export(useGlobalHeaderBreadcrumb_exports, {
+  useGlobalHeaderBreadcrumb: () => useGlobalHeaderBreadcrumb
+});
+module.exports = __toCommonJS(useGlobalHeaderBreadcrumb_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext");
+const useGlobalHeaderBreadcrumb = () => {
+  const {
+    props: { breadcrumb },
+    instanceUID,
+    showIconOnly,
+    setShowIconOnly
+  } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
+  const breakpointRef = (0, import_react.useRef)(null);
+  const flexRegionRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const evaluateShowIconOnly = () => {
+      if (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) {
+        setShowIconOnly(true);
+        breakpointRef.current = window.innerWidth;
+      } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {
+        setShowIconOnly(false);
+        breakpointRef.current = null;
+      }
+    };
+    evaluateShowIconOnly();
+    window.addEventListener("resize", evaluateShowIconOnly);
+    return () => window.removeEventListener("resize", evaluateShowIconOnly);
+  }, [breakpointRef, flexRegionRef, setShowIconOnly]);
+  const handleOnKeyDown = (0, import_react.useCallback)((onClick) => (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      onClick();
+    }
+  }, []);
+  return {
+    breadcrumb,
+    showIconOnly,
+    flexRegionRef,
+    handleOnKeyDown,
+    instanceUID
+  };
+};
+//# sourceMappingURL=useGlobalHeaderBreadcrumb.js.map

package/dist/cjs/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n  breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n  showIconOnly: boolean;\n  flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n  handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n  instanceUID: string;\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n  const {\n    props: { breadcrumb },\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n  } = useContext(DSGlobalHeaderContext);\n\n  const breakpointRef = useRef<number | null>(null);\n  const flexRegionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const evaluateShowIconOnly = () => {\n      if (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) {\n        setShowIconOnly(true);\n        breakpointRef.current = window.innerWidth;\n      } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n        setShowIconOnly(false);\n        breakpointRef.current = null;\n      }\n    };\n\n    evaluateShowIconOnly();\n\n    window.addEventListener('resize', evaluateShowIconOnly);\n    return () => window.removeEventListener('resize', evaluateShowIconOnly);\n  }, [breakpointRef, flexRegionRef, setShowIconOnly]);\n\n  const handleOnKeyDown = useCallback(\n    (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n      if (e.key === ' ' || e.key === 'Enter') {\n        onClick();\n      }\n    },\n    [],\n  );\n\n  return {\n    breadcrumb,\n    showIconOnly,\n    flexRegionRef,\n    handleOnKeyDown,\n    instanceUID,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkE;AAClE,mCAAsC;AAW/B,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kDAAqB;AAEpC,QAAM,gBAAgB,yBAAsB,IAAI;AAChD,QAAM,gBAAgB,yBAAuB,IAAI;AAEjD,8BAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UAAI,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,SAAS;AAC7F,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,eAAe,CAAC;AAElD,QAAM,kBAAkB,8BACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,QAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,cAAQ;AAAA,IACV;AAAA,EACF,GACA,CAAC,CACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/{config/useGetPropsWithDefaults.js → parts/GlobalHeaderContainer.js}

@@ -32,16 +32,17 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useGetPropsWithDefaults_exports = {};
-__export(useGetPropsWithDefaults_exports, {
-  useGetPropsWithDefaults: () => useGetPropsWithDefaults
+var GlobalHeaderContainer_exports = {};
+__export(GlobalHeaderContainer_exports, {
+  GlobalHeaderContainer: () => GlobalHeaderContainer
 });
-module.exports = __toCommonJS(useGetPropsWithDefaults_exports);
+module.exports = __toCommonJS(GlobalHeaderContainer_exports);
 var React = __toESM(require("react"));
-var import_react = require("react");
-var import_defaultProps = require("../defaultProps");
-const useGetPropsWithDefaults = (props) => {
-  const { toolbar, breadcrumb, Logo, LogoWithBrand } = props;
-  return (0, import_react.useMemo)(() => __spreadValues(__spreadValues({}, import_defaultProps.defaultProps), props), [toolbar, breadcrumb, Logo, LogoWithBrand]);
-};
-//# sourceMappingURL=useGetPropsWithDefaults.js.map
+var import_react = __toESM(require("react"));
+var import_styles = require("./styles");
+const GlobalHeaderContainer = ({ xstyledAttrs, globalAttrs, children }) => /* @__PURE__ */ import_react.default.createElement(import_styles.Container, __spreadValues(__spreadValues({
+  forwardedAs: "header",
+  "data-testid": "ds-global-header",
+  cols: ["auto", "1fr", "auto"]
+}, globalAttrs), xstyledAttrs), children);
+//# sourceMappingURL=GlobalHeaderContainer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/GlobalHeaderContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { Container } from './styles';\n\ninterface GlobalHeaderContainerT {\n  xstyledAttrs: Record<string, unknown>;\n  globalAttrs: Record<string, unknown>;\n  children: React.ReactNode;\n}\n\nexport const GlobalHeaderContainer = ({ xstyledAttrs, globalAttrs, children }: GlobalHeaderContainerT): JSX.Element => (\n  <Container\n    forwardedAs=\"header\"\n    data-testid=\"ds-global-header\"\n    cols={['auto', '1fr', 'auto']}\n    {...globalAttrs}\n    {...xstyledAttrs}\n  >\n    {children}\n  </Container>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAA0B;AAQnB,MAAM,wBAAwB,CAAC,EAAE,cAAc,aAAa,eACjE,mDAAC;AAAA,EACC,aAAY;AAAA,EACZ,eAAY;AAAA,EACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,GACxB,cACA,eAEH,QACH;",
+  "names": []
+}

package/dist/cjs/{components/Title/GlobalHeaderTitle.js → parts/Logo/GlobalHeaderLogo.js}

@@ -18,24 +18,26 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var GlobalHeaderTitle_exports = {};
-__export(GlobalHeaderTitle_exports, {
-  GlobalHeaderTitle: () => GlobalHeaderTitle
+var GlobalHeaderLogo_exports = {};
+__export(GlobalHeaderLogo_exports, {
+  GlobalHeaderLogo: () => GlobalHeaderLogo
 });
-module.exports = __toCommonJS(GlobalHeaderTitle_exports);
+module.exports = __toCommonJS(GlobalHeaderLogo_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_ds_grid = require("@elliemae/ds-grid");
-var import_GlobalHeaderContext = require("../../GlobalHeaderContext");
-const GlobalHeaderTitle = () => {
+var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext");
+var import_styles = require("./styles");
+var import_exported_related = require("../../exported-related");
+const GlobalHeaderLogo = () => {
   const {
     props: { Logo, LogoWithBrand },
     showIconOnly
-  } = (0, import_react.useContext)(import_GlobalHeaderContext.GlobalHeaderContext);
-  return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLogoContainer, {
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.LOGO.CONTAINER,
     alignItems: "center",
     pr: showIconOnly ? "0px" : "36px",
     cols: showIconOnly ? ["auto"] : ["auto", "1fr"]
   }, Logo && showIconOnly && /* @__PURE__ */ import_react.default.createElement(Logo, null), LogoWithBrand && !showIconOnly && /* @__PURE__ */ import_react.default.createElement(LogoWithBrand, null));
 };
-//# sourceMappingURL=GlobalHeaderTitle.js.map
+//# sourceMappingURL=GlobalHeaderLogo.js.map

package/dist/cjs/parts/Logo/GlobalHeaderLogo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Logo/GlobalHeaderLogo.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport { StyledLogoContainer } from './styles';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n  const {\n    props: { Logo, LogoWithBrand },\n    showIconOnly,\n  } = useContext(DSGlobalHeaderContext);\n\n  return (\n    <StyledLogoContainer\n      data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n      alignItems=\"center\"\n      pr={showIconOnly ? '0px' : '36px'}\n      cols={showIconOnly ? ['auto'] : ['auto', '1fr']}\n    >\n      {Logo && showIconOnly && <Logo />}\n      {LogoWithBrand && !showIconOnly && <LogoWithBrand />}\n    </StyledLogoContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,mCAAsC;AACtC,oBAAoC;AACpC,8BAAyC;AAElC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,MACE,6BAAW,kDAAqB;AAEpC,SACE,mDAAC;AAAA,IACC,eAAa,iDAAyB,KAAK;AAAA,IAC3C,YAAW;AAAA,IACX,IAAI,eAAe,QAAQ;AAAA,IAC3B,MAAM,eAAe,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,KAE7C,QAAQ,gBAAgB,mDAAC,UAAK,GAC9B,iBAAiB,CAAC,gBAAgB,mDAAC,mBAAc,CACpD;AAEJ;",
+  "names": []
+}

package/dist/cjs/{styles.js → parts/Logo/styles.js}

@@ -20,17 +20,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  Wrapper: () => Wrapper
+  StyledLogoContainer: () => StyledLogoContainer
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-const Wrapper = (0, import_styled_components.default)(import_ds_grid.GridContainer)`
-  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);
-  color: ${({ theme }) => theme.colors.neutral["000"]};
-  width: 100%;
-  height: 40px;
-  padding: 0 24px 0 12px;
-`;
+var import_theming = require("../../exported-related/theming");
+const StyledLogoContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.LOGO.CONTAINER })``;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/parts/Logo/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Logo/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { COMPONENT_NAME, slots } from '../../exported-related/theming';\n\nexport const StyledLogoContainer = styled(Grid, { name: COMPONENT_NAME, slot: slots.LOGO.CONTAINER })``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAsC;AAE/B,MAAM,sBAAsB,6BAAO,qBAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,KAAK,UAAU,CAAC;",
+  "names": []
+}

package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js

@@ -0,0 +1,160 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var GlobalHeaderToolbar_exports = {};
+__export(GlobalHeaderToolbar_exports, {
+  GlobalHeaderToolbar: () => GlobalHeaderToolbar
+});
+module.exports = __toCommonJS(GlobalHeaderToolbar_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_styles = require("./styles");
+var import_outOfTheBox = require("./outOfTheBox");
+var import_styles2 = require("../styles");
+var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext");
+var import_exported_related = require("../../exported-related");
+var import_useGlobalHeaderToolbar = require("./useGlobalHeaderToolbar");
+const GlobalHeaderToolbar = () => {
+  const {
+    props: { toolbar },
+    instanceUID,
+    globalHeaderToolbarGrid
+  } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
+  const { listRef, setRef, keyboardNavigation } = (0, import_useGlobalHeaderToolbar.useGlobalHeaderToolbar)();
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledMenubarContainer, {
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.CONTAINER
+  }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledList, {
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    gutter: "xxs",
+    cols: globalHeaderToolbarGrid,
+    role: "menubar",
+    forwardedAs: "ul",
+    onKeyDown: keyboardNavigation,
+    listRef,
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST
+  }, toolbar.map((item, index) => {
+    const _a = item, {
+      Icon,
+      type,
+      onClick,
+      onKeyPress,
+      CustomComponent,
+      label,
+      id = "",
+      componentProps = {}
+    } = _a, otherProps = __objRest(_a, [
+      "Icon",
+      "type",
+      "onClick",
+      "onKeyPress",
+      "CustomComponent",
+      "label",
+      "id",
+      "componentProps"
+    ]);
+    switch (type) {
+      case "ds-popup-menu":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.PopupMenu, __spreadValues({
+          title: label,
+          Icon,
+          onClick,
+          onKeyPress,
+          setRef: setRef(index),
+          id,
+          componentProps
+        }, otherProps)));
+      case "ds-app-picker":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.AppPicker, __spreadValues({
+          label,
+          id,
+          setRef: setRef(index),
+          componentProps
+        }, otherProps)));
+      case "ds-search-toggle":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.SearchToggle, __spreadValues({
+          id,
+          setRef: setRef(index),
+          componentProps
+        }, otherProps)));
+      case "custom":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, CustomComponent && /* @__PURE__ */ import_react.default.createElement(CustomComponent, {
+          item,
+          role: "menuitem",
+          setRef: setRef(index)
+        }));
+      default:
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_styles2.StyledButton, __spreadValues({
+          onClick,
+          title: label,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+          id,
+          role: "menuitem",
+          ref: setRef(index)
+        }, (0, import_ds_utilities.getGlobalAttributes)(otherProps)), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, {
+          size: "m"
+        })));
+    }
+  })));
+};
+//# sourceMappingURL=GlobalHeaderToolbar.js.map

package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox';\nimport { StyledButton } from '../styles';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n    globalHeaderToolbarGrid,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}>\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        forwardedAs=\"ul\"\n        onKeyDown={keyboardNavigation}\n        listRef={listRef}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n      >\n        {toolbar.map((item, index) => {\n          const {\n            Icon,\n            type,\n            onClick,\n            onKeyPress,\n            CustomComponent,\n            label,\n            id = '',\n            componentProps = {},\n            ...otherProps\n          } = item;\n\n          switch (type) {\n            case 'ds-popup-menu':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <PopupMenu\n                    title={label}\n                    Icon={Icon}\n                    onClick={onClick}\n                    onKeyPress={onKeyPress}\n                    setRef={setRef(index)}\n                    id={id}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-app-picker':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <AppPicker\n                    label={label}\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-search-toggle':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <SearchToggle\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'custom':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  {CustomComponent && <CustomComponent item={item} role=\"menuitem\" setRef={setRef(index)} />}\n                </StyledToolbarItem>\n              );\n\n            default:\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <StyledButton\n                    onClick={onClick}\n                    title={label}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                    id={id}\n                    role=\"menuitem\"\n                    ref={setRef(index)}\n                    {...getGlobalAttributes(otherProps)}\n                  >\n                    {Icon && <Icon size=\"m\" />}\n                  </StyledButton>\n                </StyledToolbarItem>\n              );\n          }\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,0BAAoC;AACpC,oBAAsE;AACtE,yBAAmD;AACnD,qBAA6B;AAC7B,mCAAsC;AACtC,8BAAyC;AACzC,oCAAuC;AAGhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,6BAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,uBAAuB,0DAAuB;AAEvE,SACE,mDAAC;AAAA,IAAuB,eAAa,iDAAyB,QAAQ;AAAA,KACpE,mDAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,QAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAK;AAAA,IACL,aAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA,eAAa,iDAAyB,QAAQ;AAAA,KAE7C,QAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,UAUI,WATF;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,iBAAiB,CAAC;AAAA,QAEhB,IADC,uBACD,IADC;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIF,YAAQ;AAAA,WACD;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,UACA;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE7C,mBAAmB,mDAAC;AAAA,UAAgB;AAAA,UAAY,MAAK;AAAA,UAAW,QAAQ,OAAO,KAAK;AAAA,SAAG,CAC1F;AAAA;AAIF,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,eAAa,iDAAyB,QAAQ;AAAA,UAC9C;AAAA,UACA,MAAK;AAAA,UACL,KAAK,OAAO,KAAK;AAAA,WACb,6CAAoB,UAAU,IAEjC,QAAQ,mDAAC;AAAA,UAAK,MAAK;AAAA,SAAI,CAC1B,CACF;AAAA;AAAA,EAGR,CAAC,CACH,CACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/{outOfTheBox → parts/Toolbar/outOfTheBox}/AppPicker/AppPicker.js

@@ -54,20 +54,22 @@ var import_react = __toESM(require("react"));
 var import_ds_app_picker = require("@elliemae/ds-app-picker");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_utilities2 = require("@elliemae/ds-utilities");
-var import_styles = require("../../components/Toolbar/styles");
+var import_styles = require("../../../styles");
+var import_exported_related = require("../../../../exported-related");
 const AppPicker = (_a) => {
   var _b = _a, {
     label,
     id,
+    setRef,
     componentProps
   } = _b, otherProps = __objRest(_b, [
     "label",
     "id",
+    "setRef",
     "componentProps"
   ]);
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const buttonRef = (0, import_react.useRef)(null);
+  const internalTriggerRef = (0, import_react.useRef)(null);
   const {
     apps,
     icon,
@@ -83,15 +85,17 @@ const AppPicker = (_a) => {
     triggerRef,
     triggerOnClick
   } = componentProps;
+  const schedule = (0, import_ds_utilities.useCallbackAfterRender)();
+  const focusTrigger = (0, import_react.useCallback)(() => internalTriggerRef.current?.focus(), []);
   const handleTriggerKeyDown = (0, import_react.useCallback)((e) => {
-    if (e.code === "Enter" || e.code === "Space") {
+    if (e.code === "Enter" || e.code === "Space" || e.code === "ArrowDown") {
       setIsOpen(true);
     }
   }, []);
   const handleAppPickerOnKeyDown = (0, import_react.useCallback)((e) => {
-    if (e.code === "Escape") {
+    if (e.key === "Escape") {
       setIsOpen(false);
-      buttonRef?.current?.focus();
+      schedule(focusTrigger);
     }
   }, []);
   const handleOnClickOutside = (0, import_react.useCallback)(() => {
@@ -100,20 +104,6 @@ const AppPicker = (_a) => {
   const handleOnClick = (0, import_react.useCallback)(() => {
     setIsOpen(true);
   }, []);
-  const renderTrigger = (0, import_react.useMemo)(() => ({ ref }) => /* @__PURE__ */ import_react.default.createElement("div", {
-    ref
-  }, /* @__PURE__ */ import_react.default.createElement(import_styles.Button, __spreadValues({
-    onClick: triggerOnClick ?? handleOnClick,
-    onKeyDown: handleTriggerKeyDown,
-    ref: (0, import_ds_utilities.mergeRefs)(buttonRef, triggerRef),
-    title: label,
-    "data-testid": "gh-toolbar-item",
-    id
-  }, (0, import_ds_utilities2.getDataProps)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MenuPicker, {
-    fill: "#FFF",
-    width: 20.73,
-    height: 20.73
-  }))), [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
   return /* @__PURE__ */ import_react.default.createElement(import_ds_app_picker.DSAppPicker, {
     apps,
     customApps,
@@ -123,7 +113,23 @@ const AppPicker = (_a) => {
     onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
     actionRef,
     onClickOutside: userOnClickOutside ?? handleOnClickOutside,
-    renderTrigger: userRenderTrigger ?? renderTrigger,
+    renderTrigger: userRenderTrigger || (({ ref }) => /* @__PURE__ */ import_react.default.createElement(import_styles.StyledButton, __spreadValues({
+      onClick: triggerOnClick ?? handleOnClick,
+      onKeyDown: handleTriggerKeyDown,
+      ref: (buttonRef) => {
+        setRef(buttonRef);
+        (0, import_ds_utilities.mergeRefs)(internalTriggerRef, triggerRef, ref)(buttonRef);
+      },
+      "aria-label": label,
+      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+      role: "menuitem",
+      "aria-haspopup": true,
+      "aria-expanded": userIsOpen ?? isOpen,
+      id
+    }, (0, import_ds_utilities.getGlobalAttributes)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MenuPicker, {
+      width: 20.73,
+      height: 20.73
+    }))),
     isOpen: userIsOpen ?? isOpen,
     onClose,
     triggerRef