@elliemae/ds-global-header 3.32.2-next.1 → 3.33.0-next.1

package/dist/cjs/DSGlobalHeader.js

@@ -35,7 +35,7 @@ __export(DSGlobalHeader_exports, {
 module.exports = __toCommonJS(DSGlobalHeader_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_lodash = require("lodash");
+var import_react = require("react");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_GlobalHeaderLogo = require("./parts/Logo/GlobalHeaderLogo.js");
@@ -45,28 +45,26 @@ var import_DSGlobalHeaderContext = require("./DSGlobalHeaderContext.js");
 var import_useGlobalHeader = require("./config/useGlobalHeader.js");
 var import_useValidateProps = require("./config/useValidateProps.js");
 var import_exported_related = require("./exported-related/index.js");
+var import_constants = require("./config/constants.js");
 var import_styles = require("./parts/styles.js");
 const DSGlobalHeader = (props) => {
   (0, import_useValidateProps.useValidateProps)(props);
   const ctx = (0, import_useGlobalHeader.useGlobalHeader)(props);
+  const { fontDetector } = ctx;
   const propsWithDefaults = ctx.props;
-  const globalAttrs = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults), ["cols", "rows", "wrap"]);
+  const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
   const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styles.Container,
-    {
-      ...globalAttrs,
-      ...xstyledAttrs,
-      cols: ["auto", "1fr", "auto"],
-      forwardedAs: "header",
-      "data-testid": "ds-global-header",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSGlobalHeaderContext.DSGlobalHeaderContext.Provider, { value: ctx, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderLogo.GlobalHeaderLogo, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderToolbar.GlobalHeaderToolbar, {})
-      ] })
+  const cols = (0, import_react.useMemo)(() => {
+    if (fontDetector > import_constants.FONT_DETECTOR.SMALL) {
+      return ["auto", "1fr"];
     }
-  );
+    return ["auto", "1fr", "auto"];
+  }, [fontDetector]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { ...globalAttrs, ...xstyledAttrs, forwardedAs: "header", "data-testid": "ds-global-header", cols, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSGlobalHeaderContext.DSGlobalHeaderContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderLogo.GlobalHeaderLogo, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderToolbar.GlobalHeaderToolbar, {})
+  ] }) });
 };
 DSGlobalHeader.propTypes = import_react_desc_prop_types.propTypes;
 DSGlobalHeader.displayName = import_exported_related.DSGlobalHeaderName;

package/dist/cjs/DSGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSGlobalHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\n// import type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\nimport { Container } from './parts/styles.js';\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n  const propsWithDefaults = ctx.props;\n  const globalAttrs = omit(useGetGlobalAttributes(propsWithDefaults), ['cols', 'rows', 'wrap']);\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n\n  return (\n    <Container\n      {...globalAttrs}\n      {...xstyledAttrs}\n      cols={['auto', '1fr', 'auto']}\n      forwardedAs=\"header\"\n      data-testid=\"ds-global-header\"\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </Container>\n  );\n};\n\nDSGlobalHeader.propTypes = propTypes;\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA3BN,oBAAqB;AACrB,8BAAqE;AACrE,mCAAgD;AAChD,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,8BAAiC;AACjC,8BAAmC;AAEnC,oBAA0B;AAC1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,UAAM,wCAAgB,KAAK;AACjC,QAAM,oBAAoB,IAAI;AAC9B,QAAM,kBAAc,wBAAK,gDAAuB,iBAAiB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AAC5F,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAY;AAAA,MAEZ,uDAAC,mDAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,oDAAC,4CAAiB;AAAA,QAClB,4CAAC,wDAAuB;AAAA,QACxB,4CAAC,kDAAoB;AAAA,SACvB;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\n// import type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n  const { fontDetector } = ctx;\n  const propsWithDefaults = ctx.props;\n  const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n\n  const cols = useMemo(() => {\n    if (fontDetector > FONT_DETECTOR.SMALL) {\n      return ['auto', '1fr'];\n    }\n    return ['auto', '1fr', 'auto'];\n  }, [fontDetector]);\n\n  return (\n    <Container {...globalAttrs} {...xstyledAttrs} forwardedAs=\"header\" data-testid=\"ds-global-header\" cols={cols}>\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </Container>\n  );\n};\n\nDSGlobalHeader.propTypes = propTypes;\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BjB;AA/BN,mBAA+B;AAC/B,8BAAqE;AACrE,mCAAgD;AAChD,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,8BAAiC;AACjC,8BAAmC;AAEnC,uBAA8B;AAC9B,oBAA0B;AAE1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,UAAM,wCAAgB,KAAK;AACjC,QAAM,EAAE,aAAa,IAAI;AACzB,QAAM,oBAAoB,IAAI;AAC9B,QAAM,kBAAc,gDAA6E,iBAAiB;AAClH,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,eAAe,+BAAc,OAAO;AACtC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;AACA,WAAO,CAAC,QAAQ,OAAO,MAAM;AAAA,EAC/B,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE,4CAAC,2BAAW,GAAG,aAAc,GAAG,cAAc,aAAY,UAAS,eAAY,oBAAmB,MAChG,uDAAC,mDAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,gDAAC,4CAAiB;AAAA,IAClB,4CAAC,wDAAuB;AAAA,IACxB,4CAAC,kDAAoB;AAAA,KACvB,GACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
   "names": []
 }

