ecomlab-components-next 0.1.32 → 0.1.34

package/dist/components/Article/ModalMiltilevelSidebarSettings/ModalMiltilevelSidebarSettings.scss

@@ -0,0 +1,254 @@
+.menu {
+  width: 250px;
+  background-color: #fff;
+  font-family: 'Arial', sans-serif;
+  font-size: 13px;
+  color: #333;
+  border-radius: 4px;
+  min-width: 230px;
+  width: 230px;
+  border: 1px solid #edeffb;
+  border-radius: 8px;
+  height: auto;
+  overflow-y: auto;
+  max-height: 600px;
+  position: sticky;
+  top: 20px;
+
+  .hover-block {
+    // background-color: #0056b3;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .menu-item {
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s;
+    border-radius: 3px;
+    position: relative;
+    background-color: #fff;
+
+    // &:hover {
+    //   background-color: #0000000d;
+
+    //   .add-child-btn {
+    //     display: inline-block;
+    //   }
+    // }
+
+    &__group-btn {
+      display: flex;
+      gap: 8px;
+      margin-left: auto;
+      margin-left: auto;
+
+      .delete-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background-color: inherit;
+      }
+    }
+
+    &__arrow-box {
+      display: flex;
+      width: 16px;
+      height: 16px;
+    }
+
+    .item-label {
+      display: flex;
+      align-items: center;
+      padding: 10px 14px;
+      border-bottom: 1px solid #edeffb;
+      color: #676767;
+      font-family: Golos Text;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px;
+      gap: 8px;
+
+      &__box {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      .arrow {
+        display: inline-block;
+        cursor: pointer;
+        transform: rotate(180deg);
+        //  transition: transform 0.2s ease;
+
+        &.open {
+          transform: rotate(0deg);
+        }
+      }
+
+      .add-child-btn {
+        display: none;
+        margin-left: 8px;
+        cursor: pointer;
+        border: none;
+        background: none;
+        font-size: 15px;
+        color: #333;
+
+        &:hover {
+          color: #007bff;
+        }
+      }
+
+      &:hover {
+        color: #00b45e;
+      }
+    }
+
+    .children {
+      // padding-left: 20px;
+      // margin-left: 8px;
+
+      .item-label {
+        padding-left: 24px;
+      }
+
+      .children {
+        .item-label {
+          padding-left: 34px;
+        }
+
+        .children {
+          .item-label {
+            padding-left: 44px;
+          }
+
+          .children {
+            .item-label {
+              padding-left: 54px;
+            }
+
+            .children {
+              .item-label {
+                padding-left: 64px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // .drop-zone {
+  //   height: 10px;
+  //   margin: 4px 0;
+  //   background-color: transparent;
+
+  //   &:hover {
+  //     background-color: #a3d4ff;
+  //   }
+  // }
+}
+
+.add-root-item-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  padding: 4px;
+  cursor: pointer;
+  border: 1px solid #007bff;
+  background-color: #007bff;
+  color: white;
+  border-radius: 4px;
+  max-width: 100%;
+  width: 100%;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+}
+
+.modal-overlay {
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  z-index: 100;
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  width: 300px;
+  max-width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+  h3 {
+    margin-bottom: 10px;
+  }
+
+  input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+  }
+
+  button {
+    padding: 6px 12px;
+    margin-right: 10px;
+    cursor: pointer;
+    border: 1px solid #007bff;
+    background-color: #007bff;
+    color: white;
+    border-radius: 3px;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+
+  button:last-child {
+    border-color: #ccc;
+    background-color: #ccc;
+
+    &:hover {
+      background-color: #aaa;
+    }
+  }
+}
+
+.hovered-for-drop {
+  background-color: #e6f7ff;
+}
+
+// .mainHover {
+//   background-color: #0000000d;
+// }
+
+.modal-miltilevel-sidebar-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: fit-content;
+
+  &__select-container {
+    display: flex;
+    gap: 12px;
+  }
+}

package/dist/components/Article/ModalMiltilevelSidebarSettings/ModalMiltilevelSidebarSettings.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ModalMiltilevelSidebarSettingsTest = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ModalMiltilevelSidebarSettings = _interopRequireDefault(require("./ModalMiltilevelSidebarSettings"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var _default = exports["default"] = {
+  title: 'ModalMiltilevelSidebarSettings',
+  component: _ModalMiltilevelSidebarSettings["default"]
+};
+var ModalMiltilevelSidebarSettingsTest = exports.ModalMiltilevelSidebarSettingsTest = function ModalMiltilevelSidebarSettingsTest() {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    breadcrumbs = _useState2[0],
+    setBreadcrumbs = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    title = _useState4[0],
+    _setTitle = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    pathsWebName = _useState6[0],
+    _setPathsWebName = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedTopLevelValue = _useState8[0],
+    setSelectedTopLevelValue = _useState8[1];
+  var _useState9 = (0, _react.useState)(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedEndLevelValue = _useState10[0],
+    setSelectedEndLevelValue = _useState10[1];
+  var _useState11 = (0, _react.useState)(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    paths = _useState12[0],
+    _setPaths = _useState12[1];
+  var _useState13 = (0, _react.useState)(),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectedItemId = _useState14[0],
+    setSelectedItemId = _useState14[1];
+  return /*#__PURE__*/_react["default"].createElement(_ModalMiltilevelSidebarSettings["default"], {
+    breadcrumbs: breadcrumbs,
+    fetchGetBreadcrumbs: function fetchGetBreadcrumbs() {},
+    setTitle: function setTitle(e) {
+      _setTitle(e);
+    },
+    setPathsWebName: function setPathsWebName(e) {
+      return _setPathsWebName(e);
+    },
+    onPortalClick: function onPortalClick(id) {
+      setSelectedTopLevelValue(id);
+      setSelectedEndLevelValue(null);
+    },
+    onLevelClick: function onLevelClick(id) {
+      setSelectedEndLevelValue(id);
+      setSelectedTopLevelValue(null);
+    },
+    setPaths: function setPaths(e) {
+      return _setPaths(e);
+    },
+    selectedItemId: selectedItemId,
+    setSelectedItemId: setSelectedItemId
+  });
+};

package/dist/components/Article/ModalMiltilevelSidebarSettings/img/bx-cog.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99967 11.1668C9.47034 11.1668 10.6663 9.97083 10.6663 8.50016C10.6663 7.0295 9.47034 5.8335 7.99967 5.8335C6.52901 5.8335 5.33301 7.0295 5.33301 8.50016C5.33301 9.97083 6.52901 11.1668 7.99967 11.1668ZM7.99967 7.16683C8.72234 7.16683 9.33301 7.7775 9.33301 8.50016C9.33301 9.22283 8.72234 9.8335 7.99967 9.8335C7.27701 9.8335 6.66634 9.22283 6.66634 8.50016C6.66634 7.7775 7.27701 7.16683 7.99967 7.16683Z" fill="#333333"/>
+<path d="M1.89633 11.2575L2.56299 12.4108C2.91699 13.0222 3.76899 13.2515 4.38299 12.8975L4.73566 12.6935C5.12135 12.9969 5.5466 13.2463 5.99966 13.4348V13.8335C5.99966 14.5688 6.59766 15.1668 7.33299 15.1668H8.66633C9.40166 15.1668 9.99966 14.5688 9.99966 13.8335V13.4348C10.4526 13.2463 10.8778 12.9971 11.2637 12.6942L11.6163 12.8982C12.2317 13.2515 13.0817 13.0235 13.437 12.4108L14.103 11.2582C14.2797 10.952 14.3276 10.5882 14.2362 10.2467C14.1448 9.90515 13.9216 9.61388 13.6157 9.43683L13.279 9.24216C13.3506 8.75053 13.3506 8.25113 13.279 7.7595L13.6157 7.56483C13.9215 7.38765 14.1446 7.09638 14.2359 6.75493C14.3273 6.41348 14.2795 6.04974 14.103 5.7435L13.437 4.59083C13.083 3.9775 12.2317 3.7475 11.6163 4.10283L11.2637 4.30683C10.878 4.00343 10.4527 3.75403 9.99966 3.5655V3.16683C9.99966 2.4315 9.40166 1.8335 8.66633 1.8335H7.33299C6.59766 1.8335 5.99966 2.4315 5.99966 3.16683V3.5655C5.54676 3.75406 5.12154 4.00322 4.73566 4.30616L4.38299 4.10216C3.76699 3.74816 2.91633 3.9775 2.56233 4.59016L1.89633 5.74283C1.71965 6.04903 1.67173 6.41284 1.76311 6.75434C1.85449 7.09584 2.07768 7.38711 2.38366 7.56416L2.72033 7.75883C2.64848 8.25022 2.64848 8.74944 2.72033 9.24083L2.38366 9.4355C2.07777 9.6128 1.85468 9.90419 1.76332 10.2457C1.67196 10.5873 1.7198 10.9512 1.89633 11.2575ZM4.11366 9.41883C4.03838 9.11839 4.0001 8.80988 3.99966 8.50016C3.99966 8.19216 4.03833 7.88283 4.11299 7.5815C4.14815 7.44105 4.13659 7.29297 4.08005 7.15968C4.02351 7.02639 3.92508 6.91516 3.79966 6.84283L3.05099 6.4095L3.71633 5.25683L4.47966 5.69816C4.60414 5.77019 4.74863 5.79991 4.89144 5.78284C5.03424 5.76577 5.16766 5.70284 5.27166 5.6035C5.72267 5.17453 6.26655 4.85537 6.86099 4.67083C6.99754 4.62914 7.1171 4.54472 7.20207 4.42998C7.28704 4.31525 7.33293 4.17627 7.33299 4.0335V3.16683H8.66633V4.0335C8.66639 4.17627 8.71228 4.31525 8.79725 4.42998C8.88222 4.54472 9.00178 4.62914 9.13833 4.67083C9.73266 4.85564 10.2765 5.17476 10.7277 5.6035C10.8318 5.70265 10.9652 5.76544 11.1079 5.78251C11.2507 5.79957 11.3951 5.76998 11.5197 5.69816L12.2823 5.2575L12.949 6.41016L12.1997 6.84283C12.0743 6.91524 11.976 7.02648 11.9194 7.15975C11.8629 7.29301 11.8513 7.44105 11.8863 7.5815C11.961 7.88283 11.9997 8.19216 11.9997 8.50016C11.9997 8.8075 11.961 9.11683 11.8857 9.41883C11.8507 9.55935 11.8624 9.70744 11.919 9.84071C11.9757 9.97398 12.0742 10.0852 12.1997 10.1575L12.9483 10.5902L12.283 11.7428L11.5197 11.3022C11.3952 11.23 11.2507 11.2002 11.1079 11.2173C10.965 11.2344 10.8316 11.2974 10.7277 11.3968C10.2766 11.8258 9.73277 12.145 9.13833 12.3295C9.00178 12.3712 8.88222 12.4556 8.79725 12.5703C8.71228 12.6851 8.66639 12.8241 8.66633 12.9668L8.66766 13.8335H7.33299V12.9668C7.33293 12.8241 7.28704 12.6851 7.20207 12.5703C7.1171 12.4556 6.99754 12.3712 6.86099 12.3295C6.26666 12.1447 5.72285 11.8256 5.27166 11.3968C5.16786 11.2971 5.03436 11.234 4.89142 11.217C4.74849 11.2 4.60392 11.2302 4.47966 11.3028L3.71699 11.7442L3.05033 10.5915L3.79966 10.1575C3.92512 10.0852 4.02363 9.97398 4.08028 9.84071C4.13693 9.70744 4.14865 9.55935 4.11366 9.41883Z" fill="#333333"/>
+</svg>

package/dist/components/Article/ModalMiltilevelSidebarSettings/img/bx-trash.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33333 13.8335C3.33333 14.1871 3.47381 14.5263 3.72386 14.7763C3.97391 15.0264 4.31304 15.1668 4.66667 15.1668H11.3333C11.687 15.1668 12.0261 15.0264 12.2761 14.7763C12.5262 14.5263 12.6667 14.1871 12.6667 13.8335V5.8335H14V4.50016H11.3333V3.16683C11.3333 2.81321 11.1929 2.47407 10.9428 2.22402C10.6928 1.97397 10.3536 1.8335 10 1.8335H6C5.64638 1.8335 5.30724 1.97397 5.05719 2.22402C4.80714 2.47407 4.66667 2.81321 4.66667 3.16683V4.50016H2V5.8335H3.33333V13.8335ZM6 3.16683H10V4.50016H6V3.16683ZM5.33333 5.8335H11.3333V13.8335H4.66667V5.8335H5.33333Z" fill="#333333"/>
+<path d="M6 7.1665H7.33333V12.4998H6V7.1665ZM8.66667 7.1665H10V12.4998H8.66667V7.1665Z" fill="#333333"/>
+</svg>

package/dist/components/Article/ModalMiltilevelSidebarSettings/img/drop_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-chevron-down.svg">
+<path id="Vector" d="M5.13802 9.80469L8.00002 6.94269L10.862 9.80469L11.8047 8.86202L8.00002 5.05735L4.19535 8.86202L5.13802 9.80469Z" fill="#333333"/>
+</g>
+</svg>

package/dist/components/Article/ModalMiltilevelSidebarSettings/img/edit_icon.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="edit">
+<path id="Vector" d="M9 15H15.75" stroke="#51CA64" strokeLinecap="round" strokeLinejoin="round"/>
+<path id="Vector_2" d="M12.375 3.46599C12.6734 3.16762 13.078 3 13.5 3C13.7089 3 13.9158 3.04115 14.1088 3.12111C14.3019 3.20106 14.4773 3.31825 14.625 3.46599C14.7727 3.61373 14.8899 3.78912 14.9699 3.98214C15.0498 4.17517 15.091 4.38206 15.091 4.59099C15.091 4.79992 15.0498 5.00681 14.9699 5.19984C14.8899 5.39286 14.7727 5.56825 14.625 5.71599L5.25 15.091L2.25 15.841L3 12.841L12.375 3.46599Z" stroke="#51CA64" strokeLinecap="round" strokeLinejoin="round"/>
+</g>
+</svg>

package/dist/components/Article/ModalMiltilevelSidebarSettings/img/trash_icon.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="trash">
+<path id="Vector" d="M3 6H5H21" stroke="#F88181" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+<path id="Vector_2" d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="#F88181" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+<path id="Vector_3" d="M10 11V17" stroke="#F88181" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+<path id="Vector_4" d="M14 11V17" stroke="#F88181" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</g>
+</svg>

package/dist/components/Article/ModalReplaceBlock/ModalReplaceBlock.js

@@ -0,0 +1,85 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalReplaceBlock = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./ModalReplaceBlock.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var btns = [{
+  label: 'Текст',
+  type: 'text'
+}, {
+  label: 'Заголовок',
+  type: 'title'
+}, {
+  label: 'Ссылки на социальные сети',
+  type: 'social'
+}, {
+  label: 'Информационный блок',
+  type: 'info'
+}, {
+  label: 'Изображение',
+  type: 'image'
+}, {
+  label: 'Форма',
+  type: 'form'
+}, {
+  label: 'Видео',
+  type: 'video'
+}];
+var ModalReplaceBlock = exports.ModalReplaceBlock = function ModalReplaceBlock(_ref) {
+  var setIsModal = _ref.setIsModal,
+    currentIndex = _ref.currentIndex,
+    setContent = _ref.setContent,
+    changeBlock = _ref.changeBlock,
+    articleId = _ref.articleId;
+  // Замена блока
+  var replaceBlock = function replaceBlock(type, content) {
+    setContent(function (prev) {
+      var new_blocks_list = prev === null || prev === void 0 ? void 0 : prev.map(function (block, ind) {
+        if (currentIndex == ind) {
+          changeBlock(type, articleId, block === null || block === void 0 ? void 0 : block.block_id, block === null || block === void 0 ? void 0 : block.block_before);
+          return {
+            block_type: type,
+            block_id: block === null || block === void 0 ? void 0 : block.block_id,
+            block_before: block === null || block === void 0 ? void 0 : block.block_before,
+            content: content ? content : [{
+              value: '',
+              properties: {}
+            }]
+          };
+        } else {
+          return block;
+        }
+      });
+      return new_blocks_list;
+    });
+    setIsModal(false);
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "blackout",
+    onClick: function onClick(e) {
+      var el = e.target;
+      if (el.classList.contains('blackout')) {
+        setIsModal(false);
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "modal-replace-block"
+  }, btns.map(function (_ref2) {
+    var label = _ref2.label,
+      type = _ref2.type;
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: label + type,
+      className: "modal-replace-block__btn",
+      onClick: function onClick(e) {
+        return replaceBlock(type);
+      }
+    }, label);
+  })));
+};

package/dist/components/Article/ModalReplaceBlock/ModalReplaceBlock.scss

@@ -0,0 +1,72 @@
+.modal-replace-block {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    align-items: flex-start;
+    min-width: 360px;
+    width: 100%;
+    max-width: 360px;
+    height: fit-content;
+    border-radius: 16px;
+    background-color: rgb(255, 255, 255);
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 5000;
+
+    &__btn {
+       font-size: 16px;
+        color: #0E86D7;
+        border: none;
+        background-color: inherit;
+    }
+
+    img {
+        width: 110px;
+        height: 110px;
+    }
+
+    .title {
+        margin-top: 24px;
+        color: var(--text-primary-blue, #020617);
+        text-align: center;
+        font-family: Inter;
+        font-size: 15px;
+        line-height: 24px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        text-align: center;
+    }
+
+    .text_grey-blue {
+        margin-top: 12px;
+        text-align: center;
+        color: var(--main-menu-teritary-text, #94A3B8);
+        text-align: center;
+        /* Button link/Medium */
+        font-family: Inter;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+    }
+
+    .loading-dynamics {
+        margin-top: 36px;
+        width: 100%;
+        height: 8px;
+        border-radius: 4px;
+        background: var(--notification-tips-verification-bg, #EDEDFE);
+
+        .dynamics {
+            width: 0%;
+            height: 100%;
+            border-radius: 4px;
+            background: var(--primary-elements-hover, #0E86D7);
+            transition: 2s;
+        }
+    }
+}