react-resizable-panels 4.0.0-alpha.3 → 4.0.0-alpha.4

package/dist/react-resizable-panels.js

@@ -1,78 +1,78 @@
 "use client";
 import { jsx as j } from "react/jsx-runtime";
-import { useId as Te, useLayoutEffect as De, useEffect as Ae, useRef as T, useCallback as ge, createContext as $e, useImperativeHandle as Se, useState as M, useMemo as xe, useSyncExternalStore as Ne, useContext as _e } from "react";
+import { useId as De, useLayoutEffect as Ae, useEffect as $e, useRef as T, useCallback as Se, createContext as Ne, useImperativeHandle as xe, useState as G, useMemo as ze, useSyncExternalStore as _e, useContext as Fe } from "react";
 function S(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
 }
-function re(e, t) {
+function se(e, t) {
   return t.sort(
-    e === "horizontal" ? Fe : He
+    e === "horizontal" ? He : je
   );
 }
-function Fe(e, t) {
+function He(e, t) {
   const n = e.element.offsetLeft - t.element.offsetLeft;
   return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
 }
-function He(e, t) {
+function je(e, t) {
   const n = e.element.offsetTop - t.element.offsetTop;
   return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
-function ze(e) {
-  const { element: t, orientation: n, panels: o, separators: s } = e, r = re(
+function be(e) {
+  const { element: t, orientation: n, panels: o, separators: s } = e, r = se(
     n,
     Array.from(t.children).filter((l) => l instanceof HTMLElement).map((l) => ({ element: l }))
   ).map(({ element: l }) => l), c = [];
   let i, a;
   for (const l of r) {
-    const u = o.find(
-      (f) => f.element === l
+    const f = o.find(
+      (u) => u.element === l
     );
-    if (u) {
+    if (f) {
       if (i) {
-        const f = i.element.getBoundingClientRect(), m = l.getBoundingClientRect();
+        const u = i.element.getBoundingClientRect(), m = l.getBoundingClientRect();
         c.push({
           group: e,
-          panels: [i, u],
+          panels: [i, f],
           separator: a,
           rect: n === "horizontal" ? new DOMRect(
-            f.right,
+            u.right,
             m.top,
-            m.left - f.right,
+            m.left - u.right,
             m.height
           ) : new DOMRect(
             m.left,
-            f.bottom,
+            u.bottom,
             m.width,
-            m.top - f.bottom
+            m.top - u.bottom
           )
         });
       }
-      i = u, a = void 0;
+      i = f, a = void 0;
     } else {
-      const f = s.find(
+      const u = s.find(
         (m) => m.element === l
       );
-      f ? a = f : (i = void 0, a = void 0);
+      u ? a = u : (i = void 0, a = void 0);
     }
   }
   return c;
 }
-function je(e, t) {
+function We(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
   return t * o;
 }
-function We(e, t) {
+function Ue(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function Ue(e) {
+function Be(e) {
   return e / 100 * window.innerHeight;
 }
-function Be(e) {
+function Ke(e) {
   return e / 100 * window.innerWidth;
 }
-function Ke(e) {
+function Ve(e) {
   switch (typeof e) {
     case "number":
       return [e, "px"];
@@ -82,13 +82,13 @@ function Ke(e) {
     }
   }
 }
-function Z({
+function J({
   groupSize: e,
   panelElement: t,
   styleProp: n
 }) {
   let o;
-  const [s, r] = Ke(n);
+  const [s, r] = Ve(n);
   switch (r) {
     case "%": {
       o = s / 100 * e;
@@ -99,72 +99,72 @@ function Z({
       break;
     }
     case "rem": {
-      o = We(t, s);
+      o = Ue(t, s);
       break;
     }
     case "em": {
-      o = je(t, s);
+      o = We(t, s);
       break;
     }
     case "vh": {
-      o = Ue(s);
+      o = Be(s);
       break;
     }
     case "vw": {
-      o = Be(s);
+      o = Ke(s);
       break;
     }
   }
   return o;
 }
-function R(e) {
+function I(e) {
   return parseFloat(e.toFixed(3));
 }
-function le({
+function ce({
   group: e
 }) {
   const { orientation: t, panels: n } = e;
   return n.reduce((o, s) => (o += t === "horizontal" ? s.element.offsetWidth : s.element.offsetHeight, o), 0);
 }
-function pe(e) {
-  const { panels: t } = e, n = le({ group: e });
+function me(e) {
+  const { panels: t } = e, n = ce({ group: e });
   return t.map((o) => {
     const { element: s, panelConstraints: r } = o;
     let c = 0;
     if (r.collapsedSize) {
-      const u = Z({
+      const f = J({
         groupSize: n,
         panelElement: s,
         styleProp: r.collapsedSize
       });
-      c = R(u / n * 100);
+      c = I(f / n * 100);
     }
     let i;
     if (r.defaultSize) {
-      const u = Z({
+      const f = J({
         groupSize: n,
         panelElement: s,
         styleProp: r.defaultSize
       });
-      i = R(u / n * 100);
+      i = I(f / n * 100);
     }
     let a = 0;
     if (r.minSize) {
-      const u = Z({
+      const f = J({
         groupSize: n,
         panelElement: s,
         styleProp: r.minSize
       });
-      a = R(u / n * 100);
+      a = I(f / n * 100);
     }
     let l = 100;
     if (r.maxSize) {
-      const u = Z({
+      const f = J({
         groupSize: n,
         panelElement: s,
         styleProp: r.maxSize
       });
-      l = R(u / n * 100);
+      l = I(f / n * 100);
     }
     return {
       collapsedSize: c,
@@ -176,7 +176,7 @@ function pe(e) {
     };
   });
 }
-class Ve {
+class qe {
   #e = {};
   addListener(t, n) {
     const o = this.#e[t];
@@ -215,37 +215,37 @@ class Ve {
     }
   }
 }
-function L(e, t, n = 0) {
-  return Math.abs(R(e) - R(t)) <= n;
+function w(e, t, n = 0) {
+  return Math.abs(I(e) - I(t)) <= n;
 }
-let P = {
+let C = {
   cursorFlags: 0,
   interactionState: {
     state: "inactive"
   },
   mountedGroups: /* @__PURE__ */ new Map()
 };
-const A = new Ve();
-function k() {
-  return P;
+const A = new qe();
+function O() {
+  return C;
 }
-function E(e) {
-  const t = typeof e == "function" ? e(P) : e;
-  if (P === t)
-    return P;
-  const n = P;
-  return P = {
-    ...P,
+function M(e) {
+  const t = typeof e == "function" ? e(C) : e;
+  if (C === t)
+    return C;
+  const n = C;
+  return C = {
+    ...C,
     ...t
-  }, t.cursorFlags !== void 0 && A.emit("cursorFlagsChange", P.cursorFlags), t.interactionState !== void 0 && A.emit("interactionStateChange", P.interactionState), t.mountedGroups !== void 0 && (P.mountedGroups.forEach((o, s) => {
+  }, t.cursorFlags !== void 0 && A.emit("cursorFlagsChange", C.cursorFlags), t.interactionState !== void 0 && A.emit("interactionStateChange", C.interactionState), t.mountedGroups !== void 0 && (C.mountedGroups.forEach((o, s) => {
     o.derivedPanelConstraints.forEach((r) => {
       if (r.collapsible) {
         const { layout: c } = n.mountedGroups.get(s) ?? {};
         if (c) {
-          const i = L(
+          const i = w(
             r.collapsedSize,
             o.layout[r.panelId]
-          ), a = L(
+          ), a = w(
             r.collapsedSize,
             c[r.panelId]
           );
@@ -253,9 +253,9 @@ function E(e) {
         }
       }
     });
-  }), A.emit("mountedGroupsChange", P.mountedGroups)), P;
+  }), A.emit("mountedGroupsChange", C.mountedGroups)), C;
 }
-function qe(e, t) {
+function Xe(e, t) {
   if (e.length !== t.length)
     return !1;
   for (let n = 0; n < e.length; n++)
@@ -264,7 +264,7 @@ function qe(e, t) {
   return !0;
 }
 function W(e, t) {
-  return L(e, t) ? 0 : e > t ? 1 : -1;
+  return w(e, t) ? 0 : e > t ? 1 : -1;
 }
 function F({
   panelConstraints: e,
@@ -282,7 +282,7 @@ function F({
       W(t, c) < 0 ? t = n : t = r;
     } else
       t = r;
-  return t = Math.min(s, t), t = R(t), t;
+  return t = Math.min(s, t), t = I(t), t;
 }
 function U({
   delta: e,
@@ -292,51 +292,51 @@ function U({
   prevLayout: s,
   trigger: r
 }) {
-  if (L(e, 0))
+  if (w(e, 0))
     return t;
-  const c = Object.values(t), i = Object.values(s), a = [...c], [l, u] = o;
-  S(l != null, "Invalid first pivot index"), S(u != null, "Invalid second pivot index");
-  let f = 0;
+  const c = Object.values(t), i = Object.values(s), a = [...c], [l, f] = o;
+  S(l != null, "Invalid first pivot index"), S(f != null, "Invalid second pivot index");
+  let u = 0;
   if (r === "keyboard") {
     {
-      const p = e < 0 ? u : l, d = n[p];
+      const d = e < 0 ? f : l, p = n[d];
       S(
-        d,
-        `Panel constraints not found for index ${p}`
+        p,
+        `Panel constraints not found for index ${d}`
       );
       const {
         collapsedSize: h = 0,
-        collapsible: y,
+        collapsible: v,
         minSize: z = 0
-      } = d;
-      if (y) {
-        const x = c[p];
+      } = p;
+      if (v) {
+        const x = c[d];
         if (S(
           x != null,
-          `Previous layout not found for panel index ${p}`
-        ), L(x, h)) {
+          `Previous layout not found for panel index ${d}`
+        ), w(x, h)) {
           const g = z - x;
           W(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
     {
-      const p = e < 0 ? l : u, d = n[p];
+      const d = e < 0 ? l : f, p = n[d];
       S(
-        d,
-        `No panel constraints found for index ${p}`
+        p,
+        `No panel constraints found for index ${d}`
       );
       const {
         collapsedSize: h = 0,
-        collapsible: y,
+        collapsible: v,
         minSize: z = 0
-      } = d;
-      if (y) {
-        const x = c[p];
+      } = p;
+      if (v) {
+        const x = c[d];
         if (S(
           x != null,
-          `Previous layout not found for panel index ${p}`
-        ), L(x, z)) {
+          `Previous layout not found for panel index ${d}`
+        ), w(x, z)) {
           const g = x - h;
           W(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
@@ -344,86 +344,86 @@ function U({
     }
   }
   {
-    const p = e < 0 ? 1 : -1;
-    let d = e < 0 ? u : l, h = 0;
+    const d = e < 0 ? 1 : -1;
+    let p = e < 0 ? f : l, h = 0;
     for (; ; ) {
-      const z = c[d];
+      const z = c[p];
       S(
         z != null,
-        `Previous layout not found for panel index ${d}`
+        `Previous layout not found for panel index ${p}`
       );
       const g = F({
-        panelConstraints: n[d],
+        panelConstraints: n[p],
         size: 100
       }) - z;
-      if (h += g, d += p, d < 0 || d >= n.length)
+      if (h += g, p += d, p < 0 || p >= n.length)
         break;
     }
-    const y = Math.min(Math.abs(e), Math.abs(h));
-    e = e < 0 ? 0 - y : y;
+    const v = Math.min(Math.abs(e), Math.abs(h));
+    e = e < 0 ? 0 - v : v;
   }
   {
-    let d = e < 0 ? l : u;
-    for (; d >= 0 && d < n.length; ) {
-      const h = Math.abs(e) - Math.abs(f), y = c[d];
+    let p = e < 0 ? l : f;
+    for (; p >= 0 && p < n.length; ) {
+      const h = Math.abs(e) - Math.abs(u), v = c[p];
       S(
-        y != null,
-        `Previous layout not found for panel index ${d}`
+        v != null,
+        `Previous layout not found for panel index ${p}`
       );
-      const z = y - h, x = F({
-        panelConstraints: n[d],
+      const z = v - h, x = F({
+        panelConstraints: n[p],
         size: z
       });
-      if (!L(y, x) && (f += y - x, a[d] = x, f.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!w(v, x) && (u += v - x, a[p] = x, u.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
-      e < 0 ? d-- : d++;
+      e < 0 ? p-- : p++;
     }
   }
-  if (qe(i, a))
+  if (Xe(i, a))
     return s;
   {
-    const p = e < 0 ? u : l, d = c[p];
+    const d = e < 0 ? f : l, p = c[d];
     S(
-      d != null,
-      `Previous layout not found for panel index ${p}`
+      p != null,
+      `Previous layout not found for panel index ${d}`
     );
-    const h = d + f, y = F({
-      panelConstraints: n[p],
+    const h = p + u, v = F({
+      panelConstraints: n[d],
       size: h
     });
-    if (a[p] = y, !L(y, h)) {
-      let z = h - y, g = e < 0 ? u : l;
+    if (a[d] = v, !w(v, h)) {
+      let z = h - v, g = e < 0 ? f : l;
       for (; g >= 0 && g < n.length; ) {
-        const w = a[g];
+        const L = a[g];
         S(
-          w != null,
+          L != null,
           `Previous layout not found for panel index ${g}`
         );
-        const G = w + z, O = F({
+        const P = L + z, E = F({
           panelConstraints: n[g],
-          size: G
+          size: P
         });
-        if (L(w, O) || (z -= O - w, a[g] = O), L(z, 0))
+        if (w(L, E) || (z -= E - L, a[g] = E), w(z, 0))
           break;
         e > 0 ? g-- : g++;
       }
     }
   }
   const m = Object.values(a).reduce(
-    (p, d) => d + p,
+    (d, p) => p + d,
     0
   );
-  if (!L(m, 100, 0.1))
+  if (!w(m, 100, 0.1))
     return s;
-  const v = Object.keys(s);
-  return a.reduce((p, d, h) => (p[v[h]] = d, p), {});
+  const y = Object.keys(s);
+  return a.reduce((d, p, h) => (d[y[h]] = p, d), {});
 }
-function ee(e) {
+function te(e) {
   const t = e.parentElement;
   S(t, "Parent group element not found");
-  const { mountedGroups: n } = k();
+  const { mountedGroups: n } = O();
   for (const [o] of n)
     if (o.element === t)
       return o;
@@ -449,7 +449,7 @@ function $({
     throw Error(
       `Invalid ${t.length} panel layout: ${o.map((i) => `${i}%`).join(", ")}`
     );
-  if (!L(s, 100) && o.length > 0)
+  if (!w(s, 100) && o.length > 0)
     for (let i = 0; i < t.length; i++) {
       const a = o[i];
       S(a != null, `No layout data found for index ${i}`);
@@ -466,25 +466,25 @@ function $({
     });
     a != l && (r += a - l, o[i] = l);
   }
-  if (!L(r, 0))
+  if (!w(r, 0))
     for (let i = 0; i < t.length; i++) {
       const a = o[i];
       S(a != null, `No layout data found for index ${i}`);
-      const l = a + r, u = F({
+      const l = a + r, f = F({
         panelConstraints: t[i],
         size: l
       });
-      if (a !== u && (r -= u - a, o[i] = u, L(r, 0)))
+      if (a !== f && (r -= f - a, o[i] = f, w(r, 0)))
         break;
     }
   const c = Object.keys(e);
   return o.reduce((i, a, l) => (i[c[l]] = a, i), {});
 }
-function be({
+function we({
   groupId: e
 }) {
   const t = () => {
-    const { mountedGroups: n } = k();
+    const { mountedGroups: n } = O();
     for (const [o, s] of n)
       if (o.id === e)
         return { group: o, ...s };
@@ -505,7 +505,7 @@ function be({
         layout: n,
         panelConstraints: o
       });
-      return B(r, i) || E((a) => ({
+      return B(r, i) || M((a) => ({
         mountedGroups: new Map(a.mountedGroups).set(s, {
           derivedPanelConstraints: o,
           layout: i,
@@ -515,40 +515,40 @@ function be({
     }
   };
 }
-function we(e) {
-  const { mountedGroups: t } = k(), n = t.get(e);
+function Le(e) {
+  const { mountedGroups: t } = O(), n = t.get(e);
   return S(n, `Mounted Group ${e.id} not found`), n;
 }
 function D(e, t) {
-  const n = ee(e), o = we(n), s = n.separators.find(
-    (f) => f.element === e
+  const n = te(e), o = Le(n), s = n.separators.find(
+    (u) => u.element === e
   );
   S(s, "Matching separator not found");
   const r = o.separatorToPanels.get(s);
   S(r, "Matching panels not found");
-  const c = r.map((f) => n.panels.indexOf(f)), a = be({ groupId: n.id }).getLayout(), l = U({
+  const c = r.map((u) => n.panels.indexOf(u)), a = we({ groupId: n.id }).getLayout(), l = U({
     delta: t,
     initialLayout: a,
     panelConstraints: o.derivedPanelConstraints,
     pivotIndices: c,
     prevLayout: a,
     trigger: "keyboard"
-  }), u = $({
+  }), f = $({
     layout: l,
     panelConstraints: o.derivedPanelConstraints
   });
-  B(a, u) || E((f) => ({
-    mountedGroups: new Map(f.mountedGroups).set(n, {
+  B(a, f) || M((u) => ({
+    mountedGroups: new Map(u.mountedGroups).set(n, {
       derivedPanelConstraints: o.derivedPanelConstraints,
-      layout: u,
+      layout: f,
       separatorToPanels: o.separatorToPanels
     })
   }));
 }
-function me(e) {
+function he(e) {
   if (e.defaultPrevented)
     return;
-  const t = e.currentTarget, n = ee(t);
+  const t = e.currentTarget, n = te(t);
   if (!n.disabled)
     switch (e.key) {
       case "ArrowDown": {
@@ -573,24 +573,24 @@ function me(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = ee(t), { derivedPanelConstraints: s, layout: r, separatorToPanels: c } = we(o), i = o.separators.find(
-          (f) => f.element === t
+        const o = te(t), { derivedPanelConstraints: s, layout: r, separatorToPanels: c } = Le(o), i = o.separators.find(
+          (u) => u.element === t
         );
         S(i, "Matching separator not found");
         const a = c.get(i);
         S(a, "Matching panels not found");
-        const l = a[0], u = s.find(
-          (f) => f.panelId === l.id
+        const l = a[0], f = s.find(
+          (u) => u.panelId === l.id
         );
-        if (S(u, "Panel metadata not found"), u.collapsible) {
-          const f = r[l.id], m = u.collapsedSize === f ? o.inMemoryLastExpandedPanelSizes[l.id] ?? u.minSize : u.collapsedSize;
-          D(t, m - f);
+        if (S(f, "Panel metadata not found"), f.collapsible) {
+          const u = r[l.id], m = f.collapsedSize === u ? o.inMemoryLastExpandedPanelSizes[l.id] ?? f.minSize : f.collapsedSize;
+          D(t, m - u);
         }
         break;
       }
       case "F6": {
         e.preventDefault();
-        const s = ee(t).separators.map(
+        const s = te(t).separators.map(
           (a) => a.element
         ), r = Array.from(s).findIndex(
           (a) => a === e.currentTarget
@@ -606,12 +606,12 @@ function me(e) {
       }
     }
 }
-const Xe = (e) => e, oe = () => {
-}, Le = 1, Pe = 2, Ee = 4, Ce = 8, he = {
+const Ye = (e) => e, ie = () => {
+}, Pe = 1, Ee = 2, Ce = 4, Me = 8, ve = {
   coarse: 10,
   precise: 5
 };
-function Ye(e, t) {
+function Ze(e, t) {
   return {
     x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
       Math.abs(e.x - t.left),
@@ -623,13 +623,13 @@ function Ye(e, t) {
     )
   };
 }
-function Ze(e, t, n) {
+function Je(e, t, n) {
   let o, s = {
     x: 1 / 0,
     y: 1 / 0
   };
   for (const r of t) {
-    const c = Ye(n, r.rect);
+    const c = Ze(n, r.rect);
     switch (e) {
       case "horizontal": {
         c.x <= s.x && (o = r, s = c);
@@ -646,33 +646,33 @@ function Ze(e, t, n) {
     hitRegion: o
   } : void 0;
 }
-let J;
-function Je() {
-  return J === void 0 && (typeof matchMedia == "function" ? J = !!matchMedia("(pointer:coarse)").matches : J = !1), J;
+let Q;
+function Qe() {
+  return Q === void 0 && (typeof matchMedia == "function" ? Q = !!matchMedia("(pointer:coarse)").matches : Q = !1), Q;
 }
-function Me(e, t) {
+function Re(e, t) {
   const n = [];
   return t.forEach((o, s) => {
     if (s.disabled)
       return;
-    const r = Je() ? he.coarse : he.precise, c = ze(s), i = Ze(s.orientation, c, {
+    const r = Qe() ? ve.coarse : ve.precise, c = be(s), i = Je(s.orientation, c, {
       x: e.clientX,
       y: e.clientY
     });
     i && i.distance.x <= r && i.distance.y <= r && n.push(i.hitRegion);
   }), n;
 }
-function ve(e) {
+function ye(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = k(), n = Me(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map();
+  const { mountedGroups: t } = O(), n = Re(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map();
   n.forEach((i) => {
     o.add(i.group), i.panels.forEach((l) => {
       s.add(l);
     }), i.separator && r.add(i.separator);
     const a = t.get(i.group);
     a && c.set(i.group, a.layout);
-  }), E({
+  }), M({
     interactionState: {
       hitRegions: n,
       initialLayoutMap: c,
@@ -681,7 +681,7 @@ function ve(e) {
     }
   }), n.length && e.preventDefault();
 }
-function Qe({
+function et({
   cursorFlags: e,
   groups: t,
   state: n
@@ -708,7 +708,7 @@ function Qe({
     return null;
   switch (n) {
     case "active": {
-      const r = (e & Le) !== 0, c = (e & Pe) !== 0, i = (e & Ee) !== 0, a = (e & Ce) !== 0;
+      const r = (e & Pe) !== 0, c = (e & Ee) !== 0, i = (e & Ce) !== 0, a = (e & Me) !== 0;
       if (e) {
         if (r)
           return i ? "se-resize" : a ? "ne-resize" : "e-resize";
@@ -724,40 +724,40 @@ function Qe({
   }
   return o > 0 && s > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
-let ie = null, I;
-function se() {
-  I === void 0 && (I = new CSSStyleSheet(), document.adoptedStyleSheets = [I]);
-  const { cursorFlags: e, interactionState: t } = k();
+let re = null, k;
+function ae() {
+  k === void 0 && (k = new CSSStyleSheet(), document.adoptedStyleSheets = [k]);
+  const { cursorFlags: e, interactionState: t } = O();
   switch (t.state) {
     case "active":
     case "hover": {
-      const n = Qe({
+      const n = et({
         cursorFlags: e,
         groups: t.hitRegions.map((o) => o.group),
         state: t.state
       });
-      if (ie === n)
+      if (re === n)
         return;
-      ie = n, n ? I.cssRules.length === 0 ? I.insertRule(`*{cursor: ${n} !important;}`) : I.replaceSync(`*{cursor: ${n} !important;}`) : I.cssRules.length === 1 && I.deleteRule(0);
+      re = n, n ? k.cssRules.length === 0 ? k.insertRule(`*{cursor: ${n} !important;}`) : k.replaceSync(`*{cursor: ${n} !important;}`) : k.cssRules.length === 1 && k.deleteRule(0);
       break;
     }
     case "inactive": {
-      ie = null, I.cssRules.length === 1 && I.deleteRule(0);
+      re = null, k.cssRules.length === 1 && k.deleteRule(0);
       break;
     }
   }
 }
-function Q(e) {
+function ee(e) {
   if (e.defaultPrevented)
     return;
-  const { interactionState: t, mountedGroups: n } = k();
+  const { interactionState: t, mountedGroups: n } = O();
   switch (t.state) {
     case "active": {
       if (
         // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
         e.type !== "pointerleave" && e.buttons === 0
       ) {
-        E(
+        M(
           (r) => r.interactionState.state === "inactive" ? r : {
             cursorFlags: 0,
             interactionState: {
@@ -771,110 +771,110 @@ function Q(e) {
       const s = new Map(n);
       t.hitRegions.forEach((r) => {
         const { disableCursor: c, element: i, orientation: a, panels: l } = r.group;
-        let u = 0;
-        t.state === "active" && (a === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / i.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / i.offsetHeight * 100);
-        const f = t.initialLayoutMap.get(
+        let f = 0;
+        t.state === "active" && (a === "horizontal" ? f = (e.clientX - t.pointerDownAtPoint.x) / i.offsetWidth * 100 : f = (e.clientY - t.pointerDownAtPoint.y) / i.offsetHeight * 100);
+        const u = t.initialLayoutMap.get(
           r.group
         ), {
           derivedPanelConstraints: m,
-          layout: v,
-          separatorToPanels: p
+          layout: y,
+          separatorToPanels: d
         } = n.get(r.group) ?? {};
-        if (m && f && v && p) {
-          const d = U({
-            delta: u,
-            initialLayout: f,
+        if (m && u && y && d) {
+          const p = U({
+            delta: f,
+            initialLayout: u,
             panelConstraints: m,
             pivotIndices: r.panels.map((h) => l.indexOf(h)),
-            prevLayout: v,
+            prevLayout: y,
             trigger: "mouse-or-touch"
           });
-          if (B(d, v)) {
-            if (u !== 0 && !c)
+          if (B(p, y)) {
+            if (f !== 0 && !c)
               switch (a) {
                 case "horizontal": {
-                  o |= u < 0 ? Le : Pe;
+                  o |= f < 0 ? Pe : Ee;
                   break;
                 }
                 case "vertical": {
-                  o |= u < 0 ? Ee : Ce;
+                  o |= f < 0 ? Ce : Me;
                   break;
                 }
               }
           } else {
             s.set(r.group, {
               derivedPanelConstraints: m,
-              layout: d,
-              separatorToPanels: p
+              layout: p,
+              separatorToPanels: d
             });
-            const h = r.group.panels.map(({ id: y }) => y).join(",");
-            r.group.inMemoryLayouts[h] = d;
+            const h = r.group.panels.map(({ id: v }) => v).join(",");
+            r.group.inMemoryLayouts[h] = p;
           }
         }
-      }), E({
+      }), M({
         cursorFlags: o,
         mountedGroups: s
-      }), se();
+      }), ae();
       break;
     }
     default: {
-      const o = Me(e, n);
-      o.length === 0 ? t.state !== "inactive" && E({
+      const o = Re(e, n);
+      o.length === 0 ? t.state !== "inactive" && M({
         interactionState: { state: "inactive" }
-      }) : E({
+      }) : M({
         interactionState: {
           hitRegions: o,
           state: "hover"
         }
-      }), se();
+      }), ae();
       break;
     }
   }
 }
-function ye(e) {
+function ge(e) {
   if (e.defaultPrevented)
     return;
   e.preventDefault();
-  const { interactionState: t } = k();
+  const { interactionState: t } = O();
   switch (t.state) {
     case "active":
-      E({
+      M({
         cursorFlags: 0,
         interactionState: {
           state: "inactive"
         }
-      }), se();
+      }), ae();
   }
 }
-function et(e) {
+function tt(e) {
   let t = 0, n = 0;
   const o = {};
   for (const r of e)
     if (r.defaultSize !== void 0) {
       t++;
-      const c = R(r.defaultSize);
+      const c = I(r.defaultSize);
       n += c, o[r.panelId] = c;
     } else
       o[r.panelId] = void 0;
   const s = e.length - t;
   if (s !== 0) {
-    const r = R((100 - n) / s);
+    const r = I((100 - n) / s);
     for (const c of e)
       c.defaultSize === void 0 && (o[c.panelId] = r);
   }
   return o;
 }
-function tt(e, t, n) {
+function nt(e, t, n) {
   const o = n[0];
   if (!o)
     return;
   const s = e.panels.find((c) => c.element === t);
   if (!s || !s.onResize)
     return;
-  const r = le({ group: e });
+  const r = ce({ group: e });
   s.onResize(
     {
-      asPercentage: R(
+      asPercentage: I(
         o.inlineSize / r * 100
       ),
       inPixels: o.inlineSize
@@ -882,45 +882,45 @@ function tt(e, t, n) {
     s.id
   );
 }
-function nt(e) {
+function ot(e) {
   let t = !0;
   S(
     e.separators.length === 0 || e.separators.length < e.panels.length,
     "Invalid Group configuration; too many Separator components"
   );
-  const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = new ResizeObserver((f) => {
-    for (const m of f) {
-      const { borderBoxSize: v, target: p } = m;
-      p === e.element ? t && E((d) => {
-        const h = d.mountedGroups.get(e);
+  const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = new ResizeObserver((u) => {
+    for (const m of u) {
+      const { borderBoxSize: y, target: d } = m;
+      d === e.element ? t && M((p) => {
+        const h = p.mountedGroups.get(e);
         if (h) {
-          const y = pe(e), z = h.layout, x = $({
+          const v = me(e), z = h.layout, x = $({
             layout: z,
-            panelConstraints: y
+            panelConstraints: v
           });
           return {
-            mountedGroups: new Map(d.mountedGroups).set(e, {
-              derivedPanelConstraints: y,
+            mountedGroups: new Map(p.mountedGroups).set(e, {
+              derivedPanelConstraints: v,
               layout: x,
               separatorToPanels: h.separatorToPanels
             })
           };
         }
-        return d;
-      }) : tt(e, p, v);
+        return p;
+      }) : nt(e, d, y);
     }
   });
-  s.observe(e.element), e.panels.forEach((f) => {
+  s.observe(e.element), e.panels.forEach((u) => {
     S(
-      !n.has(f.id),
-      `Panel ids must be unique; id "${f.id}" was used more than once`
-    ), n.add(f.id), f.onResize && s.observe(f.element);
+      !n.has(u.id),
+      `Panel ids must be unique; id "${u.id}" was used more than once`
+    ), n.add(u.id), u.onResize && s.observe(u.element);
   });
-  const r = pe(e), c = e.panels.map(({ id: f }) => f).join(","), i = e.inMemoryLayouts[c] ?? e.defaultLayout ?? et(r), a = $({
+  const r = me(e), c = e.panels.map(({ id: u }) => u).join(","), i = e.inMemoryLayouts[c] ?? e.defaultLayout ?? tt(r), a = $({
     layout: i,
     panelConstraints: r
-  }), l = ze(e), u = E((f) => ({
-    mountedGroups: new Map(f.mountedGroups).set(e, {
+  }), l = be(e), f = M((u) => ({
+    mountedGroups: new Map(u.mountedGroups).set(e, {
       derivedPanelConstraints: r,
       layout: a,
       separatorToPanels: new Map(
@@ -928,35 +928,35 @@ function nt(e) {
       )
     })
   }));
-  return e.separators.forEach((f) => {
+  return e.separators.forEach((u) => {
     S(
-      !o.has(f.id),
-      `Separator ids must be unique; id "${f.id}" was used more than once`
-    ), o.add(f.id), f.element.addEventListener("keydown", me);
-  }), u.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ve), window.addEventListener("pointerleave", Q), window.addEventListener("pointermove", Q), window.addEventListener("pointerup", ye)), function() {
+      !o.has(u.id),
+      `Separator ids must be unique; id "${u.id}" was used more than once`
+    ), o.add(u.id), u.element.addEventListener("keydown", he);
+  }), f.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ye), window.addEventListener("pointerleave", ee), window.addEventListener("pointermove", ee), window.addEventListener("pointerup", ge)), function() {
     t = !1;
-    const m = E((v) => {
-      const p = new Map(v.mountedGroups);
-      return p.delete(e), { mountedGroups: p };
+    const m = M((y) => {
+      const d = new Map(y.mountedGroups);
+      return d.delete(e), { mountedGroups: d };
     });
-    e.separators.forEach((v) => {
-      v.element.removeEventListener("keydown", me);
-    }), m.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ve), window.removeEventListener("pointerleave", Q), window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", ye)), s.disconnect();
+    e.separators.forEach((y) => {
+      y.element.removeEventListener("keydown", he);
+    }), m.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ye), window.removeEventListener("pointerleave", ee), window.removeEventListener("pointermove", ee), window.removeEventListener("pointerup", ge)), s.disconnect();
   };
 }
-function ce(e) {
-  const t = Te();
+function ue(e) {
+  const t = De();
   return `${e ?? t}`;
 }
-const H = typeof window < "u" ? De : Ae;
-function ue(e) {
+const H = typeof window < "u" ? Ae : $e;
+function fe(e) {
   const t = T(e);
   return H(() => {
     t.current = e;
-  }, [e]), ge((n) => t.current?.(n), [t]);
+  }, [e]), Se((n) => t.current?.(n), [t]);
 }
-function fe(...e) {
-  return ue((t) => {
+function de(...e) {
+  return fe((t) => {
     e.forEach((n) => {
       if (n)
         switch (typeof n) {
@@ -972,25 +972,25 @@ function fe(...e) {
     });
   });
 }
-const Re = "--react-resizable-panels--panel--pointer-events";
-function Ge(e, t) {
+const Ge = "--react-resizable-panels--panel--pointer-events";
+function Ie(e, t) {
   const n = e.replace(/[^a-zA-Z0-9\-_]/g, ""), o = t.replace(/[^a-zA-Z0-9\-_]/g, "");
   return `--react-resizable-panels--${n}--${o}`;
 }
-const Ie = $e(null);
-function ot(e, t) {
+const ke = Ne(null);
+function it(e, t) {
   const n = T({
     getLayout: () => ({}),
-    setLayout: Xe
+    setLayout: Ye
   });
-  Se(t, () => n.current, []), H(() => {
+  xe(t, () => n.current, []), H(() => {
     Object.assign(
       n.current,
-      be({ groupId: e })
+      we({ groupId: e })
     );
   });
 }
-function ft({
+function dt({
   children: e,
   className: t,
   defaultLayout: n,
@@ -1001,52 +1001,53 @@ function ft({
   id: i,
   onLayoutChange: a,
   orientation: l = "horizontal",
-  style: u
+  style: f,
+  ...u
 }) {
-  const f = T({}), m = ue((b) => {
-    B(f.current, b) || (f.current = b, a?.(b));
-  }), v = ce(i), [p, d] = M(!1), [h, y] = M(null), [z, x] = M(n ?? {}), [g, w] = M([]), [G, O] = M([]), te = T({}), K = T({}), V = fe(y, r);
-  ot(v, c);
-  const q = xe(
+  const m = T({}), y = fe((b) => {
+    B(m.current, b) || (m.current = b, a?.(b));
+  }), d = ue(i), [p, h] = G(!1), [v, z] = G(null), [x, g] = G(n ?? {}), [L, P] = G([]), [E, K] = G([]), ne = T({}), V = T({}), q = de(z, r);
+  it(d, c);
+  const X = ze(
     () => ({
-      id: v,
+      id: d,
       orientation: l,
-      registerPanel: (b) => (w((C) => re(l, [...C, b])), () => {
-        w((C) => C.filter((N) => N !== b));
+      registerPanel: (b) => (P((R) => se(l, [...R, b])), () => {
+        P((R) => R.filter((N) => N !== b));
       }),
-      registerSeparator: (b) => (O(
-        (C) => re(l, [...C, b])
+      registerSeparator: (b) => (K(
+        (R) => se(l, [...R, b])
       ), () => {
-        O(
-          (C) => C.filter((N) => N !== b)
+        K(
+          (R) => R.filter((N) => N !== b)
         );
       })
     }),
-    [v, l]
+    [d, l]
   );
   H(() => {
-    if (h !== null && g.length > 0) {
+    if (v !== null && L.length > 0) {
       const b = {
         defaultLayout: n,
         disableCursor: !!o,
         disabled: !!s,
-        element: h,
-        id: v,
-        inMemoryLastExpandedPanelSizes: te.current,
-        inMemoryLayouts: K.current,
+        element: v,
+        id: d,
+        inMemoryLastExpandedPanelSizes: ne.current,
+        inMemoryLayouts: V.current,
         orientation: l,
-        panels: g,
-        separators: G
-      }, C = nt(b), ne = k().mountedGroups.get(b);
-      ne && (x(ne.layout), m?.(ne.layout));
-      const ke = A.addListener(
+        panels: L,
+        separators: E
+      }, R = ot(b), oe = O().mountedGroups.get(b);
+      oe && (g(oe.layout), y?.(oe.layout));
+      const Oe = A.addListener(
         "interactionStateChange",
-        (Y) => {
-          switch (Y.state) {
+        (Z) => {
+          switch (Z.state) {
             case "active":
             case "hover": {
-              d(
-                Y.hitRegions.some(
+              h(
+                Z.hitRegions.some(
                   (_) => _.group === b
                 )
               );
@@ -1054,46 +1055,48 @@ function ft({
             }
           }
         }
-      ), Oe = A.addListener(
+      ), Te = A.addListener(
         "mountedGroupsChange",
-        (Y) => {
-          const _ = Y.get(b);
-          _ && _.derivedPanelConstraints.length > 0 && (x(_.layout), m?.(_.layout));
+        (Z) => {
+          const _ = Z.get(b);
+          _ && _.derivedPanelConstraints.length > 0 && (g(_.layout), y?.(_.layout));
         }
       );
       return () => {
-        C(), ke(), Oe();
+        R(), Oe(), Te();
       };
     }
   }, [
     n,
     o,
     s,
-    h,
     v,
-    m,
+    d,
+    y,
     l,
-    g,
-    G
+    L,
+    E
   ]);
-  const X = {
-    [Re]: p ? "none" : void 0
+  const Y = {
+    [Ge]: p ? "none" : void 0
   };
-  for (const b in z) {
-    const C = Ge(v, b), N = z[b];
-    X[C] = N;
+  for (const b in x) {
+    const R = Ie(d, b), N = x[b];
+    Y[R] = N;
   }
-  return /* @__PURE__ */ j(Ie.Provider, { value: q, children: /* @__PURE__ */ j(
+  return /* @__PURE__ */ j(ke.Provider, { value: X, children: /* @__PURE__ */ j(
     "div",
     {
+      ...u,
       "aria-orientation": l,
       className: t,
       "data-group": !0,
-      "data-testid": i ?? void 0,
-      ref: V,
+      "data-testid": d,
+      id: d,
+      ref: q,
       style: {
-        ...u,
-        ...X,
+        ...f,
+        ...Y,
         display: "flex",
         flexDirection: l === "horizontal" ? "row" : "column",
         flexWrap: "nowrap"
@@ -1102,34 +1105,34 @@ function ft({
     }
   ) });
 }
-function ae(e) {
+function le(e) {
   return `react-resizable-panels:${e}`;
 }
-function it({
+function rt({
   id: e,
   layout: t,
   storage: n
 }) {
   try {
-    const o = ae(e);
+    const o = le(e);
     n.setItem(o, JSON.stringify(t));
   } catch (o) {
     console.error(o);
   }
 }
-function dt({
+function pt({
   groupId: e,
   storage: t
 }) {
-  const n = Ne(
-    rt,
-    () => t.getItem(ae(e)),
-    () => t.getItem(ae(e))
-  ), o = xe(
+  const n = _e(
+    st,
+    () => t.getItem(le(e)),
+    () => t.getItem(le(e))
+  ), o = ze(
     () => n ? JSON.parse(n) : null,
     [n]
-  ), s = ge(
-    (r) => it({
+  ), s = Se(
+    (r) => rt({
       id: e,
       layout: r,
       storage: t
@@ -1141,35 +1144,35 @@ function dt({
     onLayoutChange: s
   };
 }
-function rt() {
+function st() {
   return function() {
   };
 }
-function pt() {
-  return M(null);
-}
 function mt() {
+  return G(null);
+}
+function ht() {
   return T(null);
 }
-function de() {
-  const e = _e(Ie);
+function pe() {
+  const e = Fe(ke);
   return S(
     e,
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
   ), e;
 }
-function st({
+function at({
   groupId: e,
   panelId: t
 }) {
   const n = () => {
-    const { mountedGroups: i } = k();
+    const { mountedGroups: i } = O();
     for (const [
       a,
-      { derivedPanelConstraints: l, layout: u, separatorToPanels: f }
+      { derivedPanelConstraints: l, layout: f, separatorToPanels: u }
     ] of i)
       if (a.id === e)
-        return { derivedPanelConstraints: l, group: a, layout: u, separatorToPanels: f };
+        return { derivedPanelConstraints: l, group: a, layout: f, separatorToPanels: u };
     throw Error(`Group ${e} not found`);
   }, o = () => {
     const i = n().derivedPanelConstraints.find(
@@ -1194,22 +1197,22 @@ function st({
       return;
     const {
       derivedPanelConstraints: l,
-      group: u,
-      layout: f,
+      group: f,
+      layout: u,
       separatorToPanels: m
-    } = n(), v = u.panels.findIndex((y) => y.id === t), p = v === u.panels.length - 1, d = U({
-      delta: p ? a - i : i - a,
-      initialLayout: f,
+    } = n(), y = f.panels.findIndex((v) => v.id === t), d = y === f.panels.length - 1, p = U({
+      delta: d ? a - i : i - a,
+      initialLayout: u,
       panelConstraints: l,
-      pivotIndices: p ? [v - 1, v] : [v, v + 1],
-      prevLayout: f,
+      pivotIndices: d ? [y - 1, y] : [y, y + 1],
+      prevLayout: u,
       trigger: "imperative-api"
     }), h = $({
-      layout: d,
+      layout: p,
       panelConstraints: l
     });
-    B(f, h) || E((y) => ({
-      mountedGroups: new Map(y.mountedGroups).set(u, {
+    B(u, h) || M((v) => ({
+      mountedGroups: new Map(v.mountedGroups).set(f, {
         derivedPanelConstraints: l,
         layout: h,
         separatorToPanels: m
@@ -1222,27 +1225,27 @@ function st({
       i && l !== a && c(a);
     },
     expand: () => {
-      const { collapsible: i, collapsedSize: a, minSize: l } = o(), u = r();
-      i && u === a && c(l);
+      const { collapsible: i, collapsedSize: a, minSize: l } = o(), f = r();
+      i && f === a && c(l);
     },
     getSize: () => {
-      const { group: i } = n(), a = r(), { element: l } = s(), u = i.orientation === "horizontal" ? l.offsetWidth : l.offsetHeight;
+      const { group: i } = n(), a = r(), { element: l } = s(), f = i.orientation === "horizontal" ? l.offsetWidth : l.offsetHeight;
       return {
         asPercentage: a,
-        inPixels: u
+        inPixels: f
       };
     },
     isCollapsed: () => {
       const { collapsible: i, collapsedSize: a } = o(), l = r();
-      return i && L(a, l);
+      return i && w(a, l);
     },
     resize: (i) => {
       if (r() !== i) {
         let l;
         switch (typeof i) {
           case "number": {
-            const { group: u } = n(), f = le({ group: u });
-            l = R(i / f * 100);
+            const { group: f } = n(), u = ce({ group: f });
+            l = I(i / u * 100);
             break;
           }
           case "string": {
@@ -1255,25 +1258,25 @@ function st({
     }
   };
 }
-function at(e, t) {
-  const { id: n } = de(), o = T({
-    collapse: oe,
-    expand: oe,
+function lt(e, t) {
+  const { id: n } = pe(), o = T({
+    collapse: ie,
+    expand: ie,
     getSize: () => ({
       asPercentage: 0,
       inPixels: 0
     }),
     isCollapsed: () => !1,
-    resize: oe
+    resize: ie
   });
-  Se(t, () => o.current, []), H(() => {
+  xe(t, () => o.current, []), H(() => {
     Object.assign(
       o.current,
-      st({ groupId: n, panelId: e })
+      at({ groupId: n, panelId: e })
     );
   });
 }
-function ht({
+function vt({
   children: e,
   className: t,
   collapsedSize: n = 0,
@@ -1284,19 +1287,20 @@ function ht({
   maxSize: i = "100",
   minSize: a = "0",
   onResize: l,
-  panelRef: u,
-  style: f
+  panelRef: f,
+  style: u,
+  ...m
 }) {
-  const m = !!c, v = ce(c), [p, d] = M(null), h = fe(d, r), { id: y, registerPanel: z } = de(), x = l !== null, g = ue((G) => {
-    l?.(G, c);
+  const y = !!c, d = ue(c), [p, h] = G(null), v = de(h, r), { id: z, registerPanel: x } = pe(), g = l !== null, L = fe((E) => {
+    l?.(E, c);
   });
   H(() => {
     if (p !== null)
-      return z({
+      return x({
         element: p,
-        id: v,
-        idIsStable: m,
-        onResize: x ? g : void 0,
+        id: d,
+        idIsStable: y,
+        onResize: g ? L : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1310,30 +1314,32 @@ function ht({
     o,
     s,
     p,
-    x,
-    v,
-    m,
+    g,
+    d,
+    y,
     i,
     a,
-    g,
-    z
-  ]), at(v, u);
-  const w = Ge(y, v);
+    L,
+    x
+  ]), lt(d, f);
+  const P = Ie(z, d);
   return /* @__PURE__ */ j(
     "div",
     {
+      ...m,
       "data-panel": !0,
-      "data-testid": c ?? void 0,
-      ref: h,
+      "data-testid": d,
+      id: d,
+      ref: v,
       style: {
         flexBasis: 0,
-        flexGrow: `var(${w}, 1)`,
+        flexGrow: `var(${P}, 1)`,
         flexShrink: 1,
         // Prevent Panel content from interfering with panel size
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${Re})`
+        pointerEvents: `var(${Ge})`
       },
       children: /* @__PURE__ */ j(
         "div",
@@ -1342,7 +1348,7 @@ function ht({
           style: {
             width: "100%",
             height: "100%",
-            ...f
+            ...u
           },
           children: e
         }
@@ -1350,13 +1356,13 @@ function ht({
     }
   );
 }
-function vt() {
-  return M(null);
-}
 function yt() {
+  return G(null);
+}
+function gt() {
   return T(null);
 }
-function lt({
+function ct({
   layout: e,
   panelConstraints: t,
   panelId: n,
@@ -1367,13 +1373,13 @@ function lt({
     (a) => a.panelId === n
   );
   if (i) {
-    const a = i.maxSize, l = r = i.collapsible ? i.collapsedSize : i.minSize, u = [o, o + 1];
+    const a = i.maxSize, l = r = i.collapsible ? i.collapsedSize : i.minSize, f = [o, o + 1];
     r = $({
       layout: U({
         delta: l - c,
         initialLayout: e,
         panelConstraints: t,
-        pivotIndices: u,
+        pivotIndices: f,
         prevLayout: e,
         trigger: "keyboard"
       }),
@@ -1383,7 +1389,7 @@ function lt({
         delta: a - c,
         initialLayout: e,
         panelConstraints: t,
-        pivotIndices: u,
+        pivotIndices: f,
         prevLayout: e,
         trigger: "keyboard"
       }),
@@ -1391,52 +1397,54 @@ function lt({
     })[n];
   }
   return {
+    valueControls: n,
     valueMax: s,
     valueMin: r,
     valueNow: c
   };
 }
-function gt({
+function St({
   children: e,
   className: t,
   elementRef: n,
   id: o,
-  style: s
+  style: s,
+  ...r
 }) {
-  const r = ce(o), [c, i] = M({}), [a, l] = M("inactive"), [u, f] = M(null), m = fe(f, n), {
-    id: v,
+  const c = ue(o), [i, a] = G({}), [l, f] = G("inactive"), [u, m] = G(null), y = de(m, n), {
+    id: d,
     orientation: p,
-    registerSeparator: d
-  } = de(), h = p === "horizontal" ? "vertical" : "horizontal";
+    registerSeparator: h
+  } = pe(), v = p === "horizontal" ? "vertical" : "horizontal";
   return H(() => {
     if (u !== null) {
-      const y = {
+      const z = {
         element: u,
-        id: r
-      }, z = d(y), x = A.addListener(
+        id: c
+      }, x = h(z), g = A.addListener(
         "interactionStateChange",
-        (w) => {
-          l(
-            w.state !== "inactive" && w.hitRegions.some(
-              (G) => G.separator === y
-            ) ? w.state : "inactive"
+        (P) => {
+          f(
+            P.state !== "inactive" && P.hitRegions.some(
+              (E) => E.separator === z
+            ) ? P.state : "inactive"
           );
         }
-      ), g = A.addListener(
+      ), L = A.addListener(
         "mountedGroupsChange",
-        (w) => {
-          w.forEach(
-            ({ derivedPanelConstraints: G, layout: O, separatorToPanels: te }, K) => {
-              if (K.id === v) {
-                const V = te.get(y);
-                if (V) {
-                  const q = V[0], X = K.panels.indexOf(q);
-                  i(
-                    lt({
-                      layout: O,
-                      panelConstraints: G,
-                      panelId: q.id,
-                      panelIndex: X
+        (P) => {
+          P.forEach(
+            ({ derivedPanelConstraints: E, layout: K, separatorToPanels: ne }, V) => {
+              if (V.id === d) {
+                const q = ne.get(z);
+                if (q) {
+                  const X = q[0], Y = V.panels.indexOf(X);
+                  a(
+                    ct({
+                      layout: K,
+                      panelConstraints: E,
+                      panelId: X.id,
+                      panelIndex: Y
                     })
                   );
                 }
@@ -1446,21 +1454,24 @@ function gt({
         }
       );
       return () => {
-        x(), g(), z();
+        g(), L(), x();
       };
     }
-  }, [u, v, r, d]), /* @__PURE__ */ j(
+  }, [u, d, c, h]), /* @__PURE__ */ j(
     "div",
     {
-      "aria-orientation": h,
-      "aria-valuemax": c.valueMax,
-      "aria-valuemin": c.valueMin,
-      "aria-valuenow": c.valueNow,
+      ...r,
+      "aria-controls": i.valueControls,
+      "aria-orientation": v,
+      "aria-valuemax": i.valueMax,
+      "aria-valuemin": i.valueMin,
+      "aria-valuenow": i.valueNow,
       children: e,
       className: t,
-      "data-separator": a,
-      "data-testid": o ?? void 0,
-      ref: m,
+      "data-separator": l,
+      "data-testid": c,
+      id: c,
+      ref: y,
       role: "separator",
       style: {
         flexBasis: "auto",
@@ -1473,13 +1484,13 @@ function gt({
   );
 }
 export {
-  ft as Group,
-  ht as Panel,
-  gt as Separator,
-  dt as useDefaultLayout,
-  pt as useGroupCallbackRef,
-  mt as useGroupRef,
-  vt as usePanelCallbackRef,
-  yt as usePanelRef
+  dt as Group,
+  vt as Panel,
+  St as Separator,
+  pt as useDefaultLayout,
+  mt as useGroupCallbackRef,
+  ht as useGroupRef,
+  yt as usePanelCallbackRef,
+  gt as usePanelRef
 };
 //# sourceMappingURL=react-resizable-panels.js.map