@elliemae/ds-panel-header 3.80.0-next.22

package/dist/cjs/DSPanelHeader.js

@@ -0,0 +1,91 @@
+"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 DSPanelHeader_exports = {};
+__export(DSPanelHeader_exports, {
+  DSPanelHeader: () => DSPanelHeader,
+  DSPanelHeaderWithSchema: () => DSPanelHeaderWithSchema
+});
+module.exports = __toCommonJS(DSPanelHeader_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_usePanelHeader = require("./config/usePanelHeader.js");
+var import_constants = require("./constants/index.js");
+const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPanelHeaderName, slot: import_constants.PANEL_HEADER_SLOTS.ROOT })`
+  background-color: ${(props) => props.theme.colors.brand[100]};
+  padding-top: ${(props) => props.theme.space.xxs2};
+  padding-bottom: ${(props) => props.theme.space.xxs2};
+  padding-left: ${(props) => props.theme.space.xs};
+  padding-right: ${(props) => props.theme.space.xxs};
+  col-gap: ${(props) => props.theme.space.xs};
+  row-gap: ${(props) => props.theme.space.xxs};
+  min-height: 46px;
+  min-width: 312px;
+`;
+const StyledLeftRegion = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPanelHeaderName, slot: import_constants.PANEL_HEADER_SLOTS.LEFT_REGION })`
+  min-width: 0;
+`;
+const StyledRightRegion = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPanelHeaderName, slot: import_constants.PANEL_HEADER_SLOTS.RIGHT_REGION })`
+  min-width: 0;
+`;
+const NARROW_LAYOUT_MODES = ["s", "xs"];
+const DSPanelHeader = (props) => {
+  const { propsWithDefault, xstyledProps } = (0, import_usePanelHeader.usePanelHeader)(props);
+  const { LeftRegion, RightRegion } = propsWithDefault;
+  const layoutMode = (0, import_ds_system.useGetLayoutMode)();
+  const mainContentCols = import_react.default.useMemo(
+    () => layoutMode && NARROW_LAYOUT_MODES.includes(layoutMode) ? ["1fr"] : ["1fr", "auto"],
+    [layoutMode]
+  );
+  const getOwnerProps = () => propsWithDefault;
+  const getOwnerPropsArguments = () => ({});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledWrapper,
+    {
+      className: propsWithDefault.className,
+      cols: mainContentCols,
+      alignItems: "center",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      ...xstyledProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLeftRegion, { getOwnerProps, getOwnerPropsArguments, children: LeftRegion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftRegion, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledRightRegion, { getOwnerProps, getOwnerPropsArguments, children: RightRegion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightRegion, {}) })
+      ]
+    }
+  );
+};
+DSPanelHeader.displayName = import_constants.DSPanelHeaderName;
+const DSPanelHeaderWithSchema = (0, import_ds_props_helpers.describe)(DSPanelHeader);
+DSPanelHeaderWithSchema.propTypes = import_react_desc_prop_types.DSPanelHeaderPropTypesSchema;
+//# sourceMappingURL=DSPanelHeader.js.map

