@luminati-io/uikit 6.2.6 → 6.2.7-beta.1

package/dist/umd/uikit.development.js

@@ -32774,17 +32774,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useDidUpdate: () => (/* reexport safe */ _use_did_update__WEBPACK_IMPORTED_MODULE_1__.useDidUpdate),
 /* harmony export */   useEventListener: () => (/* reexport safe */ _use_event_listener__WEBPACK_IMPORTED_MODULE_2__["default"]),
 /* harmony export */   useLabelId: () => (/* reexport safe */ _use_label_id__WEBPACK_IMPORTED_MODULE_3__["default"]),
-/* harmony export */   useOutsideClick: () => (/* reexport safe */ _use_outside_click__WEBPACK_IMPORTED_MODULE_4__["default"]),
-/* harmony export */   useResize: () => (/* reexport safe */ _use_resize__WEBPACK_IMPORTED_MODULE_5__.useResize),
-/* harmony export */   useScroll: () => (/* reexport safe */ _use_scroll__WEBPACK_IMPORTED_MODULE_6__["default"])
+/* harmony export */   useMeasure: () => (/* reexport safe */ _use_measure__WEBPACK_IMPORTED_MODULE_4__.useMeasure),
+/* harmony export */   useOutsideClick: () => (/* reexport safe */ _use_outside_click__WEBPACK_IMPORTED_MODULE_5__["default"]),
+/* harmony export */   useResize: () => (/* reexport safe */ _use_resize__WEBPACK_IMPORTED_MODULE_6__.useResize),
+/* harmony export */   useScroll: () => (/* reexport safe */ _use_scroll__WEBPACK_IMPORTED_MODULE_7__["default"])
 /* harmony export */ });
 /* harmony import */ var _use_debounced_callback__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./use_debounced_callback */ "./src/hooks/use_debounced_callback.js");
 /* harmony import */ var _use_did_update__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./use_did_update */ "./src/hooks/use_did_update.js");
 /* harmony import */ var _use_event_listener__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use_event_listener */ "./src/hooks/use_event_listener.js");
 /* harmony import */ var _use_label_id__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./use_label_id */ "./src/hooks/use_label_id.js");
-/* harmony import */ var _use_outside_click__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use_outside_click */ "./src/hooks/use_outside_click.js");
-/* harmony import */ var _use_resize__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./use_resize */ "./src/hooks/use_resize.js");
-/* harmony import */ var _use_scroll__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./use_scroll */ "./src/hooks/use_scroll.js");
+/* harmony import */ var _use_measure__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./use_measure */ "./src/hooks/use_measure.js");
+/* harmony import */ var _use_outside_click__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./use_outside_click */ "./src/hooks/use_outside_click.js");
+/* harmony import */ var _use_resize__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./use_resize */ "./src/hooks/use_resize.js");
+/* harmony import */ var _use_scroll__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./use_scroll */ "./src/hooks/use_scroll.js");
 // LICENSE_CODE ZON
 
 
@@ -32798,6 +32800,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /***/ }),
 
 /***/ "./src/hooks/use_debounced_callback.js":
@@ -32937,6 +32940,69 @@ var getRandomString = function getRandomString(len) {
 
 /***/ }),
 
+/***/ "./src/hooks/use_measure.js":
+/*!**********************************!*\
+  !*** ./src/hooks/use_measure.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useMeasure: () => (/* binding */ useMeasure)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! resize-observer-polyfill */ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+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 useMeasure = function useMeasure() {
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({
+      width: null,
+      height: null
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var previousObserver = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var customRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (node) {
+    if (previousObserver.current) {
+      previousObserver.current.disconnect();
+      previousObserver.current = null;
+    }
+    if ((node === null || node === void 0 ? void 0 : node.nodeType) === Node.ELEMENT_NODE) {
+      var observer = new resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_1__["default"](function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 1),
+          entry = _ref2[0];
+        if (entry && entry.borderBoxSize) {
+          var _entry$borderBoxSize$ = entry.borderBoxSize[0],
+            width = _entry$borderBoxSize$.inlineSize,
+            height = _entry$borderBoxSize$.blockSize;
+          setDimensions({
+            width: width,
+            height: height
+          });
+        }
+      });
+      observer.observe(node);
+      previousObserver.current = observer;
+    }
+  }, []);
+  return [customRef, dimensions];
+};
+
+/***/ }),
+
 /***/ "./src/hooks/use_outside_click.js":
 /*!****************************************!*\
   !*** ./src/hooks/use_outside_click.js ***!
@@ -33323,12 +33389,12 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-var InfoChip = function InfoChip(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    text = _ref.text,
-    icon = _ref.icon,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var InfoChip = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {
+  var _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
+    text = props.text,
+    icon = props.icon,
+    rest = _objectWithoutProperties(props, _excluded);
   var iconColor = {
     success: 'text_success',
     alert: 'text_error',
@@ -33343,6 +33409,7 @@ var InfoChip = function InfoChip(_ref) {
   }[variant] || 'icon_accent';
   var commonProps = (0,_util__WEBPACK_IMPORTED_MODULE_6__.getCommonProps)(rest);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(InfoChipWrapper, _extends({
+    ref: ref,
     $variant: variant
   }, commonProps), icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__.Icon, {
     size: "xxs",
@@ -33352,7 +33419,8 @@ var InfoChip = function InfoChip(_ref) {
     variant: "xs",
     color: textColor
   }, text));
-};
+});
+InfoChip.displayName = 'InfoChip';
 InfoChip.propTypes = {
   variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['default', 'success', 'alert', 'warning', 'info']),
   text: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
@@ -33368,9 +33436,9 @@ var InfoChipWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_
 }).withConfig({
   displayName: "InfoChipWrapper",
   componentId: "sc-qtbg7s-0"
-})(["background-color:", ";border-radius:24px;width:fit-content;min-height:24px;height:24px;"], function (_ref2) {
-  var color = _ref2.theme.color,
-    $variant = _ref2.$variant;
+})(["background-color:", ";border-radius:24px;width:fit-content;min-height:24px;height:24px;"], function (_ref) {
+  var color = _ref.theme.color,
+    $variant = _ref.$variant;
   return color[{
     success: 'bg_fill_success_secondary',
     alert: 'bg_fill_error_secondary',
@@ -37234,7 +37302,7 @@ var Phone = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_shared__WEBPACK_IMPORTED_MODULE_4__.FieldWrapper, _extends({}, rest, {
     ref: ref,
     heightCalculationCallback: heightCalculationCallback,
-    autofocus: false,
+    autoFocus: false,
     autoresize: false,
     verticalAlign: "center",
     Field: PhoneField,
@@ -37271,7 +37339,7 @@ Phone.propTypes = {
   helperText: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   inputProps: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg']),
-  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  autoFocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   maxLength: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
   defaultCountry: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   parsePhoneNumber: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func).isRequired,
@@ -37788,7 +37856,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /*jslint react:true*/
 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); }
-var _excluded = ["id", "name", "value", "leftInnerContent", "leftOuterContent", "rightInnerContent", "rightOuterContent", "heightCalculationCallback", "Field", "fieldRef", "onChange", "onFocus", "onBlur", "onKeyDown", "placeholder", "disabled", "invalid", "autofocus", "helperText", "label", "labelIcon", "labelTooltip", "required", "necessityIndicator", "autoresize", "verticalAlign", "innerWrapper"];
+var _excluded = ["id", "name", "value", "leftInnerContent", "leftOuterContent", "rightInnerContent", "rightOuterContent", "heightCalculationCallback", "Field", "fieldRef", "onChange", "onFocus", "onBlur", "onKeyDown", "placeholder", "disabled", "invalid", "autoFocus", "helperText", "label", "labelIcon", "labelTooltip", "required", "necessityIndicator", "autoresize", "verticalAlign", "innerWrapper"];
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -37832,7 +37900,7 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
     placeholder = props.placeholder,
     disabled = props.disabled,
     invalid = props.invalid,
-    autofocus = props.autofocus,
+    autoFocus = props.autoFocus,
     helperText = props.helperText,
     label = props.label,
     labelIcon = props.labelIcon,
@@ -37863,7 +37931,7 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var _field$current2;
-    if (autofocus) field === null || field === void 0 || (_field$current2 = field.current) === null || _field$current2 === void 0 || _field$current2.focus();
+    if (autoFocus) field === null || field === void 0 || (_field$current2 = field.current) === null || _field$current2 === void 0 || _field$current2.focus();
   }, []);
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     // XXX vadimv: hack to autoresize textarea
@@ -37895,7 +37963,8 @@ var FieldWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().for
     $verticalAlign: verticalAlign,
     onClick: onWrapperClick
   }, leftInnerContent, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Field, _extends({
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    autoFocus: autoFocus
   }, props.inputProps, {
     ref: setFieldRefs,
     id: id,
@@ -37935,7 +38004,7 @@ FieldWrapper.propTypes = {
   })]),
   required: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   necessityIndicator: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['asterisk', 'text']),
