@m4l/components 9.2.12 → 9.2.15-beta.2

package/not_recognized/index.js

@@ -1,1280 +0,0 @@
-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
-};