@elliemae/ds-modal 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/v1/DSModal.js

@@ -0,0 +1,148 @@
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import ReactModal from "react-modal";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { DSIconSizes } from "@elliemae/ds-icon";
+import { Close } from "@elliemae/ds-icons";
+import DSButton from "@elliemae/ds-button";
+import MODAL_TYPE, { modalTypes } from "../constants";
+import ModalFeedBack from "./ModalFeedBack/ModalFeedBack";
+import { sizes, iconSizes } from "@elliemae/ds-shared/prop-types";
+const DSModal = ({
+  containerProps = {},
+  className = "",
+  dataTestId = "ds-modal",
+  additionalFooterCssClass = "",
+  style = {},
+  iconCloseSize = DSIconSizes.S,
+  modalType = MODAL_TYPE.DEFAULT,
+  showHeader = true,
+  showFooter = true,
+  children,
+  centered = true,
+  confirmLabel = "Accept",
+  modalTitle = "",
+  size = "medium",
+  isOpen = false,
+  onClose = () => null,
+  onAfterOpen = () => null,
+  onConfirm = () => null,
+  onReject = () => null,
+  rejectLabel = "Cancel",
+  shouldCloseOnOverlayClick = false,
+  hasError = false,
+  hasWarning = false,
+  hasSuccess = false,
+  hasInfo = false,
+  hasHelp = false,
+  actionsRef = () => null,
+  appElement = "#root",
+  overridePropsConfirmButton = {},
+  overridePropsRejectButton = {},
+  zIndex = 10
+}) => {
+  typeof document !== "undefined" && document && ReactModal.setAppElement && ReactModal.setAppElement(appElement);
+  const { cssClassName, classNameElement, classNameBlock, classNameModifier, classNameBlockModifier } = convertPropToCssClassName("modal", className, {
+    hasError,
+    hasWarning,
+    hasSuccess,
+    modalType,
+    size
+  });
+  const { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;
+  const isAFeedbackType = [WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1;
+  const showFeedBack = isAFeedbackType || hasError || hasWarning || hasSuccess || hasInfo || hasHelp;
+  return /* @__PURE__ */ React2.createElement(ReactModal, {
+    testId: dataTestId,
+    className: cssClassName,
+    contentLabel: modalTitle,
+    isOpen,
+    onAfterOpen,
+    onRequestClose: onClose,
+    overlayClassName: `${classNameBlock("overlay")} ${classNameModifier(centered && "center")}`,
+    shouldCloseOnOverlayClick,
+    style: {
+      content: {
+        ...style
+      },
+      overlay: {
+        zIndex
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement("div", {
+    ...containerProps
+  }, showHeader && /* @__PURE__ */ React2.createElement("div", {
+    className: classNameBlock("modal-header")
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: classNameElement("title", "modal-header")
+  }, modalTitle), /* @__PURE__ */ React2.createElement("div", {
+    className: classNameElement("icon", "modal-header")
+  }, /* @__PURE__ */ React2.createElement(DSButton, {
+    buttonType: "link",
+    icon: /* @__PURE__ */ React2.createElement(Close, null),
+    onClick: onClose,
+    size: iconCloseSize
+  }))), /* @__PURE__ */ React2.createElement("div", {
+    className: classNameElement("body")
+  }, showFeedBack && /* @__PURE__ */ React2.createElement(ModalFeedBack, {
+    hasError,
+    hasHelp,
+    hasInfo,
+    hasSuccess,
+    hasWarning,
+    modalType
+  }), children), showFooter && !isAFeedbackType && /* @__PURE__ */ React2.createElement("div", {
+    className: `${classNameBlock("modal-footer")} ${additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, "modal-footer") : ""}`
+  }, /* @__PURE__ */ React2.createElement("div", {
+    ref: actionsRef,
+    className: classNameBlock("modal-footer-actions")
+  }, modalType === MODAL_TYPE.CONFIRM && /* @__PURE__ */ React2.createElement(DSButton, {
+    buttonType: "secondary",
+    className: `${classNameElement("button-action")} ${classNameModifier("reject", "button-action")} `,
+    labelText: rejectLabel,
+    onClick: onReject,
+    ...overridePropsRejectButton
+  }), /* @__PURE__ */ React2.createElement(DSButton, {
+    buttonType: "primary",
+    className: `${classNameElement("button-action")} ${classNameModifier("confirm", "button-action")} `,
+    labelText: confirmLabel,
+    onClick: onConfirm,
+    ...overridePropsConfirmButton
+  })))));
+};
+DSModal.propTypes = {
+  className: PropTypes.string,
+  additionalFooterCssClass: PropTypes.string,
+  style: PropTypes.shape({}),
+  iconCloseSize: PropTypes.oneOf(iconSizes),
+  modalType: PropTypes.oneOf(modalTypes),
+  showHeader: PropTypes.bool,
+  showFooter: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired,
+  centered: PropTypes.bool,
+  confirmLabel: PropTypes.string,
+  modalTitle: PropTypes.string,
+  size: PropTypes.oneOf(sizes),
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func,
+  onAfterOpen: PropTypes.func,
+  onConfirm: PropTypes.func,
+  onReject: PropTypes.func,
+  rejectLabel: PropTypes.string,
+  shouldCloseOnOverlayClick: PropTypes.bool,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  hasSuccess: PropTypes.bool,
+  hasInfo: PropTypes.bool,
+  hasHelp: PropTypes.bool,
+  actionsRef: PropTypes.func,
+  appElement: PropTypes.string,
+  overridePropsConfirmButton: PropTypes.shape({}),
+  overridePropsRejectButton: PropTypes.shape({})
+};
+var DSModal_default = DSModal;
+export {
+  DSModal_default as default
+};
+//# sourceMappingURL=DSModal.js.map

package/dist/esm/v1/DSModal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DSModal.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MODAL_TYPE, { modalTypes } from '../constants';\nimport ModalFeedBack from './ModalFeedBack/ModalFeedBack';\nimport { sizes, iconSizes } from '@elliemae/ds-shared/prop-types';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  dataTestId = 'ds-modal',\n  additionalFooterCssClass = '',\n  style = {},\n  iconCloseSize = DSIconSizes.S,\n  modalType = MODAL_TYPE.DEFAULT,\n  showHeader = true,\n  showFooter = true,\n  children,\n  centered = true,\n  confirmLabel = 'Accept',\n  modalTitle = '',\n  size = 'medium',\n  isOpen = false,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Cancel',\n  shouldCloseOnOverlayClick = false,\n  hasError = false,\n  hasWarning = false,\n  hasSuccess = false,\n  hasInfo = false,\n  hasHelp = false,\n  actionsRef = () => null,\n  appElement = '#root',\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  zIndex = 10,\n}) => {\n  // http://reactcommunity.org/react-modal/accessibility/ https://github.com/reactjs/react-modal#examples\n  typeof document !== 'undefined' && document && ReactModal.setAppElement && ReactModal.setAppElement(appElement); // eslint-disable-line\n  const { cssClassName, classNameElement, classNameBlock, classNameModifier, classNameBlockModifier } =\n    convertPropToCssClassName('modal', className, {\n      hasError,\n      hasWarning,\n      hasSuccess,\n      modalType,\n      size,\n    });\n\n  const { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;\n\n  const isAFeedbackType = [WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1;\n  const showFeedBack = isAFeedbackType || hasError || hasWarning || hasSuccess || hasInfo || hasHelp;\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={cssClassName}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered && 'center')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          zIndex,\n        },\n      }}\n    >\n      <div {...containerProps}>\n        {showHeader && (\n          <div className={classNameBlock('modal-header')}>\n            <div className={classNameElement('title', 'modal-header')}>{modalTitle}</div>\n            <div className={classNameElement('icon', 'modal-header')}>\n              <DSButton buttonType=\"link\" icon={<Close />} onClick={onClose} size={iconCloseSize} />\n            </div>\n          </div>\n        )}\n        <div className={classNameElement('body')}>\n          {showFeedBack && (\n            <ModalFeedBack\n              hasError={hasError}\n              hasHelp={hasHelp}\n              hasInfo={hasInfo}\n              hasSuccess={hasSuccess}\n              hasWarning={hasWarning}\n              modalType={modalType}\n            />\n          )}\n          {children}\n        </div>\n        {showFooter && !isAFeedbackType && (\n          <div\n            className={`${classNameBlock('modal-footer')} ${\n              additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, 'modal-footer') : ''\n            }`}\n          >\n            <div ref={actionsRef} className={classNameBlock('modal-footer-actions')}>\n              {modalType === MODAL_TYPE.CONFIRM && (\n                <DSButton\n                  buttonType=\"secondary\"\n                  className={`${classNameElement('button-action')} ${classNameModifier('reject', 'button-action')} `}\n                  labelText={rejectLabel}\n                  onClick={onReject}\n                  {...overridePropsRejectButton}\n                />\n              )}\n              <DSButton\n                buttonType=\"primary\"\n                className={`${classNameElement('button-action')} ${classNameModifier('confirm', 'button-action')} `}\n                labelText={confirmLabel}\n                onClick={onConfirm}\n                {...overridePropsConfirmButton}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    </ReactModal>\n  );\n};\n\nDSModal.propTypes = {\n  className: PropTypes.string,\n  /**\n   * Add an additional css class to the footer\n   */\n  additionalFooterCssClass: PropTypes.string,\n  /**\n   * Set style for the modal\n   */\n  style: PropTypes.shape({}),\n  /**\n   * Select size for the close icon\n   */\n  iconCloseSize: PropTypes.oneOf(iconSizes),\n  /**\n   * ['default', 'alert', 'confirm', 'notification', 'warning', 'error', 'success', 'help', 'info']\n   */\n  modalType: PropTypes.oneOf(modalTypes),\n  /**\n   * Show the header or not\n   */\n  showHeader: PropTypes.bool,\n  /**\n   * Show the footer or not\n   */\n  showFooter: PropTypes.bool,\n  /**\n   * Main content of the modal\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired,\n  /**\n   * Content is centered or not\n   */\n  centered: PropTypes.bool,\n  /**\n   * Text to be added in the confirm button\n   */\n  confirmLabel: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  modalTitle: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  size: PropTypes.oneOf(sizes),\n  /**\n   * Modal is open or not\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Allows a function to be triggered once the modal is closed\n   */\n  onClose: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal is opened\n   */\n  onAfterOpen: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is confirmed\n   */\n  onConfirm: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is rejected\n   */\n  onReject: PropTypes.func,\n  /**\n   * Text to be added in the reject button\n   */\n  rejectLabel: PropTypes.string,\n  /**\n   * If modal should close on overlay click\n   */\n  shouldCloseOnOverlayClick: PropTypes.bool,\n  /**\n   * Modal has error or not\n   */\n  hasError: PropTypes.bool,\n  /**\n   * Modal has warning or not\n   */\n  hasWarning: PropTypes.bool,\n  /**\n   * Modal has success or not\n   */\n  hasSuccess: PropTypes.bool,\n  /**\n   * Modal has info or not\n   */\n  hasInfo: PropTypes.bool,\n  /**\n   * Modal has help or not\n   */\n  hasHelp: PropTypes.bool,\n  actionsRef: PropTypes.func,\n  appElement: PropTypes.string,\n  /**\n   * Customized props for the confirm button\n   */\n  overridePropsConfirmButton: PropTypes.shape({}),\n  /**\n   * Customized props for the reject button\n   */\n  overridePropsRejectButton: PropTypes.shape({}),\n};\n\nexport default DSModal;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/v1/DSModalType.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+const modalTypes = [
+  MODAL_TYPE.DEFAULT,
+  MODAL_TYPE.ALERT,
+  MODAL_TYPE.CONFIRM,
+  MODAL_TYPE.NOTIFICATION,
+  MODAL_TYPE.WARNING,
+  MODAL_TYPE.ERROR,
+  MODAL_TYPE.SUCCESS,
+  MODAL_TYPE.HELP,
+  MODAL_TYPE.INFO
+];
+export {
+  modalTypes
+};
+//# sourceMappingURL=DSModalType.js.map

package/dist/esm/v1/DSModalType.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DSModalType.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const modalTypes = [\n  MODAL_TYPE.DEFAULT,\n  MODAL_TYPE.ALERT,\n  MODAL_TYPE.CONFIRM,\n  MODAL_TYPE.NOTIFICATION,\n  MODAL_TYPE.WARNING,\n  MODAL_TYPE.ERROR,\n  MODAL_TYPE.SUCCESS,\n  MODAL_TYPE.HELP,\n  MODAL_TYPE.INFO,\n];\n"],
+  "mappings": "AAAA;ACAO,MAAM,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA;",
+  "names": []
+}

package/dist/esm/v1/DSModalWrapper.js

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { Component, createElement } from "react";
+import { MODAL_TYPE } from "../constants";
+var DSModalWrapper_default = (WrappedComponent) => {
+  class DSModalWrapper extends Component {
+    constructor() {
+      super(...arguments);
+      this.state = {
+        childready: false,
+        additionalFooterCssClass: "loading",
+        container: null,
+        actions: null,
+        height: "100%"
+      };
+      this.onHeaderHeight = (e) => {
+        this.heightHeaderFlag = true;
+        this.heightHeader = e.height || 0;
+      };
+      this.onFooterHeight = (e) => {
+        this.heightFooterFlag = true;
+        this.heightFooter = e.height || 0;
+      };
+      this.onResize = ({ bounds }) => {
+        if (this.heightFooterFlag && this.heightHeaderFlag) {
+          return this.setState({
+            height: bounds.height - this.heightFooter - this.heightHeader
+          });
+        }
+        return setTimeout(this.onResize({ bounds }), 0);
+      };
+      this.handleContainer = (node) => {
+        if (node)
+          this.setState({ container: node });
+        this.handleResize();
+      };
+      this.handleActions = (node) => {
+        if (node)
+          this.setState({ actions: node });
+        this.handleResize();
+      };
+    }
+    componentDidMount() {
+      window.addEventListener("resize", this.handleResize);
+    }
+    componentWillUnmount() {
+      window.removeEventListener("resize", this.handleResize);
+    }
+    handleResize() {
+      if (!this.state)
+        return null;
+      const { container, actions, childready } = this.state;
+      if (!childready)
+        return null;
+      this.setState({ additionalFooterCssClass: null });
+      const { clientWidth: containerWidth } = container;
+      const { clientWidth: actionsWidth } = actions;
+      if (containerWidth && actionsWidth && actionsWidth / containerWidth * 100 > 50) {
+        return this.setState({ additionalFooterCssClass: "fluid-actions" });
+      }
+      return this.setState({ additionalFooterCssClass: null });
+    }
+    verifyNodes() {
+      const { modalType } = this.props;
+      if (modalType !== MODAL_TYPE.DEFAULT) {
+        const nodesInterval = setInterval(() => {
+          const { container, actions } = this.state;
+          if (!container || !actions)
+            return null;
+          clearInterval(nodesInterval);
+          this.setState({ childready: true });
+          return this.handleResize();
+        }, 100);
+      }
+    }
+    render() {
+      const { props, state } = this;
+      const { additionalFooterCssClass, height } = state;
+      return createElement(WrappedComponent, {
+        ...props,
+        height,
+        onResize: this.onResize,
+        onFooterHeight: this.onFooterHeight,
+        onHeaderHeight: this.onHeaderHeight,
+        containerRef: this.handleContainer,
+        actionsRef: this.handleActions,
+        additionalFooterCssClass,
+        onAfterOpen: () => {
+          if (props.onAfterOpen)
+            props.onAfterOpen();
+          this.verifyNodes();
+        }
+      });
+    }
+  }
+  return DSModalWrapper;
+};
+export {
+  DSModalWrapper_default as default
+};
+//# sourceMappingURL=DSModalWrapper.js.map

package/dist/esm/v1/DSModalWrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DSModalWrapper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Component, createElement } from 'react';\nimport { MODAL_TYPE } from '../constants';\n\nexport default (WrappedComponent) => {\n  class DSModalWrapper extends Component {\n    state = {\n      childready: false,\n      additionalFooterCssClass: 'loading',\n      container: null,\n      actions: null,\n      height: '100%',\n    };\n\n    componentDidMount() {\n      window.addEventListener('resize', this.handleResize);\n    }\n\n    componentWillUnmount() {\n      window.removeEventListener('resize', this.handleResize);\n    }\n\n    onHeaderHeight = (e) => {\n      this.heightHeaderFlag = true;\n      this.heightHeader = e.height || 0;\n    };\n\n    onFooterHeight = (e) => {\n      this.heightFooterFlag = true;\n      this.heightFooter = e.height || 0;\n    };\n\n    onResize = ({ bounds }) => {\n      if (this.heightFooterFlag && this.heightHeaderFlag) {\n        return this.setState({\n          height: bounds.height - this.heightFooter - this.heightHeader,\n        });\n      }\n      return setTimeout(this.onResize({ bounds }), 0);\n    };\n\n    handleContainer = (node) => {\n      if (node) this.setState({ container: node });\n      this.handleResize();\n    };\n\n    handleActions = (node) => {\n      if (node) this.setState({ actions: node });\n      this.handleResize();\n    };\n\n    /**\n     * Change button width to 100% if the\n     * combined width of the button (or button group) exceed 50% of the container width.\n     */\n    handleResize() {\n      if (!this.state) return null;\n      const { container, actions, childready } = this.state;\n      if (!childready) return null;\n      this.setState({ additionalFooterCssClass: null }); // !important reset to default state to recalculate\n      const { clientWidth: containerWidth } = container;\n      const { clientWidth: actionsWidth } = actions;\n      // Change button width to 100% if the combined width of the button (or button group) exceed 50% of the container width.\n      if (\n        containerWidth &&\n        actionsWidth &&\n        (actionsWidth / containerWidth) * 100 > 50\n      ) {\n        return this.setState({ additionalFooterCssClass: 'fluid-actions' });\n      }\n      return this.setState({ additionalFooterCssClass: null });\n    }\n\n    verifyNodes() {\n      const { modalType } = this.props;\n      if (modalType !== MODAL_TYPE.DEFAULT) {\n        const nodesInterval = setInterval(() => {\n          // !important it checks when nodes are availables\n          const { container, actions } = this.state;\n          if (!container || !actions) return null;\n          clearInterval(nodesInterval);\n          this.setState({ childready: true });\n          return this.handleResize();\n        }, 100);\n      }\n    }\n\n    render() {\n      const { props, state } = this;\n      const { additionalFooterCssClass, height } = state;\n      return createElement(WrappedComponent, {\n        ...props,\n        height,\n        onResize: this.onResize,\n        onFooterHeight: this.onFooterHeight,\n        onHeaderHeight: this.onHeaderHeight,\n        containerRef: this.handleContainer,\n        actionsRef: this.handleActions,\n        additionalFooterCssClass,\n        onAfterOpen: () => {\n          if (props.onAfterOpen) props.onAfterOpen();\n          this.verifyNodes();\n        },\n      });\n    }\n  }\n\n  return DSModalWrapper;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,IAAO,yBAAQ,CAAC,qBAAqB;AACnC,+BAA6B,UAAU;AAAA,IAAvC,cAJF;AAIE;AACE,mBAAQ;AAAA,QACN,YAAY;AAAA,QACZ,0BAA0B;AAAA,QAC1B,WAAW;AAAA,QACX,SAAS;AAAA,QACT,QAAQ;AAAA;AAWV,4BAAiB,CAAC,MAAM;AACtB,aAAK,mBAAmB;AACxB,aAAK,eAAe,EAAE,UAAU;AAAA;AAGlC,4BAAiB,CAAC,MAAM;AACtB,aAAK,mBAAmB;AACxB,aAAK,eAAe,EAAE,UAAU;AAAA;AAGlC,sBAAW,CAAC,EAAE,aAAa;AACzB,YAAI,KAAK,oBAAoB,KAAK,kBAAkB;AAClD,iBAAO,KAAK,SAAS;AAAA,YACnB,QAAQ,OAAO,SAAS,KAAK,eAAe,KAAK;AAAA;AAAA;AAGrD,eAAO,WAAW,KAAK,SAAS,EAAE,WAAW;AAAA;AAG/C,6BAAkB,CAAC,SAAS;AAC1B,YAAI;AAAM,eAAK,SAAS,EAAE,WAAW;AACrC,aAAK;AAAA;AAGP,2BAAgB,CAAC,SAAS;AACxB,YAAI;AAAM,eAAK,SAAS,EAAE,SAAS;AACnC,aAAK;AAAA;AAAA;AAAA,IAlCP,oBAAoB;AAClB,aAAO,iBAAiB,UAAU,KAAK;AAAA;AAAA,IAGzC,uBAAuB;AACrB,aAAO,oBAAoB,UAAU,KAAK;AAAA;AAAA,IAoC5C,eAAe;AACb,UAAI,CAAC,KAAK;AAAO,eAAO;AACxB,YAAM,EAAE,WAAW,SAAS,eAAe,KAAK;AAChD,UAAI,CAAC;AAAY,eAAO;AACxB,WAAK,SAAS,EAAE,0BAA0B;AAC1C,YAAM,EAAE,aAAa,mBAAmB;AACxC,YAAM,EAAE,aAAa,iBAAiB;AAEtC,UACE,kBACA,gBACC,eAAe,iBAAkB,MAAM,IACxC;AACA,eAAO,KAAK,SAAS,EAAE,0BAA0B;AAAA;AAEnD,aAAO,KAAK,SAAS,EAAE,0BAA0B;AAAA;AAAA,IAGnD,cAAc;AACZ,YAAM,EAAE,cAAc,KAAK;AAC3B,UAAI,cAAc,WAAW,SAAS;AACpC,cAAM,gBAAgB,YAAY,MAAM;AAEtC,gBAAM,EAAE,WAAW,YAAY,KAAK;AACpC,cAAI,CAAC,aAAa,CAAC;AAAS,mBAAO;AACnC,wBAAc;AACd,eAAK,SAAS,EAAE,YAAY;AAC5B,iBAAO,KAAK;AAAA,WACX;AAAA;AAAA;AAAA,IAIP,SAAS;AACP,YAAM,EAAE,OAAO,UAAU;AACzB,YAAM,EAAE,0BAA0B,WAAW;AAC7C,aAAO,cAAc,kBAAkB;AAAA,WAClC;AAAA,QACH;AAAA,QACA,UAAU,KAAK;AAAA,QACf,gBAAgB,KAAK;AAAA,QACrB,gBAAgB,KAAK;AAAA,QACrB,cAAc,KAAK;AAAA,QACnB,YAAY,KAAK;AAAA,QACjB;AAAA,QACA,aAAa,MAAM;AACjB,cAAI,MAAM;AAAa,kBAAM;AAC7B,eAAK;AAAA;AAAA;AAAA;AAAA;AAMb,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/v1/ModalFeedBack/ModalFeedBack.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import React2 from "react";
+import { WarningCircle, CheckmarkCircle, HelpCircle, InfoCircle } from "@elliemae/ds-icons";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { MODAL_TYPE } from "../../constants";
+const feedbackIconSize = "xxl";
+const { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;
+const getModalType = (modalType, { hasError, hasWarning, hasSuccess, hasInfo, hasHelp }) => {
+  if ([WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1)
+    return modalType;
+  if (hasError)
+    return ERROR;
+  if (hasWarning)
+    return WARNING;
+  if (hasSuccess)
+    return SUCCESS;
+  if (hasHelp)
+    return HELP;
+  if (hasInfo)
+    return INFO;
+  return INFO;
+};
+const getIconType = (modalType) => {
+  switch (modalType) {
+    case WARNING:
+    case ERROR:
+      return /* @__PURE__ */ React2.createElement(WarningCircle, {
+        size: feedbackIconSize
+      });
+    case SUCCESS:
+      return /* @__PURE__ */ React2.createElement(CheckmarkCircle, {
+        size: feedbackIconSize
+      });
+    case HELP:
+      return /* @__PURE__ */ React2.createElement(HelpCircle, {
+        size: feedbackIconSize
+      });
+    case INFO:
+      return /* @__PURE__ */ React2.createElement(InfoCircle, {
+        size: feedbackIconSize
+      });
+    default:
+      return /* @__PURE__ */ React2.createElement(InfoCircle, {
+        size: feedbackIconSize
+      });
+  }
+};
+const ModalFeedBack = ({
+  className = "",
+  modalType = null,
+  hasError = false,
+  hasWarning = false,
+  hasSuccess = false,
+  hasInfo = false,
+  hasHelp = false
+}) => {
+  const type = getModalType(modalType, {
+    hasError,
+    hasWarning,
+    hasSuccess,
+    hasInfo,
+    hasHelp
+  });
+  const { cssClassName } = convertPropToCssClassName("modal-feedback", className, { modalType: type });
+  const feedbackIcon = getIconType(type);
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: cssClassName
+  }, feedbackIcon);
+};
+var ModalFeedBack_default = ModalFeedBack;
+export {
+  ModalFeedBack_default as default
+};
+//# sourceMappingURL=ModalFeedBack.js.map

package/dist/esm/v1/ModalFeedBack/ModalFeedBack.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v1/ModalFeedBack/ModalFeedBack.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { WarningCircle, CheckmarkCircle, HelpCircle, InfoCircle } from '@elliemae/ds-icons';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { MODAL_TYPE } from '../../constants';\n\nconst feedbackIconSize = 'xxl';\n\nconst { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;\n\nconst getModalType = (modalType, { hasError, hasWarning, hasSuccess, hasInfo, hasHelp }) => {\n  if ([WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1) return modalType;\n  if (hasError) return ERROR;\n  if (hasWarning) return WARNING;\n  if (hasSuccess) return SUCCESS;\n  if (hasHelp) return HELP;\n  if (hasInfo) return INFO;\n  return INFO;\n};\n\nconst getIconType = (modalType) => {\n  switch (modalType) {\n    case WARNING:\n    case ERROR:\n      return <WarningCircle size={feedbackIconSize} />;\n    case SUCCESS:\n      return <CheckmarkCircle size={feedbackIconSize} />;\n    case HELP:\n      return <HelpCircle size={feedbackIconSize} />;\n    case INFO:\n      return <InfoCircle size={feedbackIconSize} />;\n    default:\n      return <InfoCircle size={feedbackIconSize} />;\n  }\n};\n\nconst ModalFeedBack = ({\n  className = '',\n  modalType = null,\n  hasError = false,\n  hasWarning = false,\n  hasSuccess = false,\n  hasInfo = false,\n  hasHelp = false,\n}) => {\n  const type = getModalType(modalType, {\n    hasError,\n    hasWarning,\n    hasSuccess,\n    hasInfo,\n    hasHelp,\n  });\n  const { cssClassName } = convertPropToCssClassName('modal-feedback', className, { modalType: type });\n  const feedbackIcon = getIconType(type);\n\n  return <div className={cssClassName}>{feedbackIcon}</div>;\n};\n\nexport default ModalFeedBack;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB;AAEzB,MAAM,EAAE,SAAS,OAAO,SAAS,MAAM,SAAS;AAEhD,MAAM,eAAe,CAAC,WAAW,EAAE,UAAU,YAAY,YAAY,SAAS,cAAc;AAC1F,MAAI,CAAC,SAAS,OAAO,SAAS,MAAM,MAAM,QAAQ,aAAa;AAAI,WAAO;AAC1E,MAAI;AAAU,WAAO;AACrB,MAAI;AAAY,WAAO;AACvB,MAAI;AAAY,WAAO;AACvB,MAAI;AAAS,WAAO;AACpB,MAAI;AAAS,WAAO;AACpB,SAAO;AAAA;AAGT,MAAM,cAAc,CAAC,cAAc;AACjC,UAAQ;AAAA,SACD;AAAA,SACA;AACH,aAAO,qCAAC,eAAD;AAAA,QAAe,MAAM;AAAA;AAAA,SACzB;AACH,aAAO,qCAAC,iBAAD;AAAA,QAAiB,MAAM;AAAA;AAAA,SAC3B;AACH,aAAO,qCAAC,YAAD;AAAA,QAAY,MAAM;AAAA;AAAA,SACtB;AACH,aAAO,qCAAC,YAAD;AAAA,QAAY,MAAM;AAAA;AAAA;AAEzB,aAAO,qCAAC,YAAD;AAAA,QAAY,MAAM;AAAA;AAAA;AAAA;AAI/B,MAAM,gBAAgB,CAAC;AAAA,EACrB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,MACN;AACJ,QAAM,OAAO,aAAa,WAAW;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,QAAM,EAAE,iBAAiB,0BAA0B,kBAAkB,WAAW,EAAE,WAAW;AAC7F,QAAM,eAAe,YAAY;AAEjC,SAAO,qCAAC,OAAD;AAAA,IAAK,WAAW;AAAA,KAAe;AAAA;AAGxC,IAAO,wBAAQ;",
+  "names": []
+}

package/dist/esm/v2/DSModal.js

@@ -0,0 +1,131 @@
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import ReactModal from "react-modal";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { MODAL_TYPE_V2 } from "../constants";
+import { DSModalContent } from "./components/ModalContent";
+const DSModal = ({
+  containerProps = {},
+  className = "",
+  style = {},
+  size = "default",
+  modalType = MODAL_TYPE_V2.INFORMATION,
+  modalSubType = null,
+  modalTitle = "",
+  dataTestId = "ds-modal",
+  centered = false,
+  showRejectButton = false,
+  showClose = true,
+  searchProps = {},
+  actionsRef = () => null,
+  additionalFooterCssClass,
+  overridePropsConfirmButton = {},
+  overridePropsRejectButton = {},
+  children,
+  isOpen = true,
+  onClose = () => null,
+  onAfterOpen = () => null,
+  onConfirm = () => null,
+  onReject = () => null,
+  rejectLabel = "Discard",
+  confirmLabel = "Save",
+  shouldCloseOnOverlayClick = false,
+  appElement = "#root",
+  zIndex = 10,
+  removePadding = false
+}) => {
+  if (typeof document !== "undefined" && true && document && ReactModal.setAppElement) {
+    ReactModal.setAppElement(appElement);
+  }
+  const {
+    cssClassName,
+    classNameBlock,
+    classNameModifier
+  } = convertPropToCssClassName("modal-v2", className, { size });
+  return /* @__PURE__ */ React2.createElement(ReactModal, {
+    testId: dataTestId,
+    className: `${cssClassName} ${classNameBlock(`type-${modalType}`)}`,
+    contentLabel: modalTitle,
+    isOpen,
+    onAfterOpen,
+    onRequestClose: onClose,
+    overlayClassName: `${classNameBlock("overlay")} ${classNameModifier(centered ? "center" : "top")}`,
+    shouldCloseOnOverlayClick,
+    style: {
+      content: {
+        ...style
+      },
+      overlay: {
+        zIndex
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement(DSModalContent, {
+    actionsRef,
+    additionalFooterCssClass,
+    confirmLabel,
+    containerProps,
+    modalSubType,
+    modalTitle,
+    modalType,
+    onClose,
+    onConfirm,
+    onReject,
+    overridePropsConfirmButton,
+    overridePropsRejectButton,
+    rejectLabel,
+    searchProps,
+    showClose,
+    showRejectButton,
+    removePadding
+  }, children));
+};
+const props = {
+  containerProps: PropTypes.object.description("inject props to container wrapper"),
+  className: PropTypes.string.description("css class"),
+  style: PropTypes.object.description("style object for container wrapper"),
+  modalTitle: PropTypes.string.description("modal container title"),
+  centered: PropTypes.bool.description("center container"),
+  showRejectButton: PropTypes.bool.description("show reject button"),
+  showClose: PropTypes.bool.description("show close button"),
+  searchProps: PropTypes.object.description("Props for search component"),
+  additionalFooterCssClass: PropTypes.string.description("css class for footer"),
+  overridePropsConfirmButton: PropTypes.object.description("override props confirm button"),
+  overridePropsRejectButton: PropTypes.object.description("override props reject button"),
+  isOpen: PropTypes.bool.description("controlled isOpen flag"),
+  onClose: PropTypes.func.description("close callback"),
+  onAfterOpen: PropTypes.func.description("after open callback"),
+  onConfirm: PropTypes.func.description("confirm callback"),
+  onReject: PropTypes.func.description("reject callback"),
+  rejectLabel: PropTypes.string.description("reject label"),
+  confirmLabel: PropTypes.string.description("confirm text string"),
+  size: PropTypes.oneOf([
+    "default",
+    "xx-large",
+    "x-large",
+    "large",
+    "medium",
+    "small"
+  ]).description("modal container size"),
+  modalSubType: PropTypes.any.description("modal sub type"),
+  modalType: PropTypes.any.description("modal type"),
+  actionsRef: PropTypes.any.description("ref for modal footer actions"),
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf([PropTypes.element])
+  ]).description("modal container children"),
+  shouldCloseOnOverlayClick: PropTypes.bool.description("close on click outside container"),
+  appElement: PropTypes.string.description("App element ID to inject the modal"),
+  zIndex: PropTypes.number.description("zindex for modal container"),
+  removePadding: PropTypes.bool.description("remove modal builtin padding")
+};
+DSModal.propTypes = props;
+const DSModalWithSchema = describe(DSModal);
+DSModalWithSchema.propTypes = props;
+var DSModal_default = DSModal;
+export {
+  DSModalContent,
+  DSModalWithSchema,
+  DSModal_default as default
+};
+//# sourceMappingURL=DSModal.js.map

package/dist/esm/v2/DSModal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSModal.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { MODAL_TYPE_V2 } from '../constants';\nimport { DSModalContent } from './components/ModalContent';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  style = {},\n  size = 'default',\n  //\n  modalType = MODAL_TYPE_V2.INFORMATION,\n  modalSubType = null,\n  modalTitle = '',\n  dataTestId = 'ds-modal',\n  centered = false,\n  showRejectButton = false,\n  showClose = true,\n  searchProps = {},\n  // override\n  actionsRef = () => null,\n  additionalFooterCssClass,\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  // react modal\n  children,\n  isOpen = true,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Discard',\n  confirmLabel = 'Save',\n  shouldCloseOnOverlayClick = false,\n  appElement = '#root',\n  zIndex = 10,\n  removePadding = false,\n}) => {\n  if (\n    typeof document !== 'undefined' &&\n    process.env.NODE_ENV !== 'test' &&\n    document &&\n    ReactModal.setAppElement\n  ) {\n    ReactModal.setAppElement(appElement);\n  }\n\n  const {\n    cssClassName,\n    classNameBlock,\n    classNameModifier,\n  } = convertPropToCssClassName('modal-v2', className, { size });\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={`${cssClassName} ${classNameBlock(`type-${modalType}`)}`}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(\n        centered ? 'center' : 'top',\n      )}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          // position: 'absolute', https://jira.elliemae.io/browse/PUI-1471, the overlay should be positioned based on the browser window rather positioned absolute to its parent\n          zIndex,\n        },\n      }}\n    >\n      <DSModalContent\n        actionsRef={actionsRef}\n        additionalFooterCssClass={additionalFooterCssClass}\n        confirmLabel={confirmLabel}\n        containerProps={containerProps}\n        modalSubType={modalSubType}\n        modalTitle={modalTitle}\n        modalType={modalType}\n        onClose={onClose}\n        onConfirm={onConfirm}\n        onReject={onReject}\n        overridePropsConfirmButton={overridePropsConfirmButton}\n        overridePropsRejectButton={overridePropsRejectButton}\n        rejectLabel={rejectLabel}\n        searchProps={searchProps}\n        showClose={showClose}\n        showRejectButton={showRejectButton}\n        removePadding={removePadding}\n      >\n        {children}\n      </DSModalContent>\n    </ReactModal>\n  );\n};\n\nconst props = {\n  /** inject props to container wrapper */\n  containerProps: PropTypes.object.description(\n    'inject props to container wrapper',\n  ),\n  /** css class */\n  className: PropTypes.string.description('css class'),\n  /** style object for container wrapper */\n  style: PropTypes.object.description('style object for container wrapper'),\n  /** modal container title */\n  modalTitle: PropTypes.string.description('modal container title'),\n  /** center container */\n  centered: PropTypes.bool.description('center container'),\n  /** show reject button */\n  showRejectButton: PropTypes.bool.description('show reject button'),\n  /** show close button */\n  showClose: PropTypes.bool.description('show close button'),\n  /*\n    Props for search component\n  */\n  searchProps: PropTypes.object.description('Props for search component'),\n  /** css class for footer */\n  additionalFooterCssClass: PropTypes.string.description(\n    'css class for footer',\n  ),\n  /**  override props confirm button */\n  overridePropsConfirmButton: PropTypes.object.description(\n    'override props confirm button',\n  ),\n  /** override props reject button */\n  overridePropsRejectButton: PropTypes.object.description(\n    'override props reject button',\n  ),\n  /** controlled isOpen flag */\n  isOpen: PropTypes.bool.description('controlled isOpen flag'),\n  /** close callback */\n  onClose: PropTypes.func.description('close callback'),\n  /** after open callback */\n  onAfterOpen: PropTypes.func.description('after open callback'),\n  /** confirm callback */\n  onConfirm: PropTypes.func.description('confirm callback'),\n  /** reject callback */\n  onReject: PropTypes.func.description('reject callback'),\n  /** reject label */\n  rejectLabel: PropTypes.string.description('reject label'),\n  /** confirm text string */\n  confirmLabel: PropTypes.string.description('confirm text string'),\n  /** modal container size */\n  size: PropTypes.oneOf([\n    'default',\n    'xx-large',\n    'x-large',\n    'large',\n    'medium',\n    'small',\n  ]).description('modal container size'),\n  /** modal sub type */\n  modalSubType: PropTypes.any.description('modal sub type'),\n  /** modal type */\n  modalType: PropTypes.any.description('modal type'),\n  /** ref for modal footer actions */\n  actionsRef: PropTypes.any.description('ref for modal footer actions'),\n  /** modal container children */\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.arrayOf([PropTypes.element]),\n  ]).description('modal container children'),\n  /** close on click outside container */\n  shouldCloseOnOverlayClick: PropTypes.bool.description(\n    'close on click outside container',\n  ),\n  /*\n    App element ID to inject the modal\n  */\n  appElement: PropTypes.string.description(\n    'App element ID to inject the modal',\n  ),\n  /** zindex for modal container */\n  zIndex: PropTypes.number.description('zindex for modal container'),\n  /** remove modal builtin padding */\n  removePadding: PropTypes.bool.description('remove modal builtin padding'),\n};\n\nDSModal.propTypes = props;\n\nconst DSModalWithSchema = describe(DSModal);\nDSModalWithSchema.propTypes = props;\n\nexport { DSModalContent, DSModalWithSchema };\nexport default DSModal;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/v2/blocks.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+const blockName = "modal-v2";
+const ModalHeader = aggregatedClasses("div")(blockName, "modal-header", ({ type, showClose }) => ({
+  [type]: type,
+  "with-close": showClose
+}));
+const ModalHeaderTopRight = aggregatedClasses("div")(blockName, "modal-header-close", ({ type }) => ({
+  [type]: type
+}));
+const ModalFeedback = aggregatedClasses("div")(blockName, "modal-feedback", ({ type }) => ({
+  [type]: type
+}));
+const ModalTitle = aggregatedClasses("h3")(blockName, "modal-title", ({ type }) => ({
+  [type]: type
+}));
+const ModalContent = aggregatedClasses("div")(blockName, "modal-content", ({ type, removePadding }) => ({
+  [type]: type,
+  "remove-padding": removePadding
+}));
+const ModalWrapper = aggregatedClasses("div")(blockName, "modal-wrapper", ({ type, removePadding }) => ({
+  [type]: type,
+  "remove-padding": removePadding
+}));
+const ModalFooter = aggregatedClasses("div")(blockName, "modal-footer", ({ type, additionalFooterCssClass }) => ({
+  [type]: type,
+  [additionalFooterCssClass]: additionalFooterCssClass
+}));
+const ModalFooterActions = aggregatedClasses("div")(blockName, "modal-footer-actions", ({ type }) => ({
+  [type]: type
+}));
+export {
+  ModalContent,
+  ModalFeedback,
+  ModalFooter,
+  ModalFooterActions,
+  ModalHeader,
+  ModalHeaderTopRight,
+  ModalTitle,
+  ModalWrapper
+};
+//# sourceMappingURL=blocks.js.map

package/dist/esm/v2/blocks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/blocks.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'modal-v2';\n\nexport const ModalHeader = aggregatedClasses('div')(blockName, 'modal-header', ({ type, showClose }) => ({\n  [type]: type,\n  'with-close': showClose,\n}));\n\nexport const ModalHeaderTopRight = aggregatedClasses('div')(blockName, 'modal-header-close', ({ type }) => ({\n  [type]: type,\n}));\n\nexport const ModalFeedback = aggregatedClasses('div')(blockName, 'modal-feedback', ({ type }) => ({\n  [type]: type,\n}));\n\nexport const ModalTitle = aggregatedClasses('h3')(blockName, 'modal-title', ({ type }) => ({\n  [type]: type,\n}));\n\nexport const ModalContent = aggregatedClasses('div')(blockName, 'modal-content', ({ type, removePadding }) => ({\n  [type]: type,\n  'remove-padding': removePadding,\n}));\n\nexport const ModalWrapper = aggregatedClasses('div')(blockName, 'modal-wrapper', ({ type, removePadding }) => ({\n  [type]: type,\n  'remove-padding': removePadding,\n}));\n\nexport const ModalFooter = aggregatedClasses('div')(\n  blockName,\n  'modal-footer',\n  ({ type, additionalFooterCssClass }) => ({\n    [type]: type,\n    [additionalFooterCssClass]: additionalFooterCssClass,\n  }),\n);\n\nexport const ModalFooterActions = aggregatedClasses('div')(blockName, 'modal-footer-actions', ({ type }) => ({\n  [type]: type,\n}));\n"],
+  "mappings": "AAAA;ACAA;AAEA,MAAM,YAAY;AAEX,MAAM,cAAc,kBAAkB,OAAO,WAAW,gBAAgB,CAAC,EAAE,MAAM,gBAAiB;AAAA,GACtG,OAAO;AAAA,EACR,cAAc;AAAA;AAGT,MAAM,sBAAsB,kBAAkB,OAAO,WAAW,sBAAsB,CAAC,EAAE,WAAY;AAAA,GACzG,OAAO;AAAA;AAGH,MAAM,gBAAgB,kBAAkB,OAAO,WAAW,kBAAkB,CAAC,EAAE,WAAY;AAAA,GAC/F,OAAO;AAAA;AAGH,MAAM,aAAa,kBAAkB,MAAM,WAAW,eAAe,CAAC,EAAE,WAAY;AAAA,GACxF,OAAO;AAAA;AAGH,MAAM,eAAe,kBAAkB,OAAO,WAAW,iBAAiB,CAAC,EAAE,MAAM,oBAAqB;AAAA,GAC5G,OAAO;AAAA,EACR,kBAAkB;AAAA;AAGb,MAAM,eAAe,kBAAkB,OAAO,WAAW,iBAAiB,CAAC,EAAE,MAAM,oBAAqB;AAAA,GAC5G,OAAO;AAAA,EACR,kBAAkB;AAAA;AAGb,MAAM,cAAc,kBAAkB,OAC3C,WACA,gBACA,CAAC,EAAE,MAAM,+BAAgC;AAAA,GACtC,OAAO;AAAA,GACP,2BAA2B;AAAA;AAIzB,MAAM,qBAAqB,kBAAkB,OAAO,WAAW,wBAAwB,CAAC,EAAE,WAAY;AAAA,GAC1G,OAAO;AAAA;",
+  "names": []
+}

package/dist/esm/v2/components/DecisionHeader.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import React2 from "react";
+import { Close } from "@elliemae/ds-icons";
+import DSButton from "@elliemae/ds-button";
+import { ModalHeader } from "../blocks";
+const DecisionHeader = ({ onClose, showClose }) => /* @__PURE__ */ React2.createElement(ModalHeader, {
+  classProps: { type: "decision", showClose }
+}, showClose && /* @__PURE__ */ React2.createElement(DSButton, {
+  buttonType: "link",
+  containerProps: { "data-testid": "modal-button-close" },
+  icon: /* @__PURE__ */ React2.createElement(Close, null),
+  onClick: onClose
+}));
+var DecisionHeader_default = DecisionHeader;
+export {
+  DecisionHeader,
+  DecisionHeader_default as default
+};
+//# sourceMappingURL=DecisionHeader.js.map

package/dist/esm/v2/components/DecisionHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/components/DecisionHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { ModalHeader } from '../blocks';\n\nexport const DecisionHeader = ({ onClose, showClose }) => (\n  <ModalHeader classProps={{ type: 'decision', showClose }}>\n    {showClose && (\n      <DSButton\n        buttonType=\"link\"\n        containerProps={{ 'data-testid': 'modal-button-close' }}\n        icon={<Close />}\n        onClick={onClose}\n      />\n    )}\n  </ModalHeader>\n);\n\nexport default DecisionHeader;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEO,MAAM,iBAAiB,CAAC,EAAE,SAAS,gBACxC,qCAAC,aAAD;AAAA,EAAa,YAAY,EAAE,MAAM,YAAY;AAAA,GAC1C,aACC,qCAAC,UAAD;AAAA,EACE,YAAW;AAAA,EACX,gBAAgB,EAAE,eAAe;AAAA,EACjC,MAAM,qCAAC,OAAD;AAAA,EACN,SAAS;AAAA;AAMjB,IAAO,yBAAQ;",
+  "names": []
+}