@elliemae/ds-page-header 3.0.0-next.9 → 3.0.1

package/dist/esm/v1/EditableTitle.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/EditableTitle.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState } from 'react';\nimport { useDerivedStateFromProps } from '@elliemae/ds-utilities';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { runAll } from '@elliemae/ds-utilities';\nimport DSInput from '@elliemae/ds-form/Input';\nimport Title from './Title';\n\nconst blockName = 'page-header';\n\nconst EditableTitleComponent = aggregatedClasses(DSInput)(\n  `${blockName}-title`,\n  'editable-title',\n);\n\nfunction EditableTitle({\n  children: value,\n  editing: editingProp,\n  titleInputProps,\n}) {\n  const [titleValue, setTitleValue] = useState(value);\n  const [hovered, setHovered] = useState(false);\n  const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n  const titleRef = useRef(null);\n  return (\n    <>\n      {hovered || editing ? (\n        <EditableTitleComponent\n          {...titleInputProps}\n          onBlur={runAll(() => setEditing(false), titleInputProps.onBlur)}\n          onChange={runAll(\n            (e) => setTitleValue(e.target.value),\n            titleInputProps.onChange,\n          )}\n          onFocus={runAll(() => setEditing(true), titleInputProps.onFocus)}\n          onMouseOut={runAll(\n            () => setHovered(false),\n            titleInputProps.onMouseOut,\n          )}\n          value={titleValue}\n        />\n      ) : (\n        <div ref={titleRef} onMouseEnter={() => setHovered(true)}>\n          <Title>{titleValue}</Title>\n        </div>\n      )}\n    </>\n  );\n}\n\nEditableTitle.propTypes = {\n  /** The title text */\n  children: PropTypes.string,\n  /** Whether the title is editing or not */\n  editing: PropTypes.bool,\n};\n\nexport default EditableTitle;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,yBAAyB,kBAAkB,SAC/C,GAAG,mBACH;AAGF,uBAAuB;AAAA,EACrB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,GACC;AACD,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,SAAS,cAAc,SAAS;AACvC,QAAM,CAAC,SAAS,cAAc,yBAAyB,eAAe;AACtE,QAAM,WAAW,OAAO;AACxB,SACE,4DACG,WAAW,UACV,qCAAC,wBAAD,iCACM,kBADN;AAAA,IAEE,QAAQ,OAAO,MAAM,WAAW,QAAQ,gBAAgB;AAAA,IACxD,UAAU,OACR,CAAC,MAAM,cAAc,EAAE,OAAO,QAC9B,gBAAgB;AAAA,IAElB,SAAS,OAAO,MAAM,WAAW,OAAO,gBAAgB;AAAA,IACxD,YAAY,OACV,MAAM,WAAW,QACjB,gBAAgB;AAAA,IAElB,OAAO;AAAA,QAGT,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAU,cAAc,MAAM,WAAW;AAAA,KACjD,qCAAC,OAAD,MAAQ;AAAA;AAOlB,cAAc,YAAY;AAAA,EAExB,UAAU,UAAU;AAAA,EAEpB,SAAS,UAAU;AAAA;AAGrB,IAAO,wBAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,yBAAyB,kBAAkB,OAAO,EACtD,GAAG,mBACH,gBACF;AAEA,uBAAuB;AAAA,EACrB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,GACC;AACD,QAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,cAAc,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,cAAc,yBAAyB,eAAe,KAAK;AAC3E,QAAM,WAAW,OAAO,IAAI;AAC5B,SACE,4DACG,WAAW,UACV,qCAAC,yDACK,kBADL;AAAA,IAEC,QAAQ,OAAO,MAAM,WAAW,KAAK,GAAG,gBAAgB,MAAM;AAAA,IAC9D,UAAU,OACR,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK,GACnC,gBAAgB,QAClB;AAAA,IACA,SAAS,OAAO,MAAM,WAAW,IAAI,GAAG,gBAAgB,OAAO;AAAA,IAC/D,YAAY,OACV,MAAM,WAAW,KAAK,GACtB,gBAAgB,UAClB;AAAA,IACA,OAAO;AAAA,IACT,IAEA,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAU,cAAc,MAAM,WAAW,IAAI;AAAA,KACrD,qCAAC,aAAO,UAAW,CACrB,CAEJ;AAEJ;AAEA,cAAc,YAAY;AAAA,EAExB,UAAU,UAAU;AAAA,EAEpB,SAAS,UAAU;AACrB;AAEA,IAAO,wBAAQ;",
   "names": []
 }