-  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  autoFocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   heightCalculationCallback: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   autoresize: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   verticalAlign: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)
@@ -38222,7 +38291,7 @@ Textarea.propTypes = {
   fieldRef: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().func), prop_types__WEBPACK_IMPORTED_MODULE_0___default().shape({
     current: prop_types__WEBPACK_IMPORTED_MODULE_0___default().instanceOf(Element)
   })]),
-  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  autoFocus: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   rows: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
   maxRows: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
   minLength: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
@@ -38334,7 +38403,7 @@ Textbox.propTypes = {
   helperText: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   inputProps: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg']),
-  autofocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  autoFocus: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   fieldRef: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().func), prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
     current: prop_types__WEBPACK_IMPORTED_MODULE_1___default().instanceOf(Element)
   })]),
@@ -38427,7 +38496,7 @@ var ButtonAddInput = function ButtonAddInput(props) {
   }, [onButtonClick, onInputShow, setError, setShowInput]);
   if (showInput) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_textbox__WEBPACK_IMPORTED_MODULE_3__.Textbox, {
-      autofocus: true,
+      autoFocus: true,
       className: (0,_util__WEBPACK_IMPORTED_MODULE_2__.classNames)(className, {
         input: true
       }),
@@ -39058,7 +39127,7 @@ Box.displayName = 'Box';
 var StyledBox = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "StyledBox",
   componentId: "sc-pxszp5-0"
-})(["height:", ";max-height:", ";min-height:", ";width:", ";max-width:", ";min-width:", ";padding:", ";padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";margin:", ";margin-top:", ";margin-right:", ";margin-bottom:", ";margin-left:", ";flex:", ";flex-grow:", ";flex-shrink:", ";flex-basis:", ";justify-self:", ";align-self:", ";order:", ";box-shadow:", ";"], function (props) {
+})(["box-sizing:border-box;height:", ";max-height:", ";min-height:", ";width:", ";max-width:", ";min-width:", ";padding:", ";padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";margin:", ";margin-top:", ";margin-right:", ";margin-bottom:", ";margin-left:", ";flex:", ";flex-grow:", ";flex-shrink:", ";flex-basis:", ";justify-self:", ";align-self:", ";order:", ";box-shadow:", ";"], function (props) {
   return props.$height;
 }, function (props) {
   return props.$maxHeight;
@@ -39865,7 +39934,11 @@ var MenuItemContainer = styled_components__WEBPACK_IMPORTED_MODULE_0___default()
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   ModalBase: () => (/* binding */ ModalBase)
+/* harmony export */   ModalBase: () => (/* binding */ ModalBase),
+/* harmony export */   ModalBaseWrapper: () => (/* binding */ ModalBaseWrapper),
+/* harmony export */   ModalContentWrapper: () => (/* binding */ ModalContentWrapper),
+/* harmony export */   ModalFooterWrapper: () => (/* binding */ ModalFooterWrapper),
+/* harmony export */   ModalHeaderWrapper: () => (/* binding */ ModalHeaderWrapper)
 /* harmony export */ });
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
@@ -39873,13 +39946,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["className", "header", "content", "footer", "size", "shadow", "borders"];
+var _excluded = ["className", "header", "content", "footer", "size", "shadow"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
@@ -39887,102 +39959,38 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-
 var MODAL_WIDTHS = {
   sm: '360px',
   md: '500px',
   lg: '800px',
   full: '90vw'
 };
-var StyledWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_3__.Box).withConfig({
-  displayName: "StyledWrapper",
-  componentId: "sc-1nggvo0-0"
-})(["background-color:", ";border-radius:", ";display:flex;flex-direction:column;font-family:", ";min-width:200px;max-width:", ";width:", ";"], function (_ref) {
-  var color = _ref.theme.color;
-  return color.bg;
-}, function (_ref2) {
-  var spacing = _ref2.theme.spacing;
-  return spacing['02'];
-}, function (_ref3) {
-  var font_family = _ref3.theme.font_family;
-  return font_family.sans;
-}, MODAL_WIDTHS.full, function (props) {
-  return MODAL_WIDTHS[props.$size];
-});
-var StyledHeaderWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex).attrs({
-  padding_top: '06',
-  padding_right: '05',
-  padding_bottom: '0',
-  padding_left: '07',
-  flex_direction: 'column',
-  row_gap: '03'
-}).withConfig({
-  displayName: "StyledHeaderWrapper",
-  componentId: "sc-1nggvo0-1"
-})([""]);
-var StyledContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_3__.Box).attrs({
-  padding_right: '07',
-  padding_bottom: '08',
-  padding_left: '07'
-}).withConfig({
-  displayName: "StyledContentWrapper",
-  componentId: "sc-1nggvo0-2"
-})(["flex:1;overflow-y:auto;", " ", " ", ""], function (_ref4) {
-  var scrollbars = _ref4.theme.scrollbars;
-  return scrollbars.thin;
-}, function (_ref5) {
-  var $borders = _ref5.$borders,
-    color = _ref5.theme.color;
-  return $borders && $borders.top ? "border-top: 1px solid ".concat(color.border_secondary, ";") : '';
-}, function (_ref6) {
-  var $borders = _ref6.$borders,
-    color = _ref6.theme.color;
-  return $borders && $borders.bottom ? "border-bottom: 1px solid ".concat(color.border_secondary, ";") : '';
-});
-var StyledFooterWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_3__.Flex).attrs({
-  padding_top: '04',
-  padding_right: '07',
-  padding_bottom: '04',
-  padding_left: '07'
-}).withConfig({
-  displayName: "StyledFooterWrapper",
-  componentId: "sc-1nggvo0-3"
-})([""]);
-var ModalBase = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_ref7, ref) {
-  var className = _ref7.className,
-    header = _ref7.header,
-    content = _ref7.content,
-    footer = _ref7.footer,
-    _ref7$size = _ref7.size,
-    size = _ref7$size === void 0 ? 'md' : _ref7$size,
-    _ref7$shadow = _ref7.shadow,
-    shadow = _ref7$shadow === void 0 ? 'md' : _ref7$shadow,
-    _ref7$borders = _ref7.borders,
-    borders = _ref7$borders === void 0 ? {
-      bottom: true
-    } : _ref7$borders,
-    rest = _objectWithoutProperties(_ref7, _excluded);
-  var margin_top = header ? '07' : '0';
-  var padding_top = header ? '0' : '07';
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledWrapper, _extends({
+var ModalBase = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+    header = _ref.header,
+    content = _ref.content,
+    footer = _ref.footer,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? 'md' : _ref$shadow,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ModalBaseWrapper, _extends({
     ref: ref,
     className: className
-  }, (0,_util__WEBPACK_IMPORTED_MODULE_4__.getCommonProps)(rest), {
+  }, (0,_util__WEBPACK_IMPORTED_MODULE_3__.getCommonProps)(rest), {
     $size: size,
-    box_shadow: shadow
-  }), header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledHeaderWrapper, {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.classNames)(className, {
+    $shadow: shadow
+  }), header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ModalHeaderWrapper, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(className, {
       header: true
     })
-  }, header), content && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledContentWrapper, {
-    margin_top: margin_top,
-    padding_top: padding_top,
-    $borders: borders,
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.classNames)(className, {
+  }, header), content && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ModalContentWrapper, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(className, {
       content: true
     })
-  }, content), footer && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledFooterWrapper, {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_4__.classNames)(className, {
+  }, content), footer && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ModalFooterWrapper, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(className, {
       footer: true
     })
   }, footer));
@@ -39990,11 +39998,103 @@ var ModalBase = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
 ModalBase.displayName = 'ModalBase';
 ModalBase.propTypes = {
   size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['sm', 'md', 'lg', 'full']),
-  shadow: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['none', 'sm', 'md', 'lg']),
+  shadow: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['none', 'sm', 'md', 'lg', 'small', 'medium', 'large', 'primary', 'success', 'error']),
   header: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   content: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   footer: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node)
 };
