intelicoreact 1.2.17 → 1.2.19

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -9,6 +9,9 @@
   --line-height: 20px;
   --border-radius: 3px;
 
+  position: relative;
+  z-index: 1;
+
   /* position: relative;
   width: 335px;
   //height: calc(var(--input-height) + var(--label-line-height));
@@ -76,6 +79,7 @@
   }
 
   &_focused {
+    z-index: 2;
     .date-range-input__static-part {
       border: 1px solid blue;
       filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));

package/dist/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.js

@@ -61,7 +61,7 @@ var RadioGroupWithInput = function RadioGroupWithInput(_ref) {
     className: (0, _classnames.default)('radio-group-input', className, "radio-group-input--".concat(direction), {
       'radio-group-input--disabled': disabled
     })
-  }, options.map(function (item) {
+  }, options === null || options === void 0 ? void 0 : options.map(function (item) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: item.id,
       className: (0, _classnames.default)('radio-group-input-item', "radio-group-input-item-".concat(item.id))

package/dist/Atomic/UI/Modal/Modal.js

@@ -15,16 +15,18 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactFeather = require("react-feather");
-
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
-require("./Modal.scss");
-
 var _ModalFooter = _interopRequireDefault(require("./partials/ModalFooter"));
 
 var _ModalTitle = _interopRequireDefault(require("./partials/ModalTitle"));
 
+var _useMobileModal2 = _interopRequireDefault(require("./partials/useMobileModal"));
+
+require("./Modal.scss");
+
+require("./ModalMobile.scss");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -87,6 +89,15 @@ var Modal = function Modal(_ref2) {
       leftContentOfFooter = _ref2.leftContentOfFooter,
       testId = _ref2.testId,
       noHeaderCloseBtn = _ref2.noHeaderCloseBtn;
+
+  var _useMobileModal = (0, _useMobileModal2.default)(),
+      modalMobileHeaderRef = _useMobileModal.modalMobileHeaderRef,
+      modalMobileBodyRef = _useMobileModal.modalMobileBodyRef,
+      modalMobileFooterRef = _useMobileModal.modalMobileFooterRef,
+      MODALS_LOGIC = _useMobileModal.MODALS_LOGIC,
+      renderModal = _useMobileModal.renderModal,
+      isMobile = _useMobileModal.isMobile;
+
   if (!isOpen) return null;
   var handle = {
     confirm: function confirm() {
@@ -122,12 +133,21 @@ var Modal = function Modal(_ref2) {
     "data-testid": 'modal-closeOverlay',
     className: isOpen ? 'modal-overlay' : 'hidden',
     onClick: closeModal
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), renderModal( /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: size
     },
-    className: (0, _classnames.default)(className, "".concat(isOpen ? 'modal' : 'hidden'))
+    className: (0, _classnames.default)(className, {
+      'modal': isOpen,
+      'modal-mobile': isOpen && isMobile,
+      'hidden': !isOpen
+    })
   }, !noHeader && /*#__PURE__*/_react.default.createElement(_ModalTitle.default, {
+    wrapperRef: modalMobileHeaderRef,
+    className: (0, _classnames.default)({
+      'modal__header--hidden': MODALS_LOGIC.IS_HEADER_HIDDEN,
+      'modal__header--sticky': !MODALS_LOGIC.IS_HEADER_HIDDEN && MODALS_LOGIC.IS_HEADER_STICKY
+    }),
     variant: variant,
     isForced: forced,
     onClose: handle.decline,
@@ -137,11 +157,17 @@ var Modal = function Modal(_ref2) {
     title: title,
     onlyTitle: onlyTitle
   }))), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, atributesForModalBody, {
+    ref: modalMobileBodyRef,
     className: (0, _classnames.default)('modal__body', {
       'modal__body--no-footer': noFooter
     })
   }), children), !noFooter && /*#__PURE__*/_react.default.createElement(_ModalFooter.default, {
-    className: leftContentOfFooter ? 'modal__footer_with-left-content' : ''
+    wrapperRef: modalMobileFooterRef,
+    className: (0, _classnames.default)({
+      'modal__footer--hidden': MODALS_LOGIC.IS_FOOTER_HIDDEN,
+      'modal__footer--sticky': !MODALS_LOGIC.IS_FOOTER_HIDDEN && MODALS_LOGIC.IS_FOOTER_STICKY,
+      'modal__footer_with-left-content': leftContentOfFooter
+    })
   }, leftContentOfFooter, /*#__PURE__*/_react.default.createElement("div", {
     className: "modal__buttons-block"
   }, !noCloseBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -167,7 +193,7 @@ var Modal = function Modal(_ref2) {
     disabled: confirmBtnDisable,
     icon: confirmBtnIcon,
     isIconRight: isConfirmBtnIconPositionRight
-  })))));
+  }))))));
 };
 
 var _default = Modal;