package/dist/cjs/DSPanelHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSPanelHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, useGetLayoutMode } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSPanelHeaderT, DSPanelHeaderPropTypesSchema } from './react-desc-prop-types.js';\nimport { usePanelHeader } from './config/usePanelHeader.js';\nimport { PANEL_HEADER_SLOTS, DSPanelHeaderName } from './constants/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.ROOT })`\n  background-color: ${(props) => props.theme.colors.brand[100]};\n  padding-top: ${(props) => props.theme.space.xxs2};\n  padding-bottom: ${(props) => props.theme.space.xxs2};\n  padding-left: ${(props) => props.theme.space.xs};\n  padding-right: ${(props) => props.theme.space.xxs};\n  col-gap: ${(props) => props.theme.space.xs};\n  row-gap: ${(props) => props.theme.space.xxs};\n  min-height: 46px;\n  min-width: 312px;\n`;\n// Grid items default to `min-width: auto`, which sizes to the content's intrinsic (unwrapped) width and\n// blows out the grid instead of letting text wrap \u2014 `min-width: 0` is what actually allows a consumer's\n// title/subtitle typography inside this region to wrap onto additional lines instead of overflowing.\nconst StyledLeftRegion = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.LEFT_REGION })`\n  min-width: 0;\n`;\nconst StyledRightRegion = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.RIGHT_REGION })`\n  min-width: 0;\n`;\n// Narrow layout modes stack RightRegion below LeftRegion (single column, two rows) instead of side-by-side.\n// `layoutMode` comes from an ancestor DSLayoutProvider \u2014 Dimsum components react to it rather than measuring\n// their own width, since the consumer is the one who knows what \"narrow\" means for their layout.\nconst NARROW_LAYOUT_MODES = ['s', 'xs'];\n\nconst DSPanelHeader: React.ComponentType<DSPanelHeaderT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = usePanelHeader(props);\n  const { LeftRegion, RightRegion } = propsWithDefault;\n  const layoutMode = useGetLayoutMode();\n  const mainContentCols = React.useMemo(\n    () => (layoutMode && NARROW_LAYOUT_MODES.includes(layoutMode) ? ['1fr'] : ['1fr', 'auto']),\n    [layoutMode],\n  );\n  const getOwnerProps = () => propsWithDefault;\n  const getOwnerPropsArguments = () => ({});\n  return (\n    <StyledWrapper\n      className={propsWithDefault.className}\n      cols={mainContentCols}\n      alignItems=\"center\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...xstyledProps}\n    >\n      <StyledLeftRegion getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {LeftRegion && <LeftRegion />}\n      </StyledLeftRegion>\n      <StyledRightRegion getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {RightRegion && <RightRegion />}\n      </StyledRightRegion>\n    </StyledWrapper>\n  );\n};\n\nDSPanelHeader.displayName = DSPanelHeaderName;\nconst DSPanelHeaderWithSchema = describe(DSPanelHeader);\nDSPanelHeaderWithSchema.propTypes = DSPanelHeaderPropTypesSchema;\n\nexport { DSPanelHeader, DSPanelHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4CnB;AA5CJ,mBAAkB;AAClB,8BAAyB;AACzB,uBAAyC;AACzC,qBAAqB;AACrB,mCAAkE;AAClE,4BAA+B;AAC/B,uBAAsD;AAEtD,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,oCAAmB,MAAM,oCAAmB,KAAK,CAAC;AAAA,sBACvE,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,iBAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,oBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,kBACnC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,aACtC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,aAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAO7C,MAAM,uBAAmB,yBAAO,qBAAM,EAAE,MAAM,oCAAmB,MAAM,oCAAmB,YAAY,CAAC;AAAA;AAAA;AAGvG,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,oCAAmB,MAAM,oCAAmB,aAAa,CAAC;AAAA;AAAA;AAMzG,MAAM,sBAAsB,CAAC,KAAK,IAAI;AAEtC,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,aAAa,QAAI,sCAAe,KAAK;AAC/D,QAAM,EAAE,YAAY,YAAY,IAAI;AACpC,QAAM,iBAAa,mCAAiB;AACpC,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,MAAO,cAAc,oBAAoB,SAAS,UAAU,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,MAAM;AAAA,IACxF,CAAC,UAAU;AAAA,EACb;AACA,QAAM,gBAAgB,MAAM;AAC5B,QAAM,yBAAyB,OAAO,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB;AAAA,MAC5B,MAAM;AAAA,MACN,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,oBAAiB,eAA8B,wBAC7C,wBAAc,4CAAC,cAAW,GAC7B;AAAA,QACA,4CAAC,qBAAkB,eAA8B,wBAC9C,yBAAe,4CAAC,eAAY,GAC/B;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "names": ["React"]
+}

package/dist/cjs/config/usePanelHeader.js

@@ -0,0 +1,63 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePanelHeader_exports = {};
+__export(usePanelHeader_exports, {
+  usePanelHeader: () => usePanelHeader
+});
+module.exports = __toCommonJS(usePanelHeader_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_uid = require("uid");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useValidateProps = require("./useValidateProps.js");
+const usePanelHeader = (propsFromUser) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSPanelHeaderPropTypes);
+  const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const instanceUid = import_react.default.useMemo(() => `ds-panel-header-${(0, import_uid.uid)(5)}`, []);
+  return import_react.default.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalProps,
+      instanceUid
+      // ...eventHandlers,
+    }),
+    [
+      propsWithDefault,
+      xstyledProps,
+      globalProps,
+      instanceUid
+      // eventHandlers,
+    ]
+  );
+};
+//# sourceMappingURL=usePanelHeader.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/usePanelHeader.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSPanelHeaderT, DSPanelHeaderPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface PanelHeaderCTX {\n  propsWithDefault: DSPanelHeaderT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const usePanelHeader = (propsFromUser: DSPanelHeaderT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPanelHeaderT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPanelHeaderPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSPanelHeaderT.InternalProps, HTMLElement>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-panel-header-${uid(5)}`, []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AACzF,iBAAoB;AACpB,mCAA0E;AAC1E,8BAAiC;AAQ1B,MAAM,iBAAiB,CAAC,kBAAwC;AAIrE,QAAM,uBAAmB,sDAA2D,eAAe,yCAAY;AAC/G,gDAAiB,kBAAkB,mDAAsB;AAIzD,QAAM,kBAAc,gDAAkE,gBAAgB;AACtG,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,uBAAmB,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAMvE,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/config/useValidateProps.js