+var ModalBaseWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "ModalBaseWrapper",
+  componentId: "sc-1nggvo0-0"
+})(["display:flex;flex-direction:column;padding-top:", ";background-color:", ";border-radius:", ";font-family:", ";min-width:200px;max-width:", ";width:", ";box-shadow:", ";"], function (_ref2) {
+  var spacing = _ref2.theme.spacing;
+  return spacing['05'];
+}, function (_ref3) {
+  var color = _ref3.theme.color;
+  return color.bg;
+}, function (_ref4) {
+  var spacing = _ref4.theme.spacing;
+  return spacing['02'];
+}, function (_ref5) {
+  var font_family = _ref5.theme.font_family;
+  return font_family.sans;
+}, MODAL_WIDTHS.full, function (_ref6) {
+  var $size = _ref6.$size;
+  return MODAL_WIDTHS[$size];
+}, function (_ref7) {
+  var $shadow = _ref7.$shadow,
+    shadow = _ref7.theme.shadow;
+  var _shadow = $shadow && {
+    sm: 'small',
+    small: 'small',
+    md: 'medium',
+    medium: 'medium',
+    lg: 'large',
+    large: 'large',
+    primary: 'primary',
+    success: 'success',
+    error: 'error'
+  }[$shadow];
+  if (!_shadow) return;
+  return shadow[_shadow];
+});
+var ModalHeaderWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "ModalHeaderWrapper",
+  componentId: "sc-1nggvo0-1"
+})(["display:flex;flex-direction:column;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";gap:", ";"], function (_ref8) {
+  var spacing = _ref8.theme.spacing;
+  return spacing['03'];
+}, function (_ref9) {
+  var spacing = _ref9.theme.spacing;
+  return spacing['05'];
+}, function (_ref10) {
+  var spacing = _ref10.theme.spacing;
+  return spacing['03'];
+}, function (_ref11) {
+  var spacing = _ref11.theme.spacing;
+  return spacing['07'];
+}, function (_ref12) {
+  var spacing = _ref12.theme.spacing;
+  return spacing['03'];
+});
+var ModalContentWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "ModalContentWrapper",
+  componentId: "sc-1nggvo0-2"
+})(["flex:1;overflow-y:auto;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";", ""], function (_ref13) {
+  var spacing = _ref13.theme.spacing;
+  return spacing['06'];
+}, function (_ref14) {
+  var spacing = _ref14.theme.spacing;
+  return spacing['07'];
+}, function (_ref15) {
+  var spacing = _ref15.theme.spacing;
+  return spacing['08'];
+}, function (_ref16) {
+  var spacing = _ref16.theme.spacing;
+  return spacing['07'];
+}, function (_ref17) {
+  var scrollbars = _ref17.theme.scrollbars;
+  return scrollbars.thin;
+});
+var ModalFooterWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
+  displayName: "ModalFooterWrapper",
+  componentId: "sc-1nggvo0-3"
+})(["padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";border-top:1px solid ", ";"], function (_ref18) {
+  var spacing = _ref18.theme.spacing;
+  return spacing['04'];
+}, function (_ref19) {
+  var spacing = _ref19.theme.spacing;
+  return spacing['07'];
+}, function (_ref20) {
+  var spacing = _ref20.theme.spacing;
+  return spacing['04'];
+}, function (_ref21) {
+  var spacing = _ref21.theme.spacing;
+  return spacing['07'];
+}, function (_ref22) {
+  var color = _ref22.theme.color;
+  return color.border_secondary;
+});
 
 /***/ }),
 
@@ -40008,19 +40108,22 @@ ModalBase.propTypes = {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Base: () => (/* reexport safe */ _base__WEBPACK_IMPORTED_MODULE_0__.ModalBase),
-/* harmony export */   Button: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_2__.ModalButton),
-/* harmony export */   CloseButton: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_2__.CloseButton),
-/* harmony export */   Footer: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_2__.ModalFooter),
-/* harmony export */   General: () => (/* reexport safe */ _modal__WEBPACK_IMPORTED_MODULE_1__.General),
-/* harmony export */   Header: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_2__.ModalHeader),
-/* harmony export */   Popup: () => (/* reexport safe */ _modal__WEBPACK_IMPORTED_MODULE_1__.Popup),
-/* harmony export */   Title: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_2__.ModalTitle),
-/* harmony export */   withBackdrop: () => (/* reexport safe */ _with_backdrop__WEBPACK_IMPORTED_MODULE_3__.withBackdrop)
+/* harmony export */   Button: () => (/* reexport safe */ _modal_button__WEBPACK_IMPORTED_MODULE_1__.ModalButton),
+/* harmony export */   CloseButton: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.CloseButton),
+/* harmony export */   Footer: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.ModalFooter),
+/* harmony export */   General: () => (/* reexport safe */ _modal__WEBPACK_IMPORTED_MODULE_2__.General),
+/* harmony export */   Header: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.ModalHeader),
+/* harmony export */   Modal2: () => (/* reexport safe */ _modal2_js__WEBPACK_IMPORTED_MODULE_5__.Modal2),
+/* harmony export */   Popup: () => (/* reexport safe */ _modal__WEBPACK_IMPORTED_MODULE_2__.Popup),
+/* harmony export */   Title: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.ModalTitle),
+/* harmony export */   withBackdrop: () => (/* reexport safe */ _with_backdrop__WEBPACK_IMPORTED_MODULE_4__.withBackdrop)
 /* harmony export */ });
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base */ "./src/modal/base.js");
-/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modal */ "./src/modal/modal.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./util */ "./src/modal/util.js");
-/* harmony import */ var _with_backdrop__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./with_backdrop */ "./src/modal/with_backdrop.js");
+/* harmony import */ var _modal_button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modal_button */ "./src/modal/modal_button.js");
+/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modal */ "./src/modal/modal.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./util */ "./src/modal/util.js");
+/* harmony import */ var _with_backdrop__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./with_backdrop */ "./src/modal/with_backdrop.js");
+/* harmony import */ var _modal2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modal2.js */ "./src/modal/modal2.js");
 // LICENSE_CODE ZON
 
 
@@ -40030,6 +40133,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 /***/ }),
 
 /***/ "./src/modal/modal.js":