package/dist/cjs/config/constants.js

@@ -0,0 +1,40 @@
+"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 constants_exports = {};
+__export(constants_exports, {
+  FONT_DETECTOR: () => FONT_DETECTOR
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("react"));
+const FONT_DETECTOR = {
+  SMALL: 1,
+  MEDIUM: 2,
+  LARGE: 3
+};
+//# sourceMappingURL=constants.js.map

package/dist/cjs/config/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/constants.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const FONT_DETECTOR = {\n  SMALL: 1,\n  MEDIUM: 2,\n  LARGE: 3,\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;",
+  "names": []
+}

package/dist/cjs/config/useGlobalHeader.js

@@ -36,6 +36,8 @@ var import_react = require("react");
 var import_uid = require("uid");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_ds_hooks_fontsize_media = require("@elliemae/ds-hooks-fontsize-media");
+var import_constants = require("./constants.js");
 const useGlobalHeader = (props) => {
   const [showIconOnly, setShowIconOnly] = (0, import_react.useState)(false);
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
@@ -44,15 +46,21 @@ const useGlobalHeader = (props) => {
     () => new Array(propsWithDefaults.toolbar.length).fill("auto"),
     [propsWithDefaults.toolbar]
   );
+  const fontDetector = (0, import_ds_hooks_fontsize_media.useFontsizeMedia)({
+    largeFont: import_constants.FONT_DETECTOR.LARGE,
+    mediumFont: import_constants.FONT_DETECTOR.MEDIUM,
+    smallFont: import_constants.FONT_DETECTOR.SMALL
+  });
   return (0, import_react.useMemo)(
     () => ({
       props: propsWithDefaults,
       showIconOnly,
       setShowIconOnly,
       instanceUID,
-      globalHeaderToolbarGrid
+      globalHeaderToolbarGrid,
+      fontDetector
     }),
-    [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid]
+    [propsWithDefaults, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid]
   );
 };
 //# sourceMappingURL=useGlobalHeader.js.map

package/dist/cjs/config/useGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useGlobalHeader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { type DSGlobalHeaderInternalsT } from '../sharedTypes.js';\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderInternalsT.InternalProps>(props, defaultProps);\n\n  const instanceUID = useMemo(() => uid(5), []);\n\n  const globalHeaderToolbarGrid = useMemo(\n    () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n    [propsWithDefaults.toolbar],\n  );\n\n  return useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n    }),\n    [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,iBAAoB;AACpB,8BAA6C;AAC7C,mCAAmD;AAE5C,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAE/D,QAAM,wBAAoB,sDAAqE,OAAO,yCAAY;AAElH,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,8BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,aAAa,uBAAuB;AAAA,EACxE;AACF;",
+  "sourcesContent": ["import { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { type DSGlobalHeaderInternalsT } from '../sharedTypes.js';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { FONT_DETECTOR } from './constants.js';\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderInternalsT.InternalProps>(props, defaultProps);\n\n  const instanceUID = useMemo(() => uid(5), []);\n\n  const globalHeaderToolbarGrid = useMemo(\n    () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n    [propsWithDefaults.toolbar],\n  );\n\n  const fontDetector = useFontsizeMedia({\n    largeFont: FONT_DETECTOR.LARGE,\n    mediumFont: FONT_DETECTOR.MEDIUM,\n    smallFont: FONT_DETECTOR.SMALL,\n  });\n\n  return useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n      fontDetector,\n    }),\n    [propsWithDefaults, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,iBAAoB;AACpB,8BAA6C;AAC7C,mCAAmD;AAEnD,qCAAiC;AACjC,uBAA8B;AACvB,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAE/D,QAAM,wBAAoB,sDAAqE,OAAO,yCAAY;AAElH,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,8BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,QAAM,mBAAe,iDAAiB;AAAA,IACpC,WAAW,+BAAc;AAAA,IACzB,YAAY,+BAAc;AAAA,IAC1B,WAAW,+BAAc;AAAA,EAC3B,CAAC;AAED,aAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,aAAa,cAAc,uBAAuB;AAAA,EACtF;AACF;",
   "names": []
 }

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

@@ -1,7 +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.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\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;ADgBnB;AAhBJ,mBAAkB;AAClB,oBAA6E;AAC7E,8BAAyC;AAGlC,MAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,MACE,6CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MACrE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAa,iDAAyB,WAAW;AAAA,QACjD,gBAAc;AAAA,QACd;AAAA,QACA,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,CAAC,CAAC;AAAA,YACd,YAAY,WAAW;AAAA,YACvB,eAAa,iDAAyB,WAAW;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,WAAW,4CAAC,+BAAc,MAAK,KAAI,eAAW,MAAC;AAAA,KAClD;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { StyledBreadcrumbItem, StyledLink, StyledLabel, StyledChevron } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\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;ADenB;AAfJ,mBAAkB;AAClB,oBAA6E;AAC7E,8BAAyC;AAElC,MAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,MACE,6CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MACrE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAa,iDAAyB,WAAW;AAAA,QACjD,gBAAc;AAAA,QACd;AAAA,QACA,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,CAAC,CAAC;AAAA,YACd,YAAY,WAAW;AAAA,YACvB,eAAa,iDAAyB,WAAW;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,WAAW,4CAAC,+BAAc,MAAK,KAAI,eAAW,MAAC;AAAA,KAClD;AAEJ;",
   "names": ["React"]
 }

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