package/dist/Atomic/UI/Modal/ModalMobile.scss

@@ -0,0 +1,48 @@
+@media only screen and (max-width:767px) {
+  .modal-mobile-container {
+    max-height: 100dvh;
+    max-width: 100dvw;
+    position: relative;
+    top: 0;
+    overflow-y: auto;
+    box-sizing: border-box;
+    border-radius: 16px 16px 0 0;
+
+    .modal {
+      margin-top: 16px!important;
+      max-height: unset!important;
+      max-width: 100vw;
+      border-radius: 16px 16px 0 0;
+
+      &__header,
+      &__footer {
+        left: 0;
+        width: 100%;
+        box-sizing: border-box;
+        z-index: 2;
+
+        &--hidden {
+          position: relative;
+        }
+
+        &--sticky {
+          position: sticky;
+          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
+        }
+      }
+
+      &__header {
+        top: 0;
+      }
+
+      &__body,
+      &__footer {
+        border-radius: 0!important;
+      }
+
+      &__footer {
+        bottom: 0;
+      }
+    }
+  }
+}

package/dist/Atomic/UI/Modal/partials/ModalFooter.js

@@ -14,8 +14,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var ModalFooter = function ModalFooter(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children;
+      children = _ref.children,
+      wrapperRef = _ref.wrapperRef;
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: wrapperRef,
     className: (0, _classnames.default)('modal__footer', className)
   }, children);
 };

package/dist/Atomic/UI/Modal/partials/ModalTitle.js

