intelicoreact 1.3.22 → 1.3.24

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

@@ -9,6 +9,8 @@ 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 _useBodyScrollLock = _interopRequireDefault(require("./../../../Functions/useBodyScrollLock"));
+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"));
@@ -26,11 +28,9 @@ const renderModalTitle = _ref => {
     title,
     onlyTitle
   } = _ref;
-  if (mode && mode !== 'default' && !onlyTitle) return "".concat(mode[0].toUpperCase() + mode.slice(1), " ").concat(title);
+  if (mode && mode !== "default" && !onlyTitle) return "".concat(mode[0].toUpperCase() + mode.slice(1), " ").concat(title);
   return title;
 };
-
-// eslint-disable-next-line react/display-name
 exports.renderModalTitle = renderModalTitle;
 const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
@@ -49,7 +49,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     atributesForModalBody = {},
     confirmBtnClassName,
     confirmBtnLabel,
-    confirmBtnVariant = 'primary',
+    confirmBtnVariant = "primary",
     confirmBtnDisable,
     confirmBtnIcon,
     isConfirmBtnIconPositionRight,
@@ -65,8 +65,9 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     forced,
     btnClassNames,
     isCloseBtnIconPositionRight,
-    submitOnEnter = false,
-    closeOnEsc = false,
+    submitOnEnter = true,
+    closeOnEsc = true,
+    isScrollLock = true,
     leftContentOfFooter,
     customFooter,
     testId,
@@ -96,23 +97,14 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     decline: () => {
       //? closeModal используется для ESC и оверлея, давно хотелось иметь возможность разделить
       //? Теперь можно не передавать closeModal, а для cancel-кнопки передать отдельный обработчик
-      if (typeof onDecline === 'function') onDecline();else closeModal === null || closeModal === void 0 || closeModal();
-    },
-    pressEnter: event => {
-      if (event.keyCode === KEY_CODE.ENTER && !event.repeat) handle.confirm();
-    },
-    pressEsc: () => {
-      if (event.keyCode === KEY_CODE.ESC && !event.repeat) closeModal === null || closeModal === void 0 || closeModal();
+      if (typeof onDecline === "function") onDecline();else closeModal === null || closeModal === void 0 || closeModal();
     }
   };
