@elliemae/ds-side-panel 3.0.0-next.2 → 3.0.0-next.6

package/dist/cjs/SidePanel.js

@@ -0,0 +1,111 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var SidePanel_exports = {};
+__export(SidePanel_exports, {
+  DSSidePanelWithSchema: () => DSSidePanelWithSchema,
+  SidePanel: () => SidePanel,
+  default: () => SidePanel_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_props = require("./props");
+var import_defaultProps = require("./defaultProps");
+const Container = import_styled_components.default.div`
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  max-height: 100%;
+  overflow: hidden;
+  ${({ noGridInfluencer }) => noGridInfluencer ? "position: relative;" : ""}
+`;
+const TransGrid = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  box-shadow: ${(props) => props.withBoxShadow ? "0 2px 5px 0 rgba(53, 60, 70, 0.5)" : "none"};
+  transition: 300ms;
+  border-left: ${(props) => props.withBorder ? (0, import_ds_system.border)(props.theme.colors.neutral["300"], "1px") : "none"};
+  ${({ noGridInfluencer }) => noGridInfluencer ? `
+   position: absolute;
+   top:0;
+   right:0;
+   height: 100%;
+   ` : ""}
+  background: ${(props) => props.theme.colors.neutral["000"]};
+`;
+const FooterContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
+`;
+const SidePanel = ({
+  children,
+  isOpen,
+  footer,
+  header,
+  panelContent,
+  panelWidth,
+  panelContentOverflow,
+  widthWhenIsClosed,
+  noGridInfluencer,
+  withBorder = true,
+  withBoxShadow = false
+}) => /* @__PURE__ */ import_react.default.createElement(Container, {
+  noGridInfluencer
+}, /* @__PURE__ */ import_react.default.createElement(TransGrid, {
+  height: "100%",
+  flex: "1",
+  mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0
+}, children), /* @__PURE__ */ import_react.default.createElement(TransGrid, {
+  style: { overflow: "hidden" },
+  height: "100%",
+  maxHeight: "100%",
+  width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
+  withBorder,
+  withBoxShadow,
+  isOpen,
+  cols: [1],
+  noGridInfluencer
+}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
+  style: { overflow: "hidden" }
+}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, header), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  style: { overflow: "hidden" }
+}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  style: { overflow: panelContentOverflow }
+}, panelContent)), footer ? /* @__PURE__ */ import_react.default.createElement(FooterContainer, {
+  alignItems: "center",
+  pl: "xs",
+  pr: "xs"
+}, footer) : null)));
+SidePanel.propTypes = import_props.props;
+SidePanel.defaultProps = import_defaultProps.defaultProps;
+const DSSidePanelWithSchema = (0, import_react_desc.describe)(SidePanel);
+DSSidePanelWithSchema.propTypes = import_props.props;
+var SidePanel_default = SidePanel;
+module.exports = __toCommonJS(SidePanel_exports);
+//# sourceMappingURL=SidePanel.js.map

package/dist/cjs/SidePanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as spprops } from './props';\nimport { defaultProps } from './defaultProps';\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)`\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 }) =>\n    noGridInfluencer\n      ? `\n   position: absolute;\n   top:0;\n   right: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 = ({\n  children,\n  isOpen,\n  footer,\n  header,\n  panelContent,\n  panelWidth,\n  panelContentOverflow,\n  widthWhenIsClosed,\n  noGridInfluencer,\n  withBorder = true,\n  withBoxShadow = false,\n}): React.ReactElement => (\n  <Container noGridInfluencer={noGridInfluencer}>\n    <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n      {children}\n    </TransGrid>\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    >\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        <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      </Grid>\n    </TransGrid>\n  </Container>\n);\n\nSidePanel.propTypes = spprops;\nSidePanel.defaultProps = defaultProps;\n\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = spprops;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAyB;AACzB,+BAAmB;AACnB,uBAAuB;AACvB,qBAAqB;AACrB,mBAAiC;AACjC,0BAA6B;AAE7B,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,uBAAwB,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,sCAAO;AAAA,gBACT,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,6BAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,SAAS;AAAA,IAC/F,CAAC,EAAE,uBACH,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,OAMA;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,kBAAkB,sCAAO;AAAA,gBACf,CAAC,UAAU,6BAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG7D,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,MAEhB,mDAAC,WAAD;AAAA,EAAW;AAAA,GACT,mDAAC,WAAD;AAAA,EAAW,QAAO;AAAA,EAAO,MAAK;AAAA,EAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,GACjF,WAEH,mDAAC,WAAD;AAAA,EACE,OAAO,EAAE,UAAU;AAAA,EACnB,QAAO;AAAA,EACP,WAAU;AAAA,EACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM,CAAC;AAAA,EACP;AAAA,GAEA,mDAAC,qBAAD;AAAA,EACE,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,UAAU,CAAC,SAAS,SAAS,OAAO;AAAA,EAE7F,OAAO,EAAE,UAAU;AAAA,GAEnB,mDAAC,qBAAD,MAAO,SACP,mDAAC,qBAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GACvB,mDAAC,qBAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GAAyB,gBAEnD,SACC,mDAAC,iBAAD;AAAA,EAAiB,YAAW;AAAA,EAAS,IAAG;AAAA,EAAK,IAAG;AAAA,GAC7C,UAED;AAMZ,UAAU,YAAY;AACtB,UAAU,eAAe;AAEzB,MAAM,wBAAwB,gCAAS;AACvC,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
+  "names": []
+}

