@elliemae/ds-side-panel 3.16.0 → 3.16.1

package/dist/cjs/SidePanel.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -34,8 +38,8 @@ 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_ds_grid = require("@elliemae/ds-grid");
-var import_react_desc_prop_types = require("./react-desc-prop-types");
-var import_useDelayedOpen = require("./useDelayedOpen");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_useDelayedOpen = require("./useDelayedOpen.js");
 const Container = import_ds_system.styled.div`
   display: flex;
   height: 100%;

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';\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,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,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;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;",
+  "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.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,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/SidePanelHeader.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -86,9 +90,13 @@ const SidePanelHeader = ({ title = null, additionalAction = null, onClose = impo
   );
 };
 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;

package/dist/cjs/SidePanelHeader.js.map

@@ -2,6 +2,6 @@
   "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 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,8BAAoC;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,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;AAAA,YAAC,iBAAAC;AAAA,YAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,4CAAC,8BAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA;AAAA,UACd,GAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,kCAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,kCAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,kCAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA7BN,8BAAoC;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,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;AAAA,YAAC,iBAAAC;AAAA,YAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,4CAAC,8BAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA;AAAA,UACd,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", "DSButton"]
 }

package/dist/cjs/TemplateBasicPageWithSidePanel.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -32,7 +36,7 @@ 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_grid = require("@elliemae/ds-grid");
-var import_SidePanel = __toESM(require("./SidePanel"));
+var import_SidePanel = __toESM(require("./SidePanel.js"));
 const TemplateBasicPageWithSidePanel = ({
   globalHeader = null,
   mainHeader = null,
@@ -71,15 +75,45 @@ const TemplateBasicPageWithSidePanel = ({
   )
 ] });
 const props = {
+  /**
+   * Global Header
+   */
   globalHeader: import_ds_props_helpers.PropTypes.element.description("Global Header"),
+  /**
+   * Main Header
+   */
   mainHeader: import_ds_props_helpers.PropTypes.element.description("Main Header"),
+  /**
+   * Main content
+   */
   mainContent: import_ds_props_helpers.PropTypes.element.isRequired.description("Main content"),
+  /**
+   * Main Footer
+   */
   mainFooter: import_ds_props_helpers.PropTypes.element.description("Main Footer"),
+  /**
+   * Should show the slide panel or not
+   */
   isOpen: import_ds_props_helpers.PropTypes.bool.description("Should show the slide panel or not"),
+  /**
+   * Footer for Slide Panel
+   */
   panelFooter: import_ds_props_helpers.PropTypes.element.description("Footer for Slide Panel"),
+  /**
+   * Header for Slide Panel instance of SlidePanelHeader
+   */
   panelHeader: import_ds_props_helpers.PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
+  /**
+   * Content for Slide Panel
+   */
   panelContent: import_ds_props_helpers.PropTypes.element.description("Content for Slide Panel"),
+  /**
+   * Width of the panel open. eg: 300
+   */
   panelWidth: import_ds_props_helpers.PropTypes.number.description("Width of the panel open. eg: 300"),
+  /**
+   * Callback
+   */
   onClose: import_ds_props_helpers.PropTypes.func.description("callback")
 };
 TemplateBasicPageWithSidePanel.propTypes = props;

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-props-helpers';\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,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,EAIZ,cAAc,kCAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,kCAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,kCAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,kCAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,kCAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,kCAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,kCAAU,QAAQ,YAAY,qDAAqD;AAAA,EAIhG,cAAc,kCAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,kCAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,uCAAmC,kCAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
+  "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

@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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
 ));
@@ -29,8 +33,8 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./SidePanel"), module.exports);
-__reExport(src_exports, require("./SidePanelHeader"), module.exports);
-__reExport(src_exports, require("./TemplateBasicPageWithSidePanel"), module.exports);
-var import_SidePanel = __toESM(require("./SidePanel"));
+__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';\nexport * from './SidePanelHeader';\nexport * from './TemplateBasicPageWithSidePanel';\nexport { default } from './SidePanel';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,wBAAd;AACA,wBAAc,8BADd;AAEA,wBAAc,6CAFd;AAGA,uBAAwB;",
+  "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;",
   "names": []
 }

package/dist/cjs/package.json

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

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -39,11 +43,29 @@ const defaultProps = {
   withBoxShadow: false
 };
 const DSInputTextPropTypes = {
+  /**
+   * Main content
+   */
   children: import_ds_props_helpers.PropTypes.element.isRequired.description("Main content"),
+  /**
+   * Should show the slide panel or not
+   */
   isOpen: import_ds_props_helpers.PropTypes.bool.description("Should show the slide panel or not"),
+  /**
+   * Footer for Slide Panel
+   */
   footer: import_ds_props_helpers.PropTypes.element.description("Footer for Slide Panel"),
+  /**
+   * Header for Slide Panel instance of SlidePanelHeader
+   */
   header: import_ds_props_helpers.PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
+  /**
+   * Content for Slide Panel
+   */
   panelContent: import_ds_props_helpers.PropTypes.element.description("Content for Slide Panel"),
+  /**
+   * Width of the panel open. eg: 300
+   */
   panelWidth: import_ds_props_helpers.PropTypes.number.description("Width of the panel open. eg: 300"),
   widthWhenIsClosed: import_ds_props_helpers.PropTypes.number.description("Width of the panel closed. eg: 0"),
   panelContentOverflow: import_ds_props_helpers.PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),

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

@@ -2,6 +2,6 @@
   "version": 3,
   "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,EAIlC,UAAU,kCAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,kCAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,kCAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,kCAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,kCAAU,QAAQ,YAAY,yBAAyB;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;",
+  "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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/useDelayedOpen.js.map

@@ -2,6 +2,6 @@
   "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;",
+  "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": []
 }

package/dist/esm/SidePanel.js

@@ -3,8 +3,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
 import { styled, border } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSInputTextPropTypes, defaultProps } from "./react-desc-prop-types";
-import { useDelayedOpen } from "./useDelayedOpen";
+import { DSInputTextPropTypes, defaultProps } from "./react-desc-prop-types.js";
+import { useDelayedOpen } from "./useDelayedOpen.js";
 const Container = styled.div`
   display: flex;
   height: 100%;

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';\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;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;",
+  "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.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,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/SidePanelHeader.js

