@elliemae/ds-side-panel 3.22.0-next.3 → 3.22.0-next.30

package/dist/cjs/SidePanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/SidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n  display: flex;\n  height: 100%;\n  flex-direction: row;\n  max-height: 100%;\n  overflow: hidden;\n  ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{ withBoxShadow: boolean; withBorder: boolean; noGridInfluencer: boolean }>`\n  box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n  transition: 300ms;\n  border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n  ${({ noGridInfluencer, side, theme }) =>\n    noGridInfluencer\n      ? `\n   position: absolute;\n   z-index: ${theme.zIndex.dialog};\n   top:0;\n   ${side}: 0;\n   height: 100%;\n   `\n      : ''}\n  background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n  children,\n  isOpen,\n  footer,\n  header,\n  panelContent,\n  panelWidth,\n  panelContentOverflow,\n  widthWhenIsClosed,\n  noGridInfluencer = false,\n  withBorder = true,\n  withBoxShadow = false,\n  side = 'right',\n}): React.ReactElement => {\n  const isOpenAnimated = useDelayedOpen(isOpen);\n\n  const panelJSX = (\n    <TransGrid\n      style={{ overflow: 'hidden' }}\n      height=\"100%\"\n      maxHeight=\"100%\"\n      width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n      withBorder={withBorder}\n      withBoxShadow={withBoxShadow}\n      isOpen={isOpen}\n      cols={[1]}\n      noGridInfluencer={noGridInfluencer}\n      side={side}\n    >\n      <Grid\n        rows={\n          footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n        }\n        style={{ overflow: 'hidden' }}\n      >\n        {(isOpenAnimated || widthWhenIsClosed > 0) && (\n          <>\n            <Grid>{header}</Grid>\n            <Grid style={{ overflow: 'hidden' }}>\n              <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n            </Grid>\n            {footer ? (\n              <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n                {footer}\n              </FooterContainer>\n            ) : null}\n          </>\n        )}\n      </Grid>\n    </TransGrid>\n  );\n\n  return (\n    <Container noGridInfluencer={noGridInfluencer}>\n      {side === 'left' && panelJSX}\n      <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n        {children}\n      </TransGrid>\n      {side === 'right' && panelJSX}\n    </Container>\n  );\n};\n\nSidePanel.propTypes = DSInputTextPropTypes;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Eb;AAzEV,8BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AAErB,mCAAmD;AACnD,4BAA+B;AAE/B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,gBAAY,yBAAO,mBAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,iBAAa,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO;AAAA;AAAA,KAEtB;AAAA;AAAA,OAGG;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG3D,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,qBAAiB,sCAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,UAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,UAE1B,6BAAkB,oBAAoB,MACtC,4EACE;AAAA,wDAAC,uBAAM,kBAAO;AAAA,YACd,4CAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAChC,sDAAC,uBAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,4CAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,6CAAC,aAAU,kBACR;AAAA,aAAS,UAAU;AAAA,IACpB,4CAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,wBAAwB,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,kCAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
+  "sources": ["../../src/SidePanel.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n  display: flex;\n  height: 100%;\n  flex-direction: row;\n  max-height: 100%;\n  overflow: hidden;\n  ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{ withBoxShadow: boolean; withBorder: boolean; noGridInfluencer: boolean }>`\n  box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n  transition: 300ms;\n  border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n  ${({ noGridInfluencer, side, theme }) =>\n    noGridInfluencer\n      ? `\n   position: absolute;\n   z-index: ${theme.zIndex.dialog};\n   top:0;\n   ${side}: 0;\n   height: 100%;\n   `\n      : ''}\n  background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n  children,\n  isOpen,\n  footer,\n  header,\n  panelContent,\n  panelWidth,\n  panelContentOverflow,\n  widthWhenIsClosed,\n  noGridInfluencer = false,\n  withBorder = true,\n  withBoxShadow = false,\n  side = 'right',\n}): React.ReactElement => {\n  const isOpenAnimated = useDelayedOpen(isOpen);\n\n  const panelJSX = (\n    <TransGrid\n      style={{ overflow: 'hidden' }}\n      height=\"100%\"\n      maxHeight=\"100%\"\n      width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n      withBorder={withBorder}\n      withBoxShadow={withBoxShadow}\n      isOpen={isOpen}\n      cols={[1]}\n      noGridInfluencer={noGridInfluencer}\n      side={side}\n    >\n      <Grid\n        rows={\n          footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n        }\n        style={{ overflow: 'hidden' }}\n      >\n        {(isOpenAnimated || widthWhenIsClosed > 0) && (\n          <>\n            <Grid>{header}</Grid>\n            <Grid style={{ overflow: 'hidden' }}>\n              <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n            </Grid>\n            {footer ? (\n              <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n                {footer}\n              </FooterContainer>\n            ) : null}\n          </>\n        )}\n      </Grid>\n    </TransGrid>\n  );\n\n  return (\n    <Container noGridInfluencer={noGridInfluencer}>\n      {side === 'left' && panelJSX}\n      <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n        {children}\n      </TransGrid>\n      {side === 'right' && panelJSX}\n    </Container>\n  );\n};\n\nSidePanel.propTypes = DSInputTextPropTypes;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Eb;AAzEV,8BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AAErB,mCAAmD;AACnD,4BAA+B;AAE/B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,gBAAY,yBAAO,mBAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,iBAAa,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO;AAAA;AAAA,KAEtB;AAAA;AAAA,OAGG;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG3D,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,qBAAiB,sCAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,UAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,UAE1B,6BAAkB,oBAAoB,MACtC,4EACE;AAAA,wDAAC,uBAAM,kBAAO;AAAA,YACd,4CAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAChC,sDAAC,uBAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,4CAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,6CAAC,aAAU,kBACR;AAAA,aAAS,UAAU;AAAA,IACpB,4CAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,wBAAwB,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,kCAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
   "names": []
 }

package/dist/cjs/TemplateBasicPageWithSidePanel.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/TemplateBasicPageWithSidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/TemplateBasicPageWithSidePanel.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel.js';\n\nconst TemplateBasicPageWithSidePanel = ({\n  globalHeader = null,\n  mainHeader = null,\n  mainContent,\n  mainFooter,\n  isOpen = false,\n  onClose,\n  panelFooter,\n  panelHeader,\n  panelContent,\n  panelWidth,\n}) => (\n  <Grid style={{ overflow: 'hidden', width: '100%' }} height=\"100%\" maxHeight=\"100%\" rows={['auto', '1fr']}>\n    <Grid>{globalHeader}</Grid>\n    <SidePanel\n      footer={panelFooter}\n      header={panelHeader}\n      panelWidth={panelWidth}\n      onClose={onClose}\n      panelContent={panelContent}\n      isOpen={isOpen}\n    >\n      <Grid style={{ overflow: 'hidden' }} height=\"100%\" maxHeight=\"100%\">\n        <Grid\n          rows={\n            mainFooter\n              ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px']\n              : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)']\n          }\n          style={{ overflow: 'hidden' }}\n        >\n          <Grid>{mainHeader}</Grid>\n          <Grid style={{ overflow: 'hidden' }}>\n            <Grid style={{ overflow: 'auto' }}>{mainContent}</Grid>\n          </Grid>\n          {mainFooter && <Grid alignItems=\"center\">{mainFooter}</Grid>}\n        </Grid>\n      </Grid>\n    </SidePanel>\n  </Grid>\n);\n\nconst props = {\n  /**\n   * Global Header\n   */\n  globalHeader: PropTypes.element.description('Global Header'),\n  /**\n   * Main Header\n   */\n  mainHeader: PropTypes.element.description('Main Header'),\n  /**\n   * Main content\n   */\n  mainContent: PropTypes.element.isRequired.description('Main content'),\n  /**\n   * Main Footer\n   */\n  mainFooter: PropTypes.element.description('Main Footer'),\n  /**\n   * Should show the slide panel or not\n   */\n  isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n  /**\n   * Footer for Slide Panel\n   */\n  panelFooter: PropTypes.element.description('Footer for Slide Panel'),\n  /**\n   * Header for Slide Panel instance of SlidePanelHeader\n   */\n  panelHeader: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n  /**\n   * Content for Slide Panel\n   */\n  panelContent: PropTypes.element.description('Content for Slide Panel'),\n  /**\n   * Width of the panel open. eg: 300\n   */\n  panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n  /**\n   * Callback\n   */\n  onClose: PropTypes.func.description('callback'),\n};\n\nTemplateBasicPageWithSidePanel.propTypes = props;\nTemplateBasicPageWithSidePanel.displayName = 'TemplateBasicPageWithSidePanel';\nconst DSTemplateBasicPageWithSidePanel = describe(TemplateBasicPageWithSidePanel);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,8BAAoC;AACpC,qBAAqB;AACrB,uBAAsB;AAEtB,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6CAAC,uBAAK,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO,GAAG,QAAO,QAAO,WAAU,QAAO,MAAM,CAAC,QAAQ,KAAK,GACrG;AAAA,8CAAC,uBAAM,wBAAa;AAAA,EACpB;AAAA,IAAC,iBAAAA;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAAG,QAAO,QAAO,WAAU,QAC3D;AAAA,QAAC;AAAA;AAAA,UACC,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,MAAM,IACxD,CAAC,aAAa,SAAS,OAAO,kBAAkB;AAAA,UAEtD,OAAO,EAAE,UAAU,SAAS;AAAA,UAE5B;AAAA,wDAAC,uBAAM,sBAAW;AAAA,YAClB,4CAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAChC,sDAAC,uBAAK,OAAO,EAAE,UAAU,OAAO,GAAI,uBAAY,GAClD;AAAA,YACC,cAAc,4CAAC,uBAAK,YAAW,UAAU,sBAAW;AAAA;AAAA;AAAA,MACvD,GACF;AAAA;AAAA,EACF;AAAA,GACF;AAGF,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIZ,cAAc,kCAAU,QAAQ,YAAY,eAAe;AAAA;AAAA;AAAA;AAAA,EAI3D,YAAY,kCAAU,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,EAIvD,aAAa,kCAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIpE,YAAY,kCAAU,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,EAIvD,QAAQ,kCAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,aAAa,kCAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAInE,aAAa,kCAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAIhG,cAAc,kCAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,kCAAU,OAAO,YAAY,kCAAkC;AAAA;AAAA;AAAA;AAAA,EAI3E,SAAS,kCAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,uCAAmC,kCAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
   "names": ["SidePanel"]

