@elliemae/ds-modal-slide 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/DSModalSlide.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var ReactDOM = require('react-dom');
 var dsSystem = require('@elliemae/ds-system');
-var Grid = require('@elliemae/ds-basic/Grid');
-var DSSeparator = require('@elliemae/ds-basic/Separator');
+var dsGrid = require('@elliemae/ds-grid');
+var DSSeparator = require('@elliemae/ds-separator');
 var blocks = require('./components/blocks.js');
 var Header = require('./components/Header.js');
 var Footer = require('./components/Footer.js');
@@ -22,18 +23,19 @@ var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
 
 var _DSSeparator, _DSSeparator2;
 
-const DSModalSlide = ({
-  isOpen = false,
-  children,
-  getContainer,
-  centered = false,
-  fullWidth = false,
-  header = null,
-  footer = null,
-  fadeOut = 1500,
-  fadeIn = 1500,
-  overrideHeight = false
-}) => {
+const DSModalSlide = _ref => {
+  let {
+    isOpen = false,
+    children,
+    getContainer,
+    centered = false,
+    fullWidth = false,
+    header = null,
+    footer = null,
+    fadeOut = 1500,
+    fadeIn = 1500,
+    overrideHeight = false
+  } = _ref;
   const [isMoving, setMoving] = React.useState(false);
   const [show, setShow] = React.useState(isOpen);
   const [width, setWidth] = React.useState(50);
@@ -72,7 +74,7 @@ const DSModalSlide = ({
     container.style.position = 'relative';
   }
 
-  return /*#__PURE__*/ReactDOM__default['default'].createPortal( /*#__PURE__*/_jsx__default['default'](blocks.Wrapper, {
+  return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](blocks.Wrapper, {
     classProps: {
       show: isOpen,
       centered
@@ -83,16 +85,16 @@ const DSModalSlide = ({
       '--fade-out': fadeOut,
       '--width': width
     }
-  }, void 0, /*#__PURE__*/_jsx__default['default'](blocks.Overlay, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Overlay, {
     classProps: {
       show: isOpen
     }
-  }, void 0, /*#__PURE__*/_jsx__default['default'](blocks.Content, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Content, {
     onAnimationEnd: handleAnimationEnd,
     classProps: {
       show: isOpen
     }
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
       height: '100%',
       width: '100%',
@@ -104,20 +106,20 @@ const DSModalSlide = ({
     },
     rows: contentRows,
     "data-testid": "ds-modal-slide"
-  }, void 0, header && /*#__PURE__*/React__default['default'].cloneElement(header, {
+  }, void 0, header && /*#__PURE__*/React__default["default"].cloneElement(header, {
     fullWidth
-  }), header && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default['default'](DSSeparator__default['default'], {
+  }), header && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
     position: "initial",
     type: "non-form"
-  }))), /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+  }))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
       overflow: 'hidden'
     }
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
       overflow: 'auto'
     }
-  }, void 0, /*#__PURE__*/_jsx__default['default'](blocks.ActualContent, {}, void 0, children))), footer && (_DSSeparator2 || (_DSSeparator2 = /*#__PURE__*/_jsx__default['default'](DSSeparator__default['default'], {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](blocks.ActualContent, {}, void 0, children))), footer && (_DSSeparator2 || (_DSSeparator2 = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
     position: "initial",
     type: "non-form"
   }))), footer)))), container);
