@elliemae/ds-side-panel 3.11.1-rc.1 → 3.12.0-next.1

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-utilities';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputTextPropTypes, defaultProps, DSSidePanelT } from './react-desc-prop-types';\nimport { useDelayedOpen } from './useDelayedOpen';\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.popper};\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;ADAvB;AACA,0BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AACrB,mCAAiE;AACjE,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,QAAQ,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;AAAA;AAGtD,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;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,4CAAC;AAAA,IACC,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B,QAAO;AAAA,IACP,WAAU;AAAA,IACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,CAAC,CAAC;AAAA,IACR;AAAA,IACA;AAAA,IAEA,sDAAC;AAAA,MACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,MAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,MAE1B,6BAAkB,oBAAoB,MACtC;AAAA,QACE;AAAA,sDAAC;AAAA,YAAM;AAAA,WAAO;AAAA,UACd,4CAAC;AAAA,YAAK,OAAO,EAAE,UAAU,SAAS;AAAA,YAChC,sDAAC;AAAA,cAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,cAAI;AAAA,aAAa;AAAA,WACjE;AAAA,UACC,SACC,4CAAC;AAAA,YAAgB,YAAW;AAAA,YAAS,IAAG;AAAA,YAAK,IAAG;AAAA,YAC7C;AAAA,WACH,IACE;AAAA;AAAA,OACN;AAAA,KAEJ;AAAA,GACF;AAGF,SACE,6CAAC;AAAA,IAAU;AAAA,IACR;AAAA,eAAS,UAAU;AAAA,MACpB,4CAAC;AAAA,QAAU,QAAO;AAAA,QAAO,MAAK;AAAA,QAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,QACjF;AAAA,OACH;AAAA,MACC,SAAS,WAAW;AAAA;AAAA,GACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,8BAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types';\nimport { useDelayedOpen } from './useDelayedOpen';\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.popper};\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,0BAAyB;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,QAAQ,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;AAAA;AAGtD,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;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,4CAAC;AAAA,IACC,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B,QAAO;AAAA,IACP,WAAU;AAAA,IACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,CAAC,CAAC;AAAA,IACR;AAAA,IACA;AAAA,IAEA,sDAAC;AAAA,MACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,MAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,MAE1B,6BAAkB,oBAAoB,MACtC;AAAA,QACE;AAAA,sDAAC;AAAA,YAAM;AAAA,WAAO;AAAA,UACd,4CAAC;AAAA,YAAK,OAAO,EAAE,UAAU,SAAS;AAAA,YAChC,sDAAC;AAAA,cAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,cAAI;AAAA,aAAa;AAAA,WACjE;AAAA,UACC,SACC,4CAAC;AAAA,YAAgB,YAAW;AAAA,YAAS,IAAG;AAAA,YAAK,IAAG;AAAA,YAC7C;AAAA,WACH,IACE;AAAA;AAAA,OACN;AAAA,KAEJ;AAAA,GACF;AAGF,SACE,6CAAC;AAAA,IAAU;AAAA,IACR;AAAA,eAAS,UAAU;AAAA,MACpB,4CAAC;AAAA,QAAU,QAAO;AAAA,QAAO,MAAK;AAAA,QAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,QACjF;AAAA,OACH;AAAA,MACC,SAAS,WAAW;AAAA;AAAA,GACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,8BAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
   "names": []
 }

package/dist/cjs/SidePanelHeader.js

@@ -33,7 +33,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_system = require("@elliemae/ds-system");
 var import_lodash = require("lodash");
-var import_ds_system2 = require("@elliemae/ds-system");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button = __toESM(require("@elliemae/ds-button"));
 var import_ds_grid = require("@elliemae/ds-grid");