package/dist/cjs/index.js

@@ -33,8 +33,8 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
+__reExport(src_exports, require("@elliemae/ds-side-panel-header"), module.exports);
 __reExport(src_exports, require("./SidePanel.js"), module.exports);
-__reExport(src_exports, require("./SidePanelHeader.js"), module.exports);
 __reExport(src_exports, require("./TemplateBasicPageWithSidePanel.js"), module.exports);
 var import_SidePanel = __toESM(require("./SidePanel.js"));
 //# 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 './SidePanel.js';\nexport * from './SidePanelHeader.js';\nexport * from './TemplateBasicPageWithSidePanel.js';\nexport { default } from './SidePanel.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,2BAAd;AACA,wBAAc,iCADd;AAEA,wBAAc,gDAFd;AAGA,uBAAwB;",
+  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from '@elliemae/ds-side-panel-header';\nexport * from './SidePanel.js';\nexport * from './TemplateBasicPageWithSidePanel.js';\nexport { default } from './SidePanel.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,2CAAd;AACA,wBAAc,2BADd;AAEA,wBAAc,gDAFd;AAGA,uBAAwB;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSSidePanelT {\n  export interface IProps {\n    children?: React.ReactNode;\n    isOpen: boolean;\n    footer?: React.ReactNode;\n    header?: React.ReactNode;\n    panelContent?: React.ReactNode;\n    panelWidth: number;\n    widthWhenIsClosed: number;\n    panelContentOverflow: 'auto' | 'hidden';\n    withBorder: boolean;\n    withBoxShadow: boolean;\n    noGridInfluencer?: boolean;\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n  isOpen: false,\n  panelWidth: 300,\n  widthWhenIsClosed: 0,\n  panelContentOverflow: 'auto',\n  withBorder: true,\n  withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n  /**\n   * Main content\n   */\n  children: PropTypes.element.isRequired.description('Main content'),\n  /**\n   * Should show the slide panel or not\n   */\n  isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n  /**\n   * Footer for Slide Panel\n   */\n  footer: PropTypes.element.description('Footer for Slide Panel'),\n  /**\n   * Header for Slide Panel instance of SlidePanelHeader\n   */\n  header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n  /**\n   * Content for Slide Panel\n   */\n  panelContent: PropTypes.element.description('Content for Slide Panel'),\n  /**\n   * Width of the panel open. eg: 300\n   */\n  panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n  widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n  panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n  withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n  withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n  noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n  side: PropTypes.oneOf(['left', 'right'])\n    .description('Wheter to put the side panel on the left or right')\n    .defaultValue('right'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAA0B;AAoBnB,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIlC,UAAU,kCAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIjE,QAAQ,kCAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,QAAQ,kCAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,kCAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAI3F,cAAc,kCAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,kCAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,kCAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,kCAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
   "names": []