@@ -21,9 +21,12 @@ var ModalTitle = function ModalTitle(_ref) {
       children = _ref.children,
       isForced = _ref.isForced,
       onClose = _ref.onClose,
-      noHeaderCloseBtn = _ref.noHeaderCloseBtn;
+      noHeaderCloseBtn = _ref.noHeaderCloseBtn,
+      className = _ref.className,
+      wrapperRef = _ref.wrapperRef;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('modal__header', (0, _defineProperty2.default)({}, "modal__header-".concat(variant), variant))
+    ref: wrapperRef,
+    className: (0, _classnames.default)('modal__header', className, (0, _defineProperty2.default)({}, "modal__header-".concat(variant), variant))
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)('modal__header-title', (0, _defineProperty2.default)({}, "modal__header-".concat(variant, "-title"), variant))
   }, children), !isForced && /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/UI/Modal/partials/useMobileModal.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMobileModal;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var SCROLL_DIRECTION = {
+  UP: 'up',
+  DOWN: 'down'
+};
+
+function useMobileModal() {
+  var _modalMobileContainer, _modalMobileContainer2, _modalMobileHeaderRef, _modalMobileHeaderRef2, _modalMobileFooterRef, _modalMobileFooterRef2, _modalMobileFooterRef3, _modalMobileFooterRef4, _modalMobileBodyRef$c, _modalMobileBodyRef$c2;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMobile = _useState2[0],
+      setIsMobile = _useState2[1];
+
+  var modalMobileContainerRef = (0, _react.useRef)(null);
+  var modalMobileHeaderRef = (0, _react.useRef)(null);
+  var modalMobileFooterRef = (0, _react.useRef)(null);
+  var modalMobileBodyRef = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      scrollTop = _useState4[0],
+      setScrollTop = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      scrollTopPrev = _useState6[0],
+      setScrollTopPrev = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(SCROLL_DIRECTION.UP),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      scrollDirection = _useState8[0],
+      setScrollDirection = _useState8[1];
+
+  var modalMobileContainerHeight = modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : (_modalMobileContainer = modalMobileContainerRef.current) === null || _modalMobileContainer === void 0 ? void 0 : (_modalMobileContainer2 = _modalMobileContainer.getBoundingClientRect()) === null || _modalMobileContainer2 === void 0 ? void 0 : _modalMobileContainer2.height;
+  var headerTop = modalMobileHeaderRef === null || modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef = modalMobileHeaderRef.current) === null || _modalMobileHeaderRef === void 0 ? void 0 : (_modalMobileHeaderRef2 = _modalMobileHeaderRef.getBoundingClientRect()) === null || _modalMobileHeaderRef2 === void 0 ? void 0 : _modalMobileHeaderRef2.top;
+  var footerBottom = modalMobileContainerHeight - (modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef = modalMobileFooterRef.current) === null || _modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef2 = _modalMobileFooterRef.getBoundingClientRect()) === null || _modalMobileFooterRef2 === void 0 ? void 0 : _modalMobileFooterRef2.bottom);
+  var footerHeight = modalMobileFooterRef === null || modalMobileFooterRef === void 0 ? void 0 : (_modalMobileFooterRef3 = modalMobileFooterRef.current) === null || _modalMobileFooterRef3 === void 0 ? void 0 : (_modalMobileFooterRef4 = _modalMobileFooterRef3.getBoundingClientRect()) === null || _modalMobileFooterRef4 === void 0 ? void 0 : _modalMobileFooterRef4.height;
+  var bodyTop = modalMobileBodyRef === null || modalMobileBodyRef === void 0 ? void 0 : (_modalMobileBodyRef$c = modalMobileBodyRef.current) === null || _modalMobileBodyRef$c === void 0 ? void 0 : (_modalMobileBodyRef$c2 = _modalMobileBodyRef$c.getBoundingClientRect()) === null || _modalMobileBodyRef$c2 === void 0 ? void 0 : _modalMobileBodyRef$c2.top;
+  /* MODALS LOGIC | BEGIN */
+  // Detect Mobile
+
+  (0, _react.useEffect)(function () {
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) setIsMobile(true);
+  }, [navigator.userAgent]); // Count ScrollTop
+
+  (0, _react.useEffect)(function () {
+    var el = modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current;
+
+    if (el) {
+      el.addEventListener('scroll', function () {
+        setScrollTop(function (scrollTop) {
+          if (scrollTop !== el.scrollTop) setScrollTopPrev(scrollTop);
+          return el.scrollTop;
+        });
+      });
+    }
+  }, [modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current]); // Count ScrollDirection
+
+  (0, _react.useEffect)(function () {
+    setScrollDirection(scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : SCROLL_DIRECTION.DOWN);
+  }, [scrollTop, scrollTopPrev]);
+  var MODALS_LOGIC = {
+    IS_HEADER_HIDDEN: !isMobile ? false : footerBottom * -1 <= footerHeight || scrollDirection === SCROLL_DIRECTION.DOWN,
+    IS_HEADER_STICKY: !isMobile ? false : headerTop <= 0,
+    IS_FOOTER_HIDDEN: !isMobile ? false : bodyTop > 0 || scrollDirection === SCROLL_DIRECTION.UP,
+    IS_FOOTER_STICKY: !isMobile ? false : footerBottom <= 0
+  };
+  /* MODALS LOGIC | END */
+
+  var renderMobileModal = function renderMobileModal(modal) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "modal-mobile-container",
+      ref: modalMobileContainerRef
+    }, modal);
+  };
+
+  var renderModal = function renderModal(modal) {
+    return isMobile ? renderMobileModal(modal) : modal;
+  };
+
+  return {
+    modalMobileContainerRef: modalMobileContainerRef,
+    modalMobileHeaderRef: modalMobileHeaderRef,
+    modalMobileBodyRef: modalMobileBodyRef,
+    modalMobileFooterRef: modalMobileFooterRef,
+    MODALS_LOGIC: MODALS_LOGIC,
+    SCROLL_DIRECTION: SCROLL_DIRECTION,
+    renderModal: renderModal,
+    isMobile: isMobile
+  };
+}

