@elliemae/ds-modal-slide 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/DSModalSlide.js

@@ -1,152 +1,176 @@
-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 DSModalSlide_exports = {};
-__export(DSModalSlide_exports, {
-  DSModalSlide: () => DSModalSlide,
-  DSModalSlideWithSchema: () => DSModalSlideWithSchema,
-  ModalFooter: () => import_Footer.default,
-  ModalHeader: () => import_Header.default,
-  default: () => DSModalSlide_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_react_dom = __toESM(require("react-dom"));
-var import_ds_system = require("@elliemae/ds-system");
-var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_separator = __toESM(require("@elliemae/ds-separator"));
-var import_blocks = require("./components/blocks");
-var import_Header = __toESM(require("./components/Header"));
-var import_Footer = __toESM(require("./components/Footer"));
-const DSModalSlide = ({
-  isOpen = false,
-  children,
-  getContainer,
-  centered = false,
-  fullWidth = false,
-  header = null,
-  footer = null,
-  fadeOut = 1500,
-  fadeIn = 1500,
-  overrideHeight = false
-}) => {
-  const [isMoving, setMoving] = (0, import_react.useState)(false);
-  const [show, setShow] = (0, import_react.useState)(isOpen);
-  const [width, setWidth] = (0, import_react.useState)(50);
-  const theme = (0, import_ds_system.useTheme)();
-  const contentRows = [...header ? [theme.space.m] : [], "0px", "auto", "0px", ...footer ? [theme.space.m] : []];
-  const updateShow = (0, import_react.useCallback)(() => {
-    if (fullWidth)
-      setWidth(100);
-    else
-      setWidth(50);
+'use strict';
+
+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 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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+
+var _DSSeparator, _DSSeparator2;
+
+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);
+  const theme = dsSystem.useTheme();
+  const contentRows = [...(header ? [theme.space.m] : []), '0px', 'auto', '0px', ...(footer ? [theme.space.m] : [])];
+  const updateShow = React.useCallback(() => {
+    if (fullWidth) setWidth(100);else setWidth(50);
+
     if (isOpen !== show) {
       setMoving(true);
+
       if (isOpen) {
         setShow(isOpen);
       }
     }
   }, [isOpen, fullWidth, isMoving]);
-  (0, import_react.useEffect)(updateShow, [isOpen, fullWidth]);
-  if (!show)
-    return null;
+  React.useEffect(updateShow, [isOpen, fullWidth]);
+  if (!show) return null;
   const container = getContainer();
-  if (!container)
-    return null;
+  if (!container) return null;
+
   const handleAnimationEnd = () => {
     setMoving(false);
-    if (!isOpen)
-      setShow(isOpen);
+    if (!isOpen) setShow(isOpen);
   };
-  let { height } = container.getBoundingClientRect();
+
+  let {
+    height
+  } = container.getBoundingClientRect();
+
   if (overrideHeight && container.scrollHeight > height) {
     height = container.scrollHeight;
   }
+
   if (!container.style.position) {
-    container.style.position = "relative";
+    container.style.position = 'relative';
   }
-  return import_react_dom.default.createPortal(/* @__PURE__ */ import_react.default.createElement(import_blocks.Wrapper, {
+
+  return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](blocks.Wrapper, {
     classProps: {
       show: isOpen,
       centered
     },
     style: {
-      "--height": height,
-      "--fade-in": fadeIn,
-      "--fade-out": fadeOut,
-      "--width": width
+      '--height': height,
+      '--fade-in': fadeIn,
+      '--fade-out': fadeOut,
+      '--width': width
     }
-  }, /* @__PURE__ */ import_react.default.createElement(import_blocks.Overlay, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Overlay, {
     classProps: {
       show: isOpen
     }
-  }, /* @__PURE__ */ import_react.default.createElement(import_blocks.Content, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Content, {
     onAnimationEnd: handleAnimationEnd,
     classProps: {
       show: isOpen
     }
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
-      height: "100%",
-      width: "100%",
-      maxHeight: "100%",
-      overflow: "hidden",
-      "-webkit-backface-visibility": "hidden",
-      "backface-visibility": "hidden",
-      "-webkit-transform-style": "preserve-3d"
+      height: '100%',
+      width: '100%',
+      maxHeight: '100%',
+      overflow: 'hidden',
+      '-webkit-backface-visibility': 'hidden',
+      'backface-visibility': 'hidden',
+      '-webkit-transform-style': 'preserve-3d'
     },
     rows: contentRows,
     "data-testid": "ds-modal-slide"
-  }, header && import_react.default.cloneElement(header, { fullWidth }), header && /* @__PURE__ */ import_react.default.createElement(import_ds_separator.default, {
+  }, void 0, header && /*#__PURE__*/React__default["default"].cloneElement(header, {
+    fullWidth
+  }), header && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
     position: "initial",
     type: "non-form"
-  }), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    style: { overflow: "hidden" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    style: { overflow: "auto" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_blocks.ActualContent, null, children))), footer && /* @__PURE__ */ import_react.default.createElement(import_ds_separator.default, {
+  }))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    style: {
+      overflow: 'hidden'
+    }
+  }, 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"], {
     position: "initial",
     type: "non-form"
-  }), footer)))), container);
+  }))), footer)))), container);
 };
