@elliemae/ds-page-header-v2 3.60.0-next.4 → 3.60.0-next.40

package/dist/cjs/PageHeader.js

@@ -40,7 +40,9 @@ __export(PageHeader_exports, {
 module.exports = __toCommonJS(PageHeader_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_hooks_fontsize_media = require("@elliemae/ds-hooks-fontsize-media");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_styled = require("./styled.js");
 var import_usePageHeader = require("./config/usePageHeader.js");
@@ -48,10 +50,10 @@ var import_page_header_title = require("./components/page-header-title/index.js"
 var import_page_header_editable_title = require("./components/page-header-editable-title/index.js");
 var import_page_header_summary = require("./components/page-header-summary/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-var import_exported_related = require("./exported-related/index.js");
-const MenuRegion = ({ CurrentMenu }) => {
+var import_constants = require("./constants/index.js");
+const MenuRegion = ({ CurrentMenu, ownerProps }) => {
   if (!CurrentMenu) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentMenu, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderMenu, { ...ownerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentMenu, {}) });
 };
 const DSPageHeaderV2 = (props) => {
   const {
@@ -66,12 +68,23 @@ const DSPageHeaderV2 = (props) => {
     globalAttributes,
     xStyledProps
   } = (0, import_usePageHeader.usePageHeader)(props);
+  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
+  });
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
   const { isSkeleton } = props;
   const wrapperRow = ["auto", "1fr"];
-  const mainRow = ["1fr", "auto"];
+  const mainRow = import_react.default.useMemo(() => {
+    if (fontDetector > import_constants.FONT_DETECTOR.SMALL) {
+      return ["auto"];
+    }
+    return ["1fr", "auto"];
+  }, [fontDetector]);
   const pageTitleRow = [
     isSkeleton ? "2fr" : "auto",
-    CurrentMenu !== void 0 && "30px",
+    CurrentMenu !== void 0 && "auto",
     currentSummary !== void 0 && "auto",
     "1fr"
   ].filter((col) => typeof col === "string");
@@ -81,19 +94,20 @@ const DSPageHeaderV2 = (props) => {
       ...containerProps,
       ...globalAttributes,
       ...xStyledProps,
-      "data-testid": import_exported_related.DSPageHeaderDataTestIds.CONTAINER,
+      ...ownerProps,
+      "data-testid": import_constants.DSPageHeaderDataTestIds.CONTAINER,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.ContainerWBorder, { withBottomSeparator, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: wrapperRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderBack, { children: currentBackArrow }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderBack, { ...ownerProps, children: currentBackArrow }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { rows: ["auto", "auto"], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { className: "em-ds-page-header-v2-breadcrumb", children: currentBreadcrumbs }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderBreadCrumb, { className: "em-ds-page-header-v2-breadcrumb", ...ownerProps, children: currentBreadcrumbs }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: mainRow, alignItems: "center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: pageTitleRow, alignItems: "center", children: [
               currentPageTitle,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRegion, { CurrentMenu }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRegion, { CurrentMenu, ownerProps }),
               currentSummary,
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderToolbarWrapper, { children: currentToolbar }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderToolbarWrapper, { ...ownerProps, children: currentToolbar }) })
           ] })
         ] })
       ] }) })
@@ -101,7 +115,7 @@ const DSPageHeaderV2 = (props) => {
   );
 };
 DSPageHeaderV2.defaultProps = import_react_desc_prop_types.defaultProps;
-DSPageHeaderV2.displayName = import_exported_related.DSPageHeaderName;
+DSPageHeaderV2.displayName = import_constants.DSPageHeaderName;
 const DSPageHeaderWithSchema = (0, import_ds_props_helpers.describe)(DSPageHeaderV2);
 DSPageHeaderWithSchema.propTypes = import_react_desc_prop_types.PageHeaderPropTypes;
 var PageHeader_default = DSPageHeaderV2;

