@elliemae/ds-page-header 3.22.0-next.23 → 3.22.0-next.25

package/dist/cjs/{v2/PageHeader.js → PageHeader.js}

@@ -82,8 +82,8 @@ const DSPageHeaderV2 = (props) => {
         /* @__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.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.jsxs)(import_ds_grid.Grid, { cols: mainRow, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: pageTitleRow, children: [
+          /* @__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,
               currentMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PageHeaderMenu, { children: currentMenu }),
               currentSummary,

package/dist/cjs/{v2/PageHeader.js.map → PageHeader.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/v2/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/PageHeaderTitle.js';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle.js';\nimport { PageHeaderSummary } from './components/PageHeaderSummary.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 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') as string[];\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 = 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;ADuDX;AAnDZ,8BAAyB;AACzB,qBAAqB;AACrB,oBAOO;AACP,2BAA8B;AAC9B,6BAAgC;AAChC,qCAAwC;AACxC,+BAAkC;AAElC,mCAAkD;AAClD,8BAA0D;AAE1D,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;AACzC,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,SACV;AAAA,yDAAC,uBAAK,MAAM,cACT;AAAA;AAAA,cACA,eAAe,4CAAC,gCAAgB,uBAAY;AAAA,cAC5C;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,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AAC7B,MAAM,6BAAyB,kCAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
+  "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/PageHeaderTitle.js';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle.js';\nimport { PageHeaderSummary } from './components/PageHeaderSummary.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 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') as string[];\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                {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 = 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;ADuDX;AAnDZ,8BAAyB;AACzB,qBAAqB;AACrB,oBAOO;AACP,2BAA8B;AAC9B,6BAAgC;AAChC,qCAAwC;AACxC,+BAAkC;AAElC,mCAAkD;AAClD,8BAA0D;AAE1D,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;AACzC,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,cACA,eAAe,4CAAC,gCAAgB,uBAAY;AAAA,cAC5C;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,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AAC7B,MAAM,6BAAyB,kCAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
   "names": []
 }

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

@@ -42,7 +42,6 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_PageHeaderTitle = require("./PageHeaderTitle.js");
 var import_exported_related = require("../exported-related/index.js");
-const useMeasureSafe = import_ds_utilities.useMeasure.default ?? import_ds_utilities.useMeasure;
 const EditableContainer = (0, import_ds_system.styled)("div")`
   height: 32px;
   position: relative;
@@ -63,17 +62,13 @@ const EditableContainer = (0, import_ds_system.styled)("div")`
     }
   }
 `;
-const PageHeaderEditableTitle = ({
-  children: value,
-  editing: editingProp = false,
-  showMarker = false,
-  ...rest
-}) => {
+const PageHeaderEditableTitle = (props2) => {
+  const { children: value, editing: editingProp, showMarker, ...rest } = props2;
   const [titleValue, setTitleValue] = (0, import_react.useState)(value);
   const [hovered, setHovered] = (0, import_react.useState)(false);
   const [editing, setEditing] = (0, import_ds_utilities.useDerivedStateFromProps)(editingProp || false);
   const titleRef = (0, import_react.useRef)(null);
-  const { width } = useMeasureSafe(titleRef);
+  const { width } = (0, import_ds_utilities.useMeasure)(titleRef);
   const handleOnChange = (0, import_react.useCallback)((e) => {
     setTitleValue(e.target.value);
   }, []);

package/dist/cjs/components/PageHeaderEditableTitle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/PageHeaderEditableTitle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe, useGetGlobalAttributes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps, useMeasure } from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from './PageHeaderTitle.js';\nimport { DSPageHeaderDataTestIds } from '../exported-related/index.js';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n// const useMeasureSafe: typeof useMeasure = useMeasure.default ?? useMeasure;\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 interface PageHeaderEditableTitleProps {\n  children?: string;\n  editing?: boolean;\n  showMarker?: boolean;\n  [key: string]: unknown;\n}\n\nexport const PageHeaderEditableTitle = (props: PageHeaderEditableTitleProps) => {\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(null);\n  const { width } = useMeasure(titleRef);\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\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEnB;AAvEJ,mBAAqD;AACrD,gCAA+D;AAC/D,uBAAuB;AACvB,8BAAuF;AACvF,0BAAqD;AACrD,6BAAgC;AAChC,8BAAwC;AAKxC,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,6CAAmB,2CAAiB;AAAA;AAAA;AAAA,SAGpC,6CAAmB,2CAAiB;AAAA,mBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA,eAE5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAYjD,MAAM,0BAA0B,CAACA,WAAwC;AAC9E,QAAM,EAAE,UAAU,OAAO,SAAS,aAAa,YAAY,GAAG,KAAK,IAAIA;AACvE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,QAAI,8CAAyB,eAAe,KAAK;AAC3E,QAAM,eAAW,qBAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,QAAI,gCAAW,QAAQ;AAErC,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,0CAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,GAAG;AAAA;AAAA,EAEH,UAAU,kCAAU,OAAO,YAAY,gBAAgB;AAAA;AAAA,EAEvD,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA;AAAA,EAEzE,YAAY,kCAAU,KAAK,YAAY,mBAAmB;AAC5D;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,0CAAsC,kCAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
+  "names": ["props"]
+}

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

@@ -68,11 +68,14 @@ const PageHeaderSummaryWrapper = (0, import_ds_system.styled)("div", {
     width: ${({ theme }) => theme.space.l};
   }
 `;
-const PageHeaderSummary = ({ value = null, label = "", ...rest }) => /* @__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 PageHeaderSummary = (props2) => {
+  const { value = null, label = "", ...rest } = props2;
+  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 props = {
   /** value for page header summary */
   value: import_ds_props_helpers.PropTypes.number.description("value for page header summary"),

package/dist/cjs/components/PageHeaderSummary.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/PageHeaderSummary.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSPageHeaderName, DSPageHeaderSlots, DSPageHeaderDataTestIds } from '../exported-related/index.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`;\ninterface PageHeaderSummaryProps {\n  /** value for page header summary */\n  value?: number;\n  /** label attached to value */\n  label?: string;\n}\n\nconst PageHeaderSummary = (props: PageHeaderSummaryProps) => {\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\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+CnB;AA7CJ,8BAAoC;AACpC,uBAAuB;AACvB,8BAA6E;AAE7E,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;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,iBACjC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,oBAErC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,aAGlC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,qBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,aAGnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,aAGvC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAUxC,MAAM,oBAAoB,CAACA,WAAkC;AAC3D,QAAM,EAAE,QAAQ,MAAM,QAAQ,IAAI,GAAG,KAAK,IAAIA;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,MAAM,QAAQ;AAAA;AAAA,EAEZ,OAAO,kCAAU,OAAO,YAAY,+BAA+B;AAAA;AAAA,EAEnE,OAAO,kCAAU,OAAO,YAAY,yBAAyB;AAC/D;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,oCAAgC,kCAAS,iBAAiB;AAEhE,8BAA8B,YAAY;",
+  "names": ["props"]
+}