@@ -56,9 +56,13 @@ const SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop
   );
 };
 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;

package/dist/esm/SidePanelHeader.js.map

@@ -2,6 +2,6 @@
   "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 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,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;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,oBAAC,cAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA;AAAA,UACd,GAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;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;",
+  "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,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;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,oBAAC,cAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA;AAAA,UACd,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/esm/TemplateBasicPageWithSidePanel.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { Grid } from "@elliemae/ds-grid";
-import SidePanel from "./SidePanel";
+import SidePanel from "./SidePanel.js";
 const TemplateBasicPageWithSidePanel = ({
   globalHeader = null,
   mainHeader = null,
@@ -41,15 +41,45 @@ const TemplateBasicPageWithSidePanel = ({
   )
 ] });
 const props = {
+  /**
+   * Global Header
+   */
   globalHeader: PropTypes.element.description("Global Header"),
+  /**
+   * Main Header
+   */
   mainHeader: PropTypes.element.description("Main Header"),
+  /**
+   * Main content
+   */
   mainContent: PropTypes.element.isRequired.description("Main content"),
+  /**
+   * Main Footer
+   */
   mainFooter: PropTypes.element.description("Main Footer"),
+  /**
+   * Should show the slide panel or not
+   */
   isOpen: PropTypes.bool.description("Should show the slide panel or not"),
+  /**
+   * Footer for Slide Panel
+   */
   panelFooter: PropTypes.element.description("Footer for Slide Panel"),
+  /**
+   * Header for Slide Panel instance of SlidePanelHeader
+   */
   panelHeader: PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
+  /**
+   * Content for Slide Panel
+   */
   panelContent: PropTypes.element.description("Content for Slide Panel"),
+  /**
+   * Width of the panel open. eg: 300
+   */
   panelWidth: PropTypes.number.description("Width of the panel open. eg: 300"),
+  /**
+   * Callback
+   */
   onClose: PropTypes.func.description("callback")
 };
 TemplateBasicPageWithSidePanel.propTypes = props;

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-props-helpers';\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,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,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;",
+  "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,8 +1,8 @@
 import * as React from "react";
-export * from "./SidePanel";
-export * from "./SidePanelHeader";
-export * from "./TemplateBasicPageWithSidePanel";
-import { default as default2 } from "./SidePanel";
+export * from "./SidePanel.js";
+export * from "./SidePanelHeader.js";
+export * from "./TemplateBasicPageWithSidePanel.js";
+import { default as default2 } from "./SidePanel.js";
 export {
   default2 as default
 };

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';\nexport * from './SidePanelHeader';\nexport * from './TemplateBasicPageWithSidePanel';\nexport { default } from './SidePanel';\n"],
+  "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"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,WAAAA,gBAAe;",
   "names": ["default"]
 }