@@ -40118,6 +40223,313 @@ General.propTypes = {
 var Popup = (0,_with_backdrop__WEBPACK_IMPORTED_MODULE_4__.withBackdrop)(General);
 
 
+/***/ }),
+
+/***/ "./src/modal/modal2.js":
+/*!*****************************!*\
+  !*** ./src/modal/modal2.js ***!
+  \*****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Modal2: () => (/* binding */ Modal2)
+/* harmony export */ });
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _icon_button_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon_button.js */ "./src/icon_button.js");
+/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _base_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./base.js */ "./src/modal/base.js");
+/* harmony import */ var _modal_button_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./modal_button.js */ "./src/modal/modal_button.js");
+/* harmony import */ var _with_backdrop_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./with_backdrop.js */ "./src/modal/with_backdrop.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["show", "title", "subtitle", "children", "closable", "closeOnOutsideClick", "onClose", "footer", "okLabel", "onOk", "okProps", "cancelLabel", "onCancel", "cancelProps", "size", "footerVariant"],
+  _excluded2 = ["className", "classNamePrefix", "header", "content", "footer", "footerVariant", "size", "parentDimensions"];
+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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+
+
+
+
+
+
+
+var Modal2 = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_ref, ref) {
+  var show = _ref.show,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    children = _ref.children,
+    closable = _ref.closable,
+    closeOnOutsideClick = _ref.closeOnOutsideClick,
+    onClose = _ref.onClose,
+    footer = _ref.footer,
+    _ref$okLabel = _ref.okLabel,
+    okLabel = _ref$okLabel === void 0 ? 'OK' : _ref$okLabel,
+    onOk = _ref.onOk,
+    okProps = _ref.okProps,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? 'Cancel' : _ref$cancelLabel,
+    onCancel = _ref.onCancel,
+    cancelProps = _ref.cancelProps,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$footerVariant = _ref.footerVariant,
+    footerVariant = _ref$footerVariant === void 0 ? 'horizontal' : _ref$footerVariant,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var header = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex, {
+    align_items: "center",
+    justify_content: "space-between",
+    width: "100%"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Header, {
+    color: "text"
+  }, title), !!closable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button_js__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
+    size: "xs",
+    icon: "CloseSmall",
+    color: "icon",
+    onClick: onClose,
+    "data-testid": "modal_header_close_button"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
+    padding_right: "04"
+  }, subtitle));
+  var renderCancel = !!(onCancel && cancelLabel);
+  var renderOk = !!(onOk && okLabel);
+  var renderFooter = renderOk || renderCancel;
+  var _footer = (0,_util__WEBPACK_IMPORTED_MODULE_7__.firstDefined)(footer, renderFooter && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, renderCancel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_button_js__WEBPACK_IMPORTED_MODULE_9__.ModalButton, _extends({
+    size: "sm",
+    text: cancelLabel,
+    hotKey: "Escape",
+    variant: "secondary",
+    onClick: onCancel
+  }, cancelProps, {
+    "data-testid": "modal_footer_cancel_button"
+  })), renderOk && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_button_js__WEBPACK_IMPORTED_MODULE_9__.ModalButton, _extends({
+    size: "sm",
+    text: okLabel,
+    hotKey: "Enter",
+    variant: "primary",
+    onClick: onOk
+  }, okProps, {
+    "data-testid": "modal_footer_ok_button"
+  }))));
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ModalWithBackdrop, _extends({
+    ref: ref,
+    "data-testid": "modal_general",
+    show: show,
+    size: size,
+    onOutsideClick: closeOnOutsideClick && onClose,
+    header: header,
+    content: children,
+    footer: _footer,
+    footerVariant: footerVariant
+  }, rest));
+});
+Modal2.displayName = 'Modal2';
+Modal2.propTypes = {
+  className: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  classNamePrefix: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
+  size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['sm', 'md', 'lg', 'full']),
+  footerVariant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['vertical', 'horizontal', 'horizontal_full']),
+  show: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool).isRequired,
+  closable: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  closeOnOutsideClick: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  title: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+  subtitle: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+  footer: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_0___default().node)),
+  onClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  onBack: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  okLabel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+  onOk: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  okProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
+  cancelLabel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
+  onCancel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  cancelProps: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object)
+};
+Modal2.Button = _modal_button_js__WEBPACK_IMPORTED_MODULE_9__.ModalButton;
+
+/**
+ * Internal part of modal without backdrop
+ */
+var ModalPane = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (_ref2, ref) {
+  var className = _ref2.className,
+    classNamePrefix = _ref2.classNamePrefix,
+    header = _ref2.header,
+    content = _ref2.content,
+    footer = _ref2.footer,
+    footerVariant = _ref2.footerVariant,
+    size = _ref2.size,
+    parentDimensions = _ref2.parentDimensions,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  var _useMeasure = (0,_hooks__WEBPACK_IMPORTED_MODULE_6__.useMeasure)(),
+    _useMeasure2 = _slicedToArray(_useMeasure, 2),
+    headerRef = _useMeasure2[0],
+    headerHeight = _useMeasure2[1].height;
+  var _useMeasure3 = (0,_hooks__WEBPACK_IMPORTED_MODULE_6__.useMeasure)(),
+    _useMeasure4 = _slicedToArray(_useMeasure3, 2),
+    footerRef = _useMeasure4[0],
+    footerHeight = _useMeasure4[1].height;
+  var minHeight = 32 + (headerHeight || 0) + (footerHeight || 0);
+  var maxHeight = parentDimensions !== null && parentDimensions !== void 0 && parentDimensions.height ? "".concat(Math.max(parentDimensions.height - 100, minHeight), "px") : undefined;
+  console.log({
+    headerHeight: headerHeight,
+    footerHeight: footerHeight,
+    minHeight: minHeight,
+    maxHeight: maxHeight
+  });
+  var FooterLayout = footerLayout[footerVariant] || FooterHorizontal;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_base_js__WEBPACK_IMPORTED_MODULE_8__.ModalBaseWrapper, _extends({
+    ref: ref,
+    className: className
+  }, (0,_util__WEBPACK_IMPORTED_MODULE_7__.getCommonProps)(rest), {
+    $size: size,
+    $shadow: "large",
+    $minHeight: "".concat(minHeight, "px"),
+    $maxHeight: maxHeight
+  }), header && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_base_js__WEBPACK_IMPORTED_MODULE_8__.ModalHeaderWrapper, {
+    ref: headerRef,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_7__.classNames)(classNamePrefix, {
+      header: true
+    })
+  }, header), content && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_base_js__WEBPACK_IMPORTED_MODULE_8__.ModalContentWrapper, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_7__.classNames)(classNamePrefix, {
+      content: true
+    })
+  }, content), footer && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_base_js__WEBPACK_IMPORTED_MODULE_8__.ModalFooterWrapper, {
+    ref: footerRef,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_7__.classNames)(classNamePrefix, {
+      footer: true
+    })
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(FooterLayout, null, footer)));
+});
+ModalPane.displayName = 'ModalPane';
+
+/**
+ * Internal modal wrapped with withBackdrop for
+ * showing and hidding with animation
+ */
+var ModalWithBackdrop = (0,_with_backdrop_js__WEBPACK_IMPORTED_MODULE_10__.withBackdrop)(ModalPane);
+
+// victorf: FIX backdrop vertical alignment with
+// top: 0;
+// transform: translate(0, ${$show=>$show ? '0': 'calc(50vh - 50%)'});
+
+var FooterHorizontal = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).attrs({
+  gap: '04',
+  align_items: 'center',
+  justify_content: 'flex-end'
+}).withConfig({
+  displayName: "FooterHorizontal",
+  componentId: "sc-1p3wums-0"
+})([""]);
+var FooterFullHorizontal = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).attrs({
+  gap: '04',
+  align_items: 'space-between'
+}).withConfig({
+  displayName: "FooterFullHorizontal",
+  componentId: "sc-1p3wums-1"
+})(["button{width:100%;}"]);
+var FooterVertical = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).attrs({
+  gap: '04',
+  flex_direction: 'column'
+}).withConfig({
+  displayName: "FooterVertical",
+  componentId: "sc-1p3wums-2"
+})([""]);
+var footerLayout = {
+  horizontal: FooterHorizontal,
+  horizontal_full: FooterFullHorizontal,
+  vertical: FooterVertical
+};
+
+/***/ }),
+
+/***/ "./src/modal/modal_button.js":
+/*!***********************************!*\
+  !*** ./src/modal/modal_button.js ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ModalButton: () => (/* binding */ ModalButton)
+/* harmony export */ });
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../button */ "./src/button/index.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["onClick", "hotKey", "size"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+var ModalButton = function ModalButton(_ref) {
+  var onClick = _ref.onClick,
+    hotKey = _ref.hotKey,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var icon = (0,_util__WEBPACK_IMPORTED_MODULE_3__.firstDefined)(rest.icon, getHotKeyIcon(hotKey));
+  var iconPlacement = (0,_util__WEBPACK_IMPORTED_MODULE_3__.firstDefined)(rest.iconPlacement, getHotKeyIcon(hotKey) ? 'right' : undefined);
+  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+    var _document$activeEleme;
+    (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.blur();
+    if (!hotKey) return;
+    var handle_key_press = function handle_key_press(e) {
+      if (e.key.toLowerCase() == hotKey.toLowerCase()) onClick === null || onClick === void 0 || onClick(e);
+    };
+    window.addEventListener('keydown', handle_key_press);
+    return function () {
+      return window.removeEventListener('keydown', handle_key_press);
+    };
+  }, [hotKey]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_button__WEBPACK_IMPORTED_MODULE_2__.Button, _extends({
+    onClick: onClick
+  }, rest, {
+    iconPlacement: iconPlacement,
+    icon: icon,
+    size: size
+  }));
+};
+ModalButton.propTypes = {
+  hotKey: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['Enter', 'Escape'])
+};
+var getHotKeyIcon = function getHotKeyIcon(hotKey) {
+  if (typeof hotKey != 'string') return;
+  if (hotKey.toLowerCase() == 'enter') return 'KeyEnter';
+  if (hotKey.toLowerCase() == 'escape') return 'KeyEscape';
+};
+
 /***/ }),
 
 /***/ "./src/modal/util.js":
@@ -40131,7 +40543,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   ButtonsGroup: () => (/* binding */ ButtonsGroup),
 /* harmony export */   CloseButton: () => (/* binding */ CloseButton),
-/* harmony export */   ModalButton: () => (/* binding */ ModalButton),
 /* harmony export */   ModalFooter: () => (/* binding */ ModalFooter),
 /* harmony export */   ModalHeader: () => (/* binding */ ModalHeader),
 /* harmony export */   ModalSubtitle: () => (/* binding */ ModalSubtitle),
@@ -40143,17 +40554,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../button */ "./src/button/index.js");
-/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _icon_button_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../icon_button.js */ "./src/icon_button.js");
+/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../layout */ "./src/layout/index.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
+/* harmony import */ var _modal_button_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./modal_button.js */ "./src/modal/modal_button.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["onClick", "hotKey"];
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 
 
@@ -40165,11 +40573,11 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 var ModalTitle = function ModalTitle(_ref) {
   var text = _ref.text,
     children = _ref.children;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_6__.Header, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_5__.Header, {
     color: "text"
   }, children !== null && children !== void 0 ? children : text);
 };
