@elliemae/ds-side-panel-header 3.33.1 → 3.34.0-next.2

package/dist/cjs/SidePanelHeader.js

@@ -51,9 +51,9 @@ const SidePanelHeader = (props) => {
   const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefaults, [propsWithDefaults]);
   const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
   const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = void 0 } = propsWithDefaults;
-  const separator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "24px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparator, { getOwnerProps, getOwnerPropsArguments }) });
+  const separator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparatorWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparator, { getOwnerProps, getOwnerPropsArguments }) });
   const cols = ["1fr", "auto", "auto"];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.Wrapper, { cols, alignItems: "center", width: "100%", ...globalAttributes, ...xStyledProps, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.Wrapper, { cols, alignItems: "flex-start", width: "100%", ...globalAttributes, ...xStyledProps, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styled.StyledTitle,
       {
@@ -64,7 +64,7 @@ const SidePanelHeader = (props) => {
         children: title
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { ml: "xxs", alignItems: "center", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { ml: "xxs", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
       additionalAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: additionalAction }),
       additionalAction && showClose && separator,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: showClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/cjs/SidePanelHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SidePanelHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { type DSSidePanelHeaderT, defaultProps, propTypes } from './react-desc-prop-types.js';\n\nconst noop = () => {};\n\nimport { StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from './styled.js';\nconst SidePanelHeader = (props: DSSidePanelHeaderT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSidePanelHeaderT.InternalProps>(props, defaultProps);\n\n  const globalAttributes = useGetGlobalAttributes<DSSidePanelHeaderT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefaults,\n  );\n  const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const getOwnerProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n  const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = undefined } = propsWithDefaults;\n  const separator = (\n    <Grid height=\"24px\">\n      <StyledSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n    </Grid>\n  );\n  const cols = ['1fr', 'auto', 'auto'];\n  return (\n    <Wrapper cols={cols} alignItems=\"center\" width=\"100%\" {...globalAttributes} {...xStyledProps}>\n      <StyledTitle\n        maxWidth=\"100%\"\n        alignItems=\"center\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {title}\n      </StyledTitle>\n      <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n        {additionalAction && <Grid>{additionalAction}</Grid>}\n        {additionalAction && showClose && separator}\n        <Grid>\n          {showClose && (\n            <StyledCloseButton\n              buttonType=\"icon\"\n              innerRef={closeButtonRef}\n              size=\"m\"\n              onClick={onClose}\n              data-testid=\"btn-close-slide-panel\"\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <CloseSmall />\n            </StyledCloseButton>\n          )}\n        </Grid>\n      </Grid>\n    </Wrapper>\n  );\n};\n\nSidePanelHeader.propTypes = propTypes;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = propTypes;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BjB;AA3BN,mBAAmC;AACnC,8BAKO;AACP,sBAA2B;AAC3B,qBAAmC;AACnC,mCAAiE;AAIjE,oBAAyE;AAFzE,MAAM,OAAO,MAAM;AAAC;AAGpB,MAAM,kBAAkB,CAAC,UAAoC;AAC3D,QAAM,wBAAoB,sDAA+D,OAAO,yCAAY;AAE5G,QAAM,uBAAmB;AAAA,IACvB;AAAA,EACF;AACA,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,oBAAgB,0BAAY,MAAM,mBAAmB,CAAC,iBAAiB,CAAC;AAC9E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AACzD,QAAM,EAAE,OAAO,kBAAkB,UAAU,MAAM,YAAY,MAAM,iBAAiB,OAAU,IAAI;AAClG,QAAM,YACJ,4CAAC,uBAAK,QAAO,QACX,sDAAC,iCAAgB,eAA8B,wBAAgD,GACjG;AAEF,QAAM,OAAO,CAAC,OAAO,QAAQ,MAAM;AACnC,SACE,6CAAC,yBAAQ,MAAY,YAAW,UAAS,OAAM,QAAQ,GAAG,kBAAmB,GAAG,cAC9E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,YAAW;AAAA,QACX;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,6CAAC,uBAAK,IAAG,OAAM,YAAW,UAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GAC3F;AAAA,0BAAoB,4CAAC,uBAAM,4BAAiB;AAAA,MAC5C,oBAAoB,aAAa;AAAA,MAClC,4CAAC,uBACE,uBACC;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UACT,eAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,sDAAC,8BAAW;AAAA;AAAA,MACd,GAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { type DSSidePanelHeaderT, defaultProps, propTypes } from './react-desc-prop-types.js';\n\nconst noop = () => {};\n\nimport { StyledSeparatorWrapper, StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from './styled.js';\nconst SidePanelHeader = (props: DSSidePanelHeaderT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSidePanelHeaderT.InternalProps>(props, defaultProps);\n\n  const globalAttributes = useGetGlobalAttributes<DSSidePanelHeaderT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefaults,\n  );\n  const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const getOwnerProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n  const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = undefined } = propsWithDefaults;\n  const separator = (\n    <StyledSeparatorWrapper>\n      <StyledSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n    </StyledSeparatorWrapper>\n  );\n  const cols = ['1fr', 'auto', 'auto'];\n  return (\n    <Wrapper cols={cols} alignItems=\"flex-start\" width=\"100%\" {...globalAttributes} {...xStyledProps}>\n      <StyledTitle\n        maxWidth=\"100%\"\n        alignItems=\"center\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {title}\n      </StyledTitle>\n      <Grid ml=\"xxs\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n        {additionalAction && <Grid>{additionalAction}</Grid>}\n        {additionalAction && showClose && separator}\n        <Grid>\n          {showClose && (\n            <StyledCloseButton\n              buttonType=\"icon\"\n              innerRef={closeButtonRef}\n              size=\"m\"\n              onClick={onClose}\n              data-testid=\"btn-close-slide-panel\"\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <CloseSmall />\n            </StyledCloseButton>\n          )}\n        </Grid>\n      </Grid>\n    </Wrapper>\n  );\n};\n\nSidePanelHeader.propTypes = propTypes;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = propTypes;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BjB;AA3BN,mBAAmC;AACnC,8BAKO;AACP,sBAA2B;AAC3B,qBAAmC;AACnC,mCAAiE;AAIjE,oBAAiG;AAFjG,MAAM,OAAO,MAAM;AAAC;AAGpB,MAAM,kBAAkB,CAAC,UAAoC;AAC3D,QAAM,wBAAoB,sDAA+D,OAAO,yCAAY;AAE5G,QAAM,uBAAmB;AAAA,IACvB;AAAA,EACF;AACA,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,oBAAgB,0BAAY,MAAM,mBAAmB,CAAC,iBAAiB,CAAC;AAC9E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AACzD,QAAM,EAAE,OAAO,kBAAkB,UAAU,MAAM,YAAY,MAAM,iBAAiB,OAAU,IAAI;AAClG,QAAM,YACJ,4CAAC,wCACC,sDAAC,iCAAgB,eAA8B,wBAAgD,GACjG;AAEF,QAAM,OAAO,CAAC,OAAO,QAAQ,MAAM;AACnC,SACE,6CAAC,yBAAQ,MAAY,YAAW,cAAa,OAAM,QAAQ,GAAG,kBAAmB,GAAG,cAClF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,YAAW;AAAA,QACX;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,6CAAC,uBAAK,IAAG,OAAM,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GACvE;AAAA,0BAAoB,4CAAC,uBAAM,4BAAiB;AAAA,MAC5C,oBAAoB,aAAa;AAAA,MAClC,4CAAC,uBACE,uBACC;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UACT,eAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,sDAAC,8BAAW;AAAA;AAAA,MACd,GAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -30,6 +30,7 @@ var styled_exports = {};
 __export(styled_exports, {
   StyledCloseButton: () => StyledCloseButton,
   StyledSeparator: () => StyledSeparator,
+  StyledSeparatorWrapper: () => StyledSeparatorWrapper,
   StyledTitle: () => StyledTitle,
   Wrapper: () => Wrapper
 });
@@ -47,16 +48,19 @@ const StyledTitle = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   font-size: 18px;
   font-weight: ${(props) => props.theme.fontWeights.regular};
   color: ${(props) => props.theme.colors.neutral["700"]};
-  ${(0, import_ds_system.truncate)()}
+  word-break: break-word;
+  padding-top: 0.281rem;
+  margin-bottom: 0.562rem;
   ${import_ds_system.xStyledCommonProps}
 `;
 const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   name: import_SidePanelHeaderDefinitions.DSSidePanelHeaderName,
   slot: import_SidePanelHeaderDefinitions.DSSidePanelHeaderSlots.WRAPPER
 })`
+  padding-top: 0.73rem;
   padding-right: ${(props) => props.theme.space.xs};
   padding-left: ${(props) => props.theme.space.xs};
-  height: ${(props) => props.theme.space.m};
+  min-height: ${(props) => props.theme.space.m};
   border-bottom: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
   ${import_ds_system.xStyledCommonProps}
 `;
@@ -66,6 +70,10 @@ const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSBut
 })`
   ${import_ds_system.xStyledCommonProps}
 `;
+const StyledSeparatorWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  height: 24px;
+  margin-top: 0.153rem;
+`;
 const StyledSeparator = import_ds_system.styled.div`
   width: 0;
   height: 100%;

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, border, truncate, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from './SidePanelHeaderDefinitions.js';\nexport const StyledTitle = styled(Grid, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.TITLE,\n})`\n  margin-right: ${(props) => props.theme.space.xs};\n  font-size: 18px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  ${truncate()}\n  ${xStyledCommonProps}\n`;\n\nexport const Wrapper = styled(Grid, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.WRAPPER,\n})`\n  padding-right: ${(props) => props.theme.space.xs};\n  padding-left: ${(props) => props.theme.space.xs};\n  height: ${(props) => props.theme.space.m};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.CLOSE_BUTTON,\n})`\n  ${xStyledCommonProps}\n`;\n\nexport const StyledSeparator = styled.div`\n  width: 0;\n  height: 100%;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA6D;AAC7D,0BAA2B;AAC3B,qBAAqB;AACrB,wCAA8D;AACvD,MAAM,kBAAc,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA,kBACiB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,iBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,QAClD,2BAAS;AAAA,IACT;AAAA;AAGG,MAAM,cAAU,yBAAO,qBAAM;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA,mBACkB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YACnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACtB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IAClE;AAAA;AAGG,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,UAAU,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,IACzD;AAAA;",
+  "sourcesContent": ["import { styled, border, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from './SidePanelHeaderDefinitions.js';\n\nexport const StyledTitle = styled(Grid, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.TITLE,\n})`\n  margin-right: ${(props) => props.theme.space.xs};\n  font-size: 18px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  word-break: break-word;\n  padding-top: 0.281rem;\n  margin-bottom: 0.562rem;\n  ${xStyledCommonProps}\n`;\n\nexport const Wrapper = styled(Grid, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.WRAPPER,\n})`\n  padding-top: 0.73rem;\n  padding-right: ${(props) => props.theme.space.xs};\n  padding-left: ${(props) => props.theme.space.xs};\n  min-height: ${(props) => props.theme.space.m};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.CLOSE_BUTTON,\n})`\n  ${xStyledCommonProps}\n`;\n\nexport const StyledSeparatorWrapper = styled(Grid)`\n  height: 24px;\n  margin-top: 0.153rem;\n`;\n\nexport const StyledSeparator = styled.div`\n  width: 0;\n  height: 100%;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmD;AACnD,0BAA2B;AAC3B,qBAAqB;AACrB,wCAA8D;AAEvD,MAAM,kBAAc,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA,kBACiB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,iBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,IAIlD;AAAA;AAGG,MAAM,cAAU,yBAAO,qBAAM;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA;AAAA,mBAEkB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC1B,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IAClE;AAAA;AAGG,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,6BAAyB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAK1C,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,UAAU,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,IACzD;AAAA;",
   "names": []
 }

package/dist/esm/SidePanelHeader.js

@@ -12,7 +12,7 @@ import { Grid } from "@elliemae/ds-grid";
 import { defaultProps, propTypes } from "./react-desc-prop-types.js";
 const noop = () => {
 };
-import { StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from "./styled.js";
+import { StyledSeparatorWrapper, StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from "./styled.js";
 const SidePanelHeader = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   const globalAttributes = useGetGlobalAttributes(
@@ -22,9 +22,9 @@ const SidePanelHeader = (props) => {
   const getOwnerProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);
   const getOwnerPropsArguments = useCallback(() => ({}), []);
   const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = void 0 } = propsWithDefaults;
-  const separator = /* @__PURE__ */ jsx(Grid, { height: "24px", children: /* @__PURE__ */ jsx(StyledSeparator, { getOwnerProps, getOwnerPropsArguments }) });
+  const separator = /* @__PURE__ */ jsx(StyledSeparatorWrapper, { children: /* @__PURE__ */ jsx(StyledSeparator, { getOwnerProps, getOwnerPropsArguments }) });
   const cols = ["1fr", "auto", "auto"];
-  return /* @__PURE__ */ jsxs(Wrapper, { cols, alignItems: "center", width: "100%", ...globalAttributes, ...xStyledProps, children: [
+  return /* @__PURE__ */ jsxs(Wrapper, { cols, alignItems: "flex-start", width: "100%", ...globalAttributes, ...xStyledProps, children: [
     /* @__PURE__ */ jsx(
       StyledTitle,
       {
@@ -35,7 +35,7 @@ const SidePanelHeader = (props) => {
         children: title
       }
     ),
-    /* @__PURE__ */ jsxs(Grid, { ml: "xxs", alignItems: "center", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
+    /* @__PURE__ */ jsxs(Grid, { ml: "xxs", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
       additionalAction && /* @__PURE__ */ jsx(Grid, { children: additionalAction }),
       additionalAction && showClose && separator,
       /* @__PURE__ */ jsx(Grid, { children: showClose && /* @__PURE__ */ jsx(

package/dist/esm/SidePanelHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanelHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { type DSSidePanelHeaderT, defaultProps, propTypes } from './react-desc-prop-types.js';\n\nconst noop = () => {};\n\nimport { StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from './styled.js';\nconst SidePanelHeader = (props: DSSidePanelHeaderT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSidePanelHeaderT.InternalProps>(props, defaultProps);\n\n  const globalAttributes = useGetGlobalAttributes<DSSidePanelHeaderT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefaults,\n  );\n  const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const getOwnerProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n  const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = undefined } = propsWithDefaults;\n  const separator = (\n    <Grid height=\"24px\">\n      <StyledSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n    </Grid>\n  );\n  const cols = ['1fr', 'auto', 'auto'];\n  return (\n    <Wrapper cols={cols} alignItems=\"center\" width=\"100%\" {...globalAttributes} {...xStyledProps}>\n      <StyledTitle\n        maxWidth=\"100%\"\n        alignItems=\"center\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {title}\n      </StyledTitle>\n      <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n        {additionalAction && <Grid>{additionalAction}</Grid>}\n        {additionalAction && showClose && separator}\n        <Grid>\n          {showClose && (\n            <StyledCloseButton\n              buttonType=\"icon\"\n              innerRef={closeButtonRef}\n              size=\"m\"\n              onClick={onClose}\n              data-testid=\"btn-close-slide-panel\"\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <CloseSmall />\n            </StyledCloseButton>\n          )}\n        </Grid>\n      </Grid>\n    </Wrapper>\n  );\n};\n\nSidePanelHeader.propTypes = propTypes;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = propTypes;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2BjB,cAcA,YAdA;AA3BN,SAAgB,mBAAmB;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAuB,YAAY;AACnC,SAAkC,cAAc,iBAAiB;AAEjE,MAAM,OAAO,MAAM;AAAC;AAEpB,SAAS,iBAAiB,aAAa,SAAS,yBAAyB;AACzE,MAAM,kBAAkB,CAAC,UAAoC;AAC3D,QAAM,oBAAoB,6BAA+D,OAAO,YAAY;AAE5G,QAAM,mBAAmB;AAAA,IACvB;AAAA,EACF;AACA,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,gBAAgB,YAAY,MAAM,mBAAmB,CAAC,iBAAiB,CAAC;AAC9E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AACzD,QAAM,EAAE,OAAO,kBAAkB,UAAU,MAAM,YAAY,MAAM,iBAAiB,OAAU,IAAI;AAClG,QAAM,YACJ,oBAAC,QAAK,QAAO,QACX,8BAAC,mBAAgB,eAA8B,wBAAgD,GACjG;AAEF,QAAM,OAAO,CAAC,OAAO,QAAQ,MAAM;AACnC,SACE,qBAAC,WAAQ,MAAY,YAAW,UAAS,OAAM,QAAQ,GAAG,kBAAmB,GAAG,cAC9E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,YAAW;AAAA,QACX;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,qBAAC,QAAK,IAAG,OAAM,YAAW,UAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GAC3F;AAAA,0BAAoB,oBAAC,QAAM,4BAAiB;AAAA,MAC5C,oBAAoB,aAAa;AAAA,MAClC,oBAAC,QACE,uBACC;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UACT,eAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,8BAAC,cAAW;AAAA;AAAA,MACd,GAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { type DSSidePanelHeaderT, defaultProps, propTypes } from './react-desc-prop-types.js';\n\nconst noop = () => {};\n\nimport { StyledSeparatorWrapper, StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from './styled.js';\nconst SidePanelHeader = (props: DSSidePanelHeaderT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSSidePanelHeaderT.InternalProps>(props, defaultProps);\n\n  const globalAttributes = useGetGlobalAttributes<DSSidePanelHeaderT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefaults,\n  );\n  const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n  const getOwnerProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n  const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = undefined } = propsWithDefaults;\n  const separator = (\n    <StyledSeparatorWrapper>\n      <StyledSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n    </StyledSeparatorWrapper>\n  );\n  const cols = ['1fr', 'auto', 'auto'];\n  return (\n    <Wrapper cols={cols} alignItems=\"flex-start\" width=\"100%\" {...globalAttributes} {...xStyledProps}>\n      <StyledTitle\n        maxWidth=\"100%\"\n        alignItems=\"center\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {title}\n      </StyledTitle>\n      <Grid ml=\"xxs\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n        {additionalAction && <Grid>{additionalAction}</Grid>}\n        {additionalAction && showClose && separator}\n        <Grid>\n          {showClose && (\n            <StyledCloseButton\n              buttonType=\"icon\"\n              innerRef={closeButtonRef}\n              size=\"m\"\n              onClick={onClose}\n              data-testid=\"btn-close-slide-panel\"\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              <CloseSmall />\n            </StyledCloseButton>\n          )}\n        </Grid>\n      </Grid>\n    </Wrapper>\n  );\n};\n\nSidePanelHeader.propTypes = propTypes;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = propTypes;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BjB,cAcA,YAdA;AA3BN,SAAgB,mBAAmB;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAuB,YAAY;AACnC,SAAkC,cAAc,iBAAiB;AAEjE,MAAM,OAAO,MAAM;AAAC;AAEpB,SAAS,wBAAwB,iBAAiB,aAAa,SAAS,yBAAyB;AACjG,MAAM,kBAAkB,CAAC,UAAoC;AAC3D,QAAM,oBAAoB,6BAA+D,OAAO,YAAY;AAE5G,QAAM,mBAAmB;AAAA,IACvB;AAAA,EACF;AACA,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,gBAAgB,YAAY,MAAM,mBAAmB,CAAC,iBAAiB,CAAC;AAC9E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AACzD,QAAM,EAAE,OAAO,kBAAkB,UAAU,MAAM,YAAY,MAAM,iBAAiB,OAAU,IAAI;AAClG,QAAM,YACJ,oBAAC,0BACC,8BAAC,mBAAgB,eAA8B,wBAAgD,GACjG;AAEF,QAAM,OAAO,CAAC,OAAO,QAAQ,MAAM;AACnC,SACE,qBAAC,WAAQ,MAAY,YAAW,cAAa,OAAM,QAAQ,GAAG,kBAAmB,GAAG,cAClF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,YAAW;AAAA,QACX;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,qBAAC,QAAK,IAAG,OAAM,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GACvE;AAAA,0BAAoB,oBAAC,QAAM,4BAAiB;AAAA,MAC5C,oBAAoB,aAAa;AAAA,MAClC,oBAAC,QACE,uBACC;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UACT,eAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,8BAAC,cAAW;AAAA;AAAA,MACd,GAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/esm/styled.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { styled, border, truncate, xStyledCommonProps } from "@elliemae/ds-system";
+import { styled, border, xStyledCommonProps } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from "./SidePanelHeaderDefinitions.js";
@@ -11,16 +11,19 @@ const StyledTitle = styled(Grid, {
   font-size: 18px;
   font-weight: ${(props) => props.theme.fontWeights.regular};
   color: ${(props) => props.theme.colors.neutral["700"]};
-  ${truncate()}
+  word-break: break-word;
+  padding-top: 0.281rem;
+  margin-bottom: 0.562rem;
   ${xStyledCommonProps}
 `;
 const Wrapper = styled(Grid, {
   name: DSSidePanelHeaderName,
   slot: DSSidePanelHeaderSlots.WRAPPER
 })`
+  padding-top: 0.73rem;
   padding-right: ${(props) => props.theme.space.xs};
   padding-left: ${(props) => props.theme.space.xs};
-  height: ${(props) => props.theme.space.m};
+  min-height: ${(props) => props.theme.space.m};
   border-bottom: ${(props) => border(props.theme.colors.neutral["300"])};
   ${xStyledCommonProps}
 `;
@@ -30,6 +33,10 @@ const StyledCloseButton = styled(DSButtonV2, {
 })`
   ${xStyledCommonProps}
 `;
+const StyledSeparatorWrapper = styled(Grid)`
+  height: 24px;
+  margin-top: 0.153rem;
+`;
 const StyledSeparator = styled.div`
   width: 0;
   height: 100%;
@@ -40,6 +47,7 @@ const StyledSeparator = styled.div`
 export {
   StyledCloseButton,
   StyledSeparator,
+  StyledSeparatorWrapper,
   StyledTitle,
   Wrapper
 };

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, border, truncate, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from './SidePanelHeaderDefinitions.js';\nexport const StyledTitle = styled(Grid, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.TITLE,\n})`\n  margin-right: ${(props) => props.theme.space.xs};\n  font-size: 18px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  ${truncate()}\n  ${xStyledCommonProps}\n`;\n\nexport const Wrapper = styled(Grid, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.WRAPPER,\n})`\n  padding-right: ${(props) => props.theme.space.xs};\n  padding-left: ${(props) => props.theme.space.xs};\n  height: ${(props) => props.theme.space.m};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.CLOSE_BUTTON,\n})`\n  ${xStyledCommonProps}\n`;\n\nexport const StyledSeparator = styled.div`\n  width: 0;\n  height: 100%;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n  ${xStyledCommonProps}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,QAAQ,UAAU,0BAA0B;AAC7D,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,uBAAuB,8BAA8B;AACvD,MAAM,cAAc,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,kBACiB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,iBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAClD,SAAS;AAAA,IACT;AAAA;AAGG,MAAM,UAAU,OAAO,MAAM;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,mBACkB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YACnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACtB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IAClE;AAAA;AAGG,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,UAAU,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,IACzD;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, border, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from './SidePanelHeaderDefinitions.js';\n\nexport const StyledTitle = styled(Grid, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.TITLE,\n})`\n  margin-right: ${(props) => props.theme.space.xs};\n  font-size: 18px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  word-break: break-word;\n  padding-top: 0.281rem;\n  margin-bottom: 0.562rem;\n  ${xStyledCommonProps}\n`;\n\nexport const Wrapper = styled(Grid, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.WRAPPER,\n})`\n  padding-top: 0.73rem;\n  padding-right: ${(props) => props.theme.space.xs};\n  padding-left: ${(props) => props.theme.space.xs};\n  min-height: ${(props) => props.theme.space.m};\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, {\n  name: DSSidePanelHeaderName,\n  slot: DSSidePanelHeaderSlots.CLOSE_BUTTON,\n})`\n  ${xStyledCommonProps}\n`;\n\nexport const StyledSeparatorWrapper = styled(Grid)`\n  height: 24px;\n  margin-top: 0.153rem;\n`;\n\nexport const StyledSeparator = styled.div`\n  width: 0;\n  height: 100%;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n  ${xStyledCommonProps}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,QAAQ,0BAA0B;AACnD,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,uBAAuB,8BAA8B;AAEvD,MAAM,cAAc,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,kBACiB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,iBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,IAIlD;AAAA;AAGG,MAAM,UAAU,OAAO,MAAM;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA;AAAA,mBAEkB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC1B,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IAClE;AAAA;AAGG,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,yBAAyB,OAAO,IAAI;AAAA;AAAA;AAAA;AAK1C,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,UAAU,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,IACzD;AAAA;",
   "names": []
 }