package/dist/Atomic/UI/ModalBackup/Modal.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderModalTitle = exports.default = exports.KEY_CODE = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactFeather = require("react-feather");
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+require("./Modal.scss");
+
+var _ModalFooter = _interopRequireDefault(require("./partials/ModalFooter"));
+
+var _ModalTitle = _interopRequireDefault(require("./partials/ModalTitle"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var KEY_CODE = Object.freeze({
+  ENTER: 13,
+  ESC: 27
+});
+exports.KEY_CODE = KEY_CODE;
+
+var renderModalTitle = function renderModalTitle(_ref) {
+  var mode = _ref.mode,
+      title = _ref.title,
+      onlyTitle = _ref.onlyTitle;
+  if (mode && mode !== 'default' && !onlyTitle) return "".concat(mode[0].toUpperCase() + mode.slice(1), " ").concat(title);
+  return title;
+};
+
+exports.renderModalTitle = renderModalTitle;
+
+var Modal = function Modal(_ref2) {
+  var _ref2$zIndex = _ref2.zIndex,
+      zIndex = _ref2$zIndex === void 0 ? 100 : _ref2$zIndex,
+      isOpen = _ref2.isOpen,
+      onConfirm = _ref2.onConfirm,
+      onDecline = _ref2.onDecline,
+      closeModal = _ref2.closeModal,
+      children = _ref2.children,
+      className = _ref2.className,
+      title = _ref2.title,
+      variant = _ref2.variant,
+      onlyTitle = _ref2.onlyTitle,
+      mode = _ref2.mode,
+      size = _ref2.size,
+      _ref2$atributesForMod = _ref2.atributesForModalBody,
+      atributesForModalBody = _ref2$atributesForMod === void 0 ? {} : _ref2$atributesForMod,
+      confirmBtnClassName = _ref2.confirmBtnClassName,
+      confirmBtnLabel = _ref2.confirmBtnLabel,
+      _ref2$confirmBtnVaria = _ref2.confirmBtnVariant,
+      confirmBtnVariant = _ref2$confirmBtnVaria === void 0 ? 'primary' : _ref2$confirmBtnVaria,
+      confirmBtnDisable = _ref2.confirmBtnDisable,
+      confirmBtnIcon = _ref2.confirmBtnIcon,
+      isConfirmBtnIconPositionRight = _ref2.isConfirmBtnIconPositionRight,
+      noConfirmBtn = _ref2.noConfirmBtn,
+      noCloseBtn = _ref2.noCloseBtn,
+      noFooter = _ref2.noFooter,
+      noHeader = _ref2.noHeader,
+      closeBtnClassName = _ref2.closeBtnClassName,
+      closeBtnText = _ref2.closeBtnText,
+      closeBtnVariant = _ref2.closeBtnVariant,
+      closeBtnDisable = _ref2.closeBtnDisable,
+      closeBtnIcon = _ref2.closeBtnIcon,
+      forced = _ref2.forced,
+      btnClassNames = _ref2.btnClassNames,
+      isCloseBtnIconPositionRight = _ref2.isCloseBtnIconPositionRight,
+      _ref2$submitOnEnter = _ref2.submitOnEnter,
+      submitOnEnter = _ref2$submitOnEnter === void 0 ? false : _ref2$submitOnEnter,
+      _ref2$closeOnEsc = _ref2.closeOnEsc,
+      closeOnEsc = _ref2$closeOnEsc === void 0 ? false : _ref2$closeOnEsc,
+      leftContentOfFooter = _ref2.leftContentOfFooter,
+      testId = _ref2.testId,
+      noHeaderCloseBtn = _ref2.noHeaderCloseBtn;
+  if (!isOpen) return null;
+  var handle = {
+    confirm: function confirm() {
+      onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+    },
+    decline: function decline() {
+      //? closeModal используется для ESC и оверлея, давно хотелось иметь возможность разделить
+      //? Теперь можно не передавать closeModal, а для cancel-кнопки передать отдельный обработчик
+      if (typeof onDecline === 'function') onDecline();else closeModal === null || closeModal === void 0 ? void 0 : closeModal();
+    },
+    pressEnter: function pressEnter(event) {
+      if (event.keyCode === KEY_CODE.ENTER && !event.repeat) handle.confirm();
+    },
+    pressEsc: function pressEsc() {
+      if (event.keyCode === KEY_CODE.ESC && !event.repeat) closeModal === null || closeModal === void 0 ? void 0 : closeModal();
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (submitOnEnter) document.addEventListener('keyup', handle.pressEnter);
+    if (closeOnEsc) document.addEventListener('keyup', handle.pressEsc);
+    return function () {
+      document.removeEventListener('keyup', handle.pressEnter);
+      document.removeEventListener('keyup', handle.pressEsc);
+    };
+  }, [submitOnEnter, closeOnEsc]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      zIndex: zIndex
+    },
+    "data-testid": testId,
+    className: "modal-box j5"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'modal-closeOverlay',
+    className: isOpen ? 'modal-overlay' : 'hidden',
+    onClick: closeModal
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: size
+    },
+    className: (0, _classnames.default)(className, "".concat(isOpen ? 'modal' : 'hidden'))
+  }, !noHeader && /*#__PURE__*/_react.default.createElement(_ModalTitle.default, {
+    variant: variant,
+    isForced: forced,
+    onClose: handle.decline,
+    noHeaderCloseBtn: noHeaderCloseBtn
+  }, /*#__PURE__*/_react.default.createElement("span", null, renderModalTitle({
+    mode: mode,
+    title: title,
+    onlyTitle: onlyTitle
+  }))), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, atributesForModalBody, {
+    className: (0, _classnames.default)('modal__body', {
+      'modal__body--no-footer': noFooter
+    })
+  }), children), !noFooter && /*#__PURE__*/_react.default.createElement(_ModalFooter.default, {
+    className: leftContentOfFooter ? 'modal__footer_with-left-content' : ''
+  }, leftContentOfFooter, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal__buttons-block"
+  }, !noCloseBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    testId: "modal",
+    className: (0, _classnames.default)(closeBtnClassName, btnClassNames),
+    variant: closeBtnVariant || 'dark-outline',
+    onClick: function onClick() {
+      return handle.decline();
+    },
+    label: closeBtnText || 'Cancel',
+    disabled: closeBtnDisable,
+    icon: closeBtnIcon,
+    isIconRight: isCloseBtnIconPositionRight,
+    tabIndex: 1
+  }), !noConfirmBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    testId: "modal",
+    onClick: function onClick() {
+      return handle.confirm();
+    },
+    label: confirmBtnLabel || (mode === null || mode === void 0 ? void 0 : mode[0].toUpperCase()) + (mode === null || mode === void 0 ? void 0 : mode.slice(1)) || 'Apply',
+    className: (0, _classnames.default)('ml5', confirmBtnClassName, btnClassNames),
+    variant: confirmBtnVariant,
+    disabled: confirmBtnDisable,
+    icon: confirmBtnIcon,
+    isIconRight: isConfirmBtnIconPositionRight
+  })))));
+};
+
+var _default = Modal;
+exports.default = _default;

