react-resizable-panels 4.0.1 → 4.0.3

package/dist/react-resizable-panels.js

@@ -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";
@@ -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,7 +418,7 @@ 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}`
@@ -436,7 +436,7 @@ 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}`
@@ -445,7 +445,7 @@ function B({
         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 = H({
       panelConstraints: n[d],
       size: v
     });
@@ -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) {
@@ -620,8 +620,8 @@ function $({
       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 +643,7 @@ function Me({
         derivedPanelConstraints: o,
         group: r,
         layout: s,
-        separatorToPanels: u
+        separatorToPanels: c
       } = t(), i = $({
         layout: n,
         panelConstraints: o
@@ -652,7 +652,7 @@ function Me({
         mountedGroups: new Map(a.mountedGroups).set(r, {
           derivedPanelConstraints: o,
           layout: i,
-          separatorToPanels: u
+          separatorToPanels: c
         })
       })), i;
     }
@@ -664,24 +664,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 +716,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 +739,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 +767,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 +793,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 +803,17 @@ 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();
+  const { mountedGroups: t } = O(), n = Ie(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), c = /* @__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);
+    a && c.set(i.group, a.layout);
   }), C({
     interactionState: {
       hitRegions: n,
-      initialLayoutMap: u,
+      initialLayoutMap: c,
       pointerDownAtPoint: { x: e.clientX, y: e.clientY },
       state: "active"
     }
@@ -883,15 +883,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 +899,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 +919,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 +941,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 +959,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 +975,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) {
+function ue(e) {
   const t = T(e);
   return F(() => {
     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) {
@@ -1028,17 +1028,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,
@@ -1118,7 +1118,7 @@ function ht({
   return /* @__PURE__ */ W(Te.Provider, { value: Y, children: /* @__PURE__ */ W(
     "div",
     {
-      ...c,
+      ...u,
       "aria-orientation": l,
       className: t,
       "data-group": !0,
@@ -1160,7 +1160,7 @@ function vt({
     () => 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 +1192,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 +1200,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 +1222,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 +1253,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 +1275,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 +1284,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,
@@ -1303,7 +1303,7 @@ function ct(e, t) {
   ze(t, () => o.current, []), F(() => {
     Object.assign(
       o.current,
-      ut({ groupId: n, panelId: e })
+      ct({ groupId: n, panelId: e })
     );
   });
 }
@@ -1314,16 +1314,16 @@ 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(() => {
     if (p !== null)
@@ -1352,7 +1352,7 @@ function St({
     a,
     L,
     x
-  ]), ct(d, f);
+  ]), ut(d, f);
   const P = Oe(g, d);
   return /* @__PURE__ */ W(
     "div",
@@ -1380,7 +1380,7 @@ function St({
           style: {
             width: "100%",
             height: "100%",
-            ...c
+            ...u
           },
           children: e
         }
@@ -1417,14 +1417,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 +1434,7 @@ function dt({
       panelConstraints: t
     })[n], r = $({
       layout: B({
-        delta: a - u,
+        delta: a - c,
         initialLayout: e,
         panelConstraints: t,
         pivotIndices: f,
@@ -1448,7 +1448,7 @@ function dt({
     valueControls: n,
     valueMax: r,
     valueMin: s,
-    valueNow: u
+    valueNow: c
   };
 }
 function bt({
@@ -1459,16 +1459,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) {
+    if (u !== null) {
       const g = {
-        element: c,
-        id: u
+        element: u,
+        id: c
       }, x = v(g), y = A.addListener(
         "interactionStateChange",
         (P) => {
@@ -1505,7 +1505,7 @@ function bt({
         y(), L(), x();
       };
     }
-  }, [c, d, u, v]), /* @__PURE__ */ W(
+  }, [u, d, c, v]), /* @__PURE__ */ W(
     "div",
     {
       ...s,
@@ -1517,8 +1517,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: {