react-resizable-panels 4.0.2 → 4.0.4

package/dist/react-resizable-panels.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as W } from "react/jsx-runtime";
-import { useId as $e, useLayoutEffect as Ne, useEffect as _e, useRef as T, useCallback as xe, createContext as He, useImperativeHandle as ze, useState as G, useMemo as be, useSyncExternalStore as Fe, useContext as We } from "react";
+import { useId as $e, useLayoutEffect as Ne, useEffect as _e, useRef as T, useCallback as xe, createContext as Fe, useImperativeHandle as ze, useState as G, useMemo as be, useSyncExternalStore as He, useContext as We } from "react";
 function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
@@ -22,41 +22,41 @@ function we(e) {
   const { element: t, orientation: n, panels: o, separators: r } = e, s = se(
     n,
     Array.from(t.children).filter((l) => l instanceof HTMLElement).map((l) => ({ element: l }))
-  ).map(({ element: l }) => l), u = [];
+  ).map(({ element: l }) => l), c = [];
   let i, a;
   for (const l of s) {
     const f = o.find(
-      (c) => c.element === l
+      (u) => u.element === l
     );
     if (f) {
       if (i) {
-        const c = i.element.getBoundingClientRect(), m = l.getBoundingClientRect();
-        u.push({
+        const u = i.element.getBoundingClientRect(), m = l.getBoundingClientRect();
+        c.push({
           group: e,
           panels: [i, f],
           separator: a,
           rect: n === "horizontal" ? new DOMRect(
-            c.right,
+            u.right,
             m.top,
-            m.left - c.right,
+            m.left - u.right,
             m.height
           ) : new DOMRect(
             m.left,
-            c.bottom,
+            u.bottom,
             m.width,
-            m.top - c.bottom
+            m.top - u.bottom
           )
         });
       }
       i = f, a = void 0;
     } else {
-      const c = r.find(
+      const u = r.find(
         (m) => m.element === l
       );
-      c ? a = c : (i = void 0, a = void 0);
+      u ? a = u : (i = void 0, a = void 0);
     }
   }
-  return u;
+  return c;
 }
 function Ue(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
@@ -130,14 +130,14 @@ function pe(e) {
   const { panels: t } = e, n = ae({ group: e });
   return t.map((o) => {
     const { element: r, panelConstraints: s } = o;
-    let u = 0;
+    let c = 0;
     if (s.collapsedSize) {
       const f = J({
         groupSize: n,
         panelElement: r,
         styleProp: s.collapsedSize
       });
-      u = I(f / n * 100);
+      c = I(f / n * 100);
     }
     let i;
     if (s.defaultSize) {
@@ -167,7 +167,7 @@ function pe(e) {
       l = I(f / n * 100);
     }
     return {
-      collapsedSize: u,
+      collapsedSize: c,
       collapsible: s.collapsible === !0,
       defaultSize: i,
       minSize: a,
@@ -191,9 +191,9 @@ class qe {
         o[0].call(null, n);
       else {
         let r = !1, s = null;
-        const u = Array.from(o);
-        for (let i = 0; i < u.length; i++) {
-          const a = u[i];
+        const c = Array.from(o);
+        for (let i = 0; i < c.length; i++) {
+          const a = c[i];
           try {
             a.call(null, n);
           } catch (l) {
@@ -240,16 +240,16 @@ function C(e) {
   }, 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: u } = n.mountedGroups.get(r) ?? {};
-        if (u) {
+        const { layout: c } = n.mountedGroups.get(r) ?? {};
+        if (c) {
           const i = w(
             s.collapsedSize,
             o.layout[s.panelId]
           ), a = w(
             s.collapsedSize,
-            u[s.panelId]
+            c[s.panelId]
           );
-          i && !a && (r.inMemoryLastExpandedPanelSizes[s.panelId] = u[s.panelId]);
+          i && !a && (r.inMemoryLastExpandedPanelSizes[s.panelId] = c[s.panelId]);
         }
       }
     });
@@ -287,11 +287,11 @@ function Je({
     return null;
   switch (n) {
     case "active": {
-      const s = (e & Le) !== 0, u = (e & Pe) !== 0, i = (e & Ee) !== 0, a = (e & Re) !== 0;
+      const s = (e & Le) !== 0, c = (e & Pe) !== 0, i = (e & Ee) !== 0, a = (e & Re) !== 0;
       if (e) {
         if (s)
           return i ? "se-resize" : a ? "ne-resize" : "e-resize";
-        if (u)
+        if (c)
           return i ? "sw-resize" : a ? "nw-resize" : "w-resize";
         if (i)
           return "s-resize";
@@ -303,7 +303,7 @@ function Je({
   }
   return o > 0 && r > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
-let ie = null, k;
+let ie, k;
 function le() {
   k === void 0 && (k = new CSSStyleSheet(), document.adoptedStyleSheets = [k]);
   const { cursorFlags: e, interactionState: t } = O();
@@ -312,16 +312,16 @@ function le() {
     case "hover": {
       const n = Je({
         cursorFlags: e,
-        groups: t.hitRegions.map((o) => o.group),
+        groups: t.hitRegions.map((r) => r.group),
         state: t.state
-      });
-      if (ie === n)
+      }), o = `*{cursor: ${n} !important; ${t.state === "active" ? "touch-action: none;" : ""} }`;
+      if (ie === o)
         return;
-      ie = n, n ? k.cssRules.length === 0 ? k.insertRule(`*{cursor: ${n} !important;}`) : k.replaceSync(`*{cursor: ${n} !important;}`) : k.cssRules.length === 1 && k.deleteRule(0);
+      ie = o, n ? k.cssRules.length === 0 ? k.insertRule(o) : k.replaceSync(o) : k.cssRules.length === 1 && k.deleteRule(0);
       break;
     }
     case "inactive": {
-      ie = null, k.cssRules.length === 1 && k.deleteRule(0);
+      ie = void 0, k.cssRules.length === 1 && k.deleteRule(0);
       break;
     }
   }
@@ -337,7 +337,7 @@ function Qe(e, t) {
 function j(e, t) {
   return w(e, t) ? 0 : e > t ? 1 : -1;
 }
-function H({
+function F({
   panelConstraints: e,
   size: t
 }) {
@@ -349,8 +349,8 @@ function H({
   } = e;
   if (j(t, s) < 0)
     if (o) {
-      const u = (n + s) / 2;
-      j(t, u) < 0 ? t = n : t = s;
+      const c = (n + s) / 2;
+      j(t, c) < 0 ? t = n : t = s;
     } else
       t = s;
   return t = Math.min(r, t), t = I(t), t;
@@ -365,9 +365,9 @@ function B({
 }) {
   if (w(e, 0))
     return t;
-  const u = Object.values(t), i = Object.values(r), a = [...u], [l, f] = o;
+  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 c = 0;
+  let u = 0;
   if (s === "keyboard") {
     {
       const d = e < 0 ? f : l, p = n[d];
@@ -381,7 +381,7 @@ function B({
         minSize: g = 0
       } = p;
       if (h) {
-        const x = u[d];
+        const x = c[d];
         if (z(
           x != null,
           `Previous layout not found for panel index ${d}`
@@ -403,7 +403,7 @@ function B({
         minSize: g = 0
       } = p;
       if (h) {
-        const x = u[d];
+        const x = c[d];
         if (z(
           x != null,
           `Previous layout not found for panel index ${d}`
@@ -418,12 +418,12 @@ function B({
     const d = e < 0 ? 1 : -1;
     let p = e < 0 ? f : l, v = 0;
     for (; ; ) {
-      const g = u[p];
+      const g = c[p];
       z(
         g != null,
         `Previous layout not found for panel index ${p}`
       );
-      const y = H({
+      const y = F({
         panelConstraints: n[p],
         size: 100
       }) - g;
@@ -436,16 +436,16 @@ function B({
   {
     let p = e < 0 ? l : f;
     for (; p >= 0 && p < n.length; ) {
-      const v = Math.abs(e) - Math.abs(c), h = u[p];
+      const v = Math.abs(e) - Math.abs(u), h = c[p];
       z(
         h != null,
         `Previous layout not found for panel index ${p}`
       );
-      const g = h - v, x = H({
+      const g = h - v, x = F({
         panelConstraints: n[p],
         size: g
       });
-      if (!w(h, x) && (c += h - x, a[p] = x, c.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!w(h, x) && (u += h - x, a[p] = x, u.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
@@ -455,12 +455,12 @@ function B({
   if (Qe(i, a))
     return r;
   {
-    const d = e < 0 ? f : l, p = u[d];
+    const d = e < 0 ? f : l, p = c[d];
     z(
       p != null,
       `Previous layout not found for panel index ${d}`
     );
-    const v = p + c, h = H({
+    const v = p + u, h = F({
       panelConstraints: n[d],
       size: v
     });
@@ -472,7 +472,7 @@ function B({
           L != null,
           `Previous layout not found for panel index ${y}`
         );
-        const P = L + g, E = H({
+        const P = L + g, E = F({
           panelConstraints: n[y],
           size: P
         });
@@ -507,9 +507,9 @@ function Ce({
   pointerDownAtPoint: r
 }) {
   let s = 0;
-  const u = new Map(o);
+  const c = new Map(o);
   t.forEach((i) => {
-    const { disableCursor: a, element: l, orientation: f, panels: c } = i.group;
+    const { disableCursor: a, element: l, orientation: f, panels: u } = i.group;
     let m = 0;
     r ? f === "horizontal" ? m = (e.clientX - r.x) / l.offsetWidth * 100 : m = (e.clientY - r.y) / l.offsetHeight * 100 : f === "horizontal" ? m = e.clientX < 0 ? -100 : 100 : m = e.clientY < 0 ? -100 : 100;
     const S = n.get(i.group), {
@@ -522,7 +522,7 @@ function Ce({
         delta: m,
         initialLayout: S,
         panelConstraints: d,
-        pivotIndices: i.panels.map((g) => c.indexOf(g)),
+        pivotIndices: i.panels.map((g) => u.indexOf(g)),
         prevLayout: p,
         trigger: "mouse-or-touch"
       });
@@ -539,7 +539,7 @@ function Ce({
             }
           }
       } else {
-        u.set(i.group, {
+        c.set(i.group, {
           derivedPanelConstraints: d,
           layout: h,
           separatorToPanels: v
@@ -550,7 +550,7 @@ function Ce({
     }
   }), C({
     cursorFlags: s,
-    mountedGroups: u
+    mountedGroups: c
   }), le();
 }
 function he(e) {
@@ -558,6 +558,8 @@ function he(e) {
     return;
   if (e.relatedTarget !== null)
     return;
+  if (e.clientX === 0 && e.clientY === 0)
+    return;
   const { interactionState: t, mountedGroups: n } = O();
   switch (t.state) {
     case "active":
@@ -603,7 +605,7 @@ function $({
   for (let i = 0; i < t.length; i++) {
     const a = o[i];
     z(a != null, `No layout data found for index ${i}`);
-    const l = H({
+    const l = F({
       panelConstraints: t[i],
       size: a
     });
@@ -613,15 +615,15 @@ function $({
     for (let i = 0; i < t.length; i++) {
       const a = o[i];
       z(a != null, `No layout data found for index ${i}`);
-      const l = a + s, f = H({
+      const l = a + s, f = F({
         panelConstraints: t[i],
         size: l
       });
       if (a !== f && (s -= f - a, o[i] = f, w(s, 0)))
         break;
     }
-  const u = Object.keys(e);
-  return o.reduce((i, a, l) => (i[u[l]] = a, i), {});
+  const c = Object.keys(e);
+  return o.reduce((i, a, l) => (i[c[l]] = a, i), {});
 }
 function Me({
   groupId: e
@@ -643,7 +645,7 @@ function Me({
         derivedPanelConstraints: o,
         group: r,
         layout: s,
-        separatorToPanels: u
+        separatorToPanels: c
       } = t(), i = $({
         layout: n,
         panelConstraints: o
@@ -652,7 +654,7 @@ function Me({
         mountedGroups: new Map(a.mountedGroups).set(r, {
           derivedPanelConstraints: o,
           layout: i,
-          separatorToPanels: u
+          separatorToPanels: c
         })
       })), i;
     }
@@ -664,24 +666,24 @@ function Ge(e) {
 }
 function D(e, t) {
   const n = ee(e), o = Ge(n), r = n.separators.find(
-    (c) => c.element === e
+    (u) => u.element === e
   );
   z(r, "Matching separator not found");
   const s = o.separatorToPanels.get(r);
   z(s, "Matching panels not found");
-  const u = s.map((c) => n.panels.indexOf(c)), a = Me({ groupId: n.id }).getLayout(), l = B({
+  const c = s.map((u) => n.panels.indexOf(u)), a = Me({ groupId: n.id }).getLayout(), l = B({
     delta: t,
     initialLayout: a,
     panelConstraints: o.derivedPanelConstraints,
-    pivotIndices: u,
+    pivotIndices: c,
     prevLayout: a,
     trigger: "keyboard"
   }), f = $({
     layout: l,
     panelConstraints: o.derivedPanelConstraints
   });
-  U(a, f) || C((c) => ({
-    mountedGroups: new Map(c.mountedGroups).set(n, {
+  U(a, f) || C((u) => ({
+    mountedGroups: new Map(u.mountedGroups).set(n, {
       derivedPanelConstraints: o.derivedPanelConstraints,
       layout: f,
       separatorToPanels: o.separatorToPanels
@@ -716,18 +718,18 @@ function ve(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = ee(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: u } = Ge(o), i = o.separators.find(
-          (c) => c.element === t
+        const o = ee(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: c } = Ge(o), i = o.separators.find(
+          (u) => u.element === t
         );
         z(i, "Matching separator not found");
-        const a = u.get(i);
+        const a = c.get(i);
         z(a, "Matching panels not found");
         const l = a[0], f = r.find(
-          (c) => c.panelId === l.id
+          (u) => u.panelId === l.id
         );
         if (z(f, "Panel metadata not found"), f.collapsible) {
-          const c = s[l.id], m = f.collapsedSize === c ? o.inMemoryLastExpandedPanelSizes[l.id] ?? f.minSize : f.collapsedSize;
-          D(t, m - c);
+          const u = s[l.id], m = f.collapsedSize === u ? o.inMemoryLastExpandedPanelSizes[l.id] ?? f.minSize : f.collapsedSize;
+          D(t, m - u);
         }
         break;
       }
@@ -739,8 +741,8 @@ function ve(e) {
           (a) => a === e.currentTarget
         );
         z(s !== null, "Index not found");
-        const u = e.shiftKey ? s > 0 ? s - 1 : r.length - 1 : s + 1 < r.length ? s + 1 : 0;
-        r[u].focus();
+        const c = e.shiftKey ? s > 0 ? s - 1 : r.length - 1 : s + 1 < r.length ? s + 1 : 0;
+        r[c].focus();
         break;
       }
       case "Home": {
@@ -767,14 +769,14 @@ function tt(e, t, n) {
     y: 1 / 0
   };
   for (const s of t) {
-    const u = et(n, s.rect);
+    const c = et(n, s.rect);
     switch (e) {
       case "horizontal": {
-        u.x <= r.x && (o = s, r = u);
+        c.x <= r.x && (o = s, r = c);
         break;
       }
       case "vertical": {
-        u.y <= r.y && (o = s, r = u);
+        c.y <= r.y && (o = s, r = c);
         break;
       }
     }
@@ -793,7 +795,7 @@ function Ie(e, t) {
   return t.forEach((o, r) => {
     if (r.disabled)
       return;
-    const s = nt() ? me.coarse : me.precise, u = we(r), i = tt(r.orientation, u, {
+    const s = nt() ? me.coarse : me.precise, c = we(r), i = tt(r.orientation, c, {
       x: e.clientX,
       y: e.clientY
     });
@@ -803,17 +805,18 @@ function Ie(e, t) {
 function ge(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = O(), n = Ie(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), u = /* @__PURE__ */ new Map();
-  n.forEach((i) => {
-    o.add(i.group), i.panels.forEach((l) => {
-      r.add(l);
-    }), i.separator && s.add(i.separator);
-    const a = t.get(i.group);
-    a && u.set(i.group, a.layout);
+  const { mountedGroups: t } = O(), n = Ie(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map();
+  let i = !1;
+  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: u,
+      initialLayoutMap: c,
       pointerDownAtPoint: { x: e.clientX, y: e.clientY },
       state: "active"
     }
@@ -883,15 +886,15 @@ function ot(e) {
   for (const s of e)
     if (s.defaultSize !== void 0) {
       t++;
-      const u = I(s.defaultSize);
-      n += u, o[s.panelId] = u;
+      const c = I(s.defaultSize);
+      n += c, o[s.panelId] = c;
     } else
       o[s.panelId] = void 0;
   const r = e.length - t;
   if (r !== 0) {
     const s = I((100 - n) / r);
-    for (const u of e)
-      u.defaultSize === void 0 && (o[u.panelId] = s);
+    for (const c of e)
+      c.defaultSize === void 0 && (o[c.panelId] = s);
   }
   return o;
 }
@@ -899,7 +902,7 @@ function it(e, t, n) {
   const o = n[0];
   if (!o)
     return;
-  const r = e.panels.find((u) => u.element === t);
+  const r = e.panels.find((c) => c.element === t);
   if (!r || !r.onResize)
     return;
   const s = ae({ group: e });
@@ -919,8 +922,8 @@ function st(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(), r = new ResizeObserver((c) => {
-    for (const m of c) {
+  const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), r = new ResizeObserver((u) => {
+    for (const m of u) {
       const { borderBoxSize: S, target: d } = m;
       d === e.element ? t && C((p) => {
         const v = p.mountedGroups.get(e);
@@ -941,17 +944,17 @@ function st(e) {
       }) : it(e, d, S);
     }
   });
-  r.observe(e.element), e.panels.forEach((c) => {
+  r.observe(e.element), e.panels.forEach((u) => {
     z(
-      !n.has(c.id),
-      `Panel ids must be unique; id "${c.id}" was used more than once`
-    ), n.add(c.id), c.onResize && r.observe(c.element);
+      !n.has(u.id),
+      `Panel ids must be unique; id "${u.id}" was used more than once`
+    ), n.add(u.id), u.onResize && r.observe(u.element);
   });
-  const s = pe(e), u = e.panels.map(({ id: c }) => c).join(","), i = e.inMemoryLayouts[u] ?? e.defaultLayout ?? ot(s), a = $({
+  const s = pe(e), c = e.panels.map(({ id: u }) => u).join(","), i = e.inMemoryLayouts[c] ?? e.defaultLayout ?? ot(s), a = $({
     layout: i,
     panelConstraints: s
-  }), l = we(e), f = C((c) => ({
-    mountedGroups: new Map(c.mountedGroups).set(e, {
+  }), l = we(e), f = C((u) => ({
+    mountedGroups: new Map(u.mountedGroups).set(e, {
       derivedPanelConstraints: s,
       layout: a,
       separatorToPanels: new Map(
@@ -959,11 +962,11 @@ function st(e) {
       )
     })
   }));
-  return e.element.addEventListener("pointerleave", he), e.separators.forEach((c) => {
+  return e.element.addEventListener("pointerleave", he), e.separators.forEach((u) => {
     z(
-      !o.has(c.id),
-      `Separator ids must be unique; id "${c.id}" was used more than once`
-    ), o.add(c.id), c.element.addEventListener("keydown", ve);
+      !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", ve);
   }), f.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ge), window.addEventListener("pointermove", ye), window.addEventListener("pointerup", Se)), function() {
     t = !1;
     const m = C((S) => {
@@ -975,19 +978,19 @@ function st(e) {
     }), m.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ge), window.removeEventListener("pointermove", ye), window.removeEventListener("pointerup", Se)), r.disconnect();
   };
 }
-function ue(e) {
+function ce(e) {
   const t = $e();
   return `${e ?? t}`;
 }
-const F = typeof window < "u" ? Ne : _e;
-function ce(e) {
+const H = typeof window < "u" ? Ne : _e;
+function ue(e) {
   const t = T(e);
-  return F(() => {
+  return H(() => {
     t.current = e;
   }, [e]), xe((n) => t.current?.(n), [t]);
 }
 function fe(...e) {
-  return ce((t) => {
+  return ue((t) => {
     e.forEach((n) => {
       if (n)
         switch (typeof n) {
@@ -1008,13 +1011,13 @@ function Oe(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 Te = He(null);
+const Te = Fe(null);
 function rt(e, t) {
   const n = T({
     getLayout: () => ({}),
     setLayout: Ze
   });
-  ze(t, () => n.current, []), F(() => {
+  ze(t, () => n.current, []), H(() => {
     Object.assign(
       n.current,
       Me({ groupId: e })
@@ -1028,17 +1031,17 @@ function ht({
   disableCursor: o,
   disabled: r,
   elementRef: s,
-  groupRef: u,
+  groupRef: c,
   id: i,
   onLayoutChange: a,
   orientation: l = "horizontal",
   style: f,
-  ...c
+  ...u
 }) {
-  const m = T({}), S = ce((b) => {
+  const m = T({}), S = ue((b) => {
     U(m.current, b) || (m.current = b, a?.(b));
-  }), d = ue(i), [p, v] = G(!1), [h, g] = G(null), [x, y] = G(n ?? {}), [L, P] = G([]), [E, K] = G([]), te = T({}), V = T({}), X = fe(g, s);
-  rt(d, u);
+  }), d = ce(i), [p, v] = G(!1), [h, g] = G(null), [x, y] = G(n ?? {}), [L, P] = G([]), [E, K] = G([]), te = T({}), V = T({}), X = fe(g, s);
+  rt(d, c);
   const Y = be(
     () => ({
       id: d,
@@ -1056,7 +1059,7 @@ function ht({
     }),
     [d, l]
   );
-  F(() => {
+  H(() => {
     if (h !== null && L.length > 0) {
       const b = {
         defaultLayout: n,
@@ -1118,7 +1121,7 @@ function ht({
   return /* @__PURE__ */ W(Te.Provider, { value: Y, children: /* @__PURE__ */ W(
     "div",
     {
-      ...c,
+      ...u,
       "aria-orientation": l,
       className: t,
       "data-group": !0,
@@ -1155,12 +1158,12 @@ function vt({
   groupId: e,
   storage: t
 }) {
-  const n = Fe(
+  const n = He(
     lt,
     () => t.getItem(re(e)),
     () => t.getItem(re(e))
   ), o = be(
-    () => n ? JSON.parse(n) : null,
+    () => n ? JSON.parse(n) : void 0,
     [n]
   ), r = xe(
     (s) => at({
@@ -1192,7 +1195,7 @@ function de() {
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
   ), e;
 }
-function ut({
+function ct({
   groupId: e,
   panelId: t
 }) {
@@ -1200,10 +1203,10 @@ function ut({
     const { mountedGroups: i } = O();
     for (const [
       a,
-      { derivedPanelConstraints: l, layout: f, separatorToPanels: c }
+      { derivedPanelConstraints: l, layout: f, separatorToPanels: u }
     ] of i)
       if (a.id === e)
-        return { derivedPanelConstraints: l, group: a, layout: f, separatorToPanels: c };
+        return { derivedPanelConstraints: l, group: a, layout: f, separatorToPanels: u };
     throw Error(`Group ${e} not found`);
   }, o = () => {
     const i = n().derivedPanelConstraints.find(
@@ -1222,27 +1225,27 @@ function ut({
     if (i !== void 0)
       return i;
     throw Error(`Layout not found for Panel ${t}`);
-  }, u = (i) => {
+  }, c = (i) => {
     const a = s();
     if (i === a)
       return;
     const {
       derivedPanelConstraints: l,
       group: f,
-      layout: c,
+      layout: u,
       separatorToPanels: m
     } = n(), S = f.panels.findIndex((h) => h.id === t), d = S === f.panels.length - 1, p = B({
       delta: d ? a - i : i - a,
-      initialLayout: c,
+      initialLayout: u,
       panelConstraints: l,
       pivotIndices: d ? [S - 1, S] : [S, S + 1],
-      prevLayout: c,
+      prevLayout: u,
       trigger: "imperative-api"
     }), v = $({
       layout: p,
       panelConstraints: l
     });
-    U(c, v) || C((h) => ({
+    U(u, v) || C((h) => ({
       mountedGroups: new Map(h.mountedGroups).set(f, {
         derivedPanelConstraints: l,
         layout: v,
@@ -1253,11 +1256,11 @@ function ut({
   return {
     collapse: () => {
       const { collapsible: i, collapsedSize: a } = o(), l = s();
-      i && l !== a && u(a);
+      i && l !== a && c(a);
     },
     expand: () => {
       const { collapsible: i, collapsedSize: a, minSize: l } = o(), f = s();
-      i && f === a && u(l);
+      i && f === a && c(l);
     },
     getSize: () => {
       const { group: i } = n(), a = s(), { element: l } = r(), f = i.orientation === "horizontal" ? l.offsetWidth : l.offsetHeight;
@@ -1275,8 +1278,8 @@ function ut({
         let l;
         switch (typeof i) {
           case "number": {
-            const { group: f } = n(), c = ae({ group: f });
-            l = I(i / c * 100);
+            const { group: f } = n(), u = ae({ group: f });
+            l = I(i / u * 100);
             break;
           }
           case "string": {
@@ -1284,12 +1287,12 @@ function ut({
             break;
           }
         }
-        u(l);
+        c(l);
       }
     }
   };
 }
-function ct(e, t) {
+function ut(e, t) {
   const { id: n } = de(), o = T({
     collapse: oe,
     expand: oe,
@@ -1300,10 +1303,10 @@ function ct(e, t) {
     isCollapsed: () => !1,
     resize: oe
   });
-  ze(t, () => o.current, []), F(() => {
+  ze(t, () => o.current, []), H(() => {
     Object.assign(
       o.current,
-      ut({ groupId: n, panelId: e })
+      ct({ groupId: n, panelId: e })
     );
   });
 }
@@ -1314,18 +1317,18 @@ function St({
   collapsible: o = !1,
   defaultSize: r,
   elementRef: s,
-  id: u,
+  id: c,
   maxSize: i = "100",
   minSize: a = "0",
   onResize: l,
   panelRef: f,
-  style: c,
+  style: u,
   ...m
 }) {
-  const S = !!u, d = ue(u), [p, v] = G(null), h = fe(v, s), { id: g, registerPanel: x } = de(), y = l !== null, L = ce((E) => {
-    l?.(E, u);
+  const S = !!c, d = ce(c), [p, v] = G(null), h = fe(v, s), { id: g, registerPanel: x } = de(), y = l !== null, L = ue((E) => {
+    l?.(E, c);
   });
-  F(() => {
+  H(() => {
     if (p !== null)
       return x({
         element: p,
@@ -1352,7 +1355,7 @@ function St({
     a,
     L,
     x
-  ]), ct(d, f);
+  ]), ut(d, f);
   const P = Oe(g, d);
   return /* @__PURE__ */ W(
     "div",
@@ -1380,7 +1383,7 @@ function St({
           style: {
             width: "100%",
             height: "100%",
-            ...c
+            ...u
           },
           children: e
         }
@@ -1417,14 +1420,14 @@ function dt({
   panelIndex: o
 }) {
   let r, s;
-  const u = e[n], i = t.find(
+  const c = e[n], i = t.find(
     (a) => a.panelId === n
   );
   if (i) {
     const a = i.maxSize, l = s = i.collapsible ? i.collapsedSize : i.minSize, f = [o, o + 1];
     s = $({
       layout: B({
-        delta: l - u,
+        delta: l - c,
         initialLayout: e,
         panelConstraints: t,
         pivotIndices: f,
@@ -1434,7 +1437,7 @@ function dt({
       panelConstraints: t
     })[n], r = $({
       layout: B({
-        delta: a - u,
+        delta: a - c,
         initialLayout: e,
         panelConstraints: t,
         pivotIndices: f,
@@ -1448,7 +1451,7 @@ function dt({
     valueControls: n,
     valueMax: r,
     valueMin: s,
-    valueNow: u
+    valueNow: c
   };
 }
 function bt({
@@ -1459,16 +1462,16 @@ function bt({
   style: r,
   ...s
 }) {
-  const u = ue(o), [i, a] = G({}), [l, f] = G("inactive"), [c, m] = G(null), S = fe(m, n), {
+  const c = ce(o), [i, a] = G({}), [l, f] = G("inactive"), [u, m] = G(null), S = fe(m, n), {
     id: d,
     orientation: p,
     registerSeparator: v
   } = de(), h = p === "horizontal" ? "vertical" : "horizontal";
-  return F(() => {
-    if (c !== null) {
+  return H(() => {
+    if (u !== null) {
       const g = {
-        element: c,
-        id: u
+        element: u,
+        id: c
       }, x = v(g), y = A.addListener(
         "interactionStateChange",
         (P) => {
@@ -1505,7 +1508,7 @@ function bt({
         y(), L(), x();
       };
     }
-  }, [c, d, u, v]), /* @__PURE__ */ W(
+  }, [u, d, c, v]), /* @__PURE__ */ W(
     "div",
     {
       ...s,
@@ -1517,8 +1520,8 @@ function bt({
       children: e,
       className: t,
       "data-separator": l,
-      "data-testid": u,
-      id: u,
+      "data-testid": c,
+      id: c,
       ref: S,
       role: "separator",
       style: {