package/dist/types/styled.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-export declare const StyledTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
-    width?: string | undefined;
-} & {
-    theme: import("@elliemae/pui-theme").Theme;
-} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
+export declare const StyledSeparatorWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyledSeparator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-side-panel-header",
-  "version": "3.33.1",
+  "version": "3.34.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Side Panel Header",
   "files": [
@@ -56,19 +56,19 @@
   },
   "dependencies": {
     "@elliemae/pui-theme": "~2.9.3",
-    "@elliemae/ds-button-v2": "3.33.1",
-    "@elliemae/ds-grid": "3.33.1",
-    "@elliemae/ds-icons": "3.33.1",
-    "@elliemae/ds-props-helpers": "3.33.1",
-    "@elliemae/ds-system": "3.33.1",
-    "@elliemae/ds-utilities": "3.33.1"
+    "@elliemae/ds-button-v2": "3.34.0-next.2",
+    "@elliemae/ds-grid": "3.34.0-next.2",
+    "@elliemae/ds-icons": "3.34.0-next.2",
+    "@elliemae/ds-props-helpers": "3.34.0-next.2",
+    "@elliemae/ds-system": "3.34.0-next.2",
+    "@elliemae/ds-utilities": "3.34.0-next.2"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "@xstyled/system": "3.7.0",
     "@xstyled/util": "3.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.33.1"
+    "@elliemae/ds-monorepo-devops": "3.34.0-next.2"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",