-  (0, _react.useEffect)(() => {
-    if (submitOnEnter) document.addEventListener('keyup', handle.pressEnter);
-    if (closeOnEsc) document.addEventListener('keyup', handle.pressEsc);
-    return () => {
-      document.removeEventListener('keyup', handle.pressEnter);
-      document.removeEventListener('keyup', handle.pressEsc);
-    };
-  }, [submitOnEnter, closeOnEsc]);
+  (0, _useBodyScrollLock.default)(isScrollLock && isOpen);
+  (0, _useHandleKeyPress.default)({
+    enterCallback: submitOnEnter && typeof onConfirm === "function" ? () => handle.confirm() : null,
+    escCallback: closeOnEsc && typeof closeModal === "function" ? () => closeModal() : null
+  });
   const render = () => !isOpen ? null : /*#__PURE__*/_react.default.createElement("div", {
     style: {
       zIndex
@@ -120,8 +112,8 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     "data-testid": testId,
     className: "modal-box j5"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": 'modal-closeOverlay',
-    className: isOpen ? 'modal-overlay' : 'hidden',
+    "data-testid": "modal-closeOverlay",
+    className: isOpen ? "modal-overlay" : "hidden",
     onClick: closeModal
   }), renderModal( /*#__PURE__*/_react.default.createElement("div", {
     ref: modalRef,
@@ -130,15 +122,15 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     },
     className: (0, _classnames.default)(className, {
       modal: isOpen,
-      'modal--no-header': isOpen && noHeader,
-      'modal-mobile': isOpen && isMobile,
+      "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
+      "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,
@@ -150,24 +142,24 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onlyTitle
   }))), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, atributesForModalBody, {
     ref: modalMobileBodyRef,
-    className: (0, _classnames.default)('modal__body', {
-      'modal__body--no-footer': noFooter
+    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
+      "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',
+    variant: closeBtnVariant || "dark-outline",
     onClick: () => handle.decline(),
-    label: closeBtnText || 'Cancel',
+    label: closeBtnText || "Cancel",
     disabled: closeBtnDisable,
     icon: closeBtnIcon,
     isIconRight: isCloseBtnIconPositionRight,
@@ -175,8 +167,8 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   }), !noConfirmBtn && /*#__PURE__*/_react.default.createElement(_Button.default, {
     testId: "modal",
     onClick: () => 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),
+    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,

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

@@ -10,10 +10,10 @@
   width: 100%;
   height: 100%;
 
-  transition: opacity 0.2s ease;
-
   opacity: 0.5;
   background-color: black;
+
+  transition: opacity 0.2s ease;
 }
 
 .modal {
@@ -32,59 +32,59 @@
   margin: 0 10px;
 
   border-radius: 6px;
-  background-color: #FFF;
+  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;
+    align-items: center;
 
     padding: 10px 15px;
 
-    border-bottom: 1px solid #E2E5EC;
+    border-bottom: 1px solid #e2e5ec;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
 
     &-primary {
       background-color: $color--primary;
 
       &-title {
-        color: #ffffff;
-
         font-size: 16px;
         font-weight: 400;
+
+        color: #ffffff;
       }
     }
 
     &-title {
-      color: $color--primary;
-
       font-size: 16px;
       font-weight: normal;
+
+      color: $color--primary;
     }
   }
 
   &__body {
-    box-sizing: border-box;
     overflow-y: auto;
-
     flex-grow: 1;
+
+    box-sizing: border-box;
     padding: 15px;
 
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
+
+    @include custom-scroll2;
     &:first-of-type {
-      border-top-right-radius: 4px;
       border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
     }
 
-    @include custom-scroll2;
-
     &--no-footer {
       padding: 15px;
     }
@@ -92,15 +92,15 @@
 
   &__footer {
     display: flex;
-    align-items: center;
     justify-content: flex-end;
+    align-items: center;
 
     padding: 7.5px 15px;
 
-    border-top: 1px solid #E2E5EC;
+    border-top: 1px solid #e2e5ec;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
 
     &_with-left-content {
       justify-content: space-between;
@@ -113,15 +113,15 @@
 
       width: calc(100% - 30px);
 
-      background-color: #FFFF;
+      background-color: #ffff;
     }
   }
 
   &__buttons-block {
     display: flex;
-    align-items: center;
     flex-flow: row nowrap;
     justify-content: flex-start;
+    align-items: center;
   }
 }
 
@@ -132,10 +132,7 @@
 .modal-box {
   position: fixed;
   z-index: 100;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 
   animation-name: fadeIn;
   animation-duration: 0.25s;
@@ -157,7 +154,7 @@
   overflow-x: auto;
 
   .button-fin {
-    background-color: #FFFF;
+    background-color: #ffff;
   }
 
   .modal__body {
@@ -172,39 +169,38 @@
   right: 0;
 
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
   width: 40px;
-  height: 38px;
   height: 100%;
 
   cursor: pointer;
 
-  color: #1E1E2D;
+  color: #1e1e2d;
   //background-color: inherit;
   border-top-right-radius: 5px;
   background: transparent;
 
   &:hover {
-    background-color: #E2E5EC;
+    background-color: #e2e5ec;
   }
 
   &-primary {
-    color: #1E1E2D;
+    color: #1e1e2d;
 
     &:hover {
       opacity: 1;
-      background-color: #5162D4;
+      background-color: #5162d4;
     }
   }
 
   &-merchant {
-    color: #1E1E2D;
+    color: #1e1e2d;
 
     &:hover {
       opacity: 1;
-      background-color: #5162D4;
+      background-color: #5162d4;
     }
   }
 }
@@ -218,12 +214,11 @@
 .modal-text-card {
   padding: 15px 0;
 
-  text-align: left;
-  white-space: normal;
-
   font-size: 13px;
   font-weight: 400;
   line-height: 20px;
+  text-align: left;
+  white-space: normal;
 }
 
 .prompt-text-card {
@@ -245,7 +240,7 @@
 
   &__td {
     &--id {
-      color: #9AA0B9;
+      color: #9aa0b9;
     }
   }
 
@@ -261,9 +256,9 @@
       th {
         padding: 10px 15px;
 
-        border-right: 1px solid #E2E5EC;
-
         font-weight: 400;
+
+        border-right: 1px solid #e2e5ec;
       }
 
       th:first-child,
@@ -286,7 +281,11 @@
 
           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%
+          );
         }
       }
 
@@ -300,7 +299,7 @@
     }
 
     .tr-as-selector:hover td {
-      background-color: #FFEDC8;
+      background-color: #ffedc8;
     }
   }
 }