package/dist/cjs/PageHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PageHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  Container,\n  ContainerWBorder,\n  PageHeaderCustomRenderer,\n  PageHeaderToolbarWrapper,\n  PageHeaderMenu,\n  PageHeaderBack,\n} from './styled.js';\nimport { usePageHeader } from './config/usePageHeader.js';\nimport { PageHeaderTitle } from './components/page-header-title/index.js';\nimport { PageHeaderEditableTitle } from './components/page-header-editable-title/index.js';\nimport { PageHeaderSummary } from './components/page-header-summary/index.js';\nimport type { DSPageHeaderT } from './react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSPageHeaderDataTestIds, DSPageHeaderName } from './exported-related/index.js';\n\nconst MenuRegion: React.ComponentType<{ CurrentMenu?: React.ComponentType }> = ({ CurrentMenu }) => {\n  if (!CurrentMenu) return null;\n  return (\n    <PageHeaderMenu>\n      <CurrentMenu />\n    </PageHeaderMenu>\n  );\n};\n\nconst DSPageHeaderV2: React.ComponentType<DSPageHeaderT.Props> = (props) => {\n  const {\n    currentBackArrow,\n    CurrentMenu,\n    currentBreadcrumbs,\n    currentSummary,\n    currentToolbar,\n    currentPageTitle,\n    containerProps,\n    withBottomSeparator,\n    globalAttributes,\n    xStyledProps,\n  } = usePageHeader(props);\n\n  const { isSkeleton } = props;\n  const wrapperRow = ['auto', '1fr'];\n  const mainRow = ['1fr', 'auto'];\n  const pageTitleRow = [\n    isSkeleton ? '2fr' : 'auto',\n    CurrentMenu !== undefined && '30px',\n    currentSummary !== undefined && 'auto',\n    '1fr',\n  ].filter((col) => typeof col === 'string');\n\n  return (\n    <Container\n      {...containerProps}\n      {...globalAttributes}\n      {...xStyledProps}\n      data-testid={DSPageHeaderDataTestIds.CONTAINER}\n    >\n      <ContainerWBorder withBottomSeparator={withBottomSeparator}>\n        <Grid cols={wrapperRow}>\n          <Grid>\n            <PageHeaderBack>{currentBackArrow}</PageHeaderBack>\n          </Grid>\n          <Grid rows={['auto', 'auto']}>\n            <Grid className=\"em-ds-page-header-v2-breadcrumb\">{currentBreadcrumbs}</Grid>\n            <Grid cols={mainRow} alignItems=\"center\">\n              <Grid cols={pageTitleRow} alignItems=\"center\">\n                {currentPageTitle}\n                <MenuRegion CurrentMenu={CurrentMenu} />\n                {currentSummary}\n                <div />\n              </Grid>\n              <Grid>\n                <PageHeaderToolbarWrapper>{currentToolbar}</PageHeaderToolbarWrapper>\n              </Grid>\n            </Grid>\n          </Grid>\n        </Grid>\n      </ContainerWBorder>\n    </Container>\n  );\n};\n\nDSPageHeaderV2.defaultProps = defaultProps;\nDSPageHeaderV2.displayName = DSPageHeaderName;\nconst DSPageHeaderWithSchema = describe(DSPageHeaderV2);\n\nDSPageHeaderWithSchema.propTypes = PageHeaderPropTypes as WeakValidationMap<unknown>;\n\nexport {\n  DSPageHeaderV2,\n  PageHeaderTitle,\n  PageHeaderEditableTitle,\n  PageHeaderSummary,\n  PageHeaderMenu,\n  PageHeaderCustomRenderer,\n  DSPageHeaderWithSchema,\n};\n\nexport default DSPageHeaderV2;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AAtBN,8BAAyB;AACzB,qBAAqB;AACrB,oBAOO;AACP,2BAA8B;AAC9B,+BAAgC;AAChC,wCAAwC;AACxC,iCAAkC;AAElC,mCAAkD;AAClD,8BAA0D;AAE1D,MAAM,aAAyE,CAAC,EAAE,YAAY,MAAM;AAClG,MAAI,CAAC,YAAa,QAAO;AACzB,SACE,4CAAC,gCACC,sDAAC,eAAY,GACf;AAEJ;AAEA,MAAM,iBAA2D,CAAC,UAAU;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc,KAAK;AAEvB,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,aAAa,CAAC,QAAQ,KAAK;AACjC,QAAM,UAAU,CAAC,OAAO,MAAM;AAC9B,QAAM,eAAe;AAAA,IACnB,aAAa,QAAQ;AAAA,IACrB,gBAAgB,UAAa;AAAA,IAC7B,mBAAmB,UAAa;AAAA,IAChC;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,OAAO,QAAQ,QAAQ;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,eAAa,gDAAwB;AAAA,MAErC,sDAAC,kCAAiB,qBAChB,uDAAC,uBAAK,MAAM,YACV;AAAA,oDAAC,uBACC,sDAAC,gCAAgB,4BAAiB,GACpC;AAAA,QACA,6CAAC,uBAAK,MAAM,CAAC,QAAQ,MAAM,GACzB;AAAA,sDAAC,uBAAK,WAAU,mCAAmC,8BAAmB;AAAA,UACtE,6CAAC,uBAAK,MAAM,SAAS,YAAW,UAC9B;AAAA,yDAAC,uBAAK,MAAM,cAAc,YAAW,UAClC;AAAA;AAAA,cACD,4CAAC,cAAW,aAA0B;AAAA,cACrC;AAAA,cACD,4CAAC,SAAI;AAAA,eACP;AAAA,YACA,4CAAC,uBACC,sDAAC,0CAA0B,0BAAe,GAC5C;AAAA,aACF;AAAA,WACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,cAAc;AAC7B,MAAM,6BAAyB,kCAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
-  "names": []
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\n\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  Container,\n  ContainerWBorder,\n  PageHeaderCustomRenderer,\n  PageHeaderToolbarWrapper,\n  PageHeaderMenu,\n  PageHeaderBack,\n  PageHeaderBreadCrumb,\n} from './styled.js';\nimport { usePageHeader } from './config/usePageHeader.js';\nimport { PageHeaderTitle } from './components/page-header-title/index.js';\nimport { PageHeaderEditableTitle } from './components/page-header-editable-title/index.js';\nimport { PageHeaderSummary } from './components/page-header-summary/index.js';\nimport type { DSPageHeaderT } from './react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { DSPageHeaderDataTestIds, DSPageHeaderName, FONT_DETECTOR } from './constants/index.js';\n\nconst MenuRegion: React.ComponentType<{\n  CurrentMenu?: React.ComponentType;\n  ownerProps?: {\n    getOwnerProps: () => DSPageHeaderT.Props;\n    getOwnerPropsArguments: () => {};\n  };\n}> = ({ CurrentMenu, ownerProps }) => {\n  if (!CurrentMenu) return null;\n  return (\n    <PageHeaderMenu {...ownerProps}>\n      <CurrentMenu />\n    </PageHeaderMenu>\n  );\n};\n\nconst DSPageHeaderV2: React.ComponentType<DSPageHeaderT.Props> = (props) => {\n  const {\n    currentBackArrow,\n    CurrentMenu,\n    currentBreadcrumbs,\n    currentSummary,\n    currentToolbar,\n    currentPageTitle,\n    containerProps,\n    withBottomSeparator,\n    globalAttributes,\n    xStyledProps,\n  } = usePageHeader(props);\n\n  const fontDetector = useFontsizeMedia({\n    largeFont: FONT_DETECTOR.LARGE,\n    mediumFont: FONT_DETECTOR.MEDIUM,\n    smallFont: FONT_DETECTOR.SMALL,\n  });\n\n  const ownerProps = useOwnerProps(props);\n  const { isSkeleton } = props;\n  const wrapperRow = ['auto', '1fr'];\n  const mainRow = React.useMemo(() => {\n    if (fontDetector > FONT_DETECTOR.SMALL) {\n      return ['auto'];\n    }\n    return ['1fr', 'auto'];\n  }, [fontDetector]);\n  const pageTitleRow = [\n    isSkeleton ? '2fr' : 'auto',\n    CurrentMenu !== undefined && 'auto',\n    currentSummary !== undefined && 'auto',\n    '1fr',\n  ].filter((col) => typeof col === 'string');\n\n  return (\n    <Container\n      {...containerProps}\n      {...globalAttributes}\n      {...xStyledProps}\n      {...ownerProps}\n      data-testid={DSPageHeaderDataTestIds.CONTAINER}\n    >\n      <ContainerWBorder withBottomSeparator={withBottomSeparator}>\n        <Grid cols={wrapperRow}>\n          <Grid>\n            <PageHeaderBack {...ownerProps}>{currentBackArrow}</PageHeaderBack>\n          </Grid>\n          <Grid rows={['auto', 'auto']}>\n            <PageHeaderBreadCrumb className=\"em-ds-page-header-v2-breadcrumb\" {...ownerProps}>\n              {currentBreadcrumbs}\n            </PageHeaderBreadCrumb>\n            <Grid cols={mainRow} alignItems=\"center\">\n              <Grid cols={pageTitleRow} alignItems=\"center\">\n                {currentPageTitle}\n                <MenuRegion CurrentMenu={CurrentMenu} ownerProps={ownerProps} />\n                {currentSummary}\n                <div />\n              </Grid>\n              <Grid>\n                <PageHeaderToolbarWrapper {...ownerProps}>{currentToolbar}</PageHeaderToolbarWrapper>\n              </Grid>\n            </Grid>\n          </Grid>\n        </Grid>\n      </ContainerWBorder>\n    </Container>\n  );\n};\n\nDSPageHeaderV2.defaultProps = defaultProps;\nDSPageHeaderV2.displayName = DSPageHeaderName;\nconst DSPageHeaderWithSchema = describe(DSPageHeaderV2);\n\nDSPageHeaderWithSchema.propTypes = PageHeaderPropTypes as WeakValidationMap<unknown>;\n\nexport {\n  DSPageHeaderV2,\n  PageHeaderTitle,\n  PageHeaderEditableTitle,\n  PageHeaderSummary,\n  PageHeaderMenu,\n  PageHeaderCustomRenderer,\n  DSPageHeaderWithSchema,\n};\n\nexport default DSPageHeaderV2;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCjB;AAhCN,mBAAkB;AAClB,8BAAwC;AACxC,qCAAiC;AAEjC,qBAAqB;AACrB,oBAQO;AACP,2BAA8B;AAC9B,+BAAgC;AAChC,wCAAwC;AACxC,iCAAkC;AAElC,mCAAkD;AAClD,uBAAyE;AAEzE,MAAM,aAMD,CAAC,EAAE,aAAa,WAAW,MAAM;AACpC,MAAI,CAAC,YAAa,QAAO;AACzB,SACE,4CAAC,gCAAgB,GAAG,YAClB,sDAAC,eAAY,GACf;AAEJ;AAEA,MAAM,iBAA2D,CAAC,UAAU;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc,KAAK;AAEvB,QAAM,mBAAe,iDAAiB;AAAA,IACpC,WAAW,+BAAc;AAAA,IACzB,YAAY,+BAAc;AAAA,IAC1B,WAAW,+BAAc;AAAA,EAC3B,CAAC;AAED,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,aAAa,CAAC,QAAQ,KAAK;AACjC,QAAM,UAAU,aAAAA,QAAM,QAAQ,MAAM;AAClC,QAAI,eAAe,+BAAc,OAAO;AACtC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AACjB,QAAM,eAAe;AAAA,IACnB,aAAa,QAAQ;AAAA,IACrB,gBAAgB,UAAa;AAAA,IAC7B,mBAAmB,UAAa;AAAA,IAChC;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,OAAO,QAAQ,QAAQ;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,eAAa,yCAAwB;AAAA,MAErC,sDAAC,kCAAiB,qBAChB,uDAAC,uBAAK,MAAM,YACV;AAAA,oDAAC,uBACC,sDAAC,gCAAgB,GAAG,YAAa,4BAAiB,GACpD;AAAA,QACA,6CAAC,uBAAK,MAAM,CAAC,QAAQ,MAAM,GACzB;AAAA,sDAAC,sCAAqB,WAAU,mCAAmC,GAAG,YACnE,8BACH;AAAA,UACA,6CAAC,uBAAK,MAAM,SAAS,YAAW,UAC9B;AAAA,yDAAC,uBAAK,MAAM,cAAc,YAAW,UAClC;AAAA;AAAA,cACD,4CAAC,cAAW,aAA0B,YAAwB;AAAA,cAC7D;AAAA,cACD,4CAAC,SAAI;AAAA,eACP;AAAA,YACA,4CAAC,uBACC,sDAAC,0CAA0B,GAAG,YAAa,0BAAe,GAC5D;AAAA,aACF;AAAA,WACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,eAAe;AAC9B,eAAe,cAAc;AAC7B,MAAM,6BAAyB,kCAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
+  "names": ["React"]
 }

package/dist/cjs/components/page-header-editable-title/PageHeaderEditableTitle.js

@@ -41,10 +41,13 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_useDerivedStateFromProps = require("./useDerivedStateFromProps.js");
 var import_page_header_title = require("../page-header-title/index.js");