@@ -167,8 +169,8 @@ const props = {
 const DSModalSlideWithSchema = reactDesc.describe(DSModalSlide);
 DSModalSlideWithSchema.propTypes = props;
 
-exports.ModalHeader = Header['default'];
-exports.ModalFooter = Footer['default'];
+exports.ModalHeader = Header["default"];
+exports.ModalFooter = Footer["default"];
 exports.DSModalSlide = DSModalSlide;
 exports.DSModalSlideWithSchema = DSModalSlideWithSchema;
-exports['default'] = DSModalSlide;
+exports["default"] = DSModalSlide;

package/cjs/components/Footer.js

@@ -2,11 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var reactDesc = require('react-desc');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSButton = require('@elliemae/ds-button');
 var blocks = require('./blocks.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -18,38 +23,41 @@ var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const ModalFooter = ({
-  confirmLabel = 'Confirm',
-  rejectLabel = 'Cancel',
-  onConfirm,
-  onReject,
-  confirmProps = {
-    disabled: false
-  },
-  rejectProps = {
-    disabled: false
-  }
-}) => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-  children: /*#__PURE__*/_jsx__default['default'](blocks.FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsxRuntime.jsx(DSButton__default['default'], _objectSpread({
-    buttonType: "secondary",
-    className: "action-reject",
-    containerProps: {
-      'data-testid': 'modal-footer-reject-btn'
+const ModalFooter = _ref => {
+  let {
+    confirmLabel = 'Confirm',
+    rejectLabel = 'Cancel',
+    onConfirm,
+    onReject,
+    confirmProps = {
+      disabled: false
     },
-    labelText: rejectLabel,
-    onClick: onReject
-  }, rejectProps)), !!onConfirm && /*#__PURE__*/jsxRuntime.jsx(DSButton__default['default'], _objectSpread({
-    buttonType: "primary",
-    className: "action-confirm",
-    containerProps: {
-      'data-testid': 'modal-footer-confirm-btn'
-    },
-    labelText: confirmLabel,
-    onClick: onConfirm
-  }, confirmProps)))
-});
+    rejectProps = {
+      disabled: false
+    }
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_jsx__default["default"](blocks.FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+      buttonType: "secondary",
+      className: "action-reject",
+      containerProps: {
+        'data-testid': 'modal-footer-reject-btn'
+      },
+      labelText: rejectLabel,
+      onClick: onReject
+    }, rejectProps)), !!onConfirm && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+      buttonType: "primary",
+      className: "action-confirm",
+      containerProps: {
+        'data-testid': 'modal-footer-confirm-btn'
+      },
+      labelText: confirmLabel,
+      onClick: onConfirm
+    }, confirmProps)))
+  });
+};
 
 const props = {
   /**
@@ -90,4 +98,4 @@ const DSModalSlideFooterWithSchema = reactDesc.describe(ModalFooter);
 DSModalSlideFooterWithSchema.propTypes = props;
 
 exports.DSModalSlideFooterWithSchema = DSModalSlideFooterWithSchema;
-exports['default'] = ModalFooter;
+exports["default"] = ModalFooter;

package/cjs/components/Header.js

@@ -6,9 +6,9 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
-var DSSeparator = require('@elliemae/ds-basic/Separator');
-var Close = require('@elliemae/ds-icons/Close');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSSeparator = require('@elliemae/ds-separator');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
 var blocks = require('./blocks.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,38 +16,40 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
-var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 var _StyledSeparator, _Close;
 
-const ModalHeader = ({
-  title: headerTitle = '',
-  onClose = () => null,
-  toolbar = null
-}) => /*#__PURE__*/_jsx__default['default'](HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx__default['default'](blocks.HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx__default['default'](blocks.Header, {}, void 0, /*#__PURE__*/_jsx__default['default'](blocks.Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default['default'](StyledSeparator, {
-  position: "initial",
-  margin: "none",
-  orientation: "vertical",
-  type: "non-form"
-}))), /*#__PURE__*/_jsx__default['default'](StyledCloseButton, {
-  "data-testid": "modal-slider-header-close",
-  "aria-label": "Close modal slide",
-  buttonType: "text",
-  icon: _Close || (_Close = /*#__PURE__*/_jsx__default['default'](Close__default['default'], {
+const ModalHeader = _ref => {
+  let {
+    title: headerTitle = '',
+    onClose = () => null,
+    toolbar = null
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](StyledSeparator, {
+    position: "initial",
+    margin: "none",
+    orientation: "vertical",
+    type: "non-form"
+  }))), /*#__PURE__*/_jsx__default["default"](StyledCloseButton, {
+    "data-testid": "modal-slider-header-close",
     "aria-label": "Close modal slide",
-    size: "s"
-  })),
-  onClick: onClose
-}));
+    buttonType: "text",
+    icon: _Close || (_Close = /*#__PURE__*/_jsx__default["default"](dsIcons.Close, {
+      "aria-label": "Close modal slide",
+      size: "s"
+    })),
+    onClick: onClose
+  }));
+};
 
-const HeaderWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const HeaderWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-oxqqo8-0"
 })(["display:flex;justify-content:space-between;width:100%;align-items:center;"]);
