@unicom-cloud/ui 0.8.46 → 0.8.48

package/ResizeBox.js

@@ -1,60 +1,433 @@
-import { jsxs as ot, jsx as rt } from "react/jsx-runtime";
-/* empty css                 */
-/* empty css                            */
-import E from "lodash/isNumber";
-import { forwardRef as nt, useContext as st, useState as it, useRef as B, useImperativeHandle as ct } from "react";
-import "./config-provider/ConfigProvider.js";
-import at from "./hooks/useMergeProps.js";
-import W from "./hooks/useMergeValue.js";
-import ut from "@unicom-cloud/utils/class-name";
-import { on as g, off as l } from "./utils/dom.js";
-import mt from "./utils/omit.js";
-import dt from "./resize-box/ResizeTrigger.js";
-import gt from "./resize-box/Split.js";
-import lt from "./resize-box/SplitGroup.js";
-import { ConfigContext as ft } from "./config-provider/context.js";
-const $ = "left", b = "right", z = "top", y = "bottom", pt = [
-  $,
-  b,
-  z,
-  y
-], ht = {
+import { jsx as m, jsxs as ft } from "react/jsx-runtime";
+import vt from "lodash/isNumber";
+import Bt, { useContext as ut, useRef as F, useEffect as lt, forwardRef as Ct, useState as st, useImperativeHandle as Nt } from "react";
+import { a as mt } from "./chunk/z7sBNzI4.js";
+import Yt from "./hooks/useMergeProps.js";
+import Tt from "./hooks/useMergeValue.js";
+import P from "@unicom-cloud/utils/class-name";
+import { on as $, off as y } from "./utils/dom.js";
+import zt from "./utils/omit.js";
+import Ft from "@unicom-cloud/icons/IconUiCaretDown";
+import bt from "@unicom-cloud/icons/IconUiCaretLeft";
+import It from "@unicom-cloud/icons/IconUiCaretRight";
+import kt from "@unicom-cloud/icons/IconUiCaretUp";
+import Ut from "@unicom-cloud/icons/IconUiDragDot";
+import Vt from "@unicom-cloud/icons/IconUiDragDotVertical";
+import wt from "lodash/isFunction";
+import { isObject as St } from "./utils/is.js";
+import _t from "./hooks/useIsomorphicLayoutEffect.js";
+import ct from "lodash/isPlainObject";
+import Lt from "lodash/isString";
+import Pt from "lodash/isUndefined";
+function Mt(r) {
+  const {
+    className: ot,
+    direction: g,
+    icon: q,
+    onMouseDown: J,
+    onResize: x,
+    children: K,
+    collapsible: N = {},
+    resizable: X = !0,
+    renderChildren: b,
+    ...Q
+  } = r, { getPrefixCls: rt, rtl: z } = ut(mt), d = rt("resizebox-trigger"), D = g === "horizontal", M = z && !D, T = P(
+    d,
+    `${d}-${D ? "horizontal" : "vertical"}`,
+    { [`${d}-not-resizable`]: !X },
+    { [`${d}-rtl`]: z },
+    ot
+  ), l = F(), k = M ? [/* @__PURE__ */ m(It, {}, "prev"), /* @__PURE__ */ m(bt, {}, "next")] : [/* @__PURE__ */ m(bt, {}, "prev"), /* @__PURE__ */ m(It, {}, "next")], I = St(N.prev) ? {
+    ...N.prev,
+    icon: N.prev.icon || (D ? /* @__PURE__ */ m(kt, {}) : k[0])
+  } : {}, E = St(N.next) ? {
+    ...N.next,
+    icon: N.next.icon || (D ? /* @__PURE__ */ m(Ft, {}) : k[1])
+  } : {}, U = () => I.icon && !I.collapsed || E.collapsed ? /* @__PURE__ */ m(
+    "span",
+    {
+      className: P(`${d}-icon`, P(`${d}-prev`)),
+      onClick: I.onClick,
+      children: I.icon
+    }
+  ) : /* @__PURE__ */ m("span", { className: P(`${d}-icon-empty`) }), tt = () => E.icon && !E.collapsed || I.collapsed ? /* @__PURE__ */ m(
+    "span",
+    {
+      className: P(`${d}-icon`, P(`${d}-next`)),
+      onClick: E.onClick,
+      children: E.icon
+    }
+  ) : /* @__PURE__ */ m("span", { className: P(`${d}-icon-empty`) }), w = () => X ? /* @__PURE__ */ m("span", { className: `${d}-icon`, children: q || (D ? /* @__PURE__ */ m(Ut, {}) : /* @__PURE__ */ m(Vt, {})) }) : /* @__PURE__ */ m("span", { className: P(`${d}-icon-empty`) }), O = U(), f = w(), h = tt(), V = () => /* @__PURE__ */ ft("div", { className: `${d}-icon-wrapper`, children: [
+    O,
+    f,
+    h
+  ] });
+  return X ? (lt(() => {
+    let i;
+    return l.current && (i = new ResizeObserver(x), i.observe(l.current)), () => {
+      var H, _;
+      l.current && ((H = i == null ? void 0 : i.unobserve) == null || H.call(i, l.current)), (_ = i == null ? void 0 : i.disconnect) == null || _.call(i), i = null;
+    };
+  }, [l.current]), /* @__PURE__ */ m(
+    "div",
+    {
+      ref: l,
+      ...zt(Q, ["style"]),
+      className: T,
+      onMouseDown: J,
+      children: wt(b) ? b(O, f, h) : K || V()
+    }
+  )) : /* @__PURE__ */ m("div", { className: T, children: wt(b) ? b(O, f, h) : K || V() });
+}
+const dt = "horizontal", Dt = "vertical";
+function Gt(r, ot) {
+  const {
+    style: g,
+    className: q,
+    component: J = "div",
+    direction: x = "horizontal",
+    icon: K,
+    size: N = 0.5,
+    min: X,
+    max: b,
+    panes: Q,
+    disabled: rt,
+    trigger: z
+  } = r, { getPrefixCls: d, rtl: D } = ut(mt), M = d("resizebox-split"), T = x.includes(dt), l = x.includes("reverse"), k = T && D, I = !T, E = P(
+    M,
+    `${M}-${T ? dt : Dt}`,
+    { [`${M}-rtl`]: D },
+    q
+  ), [U, tt] = Q, w = typeof N == "string", [O, f] = st(parseFloat(N)), [h, V] = st(0), i = F({
+    startX: 0,
+    startY: 0,
+    startWidth: 0,
+    startHeight: 0,
+    startOffset: 0,
+    moving: !1
+  }), H = F(), _ = F([]);
+  Nt(ot, () => H.current, []);
+  function L(t, e) {
+    return parseFloat(t) / parseFloat(e);
+  }
+  function W(t, e, n, o) {
+    const s = typeof X == "string" ? L(parseFloat(X), t) : X || 0, a = typeof b == "string" ? L(parseFloat(b), t) : b || 1;
+    let u = l ? -1 : 1;
+    u *= k ? -1 : 1;
+    let A = w ? e + (o - n) * u : L(
+      t * e + (o - n) * u,
+      t
+    );
+    const nt = w ? s * t : s, B = w ? a * t : a;
+    return A = Math.max(A, nt), A = Math.min(A, B), A;
+  }
+  function G(t) {
+    var e, n, o;
+    (e = r.onMovingStart) == null || e.call(r), i.current.moving = !0, i.current.startX = t.pageX, i.current.startY = t.pageY, i.current.startWidth = (n = H.current) == null ? void 0 : n.offsetWidth, i.current.startHeight = (o = H.current) == null ? void 0 : o.offsetHeight, i.current.startOffset = O, $(window, "mousemove", j), $(window, "touchmove", j), $(window, "mouseup", Z), $(window, "touchend", Z), $(window, "contextmenu", Z), document.body.style.cursor = I ? "row-resize" : "col-resize";
+  }
+  function j(t) {
+    var e;
+    if (i.current.moving) {
+      const n = T ? W(
+        i.current.startWidth,
+        i.current.startOffset,
+        i.current.startX,
+        t.pageX
+      ) : W(
+        i.current.startHeight,
+        i.current.startOffset,
+        i.current.startY,
+        t.pageY
+      );
+      f(n), (e = r.onMoving) == null || e.call(r, t, w ? `${n}px` : n);
+    }
+  }
+  function Z() {
+    var t;
+    i.current.moving = !1, y(window, "mousemove", j), y(window, "touchmove", j), y(window, "mouseup", Z), y(window, "touchend", Z), y(window, "contextmenu", Z), document.body.style.cursor = "default", (t = r.onMovingEnd) == null || t.call(r);
+  }
+  function it(t) {
+    const { contentRect: e } = t[0], n = e[I ? "height" : "width"];
+    V(n);
+  }
+  function c() {
+    const t = w ? "px" : "%";
+    return O ? `calc(${w ? O : O * 100}${t} - ${h / 2}px)` : `0${t}`;
+  }
+  lt(() => {
+    var t;
+    (t = r.onPaneResize) == null || t.call(r, _.current);
+  }, [O, h]), _t(() => {
+    const t = parseFloat(N);
+    O !== t && f(t);
+  }, [N]);
+  const v = J, p = /* @__PURE__ */ m(
+    "div",
+    {
+      className: P(`${M}-pane`, "first-pane"),
+      style: { flexBasis: c() },
+      ref: (t) => {
+        _.current[0] = t;
+      },
+      children: U
+    }
+  ), R = /* @__PURE__ */ m(
+    "div",
+    {
+      className: P(`${M}-pane`, "second-pane"),
+      ref: (t) => {
+        _.current[1] = t;
+      },
+      children: tt
+    }
+  ), S = l ? [R, p] : [p, R];
+  return /* @__PURE__ */ ft(v, { style: g, className: E, ref: H, children: [
+    S[0],
+    !rt && /* @__PURE__ */ m(
+      Mt,
+      {
+        className: `${M}-trigger`,
+        direction: I ? dt : Dt,
+        icon: K,
+        onMouseDown: G,
+        onResize: it,
+        children: z
+      }
+    ),
+    S[1]
+  ] });
+}
+const Ht = Ct(Gt);
+Ht.displayName = "ResizeBoxSplit";
+const ht = "horizontal", Et = "vertical";
+function jt(r, ot) {
+  const {
+    panes: g,
+    style: q,
+    className: J,
+    component: x = "div",
+    direction: K = "horizontal",
+    icon: N,
+    ...X
+  } = r, { getPrefixCls: b, rtl: Q } = ut(mt), rt = 1 / g.length, z = F(), d = F(
+    new Array(g.length).fill({
+      moving: !1,
+      startOffset: 0,
+      startPosition: 0
+    })
+  ), D = F([]), M = F(0), T = F([]), [l, k] = st(
+    new Array(g.length).fill(rt)
+  ), [I, E] = st(!1), [U, tt] = st(
+    new Array(g.length).fill(0)
+  ), [w, O] = st(
+    new Array(Math.max(g.length - 1, 0)).fill({ prev: !1, next: !1 })
+  ), f = b("resizebox-split-group"), h = K === ht, V = h && Q, i = !h, H = P(
+    f,
+    `${f}-${h ? ht : Et}`,
+    { [`${f}-moving`]: I },
+    { [`${f}-rtl`]: Q },
+    J
+  ), _ = x, L = () => {
+    let t = [];
+    g.forEach((s) => {
+      const { size: a } = s;
+      Pt(a) ? t.push(void 0) : t.push(G(a));
+    });
+    const e = t.filter((s) => !s), o = (1 - t.reduce((s, a) => (s || 0) + (a || 0), 0)) / e.length;
+    return t = t.map((s) => Pt(s) ? o : s), t;
+  }, W = (t) => {
+    const e = U[t - 1] || 0, n = U[t];
+    return `calc(${l[t] * 100}% - ${(e + n) / 2}px)`;
+  };
+  function G(t) {
+    const e = h ? z.current.offsetWidth : z.current.offsetHeight;
+    if (!t || vt(t) && t < 0)
+      return 0;
+    const n = Lt(t) ? parseFloat(t) / e : t;
+    return Math.min(n, 1);
+  }
+  const j = (t) => {
+    const e = Math.min(t + 1, g.length - 1), n = l[t] + l[e], o = G(g[t].min) || 0;
+    let s = G(g[t].max) || n;
+    const a = G(g[e].min) || 0;
+    let u = G(g[e].max) || n;
+    return s = Math.min(n - a, s), u = Math.min(n - o, u), {
+      currentMin: o,
+      currentMax: s,
+      nextMin: a,
+      nextMax: u
+    };
+  }, Z = (t, e, n) => {
+    const o = M.current, s = o + 1, a = [...l], u = V ? -1 : 1, et = l[o], A = l[s], nt = et + A, { currentMin: B, currentMax: C } = j(o);
+    let Y = t + G(`${(n - e) * u}px`);
+    return Y = Math.max(B, Y), Y = Math.min(C, Y), a[o] = Y, a[s] = nt - Y, a;
+  };
+  function it(t, e) {
+    const { contentRect: n } = t[0], o = n[i ? "height" : "width"], s = [...U];
+    s[e] = o, tt(s);
+  }
+  const c = (t) => {
+    let e = g[t].collapsible;
+    ct(e) || (e = e ? { prev: !0, next: !0 } : {});
+    const { prev: n, next: o } = e;
+    if (!n && !o)
+      return {};
+    if (!w[t])
+      return {};
+    const s = !!n || !n && w[t].next, a = !!o || !o && w[t].prev;
+    return { hasPrev: s, hasNext: a };
+  };
+  function v(t, e) {
+    var o;
+    (o = r.onMovingStart) == null || o.call(r, e), M.current = e;
+    const n = d.current[e];
+    n.moving = !0, n.startOffset = l[e], n.startPosition = h ? t.pageX : t.pageY, E(!0), $(window, "mousemove", p), $(window, "touchmove", p), $(window, "mouseup", R), $(window, "touchend", R), $(window, "contextmenu", R), document.body.style.cursor = i ? "row-resize" : "col-resize";
+  }
+  function p(t) {
+    var s;
+    const e = M.current, n = d.current[e], o = h ? z.current.offsetWidth : z.current.offsetHeight;
+    if (n.moving) {
+      const a = Z(
+        n.startOffset,
+        n.startPosition,
+        h ? t.pageX : t.pageY
+      );
+      k(a), T.current = a, (s = r == null ? void 0 : r.onMoving) == null || s.call(
+        r,
+        t,
+        a.map((u) => `${u * o}px`),
+        e
+      );
+    }
+  }
+  function R() {
+    var e;
+    const t = M.current;
+    d.current[t].moving = !1, E(!1), y(window, "mousemove", p), y(window, "touchmove", p), y(window, "mouseup", R), y(window, "touchend", R), y(window, "contextmenu", R), document.body.style.cursor = "default", (e = r.onMovingEnd) == null || e.call(r, t);
+  }
+  function S(t, e, n, o) {
+    var $t, yt;
+    const s = e + 1, a = [...l], u = l[e], et = l[s], A = u + et, nt = h ? z.current.offsetWidth : z.current.offsetHeight, { currentMin: B, nextMin: C } = j(e);
+    let Y = T.current[e], at = T.current[s], gt = w[e][n];
+    n === "prev" ? (et !== C || at === C) && (Y = B, at = A - B, gt = !0) : (u !== B || Y === B) && (Y = A - C, at = C, gt = !0), a[e] = Y, a[s] = at, ($t = r == null ? void 0 : r.onMoving) == null || $t.call(
+      r,
+      t,
+      a.map((Wt) => `${Wt * nt}px`),
+      e
+    ), (yt = r.onMovingEnd) == null || yt.call(r, e), k(a), wt(o) && o(t, e, n, gt);
+  }
+  return lt(() => {
+    const t = L();
+    k(t), T.current = t;
+  }, [JSON.stringify(g.map((t) => t.size))]), Nt(ot, () => z.current, []), lt(() => {
+    const t = [];
+    l.forEach((e, n) => {
+      const o = { prev: !1, next: !1 }, s = n + 1, { currentMin: a, nextMin: u } = j(n);
+      e === a ? o.prev = !0 : l[s] === u && (o.next = !0), t.push(o);
+    }), O(t);
+  }, [l]), /* @__PURE__ */ m(
+    _,
+    {
+      ...zt(X, [
+        "onMovingStart",
+        "onPaneResize",
+        "onMoving",
+        "onMovingEnd"
+      ]),
+      style: q,
+      className: H,
+      ref: z,
+      children: g.map((t, e) => {
+        const {
+          content: n,
+          disabled: o,
+          trigger: s,
+          resizable: a = !0,
+          collapsible: u = {}
+        } = t, { hasPrev: et, hasNext: A } = c(e), nt = ct(u) && ct(u.prev) ? u.prev : {}, B = ct(u) && ct(u.next) ? u.next : {};
+        return /* @__PURE__ */ ft(Bt.Fragment, { children: [
+          /* @__PURE__ */ m(
+            "div",
+            {
+              className: `${f}-pane`,
+              style: { flexBasis: W(e) },
+              ref: (C) => D.current[e] = C,
+              children: n
+            }
+          ),
+          !o && e !== g.length - 1 && /* @__PURE__ */ m(
+            Mt,
+            {
+              className: `${f}-trigger`,
+              direction: i ? ht : Et,
+              icon: N,
+              onResize: (C) => it(C, e),
+              onMouseDown: (C) => v(C, e),
+              collapsible: {
+                prev: et ? {
+                  onClick: (C) => S(C, e, "prev", nt.onClick),
+                  icon: nt.icon,
+                  collapsed: w[e].prev
+                } : void 0,
+                next: A ? {
+                  onClick: (C) => S(C, e, "next", B.onClick),
+                  icon: B.icon,
+                  collapsed: w[e].next
+                } : void 0
+              },
+              resizable: a,
+              renderChildren: s
+            }
+          )
+        ] }, e);
+      })
+    }
+  );
+}
+const At = Ct(jt);
+At.displayName = "ResizeBoxSplitGroup";
+const Xt = "left", pt = "right", xt = "top", Rt = "bottom", Zt = [
+  Xt,
+  pt,
+  xt,
+  Rt
+], qt = {
   component: "div",
   directions: ["right"],
   resizeIcons: {},
   resizeTriggers: {}
-}, wt = (f) => {
-  switch (f) {
+}, Jt = (r) => {
+  switch (r) {
     case "left":
       return "right";
     case "right":
       return "left";
     default:
-      return f;
+      return r;
   }
 };
-function vt(f, X) {
-  const { getPrefixCls: Y, componentConfig: w, rtl: T } = st(ft), r = at(
-    f,
-    ht,
-    w == null ? void 0 : w.ResizeBox
+function Kt(r, ot) {
+  const { getPrefixCls: g, componentConfig: q, rtl: J } = ut(mt), x = Yt(
+    r,
+    qt,
+    q == null ? void 0 : q.ResizeBox
   ), {
-    style: P,
-    className: k,
-    component: _,
-    directions: C,
-    resizeIcons: A,
-    children: G,
-    resizeTriggers: j,
-    width: F,
-    height: q,
-    ...K
-  } = r, L = T ? C.map((t) => wt(t)) : C, v = Y("resizebox"), U = ut(v, { [`${v}-rtl`]: T }, k), [V, J] = it({}), [I, N] = W(void 0, { value: F }), [H, M] = W(void 0, { value: q }), o = B({
+    style: K,
+    className: N,
+    component: X,
+    directions: b,
+    resizeIcons: Q,
+    children: rt,
+    resizeTriggers: z,
+    width: d,
+    height: D,
+    ...M
+  } = x, T = J ? b.map((c) => Jt(c)) : b, l = g("resizebox"), k = P(l, { [`${l}-rtl`]: J }, N), [I, E] = st({}), [U, tt] = Tt(void 0, { value: d }), [w, O] = Tt(void 0, { value: D }), f = F({
     startX: 0,
     startY: 0,
     startWidth: 0,
     startHeight: 0,
-    direction: b,
+    direction: pt,
     moving: !1,
     padding: {
       top: 0,
@@ -62,120 +435,120 @@ function vt(f, X) {
       left: 0,
       right: 0
     }
-  }), p = B();
-  ct(X, () => p.current, []);
-  function R(t) {
-    return [z, y].indexOf(t) > -1;
-  }
-  function O(t, e) {
-    if (t === 0) return 0;
-    const n = t - e;
-    return n <= 0 ? 0 : n;
-  }
-  function D(t) {
-    const e = "data-pqb-origin-cursor";
-    if (t)
-      document.body.setAttribute(e, document.body.style.cursor), document.body.style.cursor = t;
+  }), h = F();
+  Nt(ot, () => h.current, []);
+  function V(c) {
+    return [xt, Rt].indexOf(c) > -1;
+  }
+  function i(c, v) {
+    if (c === 0) return 0;
+    const p = c - v;
+    return p <= 0 ? 0 : p;
+  }
+  function H(c) {
+    const v = "data-pqb-origin-cursor";
+    if (c)
+      document.body.setAttribute(v, document.body.style.cursor), document.body.style.cursor = c;
     else {
-      const n = document.body.getAttribute(e);
-      document.body.style.cursor = n || "", document.body.removeAttribute(e);
+      const p = document.body.getAttribute(v);
+      document.body.style.cursor = p || "", document.body.removeAttribute(v);
     }
   }
-  function Q(t, e) {
-    var i, m, d;
-    (i = r.onMovingStart) == null || i.call(r), o.current.moving = !0, o.current.startX = e.pageX, o.current.startY = e.pageY, o.current.direction = t;
-    const { top: n, left: c, right: a, bottom: s } = o.current.padding;
-    o.current.startWidth = O(
-      (m = p.current) == null ? void 0 : m.clientWidth,
-      c + a
-    ), o.current.startHeight = O(
-      (d = p.current) == null ? void 0 : d.clientHeight,
-      n + s
-    ), g(window, "mousemove", h), g(window, "touchmove", h), g(window, "mouseup", u), g(window, "touchend", u), g(window, "contextmenu", u), D(
-      R(t) ? "row-resize" : "col-resize"
+  function _(c, v) {
+    var e, n, o;
+    (e = x.onMovingStart) == null || e.call(x), f.current.moving = !0, f.current.startX = v.pageX, f.current.startY = v.pageY, f.current.direction = c;
+    const { top: p, left: R, right: S, bottom: t } = f.current.padding;
+    f.current.startWidth = i(
+      (n = h.current) == null ? void 0 : n.clientWidth,
+      R + S
+    ), f.current.startHeight = i(
+      (o = h.current) == null ? void 0 : o.clientHeight,
+      p + t
+    ), $(window, "mousemove", L), $(window, "touchmove", L), $(window, "mouseup", W), $(window, "touchend", W), $(window, "contextmenu", W), H(
+      V(c) ? "row-resize" : "col-resize"
     );
   }
-  function h(t) {
-    var S;
-    if (!o.current.moving) return !1;
-    const { startX: e, startY: n, startWidth: c, startHeight: a } = o.current;
-    let s = c, i = a;
-    const m = t.pageX - e, d = t.pageY - n;
-    switch (o.current.direction) {
-      case $:
-        s = c - m, N(s);
+  function L(c) {
+    var s;
+    if (!f.current.moving) return !1;
+    const { startX: v, startY: p, startWidth: R, startHeight: S } = f.current;
+    let t = R, e = S;
+    const n = c.pageX - v, o = c.pageY - p;
+    switch (f.current.direction) {
+      case Xt:
+        t = R - n, tt(t);
         break;
-      case b:
-        s = c + m, N(s);
+      case pt:
+        t = R + n, tt(t);
         break;
-      case z:
-        i = a - d, M(i);
+      case xt:
+        e = S - o, O(e);
         break;
-      case y:
-        i = a + d, M(i);
+      case Rt:
+        e = S + o, O(e);
         break;
     }
-    (S = r.onMoving) == null || S.call(r, t, {
-      width: s,
-      height: i
+    (s = x.onMoving) == null || s.call(x, c, {
+      width: t,
+      height: e
     });
   }
-  function u() {
-    var t;
-    o.current.moving = !1, Z(), D(), (t = r.onMovingEnd) == null || t.call(r);
+  function W() {
+    var c;
+    f.current.moving = !1, G(), H(), (c = x.onMovingEnd) == null || c.call(x);
   }
-  function Z() {
-    l(window, "mousemove", h), l(window, "touchmove", h), l(window, "mouseup", u), l(window, "touchend", u), l(window, "contextmenu", u);
+  function G() {
+    y(window, "mousemove", L), y(window, "touchmove", L), y(window, "mouseup", W), y(window, "touchend", W), y(window, "contextmenu", W);
   }
-  function tt(t, e) {
-    const n = R(t), { contentRect: c } = e[0], a = `${t.slice(0, 1).toUpperCase()}${t.slice(1)}`, s = c[n ? "height" : "width"];
-    o.current.padding[t] = s, J((i) => ({
-      ...i,
-      [`padding${a}`]: s
+  function j(c, v) {
+    const p = V(c), { contentRect: R } = v[0], S = `${c.slice(0, 1).toUpperCase()}${c.slice(1)}`, t = R[p ? "height" : "width"];
+    f.current.padding[c] = t, E((e) => ({
+      ...e,
+      [`padding${S}`]: t
     }));
   }
-  const et = {
-    ...V,
-    ...P || {},
-    ...E(I) ? { width: I } : {},
-    ...E(H) ? { height: H } : {}
+  const Z = {
+    ...I,
+    ...K || {},
+    ...vt(U) ? { width: U } : {},
+    ...vt(w) ? { height: w } : {}
   };
-  return /* @__PURE__ */ ot(
-    _,
+  return /* @__PURE__ */ ft(
+    X,
     {
-      ...mt(K, ["onMovingStart", "onMoving", "onMovingEnd"]),
-      style: et,
-      className: U,
-      ref: p,
+      ...zt(M, ["onMovingStart", "onMoving", "onMovingEnd"]),
+      style: Z,
+      className: k,
+      ref: h,
       children: [
-        G,
-        L.map((t) => {
-          if (pt.indexOf(t) !== -1)
-            return /* @__PURE__ */ rt(
-              dt,
+        rt,
+        T.map((c) => {
+          if (Zt.indexOf(c) !== -1)
+            return /* @__PURE__ */ m(
+              Mt,
               {
-                className: `${v}-direction-${t}`,
-                direction: R(t) ? "horizontal" : "vertical",
-                icon: A[t],
-                onMouseDown: (e) => {
-                  Q(t, e);
+                className: `${l}-direction-${c}`,
+                direction: V(c) ? "horizontal" : "vertical",
+                icon: Q[c],
+                onMouseDown: (v) => {
+                  _(c, v);
                 },
-                onResize: (e) => {
-                  tt(t, e);
+                onResize: (v) => {
+                  j(c, v);
                 },
-                children: j[t]
+                children: z[c]
               },
-              t
+              c
             );
         })
       ]
     }
   );
 }
-const Rt = nt(vt), x = Rt;
-x.Split = gt;
-x.SplitGroup = lt;
-x.displayName = "ResizeBox";
+const Qt = Ct(Kt), Ot = Qt;
+Ot.Split = Ht;
+Ot.SplitGroup = At;
+Ot.displayName = "ResizeBox";
 export {
-  x as default
+  Ot as default
 };