package/dist/esm/v1/PageHeaderImpl.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/PageHeaderImpl.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport DSBreadcrumb from '@elliemae/ds-breadcrumb';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport EditableTitle from './EditableTitle';\nimport Title from './Title';\nimport DropdownTitle from './DropdownTitle';\n\nconst blockName = 'page-header';\n\nconst PageHeaderContainer = aggregatedClasses('div')(blockName, null, ({ withBottomSeparator, subtitle }) => ({\n  'with-bottom-separator': withBottomSeparator,\n  'with-subtitle': subtitle,\n}));\n\nconst PageHeaderMainSection = aggregatedClasses('div')(`${blockName}-main-section`);\nconst PageHeaderTitleSection = aggregatedClasses('div')(`${blockName}-title-section`);\nconst PageHeaderToolbar = aggregatedClasses('div')(`${blockName}-toolbar`, null, () => ({\n  'ie-flex-basis-auto': true,\n}));\nconst PageHeaderBreadcrumb = aggregatedClasses(DSBreadcrumb)(`${blockName}-breadcrumb`);\n\nconst PageHeaderTitle = aggregatedClasses('div')(`${blockName}-title`);\nconst Subtitle = aggregatedClasses('div')(`${blockName}-title`, 'subtitle');\nconst BackArrow = aggregatedClasses(ChevronLeft)(`${blockName}-backarrow`);\n\nfunction HeaderTitle({\n  title = '',\n  options = [],\n  optionsMinWidth,\n  onSelectOption = () => null,\n  selection,\n  subtitle = '',\n  editable = false,\n  editing = false,\n  titleInputProps,\n  zIndex,\n}) {\n  const titleComponent = editable ? (\n    <EditableTitle editing={editing} titleInputProps={titleInputProps}>\n      {title}\n    </EditableTitle>\n  ) : (\n    <Title>{title}</Title>\n  );\n\n  return (\n    <PageHeaderTitle>\n      {options.length ? (\n        <DropdownTitle\n          onSelectOption={onSelectOption}\n          options={options}\n          optionsMinWidth={optionsMinWidth}\n          selection={selection}\n          titleComponent={titleComponent}\n          zIndex={zIndex}\n        />\n      ) : (\n        titleComponent\n      )}\n      {subtitle && <Subtitle>{subtitle}</Subtitle>}\n    </PageHeaderTitle>\n  );\n}\n\nfunction PageHeaderImpl({\n  containerProps,\n  className,\n  title,\n  titleOptions,\n  renderToolbar,\n  breadcrumbs = [],\n  previousPage,\n  onGoToPreviousPage = () => null,\n  subtitle = '',\n  withBottomSeparator,\n  onSelectOption,\n  optionsSelection,\n  optionsMinWidth,\n  editable = false,\n  titleInputProps,\n  editing = undefined,\n  zIndex,\n}) {\n  const hasBreadcrumbs = !!breadcrumbs.length;\n\n  return (\n    <PageHeaderContainer\n      {...containerProps}\n      className={className}\n      classProps={{\n        withBottomSeparator,\n        subtitle,\n      }}\n    >\n      {previousPage && <BackArrow data-testid=\"back-arrow\" onClick={onGoToPreviousPage} size={DSIconSizes.M} />}\n      <PageHeaderMainSection>\n        {hasBreadcrumbs && (\n          <PageHeaderBreadcrumb>\n            {breadcrumbs.map((breadcrumb) => (\n              <DSBreadcrumb.Item key={breadcrumb.label} {...breadcrumb} />\n            ))}\n          </PageHeaderBreadcrumb>\n        )}\n        {previousPage && (\n          <PageHeaderBreadcrumb>\n            <DSBreadcrumb.Item\n              key={previousPage.id}\n              label={previousPage.title}\n              onClick={previousPage.onClick}\n              {...previousPage}\n            />\n          </PageHeaderBreadcrumb>\n        )}\n        <PageHeaderTitleSection>\n          <HeaderTitle\n            editable={editable}\n            editing={editing}\n            onSelectOption={onSelectOption}\n            options={titleOptions}\n            optionsMinWidth={optionsMinWidth}\n            selection={optionsSelection}\n            subtitle={subtitle}\n            title={title}\n            titleInputProps={titleInputProps}\n            zIndex={zIndex}\n          />\n          {isFunction(renderToolbar) && <PageHeaderToolbar>{renderToolbar()}</PageHeaderToolbar>}\n        </PageHeaderTitleSection>\n      </PageHeaderMainSection>\n    </PageHeaderContainer>\n  );\n}\n\nexport default PageHeaderImpl;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,sBAAsB,kBAAkB,OAAO,WAAW,MAAM,CAAC,EAAE,qBAAqB,eAAgB;AAAA,EAC5G,yBAAyB;AAAA,EACzB,iBAAiB;AAAA;AAGnB,MAAM,wBAAwB,kBAAkB,OAAO,GAAG;AAC1D,MAAM,yBAAyB,kBAAkB,OAAO,GAAG;AAC3D,MAAM,oBAAoB,kBAAkB,OAAO,GAAG,qBAAqB,MAAM,MAAO;AAAA,EACtF,sBAAsB;AAAA;AAExB,MAAM,uBAAuB,kBAAkB,cAAc,GAAG;AAEhE,MAAM,kBAAkB,kBAAkB,OAAO,GAAG;AACpD,MAAM,WAAW,kBAAkB,OAAO,GAAG,mBAAmB;AAChE,MAAM,YAAY,kBAAkB,aAAa,GAAG;AAEpD,qBAAqB;AAAA,EACnB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,GACC;AACD,QAAM,iBAAiB,WACrB,qCAAC,eAAD;AAAA,IAAe;AAAA,IAAkB;AAAA,KAC9B,SAGH,qCAAC,OAAD,MAAQ;AAGV,SACE,qCAAC,iBAAD,MACG,QAAQ,SACP,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OAGF,gBAED,YAAY,qCAAC,UAAD,MAAW;AAAA;AAK9B,wBAAwB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,qBAAqB,MAAM;AAAA,EAC3B,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,GACC;AACD,QAAM,iBAAiB,CAAC,CAAC,YAAY;AAErC,SACE,qCAAC,qBAAD,iCACM,iBADN;AAAA,IAEE;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA;AAAA,MAGD,gBAAgB,qCAAC,WAAD;AAAA,IAAW,eAAY;AAAA,IAAa,SAAS;AAAA,IAAoB,MAAM,YAAY;AAAA,MACpG,qCAAC,uBAAD,MACG,kBACC,qCAAC,sBAAD,MACG,YAAY,IAAI,CAAC,eAChB,qCAAC,aAAa,MAAd;AAAA,IAAmB,KAAK,WAAW;AAAA,KAAW,gBAInD,gBACC,qCAAC,sBAAD,MACE,qCAAC,aAAa,MAAd;AAAA,IACE,KAAK,aAAa;AAAA,IAClB,OAAO,aAAa;AAAA,IACpB,SAAS,aAAa;AAAA,KAClB,iBAIV,qCAAC,wBAAD,MACE,qCAAC,aAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAED,WAAW,kBAAkB,qCAAC,mBAAD,MAAoB;AAAA;AAO5D,IAAO,yBAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,sBAAsB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,qBAAqB,eAAgB;AAAA,EAC5G,yBAAyB;AAAA,EACzB,iBAAiB;AACnB,EAAE;AAEF,MAAM,wBAAwB,kBAAkB,KAAK,EAAE,GAAG,wBAAwB;AAClF,MAAM,yBAAyB,kBAAkB,KAAK,EAAE,GAAG,yBAAyB;AACpF,MAAM,oBAAoB,kBAAkB,KAAK,EAAE,GAAG,qBAAqB,MAAM,MAAO;AAAA,EACtF,sBAAsB;AACxB,EAAE;AACF,MAAM,uBAAuB,kBAAkB,YAAY,EAAE,GAAG,sBAAsB;AAEtF,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,GAAG,iBAAiB;AACrE,MAAM,WAAW,kBAAkB,KAAK,EAAE,GAAG,mBAAmB,UAAU;AAC1E,MAAM,YAAY,kBAAkB,WAAW,EAAE,GAAG,qBAAqB;AAEzE,qBAAqB;AAAA,EACnB,QAAQ;AAAA,EACR,UAAU,CAAC;AAAA,EACX;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,GACC;AACD,QAAM,iBAAiB,WACrB,qCAAC;AAAA,IAAc;AAAA,IAAkB;AAAA,KAC9B,KACH,IAEA,qCAAC,aAAO,KAAM;AAGhB,SACE,qCAAC,uBACE,QAAQ,SACP,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,GACF,IAEA,gBAED,YAAY,qCAAC,gBAAU,QAAS,CACnC;AAEJ;AAEA,wBAAwB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,qBAAqB,MAAM;AAAA,EAC3B,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,GACC;AACD,QAAM,iBAAiB,CAAC,CAAC,YAAY;AAErC,SACE,qCAAC,sDACK,iBADL;AAAA,IAEC;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,MAEC,gBAAgB,qCAAC;AAAA,IAAU,eAAY;AAAA,IAAa,SAAS;AAAA,IAAoB,MAAM,YAAY;AAAA,GAAG,GACvG,qCAAC,6BACE,kBACC,qCAAC,4BACE,YAAY,IAAI,CAAC,eAChB,qCAAC,aAAa,MAAb;AAAA,IAAkB,KAAK,WAAW;AAAA,KAAW,WAAY,CAC3D,CACH,GAED,gBACC,qCAAC,4BACC,qCAAC,aAAa,MAAb;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,OAAO,aAAa;AAAA,IACpB,SAAS,aAAa;AAAA,KAClB,aACN,CACF,GAEF,qCAAC,8BACC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,GACF,GACC,WAAW,aAAa,KAAK,qCAAC,yBAAmB,cAAc,CAAE,CACpE,CACF,CACF;AAEJ;AAEA,IAAO,yBAAQ;",
   "names": []
 }

package/dist/esm/v1/Title.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/Title.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';\n\nconst blockName = 'page-header';\nconst TitleWrapper = aggregatedClasses(DSTruncatedTooltipText)(\n  `${blockName}-title`,\n  'title',\n);\nconst Title = ({ children }) => <TitleWrapper value={children} />;\n\nexport default Title;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,eAAe,kBAAkB,wBACrC,GAAG,mBACH;AAEF,MAAM,QAAQ,CAAC,EAAE,eAAe,qCAAC,cAAD;AAAA,EAAc,OAAO;AAAA;AAErD,IAAO,gBAAQ;",
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,eAAe,kBAAkB,sBAAsB,EAC3D,GAAG,mBACH,OACF;AACA,MAAM,QAAQ,CAAC,EAAE,eAAe,qCAAC;AAAA,EAAa,OAAO;AAAA,CAAU;AAE/D,IAAO,gBAAQ;",
   "names": []
 }

package/dist/esm/v1/TitleWrapper.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/TitleWrapper.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'page-header';\n\nexport default aggregatedClasses('span')(`${blockName}-title-wrapper`);\n"],
-  "mappings": "AAAA;ACAA;AAEA,MAAM,YAAY;AAElB,IAAO,uBAAQ,kBAAkB,QAAQ,GAAG;",
+  "mappings": "AAAA;ACAA;AAEA,MAAM,YAAY;AAElB,IAAO,uBAAQ,kBAAkB,MAAM,EAAE,GAAG,yBAAyB;",
   "names": []
 }