@@ -78,11 +78,11 @@ const StyledBreadcrumbItem = (0, import_ds_system.styled)("li", {
 })`
   display: flex;
   align-items: center;
-  height: 40px;
+  height: 3.077rem;
 `;
 const StyledLink = (0, import_ds_system.styled)("a", { name: import_theming.DSGlobalHeaderName, slot: import_theming.DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK })`
   width: fit-content;
-  height: 40px;
+  height: 3.077rem;
   display: grid;
   place-items: center;
   margin: 0;
@@ -112,7 +112,11 @@ const StyledLabel = (0, import_ds_system.styled)("span", {
 })`
   color: ${({ theme }) => theme.colors.neutral["000"]};
   ${({ theme, isSelected }) => `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral["000"] : "transparent"}`};
-  font-size: 16px;
+  font-size: 1.231rem;
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 1rem;
+  }
+  display: block;
   line-height: 1;
   text-transform: uppercase;
   border-bottom: ${({ theme, isSelected, isOnlyItem }) => `2px solid ${isSelected && !isOnlyItem ? theme.colors.neutral["000"] : "transparent"}`};

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

@@ -1,7 +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 { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\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, {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n})``;\n\nexport const StyledBreadcrumbList = styled('ul', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n})`\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', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n})<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: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n})<ChevronT>`\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledBreadcrumbItem = styled('li', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n})`\n  display: flex;\n  align-items: center;\n  height: 40px;\n`;\n\nexport const StyledLink = styled('a', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.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', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n})<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,qBAAwD;AAejD,MAAM,gCAA4B,yBAAO,qBAAM;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAEM,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM,MAAM,iBAAa,yBAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA,iBAEgB,CAAC,EAAE,OAAO,aAAa,MAAO,eAAe,SAAS,aAAa,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIvG,MAAM,oBAAgB,yBAAO,mCAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA,UACS,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG5C,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,iBAAa,yBAAO,KAAK,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,WAAW,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAqBxF,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAM5D,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChD,CAAC,EAAE,OAAO,WAAW,MACrB,+BAA+B,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,mBAI3D,CAAC,EAAE,OAAO,YAAY,WAAW,MAChD,aAAa,cAAc,CAAC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,MAGrE,CAAC,EAAE,MAAM,MAAM,8BAA8B,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;",
+  "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 { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\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, {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n})``;\n\nexport const StyledBreadcrumbList = styled('ul', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n})`\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', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n})<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: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n})<ChevronT>`\n  fill: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledBreadcrumbItem = styled('li', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n})`\n  display: flex;\n  align-items: center;\n  height: 3.077rem;\n`;\n\nexport const StyledLink = styled('a', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK })`\n  width: fit-content;\n  height: 3.077rem;\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', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n})<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: 1.231rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1rem;\n  }\n  display: block;\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,qBAAwD;AAejD,MAAM,gCAA4B,yBAAO,qBAAM;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAEM,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM,MAAM,iBAAa,yBAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA,iBAEgB,CAAC,EAAE,OAAO,aAAa,MAAO,eAAe,SAAS,aAAa,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIvG,MAAM,oBAAgB,yBAAO,mCAAmB;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA,UACS,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG5C,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,iBAAa,yBAAO,KAAK,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,WAAW,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAqBxF,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAM5D,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,mCAAoB,WAAW;AACvC,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAChD,CAAC,EAAE,OAAO,WAAW,MACrB,+BAA+B,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA,uBAEvD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMrC,CAAC,EAAE,OAAO,YAAY,WAAW,MAChD,aAAa,cAAc,CAAC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,MAGrE,CAAC,EAAE,MAAM,MAAM,8BAA8B,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;",
   "names": []
 }

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