package/dist/Atomic/UI/ModalBackup/Modal.scss

@@ -0,0 +1,333 @@
+@import "../../../scss/_vars";
+@import "../../../scss/mixins";
+
+.modal-overlay {
+  position: fixed;
+  z-index: 4;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  transition: opacity 0.2s ease;
+
+  opacity: 0.5;
+  background-color: black;
+}
+
+.modal {
+  --modal-min-height: 300px;
+  --max-height: calc(100% - 30px);
+
+  position: relative;
+  z-index: 5;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 600px;
+  min-height: var(--modal-min-height);
+  max-height: var(--max-height);
+  margin: 0 10px;
+
+  border-radius: 6px;
+  background-color: #FFF;
+  box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
+
+  &__header {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 10px 15px;
+
+    border-bottom: 1px solid #E2E5EC;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-color: #F7FAFC;
+
+    &-primary {
+      background-color: $color--primary;
+
+      &-title {
+        color: #ffffff;
+
+        font-size: 16px;
+        font-weight: 400;
+      }
+    }
+
+    &-title {
+      color: $color--primary;
+
+      font-size: 16px;
+      font-weight: normal;
+    }
+  }
+
+  &__body {
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    flex-grow: 1;
+    padding: 15px;
+
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    background-color: #F7FAFC;
+    &:first-of-type {
+      border-top-right-radius: 4px;
+      border-top-left-radius: 4px;
+    }
+
+    @include custom-scroll2;
+
+    &--no-footer {
+      padding: 15px;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    padding: 7.5px 15px;
+
+    border-top: 1px solid #E2E5EC;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    background-color: #F7FAFC;
+
+    &_with-left-content {
+      justify-content: space-between;
+    }
+
+    &--inbody {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
+      width: calc(100% - 30px);
+
+      background-color: #FFFF;
+    }
+  }
+
+  &__buttons-block {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+}
+
+.modal__footer--noborder {
+  border-top: none;
+}
+
+.modal-box {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  animation-name: fadeIn;
+  animation-duration: 0.25s;
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.consumer-info-modal {
+  overflow-x: auto;
+
+  .button-fin {
+    background-color: #FFFF;
+  }
+
+  .modal__body {
+    min-height: 200px;
+    padding: 0 15px;
+  }
+}
+
+.modal-close-icon-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 40px;
+  height: 38px;
+  height: 100%;
+
+  cursor: pointer;
+
+  color: #1E1E2D;
+  //background-color: inherit;
+  border-top-right-radius: 5px;
+  background: transparent;
+
+  &:hover {
+    background-color: #E2E5EC;
+  }
+
+  &-primary {
+    color: #1E1E2D;
+
+    &:hover {
+      opacity: 1;
+      background-color: #5162D4;
+    }
+  }
+
+  &-merchant {
+    color: #1E1E2D;
+
+    &:hover {
+      opacity: 1;
+      background-color: #5162D4;
+    }
+  }
+}
+
+.modal-close-icon {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+}
+
+.modal-text-card {
+  padding: 15px 0;
+
+  text-align: left;
+  white-space: normal;
+
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.prompt-text-card {
+  padding: 0;
+}
+
+.included-selector-modal {
+  &--box {
+    overflow-x: auto;
+
+    max-height: calc(100% - 32px);
+  }
+
+  &__th {
+    &--id {
+      width: 1%;
+    }
+  }
+
+  &__td {
+    &--id {
+      color: #9AA0B9;
+    }
+  }
+
+  .simple-table {
+    overflow-x: unset;
+
+    min-height: 400px;
+    max-height: 500px;
+
+    thead {
+      background-color: unset;
+
+      th {
+        padding: 10px 15px;
+
+        border-right: 1px solid #E2E5EC;
+
+        font-weight: 400;
+      }
+
+      th:first-child,
+      th:last-child {
+        border: none;
+      }
+    }
+
+    tbody {
+      tr:first-child {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          top: 0;
+          left: 0;
+
+          width: 100%;
+          height: 8px;
+
+          content: "";
+
+          background: linear-gradient(180deg, rgb(0 0 0 / 15.2%) 0%, rgb(0 0 0 / 0%) 100%);
+        }
+      }
+
+      tr:last-child {
+        border-bottom: none;
+      }
+    }
+
+    td {
+      padding: 2.25px 15px;
+    }
+
+    .tr-as-selector:hover td {
+      background-color: #FFEDC8;
+    }
+  }
+}
+
+.reports-settings-modal-box {
+  .modal__body {
+    padding: 0;
+  }
+}
+
+.confirm-modal {
+  border-radius: 4px;
+
+  .modal {
+    &__header-title {
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    &__body {
+      .modal-text-card {
+        padding: 0;
+      }
+    }
+
+    &__footer {
+      background-color: #FFFF;
+    }
+  }
+}

package/dist/Atomic/UI/ModalBackup/ModalHOC.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactFeather = require("react-feather");
+
+require("./Modal.scss");
+
+var _Modal2 = require("./Modal");
+
+var _ModalTitle = _interopRequireDefault(require("./partials/ModalTitle"));
+
+var Modal = function Modal(_ref) {
+  var _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex,
+      isOpen = _ref.isOpen,
+      closeModal = _ref.closeModal,
+      children = _ref.children,
+      className = _ref.className,
+      size = _ref.size,
+      testId = _ref.testId;
+  if (!isOpen) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      zIndex: zIndex
+    },
+    "data-testid": testId,
+    className: "modal-box j5"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'modal-closeOverlay',
+    className: "modal-overlay",
+    onClick: closeModal
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: size
+    },
+    className: (0, _classnames.default)(className, 'modal')
+  }, children));
+};
+
+var _default = Modal;
+exports.default = _default;

package/dist/Atomic/UI/ModalBackup/partials/ModalFooter.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var ModalFooter = function ModalFooter(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('modal__footer', className)
+  }, children);
+};
+
+var _default = ModalFooter;
+exports.default = _default;

package/dist/Atomic/UI/ModalBackup/partials/ModalTitle.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactFeather = require("react-feather");
+
+var ModalTitle = function ModalTitle(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+      children = _ref.children,
+      isForced = _ref.isForced,
+      onClose = _ref.onClose,
+      noHeaderCloseBtn = _ref.noHeaderCloseBtn;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('modal__header', (0, _defineProperty2.default)({}, "modal__header-".concat(variant), variant))
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)('modal__header-title', (0, _defineProperty2.default)({}, "modal__header-".concat(variant, "-title"), variant))
+  }, children), !isForced && /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'modal--button-closeCross',
+    onClick: onClose,
+    className: (0, _classnames.default)('modal-close-icon-box', {
+      'modal-close-icon-box-primary': variant === 'primary'
+    })
+  }, !noHeaderCloseBtn && /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+    className: "modal-close-icon"
+  })));
+};
+
+var _default = ModalTitle;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.2.17",
+  "version": "1.2.19",
   "description": "",
   "main": "dist/index.js",
   "files": [