-var ModalSubtitle = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typography__WEBPACK_IMPORTED_MODULE_6__.Label).withConfig({
+var ModalSubtitle = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_typography__WEBPACK_IMPORTED_MODULE_5__.Label).withConfig({
   displayName: "ModalSubtitle",
   componentId: "sc-1p9nv3u-0"
 })(["padding-right:", ";color:", ";"], function (_ref2) {
@@ -40180,47 +40588,24 @@ var ModalSubtitle = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_ty
   return color.text_secondary;
 });
 var CloseButton = function CloseButton(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, _extends({
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button_js__WEBPACK_IMPORTED_MODULE_3__.IconButton, _extends({
     icon: "CloseSmall",
     size: "xs"
   }, props));
 };
-var ButtonsGroup = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex).attrs({
+var ButtonsGroup = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex).attrs({
   gap: '04',
   align_items: 'center'
 }).withConfig({
   displayName: "ButtonsGroup",
   componentId: "sc-1p9nv3u-1"
 })([""]);
-var ModalButton = function ModalButton(_ref4) {
-  var onClick = _ref4.onClick,
-    hotKey = _ref4.hotKey,
-    rest = _objectWithoutProperties(_ref4, _excluded);
-  var icon = hotKey == 'enter' ? 'KeyEnter' : 'KeyEscape';
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    var _document$activeEleme;
-    (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.blur();
-    if (!hotKey) return;
-    var handle_key_press = function handle_key_press(e) {
-      if (e.key.toLowerCase() == hotKey.toLowerCase()) onClick === null || onClick === void 0 || onClick();
-    };
-    window.addEventListener('keydown', handle_key_press);
-    return function () {
-      return window.removeEventListener('keydown', handle_key_press);
-    };
-  }, []);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_button__WEBPACK_IMPORTED_MODULE_3__.Button, _extends({
-    onClick: onClick,
-    iconPlacement: "right",
-    icon: hotKey && icon
-  }, rest));
-};
-var ModalHeader = function ModalHeader(_ref5) {
-  var title = _ref5.title,
-    subtitle = _ref5.subtitle,
-    onCancel = _ref5.onCancel,
-    cancelDisabled = _ref5.cancelDisabled;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex, {
+var ModalHeader = function ModalHeader(_ref4) {
+  var title = _ref4.title,
+    subtitle = _ref4.subtitle,
+    onCancel = _ref4.onCancel,
+    cancelDisabled = _ref4.cancelDisabled;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex, {
     align_items: "center",
     justify_content: "space-between",
     width: "100%"
@@ -40235,31 +40620,31 @@ ModalHeader.propTypes = {
   onCancel: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
   cancelDisabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
 };
-var ModalFooter = function ModalFooter(_ref6) {
-  var _ref6$okLabel = _ref6.okLabel,
-    okLabel = _ref6$okLabel === void 0 ? 'OK' : _ref6$okLabel,
-    _ref6$cancelLabel = _ref6.cancelLabel,
-    cancelLabel = _ref6$cancelLabel === void 0 ? 'Cancel' : _ref6$cancelLabel,
-    onOk = _ref6.onOk,
-    onCancel = _ref6.onCancel,
-    okDisabled = _ref6.okDisabled,
-    cancelDisabled = _ref6.cancelDisabled;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_5__.Flex, {
+var ModalFooter = function ModalFooter(_ref5) {
+  var _ref5$okLabel = _ref5.okLabel,
+    okLabel = _ref5$okLabel === void 0 ? 'OK' : _ref5$okLabel,
+    _ref5$cancelLabel = _ref5.cancelLabel,
+    cancelLabel = _ref5$cancelLabel === void 0 ? 'Cancel' : _ref5$cancelLabel,
+    onOk = _ref5.onOk,
+    onCancel = _ref5.onCancel,
+    okDisabled = _ref5.okDisabled,
+    cancelDisabled = _ref5.cancelDisabled;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex, {
     width: "100%",
     justify_content: "flex-end"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ButtonsGroup, null, onCancel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ModalButton, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ButtonsGroup, null, onCancel && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_button_js__WEBPACK_IMPORTED_MODULE_6__.ModalButton, {
     text: cancelLabel,
     variant: "secondary",
     onClick: onCancel,
     disabled: cancelDisabled,
-    hotKey: "escape",
+    hotKey: "Escape",
     "data-testid": "modal_footer_cancel_button"
-  }), onOk && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ModalButton, {
+  }), onOk && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_modal_button_js__WEBPACK_IMPORTED_MODULE_6__.ModalButton, {
     text: okLabel,
     variant: "primary",
     onClick: onOk,
     disabled: okDisabled,
-    hotKey: "enter",
+    hotKey: "Enter",
     "data-testid": "modal_footer_ok_button"
   })));
 };
@@ -40639,7 +41024,7 @@ Snackbar.propTypes = {
 var Wrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "Wrapper",
   componentId: "sc-6ku6mu-0"
-})(["display:flex;flex-direction:row;justify-content:center;align-items:flex-start;padding:16px;gap:16px;border-radius:4px;background-color:", ";"], function (_ref2) {
+})(["display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;padding:16px;gap:16px;border-radius:4px;background-color:", ";"], function (_ref2) {
   var $type = _ref2.$type,
     color = _ref2.theme.color;
   return {
@@ -44554,6 +44939,9 @@ var RowRenderer = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().memo
   var _style = _objectSpread(_objectSpread({}, style), {}, {
     padding: '0.3px 0'
   });
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    return cache.current.clear(index);
+  }, [row === null || row === void 0 ? void 0 : row.id]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_1__.CellMeasurer, {
     cache: cache.current,
     parent: parent,
@@ -44612,13 +45000,14 @@ var renderClone = function renderClone(rows, renderRow) {
     });
   };
 };
-var listRefHandler = function listRefHandler(droppableProvided, setListRef) {
+var listRefHandler = function listRefHandler(setList, setListDOMRef, droppableProvided) {
   return function (ref) {
     var _ref$Grid;
     if (!ref) return;
+    setList(ref);
     var element = ref === null || ref === void 0 || (_ref$Grid = ref.Grid) === null || _ref$Grid === void 0 ? void 0 : _ref$Grid._scrollingContainer;
     if (element instanceof window.HTMLElement) {
-      setListRef(element === null || element === void 0 ? void 0 : element.firstChild);
+      setListDOMRef(element === null || element === void 0 ? void 0 : element.firstChild);
       droppableProvided.innerRef(element);
     }
   };
@@ -44632,21 +45021,28 @@ var VirtualizedBodyComp = function VirtualizedBodyComp(props) {
     maxHeight = _useTableContext.scrollHeight;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
-    listRef = _useState2[0],
-    setListRef = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
+    listDOMRef = _useState2[0],
+    setListDOMRef = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(),
     _useState4 = _slicedToArray(_useState3, 2),
-    _height = _useState4[0],
-    setHeight = _useState4[1];
+    list = _useState4[0],
+    setList = _useState4[1];
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    return list === null || list === void 0 ? void 0 : list.recomputeRowHeights();
+  }, [rows.length]);
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    _height = _useState6[0],
+    setHeight = _useState6[1];
   var _useRowHoverActions = (0,_row_hover_actions__WEBPACK_IMPORTED_MODULE_5__.useRowHoverActions)(),
     renderHoverActions = _useRowHoverActions.renderHoverActions,
     rowHoverEvents = _useRowHoverActions.rowHoverEvents;
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    if (listRef) listRef.style.overflow = 'unset';
+    if (listDOMRef) listDOMRef.style.overflow = 'unset';
     setHeight(rows.reduce(function (acc, row, index) {
       return acc += measurerCache.current.getHeight(index, 0);
     }, 0));
-  }, [listRef, rows]);
+  }, [listDOMRef, rows]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, _extends({}, droppableProps, {
     mode: "virtual",
     renderClone: renderClone(rows, renderRow)
@@ -44663,12 +45059,12 @@ var VirtualizedBodyComp = function VirtualizedBodyComp(props) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledList, {
         width: width,
         height: height,
-        overscanRowCount: 7,
+        overscanRowCount: 13,
         estimatedRowSize: 30,
         rowHeight: measurerCache.current.rowHeight,
         rowCount: rows.length,
         deferredMeasurementCache: measurerCache.current,
-        ref: listRefHandler(provided, setListRef),
+        ref: listRefHandler(setList, setListDOMRef, provided),
         rowRenderer: rowRenderer(rows, measurerCache, renderRow, rowHoverEvents)
       });
     })), renderHoverActions());