package/dist/cjs/useDelayedOpen.js

@@ -32,16 +32,30 @@ __export(useDelayedOpen_exports, {
 });
 module.exports = __toCommonJS(useDelayedOpen_exports);
 var React = __toESM(require("react"));
-var import_react = require("react");
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const handleOnIsOpenChange = (latestIsOpen, {
+  setIsOpenAnimated,
+  dynamicPropIsOpen
+}) => {
+  if (latestIsOpen) {
+    setIsOpenAnimated(true);
+  } else {
+    setTimeout(() => {
+      if (!dynamicPropIsOpen.current) {
+        setIsOpenAnimated(false);
+      }
+    }, 300);
+  }
+};
 const useDelayedOpen = (isOpen) => {
-  const [isOpenAnimated, setIsOpenAnimated] = (0, import_react.useState)(isOpen);
-  (0, import_react.useEffect)(() => {
-    if (isOpen) {
-      setIsOpenAnimated(true);
-    } else {
-      setTimeout(() => setIsOpenAnimated(false), 300);
-    }
-  }, [isOpen]);
+  const [isOpenAnimated, setIsOpenAnimated] = import_react.default.useState(isOpen);
+  const dynamicPropIsOpen = (0, import_ds_utilities.useLatestValueReferenciallyStable)(isOpen);
+  const cbOpts = import_react.default.useMemo(
+    () => ({ setIsOpenAnimated, dynamicPropIsOpen }),
+    [setIsOpenAnimated, dynamicPropIsOpen]
+  );
+  (0, import_ds_utilities.useSideEffectSyntheticEvent)(isOpen, handleOnIsOpenChange, cbOpts);
   return isOpenAnimated;
 };
 //# sourceMappingURL=useDelayedOpen.js.map