@@ -327,7 +326,7 @@
     }
 
     &__footer {
-      background-color: #FFFF;
+      background-color: #ffff;
     }
   }
 }

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

@@ -7,10 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 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"));
 const Modal = _ref => {
   let {
     zIndex = 100,
@@ -29,14 +26,14 @@ const Modal = _ref => {
     "data-testid": testId,
     className: "modal-box j5"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": 'modal-closeOverlay',
+    "data-testid": "modal-closeOverlay",
     className: "modal-overlay",
     onClick: closeModal
   }), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: size
     },
-    className: (0, _classnames.default)(className, 'modal')
+    className: (0, _classnames.default)(className, "modal")
   }, children));
 };
 var _default = exports.default = Modal;

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

@@ -8,30 +8,36 @@
   }
 }
 
-@media only screen and (max-width:767px) {
+@media only screen and (max-width: 767px) {
   .modal-mobile-container {
-    height: 100dvh;
-    width: 100dvw;
     position: relative;
+    z-index: 100;
+
     overflow-y: auto;
+
     box-sizing: border-box;
+    width: 100dvw;
+    height: 100dvh;
+
     border-radius: 16px 16px 0 0;
-    z-index: 100;
 
     .modal {
-      margin-top: 16px!important;
-      max-height: unset!important;
       max-width: 100vw;
+      max-height: unset !important;
+      margin-top: 16px !important;
+
       border-radius: 16px 16px 0 0;
-      animation-duration: 0.4s;
+
       animation-name: slideup;
+      animation-duration: 0.4s;
 
       &__header,
       &__footer {
+        z-index: 2;
         left: 0;
-        width: 100%;
+
         box-sizing: border-box;
-        z-index: 2;
+        width: 100%;
 
         &--hidden {
           position: relative;
@@ -39,6 +45,7 @@
 
         &--sticky {
           position: sticky;
+
           box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
         }
       }
@@ -48,7 +55,7 @@
       }
 
       &__footer {
-        border-radius: 0!important;
+        border-radius: 0 !important;
       }
 
       &__footer {
@@ -57,7 +64,7 @@
     }
 
     .modal:not(.modal--no-header) .modal__body {
-      border-radius: 0!important;
+      border-radius: 0 !important;
     }
   }
 }

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

@@ -9,13 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 const ModalFooter = _ref => {
   let {
-    className = '',
+    className = "",
     children,
     wrapperRef
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: wrapperRef,
-    className: (0, _classnames.default)('modal__footer', className)
+    className: (0, _classnames.default)("modal__footer", className)
   }, children);
 };
 var _default = exports.default = ModalFooter;

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

@@ -10,7 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactFeather = require("react-feather");
 const ModalTitle = _ref => {
   let {
-    variant = 'primary',
+    variant = "primary",
     children,
     isForced,
     onClose,
@@ -20,18 +20,18 @@ const ModalTitle = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: wrapperRef,
-    className: (0, _classnames.default)('modal__header', className, {
+    className: (0, _classnames.default)("modal__header", className, {
       ["modal__header-".concat(variant)]: variant
     })
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('modal__header-title', {
+    className: (0, _classnames.default)("modal__header-title", {
       ["modal__header-".concat(variant, "-title")]: variant
     })
   }, children), !isForced && /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": 'modal--button-closeCross',
+    "data-testid": "modal--button-closeCross",
     onClick: onClose,
-    className: (0, _classnames.default)('modal-close-icon-box', {
-      'modal-close-icon-box-primary': variant === 'primary'
+    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"

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

@@ -10,8 +10,8 @@ var _useIsMobile = _interopRequireDefault(require("../../../../Functions/useIsMo
 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 && Object.prototype.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 SCROLL_DIRECTION = {
-  UP: 'up',
-  DOWN: 'down'
+  UP: "up",
+  DOWN: "down"
 };
 function useMobileModal(_ref) {
   var _modalMobileHeaderRef3, _modalMobileFooterRef3;
@@ -49,7 +49,7 @@ function useMobileModal(_ref) {
   (0, _react.useLayoutEffect)(() => {
     const el = modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current;
     if (el) {
-      el.addEventListener('scroll', () => {
+      el.addEventListener("scroll", () => {
         setScrollTop(scrollTop => {
           if (scrollTop !== el.scrollTop) setScrollTopPrev(scrollTop);
           return el.scrollTop;
@@ -69,12 +69,12 @@ function useMobileModal(_ref) {
       const windowHeight = document.documentElement.clientHeight || window.screen.availHeight || window.screen.height;
       if (modalMobileContainerRef !== null && modalMobileContainerRef !== void 0 && modalMobileContainerRef.current) {
         if (computedModalHeight <= windowHeight) {
-          modalMobileContainerRef.current.style.display = 'flex';
-          modalMobileContainerRef.current.style.alignItems = 'flex-end';
+          modalMobileContainerRef.current.style.display = "flex";
+          modalMobileContainerRef.current.style.alignItems = "flex-end";
         } else {
           var _modalMobileContainer, _modalMobileContainer2;
-          (_modalMobileContainer = modalMobileContainerRef.current) === null || _modalMobileContainer === void 0 || (_modalMobileContainer = _modalMobileContainer.style) === null || _modalMobileContainer === void 0 || _modalMobileContainer.removeProperty('display');
-          (_modalMobileContainer2 = modalMobileContainerRef.current) === null || _modalMobileContainer2 === void 0 || (_modalMobileContainer2 = _modalMobileContainer2.style) === null || _modalMobileContainer2 === void 0 || _modalMobileContainer2.removeProperty('align-items');
+          (_modalMobileContainer = modalMobileContainerRef.current) === null || _modalMobileContainer === void 0 || (_modalMobileContainer = _modalMobileContainer.style) === null || _modalMobileContainer === void 0 || _modalMobileContainer.removeProperty("display");
+          (_modalMobileContainer2 = modalMobileContainerRef.current) === null || _modalMobileContainer2 === void 0 || (_modalMobileContainer2 = _modalMobileContainer2.style) === null || _modalMobileContainer2 === void 0 || _modalMobileContainer2.removeProperty("align-items");
         }
       }
     }
@@ -137,7 +137,7 @@ function useMobileModal(_ref) {
     }
   }, [scrollTop, modalMobileContainerRef === null || modalMobileContainerRef === void 0 ? void 0 : modalMobileContainerRef.current, window.innerHeight]);
   (0, _react.useEffect)(() => {
-    window.addEventListener('resize', () => {
+    window.addEventListener("resize", () => {
       setContainerScrollHeight(containerScrollHeight => {
         setScrollHeight(containerScrollHeight - window.innerHeight);
         return containerScrollHeight;

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./MonoAccordion.scss");
 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 && Object.prototype.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 RC = 'mono-accordion';
+const RC = "mono-accordion";
 const MonoAccordion = _ref => {
   let {
     titleJSX,

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.scss

@@ -6,8 +6,8 @@
 
   &__head {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
 
     height: fit-content;
     padding: 10px 15px;
@@ -21,9 +21,9 @@
 
   &__icon-container {
     display: flex;
-    align-items: center;
     flex-flow: row nowrap;
     justify-content: center;
+    align-items: center;
 
     width: fit-content;
     height: 100%;
@@ -36,14 +36,14 @@
   &__container {
     display: flex;
     overflow: hidden;
-    align-items: flex-start;
     flex-direction: column;
     justify-content: center;
-
-    transition: all 0.25s ease-out;
+    align-items: flex-start;
 
     font-size: 13px;
 
+    transition: all 0.25s ease-out;
+
     @include custom-scroll;
   }
 

package/dist/Atomic/UI/MonoAccordion/partial/AnyOuterClass.scss

@@ -1,8 +1,8 @@
 .any-outer-class__mono-accordion {
   &.mono-accordion {
-    border-bottom: #757F8C solid 1px;
+    border-bottom: #757f8c solid 1px;
     border-radius: 6px 6px 0 0;
-    background: #F8FBFF;
+    background: #f8fbff;
   }
 
   .mono-accordion__head {
@@ -10,7 +10,7 @@
   }
 
   .mono-accordion__tile-container span:last-child {
-    color: #757F8C;
+    color: #757f8c;
   }
 
   .mono-accordion__icon-container {
@@ -19,9 +19,8 @@
   }
 
   .mono-accordion__content-wrapper div {
-    cursor: pointer;
-
     font-style: italic;
+    cursor: pointer;
 
     &:hover {
       text-decoration: underline;