@springmicro/page 0.7.19 → 0.7.21

package/dist/SpacerResizable-BlWB6wi5.js

@@ -0,0 +1,1537 @@
+import { v as G, j as A } from "./index-CcvdOXK9.js";
+import F, { useState as Bt, useEffect as qt } from "react";
+import Rt from "react-dom";
+var ut = { exports: {} }, B = {}, K = { exports: {} }, Mt = {}, at = { exports: {} };
+function Ct(t) {
+  var e, n, r = "";
+  if (typeof t == "string" || typeof t == "number") r += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var o = t.length;
+    for (e = 0; e < o; e++) t[e] && (n = Ct(t[e])) && (r && (r += " "), r += n);
+  } else for (n in t) t[n] && (r && (r += " "), r += n);
+  return r;
+}
+function wt() {
+  for (var t, e, n = 0, r = "", o = arguments.length; n < o; n++) (t = arguments[n]) && (e = Ct(t)) && (r && (r += " "), r += e);
+  return r;
+}
+at.exports = wt, at.exports.clsx = wt;
+var It = at.exports, y = {}, N = {};
+Object.defineProperty(N, "__esModule", {
+  value: !0
+});
+N.dontSetMe = Qt;
+N.findInArray = Vt;
+N.int = Jt;
+N.isFunction = Gt;
+N.isNum = Kt;
+function Vt(t, e) {
+  for (let n = 0, r = t.length; n < r; n++)
+    if (e.apply(e, [t[n], n, t])) return t[n];
+}
+function Gt(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Function]";
+}
+function Kt(t) {
+  return typeof t == "number" && !isNaN(t);
+}
+function Jt(t) {
+  return parseInt(t, 10);
+}
+function Qt(t, e, n) {
+  if (t[e])
+    return new Error(`Invalid prop ${e} passed to ${n} - do not set this, set it on the child.`);
+}
+var W = {};
+Object.defineProperty(W, "__esModule", {
+  value: !0
+});
+W.browserPrefixToKey = Tt;
+W.browserPrefixToStyle = Zt;
+W.default = void 0;
+W.getPrefix = Et;
+const et = ["Moz", "Webkit", "O", "ms"];
+function Et() {
+  var n, r;
+  let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "transform";
+  if (typeof window > "u") return "";
+  const e = (r = (n = window.document) == null ? void 0 : n.documentElement) == null ? void 0 : r.style;
+  if (!e || t in e) return "";
+  for (let o = 0; o < et.length; o++)
+    if (Tt(t, et[o]) in e) return et[o];
+  return "";
+}
+function Tt(t, e) {
+  return e ? `${e}${te(t)}` : t;
+}
+function Zt(t, e) {
+  return e ? `-${e.toLowerCase()}-${t}` : t;
+}
+function te(t) {
+  let e = "", n = !0;
+  for (let r = 0; r < t.length; r++)
+    n ? (e += t[r].toUpperCase(), n = !1) : t[r] === "-" ? n = !0 : e += t[r];
+  return e;
+}
+W.default = Et();
+Object.defineProperty(y, "__esModule", {
+  value: !0
+});
+y.addClassName = $t;
+y.addEvent = ne;
+y.addUserSelectStyles = pe;
+y.createCSSTransform = ue;
+y.createSVGTransform = ce;
+y.getTouch = fe;
+y.getTouchIdentifier = de;
+y.getTranslation = ct;
+y.innerHeight = ae;
+y.innerWidth = ie;
+y.matchesSelector = Nt;
+y.matchesSelectorAndParentsTo = ee;
+y.offsetXYFromParent = le;
+y.outerHeight = oe;
+y.outerWidth = se;
+y.removeClassName = kt;
+y.removeEvent = re;
+y.scheduleRemoveUserSelectStyles = he;
+var P = N, Dt = zt(W);
+function zt(t, e) {
+  if (typeof WeakMap == "function") var n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap();
+  return (zt = function(o, l) {
+    if (!l && o && o.__esModule) return o;
+    var a, s, i = { __proto__: null, default: o };
+    if (o === null || typeof o != "object" && typeof o != "function") return i;
+    if (a = l ? r : n) {
+      if (a.has(o)) return a.get(o);
+      a.set(o, i);
+    }
+    for (const u in o) u !== "default" && {}.hasOwnProperty.call(o, u) && ((s = (a = Object.defineProperty) && Object.getOwnPropertyDescriptor(o, u)) && (s.get || s.set) ? a(i, u, s) : i[u] = o[u]);
+    return i;
+  })(t, e);
+}
+let I = "";
+function Nt(t, e) {
+  return I || (I = (0, P.findInArray)(["matches", "webkitMatchesSelector", "mozMatchesSelector", "msMatchesSelector", "oMatchesSelector"], function(n) {
+    return (0, P.isFunction)(t[n]);
+  })), (0, P.isFunction)(t[I]) ? t[I](e) : !1;
+}
+function ee(t, e, n) {
+  let r = t;
+  do {
+    if (Nt(r, e)) return !0;
+    if (r === n) return !1;
+    r = r.parentNode;
+  } while (r);
+  return !1;
+}
+function ne(t, e, n, r) {
+  if (!t) return;
+  const o = {
+    capture: !0,
+    ...r
+  };
+  t.addEventListener ? t.addEventListener(e, n, o) : t.attachEvent ? t.attachEvent("on" + e, n) : t["on" + e] = n;
+}
+function re(t, e, n, r) {
+  if (!t) return;
+  const o = {
+    capture: !0,
+    ...r
+  };
+  t.removeEventListener ? t.removeEventListener(e, n, o) : t.detachEvent ? t.detachEvent("on" + e, n) : t["on" + e] = null;
+}
+function oe(t) {
+  let e = t.clientHeight;
+  const n = t.ownerDocument.defaultView.getComputedStyle(t);
+  return e += (0, P.int)(n.borderTopWidth), e += (0, P.int)(n.borderBottomWidth), e;
+}
+function se(t) {
+  let e = t.clientWidth;
+  const n = t.ownerDocument.defaultView.getComputedStyle(t);
+  return e += (0, P.int)(n.borderLeftWidth), e += (0, P.int)(n.borderRightWidth), e;
+}
+function ae(t) {
+  let e = t.clientHeight;
+  const n = t.ownerDocument.defaultView.getComputedStyle(t);
+  return e -= (0, P.int)(n.paddingTop), e -= (0, P.int)(n.paddingBottom), e;
+}
+function ie(t) {
+  let e = t.clientWidth;
+  const n = t.ownerDocument.defaultView.getComputedStyle(t);
+  return e -= (0, P.int)(n.paddingLeft), e -= (0, P.int)(n.paddingRight), e;
+}
+function le(t, e, n) {
+  const o = e === e.ownerDocument.body ? {
+    left: 0,
+    top: 0
+  } : e.getBoundingClientRect(), l = (t.clientX + e.scrollLeft - o.left) / n, a = (t.clientY + e.scrollTop - o.top) / n;
+  return {
+    x: l,
+    y: a
+  };
+}
+function ue(t, e) {
+  const n = ct(t, e, "px");
+  return {
+    [(0, Dt.browserPrefixToKey)("transform", Dt.default)]: n
+  };
+}
+function ce(t, e) {
+  return ct(t, e, "");
+}
+function ct(t, e, n) {
+  let {
+    x: r,
+    y: o
+  } = t, l = `translate(${r}${n},${o}${n})`;
+  if (e) {
+    const a = `${typeof e.x == "string" ? e.x : e.x + n}`, s = `${typeof e.y == "string" ? e.y : e.y + n}`;
+    l = `translate(${a}, ${s})` + l;
+  }
+  return l;
+}
+function fe(t, e) {
+  return t.targetTouches && (0, P.findInArray)(t.targetTouches, (n) => e === n.identifier) || t.changedTouches && (0, P.findInArray)(t.changedTouches, (n) => e === n.identifier);
+}
+function de(t) {
+  if (t.targetTouches && t.targetTouches[0]) return t.targetTouches[0].identifier;
+  if (t.changedTouches && t.changedTouches[0]) return t.changedTouches[0].identifier;
+}
+function pe(t) {
+  if (!t) return;
+  let e = t.getElementById("react-draggable-style-el");
+  e || (e = t.createElement("style"), e.type = "text/css", e.id = "react-draggable-style-el", e.innerHTML = `.react-draggable-transparent-selection *::-moz-selection {all: inherit;}
+`, e.innerHTML += `.react-draggable-transparent-selection *::selection {all: inherit;}
+`, t.getElementsByTagName("head")[0].appendChild(e)), t.body && $t(t.body, "react-draggable-transparent-selection");
+}
+function he(t) {
+  window.requestAnimationFrame ? window.requestAnimationFrame(() => {
+    Ot(t);
+  }) : Ot(t);
+}
+function Ot(t) {
+  if (t)
+    try {
+      if (t.body && kt(t.body, "react-draggable-transparent-selection"), t.selection)
+        t.selection.empty();
+      else {
+        const e = (t.defaultView || window).getSelection();
+        e && e.type !== "Caret" && e.removeAllRanges();
+      }
+    } catch {
+    }
+}
+function $t(t, e) {
+  t.classList ? t.classList.add(e) : t.className.match(new RegExp(`(?:^|\\s)${e}(?!\\S)`)) || (t.className += ` ${e}`);
+}
+function kt(t, e) {
+  t.classList ? t.classList.remove(e) : t.className = t.className.replace(new RegExp(`(?:^|\\s)${e}(?!\\S)`, "g"), "");
+}
+var $ = {};
+Object.defineProperty($, "__esModule", {
+  value: !0
+});
+$.canDragX = ye;
+$.canDragY = be;
+$.createCoreData = Se;
+$.createDraggableData = we;
+$.getBoundPosition = ge;
+$.getControlPosition = ve;
+$.snapToGrid = me;
+var O = N, U = y;
+function ge(t, e, n) {
+  if (!t.props.bounds) return [e, n];
+  let {
+    bounds: r
+  } = t.props;
+  r = typeof r == "string" ? r : De(r);
+  const o = ft(t);
+  if (typeof r == "string") {
+    const {
+      ownerDocument: l
+    } = o, a = l.defaultView;
+    let s;
+    if (r === "parent" ? s = o.parentNode : s = o.getRootNode().querySelector(r), !(s instanceof a.HTMLElement))
+      throw new Error('Bounds selector "' + r + '" could not find an element.');
+    const i = s, u = a.getComputedStyle(o), b = a.getComputedStyle(i);
+    r = {
+      left: -o.offsetLeft + (0, O.int)(b.paddingLeft) + (0, O.int)(u.marginLeft),
+      top: -o.offsetTop + (0, O.int)(b.paddingTop) + (0, O.int)(u.marginTop),
+      right: (0, U.innerWidth)(i) - (0, U.outerWidth)(o) - o.offsetLeft + (0, O.int)(b.paddingRight) - (0, O.int)(u.marginRight),
+      bottom: (0, U.innerHeight)(i) - (0, U.outerHeight)(o) - o.offsetTop + (0, O.int)(b.paddingBottom) - (0, O.int)(u.marginBottom)
+    };
+  }
+  return (0, O.isNum)(r.right) && (e = Math.min(e, r.right)), (0, O.isNum)(r.bottom) && (n = Math.min(n, r.bottom)), (0, O.isNum)(r.left) && (e = Math.max(e, r.left)), (0, O.isNum)(r.top) && (n = Math.max(n, r.top)), [e, n];
+}
+function me(t, e, n) {
+  const r = Math.round(e / t[0]) * t[0], o = Math.round(n / t[1]) * t[1];
+  return [r, o];
+}
+function ye(t) {
+  return t.props.axis === "both" || t.props.axis === "x";
+}
+function be(t) {
+  return t.props.axis === "both" || t.props.axis === "y";
+}
+function ve(t, e, n) {
+  const r = typeof e == "number" ? (0, U.getTouch)(t, e) : null;
+  if (typeof e == "number" && !r) return null;
+  const o = ft(n), l = n.props.offsetParent || o.offsetParent || o.ownerDocument.body;
+  return (0, U.offsetXYFromParent)(r || t, l, n.props.scale);
+}
+function Se(t, e, n) {
+  const r = !(0, O.isNum)(t.lastX), o = ft(t);
+  return r ? {
+    node: o,
+    deltaX: 0,
+    deltaY: 0,
+    lastX: e,
+    lastY: n,
+    x: e,
+    y: n
+  } : {
+    node: o,
+    deltaX: e - t.lastX,
+    deltaY: n - t.lastY,
+    lastX: t.lastX,
+    lastY: t.lastY,
+    x: e,
+    y: n
+  };
+}
+function we(t, e) {
+  const n = t.props.scale;
+  return {
+    node: e.node,
+    x: t.state.x + e.deltaX / n,
+    y: t.state.y + e.deltaY / n,
+    deltaX: e.deltaX / n,
+    deltaY: e.deltaY / n,
+    lastX: t.state.x,
+    lastY: t.state.y
+  };
+}
+function De(t) {
+  return {
+    left: t.left,
+    top: t.top,
+    right: t.right,
+    bottom: t.bottom
+  };
+}
+function ft(t) {
+  const e = t.findDOMNode();
+  if (!e)
+    throw new Error("<DraggableCore>: Unmounted during event!");
+  return e;
+}
+var J = {}, Q = {};
+Object.defineProperty(Q, "__esModule", {
+  value: !0
+});
+Q.default = Oe;
+function Oe() {
+}
+Object.defineProperty(J, "__esModule", {
+  value: !0
+});
+J.default = void 0;
+var nt = Ht(F), w = dt(G), Pe = dt(Rt), v = y, k = $, rt = N, L = dt(Q);
+function dt(t) {
+  return t && t.__esModule ? t : { default: t };
+}
+function Ht(t, e) {
+  if (typeof WeakMap == "function") var n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap();
+  return (Ht = function(o, l) {
+    if (!l && o && o.__esModule) return o;
+    var a, s, i = { __proto__: null, default: o };
+    if (o === null || typeof o != "object" && typeof o != "function") return i;
+    if (a = l ? r : n) {
+      if (a.has(o)) return a.get(o);
+      a.set(o, i);
+    }
+    for (const u in o) u !== "default" && {}.hasOwnProperty.call(o, u) && ((s = (a = Object.defineProperty) && Object.getOwnPropertyDescriptor(o, u)) && (s.get || s.set) ? a(i, u, s) : i[u] = o[u]);
+    return i;
+  })(t, e);
+}
+function D(t, e, n) {
+  return (e = _e(e)) in t ? Object.defineProperty(t, e, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = n, t;
+}
+function _e(t) {
+  var e = xe(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function xe(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var n = t[Symbol.toPrimitive];
+  if (n !== void 0) {
+    var r = n.call(t, e);
+    if (typeof r != "object") return r;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (e === "string" ? String : Number)(t);
+}
+const E = {
+  touch: {
+    start: "touchstart",
+    move: "touchmove",
+    stop: "touchend"
+  },
+  mouse: {
+    start: "mousedown",
+    move: "mousemove",
+    stop: "mouseup"
+  }
+};
+let H = E.mouse, Z = class extends nt.Component {
+  constructor() {
+    super(...arguments), D(this, "dragging", !1), D(this, "lastX", NaN), D(this, "lastY", NaN), D(this, "touchIdentifier", null), D(this, "mounted", !1), D(this, "handleDragStart", (e) => {
+      if (this.props.onMouseDown(e), !this.props.allowAnyClick && typeof e.button == "number" && e.button !== 0) return !1;
+      const n = this.findDOMNode();
+      if (!n || !n.ownerDocument || !n.ownerDocument.body)
+        throw new Error("<DraggableCore> not mounted on DragStart!");
+      const {
+        ownerDocument: r
+      } = n;
+      if (this.props.disabled || !(e.target instanceof r.defaultView.Node) || this.props.handle && !(0, v.matchesSelectorAndParentsTo)(e.target, this.props.handle, n) || this.props.cancel && (0, v.matchesSelectorAndParentsTo)(e.target, this.props.cancel, n))
+        return;
+      e.type === "touchstart" && !this.props.allowMobileScroll && e.preventDefault();
+      const o = (0, v.getTouchIdentifier)(e);
+      this.touchIdentifier = o;
+      const l = (0, k.getControlPosition)(e, o, this);
+      if (l == null) return;
+      const {
+        x: a,
+        y: s
+      } = l, i = (0, k.createCoreData)(this, a, s);
+      (0, L.default)("DraggableCore: handleDragStart: %j", i), (0, L.default)("calling", this.props.onStart), !(this.props.onStart(e, i) === !1 || this.mounted === !1) && (this.props.enableUserSelectHack && (0, v.addUserSelectStyles)(r), this.dragging = !0, this.lastX = a, this.lastY = s, (0, v.addEvent)(r, H.move, this.handleDrag), (0, v.addEvent)(r, H.stop, this.handleDragStop));
+    }), D(this, "handleDrag", (e) => {
+      const n = (0, k.getControlPosition)(e, this.touchIdentifier, this);
+      if (n == null) return;
+      let {
+        x: r,
+        y: o
+      } = n;
+      if (Array.isArray(this.props.grid)) {
+        let s = r - this.lastX, i = o - this.lastY;
+        if ([s, i] = (0, k.snapToGrid)(this.props.grid, s, i), !s && !i) return;
+        r = this.lastX + s, o = this.lastY + i;
+      }
+      const l = (0, k.createCoreData)(this, r, o);
+      if ((0, L.default)("DraggableCore: handleDrag: %j", l), this.props.onDrag(e, l) === !1 || this.mounted === !1) {
+        try {
+          this.handleDragStop(new MouseEvent("mouseup"));
+        } catch {
+          const i = document.createEvent("MouseEvents");
+          i.initMouseEvent("mouseup", !0, !0, window, 0, 0, 0, 0, 0, !1, !1, !1, !1, 0, null), this.handleDragStop(i);
+        }
+        return;
+      }
+      this.lastX = r, this.lastY = o;
+    }), D(this, "handleDragStop", (e) => {
+      if (!this.dragging) return;
+      const n = (0, k.getControlPosition)(e, this.touchIdentifier, this);
+      if (n == null) return;
+      let {
+        x: r,
+        y: o
+      } = n;
+      if (Array.isArray(this.props.grid)) {
+        let i = r - this.lastX || 0, u = o - this.lastY || 0;
+        [i, u] = (0, k.snapToGrid)(this.props.grid, i, u), r = this.lastX + i, o = this.lastY + u;
+      }
+      const l = (0, k.createCoreData)(this, r, o);
+      if (this.props.onStop(e, l) === !1 || this.mounted === !1) return !1;
+      const s = this.findDOMNode();
+      s && this.props.enableUserSelectHack && (0, v.scheduleRemoveUserSelectStyles)(s.ownerDocument), (0, L.default)("DraggableCore: handleDragStop: %j", l), this.dragging = !1, this.lastX = NaN, this.lastY = NaN, s && ((0, L.default)("DraggableCore: Removing handlers"), (0, v.removeEvent)(s.ownerDocument, H.move, this.handleDrag), (0, v.removeEvent)(s.ownerDocument, H.stop, this.handleDragStop));
+    }), D(this, "onMouseDown", (e) => (H = E.mouse, this.handleDragStart(e))), D(this, "onMouseUp", (e) => (H = E.mouse, this.handleDragStop(e))), D(this, "onTouchStart", (e) => (H = E.touch, this.handleDragStart(e))), D(this, "onTouchEnd", (e) => (H = E.touch, this.handleDragStop(e)));
+  }
+  componentDidMount() {
+    this.mounted = !0;
+    const e = this.findDOMNode();
+    e && (0, v.addEvent)(e, E.touch.start, this.onTouchStart, {
+      passive: !1
+    });
+  }
+  componentWillUnmount() {
+    this.mounted = !1;
+    const e = this.findDOMNode();
+    if (e) {
+      const {
+        ownerDocument: n
+      } = e;
+      (0, v.removeEvent)(n, E.mouse.move, this.handleDrag), (0, v.removeEvent)(n, E.touch.move, this.handleDrag), (0, v.removeEvent)(n, E.mouse.stop, this.handleDragStop), (0, v.removeEvent)(n, E.touch.stop, this.handleDragStop), (0, v.removeEvent)(e, E.touch.start, this.onTouchStart, {
+        passive: !1
+      }), this.props.enableUserSelectHack && (0, v.scheduleRemoveUserSelectStyles)(n);
+    }
+  }
+  // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+  // the underlying DOM node ourselves. See the README for more information.
+  findDOMNode() {
+    var e, n, r;
+    return (e = this.props) != null && e.nodeRef ? (r = (n = this.props) == null ? void 0 : n.nodeRef) == null ? void 0 : r.current : Pe.default.findDOMNode(this);
+  }
+  render() {
+    return /* @__PURE__ */ nt.cloneElement(nt.Children.only(this.props.children), {
+      // Note: mouseMove handler is attached to document so it will still function
+      // when the user drags quickly and leaves the bounds of the element.
+      onMouseDown: this.onMouseDown,
+      onMouseUp: this.onMouseUp,
+      // onTouchStart is added on `componentDidMount` so they can be added with
+      // {passive: false}, which allows it to cancel. See
+      // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+      onTouchEnd: this.onTouchEnd
+    });
+  }
+};
+J.default = Z;
+D(Z, "displayName", "DraggableCore");
+D(Z, "propTypes", {
+  /**
+   * `allowAnyClick` allows dragging using any mouse button.
+   * By default, we only accept the left button.
+   *
+   * Defaults to `false`.
+   */
+  allowAnyClick: w.default.bool,
+  /**
+   * `allowMobileScroll` turns off cancellation of the 'touchstart' event
+   * on mobile devices. Only enable this if you are having trouble with click
+   * events. Prefer using 'handle' / 'cancel' instead.
+   *
+   * Defaults to `false`.
+   */
+  allowMobileScroll: w.default.bool,
+  children: w.default.node.isRequired,
+  /**
+   * `disabled`, if true, stops the <Draggable> from dragging. All handlers,
+   * with the exception of `onMouseDown`, will not fire.
+   */
+  disabled: w.default.bool,
+  /**
+   * By default, we add 'user-select:none' attributes to the document body
+   * to prevent ugly text selection during drag. If this is causing problems
+   * for your app, set this to `false`.
+   */
+  enableUserSelectHack: w.default.bool,
+  /**
+   * `offsetParent`, if set, uses the passed DOM node to compute drag offsets
+   * instead of using the parent node.
+   */
+  offsetParent: function(t, e) {
+    if (t[e] && t[e].nodeType !== 1)
+      throw new Error("Draggable's offsetParent must be a DOM Node.");
+  },
+  /**
+   * `grid` specifies the x and y that dragging should snap to.
+   */
+  grid: w.default.arrayOf(w.default.number),
+  /**
+   * `handle` specifies a selector to be used as the handle that initiates drag.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *         return (
+   *            <Draggable handle=".handle">
+   *              <div>
+   *                  <div className="handle">Click me to drag</div>
+   *                  <div>This is some other content</div>
+   *              </div>
+   *           </Draggable>
+   *         );
+   *       }
+   *   });
+   * ```
+   */
+  handle: w.default.string,
+  /**
+   * `cancel` specifies a selector to be used to prevent drag initialization.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *           return(
+   *               <Draggable cancel=".cancel">
+   *                   <div>
+   *                     <div className="cancel">You can't drag from here</div>
+   *                     <div>Dragging here works fine</div>
+   *                   </div>
+   *               </Draggable>
+   *           );
+   *       }
+   *   });
+   * ```
+   */
+  cancel: w.default.string,
+  /* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
+   * Unfortunately, in order for <Draggable> to work properly, we need raw access
+   * to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
+   * as in this example:
+   *
+   * function MyComponent() {
+   *   const nodeRef = React.useRef(null);
+   *   return (
+   *     <Draggable nodeRef={nodeRef}>
+   *       <div ref={nodeRef}>Example Target</div>
+   *     </Draggable>
+   *   );
+   * }
+   *
+   * This can be used for arbitrarily nested components, so long as the ref ends up
+   * pointing to the actual child DOM node and not a custom component.
+   */
+  nodeRef: w.default.object,
+  /**
+   * Called when dragging starts.
+   * If this function returns the boolean false, dragging will be canceled.
+   */
+  onStart: w.default.func,
+  /**
+   * Called while dragging.
+   * If this function returns the boolean false, dragging will be canceled.
+   */
+  onDrag: w.default.func,
+  /**
+   * Called when dragging stops.
+   * If this function returns the boolean false, the drag will remain active.
+   */
+  onStop: w.default.func,
+  /**
+   * A workaround option which can be passed if onMouseDown needs to be accessed,
+   * since it'll always be blocked (as there is internal use of onMouseDown)
+   */
+  onMouseDown: w.default.func,
+  /**
+   * `scale`, if set, applies scaling while dragging an element
+   */
+  scale: w.default.number,
+  /**
+   * These properties should be defined on the child, not here.
+   */
+  className: rt.dontSetMe,
+  style: rt.dontSetMe,
+  transform: rt.dontSetMe
+});
+D(Z, "defaultProps", {
+  allowAnyClick: !1,
+  // by default only accept left click
+  allowMobileScroll: !1,
+  disabled: !1,
+  enableUserSelectHack: !0,
+  onStart: function() {
+  },
+  onDrag: function() {
+  },
+  onStop: function() {
+  },
+  onMouseDown: function() {
+  },
+  scale: 1
+});
+(function(t) {
+  Object.defineProperty(t, "__esModule", {
+    value: !0
+  }), Object.defineProperty(t, "DraggableCore", {
+    enumerable: !0,
+    get: function() {
+      return i.default;
+    }
+  }), t.default = void 0;
+  var e = x(F), n = b(G), r = b(Rt), o = It, l = y, a = $, s = N, i = b(J), u = b(Q);
+  function b(g) {
+    return g && g.__esModule ? g : { default: g };
+  }
+  function x(g, c) {
+    if (typeof WeakMap == "function") var d = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap();
+    return (x = function(h, m) {
+      if (!m && h && h.__esModule) return h;
+      var T, z, _ = { __proto__: null, default: h };
+      if (h === null || typeof h != "object" && typeof h != "function") return _;
+      if (T = m ? p : d) {
+        if (T.has(h)) return T.get(h);
+        T.set(h, _);
+      }
+      for (const C in h) C !== "default" && {}.hasOwnProperty.call(h, C) && ((z = (T = Object.defineProperty) && Object.getOwnPropertyDescriptor(h, C)) && (z.get || z.set) ? T(_, C, z) : _[C] = h[C]);
+      return _;
+    })(g, c);
+  }
+  function j() {
+    return j = Object.assign ? Object.assign.bind() : function(g) {
+      for (var c = 1; c < arguments.length; c++) {
+        var d = arguments[c];
+        for (var p in d) ({}).hasOwnProperty.call(d, p) && (g[p] = d[p]);
+      }
+      return g;
+    }, j.apply(null, arguments);
+  }
+  function S(g, c, d) {
+    return (c = R(c)) in g ? Object.defineProperty(g, c, { value: d, enumerable: !0, configurable: !0, writable: !0 }) : g[c] = d, g;
+  }
+  function R(g) {
+    var c = X(g, "string");
+    return typeof c == "symbol" ? c : c + "";
+  }
+  function X(g, c) {
+    if (typeof g != "object" || !g) return g;
+    var d = g[Symbol.toPrimitive];
+    if (d !== void 0) {
+      var p = d.call(g, c);
+      if (typeof p != "object") return p;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (c === "string" ? String : Number)(g);
+  }
+  class M extends e.Component {
+    // React 16.3+
+    // Arity (props, state)
+    static getDerivedStateFromProps(c, d) {
+      let {
+        position: p
+      } = c, {
+        prevPropsPosition: h
+      } = d;
+      return p && (!h || p.x !== h.x || p.y !== h.y) ? ((0, u.default)("Draggable: getDerivedStateFromProps %j", {
+        position: p,
+        prevPropsPosition: h
+      }), {
+        x: p.x,
+        y: p.y,
+        prevPropsPosition: {
+          ...p
+        }
+      }) : null;
+    }
+    constructor(c) {
+      super(c), S(this, "onDragStart", (d, p) => {
+        if ((0, u.default)("Draggable: onDragStart: %j", p), this.props.onStart(d, (0, a.createDraggableData)(this, p)) === !1) return !1;
+        this.setState({
+          dragging: !0,
+          dragged: !0
+        });
+      }), S(this, "onDrag", (d, p) => {
+        if (!this.state.dragging) return !1;
+        (0, u.default)("Draggable: onDrag: %j", p);
+        const h = (0, a.createDraggableData)(this, p), m = {
+          x: h.x,
+          y: h.y,
+          slackX: 0,
+          slackY: 0
+        };
+        if (this.props.bounds) {
+          const {
+            x: z,
+            y: _
+          } = m;
+          m.x += this.state.slackX, m.y += this.state.slackY;
+          const [C, gt] = (0, a.getBoundPosition)(this, m.x, m.y);
+          m.x = C, m.y = gt, m.slackX = this.state.slackX + (z - m.x), m.slackY = this.state.slackY + (_ - m.y), h.x = m.x, h.y = m.y, h.deltaX = m.x - this.state.x, h.deltaY = m.y - this.state.y;
+        }
+        if (this.props.onDrag(d, h) === !1) return !1;
+        this.setState(m);
+      }), S(this, "onDragStop", (d, p) => {
+        if (!this.state.dragging || this.props.onStop(d, (0, a.createDraggableData)(this, p)) === !1) return !1;
+        (0, u.default)("Draggable: onDragStop: %j", p);
+        const m = {
+          dragging: !1,
+          slackX: 0,
+          slackY: 0
+        };
+        if (!!this.props.position) {
+          const {
+            x: z,
+            y: _
+          } = this.props.position;
+          m.x = z, m.y = _;
+        }
+        this.setState(m);
+      }), this.state = {
+        // Whether or not we are currently dragging.
+        dragging: !1,
+        // Whether or not we have been dragged before.
+        dragged: !1,
+        // Current transform x and y.
+        x: c.position ? c.position.x : c.defaultPosition.x,
+        y: c.position ? c.position.y : c.defaultPosition.y,
+        prevPropsPosition: {
+          ...c.position
+        },
+        // Used for compensating for out-of-bounds drags
+        slackX: 0,
+        slackY: 0,
+        // Can only determine if SVG after mounting
+        isElementSVG: !1
+      }, c.position && !(c.onDrag || c.onStop) && console.warn("A `position` was applied to this <Draggable>, without drag handlers. This will make this component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the `position` of this element.");
+    }
+    componentDidMount() {
+      typeof window.SVGElement < "u" && this.findDOMNode() instanceof window.SVGElement && this.setState({
+        isElementSVG: !0
+      });
+    }
+    componentWillUnmount() {
+      this.state.dragging && this.setState({
+        dragging: !1
+      });
+    }
+    // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+    // the underlying DOM node ourselves. See the README for more information.
+    findDOMNode() {
+      var c, d;
+      return ((d = (c = this.props) == null ? void 0 : c.nodeRef) == null ? void 0 : d.current) ?? r.default.findDOMNode(this);
+    }
+    render() {
+      const {
+        axis: c,
+        bounds: d,
+        children: p,
+        defaultPosition: h,
+        defaultClassName: m,
+        defaultClassNameDragging: T,
+        defaultClassNameDragged: z,
+        position: _,
+        positionOffset: C,
+        scale: gt,
+        ...Lt
+      } = this.props;
+      let mt = {}, yt = null;
+      const bt = !!!_ || this.state.dragging, vt = _ || h, St = {
+        // Set left if horizontal drag is enabled
+        x: (0, a.canDragX)(this) && bt ? this.state.x : vt.x,
+        // Set top if vertical drag is enabled
+        y: (0, a.canDragY)(this) && bt ? this.state.y : vt.y
+      };
+      this.state.isElementSVG ? yt = (0, l.createSVGTransform)(St, C) : mt = (0, l.createCSSTransform)(St, C);
+      const Ft = (0, o.clsx)(p.props.className || "", m, {
+        [T]: this.state.dragging,
+        [z]: this.state.dragged
+      });
+      return /* @__PURE__ */ e.createElement(i.default, j({}, Lt, {
+        onStart: this.onDragStart,
+        onDrag: this.onDrag,
+        onStop: this.onDragStop
+      }), /* @__PURE__ */ e.cloneElement(e.Children.only(p), {
+        className: Ft,
+        style: {
+          ...p.props.style,
+          ...mt
+        },
+        transform: yt
+      }));
+    }
+  }
+  t.default = M, S(M, "displayName", "Draggable"), S(M, "propTypes", {
+    // Accepts all props <DraggableCore> accepts.
+    ...i.default.propTypes,
+    /**
+     * `axis` determines which axis the draggable can move.
+     *
+     *  Note that all callbacks will still return data as normal. This only
+     *  controls flushing to the DOM.
+     *
+     * 'both' allows movement horizontally and vertically.
+     * 'x' limits movement to horizontal axis.
+     * 'y' limits movement to vertical axis.
+     * 'none' limits all movement.
+     *
+     * Defaults to 'both'.
+     */
+    axis: n.default.oneOf(["both", "x", "y", "none"]),
+    /**
+     * `bounds` determines the range of movement available to the element.
+     * Available values are:
+     *
+     * 'parent' restricts movement within the Draggable's parent node.
+     *
+     * Alternatively, pass an object with the following properties, all of which are optional:
+     *
+     * {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
+     *
+     * All values are in px.
+     *
+     * Example:
+     *
+     * ```jsx
+     *   let App = React.createClass({
+     *       render: function () {
+     *         return (
+     *            <Draggable bounds={{right: 300, bottom: 300}}>
+     *              <div>Content</div>
+     *           </Draggable>
+     *         );
+     *       }
+     *   });
+     * ```
+     */
+    bounds: n.default.oneOfType([n.default.shape({
+      left: n.default.number,
+      right: n.default.number,
+      top: n.default.number,
+      bottom: n.default.number
+    }), n.default.string, n.default.oneOf([!1])]),
+    defaultClassName: n.default.string,
+    defaultClassNameDragging: n.default.string,
+    defaultClassNameDragged: n.default.string,
+    /**
+     * `defaultPosition` specifies the x and y that the dragged item should start at
+     *
+     * Example:
+     *
+     * ```jsx
+     *      let App = React.createClass({
+     *          render: function () {
+     *              return (
+     *                  <Draggable defaultPosition={{x: 25, y: 25}}>
+     *                      <div>I start with transformX: 25px and transformY: 25px;</div>
+     *                  </Draggable>
+     *              );
+     *          }
+     *      });
+     * ```
+     */
+    defaultPosition: n.default.shape({
+      x: n.default.number,
+      y: n.default.number
+    }),
+    positionOffset: n.default.shape({
+      x: n.default.oneOfType([n.default.number, n.default.string]),
+      y: n.default.oneOfType([n.default.number, n.default.string])
+    }),
+    /**
+     * `position`, if present, defines the current position of the element.
+     *
+     *  This is similar to how form elements in React work - if no `position` is supplied, the component
+     *  is uncontrolled.
+     *
+     * Example:
+     *
+     * ```jsx
+     *      let App = React.createClass({
+     *          render: function () {
+     *              return (
+     *                  <Draggable position={{x: 25, y: 25}}>
+     *                      <div>I start with transformX: 25px and transformY: 25px;</div>
+     *                  </Draggable>
+     *              );
+     *          }
+     *      });
+     * ```
+     */
+    position: n.default.shape({
+      x: n.default.number,
+      y: n.default.number
+    }),
+    /**
+     * These properties should be defined on the child, not here.
+     */
+    className: s.dontSetMe,
+    style: s.dontSetMe,
+    transform: s.dontSetMe
+  }), S(M, "defaultProps", {
+    ...i.default.defaultProps,
+    axis: "both",
+    bounds: !1,
+    defaultClassName: "react-draggable",
+    defaultClassNameDragging: "react-draggable-dragging",
+    defaultClassNameDragged: "react-draggable-dragged",
+    defaultPosition: {
+      x: 0,
+      y: 0
+    },
+    scale: 1
+  });
+})(Mt);
+const {
+  default: Wt,
+  DraggableCore: je
+} = Mt;
+K.exports = Wt;
+K.exports.default = Wt;
+K.exports.DraggableCore = je;
+var Re = K.exports, pt = {};
+pt.__esModule = !0;
+pt.cloneElement = Ne;
+var Me = Ce(F);
+function Ce(t) {
+  return t && t.__esModule ? t : { default: t };
+}
+function Pt(t, e) {
+  var n = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(t);
+    e && (r = r.filter(function(o) {
+      return Object.getOwnPropertyDescriptor(t, o).enumerable;
+    })), n.push.apply(n, r);
+  }
+  return n;
+}
+function _t(t) {
+  for (var e = 1; e < arguments.length; e++) {
+    var n = arguments[e] != null ? arguments[e] : {};
+    e % 2 ? Pt(Object(n), !0).forEach(function(r) {
+      Ee(t, r, n[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(n)) : Pt(Object(n)).forEach(function(r) {
+      Object.defineProperty(t, r, Object.getOwnPropertyDescriptor(n, r));
+    });
+  }
+  return t;
+}
+function Ee(t, e, n) {
+  return (e = Te(e)) in t ? Object.defineProperty(t, e, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = n, t;
+}
+function Te(t) {
+  var e = ze(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function ze(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var n = t[Symbol.toPrimitive];
+  if (n !== void 0) {
+    var r = n.call(t, e);
+    if (typeof r != "object") return r;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (e === "string" ? String : Number)(t);
+}
+function Ne(t, e) {
+  return e.style && t.props.style && (e.style = _t(_t({}, t.props.style), e.style)), e.className && t.props.className && (e.className = `${t.props.className} ${e.className}`), /* @__PURE__ */ Me.default.cloneElement(t, e);
+}
+var q = {};
+q.__esModule = !0;
+q.resizableProps = void 0;
+var f = $e(G);
+function $e(t) {
+  return t && t.__esModule ? t : { default: t };
+}
+q.resizableProps = {
+  /*
+  * Restricts resizing to a particular axis (default: 'both')
+  * 'both' - allows resizing by width or height
+  * 'x' - only allows the width to be changed
+  * 'y' - only allows the height to be changed
+  * 'none' - disables resizing altogether
+  * */
+  axis: f.default.oneOf(["both", "x", "y", "none"]),
+  className: f.default.string,
+  /*
+  * Require that one and only one child be present.
+  * */
+  children: f.default.element.isRequired,
+  /*
+  * These will be passed wholesale to react-draggable's DraggableCore
+  * */
+  draggableOpts: f.default.shape({
+    allowAnyClick: f.default.bool,
+    cancel: f.default.string,
+    children: f.default.node,
+    disabled: f.default.bool,
+    enableUserSelectHack: f.default.bool,
+    // #251: Check for Element to support SSR environments where DOM globals don't exist
+    offsetParent: typeof Element < "u" ? f.default.instanceOf(Element) : f.default.any,
+    grid: f.default.arrayOf(f.default.number),
+    handle: f.default.string,
+    nodeRef: f.default.object,
+    onStart: f.default.func,
+    onDrag: f.default.func,
+    onStop: f.default.func,
+    onMouseDown: f.default.func,
+    scale: f.default.number
+  }),
+  /*
+  * Initial height
+  * */
+  height: function() {
+    for (var t = arguments.length, e = new Array(t), n = 0; n < t; n++)
+      e[n] = arguments[n];
+    const [r] = e;
+    return r.axis === "both" || r.axis === "y" ? f.default.number.isRequired(...e) : f.default.number(...e);
+  },
+  /*
+  * Customize cursor resize handle
+  * */
+  handle: f.default.oneOfType([f.default.node, f.default.func]),
+  /*
+  * If you change this, be sure to update your css
+  * */
+  handleSize: f.default.arrayOf(f.default.number),
+  lockAspectRatio: f.default.bool,
+  /*
+  * Max X & Y measure
+  * */
+  maxConstraints: f.default.arrayOf(f.default.number),
+  /*
+  * Min X & Y measure
+  * */
+  minConstraints: f.default.arrayOf(f.default.number),
+  /*
+  * Called on stop resize event
+  * */
+  onResizeStop: f.default.func,
+  /*
+  * Called on start resize event
+  * */
+  onResizeStart: f.default.func,
+  /*
+  * Called on resize event
+  * */
+  onResize: f.default.func,
+  /*
+  * Defines which resize handles should be rendered (default: 'se')
+  * 's' - South handle (bottom-center)
+  * 'w' - West handle (left-center)
+  * 'e' - East handle (right-center)
+  * 'n' - North handle (top-center)
+  * 'sw' - Southwest handle (bottom-left)
+  * 'nw' - Northwest handle (top-left)
+  * 'se' - Southeast handle (bottom-right)
+  * 'ne' - Northeast handle (top-center)
+  * */
+  resizeHandles: f.default.arrayOf(f.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])),
+  /*
+  * If `transform: scale(n)` is set on the parent, this should be set to `n`.
+  * */
+  transformScale: f.default.number,
+  /*
+   * Initial width
+   */
+  width: function() {
+    for (var t = arguments.length, e = new Array(t), n = 0; n < t; n++)
+      e[n] = arguments[n];
+    const [r] = e;
+    return r.axis === "both" || r.axis === "x" ? f.default.number.isRequired(...e) : f.default.number(...e);
+  }
+};
+B.__esModule = !0;
+B.default = void 0;
+var Y = Xt(F), ke = Re, He = pt, We = q;
+const Xe = ["children", "className", "draggableOpts", "width", "height", "handle", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"];
+function Xt(t, e) {
+  if (typeof WeakMap == "function") var n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap();
+  return (Xt = function(o, l) {
+    if (!l && o && o.__esModule) return o;
+    var a, s, i = { __proto__: null, default: o };
+    if (o === null || typeof o != "object" && typeof o != "function") return i;
+    if (a = l ? r : n) {
+      if (a.has(o)) return a.get(o);
+      a.set(o, i);
+    }
+    for (const u in o) u !== "default" && {}.hasOwnProperty.call(o, u) && ((s = (a = Object.defineProperty) && Object.getOwnPropertyDescriptor(o, u)) && (s.get || s.set) ? a(i, u, s) : i[u] = o[u]);
+    return i;
+  })(t, e);
+}
+function it() {
+  return it = Object.assign ? Object.assign.bind() : function(t) {
+    for (var e = 1; e < arguments.length; e++) {
+      var n = arguments[e];
+      for (var r in n) ({}).hasOwnProperty.call(n, r) && (t[r] = n[r]);
+    }
+    return t;
+  }, it.apply(null, arguments);
+}
+function Ye(t, e) {
+  if (t == null) return {};
+  var n, r, o = Ue(t, e);
+  if (Object.getOwnPropertySymbols) {
+    var l = Object.getOwnPropertySymbols(t);
+    for (r = 0; r < l.length; r++) n = l[r], e.indexOf(n) === -1 && {}.propertyIsEnumerable.call(t, n) && (o[n] = t[n]);
+  }
+  return o;
+}
+function Ue(t, e) {
+  if (t == null) return {};
+  var n = {};
+  for (var r in t) if ({}.hasOwnProperty.call(t, r)) {
+    if (e.indexOf(r) !== -1) continue;
+    n[r] = t[r];
+  }
+  return n;
+}
+function xt(t, e) {
+  var n = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(t);
+    e && (r = r.filter(function(o) {
+      return Object.getOwnPropertyDescriptor(t, o).enumerable;
+    })), n.push.apply(n, r);
+  }
+  return n;
+}
+function ot(t) {
+  for (var e = 1; e < arguments.length; e++) {
+    var n = arguments[e] != null ? arguments[e] : {};
+    e % 2 ? xt(Object(n), !0).forEach(function(r) {
+      Ae(t, r, n[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(n)) : xt(Object(n)).forEach(function(r) {
+      Object.defineProperty(t, r, Object.getOwnPropertyDescriptor(n, r));
+    });
+  }
+  return t;
+}
+function Ae(t, e, n) {
+  return (e = Le(e)) in t ? Object.defineProperty(t, e, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = n, t;
+}
+function Le(t) {
+  var e = Fe(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Fe(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var n = t[Symbol.toPrimitive];
+  if (n !== void 0) {
+    var r = n.call(t, e);
+    if (typeof r != "object") return r;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (e === "string" ? String : Number)(t);
+}
+let ht = class extends Y.Component {
+  constructor() {
+    super(...arguments), this.handleRefs = {}, this.lastHandleRect = null, this.slack = null, this.lastSize = null;
+  }
+  componentWillUnmount() {
+    this.resetData();
+  }
+  resetData() {
+    this.lastHandleRect = this.slack = this.lastSize = null;
+  }
+  // Clamp width and height within provided constraints
+  runConstraints(e, n) {
+    const {
+      minConstraints: r,
+      maxConstraints: o,
+      lockAspectRatio: l
+    } = this.props;
+    if (!r && !o && !l) return [e, n];
+    if (l) {
+      const b = this.props.width / this.props.height, x = e - this.props.width, j = n - this.props.height;
+      Math.abs(x) > Math.abs(j * b) ? n = e / b : e = n * b;
+    }
+    const [a, s] = [e, n];
+    let [i, u] = this.slack || [0, 0];
+    return e += i, n += u, r && (e = Math.max(r[0], e), n = Math.max(r[1], n)), o && (e = Math.min(o[0], e), n = Math.min(o[1], n)), this.slack = [i + (a - e), u + (s - n)], [e, n];
+  }
+  /**
+   * Wrapper around drag events to provide more useful data.
+   *
+   * @param  {String} handlerName Handler name to wrap.
+   * @return {Function}           Handler function.
+   */
+  resizeHandler(e, n) {
+    return (r, o) => {
+      var c;
+      let {
+        node: l,
+        deltaX: a,
+        deltaY: s
+      } = o;
+      e === "onResizeStart" && this.resetData();
+      const i = (this.props.axis === "both" || this.props.axis === "x") && n !== "n" && n !== "s", u = (this.props.axis === "both" || this.props.axis === "y") && n !== "e" && n !== "w";
+      if (!i && !u) return;
+      const b = n[0], x = n[n.length - 1], j = l.getBoundingClientRect();
+      if (this.lastHandleRect != null) {
+        if (x === "w") {
+          const d = j.left - this.lastHandleRect.left;
+          a += d;
+        }
+        if (b === "n") {
+          const d = j.top - this.lastHandleRect.top;
+          s += d;
+        }
+      }
+      this.lastHandleRect = j, x === "w" && (a = -a), b === "n" && (s = -s);
+      let S = this.props.width + (i ? a / this.props.transformScale : 0), R = this.props.height + (u ? s / this.props.transformScale : 0);
+      [S, R] = this.runConstraints(S, R), e === "onResizeStop" && this.lastSize && ({
+        width: S,
+        height: R
+      } = this.lastSize);
+      const X = S !== this.props.width || R !== this.props.height;
+      e !== "onResizeStop" && (this.lastSize = {
+        width: S,
+        height: R
+      });
+      const M = typeof this.props[e] == "function" ? this.props[e] : null;
+      M && !(e === "onResize" && !X) && ((c = r.persist) == null || c.call(r), M(r, {
+        node: l,
+        size: {
+          width: S,
+          height: R
+        },
+        handle: n
+      })), e === "onResizeStop" && this.resetData();
+    };
+  }
+  // Render a resize handle given an axis & DOM ref. Ref *must* be attached for
+  // the underlying draggable library to work properly.
+  renderResizeHandle(e, n) {
+    const {
+      handle: r
+    } = this.props;
+    if (!r)
+      return /* @__PURE__ */ Y.createElement("span", {
+        className: `react-resizable-handle react-resizable-handle-${e}`,
+        ref: n
+      });
+    if (typeof r == "function")
+      return r(e, n);
+    const o = typeof r.type == "string", l = ot({
+      ref: n
+    }, o ? {} : {
+      handleAxis: e
+    });
+    return /* @__PURE__ */ Y.cloneElement(r, l);
+  }
+  render() {
+    const e = this.props, {
+      children: n,
+      className: r,
+      draggableOpts: o,
+      width: l,
+      height: a,
+      handle: s,
+      handleSize: i,
+      lockAspectRatio: u,
+      axis: b,
+      minConstraints: x,
+      maxConstraints: j,
+      onResize: S,
+      onResizeStop: R,
+      onResizeStart: X,
+      resizeHandles: M,
+      transformScale: g
+    } = e, c = Ye(e, Xe);
+    return (0, He.cloneElement)(n, ot(ot({}, c), {}, {
+      className: `${r ? `${r} ` : ""}react-resizable`,
+      children: [...Y.Children.toArray(n.props.children), ...M.map((d) => {
+        const p = this.handleRefs[d] ?? (this.handleRefs[d] = /* @__PURE__ */ Y.createRef());
+        return /* @__PURE__ */ Y.createElement(ke.DraggableCore, it({}, o, {
+          nodeRef: p,
+          key: `resizableHandle-${d}`,
+          onStop: this.resizeHandler("onResizeStop", d),
+          onStart: this.resizeHandler("onResizeStart", d),
+          onDrag: this.resizeHandler("onResize", d)
+        }), this.renderResizeHandle(d, p));
+      })]
+    }));
+  }
+};
+B.default = ht;
+ht.propTypes = We.resizableProps;
+ht.defaultProps = {
+  axis: "both",
+  handleSize: [20, 20],
+  lockAspectRatio: !1,
+  minConstraints: [20, 20],
+  maxConstraints: [1 / 0, 1 / 0],
+  resizeHandles: ["se"],
+  transformScale: 1
+};
+var tt = {};
+tt.__esModule = !0;
+tt.default = void 0;
+var st = Ut(F), Be = Yt(G), qe = Yt(B), Ie = q;
+const Ve = ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"];
+function Yt(t) {
+  return t && t.__esModule ? t : { default: t };
+}
+function Ut(t, e) {
+  if (typeof WeakMap == "function") var n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap();
+  return (Ut = function(o, l) {
+    if (!l && o && o.__esModule) return o;
+    var a, s, i = { __proto__: null, default: o };
+    if (o === null || typeof o != "object" && typeof o != "function") return i;
+    if (a = l ? r : n) {
+      if (a.has(o)) return a.get(o);
+      a.set(o, i);
+    }
+    for (const u in o) u !== "default" && {}.hasOwnProperty.call(o, u) && ((s = (a = Object.defineProperty) && Object.getOwnPropertyDescriptor(o, u)) && (s.get || s.set) ? a(i, u, s) : i[u] = o[u]);
+    return i;
+  })(t, e);
+}
+function lt() {
+  return lt = Object.assign ? Object.assign.bind() : function(t) {
+    for (var e = 1; e < arguments.length; e++) {
+      var n = arguments[e];
+      for (var r in n) ({}).hasOwnProperty.call(n, r) && (t[r] = n[r]);
+    }
+    return t;
+  }, lt.apply(null, arguments);
+}
+function jt(t, e) {
+  var n = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(t);
+    e && (r = r.filter(function(o) {
+      return Object.getOwnPropertyDescriptor(t, o).enumerable;
+    })), n.push.apply(n, r);
+  }
+  return n;
+}
+function V(t) {
+  for (var e = 1; e < arguments.length; e++) {
+    var n = arguments[e] != null ? arguments[e] : {};
+    e % 2 ? jt(Object(n), !0).forEach(function(r) {
+      Ge(t, r, n[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(n)) : jt(Object(n)).forEach(function(r) {
+      Object.defineProperty(t, r, Object.getOwnPropertyDescriptor(n, r));
+    });
+  }
+  return t;
+}
+function Ge(t, e, n) {
+  return (e = Ke(e)) in t ? Object.defineProperty(t, e, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = n, t;
+}
+function Ke(t) {
+  var e = Je(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Je(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var n = t[Symbol.toPrimitive];
+  if (n !== void 0) {
+    var r = n.call(t, e);
+    if (typeof r != "object") return r;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (e === "string" ? String : Number)(t);
+}
+function Qe(t, e) {
+  if (t == null) return {};
+  var n, r, o = Ze(t, e);
+  if (Object.getOwnPropertySymbols) {
+    var l = Object.getOwnPropertySymbols(t);
+    for (r = 0; r < l.length; r++) n = l[r], e.indexOf(n) === -1 && {}.propertyIsEnumerable.call(t, n) && (o[n] = t[n]);
+  }
+  return o;
+}
+function Ze(t, e) {
+  if (t == null) return {};
+  var n = {};
+  for (var r in t) if ({}.hasOwnProperty.call(t, r)) {
+    if (e.indexOf(r) !== -1) continue;
+    n[r] = t[r];
+  }
+  return n;
+}
+class At extends st.Component {
+  constructor() {
+    super(...arguments), this.state = {
+      width: this.props.width,
+      height: this.props.height,
+      propsWidth: this.props.width,
+      propsHeight: this.props.height
+    }, this.onResize = (e, n) => {
+      var o;
+      const {
+        size: r
+      } = n;
+      this.props.onResize ? ((o = e.persist) == null || o.call(e), this.setState(r, () => this.props.onResize && this.props.onResize(e, n))) : this.setState(r);
+    };
+  }
+  static getDerivedStateFromProps(e, n) {
+    return n.propsWidth !== e.width || n.propsHeight !== e.height ? {
+      width: e.width,
+      height: e.height,
+      propsWidth: e.width,
+      propsHeight: e.height
+    } : null;
+  }
+  render() {
+    const e = this.props, {
+      handle: n,
+      handleSize: r,
+      onResize: o,
+      onResizeStart: l,
+      onResizeStop: a,
+      draggableOpts: s,
+      minConstraints: i,
+      maxConstraints: u,
+      lockAspectRatio: b,
+      axis: x,
+      width: j,
+      height: S,
+      resizeHandles: R,
+      style: X,
+      transformScale: M
+    } = e, g = Qe(e, Ve);
+    return /* @__PURE__ */ st.createElement(qe.default, {
+      axis: x,
+      draggableOpts: s,
+      handle: n,
+      handleSize: r,
+      height: this.state.height,
+      lockAspectRatio: b,
+      maxConstraints: u,
+      minConstraints: i,
+      onResizeStart: l,
+      onResize: this.onResize,
+      onResizeStop: a,
+      resizeHandles: R,
+      transformScale: M,
+      width: this.state.width
+    }, /* @__PURE__ */ st.createElement("div", lt({}, g, {
+      style: V(V({}, X), {}, {
+        width: this.state.width + "px",
+        height: this.state.height + "px"
+      })
+    })));
+  }
+}
+tt.default = At;
+At.propTypes = V(V({}, Ie.resizableProps), {}, {
+  children: Be.default.element
+});
+ut.exports = function() {
+  throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable");
+};
+var tn = ut.exports.Resizable = B.default;
+ut.exports.ResizableBox = tt.default;
+const en = "rgba(0, 0, 0, 0.12)", un = (t) => {
+  var o, l;
+  const [e, n] = Bt(((o = t.data) == null ? void 0 : o.height) ?? 24);
+  qt(() => {
+    var a;
+    return n((a = t.data) == null ? void 0 : a.height);
+  }, [(l = t.data) == null ? void 0 : l.height]);
+  const { onChange: r } = t;
+  return /* @__PURE__ */ A.jsx(
+    tn,
+    {
+      onResize: (a, { size: s }) => {
+        n((s == null ? void 0 : s.height) ?? 0);
+      },
+      onResizeStop: (a, { size: s }) => r({
+        height: s == null ? void 0 : s.height
+      }),
+      height: e,
+      width: 0,
+      children: /* @__PURE__ */ A.jsx("div", { style: { height: e, position: "relative" }, children: /* @__PURE__ */ A.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "0",
+            height: "24px",
+            width: "100%",
+            background: en,
+            textAlign: "center"
+          },
+          children: /* @__PURE__ */ A.jsx(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              style: { color: "white", width: 24, height: 24 },
+              children: /* @__PURE__ */ A.jsx("path", { d: "M20 9H4v2h16V9zM4 15h16v-2H4v2z" })
+            }
+          )
+        }
+      ) })
+    }
+  );
+};
+export {
+  un as default
+};