-const StyledSeparator = /*#__PURE__*/styled__default['default'](DSSeparator__default['default']).withConfig({
+const StyledSeparator = /*#__PURE__*/styled__default["default"](DSSeparator__default["default"]).withConfig({
   componentId: "sc-oxqqo8-1"
 })(["padding:", " 0;"], props => props.theme.space.xs);
-const StyledCloseButton = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-oxqqo8-2"
 })(["margin:", ";"], props => props.theme.space.xs);
 const props = {
@@ -64,4 +66,4 @@ const DSModalSlideHeaderWithSchema = reactDesc.describe(ModalHeader);
 DSModalSlideHeaderWithSchema.propTypes = props;
 
 exports.DSModalSlideHeaderWithSchema = DSModalSlideHeaderWithSchema;
-exports['default'] = ModalHeader;
+exports["default"] = ModalHeader;

package/cjs/components/blocks.js

@@ -5,26 +5,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dsClassnames = require('@elliemae/ds-classnames');
 
 const blockName = 'modal-slide';
-const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper', ({
-  show,
-  centered
-}) => ({
-  showing: show,
-  disappearing: !show,
-  centered
-}));
-const Overlay = dsClassnames.aggregatedClasses('div')(blockName, 'overlay', ({
-  show
-}) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content', ({
-  show
-}) => ({
-  showing: show,
-  disappearing: !show
-}));
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper', _ref => {
+  let {
+    show,
+    centered
+  } = _ref;
+  return {
+    showing: show,
+    disappearing: !show,
+    centered
+  };
+});
+const Overlay = dsClassnames.aggregatedClasses('div')(blockName, 'overlay', _ref2 => {
+  let {
+    show
+  } = _ref2;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
+const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content', _ref3 => {
+  let {
+    show
+  } = _ref3;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
 const Title = dsClassnames.aggregatedClasses('div')(blockName, 'title', () => ({}));
 const BreadcrumTitle = dsClassnames.aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));
 const HeaderLeftSide = dsClassnames.aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));

package/cjs/index.js

@@ -10,8 +10,8 @@ var Footer = require('./components/Footer.js');
 
 exports.DSModalSlide = DSModalSlide.DSModalSlide;
 exports.DSModalSlideWithSchema = DSModalSlide.DSModalSlideWithSchema;
-exports.default = DSModalSlide.DSModalSlide;
+exports["default"] = DSModalSlide.DSModalSlide;
 exports.DSModalSlideHeaderWithSchema = Header.DSModalSlideHeaderWithSchema;
-exports.ModalHeader = Header['default'];
+exports.ModalHeader = Header["default"];
 exports.DSModalSlideFooterWithSchema = Footer.DSModalSlideFooterWithSchema;
-exports.ModalFooter = Footer['default'];
+exports.ModalFooter = Footer["default"];

package/esm/DSModalSlide.js

@@ -1,28 +1,30 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useState, useCallback, useEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import ReactDOM from 'react-dom';
 import { useTheme } from '@elliemae/ds-system';
-import { Grid } from '@elliemae/ds-basic/Grid';
-import DSSeparator from '@elliemae/ds-basic/Separator';
+import { Grid } from '@elliemae/ds-grid';
+import DSSeparator from '@elliemae/ds-separator';
 import { Wrapper, Overlay, Content, ActualContent } from './components/blocks.js';
 export { default as ModalHeader } from './components/Header.js';
 export { default as ModalFooter } from './components/Footer.js';
 
 var _DSSeparator, _DSSeparator2;
 