-var import_exported_related = require("../../exported-related/index.js");
+var import_constants = require("../../constants/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-const EditableContainer = (0, import_ds_system.styled)("div")`
-  height: 32px;
+const EditableContainer = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSPageHeaderName,
+  slot: import_constants.DSPageHeaderSlots.HEADER_TITLE
+})`
+  min-height: 32px;
   position: relative;
   overflow: hidden;
   &.editable-title-component {
@@ -54,7 +57,7 @@ const EditableContainer = (0, import_ds_system.styled)("div")`
     margin-left: -2px;
     margin-right: -9px;
     & .${import_ds_form_input_text.DSInputTextName}-${import_ds_form_input_text.DSInputTextSlots.INPUT_WRAPPER} {
-      height: 32px;
+      min-height: 32px;
     }
     & .${import_ds_form_input_text.DSInputTextName}-${import_ds_form_input_text.DSInputTextSlots.INPUT} {
       font-size: ${({ theme }) => theme.fontSizes.title[800]};
@@ -65,13 +68,23 @@ const EditableContainer = (0, import_ds_system.styled)("div")`
     }
   }
 `;
+const StyledInputText = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
+  name: import_constants.DSPageHeaderName,
+  slot: import_constants.DSPageHeaderSlots.TITLE_INPUT
+})``;
 const PageHeaderEditableTitle = (props) => {
   const { children: value, editing: editingProp, showMarker, ...rest } = props;
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
   const [titleValue, setTitleValue] = (0, import_react.useState)(value);
   const [hovered, setHovered] = (0, import_react.useState)(false);
   const [editing, setEditing] = (0, import_useDerivedStateFromProps.useDerivedStateFromProps)(editingProp || false);
+  const [width, setWidth] = (0, import_react.useState)(0);
   const titleRef = (0, import_react.useRef)(null);
-  const width = titleRef.current?.offsetWidth || 0;
+  (0, import_react.useLayoutEffect)(() => {
+    if (titleRef.current) {
+      setWidth(titleRef.current.offsetWidth);
+    }
+  }, [titleValue, hovered, editing]);
   const handleOnChange = (0, import_react.useCallback)((e) => {
     setTitleValue(e.target.value);
   }, []);
@@ -90,27 +103,26 @@ const PageHeaderEditableTitle = (props) => {
     onChange: handleOnChange,
     onBlur: handleOnBlur
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     EditableContainer,
     {
       className: hovered || editing ? "editable-title-component" : "",
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
-      "data-testid": import_exported_related.DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE,
-      children: [
-        (hovered || editing) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_form_input_text.DSInputText,
-          {
-            onChange: handleOnChange,
-            ...rest,
-            ...globals,
-            placeholder: "",
-            style: { width: width + 10, minWidth: "260px", maxWidth: "100%" },
-            value: titleValue
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: titleRef, style: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page_header_title.PageHeaderTitle, { showMarker: showMarker && !hovered && !editing, children: titleValue }) })
-      ]
+      ...ownerProps,
+      "data-testid": import_constants.DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE,
+      children: hovered || editing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledInputText,
+        {
+          onChange: handleOnChange,
+          ...rest,
+          ...globals,
+          placeholder: "",
+          style: { width: width + 10, minWidth: "260px", maxWidth: "100%" },
+          value: titleValue,
+          ...ownerProps
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: titleRef, style: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page_header_title.PageHeaderTitle, { showMarker: showMarker && !hovered && !editing, children: titleValue }) })
     }
   );
 };