@@ -0,0 +1,40 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useValidateProps_exports = {};
+__export(useValidateProps_exports, {
+  useValidateProps: () => useValidateProps
+});
+module.exports = __toCommonJS(useValidateProps_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("../constants/index.js");
+const useValidateProps = (props, propTypes) => {
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_constants.DSPanelHeaderName);
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPanelHeaderT } from '../react-desc-prop-types.js';\nimport { DSPanelHeaderName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSPanelHeaderT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPanelHeaderName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,uBAAkC;AAE3B,MAAM,mBAAmB,CAAC,OAAqC,cAA4C;AAEhH,8DAA+B,OAAO,WAAW,kCAAiB;AACpE;",
+  "names": []
+}

package/dist/cjs/constants/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  DSPanelHeaderName: () => DSPanelHeaderName,
+  PANEL_HEADER_DATA_TESTID: () => PANEL_HEADER_DATA_TESTID,
+  PANEL_HEADER_SLOTS: () => PANEL_HEADER_SLOTS
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const DSPanelHeaderName = "DSPanelheader";
+const PANEL_HEADER_SLOTS = {
+  ROOT: "root",
+  LEFT_REGION: "leftRegion",
+  RIGHT_REGION: "rightRegion"
+};
+const PANEL_HEADER_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSPanelHeaderName, PANEL_HEADER_SLOTS);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSPanelHeaderName = 'DSPanelheader';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PANEL_HEADER_SLOTS = {\n  ROOT: 'root',\n  LEFT_REGION: 'leftRegion',\n  RIGHT_REGION: 'rightRegion',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PANEL_HEADER_DATA_TESTID = slotObjectToDataTestIds(DSPanelHeaderName, PANEL_HEADER_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,oBAAoB;AAG1B,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,cAAc;AAChB;AAGO,MAAM,+BAA2B,0CAAwB,mBAAmB,kBAAkB;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  DSPanelHeader: () => import_DSPanelHeader.DSPanelHeader,
+  DSPanelHeaderWithSchema: () => import_DSPanelHeader.DSPanelHeaderWithSchema,
+  PANEL_HEADER_DATA_TESTID: () => import_constants.PANEL_HEADER_DATA_TESTID,
+  PANEL_HEADER_SLOTS: () => import_constants.PANEL_HEADER_SLOTS
+});
+module.exports = __toCommonJS(index_exports);
+var React = __toESM(require("react"));
+var import_DSPanelHeader = require("./DSPanelHeader.js");
+var import_constants = require("./constants/index.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSPanelHeader, DSPanelHeaderWithSchema } from './DSPanelHeader.js';\nexport { type DSPanelHeaderT } from './react-desc-prop-types.js';\nexport { PANEL_HEADER_SLOTS, PANEL_HEADER_DATA_TESTID } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,2BAAuD;AAEvD,uBAA6D;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,50 @@
+"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 react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSPanelHeaderPropTypes: () => DSPanelHeaderPropTypes,
+  DSPanelHeaderPropTypesSchema: () => DSPanelHeaderPropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
+const defaultProps = {};
+const DSPanelHeaderPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSPanelHeaderName, import_constants.PANEL_HEADER_SLOTS),
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  LeftRegion: import_ds_props_helpers.PropTypes.func.description("Region A \u2014 agnostic region intended to identify the content (e.g. a title)"),
+  RightRegion: import_ds_props_helpers.PropTypes.func.description(
+    "Region 1 \u2014 agnostic region reserved for interactive elements, such as a Toolbar"
+  )
+};
+const DSPanelHeaderPropTypesSchema = DSPanelHeaderPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPanelHeaderName, PANEL_HEADER_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPanelHeaderT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSPanelHeaderName,\n    typeof PANEL_HEADER_SLOTS\n  > {\n    className?: string;\n    /** Region A \u2014 agnostic region intended to identify the content (e.g. a title) */\n    LeftRegion?: () => JSX.Element;\n    /** Region 1 \u2014 agnostic region reserved for interactive elements, such as a Toolbar */\n    RightRegion?: () => JSX.Element;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPanelHeaderT.DefaultProps = {};\n\nexport const DSPanelHeaderPropTypes: DSPropTypesSchema<DSPanelHeaderT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPanelHeaderName, PANEL_HEADER_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  LeftRegion: PropTypes.func.description('Region A \u2014 agnostic region intended to identify the content (e.g. a title)'),\n  RightRegion: PropTypes.func.description(\n    'Region 1 \u2014 agnostic region reserved for interactive elements, such as a Toolbar',\n  ),\n};\n\nexport const DSPanelHeaderPropTypesSchema = DSPanelHeaderPropTypes as unknown as ValidationMap<DSPanelHeaderT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAAsD;AAmC/C,MAAM,eAA4C,CAAC;AAEnD,MAAM,yBAAkE;AAAA,EAC7E,OAAG,kDAAyB,oCAAmB,mCAAkB;AAAA,EACjE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,YAAY,kCAAU,KAAK,YAAY,iFAA4E;AAAA,EACnH,aAAa,kCAAU,KAAK;AAAA,IAC1B;AAAA,EACF;AACF;AAEO,MAAM,+BAA+B;",
+  "names": []
+}