+
 const props = {
-  centered: import_react_desc.PropTypes.bool.description("If the modal slide is centered or not"),
-  isOpen: import_react_desc.PropTypes.bool.description("If the modal slide is visible or not"),
-  children: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.element, import_react_desc.PropTypes.string, import_react_desc.PropTypes.any]).isRequired.description("Main content of the modal"),
-  fullWidth: import_react_desc.PropTypes.bool.description("If the modal slide takes the full width or not"),
-  header: import_react_desc.PropTypes.element.description("If the modal slide has a header, only available for full width option"),
-  fadeOut: import_react_desc.PropTypes.number.description("Ratio of fade out"),
-  fadeIn: import_react_desc.PropTypes.number.description("Ratio of fade in"),
-  overrideHeight: import_react_desc.PropTypes.bool.description("Override the panel height to scroll height of the container")
+  /**
+   * If the modal slide is centered or not
+   */
+  centered: reactDesc.PropTypes.bool.description('If the modal slide is centered or not'),
+
+  /**
+   * If the modal slide is visible or not
+   */
+  isOpen: reactDesc.PropTypes.bool.description('If the modal slide is visible or not'),
+
+  /**
+   * Main content of the modal
+   */
+  children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.element, reactDesc.PropTypes.string, reactDesc.PropTypes.any]).isRequired.description('Main content of the modal'),
+
+  /**
+   * If the modal slide takes the full width or not
+   */
+  fullWidth: reactDesc.PropTypes.bool.description('If the modal slide takes the full width or not'),
+
+  /**
+   * If the modal slide has a header, only available for full width option
+   */
+  header: reactDesc.PropTypes.element.description('If the modal slide has a header, only available for full width option'),
+
+  /**
+   * Ratio of fade out
+   */
+  fadeOut: reactDesc.PropTypes.number.description('Ratio of fade out'),
+
+  /**
+   * Ratio of fade in
+   */
+  fadeIn: reactDesc.PropTypes.number.description('Ratio of fade in'),
+
+  /**
+   * Override the panel height to scroll height of the container
+   */
+  overrideHeight: reactDesc.PropTypes.bool.description('Override the panel height to scroll height of the container')
 };
-DSModalSlide.propTypes = props;
-const DSModalSlideWithSchema = (0, import_react_desc.describe)(DSModalSlide);
+const DSModalSlideWithSchema = reactDesc.describe(DSModalSlide);
 DSModalSlideWithSchema.propTypes = props;
-var DSModalSlide_default = DSModalSlide;
-module.exports = __toCommonJS(DSModalSlide_exports);
-//# sourceMappingURL=DSModalSlide.js.map
+
+exports.ModalHeader = Header["default"];
+exports.ModalFooter = Footer["default"];
+exports.DSModalSlide = DSModalSlide;
+exports.DSModalSlideWithSchema = DSModalSlideWithSchema;
+exports["default"] = DSModalSlide;

package/cjs/components/Footer.js

@@ -1,81 +1,101 @@
-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 });
+'use strict';
+
+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-button');
+var blocks = require('./blocks.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const ModalFooter = _ref => {
+  let {
+    confirmLabel = 'Confirm',
+    rejectLabel = 'Cancel',
+    onConfirm,
+    onReject,
+    confirmProps = {
+      disabled: false
+    },
+    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)))
+  });
 };
-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 Footer_exports = {};
-__export(Footer_exports, {
-  DSModalSlideFooterWithSchema: () => DSModalSlideFooterWithSchema,
-  default: () => Footer_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_blocks = require("./blocks");
-const ModalFooter = ({
-  confirmLabel = "Confirm",
-  rejectLabel = "Cancel",
-  onConfirm,
-  onReject,
-  confirmProps = {
-    disabled: false
-  },
-  rejectProps = {
-    disabled: false
-  }
-}) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_blocks.FooterWrapper, null, !!onReject && /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
-  buttonType: "secondary",
-  className: "action-reject",
-  containerProps: { "data-testid": "modal-footer-reject-btn" },
-  labelText: rejectLabel,
-  onClick: onReject,
-  ...rejectProps
-}), !!onConfirm && /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
-  buttonType: "primary",
-  className: "action-confirm",
-  containerProps: { "data-testid": "modal-footer-confirm-btn" },
-  labelText: confirmLabel,
-  onClick: onConfirm,
-  ...confirmProps
-})));
+
 const props = {
-  confirmLabel: import_react_desc.PropTypes.string.description("Confirm Label"),
-  rejectLabel: import_react_desc.PropTypes.string.description("Reject Label"),
-  onConfirm: import_react_desc.PropTypes.func.description("Callback"),
-  onReject: import_react_desc.PropTypes.func.description("Callback"),
-  confirmProps: import_react_desc.PropTypes.shape({
-    disabled: import_react_desc.PropTypes.bool
-  }).description("Extra DSButton props for confirm btn."),
-  rejectProps: import_react_desc.PropTypes.shape({
-    disabled: import_react_desc.PropTypes.bool
-  }).description("Extra DSButton props for reject btn.")
+  /**
+   * Confirm Label
+   */
+  confirmLabel: reactDesc.PropTypes.string.description('Confirm Label'),
+
+  /**
+   * Reject Label
+   */
+  rejectLabel: reactDesc.PropTypes.string.description('Reject Label'),
+
+  /**
+   * Callback
+   */
+  onConfirm: reactDesc.PropTypes.func.description('Callback'),
+
+  /**
+   * Callback
+   */
+  onReject: reactDesc.PropTypes.func.description('Callback'),
+
+  /**
+   * Extra DSButton props for confirm btn.
+   */
+  confirmProps: reactDesc.PropTypes.shape({
+    disabled: reactDesc.PropTypes.bool
+  }).description('Extra DSButton props for confirm btn.'),
+
+  /**
+   * Extra DSButton props for reject btn.
+   */
+  rejectProps: reactDesc.PropTypes.shape({
+    disabled: reactDesc.PropTypes.bool
+  }).description('Extra DSButton props for reject btn.')
 };
