@m4l/components 9.2.0 → 9.2.2

package/not_recognized/index.js

@@ -0,0 +1,1280 @@
+import { memo, useCallback, useMemo, PureComponent, createElement } from "react";
+import Draggable from "react-draggable";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
+var __assign$2 = function() {
+  __assign$2 = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+        t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign$2.apply(this, arguments);
+};
+var rowSizeBase = {
+  width: "100%",
+  height: "10px",
+  top: "0px",
+  left: "0px",
+  cursor: "row-resize"
+};
+var colSizeBase = {
+  width: "10px",
+  height: "100%",
+  top: "0px",
+  left: "0px",
+  cursor: "col-resize"
+};
+var edgeBase = {
+  width: "20px",
+  height: "20px",
+  position: "absolute",
+  zIndex: 1
+};
+var styles = {
+  top: __assign$2(__assign$2({}, rowSizeBase), { top: "-5px" }),
+  right: __assign$2(__assign$2({}, colSizeBase), { left: void 0, right: "-5px" }),
+  bottom: __assign$2(__assign$2({}, rowSizeBase), { top: void 0, bottom: "-5px" }),
+  left: __assign$2(__assign$2({}, colSizeBase), { left: "-5px" }),
+  topRight: __assign$2(__assign$2({}, edgeBase), { right: "-10px", top: "-10px", cursor: "ne-resize" }),
+  bottomRight: __assign$2(__assign$2({}, edgeBase), { right: "-10px", bottom: "-10px", cursor: "se-resize" }),
+  bottomLeft: __assign$2(__assign$2({}, edgeBase), { left: "-10px", bottom: "-10px", cursor: "sw-resize" }),
+  topLeft: __assign$2(__assign$2({}, edgeBase), { left: "-10px", top: "-10px", cursor: "nw-resize" })
+};
+var Resizer = memo(function(props) {
+  var onResizeStart = props.onResizeStart, direction = props.direction, children = props.children, replaceStyles = props.replaceStyles, className = props.className;
+  var onMouseDown = useCallback(function(e) {
+    onResizeStart(e, direction);
+  }, [onResizeStart, direction]);
+  var onTouchStart = useCallback(function(e) {
+    onResizeStart(e, direction);
+  }, [onResizeStart, direction]);
+  var style = useMemo(function() {
+    return __assign$2(__assign$2({ position: "absolute", userSelect: "none" }, styles[direction]), replaceStyles !== null && replaceStyles !== void 0 ? replaceStyles : {});
+  }, [replaceStyles, direction]);
+  return jsx("div", { className: className || void 0, style, onMouseDown, onTouchStart, children });
+});
+var __extends$1 = /* @__PURE__ */ function() {
+  var extendStatics2 = function(d, b) {
+    extendStatics2 = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
+      d2.__proto__ = b2;
+    } || function(d2, b2) {
+      for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d2[p] = b2[p];
+    };
+    return extendStatics2(d, b);
+  };
+  return function(d, b) {
+    if (typeof b !== "function" && b !== null)
+      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics2(d, b);
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+var __assign$1 = function() {
+  __assign$1 = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+        t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign$1.apply(this, arguments);
+};
+var DEFAULT_SIZE = {
+  width: "auto",
+  height: "auto"
+};
+var clamp = function(n, min, max) {
+  return Math.max(Math.min(n, max), min);
+};
+var snap = function(n, size, gridGap) {
+  var v = Math.round(n / size);
+  return v * size + gridGap * (v - 1);
+};
+var hasDirection = function(dir, target) {
+  return new RegExp(dir, "i").test(target);
+};
+var isTouchEvent = function(event) {
+  return Boolean(event.touches && event.touches.length);
+};
+var isMouseEvent = function(event) {
+  return Boolean((event.clientX || event.clientX === 0) && (event.clientY || event.clientY === 0));
+};
+var findClosestSnap = function(n, snapArray, snapGap) {
+  if (snapGap === void 0) {
+    snapGap = 0;
+  }
+  var closestGapIndex = snapArray.reduce(function(prev, curr, index) {
+    return Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev;
+  }, 0);
+  var gap = Math.abs(snapArray[closestGapIndex] - n);
+  return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n;
+};
+var getStringSize = function(n) {
+  n = n.toString();
+  if (n === "auto") {
+    return n;
+  }
+  if (n.endsWith("px")) {
+    return n;
+  }
+  if (n.endsWith("%")) {
+    return n;
+  }
+  if (n.endsWith("vh")) {
+    return n;
+  }
+  if (n.endsWith("vw")) {
+    return n;
+  }
+  if (n.endsWith("vmax")) {
+    return n;
+  }
+  if (n.endsWith("vmin")) {
+    return n;
+  }
+  return "".concat(n, "px");
+};
+var getPixelSize = function(size, parentSize, innerWidth, innerHeight) {
+  if (size && typeof size === "string") {
+    if (size.endsWith("px")) {
+      return Number(size.replace("px", ""));
+    }
+    if (size.endsWith("%")) {
+      var ratio = Number(size.replace("%", "")) / 100;
+      return parentSize * ratio;
+    }
+    if (size.endsWith("vw")) {
+      var ratio = Number(size.replace("vw", "")) / 100;
+      return innerWidth * ratio;
+    }
+    if (size.endsWith("vh")) {
+      var ratio = Number(size.replace("vh", "")) / 100;
+      return innerHeight * ratio;
+    }
+  }
+  return size;
+};
+var calculateNewMax = function(parentSize, innerWidth, innerHeight, maxWidth, maxHeight, minWidth, minHeight) {
+  maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight);
+  maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight);
+  minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight);
+  minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight);
+  return {
+    maxWidth: typeof maxWidth === "undefined" ? void 0 : Number(maxWidth),
+    maxHeight: typeof maxHeight === "undefined" ? void 0 : Number(maxHeight),
+    minWidth: typeof minWidth === "undefined" ? void 0 : Number(minWidth),
+    minHeight: typeof minHeight === "undefined" ? void 0 : Number(minHeight)
+  };
+};
+var normalizeToPair = function(val) {
+  return Array.isArray(val) ? val : [val, val];
+};
+var definedProps = [
+  "as",
+  "ref",
+  "style",
+  "className",
+  "grid",
+  "gridGap",
+  "snap",
+  "bounds",
+  "boundsByDirection",
+  "size",
+  "defaultSize",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "lockAspectRatio",
+  "lockAspectRatioExtraWidth",
+  "lockAspectRatioExtraHeight",
+  "enable",
+  "handleStyles",
+  "handleClasses",
+  "handleWrapperStyle",
+  "handleWrapperClass",
+  "children",
+  "onResizeStart",
+  "onResize",
+  "onResizeStop",
+  "handleComponent",
+  "scale",
+  "resizeRatio",
+  "snapGap"
+];
+var baseClassName = "__resizable_base__";
+var Resizable = (
+  /** @class */
+  function(_super) {
+    __extends$1(Resizable2, _super);
+    function Resizable2(props) {
+      var _a, _b, _c, _d;
+      var _this = _super.call(this, props) || this;
+      _this.ratio = 1;
+      _this.resizable = null;
+      _this.parentLeft = 0;
+      _this.parentTop = 0;
+      _this.resizableLeft = 0;
+      _this.resizableRight = 0;
+      _this.resizableTop = 0;
+      _this.resizableBottom = 0;
+      _this.targetLeft = 0;
+      _this.targetTop = 0;
+      _this.delta = {
+        width: 0,
+        height: 0
+      };
+      _this.appendBase = function() {
+        if (!_this.resizable || !_this.window) {
+          return null;
+        }
+        var parent = _this.parentNode;
+        if (!parent) {
+          return null;
+        }
+        var element = _this.window.document.createElement("div");
+        element.style.width = "100%";
+        element.style.height = "100%";
+        element.style.position = "absolute";
+        element.style.transform = "scale(0, 0)";
+        element.style.left = "0";
+        element.style.flex = "0 0 100%";
+        if (element.classList) {
+          element.classList.add(baseClassName);
+        } else {
+          element.className += baseClassName;
+        }
+        parent.appendChild(element);
+        return element;
+      };
+      _this.removeBase = function(base) {
+        var parent = _this.parentNode;
+        if (!parent) {
+          return;
+        }
+        parent.removeChild(base);
+      };
+      _this.state = {
+        isResizing: false,
+        width: (_b = (_a = _this.propsSize) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : "auto",
+        height: (_d = (_c = _this.propsSize) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : "auto",
+        direction: "right",
+        original: {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        },
+        backgroundStyle: {
+          height: "100%",
+          width: "100%",
+          backgroundColor: "rgba(0,0,0,0)",
+          cursor: "auto",
+          opacity: 0,
+          position: "fixed",
+          zIndex: 9999,
+          top: "0",
+          left: "0",
+          bottom: "0",
+          right: "0"
+        },
+        flexBasis: void 0
+      };
+      _this.onResizeStart = _this.onResizeStart.bind(_this);
+      _this.onMouseMove = _this.onMouseMove.bind(_this);
+      _this.onMouseUp = _this.onMouseUp.bind(_this);
+      return _this;
+    }
+    Object.defineProperty(Resizable2.prototype, "parentNode", {
+      get: function() {
+        if (!this.resizable) {
+          return null;
+        }
+        return this.resizable.parentNode;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(Resizable2.prototype, "window", {
+      get: function() {
+        if (!this.resizable) {
+          return null;
+        }
+        if (!this.resizable.ownerDocument) {
+          return null;
+        }
+        return this.resizable.ownerDocument.defaultView;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(Resizable2.prototype, "propsSize", {
+      get: function() {
+        return this.props.size || this.props.defaultSize || DEFAULT_SIZE;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(Resizable2.prototype, "size", {
+      get: function() {
+        var width = 0;
+        var height = 0;
+        if (this.resizable && this.window) {
+          var orgWidth = this.resizable.offsetWidth;
+          var orgHeight = this.resizable.offsetHeight;
+          var orgPosition = this.resizable.style.position;
+          if (orgPosition !== "relative") {
+            this.resizable.style.position = "relative";
+          }
+          width = this.resizable.style.width !== "auto" ? this.resizable.offsetWidth : orgWidth;
+          height = this.resizable.style.height !== "auto" ? this.resizable.offsetHeight : orgHeight;
+          this.resizable.style.position = orgPosition;
+        }
+        return { width, height };
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(Resizable2.prototype, "sizeStyle", {
+      get: function() {
+        var _this = this;
+        var size = this.props.size;
+        var getSize = function(key) {
+          var _a;
+          if (typeof _this.state[key] === "undefined" || _this.state[key] === "auto") {
+            return "auto";
+          }
+          if (_this.propsSize && _this.propsSize[key] && ((_a = _this.propsSize[key]) === null || _a === void 0 ? void 0 : _a.toString().endsWith("%"))) {
+            if (_this.state[key].toString().endsWith("%")) {
+              return _this.state[key].toString();
+            }
+            var parentSize = _this.getParentSize();
+            var value = Number(_this.state[key].toString().replace("px", ""));
+            var percent = value / parentSize[key] * 100;
+            return "".concat(percent, "%");
+          }
+          return getStringSize(_this.state[key]);
+        };
+        var width = size && typeof size.width !== "undefined" && !this.state.isResizing ? getStringSize(size.width) : getSize("width");
+        var height = size && typeof size.height !== "undefined" && !this.state.isResizing ? getStringSize(size.height) : getSize("height");
+        return { width, height };
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Resizable2.prototype.getParentSize = function() {
+      if (!this.parentNode) {
+        if (!this.window) {
+          return { width: 0, height: 0 };
+        }
+        return { width: this.window.innerWidth, height: this.window.innerHeight };
+      }
+      var base = this.appendBase();
+      if (!base) {
+        return { width: 0, height: 0 };
+      }
+      var wrapChanged = false;
+      var wrap = this.parentNode.style.flexWrap;
+      if (wrap !== "wrap") {
+        wrapChanged = true;
+        this.parentNode.style.flexWrap = "wrap";
+      }
+      base.style.position = "relative";
+      base.style.minWidth = "100%";
+      base.style.minHeight = "100%";
+      var size = {
+        width: base.offsetWidth,
+        height: base.offsetHeight
+      };
+      if (wrapChanged) {
+        this.parentNode.style.flexWrap = wrap;
+      }
+      this.removeBase(base);
+      return size;
+    };
+    Resizable2.prototype.bindEvents = function() {
+      if (this.window) {
+        this.window.addEventListener("mouseup", this.onMouseUp);
+        this.window.addEventListener("mousemove", this.onMouseMove);
+        this.window.addEventListener("mouseleave", this.onMouseUp);
+        this.window.addEventListener("touchmove", this.onMouseMove, {
+          capture: true,
+          passive: false
+        });
+        this.window.addEventListener("touchend", this.onMouseUp);
+      }
+    };
+    Resizable2.prototype.unbindEvents = function() {
+      if (this.window) {
+        this.window.removeEventListener("mouseup", this.onMouseUp);
+        this.window.removeEventListener("mousemove", this.onMouseMove);
+        this.window.removeEventListener("mouseleave", this.onMouseUp);
+        this.window.removeEventListener("touchmove", this.onMouseMove, true);
+        this.window.removeEventListener("touchend", this.onMouseUp);
+      }
+    };
+    Resizable2.prototype.componentDidMount = function() {
+      if (!this.resizable || !this.window) {
+        return;
+      }
+      var computedStyle = this.window.getComputedStyle(this.resizable);
+      this.setState({
+        width: this.state.width || this.size.width,
+        height: this.state.height || this.size.height,
+        flexBasis: computedStyle.flexBasis !== "auto" ? computedStyle.flexBasis : void 0
+      });
+    };
+    Resizable2.prototype.componentWillUnmount = function() {
+      if (this.window) {
+        this.unbindEvents();
+      }
+    };
+    Resizable2.prototype.createSizeForCssProperty = function(newSize, kind) {
+      var propsSize = this.propsSize && this.propsSize[kind];
+      return this.state[kind] === "auto" && this.state.original[kind] === newSize && (typeof propsSize === "undefined" || propsSize === "auto") ? "auto" : newSize;
+    };
+    Resizable2.prototype.calculateNewMaxFromBoundary = function(maxWidth, maxHeight) {
+      var boundsByDirection = this.props.boundsByDirection;
+      var direction = this.state.direction;
+      var widthByDirection = boundsByDirection && hasDirection("left", direction);
+      var heightByDirection = boundsByDirection && hasDirection("top", direction);
+      var boundWidth;
+      var boundHeight;
+      if (this.props.bounds === "parent") {
+        var parent_1 = this.parentNode;
+        if (parent_1) {
+          boundWidth = widthByDirection ? this.resizableRight - this.parentLeft : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft);
+          boundHeight = heightByDirection ? this.resizableBottom - this.parentTop : parent_1.offsetHeight + (this.parentTop - this.resizableTop);
+        }
+      } else if (this.props.bounds === "window") {
+        if (this.window) {
+          boundWidth = widthByDirection ? this.resizableRight : this.window.innerWidth - this.resizableLeft;
+          boundHeight = heightByDirection ? this.resizableBottom : this.window.innerHeight - this.resizableTop;
+        }
+      } else if (this.props.bounds) {
+        boundWidth = widthByDirection ? this.resizableRight - this.targetLeft : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
+        boundHeight = heightByDirection ? this.resizableBottom - this.targetTop : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
+      }
+      if (boundWidth && Number.isFinite(boundWidth)) {
+        maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
+      }
+      if (boundHeight && Number.isFinite(boundHeight)) {
+        maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
+      }
+      return { maxWidth, maxHeight };
+    };
+    Resizable2.prototype.calculateNewSizeFromDirection = function(clientX, clientY) {
+      var scale = this.props.scale || 1;
+      var _a = normalizeToPair(this.props.resizeRatio || 1), resizeRatioX = _a[0], resizeRatioY = _a[1];
+      var _b = this.state, direction = _b.direction, original = _b.original;
+      var _c = this.props, lockAspectRatio = _c.lockAspectRatio, lockAspectRatioExtraHeight = _c.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _c.lockAspectRatioExtraWidth;
+      var newWidth = original.width;
+      var newHeight = original.height;
+      var extraHeight = lockAspectRatioExtraHeight || 0;
+      var extraWidth = lockAspectRatioExtraWidth || 0;
+      if (hasDirection("right", direction)) {
+        newWidth = original.width + (clientX - original.x) * resizeRatioX / scale;
+        if (lockAspectRatio) {
+          newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
+        }
+      }
+      if (hasDirection("left", direction)) {
+        newWidth = original.width - (clientX - original.x) * resizeRatioX / scale;
+        if (lockAspectRatio) {
+          newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
+        }
+      }
+      if (hasDirection("bottom", direction)) {
+        newHeight = original.height + (clientY - original.y) * resizeRatioY / scale;
+        if (lockAspectRatio) {
+          newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
+        }
+      }
+      if (hasDirection("top", direction)) {
+        newHeight = original.height - (clientY - original.y) * resizeRatioY / scale;
+        if (lockAspectRatio) {
+          newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
+        }
+      }
+      return { newWidth, newHeight };
+    };
+    Resizable2.prototype.calculateNewSizeFromAspectRatio = function(newWidth, newHeight, max, min) {
+      var _a = this.props, lockAspectRatio = _a.lockAspectRatio, lockAspectRatioExtraHeight = _a.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _a.lockAspectRatioExtraWidth;
+      var computedMinWidth = typeof min.width === "undefined" ? 10 : min.width;
+      var computedMaxWidth = typeof max.width === "undefined" || max.width < 0 ? newWidth : max.width;
+      var computedMinHeight = typeof min.height === "undefined" ? 10 : min.height;
+      var computedMaxHeight = typeof max.height === "undefined" || max.height < 0 ? newHeight : max.height;
+      var extraHeight = lockAspectRatioExtraHeight || 0;
+      var extraWidth = lockAspectRatioExtraWidth || 0;
+      if (lockAspectRatio) {
+        var extraMinWidth = (computedMinHeight - extraHeight) * this.ratio + extraWidth;
+        var extraMaxWidth = (computedMaxHeight - extraHeight) * this.ratio + extraWidth;
+        var extraMinHeight = (computedMinWidth - extraWidth) / this.ratio + extraHeight;
+        var extraMaxHeight = (computedMaxWidth - extraWidth) / this.ratio + extraHeight;
+        var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
+        var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
+        var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
+        var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
+        newWidth = clamp(newWidth, lockedMinWidth, lockedMaxWidth);
+        newHeight = clamp(newHeight, lockedMinHeight, lockedMaxHeight);
+      } else {
+        newWidth = clamp(newWidth, computedMinWidth, computedMaxWidth);
+        newHeight = clamp(newHeight, computedMinHeight, computedMaxHeight);
+      }
+      return { newWidth, newHeight };
+    };
+    Resizable2.prototype.setBoundingClientRect = function() {
+      var adjustedScale = 1 / (this.props.scale || 1);
+      if (this.props.bounds === "parent") {
+        var parent_2 = this.parentNode;
+        if (parent_2) {
+          var parentRect = parent_2.getBoundingClientRect();
+          this.parentLeft = parentRect.left * adjustedScale;
+          this.parentTop = parentRect.top * adjustedScale;
+        }
+      }
+      if (this.props.bounds && typeof this.props.bounds !== "string") {
+        var targetRect = this.props.bounds.getBoundingClientRect();
+        this.targetLeft = targetRect.left * adjustedScale;
+        this.targetTop = targetRect.top * adjustedScale;
+      }
+      if (this.resizable) {
+        var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom;
+        this.resizableLeft = left * adjustedScale;
+        this.resizableRight = right * adjustedScale;
+        this.resizableTop = top_1 * adjustedScale;
+        this.resizableBottom = bottom * adjustedScale;
+      }
+    };
+    Resizable2.prototype.onResizeStart = function(event, direction) {
+      if (!this.resizable || !this.window) {
+        return;
+      }
+      var clientX = 0;
+      var clientY = 0;
+      if (event.nativeEvent && isMouseEvent(event.nativeEvent)) {
+        clientX = event.nativeEvent.clientX;
+        clientY = event.nativeEvent.clientY;
+      } else if (event.nativeEvent && isTouchEvent(event.nativeEvent)) {
+        clientX = event.nativeEvent.touches[0].clientX;
+        clientY = event.nativeEvent.touches[0].clientY;
+      }
+      if (this.props.onResizeStart) {
+        if (this.resizable) {
+          var startResize = this.props.onResizeStart(event, direction, this.resizable);
+          if (startResize === false) {
+            return;
+          }
+        }
+      }
+      if (this.props.size) {
+        if (typeof this.props.size.height !== "undefined" && this.props.size.height !== this.state.height) {
+          this.setState({ height: this.props.size.height });
+        }
+        if (typeof this.props.size.width !== "undefined" && this.props.size.width !== this.state.width) {
+          this.setState({ width: this.props.size.width });
+        }
+      }
+      this.ratio = typeof this.props.lockAspectRatio === "number" ? this.props.lockAspectRatio : this.size.width / this.size.height;
+      var flexBasis;
+      var computedStyle = this.window.getComputedStyle(this.resizable);
+      if (computedStyle.flexBasis !== "auto") {
+        var parent_3 = this.parentNode;
+        if (parent_3) {
+          var dir = this.window.getComputedStyle(parent_3).flexDirection;
+          this.flexDir = dir.startsWith("row") ? "row" : "column";
+          flexBasis = computedStyle.flexBasis;
+        }
+      }
+      this.setBoundingClientRect();
+      this.bindEvents();
+      var state = {
+        original: {
+          x: clientX,
+          y: clientY,
+          width: this.size.width,
+          height: this.size.height
+        },
+        isResizing: true,
+        backgroundStyle: __assign$1(__assign$1({}, this.state.backgroundStyle), { cursor: this.window.getComputedStyle(event.target).cursor || "auto" }),
+        direction,
+        flexBasis
+      };
+      this.setState(state);
+    };
+    Resizable2.prototype.onMouseMove = function(event) {
+      var _this = this;
+      if (!this.state.isResizing || !this.resizable || !this.window) {
+        return;
+      }
+      if (this.window.TouchEvent && isTouchEvent(event)) {
+        try {
+          event.preventDefault();
+          event.stopPropagation();
+        } catch (e) {
+        }
+      }
+      var _a = this.props, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, minWidth = _a.minWidth, minHeight = _a.minHeight;
+      var clientX = isTouchEvent(event) ? event.touches[0].clientX : event.clientX;
+      var clientY = isTouchEvent(event) ? event.touches[0].clientY : event.clientY;
+      var _b = this.state, direction = _b.direction, original = _b.original, width = _b.width, height = _b.height;
+      var parentSize = this.getParentSize();
+      var max = calculateNewMax(parentSize, this.window.innerWidth, this.window.innerHeight, maxWidth, maxHeight, minWidth, minHeight);
+      maxWidth = max.maxWidth;
+      maxHeight = max.maxHeight;
+      minWidth = max.minWidth;
+      minHeight = max.minHeight;
+      var _c = this.calculateNewSizeFromDirection(clientX, clientY), newHeight = _c.newHeight, newWidth = _c.newWidth;
+      var boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight);
+      if (this.props.snap && this.props.snap.x) {
+        newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap);
+      }
+      if (this.props.snap && this.props.snap.y) {
+        newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap);
+      }
+      var newSize = this.calculateNewSizeFromAspectRatio(newWidth, newHeight, { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight }, { width: minWidth, height: minHeight });
+      newWidth = newSize.newWidth;
+      newHeight = newSize.newHeight;
+      if (this.props.grid) {
+        var newGridWidth = snap(newWidth, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0);
+        var newGridHeight = snap(newHeight, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0);
+        var gap = this.props.snapGap || 0;
+        var w = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
+        var h = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight;
+        newWidth = w;
+        newHeight = h;
+      }
+      var delta = {
+        width: newWidth - original.width,
+        height: newHeight - original.height
+      };
+      this.delta = delta;
+      if (width && typeof width === "string") {
+        if (width.endsWith("%")) {
+          var percent = newWidth / parentSize.width * 100;
+          newWidth = "".concat(percent, "%");
+        } else if (width.endsWith("vw")) {
+          var vw = newWidth / this.window.innerWidth * 100;
+          newWidth = "".concat(vw, "vw");
+        } else if (width.endsWith("vh")) {
+          var vh = newWidth / this.window.innerHeight * 100;
+          newWidth = "".concat(vh, "vh");
+        }
+      }
+      if (height && typeof height === "string") {
+        if (height.endsWith("%")) {
+          var percent = newHeight / parentSize.height * 100;
+          newHeight = "".concat(percent, "%");
+        } else if (height.endsWith("vw")) {
+          var vw = newHeight / this.window.innerWidth * 100;
+          newHeight = "".concat(vw, "vw");
+        } else if (height.endsWith("vh")) {
+          var vh = newHeight / this.window.innerHeight * 100;
+          newHeight = "".concat(vh, "vh");
+        }
+      }
+      var newState = {
+        width: this.createSizeForCssProperty(newWidth, "width"),
+        height: this.createSizeForCssProperty(newHeight, "height")
+      };
+      if (this.flexDir === "row") {
+        newState.flexBasis = newState.width;
+      } else if (this.flexDir === "column") {
+        newState.flexBasis = newState.height;
+      }
+      var widthChanged = this.state.width !== newState.width;
+      var heightChanged = this.state.height !== newState.height;
+      var flexBaseChanged = this.state.flexBasis !== newState.flexBasis;
+      var changed = widthChanged || heightChanged || flexBaseChanged;
+      if (changed) {
+        flushSync(function() {
+          _this.setState(newState);
+        });
+      }
+      if (this.props.onResize) {
+        if (changed) {
+          this.props.onResize(event, direction, this.resizable, delta);
+        }
+      }
+    };
+    Resizable2.prototype.onMouseUp = function(event) {
+      var _a, _b;
+      var _c = this.state, isResizing = _c.isResizing, direction = _c.direction;
+      _c.original;
+      if (!isResizing || !this.resizable) {
+        return;
+      }
+      if (this.props.onResizeStop) {
+        this.props.onResizeStop(event, direction, this.resizable, this.delta);
+      }
+      if (this.props.size) {
+        this.setState({ width: (_a = this.props.size.width) !== null && _a !== void 0 ? _a : "auto", height: (_b = this.props.size.height) !== null && _b !== void 0 ? _b : "auto" });
+      }
+      this.unbindEvents();
+      this.setState({
+        isResizing: false,
+        backgroundStyle: __assign$1(__assign$1({}, this.state.backgroundStyle), { cursor: "auto" })
+      });
+    };
+    Resizable2.prototype.updateSize = function(size) {
+      var _a, _b;
+      this.setState({ width: (_a = size.width) !== null && _a !== void 0 ? _a : "auto", height: (_b = size.height) !== null && _b !== void 0 ? _b : "auto" });
+    };
+    Resizable2.prototype.renderResizer = function() {
+      var _this = this;
+      var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent;
+      if (!enable) {
+        return null;
+      }
+      var resizers = Object.keys(enable).map(function(dir) {
+        if (enable[dir] !== false) {
+          return jsx(Resizer, { direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir], children: handleComponent && handleComponent[dir] ? handleComponent[dir] : null }, dir);
+        }
+        return null;
+      });
+      return jsx("div", { className: handleWrapperClass, style: handleWrapperStyle, children: resizers });
+    };
+    Resizable2.prototype.render = function() {
+      var _this = this;
+      var extendsProps = Object.keys(this.props).reduce(function(acc, key) {
+        if (definedProps.indexOf(key) !== -1) {
+          return acc;
+        }
+        acc[key] = _this.props[key];
+        return acc;
+      }, {});
+      var style = __assign$1(__assign$1(__assign$1({ position: "relative", userSelect: this.state.isResizing ? "none" : "auto" }, this.props.style), this.sizeStyle), { maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight, minWidth: this.props.minWidth, minHeight: this.props.minHeight, boxSizing: "border-box", flexShrink: 0 });
+      if (this.state.flexBasis) {
+        style.flexBasis = this.state.flexBasis;
+      }
+      var Wrapper = this.props.as || "div";
+      return jsxs(Wrapper, __assign$1({ style, className: this.props.className }, extendsProps, {
+        // `ref` is after `extendsProps` to ensure this one wins over a version
+        // passed in
+        ref: function(c) {
+          if (c) {
+            _this.resizable = c;
+          }
+        },
+        children: [this.state.isResizing && jsx("div", { style: this.state.backgroundStyle }), this.props.children, this.renderResizer()]
+      }));
+    };
+    Resizable2.defaultProps = {
+      as: "div",
+      onResizeStart: function() {
+      },
+      onResize: function() {
+      },
+      onResizeStop: function() {
+      },
+      enable: {
+        top: true,
+        right: true,
+        bottom: true,
+        left: true,
+        topRight: true,
+        bottomRight: true,
+        bottomLeft: true,
+        topLeft: true
+      },
+      style: {},
+      grid: [1, 1],
+      gridGap: [0, 0],
+      lockAspectRatio: false,
+      lockAspectRatioExtraWidth: 0,
+      lockAspectRatioExtraHeight: 0,
+      scale: 1,
+      resizeRatio: 1,
+      snapGap: 0
+    };
+    return Resizable2;
+  }(PureComponent)
+);
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+var extendStatics = function(d, b) {
+  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
+    d2.__proto__ = b2;
+  } || function(d2, b2) {
+    for (var p in b2) if (b2.hasOwnProperty(p)) d2[p] = b2[p];
+  };
+  return extendStatics(d, b);
+};
+function __extends(d, b) {
+  extendStatics(d, b);
+  function __() {
+    this.constructor = d;
+  }
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+}
+var resizableStyle = {
+  width: "auto",
+  height: "auto",
+  display: "inline-block",
+  position: "absolute",
+  top: 0,
+  left: 0
+};
+var getEnableResizingByFlag = function(flag) {
+  return {
+    bottom: flag,
+    bottomLeft: flag,
+    bottomRight: flag,
+    left: flag,
+    right: flag,
+    top: flag,
+    topLeft: flag,
+    topRight: flag
+  };
+};
+var Rnd = (
+  /** @class */
+  function(_super) {
+    __extends(Rnd2, _super);
+    function Rnd2(props) {
+      var _this = _super.call(this, props) || this;
+      _this.resizingPosition = { x: 0, y: 0 };
+      _this.offsetFromParent = { left: 0, top: 0 };
+      _this.resizableElement = { current: null };
+      _this.originalPosition = { x: 0, y: 0 };
+      _this.state = {
+        resizing: false,
+        bounds: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        maxWidth: props.maxWidth,
+        maxHeight: props.maxHeight
+      };
+      _this.onResizeStart = _this.onResizeStart.bind(_this);
+      _this.onResize = _this.onResize.bind(_this);
+      _this.onResizeStop = _this.onResizeStop.bind(_this);
+      _this.onDragStart = _this.onDragStart.bind(_this);
+      _this.onDrag = _this.onDrag.bind(_this);
+      _this.onDragStop = _this.onDragStop.bind(_this);
+      _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
+      return _this;
+    }
+    Rnd2.prototype.componentDidMount = function() {
+      this.updateOffsetFromParent();
+      var _a = this.offsetFromParent, left = _a.left, top = _a.top;
+      var _b = this.getDraggablePosition(), x = _b.x, y = _b.y;
+      this.draggable.setState({
+        x: x - left,
+        y: y - top
+      });
+      this.forceUpdate();
+    };
+    Rnd2.prototype.getDraggablePosition = function() {
+      var _a = this.draggable.state, x = _a.x, y = _a.y;
+      return { x, y };
+    };
+    Rnd2.prototype.getParent = function() {
+      return this.resizable && this.resizable.parentNode;
+    };
+    Rnd2.prototype.getParentSize = function() {
+      return this.resizable.getParentSize();
+    };
+    Rnd2.prototype.getMaxSizesFromProps = function() {
+      var maxWidth = typeof this.props.maxWidth === "undefined" ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
+      var maxHeight = typeof this.props.maxHeight === "undefined" ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
+      return { maxWidth, maxHeight };
+    };
+    Rnd2.prototype.getSelfElement = function() {
+      return this.resizable && this.resizable.resizable;
+    };
+    Rnd2.prototype.getOffsetHeight = function(boundary) {
+      var scale = this.props.scale;
+      switch (this.props.bounds) {
+        case "window":
+          return window.innerHeight / scale;
+        case "body":
+          return document.body.offsetHeight / scale;
+        default:
+          return boundary.offsetHeight;
+      }
+    };
+    Rnd2.prototype.getOffsetWidth = function(boundary) {
+      var scale = this.props.scale;
+      switch (this.props.bounds) {
+        case "window":
+          return window.innerWidth / scale;
+        case "body":
+          return document.body.offsetWidth / scale;
+        default:
+          return boundary.offsetWidth;
+      }
+    };
+    Rnd2.prototype.onDragStart = function(e, data) {
+      if (this.props.onDragStart) {
+        this.props.onDragStart(e, data);
+      }
+      var pos = this.getDraggablePosition();
+      this.originalPosition = pos;
+      if (!this.props.bounds)
+        return;
+      var parent = this.getParent();
+      var scale = this.props.scale;
+      var boundary;
+      if (this.props.bounds === "parent") {
+        boundary = parent;
+      } else if (this.props.bounds === "body") {
+        var parentRect_1 = parent.getBoundingClientRect();
+        var parentLeft_1 = parentRect_1.left;
+        var parentTop_1 = parentRect_1.top;
+        var bodyRect = document.body.getBoundingClientRect();
+        var left_1 = -(parentLeft_1 - parent.offsetLeft * scale - bodyRect.left) / scale;
+        var top_1 = -(parentTop_1 - parent.offsetTop * scale - bodyRect.top) / scale;
+        var right = (document.body.offsetWidth - this.resizable.size.width * scale) / scale + left_1;
+        var bottom = (document.body.offsetHeight - this.resizable.size.height * scale) / scale + top_1;
+        return this.setState({ bounds: { top: top_1, right, bottom, left: left_1 } });
+      } else if (this.props.bounds === "window") {
+        if (!this.resizable)
+          return;
+        var parentRect_2 = parent.getBoundingClientRect();
+        var parentLeft_2 = parentRect_2.left;
+        var parentTop_2 = parentRect_2.top;
+        var left_2 = -(parentLeft_2 - parent.offsetLeft * scale) / scale;
+        var top_2 = -(parentTop_2 - parent.offsetTop * scale) / scale;
+        var right = (window.innerWidth - this.resizable.size.width * scale) / scale + left_2;
+        var bottom = (window.innerHeight - this.resizable.size.height * scale) / scale + top_2;
+        return this.setState({ bounds: { top: top_2, right, bottom, left: left_2 } });
+      } else if (typeof this.props.bounds === "string") {
+        boundary = document.querySelector(this.props.bounds);
+      } else if (this.props.bounds instanceof HTMLElement) {
+        boundary = this.props.bounds;
+      }
+      if (!(boundary instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
+        return;
+      }
+      var boundaryRect = boundary.getBoundingClientRect();
+      var boundaryLeft = boundaryRect.left;
+      var boundaryTop = boundaryRect.top;
+      var parentRect = parent.getBoundingClientRect();
+      var parentLeft = parentRect.left;
+      var parentTop = parentRect.top;
+      var left = (boundaryLeft - parentLeft) / scale;
+      var top = boundaryTop - parentTop;
+      if (!this.resizable)
+        return;
+      this.updateOffsetFromParent();
+      var offset = this.offsetFromParent;
+      this.setState({
+        bounds: {
+          top: top - offset.top,
+          right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left / scale,
+          bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
+          left: left - offset.left / scale
+        }
+      });
+    };
+    Rnd2.prototype.onDrag = function(e, data) {
+      if (!this.props.onDrag)
+        return;
+      var _a = this.offsetFromParent, left = _a.left, top = _a.top;
+      if (!this.props.dragAxis || this.props.dragAxis === "both") {
+        return this.props.onDrag(e, __assign(__assign({}, data), { x: data.x + left, y: data.y + top }));
+      } else if (this.props.dragAxis === "x") {
+        return this.props.onDrag(e, __assign(__assign({}, data), { x: data.x + left, y: this.originalPosition.y + top, deltaY: 0 }));
+      } else if (this.props.dragAxis === "y") {
+        return this.props.onDrag(e, __assign(__assign({}, data), { x: this.originalPosition.x + left, y: data.y + top, deltaX: 0 }));
+      }
+    };
+    Rnd2.prototype.onDragStop = function(e, data) {
+      if (!this.props.onDragStop)
+        return;
+      var _a = this.offsetFromParent, left = _a.left, top = _a.top;
+      if (!this.props.dragAxis || this.props.dragAxis === "both") {
+        return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: data.y + top }));
+      } else if (this.props.dragAxis === "x") {
+        return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: this.originalPosition.y + top, deltaY: 0 }));
+      } else if (this.props.dragAxis === "y") {
+        return this.props.onDragStop(e, __assign(__assign({}, data), { x: this.originalPosition.x + left, y: data.y + top, deltaX: 0 }));
+      }
+    };
+    Rnd2.prototype.onResizeStart = function(e, dir, elementRef) {
+      e.stopPropagation();
+      this.setState({
+        resizing: true
+      });
+      var scale = this.props.scale;
+      var offset = this.offsetFromParent;
+      var pos = this.getDraggablePosition();
+      this.resizingPosition = { x: pos.x + offset.left, y: pos.y + offset.top };
+      this.originalPosition = pos;
+      if (this.props.bounds) {
+        var parent_1 = this.getParent();
+        var boundary = void 0;
+        if (this.props.bounds === "parent") {
+          boundary = parent_1;
+        } else if (this.props.bounds === "body") {
+          boundary = document.body;
+        } else if (this.props.bounds === "window") {
+          boundary = window;
+        } else if (typeof this.props.bounds === "string") {
+          boundary = document.querySelector(this.props.bounds);
+        } else if (this.props.bounds instanceof HTMLElement) {
+          boundary = this.props.bounds;
+        }
+        var self_1 = this.getSelfElement();
+        if (self_1 instanceof Element && (boundary instanceof HTMLElement || boundary === window) && parent_1 instanceof HTMLElement) {
+          var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
+          var parentSize = this.getParentSize();
+          if (maxWidth && typeof maxWidth === "string") {
+            if (maxWidth.endsWith("%")) {
+              var ratio = Number(maxWidth.replace("%", "")) / 100;
+              maxWidth = parentSize.width * ratio;
+            } else if (maxWidth.endsWith("px")) {
+              maxWidth = Number(maxWidth.replace("px", ""));
+            }
+          }
+          if (maxHeight && typeof maxHeight === "string") {
+            if (maxHeight.endsWith("%")) {
+              var ratio = Number(maxHeight.replace("%", "")) / 100;
+              maxHeight = parentSize.height * ratio;
+            } else if (maxHeight.endsWith("px")) {
+              maxHeight = Number(maxHeight.replace("px", ""));
+            }
+          }
+          var selfRect = self_1.getBoundingClientRect();
+          var selfLeft = selfRect.left;
+          var selfTop = selfRect.top;
+          var boundaryRect = this.props.bounds === "window" ? { left: 0, top: 0 } : boundary.getBoundingClientRect();
+          var boundaryLeft = boundaryRect.left;
+          var boundaryTop = boundaryRect.top;
+          var offsetWidth = this.getOffsetWidth(boundary);
+          var offsetHeight = this.getOffsetHeight(boundary);
+          var hasLeft = dir.toLowerCase().endsWith("left");
+          var hasRight = dir.toLowerCase().endsWith("right");
+          var hasTop = dir.startsWith("top");
+          var hasBottom = dir.startsWith("bottom");
+          if ((hasLeft || hasTop) && this.resizable) {
+            var max = (selfLeft - boundaryLeft) / scale + this.resizable.size.width;
+            this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+          }
+          if (hasRight || this.props.lockAspectRatio && !hasLeft && !hasTop) {
+            var max = offsetWidth + (boundaryLeft - selfLeft) / scale;
+            this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+          }
+          if ((hasTop || hasLeft) && this.resizable) {
+            var max = (selfTop - boundaryTop) / scale + this.resizable.size.height;
+            this.setState({
+              maxHeight: max > Number(maxHeight) ? maxHeight : max
+            });
+          }
+          if (hasBottom || this.props.lockAspectRatio && !hasTop && !hasLeft) {
+            var max = offsetHeight + (boundaryTop - selfTop) / scale;
+            this.setState({
+              maxHeight: max > Number(maxHeight) ? maxHeight : max
+            });
+          }
+        }
+      } else {
+        this.setState({
+          maxWidth: this.props.maxWidth,
+          maxHeight: this.props.maxHeight
+        });
+      }
+      if (this.props.onResizeStart) {
+        this.props.onResizeStart(e, dir, elementRef);
+      }
+    };
+    Rnd2.prototype.onResize = function(e, direction, elementRef, delta) {
+      var _this = this;
+      var newPos = { x: this.originalPosition.x, y: this.originalPosition.y };
+      var left = -delta.width;
+      var top = -delta.height;
+      var directions = ["top", "left", "topLeft", "bottomLeft", "topRight"];
+      if (directions.includes(direction)) {
+        if (direction === "bottomLeft") {
+          newPos.x += left;
+        } else if (direction === "topRight") {
+          newPos.y += top;
+        } else {
+          newPos.x += left;
+          newPos.y += top;
+        }
+      }
+      var draggableState = this.draggable.state;
+      if (newPos.x !== draggableState.x || newPos.y !== draggableState.y) {
+        flushSync(function() {
+          _this.draggable.setState(newPos);
+        });
+      }
+      this.updateOffsetFromParent();
+      var offset = this.offsetFromParent;
+      var x = this.getDraggablePosition().x + offset.left;
+      var y = this.getDraggablePosition().y + offset.top;
+      this.resizingPosition = { x, y };
+      if (!this.props.onResize)
+        return;
+      this.props.onResize(e, direction, elementRef, delta, {
+        x,
+        y
+      });
+    };
+    Rnd2.prototype.onResizeStop = function(e, direction, elementRef, delta) {
+      this.setState({
+        resizing: false
+      });
+      var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
+      this.setState({ maxWidth, maxHeight });
+      if (this.props.onResizeStop) {
+        this.props.onResizeStop(e, direction, elementRef, delta, this.resizingPosition);
+      }
+    };
+    Rnd2.prototype.updateSize = function(size) {
+      if (!this.resizable)
+        return;
+      this.resizable.updateSize({ width: size.width, height: size.height });
+    };
+    Rnd2.prototype.updatePosition = function(position) {
+      this.draggable.setState(position);
+    };
+    Rnd2.prototype.updateOffsetFromParent = function() {
+      var scale = this.props.scale;
+      var parent = this.getParent();
+      var self = this.getSelfElement();
+      if (!parent || self === null) {
+        return {
+          top: 0,
+          left: 0
+        };
+      }
+      var parentRect = parent.getBoundingClientRect();
+      var parentLeft = parentRect.left;
+      var parentTop = parentRect.top;
+      var selfRect = self.getBoundingClientRect();
+      var position = this.getDraggablePosition();
+      var scrollLeft = parent.scrollLeft;
+      var scrollTop = parent.scrollTop;
+      this.offsetFromParent = {
+        left: selfRect.left - parentLeft + scrollLeft - position.x * scale,
+        top: selfRect.top - parentTop + scrollTop - position.y * scale
+      };
+    };
+    Rnd2.prototype.render = function() {
+      var _this = this;
+      var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children;
+      _a.onResizeStart;
+      _a.onResize;
+      _a.onResizeStop;
+      _a.onDragStart;
+      _a.onDrag;
+      _a.onDragStop;
+      var resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, resizeHandleComponent = _a.resizeHandleComponent, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, allowAnyClick = _a.allowAnyClick, dragPositionOffset = _a.dragPositionOffset, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "onMouseUp", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "resizeHandleComponent", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale", "allowAnyClick", "dragPositionOffset"]);
+      var defaultValue = this.props.default ? __assign({}, this.props.default) : void 0;
+      delete resizableProps.default;
+      var cursorStyle = disableDragging || dragHandleClassName ? { cursor: "auto" } : { cursor: "move" };
+      var innerStyle = __assign(__assign(__assign({}, resizableStyle), cursorStyle), style);
+      var _b = this.offsetFromParent, left = _b.left, top = _b.top;
+      var draggablePosition;
+      if (position) {
+        draggablePosition = {
+          x: position.x - left,
+          y: position.y - top
+        };
+      }
+      var pos = this.state.resizing ? void 0 : draggablePosition;
+      var dragAxisOrUndefined = this.state.resizing ? "both" : dragAxis;
+      return createElement(
+        Draggable,
+        {
+          ref: function(c) {
+            if (!c)
+              return;
+            _this.draggable = c;
+          },
+          handle: dragHandleClassName ? ".".concat(dragHandleClassName) : void 0,
+          defaultPosition: defaultValue,
+          onMouseDown,
+          // @ts-expect-error
+          onMouseUp,
+          onStart: this.onDragStart,
+          onDrag: this.onDrag,
+          onStop: this.onDragStop,
+          axis: dragAxisOrUndefined,
+          disabled: disableDragging,
+          grid: dragGrid,
+          bounds: bounds ? this.state.bounds : void 0,
+          position: pos,
+          enableUserSelectHack,
+          cancel,
+          scale,
+          allowAnyClick,
+          nodeRef: this.resizableElement,
+          positionOffset: dragPositionOffset
+        },
+        createElement(Resizable, __assign({}, resizableProps, { ref: function(c) {
+          if (!c)
+            return;
+          _this.resizable = c;
+          _this.resizableElement.current = c.resizable;
+        }, defaultSize: defaultValue, size: this.props.size, enable: typeof enableResizing === "boolean" ? getEnableResizingByFlag(enableResizing) : enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.state.resizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.state.resizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses, handleComponent: resizeHandleComponent, scale: this.props.scale }), children)
+      );
+    };
+    Rnd2.defaultProps = {
+      maxWidth: Number.MAX_SAFE_INTEGER,
+      maxHeight: Number.MAX_SAFE_INTEGER,
+      scale: 1,
+      onResizeStart: function() {
+      },
+      onResize: function() {
+      },
+      onResizeStop: function() {
+      },
+      onDragStart: function() {
+      },
+      onDrag: function() {
+      },
+      onDragStop: function() {
+      }
+    };
+    return Rnd2;
+  }(PureComponent)
+);
+export {
+  Rnd as R
+};