package/dist/cjs/typescript-testing/DSPanelHeaderNamespace.js

@@ -0,0 +1,113 @@
+"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 __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 React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import__ = require("../index.js");
+const TitleRegion = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "title" });
+const ToolbarRegion = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "toolbar" });
+const testRequiredProps = {};
+const testOptionalProps = {
+  className: "string",
+  LeftRegion: TitleRegion,
+  RightRegion: ToolbarRegion,
+  dsPanelheaderRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  }
+};
+const testPartialDefaults = {};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  className: "string",
+  LeftRegion: TitleRegion,
+  RightRegion: ToolbarRegion,
+  dsPanelheaderRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  }
+};
+const testInferedTypeCompatibility = {
+  className: "string",
+  LeftRegion: TitleRegion,
+  RightRegion: ToolbarRegion,
+  dsPanelheaderRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  }
+};
+const testDefinitionAsConst = {
+  className: "string",
+  dsPanelheaderRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  }
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSPanelHeader, { ...testExplicitDefinition }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSPanelHeader, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSPanelHeader, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.DSPanelHeader,
+    {
+      className: "string",
+      LeftRegion: TitleRegion,
+      RightRegion: ToolbarRegion,
+      dsPanelheaderRoot: {
+        onClick: () => {
+        },
+        "data-testid": "over-ride-test-id",
+        "aria-label": "over-ride-aria-label"
+      }
+    }
+  )
+] });
+//# sourceMappingURL=DSPanelHeaderNamespace.js.map

package/dist/cjs/typescript-testing/DSPanelHeaderNamespace.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/DSPanelHeaderNamespace.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPanelHeader, type DSPanelHeaderT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPanelHeaderT.Props;\ntype ComponentPropsInternals = DSPanelHeaderT.InternalProps;\ntype ComponentPropsDefaultProps = DSPanelHeaderT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPanelHeaderT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPanelHeaderT.RequiredProps;\n\nconst TitleRegion = () => <span>title</span>;\nconst ToolbarRegion = () => <span>toolbar</span>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  className: 'string',\n  LeftRegion: TitleRegion,\n  RightRegion: ToolbarRegion,\n  dsPanelheaderRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  className: 'string',\n  LeftRegion: TitleRegion,\n  RightRegion: ToolbarRegion,\n  dsPanelheaderRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  className: 'string',\n  LeftRegion: TitleRegion,\n  RightRegion: ToolbarRegion,\n  dsPanelheaderRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  className: 'string',\n  dsPanelheaderRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPanelHeader {...testExplicitDefinition} />\n    <DSPanelHeader {...testInferedTypeCompatibility} />\n    <DSPanelHeader {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPanelHeader\n      className=\"string\"\n      LeftRegion={TitleRegion}\n      RightRegion={ToolbarRegion}\n      dsPanelheaderRoot={{\n        onClick: () => {},\n        'data-testid': 'over-ride-test-id',\n        'aria-label': 'over-ride-aria-label',\n      }}\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACUG;AAT1B,eAAmD;AASnD,MAAM,cAAc,MAAM,4CAAC,UAAK,mBAAK;AACrC,MAAM,gBAAgB,MAAM,4CAAC,UAAK,qBAAO;AAEzC,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD;AAAA,EACrD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,mBAAmB;AAAA,IACjB,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAIA,MAAM,sBAA2D,CAAC;AAElE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D,CAAC;AAEpE,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,mBAAmB;AAAA,IACjB,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAGA,MAAM,+BAA+B;AAAA,EACnC,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,mBAAmB;AAAA,IACjB,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAEA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,EACX,mBAAmB;AAAA,IACjB,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,0BAAe,GAAG,wBAAwB;AAAA,EAC3C,4CAAC,0BAAe,GAAG,8BAA8B;AAAA,EACjD,4CAAC,0BAAe,GAAG,uBAAuB;AAAA,EAE1C;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,mBAAmB;AAAA,QACjB,SAAS,MAAM;AAAA,QAAC;AAAA,QAChB,eAAe;AAAA,QACf,cAAc;AAAA,MAChB;AAAA;AAAA,EACF;AAAA,GACF;",
+  "names": []
+}