package/dist/esm/v2/PageHeader.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,69 +16,63 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2 from "react";
-import { describe } from "react-desc";
-import { compact } from "lodash";
-import styled from "styled-components";
+import { describe } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
-import { PageHeaderTitle } from "./components/PageHeaderTitle/PageHeaderTitle";
-import { PageHeaderEditableTitle } from "./components/PageHeaderEditableTitle/PageHeaderEditableTitle";
-import { PageHeaderSummary } from "./components/PageHeaderSummary/PageHeaderSummary";
-import { PageHeaderMenu } from "./components/PageHeaderMenu/PageHeaderMenu";
-import { PageHeaderToolbar } from "./components/PageHeaderToolbar/PageHeaderToolbar";
-import { PageHeaderBack } from "./components/PageHeaderBack/PageHeaderBack";
-import { cssPrefix } from "./components/blocks";
-import { navProps, defaultProps } from "./props";
-const PageHeaderCustomRenderer = styled.div`
-  width: auto;
-  color: ${(props) => props.theme.colors.brand[800]};
-  font-style: italic;
-  font-size: 0.8rem;
-`;
-const Container = styled.div`
-  width: 100%;
-  margin-bottom: 8px;
-`;
-const ContainerWBorder = styled.div`
-  width: 100%;
-  padding: 12px 0 8px 0;
-  display: grid;
-  align-items: center;
-  height: 100%;
-  ${(props) => !props.withBottomSeparator ? "" : `border-bottom: solid 1px ${props.theme.colors.neutral[400]};`}
-`;
-const DSPageHeaderV2 = ({
-  containerProps,
-  breadcrumbs,
-  pageTitle,
-  backarrow,
-  summary,
-  toolbar,
-  menu,
-  withBottomSeparator
-}) => {
+import { compact } from "lodash";
+import {
+  Container,
+  ContainerWBorder,
+  PageHeaderCustomRenderer,
+  PageHeaderToolbarWrapper,
+  PageHeaderMenu,
+  PageHeaderBack
+} from "./styled";
+import { usePageHeader } from "./config/usePageHeader";
+import { PageHeaderTitle } from "./components/PageHeaderTitle";
+import { PageHeaderEditableTitle } from "./components/PageHeaderEditableTitle";
+import { PageHeaderSummary } from "./components/PageHeaderSummary";
+import { PageHeaderPropTypes, defaultProps } from "./react-desc-prop-types";
+import { DSPageHeaderDataTestIds } from "./exported-related";
+const DSPageHeaderV2 = (props) => {
+  const {
+    currentBackArrow,
+    currentMenu,
+    currentBreadcrumbs,
+    currentSummary,
+    currentToolbar,
+    currentPageTitle,
+    containerProps,
+    withBottomSeparator,
+    globalAttributes,
+    xStyledProps
+  } = usePageHeader(props);
   const wrapperRow = ["auto", 1];
   const mainRow = compact([1, "auto"]);
-  const pageTitleRow = compact(["auto", menu && "30px", summary && "auto", 1]);
-  return /* @__PURE__ */ React2.createElement(Container, __spreadValues({}, containerProps), /* @__PURE__ */ React2.createElement(ContainerWBorder, {
+  const pageTitleRow = compact(["auto", currentMenu && "30px", currentSummary && "auto", 1]);
+  return /* @__PURE__ */ React2.createElement(Container, __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, containerProps), globalAttributes), xStyledProps), {
+    "data-testid": DSPageHeaderDataTestIds.CONTAINER
+  }), /* @__PURE__ */ React2.createElement(ContainerWBorder, {
     withBottomSeparator
   }, /* @__PURE__ */ React2.createElement(Grid, {
     cols: wrapperRow
-  }, /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(PageHeaderBack, null, backarrow)), /* @__PURE__ */ React2.createElement(Grid, {
+  }, /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(PageHeaderBack, null, currentBackArrow)), /* @__PURE__ */ React2.createElement(Grid, {
     rows: ["auto", "auto"]
   }, /* @__PURE__ */ React2.createElement(Grid, {
-    className: `${cssPrefix}-page-header-v2-breadcrumb`
-  }, breadcrumbs), /* @__PURE__ */ React2.createElement(Grid, {
+    className: "em-ds-page-header-v2-breadcrumb"
+  }, currentBreadcrumbs), /* @__PURE__ */ React2.createElement(Grid, {
     cols: mainRow
   }, /* @__PURE__ */ React2.createElement(Grid, {
     cols: pageTitleRow
-  }, pageTitle, menu && /* @__PURE__ */ React2.createElement(PageHeaderMenu, null, menu), summary, /* @__PURE__ */ React2.createElement("div", null)), /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(PageHeaderToolbar, null, toolbar)))))));
+  }, currentPageTitle, currentMenu && /* @__PURE__ */ React2.createElement(PageHeaderMenu, null, currentMenu), currentSummary, /* @__PURE__ */ React2.createElement("div", null)), /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(PageHeaderToolbarWrapper, null, currentToolbar)))))));
 };