package/dist/cjs/useDelayedOpen.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/useDelayedOpen.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n  const [isOpenAnimated, setIsOpenAnimated] = useState(isOpen);\n\n  useEffect(() => {\n    if (isOpen) {\n      // We are opening the side panel, render the content right now\n      setIsOpenAnimated(true);\n    } else {\n      // We are closing the side panel, wait for 300ms to unmount the content\n      setTimeout(() => setIsOpenAnimated(false), 300);\n    }\n  }, [isOpen]);\n\n  return isOpenAnimated;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAE7B,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,MAAM;AAE3D,8BAAU,MAAM;AACd,QAAI,QAAQ;AAEV,wBAAkB,IAAI;AAAA,IACxB,OAAO;AAEL,iBAAW,MAAM,kBAAkB,KAAK,GAAG,GAAG;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;",
-  "names": []
+  "sources": ["../../src/useDelayedOpen.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { useSideEffectSyntheticEvent, useLatestValueReferenciallyStable } from '@elliemae/ds-utilities';\n\nconst handleOnIsOpenChange = (\n  latestIsOpen: boolean,\n  {\n    setIsOpenAnimated,\n    dynamicPropIsOpen,\n  }: {\n    setIsOpenAnimated: React.Dispatch<React.SetStateAction<boolean>>;\n    dynamicPropIsOpen: React.MutableRefObject<boolean>;\n  },\n) => {\n  if (latestIsOpen) {\n    // We are opening the side panel, render the content right now\n    setIsOpenAnimated(true);\n  } else {\n    // We are closing the side panel, wait for 300ms to unmount the content\n    setTimeout(() => {\n      if (!dynamicPropIsOpen.current) {\n        setIsOpenAnimated(false);\n      }\n    }, 300);\n  }\n};\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n  const [isOpenAnimated, setIsOpenAnimated] = React.useState(isOpen);\n  const dynamicPropIsOpen = useLatestValueReferenciallyStable(isOpen);\n  const cbOpts = React.useMemo(\n    () => ({ setIsOpenAnimated, dynamicPropIsOpen }),\n    [setIsOpenAnimated, dynamicPropIsOpen],\n  );\n\n  useSideEffectSyntheticEvent(isOpen, handleOnIsOpenChange, cbOpts);\n\n  return isOpenAnimated;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAA+E;AAE/E,MAAM,uBAAuB,CAC3B,cACA;AAAA,EACE;AAAA,EACA;AACF,MAIG;AACH,MAAI,cAAc;AAEhB,sBAAkB,IAAI;AAAA,EACxB,OAAO;AAEL,eAAW,MAAM;AACf,UAAI,CAAC,kBAAkB,SAAS;AAC9B,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AACF;AAEO,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAAS,MAAM;AACjE,QAAM,wBAAoB,uDAAkC,MAAM;AAClE,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO,EAAE,mBAAmB,kBAAkB;AAAA,IAC9C,CAAC,mBAAmB,iBAAiB;AAAA,EACvC;AAEA,uDAA4B,QAAQ,sBAAsB,MAAM;AAEhE,SAAO;AACT;",
+  "names": ["React"]
 }

package/dist/esm/SidePanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n  display: flex;\n  height: 100%;\n  flex-direction: row;\n  max-height: 100%;\n  overflow: hidden;\n  ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{ withBoxShadow: boolean; withBorder: boolean; noGridInfluencer: boolean }>`\n  box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n  transition: 300ms;\n  border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n  ${({ noGridInfluencer, side, theme }) =>\n    noGridInfluencer\n      ? `\n   position: absolute;\n   z-index: ${theme.zIndex.dialog};\n   top:0;\n   ${side}: 0;\n   height: 100%;\n   `\n      : ''}\n  background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n  children,\n  isOpen,\n  footer,\n  header,\n  panelContent,\n  panelWidth,\n  panelContentOverflow,\n  widthWhenIsClosed,\n  noGridInfluencer = false,\n  withBorder = true,\n  withBoxShadow = false,\n  side = 'right',\n}): React.ReactElement => {\n  const isOpenAnimated = useDelayedOpen(isOpen);\n\n  const panelJSX = (\n    <TransGrid\n      style={{ overflow: 'hidden' }}\n      height=\"100%\"\n      maxHeight=\"100%\"\n      width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n      withBorder={withBorder}\n      withBoxShadow={withBoxShadow}\n      isOpen={isOpen}\n      cols={[1]}\n      noGridInfluencer={noGridInfluencer}\n      side={side}\n    >\n      <Grid\n        rows={\n          footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n        }\n        style={{ overflow: 'hidden' }}\n      >\n        {(isOpenAnimated || widthWhenIsClosed > 0) && (\n          <>\n            <Grid>{header}</Grid>\n            <Grid style={{ overflow: 'hidden' }}>\n              <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n            </Grid>\n            {footer ? (\n              <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n                {footer}\n              </FooterContainer>\n            ) : null}\n          </>\n        )}\n      </Grid>\n    </TransGrid>\n  );\n\n  return (\n    <Container noGridInfluencer={noGridInfluencer}>\n      {side === 'left' && panelJSX}\n      <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n        {children}\n      </TransGrid>\n      {side === 'right' && panelJSX}\n    </Container>\n  );\n};\n\nSidePanel.propTypes = DSInputTextPropTypes;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0Eb,mBACE,KADF;AAzEV,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AAErB,SAAS,sBAAsB,oBAAoB;AACnD,SAAS,sBAAsB;AAE/B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO;AAAA;AAAA,KAEtB;AAAA;AAAA,OAGG;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG3D,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,iBAAiB,eAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,UAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,UAE1B,6BAAkB,oBAAoB,MACtC,iCACE;AAAA,gCAAC,QAAM,kBAAO;AAAA,YACd,oBAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAChC,8BAAC,QAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,oBAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,qBAAC,aAAU,kBACR;AAAA,aAAS,UAAU;AAAA,IACpB,oBAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,wBAAwB,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n  display: flex;\n  height: 100%;\n  flex-direction: row;\n  max-height: 100%;\n  overflow: hidden;\n  ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{ withBoxShadow: boolean; withBorder: boolean; noGridInfluencer: boolean }>`\n  box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n  transition: 300ms;\n  border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n  ${({ noGridInfluencer, side, theme }) =>\n    noGridInfluencer\n      ? `\n   position: absolute;\n   z-index: ${theme.zIndex.dialog};\n   top:0;\n   ${side}: 0;\n   height: 100%;\n   `\n      : ''}\n  background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n  border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n  children,\n  isOpen,\n  footer,\n  header,\n  panelContent,\n  panelWidth,\n  panelContentOverflow,\n  widthWhenIsClosed,\n  noGridInfluencer = false,\n  withBorder = true,\n  withBoxShadow = false,\n  side = 'right',\n}): React.ReactElement => {\n  const isOpenAnimated = useDelayedOpen(isOpen);\n\n  const panelJSX = (\n    <TransGrid\n      style={{ overflow: 'hidden' }}\n      height=\"100%\"\n      maxHeight=\"100%\"\n      width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n      withBorder={withBorder}\n      withBoxShadow={withBoxShadow}\n      isOpen={isOpen}\n      cols={[1]}\n      noGridInfluencer={noGridInfluencer}\n      side={side}\n    >\n      <Grid\n        rows={\n          footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n        }\n        style={{ overflow: 'hidden' }}\n      >\n        {(isOpenAnimated || widthWhenIsClosed > 0) && (\n          <>\n            <Grid>{header}</Grid>\n            <Grid style={{ overflow: 'hidden' }}>\n              <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n            </Grid>\n            {footer ? (\n              <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n                {footer}\n              </FooterContainer>\n            ) : null}\n          </>\n        )}\n      </Grid>\n    </TransGrid>\n  );\n\n  return (\n    <Container noGridInfluencer={noGridInfluencer}>\n      {side === 'left' && panelJSX}\n      <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n        {children}\n      </TransGrid>\n      {side === 'right' && panelJSX}\n    </Container>\n  );\n};\n\nSidePanel.propTypes = DSInputTextPropTypes;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Eb,mBACE,KADF;AAzEV,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AAErB,SAAS,sBAAsB,oBAAoB;AACnD,SAAS,sBAAsB;AAE/B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO;AAAA;AAAA,KAEtB;AAAA;AAAA,OAGG;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG3D,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,iBAAiB,eAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,UAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,UAE1B,6BAAkB,oBAAoB,MACtC,iCACE;AAAA,gCAAC,QAAM,kBAAO;AAAA,YACd,oBAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAChC,8BAAC,QAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,oBAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,qBAAC,aAAU,kBACR;AAAA,aAAS,UAAU;AAAA,IACpB,oBAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,wBAAwB,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
   "names": []
 }

package/dist/esm/TemplateBasicPageWithSidePanel.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TemplateBasicPageWithSidePanel.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TemplateBasicPageWithSidePanel.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel.js';\n\nconst TemplateBasicPageWithSidePanel = ({\n  globalHeader = null,\n  mainHeader = null,\n  mainContent,\n  mainFooter,\n  isOpen = false,\n  onClose,\n  panelFooter,\n  panelHeader,\n  panelContent,\n  panelWidth,\n}) => (\n  <Grid style={{ overflow: 'hidden', width: '100%' }} height=\"100%\" maxHeight=\"100%\" rows={['auto', '1fr']}>\n    <Grid>{globalHeader}</Grid>\n    <SidePanel\n      footer={panelFooter}\n      header={panelHeader}\n      panelWidth={panelWidth}\n      onClose={onClose}\n      panelContent={panelContent}\n      isOpen={isOpen}\n    >\n      <Grid style={{ overflow: 'hidden' }} height=\"100%\" maxHeight=\"100%\">\n        <Grid\n          rows={\n            mainFooter\n              ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px']\n              : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)']\n          }\n          style={{ overflow: 'hidden' }}\n        >\n          <Grid>{mainHeader}</Grid>\n          <Grid style={{ overflow: 'hidden' }}>\n            <Grid style={{ overflow: 'auto' }}>{mainContent}</Grid>\n          </Grid>\n          {mainFooter && <Grid alignItems=\"center\">{mainFooter}</Grid>}\n        </Grid>\n      </Grid>\n    </SidePanel>\n  </Grid>\n);\n\nconst props = {\n  /**\n   * Global Header\n   */\n  globalHeader: PropTypes.element.description('Global Header'),\n  /**\n   * Main Header\n   */\n  mainHeader: PropTypes.element.description('Main Header'),\n  /**\n   * Main content\n   */\n  mainContent: PropTypes.element.isRequired.description('Main content'),\n  /**\n   * Main Footer\n   */\n  mainFooter: PropTypes.element.description('Main Footer'),\n  /**\n   * Should show the slide panel or not\n   */\n  isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n  /**\n   * Footer for Slide Panel\n   */\n  panelFooter: PropTypes.element.description('Footer for Slide Panel'),\n  /**\n   * Header for Slide Panel instance of SlidePanelHeader\n   */\n  panelHeader: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n  /**\n   * Content for Slide Panel\n   */\n  panelContent: PropTypes.element.description('Content for Slide Panel'),\n  /**\n   * Width of the panel open. eg: 300\n   */\n  panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n  /**\n   * Callback\n   */\n  onClose: PropTypes.func.description('callback'),\n};\n\nTemplateBasicPageWithSidePanel.propTypes = props;\nTemplateBasicPageWithSidePanel.displayName = 'TemplateBasicPageWithSidePanel';\nconst DSTemplateBasicPageWithSidePanel = describe(TemplateBasicPageWithSidePanel);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACkBnB,cAUI,YAVJ;AAjBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,YAAY;AACrB,OAAO,eAAe;AAEtB,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,QAAK,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO,GAAG,QAAO,QAAO,WAAU,QAAO,MAAM,CAAC,QAAQ,KAAK,GACrG;AAAA,sBAAC,QAAM,wBAAa;AAAA,EACpB;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAAG,QAAO,QAAO,WAAU,QAC3D;AAAA,QAAC;AAAA;AAAA,UACC,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,MAAM,IACxD,CAAC,aAAa,SAAS,OAAO,kBAAkB;AAAA,UAEtD,OAAO,EAAE,UAAU,SAAS;AAAA,UAE5B;AAAA,gCAAC,QAAM,sBAAW;AAAA,YAClB,oBAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAChC,8BAAC,QAAK,OAAO,EAAE,UAAU,OAAO,GAAI,uBAAY,GAClD;AAAA,YACC,cAAc,oBAAC,QAAK,YAAW,UAAU,sBAAW;AAAA;AAAA;AAAA,MACvD,GACF;AAAA;AAAA,EACF;AAAA,GACF;AAGF,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIZ,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA;AAAA;AAAA;AAAA,EAI3D,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,EAIvD,aAAa,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIpE,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,EAIvD,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,aAAa,UAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAInE,aAAa,UAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAIhG,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA;AAAA;AAAA;AAAA,EAI3E,SAAS,UAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,mCAAmC,SAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
   "names": []

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
+export * from "@elliemae/ds-side-panel-header";
 export * from "./SidePanel.js";