package/dist/cjs/components/page-header-editable-title/PageHeaderEditableTitle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/page-header-editable-title/PageHeaderEditableTitle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, useGetGlobalAttributes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps } from './useDerivedStateFromProps.js';\nimport { PageHeaderTitle } from '../page-header-title/index.js';\nimport { DSPageHeaderDataTestIds } from '../../exported-related/index.js';\nimport { PageHeaderEditableTitlePropTypes, type PageHeaderEditableTitleT } from './react-desc-prop-types.js';\n\nconst EditableContainer = styled('div')`\n  height: 32px;\n  position: relative;\n  overflow: hidden;\n  &.editable-title-component {\n    position: relative;\n    left: -7px;\n    top: -1px;\n    margin-left: -2px;\n    margin-right: -9px;\n    & .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER} {\n      height: 32px;\n    }\n    & .${DSInputTextName}-${DSInputTextSlots.INPUT} {\n      font-size: ${({ theme }) => theme.fontSizes.title[800]};\n      line-height: normal;\n      color: ${({ theme }) => theme.colors.neutral['700']};\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n`;\n\nexport const PageHeaderEditableTitle = (props: PageHeaderEditableTitleT.Props) => {\n  const { children: value, editing: editingProp, showMarker, ...rest } = props;\n  const [titleValue, setTitleValue] = useState(value);\n  const [hovered, setHovered] = useState(false);\n  const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n  const titleRef = useRef<HTMLDivElement>(null);\n  const width = titleRef.current?.offsetWidth || 0;\n\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {\n    setTitleValue(e.target.value);\n  }, []);\n\n  const handleOnFocus: React.FocusEventHandler = useCallback(() => {\n    setEditing(true);\n  }, [setEditing]);\n\n  const handleOnBlur: React.FocusEventHandler = useCallback(() => {\n    setEditing(false);\n  }, [setEditing]);\n\n  const handleOnMouseOut: React.MouseEventHandler = useCallback(() => {\n    setHovered(false);\n  }, []);\n\n  const globals = useGetGlobalAttributes(rest, {\n    onFocus: handleOnFocus,\n    onMouseOut: handleOnMouseOut,\n    onChange: handleOnChange,\n    onBlur: handleOnBlur,\n  });\n\n  return (\n    <EditableContainer\n      className={hovered || editing ? 'editable-title-component' : ''}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      data-testid={DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE}\n    >\n      {(hovered || editing) && (\n        <DSInputText\n          onChange={handleOnChange}\n          {...rest}\n          {...globals}\n          placeholder=\"\"\n          style={{ width: width + 10, minWidth: '260px', maxWidth: '100%' }}\n          value={titleValue}\n        />\n      )}\n      <div ref={titleRef} style={{ width: 'fit-content' }}>\n        <PageHeaderTitle showMarker={showMarker && !hovered && !editing}>{titleValue}</PageHeaderTitle>\n      </div>\n    </EditableContainer>\n  );\n};\n\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = PageHeaderEditableTitlePropTypes as ValidationMap<unknown>;\n\nexport default PageHeaderEditableTitle;\n\nexport { DSPageHeaderEditableTitleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEnB;AAhEJ,mBAAqD;AACrD,gCAA+D;AAC/D,uBAAuB;AACvB,8BAAqE;AACrE,sCAAyC;AACzC,+BAAgC;AAChC,8BAAwC;AACxC,mCAAgF;AAEhF,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,yCAAe,IAAI,2CAAiB,aAAa;AAAA;AAAA;AAAA,SAGjD,yCAAe,IAAI,2CAAiB,KAAK;AAAA,mBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA;AAAA,eAE7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlD,MAAM,0BAA0B,CAAC,UAA0C;AAChF,QAAM,EAAE,UAAU,OAAO,SAAS,aAAa,YAAY,GAAG,KAAK,IAAI;AACvE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,QAAI,0DAAyB,eAAe,KAAK;AAC3E,QAAM,eAAW,qBAAuB,IAAI;AAC5C,QAAM,QAAQ,SAAS,SAAS,eAAe;AAE/C,QAAM,qBAA6D,0BAAY,CAAC,MAAM;AACpF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC,0BAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAAwC,0BAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAA4C,0BAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,gDAAuB,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,UAAU,6BAA6B;AAAA,MAC7D,cAAc,MAAM,WAAW,IAAI;AAAA,MACnC,cAAc,MAAM,WAAW,KAAK;AAAA,MACpC,eAAa,gDAAwB;AAAA,MAEnC;AAAA,oBAAW,YACX;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACT,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,aAAY;AAAA,YACZ,OAAO,EAAE,OAAO,QAAQ,IAAI,UAAU,SAAS,UAAU,OAAO;AAAA,YAChE,OAAO;AAAA;AAAA,QACT;AAAA,QAEF,4CAAC,SAAI,KAAK,UAAU,OAAO,EAAE,OAAO,cAAc,GAChD,sDAAC,4CAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,wBAAwB,cAAc;AACtC,MAAM,0CAAsC,kCAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
+  "sourcesContent": ["import React, { useRef, useState, useCallback, useLayoutEffect } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, useGetGlobalAttributes, type ValidationMap, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps } from './useDerivedStateFromProps.js';\nimport { PageHeaderTitle } from '../page-header-title/index.js';\nimport { DSPageHeaderDataTestIds, DSPageHeaderSlots, DSPageHeaderName } from '../../constants/index.js';\nimport { PageHeaderEditableTitlePropTypes, type PageHeaderEditableTitleT } from './react-desc-prop-types.js';\n\nconst EditableContainer = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.HEADER_TITLE,\n})`\n  min-height: 32px;\n  position: relative;\n  overflow: hidden;\n  &.editable-title-component {\n    position: relative;\n    left: -7px;\n    top: -1px;\n    margin-left: -2px;\n    margin-right: -9px;\n    & .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER} {\n      min-height: 32px;\n    }\n    & .${DSInputTextName}-${DSInputTextSlots.INPUT} {\n      font-size: ${({ theme }) => theme.fontSizes.title[800]};\n      line-height: normal;\n      color: ${({ theme }) => theme.colors.neutral['700']};\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n`;\n\nconst StyledInputText = styled(DSInputText, {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.TITLE_INPUT,\n})``;\n\nexport const PageHeaderEditableTitle = (props: PageHeaderEditableTitleT.Props) => {\n  const { children: value, editing: editingProp, showMarker, ...rest } = props;\n  const ownerProps = useOwnerProps(props);\n  const [titleValue, setTitleValue] = useState(value);\n  const [hovered, setHovered] = useState(false);\n  const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n  const [width, setWidth] = useState(0);\n\n  const titleRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (titleRef.current) {\n      setWidth(titleRef.current.offsetWidth);\n    }\n  }, [titleValue, hovered, editing]);\n\n  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {\n    setTitleValue(e.target.value);\n  }, []);\n\n  const handleOnFocus: React.FocusEventHandler = useCallback(() => {\n    setEditing(true);\n  }, [setEditing]);\n\n  const handleOnBlur: React.FocusEventHandler = useCallback(() => {\n    setEditing(false);\n  }, [setEditing]);\n\n  const handleOnMouseOut: React.MouseEventHandler = useCallback(() => {\n    setHovered(false);\n  }, []);\n\n  const globals = useGetGlobalAttributes(rest, {\n    onFocus: handleOnFocus,\n    onMouseOut: handleOnMouseOut,\n    onChange: handleOnChange,\n    onBlur: handleOnBlur,\n  });\n\n  return (\n    <EditableContainer\n      className={hovered || editing ? 'editable-title-component' : ''}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      {...ownerProps}\n      data-testid={DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE}\n    >\n      {hovered || editing ? (\n        <StyledInputText\n          onChange={handleOnChange}\n          {...rest}\n          {...globals}\n          placeholder=\"\"\n          style={{ width: width + 10, minWidth: '260px', maxWidth: '100%' }}\n          value={titleValue}\n          {...ownerProps}\n        />\n      ) : (\n        <div ref={titleRef} style={{ width: 'fit-content' }}>\n          <PageHeaderTitle showMarker={showMarker && !hovered && !editing}>{titleValue}</PageHeaderTitle>\n        </div>\n      )}\n    </EditableContainer>\n  );\n};\n\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = PageHeaderEditableTitlePropTypes as ValidationMap<unknown>;\n\nexport default PageHeaderEditableTitle;\n\nexport { DSPageHeaderEditableTitleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwFf;AAxFR,mBAAsE;AACtE,gCAA+D;AAC/D,uBAAuB;AACvB,8BAAoF;AACpF,sCAAyC;AACzC,+BAAgC;AAChC,uBAA6E;AAC7E,mCAAgF;AAEhF,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUQ,yCAAe,IAAI,2CAAiB,aAAa;AAAA;AAAA;AAAA,SAGjD,yCAAe,IAAI,2CAAiB,KAAK;AAAA,mBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA;AAAA,eAE7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,sBAAkB,yBAAO,uCAAa;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAEM,MAAM,0BAA0B,CAAC,UAA0C;AAChF,QAAM,EAAE,UAAU,OAAO,SAAS,aAAa,YAAY,GAAG,KAAK,IAAI;AACvE,QAAM,iBAAa,uCAAc,KAAK;AACtC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,QAAI,0DAAyB,eAAe,KAAK;AAC3E,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,QAAM,eAAW,qBAAuB,IAAI;AAE5C,oCAAgB,MAAM;AACpB,QAAI,SAAS,SAAS;AACpB,eAAS,SAAS,QAAQ,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,YAAY,SAAS,OAAO,CAAC;AAEjC,QAAM,qBAA6D,0BAAY,CAAC,MAAM;AACpF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC,0BAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAAwC,0BAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAA4C,0BAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,gDAAuB,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,UAAU,6BAA6B;AAAA,MAC7D,cAAc,MAAM,WAAW,IAAI;AAAA,MACnC,cAAc,MAAM,WAAW,KAAK;AAAA,MACnC,GAAG;AAAA,MACJ,eAAa,yCAAwB;AAAA,MAEpC,qBAAW,UACV;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACT,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,aAAY;AAAA,UACZ,OAAO,EAAE,OAAO,QAAQ,IAAI,UAAU,SAAS,UAAU,OAAO;AAAA,UAChE,OAAO;AAAA,UACN,GAAG;AAAA;AAAA,MACN,IAEA,4CAAC,SAAI,KAAK,UAAU,OAAO,EAAE,OAAO,cAAc,GAChD,sDAAC,4CAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA,EAEJ;AAEJ;AAEA,wBAAwB,cAAc;AACtC,MAAM,0CAAsC,kCAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
   "names": []
 }

package/dist/cjs/components/page-header-summary/PageHeaderSummary.js

@@ -36,11 +36,11 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
-var import_exported_related = require("../../exported-related/index.js");
+var import_constants = require("../../constants/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const PageHeaderSummaryWrapper = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSPageHeaderName,
-  slot: import_exported_related.DSPageHeaderSlots.SUMMARY
+  name: import_constants.DSPageHeaderName,
+  slot: import_constants.DSPageHeaderSlots.SUMMARY
 })`
   display: flex;
   flex-direction: row;
@@ -69,12 +69,25 @@ const PageHeaderSummaryWrapper = (0, import_ds_system.styled)("div", {
     width: ${({ theme }) => theme.space.l};
   }
 `;
+const StyledSummaryValue = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSPageHeaderName,
+  slot: import_constants.DSPageHeaderSlots.SUMMARY_VALUE
+})``;
+const StyledSummaryLabel = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSPageHeaderName,
+  slot: import_constants.DSPageHeaderSlots.SUMMARY_LABEL
+})``;
+const StyledSummarySpace = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSPageHeaderName,
+  slot: import_constants.DSPageHeaderSlots.SUMMARY_SPACE
+})``;
 const PageHeaderSummary = (props) => {
   const { value = null, label = "", ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderSummaryWrapper, { "data-testid": import_exported_related.DSPageHeaderDataTestIds.SUMMARY, ...rest, children: [
-    (value === 0 || value) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ph-summary-value", children: value }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ph-summary-label", children: label }),
-    (value === 0 || value || label) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ph-summary-space" })
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderSummaryWrapper, { ...ownerProps, "data-testid": import_constants.DSPageHeaderDataTestIds.SUMMARY, ...rest, children: [
+    (value === 0 || value) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSummaryValue, { className: "ph-summary-value", ...ownerProps, children: value }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSummaryLabel, { className: "ph-summary-label", ...ownerProps, children: label }),
+    (value === 0 || value || label) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSummarySpace, { className: "ph-summary-space", ...ownerProps })
   ] });
 };
 PageHeaderSummary.displayName = "PageHeaderSummary";