@@ -47,13 +46,13 @@ 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_system2.truncate)()}
+  ${(0, import_ds_system.truncate)()}
 `;
 const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
-  border-bottom: ${(props2) => (0, import_ds_system2.border)(props2.theme.colors.neutral["300"])};
+  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_system2.useTheme)();
+  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, {})

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 from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\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            <DSButton\n              buttonType=\"text\"\n              icon={<CloseSmall />}\n              size=\"m\"\n              onClick={onClose}\n              data-testid=\"btn-close-slide-panel\"\n            />\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;ADAvB;AACA,0BAAoC;AACpC,uBAAuB;AACvB,oBAAqB;AACrB,IAAAA,oBAA2C;AAC3C,sBAA2B;AAC3B,uBAAqB;AACrB,qBAAqB;AAErB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGjB,CAACC,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,wBAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,QAC7C,4BAAS;AAAA;AAGb,MAAM,cAAU,yBAAO,mBAAI;AAAA,mBACR,CAACA,eAAU,0BAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,KAAK,MAAM;AACvG,QAAM,YAAQ,4BAAS;AACvB,QAAM,YACJ,4CAAC;AAAA,IAAK,QAAO;AAAA,IACX,sDAAC,mBAAgB;AAAA,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE,6CAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,IAEN;AAAA,kDAAC;AAAA,QAAK,YAAW;AAAA,QAAS,gBAAe;AAAA,QAAa,MAAM;AAAA,QAC1D,sDAAC;AAAA,UAAK,YAAW;AAAA,UAAS,IAAI,MAAM,MAAM;AAAA,UACxC,sDAAC;AAAA,YACC,sDAAC;AAAA,cAAK,YAAW;AAAA,cACf,sDAAC;AAAA,gBAAY,UAAS;AAAA,gBAAO,YAAW;AAAA,gBACrC;AAAA,eACH;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,MACA,6CAAC;AAAA,QAAK,IAAG;AAAA,QAAM,YAAW;AAAA,QAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM;AAAA,QAC3F;AAAA,8BAAoB,4CAAC;AAAA,YAAM;AAAA,WAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,4CAAC;AAAA,YACE,uBACC,4CAAC,iBAAAC,SAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,4CAAC,8BAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA,aACd;AAAA,WAEJ;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,8BAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,8BAAS,eAAe;AAE5D,4BAA4B,YAAY;",
-  "names": ["import_ds_system", "props", "DSButton"]
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled, border, truncate, useTheme } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\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            <DSButton\n              buttonType=\"text\"\n              icon={<CloseSmall />}\n              size=\"m\"\n              onClick={onClose}\n              data-testid=\"btn-close-slide-panel\"\n            />\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,0BAAoC;AACpC,uBAAmD;AACnD,oBAAqB;AACrB,sBAA2B;AAC3B,uBAAqB;AACrB,qBAAqB;AAErB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,wBAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,QAC7C,2BAAS;AAAA;AAGb,MAAM,cAAU,yBAAO,mBAAI;AAAA,mBACR,CAACA,eAAU,yBAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,KAAK,MAAM;AACvG,QAAM,YAAQ,2BAAS;AACvB,QAAM,YACJ,4CAAC;AAAA,IAAK,QAAO;AAAA,IACX,sDAAC,mBAAgB;AAAA,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE,6CAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,IAEN;AAAA,kDAAC;AAAA,QAAK,YAAW;AAAA,QAAS,gBAAe;AAAA,QAAa,MAAM;AAAA,QAC1D,sDAAC;AAAA,UAAK,YAAW;AAAA,UAAS,IAAI,MAAM,MAAM;AAAA,UACxC,sDAAC;AAAA,YACC,sDAAC;AAAA,cAAK,YAAW;AAAA,cACf,sDAAC;AAAA,gBAAY,UAAS;AAAA,gBAAO,YAAW;AAAA,gBACrC;AAAA,eACH;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,MACA,6CAAC;AAAA,QAAK,IAAG;AAAA,QAAM,YAAW;AAAA,QAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM;AAAA,QAC3F;AAAA,8BAAoB,4CAAC;AAAA,YAAM;AAAA,WAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,4CAAC;AAAA,YACE,uBACC,4CAAC,iBAAAC,SAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,4CAAC,8BAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA,aACd;AAAA,WAEJ;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,8BAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,8BAAS,eAAe;AAE5D,4BAA4B,YAAY;",
+  "names": ["props", "DSButton"]
 }

package/dist/cjs/TemplateBasicPageWithSidePanel.js

@@ -95,17 +95,13 @@ const props = {
   mainFooter: import_ds_utilities.PropTypes.element.description("Main Footer"),
   isOpen: import_ds_utilities.PropTypes.bool.description("Should show the slide panel or not"),
   panelFooter: import_ds_utilities.PropTypes.element.description("Footer for Slide Panel"),
-  panelHeader: import_ds_utilities.PropTypes.element.description(
-    "Header for Slide Panel instance of SlidePanelHeader"
-  ),
+  panelHeader: import_ds_utilities.PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
   panelContent: import_ds_utilities.PropTypes.element.description("Content for Slide Panel"),
   panelWidth: import_ds_utilities.PropTypes.number.description("Width of the panel open. eg: 300"),
   onClose: import_ds_utilities.PropTypes.func.description("callback")
 };
 TemplateBasicPageWithSidePanel.propTypes = props;
 TemplateBasicPageWithSidePanel.displayName = "TemplateBasicPageWithSidePanel";
-const DSTemplateBasicPageWithSidePanel = (0, import_ds_utilities.describe)(
-  TemplateBasicPageWithSidePanel
-);
+const DSTemplateBasicPageWithSidePanel = (0, import_ds_utilities.describe)(TemplateBasicPageWithSidePanel);
 DSTemplateBasicPageWithSidePanel.propTypes = props;
 //# sourceMappingURL=TemplateBasicPageWithSidePanel.js.map

package/dist/cjs/TemplateBasicPageWithSidePanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TemplateBasicPageWithSidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\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\n    style={{ overflow: 'hidden', width: '100%' }}\n    height=\"100%\"\n    maxHeight=\"100%\"\n    rows={['auto', '1fr']}\n  >\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(\n    'Header for Slide Panel instance of SlidePanelHeader',\n  ),\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(\n  TemplateBasicPageWithSidePanel,\n);\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;ADAvB;AACA,0BAAoC;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;AAAA,EACC,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO;AAAA,EAC3C,QAAO;AAAA,EACP,WAAU;AAAA,EACV,MAAM,CAAC,QAAQ,KAAK;AAAA,EAEpB;AAAA,gDAAC;AAAA,MAAM;AAAA,KAAa;AAAA,IACpB,4CAAC,iBAAAA,SAAA;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC;AAAA,QAAK,OAAO,EAAE,UAAU,SAAS;AAAA,QAAG,QAAO;AAAA,QAAO,WAAU;AAAA,QAC3D,uDAAC;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;AAAA,cAAM;AAAA,aAAW;AAAA,YAClB,4CAAC;AAAA,cAAK,OAAO,EAAE,UAAU,SAAS;AAAA,cAChC,sDAAC;AAAA,gBAAK,OAAO,EAAE,UAAU,OAAO;AAAA,gBAAI;AAAA,eAAY;AAAA,aAClD;AAAA,YACC,cAAc,4CAAC;AAAA,cAAK,YAAW;AAAA,cAAU;AAAA,aAAW;AAAA;AAAA,SACvD;AAAA,OACF;AAAA,KACF;AAAA;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,8BAAU,QAAQ;AAAA,IAC7B;AAAA,EACF;AAAA,EAIA,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,8BAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,uCAAmC;AAAA,EACvC;AACF;AACA,iCAAiC,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\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,0BAAoC;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;AAAA,EAAK,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO;AAAA,EAAG,QAAO;AAAA,EAAO,WAAU;AAAA,EAAO,MAAM,CAAC,QAAQ,KAAK;AAAA,EACrG;AAAA,gDAAC;AAAA,MAAM;AAAA,KAAa;AAAA,IACpB,4CAAC,iBAAAA,SAAA;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC;AAAA,QAAK,OAAO,EAAE,UAAU,SAAS;AAAA,QAAG,QAAO;AAAA,QAAO,WAAU;AAAA,QAC3D,uDAAC;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;AAAA,cAAM;AAAA,aAAW;AAAA,YAClB,4CAAC;AAAA,cAAK,OAAO,EAAE,UAAU,SAAS;AAAA,cAChC,sDAAC;AAAA,gBAAK,OAAO,EAAE,UAAU,OAAO;AAAA,gBAAI;AAAA,eAAY;AAAA,aAClD;AAAA,YACC,cAAc,4CAAC;AAAA,cAAK,YAAW;AAAA,cAAU;AAAA,aAAW;AAAA;AAAA,SACvD;AAAA,OACF;AAAA,KACF;AAAA;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAIhG,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,8BAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,uCAAmC,8BAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
   "names": ["SidePanel"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { PropTypes, GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\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;ADCvB,0BAA2D;AAoBpD,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,EAIlC,UAAU,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,8BAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,8BAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,8BAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,8BAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes } from '@elliemae/ds-utilities';\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;ADGvB,0BAA0B;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,EAIlC,UAAU,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,8BAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,8BAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,8BAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,8BAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
   "names": []
 }

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-utilities';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputTextPropTypes, defaultProps, DSSidePanelT } from './react-desc-prop-types';\nimport { useDelayedOpen } from './useDelayedOpen';\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.popper};\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;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AACrB,SAAS,sBAAsB,oBAAkC;AACjE,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,QAAQ,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;AAAA;AAGtD,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;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,oBAAC;AAAA,IACC,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B,QAAO;AAAA,IACP,WAAU;AAAA,IACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,CAAC,CAAC;AAAA,IACR;AAAA,IACA;AAAA,IAEA,8BAAC;AAAA,MACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,MAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,MAE1B,6BAAkB,oBAAoB,MACtC;AAAA,QACE;AAAA,8BAAC;AAAA,YAAM;AAAA,WAAO;AAAA,UACd,oBAAC;AAAA,YAAK,OAAO,EAAE,UAAU,SAAS;AAAA,YAChC,8BAAC;AAAA,cAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,cAAI;AAAA,aAAa;AAAA,WACjE;AAAA,UACC,SACC,oBAAC;AAAA,YAAgB,YAAW;AAAA,YAAS,IAAG;AAAA,YAAK,IAAG;AAAA,YAC7C;AAAA,WACH,IACE;AAAA;AAAA,OACN;AAAA,KAEJ;AAAA,GACF;AAGF,SACE,qBAAC;AAAA,IAAU;AAAA,IACR;AAAA,eAAS,UAAU;AAAA,MACpB,oBAAC;AAAA,QAAU,QAAO;AAAA,QAAO,MAAK;AAAA,QAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,QACjF;AAAA,OACH;AAAA,MACC,SAAS,WAAW;AAAA;AAAA,GACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types';\nimport { useDelayedOpen } from './useDelayedOpen';\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.popper};\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,QAAQ,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;AAAA;AAGtD,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;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,oBAAC;AAAA,IACC,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B,QAAO;AAAA,IACP,WAAU;AAAA,IACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,CAAC,CAAC;AAAA,IACR;AAAA,IACA;AAAA,IAEA,8BAAC;AAAA,MACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,MAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,MAE1B,6BAAkB,oBAAoB,MACtC;AAAA,QACE;AAAA,8BAAC;AAAA,YAAM;AAAA,WAAO;AAAA,UACd,oBAAC;AAAA,YAAK,OAAO,EAAE,UAAU,SAAS;AAAA,YAChC,8BAAC;AAAA,cAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,cAAI;AAAA,aAAa;AAAA,WACjE;AAAA,UACC,SACC,oBAAC;AAAA,YAAgB,YAAW;AAAA,YAAS,IAAG;AAAA,YAAK,IAAG;AAAA,YAC7C;AAAA,WACH,IACE;AAAA;AAAA,OACN;AAAA,KAEJ;AAAA,GACF;AAGF,SACE,qBAAC;AAAA,IAAU;AAAA,IACR;AAAA,eAAS,UAAU;AAAA,MACpB,oBAAC;AAAA,QAAU,QAAO;AAAA,QAAO,MAAK;AAAA,QAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,QACjF;AAAA,OACH;AAAA,MACC,SAAS,WAAW;AAAA;AAAA,GACvB;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/SidePanelHeader.js

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PropTypes, describe } from "@elliemae/ds-utilities";
-import { styled } from "@elliemae/ds-system";
+import { styled, border, truncate, useTheme } from "@elliemae/ds-system";
 import { noop } from "lodash";
-import { border, truncate, useTheme } from "@elliemae/ds-system";
 import { CloseSmall } from "@elliemae/ds-icons";
 import DSButton from "@elliemae/ds-button";
 import { Grid } from "@elliemae/ds-grid";

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 from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\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            <DSButton\n              buttonType=\"text\"\n              icon={<CloseSmall />}\n              size=\"m\"\n              onClick={onClose}\n              data-testid=\"btn-close-slide-panel\"\n            />\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;ACAvB;AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU,gBAAgB;AAC3C,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,YAAY;AAErB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,MAAM,UAAU,OAAO,IAAI;AAAA,mBACR,CAACA,WAAU,OAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,MAAM,YAAY,KAAK,MAAM;AACvG,QAAM,QAAQ,SAAS;AACvB,QAAM,YACJ,oBAAC;AAAA,IAAK,QAAO;AAAA,IACX,8BAAC,mBAAgB;AAAA,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE,qBAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,IAEN;AAAA,0BAAC;AAAA,QAAK,YAAW;AAAA,QAAS,gBAAe;AAAA,QAAa,MAAM;AAAA,QAC1D,8BAAC;AAAA,UAAK,YAAW;AAAA,UAAS,IAAI,MAAM,MAAM;AAAA,UACxC,8BAAC;AAAA,YACC,8BAAC;AAAA,cAAK,YAAW;AAAA,cACf,8BAAC;AAAA,gBAAY,UAAS;AAAA,gBAAO,YAAW;AAAA,gBACrC;AAAA,eACH;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,MACA,qBAAC;AAAA,QAAK,IAAG;AAAA,QAAM,YAAW;AAAA,QAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM;AAAA,QAC3F;AAAA,8BAAoB,oBAAC;AAAA,YAAM;AAAA,WAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,oBAAC;AAAA,YACE,uBACC,oBAAC;AAAA,cACC,YAAW;AAAA,cACX,MAAM,oBAAC,cAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA,aACd;AAAA,WAEJ;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,UAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,UAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,UAAU,KAAK,YAAY,wBAAwB;AAChE;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 from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled, border, truncate, useTheme } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\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            <DSButton\n              buttonType=\"text\"\n              icon={<CloseSmall />}\n              size=\"m\"\n              onClick={onClose}\n              data-testid=\"btn-close-slide-panel\"\n            />\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,OAAO,cAAc;AACrB,SAAS,YAAY;AAErB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,MAAM,UAAU,OAAO,IAAI;AAAA,mBACR,CAACA,WAAU,OAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,MAAM,YAAY,KAAK,MAAM;AACvG,QAAM,QAAQ,SAAS;AACvB,QAAM,YACJ,oBAAC;AAAA,IAAK,QAAO;AAAA,IACX,8BAAC,mBAAgB;AAAA,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE,qBAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,IAEN;AAAA,0BAAC;AAAA,QAAK,YAAW;AAAA,QAAS,gBAAe;AAAA,QAAa,MAAM;AAAA,QAC1D,8BAAC;AAAA,UAAK,YAAW;AAAA,UAAS,IAAI,MAAM,MAAM;AAAA,UACxC,8BAAC;AAAA,YACC,8BAAC;AAAA,cAAK,YAAW;AAAA,cACf,8BAAC;AAAA,gBAAY,UAAS;AAAA,gBAAO,YAAW;AAAA,gBACrC;AAAA,eACH;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,MACA,qBAAC;AAAA,QAAK,IAAG;AAAA,QAAM,YAAW;AAAA,QAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM;AAAA,QAC3F;AAAA,8BAAoB,oBAAC;AAAA,YAAM;AAAA,WAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,oBAAC;AAAA,YACE,uBACC,oBAAC;AAAA,cACC,YAAW;AAAA,cACX,MAAM,oBAAC,cAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA,aACd;AAAA,WAEJ;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,UAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,UAAU,KAAK,YAAY,gCAAgC;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/esm/TemplateBasicPageWithSidePanel.js

@@ -65,18 +65,14 @@ const props = {
   mainFooter: PropTypes.element.description("Main Footer"),
   isOpen: PropTypes.bool.description("Should show the slide panel or not"),
   panelFooter: PropTypes.element.description("Footer for Slide Panel"),
-  panelHeader: PropTypes.element.description(
-    "Header for Slide Panel instance of SlidePanelHeader"
-  ),
+  panelHeader: PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
   panelContent: PropTypes.element.description("Content for Slide Panel"),
   panelWidth: PropTypes.number.description("Width of the panel open. eg: 300"),
   onClose: PropTypes.func.description("callback")
 };
 TemplateBasicPageWithSidePanel.propTypes = props;
 TemplateBasicPageWithSidePanel.displayName = "TemplateBasicPageWithSidePanel";
-const DSTemplateBasicPageWithSidePanel = describe(
-  TemplateBasicPageWithSidePanel
-);
+const DSTemplateBasicPageWithSidePanel = describe(TemplateBasicPageWithSidePanel);
 DSTemplateBasicPageWithSidePanel.propTypes = props;
 export {
   DSTemplateBasicPageWithSidePanel,

package/dist/esm/TemplateBasicPageWithSidePanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\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\n    style={{ overflow: 'hidden', width: '100%' }}\n    height=\"100%\"\n    maxHeight=\"100%\"\n    rows={['auto', '1fr']}\n  >\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(\n    'Header for Slide Panel instance of SlidePanelHeader',\n  ),\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(\n  TemplateBasicPageWithSidePanel,\n);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,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;AAAA,EACC,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO;AAAA,EAC3C,QAAO;AAAA,EACP,WAAU;AAAA,EACV,MAAM,CAAC,QAAQ,KAAK;AAAA,EAEpB;AAAA,wBAAC;AAAA,MAAM;AAAA,KAAa;AAAA,IACpB,oBAAC;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC;AAAA,QAAK,OAAO,EAAE,UAAU,SAAS;AAAA,QAAG,QAAO;AAAA,QAAO,WAAU;AAAA,QAC3D,+BAAC;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;AAAA,cAAM;AAAA,aAAW;AAAA,YAClB,oBAAC;AAAA,cAAK,OAAO,EAAE,UAAU,SAAS;AAAA,cAChC,8BAAC;AAAA,gBAAK,OAAO,EAAE,UAAU,OAAO;AAAA,gBAAI;AAAA,eAAY;AAAA,aAClD;AAAA,YACC,cAAc,oBAAC;AAAA,cAAK,YAAW;AAAA,cAAU;AAAA,aAAW;AAAA;AAAA,SACvD;AAAA,OACF;AAAA,KACF;AAAA;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,UAAU,QAAQ;AAAA,IAC7B;AAAA,EACF;AAAA,EAIA,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,UAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,mCAAmC;AAAA,EACvC;AACF;AACA,iCAAiC,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\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;AAAA,EAAK,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO;AAAA,EAAG,QAAO;AAAA,EAAO,WAAU;AAAA,EAAO,MAAM,CAAC,QAAQ,KAAK;AAAA,EACrG;AAAA,wBAAC;AAAA,MAAM;AAAA,KAAa;AAAA,IACpB,oBAAC;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC;AAAA,QAAK,OAAO,EAAE,UAAU,SAAS;AAAA,QAAG,QAAO;AAAA,QAAO,WAAU;AAAA,QAC3D,+BAAC;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;AAAA,cAAM;AAAA,aAAW;AAAA,YAClB,oBAAC;AAAA,cAAK,OAAO,EAAE,UAAU,SAAS;AAAA,cAChC,8BAAC;AAAA,gBAAK,OAAO,EAAE,UAAU,OAAO;AAAA,gBAAI;AAAA,eAAY;AAAA,aAClD;AAAA,YACC,cAAc,oBAAC;AAAA,cAAK,YAAW;AAAA,cAAU;AAAA,aAAW;AAAA;AAAA,SACvD;AAAA,OACF;AAAA,KACF;AAAA;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAIhG,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;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/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { PropTypes, GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\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;ACCvB,SAAS,iBAAkD;AAoBpD,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,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PropTypes } from '@elliemae/ds-utilities';\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;ACGvB,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,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-side-panel",
-  "version": "3.11.1-rc.1",
+  "version": "3.12.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Side Panel",
   "files": [
@@ -55,11 +55,11 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.11.1-rc.1",
-    "@elliemae/ds-grid": "3.11.1-rc.1",
-    "@elliemae/ds-icons": "3.11.1-rc.1",
-    "@elliemae/ds-system": "3.11.1-rc.1",
-    "@elliemae/ds-utilities": "3.11.1-rc.1"
+    "@elliemae/ds-button": "3.12.0-next.1",
+    "@elliemae/ds-grid": "3.12.0-next.1",
+    "@elliemae/ds-icons": "3.12.0-next.1",
+    "@elliemae/ds-system": "3.12.0-next.1",
+    "@elliemae/ds-utilities": "3.12.0-next.1"
   },
   "devDependencies": {
     "styled-components": "~5.3.5"
@@ -78,8 +78,11 @@
     "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
     "test": "node ../../scripts/testing/test.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 && pnpm --filter {.}... dts",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
     "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
 }