-ModalFooter.propTypes = props;
-const DSModalSlideFooterWithSchema = (0, import_react_desc.describe)(ModalFooter);
+const DSModalSlideFooterWithSchema = reactDesc.describe(ModalFooter);
 DSModalSlideFooterWithSchema.propTypes = props;
-var Footer_default = ModalFooter;
-module.exports = __toCommonJS(Footer_exports);
-//# sourceMappingURL=Footer.js.map
+
+exports.DSModalSlideFooterWithSchema = DSModalSlideFooterWithSchema;
+exports["default"] = ModalFooter;

package/cjs/components/Header.js

@@ -1,78 +1,69 @@
-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 Header_exports = {};
-__export(Header_exports, {
-  DSModalSlideHeaderWithSchema: () => DSModalSlideHeaderWithSchema,
-  default: () => Header_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_separator = __toESM(require("@elliemae/ds-separator"));
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_blocks = require("./blocks");
-const ModalHeader = ({ title: headerTitle = "", onClose = () => null, toolbar = null }) => /* @__PURE__ */ import_react.default.createElement(HeaderWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_blocks.HeaderLeftSide, null, /* @__PURE__ */ import_react.default.createElement(import_blocks.Header, null, /* @__PURE__ */ import_react.default.createElement(import_blocks.Title, null, headerTitle))), toolbar, toolbar && /* @__PURE__ */ import_react.default.createElement(StyledSeparator, {
-  position: "initial",
-  margin: "none",
-  orientation: "vertical",
-  type: "non-form"
-}), /* @__PURE__ */ import_react.default.createElement(StyledCloseButton, {
-  "data-testid": "modal-slider-header-close",
-  "aria-label": "Close modal slide",
-  buttonType: "text",
-  icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Close, {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+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 }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _StyledSeparator, _Close;
+
+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
-}));
-const HeaderWrapper = import_styled_components.default.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  align-items: center;
-`;
-const StyledSeparator = (0, import_styled_components.default)(import_ds_separator.default)`
-  padding: ${(props2) => props2.theme.space.xs} 0;
-`;
-const StyledCloseButton = (0, import_styled_components.default)(import_ds_button.default)`
-  margin: ${(props2) => props2.theme.space.xs};
-`;
+    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({
+  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({
+  componentId: "sc-oxqqo8-1"
+})(["padding:", " 0;"], props => props.theme.space.xs);
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+  componentId: "sc-oxqqo8-2"
+})(["margin:", ";"], props => props.theme.space.xs);
 const props = {
-  onClose: import_react_desc.PropTypes.func.description("on modal close callback"),
-  toolbar: import_react_desc.PropTypes.node.description("modal toolbar comoponent"),
-  title: import_react_desc.PropTypes.string.description("modal title")
+  /** on modal close callback */
+  onClose: reactDesc.PropTypes.func.description('on modal close callback'),
+
+  /** modal toolbar component */
+  toolbar: reactDesc.PropTypes.node.description('modal toolbar comoponent'),
+
+  /** modal title */
+  title: reactDesc.PropTypes.string.description('modal title')
 };
-ModalHeader.propTypes = props;
-const DSModalSlideHeaderWithSchema = (0, import_react_desc.describe)(ModalHeader);
+const DSModalSlideHeaderWithSchema = reactDesc.describe(ModalHeader);
 DSModalSlideHeaderWithSchema.propTypes = props;
-var Header_default = ModalHeader;
-module.exports = __toCommonJS(Header_exports);
-//# sourceMappingURL=Header.js.map
+
+exports.DSModalSlideHeaderWithSchema = DSModalSlideHeaderWithSchema;
+exports["default"] = ModalHeader;