package/dist/cjs/{v2/components → components}/PageHeaderTitle.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/v2/components/PageHeaderTitle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/components/PageHeaderTitle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe } 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';\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", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBrB;AAvBF,uBAAuB;AACvB,8BAAoC;AACpC,uCAA4D;AAC5D,qBAA6B;AAC7B,8BAA6E;AAC7E,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,WAC5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpD,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,MAAM,QAAQ;AAAA;AAAA,EAEZ,UAAU,kCAAU,OAAO,YAAY,0BAA0B;AAAA;AAAA,EAEjE,YAAY,kCAAU,KAAK,YAAY,oBAAoB;AAC7D;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
   "names": []

package/dist/cjs/{v2/config → config}/usePageHeader.js

@@ -35,8 +35,6 @@ var React = __toESM(require("react"));
 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_ds_skeleton = require("@elliemae/ds-skeleton");
-var import_ds_grid = require("@elliemae/ds-grid");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_exported_related = require("../exported-related/index.js");
 const usePageHeader = (props) => {
@@ -62,7 +60,7 @@ const usePageHeader = (props) => {
   const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
   const currentBackArrow = (0, import_react.useMemo)(() => {
     if (isSkeleton && (Backarrow || backarrow))
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { marginRight: "xxs", variant: "rectangular", width: "2rem", height: "2rem" });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_exported_related.BackArrowSkeleton, {});
     if (Backarrow)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Backarrow, {});
     if (backarrow)
@@ -71,7 +69,7 @@ const usePageHeader = (props) => {
   }, [Backarrow, backarrow, isSkeleton]);
   const currentMenu = (0, import_react.useMemo)(() => {
     if (isSkeleton && (Menu || menu))
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "2rem", height: "2rem" });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_exported_related.MenuSkeleton, {});
     if (Menu)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu, {});
     if (menu)
@@ -80,7 +78,7 @@ const usePageHeader = (props) => {
   }, [Menu, menu, isSkeleton]);
   const currentBreadcrumbs = (0, import_react.useMemo)(() => {
     if (isSkeleton && (Breadcrumbs || breadcrumbs))
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { cols: ["auto"], gutter: "xxxs", justifyContent: "flex-start", height: "24px", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "1rem" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_exported_related.BreadcrumbSkeleton, {});
     if (Breadcrumbs)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumbs, {});
     if (breadcrumbs)
@@ -89,7 +87,7 @@ const usePageHeader = (props) => {
   }, [Breadcrumbs, breadcrumbs, isSkeleton]);
   const currentSummary = (0, import_react.useMemo)(() => {
     if (isSkeleton && (Summary || summary))
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { marginLeft: "xxs", variant: "rectangular", width: "4rem", height: "2rem" });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_exported_related.SummarySkeleton, {});
     if (Summary)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Summary, {});
     if (summary)
@@ -98,10 +96,7 @@ const usePageHeader = (props) => {
   }, [Summary, summary, isSkeleton]);
   const currentToolbar = (0, import_react.useMemo)(() => {
     if (isSkeleton && (Toolbar || toolbar))
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["repeat(2, auto)"], gutter: "xxxs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "2rem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "2rem" })
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_exported_related.ToolbarSkeleton, {});
     if (Toolbar)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toolbar, {});
     if (toolbar)