package/dist/cjs/components/page-header-summary/PageHeaderSummary.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/page-header-summary/PageHeaderSummary.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../../exported-related/index.js';\nimport { PageHeaderSummaryPropTypes, type PageHeaderSummaryT } from './react-desc-prop-types.js';\n\nconst PageHeaderSummaryWrapper = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.SUMMARY,\n})`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  margin-left: ${({ theme }) => theme.space.xxxs};\n  font-size: ${({ theme }) => theme.fontSizes.title[700]};\n  line-height: ${({ theme }) => theme.lineHeights.m};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  &:before {\n    display: block;\n    content: '';\n    height: 23px;\n    background: ${({ theme }) => theme.colors.neutral[600]};\n    width: 1px;\n    margin-right: ${({ theme }) => theme.space.xxs};\n  }\n  .ph-summary-value {\n    color: ${({ theme }) => theme.colors.neutral[700]};\n    padding-right: ${({ theme }) => theme.space.xxs};\n  }\n  .ph-summary-label {\n    color: ${({ theme }) => theme.colors.neutral[600]};\n  }\n  .ph-summary-space {\n    width: ${({ theme }) => theme.space.l};\n  }\n`;\n\nconst PageHeaderSummary = (props: PageHeaderSummaryT.Props) => {\n  const { value = null, label = '', ...rest } = props;\n  return (\n    <PageHeaderSummaryWrapper data-testid={DSPageHeaderDataTestIds.SUMMARY} {...rest}>\n      {(value === 0 || value) && <div className=\"ph-summary-value\">{value}</div>}\n      {label && <div className=\"ph-summary-label\">{label}</div>}\n      {(value === 0 || value || label) && <div className=\"ph-summary-space\" />}\n    </PageHeaderSummaryWrapper>\n  );\n};\n\nPageHeaderSummary.displayName = 'PageHeaderSummary';\nconst DSPageHeaderSummaryWithSchema = describe(PageHeaderSummary);\n\nDSPageHeaderSummaryWithSchema.propTypes = PageHeaderSummaryPropTypes as ValidationMap<unknown>;\n\nexport { PageHeaderSummary, DSPageHeaderSummaryWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAxCJ,8BAA6C;AAC7C,uBAAuB;AACvB,8BAA6E;AAC7E,mCAAoE;AAEpE,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,eACjC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,CAAC;AAAA,iBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,oBAEtC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,aAGrC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,qBAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,aAGtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,aAGxC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAIzC,MAAM,oBAAoB,CAAC,UAAoC;AAC7D,QAAM,EAAE,QAAQ,MAAM,QAAQ,IAAI,GAAG,KAAK,IAAI;AAC9C,SACE,6CAAC,4BAAyB,eAAa,gDAAwB,SAAU,GAAG,MACxE;AAAA,eAAU,KAAK,UAAU,4CAAC,SAAI,WAAU,oBAAoB,iBAAM;AAAA,IACnE,SAAS,4CAAC,SAAI,WAAU,oBAAoB,iBAAM;AAAA,KACjD,UAAU,KAAK,SAAS,UAAU,4CAAC,SAAI,WAAU,oBAAmB;AAAA,KACxE;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,oCAAgC,kCAAS,iBAAiB;AAEhE,8BAA8B,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, type ValidationMap, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../../constants/index.js';\nimport { PageHeaderSummaryPropTypes, type PageHeaderSummaryT } from './react-desc-prop-types.js';\n\nconst PageHeaderSummaryWrapper = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.SUMMARY,\n})`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  margin-left: ${({ theme }) => theme.space.xxxs};\n  font-size: ${({ theme }) => theme.fontSizes.title[700]};\n  line-height: ${({ theme }) => theme.lineHeights.m};\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  &:before {\n    display: block;\n    content: '';\n    height: 23px;\n    background: ${({ theme }) => theme.colors.neutral[600]};\n    width: 1px;\n    margin-right: ${({ theme }) => theme.space.xxs};\n  }\n  .ph-summary-value {\n    color: ${({ theme }) => theme.colors.neutral[700]};\n    padding-right: ${({ theme }) => theme.space.xxs};\n  }\n  .ph-summary-label {\n    color: ${({ theme }) => theme.colors.neutral[600]};\n  }\n  .ph-summary-space {\n    width: ${({ theme }) => theme.space.l};\n  }\n`;\n\nconst StyledSummaryValue = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.SUMMARY_VALUE,\n})``;\n\nconst StyledSummaryLabel = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.SUMMARY_LABEL,\n})``;\n\nconst StyledSummarySpace = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.SUMMARY_SPACE,\n})``;\n\nconst PageHeaderSummary = (props: PageHeaderSummaryT.Props) => {\n  const { value = null, label = '', ...rest } = props;\n\n  const ownerProps = useOwnerProps(props);\n  return (\n    <PageHeaderSummaryWrapper {...ownerProps} data-testid={DSPageHeaderDataTestIds.SUMMARY} {...rest}>\n      {(value === 0 || value) && (\n        <StyledSummaryValue className=\"ph-summary-value\" {...ownerProps}>\n          {value}\n        </StyledSummaryValue>\n      )}\n      {label && (\n        <StyledSummaryLabel className=\"ph-summary-label\" {...ownerProps}>\n          {label}\n        </StyledSummaryLabel>\n      )}\n      {(value === 0 || value || label) && <StyledSummarySpace className=\"ph-summary-space\" {...ownerProps} />}\n    </PageHeaderSummaryWrapper>\n  );\n};\n\nPageHeaderSummary.displayName = 'PageHeaderSummary';\nconst DSPageHeaderSummaryWithSchema = describe(PageHeaderSummary);\n\nDSPageHeaderSummaryWithSchema.propTypes = PageHeaderSummaryPropTypes as ValidationMap<unknown>;\n\nexport { PageHeaderSummary, DSPageHeaderSummaryWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0DnB;AAzDJ,8BAA4D;AAC5D,uBAAuB;AACvB,uBAA6E;AAC7E,mCAAoE;AAEpE,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,eACjC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBACvC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,CAAC;AAAA,iBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,oBAEtC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,aAGrC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,qBAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,aAGtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,aAGxC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAIzC,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAED,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAED,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAED,MAAM,oBAAoB,CAAC,UAAoC;AAC7D,QAAM,EAAE,QAAQ,MAAM,QAAQ,IAAI,GAAG,KAAK,IAAI;AAE9C,QAAM,iBAAa,uCAAc,KAAK;AACtC,SACE,6CAAC,4BAA0B,GAAG,YAAY,eAAa,yCAAwB,SAAU,GAAG,MACxF;AAAA,eAAU,KAAK,UACf,4CAAC,sBAAmB,WAAU,oBAAoB,GAAG,YAClD,iBACH;AAAA,IAED,SACC,4CAAC,sBAAmB,WAAU,oBAAoB,GAAG,YAClD,iBACH;AAAA,KAEA,UAAU,KAAK,SAAS,UAAU,4CAAC,sBAAmB,WAAU,oBAAoB,GAAG,YAAY;AAAA,KACvG;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,oCAAgC,kCAAS,iBAAiB;AAEhE,8BAA8B,YAAY;",
   "names": []
 }

package/dist/cjs/components/page-header-title/PageHeaderTitle.js

@@ -37,13 +37,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
-var import_ds_form = require("@elliemae/ds-form");
-var import_exported_related = require("../../exported-related/index.js");
+var import_RequiredMark = require("./RequiredMark.js");
+var import_constants = require("../../constants/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_react_desc_prop_types2 = require("./react-desc-prop-types.js");
 const PageHeaderTitleWrapper = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSPageHeaderName,
-  slot: import_exported_related.DSPageHeaderSlots.HEADER_TITLE
+  name: import_constants.DSPageHeaderName,
+  slot: import_constants.DSPageHeaderSlots.HEADER_TITLE
 })`
   display: grid;
   font-size: ${({ theme }) => theme.fontSizes.title[800]};
@@ -59,10 +59,14 @@ const PageHeaderTitleWrapper = (0, import_ds_system.styled)("div", {
     right: 0;
   }
 `;
-const PageHeaderTitle = ({ children = "", showMarker = false, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderTitleWrapper, { ...rest, "data-testid": import_exported_related.DSPageHeaderDataTestIds.HEADER_TITLE, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, { value: children }) }),
-  showMarker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.RequiredMark, { required: true })
-] });
+const PageHeaderTitle = (props) => {
+  const { children, showMarker, ...rest } = props;
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageHeaderTitleWrapper, { ...rest, ...ownerProps, "data-testid": import_constants.DSPageHeaderDataTestIds.HEADER_TITLE, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, { value: children }) }),
+    showMarker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RequiredMark.RequiredMark, { required: true, ownerProps })
+  ] });
+};
 PageHeaderTitle.defaultProps = import_react_desc_prop_types2.defaultProps;
 PageHeaderTitle.displayName = "PageHeaderTitle";
 const DSPageHeaderTitleWithSchema = (0, import_ds_props_helpers.describe)(PageHeaderTitle);