-DSPageHeaderV2.propTypes = navProps;
+DSPageHeaderV2.propTypes = PageHeaderPropTypes;
 DSPageHeaderV2.defaultProps = defaultProps;
+DSPageHeaderV2.displayName = "DSPageHeaderV2";
 const DSPageHeaderWithSchema = describe(DSPageHeaderV2);
-DSPageHeaderWithSchema.propTypes = navProps;
+DSPageHeaderWithSchema.propTypes = PageHeaderPropTypes;
 var PageHeader_default = DSPageHeaderV2;
 export {
   DSPageHeaderV2,

package/dist/esm/v2/PageHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/PageHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { compact } from 'lodash';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PageHeaderTitle } from './components/PageHeaderTitle/PageHeaderTitle';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle/PageHeaderEditableTitle';\nimport { PageHeaderSummary } from './components/PageHeaderSummary/PageHeaderSummary';\nimport { PageHeaderMenu } from './components/PageHeaderMenu/PageHeaderMenu';\nimport { PageHeaderToolbar } from './components/PageHeaderToolbar/PageHeaderToolbar';\nimport { PageHeaderBack } from './components/PageHeaderBack/PageHeaderBack';\nimport { cssPrefix } from './components/blocks';\nimport { navProps, defaultProps } from './props';\n\nconst PageHeaderCustomRenderer = styled.div`\n  width: auto;\n  color: ${(props) => props.theme.colors.brand[800]};\n  font-style: italic;\n  font-size: 0.8rem;\n`;\n\nconst Container = styled.div`\n  width: 100%;\n  margin-bottom: 8px;\n`;\nconst ContainerWBorder = styled.div`\n  width: 100%;\n  padding: 12px 0 8px 0;\n  display: grid;\n  align-items: center;\n  height: 100%;\n  ${(props) => (!props.withBottomSeparator ? '' : `border-bottom: solid 1px ${props.theme.colors.neutral[400]};`)}\n`;\nconst DSPageHeaderV2 = ({\n  containerProps,\n  breadcrumbs,\n  pageTitle,\n  backarrow,\n  summary,\n  toolbar,\n  menu,\n  withBottomSeparator,\n}) => {\n  const wrapperRow = ['auto', 1];\n  const mainRow = compact([1, 'auto']);\n  const pageTitleRow = compact(['auto', menu && '30px', summary && 'auto', 1]);\n  return (\n    <Container {...containerProps}>\n      <ContainerWBorder withBottomSeparator={withBottomSeparator}>\n        <Grid cols={wrapperRow}>\n          <Grid>\n            <PageHeaderBack>{backarrow}</PageHeaderBack>\n          </Grid>\n          <Grid rows={['auto', 'auto']}>\n            <Grid className={`${cssPrefix}-page-header-v2-breadcrumb`}>{breadcrumbs}</Grid>\n            <Grid cols={mainRow}>\n              <Grid cols={pageTitleRow}>\n                {pageTitle}\n                {menu && <PageHeaderMenu>{menu}</PageHeaderMenu>}\n                {summary}\n                <div />\n              </Grid>\n              <Grid>\n                <PageHeaderToolbar>{toolbar}</PageHeaderToolbar>\n              </Grid>\n            </Grid>\n          </Grid>\n        </Grid>\n      </ContainerWBorder>\n    </Container>\n  );\n};\n\nDSPageHeaderV2.propTypes = navProps;\nDSPageHeaderV2.defaultProps = defaultProps;\n\nconst DSPageHeaderWithSchema = describe(DSPageHeaderV2);\n\nDSPageHeaderWithSchema.propTypes = navProps;\n\nexport {\n  DSPageHeaderV2,\n  PageHeaderTitle,\n  PageHeaderEditableTitle,\n  PageHeaderSummary,\n  PageHeaderMenu,\n  PageHeaderCustomRenderer,\n  DSPageHeaderWithSchema,\n};\n\nexport default DSPageHeaderV2;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,2BAA2B,OAAO;AAAA;AAAA,WAE7B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAK/C,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAIzB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM5B,CAAC,UAAW,CAAC,MAAM,sBAAsB,KAAK,4BAA4B,MAAM,MAAM,OAAO,QAAQ;AAAA;AAEzG,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,aAAa,CAAC,QAAQ;AAC5B,QAAM,UAAU,QAAQ,CAAC,GAAG;AAC5B,QAAM,eAAe,QAAQ,CAAC,QAAQ,QAAQ,QAAQ,WAAW,QAAQ;AACzE,SACE,qCAAC,WAAD,mBAAe,iBACb,qCAAC,kBAAD;AAAA,IAAkB;AAAA,KAChB,qCAAC,MAAD;AAAA,IAAM,MAAM;AAAA,KACV,qCAAC,MAAD,MACE,qCAAC,gBAAD,MAAiB,aAEnB,qCAAC,MAAD;AAAA,IAAM,MAAM,CAAC,QAAQ;AAAA,KACnB,qCAAC,MAAD;AAAA,IAAM,WAAW,GAAG;AAAA,KAAwC,cAC5D,qCAAC,MAAD;AAAA,IAAM,MAAM;AAAA,KACV,qCAAC,MAAD;AAAA,IAAM,MAAM;AAAA,KACT,WACA,QAAQ,qCAAC,gBAAD,MAAiB,OACzB,SACD,qCAAC,OAAD,QAEF,qCAAC,MAAD,MACE,qCAAC,mBAAD,MAAoB;AAAA;AAUpC,eAAe,YAAY;AAC3B,eAAe,eAAe;AAE9B,MAAM,yBAAyB,SAAS;AAExC,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { compact } from 'lodash';\nimport {\n  Container,\n  ContainerWBorder,\n  PageHeaderCustomRenderer,\n  PageHeaderToolbarWrapper,\n  PageHeaderMenu,\n  PageHeaderBack,\n} from './styled';\nimport { usePageHeader } from './config/usePageHeader';\nimport { PageHeaderTitle } from './components/PageHeaderTitle';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle';\nimport { PageHeaderSummary } from './components/PageHeaderSummary';\nimport { PageHeaderPropTypes, DSPageHeaderT, defaultProps } from './react-desc-prop-types';\nimport { DSPageHeaderDataTestIds } from './exported-related';\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 wrapperRow = ['auto', 1];\n  const mainRow = compact([1, 'auto']);\n  const pageTitleRow = compact(['auto', currentMenu && '30px', currentSummary && 'auto', 1]);\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}>\n              <Grid cols={pageTitleRow}>\n                {currentPageTitle}\n                {currentMenu && <PageHeaderMenu>{currentMenu}</PageHeaderMenu>}\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.propTypes = PageHeaderPropTypes as WeakValidationMap<unknown>;\nDSPageHeaderV2.defaultProps = defaultProps;\nDSPageHeaderV2.displayName = 'DSPageHeaderV2';\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AACA;AACA;AACA;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,MACE,cAAc,KAAK;AAEvB,QAAM,aAAa,CAAC,QAAQ,CAAC;AAC7B,QAAM,UAAU,QAAQ,CAAC,GAAG,MAAM,CAAC;AACnC,QAAM,eAAe,QAAQ,CAAC,QAAQ,eAAe,QAAQ,kBAAkB,QAAQ,CAAC,CAAC;AACzF,SACE,qCAAC,0EACK,iBACA,mBACA,eAHL;AAAA,IAIC,eAAa,wBAAwB;AAAA,MAErC,qCAAC;AAAA,IAAiB;AAAA,KAChB,qCAAC;AAAA,IAAK,MAAM;AAAA,KACV,qCAAC,YACC,qCAAC,sBAAgB,gBAAiB,CACpC,GACA,qCAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,KACzB,qCAAC;AAAA,IAAK,WAAU;AAAA,KAAmC,kBAAmB,GACtE,qCAAC;AAAA,IAAK,MAAM;AAAA,KACV,qCAAC;AAAA,IAAK,MAAM;AAAA,KACT,kBACA,eAAe,qCAAC,sBAAgB,WAAY,GAC5C,gBACD,qCAAC,WAAI,CACP,GACA,qCAAC,YACC,qCAAC,gCAA0B,cAAe,CAC5C,CACF,CACF,CACF,CACF,CACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AAC7B,MAAM,yBAAyB,SAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
   "names": []
 }