@@ -110,7 +105,7 @@ const usePageHeader = (props) => {
   }, [Toolbar, toolbar, isSkeleton]);
   const currentPageTitle = (0, import_react.useMemo)(() => {
     if (isSkeleton && (PageTitle || pageTitle))
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", maxWidth: "100%", height: "2rem" });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_exported_related.PageTitleSkeleton, {});
     if (PageTitle)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageTitle, {});
     if (pageTitle)

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

@@ -0,0 +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(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(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,sDAA6B,OAAO,yCAAY;AAC1E,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,gDAAuB,iBAAiB;AACjE,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,eAAe,aAAa;AAAY,aAAO,4CAAC,6CAAkB;AACtE,QAAI;AAAW,aAAO,4CAAC,aAAU;AACjC,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,WAAW,UAAU,CAAC;AAErC,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,eAAe,QAAQ;AAAO,aAAO,4CAAC,wCAAa;AACvD,QAAI;AAAM,aAAO,4CAAC,QAAK;AACvB,QAAI;AAAM,aAAO;AACjB,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,UAAU,CAAC;AAE3B,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,QAAI,eAAe,eAAe;AAAc,aAAO,4CAAC,8CAAmB;AAC3E,QAAI;AAAa,aAAO,4CAAC,eAAY;AACrC,QAAI;AAAa,aAAO;AACxB,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,aAAa,UAAU,CAAC;AAEzC,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,eAAe,WAAW;AAAU,aAAO,4CAAC,2CAAgB;AAChE,QAAI;AAAS,aAAO,4CAAC,WAAQ;AAC7B,QAAI;AAAS,aAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,SAAS,UAAU,CAAC;AAEjC,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,eAAe,WAAW;AAAU,aAAO,4CAAC,2CAAgB;AAChE,QAAI;AAAS,aAAO,4CAAC,WAAQ;AAC7B,QAAI;AAAS,aAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,SAAS,UAAU,CAAC;AAEjC,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,eAAe,aAAa;AAAY,aAAO,4CAAC,6CAAkB;AACtE,QAAI;AAAW,aAAO,4CAAC,aAAU;AACjC,QAAI;AAAW,aAAO;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;",
+  "names": []
+}

package/dist/cjs/{v2/exported-related → exported-related}/data-test-ids.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/v2/exported-related/data-test-ids.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/exported-related/data-test-ids.ts", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const DSPageHeaderDataTestIds = {\n  CONTAINER: 'ds-page-header-container',\n  HEADER_TITLE: 'ds-page-header-title',\n  EDITABLE_HEADER_TITLE: 'ds-page-header-editable-title',\n  SUMMARY: 'ds-page-header-summary',\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,0BAA0B;AAAA,EACrC,WAAW;AAAA,EACX,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,SAAS;AACX;",
   "names": []

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

@@ -28,4 +28,5 @@ module.exports = __toCommonJS(exported_related_exports);
 var React = __toESM(require("react"));
 __reExport(exported_related_exports, require("./data-test-ids.js"), module.exports);
 __reExport(exported_related_exports, require("./theming.js"), module.exports);
+__reExport(exported_related_exports, require("./skeletons.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/exported-related/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/exported-related/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './data-test-ids.js';\nexport * from './theming.js';\nexport * from './skeletons.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,+BAAd;AACA,qCAAc,yBADd;AAEA,qCAAc,2BAFd;",
+  "names": []
+}

package/dist/cjs/exported-related/skeletons.js

@@ -0,0 +1,52 @@
+"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 skeletons_exports = {};
+__export(skeletons_exports, {
+  BackArrowSkeleton: () => BackArrowSkeleton,
+  BreadcrumbSkeleton: () => BreadcrumbSkeleton,
+  MenuSkeleton: () => MenuSkeleton,
+  PageTitleSkeleton: () => PageTitleSkeleton,
+  SummarySkeleton: () => SummarySkeleton,
+  ToolbarSkeleton: () => ToolbarSkeleton
+});
+module.exports = __toCommonJS(skeletons_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_skeleton = require("@elliemae/ds-skeleton");
+var import_ds_grid = require("@elliemae/ds-grid");
+const ToolbarSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["repeat(2, auto)"], gutter: "xxxs", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "2rem" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "2rem" })
+] });
+const BreadcrumbSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { cols: ["auto"], gutter: "xxxs", justifyContent: "flex-start", height: "24px", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "4rem", height: "1rem" }) });
+const SummarySkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { marginLeft: "xxs", variant: "rectangular", width: "4rem", height: "2rem" });
+const PageTitleSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", maxWidth: "100%", height: "2rem", minWidth: "200px" });
+const MenuSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "2rem", height: "2rem" });
+const BackArrowSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { marginRight: "xxs", variant: "rectangular", width: "2rem", height: "2rem" });
+//# sourceMappingURL=skeletons.js.map

package/dist/cjs/exported-related/skeletons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/exported-related/skeletons.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\nexport const ToolbarSkeleton = () => (\n  <Grid cols={['repeat(2, auto)']} gutter={'xxxs'}>\n    <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />\n    <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />\n  </Grid>\n);\nexport const BreadcrumbSkeleton = () => (\n  <Grid cols={['auto']} gutter={'xxxs'} justifyContent=\"flex-start\" height=\"24px\" alignItems=\"center\">\n    <DSSkeleton variant=\"rectangular\" width=\"4rem\" height=\"1rem\" />\n  </Grid>\n);\nexport const SummarySkeleton = () => <DSSkeleton marginLeft={'xxs'} variant=\"rectangular\" width=\"4rem\" height=\"2rem\" />;\nexport const PageTitleSkeleton = () => (\n  <DSSkeleton variant=\"rectangular\" maxWidth=\"100%\" height=\"2rem\" minWidth=\"200px\" />\n);\nexport const MenuSkeleton = () => <DSSkeleton variant=\"rectangular\" width=\"2rem\" height=\"2rem\" />;\nexport const BackArrowSkeleton = () => (\n  <DSSkeleton marginRight=\"xxs\" variant=\"rectangular\" width=\"2rem\" height=\"2rem\" />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGrB;AAHF,yBAA2B;AAC3B,qBAAqB;AACd,MAAM,kBAAkB,MAC7B,6CAAC,uBAAK,MAAM,CAAC,iBAAiB,GAAG,QAAQ,QACvC;AAAA,8CAAC,iCAAW,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AAAA,EAC7D,4CAAC,iCAAW,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AAAA,GAC/D;AAEK,MAAM,qBAAqB,MAChC,4CAAC,uBAAK,MAAM,CAAC,MAAM,GAAG,QAAQ,QAAQ,gBAAe,cAAa,QAAO,QAAO,YAAW,UACzF,sDAAC,iCAAW,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO,GAC/D;AAEK,MAAM,kBAAkB,MAAM,4CAAC,iCAAW,YAAY,OAAO,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AAC9G,MAAM,oBAAoB,MAC/B,4CAAC,iCAAW,SAAQ,eAAc,UAAS,QAAO,QAAO,QAAO,UAAS,SAAQ;AAE5E,MAAM,eAAe,MAAM,4CAAC,iCAAW,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;AACxF,MAAM,oBAAoB,MAC/B,4CAAC,iCAAW,aAAY,OAAM,SAAQ,eAAc,OAAM,QAAO,QAAO,QAAO;",
+  "names": []
+}