package/dist/esm/DSPanelHeader.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { describe } from "@elliemae/ds-props-helpers";
+import { styled, useGetLayoutMode } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSPanelHeaderPropTypesSchema } from "./react-desc-prop-types.js";
+import { usePanelHeader } from "./config/usePanelHeader.js";
+import { PANEL_HEADER_SLOTS, DSPanelHeaderName } from "./constants/index.js";
+const StyledWrapper = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.ROOT })`
+  background-color: ${(props) => props.theme.colors.brand[100]};
+  padding-top: ${(props) => props.theme.space.xxs2};
+  padding-bottom: ${(props) => props.theme.space.xxs2};
+  padding-left: ${(props) => props.theme.space.xs};
+  padding-right: ${(props) => props.theme.space.xxs};
+  col-gap: ${(props) => props.theme.space.xs};
+  row-gap: ${(props) => props.theme.space.xxs};
+  min-height: 46px;
+  min-width: 312px;
+`;
+const StyledLeftRegion = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.LEFT_REGION })`
+  min-width: 0;
+`;
+const StyledRightRegion = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.RIGHT_REGION })`
+  min-width: 0;
+`;
+const NARROW_LAYOUT_MODES = ["s", "xs"];
+const DSPanelHeader = (props) => {
+  const { propsWithDefault, xstyledProps } = usePanelHeader(props);
+  const { LeftRegion, RightRegion } = propsWithDefault;
+  const layoutMode = useGetLayoutMode();
+  const mainContentCols = React2.useMemo(
+    () => layoutMode && NARROW_LAYOUT_MODES.includes(layoutMode) ? ["1fr"] : ["1fr", "auto"],
+    [layoutMode]
+  );
+  const getOwnerProps = () => propsWithDefault;
+  const getOwnerPropsArguments = () => ({});
+  return /* @__PURE__ */ jsxs(
+    StyledWrapper,
+    {
+      className: propsWithDefault.className,
+      cols: mainContentCols,
+      alignItems: "center",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      ...xstyledProps,
+      children: [
+        /* @__PURE__ */ jsx(StyledLeftRegion, { getOwnerProps, getOwnerPropsArguments, children: LeftRegion && /* @__PURE__ */ jsx(LeftRegion, {}) }),
+        /* @__PURE__ */ jsx(StyledRightRegion, { getOwnerProps, getOwnerPropsArguments, children: RightRegion && /* @__PURE__ */ jsx(RightRegion, {}) })
+      ]
+    }
+  );
+};
+DSPanelHeader.displayName = DSPanelHeaderName;
+const DSPanelHeaderWithSchema = describe(DSPanelHeader);
+DSPanelHeaderWithSchema.propTypes = DSPanelHeaderPropTypesSchema;
+export {
+  DSPanelHeader,
+  DSPanelHeaderWithSchema
+};
+//# sourceMappingURL=DSPanelHeader.js.map