package/dist/cjs/SidePanelHeader.js

@@ -0,0 +1,109 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var SidePanelHeader_exports = {};
+__export(SidePanelHeader_exports, {
+  DSSidePanelHeaderWithSchema: () => DSSidePanelHeaderWithSchema,
+  SidePanelHeader: () => SidePanelHeader
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_styled_components = __toESM(require("styled-components"));
+var import_lodash = require("lodash");
+var import_ds_system = 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");
+const StyledSeparator = import_styled_components.default.div`
+  width: 0;
+  height: 100%;
+  margin: 0 ${(props2) => props2.theme.space.xxs};
+  border-left: ${(props2) => `${props2.theme.colors.neutral[300]} 1px solid`};
+`;
+const StyledTitle = import_styled_components.default.div`
+  font-size: 18px;
+  font-weight: ${(props2) => props2.theme.fontWeights.regular};
+  color: ${(props2) => props2.theme.colors.neutral["700"]};
+  ${(0, import_ds_system.truncate)()}
+`;
+const Wrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  border-bottom: ${(props2) => (0, import_ds_system.border)(props2.theme.colors.neutral["300"])};
+`;
+const SidePanelHeader = ({ title = null, additionalAction = null, onClose = import_lodash.noop, showClose = true }) => {
+  const theme = (0, import_ds_system.useTheme)();
+  const separator = /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    height: "24px"
+  }, /* @__PURE__ */ import_react.default.createElement(StyledSeparator, null));
+  const cols = [1, "auto", "auto"];
+  const cols2 = ["auto"];
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, {
+    cols,
+    height: theme.space.m,
+    pl: theme.space.xs,
+    pr: theme.space.xs,
+    alignItems: "center",
+    width: "100%"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    alignItems: "center",
+    justifyContent: "flex-start",
+    cols: cols2
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: [1],
+    alignItems: "center",
+    pr: theme.space.xs
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    flexGrow: 0
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: ["auto", "auto"],
+    alignItems: "center"
+  }, /* @__PURE__ */ import_react.default.createElement(StyledTitle, {
+    maxWidth: "100%",
+    alignItems: "center"
+  }, title))))), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    ml: "xxs",
+    alignItems: "center",
+    cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"]
+  }, additionalAction && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, additionalAction), additionalAction && showClose && separator, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, showClose && /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
+    buttonType: "text",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseSmall, null),
+    size: "m",
+    onClick: onClose,
+    "data-testid": "btn-close-slide-panel"
+  }))));
+};
+const props = {
+  title: import_react_desc.PropTypes.string.description("Page title"),
+  additionalAction: import_react_desc.PropTypes.element.description("Action button"),
+  onClose: import_react_desc.PropTypes.func.description("Called when the slide collapse"),
+  showClose: import_react_desc.PropTypes.bool.description("Show/Hide close button")
+};
+SidePanelHeader.propTypes = props;
+const DSSidePanelHeaderWithSchema = (0, import_react_desc.describe)(SidePanelHeader);
+DSSidePanelHeaderWithSchema.propTypes = props;
+module.exports = __toCommonJS(SidePanelHeader_exports);
+//# sourceMappingURL=SidePanelHeader.js.map

package/dist/cjs/SidePanelHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SidePanelHeader.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport styled from 'styled-components';\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 cols={[1]} alignItems=\"center\" pr={theme.space.xs}>\n          <Grid flexGrow={0}>\n            <Grid cols={['auto', 'auto']} 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;\n\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;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,+BAAmB;AACnB,oBAAqB;AACrB,uBAA2C;AAC3C,sBAA2B;AAC3B,uBAAqB;AACrB,qBAAqB;AAErB,MAAM,kBAAkB,iCAAO;AAAA;AAAA;AAAA,cAGjB,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,WAAU,GAAG,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,iCAAO;AAAA;AAAA,iBAEV,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,WACzC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C;AAAA;AAGJ,MAAM,UAAU,sCAAO;AAAA,mBACJ,CAAC,WAAU,6BAAO,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGhE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,WAAW;AACvG,QAAM,QAAQ;AACd,QAAM,YACJ,mDAAC,qBAAD;AAAA,IAAM,QAAO;AAAA,KACX,mDAAC,iBAAD;AAGJ,QAAM,OAAO,CAAC,GAAG,QAAQ;AACzB,QAAM,QAAQ,CAAC;AACf,SACE,mDAAC,SAAD;AAAA,IACE;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,KAEN,mDAAC,qBAAD;AAAA,IAAM,YAAW;AAAA,IAAS,gBAAe;AAAA,IAAa,MAAM;AAAA,KAC1D,mDAAC,qBAAD;AAAA,IAAM,MAAM,CAAC;AAAA,IAAI,YAAW;AAAA,IAAS,IAAI,MAAM,MAAM;AAAA,KACnD,mDAAC,qBAAD;AAAA,IAAM,UAAU;AAAA,KACd,mDAAC,qBAAD;AAAA,IAAM,MAAM,CAAC,QAAQ;AAAA,IAAS,YAAW;AAAA,KACvC,mDAAC,aAAD;AAAA,IAAa,UAAS;AAAA,IAAO,YAAW;AAAA,KACrC,YAMX,mDAAC,qBAAD;AAAA,IAAM,IAAG;AAAA,IAAM,YAAW;AAAA,IAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,UAAU,CAAC;AAAA,KACrF,oBAAoB,mDAAC,qBAAD,MAAO,mBAC3B,oBAAoB,aAAa,WAClC,mDAAC,qBAAD,MACG,aACC,mDAAC,0BAAD;AAAA,IACE,YAAW;AAAA,IACX,MAAM,mDAAC,4BAAD;AAAA,IACN,MAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAY;AAAA;AAAA;AAS1B,MAAM,QAAQ;AAAA,EAEZ,OAAO,4BAAU,OAAO,YAAY;AAAA,EAGpC,kBAAkB,4BAAU,QAAQ,YAAY;AAAA,EAGhD,SAAS,4BAAU,KAAK,YAAY;AAAA,EAGpC,WAAW,4BAAU,KAAK,YAAY;AAAA;AAGxC,gBAAgB,YAAY;AAE5B,MAAM,8BAA8B,gCAAS;AAE7C,4BAA4B,YAAY;",
+  "names": []
+}

package/dist/cjs/TemplateBasicPageWithSidePanel.js

@@ -0,0 +1,91 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var TemplateBasicPageWithSidePanel_exports = {};
+__export(TemplateBasicPageWithSidePanel_exports, {
+  DSTemplateBasicPageWithSidePanel: () => DSTemplateBasicPageWithSidePanel,
+  TemplateBasicPageWithSidePanel: () => TemplateBasicPageWithSidePanel
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_SidePanel = __toESM(require("./SidePanel"));
+const TemplateBasicPageWithSidePanel = ({
+  globalHeader = null,
+  mainHeader = null,
+  mainContent,
+  mainFooter,
+  isOpen = false,
+  onClose,
+  panelFooter,
+  panelHeader,
+  panelContent,
+  panelWidth
+}) => /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  style: { overflow: "hidden", width: "100%" },
+  height: "100%",
+  maxHeight: "100%",
+  rows: ["auto", "1fr"]
+}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, globalHeader), /* @__PURE__ */ import_react.default.createElement(import_SidePanel.default, {
+  footer: panelFooter,
+  header: panelHeader,
+  panelWidth,
+  onClose,
+  panelContent,
+  isOpen
+}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  style: { overflow: "hidden" },
+  height: "100%",
+  maxHeight: "100%"
+}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  rows: mainFooter ? [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)", "48px"] : [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)"],
+  style: { overflow: "hidden" }
+}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null, mainHeader), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  style: { overflow: "hidden" }
+}, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  style: { overflow: "auto" }
+}, mainContent)), mainFooter && /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  alignItems: "center"
+}, mainFooter)))));
+const props = {
+  globalHeader: import_react_desc.PropTypes.element.description("Global Header"),
+  mainHeader: import_react_desc.PropTypes.element.description("Main Header"),
+  mainContent: import_react_desc.PropTypes.element.isRequired.description("Main content"),
+  mainFooter: import_react_desc.PropTypes.element.description("Main Footer"),
+  isOpen: import_react_desc.PropTypes.bool.description("Should show the slide panel or not"),
+  panelFooter: import_react_desc.PropTypes.element.description("Footer for Slide Panel"),
+  panelHeader: import_react_desc.PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
+  panelContent: import_react_desc.PropTypes.element.description("Content for Slide Panel"),
+  panelWidth: import_react_desc.PropTypes.number.description("Width of the panel open. eg: 300"),
+  onClose: import_react_desc.PropTypes.func.description("callback")
+};
+TemplateBasicPageWithSidePanel.propTypes = props;
+const DSTemplateBasicPageWithSidePanel = (0, import_react_desc.describe)(TemplateBasicPageWithSidePanel);
+DSTemplateBasicPageWithSidePanel.propTypes = props;
+module.exports = __toCommonJS(TemplateBasicPageWithSidePanel_exports);
+//# sourceMappingURL=TemplateBasicPageWithSidePanel.js.map

package/dist/cjs/TemplateBasicPageWithSidePanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TemplateBasicPageWithSidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\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;\n\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;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;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;AAAA,MAEA,mDAAC,qBAAD;AAAA,EACE,OAAO,EAAE,UAAU,UAAU,OAAO;AAAA,EACpC,QAAO;AAAA,EACP,WAAU;AAAA,EACV,MAAM,CAAC,QAAQ;AAAA,GAEf,mDAAC,qBAAD,MAAO,eACP,mDAAC,0BAAD;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEA,mDAAC,qBAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,EAAY,QAAO;AAAA,EAAO,WAAU;AAAA,GAC3D,mDAAC,qBAAD;AAAA,EACE,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,UAClD,CAAC,aAAa,SAAS,OAAO;AAAA,EAEpC,OAAO,EAAE,UAAU;AAAA,GAEnB,mDAAC,qBAAD,MAAO,aACP,mDAAC,qBAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GACvB,mDAAC,qBAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GAAW,eAErC,cAAc,mDAAC,qBAAD;AAAA,EAAM,YAAW;AAAA,GAAU;AAOpD,MAAM,QAAQ;AAAA,EAIZ,cAAc,4BAAU,QAAQ,YAAY;AAAA,EAI5C,YAAY,4BAAU,QAAQ,YAAY;AAAA,EAI1C,aAAa,4BAAU,QAAQ,WAAW,YAAY;AAAA,EAItD,YAAY,4BAAU,QAAQ,YAAY;AAAA,EAI1C,QAAQ,4BAAU,KAAK,YAAY;AAAA,EAInC,aAAa,4BAAU,QAAQ,YAAY;AAAA,EAI3C,aAAa,4BAAU,QAAQ,YAC7B;AAAA,EAKF,cAAc,4BAAU,QAAQ,YAAY;AAAA,EAI5C,YAAY,4BAAU,OAAO,YAAY;AAAA,EAIzC,SAAS,4BAAU,KAAK,YAAY;AAAA;AAGtC,+BAA+B,YAAY;AAE3C,MAAM,mCAAmC,gCACvC;AAEF,iCAAiC,YAAY;",
+  "names": []
+}

package/dist/cjs/defaultProps.js

@@ -0,0 +1,42 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var defaultProps_exports = {};
+__export(defaultProps_exports, {
+  defaultProps: () => defaultProps
+});
+var React = __toESM(require("react"));
+const defaultProps = {
+  isOpen: false,
+  panelWidth: 300,
+  widthWhenIsClosed: 0,
+  panelContentOverflow: "auto",
+  withBorder: true,
+  withBoxShadow: false
+};
+module.exports = __toCommonJS(defaultProps_exports);
+//# sourceMappingURL=defaultProps.js.map

package/dist/cjs/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const defaultProps = {\n  isOpen: false,\n  panelWidth: 300,\n  widthWhenIsClosed: 0,\n  panelContentOverflow: 'auto',\n  withBorder: true,\n  withBoxShadow: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AAAA;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,38 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  default: () => import_SidePanel.default
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, require("./SidePanel"));
+__reExport(src_exports, require("./SidePanelHeader"));
+__reExport(src_exports, require("./TemplateBasicPageWithSidePanel"));
+var import_SidePanel = __toESM(require("./SidePanel"));
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +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;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,uBAAwB;",
+  "names": []
+}

package/dist/cjs/props.js

@@ -0,0 +1,48 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var props_exports = {};
+__export(props_exports, {
+  props: () => props
+});
+var React = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+const props = {
+  children: import_react_desc.PropTypes.element.isRequired.description("Main content"),
+  isOpen: import_react_desc.PropTypes.bool.description("Should show the slide panel or not"),
+  footer: import_react_desc.PropTypes.element.description("Footer for Slide Panel"),
+  header: import_react_desc.PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
+  panelContent: import_react_desc.PropTypes.element.description("Content for Slide Panel"),
+  panelWidth: import_react_desc.PropTypes.number.description("Width of the panel open. eg: 300"),
+  widthWhenIsClosed: import_react_desc.PropTypes.number.description("Width of the panel closed. eg: 0"),
+  panelContentOverflow: import_react_desc.PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),
+  withBorder: import_react_desc.PropTypes.bool.description("Whether the sidepanel has border or not"),
+  withBoxShadow: import_react_desc.PropTypes.bool.description("Whether the sidepanel has box shadow or not"),
+  noGridInfluencer: import_react_desc.PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
+};
+module.exports = __toCommonJS(props_exports);
+//# sourceMappingURL=props.js.map

package/dist/cjs/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const props = {\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};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,QAAQ;AAAA,EAInB,UAAU,4BAAU,QAAQ,WAAW,YAAY;AAAA,EAInD,QAAQ,4BAAU,KAAK,YAAY;AAAA,EAInC,QAAQ,4BAAU,QAAQ,YAAY;AAAA,EAItC,QAAQ,4BAAU,QAAQ,YAAY;AAAA,EAItC,cAAc,4BAAU,QAAQ,YAAY;AAAA,EAI5C,YAAY,4BAAU,OAAO,YAAY;AAAA,EAEzC,mBAAmB,4BAAU,OAAO,YAAY;AAAA,EAChD,sBAAsB,4BAAU,MAAM,CAAC,QAAQ,WAAW,YAAY;AAAA,EACtE,YAAY,4BAAU,KAAK,YAAY;AAAA,EACvC,eAAe,4BAAU,KAAK,YAAY;AAAA,EAC1C,kBAAkB,4BAAU,KAAK,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/SidePanel.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import React2 from "react";
+import { describe } from "react-desc";
+import styled from "styled-components";
+import { border } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { props as spprops } from "./props";
+import { defaultProps } from "./defaultProps";
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  max-height: 100%;
+  overflow: hidden;
+  ${({ noGridInfluencer }) => noGridInfluencer ? "position: relative;" : ""}
+`;
+const TransGrid = styled(Grid)`
+  box-shadow: ${(props) => props.withBoxShadow ? "0 2px 5px 0 rgba(53, 60, 70, 0.5)" : "none"};
+  transition: 300ms;
+  border-left: ${(props) => props.withBorder ? border(props.theme.colors.neutral["300"], "1px") : "none"};
+  ${({ noGridInfluencer }) => noGridInfluencer ? `
+   position: absolute;
+   top:0;
+   right:0;
+   height: 100%;
+   ` : ""}
+  background: ${(props) => props.theme.colors.neutral["000"]};
+`;
+const FooterContainer = styled(Grid)`
+  border-top: ${(props) => border(props.theme.colors.neutral["300"])};
+`;
+const SidePanel = ({
+  children,
+  isOpen,
+  footer,
+  header,
+  panelContent,
+  panelWidth,
+  panelContentOverflow,
+  widthWhenIsClosed,
+  noGridInfluencer,
+  withBorder = true,
+  withBoxShadow = false
+}) => /* @__PURE__ */ React2.createElement(Container, {
+  noGridInfluencer
+}, /* @__PURE__ */ React2.createElement(TransGrid, {
+  height: "100%",
+  flex: "1",
+  mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0
+}, children), /* @__PURE__ */ React2.createElement(TransGrid, {
+  style: { overflow: "hidden" },
+  height: "100%",
+  maxHeight: "100%",
+  width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
+  withBorder,
+  withBoxShadow,
+  isOpen,
+  cols: [1],
+  noGridInfluencer
+}, /* @__PURE__ */ React2.createElement(Grid, {
+  rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
+  style: { overflow: "hidden" }
+}, /* @__PURE__ */ React2.createElement(Grid, null, header), /* @__PURE__ */ React2.createElement(Grid, {
+  style: { overflow: "hidden" }
+}, /* @__PURE__ */ React2.createElement(Grid, {
+  style: { overflow: panelContentOverflow }
+}, panelContent)), footer ? /* @__PURE__ */ React2.createElement(FooterContainer, {
+  alignItems: "center",
+  pl: "xs",
+  pr: "xs"
+}, footer) : null)));
+SidePanel.propTypes = spprops;
+SidePanel.defaultProps = defaultProps;
+const DSSidePanelWithSchema = describe(SidePanel);
+DSSidePanelWithSchema.propTypes = spprops;
+var SidePanel_default = SidePanel;
+export {
+  DSSidePanelWithSchema,
+  SidePanel,
+  SidePanel_default as default
+};
+//# sourceMappingURL=SidePanel.js.map

package/dist/esm/SidePanel.js.map

@@ -0,0 +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 'react-desc';\nimport styled from 'styled-components';\nimport { border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as spprops } from './props';\nimport { defaultProps } from './defaultProps';\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)`\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 }) =>\n    noGridInfluencer\n      ? `\n   position: absolute;\n   top:0;\n   right: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 = ({\n  children,\n  isOpen,\n  footer,\n  header,\n  panelContent,\n  panelWidth,\n  panelContentOverflow,\n  widthWhenIsClosed,\n  noGridInfluencer,\n  withBorder = true,\n  withBoxShadow = false,\n}): React.ReactElement => (\n  <Container noGridInfluencer={noGridInfluencer}>\n    <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n      {children}\n    </TransGrid>\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    >\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        <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      </Grid>\n    </TransGrid>\n  </Container>\n);\n\nSidePanel.propTypes = spprops;\nSidePanel.defaultProps = defaultProps;\n\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = spprops;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,uBAAwB,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,OAAO;AAAA,gBACT,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,SAAS;AAAA,IAC/F,CAAC,EAAE,uBACH,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,OAMA;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,kBAAkB,OAAO;AAAA,gBACf,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG7D,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,MAEhB,qCAAC,WAAD;AAAA,EAAW;AAAA,GACT,qCAAC,WAAD;AAAA,EAAW,QAAO;AAAA,EAAO,MAAK;AAAA,EAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,GACjF,WAEH,qCAAC,WAAD;AAAA,EACE,OAAO,EAAE,UAAU;AAAA,EACnB,QAAO;AAAA,EACP,WAAU;AAAA,EACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM,CAAC;AAAA,EACP;AAAA,GAEA,qCAAC,MAAD;AAAA,EACE,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,UAAU,CAAC,SAAS,SAAS,OAAO;AAAA,EAE7F,OAAO,EAAE,UAAU;AAAA,GAEnB,qCAAC,MAAD,MAAO,SACP,qCAAC,MAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GACvB,qCAAC,MAAD;AAAA,EAAM,OAAO,EAAE,UAAU;AAAA,GAAyB,gBAEnD,SACC,qCAAC,iBAAD;AAAA,EAAiB,YAAW;AAAA,EAAS,IAAG;AAAA,EAAK,IAAG;AAAA,GAC7C,UAED;AAMZ,UAAU,YAAY;AACtB,UAAU,eAAe;AAEzB,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
+  "names": []
+}