-export * from "./SidePanelHeader.js";
 export * from "./TemplateBasicPageWithSidePanel.js";
 import { default as default2 } from "./SidePanel.js";
 export {

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './SidePanel.js';\nexport * from './SidePanelHeader.js';\nexport * from './TemplateBasicPageWithSidePanel.js';\nexport { default } from './SidePanel.js';\n"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from '@elliemae/ds-side-panel-header';\nexport * from './SidePanel.js';\nexport * from './TemplateBasicPageWithSidePanel.js';\nexport { default } from './SidePanel.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,WAAAA,gBAAe;",
   "names": ["default"]
 }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSSidePanelT {\n  export interface IProps {\n    children?: React.ReactNode;\n    isOpen: boolean;\n    footer?: React.ReactNode;\n    header?: React.ReactNode;\n    panelContent?: React.ReactNode;\n    panelWidth: number;\n    widthWhenIsClosed: number;\n    panelContentOverflow: 'auto' | 'hidden';\n    withBorder: boolean;\n    withBoxShadow: boolean;\n    noGridInfluencer?: boolean;\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n  isOpen: false,\n  panelWidth: 300,\n  widthWhenIsClosed: 0,\n  panelContentOverflow: 'auto',\n  withBorder: true,\n  withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n  /**\n   * Main content\n   */\n  children: PropTypes.element.isRequired.description('Main content'),\n  /**\n   * Should show the slide panel or not\n   */\n  isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n  /**\n   * Footer for Slide Panel\n   */\n  footer: PropTypes.element.description('Footer for Slide Panel'),\n  /**\n   * Header for Slide Panel instance of SlidePanelHeader\n   */\n  header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n  /**\n   * Content for Slide Panel\n   */\n  panelContent: PropTypes.element.description('Content for Slide Panel'),\n  /**\n   * Width of the panel open. eg: 300\n   */\n  panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n  widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n  panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n  withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n  withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n  noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n  side: PropTypes.oneOf(['left', 'right'])\n    .description('Wheter to put the side panel on the left or right')\n    .defaultValue('right'),\n} as WeakValidationMap<unknown>;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,iBAAiB;AAoBnB,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,UAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
   "names": []

package/dist/esm/useDelayedOpen.js

@@ -1,14 +1,28 @@
 import * as React from "react";
-import { useEffect, useState } from "react";
+import React2 from "react";
+import { useSideEffectSyntheticEvent, useLatestValueReferenciallyStable } from "@elliemae/ds-utilities";
+const handleOnIsOpenChange = (latestIsOpen, {
+  setIsOpenAnimated,
+  dynamicPropIsOpen
+}) => {
+  if (latestIsOpen) {
+    setIsOpenAnimated(true);
+  } else {
+    setTimeout(() => {
+      if (!dynamicPropIsOpen.current) {
+        setIsOpenAnimated(false);
+      }
+    }, 300);
+  }
+};
 const useDelayedOpen = (isOpen) => {
-  const [isOpenAnimated, setIsOpenAnimated] = useState(isOpen);
-  useEffect(() => {
-    if (isOpen) {
-      setIsOpenAnimated(true);
-    } else {
-      setTimeout(() => setIsOpenAnimated(false), 300);
-    }
-  }, [isOpen]);
+  const [isOpenAnimated, setIsOpenAnimated] = React2.useState(isOpen);
+  const dynamicPropIsOpen = useLatestValueReferenciallyStable(isOpen);
+  const cbOpts = React2.useMemo(
+    () => ({ setIsOpenAnimated, dynamicPropIsOpen }),
+    [setIsOpenAnimated, dynamicPropIsOpen]
+  );
+  useSideEffectSyntheticEvent(isOpen, handleOnIsOpenChange, cbOpts);
   return isOpenAnimated;
 };
 export {

package/dist/esm/useDelayedOpen.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/useDelayedOpen.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useState } from 'react';\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n  const [isOpenAnimated, setIsOpenAnimated] = useState(isOpen);\n\n  useEffect(() => {\n    if (isOpen) {\n      // We are opening the side panel, render the content right now\n      setIsOpenAnimated(true);\n    } else {\n      // We are closing the side panel, wait for 300ms to unmount the content\n      setTimeout(() => setIsOpenAnimated(false), 300);\n    }\n  }, [isOpen]);\n\n  return isOpenAnimated;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,gBAAgB;AAE7B,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAM;AAE3D,YAAU,MAAM;AACd,QAAI,QAAQ;AAEV,wBAAkB,IAAI;AAAA,IACxB,OAAO;AAEL,iBAAW,MAAM,kBAAkB,KAAK,GAAG,GAAG;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;",
-  "names": []
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useDelayedOpen.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useSideEffectSyntheticEvent, useLatestValueReferenciallyStable } from '@elliemae/ds-utilities';\n\nconst handleOnIsOpenChange = (\n  latestIsOpen: boolean,\n  {\n    setIsOpenAnimated,\n    dynamicPropIsOpen,\n  }: {\n    setIsOpenAnimated: React.Dispatch<React.SetStateAction<boolean>>;\n    dynamicPropIsOpen: React.MutableRefObject<boolean>;\n  },\n) => {\n  if (latestIsOpen) {\n    // We are opening the side panel, render the content right now\n    setIsOpenAnimated(true);\n  } else {\n    // We are closing the side panel, wait for 300ms to unmount the content\n    setTimeout(() => {\n      if (!dynamicPropIsOpen.current) {\n        setIsOpenAnimated(false);\n      }\n    }, 300);\n  }\n};\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n  const [isOpenAnimated, setIsOpenAnimated] = React.useState(isOpen);\n  const dynamicPropIsOpen = useLatestValueReferenciallyStable(isOpen);\n  const cbOpts = React.useMemo(\n    () => ({ setIsOpenAnimated, dynamicPropIsOpen }),\n    [setIsOpenAnimated, dynamicPropIsOpen],\n  );\n\n  useSideEffectSyntheticEvent(isOpen, handleOnIsOpenChange, cbOpts);\n\n  return isOpenAnimated;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,6BAA6B,yCAAyC;AAE/E,MAAM,uBAAuB,CAC3B,cACA;AAAA,EACE;AAAA,EACA;AACF,MAIG;AACH,MAAI,cAAc;AAEhB,sBAAkB,IAAI;AAAA,EACxB,OAAO;AAEL,eAAW,MAAM;AACf,UAAI,CAAC,kBAAkB,SAAS;AAC9B,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AACF;AAEO,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAS,MAAM;AACjE,QAAM,oBAAoB,kCAAkC,MAAM;AAClE,QAAM,SAASA,OAAM;AAAA,IACnB,OAAO,EAAE,mBAAmB,kBAAkB;AAAA,IAC9C,CAAC,mBAAmB,iBAAiB;AAAA,EACvC;AAEA,8BAA4B,QAAQ,sBAAsB,MAAM;AAEhE,SAAO;AACT;",
+  "names": ["React"]
 }

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
+export * from '@elliemae/ds-side-panel-header';
 export * from './SidePanel.js';
-export * from './SidePanelHeader.js';
 export * from './TemplateBasicPageWithSidePanel.js';
 export { default } from './SidePanel.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-side-panel",
-  "version": "3.22.0-next.3",
+  "version": "3.22.0-next.30",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Side Panel",
   "files": [
@@ -55,17 +55,16 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.22.0-next.3",
-    "@elliemae/ds-system": "3.22.0-next.3",
-    "@elliemae/ds-grid": "3.22.0-next.3",
-    "@elliemae/ds-utilities": "3.22.0-next.3",
-    "@elliemae/ds-icons": "3.22.0-next.3",
-    "@elliemae/ds-props-helpers": "3.22.0-next.3"
+    "@elliemae/ds-grid": "3.22.0-next.30",
+    "@elliemae/ds-props-helpers": "3.22.0-next.30",
+    "@elliemae/ds-system": "3.22.0-next.30",
+    "@elliemae/ds-side-panel-header": "3.22.0-next.30",
+    "@elliemae/ds-utilities": "3.22.0-next.30"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "~9.0.0-next.17",
+    "@elliemae/pui-cli": "~9.0.0-next.22",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.3"
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.30"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -78,14 +77,14 @@
     "typeSafety": false
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
     "test": "pui-cli test --passWithNoTests",
-    "lint": "node ../../scripts/lint.mjs",
-    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
-    "dts": "node ../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
     "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
-    "checkDeps": "npm exec ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
 }

package/dist/cjs/SidePanelHeader.js

@@ -1,97 +0,0 @@
-"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 SidePanelHeader_exports = {};
-__export(SidePanelHeader_exports, {
-  DSSidePanelHeaderWithSchema: () => DSSidePanelHeaderWithSchema,
-  SidePanelHeader: () => SidePanelHeader
-});
-module.exports = __toCommonJS(SidePanelHeader_exports);
-var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_system = require("@elliemae/ds-system");
-var import_lodash = require("lodash");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-var import_ds_grid = require("@elliemae/ds-grid");
-const StyledSeparator = import_ds_system.styled.div`
-  width: 0;
-  height: 100%;
-  margin: 0 ${(props2) => props2.theme.space.xxs};
-  border-left: ${(props2) => `${props2.theme.colors.neutral[300]} 1px solid`};
-`;
-const StyledTitle = import_ds_system.styled.div`
-  font-size: 18px;
-  font-weight: ${(props2) => props2.theme.fontWeights.regular};
-  color: ${(props2) => props2.theme.colors.neutral["700"]};
-  ${(0, import_ds_system.truncate)()}
-`;
-const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
-  border-bottom: ${(props2) => (0, import_ds_system.border)(props2.theme.colors.neutral["300"])};
-`;
-const SidePanelHeader = ({ title = null, additionalAction = null, onClose = import_lodash.noop, showClose = true }) => {
-  const theme = (0, import_ds_system.useTheme)();
-  const separator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "24px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSeparator, {}) });
-  const cols = [1, "auto", "auto"];
-  const cols2 = ["auto"];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    Wrapper,
-    {
-      cols,
-      height: theme.space.m,
-      pl: theme.space.xs,
-      pr: theme.space.xs,
-      alignItems: "center",
-      width: "100%",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", justifyContent: "flex-start", cols: cols2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", pr: theme.space.xs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, { maxWidth: "100%", alignItems: "center", children: title }) }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { ml: "xxs", alignItems: "center", 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)(import_ds_button_v2.DSButtonV2, { buttonType: "icon", size: "m", onClick: onClose, "data-testid": "btn-close-slide-panel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseSmall, {}) }) })
-        ] })
-      ]
-    }
-  );
-};
-const props = {
-  /** Page title */
-  title: import_ds_props_helpers.PropTypes.string.description("Page title"),
-  /** Action button */
-  additionalAction: import_ds_props_helpers.PropTypes.element.description("Action button"),
-  /** Called when the slide collapse */
-  onClose: import_ds_props_helpers.PropTypes.func.description("Called when the slide collapse"),
-  /** Show/Hide close button */
-  showClose: import_ds_props_helpers.PropTypes.bool.description("Show/Hide close button")
-};
-SidePanelHeader.propTypes = props;
-SidePanelHeader.displayName = "SidePanelHeader";
-const DSSidePanelHeaderWithSchema = (0, import_ds_props_helpers.describe)(SidePanelHeader);
-DSSidePanelHeaderWithSchema.propTypes = props;
-//# sourceMappingURL=SidePanelHeader.js.map

package/dist/cjs/SidePanelHeader.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/SidePanelHeader.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled, border, truncate, useTheme } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst 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`;\n\nconst StyledTitle = styled.div`\n  font-size: 18px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  ${truncate()}\n`;\n\nconst Wrapper = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {\n  const theme = useTheme();\n  const separator = (\n    <Grid height=\"24px\">\n      <StyledSeparator />\n    </Grid>\n  );\n  const cols = [1, 'auto', 'auto'];\n  const cols2 = ['auto'];\n  return (\n    <Wrapper\n      cols={cols}\n      height={theme.space.m}\n      pl={theme.space.xs}\n      pr={theme.space.xs}\n      alignItems=\"center\"\n      width=\"100%\"\n    >\n      <Grid alignItems=\"center\" justifyContent=\"flex-start\" cols={cols2}>\n        <Grid alignItems=\"center\" pr={theme.space.xs}>\n          <Grid>\n            <Grid alignItems=\"center\">\n              <StyledTitle maxWidth=\"100%\" alignItems=\"center\">\n                {title}\n              </StyledTitle>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\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            <DSButtonV2 buttonType=\"icon\" size=\"m\" onClick={onClose} data-testid=\"btn-close-slide-panel\">\n              <CloseSmall />\n            </DSButtonV2>\n          )}\n        </Grid>\n      </Grid>\n    </Wrapper>\n  );\n};\n\nconst props = {\n  /** Page title */\n  title: PropTypes.string.description('Page title'),\n\n  /** Action button */\n  additionalAction: PropTypes.element.description('Action button'),\n\n  /** Called when the slide collapse */\n  onClose: PropTypes.func.description('Called when the slide collapse'),\n\n  /** Show/Hide close button */\n  showClose: PropTypes.bool.description('Show/Hide close button'),\n};\n\nSidePanelHeader.propTypes = props;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = props;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA7BN,8BAAoC;AACpC,uBAAmD;AACnD,oBAAqB;AACrB,sBAA2B;AAC3B,0BAA2B;AAC3B,qBAAqB;AAErB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7D,MAAM,cAAc,wBAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,QAClD,2BAAS;AAAA;AAGb,MAAM,cAAU,yBAAO,mBAAI;AAAA,mBACR,CAACA,eAAU,yBAAOA,OAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,KAAK,MAAM;AACvG,QAAM,YAAQ,2BAAS;AACvB,QAAM,YACJ,4CAAC,uBAAK,QAAO,QACX,sDAAC,mBAAgB,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,MAAM,MAAM;AAAA,MACpB,IAAI,MAAM,MAAM;AAAA,MAChB,IAAI,MAAM,MAAM;AAAA,MAChB,YAAW;AAAA,MACX,OAAM;AAAA,MAEN;AAAA,oDAAC,uBAAK,YAAW,UAAS,gBAAe,cAAa,MAAM,OAC1D,sDAAC,uBAAK,YAAW,UAAS,IAAI,MAAM,MAAM,IACxC,sDAAC,uBACC,sDAAC,uBAAK,YAAW,UACf,sDAAC,eAAY,UAAS,QAAO,YAAW,UACrC,iBACH,GACF,GACF,GACF,GACF;AAAA,QACA,6CAAC,uBAAK,IAAG,OAAM,YAAW,UAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GAC3F;AAAA,8BAAoB,4CAAC,uBAAM,4BAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,4CAAC,uBACE,uBACC,4CAAC,kCAAW,YAAW,QAAO,MAAK,KAAI,SAAS,SAAS,eAAY,yBACnE,sDAAC,8BAAW,GACd,GAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAGhD,kBAAkB,kCAAU,QAAQ,YAAY,eAAe;AAAA;AAAA,EAG/D,SAAS,kCAAU,KAAK,YAAY,gCAAgC;AAAA;AAAA,EAGpE,WAAW,kCAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
-  "names": ["props"]
-}

package/dist/esm/SidePanelHeader.js

@@ -1,67 +0,0 @@
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { PropTypes, describe } from "@elliemae/ds-props-helpers";
-import { styled, border, truncate, useTheme } from "@elliemae/ds-system";
-import { noop } from "lodash";
-import { CloseSmall } from "@elliemae/ds-icons";
-import { DSButtonV2 } from "@elliemae/ds-button-v2";
-import { Grid } from "@elliemae/ds-grid";
-const StyledSeparator = styled.div`
-  width: 0;
-  height: 100%;
-  margin: 0 ${(props2) => props2.theme.space.xxs};
-  border-left: ${(props2) => `${props2.theme.colors.neutral[300]} 1px solid`};
-`;
-const StyledTitle = styled.div`
-  font-size: 18px;
-  font-weight: ${(props2) => props2.theme.fontWeights.regular};
-  color: ${(props2) => props2.theme.colors.neutral["700"]};
-  ${truncate()}
-`;
-const Wrapper = styled(Grid)`
-  border-bottom: ${(props2) => border(props2.theme.colors.neutral["300"])};
-`;
-const SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {
-  const theme = useTheme();
-  const separator = /* @__PURE__ */ jsx(Grid, { height: "24px", children: /* @__PURE__ */ jsx(StyledSeparator, {}) });
-  const cols = [1, "auto", "auto"];
-  const cols2 = ["auto"];
-  return /* @__PURE__ */ jsxs(
-    Wrapper,
-    {
-      cols,
-      height: theme.space.m,
-      pl: theme.space.xs,
-      pr: theme.space.xs,
-      alignItems: "center",
-      width: "100%",
-      children: [
-        /* @__PURE__ */ jsx(Grid, { alignItems: "center", justifyContent: "flex-start", cols: cols2, children: /* @__PURE__ */ jsx(Grid, { alignItems: "center", pr: theme.space.xs, children: /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(StyledTitle, { maxWidth: "100%", alignItems: "center", children: title }) }) }) }) }),
-        /* @__PURE__ */ jsxs(Grid, { ml: "xxs", alignItems: "center", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
-          additionalAction && /* @__PURE__ */ jsx(Grid, { children: additionalAction }),
-          additionalAction && showClose && separator,
-          /* @__PURE__ */ jsx(Grid, { children: showClose && /* @__PURE__ */ jsx(DSButtonV2, { buttonType: "icon", size: "m", onClick: onClose, "data-testid": "btn-close-slide-panel", children: /* @__PURE__ */ jsx(CloseSmall, {}) }) })
-        ] })
-      ]
-    }
-  );
-};
-const props = {
-  /** Page title */
-  title: PropTypes.string.description("Page title"),
-  /** Action button */
-  additionalAction: PropTypes.element.description("Action button"),
-  /** Called when the slide collapse */
-  onClose: PropTypes.func.description("Called when the slide collapse"),
-  /** Show/Hide close button */
-  showClose: PropTypes.bool.description("Show/Hide close button")
-};
-SidePanelHeader.propTypes = props;
-SidePanelHeader.displayName = "SidePanelHeader";
-const DSSidePanelHeaderWithSchema = describe(SidePanelHeader);
-DSSidePanelHeaderWithSchema.propTypes = props;
-export {
-  DSSidePanelHeaderWithSchema,
-  SidePanelHeader
-};
-//# sourceMappingURL=SidePanelHeader.js.map