package/dist/esm/DSPanelHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSPanelHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, useGetLayoutMode } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSPanelHeaderT, DSPanelHeaderPropTypesSchema } from './react-desc-prop-types.js';\nimport { usePanelHeader } from './config/usePanelHeader.js';\nimport { PANEL_HEADER_SLOTS, DSPanelHeaderName } from './constants/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.ROOT })`\n  background-color: ${(props) => props.theme.colors.brand[100]};\n  padding-top: ${(props) => props.theme.space.xxs2};\n  padding-bottom: ${(props) => props.theme.space.xxs2};\n  padding-left: ${(props) => props.theme.space.xs};\n  padding-right: ${(props) => props.theme.space.xxs};\n  col-gap: ${(props) => props.theme.space.xs};\n  row-gap: ${(props) => props.theme.space.xxs};\n  min-height: 46px;\n  min-width: 312px;\n`;\n// Grid items default to `min-width: auto`, which sizes to the content's intrinsic (unwrapped) width and\n// blows out the grid instead of letting text wrap \u2014 `min-width: 0` is what actually allows a consumer's\n// title/subtitle typography inside this region to wrap onto additional lines instead of overflowing.\nconst StyledLeftRegion = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.LEFT_REGION })`\n  min-width: 0;\n`;\nconst StyledRightRegion = styled(Grid, { name: DSPanelHeaderName, slot: PANEL_HEADER_SLOTS.RIGHT_REGION })`\n  min-width: 0;\n`;\n// Narrow layout modes stack RightRegion below LeftRegion (single column, two rows) instead of side-by-side.\n// `layoutMode` comes from an ancestor DSLayoutProvider \u2014 Dimsum components react to it rather than measuring\n// their own width, since the consumer is the one who knows what \"narrow\" means for their layout.\nconst NARROW_LAYOUT_MODES = ['s', 'xs'];\n\nconst DSPanelHeader: React.ComponentType<DSPanelHeaderT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = usePanelHeader(props);\n  const { LeftRegion, RightRegion } = propsWithDefault;\n  const layoutMode = useGetLayoutMode();\n  const mainContentCols = React.useMemo(\n    () => (layoutMode && NARROW_LAYOUT_MODES.includes(layoutMode) ? ['1fr'] : ['1fr', 'auto']),\n    [layoutMode],\n  );\n  const getOwnerProps = () => propsWithDefault;\n  const getOwnerPropsArguments = () => ({});\n  return (\n    <StyledWrapper\n      className={propsWithDefault.className}\n      cols={mainContentCols}\n      alignItems=\"center\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...xstyledProps}\n    >\n      <StyledLeftRegion getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {LeftRegion && <LeftRegion />}\n      </StyledLeftRegion>\n      <StyledRightRegion getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {RightRegion && <RightRegion />}\n      </StyledRightRegion>\n    </StyledWrapper>\n  );\n};\n\nDSPanelHeader.displayName = DSPanelHeaderName;\nconst DSPanelHeaderWithSchema = describe(DSPanelHeader);\nDSPanelHeaderWithSchema.propTypes = DSPanelHeaderPropTypesSchema;\n\nexport { DSPanelHeader, DSPanelHeaderWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4CnB,SASmB,KATnB;AA5CJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,wBAAwB;AACzC,SAAS,YAAY;AACrB,SAA8B,oCAAoC;AAClE,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB,yBAAyB;AAEtD,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,mBAAmB,MAAM,mBAAmB,KAAK,CAAC;AAAA,sBACvE,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,iBAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,oBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,kBACnC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,aACtC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,aAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAO7C,MAAM,mBAAmB,OAAO,MAAM,EAAE,MAAM,mBAAmB,MAAM,mBAAmB,YAAY,CAAC;AAAA;AAAA;AAGvG,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,mBAAmB,MAAM,mBAAmB,aAAa,CAAC;AAAA;AAAA;AAMzG,MAAM,sBAAsB,CAAC,KAAK,IAAI;AAEtC,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,aAAa,IAAI,eAAe,KAAK;AAC/D,QAAM,EAAE,YAAY,YAAY,IAAI;AACpC,QAAM,aAAa,iBAAiB;AACpC,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,MAAO,cAAc,oBAAoB,SAAS,UAAU,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,MAAM;AAAA,IACxF,CAAC,UAAU;AAAA,EACb;AACA,QAAM,gBAAgB,MAAM;AAC5B,QAAM,yBAAyB,OAAO,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB;AAAA,MAC5B,MAAM;AAAA,MACN,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,oBAAiB,eAA8B,wBAC7C,wBAAc,oBAAC,cAAW,GAC7B;AAAA,QACA,oBAAC,qBAAkB,eAA8B,wBAC9C,yBAAe,oBAAC,eAAY,GAC/B;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "names": ["React"]
+}