package/dist/esm/v2/components/{PageHeaderEditableTitle/PageHeaderEditableTitle.js → PageHeaderEditableTitle.js}

@@ -30,34 +30,47 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import React2, { useRef, useState } from "react";
-import { noop } from "lodash";
-import styled from "styled-components";
-import { PropTypes, describe } from "react-desc";
-import { useMeasure, useDerivedStateFromProps } from "@elliemae/ds-utilities";
-import { EditableTitleComponent } from "../blocks";
-import { PageHeaderTitle } from "../PageHeaderTitle/PageHeaderTitle";
-const EditableContainer = styled.div`
+import React2, { useRef, useState, useCallback } from "react";
+import { DSInputText, DSInputTextName, DSInputTextSlots } from "@elliemae/ds-form-input-text";
+import { styled } from "@elliemae/ds-system";
+import {
+  PropTypes,
+  describe,
+  useDerivedStateFromProps,
+  useMeasure,
+  useGetGlobalAttributes,
+  globalAttributesPropTypes
+} from "@elliemae/ds-utilities";
+import { PageHeaderTitle } from "./PageHeaderTitle";
+import { DSPageHeaderDataTestIds } from "../exported-related";
+const EditableContainer = styled("div")`
   height: 32px;
   position: relative;
   overflow: hidden;