package/dist/esm/SidePanelHeader.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanelHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled, border, truncate, useTheme } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst 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`;\n\nconst StyledTitle = styled.div`\n  font-size: 18px;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  ${truncate()}\n`;\n\nconst Wrapper = styled(Grid)`\n  border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {\n  const theme = useTheme();\n  const separator = (\n    <Grid height=\"24px\">\n      <StyledSeparator />\n    </Grid>\n  );\n  const cols = [1, 'auto', 'auto'];\n  const cols2 = ['auto'];\n  return (\n    <Wrapper\n      cols={cols}\n      height={theme.space.m}\n      pl={theme.space.xs}\n      pr={theme.space.xs}\n      alignItems=\"center\"\n      width=\"100%\"\n    >\n      <Grid alignItems=\"center\" justifyContent=\"flex-start\" cols={cols2}>\n        <Grid alignItems=\"center\" pr={theme.space.xs}>\n          <Grid>\n            <Grid alignItems=\"center\">\n              <StyledTitle maxWidth=\"100%\" alignItems=\"center\">\n                {title}\n              </StyledTitle>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\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            <DSButtonV2 buttonType=\"icon\" size=\"m\" onClick={onClose} data-testid=\"btn-close-slide-panel\">\n              <CloseSmall />\n            </DSButtonV2>\n          )}\n        </Grid>\n      </Grid>\n    </Wrapper>\n  );\n};\n\nconst props = {\n  /** Page title */\n  title: PropTypes.string.description('Page title'),\n\n  /** Action button */\n  additionalAction: PropTypes.element.description('Action button'),\n\n  /** Called when the slide collapse */\n  onClose: PropTypes.func.description('Called when the slide collapse'),\n\n  /** Show/Hide close button */\n  showClose: PropTypes.bool.description('Show/Hide close button'),\n};\n\nSidePanelHeader.propTypes = props;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = props;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8BjB,cAyBA,YAzBA;AA7BN,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,QAAQ,UAAU,gBAAgB;AACnD,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7D,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAClD,SAAS;AAAA;AAGb,MAAM,UAAU,OAAO,IAAI;AAAA,mBACR,CAACA,WAAU,OAAOA,OAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,MAAM,YAAY,KAAK,MAAM;AACvG,QAAM,QAAQ,SAAS;AACvB,QAAM,YACJ,oBAAC,QAAK,QAAO,QACX,8BAAC,mBAAgB,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,MAAM,MAAM;AAAA,MACpB,IAAI,MAAM,MAAM;AAAA,MAChB,IAAI,MAAM,MAAM;AAAA,MAChB,YAAW;AAAA,MACX,OAAM;AAAA,MAEN;AAAA,4BAAC,QAAK,YAAW,UAAS,gBAAe,cAAa,MAAM,OAC1D,8BAAC,QAAK,YAAW,UAAS,IAAI,MAAM,MAAM,IACxC,8BAAC,QACC,8BAAC,QAAK,YAAW,UACf,8BAAC,eAAY,UAAS,QAAO,YAAW,UACrC,iBACH,GACF,GACF,GACF,GACF;AAAA,QACA,qBAAC,QAAK,IAAG,OAAM,YAAW,UAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GAC3F;AAAA,8BAAoB,oBAAC,QAAM,4BAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,oBAAC,QACE,uBACC,oBAAC,cAAW,YAAW,QAAO,MAAK,KAAI,SAAS,SAAS,eAAY,yBACnE,8BAAC,cAAW,GACd,GAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAGhD,kBAAkB,UAAU,QAAQ,YAAY,eAAe;AAAA;AAAA,EAG/D,SAAS,UAAU,KAAK,YAAY,gCAAgC;AAAA;AAAA,EAGpE,WAAW,UAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;",
-  "names": ["props"]
-}

package/dist/types/SidePanelHeader.d.ts

@@ -1,26 +0,0 @@
-declare const SidePanelHeader: {
-    ({ title, additionalAction, onClose, showClose }: {
-        title?: null | undefined;
-        additionalAction?: null | undefined;
-        onClose?: ((...args: any[]) => void) | undefined;
-        showClose?: boolean | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /** Page title */
-        title: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        /** Action button */
-        additionalAction: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        /** Called when the slide collapse */
-        onClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-        /** Show/Hide close button */
-        showClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    };
-    displayName: string;
-};
-declare const DSSidePanelHeaderWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
-    title?: null | undefined;
-    additionalAction?: null | undefined;
-    onClose?: ((...args: any[]) => void) | undefined;
-    showClose?: boolean | undefined;
-}>;
-export { SidePanelHeader, DSSidePanelHeaderWithSchema };