intelicoreact 1.5.38 → 1.5.41

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

@@ -1,179 +1,180 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    KEY_CODE: function() {
-        return KEY_CODE;
-    },
-    default: function() {
-        return _default;
-    },
-    renderModalTitle: function() {
-        return renderModalTitle;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _react = require("react");
-const _useHandleKeyPress = /*#__PURE__*/ _interop_require_default(require("../../../Functions/useKeyPress/useHandleKeyPress"));
-const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));
-const _ModalFooter = /*#__PURE__*/ _interop_require_default(require("./partials/ModalFooter"));
-const _ModalTitle = /*#__PURE__*/ _interop_require_default(require("./partials/ModalTitle"));
-const _useMobileModal = /*#__PURE__*/ _interop_require_default(require("./partials/useMobileModal"));
+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 _Button = _interopRequireDefault(require("../Button/Button"));
+var _useHandleKeyPress = _interopRequireDefault(require("./../../../Functions/useKeyPress/useHandleKeyPress"));
+var _ModalFooter = _interopRequireDefault(require("./partials/ModalFooter"));
+var _ModalTitle = _interopRequireDefault(require("./partials/ModalTitle"));
+var _useMobileModal = _interopRequireDefault(require("./partials/useMobileModal"));
 require("./Modal.scss");
 require("./ModalMobile.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const attrsForModalBodyDefault = {};
-const KEY_CODE = Object.freeze({
-    ENTER: 13,
-    ESC: 27
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const KEY_CODE = exports.KEY_CODE = Object.freeze({
+  ENTER: 13,
+  ESC: 27
 });
-function renderModalTitle({ mode, title, onlyTitle }) {
-    if (mode && mode !== 'default' && !onlyTitle) {
-        return `${mode[0].toUpperCase()}${mode.slice(1)} ${title}`;
+const renderModalTitle = _ref => {
+  let {
+    mode,
+    title,
+    onlyTitle
+  } = _ref;
+  if (mode && mode !== "default" && !onlyTitle) return `${mode[0].toUpperCase() + mode.slice(1)} ${title}`;
+  return title;
+};
+exports.renderModalTitle = renderModalTitle;
+const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    zIndex = 100,
+    isOpen,
+    onConfirm,
+    onDecline,
+    closeModal,
+    children,
+    className,
+    title,
+    variant,
+    onlyTitle,
+    mode,
+    size,
+    atributesForModalBody = {},
+    confirmBtnClassName,
+    confirmBtnLabel,
+    confirmBtnVariant = "primary",
+    confirmBtnDisable,
+    confirmBtnIcon,
+    isConfirmBtnIconPositionRight,
+    noConfirmBtn,
+    noCloseBtn,
+    noFooter,
+    noHeader,
+    closeBtnClassName,
+    closeBtnText,
+    closeBtnVariant,
+    closeBtnDisable,
+    closeBtnIcon,
+    forced,
+    btnClassNames,
+    isCloseBtnIconPositionRight,
+    submitOnEnter = true,
+    closeOnEsc = true,
+    isScrollLock = true,
+    leftContentOfFooter,
+    customFooter,
+    testId = "modal",
+    noHeaderCloseBtn,
+    withMobileLogic,
+    withFixedFooter
+  } = _ref2;
+  const modalRef = ref || (0, _react.useRef)(null);
+  const {
+    modalMobileHeaderRef,
+    modalMobileBodyRef,
+    modalMobileFooterRef,
+    MODALS_LOGIC,
+    renderModal,
+    isMobile,
+    scrollTop,
+    scrollHeight
+  } = (0, _useMobileModal.default)({
+    modalRef,
+    withMobileLogic,
+    withFixedFooter,
+    isOpen,
+    children
+  });
+  const handle = {
+    confirm: () => {
+      onConfirm?.();
+    },
+    decline: () => {
+      //? closeModal используется для ESC и оверлея, давно хотелось иметь возможность разделить
+      //? Теперь можно не передавать closeModal, а для cancel-кнопки передать отдельный обработчик
+      if (typeof onDecline === "function") onDecline();else closeModal?.();
     }
-    return title;
-}
-const Modal = /*#__PURE__*/ (0, _react.forwardRef)(({ zIndex = 100, isOpen, onConfirm, onDecline, closeModal, children, className, title, variant = 'primary', onlyTitle, mode, size, atributesForModalBody = attrsForModalBodyDefault, confirmBtnClassName, confirmBtnLabel, confirmBtnVariant = 'primary', confirmBtnDisable, confirmBtnIcon, isConfirmBtnIconPositionRight, noConfirmBtn, noCloseBtn, noFooter, noHeader, closeBtnClassName, closeBtnText, closeBtnVariant, closeBtnDisable, closeBtnIcon, forced, btnClassNames, isCloseBtnIconPositionRight, submitOnEnter = true, closeOnEsc = true, leftContentOfFooter, customFooter, testId = 'modal', noHeaderCloseBtn, withMobileLogic, withFixedFooter }, ref)=>{
-    const internalRef = (0, _react.useRef)(null);
-    const modalRef = ref || internalRef;
-    const { modalMobileHeaderRef, modalMobileBodyRef, modalMobileFooterRef, MODALS_LOGIC, renderModal, isMobile, scrollTop, scrollHeight } = (0, _useMobileModal.default)({
-        withMobileLogic,
-        withFixedFooter,
-        isOpen
-    });
-    const handle = {
-        confirm: ()=>{
-            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-        },
-        decline: ()=>{
-            if (typeof onDecline === 'function') {
-                onDecline();
-            } else {
-                closeModal === null || closeModal === void 0 ? void 0 : closeModal();
-            }
-        }
-    };
-    (0, _useHandleKeyPress.default)({
-        enterCallback: submitOnEnter && typeof onConfirm === 'function' ? ()=>handle.confirm() : undefined,
-        escCallback: closeOnEsc && typeof closeModal === 'function' ? ()=>closeModal() : undefined,
-        withClamping: false
-    });
-    if (!isOpen) return null;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        style: {
-            zIndex
-        },
-        "data-testid": testId,
-        className: "modal-box j5",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": `${testId}-title`,
-        children: renderModal(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    "data-testid": `${testId}-overlay`,
-                    className: isOpen ? 'modal-overlay' : 'hidden',
-                    onClick: closeModal,
-                    role: "presentation"
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    ref: modalRef,
-                    style: {
-                        width: typeof size === 'number' ? `${size}px` : `${size === null || size === void 0 ? void 0 : size.replace('px', '')}px`
-                    },
-                    className: (0, _classnames.default)(className, {
-                        'modal': isOpen,
-                        'modal--no-header': isOpen && noHeader,
-                        'modal-mobile': isOpen && isMobile,
-                        'hidden': !isOpen
-                    }),
-                    children: [
-                        !noHeader && /*#__PURE__*/ (0, _jsxruntime.jsx)(_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,
-                            noHeaderCloseBtn: noHeaderCloseBtn,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                id: `${testId}-title`,
-                                children: renderModalTitle({
-                                    mode,
-                                    title,
-                                    onlyTitle
-                                })
-                            })
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            ...atributesForModalBody,
-                            ref: modalMobileBodyRef,
-                            className: (0, _classnames.default)('modal__body', {
-                                'modal__body--no-footer': noFooter
-                            }),
-                            role: "document",
-                            children: children
-                        }),
-                        (!noFooter || customFooter) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalFooter.default, {
-                            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 && scrollTop !== scrollHeight,
-                                'modal__footer_with-left-content': leftContentOfFooter
-                            }),
-                            children: customFooter || /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                                children: [
-                                    leftContentOfFooter,
-                                    (!noCloseBtn || !noConfirmBtn) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                                        className: "modal__buttons-block",
-                                        children: [
-                                            !noCloseBtn && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                                                testId: "modal",
-                                                className: (0, _classnames.default)(closeBtnClassName, btnClassNames),
-                                                variant: closeBtnVariant || 'dark-outline',
-                                                onClick: ()=>handle.decline(),
-                                                label: closeBtnText || 'Cancel',
-                                                disabled: closeBtnDisable,
-                                                icon: closeBtnIcon,
-                                                isIconRight: isCloseBtnIconPositionRight,
-                                                tabIndex: 1,
-                                                "aria-label": "Close modal"
-                                            }),
-                                            !noConfirmBtn && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                                                testId: "modal",
-                                                onClick: ()=>handle.confirm(),
-                                                label: confirmBtnLabel || mode && (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,
-                                                "aria-label": "Confirm modal"
-                                            })
-                                        ]
-                                    })
-                                ]
-                            })
-                        })
-                    ]
-                })
-            ]
-        }))
-    });
+  };
+  (0, _useHandleKeyPress.default)({
+    enterCallback: submitOnEnter && typeof onConfirm === "function" ? () => handle.confirm() : null,
+    escCallback: closeOnEsc && typeof closeModal === "function" ? () => closeModal() : null,
+    withClamping: false
+  });
+  const render = () => !isOpen ? null : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      zIndex
+    },
+    "data-testid": testId,
+    className: "modal-box j5"
+  }, renderModal(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": `${testId}-overlay`,
+    className: isOpen ? "modal-overlay" : "hidden",
+    onClick: closeModal
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: modalRef,
+    style: {
+      width: size
+    },
+    className: (0, _classnames.default)(className, {
+      modal: isOpen,
+      "modal--no-header": isOpen && noHeader,
+      "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,
+    noHeaderCloseBtn: noHeaderCloseBtn
+  }, /*#__PURE__*/_react.default.createElement("span", null, renderModalTitle({
+    mode,
+    title,
+    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 || customFooter) && /*#__PURE__*/_react.default.createElement(_ModalFooter.default, {
+    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 && scrollTop !== scrollHeight,
+      "modal__footer_with-left-content": leftContentOfFooter
+    })
+  }, customFooter || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, leftContentOfFooter, (!noCloseBtn || !noConfirmBtn) && /*#__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: () => handle.decline(),
+    label: closeBtnText || "Cancel",
+    disabled: closeBtnDisable,
+    icon: closeBtnIcon,
+    isIconRight: isCloseBtnIconPositionRight,
+    tabIndex: 1
+  }), !noConfirmBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    testId: "modal",
+    onClick: () => handle.confirm(),
+    label: confirmBtnLabel || mode?.[0].toUpperCase() + mode?.slice(1) || "Apply",
+    className: (0, _classnames.default)("ml5", confirmBtnClassName, btnClassNames),
+    variant: confirmBtnVariant,
+    disabled: confirmBtnDisable,
+    icon: confirmBtnIcon,
+    isIconRight: isConfirmBtnIconPositionRight
+  }))))))));
+  return render();
 });
-Modal.displayName = 'Modal';
-const _default = Modal;
+var _default = exports.default = Modal;

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

@@ -1,33 +1,23 @@
-@use '../../../scss/_vars';
-@use '../../../scss/mixins';
+@import "../../../scss/_vars";
+@import "../../../scss/mixins";
+
+.modal-overlay {
+  position: fixed;
+  z-index: 4;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 0.5;
+  background-color: black;
+
+  transition: opacity 0.2s ease;
+}
 
 .modal {
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.5;
-  --modal-bg: #fff;
-  --modal-header-bg: #f7fafc;
-  --modal-body-bg: #f7fafc;
-  --modal-footer-bg: #f7fafc;
-  --modal-border-color: #e2e5ec;
-  --modal-title-color: vars.$color--primary;
-  --modal-title-font-size: 16px;
-  --modal-title-font-weight: 400;
-  --modal-width: 600px;
   --modal-min-height: 300px;
-  --modal-margin: 0 10px;
-  --modal-padding: 15px;
-  --modal-header-padding: 10px 15px;
-  --modal-footer-padding: 7.5px 15px;
-  --modal-border-radius: 6px;
-  --modal-inner-radius: 4px;
-  --modal-box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
-  --modal-close-btn-size: 40px;
-  --modal-close-icon-size: 20px;
-  --modal-close-btn-color: #1e1e2d;
-  --modal-close-hover-bg: #e2e5ec;
-  --modal-primary-bg: #{vars.$color--primary};
-  --modal-primary-title-color: #ffffff;
-  --modal-primary-close-hover: #5162d4;
   --max-height: calc(100% - 30px);
 
   position: relative;
@@ -36,14 +26,14 @@
   display: flex;
   flex-direction: column;
 
-  width: var(--modal-width);
+  width: 600px;
   min-height: var(--modal-min-height);
   max-height: var(--max-height);
-  margin: var(--modal-margin);
+  margin: 0 10px;
 
-  border-radius: var(--modal-border-radius);
-  background-color: var(--modal-bg);
-  box-shadow: var(--modal-box-shadow);
+  border-radius: 6px;
+  background-color: #fff;
+  box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
 
   &__header {
     position: relative;
@@ -52,29 +42,29 @@
     justify-content: space-between;
     align-items: center;
 
-    padding: var(--modal-header-padding);
+    padding: 10px 15px;
 
-    border-bottom: 1px solid var(--modal-border-color);
-    border-top-left-radius: var(--modal-inner-radius);
-    border-top-right-radius: var(--modal-inner-radius);
-    background-color: var(--modal-header-bg);
+    border-bottom: 1px solid #e2e5ec;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-color: #f7fafc;
 
     &-primary {
-      background-color: var(--modal-primary-bg);
+      background-color: $color--primary;
 
       &-title {
-        font-size: var(--modal-title-font-size);
-        font-weight: var(--modal-title-font-weight);
+        font-size: 16px;
+        font-weight: 400;
 
-        color: var(--modal-primary-title-color);
+        color: #ffffff;
       }
     }
 
     &-title {
-      font-size: var(--modal-title-font-size);
+      font-size: 16px;
       font-weight: normal;
 
-      color: var(--modal-title-color);
+      color: $color--primary;
     }
   }
 
@@ -83,23 +73,20 @@
     flex-grow: 1;
 
     box-sizing: border-box;
-    padding: var(--modal-padding);
-
-    border-bottom-right-radius: var(--modal-inner-radius);
-    border-bottom-left-radius: var(--modal-inner-radius);
-    background-color: var(--modal-body-bg);
+    padding: 15px;
 
-    @include mixins.custom-scroll2;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    background-color: #f7fafc;
 
+    @include custom-scroll2;
     &:first-of-type {
-      overflow-x: hidden;
-
-      border-top-left-radius: var(--modal-inner-radius);
-      border-top-right-radius: var(--modal-inner-radius);
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
     }
 
     &--no-footer {
-      padding: var(--modal-padding);
+      padding: 15px;
     }
   }
 
@@ -108,12 +95,12 @@
     justify-content: flex-end;
     align-items: center;
 
-    padding: var(--modal-footer-padding);
+    padding: 7.5px 15px;
 
-    border-top: 1px solid var(--modal-border-color);
-    border-bottom-right-radius: var(--modal-inner-radius);
-    border-bottom-left-radius: var(--modal-inner-radius);
-    background-color: var(--modal-footer-bg);
+    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;
@@ -126,7 +113,7 @@
 
       width: calc(100% - 30px);
 
-      background-color: var(--modal-bg);
+      background-color: #ffff;
     }
   }
 
@@ -138,21 +125,6 @@
   }
 }
 
-.modal-overlay {
-  position: fixed;
-  z-index: 4;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  opacity: var(--modal-overlay-opacity);
-  background-color: var(--modal-overlay-bg);
-
-  transition: opacity 0.2s ease;
-}
-
 .modal__footer--noborder {
   border-top: none;
 }
@@ -172,6 +144,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -199,42 +172,43 @@
   justify-content: center;
   align-items: center;
 
-  width: var(--modal-close-btn-size);
+  width: 40px;
   height: 100%;
 
   cursor: pointer;
 
-  color: var(--modal-close-btn-color);
-  border-top-right-radius: var(--modal-inner-radius);
+  color: #1e1e2d;
+  //background-color: inherit;
+  border-top-right-radius: 5px;
   background: transparent;
 
   &:hover {
-    background-color: var(--modal-close-hover-bg);
+    background-color: #e2e5ec;
   }
 
   &-primary {
-    color: var(--modal-close-btn-color);
+    color: #1e1e2d;
 
     &:hover {
       opacity: 1;
-      background-color: var(--modal-primary-close-hover);
+      background-color: #5162d4;
     }
   }
 
   &-merchant {
-    color: var(--modal-close-btn-color);
+    color: #1e1e2d;
 
     &:hover {
       opacity: 1;
-      background-color: var(--modal-primary-close-hover);
+      background-color: #5162d4;
     }
   }
 }
 
 .modal-close-icon {
-  width: var(--modal-close-icon-size);
-  min-width: var(--modal-close-icon-size);
-  height: var(--modal-close-icon-size);
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
 }
 
 .modal-text-card {
@@ -284,7 +258,7 @@
 
         font-weight: 400;
 
-        border-right: 1px solid var(--modal-border-color);
+        border-right: 1px solid #e2e5ec;
       }
 
       th:first-child,
@@ -305,9 +279,13 @@
           width: 100%;
           height: 8px;
 
-          content: '';
+          content: "";
 
-          background: linear-gradient(180deg, rgb(0 0 0 / 15.2%) 0%, rgb(0 0 0 / 0%) 100%);
+          background: linear-gradient(
+            180deg,
+            rgb(0 0 0 / 15.2%) 0%,
+            rgb(0 0 0 / 0%) 100%
+          );
         }
       }
 
@@ -333,7 +311,7 @@
 }
 
 .confirm-modal {
-  border-radius: var(--modal-inner-radius);
+  border-radius: 4px;
 
   .modal {
     &__header-title {
@@ -348,7 +326,7 @@
     }
 
     &__footer {
-      background-color: var(--modal-bg);
+      background-color: #ffff;
     }
   }
 }