package/dist/cjs/{v2/exported-related → exported-related}/theming.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/v2/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const DSPageHeaderName = 'DSPageHeader';\n\nexport const DSPageHeaderSlots = {\n  CONTAINER: 'root',\n  HEADER_TITLE: 'header-title',\n  TOOLBAR: 'toolbar',\n  MENU: 'menu',\n  SUMMARY: 'summary',\n  BACK: 'back',\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,cAAc;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACR;",
   "names": []

package/dist/cjs/index.js

@@ -29,18 +29,25 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
+  DSPageHeader: () => import_ds_page_header_v1.DSPageHeader,
   DSPageHeaderEditableTitleWithSchema: () => import_PageHeaderEditableTitle.DSPageHeaderEditableTitleWithSchema,
   DSPageHeaderSummaryWithSchema: () => import_PageHeaderSummary.DSPageHeaderSummaryWithSchema,
   DSPageHeaderTitleWithSchema: () => import_PageHeaderTitle.DSPageHeaderTitleWithSchema,
-  default: () => import_DSPageHeader.default
+  DSPageHeaderV1WithSchema: () => import_ds_page_header_v1.DSPageHeaderV1WithSchema,
+  DSPageHeaderV2: () => import_PageHeader.DSPageHeaderV2,
+  DSPageHeaderWithSchema: () => import_PageHeader.DSPageHeaderWithSchema,
+  PageHeaderCustomRenderer: () => import_PageHeader.PageHeaderCustomRenderer,
+  PageHeaderEditableTitle: () => import_PageHeader.PageHeaderEditableTitle,
+  PageHeaderMenu: () => import_PageHeader.PageHeaderMenu,
+  PageHeaderSummary: () => import_PageHeader.PageHeaderSummary,
+  PageHeaderTitle: () => import_PageHeader.PageHeaderTitle
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./v1/DSPageHeader.js"), module.exports);
-__reExport(src_exports, require("./v2/PageHeader.js"), module.exports);
-var import_PageHeaderSummary = require("./v2/components/PageHeaderSummary.js");
-var import_PageHeaderTitle = require("./v2/components/PageHeaderTitle.js");
-var import_PageHeaderEditableTitle = require("./v2/components/PageHeaderEditableTitle.js");
-__reExport(src_exports, require("./v2/exported-related/index.js"), module.exports);
-var import_DSPageHeader = __toESM(require("./v1/DSPageHeader.js"));
+var import_ds_page_header_v1 = require("@elliemae/ds-page-header-v1");
+var import_PageHeader = require("./PageHeader.js");
+var import_PageHeaderSummary = require("./components/PageHeaderSummary.js");
+var import_PageHeaderTitle = require("./components/PageHeaderTitle.js");
+var import_PageHeaderEditableTitle = require("./components/PageHeaderEditableTitle.js");
+__reExport(src_exports, require("./exported-related/index.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './v1/DSPageHeader.js';\nexport * from './v2/PageHeader.js';\n\nexport { DSPageHeaderSummaryWithSchema } from './v2/components/PageHeaderSummary.js';\nexport { DSPageHeaderTitleWithSchema } from './v2/components/PageHeaderTitle.js';\nexport { DSPageHeaderEditableTitleWithSchema } from './v2/components/PageHeaderEditableTitle.js';\n\nexport * from './v2/exported-related/index.js';\nexport { default } from './v1/DSPageHeader.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,iCAAd;AACA,wBAAc,+BADd;AAGA,+BAA8C;AAC9C,6BAA4C;AAC5C,qCAAoD;AAEpD,wBAAc,2CAPd;AAQA,0BAAwB;",
+  "sourcesContent": ["export { DSPageHeader, DSPageHeaderV1WithSchema } from '@elliemae/ds-page-header-v1';\nexport {\n  DSPageHeaderV2,\n  DSPageHeaderWithSchema,\n  PageHeaderCustomRenderer,\n  PageHeaderEditableTitle,\n  PageHeaderMenu,\n  PageHeaderSummary,\n  PageHeaderTitle,\n} from './PageHeader.js';\nexport { DSPageHeaderSummaryWithSchema } from './components/PageHeaderSummary.js';\nexport { DSPageHeaderTitleWithSchema } from './components/PageHeaderTitle.js';\nexport { DSPageHeaderEditableTitleWithSchema } from './components/PageHeaderEditableTitle.js';\nexport * from './exported-related/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAuD;AACvD,wBAQO;AACP,+BAA8C;AAC9C,6BAA4C;AAC5C,qCAAoD;AACpD,wBAAc,wCAbd;",
   "names": []
 }

package/dist/cjs/{v2/react-desc-prop-types.js → react-desc-prop-types.js}

@@ -62,6 +62,7 @@ const PageHeaderPropTypes = {
 };
 const defaultProps = {
   containerProps: {},
-  withBottomSeparator: true
+  withBottomSeparator: true,
+  isSkeleton: false
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/{v2/react-desc-prop-types.js.map → react-desc-prop-types.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSPageHeaderT {\n  export interface DefaultProps {\n    withBottomSeparator: boolean;\n    containerProps: object;\n    isSkeleton: boolean;\n  }\n\n  export interface OptionalProps {\n    breadcrumbs?: JSX.Element;\n    pageTitle?: JSX.Element;\n    backarrow?: JSX.Element;\n    summary?: JSX.Element;\n    toolbar?: JSX.Element;\n    menu?: JSX.Element;\n    Breadcrumbs?: () => JSX.Element;\n    PageTitle?: () => JSX.Element;\n    Backarrow?: () => JSX.Element;\n    Summary?: () => JSX.Element;\n    Toolbar?: () => JSX.Element;\n    Menu?: () => JSX.Element;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps {}\n}\n\nexport const PageHeaderPropTypes = {\n  ...globalAttributesPropTypes,\n  /** props injected to wrapper of page header */\n  containerProps: PropTypes.shape({}).description('props injected to wrapper of page header'),\n  /** breadcrumbs component */\n  breadcrumbs: PropTypes.node\n    .description('breadcrumbs component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Breadcrumbs: PropTypes.func.description('breadcrumbs component'),\n  /** PageHeaderTitle component */\n  pageTitle: PropTypes.node\n    .description('PageHeaderTitle component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  PageTitle: PropTypes.func.description('PageHeaderTitle component'),\n  /** back arrow component */\n  backarrow: PropTypes.node\n    .description('back arrow component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Backarrow: PropTypes.func.description('back arrow component'),\n\n  /** PageHeaderSummary component */\n  summary: PropTypes.node\n    .description('PageHeaderSummary component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Summary: PropTypes.func.description('PageHeaderSummary component'),\n  /** toolbar component */\n  toolbar: PropTypes.node\n    .description('toolbar component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Toolbar: PropTypes.func.description('toolbar component'),\n\n  /** PageHeaderMenu component */\n  menu: PropTypes.node\n    .description('PageHeaderMenu component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Menu: PropTypes.func.description('PageHeaderMenu component'),\n  /** Border bottom below the page header */\n  withBottomSeparator: PropTypes.bool.description('Border bottom below the page header'),\n  isSkeleton: PropTypes.bool.description('Loading state of the page header').defaultValue(false),\n};\n\nexport const defaultProps: DSPageHeaderT.DefaultProps = {\n  containerProps: {},\n  withBottomSeparator: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AA2B9C,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA;AAAA,EAEH,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,0CAA0C;AAAA;AAAA,EAE1F,aAAa,kCAAU,KACpB,YAAY,uBAAuB,EACnC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,aAAa,kCAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAE/D,WAAW,kCAAU,KAClB,YAAY,2BAA2B,EACvC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,WAAW,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAEjE,WAAW,kCAAU,KAClB,YAAY,sBAAsB,EAClC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,WAAW,kCAAU,KAAK,YAAY,sBAAsB;AAAA;AAAA,EAG5D,SAAS,kCAAU,KAChB,YAAY,6BAA6B,EACzC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,SAAS,kCAAU,KAAK,YAAY,6BAA6B;AAAA;AAAA,EAEjE,SAAS,kCAAU,KAChB,YAAY,mBAAmB,EAC/B,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,SAAS,kCAAU,KAAK,YAAY,mBAAmB;AAAA;AAAA,EAGvD,MAAM,kCAAU,KACb,YAAY,0BAA0B,EACtC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,MAAM,kCAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAE3D,qBAAqB,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACrF,YAAY,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAC/F;AAEO,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,qBAAqB;AACvB;",
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSPageHeaderT {\n  export interface DefaultProps {\n    withBottomSeparator: boolean;\n    containerProps: object;\n    isSkeleton: boolean;\n  }\n\n  export interface OptionalProps {\n    breadcrumbs?: JSX.Element;\n    pageTitle?: JSX.Element;\n    backarrow?: JSX.Element;\n    summary?: JSX.Element;\n    toolbar?: JSX.Element;\n    menu?: JSX.Element;\n    Breadcrumbs?: () => JSX.Element;\n    PageTitle?: () => JSX.Element;\n    Backarrow?: () => JSX.Element;\n    Summary?: () => JSX.Element;\n    Toolbar?: () => JSX.Element;\n    Menu?: () => JSX.Element;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps {}\n}\n\nexport const PageHeaderPropTypes = {\n  ...globalAttributesPropTypes,\n  /** props injected to wrapper of page header */\n  containerProps: PropTypes.shape({}).description('props injected to wrapper of page header'),\n  /** breadcrumbs component */\n  breadcrumbs: PropTypes.node\n    .description('breadcrumbs component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Breadcrumbs: PropTypes.func.description('breadcrumbs component'),\n  /** PageHeaderTitle component */\n  pageTitle: PropTypes.node\n    .description('PageHeaderTitle component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  PageTitle: PropTypes.func.description('PageHeaderTitle component'),\n  /** back arrow component */\n  backarrow: PropTypes.node\n    .description('back arrow component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Backarrow: PropTypes.func.description('back arrow component'),\n\n  /** PageHeaderSummary component */\n  summary: PropTypes.node\n    .description('PageHeaderSummary component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Summary: PropTypes.func.description('PageHeaderSummary component'),\n  /** toolbar component */\n  toolbar: PropTypes.node\n    .description('toolbar component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Toolbar: PropTypes.func.description('toolbar component'),\n\n  /** PageHeaderMenu component */\n  menu: PropTypes.node\n    .description('PageHeaderMenu component')\n    .deprecated({ version: 'Prop will be removed on 05/01/2022' }),\n  Menu: PropTypes.func.description('PageHeaderMenu component'),\n  /** Border bottom below the page header */\n  withBottomSeparator: PropTypes.bool.description('Border bottom below the page header'),\n  isSkeleton: PropTypes.bool.description('Loading state of the page header').defaultValue(false),\n};\n\nexport const defaultProps: DSPageHeaderT.DefaultProps = {\n  containerProps: {},\n  withBottomSeparator: true,\n  isSkeleton: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AA2B9C,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA;AAAA,EAEH,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,0CAA0C;AAAA;AAAA,EAE1F,aAAa,kCAAU,KACpB,YAAY,uBAAuB,EACnC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,aAAa,kCAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAE/D,WAAW,kCAAU,KAClB,YAAY,2BAA2B,EACvC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,WAAW,kCAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAEjE,WAAW,kCAAU,KAClB,YAAY,sBAAsB,EAClC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,WAAW,kCAAU,KAAK,YAAY,sBAAsB;AAAA;AAAA,EAG5D,SAAS,kCAAU,KAChB,YAAY,6BAA6B,EACzC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,SAAS,kCAAU,KAAK,YAAY,6BAA6B;AAAA;AAAA,EAEjE,SAAS,kCAAU,KAChB,YAAY,mBAAmB,EAC/B,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,SAAS,kCAAU,KAAK,YAAY,mBAAmB;AAAA;AAAA,EAGvD,MAAM,kCAAU,KACb,YAAY,0BAA0B,EACtC,WAAW,EAAE,SAAS,qCAAqC,CAAC;AAAA,EAC/D,MAAM,kCAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAE3D,qBAAqB,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACrF,YAAY,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAC/F;AAEO,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,qBAAqB;AAAA,EACrB,YAAY;AACd;",
   "names": []
 }

package/dist/cjs/{v2/styled.js.map → styled.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/v2/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSPageHeaderSlots, DSPageHeaderName } from './exported-related/index.js';\n\ninterface StyledContainerProps {\n  withBottomSeparator?: boolean;\n}\n\nexport const PageHeaderCustomRenderer = styled('div')`\n  width: auto;\n  color: ${({ theme }) => theme.colors.brand[800]};\n  font-style: italic;\n  font-size: 0.8rem;\n`;\n\nexport const Container = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.CONTAINER,\n})<StyledContainerProps>`\n  width: 100%;\n  margin-bottom: 8px;\n  ${xStyledCommonProps}\n`;\n\nexport const ContainerWBorder = styled('div')<StyledContainerProps>`\n  width: 100%;\n  padding: 12px 0 8px 0;\n  display: grid;\n  align-items: center;\n  height: 100%;\n  ${({ withBottomSeparator, theme }) =>\n    !withBottomSeparator ? '' : `border-bottom: solid 1px ${theme.colors.neutral[400]};`}\n`;\n\nexport const PageHeaderToolbarWrapper = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.TOOLBAR,\n})`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  & .em-ds-toolbar {\n    height: auto;\n    background: none;\n    & > div {\n      .em-ds-button {\n        margin-left: ${({ theme }) => theme.space.xxs};\n      }\n      .em-ds-input-search {\n        box-shadow: none;\n        div {\n          height: 100%;\n        }\n      }\n    }\n  }\n`;\n\nexport const PageHeaderMenu = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.MENU,\n})`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-left: ${({ theme }) => theme.space.xxxs};\n  .em-ds-button--secondary {\n    &:not(:hover) {\n      border-color: transparent;\n    }\n    &:focus:after {\n      top: -1px;\n      left: -1px;\n      width: calc(100% + 2px);\n      height: calc(100% + 2px);\n    }\n  }\n`;\n\nexport const PageHeaderBack = styled('div', {\n  name: DSPageHeaderName,\n  slot: DSPageHeaderSlots.BACK,\n})`\n  display: flex;\n  align-items: center;\n  fill: ${({ theme }) => theme.colors.brand[600]};\n  cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,8BAAoD;AAM7C,MAAM,+BAA2B,yBAAO,KAAK;AAAA;AAAA,WAEzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAKzC,MAAM,gBAAY,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,IAGG;AAAA;AAGG,MAAM,uBAAmB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,EAAE,qBAAqB,MAAM,MAC9B,CAAC,sBAAsB,KAAK,4BAA4B,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7E,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUsB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3C,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AActC,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,0CAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,UAGS,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
   "names": []

package/dist/cjs/{v2/tests → tests}/utils.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/v2/tests/utils.js", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/tests/utils.js", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { logger } from '@elliemae/ds-utilities';\n\nconst subItems = [\n  {\n    id: 'id3',\n    label: 'SubMenu List Item-1',\n    onClick: (e) => logger(e, 'subMenu id3'),\n  },\n  {\n    id: 'id4',\n    type: 'subMenu',\n    label: 'SubMenu List Item-2',\n    onClick: (e) => logger(e, 'subMenu id4'),\n    subItems: [\n      {\n        id: 'id5',\n        label: 'SubMenu List Item-2',\n        onClick: (e) => logger(e, 'subMenu id5'),\n      },\n    ],\n  },\n];\n\nexport const options = [\n  {\n    type: 'SelectionGroup',\n    id: 'select-option',\n    multi: false,\n    closeOnClick: false,\n    interactionType: 'click',\n    items: [\n      {\n        id: 'id-1',\n        selectable: true,\n        type: 'subMenu',\n        label: 'View Example 123',\n        rightAddonType: 'elipsis',\n        interactionType: 'click',\n        subItems,\n      },\n      {\n        id: 'id-2',\n        type: 'subMenu',\n        label: 'Option 2',\n        rightAddonType: 'elipsis',\n        interactionType: 'click',\n        subItems,\n      },\n      {\n        id: 'id-3',\n        type: 'subMenu',\n        label: 'Option 3',\n        rightAddonType: 'elipsis',\n        interactionType: 'click',\n        subItems,\n      },\n      {\n        id: 'id-4',\n        type: 'subMenu',\n        label: 'Option 4',\n        rightAddonType: 'elipsis',\n        interactionType: 'click',\n        subItems,\n      },\n      {\n        id: 'id-5',\n        type: 'subMenu',\n        label: 'Option 5',\n        rightAddonType: 'elipsis',\n        interactionType: 'click',\n        subItems,\n      },\n      {\n        id: 'id-6',\n        type: 'subMenu',\n        label: 'Option 6',\n        rightAddonType: 'elipsis',\n        interactionType: 'click',\n        subItems,\n      },\n      {\n        id: 'id-7',\n        type: 'subMenu',\n        label: 'Truncate long option Other Custom View  Long Long Long  Long Long',\n        rightAddonType: 'elipsis',\n        interactionType: 'click',\n        subItems,\n      },\n    ],\n  },\n];\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuB;AAEvB,MAAM,WAAW;AAAA,EACf;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,SAAS,CAAC,UAAM,4BAAO,GAAG,aAAa;AAAA,EACzC;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS,CAAC,UAAM,4BAAO,GAAG,aAAa;AAAA,IACvC,UAAU;AAAA,MACR;AAAA,QACE,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,SAAS,CAAC,UAAM,4BAAO,GAAG,aAAa;AAAA,MACzC;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAU;AAAA,EACrB;AAAA,IACE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ,YAAY;AAAA,QACZ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,MACF;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,MACF;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,MACF;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,MACF;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,MACF;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,MACF;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []

package/dist/esm/{v2/PageHeader.js → PageHeader.js}

@@ -49,8 +49,8 @@ const DSPageHeaderV2 = (props) => {
         /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(PageHeaderBack, { children: currentBackArrow }) }),
         /* @__PURE__ */ jsxs(Grid, { rows: ["auto", "auto"], children: [
           /* @__PURE__ */ jsx(Grid, { className: "em-ds-page-header-v2-breadcrumb", children: currentBreadcrumbs }),
-          /* @__PURE__ */ jsxs(Grid, { cols: mainRow, children: [
-            /* @__PURE__ */ jsxs(Grid, { cols: pageTitleRow, children: [
+          /* @__PURE__ */ jsxs(Grid, { cols: mainRow, alignItems: "center", children: [
+            /* @__PURE__ */ jsxs(Grid, { cols: pageTitleRow, alignItems: "center", children: [
               currentPageTitle,
               currentMenu && /* @__PURE__ */ jsx(PageHeaderMenu, { children: currentMenu }),
               currentSummary,

package/dist/esm/{v2/PageHeader.js.map → 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 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/PageHeaderTitle.js';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle.js';\nimport { PageHeaderSummary } from './components/PageHeaderSummary.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 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') as string[];\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 = 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACuDX,cAKE,YALF;AAnDZ,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,yBAAyB,wBAAwB;AAE1D,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,IAAI,cAAc,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;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,eAAa,wBAAwB;AAAA,MAErC,8BAAC,oBAAiB,qBAChB,+BAAC,QAAK,MAAM,YACV;AAAA,4BAAC,QACC,8BAAC,kBAAgB,4BAAiB,GACpC;AAAA,QACA,qBAAC,QAAK,MAAM,CAAC,QAAQ,MAAM,GACzB;AAAA,8BAAC,QAAK,WAAU,mCAAmC,8BAAmB;AAAA,UACtE,qBAAC,QAAK,MAAM,SACV;AAAA,iCAAC,QAAK,MAAM,cACT;AAAA;AAAA,cACA,eAAe,oBAAC,kBAAgB,uBAAY;AAAA,cAC5C;AAAA,cACD,oBAAC,SAAI;AAAA,eACP;AAAA,YACA,oBAAC,QACC,8BAAC,4BAA0B,0BAAe,GAC5C;AAAA,aACF;AAAA,WACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AAC7B,MAAM,yBAAyB,SAAS,cAAc;AAEtD,uBAAuB,YAAY;AAYnC,IAAO,qBAAQ;",
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PageHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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/PageHeaderTitle.js';\nimport { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle.js';\nimport { PageHeaderSummary } from './components/PageHeaderSummary.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 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') as string[];\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                {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 = 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACuDX,cAKE,YALF;AAnDZ,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,yBAAyB,wBAAwB;AAE1D,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,IAAI,cAAc,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;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,eAAa,wBAAwB;AAAA,MAErC,8BAAC,oBAAiB,qBAChB,+BAAC,QAAK,MAAM,YACV;AAAA,4BAAC,QACC,8BAAC,kBAAgB,4BAAiB,GACpC;AAAA,QACA,qBAAC,QAAK,MAAM,CAAC,QAAQ,MAAM,GACzB;AAAA,8BAAC,QAAK,WAAU,mCAAmC,8BAAmB;AAAA,UACtE,qBAAC,QAAK,MAAM,SAAS,YAAW,UAC9B;AAAA,iCAAC,QAAK,MAAM,cAAc,YAAW,UAClC;AAAA;AAAA,cACA,eAAe,oBAAC,kBAAgB,uBAAY;AAAA,cAC5C;AAAA,cACD,oBAAC,SAAI;AAAA,eACP;AAAA,YACA,oBAAC,QACC,8BAAC,4BAA0B,0BAAe,GAC5C;AAAA,aACF;AAAA,WACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;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 → components}/PageHeaderEditableTitle.js

@@ -7,7 +7,6 @@ import { PropTypes, describe, useGetGlobalAttributes, globalAttributesPropTypes
 import { useDerivedStateFromProps, useMeasure } from "@elliemae/ds-utilities";
 import { PageHeaderTitle } from "./PageHeaderTitle.js";
 import { DSPageHeaderDataTestIds } from "../exported-related/index.js";
-const useMeasureSafe = useMeasure.default ?? useMeasure;
 const EditableContainer = styled("div")`
   height: 32px;
   position: relative;
@@ -28,17 +27,13 @@ const EditableContainer = styled("div")`
     }
   }
 `;
-const PageHeaderEditableTitle = ({
-  children: value,
-  editing: editingProp = false,
-  showMarker = false,
-  ...rest
-}) => {
+const PageHeaderEditableTitle = (props2) => {
+  const { children: value, editing: editingProp, showMarker, ...rest } = props2;
   const [titleValue, setTitleValue] = useState(value);
   const [hovered, setHovered] = useState(false);
   const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
   const titleRef = useRef(null);
-  const { width } = useMeasureSafe(titleRef);
+  const { width } = useMeasure(titleRef);
   const handleOnChange = useCallback((e) => {
     setTitleValue(e.target.value);
   }, []);

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/PageHeaderEditableTitle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe, useGetGlobalAttributes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps, useMeasure } from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from './PageHeaderTitle.js';\nimport { DSPageHeaderDataTestIds } from '../exported-related/index.js';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n// const useMeasureSafe: typeof useMeasure = useMeasure.default ?? useMeasure;\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 interface PageHeaderEditableTitleProps {\n  children?: string;\n  editing?: boolean;\n  showMarker?: boolean;\n  [key: string]: unknown;\n}\n\nexport const PageHeaderEditableTitle = (props: PageHeaderEditableTitleProps) => {\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(null);\n  const { width } = useMeasure(titleRef);\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\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,YAAY,WAAW;ACwEnB,SAOI,KAPJ;AAvEJ,SAAgB,QAAQ,UAAU,mBAAmB;AACrD,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,cAAc;AACvB,SAAS,WAAW,UAAU,wBAAwB,iCAAiC;AACvF,SAAS,0BAA0B,kBAAkB;AACrD,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAKxC,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,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA,eAE5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAYjD,MAAM,0BAA0B,CAACA,WAAwC;AAC9E,QAAM,EAAE,UAAU,OAAO,SAAS,aAAa,YAAY,GAAG,KAAK,IAAIA;AACvE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,yBAAyB,eAAe,KAAK;AAC3E,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,IAAI,WAAW,QAAQ;AAErC,QAAM,iBAA6D,YAAY,CAAC,MAAM;AACpF,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;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,UAAU,6BAA6B;AAAA,MAC7D,cAAc,MAAM,WAAW,IAAI;AAAA,MACnC,cAAc,MAAM,WAAW,KAAK;AAAA,MACpC,eAAa,wBAAwB;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,oBAAC,SAAI,KAAK,UAAU,OAAO,EAAE,OAAO,cAAc,GAChD,8BAAC,mBAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,GAAG;AAAA;AAAA,EAEH,UAAU,UAAU,OAAO,YAAY,gBAAgB;AAAA;AAAA,EAEvD,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA;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": ["props"]
+}

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

@@ -34,11 +34,14 @@ const PageHeaderSummaryWrapper = styled("div", {
     width: ${({ theme }) => theme.space.l};
   }
 `;
-const PageHeaderSummary = ({ value = null, label = "", ...rest }) => /* @__PURE__ */ jsxs(PageHeaderSummaryWrapper, { "data-testid": DSPageHeaderDataTestIds.SUMMARY, ...rest, children: [
-  (value === 0 || value) && /* @__PURE__ */ jsx("div", { className: "ph-summary-value", children: value }),
-  label && /* @__PURE__ */ jsx("div", { className: "ph-summary-label", children: label }),
-  (value === 0 || value || label) && /* @__PURE__ */ jsx("div", { className: "ph-summary-space" })
-] });
+const PageHeaderSummary = (props2) => {
+  const { value = null, label = "", ...rest } = props2;
+  return /* @__PURE__ */ jsxs(PageHeaderSummaryWrapper, { "data-testid": DSPageHeaderDataTestIds.SUMMARY, ...rest, children: [
+    (value === 0 || value) && /* @__PURE__ */ jsx("div", { className: "ph-summary-value", children: value }),
+    label && /* @__PURE__ */ jsx("div", { className: "ph-summary-label", children: label }),
+    (value === 0 || value || label) && /* @__PURE__ */ jsx("div", { className: "ph-summary-space" })
+  ] });
+};
 const props = {
   /** value for page header summary */
   value: PropTypes.number.description("value for page header summary"),