@@ -34,18 +34,20 @@ module.exports = __toCommonJS(useGlobalHeaderBreadcrumb_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext.js");
+var import_constants = require("../../config/constants.js");
 const useGlobalHeaderBreadcrumb = () => {
   const {
     props: { breadcrumb, CustomNavigation },
     instanceUID,
     showIconOnly,
-    setShowIconOnly
+    setShowIconOnly,
+    fontDetector
   } = (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) {
+      if (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current || fontDetector === import_constants.FONT_DETECTOR.LARGE || fontDetector === import_constants.FONT_DETECTOR.MEDIUM) {
         setShowIconOnly(true);
         breakpointRef.current = window.innerWidth;
       } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {
@@ -56,7 +58,7 @@ const useGlobalHeaderBreadcrumb = () => {
     evaluateShowIconOnly();
     window.addEventListener("resize", evaluateShowIconOnly);
     return () => window.removeEventListener("resize", evaluateShowIconOnly);
-  }, [breakpointRef, flexRegionRef, setShowIconOnly]);
+  }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);
   const handleOnKeyDown = (0, import_react.useCallback)(
     (onClick) => (e) => {
       if (e.key === " " || e.key === "Enter") {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n  breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n  CustomNavigation: React.ComponentType;\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, CustomNavigation },\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    CustomNavigation,\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;ADCvB,mBAA2D;AAC3D,mCAAsC;AAY/B,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,oBAAgB,qBAAsB,IAAI;AAChD,QAAM,oBAAgB,qBAAuB,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,sBAAkB;AAAA,IACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type React from 'react';\nimport { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\nimport { FONT_DETECTOR } from '../../config/constants.js';\ninterface UseGlobalHeaderBreadcrumbReturnT {\n  breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n  CustomNavigation: React.ComponentType;\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, CustomNavigation },\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n    fontDetector,\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 (\n        (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n        fontDetector === FONT_DETECTOR.LARGE ||\n        fontDetector === FONT_DETECTOR.MEDIUM\n      ) {\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, fontDetector]);\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    CustomNavigation,\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;ADCvB,mBAA2D;AAC3D,mCAAsC;AAEtC,uBAA8B;AAUvB,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,oBAAgB,qBAAsB,IAAI;AAChD,QAAM,oBAAgB,qBAAuB,IAAI;AAEjD,8BAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UACG,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,WACnF,iBAAiB,+BAAc,SAC/B,iBAAiB,+BAAc,QAC/B;AACA,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,iBAAiB,YAAY,CAAC;AAEhE,QAAM,sBAAkB;AAAA,IACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -41,132 +41,142 @@ var import_styles2 = require("../styles.js");
 var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext.js");
 var import_exported_related = require("../../exported-related/index.js");
 var import_useGlobalHeaderToolbar = require("./useGlobalHeaderToolbar.js");
+var import_constants = require("../../config/constants.js");
 const GlobalHeaderToolbar = () => {
   const {
     props: { toolbar },
     instanceUID,
-    globalHeaderToolbarGrid
+    globalHeaderToolbarGrid,
+    fontDetector
   } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
   const { listRef, setRef, keyboardNavigation } = (0, import_useGlobalHeaderToolbar.useGlobalHeaderToolbar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMenubarContainer, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.CONTAINER, "aria-label": "menubar", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styles.StyledList,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledMenubarContainer,
     {
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-      gutter: "xxs",
-      cols: globalHeaderToolbarGrid,
-      role: "menubar",
-      onKeyDown: keyboardNavigation,
-      innerRef: listRef,
-      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST,
-      children: toolbar.map((item, index) => {
-        const {
-          Icon,
-          type,
-          onClick,
-          onKeyPress,
-          CustomComponent,
-          label,
-          id = "",
-          componentProps = {},
-          ...otherProps
-        } = item;
-        switch (type) {
-          case "ds-popup-menu":
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styles.StyledToolbarItem,
-              {
-                role: "menuitem",
-                "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_outOfTheBox.PopupMenu,
+      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.CONTAINER,
+      "aria-label": "menubar",
+      withSpan: fontDetector > import_constants.FONT_DETECTOR.SMALL,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styles.StyledList,
+        {
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          gutter: "xxs",
+          cols: globalHeaderToolbarGrid,
+          role: "menubar",
+          onKeyDown: keyboardNavigation,
+          innerRef: listRef,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST,
+          children: toolbar.map((item, index) => {
+            const {
+              Icon,
+              type,
+              onClick,
+              onKeyPress,
+              CustomComponent,
+              label,
+              id = "",
+              componentProps = {},
+              ...otherProps
+            } = item;
+            switch (type) {
+              case "ds-popup-menu":
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_styles.StyledToolbarItem,
                   {
-                    title: label,
-                    Icon,
-                    onClick,
-                    onKeyPress,
-                    setRef: setRef(index),
-                    id,
-                    componentProps,
-                    ...otherProps
-                  }
-                )
-              },
-              `${instanceUID}-ds-toolbar-item-${label}`
-            );
-          case "ds-app-picker":
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styles.StyledToolbarItem,
-              {
-                role: "menuitem",
-                "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_outOfTheBox.AppPicker,
+                    role: "menuitem",
+                    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_outOfTheBox.PopupMenu,
+                      {
+                        title: label,
+                        Icon,
+                        onClick,
+                        onKeyPress,
+                        setRef: setRef(index),
+                        id,
+                        componentProps,
+                        ...otherProps
+                      }
+                    )
+                  },
+                  `${instanceUID}-ds-toolbar-item-${label}`
+                );
+              case "ds-app-picker":
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_styles.StyledToolbarItem,
                   {
-                    label,
-                    id,
-                    setRef: setRef(index),
-                    componentProps,
-                    ...otherProps
-                  }
-                )
-              },
-              `${instanceUID}-ds-toolbar-item-${label}`
-            );
-          case "ds-search-toggle":
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styles.StyledToolbarItem,
-              {
-                role: "menuitem",
-                "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_outOfTheBox.SearchToggle,
+                    role: "menuitem",
+                    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_outOfTheBox.AppPicker,
+                      {
+                        label,
+                        id,
+                        setRef: setRef(index),
+                        componentProps,
+                        ...otherProps
+                      }
+                    )
+                  },
+                  `${instanceUID}-ds-toolbar-item-${label}`
+                );
+              case "ds-search-toggle":
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_styles.StyledToolbarItem,
                   {
-                    id,
-                    setRef: setRef(index),
-                    componentProps,
-                    ...otherProps
-                  }
-                )
-              },
-              `${instanceUID}-ds-toolbar-item-${label}`
-            );
-          case "custom":
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styles.StyledToolbarItem,
-              {
-                role: "menuitem",
-                "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                children: CustomComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomComponent, { item, setRef: setRef(index) })
-              },
-              `${instanceUID}-ds-toolbar-item-${label}`
-            );
-          default:
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_styles.StyledToolbarItem,
-              {
-                role: "menuitem",
-                "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_styles2.StyledButton,
+                    role: "menuitem",
+                    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_outOfTheBox.SearchToggle,
+                      {
+                        id,
+                        setRef: setRef(index),
+                        componentProps,
+                        ...otherProps
+                      }
+                    )
+                  },
+                  `${instanceUID}-ds-toolbar-item-${label}`
+                );
+              case "custom":
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_styles.StyledToolbarItem,
                   {
-                    onClick,
-                    title: label,
-                    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
-                    id,
-                    innerRef: setRef(index),
-                    ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
-                    type: "button",
-                    children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
-                  }
-                )
-              },
-              `${instanceUID}-ds-toolbar-item-${label}`
-            );
+                    role: "menuitem",
+                    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                    children: CustomComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomComponent, { item, setRef: setRef(index) })
+                  },
+                  `${instanceUID}-ds-toolbar-item-${label}`
+                );
+              default:
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_styles.StyledToolbarItem,
+                  {
+                    role: "menuitem",
+                    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_styles2.StyledButton,
+                      {
+                        onClick,
+                        title: label,
+                        "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+                        id,
+                        innerRef: setRef(index),
+                        ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
+                        type: "button",
+                        children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
+                      }
+                    )
+                  },
+                  `${instanceUID}-ds-toolbar-item-${label}`
+                );
+            }
+          })
         }
-      })
+      )
     }
-  ) });
+  );
 };
 //# sourceMappingURL=GlobalHeaderToolbar.js.map