@@ -85572,6 +85968,949 @@ function applyMiddleware() {
 
 
 
+/***/ }),
+
+/***/ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js":
+/*!*************************************************************************!*\
+  !*** ./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/**
+ * A collection of shims that provide minimal functionality of the ES6 collections.
+ *
+ * These implementations are not meant to be used outside of the ResizeObserver
+ * modules as they cover only a limited range of use cases.
+ */
+/* eslint-disable require-jsdoc, valid-jsdoc */
+var MapShim = (function () {
+    if (typeof Map !== 'undefined') {
+        return Map;
+    }
+    /**
+     * Returns index in provided array that matches the specified key.
+     *
+     * @param {Array<Array>} arr
+     * @param {*} key
+     * @returns {number}
+     */
+    function getIndex(arr, key) {
+        var result = -1;
+        arr.some(function (entry, index) {
+            if (entry[0] === key) {
+                result = index;
+                return true;
+            }
+            return false;
+        });
+        return result;
+    }
+    return /** @class */ (function () {
+        function class_1() {
+            this.__entries__ = [];
+        }
+        Object.defineProperty(class_1.prototype, "size", {
+            /**
+             * @returns {boolean}
+             */
+            get: function () {
+                return this.__entries__.length;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @param {*} key
+         * @returns {*}
+         */
+        class_1.prototype.get = function (key) {
+            var index = getIndex(this.__entries__, key);
+            var entry = this.__entries__[index];
+            return entry && entry[1];
+        };
+        /**
+         * @param {*} key
+         * @param {*} value
+         * @returns {void}
+         */
+        class_1.prototype.set = function (key, value) {
+            var index = getIndex(this.__entries__, key);
+            if (~index) {
+                this.__entries__[index][1] = value;
+            }
+            else {
+                this.__entries__.push([key, value]);
+            }
+        };
+        /**
+         * @param {*} key
+         * @returns {void}
+         */
+        class_1.prototype.delete = function (key) {
+            var entries = this.__entries__;
+            var index = getIndex(entries, key);
+            if (~index) {
+                entries.splice(index, 1);
+            }
+        };
+        /**
+         * @param {*} key
+         * @returns {void}
+         */
+        class_1.prototype.has = function (key) {
+            return !!~getIndex(this.__entries__, key);
+        };
+        /**
+         * @returns {void}
+         */
+        class_1.prototype.clear = function () {
+            this.__entries__.splice(0);
+        };
+        /**
+         * @param {Function} callback
+         * @param {*} [ctx=null]
+         * @returns {void}
+         */
+        class_1.prototype.forEach = function (callback, ctx) {
+            if (ctx === void 0) { ctx = null; }
+            for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
+                var entry = _a[_i];
+                callback.call(ctx, entry[1], entry[0]);
+            }
+        };
+        return class_1;
+    }());
+})();
+
+/**
+ * Detects whether window and document objects are available in current environment.
+ */
+var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
+
+// Returns global object of a current environment.
+var global$1 = (function () {
+    if (typeof __webpack_require__.g !== 'undefined' && __webpack_require__.g.Math === Math) {
+        return __webpack_require__.g;
+    }
+    if (typeof self !== 'undefined' && self.Math === Math) {
+        return self;
+    }
+    if (typeof window !== 'undefined' && window.Math === Math) {
+        return window;
+    }
+    // eslint-disable-next-line no-new-func
+    return Function('return this')();
+})();
+
+/**
+ * A shim for the requestAnimationFrame which falls back to the setTimeout if
+ * first one is not supported.
+ *
+ * @returns {number} Requests' identifier.
+ */
+var requestAnimationFrame$1 = (function () {
+    if (typeof requestAnimationFrame === 'function') {
+        // It's required to use a bounded function because IE sometimes throws
+        // an "Invalid calling object" error if rAF is invoked without the global
+        // object on the left hand side.
+        return requestAnimationFrame.bind(global$1);
+    }
+    return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
+})();
+
+// Defines minimum timeout before adding a trailing call.
+var trailingTimeout = 2;
+/**
+ * Creates a wrapper function which ensures that provided callback will be
+ * invoked only once during the specified delay period.
+ *
+ * @param {Function} callback - Function to be invoked after the delay period.
+ * @param {number} delay - Delay after which to invoke callback.
+ * @returns {Function}
+ */
+function throttle (callback, delay) {
+    var leadingCall = false, trailingCall = false, lastCallTime = 0;
+    /**
+     * Invokes the original callback function and schedules new invocation if
+     * the "proxy" was called during current request.
+     *
+     * @returns {void}
+     */
+    function resolvePending() {
+        if (leadingCall) {
+            leadingCall = false;
+            callback();
+        }
+        if (trailingCall) {
+            proxy();
+        }
+    }
+    /**
+     * Callback invoked after the specified delay. It will further postpone
+     * invocation of the original function delegating it to the
+     * requestAnimationFrame.
+     *
+     * @returns {void}
+     */
+    function timeoutCallback() {
+        requestAnimationFrame$1(resolvePending);
+    }
+    /**
+     * Schedules invocation of the original function.
+     *
+     * @returns {void}
+     */
+    function proxy() {
+        var timeStamp = Date.now();
+        if (leadingCall) {
+            // Reject immediately following calls.
+            if (timeStamp - lastCallTime < trailingTimeout) {
+                return;
+            }
+            // Schedule new call to be in invoked when the pending one is resolved.
+            // This is important for "transitions" which never actually start
+            // immediately so there is a chance that we might miss one if change
+            // happens amids the pending invocation.
+            trailingCall = true;
+        }
+        else {
+            leadingCall = true;
+            trailingCall = false;
+            setTimeout(timeoutCallback, delay);
+        }
+        lastCallTime = timeStamp;
+    }
+    return proxy;
+}
+
+// Minimum delay before invoking the update of observers.
+var REFRESH_DELAY = 20;
+// A list of substrings of CSS properties used to find transition events that
+// might affect dimensions of observed elements.
+var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
+// Check if MutationObserver is available.
+var mutationObserverSupported = typeof MutationObserver !== 'undefined';
+/**
+ * Singleton controller class which handles updates of ResizeObserver instances.
+ */
+var ResizeObserverController = /** @class */ (function () {
+    /**
+     * Creates a new instance of ResizeObserverController.
+     *
+     * @private
+     */
+    function ResizeObserverController() {
+        /**
+         * Indicates whether DOM listeners have been added.
+         *
+         * @private {boolean}
+         */
+        this.connected_ = false;
+        /**
+         * Tells that controller has subscribed for Mutation Events.
+         *
+         * @private {boolean}
+         */
+        this.mutationEventsAdded_ = false;
+        /**
+         * Keeps reference to the instance of MutationObserver.
+         *
+         * @private {MutationObserver}
+         */
+        this.mutationsObserver_ = null;
+        /**
+         * A list of connected observers.
+         *
+         * @private {Array<ResizeObserverSPI>}
+         */
+        this.observers_ = [];
+        this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
+        this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
+    }
+    /**
+     * Adds observer to observers list.
+     *
+     * @param {ResizeObserverSPI} observer - Observer to be added.
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.addObserver = function (observer) {
+        if (!~this.observers_.indexOf(observer)) {
+            this.observers_.push(observer);
+        }
+        // Add listeners if they haven't been added yet.
+        if (!this.connected_) {
+            this.connect_();
+        }
+    };
+    /**
+     * Removes observer from observers list.
+     *
+     * @param {ResizeObserverSPI} observer - Observer to be removed.
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.removeObserver = function (observer) {
+        var observers = this.observers_;
+        var index = observers.indexOf(observer);
+        // Remove observer if it's present in registry.
+        if (~index) {
+            observers.splice(index, 1);
+        }
+        // Remove listeners if controller has no connected observers.
+        if (!observers.length && this.connected_) {
+            this.disconnect_();
+        }
+    };
+    /**
+     * Invokes the update of observers. It will continue running updates insofar
+     * it detects changes.
+     *
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.refresh = function () {
+        var changesDetected = this.updateObservers_();
+        // Continue running updates if changes have been detected as there might
+        // be future ones caused by CSS transitions.
+        if (changesDetected) {
+            this.refresh();
+        }
+    };
+    /**
+     * Updates every observer from observers list and notifies them of queued
+     * entries.
+     *
+     * @private
+     * @returns {boolean} Returns "true" if any observer has detected changes in
+     *      dimensions of it's elements.
+     */
+    ResizeObserverController.prototype.updateObservers_ = function () {
+        // Collect observers that have active observations.
+        var activeObservers = this.observers_.filter(function (observer) {
+            return observer.gatherActive(), observer.hasActive();
+        });
+        // Deliver notifications in a separate cycle in order to avoid any
+        // collisions between observers, e.g. when multiple instances of
+        // ResizeObserver are tracking the same element and the callback of one
+        // of them changes content dimensions of the observed target. Sometimes
+        // this may result in notifications being blocked for the rest of observers.
+        activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
+        return activeObservers.length > 0;
+    };
+    /**
+     * Initializes DOM listeners.
+     *
+     * @private
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.connect_ = function () {
+        // Do nothing if running in a non-browser environment or if listeners
+        // have been already added.
+        if (!isBrowser || this.connected_) {
+            return;
+        }
+        // Subscription to the "Transitionend" event is used as a workaround for
+        // delayed transitions. This way it's possible to capture at least the
+        // final state of an element.
+        document.addEventListener('transitionend', this.onTransitionEnd_);
+        window.addEventListener('resize', this.refresh);
+        if (mutationObserverSupported) {
+            this.mutationsObserver_ = new MutationObserver(this.refresh);
+            this.mutationsObserver_.observe(document, {
+                attributes: true,
+                childList: true,
+                characterData: true,
+                subtree: true
+            });
+        }
+        else {
+            document.addEventListener('DOMSubtreeModified', this.refresh);
+            this.mutationEventsAdded_ = true;
+        }
+        this.connected_ = true;
+    };
+    /**
+     * Removes DOM listeners.
+     *
+     * @private
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.disconnect_ = function () {
+        // Do nothing if running in a non-browser environment or if listeners
+        // have been already removed.
+        if (!isBrowser || !this.connected_) {
+            return;
+        }
+        document.removeEventListener('transitionend', this.onTransitionEnd_);
+        window.removeEventListener('resize', this.refresh);
+        if (this.mutationsObserver_) {
+            this.mutationsObserver_.disconnect();
+        }
+        if (this.mutationEventsAdded_) {
+            document.removeEventListener('DOMSubtreeModified', this.refresh);
+        }
+        this.mutationsObserver_ = null;
+        this.mutationEventsAdded_ = false;
+        this.connected_ = false;
+    };
+    /**
+     * "Transitionend" event handler.
+     *
+     * @private
+     * @param {TransitionEvent} event
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
+        var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
+        // Detect whether transition may affect dimensions of an element.
+        var isReflowProperty = transitionKeys.some(function (key) {
+            return !!~propertyName.indexOf(key);
+        });
+        if (isReflowProperty) {
+            this.refresh();
+        }
+    };
+    /**
+     * Returns instance of the ResizeObserverController.
+     *
+     * @returns {ResizeObserverController}
+     */
+    ResizeObserverController.getInstance = function () {
+        if (!this.instance_) {
+            this.instance_ = new ResizeObserverController();
+        }
+        return this.instance_;
+    };
+    /**
+     * Holds reference to the controller's instance.
+     *
+     * @private {ResizeObserverController}
+     */
+    ResizeObserverController.instance_ = null;
+    return ResizeObserverController;
+}());
+
+/**
+ * Defines non-writable/enumerable properties of the provided target object.
+ *
+ * @param {Object} target - Object for which to define properties.
+ * @param {Object} props - Properties to be defined.
+ * @returns {Object} Target object.
+ */
+var defineConfigurable = (function (target, props) {
+    for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
+        var key = _a[_i];
+        Object.defineProperty(target, key, {
+            value: props[key],
+            enumerable: false,
+            writable: false,
+            configurable: true
+        });
+    }
+    return target;
+});
+
+/**
+ * Returns the global object associated with provided element.
+ *
+ * @param {Object} target
+ * @returns {Object}
+ */
+var getWindowOf = (function (target) {
+    // Assume that the element is an instance of Node, which means that it
+    // has the "ownerDocument" property from which we can retrieve a
+    // corresponding global object.
+    var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
+    // Return the local global object if it's not possible extract one from
+    // provided element.
+    return ownerGlobal || global$1;
+});
+
+// Placeholder of an empty content rectangle.
+var emptyRect = createRectInit(0, 0, 0, 0);
+/**
+ * Converts provided string to a number.
+ *
+ * @param {number|string} value
+ * @returns {number}
+ */
+function toFloat(value) {
+    return parseFloat(value) || 0;
+}
+/**
+ * Extracts borders size from provided styles.
+ *
+ * @param {CSSStyleDeclaration} styles
+ * @param {...string} positions - Borders positions (top, right, ...)
+ * @returns {number}
+ */
+function getBordersSize(styles) {
+    var positions = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        positions[_i - 1] = arguments[_i];
+    }
+    return positions.reduce(function (size, position) {
+        var value = styles['border-' + position + '-width'];
+        return size + toFloat(value);
+    }, 0);
+}
+/**
+ * Extracts paddings sizes from provided styles.
+ *
+ * @param {CSSStyleDeclaration} styles
+ * @returns {Object} Paddings box.
+ */
+function getPaddings(styles) {
+    var positions = ['top', 'right', 'bottom', 'left'];
+    var paddings = {};
+    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+        var position = positions_1[_i];
+        var value = styles['padding-' + position];
+        paddings[position] = toFloat(value);
+    }
+    return paddings;
+}
+/**
+ * Calculates content rectangle of provided SVG element.
+ *
+ * @param {SVGGraphicsElement} target - Element content rectangle of which needs
+ *      to be calculated.
+ * @returns {DOMRectInit}
+ */
+function getSVGContentRect(target) {
+    var bbox = target.getBBox();
+    return createRectInit(0, 0, bbox.width, bbox.height);
+}
+/**
+ * Calculates content rectangle of provided HTMLElement.
+ *
+ * @param {HTMLElement} target - Element for which to calculate the content rectangle.
+ * @returns {DOMRectInit}
+ */
+function getHTMLElementContentRect(target) {
+    // Client width & height properties can't be
+    // used exclusively as they provide rounded values.
+    var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
+    // By this condition we can catch all non-replaced inline, hidden and
+    // detached elements. Though elements with width & height properties less
+    // than 0.5 will be discarded as well.
+    //
+    // Without it we would need to implement separate methods for each of
+    // those cases and it's not possible to perform a precise and performance
+    // effective test for hidden elements. E.g. even jQuery's ':visible' filter
+    // gives wrong results for elements with width & height less than 0.5.
+    if (!clientWidth && !clientHeight) {
+        return emptyRect;
+    }
+    var styles = getWindowOf(target).getComputedStyle(target);
+    var paddings = getPaddings(styles);
+    var horizPad = paddings.left + paddings.right;
+    var vertPad = paddings.top + paddings.bottom;
+    // Computed styles of width & height are being used because they are the
+    // only dimensions available to JS that contain non-rounded values. It could
+    // be possible to utilize the getBoundingClientRect if only it's data wasn't
+    // affected by CSS transformations let alone paddings, borders and scroll bars.
+    var width = toFloat(styles.width), height = toFloat(styles.height);
+    // Width & height include paddings and borders when the 'border-box' box
+    // model is applied (except for IE).
+    if (styles.boxSizing === 'border-box') {
+        // Following conditions are required to handle Internet Explorer which
+        // doesn't include paddings and borders to computed CSS dimensions.
+        //
+        // We can say that if CSS dimensions + paddings are equal to the "client"
+        // properties then it's either IE, and thus we don't need to subtract
+        // anything, or an element merely doesn't have paddings/borders styles.
+        if (Math.round(width + horizPad) !== clientWidth) {
+            width -= getBordersSize(styles, 'left', 'right') + horizPad;
+        }
+        if (Math.round(height + vertPad) !== clientHeight) {
+            height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
+        }
+    }
+    // Following steps can't be applied to the document's root element as its
+    // client[Width/Height] properties represent viewport area of the window.
+    // Besides, it's as well not necessary as the <html> itself neither has
+    // rendered scroll bars nor it can be clipped.
+    if (!isDocumentElement(target)) {
+        // In some browsers (only in Firefox, actually) CSS width & height
+        // include scroll bars size which can be removed at this step as scroll
+        // bars are the only difference between rounded dimensions + paddings
+        // and "client" properties, though that is not always true in Chrome.
+        var vertScrollbar = Math.round(width + horizPad) - clientWidth;
+        var horizScrollbar = Math.round(height + vertPad) - clientHeight;
+        // Chrome has a rather weird rounding of "client" properties.
+        // E.g. for an element with content width of 314.2px it sometimes gives
+        // the client width of 315px and for the width of 314.7px it may give
+        // 314px. And it doesn't happen all the time. So just ignore this delta
+        // as a non-relevant.
+        if (Math.abs(vertScrollbar) !== 1) {
+            width -= vertScrollbar;
+        }
+        if (Math.abs(horizScrollbar) !== 1) {
+            height -= horizScrollbar;
+        }
+    }
+    return createRectInit(paddings.left, paddings.top, width, height);
+}
+/**
+ * Checks whether provided element is an instance of the SVGGraphicsElement.
+ *
+ * @param {Element} target - Element to be checked.
+ * @returns {boolean}
+ */
+var isSVGGraphicsElement = (function () {
+    // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
+    // interface.
+    if (typeof SVGGraphicsElement !== 'undefined') {
+        return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
+    }
+    // If it's so, then check that element is at least an instance of the
+    // SVGElement and that it has the "getBBox" method.
+    // eslint-disable-next-line no-extra-parens
+    return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
+        typeof target.getBBox === 'function'); };
+})();
+/**
+ * Checks whether provided element is a document element (<html>).
+ *
+ * @param {Element} target - Element to be checked.
+ * @returns {boolean}
+ */
+function isDocumentElement(target) {
+    return target === getWindowOf(target).document.documentElement;
+}
+/**
+ * Calculates an appropriate content rectangle for provided html or svg element.
+ *
+ * @param {Element} target - Element content rectangle of which needs to be calculated.
+ * @returns {DOMRectInit}
+ */
+function getContentRect(target) {
+    if (!isBrowser) {
+        return emptyRect;
+    }
+    if (isSVGGraphicsElement(target)) {
+        return getSVGContentRect(target);
+    }
+    return getHTMLElementContentRect(target);
+}
+/**
+ * Creates rectangle with an interface of the DOMRectReadOnly.
+ * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
+ *
+ * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
+ * @returns {DOMRectReadOnly}
+ */
+function createReadOnlyRect(_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+    // If DOMRectReadOnly is available use it as a prototype for the rectangle.
+    var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
+    var rect = Object.create(Constr.prototype);
+    // Rectangle's properties are not writable and non-enumerable.
+    defineConfigurable(rect, {
+        x: x, y: y, width: width, height: height,
+        top: y,
+        right: x + width,
+        bottom: height + y,
+        left: x
+    });
+    return rect;
+}
+/**
+ * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
+ * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
+ *
+ * @param {number} x - X coordinate.
+ * @param {number} y - Y coordinate.
+ * @param {number} width - Rectangle's width.
+ * @param {number} height - Rectangle's height.
+ * @returns {DOMRectInit}
+ */
+function createRectInit(x, y, width, height) {
+    return { x: x, y: y, width: width, height: height };
+}
+
+/**
+ * Class that is responsible for computations of the content rectangle of
+ * provided DOM element and for keeping track of it's changes.
+ */
+var ResizeObservation = /** @class */ (function () {
+    /**
+     * Creates an instance of ResizeObservation.
+     *
+     * @param {Element} target - Element to be observed.
+     */
+    function ResizeObservation(target) {
+        /**
+         * Broadcasted width of content rectangle.
+         *
+         * @type {number}
+         */
+        this.broadcastWidth = 0;
+        /**
+         * Broadcasted height of content rectangle.
+         *
+         * @type {number}
+         */
+        this.broadcastHeight = 0;
+        /**
+         * Reference to the last observed content rectangle.
+         *
+         * @private {DOMRectInit}
+         */
+        this.contentRect_ = createRectInit(0, 0, 0, 0);
+        this.target = target;
+    }
+    /**
+     * Updates content rectangle and tells whether it's width or height properties
+     * have changed since the last broadcast.
+     *
+     * @returns {boolean}
+     */
+    ResizeObservation.prototype.isActive = function () {
+        var rect = getContentRect(this.target);
+        this.contentRect_ = rect;
+        return (rect.width !== this.broadcastWidth ||
+            rect.height !== this.broadcastHeight);
+    };
+    /**
+     * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
+     * from the corresponding properties of the last observed content rectangle.
+     *
+     * @returns {DOMRectInit} Last observed content rectangle.
+     */
+    ResizeObservation.prototype.broadcastRect = function () {
+        var rect = this.contentRect_;
+        this.broadcastWidth = rect.width;
+        this.broadcastHeight = rect.height;
+        return rect;
+    };
+    return ResizeObservation;
+}());
+
+var ResizeObserverEntry = /** @class */ (function () {
+    /**
+     * Creates an instance of ResizeObserverEntry.
+     *
+     * @param {Element} target - Element that is being observed.
+     * @param {DOMRectInit} rectInit - Data of the element's content rectangle.
+     */
+    function ResizeObserverEntry(target, rectInit) {
+        var contentRect = createReadOnlyRect(rectInit);
+        // According to the specification following properties are not writable
+        // and are also not enumerable in the native implementation.
+        //
+        // Property accessors are not being used as they'd require to define a
+        // private WeakMap storage which may cause memory leaks in browsers that
+        // don't support this type of collections.
+        defineConfigurable(this, { target: target, contentRect: contentRect });
+    }
+    return ResizeObserverEntry;
+}());
+
+var ResizeObserverSPI = /** @class */ (function () {
+    /**
+     * Creates a new instance of ResizeObserver.
+     *
+     * @param {ResizeObserverCallback} callback - Callback function that is invoked
+     *      when one of the observed elements changes it's content dimensions.
+     * @param {ResizeObserverController} controller - Controller instance which
+     *      is responsible for the updates of observer.
+     * @param {ResizeObserver} callbackCtx - Reference to the public
+     *      ResizeObserver instance which will be passed to callback function.
+     */
+    function ResizeObserverSPI(callback, controller, callbackCtx) {
+        /**
+         * Collection of resize observations that have detected changes in dimensions
+         * of elements.
+         *
+         * @private {Array<ResizeObservation>}
+         */
+        this.activeObservations_ = [];
+        /**
+         * Registry of the ResizeObservation instances.
+         *
+         * @private {Map<Element, ResizeObservation>}
+         */
+        this.observations_ = new MapShim();
+        if (typeof callback !== 'function') {
+            throw new TypeError('The callback provided as parameter 1 is not a function.');
+        }
+        this.callback_ = callback;
+        this.controller_ = controller;
+        this.callbackCtx_ = callbackCtx;
+    }
+    /**
+     * Starts observing provided element.
+     *
+     * @param {Element} target - Element to be observed.
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.observe = function (target) {
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+        // Do nothing if current environment doesn't have the Element interface.
+        if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+            return;
+        }
+        if (!(target instanceof getWindowOf(target).Element)) {
+            throw new TypeError('parameter 1 is not of type "Element".');
+        }
+        var observations = this.observations_;
+        // Do nothing if element is already being observed.
+        if (observations.has(target)) {
+            return;
+        }
+        observations.set(target, new ResizeObservation(target));
+        this.controller_.addObserver(this);
+        // Force the update of observations.
+        this.controller_.refresh();
+    };
+    /**
+     * Stops observing provided element.
+     *
+     * @param {Element} target - Element to stop observing.
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.unobserve = function (target) {
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+        // Do nothing if current environment doesn't have the Element interface.
+        if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+            return;
+        }
+        if (!(target instanceof getWindowOf(target).Element)) {
+            throw new TypeError('parameter 1 is not of type "Element".');
+        }
+        var observations = this.observations_;
+        // Do nothing if element is not being observed.
+        if (!observations.has(target)) {
+            return;
+        }
+        observations.delete(target);
+        if (!observations.size) {
+            this.controller_.removeObserver(this);
+        }
+    };
+    /**
+     * Stops observing all elements.
+     *
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.disconnect = function () {
+        this.clearActive();
+        this.observations_.clear();
+        this.controller_.removeObserver(this);
+    };
+    /**
+     * Collects observation instances the associated element of which has changed
+     * it's content rectangle.
+     *
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.gatherActive = function () {
+        var _this = this;
+        this.clearActive();
+        this.observations_.forEach(function (observation) {
+            if (observation.isActive()) {
+                _this.activeObservations_.push(observation);
+            }
+        });
+    };
+    /**
+     * Invokes initial callback function with a list of ResizeObserverEntry
+     * instances collected from active resize observations.
+     *
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.broadcastActive = function () {
+        // Do nothing if observer doesn't have active observations.
+        if (!this.hasActive()) {
+            return;
+        }
+        var ctx = this.callbackCtx_;
+        // Create ResizeObserverEntry instance for every active observation.
+        var entries = this.activeObservations_.map(function (observation) {
+            return new ResizeObserverEntry(observation.target, observation.broadcastRect());
+        });
+        this.callback_.call(ctx, entries, ctx);
+        this.clearActive();
+    };
+    /**
+     * Clears the collection of active observations.
+     *
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.clearActive = function () {
+        this.activeObservations_.splice(0);
+    };
+    /**
+     * Tells whether observer has active observations.
+     *
+     * @returns {boolean}
+     */
+    ResizeObserverSPI.prototype.hasActive = function () {
+        return this.activeObservations_.length > 0;
+    };
+    return ResizeObserverSPI;
+}());
+
+// Registry of internal observers. If WeakMap is not available use current shim
+// for the Map collection as it has all required methods and because WeakMap
+// can't be fully polyfilled anyway.
+var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
+/**
+ * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
+ * exposing only those methods and properties that are defined in the spec.
+ */
+var ResizeObserver = /** @class */ (function () {
+    /**
+     * Creates a new instance of ResizeObserver.
+     *
+     * @param {ResizeObserverCallback} callback - Callback that is invoked when
+     *      dimensions of the observed elements change.
+     */
+    function ResizeObserver(callback) {
+        if (!(this instanceof ResizeObserver)) {
+            throw new TypeError('Cannot call a class as a function.');
+        }
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+        var controller = ResizeObserverController.getInstance();
+        var observer = new ResizeObserverSPI(callback, controller, this);
+        observers.set(this, observer);
+    }
+    return ResizeObserver;
+}());
+// Expose public methods of ResizeObserver.
+[
+    'observe',
+    'unobserve',
+    'disconnect'
+].forEach(function (method) {
+    ResizeObserver.prototype[method] = function () {
+        var _a;
+        return (_a = observers.get(this))[method].apply(_a, arguments);
+    };
+});
+
+var index = (function () {
+    // Export existing implementation if available.
+    if (typeof global$1.ResizeObserver !== 'undefined') {
+        return global$1.ResizeObserver;
+    }
+    return ResizeObserver;
+})();
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (index);
+
+
 /***/ }),
 
 /***/ "./node_modules/svg-baker-runtime/browser-symbol.js":