react-resizable-panels 4.0.8-alpha.0 → 4.0.8-alpha.1

package/dist/react-resizable-panels.js

@@ -1,16 +1,16 @@
 "use client";
-import { jsx as V } from "react/jsx-runtime";
-import { useId as _e, useLayoutEffect as Fe, useEffect as He, useRef as T, useCallback as ze, createContext as Ve, useImperativeHandle as be, useSyncExternalStore as we, useState as G, useMemo as Le, useContext as We } from "react";
+import { jsx as W } from "react/jsx-runtime";
+import { useId as _e, useLayoutEffect as Fe, useEffect as He, useRef as T, useCallback as ze, createContext as We, useImperativeHandle as be, useSyncExternalStore as we, useState as G, useMemo as Le, useContext as je } from "react";
 function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
 }
 function re(e, t) {
   return t.sort(
-    e === "horizontal" ? je : Be
+    e === "horizontal" ? Ve : Be
   );
 }
-function je(e, t) {
+function Ve(e, t) {
   const n = e.element.offsetLeft - t.element.offsetLeft;
   return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
 }
@@ -22,26 +22,26 @@ function ee({
   group: e
 }) {
   const { orientation: t, panels: n } = e;
-  return n.reduce((o, s) => (o += t === "horizontal" ? s.element.offsetWidth : s.element.offsetHeight, o), 0);
+  return n.reduce((o, r) => (o += t === "horizontal" ? r.element.offsetWidth : r.element.offsetHeight, o), 0);
 }
 function Pe(e) {
-  const { element: t, orientation: n, panels: o, separators: s } = e, a = re(
+  const { element: t, orientation: n, panels: o, separators: r } = e, s = re(
     n,
-    Array.from(t.children).filter((c) => c instanceof HTMLElement).map((c) => ({ element: c }))
-  ).map(({ element: c }) => c), l = [];
-  let i, r;
-  for (const c of a) {
-    const d = o.find(
-      (u) => u.element === c
+    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 s) {
+    const f = o.find(
+      (u) => u.element === l
     );
-    if (d) {
+    if (f) {
       if (i) {
-        const u = i.element.getBoundingClientRect(), h = c.getBoundingClientRect();
-        l.push({
+        const u = i.element.getBoundingClientRect(), h = l.getBoundingClientRect();
+        c.push({
           group: e,
           groupSize: ee({ group: e }),
-          panels: [i, d],
-          separator: r,
+          panels: [i, f],
+          separator: a,
           rect: n === "horizontal" ? new DOMRect(
             u.right,
             h.top,
@@ -55,15 +55,15 @@ function Pe(e) {
           )
         });
       }
-      i = d, r = void 0;
+      i = f, a = void 0;
     } else {
-      const u = s.find(
-        (h) => h.element === c
+      const u = r.find(
+        (h) => h.element === l
       );
-      u ? r = u : (i = void 0, r = void 0);
+      u ? a = u : (i = void 0, a = void 0);
     }
   }
-  return l;
+  return c;
 }
 function Ue(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
@@ -95,30 +95,30 @@ function Z({
   styleProp: n
 }) {
   let o;
-  const [s, a] = qe(n);
-  switch (a) {
+  const [r, s] = qe(n);
+  switch (s) {
     case "%": {
-      o = s / 100 * e;
+      o = r / 100 * e;
       break;
     }
     case "px": {
-      o = s;
+      o = r;
       break;
     }
     case "rem": {
-      o = Ke(t, s);
+      o = Ke(t, r);
       break;
     }
     case "em": {
-      o = Ue(t, s);
+      o = Ue(t, r);
       break;
     }
     case "vh": {
-      o = Xe(s);
+      o = Xe(r);
       break;
     }
     case "vw": {
-      o = Ye(s);
+      o = Ye(r);
       break;
     }
   }
@@ -128,62 +128,59 @@ function I(e) {
   return parseFloat(e.toFixed(3));
 }
 function me(e) {
-  const { element: t, panels: n } = e;
-  if (typeof t.checkVisibility == "function" && !t.checkVisibility())
-    return n.map((s) => ({
-      collapsedSize: 0,
-      collapsible: s.panelConstraints.collapsible === !0,
-      defaultSize: void 0,
-      minSize: 0,
-      maxSize: 100,
-      panelId: s.id
-    }));
-  const o = ee({ group: e });
-  return n.map((s) => {
-    const { element: a, panelConstraints: l } = s;
-    let i = 0;
-    if (l.collapsedSize) {
-      const u = Z({
-        groupSize: o,
-        panelElement: a,
-        styleProp: l.collapsedSize
+  const { panels: t } = e, n = ee({ group: e });
+  return n === 0 ? t.map((o) => ({
+    collapsedSize: 0,
+    collapsible: o.panelConstraints.collapsible === !0,
+    defaultSize: void 0,
+    minSize: 0,
+    maxSize: 100,
+    panelId: o.id
+  })) : t.map((o) => {
+    const { element: r, panelConstraints: s } = o;
+    let c = 0;
+    if (s.collapsedSize) {
+      const f = Z({
+        groupSize: n,
+        panelElement: r,
+        styleProp: s.collapsedSize
       });
-      i = I(u / o * 100);
+      c = I(f / n * 100);
     }
-    let r;
-    if (l.defaultSize) {
-      const u = Z({
-        groupSize: o,
-        panelElement: a,
-        styleProp: l.defaultSize
+    let i;
+    if (s.defaultSize) {
+      const f = Z({
+        groupSize: n,
+        panelElement: r,
+        styleProp: s.defaultSize
       });
-      r = I(u / o * 100);
+      i = I(f / n * 100);
     }
-    let c = 0;
-    if (l.minSize) {
-      const u = Z({
-        groupSize: o,
-        panelElement: a,
-        styleProp: l.minSize
+    let a = 0;
+    if (s.minSize) {
+      const f = Z({
+        groupSize: n,
+        panelElement: r,
+        styleProp: s.minSize
       });
-      c = I(u / o * 100);
+      a = I(f / n * 100);
     }
-    let d = 100;
-    if (l.maxSize) {
-      const u = Z({
-        groupSize: o,
-        panelElement: a,
-        styleProp: l.maxSize
+    let l = 100;
+    if (s.maxSize) {
+      const f = Z({
+        groupSize: n,
+        panelElement: r,
+        styleProp: s.maxSize
       });
-      d = I(u / o * 100);
+      l = I(f / n * 100);
     }
     return {
-      collapsedSize: i,
-      collapsible: l.collapsible === !0,
-      defaultSize: r,
-      minSize: c,
-      maxSize: d,
-      panelId: s.id
+      collapsedSize: c,
+      collapsible: s.collapsible === !0,
+      defaultSize: i,
+      minSize: a,
+      maxSize: l,
+      panelId: o.id
     };
   });
 }
@@ -201,18 +198,18 @@ class Ze {
       if (o.length === 1)
         o[0].call(null, n);
       else {
-        let s = !1, a = null;
-        const l = Array.from(o);
-        for (let i = 0; i < l.length; i++) {
-          const r = l[i];
+        let r = !1, s = null;
+        const c = Array.from(o);
+        for (let i = 0; i < c.length; i++) {
+          const a = c[i];
           try {
-            r.call(null, n);
-          } catch (c) {
-            a === null && (s = !0, a = c);
+            a.call(null, n);
+          } catch (l) {
+            s === null && (r = !0, s = l);
           }
         }
-        if (s)
-          throw a;
+        if (r)
+          throw s;
       }
   }
   removeAllListeners() {
@@ -221,8 +218,8 @@ class Ze {
   removeListener(t, n) {
     const o = this.#e[t];
     if (o !== void 0) {
-      const s = o.indexOf(n);
-      s >= 0 && o.splice(s, 1);
+      const r = o.indexOf(n);
+      r >= 0 && o.splice(r, 1);
     }
   }
 }
@@ -248,19 +245,19 @@ function C(e) {
   return R = {
     ...R,
     ...t
-  }, t.cursorFlags !== void 0 && A.emit("cursorFlagsChange", R.cursorFlags), t.interactionState !== void 0 && A.emit("interactionStateChange", R.interactionState), t.mountedGroups !== void 0 && (R.mountedGroups.forEach((o, s) => {
-    o.derivedPanelConstraints.forEach((a) => {
-      if (a.collapsible) {
-        const { layout: l } = n.mountedGroups.get(s) ?? {};
-        if (l) {
+  }, t.cursorFlags !== void 0 && A.emit("cursorFlagsChange", R.cursorFlags), t.interactionState !== void 0 && A.emit("interactionStateChange", R.interactionState), t.mountedGroups !== void 0 && (R.mountedGroups.forEach((o, r) => {
+    o.derivedPanelConstraints.forEach((s) => {
+      if (s.collapsible) {
+        const { layout: c } = n.mountedGroups.get(r) ?? {};
+        if (c) {
           const i = w(
-            a.collapsedSize,
-            o.layout[a.panelId]
-          ), r = w(
-            a.collapsedSize,
-            l[a.panelId]
+            s.collapsedSize,
+            o.layout[s.panelId]
+          ), a = w(
+            s.collapsedSize,
+            c[s.panelId]
           );
-          i && !r && (s.inMemoryLastExpandedPanelSizes[a.panelId] = l[a.panelId]);
+          i && !a && (r.inMemoryLastExpandedPanelSizes[s.panelId] = c[s.panelId]);
         }
       }
     });
@@ -276,43 +273,43 @@ function Qe({
   groups: t,
   state: n
 }) {
-  let o = 0, s = 0;
+  let o = 0, r = 0;
   switch (n) {
     case "active":
     case "hover":
-      t.forEach((a) => {
-        if (!a.disableCursor)
-          switch (a.orientation) {
+      t.forEach((s) => {
+        if (!s.disableCursor)
+          switch (s.orientation) {
             case "horizontal": {
               o++;
               break;
             }
             case "vertical": {
-              s++;
+              r++;
               break;
             }
           }
       });
   }
-  if (o === 0 && s === 0)
+  if (o === 0 && r === 0)
     return null;
   switch (n) {
     case "active": {
-      const a = (e & Ee) !== 0, l = (e & Re) !== 0, i = (e & Ce) !== 0, r = (e & Me) !== 0;
+      const s = (e & Ee) !== 0, c = (e & Re) !== 0, i = (e & Ce) !== 0, a = (e & Me) !== 0;
       if (e) {
-        if (a)
-          return i ? "se-resize" : r ? "ne-resize" : "e-resize";
-        if (l)
-          return i ? "sw-resize" : r ? "nw-resize" : "w-resize";
+        if (s)
+          return i ? "se-resize" : a ? "ne-resize" : "e-resize";
+        if (c)
+          return i ? "sw-resize" : a ? "nw-resize" : "w-resize";
         if (i)
           return "s-resize";
-        if (r)
+        if (a)
           return "n-resize";
       }
       break;
     }
   }
-  return o > 0 && s > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
+  return o > 0 && r > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
 let se, k;
 function le() {
@@ -323,7 +320,7 @@ function le() {
     case "hover": {
       const n = Qe({
         cursorFlags: e,
-        groups: t.hitRegions.map((s) => s.group),
+        groups: t.hitRegions.map((r) => r.group),
         state: t.state
       }), o = `*{cursor: ${n} !important; ${t.state === "active" ? "touch-action: none;" : ""} }`;
       if (se === o)
@@ -345,7 +342,7 @@ function et(e, t) {
       return !1;
   return !0;
 }
-function W(e, t) {
+function j(e, t) {
   return w(e, t) ? 0 : e > t ? 1 : -1;
 }
 function F({
@@ -355,36 +352,36 @@ function F({
   const {
     collapsedSize: n = 0,
     collapsible: o,
-    maxSize: s = 100,
-    minSize: a = 0
+    maxSize: r = 100,
+    minSize: s = 0
   } = e;
-  if (W(t, a) < 0)
+  if (j(t, s) < 0)
     if (o) {
-      const l = (n + a) / 2;
-      W(t, l) < 0 ? t = n : t = a;
+      const c = (n + s) / 2;
+      j(t, c) < 0 ? t = n : t = s;
     } else
-      t = a;
-  return t = Math.min(s, t), t = I(t), t;
+      t = s;
+  return t = Math.min(r, t), t = I(t), t;
 }
-function j({
+function V({
   delta: e,
   initialLayout: t,
   panelConstraints: n,
   pivotIndices: o,
-  prevLayout: s,
-  trigger: a
+  prevLayout: r,
+  trigger: s
 }) {
   if (w(e, 0))
     return t;
-  const l = Object.values(t), i = Object.values(s), r = [...l], [c, d] = o;
-  z(c != null, "Invalid first pivot index"), z(d != null, "Invalid second pivot index");
+  const c = Object.values(t), i = Object.values(r), a = [...c], [l, f] = o;
+  z(l != null, "Invalid first pivot index"), z(f != null, "Invalid second pivot index");
   let u = 0;
-  if (a === "keyboard") {
+  if (s === "keyboard") {
     {
-      const f = e < 0 ? d : c, p = n[f];
+      const d = e < 0 ? f : l, p = n[d];
       z(
         p,
-        `Panel constraints not found for index ${f}`
+        `Panel constraints not found for index ${d}`
       );
       const {
         collapsedSize: v = 0,
@@ -392,21 +389,21 @@ function j({
         minSize: x = 0
       } = p;
       if (m) {
-        const S = l[f];
+        const S = c[d];
         if (z(
           S != null,
-          `Previous layout not found for panel index ${f}`
+          `Previous layout not found for panel index ${d}`
         ), w(S, v)) {
           const g = x - S;
-          W(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
+          j(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
     {
-      const f = e < 0 ? c : d, p = n[f];
+      const d = e < 0 ? l : f, p = n[d];
       z(
         p,
-        `No panel constraints found for index ${f}`
+        `No panel constraints found for index ${d}`
       );
       const {
         collapsedSize: v = 0,
@@ -414,22 +411,22 @@ function j({
         minSize: x = 0
       } = p;
       if (m) {
-        const S = l[f];
+        const S = c[d];
         if (z(
           S != null,
-          `Previous layout not found for panel index ${f}`
+          `Previous layout not found for panel index ${d}`
         ), w(S, x)) {
           const g = S - v;
-          W(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
+          j(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
   }
   {
-    const f = e < 0 ? 1 : -1;
-    let p = e < 0 ? d : c, v = 0;
+    const d = e < 0 ? 1 : -1;
+    let p = e < 0 ? f : l, v = 0;
     for (; ; ) {
-      const x = l[p];
+      const x = c[p];
       z(
         x != null,
         `Previous layout not found for panel index ${p}`
@@ -438,16 +435,16 @@ function j({
         panelConstraints: n[p],
         size: 100
       }) - x;
-      if (v += g, p += f, p < 0 || p >= n.length)
+      if (v += g, p += d, p < 0 || p >= n.length)
         break;
     }
     const m = Math.min(Math.abs(e), Math.abs(v));
     e = e < 0 ? 0 - m : m;
   }
   {
-    let p = e < 0 ? c : d;
+    let p = e < 0 ? l : f;
     for (; p >= 0 && p < n.length; ) {
-      const v = Math.abs(e) - Math.abs(u), m = l[p];
+      const v = Math.abs(e) - Math.abs(u), m = c[p];
       z(
         m != null,
         `Previous layout not found for panel index ${p}`
@@ -456,29 +453,29 @@ function j({
         panelConstraints: n[p],
         size: x
       });
-      if (!w(m, S) && (u += m - S, r[p] = S, u.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!w(m, S) && (u += m - S, a[p] = S, u.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
       e < 0 ? p-- : p++;
     }
   }
-  if (et(i, r))
-    return s;
+  if (et(i, a))
+    return r;
   {
-    const f = e < 0 ? d : c, p = l[f];
+    const d = e < 0 ? f : l, p = c[d];
     z(
       p != null,
-      `Previous layout not found for panel index ${f}`
+      `Previous layout not found for panel index ${d}`
     );
     const v = p + u, m = F({
-      panelConstraints: n[f],
+      panelConstraints: n[d],
       size: v
     });
-    if (r[f] = m, !w(m, v)) {
-      let x = v - m, g = e < 0 ? d : c;
+    if (a[d] = m, !w(m, v)) {
+      let x = v - m, g = e < 0 ? f : l;
       for (; g >= 0 && g < n.length; ) {
-        const L = r[g];
+        const L = a[g];
         z(
           L != null,
           `Previous layout not found for panel index ${g}`
@@ -487,26 +484,26 @@ function j({
           panelConstraints: n[g],
           size: P
         });
-        if (w(L, E) || (x -= E - L, r[g] = E), w(x, 0))
+        if (w(L, E) || (x -= E - L, a[g] = E), w(x, 0))
           break;
         e > 0 ? g-- : g++;
       }
     }
   }
-  const h = Object.values(r).reduce(
-    (f, p) => p + f,
+  const h = Object.values(a).reduce(
+    (d, p) => p + d,
     0
   );
   if (!w(h, 100, 0.1))
-    return s;
-  const y = Object.keys(s);
-  return r.reduce((f, p, v) => (f[y[v]] = p, f), {});
+    return r;
+  const y = Object.keys(r);
+  return a.reduce((d, p, v) => (d[y[v]] = p, d), {});
 }
 function B(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const n in e)
-    if (W(e[n], t[n]) !== 0)
+    if (j(e[n], t[n]) !== 0)
       return !1;
   return !0;
 }
@@ -515,42 +512,42 @@ function Ge({
   hitRegions: t,
   initialLayoutMap: n,
   mountedGroups: o,
-  pointerDownAtPoint: s
+  pointerDownAtPoint: r
 }) {
-  let a = 0;
-  const l = new Map(o);
+  let s = 0;
+  const c = new Map(o);
   t.forEach((i) => {
-    const { group: r, groupSize: c } = i, { disableCursor: d, orientation: u, panels: h } = r;
+    const { group: a, groupSize: l } = i, { disableCursor: f, orientation: u, panels: h } = a;
     let y = 0;
-    s ? u === "horizontal" ? y = (e.clientX - s.x) / c * 100 : y = (e.clientY - s.y) / c * 100 : u === "horizontal" ? y = e.clientX < 0 ? -100 : 100 : y = e.clientY < 0 ? -100 : 100;
-    const f = n.get(r), {
+    r ? u === "horizontal" ? y = (e.clientX - r.x) / l * 100 : y = (e.clientY - r.y) / l * 100 : u === "horizontal" ? y = e.clientX < 0 ? -100 : 100 : y = e.clientY < 0 ? -100 : 100;
+    const d = n.get(a), {
       derivedPanelConstraints: p,
       layout: v,
       separatorToPanels: m
-    } = o.get(r) ?? {};
-    if (p && f && v && m) {
-      const x = j({
+    } = o.get(a) ?? {};
+    if (p && d && v && m) {
+      const x = V({
         delta: y,
-        initialLayout: f,
+        initialLayout: d,
         panelConstraints: p,
         pivotIndices: i.panels.map((S) => h.indexOf(S)),
         prevLayout: v,
         trigger: "mouse-or-touch"
       });
       if (B(x, v)) {
-        if (y !== 0 && !d)
+        if (y !== 0 && !f)
           switch (u) {
             case "horizontal": {
-              a |= y < 0 ? Ee : Re;
+              s |= y < 0 ? Ee : Re;
               break;
             }
             case "vertical": {
-              a |= y < 0 ? Ce : Me;
+              s |= y < 0 ? Ce : Me;
               break;
             }
           }
       } else {
-        l.set(i.group, {
+        c.set(i.group, {
           derivedPanelConstraints: p,
           layout: x,
           separatorToPanels: m
@@ -560,8 +557,8 @@ function Ge({
       }
     }
   }), C({
-    cursorFlags: a,
-    mountedGroups: l
+    cursorFlags: s,
+    mountedGroups: c
   }), le();
 }
 function ve(e) {
@@ -597,53 +594,53 @@ function $({
   layout: e,
   panelConstraints: t
 }) {
-  const o = [...Object.values(e)], s = o.reduce(
-    (i, r) => i + r,
+  const o = [...Object.values(e)], r = o.reduce(
+    (i, a) => i + a,
     0
   );
   if (o.length !== t.length)
     throw Error(
       `Invalid ${t.length} panel layout: ${o.map((i) => `${i}%`).join(", ")}`
     );
-  if (!w(s, 100) && o.length > 0)
+  if (!w(r, 100) && o.length > 0)
     for (let i = 0; i < t.length; i++) {
-      const r = o[i];
-      z(r != null, `No layout data found for index ${i}`);
-      const c = 100 / s * r;
-      o[i] = c;
+      const a = o[i];
+      z(a != null, `No layout data found for index ${i}`);
+      const l = 100 / r * a;
+      o[i] = l;
     }
-  let a = 0;
+  let s = 0;
   for (let i = 0; i < t.length; i++) {
-    const r = o[i];
-    z(r != null, `No layout data found for index ${i}`);
-    const c = F({
+    const a = o[i];
+    z(a != null, `No layout data found for index ${i}`);
+    const l = F({
       panelConstraints: t[i],
-      size: r
+      size: a
     });
-    r != c && (a += r - c, o[i] = c);
+    a != l && (s += a - l, o[i] = l);
   }
-  if (!w(a, 0))
+  if (!w(s, 0))
     for (let i = 0; i < t.length; i++) {
-      const r = o[i];
-      z(r != null, `No layout data found for index ${i}`);
-      const c = r + a, d = F({
+      const a = o[i];
+      z(a != null, `No layout data found for index ${i}`);
+      const l = a + s, f = F({
         panelConstraints: t[i],
-        size: c
+        size: l
       });
-      if (r !== d && (a -= d - r, o[i] = d, w(a, 0)))
+      if (a !== f && (s -= f - a, o[i] = f, w(s, 0)))
         break;
     }
-  const l = Object.keys(e);
-  return o.reduce((i, r, c) => (i[l[c]] = r, i), {});
+  const c = Object.keys(e);
+  return o.reduce((i, a, l) => (i[c[l]] = a, i), {});
 }
 function Ie({
   groupId: e
 }) {
   const t = () => {
     const { mountedGroups: n } = O();
-    for (const [o, s] of n)
+    for (const [o, r] of n)
       if (o.id === e)
-        return { group: o, ...s };
+        return { group: o, ...r };
     throw Error(`Group ${e} not found`);
   };
   return {
@@ -654,18 +651,18 @@ function Ie({
     setLayout(n) {
       const {
         derivedPanelConstraints: o,
-        group: s,
-        layout: a,
-        separatorToPanels: l
+        group: r,
+        layout: s,
+        separatorToPanels: c
       } = t(), i = $({
         layout: n,
         panelConstraints: o
       });
-      return B(a, i) || C((r) => ({
-        mountedGroups: new Map(r.mountedGroups).set(s, {
+      return B(s, i) || C((a) => ({
+        mountedGroups: new Map(a.mountedGroups).set(r, {
           derivedPanelConstraints: o,
           layout: i,
-          separatorToPanels: l
+          separatorToPanels: c
         })
       })), i;
     }
@@ -676,27 +673,27 @@ function ke(e) {
   return z(n, `Mounted Group ${e.id} not found`), n;
 }
 function D(e, t) {
-  const n = Q(e), o = ke(n), s = n.separators.find(
+  const n = Q(e), o = ke(n), r = n.separators.find(
     (u) => u.element === e
   );
-  z(s, "Matching separator not found");
-  const a = o.separatorToPanels.get(s);
-  z(a, "Matching panels not found");
-  const l = a.map((u) => n.panels.indexOf(u)), r = Ie({ groupId: n.id }).getLayout(), c = j({
+  z(r, "Matching separator not found");
+  const s = o.separatorToPanels.get(r);
+  z(s, "Matching panels not found");
+  const c = s.map((u) => n.panels.indexOf(u)), a = Ie({ groupId: n.id }).getLayout(), l = V({
     delta: t,
-    initialLayout: r,
+    initialLayout: a,
     panelConstraints: o.derivedPanelConstraints,
-    pivotIndices: l,
-    prevLayout: r,
+    pivotIndices: c,
+    prevLayout: a,
     trigger: "keyboard"
-  }), d = $({
-    layout: c,
+  }), f = $({
+    layout: l,
     panelConstraints: o.derivedPanelConstraints
   });
-  B(r, d) || C((u) => ({
+  B(a, f) || C((u) => ({
     mountedGroups: new Map(u.mountedGroups).set(n, {
       derivedPanelConstraints: o.derivedPanelConstraints,
-      layout: d,
+      layout: f,
       separatorToPanels: o.separatorToPanels
     })
   }));
@@ -729,31 +726,31 @@ function ye(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = Q(t), { derivedPanelConstraints: s, layout: a, separatorToPanels: l } = ke(o), i = o.separators.find(
+        const o = Q(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: c } = ke(o), i = o.separators.find(
           (u) => u.element === t
         );
         z(i, "Matching separator not found");
-        const r = l.get(i);
-        z(r, "Matching panels not found");
-        const c = r[0], d = s.find(
-          (u) => u.panelId === c.id
+        const a = c.get(i);
+        z(a, "Matching panels not found");
+        const l = a[0], f = r.find(
+          (u) => u.panelId === l.id
         );
-        if (z(d, "Panel metadata not found"), d.collapsible) {
-          const u = a[c.id], h = d.collapsedSize === u ? o.inMemoryLastExpandedPanelSizes[c.id] ?? d.minSize : d.collapsedSize;
+        if (z(f, "Panel metadata not found"), f.collapsible) {
+          const u = s[l.id], h = f.collapsedSize === u ? o.inMemoryLastExpandedPanelSizes[l.id] ?? f.minSize : f.collapsedSize;
           D(t, h - u);
         }
         break;
       }
       case "F6": {
         e.preventDefault();
-        const s = Q(t).separators.map(
-          (r) => r.element
-        ), a = Array.from(s).findIndex(
-          (r) => r === e.currentTarget
+        const r = Q(t).separators.map(
+          (a) => a.element
+        ), s = Array.from(r).findIndex(
+          (a) => a === e.currentTarget
         );
-        z(a !== null, "Index not found");
-        const l = e.shiftKey ? a > 0 ? a - 1 : s.length - 1 : a + 1 < s.length ? a + 1 : 0;
-        s[l].focus();
+        z(s !== null, "Index not found");
+        const c = e.shiftKey ? s > 0 ? s - 1 : r.length - 1 : s + 1 < r.length ? s + 1 : 0;
+        r[c].focus();
         break;
       }
       case "Home": {
@@ -775,25 +772,25 @@ function tt(e, t) {
   };
 }
 function nt(e, t, n) {
-  let o, s = {
+  let o, r = {
     x: 1 / 0,
     y: 1 / 0
   };
-  for (const a of t) {
-    const l = tt(n, a.rect);
+  for (const s of t) {
+    const c = tt(n, s.rect);
     switch (e) {
       case "horizontal": {
-        l.x <= s.x && (o = a, s = l);
+        c.x <= r.x && (o = s, r = c);
         break;
       }
       case "vertical": {
-        l.y <= s.y && (o = a, s = l);
+        c.y <= r.y && (o = s, r = c);
         break;
       }
     }
   }
   return o ? {
-    distance: s,
+    distance: r,
     hitRegion: o
   } : void 0;
 }
@@ -803,31 +800,31 @@ function ot() {
 }
 function Oe(e, t) {
   const n = [];
-  return t.forEach((o, s) => {
-    if (s.disabled)
+  return t.forEach((o, r) => {
+    if (r.disabled)
       return;
-    const a = ot() ? he.coarse : he.precise, l = Pe(s), i = nt(s.orientation, l, {
+    const s = ot() ? he.coarse : he.precise, c = Pe(r), i = nt(r.orientation, c, {
       x: e.clientX,
       y: e.clientY
     });
-    i && i.distance.x <= a && i.distance.y <= a && n.push(i.hitRegion);
+    i && i.distance.x <= s && i.distance.y <= s && n.push(i.hitRegion);
   }), n;
 }
 function ge(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = O(), n = Oe(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
+  const { mountedGroups: t } = O(), n = Oe(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map();
   let i = !1;
-  n.forEach((r) => {
-    o.add(r.group), r.panels.forEach((d) => {
-      s.add(d);
-    }), r.separator && (a.add(r.separator), i || (i = !0, r.separator.element.focus()));
-    const c = t.get(r.group);
-    c && l.set(r.group, c.layout);
+  n.forEach((a) => {
+    o.add(a.group), a.panels.forEach((f) => {
+      r.add(f);
+    }), a.separator && (s.add(a.separator), i || (i = !0, a.separator.element.focus()));
+    const l = t.get(a.group);
+    l && c.set(a.group, l.layout);
   }), C({
     interactionState: {
       hitRegions: n,
-      initialLayoutMap: l,
+      initialLayoutMap: c,
       pointerDownAtPoint: { x: e.clientX, y: e.clientY },
       state: "active"
     }
@@ -894,18 +891,18 @@ function xe(e) {
 function it(e) {
   let t = 0, n = 0;
   const o = {};
-  for (const a of e)
-    if (a.defaultSize !== void 0) {
+  for (const s of e)
+    if (s.defaultSize !== void 0) {
       t++;
-      const l = I(a.defaultSize);
-      n += l, o[a.panelId] = l;
+      const c = I(s.defaultSize);
+      n += c, o[s.panelId] = c;
     } else
-      o[a.panelId] = void 0;
-  const s = e.length - t;
-  if (s !== 0) {
-    const a = I((100 - n) / s);
-    for (const l of e)
-      l.defaultSize === void 0 && (o[l.panelId] = a);
+      o[s.panelId] = void 0;
+  const r = e.length - t;
+  if (r !== 0) {
+    const s = I((100 - n) / r);
+    for (const c of e)
+      c.defaultSize === void 0 && (o[c.panelId] = s);
   }
   return o;
 }
@@ -913,18 +910,18 @@ function st(e, t, n) {
   const o = n[0];
   if (!o)
     return;
-  const s = e.panels.find((l) => l.element === t);
-  if (!s || !s.onResize)
+  const r = e.panels.find((c) => c.element === t);
+  if (!r || !r.onResize)
     return;
-  const a = ee({ group: e });
-  s.onResize(
+  const s = ee({ group: e });
+  r.onResize(
     {
       asPercentage: I(
-        o.inlineSize / a * 100
+        o.inlineSize / s * 100
       ),
       inPixels: o.inlineSize
     },
-    s.id
+    r.id
   );
 }
 function rt(e) {
@@ -933,48 +930,43 @@ function rt(e) {
     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((u) => {
+  const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), r = new ResizeObserver((u) => {
     for (const h of u) {
-      const { borderBoxSize: y, target: f } = h;
-      if (f === e.element) {
-        if (typeof f.checkVisibility == "function" && !f.checkVisibility())
-          return;
-        t && C((p) => {
-          const v = p.mountedGroups.get(e);
-          if (v) {
-            const m = me(e), x = v.layout, S = $({
-              layout: x,
-              panelConstraints: m
-            });
-            return {
-              mountedGroups: new Map(p.mountedGroups).set(e, {
-                derivedPanelConstraints: m,
-                layout: S,
-                separatorToPanels: v.separatorToPanels
-              })
-            };
-          }
-          return p;
-        });
-      } else
-        st(e, f, y);
+      const { borderBoxSize: y, target: d } = h;
+      d === e.element ? t && C((p) => {
+        const v = p.mountedGroups.get(e);
+        if (v) {
+          const m = me(e), x = v.layout, S = $({
+            layout: x,
+            panelConstraints: m
+          });
+          return {
+            mountedGroups: new Map(p.mountedGroups).set(e, {
+              derivedPanelConstraints: m,
+              layout: S,
+              separatorToPanels: v.separatorToPanels
+            })
+          };
+        }
+        return p;
+      }) : st(e, d, y);
     }
   });
-  s.observe(e.element), e.panels.forEach((u) => {
+  r.observe(e.element), e.panels.forEach((u) => {
     z(
       !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);
+    ), n.add(u.id), u.onResize && r.observe(u.element);
   });
-  const a = me(e), l = e.panels.map(({ id: u }) => u).join(","), i = e.inMemoryLayouts[l] ?? e.defaultLayout ?? it(a), r = $({
+  const s = me(e), c = e.panels.map(({ id: u }) => u).join(","), i = e.inMemoryLayouts[c] ?? e.defaultLayout ?? it(s), a = $({
     layout: i,
-    panelConstraints: a
-  }), c = Pe(e), d = C((u) => ({
+    panelConstraints: s
+  }), l = Pe(e), f = C((u) => ({
     mountedGroups: new Map(u.mountedGroups).set(e, {
-      derivedPanelConstraints: a,
-      layout: r,
+      derivedPanelConstraints: s,
+      layout: a,
       separatorToPanels: new Map(
-        c.filter((h) => h.separator).map((h) => [h.separator, h.panels])
+        l.filter((h) => h.separator).map((h) => [h.separator, h.panels])
       )
     })
   }));
@@ -983,15 +975,15 @@ function rt(e) {
       !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", ye);
-  }), d.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ge), window.addEventListener("pointermove", Se), window.addEventListener("pointerup", xe)), function() {
+  }), f.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ge), window.addEventListener("pointermove", Se), window.addEventListener("pointerup", xe)), function() {
     t = !1;
     const h = C((y) => {
-      const f = new Map(y.mountedGroups);
-      return f.delete(e), { mountedGroups: f };
+      const d = new Map(y.mountedGroups);
+      return d.delete(e), { mountedGroups: d };
     });
     e.element.removeEventListener("pointerleave", ve), e.separators.forEach((y) => {
       y.element.removeEventListener("keydown", ye);
-    }), h.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ge), window.removeEventListener("pointermove", Se), window.removeEventListener("pointerup", xe)), s.disconnect();
+    }), h.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ge), window.removeEventListener("pointermove", Se), window.removeEventListener("pointerup", xe)), r.disconnect();
   };
 }
 function ce(e) {
@@ -1027,7 +1019,7 @@ function De(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 Ae = Ve(null);
+const Ae = We(null);
 function at(e, t) {
   const n = T({
     getLayout: () => ({}),
@@ -1060,48 +1052,48 @@ function yt({
   className: t,
   defaultLayout: n,
   disableCursor: o,
-  disabled: s,
-  elementRef: a,
-  groupRef: l,
+  disabled: r,
+  elementRef: s,
+  groupRef: c,
   id: i,
-  onLayoutChange: r,
-  orientation: c = "horizontal",
-  style: d,
+  onLayoutChange: a,
+  orientation: l = "horizontal",
+  style: f,
   ...u
 }) {
   const h = T({}), y = ue((b) => {
-    B(h.current, b) || (h.current = b, r?.(b));
-  }), f = ce(i), [p, v] = G(!1), [m, x] = G(null), [S, g] = G(n ?? {}), [L, P] = G([]), [E, U] = G([]), te = lt(m), K = T({}), X = T({}), Y = fe(x, a);
-  at(f, l);
+    B(h.current, b) || (h.current = b, a?.(b));
+  }), d = ce(i), [p, v] = G(!1), [m, x] = G(null), [S, g] = G(n ?? {}), [L, P] = G([]), [E, U] = G([]), te = lt(m), K = T({}), X = T({}), Y = fe(x, s);
+  at(d, c);
   const ne = Le(
     () => ({
-      id: f,
-      orientation: c,
-      registerPanel: (b) => (P((M) => re(c, [...M, b])), () => {
+      id: d,
+      orientation: l,
+      registerPanel: (b) => (P((M) => re(l, [...M, b])), () => {
         P((M) => M.filter((N) => N !== b));
       }),
       registerSeparator: (b) => (U(
-        (M) => re(c, [...M, b])
+        (M) => re(l, [...M, b])
       ), () => {
         U(
           (M) => M.filter((N) => N !== b)
         );
       })
     }),
-    [f, c]
+    [d, l]
   );
   H(() => {
-    if (m === null || L.length === 0 || typeof m.checkVisibility == "function" && !m.checkVisibility())
+    if (m === null || L.length === 0)
       return;
     const b = {
       defaultLayout: n,
       disableCursor: !!o,
-      disabled: !!s,
+      disabled: !!r,
       element: m,
-      id: f,
+      id: d,
       inMemoryLastExpandedPanelSizes: K.current,
       inMemoryLayouts: X.current,
-      orientation: c,
+      orientation: l,
       panels: L,
       separators: E
     }, M = rt(b), oe = O().mountedGroups.get(b);
@@ -1137,12 +1129,12 @@ function yt({
   }, [
     n,
     o,
-    s,
+    r,
     m,
-    f,
+    d,
     te,
     y,
-    c,
+    l,
     L,
     E
   ]);
@@ -1150,25 +1142,25 @@ function yt({
     [Te]: p ? "none" : void 0
   };
   for (const b in S) {
-    const M = De(f, b), N = S[b];
+    const M = De(d, b), N = S[b];
     pe[M] = N;
   }
-  return /* @__PURE__ */ V(Ae.Provider, { value: ne, children: /* @__PURE__ */ V(
+  return /* @__PURE__ */ W(Ae.Provider, { value: ne, children: /* @__PURE__ */ W(
     "div",
     {
       ...u,
-      "aria-orientation": c,
+      "aria-orientation": l,
       className: t,
       "data-group": !0,
-      "data-testid": f,
-      id: f,
+      "data-testid": d,
+      id: d,
       ref: Y,
       style: {
-        ...d,
+        ...f,
         ...pe,
         contentVisibility: "auto",
         display: "flex",
-        flexDirection: c === "horizontal" ? "row" : "column",
+        flexDirection: l === "horizontal" ? "row" : "column",
         flexWrap: "nowrap"
       },
       children: e
@@ -1201,17 +1193,17 @@ function gt({
   ), o = Le(
     () => n ? JSON.parse(n) : void 0,
     [n]
-  ), s = ze(
-    (a) => ct({
+  ), r = ze(
+    (s) => ct({
       id: e,
-      layout: a,
+      layout: s,
       storage: t
     }),
     [e, t]
   );
   return {
     defaultLayout: o,
-    onLayoutChange: s
+    onLayoutChange: r
   };
 }
 function ut() {
@@ -1225,7 +1217,7 @@ function xt() {
   return T(null);
 }
 function de() {
-  const e = We(Ae);
+  const e = je(Ae);
   return z(
     e,
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
@@ -1238,52 +1230,52 @@ function ft({
   const n = () => {
     const { mountedGroups: i } = O();
     for (const [
-      r,
-      { derivedPanelConstraints: c, layout: d, separatorToPanels: u }
+      a,
+      { derivedPanelConstraints: l, layout: f, separatorToPanels: u }
     ] of i)
-      if (r.id === e)
-        return { derivedPanelConstraints: c, group: r, layout: d, separatorToPanels: u };
+      if (a.id === e)
+        return { derivedPanelConstraints: l, group: a, layout: f, separatorToPanels: u };
     throw Error(`Group ${e} not found`);
   }, o = () => {
     const i = n().derivedPanelConstraints.find(
-      (r) => r.panelId === t
+      (a) => a.panelId === t
     );
     if (i !== void 0)
       return i;
     throw Error(`Panel constraints not found for Panel ${t}`);
-  }, s = () => {
-    const i = n().group.panels.find((r) => r.id === t);
+  }, r = () => {
+    const i = n().group.panels.find((a) => a.id === t);
     if (i !== void 0)
       return i;
     throw Error(`Layout not found for Panel ${t}`);
-  }, a = () => {
+  }, s = () => {
     const i = n().layout[t];
     if (i !== void 0)
       return i;
     throw Error(`Layout not found for Panel ${t}`);
-  }, l = (i) => {
-    const r = a();
-    if (i === r)
+  }, c = (i) => {
+    const a = s();
+    if (i === a)
       return;
     const {
-      derivedPanelConstraints: c,
-      group: d,
+      derivedPanelConstraints: l,
+      group: f,
       layout: u,
       separatorToPanels: h
-    } = n(), y = d.panels.findIndex((m) => m.id === t), f = y === d.panels.length - 1, p = j({
-      delta: f ? r - i : i - r,
+    } = n(), y = f.panels.findIndex((m) => m.id === t), d = y === f.panels.length - 1, p = V({
+      delta: d ? a - i : i - a,
       initialLayout: u,
-      panelConstraints: c,
-      pivotIndices: f ? [y - 1, y] : [y, y + 1],
+      panelConstraints: l,
+      pivotIndices: d ? [y - 1, y] : [y, y + 1],
       prevLayout: u,
       trigger: "imperative-api"
     }), v = $({
       layout: p,
-      panelConstraints: c
+      panelConstraints: l
     });
     B(u, v) || C((m) => ({
-      mountedGroups: new Map(m.mountedGroups).set(d, {
-        derivedPanelConstraints: c,
+      mountedGroups: new Map(m.mountedGroups).set(f, {
+        derivedPanelConstraints: l,
         layout: v,
         separatorToPanels: h
       })
@@ -1291,39 +1283,39 @@ function ft({
   };
   return {
     collapse: () => {
-      const { collapsible: i, collapsedSize: r } = o(), c = a();
-      i && c !== r && l(r);
+      const { collapsible: i, collapsedSize: a } = o(), l = s();
+      i && l !== a && c(a);
     },
     expand: () => {
-      const { collapsible: i, collapsedSize: r, minSize: c } = o(), d = a();
-      i && d === r && l(c);
+      const { collapsible: i, collapsedSize: a, minSize: l } = o(), f = s();
+      i && f === a && c(l);
     },
     getSize: () => {
-      const { group: i } = n(), r = a(), { element: c } = s(), d = i.orientation === "horizontal" ? c.offsetWidth : c.offsetHeight;
+      const { group: i } = n(), a = s(), { element: l } = r(), f = i.orientation === "horizontal" ? l.offsetWidth : l.offsetHeight;
       return {
-        asPercentage: r,
-        inPixels: d
+        asPercentage: a,
+        inPixels: f
       };
     },
     isCollapsed: () => {
-      const { collapsible: i, collapsedSize: r } = o(), c = a();
-      return i && w(r, c);
+      const { collapsible: i, collapsedSize: a } = o(), l = s();
+      return i && w(a, l);
     },
     resize: (i) => {
-      if (a() !== i) {
-        let c;
+      if (s() !== i) {
+        let l;
         switch (typeof i) {
           case "number": {
-            const { group: d } = n(), u = ee({ group: d });
-            c = I(i / u * 100);
+            const { group: f } = n(), u = ee({ group: f });
+            l = I(i / u * 100);
             break;
           }
           case "string": {
-            c = parseFloat(i);
+            l = parseFloat(i);
             break;
           }
         }
-        l(c);
+        c(l);
       }
     }
   };
@@ -1351,55 +1343,55 @@ function zt({
   className: t,
   collapsedSize: n = "0%",
   collapsible: o = !1,
-  defaultSize: s,
-  elementRef: a,
-  id: l,
+  defaultSize: r,
+  elementRef: s,
+  id: c,
   maxSize: i = "100%",
-  minSize: r = "0%",
-  onResize: c,
-  panelRef: d,
+  minSize: a = "0%",
+  onResize: l,
+  panelRef: f,
   style: u,
   ...h
 }) {
-  const y = !!l, f = ce(l), [p, v] = G(null), m = fe(v, a), { id: x, registerPanel: S } = de(), g = c !== null, L = ue((E) => {
-    c?.(E, l);
+  const y = !!c, d = ce(c), [p, v] = G(null), m = fe(v, s), { id: x, registerPanel: S } = de(), g = l !== null, L = ue((E) => {
+    l?.(E, c);
   });
   H(() => {
     if (p !== null)
       return S({
         element: p,
-        id: f,
+        id: d,
         idIsStable: y,
         onResize: g ? L : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
-          defaultSize: s,
+          defaultSize: r,
           maxSize: i,
-          minSize: r
+          minSize: a
         }
       });
   }, [
     n,
     o,
-    s,
+    r,
     p,
     g,
-    f,
+    d,
     y,
     i,
-    r,
+    a,
     L,
     S
-  ]), dt(f, d);
-  const P = De(x, f);
-  return /* @__PURE__ */ V(
+  ]), dt(d, f);
+  const P = De(x, d);
+  return /* @__PURE__ */ W(
     "div",
     {
       ...h,
       "data-panel": !0,
-      "data-testid": f,
-      id: f,
+      "data-testid": d,
+      id: d,
       ref: m,
       style: {
         ...pt,
@@ -1412,7 +1404,7 @@ function zt({
         // This avoid edge cases like nested iframes
         pointerEvents: `var(${Te})`
       },
-      children: /* @__PURE__ */ V(
+      children: /* @__PURE__ */ W(
         "div",
         {
           className: t,
@@ -1455,28 +1447,28 @@ function mt({
   panelId: n,
   panelIndex: o
 }) {
-  let s, a;
-  const l = e[n], i = t.find(
-    (r) => r.panelId === n
+  let r, s;
+  const c = e[n], i = t.find(
+    (a) => a.panelId === n
   );
   if (i) {
-    const r = i.maxSize, c = a = i.collapsible ? i.collapsedSize : i.minSize, d = [o, o + 1];
-    a = $({
-      layout: j({
-        delta: c - l,
+    const a = i.maxSize, l = s = i.collapsible ? i.collapsedSize : i.minSize, f = [o, o + 1];
+    s = $({
+      layout: V({
+        delta: l - c,
         initialLayout: e,
         panelConstraints: t,
-        pivotIndices: d,
+        pivotIndices: f,
         prevLayout: e,
         trigger: "keyboard"
       }),
       panelConstraints: t
-    })[n], s = $({
-      layout: j({
-        delta: r - l,
+    })[n], r = $({
+      layout: V({
+        delta: a - c,
         initialLayout: e,
         panelConstraints: t,
-        pivotIndices: d,
+        pivotIndices: f,
         prevLayout: e,
         trigger: "keyboard"
       }),
@@ -1485,9 +1477,9 @@ function mt({
   }
   return {
     valueControls: n,
-    valueMax: s,
-    valueMin: a,
-    valueNow: l
+    valueMax: r,
+    valueMin: s,
+    valueNow: c
   };
 }
 function Lt({
@@ -1495,11 +1487,11 @@ function Lt({
   className: t,
   elementRef: n,
   id: o,
-  style: s,
-  ...a
+  style: r,
+  ...s
 }) {
-  const l = ce(o), [i, r] = G({}), [c, d] = G("inactive"), [u, h] = G(null), y = fe(h, n), {
-    id: f,
+  const c = ce(o), [i, a] = G({}), [l, f] = G("inactive"), [u, h] = G(null), y = fe(h, n), {
+    id: d,
     orientation: p,
     registerSeparator: v
   } = de(), m = p === "horizontal" ? "vertical" : "horizontal";
@@ -1507,11 +1499,11 @@ function Lt({
     if (u !== null) {
       const x = {
         element: u,
-        id: l
+        id: c
       }, S = v(x), g = A.addListener(
         "interactionStateChange",
         (P) => {
-          d(
+          f(
             P.state !== "inactive" && P.hitRegions.some(
               (E) => E.separator === x
             ) ? P.state : "inactive"
@@ -1522,11 +1514,11 @@ function Lt({
         (P) => {
           P.forEach(
             ({ derivedPanelConstraints: E, layout: U, separatorToPanels: te }, K) => {
-              if (K.id === f) {
+              if (K.id === d) {
                 const X = te.get(x);
                 if (X) {
                   const Y = X[0], ne = K.panels.indexOf(Y);
-                  r(
+                  a(
                     mt({
                       layout: U,
                       panelConstraints: E,
@@ -1544,10 +1536,10 @@ function Lt({
         g(), L(), S();
       };
     }
-  }, [u, f, l, v]), /* @__PURE__ */ V(
+  }, [u, d, c, v]), /* @__PURE__ */ W(
     "div",
     {
-      ...a,
+      ...s,
       "aria-controls": i.valueControls,
       "aria-orientation": m,
       "aria-valuemax": i.valueMax,
@@ -1555,14 +1547,14 @@ function Lt({
       "aria-valuenow": i.valueNow,
       children: e,
       className: t,
-      "data-separator": c,
-      "data-testid": l,
-      id: l,
+      "data-separator": l,
+      "data-testid": c,
+      id: c,
       ref: y,
       role: "separator",
       style: {
         flexBasis: "auto",
-        ...s,
+        ...r,
         flexGrow: 0,
         flexShrink: 0
       },