-const DSModalSlide = ({
-  isOpen = false,
-  children,
-  getContainer,
-  centered = false,
-  fullWidth = false,
-  header = null,
-  footer = null,
-  fadeOut = 1500,
-  fadeIn = 1500,
-  overrideHeight = false
-}) => {
+const DSModalSlide = _ref => {
+  let {
+    isOpen = false,
+    children,
+    getContainer,
+    centered = false,
+    fullWidth = false,
+    header = null,
+    footer = null,
+    fadeOut = 1500,
+    fadeIn = 1500,
+    overrideHeight = false
+  } = _ref;
   const [isMoving, setMoving] = useState(false);
   const [show, setShow] = useState(isOpen);
   const [width, setWidth] = useState(50);

package/esm/components/Footer.js

@@ -1,8 +1,13 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { FooterWrapper } from './blocks.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
@@ -10,36 +15,39 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const ModalFooter = ({
-  confirmLabel = 'Confirm',
-  rejectLabel = 'Cancel',
-  onConfirm,
-  onReject,
-  confirmProps = {
-    disabled: false
-  },
-  rejectProps = {
-    disabled: false
-  }
-}) => /*#__PURE__*/jsx(Fragment, {
-  children: /*#__PURE__*/_jsx(FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsx(DSButton, _objectSpread({
-    buttonType: "secondary",
-    className: "action-reject",
-    containerProps: {
-      'data-testid': 'modal-footer-reject-btn'
+const ModalFooter = _ref => {
+  let {
+    confirmLabel = 'Confirm',
+    rejectLabel = 'Cancel',
+    onConfirm,
+    onReject,
+    confirmProps = {
+      disabled: false
     },
-    labelText: rejectLabel,
-    onClick: onReject
-  }, rejectProps)), !!onConfirm && /*#__PURE__*/jsx(DSButton, _objectSpread({
-    buttonType: "primary",
-    className: "action-confirm",
-    containerProps: {
-      'data-testid': 'modal-footer-confirm-btn'
-    },
-    labelText: confirmLabel,
-    onClick: onConfirm
-  }, confirmProps)))
-});
+    rejectProps = {
+      disabled: false
+    }
+  } = _ref;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsx(DSButton, _objectSpread({
+      buttonType: "secondary",
+      className: "action-reject",
+      containerProps: {
+        'data-testid': 'modal-footer-reject-btn'
+      },
+      labelText: rejectLabel,
+      onClick: onReject
+    }, rejectProps)), !!onConfirm && /*#__PURE__*/jsx(DSButton, _objectSpread({
+      buttonType: "primary",
+      className: "action-confirm",
+      containerProps: {
+        'data-testid': 'modal-footer-confirm-btn'
+      },
+      labelText: confirmLabel,
+      onClick: onConfirm
+    }, confirmProps)))
+  });
+};
 
 const props = {
   /**

package/esm/components/Header.js

@@ -2,32 +2,35 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
-import DSSeparator from '@elliemae/ds-basic/Separator';
-import Close from '@elliemae/ds-icons/Close';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSSeparator from '@elliemae/ds-separator';
+import { Close } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 import { HeaderLeftSide, Header, Title } from './blocks.js';
 
 var _StyledSeparator, _Close;
 
-const ModalHeader = ({
-  title: headerTitle = '',
-  onClose = () => null,
-  toolbar = null
-}) => /*#__PURE__*/_jsx(HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx(HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
-  position: "initial",
-  margin: "none",
-  orientation: "vertical",
-  type: "non-form"
-}))), /*#__PURE__*/_jsx(StyledCloseButton, {
-  "data-testid": "modal-slider-header-close",
-  "aria-label": "Close modal slide",
-  buttonType: "text",
-  icon: _Close || (_Close = /*#__PURE__*/_jsx(Close, {
+const ModalHeader = _ref => {
+  let {
+    title: headerTitle = '',
+    onClose = () => null,
+    toolbar = null
+  } = _ref;
+  return /*#__PURE__*/_jsx(HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx(HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
+    position: "initial",
+    margin: "none",
+    orientation: "vertical",
+    type: "non-form"
+  }))), /*#__PURE__*/_jsx(StyledCloseButton, {
+    "data-testid": "modal-slider-header-close",
     "aria-label": "Close modal slide",
-    size: "s"
-  })),
-  onClick: onClose
-}));
+    buttonType: "text",
+    icon: _Close || (_Close = /*#__PURE__*/_jsx(Close, {
+      "aria-label": "Close modal slide",
+      size: "s"
+    })),
+    onClick: onClose
+  }));
+};
 
 const HeaderWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-oxqqo8-0"

package/esm/components/blocks.js

@@ -1,26 +1,35 @@
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
 const blockName = 'modal-slide';