package/dist/esm/package.json

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

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

@@ -9,11 +9,29 @@ const defaultProps = {
   withBoxShadow: false
 };
 const DSInputTextPropTypes = {
+  /**
+   * Main content
+   */
   children: PropTypes.element.isRequired.description("Main content"),
+  /**
+   * Should show the slide panel or not
+   */
   isOpen: PropTypes.bool.description("Should show the slide panel or not"),
+  /**
+   * Footer for Slide Panel
+   */
   footer: PropTypes.element.description("Footer for Slide Panel"),
+  /**
+   * Header for Slide Panel instance of SlidePanelHeader
+   */
   header: PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
+  /**
+   * Content for Slide Panel
+   */
   panelContent: PropTypes.element.description("Content for Slide Panel"),
+  /**
+   * Width of the panel open. eg: 300
+   */
   panelWidth: PropTypes.number.description("Width of the panel open. eg: 300"),
   widthWhenIsClosed: PropTypes.number.description("Width of the panel closed. eg: 0"),
   panelContentOverflow: PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),

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

@@ -2,6 +2,6 @@
   "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 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,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;",
+  "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/types/SidePanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { DSSidePanelT } from './react-desc-prop-types';
+import type { DSSidePanelT } from './react-desc-prop-types.js';
 declare const SidePanel: React.ComponentType<DSSidePanelT.Props>;
-declare const DSSidePanelWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSSidePanelT.Props>;
+declare const DSSidePanelWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSSidePanelT.Props>;
 export { SidePanel, DSSidePanelWithSchema };
 export default SidePanel;

package/dist/types/SidePanelHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const SidePanelHeader: {
     ({ title, additionalAction, onClose, showClose }: {
         title?: null | undefined;

package/dist/types/TemplateBasicPageWithSidePanel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const TemplateBasicPageWithSidePanel: {
     ({ globalHeader, mainHeader, mainContent, mainFooter, isOpen, onClose, panelFooter, panelHeader, panelContent, panelWidth, }: {
         globalHeader?: null | undefined;
@@ -15,47 +16,47 @@ declare const TemplateBasicPageWithSidePanel: {
         /**
          * Global Header
          */
-        globalHeader: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        globalHeader: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Main Header
          */
-        mainHeader: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        mainHeader: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Main content
          */
-        mainContent: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        mainContent: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Main Footer
          */
-        mainFooter: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        mainFooter: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Should show the slide panel or not
          */
-        isOpen: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        isOpen: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Footer for Slide Panel
          */
-        panelFooter: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        panelFooter: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Header for Slide Panel instance of SlidePanelHeader
          */
-        panelHeader: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        panelHeader: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Content for Slide Panel
          */
-        panelContent: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        panelContent: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Width of the panel open. eg: 300
          */
-        panelWidth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        panelWidth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
         /**
          * Callback
          */
-        onClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+        onClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
     displayName: string;
 };
-declare const DSTemplateBasicPageWithSidePanel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
+declare const DSTemplateBasicPageWithSidePanel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
     globalHeader?: null | undefined;
     mainHeader?: null | undefined;
     mainContent: any;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export * from './SidePanel';
-export * from './SidePanelHeader';
-export * from './TemplateBasicPageWithSidePanel';
-export { default } from './SidePanel';
+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.16.0",
+  "version": "3.16.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Side Panel",
   "files": [
@@ -55,15 +55,15 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.16.0",
-    "@elliemae/ds-grid": "3.16.0",
-    "@elliemae/ds-icons": "3.16.0",
-    "@elliemae/ds-props-helpers": "3.16.0",
-    "@elliemae/ds-system": "3.16.0",
-    "@elliemae/ds-utilities": "3.16.0"
+    "@elliemae/ds-button": "3.16.1",
+    "@elliemae/ds-grid": "3.16.1",
+    "@elliemae/ds-props-helpers": "3.16.1",
+    "@elliemae/ds-icons": "3.16.1",
+    "@elliemae/ds-system": "3.16.1",
+    "@elliemae/ds-utilities": "3.16.1"
   },
   "devDependencies": {
-    "styled-components": "~5.3.6"
+    "styled-components": "~5.3.9"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",