package/dist/cjs/components/page-header-title/PageHeaderTitle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/page-header-title/PageHeaderTitle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { RequiredMark } from '@elliemae/ds-form';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../../exported-related/index.js';\nimport { PageHeaderTitlePropTypes, type PageHeaderTitleT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\n\nconst PageHeaderTitleWrapper = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.HEADER_TITLE,\n})`\n  display: grid;\n  font-size: ${({ theme }) => theme.fontSizes.title[800]};\n  color: ${({ theme }) => theme.colors.neutral['700']};\n  line-height: normal;\n  font-weight: 400;\n  margin: 0;\n  margin-right: 0.61538rem;\n\n  & .em-ds-form-required-mark {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n`;\n\nconst PageHeaderTitle = ({ children = '', showMarker = false, ...rest }: PageHeaderTitleT.Props) => (\n  <PageHeaderTitleWrapper {...rest} data-testid={DSPageHeaderDataTestIds.HEADER_TITLE}>\n    <TooltipTextProvider>\n      <DSTruncatedTooltipText value={children} />\n    </TooltipTextProvider>\n    {showMarker && <RequiredMark required />}\n  </PageHeaderTitleWrapper>\n);\n\nPageHeaderTitle.defaultProps = defaultProps;\nPageHeaderTitle.displayName = 'PageHeaderTitle';\nconst DSPageHeaderTitleWithSchema = describe(PageHeaderTitle);\n\nDSPageHeaderTitleWithSchema.propTypes = PageHeaderTitlePropTypes as ValidationMap<unknown>;\n\nexport { PageHeaderTitle, DSPageHeaderTitleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BrB;AA5BF,uBAAuB;AACvB,8BAA6C;AAC7C,uCAA4D;AAC5D,qBAA6B;AAC7B,8BAA6E;AAC7E,mCAAgE;AAChE,IAAAA,gCAA6B;AAE7B,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,WAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAarD,MAAM,kBAAkB,CAAC,EAAE,WAAW,IAAI,aAAa,OAAO,GAAG,KAAK,MACpE,6CAAC,0BAAwB,GAAG,MAAM,eAAa,gDAAwB,cACrE;AAAA,8CAAC,wDACC,sDAAC,2DAAuB,OAAO,UAAU,GAC3C;AAAA,EACC,cAAc,4CAAC,+BAAa,UAAQ,MAAC;AAAA,GACxC;AAGF,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, type ValidationMap, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { RequiredMark } from './RequiredMark.js';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../../constants/index.js';\nimport { PageHeaderTitlePropTypes, type PageHeaderTitleT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\n\nconst PageHeaderTitleWrapper = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.HEADER_TITLE,\n})`\n  display: grid;\n  font-size: ${({ theme }) => theme.fontSizes.title[800]};\n  color: ${({ theme }) => theme.colors.neutral['700']};\n  line-height: normal;\n  font-weight: 400;\n  margin: 0;\n  margin-right: 0.61538rem;\n\n  & .em-ds-form-required-mark {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n`;\n\nconst PageHeaderTitle = (props: PageHeaderTitleT.Props) => {\n  const { children, showMarker, ...rest } = props;\n  const ownerProps = useOwnerProps(props);\n  return (\n    <PageHeaderTitleWrapper {...rest} {...ownerProps} data-testid={DSPageHeaderDataTestIds.HEADER_TITLE}>\n      <TooltipTextProvider>\n        <DSTruncatedTooltipText value={children} />\n      </TooltipTextProvider>\n      {showMarker && <RequiredMark required ownerProps={ownerProps} />}\n    </PageHeaderTitleWrapper>\n  );\n};\n\nPageHeaderTitle.defaultProps = defaultProps;\nPageHeaderTitle.displayName = 'PageHeaderTitle';\nconst DSPageHeaderTitleWithSchema = describe(PageHeaderTitle);\n\nDSPageHeaderTitleWithSchema.propTypes = PageHeaderTitlePropTypes as ValidationMap<unknown>;\n\nexport { PageHeaderTitle, DSPageHeaderTitleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AA/BJ,uBAAuB;AACvB,8BAA4D;AAC5D,uCAA4D;AAC5D,0BAA6B;AAC7B,uBAA6E;AAC7E,mCAAgE;AAChE,IAAAA,gCAA6B;AAE7B,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,WAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAarD,MAAM,kBAAkB,CAAC,UAAkC;AACzD,QAAM,EAAE,UAAU,YAAY,GAAG,KAAK,IAAI;AAC1C,QAAM,iBAAa,uCAAc,KAAK;AACtC,SACE,6CAAC,0BAAwB,GAAG,MAAO,GAAG,YAAY,eAAa,yCAAwB,cACrF;AAAA,gDAAC,wDACC,sDAAC,2DAAuB,OAAO,UAAU,GAC3C;AAAA,IACC,cAAc,4CAAC,oCAAa,UAAQ,MAAC,YAAwB;AAAA,KAChE;AAEJ;AAEA,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
   "names": ["import_react_desc_prop_types"]
 }

package/dist/cjs/components/page-header-title/RequiredMark.js

@@ -0,0 +1,63 @@
+"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 RequiredMark_exports = {};
+__export(RequiredMark_exports, {
+  DSRequiredMark: () => RequiredMark,
+  RequiredMark: () => RequiredMark,
+  default: () => RequiredMark_default
+});
+module.exports = __toCommonJS(RequiredMark_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
+const Mark = (0, import_ds_system.styled)("span", {
+  name: import_constants.DSPageHeaderName,
+  slot: import_constants.DSPageHeaderSlots.REQUIRED_MARK
+})`
+  margin-left: ${({ theme }) => theme?.space?.xxs ?? "4px"};
+  position: relative;
+  bottom: ${({ theme, $inLegend }) => $inLegend ? "6px" : theme?.space?.xxs ?? "4px"};
+  font-size: 0.5rem;
+  ${({ $variant, theme }) => $variant === "required" ? import_ds_system.css`
+          color: ${theme?.colors?.danger?.[900]};
+        ` : import_ds_system.css`
+          color: ${theme?.colors?.brand?.[600]};
+          font-weight: 600;
+        `};
+`;
+const RequiredMark = ({ required = false, optional = false, ownerProps }) => {
+  if (!required && !optional) return null;
+  if (required) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mark, { className: "em-ds-form-required-mark", $variant: "required", "aria-hidden": "true", ...ownerProps, children: "\u25CF" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mark, { className: "em-ds-form-optional-mark", $variant: "optional", "aria-hidden": "true", ...ownerProps, children: "\u26AC" });
+};
+var RequiredMark_default = RequiredMark;
+//# sourceMappingURL=RequiredMark.js.map

package/dist/cjs/components/page-header-title/RequiredMark.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/page-header-title/RequiredMark.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-types */\n// RequiredMark.tsx\nimport React from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { PageHeaderTitleT } from './react-desc-prop-types.js';\nimport { DSPageHeaderName, DSPageHeaderSlots } from '../../constants/index.js';\nexport type RequiredMarkProps = {\n  required?: boolean;\n  optional?: boolean;\n  ownerProps: {\n    getOwnerProps: () => PageHeaderTitleT.Props;\n    getOwnerPropsArguments: () => {};\n  };\n};\n\nconst Mark = styled('span', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.REQUIRED_MARK,\n})<{\n  $variant: 'required' | 'optional';\n  $inLegend?: boolean;\n}>`\n  margin-left: ${({ theme }) => theme?.space?.xxs ?? '4px'};\n  position: relative;\n  bottom: ${({ theme, $inLegend }) => ($inLegend ? '6px' : (theme?.space?.xxs ?? '4px'))};\n  font-size: 0.5rem;\n  ${({ $variant, theme }) =>\n    $variant === 'required'\n      ? css`\n          color: ${theme?.colors?.danger?.[900]};\n        `\n      : css`\n          color: ${theme?.colors?.brand?.[600]};\n          font-weight: 600;\n        `};\n`;\nconst RequiredMark: React.FC<RequiredMarkProps> = ({ required = false, optional = false, ownerProps }) => {\n  if (!required && !optional) return null;\n\n  if (required) {\n    return (\n      <Mark className=\"em-ds-form-required-mark\" $variant=\"required\" aria-hidden=\"true\" {...ownerProps}>\n        &#9679;\n      </Mark>\n    );\n  }\n\n  return (\n    <Mark className=\"em-ds-form-optional-mark\" $variant=\"optional\" aria-hidden=\"true\" {...ownerProps}>\n      &#9900;\n    </Mark>\n  );\n};\n\nexport { RequiredMark, RequiredMark as DSRequiredMark };\nexport default RequiredMark;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCjB;AAtCN,uBAA4B;AAE5B,uBAAoD;AAUpD,MAAM,WAAO,yBAAO,QAAQ;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA,iBAIgB,CAAC,EAAE,MAAM,MAAM,OAAO,OAAO,OAAO,KAAK;AAAA;AAAA,YAE9C,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,QAAS,OAAO,OAAO,OAAO,KAAO;AAAA;AAAA,IAEpF,CAAC,EAAE,UAAU,MAAM,MACnB,aAAa,aACT;AAAA,mBACW,OAAO,QAAQ,SAAS,GAAG,CAAC;AAAA,YAEvC;AAAA,mBACW,OAAO,QAAQ,QAAQ,GAAG,CAAC;AAAA;AAAA,SAErC;AAAA;AAET,MAAM,eAA4C,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,WAAW,MAAM;AACxG,MAAI,CAAC,YAAY,CAAC,SAAU,QAAO;AAEnC,MAAI,UAAU;AACZ,WACE,4CAAC,QAAK,WAAU,4BAA2B,UAAS,YAAW,eAAY,QAAQ,GAAG,YAAY,oBAElG;AAAA,EAEJ;AAEA,SACE,4CAAC,QAAK,WAAU,4BAA2B,UAAS,YAAW,eAAY,QAAQ,GAAG,YAAY,oBAElG;AAEJ;AAGA,IAAO,uBAAQ;",
+  "names": []
+}