-const Wrapper = aggregatedClasses('div')(blockName, 'wrapper', ({
-  show,
-  centered
-}) => ({
-  showing: show,
-  disappearing: !show,
-  centered
-}));
-const Overlay = aggregatedClasses('div')(blockName, 'overlay', ({
-  show
-}) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Content = aggregatedClasses('div')(blockName, 'content', ({
-  show
-}) => ({
-  showing: show,
-  disappearing: !show
-}));
+const Wrapper = aggregatedClasses('div')(blockName, 'wrapper', _ref => {
+  let {
+    show,
+    centered
+  } = _ref;
+  return {
+    showing: show,
+    disappearing: !show,
+    centered
+  };
+});
+const Overlay = aggregatedClasses('div')(blockName, 'overlay', _ref2 => {
+  let {
+    show
+  } = _ref2;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
+const Content = aggregatedClasses('div')(blockName, 'content', _ref3 => {
+  let {
+    show
+  } = _ref3;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
 const Title = aggregatedClasses('div')(blockName, 'title', () => ({}));
 const BreadcrumTitle = aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));
 const HeaderLeftSide = aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-modal-slide",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Modal Slide",
   "module": "./esm/index.js",
@@ -48,20 +48,24 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-alpha.1",
-    "@elliemae/ds-classnames": "2.0.0-alpha.1",
+    "@elliemae/ds-button": "2.0.0-alpha.13",
+    "@elliemae/ds-classnames": "2.0.0-alpha.13",
+    "@elliemae/ds-grid": "2.0.0-alpha.13",
+    "@elliemae/ds-icons": "2.0.0-alpha.13",
+    "@elliemae/ds-separator": "2.0.0-alpha.13",
+    "@elliemae/ds-system": "2.0.0-alpha.13",
     "prop-types": "~15.7.2",
-    "react-measure": "~2.5.2",
-    "react-modal": "~3.12.1"
+    "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "@testing-library/react": "~12.1.2",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "~4.17.21",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSModalSlide.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 import React from 'react';
 import ModalHeader from './components/Header';
 import ModalFooter from './components/Footer';
@@ -18,11 +19,21 @@ declare const DSModalSlide: {
         /**
          * If the modal slide is centered or not
          */
-        centered: any;
+        centered: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * If the modal slide is visible or not
          */
-        isOpen: any;
+        isOpen: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Main content of the modal
          */
@@ -30,25 +41,65 @@ declare const DSModalSlide: {
         /**
          * If the modal slide takes the full width or not
          */
-        fullWidth: any;
+        fullWidth: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * If the modal slide has a header, only available for full width option
          */
-        header: any;
+        header: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Ratio of fade out
          */
-        fadeOut: any;
+        fadeOut: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Ratio of fade in
          */
-        fadeIn: any;
+        fadeIn: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Override the panel height to scroll height of the container
          */
-        overrideHeight: any;
+        overrideHeight: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSModalSlideWithSchema: any;
+declare const DSModalSlideWithSchema: {
+    (props?: {
+        isOpen?: boolean | undefined;
+        children: any;
+        getContainer: any;
+        centered?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        header?: null | undefined;
+        footer?: null | undefined;
+        fadeOut?: number | undefined;
+        fadeIn?: number | undefined;
+        overrideHeight?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };
 export default DSModalSlide;

package/types/components/Footer.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const ModalFooter: {
     ({ confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps, }: {
@@ -16,29 +17,74 @@ declare const ModalFooter: {
         /**
          * Confirm Label
          */
-        confirmLabel: any;
+        confirmLabel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Reject Label
          */
-        rejectLabel: any;
+        rejectLabel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Callback
          */
-        onConfirm: any;
+        onConfirm: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Callback
          */
-        onReject: any;
+        onReject: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Extra DSButton props for confirm btn.
          */
-        confirmProps: any;
+        confirmProps: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * Extra DSButton props for reject btn.
          */
-        rejectProps: any;
+        rejectProps: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSModalSlideFooterWithSchema: any;
+declare const DSModalSlideFooterWithSchema: {
+    (props?: {
+        confirmLabel?: string | undefined;
+        rejectLabel?: string | undefined;
+        onConfirm: any;
+        onReject: any;
+        confirmProps?: {
+            disabled: boolean;
+        } | undefined;
+        rejectProps?: {
+            disabled: boolean;
+        } | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSModalSlideFooterWithSchema };
 export default ModalFooter;

package/types/components/Header.d.ts

@@ -1,19 +1,43 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const ModalHeader: {
-    ({ title: headerTitle, onClose, toolbar, }: {
+    ({ title: headerTitle, onClose, toolbar }: {
         title?: string | undefined;
         onClose?: (() => null) | undefined;
         toolbar?: null | undefined;
     }): JSX.Element;
     propTypes: {
         /** on modal close callback */
-        onClose: any;
+        onClose: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** modal toolbar component */
-        toolbar: any;
+        toolbar: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** modal title */
-        title: any;
+        title: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSModalSlideHeaderWithSchema: any;
+declare const DSModalSlideHeaderWithSchema: {
+    (props?: {
+        title?: string | undefined;
+        onClose?: (() => null) | undefined;
+        toolbar?: null | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSModalSlideHeaderWithSchema };
 export default ModalHeader;

package/cjs/package.json

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

package/esm/package.json

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