+  &.editable-title-component {
+    position: relative;
+    left: -7px;
+    top: -1px;
+    margin-left: -2px;
+    margin-right: -9px;
+    & .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER} {
+      height: 32px;
+    }
+    & .${DSInputTextName}-${DSInputTextSlots.INPUT} {
+      font-size: ${({ theme }) => theme.fontSizes.title[800]};
+      line-height: normal;
+      color: ${({ theme }) => theme.colors.neutral["700"]};
+    }
+  }
 `;
 const PageHeaderEditableTitle = (_a) => {
   var _b = _a, {
     children: value,
     editing: editingProp = false,
-    onBlur = noop,
-    onChange = noop,
-    onFocus = noop,
-    onMouseOut = noop,
     showMarker = false
   } = _b, rest = __objRest(_b, [
     "children",
     "editing",
-    "onBlur",
-    "onChange",
-    "onFocus",
-    "onMouseOut",
     "showMarker"
   ]);
   const [titleValue, setTitleValue] = useState(value);
@@ -65,27 +78,33 @@ const PageHeaderEditableTitle = (_a) => {
   const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
   const titleRef = useRef(null);
   const { width } = useMeasure(titleRef);
+  const handleOnChange = useCallback((e) => {
+    setTitleValue(e.target.value);
+  }, []);
+  const handleOnFocus = useCallback(() => {
+    setEditing(true);
+  }, [setEditing]);
+  const handleOnBlur = useCallback(() => {
+    setEditing(false);
+  }, [setEditing]);
+  const handleOnMouseOut = useCallback(() => {
+    setHovered(false);
+  }, []);
+  const globals = useGetGlobalAttributes(rest, {
+    onFocus: handleOnFocus,
+    onMouseOut: handleOnMouseOut,
+    onChange: handleOnChange,
+    onBlur: handleOnBlur
+  });
   return /* @__PURE__ */ React2.createElement(EditableContainer, {
     className: hovered || editing ? "editable-title-component" : "",
     onMouseEnter: () => setHovered(true),
-    onMouseLeave: () => setHovered(false)
-  }, (hovered || editing) && /* @__PURE__ */ React2.createElement(EditableTitleComponent, __spreadProps(__spreadValues({}, rest), {
-    onBlur: (e) => {
-      setEditing(false);
-      onBlur(e);
-    },
-    onChange: (e) => {
-      setTitleValue(e.target.value);
-      onChange(e);
-    },
-    onFocus: (e) => {
-      setEditing(true);
-      onFocus(e);
-    },
-    onMouseOut: (e) => {
-      setHovered(false);
-      onMouseOut(e);
-    },
+    onMouseLeave: () => setHovered(false),
+    "data-testid": DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE
+  }, (hovered || editing) && /* @__PURE__ */ React2.createElement(DSInputText, __spreadProps(__spreadValues(__spreadValues({
+    onChange: handleOnChange
+  }, rest), globals), {
+    placeholder: "",
     style: { width: width + 10, minWidth: "260px", maxWidth: "100%" },
     value: titleValue
   })), /* @__PURE__ */ React2.createElement("div", {
@@ -95,16 +114,13 @@ const PageHeaderEditableTitle = (_a) => {
     showMarker: showMarker && !hovered && !editing
   }, titleValue)));
 };
-const props = {
+const props = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
   children: PropTypes.string.description("The title text"),
   editing: PropTypes.bool.description("Whether the title is editing or not"),
-  showMarker: PropTypes.bool.description("Show error marker"),
-  onBlur: PropTypes.func.description("blur callback"),
-  onChange: PropTypes.func.description("on change handler"),
-  onFocus: PropTypes.func.description("on focus handler"),
-  onMouseOut: PropTypes.func.description("mouse out of component handler")
-};
+  showMarker: PropTypes.bool.description("Show error marker")
+});
 PageHeaderEditableTitle.propTypes = props;
+PageHeaderEditableTitle.displayName = "PageHeaderEditableTitle";
 const DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);
 DSPageHeaderEditableTitleWithSchema.propTypes = props;
 var PageHeaderEditableTitle_default = PageHeaderEditableTitle;

package/dist/esm/v2/components/PageHeaderEditableTitle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/components/PageHeaderEditableTitle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState, useCallback, WeakValidationMap } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  PropTypes,\n  describe,\n  useDerivedStateFromProps,\n  useMeasure,\n  useGetGlobalAttributes,\n  globalAttributesPropTypes,\n} from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from './PageHeaderTitle';\nimport { DSPageHeaderDataTestIds } from '../exported-related';\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    }\n  }\n`;\n\nexport const PageHeaderEditableTitle = ({\n  children: value,\n  editing: editingProp = false,\n  showMarker = false,\n  ...rest\n}) => {\n  const [titleValue, setTitleValue] = useState(value);\n  const [hovered, setHovered] = useState(false);\n  const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n  const titleRef = useRef(null);\n  const { width } = useMeasure(titleRef);\n\n  const handleOnChange: React.FormEventHandler<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\nconst props = {\n  ...globalAttributesPropTypes,\n  /** The title text */\n  children: PropTypes.string.description('The title text'),\n  /** Whether the title is editing or not */\n  editing: PropTypes.bool.description('Whether the title is editing or not'),\n  /** Show error marker */\n  showMarker: PropTypes.bool.description('Show error marker'),\n};\n\nPageHeaderEditableTitle.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport default PageHeaderEditableTitle;\n\nexport { DSPageHeaderEditableTitleWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AAEA,MAAM,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,mBAAmB,iBAAiB;AAAA;AAAA;AAAA,SAGpC,mBAAmB,iBAAiB;AAAA,mBAC1B,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA,eAEzC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK5C,MAAM,0BAA0B,CAAC,OAKlC;AALkC,eACtC;AAAA,cAAU;AAAA,IACV,SAAS,cAAc;AAAA,IACvB,aAAa;AAAA,MAHyB,IAInC,iBAJmC,IAInC;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,cAAc,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,cAAc,yBAAyB,eAAe,KAAK;AAC3E,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,EAAE,UAAU,WAAW,QAAQ;AAErC,QAAM,iBAA2D,YAAY,CAAC,MAAM;AAClF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC,YAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAwC,YAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAA4C,YAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,uBAAuB,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,SACE,qCAAC;AAAA,IACC,WAAW,WAAW,UAAU,6BAA6B;AAAA,IAC7D,cAAc,MAAM,WAAW,IAAI;AAAA,IACnC,cAAc,MAAM,WAAW,KAAK;AAAA,IACpC,eAAa,wBAAwB;AAAA,KAEnC,YAAW,YACX,qCAAC;AAAA,IACC,UAAU;AAAA,KACN,OACA,UAHL;AAAA,IAIC,aAAY;AAAA,IACZ,OAAO,EAAE,OAAO,QAAQ,IAAI,UAAU,SAAS,UAAU,OAAO;AAAA,IAChE,OAAO;AAAA,IACT,GAEF,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAU,OAAO,EAAE,OAAO,cAAc;AAAA,KAChD,qCAAC;AAAA,IAAgB,YAAY,cAAc,CAAC,WAAW,CAAC;AAAA,KAAU,UAAW,CAC/E,CACF;AAEJ;AAEA,MAAM,QAAQ,iCACT,4BADS;AAAA,EAGZ,UAAU,UAAU,OAAO,YAAY,gBAAgB;AAAA,EAEvD,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAEzE,YAAY,UAAU,KAAK,YAAY,mBAAmB;AAC5D;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,sCAAsC,SAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
+  "names": []
+}

package/dist/esm/v2/components/{PageHeaderSummary/PageHeaderSummary.js → PageHeaderSummary.js}

@@ -28,11 +28,45 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import { PageHeaderSummaryWrapper } from "../blocks";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { styled } from "@elliemae/ds-system";
+import { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from "../exported-related";
+const PageHeaderSummaryWrapper = styled("div", {
+  name: DSPageHeaderName,
+  slot: DSPageHeaderSlots.SUMMARY
+})`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  margin-left: ${({ theme }) => theme.space.xxxs};
+  font-size: ${({ theme }) => theme.fontSizes.title[700]};
+  line-height: ${({ theme }) => theme.lineHeights.m};
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  &:before {
+    display: block;
+    content: '';
+    height: 23px;
+    background: ${({ theme }) => theme.colors.neutral[600]};
+    width: 1px;
+    margin-right: ${({ theme }) => theme.space.xxs};
+  }
+  .ph-summary-value {
+    color: ${({ theme }) => theme.colors.neutral[700]};
+    padding-right: ${({ theme }) => theme.space.xxs};
+  }
+  .ph-summary-label {
+    color: ${({ theme }) => theme.colors.neutral[600]};
+  }
+  .ph-summary-space {
+    width: ${({ theme }) => theme.space.l};
+  }
+`;
 const PageHeaderSummary = (_a) => {
   var _b = _a, { value = null, label = "" } = _b, rest = __objRest(_b, ["value", "label"]);
-  return /* @__PURE__ */ React2.createElement(PageHeaderSummaryWrapper, __spreadValues({}, rest), (value === 0 || value) && /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React2.createElement(PageHeaderSummaryWrapper, __spreadValues({
+    "data-testid": DSPageHeaderDataTestIds.SUMMARY
+  }, rest), (value === 0 || value) && /* @__PURE__ */ React2.createElement("div", {
     className: "ph-summary-value"
   }, value), label && /* @__PURE__ */ React2.createElement("div", {
     className: "ph-summary-label"
@@ -45,6 +79,7 @@ const props = {
   label: PropTypes.string.description("label attached to value")
 };
 PageHeaderSummary.propTypes = props;
+PageHeaderSummary.displayName = "PageHeaderSummary";
 const DSPageHeaderSummaryWithSchema = describe(PageHeaderSummary);
 DSPageHeaderSummaryWithSchema.propTypes = props;
 export {

package/dist/esm/v2/components/PageHeaderSummary.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/components/PageHeaderSummary.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../exported-related';\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`;\nconst PageHeaderSummary = ({ value = null, label = '', ...rest }) => (\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\nconst props = {\n  /** value for page header summary */\n  value: PropTypes.number.description('value for page header summary'),\n  /** label attached to value */\n  label: PropTypes.string.description('label attached to value'),\n};\n\nPageHeaderSummary.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderSummary.displayName = 'PageHeaderSummary';\nconst DSPageHeaderSummaryWithSchema = describe(PageHeaderSummary);\n\nDSPageHeaderSummaryWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport { PageHeaderSummary, DSPageHeaderSummaryWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,2BAA2B,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,iBACjC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,oBAElC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,aAGlC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,qBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,aAGnC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGpC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAGxC,MAAM,oBAAoB,CAAC,OAAuC;AAAvC,eAAE,UAAQ,MAAM,QAAQ,OAAxB,IAA+B,iBAA/B,IAA+B,CAA7B,SAAc;AACzC,8CAAC;AAAA,IAAyB,eAAa,wBAAwB;AAAA,KAAa,OACxE,WAAU,KAAK,UAAU,qCAAC;AAAA,IAAI,WAAU;AAAA,KAAoB,KAAM,GACnE,SAAS,qCAAC;AAAA,IAAI,WAAU;AAAA,KAAoB,KAAM,GACjD,WAAU,KAAK,SAAS,UAAU,qCAAC;AAAA,IAAI,WAAU;AAAA,GAAmB,CACxE;AAAA;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,+BAA+B;AAAA,EAEnE,OAAO,UAAU,OAAO,YAAY,yBAAyB;AAC/D;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,gCAAgC,SAAS,iBAAiB;AAEhE,8BAA8B,YAAY;",
+  "names": []
+}

package/dist/esm/v2/components/{PageHeaderTitle/PageHeaderTitle.js → PageHeaderTitle.js}

@@ -31,14 +31,32 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import DSTruncatedTooltipText, { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
-import { RequiredMark } from "@elliemae/ds-form/RequiredMark";
-import { PageHeaderTitleWrapper } from "../blocks";
+import { styled } from "@elliemae/ds-system";
+import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { DSTruncatedTooltipText, TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
+import { RequiredMark } from "@elliemae/ds-form";
+import { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from "../exported-related";
+const PageHeaderTitleWrapper = styled("div", {
+  name: DSPageHeaderName,
+  slot: DSPageHeaderSlots.HEADER_TITLE
+})`
+  display: grid;
+  font-size: ${({ theme }) => theme.fontSizes.title[800]};
+  color: ${({ theme }) => theme.colors.neutral["700"]};
+  line-height: normal;
+  font-weight: 400;
+  margin-right: 0.61538rem;
+
+  & .em-ds-form-required-mark {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+`;
 const PageHeaderTitle = (_a) => {
-  var _b = _a, { children, showMarker = false } = _b, rest = __objRest(_b, ["children", "showMarker"]);
+  var _b = _a, { children = "", showMarker = false } = _b, rest = __objRest(_b, ["children", "showMarker"]);
   return /* @__PURE__ */ React2.createElement(PageHeaderTitleWrapper, __spreadProps(__spreadValues({}, rest), {
-    "data-testid": "ds-page-header-title"
+    "data-testid": DSPageHeaderDataTestIds.HEADER_TITLE
   }), /* @__PURE__ */ React2.createElement(TooltipTextProvider, null, /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
     value: children
   })), showMarker && /* @__PURE__ */ React2.createElement(RequiredMark, {
@@ -50,6 +68,7 @@ const props = {
   showMarker: PropTypes.bool.description("show required mark")
 };
 PageHeaderTitle.propTypes = props;
+PageHeaderTitle.displayName = "PageHeaderTitle";
 const DSPageHeaderTitleWithSchema = describe(PageHeaderTitle);
 DSPageHeaderTitleWithSchema.propTypes = props;
 export {

package/dist/esm/v2/components/PageHeaderTitle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/components/PageHeaderTitle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSTruncatedTooltipText, TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { RequiredMark } from '@elliemae/ds-form';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../exported-related';\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-right: 0.61538rem;\n\n  & .em-ds-form-required-mark {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n`;\nconst PageHeaderTitle = ({ children = '', showMarker = false, ...rest }) => (\n  <PageHeaderTitleWrapper {...rest} data-testid={DSPageHeaderDataTestIds.HEADER_TITLE}>\n    <TooltipTextProvider>\n      <DSTruncatedTooltipText value={children} />\n    </TooltipTextProvider>\n    {showMarker && <RequiredMark required />}\n  </PageHeaderTitleWrapper>\n);\n\nconst props = {\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\nPageHeaderTitle.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderTitle.displayName = 'PageHeaderTitle';\nconst DSPageHeaderTitleWithSchema = describe(PageHeaderTitle);\n\nDSPageHeaderTitleWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport { PageHeaderTitle, DSPageHeaderTitleWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,WACzC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/C,MAAM,kBAAkB,CAAC,OAAgD;AAAhD,eAAE,aAAW,IAAI,aAAa,UAA9B,IAAwC,iBAAxC,IAAwC,CAAtC,YAAe;AACxC,8CAAC,yDAA2B,OAA3B;AAAA,IAAiC,eAAa,wBAAwB;AAAA,MACrE,qCAAC,2BACC,qCAAC;AAAA,IAAuB,OAAO;AAAA,GAAU,CAC3C,GACC,cAAc,qCAAC;AAAA,IAAa,UAAQ;AAAA,GAAC,CACxC;AAAA;AAGF,MAAM,QAAQ;AAAA,EAEZ,UAAU,UAAU,OAAO,YAAY,0BAA0B;AAAA,EAEjE,YAAY,UAAU,KAAK,YAAY,oBAAoB;AAC7D;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;",
+  "names": []
+}

package/dist/esm/v2/config/usePageHeader.js

@@ -0,0 +1,102 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import { useMemo } from "react";
+import {
+  useValidateTypescriptPropTypes,
+  useMemoMergePropsWithDefault,
+  useGetGlobalAttributes,
+  useGetXstyledProps
+} from "@elliemae/ds-utilities";
+import { PageHeaderPropTypes, defaultProps } from "../react-desc-prop-types";
+const usePageHeader = (props) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes);
+  const _a = props, {
+    menu,
+    Menu,
+    pageTitle,
+    PageTitle,
+    toolbar,
+    Toolbar,
+    summary,
+    Summary,
+    backarrow,
+    Backarrow,
+    breadcrumbs,
+    Breadcrumbs
+  } = _a, rest = __objRest(_a, [
+    "menu",
+    "Menu",
+    "pageTitle",
+    "PageTitle",
+    "toolbar",
+    "Toolbar",
+    "summary",
+    "Summary",
+    "backarrow",
+    "Backarrow",
+    "breadcrumbs",
+    "Breadcrumbs"
+  ]);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefaults);
+  const xStyledProps = useGetXstyledProps(propsWithDefaults);
+  const currentBackArrow = useMemo(() => backarrow ?? (Backarrow ? /* @__PURE__ */ React.createElement(Backarrow, null) : void 0), [Backarrow, backarrow]);
+  const currentMenu = useMemo(() => menu ?? (Menu ? /* @__PURE__ */ React.createElement(Menu, null) : void 0), [Menu, menu]);
+  const currentBreadcrumbs = useMemo(() => breadcrumbs ?? (Breadcrumbs ? /* @__PURE__ */ React.createElement(Breadcrumbs, null) : void 0), [Breadcrumbs, breadcrumbs]);
+  const currentSummary = useMemo(() => summary ?? (Summary ? /* @__PURE__ */ React.createElement(Summary, null) : void 0), [Summary, summary]);
+  const currentToolbar = useMemo(() => toolbar ?? (Toolbar ? /* @__PURE__ */ React.createElement(Toolbar, null) : void 0), [Toolbar, toolbar]);
+  const currentPageTitle = useMemo(() => pageTitle ?? (PageTitle ? /* @__PURE__ */ React.createElement(PageTitle, null) : void 0), [PageTitle, pageTitle]);
+  return useMemo(() => __spreadValues({
+    propsWithDefaults,
+    globalAttributes,
+    xStyledProps,
+    currentBackArrow,
+    currentMenu,
+    currentBreadcrumbs,
+    currentSummary,
+    currentToolbar,
+    currentPageTitle
+  }, rest), [
+    propsWithDefaults,
+    currentBackArrow,
+    currentBreadcrumbs,
+    currentMenu,
+    currentPageTitle,
+    currentSummary,
+    currentToolbar,
+    globalAttributes,
+    rest,
+    xStyledProps
+  ]);
+};
+export {
+  usePageHeader
+};
+//# sourceMappingURL=usePageHeader.js.map

package/dist/esm/v2/config/usePageHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/config/usePageHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport {\n  useValidateTypescriptPropTypes,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-utilities';\n\nimport { DSPageHeaderT, PageHeaderPropTypes, defaultProps } from '../react-desc-prop-types';\n\nexport const usePageHeader = (props: DSPageHeaderT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, PageHeaderPropTypes);\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    ...rest\n  } = props;\n\n  const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n  const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const currentBackArrow = useMemo(() => backarrow ?? (Backarrow ? <Backarrow /> : undefined), [Backarrow, backarrow]);\n\n  const currentMenu = useMemo(() => menu ?? (Menu ? <Menu /> : undefined), [Menu, menu]);\n\n  const currentBreadcrumbs = useMemo(\n    () => breadcrumbs ?? (Breadcrumbs ? <Breadcrumbs /> : undefined),\n    [Breadcrumbs, breadcrumbs],\n  );\n\n  const currentSummary = useMemo(() => summary ?? (Summary ? <Summary /> : undefined), [Summary, summary]);\n\n  const currentToolbar = useMemo(() => toolbar ?? (Toolbar ? <Toolbar /> : undefined), [Toolbar, toolbar]);\n\n  const currentPageTitle = useMemo(() => pageTitle ?? (PageTitle ? <PageTitle /> : undefined), [PageTitle, pageTitle]);\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAEO,MAAM,gBAAgB,CAAC,UAA+B;AAC3D,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,mBAAmB;AAErE,QAcI,YAbF;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,iBACD,IADC;AAAA,IAZH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,mBAAmB,uBAAuB,iBAAiB;AACjE,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,mBAAmB,QAAQ,MAAM,aAAc,aAAY,oCAAC,eAAU,IAAK,SAAY,CAAC,WAAW,SAAS,CAAC;AAEnH,QAAM,cAAc,QAAQ,MAAM,QAAS,QAAO,oCAAC,UAAK,IAAK,SAAY,CAAC,MAAM,IAAI,CAAC;AAErF,QAAM,qBAAqB,QACzB,MAAM,eAAgB,eAAc,oCAAC,iBAAY,IAAK,SACtD,CAAC,aAAa,WAAW,CAC3B;AAEA,QAAM,iBAAiB,QAAQ,MAAM,WAAY,WAAU,oCAAC,aAAQ,IAAK,SAAY,CAAC,SAAS,OAAO,CAAC;AAEvG,QAAM,iBAAiB,QAAQ,MAAM,WAAY,WAAU,oCAAC,aAAQ,IAAK,SAAY,CAAC,SAAS,OAAO,CAAC;AAEvG,QAAM,mBAAmB,QAAQ,MAAM,aAAc,aAAY,oCAAC,eAAU,IAAK,SAAY,CAAC,WAAW,SAAS,CAAC;AAEnH,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACG,OAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACF;",
+  "names": []
+}