package/dist/cjs/components/page-header-title/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/page-header-title/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\n\nexport declare namespace PageHeaderTitleT {\n  export interface DefaultProps {\n    children: string;\n    showMarker: boolean;\n  }\n\n  export interface OptionalProps {}\n\n  export interface RequiredProps {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      RequiredProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      RequiredProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: PageHeaderTitleT.DefaultProps = {\n  children: '',\n  showMarker: false,\n};\n\nexport const PageHeaderTitlePropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /** page header title string */\n  children: PropTypes.string.description('Page header title string'),\n  /** show required mark */\n  showMarker: PropTypes.bool.description('show required mark'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AA4BhE,MAAM,eAA8C;AAAA,EACzD,UAAU;AAAA,EACV,YAAY;AACd;AAEO,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,UAAU,kCAAU,OAAO,YAAY,0BAA0B;AAAA;AAAA,EAEjE,YAAY,kCAAU,KAAK,YAAY,oBAAoB;AAC7D;",
+  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\n\nexport declare namespace PageHeaderTitleT {\n  export interface DefaultProps {\n    children: string;\n    showMarker: boolean;\n  }\n\n  export interface OptionalProps {}\n\n  export interface RequiredProps {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      RequiredProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps>,\n      XstyledProps {\n    as?: React.ElementType;\n  }\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      RequiredProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: PageHeaderTitleT.DefaultProps = {\n  children: '',\n  showMarker: false,\n};\n\nexport const PageHeaderTitlePropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /** page header title string */\n  children: PropTypes.string.description('Page header title string'),\n  /** show required mark */\n  showMarker: PropTypes.bool.description('show required mark'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AA8BhE,MAAM,eAA8C;AAAA,EACzD,UAAU;AAAA,EACV,YAAY;AACd;AAEO,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,UAAU,kCAAU,OAAO,YAAY,0BAA0B;AAAA;AAAA,EAEjE,YAAY,kCAAU,KAAK,YAAY,oBAAoB;AAC7D;",
   "names": []
 }

package/dist/cjs/config/usePageHeader.js

@@ -36,10 +36,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
 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_constants = require("../constants/index.js");
 var import_exported_related = require("../exported-related/index.js");
 const usePageHeader = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.PageHeaderPropTypes, import_exported_related.DSPageHeaderName);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.PageHeaderPropTypes, import_constants.DSPageHeaderName);
   const {
     menu,
     Menu,
@@ -58,6 +59,7 @@ const usePageHeader = (props) => {
   } = props;
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
   const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefaults);
   const currentBackArrow = (0, import_react.useMemo)(() => {
     if (isSkeleton && (Backarrow || backarrow)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_exported_related.BackArrowSkeleton, {});
     if (Backarrow) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Backarrow, {});
@@ -105,6 +107,7 @@ const usePageHeader = (props) => {
       currentSummary,
       currentToolbar,
       currentPageTitle,
+      ownerProps,
       ...rest
     }),
     [
@@ -116,6 +119,7 @@ const usePageHeader = (props) => {
       currentSummary,
       currentToolbar,
       globalAttributes,
+      ownerProps,
       rest,
       xStyledProps
     ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/usePageHeader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport {\n  useValidateTypescriptPropTypes,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\n\nimport type { DSPageHeaderT } from '../react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport {\n  DSPageHeaderName,\n  BackArrowSkeleton,\n  BreadcrumbSkeleton,\n  MenuSkeleton,\n  PageTitleSkeleton,\n  SummarySkeleton,\n  ToolbarSkeleton,\n} from '../exported-related/index.js';\nexport const usePageHeader = (props: DSPageHeaderT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSPageHeaderT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes, DSPageHeaderName);\n\n  const {\n    menu,\n    Menu,\n    pageTitle,\n    PageTitle,\n    toolbar,\n    Toolbar,\n    summary,\n    Summary,\n    backarrow,\n    Backarrow,\n    breadcrumbs,\n    Breadcrumbs,\n    isSkeleton,\n    ...rest\n  } = props;\n\n  const globalAttributes = useGetGlobalAttributes<DSPageHeaderT.InternalProps, HTMLDivElement>(propsWithDefaults);\n  const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const currentBackArrow = useMemo(() => {\n    if (isSkeleton && (Backarrow || backarrow)) return <BackArrowSkeleton />;\n    if (Backarrow) return <Backarrow />;\n    if (backarrow) return backarrow;\n    return undefined;\n  }, [Backarrow, backarrow, isSkeleton]);\n\n  const CurrentMenu = useMemo(() => {\n    if (isSkeleton && (Menu || menu)) return MenuSkeleton;\n    if (Menu) return Menu;\n    if (menu) return () => menu;\n    return undefined;\n  }, [Menu, menu, isSkeleton]);\n\n  const currentBreadcrumbs = useMemo(() => {\n    if (isSkeleton && (Breadcrumbs || breadcrumbs)) return <BreadcrumbSkeleton />;\n    if (Breadcrumbs) return <Breadcrumbs />;\n    if (breadcrumbs) return breadcrumbs;\n    return undefined;\n  }, [Breadcrumbs, breadcrumbs, isSkeleton]);\n\n  const currentSummary = useMemo(() => {\n    if (isSkeleton && (Summary || summary)) return <SummarySkeleton />;\n    if (Summary) return <Summary />;\n    if (summary) return summary;\n    return undefined;\n  }, [Summary, summary, isSkeleton]);\n\n  const currentToolbar = useMemo(() => {\n    if (isSkeleton && (Toolbar || toolbar)) return <ToolbarSkeleton />;\n    if (Toolbar) return <Toolbar />;\n    if (toolbar) return toolbar;\n    return undefined;\n  }, [Toolbar, toolbar, isSkeleton]);\n\n  const currentPageTitle = useMemo(() => {\n    if (isSkeleton && (PageTitle || pageTitle)) return <PageTitleSkeleton />;\n    if (PageTitle) return <PageTitle />;\n    if (pageTitle) return pageTitle;\n    return undefined;\n  }, [PageTitle, pageTitle, isSkeleton]);\n\n  return useMemo(\n    () => ({\n      propsWithDefaults,\n      globalAttributes,\n      xStyledProps,\n      currentBackArrow,\n      CurrentMenu,\n      currentBreadcrumbs,\n      currentSummary,\n      currentToolbar,\n      currentPageTitle,\n      ...rest,\n    }),\n    [\n      propsWithDefaults,\n      currentBackArrow,\n      currentBreadcrumbs,\n      CurrentMenu,\n      currentPageTitle,\n      currentSummary,\n      currentToolbar,\n      globalAttributes,\n      rest,\n      xStyledProps,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CgC;AA5CvD,mBAAwB;AACxB,8BAKO;AAGP,mCAAkD;AAClD,8BAQO;AACA,MAAM,gBAAgB,CAAC,UAA+B;AAC3D,QAAM,wBAAoB,sDAA0D,OAAO,yCAAY;AACvG,8DAA+B,mBAAmB,kDAAqB,wCAAgB;AAEvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,uBAAmB,gDAAoE,iBAAiB;AAC9G,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,eAAe,aAAa,WAAY,QAAO,4CAAC,6CAAkB;AACtE,QAAI,UAAW,QAAO,4CAAC,aAAU;AACjC,QAAI,UAAW,QAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,WAAW,UAAU,CAAC;AAErC,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,eAAe,QAAQ,MAAO,QAAO;AACzC,QAAI,KAAM,QAAO;AACjB,QAAI,KAAM,QAAO,MAAM;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,UAAU,CAAC;AAE3B,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,QAAI,eAAe,eAAe,aAAc,QAAO,4CAAC,8CAAmB;AAC3E,QAAI,YAAa,QAAO,4CAAC,eAAY;AACrC,QAAI,YAAa,QAAO;AACxB,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,aAAa,UAAU,CAAC;AAEzC,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,eAAe,WAAW,SAAU,QAAO,4CAAC,2CAAgB;AAChE,QAAI,QAAS,QAAO,4CAAC,WAAQ;AAC7B,QAAI,QAAS,QAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,SAAS,UAAU,CAAC;AAEjC,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,eAAe,WAAW,SAAU,QAAO,4CAAC,2CAAgB;AAChE,QAAI,QAAS,QAAO,4CAAC,WAAQ;AAC7B,QAAI,QAAS,QAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,SAAS,UAAU,CAAC;AAEjC,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,eAAe,aAAa,WAAY,QAAO,4CAAC,6CAAkB;AACtE,QAAI,UAAW,QAAO,4CAAC,aAAU;AACjC,QAAI,UAAW,QAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,WAAW,UAAU,CAAC;AAErC,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport {\n  useValidateTypescriptPropTypes,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\n\nimport type { DSPageHeaderT } from '../react-desc-prop-types.js';\nimport { PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSPageHeaderName } from '../constants/index.js';\nimport {\n  BackArrowSkeleton,\n  BreadcrumbSkeleton,\n  MenuSkeleton,\n  PageTitleSkeleton,\n  SummarySkeleton,\n  ToolbarSkeleton,\n} from '../exported-related/index.js';\nexport const usePageHeader = (props: DSPageHeaderT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSPageHeaderT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes, DSPageHeaderName);\n\n  const {\n    menu,\n    Menu,\n    pageTitle,\n    PageTitle,\n    toolbar,\n    Toolbar,\n    summary,\n    Summary,\n    backarrow,\n    Backarrow,\n    breadcrumbs,\n    Breadcrumbs,\n    isSkeleton,\n    ...rest\n  } = props;\n\n  const globalAttributes = useGetGlobalAttributes<DSPageHeaderT.InternalProps, HTMLDivElement>(propsWithDefaults);\n  const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const ownerProps = useOwnerProps(propsWithDefaults);\n\n  const currentBackArrow = useMemo(() => {\n    if (isSkeleton && (Backarrow || backarrow)) return <BackArrowSkeleton />;\n    if (Backarrow) return <Backarrow />;\n    if (backarrow) return backarrow;\n    return undefined;\n  }, [Backarrow, backarrow, isSkeleton]);\n\n  const CurrentMenu = useMemo(() => {\n    if (isSkeleton && (Menu || menu)) return MenuSkeleton;\n    if (Menu) return Menu;\n    if (menu) return () => menu;\n    return undefined;\n  }, [Menu, menu, isSkeleton]);\n\n  const currentBreadcrumbs = useMemo(() => {\n    if (isSkeleton && (Breadcrumbs || breadcrumbs)) return <BreadcrumbSkeleton />;\n    if (Breadcrumbs) return <Breadcrumbs />;\n    if (breadcrumbs) return breadcrumbs;\n    return undefined;\n  }, [Breadcrumbs, breadcrumbs, isSkeleton]);\n\n  const currentSummary = useMemo(() => {\n    if (isSkeleton && (Summary || summary)) return <SummarySkeleton />;\n    if (Summary) return <Summary />;\n    if (summary) return summary;\n    return undefined;\n  }, [Summary, summary, isSkeleton]);\n\n  const currentToolbar = useMemo(() => {\n    if (isSkeleton && (Toolbar || toolbar)) return <ToolbarSkeleton />;\n    if (Toolbar) return <Toolbar />;\n    if (toolbar) return toolbar;\n    return undefined;\n  }, [Toolbar, toolbar, isSkeleton]);\n\n  const currentPageTitle = useMemo(() => {\n    if (isSkeleton && (PageTitle || pageTitle)) return <PageTitleSkeleton />;\n    if (PageTitle) return <PageTitle />;\n    if (pageTitle) return pageTitle;\n    return undefined;\n  }, [PageTitle, pageTitle, isSkeleton]);\n\n  return useMemo(\n    () => ({\n      propsWithDefaults,\n      globalAttributes,\n      xStyledProps,\n      currentBackArrow,\n      CurrentMenu,\n      currentBreadcrumbs,\n      currentSummary,\n      currentToolbar,\n      currentPageTitle,\n      ownerProps,\n      ...rest,\n    }),\n    [\n      propsWithDefaults,\n      currentBackArrow,\n      currentBreadcrumbs,\n      CurrentMenu,\n      currentPageTitle,\n      currentSummary,\n      currentToolbar,\n      globalAttributes,\n      ownerProps,\n      rest,\n      xStyledProps,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDgC;AA/CvD,mBAAwB;AACxB,8BAMO;AAGP,mCAAkD;AAClD,uBAAiC;AACjC,8BAOO;AACA,MAAM,gBAAgB,CAAC,UAA+B;AAC3D,QAAM,wBAAoB,sDAA0D,OAAO,yCAAY;AACvG,8DAA+B,mBAAmB,kDAAqB,iCAAgB;AAEvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,uBAAmB,gDAAoE,iBAAiB;AAC9G,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,iBAAa,uCAAc,iBAAiB;AAElD,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,eAAe,aAAa,WAAY,QAAO,4CAAC,6CAAkB;AACtE,QAAI,UAAW,QAAO,4CAAC,aAAU;AACjC,QAAI,UAAW,QAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,WAAW,UAAU,CAAC;AAErC,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,eAAe,QAAQ,MAAO,QAAO;AACzC,QAAI,KAAM,QAAO;AACjB,QAAI,KAAM,QAAO,MAAM;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,UAAU,CAAC;AAE3B,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,QAAI,eAAe,eAAe,aAAc,QAAO,4CAAC,8CAAmB;AAC3E,QAAI,YAAa,QAAO,4CAAC,eAAY;AACrC,QAAI,YAAa,QAAO;AACxB,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,aAAa,UAAU,CAAC;AAEzC,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,eAAe,WAAW,SAAU,QAAO,4CAAC,2CAAgB;AAChE,QAAI,QAAS,QAAO,4CAAC,WAAQ;AAC7B,QAAI,QAAS,QAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,SAAS,UAAU,CAAC;AAEjC,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,eAAe,WAAW,SAAU,QAAO,4CAAC,2CAAgB;AAChE,QAAI,QAAS,QAAO,4CAAC,WAAQ;AAC7B,QAAI,QAAS,QAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,SAAS,UAAU,CAAC;AAEjC,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,eAAe,aAAa,WAAY,QAAO,4CAAC,6CAAkB;AACtE,QAAI,UAAW,QAAO,4CAAC,aAAU;AACjC,QAAI,UAAW,QAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,WAAW,UAAU,CAAC;AAErC,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/{exported-related/theming.js → constants/index.js}

@@ -26,20 +26,41 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var theming_exports = {};
-__export(theming_exports, {
+var constants_exports = {};
+__export(constants_exports, {
+  DSPageHeaderDataTestIds: () => DSPageHeaderDataTestIds,
   DSPageHeaderName: () => DSPageHeaderName,
-  DSPageHeaderSlots: () => DSPageHeaderSlots
+  DSPageHeaderSlots: () => DSPageHeaderSlots,
+  FONT_DETECTOR: () => FONT_DETECTOR
 });
-module.exports = __toCommonJS(theming_exports);
+module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
 const DSPageHeaderName = "DSPageheader";
 const DSPageHeaderSlots = {
   CONTAINER: "root",
   HEADER_TITLE: "header-title",
+  TITLE_INPUT: "title-input",
   TOOLBAR: "toolbar",
   MENU: "menu",
   SUMMARY: "summary",
-  BACK: "back"
+  SUMMARY_VALUE: "summary-value",
+  SUMMARY_LABEL: "summary-label",
+  SUMMARY_SPACE: "summary-space",
+  BACK: "back",
+  REQUIRED_MARK: "required-mark",
+  BREADCRUMB: "breadcrumb"
 };
-//# sourceMappingURL=theming.js.map
+const DSPageHeaderDataTestIds = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSPageHeaderName, DSPageHeaderSlots),
+  CONTAINER: "ds-page-header-container",
+  HEADER_TITLE: "ds-page-header-title",
+  EDITABLE_HEADER_TITLE: "ds-page-header-editable-title",
+  SUMMARY: "ds-page-header-summary"
+};
+const FONT_DETECTOR = {
+  SMALL: 1,
+  MEDIUM: 2,
+  LARGE: 3
+};
+//# sourceMappingURL=index.js.map