react-resizable-panels 0.0.63 → 1.0.0-rc.2

package/dist/react-resizable-panels.esm.js

@@ -1,2108 +1,1625 @@
-import * as React from 'react';
+import * as $jhddX$react from "react";
 
-const isBrowser = typeof window !== "undefined";
+const $6901cffdef780071$export$4e09c449d6c407f7 = true;
 
-// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
 
-// eslint-disable-next-line no-restricted-imports
+const $aedbef154d609804$export$df77466336fe5355 = true;
+
 
-const {
-  createElement,
-  createContext,
-  createRef,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} = React;
+// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
+// and limitations with ParcelJS parsing of the useId workaround (used below).
+// For the time being, all react-resizable-panels must import "react" with the "* as React" syntax.
+// To avoid mistakes, we use the ESLint "no-restricted-imports" to prevent "react" imports except in this file.
+// See https://github.com/bvaughn/react-resizable-panels/issues/118
+// eslint-disable-next-line no-restricted-imports
 
+const { createElement: $ef07efbe5fa7d87e$export$c8a8987d4410bf2d, createContext: $ef07efbe5fa7d87e$export$fd42f52fd3ae1109, createRef: $ef07efbe5fa7d87e$export$7d1e3a5e95ceca43, forwardRef: $ef07efbe5fa7d87e$export$257a8862b851cb5b, useCallback: $ef07efbe5fa7d87e$export$35808ee640e87ca7, useContext: $ef07efbe5fa7d87e$export$fae74005e78b1a27, useEffect: $ef07efbe5fa7d87e$export$6d9c69b0de29b591, useImperativeHandle: $ef07efbe5fa7d87e$export$d5a552a76deda3c2, useLayoutEffect: $ef07efbe5fa7d87e$export$e5c5a5f917a5871c, useMemo: $ef07efbe5fa7d87e$export$1538c33de8887b59, useRef: $ef07efbe5fa7d87e$export$b8f5890fc79d6aca, useState: $ef07efbe5fa7d87e$export$60241385465d0a34 } = $jhddX$react;
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
-
-const PanelGroupContext = createContext(null);
-PanelGroupContext.displayName = "PanelGroupContext";
-
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
-
-const wrappedUseId = typeof useId === "function" ? useId : () => null;
-let counter = 0;
-function useUniqueId(idFromParams = null) {
-  const idFromUseId = wrappedUseId();
-  const idRef = useRef(idFromParams || idFromUseId || null);
-  if (idRef.current === null) {
-    idRef.current = "" + counter++;
-  }
-  return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
+const $ef07efbe5fa7d87e$export$f680877a34711e37 = $jhddX$react["useId".toString()];
+
+
+const $e30963544e64b604$export$7d8c6d083caec74a = (0, $ef07efbe5fa7d87e$export$fd42f52fd3ae1109)(null);
+$e30963544e64b604$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
+
+
+
+
+const $3f95d3e171760903$var$useIsomorphicLayoutEffect = (0, $6901cffdef780071$export$4e09c449d6c407f7) ? (0, $ef07efbe5fa7d87e$export$e5c5a5f917a5871c) : ()=>{};
+var $3f95d3e171760903$export$2e2bcd8739ae039 = $3f95d3e171760903$var$useIsomorphicLayoutEffect;
+
+
+
+const $e504a2438473eda9$var$wrappedUseId = typeof (0, $ef07efbe5fa7d87e$export$f680877a34711e37) === "function" ? (0, $ef07efbe5fa7d87e$export$f680877a34711e37) : ()=>null;
+let $e504a2438473eda9$var$counter = 0;
+function $e504a2438473eda9$export$2e2bcd8739ae039(idFromParams = null) {
+    const idFromUseId = $e504a2438473eda9$var$wrappedUseId();
+    const idRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(idFromParams || idFromUseId || null);
+    if (idRef.current === null) idRef.current = "" + $e504a2438473eda9$var$counter++;
+    return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
 }
 
-function PanelWithForwardedRef({
-  children,
-  className: classNameFromProps = "",
-  collapsedSizePercentage,
-  collapsedSizePixels,
-  collapsible,
-  dataAttributes,
-  defaultSizePercentage,
-  defaultSizePixels,
-  forwardedRef,
-  id: idFromProps,
-  maxSizePercentage,
-  maxSizePixels,
-  minSizePercentage,
-  minSizePixels,
-  onCollapse,
-  onExpand,
-  onResize,
-  order,
-  style: styleFromProps,
-  tagName: Type = "div"
-}) {
-  const context = useContext(PanelGroupContext);
-  if (context === null) {
-    throw Error(`Panel components must be rendered within a PanelGroup container`);
-  }
-  const {
-    collapsePanel,
-    expandPanel,
-    getPanelSize,
-    getPanelStyle,
-    groupId,
-    isPanelCollapsed,
-    registerPanel,
-    resizePanel,
-    unregisterPanel
-  } = context;
-  const panelId = useUniqueId(idFromProps);
-  const panelDataRef = useRef({
-    callbacks: {
-      onCollapse,
-      onExpand,
-      onResize
-    },
-    constraints: {
-      collapsedSizePercentage,
-      collapsedSizePixels,
-      collapsible,
-      defaultSizePercentage,
-      defaultSizePixels,
-      maxSizePercentage,
-      maxSizePixels,
-      minSizePercentage,
-      minSizePixels
-    },
-    id: panelId,
-    idIsFromProps: idFromProps !== undefined,
-    order
-  });
-  useRef({
-    didLogMissingDefaultSizeWarning: false
-  });
-  useIsomorphicLayoutEffect(() => {
-    const {
-      callbacks,
-      constraints
-    } = panelDataRef.current;
-    panelDataRef.current.id = panelId;
-    panelDataRef.current.idIsFromProps = idFromProps !== undefined;
-    panelDataRef.current.order = order;
-    callbacks.onCollapse = onCollapse;
-    callbacks.onExpand = onExpand;
-    callbacks.onResize = onResize;
-    constraints.collapsedSizePercentage = collapsedSizePercentage;
-    constraints.collapsedSizePixels = collapsedSizePixels;
-    constraints.collapsible = collapsible;
-    constraints.defaultSizePercentage = defaultSizePercentage;
-    constraints.defaultSizePixels = defaultSizePixels;
-    constraints.maxSizePercentage = maxSizePercentage;
-    constraints.maxSizePixels = maxSizePixels;
-    constraints.minSizePercentage = minSizePercentage;
-    constraints.minSizePixels = minSizePixels;
-  });
-  useIsomorphicLayoutEffect(() => {
-    const panelData = panelDataRef.current;
-    registerPanel(panelData);
-    return () => {
-      unregisterPanel(panelData);
-    };
-  }, [order, panelId, registerPanel, unregisterPanel]);
-  useImperativeHandle(forwardedRef, () => ({
-    collapse: () => {
-      collapsePanel(panelDataRef.current);
-    },
-    expand: () => {
-      expandPanel(panelDataRef.current);
-    },
-    getId() {
-      return panelId;
-    },
-    getSize() {
-      return getPanelSize(panelDataRef.current);
-    },
-    isCollapsed() {
-      return isPanelCollapsed(panelDataRef.current);
-    },
-    isExpanded() {
-      return !isPanelCollapsed(panelDataRef.current);
-    },
-    resize: mixedSizes => {
-      resizePanel(panelDataRef.current, mixedSizes);
+
+
+function $c33df6d7c39fd3ee$export$35d79d63a6984ee1({ children: children, className: classNameFromProps = "", collapsedSize: collapsedSize, collapsible: collapsible, defaultSize: defaultSize, forwardedRef: forwardedRef, id: idFromProps, maxSize: maxSize, minSize: minSize, onCollapse: onCollapse, onExpand: onExpand, onResize: onResize, order: order, style: styleFromProps, tagName: Type = "div", ...rest }) {
+    const context = (0, $ef07efbe5fa7d87e$export$fae74005e78b1a27)((0, $e30963544e64b604$export$7d8c6d083caec74a));
+    if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
+    const { collapsePanel: collapsePanel, expandPanel: expandPanel, getPanelSize: getPanelSize, getPanelStyle: getPanelStyle, groupId: groupId, isPanelCollapsed: isPanelCollapsed, registerPanel: registerPanel, resizePanel: resizePanel, unregisterPanel: unregisterPanel } = context;
+    const panelId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
+    const panelDataRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        callbacks: {
+            onCollapse: onCollapse,
+            onExpand: onExpand,
+            onResize: onResize
+        },
+        constraints: {
+            collapsedSize: collapsedSize,
+            collapsible: collapsible,
+            defaultSize: defaultSize,
+            maxSize: maxSize,
+            minSize: minSize
+        },
+        id: panelId,
+        idIsFromProps: idFromProps !== undefined,
+        order: order
+    });
+    const devWarningsRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        didLogMissingDefaultSizeWarning: false
+    });
+    // Normally we wouldn't log a warning during render,
+    // but effects don't run on the server, so we can't do it there
+    if (0, $aedbef154d609804$export$df77466336fe5355) {
+        if (!devWarningsRef.current.didLogMissingDefaultSizeWarning) {
+            if (!(0, $6901cffdef780071$export$4e09c449d6c407f7) && defaultSize == null) {
+                devWarningsRef.current.didLogMissingDefaultSizeWarning = true;
+                console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+            }
+        }
     }
-  }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current);
-  return createElement(Type, {
-    children,
-    className: classNameFromProps,
-    style: {
-      ...style,
-      ...styleFromProps
-    },
-    ...dataAttributes,
-    // CSS selectors
-    "data-panel": "",
-    "data-panel-id": panelId,
-    "data-panel-group-id": groupId,
-    // e2e test attributes
-    "data-panel-collapsible": undefined,
-    "data-panel-size": undefined
-  });
-}
-const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
-  ...props,
-  forwardedRef: ref
-}));
-PanelWithForwardedRef.displayName = "Panel";
-Panel.displayName = "forwardRef(Panel)";
-
-function convertPixelsToPercentage(pixels, groupSizePixels) {
-  return pixels / groupSizePixels * 100;
+    (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
+        const { callbacks: callbacks, constraints: constraints } = panelDataRef.current;
+        panelDataRef.current.id = panelId;
+        panelDataRef.current.idIsFromProps = idFromProps !== undefined;
+        panelDataRef.current.order = order;
+        callbacks.onCollapse = onCollapse;
+        callbacks.onExpand = onExpand;
+        callbacks.onResize = onResize;
+        constraints.collapsedSize = collapsedSize;
+        constraints.collapsible = collapsible;
+        constraints.defaultSize = defaultSize;
+        constraints.maxSize = maxSize;
+        constraints.minSize = minSize;
+    });
+    (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
+        const panelData = panelDataRef.current;
+        registerPanel(panelData);
+        return ()=>{
+            unregisterPanel(panelData);
+        };
+    }, [
+        order,
+        panelId,
+        registerPanel,
+        unregisterPanel
+    ]);
+    (0, $ef07efbe5fa7d87e$export$d5a552a76deda3c2)(forwardedRef, ()=>({
+            collapse: ()=>{
+                collapsePanel(panelDataRef.current);
+            },
+            expand: ()=>{
+                expandPanel(panelDataRef.current);
+            },
+            getId () {
+                return panelId;
+            },
+            getSize () {
+                return getPanelSize(panelDataRef.current);
+            },
+            isCollapsed () {
+                return isPanelCollapsed(panelDataRef.current);
+            },
+            isExpanded () {
+                return !isPanelCollapsed(panelDataRef.current);
+            },
+            resize: (size)=>{
+                resizePanel(panelDataRef.current, size);
+            }
+        }), [
+        collapsePanel,
+        expandPanel,
+        getPanelSize,
+        isPanelCollapsed,
+        panelId,
+        resizePanel
+    ]);
+    const style = getPanelStyle(panelDataRef.current);
+    return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
+        ...rest,
+        children: children,
+        className: classNameFromProps,
+        style: {
+            ...style,
+            ...styleFromProps
+        },
+        // CSS selectors
+        "data-panel": "",
+        "data-panel-id": panelId,
+        "data-panel-group-id": groupId,
+        // e2e test attributes
+        "data-panel-collapsible": (0, $aedbef154d609804$export$df77466336fe5355) ? collapsible || undefined : undefined,
+        "data-panel-size": (0, $aedbef154d609804$export$df77466336fe5355) ? parseFloat("" + style.flexGrow).toFixed(1) : undefined
+    });
 }
+const $c33df6d7c39fd3ee$export$2ddb90ad54e5f587 = (0, $ef07efbe5fa7d87e$export$257a8862b851cb5b)((props, ref)=>(0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)($c33df6d7c39fd3ee$export$35d79d63a6984ee1, {
+        ...props,
+        forwardedRef: ref
+    }));
+$c33df6d7c39fd3ee$export$35d79d63a6984ee1.displayName = "Panel";
+$c33df6d7c39fd3ee$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
+
+
 
-function convertPixelConstraintsToPercentages(panelConstraints, groupSizePixels) {
-  let {
-    collapsedSizePercentage = 0,
-    collapsedSizePixels,
-    defaultSizePercentage,
-    defaultSizePixels,
-    maxSizePercentage = 100,
-    maxSizePixels,
-    minSizePercentage = 0,
-    minSizePixels
-  } = panelConstraints;
-  const hasPixelConstraints = collapsedSizePixels != null || defaultSizePixels != null || minSizePixels != null || maxSizePixels != null;
-  if (hasPixelConstraints && groupSizePixels <= 0) {
-    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
-    return {
-      collapsedSizePercentage: 0,
-      defaultSizePercentage,
-      maxSizePercentage: 0,
-      minSizePercentage: 0
-    };
-  }
-  if (collapsedSizePixels != null) {
-    collapsedSizePercentage = convertPixelsToPercentage(collapsedSizePixels, groupSizePixels);
-  }
-  if (defaultSizePixels != null) {
-    defaultSizePercentage = convertPixelsToPercentage(defaultSizePixels, groupSizePixels);
-  }
-  if (minSizePixels != null) {
-    minSizePercentage = convertPixelsToPercentage(minSizePixels, groupSizePixels);
-  }
-  if (maxSizePixels != null) {
-    maxSizePercentage = convertPixelsToPercentage(maxSizePixels, groupSizePixels);
-  }
-  return {
-    collapsedSizePercentage,
-    defaultSizePercentage,
-    maxSizePercentage,
-    minSizePercentage
-  };
-}
 
-function computePercentagePanelConstraints(panelConstraintsArray, panelIndex, groupSizePixels) {
-  // All panel constraints, excluding the current one
-  let totalMinConstraints = 0;
-  let totalMaxConstraints = 0;
-  for (let index = 0; index < panelConstraintsArray.length; index++) {
-    if (index !== panelIndex) {
-      const {
-        collapsible
-      } = panelConstraintsArray[index];
-      const {
-        collapsedSizePercentage,
-        maxSizePercentage,
-        minSizePercentage
-      } = convertPixelConstraintsToPercentages(panelConstraintsArray[index], groupSizePixels);
-      totalMaxConstraints += maxSizePercentage;
-      totalMinConstraints += collapsible ? collapsedSizePercentage : minSizePercentage;
+
+
+
+function $5f33910cd46e8ae7$export$a7a9523472993e97(expectedCondition, message = "Assertion failed!") {
+    if (!expectedCondition) {
+        console.error(message);
+        throw Error(message);
     }
-  }
-  const {
-    collapsedSizePercentage,
-    defaultSizePercentage,
-    maxSizePercentage,
-    minSizePercentage
-  } = convertPixelConstraintsToPercentages(panelConstraintsArray[panelIndex], groupSizePixels);
-  return {
-    collapsedSizePercentage,
-    defaultSizePercentage,
-    maxSizePercentage: panelConstraintsArray.length > 1 ? Math.min(maxSizePercentage, 100 - totalMinConstraints) : maxSizePercentage,
-    minSizePercentage: panelConstraintsArray.length > 1 ? Math.max(minSizePercentage, 100 - totalMaxConstraints) : minSizePercentage
-  };
 }
 
-const PRECISION = 10;
-
-function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
-  actual = parseFloat(actual.toFixed(fractionDigits));
-  expected = parseFloat(expected.toFixed(fractionDigits));
-  const delta = actual - expected;
-  if (delta === 0) {
-    return 0;
-  } else {
-    return delta > 0 ? 1 : -1;
-  }
+
+const $a8e83be196252871$export$d6d3992f3becc879 = 10;
+
+
+function $fa17b68d3c9353a3$export$1d75b1119dff900(actual, expected, fractionDigits = (0, $a8e83be196252871$export$d6d3992f3becc879)) {
+    actual = parseFloat(actual.toFixed(fractionDigits));
+    expected = parseFloat(expected.toFixed(fractionDigits));
+    const delta = actual - expected;
+    if (delta === 0) return 0;
+    else return delta > 0 ? 1 : -1;
 }
 
-function fuzzyNumbersEqual(actual, expected, fractionDigits) {
-  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+
+
+function $ee71a189401d6914$export$db9c8bd2fae72e82(actual, expected, fractionDigits) {
+    return (0, $fa17b68d3c9353a3$export$1d75b1119dff900)(actual, expected, fractionDigits) === 0;
 }
 
-// Panel size must be in percentages; pixel values should be pre-converted
-function resizePanel({
-  groupSizePixels,
-  panelConstraints,
-  panelIndex,
-  size
-}) {
-  const hasPixelConstraints = panelConstraints.some(({
-    collapsedSizePixels,
-    defaultSizePixels,
-    minSizePixels,
-    maxSizePixels
-  }) => collapsedSizePixels != null || defaultSizePixels != null || minSizePixels != null || maxSizePixels != null);
-  if (hasPixelConstraints && groupSizePixels <= 0) {
-    console.warn(`WARNING: Invalid group size: ${groupSizePixels}px`);
-    return 0;
-  }
-  let {
-    collapsible
-  } = panelConstraints[panelIndex];
-  const {
-    collapsedSizePercentage,
-    maxSizePercentage,
-    minSizePercentage
-  } = computePercentagePanelConstraints(panelConstraints, panelIndex, groupSizePixels);
-  if (minSizePercentage != null) {
-    if (fuzzyCompareNumbers(size, minSizePercentage) < 0) {
-      if (collapsible) {
-        // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
-        const halfwayPoint = (collapsedSizePercentage + minSizePercentage) / 2;
-        if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
-          size = collapsedSizePercentage;
-        } else {
-          size = minSizePercentage;
-        }
-      } else {
-        size = minSizePercentage;
-      }
+
+
+
+
+function $40f29f7a20511409$export$2f98edcf4006376f({ panelConstraints: panelConstraintsArray, panelIndex: panelIndex, size: size }) {
+    const panelConstraints = panelConstraintsArray[panelIndex];
+    (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints != null);
+    let { collapsedSize: collapsedSize = 0, collapsible: collapsible, maxSize: maxSize = 100, minSize: minSize = 0 } = panelConstraints;
+    if ((0, $fa17b68d3c9353a3$export$1d75b1119dff900)(size, minSize) < 0) {
+        if (collapsible) {
+            // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
+            const halfwayPoint = (collapsedSize + minSize) / 2;
+            if ((0, $fa17b68d3c9353a3$export$1d75b1119dff900)(size, halfwayPoint) < 0) size = collapsedSize;
+            else size = minSize;
+        } else size = minSize;
     }
-  }
-  if (maxSizePercentage != null) {
-    size = Math.min(maxSizePercentage, size);
-  }
-  return size;
+    size = Math.min(maxSize, size);
+    size = parseFloat(size.toFixed((0, $a8e83be196252871$export$d6d3992f3becc879)));
+    return size;
 }
 
-// All units must be in percentages; pixel values should be pre-converted
-function adjustLayoutByDelta({
-  delta,
-  groupSizePixels,
-  layout: prevLayout,
-  panelConstraints,
-  pivotIndices,
-  trigger
-}) {
-  if (fuzzyNumbersEqual(delta, 0)) {
-    return prevLayout;
-  }
-  const nextLayout = [...prevLayout];
-  let deltaApplied = 0;
-
-  //const DEBUG = [];
-  //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
-  //DEBUG.push(`  delta: ${delta}`);
-  //DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
-  //DEBUG.push(`  trigger: ${trigger}`);
-  //DEBUG.push("");
-
-  // A resizing panel affects the panels before or after it.
-  //
-  // A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
-  // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
-  //
-  // A positive delta means the panel(s) immediately before the resize handle should "expand".
-  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
-
-  {
+
+function $fe96098ae4f2a44d$export$7fead5cc734d205b({ delta: delta, layout: prevLayout, panelConstraints: panelConstraintsArray, pivotIndices: pivotIndices, trigger: trigger }) {
+    if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(delta, 0)) return prevLayout;
+    const nextLayout = [
+        ...prevLayout
+    ];
+    const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+    (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(firstPivotIndex != null);
+    (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(secondPivotIndex != null);
+    let deltaApplied = 0;
     // If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
     // We no longer check the halfway threshold because this may prevent the panel from expanding at all.
     if (trigger === "keyboard") {
-      {
-        // Check if we should expand a collapsed panel
-        const index = delta < 0 ? pivotIndices[1] : pivotIndices[0];
-        const constraints = panelConstraints[index];
-        //DEBUG.push(`edge case check 1: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (constraints.collapsible) {
-          const prevSize = prevLayout[index];
-          const {
-            collapsedSizePercentage,
-            minSizePercentage
-          } = computePercentagePanelConstraints(panelConstraints, index, groupSizePixels);
-          if (fuzzyNumbersEqual(prevSize, collapsedSizePercentage)) {
-            const localDelta = minSizePercentage - prevSize;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
-
-            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
-              delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+        {
+            // Check if we should expand a collapsed panel
+            const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+            const panelConstraints = panelConstraintsArray[index];
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
+            //DEBUG.push(`edge case check 1: ${index}`);
+            //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+            if (panelConstraints.collapsible) {
+                const prevSize = prevLayout[index];
+                (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
+                const panelConstraints = panelConstraintsArray[index];
+                (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
+                const { collapsedSize: collapsedSize = 0, minSize: minSize = 0 } = panelConstraints;
+                if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(prevSize, collapsedSize)) {
+                    const localDelta = minSize - prevSize;
+                    //DEBUG.push(`  -> expand delta: ${localDelta}`);
+                    if ((0, $fa17b68d3c9353a3$export$1d75b1119dff900)(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? 0 - localDelta : localDelta;
+                }
             }
-          }
         }
-      }
-
-      {
-        // Check if we should collapse a panel at its minimum size
-        const index = delta < 0 ? pivotIndices[0] : pivotIndices[1];
-        const constraints = panelConstraints[index];
-        //DEBUG.push(`edge case check 2: ${index}`);
-        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (constraints.collapsible) {
-          const prevSize = prevLayout[index];
-          const {
-            collapsedSizePercentage,
-            minSizePercentage
-          } = computePercentagePanelConstraints(panelConstraints, index, groupSizePixels);
-          if (fuzzyNumbersEqual(prevSize, minSizePercentage)) {
-            const localDelta = prevSize - collapsedSizePercentage;
-            //DEBUG.push(`  -> expand delta: ${localDelta}`);
-
-            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
-              delta = delta < 0 ? 0 - localDelta : localDelta;
-              //DEBUG.push(`  -> delta: ${delta}`);
+        {
+            // Check if we should collapse a panel at its minimum size
+            const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+            const panelConstraints = panelConstraintsArray[index];
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
+            const { collapsible: collapsible } = panelConstraints;
+            //DEBUG.push(`edge case check 2: ${index}`);
+            //DEBUG.push(`  -> collapsible? ${collapsible}`);
+            if (collapsible) {
+                const prevSize = prevLayout[index];
+                (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
+                const panelConstraints = panelConstraintsArray[index];
+                (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
+                const { collapsedSize: collapsedSize = 0, minSize: minSize = 0 } = panelConstraints;
+                if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(prevSize, minSize)) {
+                    const localDelta = prevSize - collapsedSize;
+                    //DEBUG.push(`  -> expand delta: ${localDelta}`);
+                    if ((0, $fa17b68d3c9353a3$export$1d75b1119dff900)(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? 0 - localDelta : localDelta;
+                }
             }
-          }
         }
-      }
     }
+    {
+        // Pre-calculate max available delta in the opposite direction of our pivot.
+        // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
+        // If this amount is less than the requested delta, adjust the requested delta.
+        // If this amount is greater than the requested delta, that's useful information too–
+        // as an expanding panel might change from collapsed to min size.
+        const increment = delta < 0 ? 1 : -1;
+        let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        let maxAvailableDelta = 0;
+        //DEBUG.push("pre calc...");
+        while(true){
+            const prevSize = prevLayout[index];
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
+            const maxSafeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
+                panelConstraints: panelConstraintsArray,
+                panelIndex: index,
+                size: 100
+            });
+            const delta = maxSafeSize - prevSize;
+            //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+            maxAvailableDelta += delta;
+            index += increment;
+            if (index < 0 || index >= panelConstraintsArray.length) break;
+        }
+        //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+        const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+        delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+    //DEBUG.push(`  -> adjusted delta: ${delta}`);
     //DEBUG.push("");
-  }
-
-  {
-    // Pre-calculate max available delta in the opposite direction of our pivot.
-    // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
-    // If this amount is less than the requested delta, adjust the requested delta.
-    // If this amount is greater than the requested delta, that's useful information too–
-    // as an expanding panel might change from collapsed to min size.
-
-    const increment = delta < 0 ? 1 : -1;
-    let index = delta < 0 ? pivotIndices[1] : pivotIndices[0];
-    let maxAvailableDelta = 0;
-
-    //DEBUG.push("pre calc...");
-    while (true) {
-      const prevSize = prevLayout[index];
-      const maxSafeSize = resizePanel({
-        groupSizePixels,
-        panelConstraints,
-        panelIndex: index,
-        size: 100
-      });
-      const delta = maxSafeSize - prevSize;
-      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
-
-      maxAvailableDelta += delta;
-      index += increment;
-      if (index < 0 || index >= panelConstraints.length) {
-        break;
-      }
     }
-
-    //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
-    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
-    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
-    //DEBUG.push(`  -> adjusted delta: ${delta}`);
+    {
+        // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
+        const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
+        let index = pivotIndex;
+        while(index >= 0 && index < panelConstraintsArray.length){
+            const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+            const prevSize = prevLayout[index];
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
+            const unsafeSize = prevSize - deltaRemaining;
+            const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
+                panelConstraints: panelConstraintsArray,
+                panelIndex: index,
+                size: unsafeSize
+            });
+            if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(prevSize, safeSize)) {
+                deltaApplied += prevSize - safeSize;
+                nextLayout[index] = safeSize;
+                if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+                    numeric: true
+                }) >= 0) break;
+            }
+            if (delta < 0) index--;
+            else index++;
+        }
+    }
+    //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
+    //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
     //DEBUG.push("");
-  }
-
-  {
-    // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
-
-    const pivotIndex = delta < 0 ? pivotIndices[0] : pivotIndices[1];
-    let index = pivotIndex;
-    while (index >= 0 && index < panelConstraints.length) {
-      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-      const prevSize = prevLayout[index];
-      const unsafeSize = prevSize - deltaRemaining;
-      const safeSize = resizePanel({
-        groupSizePixels,
-        panelConstraints,
-        panelIndex: index,
-        size: unsafeSize
-      });
-      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
-        deltaApplied += prevSize - safeSize;
-        nextLayout[index] = safeSize;
-        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
-          numeric: true
-        }) >= 0) {
-          break;
+    // If we were unable to resize any of the panels panels, return the previous state.
+    // This will essentially bailout and ignore e.g. drags past a panel's boundaries
+    if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(deltaApplied, 0)) //console.log(DEBUG.join("\n"));
+    return prevLayout;
+    {
+        // Now distribute the applied delta to the panels in the other direction
+        const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const prevSize = prevLayout[pivotIndex];
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
+        const unsafeSize = prevSize + deltaApplied;
+        const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
+            panelConstraints: panelConstraintsArray,
+            panelIndex: pivotIndex,
+            size: unsafeSize
+        });
+        // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+        nextLayout[pivotIndex] = safeSize;
+        // Edge case where expanding or contracting one panel caused another one to change collapsed state
+        if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(safeSize, unsafeSize)) {
+            let deltaRemaining = unsafeSize - safeSize;
+            const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+            let index = pivotIndex;
+            while(index >= 0 && index < panelConstraintsArray.length){
+                const prevSize = nextLayout[index];
+                (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
+                const unsafeSize = prevSize + deltaRemaining;
+                const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
+                    panelConstraints: panelConstraintsArray,
+                    panelIndex: index,
+                    size: unsafeSize
+                });
+                if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(prevSize, safeSize)) {
+                    deltaRemaining -= safeSize - prevSize;
+                    nextLayout[index] = safeSize;
+                }
+                if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(deltaRemaining, 0)) break;
+                if (delta > 0) index--;
+                else index++;
+            }
         }
-      }
-      if (delta < 0) {
-        index--;
-      } else {
-        index++;
-      }
     }
-  }
-  //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
-
-  // If we were unable to resize any of the panels panels, return the previous state.
-  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
-  if (fuzzyNumbersEqual(deltaApplied, 0)) {
+    //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+    //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+    //DEBUG.push("");
+    const totalSize = nextLayout.reduce((total, size)=>size + total, 0);
+    //DEBUG.push(`total size: ${totalSize}`);
     //console.log(DEBUG.join("\n"));
-    return prevLayout;
-  }
-  {
-    // Now distribute the applied delta to the panels in the other direction
-    const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
-    const unsafeSize = prevLayout[pivotIndex] + deltaApplied;
-    const safeSize = resizePanel({
-      groupSizePixels,
-      panelConstraints,
-      panelIndex: pivotIndex,
-      size: unsafeSize
-    });
+    if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(totalSize, 100)) return prevLayout;
+    return nextLayout;
+}
 
-    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-    nextLayout[pivotIndex] = safeSize;
 
-    // Edge case where expanding or contracting one panel caused another one to change collapsed state
-    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
-      let deltaRemaining = unsafeSize - safeSize;
-      const pivotIndex = delta < 0 ? pivotIndices[1] : pivotIndices[0];
-      let index = pivotIndex;
-      while (index >= 0 && index < panelConstraints.length) {
-        const prevSize = nextLayout[index];
-        const unsafeSize = prevSize + deltaRemaining;
-        const safeSize = resizePanel({
-          groupSizePixels,
-          panelConstraints,
-          panelIndex: index,
-          size: unsafeSize
-        });
-        if (!fuzzyNumbersEqual(prevSize, safeSize)) {
-          deltaRemaining -= safeSize - prevSize;
-          nextLayout[index] = safeSize;
-        }
-        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
-          break;
-        }
-        if (delta > 0) {
-          index--;
+
+
+function $a662cadf71ffedbc$export$b8372a468ba36f7d({ layout: layout, panelsArray: panelsArray, pivotIndices: pivotIndices }) {
+    let currentMinSize = 0;
+    let currentMaxSize = 100;
+    let totalMinSize = 0;
+    let totalMaxSize = 0;
+    const firstIndex = pivotIndices[0];
+    (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(firstIndex != null);
+    // A panel's effective min/max sizes also need to account for other panel's sizes.
+    panelsArray.forEach((panelData, index)=>{
+        const { constraints: constraints } = panelData;
+        const { maxSize: maxSize = 100, minSize: minSize = 0 } = constraints;
+        if (index === firstIndex) {
+            currentMinSize = minSize;
+            currentMaxSize = maxSize;
         } else {
-          index++;
+            totalMinSize += minSize;
+            totalMaxSize += maxSize;
         }
-      }
-    }
-  }
-  //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //DEBUG.push("");
-
-  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
-  deltaApplied = 100 - totalSize;
-  //DEBUG.push(`total size: ${totalSize}`);
-  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  //console.log(DEBUG.join("\n"));
-
-  if (!fuzzyNumbersEqual(totalSize, 100)) {
-    return prevLayout;
-  }
-  return nextLayout;
+    });
+    const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+    const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+    const valueNow = layout[firstIndex];
+    return {
+        valueMax: valueMax,
+        valueMin: valueMin,
+        valueNow: valueNow
+    };
 }
 
-function assert(expectedCondition, message = "Assertion failed!") {
-  if (!expectedCondition) {
-    console.error(message);
-    throw Error(message);
-  }
-}
 
-function getPercentageSizeFromMixedSizes({
-  sizePercentage,
-  sizePixels
-}, groupSizePixels) {
-  if (sizePercentage != null) {
-    return sizePercentage;
-  } else if (sizePixels != null) {
-    return convertPixelsToPercentage(sizePixels, groupSizePixels);
-  }
-  return undefined;
+function $9196ba7c0d09e3f3$export$63eb605e437b214f(groupId) {
+    return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 
-function calculateAriaValues({
-  groupSizePixels,
-  layout,
-  panelsArray,
-  pivotIndices
-}) {
-  let currentMinSize = 0;
-  let currentMaxSize = 100;
-  let totalMinSize = 0;
-  let totalMaxSize = 0;
-
-  // A panel's effective min/max sizes also need to account for other panel's sizes.
-  panelsArray.forEach((panelData, index) => {
-    var _getPercentageSizeFro, _getPercentageSizeFro2;
-    const {
-      constraints
-    } = panelData;
-    const {
-      maxSizePercentage,
-      maxSizePixels,
-      minSizePercentage,
-      minSizePixels
-    } = constraints;
-    const minSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
-      sizePercentage: minSizePercentage,
-      sizePixels: minSizePixels
-    }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
-    const maxSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
-      sizePercentage: maxSizePercentage,
-      sizePixels: maxSizePixels
-    }, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 100;
-    if (index === pivotIndices[0]) {
-      currentMinSize = minSize;
-      currentMaxSize = maxSize;
-    } else {
-      totalMinSize += minSize;
-      totalMaxSize += maxSize;
-    }
-  });
-  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
-  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
-  const valueNow = layout[pivotIndices[0]];
-  return {
-    valueMax,
-    valueMin,
-    valueNow
-  };
-}
 
-function getResizeHandleElementsForGroup(groupId) {
-  return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+function $a144d12e0d2017d1$export$4c92fedbbc2381ca(groupId, id) {
+    const handles = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
+    const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
+    return index !== null && index !== void 0 ? index : null;
 }
 
-function getResizeHandleElementIndex(groupId, id) {
-  const handles = getResizeHandleElementsForGroup(groupId);
-  const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
-  return index !== null && index !== void 0 ? index : null;
-}
 
-function determinePivotIndices(groupId, dragHandleId) {
-  const index = getResizeHandleElementIndex(groupId, dragHandleId);
-  return index != null ? [index, index + 1] : [-1, -1];
+function $0a239c1e1cd1e940$export$cf92598869f99b8f(groupId, dragHandleId) {
+    const index = (0, $a144d12e0d2017d1$export$4c92fedbbc2381ca)(groupId, dragHandleId);
+    return index != null ? [
+        index,
+        index + 1
+    ] : [
+        -1,
+        -1
+    ];
 }
 
-function getPanelGroupElement(id) {
-  const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
-  if (element) {
-    return element;
-  }
-  return null;
-}
 
-function calculateAvailablePanelSizeInPixels(groupId) {
-  const panelGroupElement = getPanelGroupElement(groupId);
-  if (panelGroupElement == null) {
-    return NaN;
-  }
-  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
-  const resizeHandles = getResizeHandleElementsForGroup(groupId);
-  if (direction === "horizontal") {
-    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
-      return accumulated + handle.offsetWidth;
-    }, 0);
-  } else {
-    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
-      return accumulated + handle.offsetHeight;
-    }, 0);
-  }
+function $18131dcc0be2e4e0$export$4e72aefa594058df(id) {
+    const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
+    if (element) return element;
+    return null;
 }
 
-function getAvailableGroupSizePixels(groupId) {
-  const panelGroupElement = getPanelGroupElement(groupId);
-  if (panelGroupElement == null) {
-    return NaN;
-  }
-  const direction = panelGroupElement.getAttribute("data-panel-group-direction");
-  const resizeHandles = getResizeHandleElementsForGroup(groupId);
-  if (direction === "horizontal") {
-    return panelGroupElement.offsetWidth - resizeHandles.reduce((accumulated, handle) => {
-      return accumulated + handle.offsetWidth;
-    }, 0);
-  } else {
-    return panelGroupElement.offsetHeight - resizeHandles.reduce((accumulated, handle) => {
-      return accumulated + handle.offsetHeight;
-    }, 0);
-  }
-}
 
-function getResizeHandleElement(id) {
-  const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
-  if (element) {
-    return element;
-  }
-  return null;
+
+function $99b0d18e36332b26$export$4c5229c874a62620(id) {
+    const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+    if (element) return element;
+    return null;
 }
 
-function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
-  var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
-  const handle = getResizeHandleElement(handleId);
-  const handles = getResizeHandleElementsForGroup(groupId);
-  const index = handle ? handles.indexOf(handle) : -1;
-  const idBefore = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index]) === null || _panelsArray$index === void 0 ? void 0 : _panelsArray$index.id) !== null && _panelsArray$index$id !== void 0 ? _panelsArray$index$id : null;
-  const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
-  return [idBefore, idAfter];
+
+
+function $1420c4509c675b80$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
+    var _panelsArray_index, _panelsArray_;
+    const handle = (0, $99b0d18e36332b26$export$4c5229c874a62620)(handleId);
+    const handles = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
+    const index = handle ? handles.indexOf(handle) : -1;
+    var _panelsArray_index_id;
+    const idBefore = (_panelsArray_index_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : _panelsArray_index.id) !== null && _panelsArray_index_id !== void 0 ? _panelsArray_index_id : null;
+    var _panelsArray__id;
+    const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
+    return [
+        idBefore,
+        idAfter
+    ];
 }
 
-// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-
-function useWindowSplitterPanelGroupBehavior({
-  committedValuesRef,
-  eagerValuesRef,
-  groupId,
-  layout,
-  panelDataArray,
-  setLayout
-}) {
-  useRef({
-    didWarnAboutMissingResizeHandle: false
-  });
-  useIsomorphicLayoutEffect(() => {
-    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-    const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
-    for (let index = 0; index < panelDataArray.length - 1; index++) {
-      const {
-        valueMax,
-        valueMin,
-        valueNow
-      } = calculateAriaValues({
-        groupSizePixels,
-        layout,
-        panelsArray: panelDataArray,
-        pivotIndices: [index, index + 1]
-      });
-      const resizeHandleElement = resizeHandleElements[index];
-      if (resizeHandleElement == null) ; else {
-        resizeHandleElement.setAttribute("aria-controls", panelDataArray[index].id);
-        resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
-        resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
-        resizeHandleElement.setAttribute("aria-valuenow", "" + Math.round(valueNow));
-      }
-    }
-    return () => {
-      resizeHandleElements.forEach((resizeHandleElement, index) => {
-        resizeHandleElement.removeAttribute("aria-controls");
-        resizeHandleElement.removeAttribute("aria-valuemax");
-        resizeHandleElement.removeAttribute("aria-valuemin");
-        resizeHandleElement.removeAttribute("aria-valuenow");
-      });
-    };
-  }, [groupId, layout, panelDataArray]);
-  useEffect(() => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-    const groupElement = getPanelGroupElement(groupId);
-    assert(groupElement != null, `No group found for id "${groupId}"`);
-    const handles = getResizeHandleElementsForGroup(groupId);
-    const cleanupFunctions = handles.map(handle => {
-      const handleId = handle.getAttribute("data-panel-resize-handle-id");
-      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray);
-      if (idBefore == null || idAfter == null) {
-        return () => {};
-      }
-      const onKeyDown = event => {
-        if (event.defaultPrevented) {
-          return;
-        }
-        switch (event.key) {
-          case "Enter":
-            {
-              event.preventDefault();
-              const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
-              if (index >= 0) {
-                const panelData = panelDataArray[index];
-                const size = layout[index];
-                if (size != null && panelData.constraints.collapsible) {
-                  var _getPercentageSizeFro, _getPercentageSizeFro2;
-                  const groupSizePixels = getAvailableGroupSizePixels(groupId);
-                  const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
-                    sizePercentage: panelData.constraints.collapsedSizePercentage,
-                    sizePixels: panelData.constraints.collapsedSizePixels
-                  }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
-                  const minSize = (_getPercentageSizeFro2 = getPercentageSizeFromMixedSizes({
-                    sizePercentage: panelData.constraints.minSizePercentage,
-                    sizePixels: panelData.constraints.minSizePixels
-                  }, groupSizePixels)) !== null && _getPercentageSizeFro2 !== void 0 ? _getPercentageSizeFro2 : 0;
-                  const nextLayout = adjustLayoutByDelta({
-                    delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-                    groupSizePixels,
-                    layout,
-                    panelConstraints: panelDataArray.map(panelData => panelData.constraints),
-                    pivotIndices: determinePivotIndices(groupId, handleId),
-                    trigger: "keyboard"
-                  });
-                  if (layout !== nextLayout) {
-                    setLayout(nextLayout);
-                  }
+
+
+
+
+function $20152a6c44989ce6$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef, eagerValuesRef: eagerValuesRef, groupId: groupId, layout: layout, panelDataArray: panelDataArray, setLayout: setLayout }) {
+    const devWarningsRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        didWarnAboutMissingResizeHandle: false
+    });
+    (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
+        const resizeHandleElements = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
+        for(let index = 0; index < panelDataArray.length - 1; index++){
+            const { valueMax: valueMax, valueMin: valueMin, valueNow: valueNow } = (0, $a662cadf71ffedbc$export$b8372a468ba36f7d)({
+                layout: layout,
+                panelsArray: panelDataArray,
+                pivotIndices: [
+                    index,
+                    index + 1
+                ]
+            });
+            const resizeHandleElement = resizeHandleElements[index];
+            if (resizeHandleElement == null) {
+                if (0, $aedbef154d609804$export$df77466336fe5355) {
+                    const { didWarnAboutMissingResizeHandle: didWarnAboutMissingResizeHandle } = devWarningsRef.current;
+                    if (!didWarnAboutMissingResizeHandle) {
+                        devWarningsRef.current.didWarnAboutMissingResizeHandle = true;
+                        console.warn(`WARNING: Missing resize handle for PanelGroup "${groupId}"`);
+                    }
                 }
-              }
-              break;
+            } else {
+                const panelData = panelDataArray[index];
+                (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelData);
+                resizeHandleElement.setAttribute("aria-controls", panelData.id);
+                resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
+                resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
+                resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
             }
         }
-      };
-      handle.addEventListener("keydown", onKeyDown);
-      return () => {
-        handle.removeEventListener("keydown", onKeyDown);
-      };
-    });
-    return () => {
-      cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
-    };
-  }, [committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
+        return ()=>{
+            resizeHandleElements.forEach((resizeHandleElement, index)=>{
+                resizeHandleElement.removeAttribute("aria-controls");
+                resizeHandleElement.removeAttribute("aria-valuemax");
+                resizeHandleElement.removeAttribute("aria-valuemin");
+                resizeHandleElement.removeAttribute("aria-valuenow");
+            });
+        };
+    }, [
+        groupId,
+        layout,
+        panelDataArray
+    ]);
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
+        const eagerValues = eagerValuesRef.current;
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(eagerValues);
+        const { panelDataArray: panelDataArray } = eagerValues;
+        const groupElement = (0, $18131dcc0be2e4e0$export$4e72aefa594058df)(groupId);
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(groupElement != null, `No group found for id "${groupId}"`);
+        const handles = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(handles);
+        const cleanupFunctions = handles.map((handle)=>{
+            const handleId = handle.getAttribute("data-panel-resize-handle-id");
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(handleId);
+            const [idBefore, idAfter] = (0, $1420c4509c675b80$export$68d3a33c21dfbe27)(groupId, handleId, panelDataArray);
+            if (idBefore == null || idAfter == null) return ()=>{};
+            const onKeyDown = (event)=>{
+                if (event.defaultPrevented) return;
+                switch(event.key){
+                    case "Enter":
+                        {
+                            event.preventDefault();
+                            const index = panelDataArray.findIndex((panelData)=>panelData.id === idBefore);
+                            if (index >= 0) {
+                                const panelData = panelDataArray[index];
+                                (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelData);
+                                const size = layout[index];
+                                const { collapsedSize: collapsedSize = 0, collapsible: collapsible, minSize: minSize = 0 } = panelData.constraints;
+                                if (size != null && collapsible) {
+                                    const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
+                                        delta: (0, $ee71a189401d6914$export$db9c8bd2fae72e82)(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
+                                        layout: layout,
+                                        panelConstraints: panelDataArray.map((panelData)=>panelData.constraints),
+                                        pivotIndices: (0, $0a239c1e1cd1e940$export$cf92598869f99b8f)(groupId, handleId),
+                                        trigger: "keyboard"
+                                    });
+                                    if (layout !== nextLayout) setLayout(nextLayout);
+                                }
+                            }
+                            break;
+                        }
+                }
+            };
+            handle.addEventListener("keydown", onKeyDown);
+            return ()=>{
+                handle.removeEventListener("keydown", onKeyDown);
+            };
+        });
+        return ()=>{
+            cleanupFunctions.forEach((cleanupFunction)=>cleanupFunction());
+        };
+    }, [
+        committedValuesRef,
+        eagerValuesRef,
+        groupId,
+        layout,
+        panelDataArray,
+        setLayout
+    ]);
 }
 
-function areEqual(arrayA, arrayB) {
-  if (arrayA.length !== arrayB.length) {
-    return false;
-  }
-  for (let index = 0; index < arrayA.length; index++) {
-    if (arrayA[index] !== arrayB[index]) {
-      return false;
+
+
+function $c892f0f705e6ded5$export$b141efd0b0fb9174(arrayA, arrayB) {
+    if (arrayA.length !== arrayB.length) return false;
+    for(let index = 0; index < arrayA.length; index++){
+        if (arrayA[index] !== arrayB[index]) return false;
     }
-  }
-  return true;
+    return true;
 }
 
-function isKeyDown(event) {
-  return event.type === "keydown";
+
+
+
+
+
+
+function $5bf95d6f4b7f490d$export$e7bf60a870f429b0(event) {
+    return event.type === "keydown";
 }
-function isMouseEvent(event) {
-  return event.type.startsWith("mouse");
+function $5bf95d6f4b7f490d$export$764db16956f554f8(event) {
+    return event.type.startsWith("mouse");
 }
-function isTouchEvent(event) {
-  return event.type.startsWith("touch");
+function $5bf95d6f4b7f490d$export$c4dfce035d43d1e0(event) {
+    return event.type.startsWith("touch");
 }
 
-function getResizeEventCursorPosition(direction, event) {
-  const isHorizontal = direction === "horizontal";
-  if (isMouseEvent(event)) {
-    return isHorizontal ? event.clientX : event.clientY;
-  } else if (isTouchEvent(event)) {
-    const firstTouch = event.touches[0];
-    return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-  } else {
-    throw Error(`Unsupported event type "${event.type}"`);
-  }
-}
 
-function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState) {
-  const isHorizontal = direction === "horizontal";
-  const handleElement = getResizeHandleElement(dragHandleId);
-  const groupId = handleElement.getAttribute("data-panel-group-id");
-  let {
-    initialCursorPosition
-  } = initialDragState;
-  const cursorPosition = getResizeEventCursorPosition(direction, event);
-  const groupElement = getPanelGroupElement(groupId);
-  const groupRect = groupElement.getBoundingClientRect();
-  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
-  const offsetPixels = cursorPosition - initialCursorPosition;
-  const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
-  return offsetPercentage;
+function $a568cbd9a3e686f5$export$ae0c59ca751ba81d(direction, event) {
+    const isHorizontal = direction === "horizontal";
+    if ((0, $5bf95d6f4b7f490d$export$764db16956f554f8)(event)) return isHorizontal ? event.clientX : event.clientY;
+    else if ((0, $5bf95d6f4b7f490d$export$c4dfce035d43d1e0)(event)) {
+        const firstTouch = event.touches[0];
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(firstTouch);
+        return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
+    } else throw Error(`Unsupported event type "${event.type}"`);
 }
 
-// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
-function calculateDeltaPercentage(event, groupId, dragHandleId, direction, initialDragState, keyboardResizeByOptions) {
-  if (isKeyDown(event)) {
+
+function $27aab610d2a81ebc$export$e3b8a38f1f6abc89(event, dragHandleId, direction, initialDragState) {
     const isHorizontal = direction === "horizontal";
-    const groupElement = getPanelGroupElement(groupId);
-    const rect = groupElement.getBoundingClientRect();
-    const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
-    let delta = 0;
-    if (event.shiftKey) {
-      delta = 100;
-    } else if (keyboardResizeByOptions.percentage != null) {
-      delta = keyboardResizeByOptions.percentage;
-    } else if (keyboardResizeByOptions.pixels != null) {
-      delta = keyboardResizeByOptions.pixels / groupSizeInPixels;
+    const handleElement = (0, $99b0d18e36332b26$export$4c5229c874a62620)(dragHandleId);
+    (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(handleElement);
+    const groupId = handleElement.getAttribute("data-panel-group-id");
+    (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(groupId);
+    let { initialCursorPosition: initialCursorPosition } = initialDragState;
+    const cursorPosition = (0, $a568cbd9a3e686f5$export$ae0c59ca751ba81d)(direction, event);
+    const groupElement = (0, $18131dcc0be2e4e0$export$4e72aefa594058df)(groupId);
+    (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(groupElement);
+    const groupRect = groupElement.getBoundingClientRect();
+    const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+    const offsetPixels = cursorPosition - initialCursorPosition;
+    const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
+    return offsetPercentage;
+}
+
+
+
+function $c845d5a27273095d$export$b08134b65f9db46a(event, dragHandleId, direction, initialDragState, keyboardResizeBy) {
+    if ((0, $5bf95d6f4b7f490d$export$e7bf60a870f429b0)(event)) {
+        const isHorizontal = direction === "horizontal";
+        let delta = 0;
+        if (event.shiftKey) delta = 100;
+        else if (keyboardResizeBy != null) delta = keyboardResizeBy;
+        else delta = 10;
+        let movement = 0;
+        switch(event.key){
+            case "ArrowDown":
+                movement = isHorizontal ? 0 : delta;
+                break;
+            case "ArrowLeft":
+                movement = isHorizontal ? -delta : 0;
+                break;
+            case "ArrowRight":
+                movement = isHorizontal ? delta : 0;
+                break;
+            case "ArrowUp":
+                movement = isHorizontal ? 0 : -delta;
+                break;
+            case "End":
+                movement = 100;
+                break;
+            case "Home":
+                movement = -100;
+                break;
+        }
+        return movement;
     } else {
-      delta = 10;
+        if (initialDragState == null) return 0;
+        return (0, $27aab610d2a81ebc$export$e3b8a38f1f6abc89)(event, dragHandleId, direction, initialDragState);
     }
-    let movement = 0;
-    switch (event.key) {
-      case "ArrowDown":
-        movement = isHorizontal ? 0 : delta;
-        break;
-      case "ArrowLeft":
-        movement = isHorizontal ? -delta : 0;
-        break;
-      case "ArrowRight":
-        movement = isHorizontal ? delta : 0;
-        break;
-      case "ArrowUp":
-        movement = isHorizontal ? 0 : -delta;
-        break;
-      case "End":
-        movement = 100;
-        break;
-      case "Home":
-        movement = -100;
-        break;
-    }
-    return movement;
-  } else {
-    return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState);
-  }
 }
 
-function calculateUnsafeDefaultLayout({
-  groupSizePixels,
-  panelDataArray
-}) {
-  const layout = Array(panelDataArray.length);
-  const panelDataConstraints = panelDataArray.map(panelData => panelData.constraints);
-  let numPanelsWithSizes = 0;
-  let remainingSize = 100;
-
-  // Distribute default sizes first
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const {
-      defaultSizePercentage
-    } = computePercentagePanelConstraints(panelDataConstraints, index, groupSizePixels);
-    if (defaultSizePercentage != null) {
-      numPanelsWithSizes++;
-      layout[index] = defaultSizePercentage;
-      remainingSize -= defaultSizePercentage;
+
+
+function $457c46ca858cf2c6$export$47337a21c443778e({ panelDataArray: panelDataArray }) {
+    const layout = Array(panelDataArray.length);
+    const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
+    let numPanelsWithSizes = 0;
+    let remainingSize = 100;
+    // Distribute default sizes first
+    for(let index = 0; index < panelDataArray.length; index++){
+        const panelConstraints = panelConstraintsArray[index];
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
+        const { defaultSize: defaultSize } = panelConstraints;
+        if (defaultSize != null) {
+            numPanelsWithSizes++;
+            layout[index] = defaultSize;
+            remainingSize -= defaultSize;
+        }
     }
-  }
-
-  // Remaining size should be distributed evenly between panels without default sizes
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const {
-      defaultSizePercentage
-    } = computePercentagePanelConstraints(panelDataConstraints, index, groupSizePixels);
-    if (defaultSizePercentage != null) {
-      continue;
+    // Remaining size should be distributed evenly between panels without default sizes
+    for(let index = 0; index < panelDataArray.length; index++){
+        const panelConstraints = panelConstraintsArray[index];
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
+        const { defaultSize: defaultSize } = panelConstraints;
+        if (defaultSize != null) continue;
+        const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
+        const size = remainingSize / numRemainingPanels;
+        numPanelsWithSizes++;
+        layout[index] = size;
+        remainingSize -= size;
     }
-    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
-    const size = remainingSize / numRemainingPanels;
-    numPanelsWithSizes++;
-    layout[index] = size;
-    remainingSize -= size;
-  }
-  return layout;
+    return layout;
 }
 
-function convertPercentageToPixels(percentage, groupSizePixels) {
-  return percentage / 100 * groupSizePixels;
-}
 
-// Layout should be pre-converted into percentages
-function callPanelCallbacks(groupId, panelsArray, layout, panelIdToLastNotifiedMixedSizesMap) {
-  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-  layout.forEach((sizePercentage, index) => {
-    const panelData = panelsArray[index];
-    if (!panelData) {
-      // Handle initial mount (when panels are registered too late to be in the panels array)
-      // The subsequent render+effects will handle the resize notification
-      return;
-    }
-    const {
-      callbacks,
-      constraints,
-      id: panelId
-    } = panelData;
-    const {
-      collapsible
-    } = constraints;
-    const mixedSizes = {
-      sizePercentage,
-      sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-    };
-    const lastNotifiedMixedSizes = panelIdToLastNotifiedMixedSizesMap[panelId];
-    if (lastNotifiedMixedSizes == null || mixedSizes.sizePercentage !== lastNotifiedMixedSizes.sizePercentage || mixedSizes.sizePixels !== lastNotifiedMixedSizes.sizePixels) {
-      panelIdToLastNotifiedMixedSizesMap[panelId] = mixedSizes;
-      const {
-        onCollapse,
-        onExpand,
-        onResize
-      } = callbacks;
-      if (onResize) {
-        onResize(mixedSizes, lastNotifiedMixedSizes);
-      }
-      if (collapsible && (onCollapse || onExpand)) {
-        var _getPercentageSizeFro;
-        const collapsedSize = (_getPercentageSizeFro = getPercentageSizeFromMixedSizes({
-          sizePercentage: constraints.collapsedSizePercentage,
-          sizePixels: constraints.collapsedSizePixels
-        }, groupSizePixels)) !== null && _getPercentageSizeFro !== void 0 ? _getPercentageSizeFro : 0;
-        const size = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
-        if (onExpand && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage === collapsedSize) && size !== collapsedSize) {
-          onExpand();
-        }
-        if (onCollapse && (lastNotifiedMixedSizes == null || lastNotifiedMixedSizes.sizePercentage !== collapsedSize) && size === collapsedSize) {
-          onCollapse();
+
+function $2743876c6469fb21$export$b8e48269e4faa934(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
+    layout.forEach((size, index)=>{
+        const panelData = panelsArray[index];
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelData);
+        const { callbacks: callbacks, constraints: constraints, id: panelId } = panelData;
+        const { collapsedSize: collapsedSize = 0, collapsible: collapsible } = constraints;
+        const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
+        if (lastNotifiedSize == null || size !== lastNotifiedSize) {
+            panelIdToLastNotifiedSizeMap[panelId] = size;
+            const { onCollapse: onCollapse, onExpand: onExpand, onResize: onResize } = callbacks;
+            if (onResize) onResize(size, lastNotifiedSize);
+            if (collapsible && (onCollapse || onExpand)) {
+                if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) onExpand();
+                if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) onCollapse();
+            }
         }
-      }
-    }
-  });
+    });
 }
 
-function compareLayouts(a, b) {
-  if (a.length !== b.length) {
-    return false;
-  } else {
-    for (let index = 0; index < a.length; index++) {
-      if (a[index] != b[index]) {
-        return false;
-      }
+
+function $81d2449822663a2a$export$a10903e2e57656c1(a, b) {
+    if (a.length !== b.length) return false;
+    else for(let index = 0; index < a.length; index++){
+        if (a[index] != b[index]) return false;
     }
-  }
-  return true;
+    return true;
 }
 
-// This method returns a number between 1 and 100 representing
 
-// the % of the group's overall space this panel should occupy.
-function computePanelFlexBoxStyle({
-  dragState,
-  layout,
-  panelData,
-  panelIndex,
-  precision = 3
-}) {
-  const size = layout[panelIndex];
-  let flexGrow;
-  if (panelData.length === 1) {
-    flexGrow = "1";
-  } else if (size == null) {
-    // Initial render (before panels have registered themselves)
+// This method returns a number between 1 and 100 representing
+function $d4957558c333bad2$export$fc25f3248e61edf5({ dragState: dragState, layout: layout, panelData: panelData, panelIndex: panelIndex, precision: precision = 3 }) {
+    const size = layout[panelIndex];
+    let flexGrow;
+    if (panelData.length === 1) flexGrow = "1";
+    else if (size == null) // Initial render (before panels have registered themselves)
     flexGrow = "1";
-  } else {
-    flexGrow = size.toPrecision(precision);
-  }
-  return {
-    flexBasis: 0,
-    flexGrow,
-    flexShrink: 1,
-    // Without this, Panel sizes may be unintentionally overridden by their content
-    overflow: "hidden",
-    // Disable pointer events inside of a panel during resize
-    // This avoid edge cases like nested iframes
-    pointerEvents: dragState !== null ? "none" : undefined
-  };
+    else flexGrow = size.toPrecision(precision);
+    return {
+        flexBasis: 0,
+        flexGrow: flexGrow,
+        flexShrink: 1,
+        // Without this, Panel sizes may be unintentionally overridden by their content
+        overflow: "hidden",
+        // Disable pointer events inside of a panel during resize
+        // This avoid edge cases like nested iframes
+        pointerEvents: dragState !== null ? "none" : undefined
+    };
 }
 
-let currentState = null;
-let element = null;
-function getCursorStyle(state) {
-  switch (state) {
-    case "horizontal":
-      return "ew-resize";
-    case "horizontal-max":
-      return "w-resize";
-    case "horizontal-min":
-      return "e-resize";
-    case "vertical":
-      return "ns-resize";
-    case "vertical-max":
-      return "n-resize";
-    case "vertical-min":
-      return "s-resize";
-  }
+
+let $8d9d88bebf1a8ace$var$currentState = null;
+let $8d9d88bebf1a8ace$var$element = null;
+function $8d9d88bebf1a8ace$export$fa35f3322c52262f(state) {
+    switch(state){
+        case "horizontal":
+            return "ew-resize";
+        case "horizontal-max":
+            return "w-resize";
+        case "horizontal-min":
+            return "e-resize";
+        case "vertical":
+            return "ns-resize";
+        case "vertical-max":
+            return "n-resize";
+        case "vertical-min":
+            return "s-resize";
+    }
 }
-function resetGlobalCursorStyle() {
-  if (element !== null) {
-    document.head.removeChild(element);
-    currentState = null;
-    element = null;
-  }
+function $8d9d88bebf1a8ace$export$b61932ee18f96e08() {
+    if ($8d9d88bebf1a8ace$var$element !== null) {
+        document.head.removeChild($8d9d88bebf1a8ace$var$element);
+        $8d9d88bebf1a8ace$var$currentState = null;
+        $8d9d88bebf1a8ace$var$element = null;
+    }
 }
-function setGlobalCursorStyle(state) {
-  if (currentState === state) {
-    return;
-  }
-  currentState = state;
-  const style = getCursorStyle(state);
-  if (element === null) {
-    element = document.createElement("style");
-    document.head.appendChild(element);
-  }
-  element.innerHTML = `*{cursor: ${style}!important;}`;
+function $8d9d88bebf1a8ace$export$d395b5dfd066a659(state) {
+    if ($8d9d88bebf1a8ace$var$currentState === state) return;
+    $8d9d88bebf1a8ace$var$currentState = state;
+    const style = $8d9d88bebf1a8ace$export$fa35f3322c52262f(state);
+    if ($8d9d88bebf1a8ace$var$element === null) {
+        $8d9d88bebf1a8ace$var$element = document.createElement("style");
+        document.head.appendChild($8d9d88bebf1a8ace$var$element);
+    }
+    $8d9d88bebf1a8ace$var$element.innerHTML = `*{cursor: ${style}!important;}`;
 }
 
-function debounce(callback, durationMs = 10) {
-  let timeoutId = null;
-  let callable = (...args) => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      callback(...args);
-    }, durationMs);
-  };
-  return callable;
+
+function $f7d932e9304c1581$export$2e2bcd8739ae039(callback, durationMs = 10) {
+    let timeoutId = null;
+    let callable = (...args)=>{
+        if (timeoutId !== null) clearTimeout(timeoutId);
+        timeoutId = setTimeout(()=>{
+            callback(...args);
+        }, durationMs);
+    };
+    return callable;
 }
 
-function getPanelElementsForGroup(groupId) {
-  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+
+
+function $8b4e4613c531093d$export$80bbb698e7429afe(groupId) {
+    return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
-// PanelGroup might be rendering in a server-side environment where localStorage is not available
-// or on a browser with cookies/storage disabled.
-// In either case, this function avoids accessing localStorage until needed,
-// and avoids throwing user-visible errors.
-function initializeDefaultStorage(storageObject) {
-  try {
-    if (typeof localStorage !== "undefined") {
-      // Bypass this check for future calls
-      storageObject.getItem = name => {
-        return localStorage.getItem(name);
-      };
-      storageObject.setItem = (name, value) => {
-        localStorage.setItem(name, value);
-      };
-    } else {
-      throw new Error("localStorage not supported in this environment");
+
+
+
+
+function $a7cb003aae329b18$export$cb0adc12c8406347(storageObject) {
+    try {
+        if (typeof localStorage !== "undefined") {
+            // Bypass this check for future calls
+            storageObject.getItem = (name)=>{
+                return localStorage.getItem(name);
+            };
+            storageObject.setItem = (name, value)=>{
+                localStorage.setItem(name, value);
+            };
+        } else throw new Error("localStorage not supported in this environment");
+    } catch (error) {
+        console.error(error);
+        storageObject.getItem = ()=>null;
+        storageObject.setItem = ()=>{};
     }
-  } catch (error) {
-    console.error(error);
-    storageObject.getItem = () => null;
-    storageObject.setItem = () => {};
-  }
 }
 
+
 // Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
 // so they should not be used as part of the serialization key.
 // Using the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function getSerializationKey(panels) {
-  return panels.map(panel => {
-    const {
-      constraints,
-      id,
-      idIsFromProps,
-      order
-    } = panel;
-    if (idIsFromProps) {
-      return id;
-    } else {
-      return `${order}:${JSON.stringify(constraints)}`;
-    }
-  }).sort((a, b) => a.localeCompare(b)).join(",");
+function $6889c3a3ed41cfd1$var$getSerializationKey(panels) {
+    return panels.map((panel)=>{
+        const { constraints: constraints, id: id, idIsFromProps: idIsFromProps, order: order } = panel;
+        if (idIsFromProps) return id;
+        else return `${order}:${JSON.stringify(constraints)}`;
+    }).sort((a, b)=>a.localeCompare(b)).join(",");
 }
-function loadSerializedPanelGroupState(autoSaveId, storage) {
-  try {
-    const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
-    if (serialized) {
-      const parsed = JSON.parse(serialized);
-      if (typeof parsed === "object" && parsed != null) {
-        return parsed;
-      }
-    }
-  } catch (error) {}
-  return null;
+function $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage) {
+    try {
+        const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        if (serialized) {
+            const parsed = JSON.parse(serialized);
+            if (typeof parsed === "object" && parsed != null) return parsed;
+        }
+    } catch (error) {}
+    return null;
 }
-function loadPanelLayout(autoSaveId, panels, storage) {
-  const state = loadSerializedPanelGroupState(autoSaveId, storage);
-  if (state) {
-    var _state$key;
-    const key = getSerializationKey(panels);
-    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
-  }
-  return null;
+function $6889c3a3ed41cfd1$export$9c80c6617f0386da(autoSaveId, panels, storage) {
+    const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage);
+    if (state) {
+        const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
+        var _state_key;
+        return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
+    }
+    return null;
 }
-function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
-  const key = getSerializationKey(panels);
-  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
-  state[key] = sizes;
-  try {
-    storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
-  } catch (error) {
-    console.error(error);
-  }
+function $6889c3a3ed41cfd1$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
+    const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
+    const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
+    state[key] = sizes;
+    try {
+        storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    } catch (error) {
+        console.error(error);
+    }
 }
 
-function shouldMonitorPixelBasedConstraints(constraints) {
-  return constraints.some(constraints => {
-    return constraints.collapsedSizePixels !== undefined || constraints.maxSizePixels !== undefined || constraints.minSizePixels !== undefined;
-  });
-}
 
-// All units must be in percentages; pixel values should be pre-converted
-function validatePanelGroupLayout({
-  groupSizePixels,
-  layout: prevLayout,
-  panelConstraints
-}) {
-  const nextLayout = [...prevLayout];
-
-  // Validate layout expectations
-  if (nextLayout.length !== panelConstraints.length) {
-    throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayout.reduce((accumulated, current) => accumulated + current, 0), 100)) ;
-  let remainingSize = 0;
-
-  // First pass: Validate the proposed layout given each panel's constraints
-  for (let index = 0; index < panelConstraints.length; index++) {
-    const unsafeSize = nextLayout[index];
-    const safeSize = resizePanel({
-      groupSizePixels,
-      panelConstraints,
-      panelIndex: index,
-      size: unsafeSize
-    });
-    if (unsafeSize != safeSize) {
-      remainingSize += unsafeSize - safeSize;
-      nextLayout[index] = safeSize;
-    }
-  }
-
-  // If there is additional, left over space, assign it to any panel(s) that permits it
-  // (It's not worth taking multiple additional passes to evenly distribute)
-  if (!fuzzyNumbersEqual(remainingSize, 0)) {
-    for (let index = 0; index < panelConstraints.length; index++) {
-      const prevSize = nextLayout[index];
-      const unsafeSize = prevSize + remainingSize;
-      const safeSize = resizePanel({
-        groupSizePixels,
-        panelConstraints,
-        panelIndex: index,
-        size: unsafeSize
-      });
-      if (prevSize !== safeSize) {
-        remainingSize -= safeSize - prevSize;
-        nextLayout[index] = safeSize;
-
-        // Once we've used up the remainder, bail
-        if (fuzzyNumbersEqual(remainingSize, 0)) {
-          break;
+
+
+function $006440f9579d3b07$export$d00cfefa2c395b39({ panelConstraints: panelConstraintsArray, panelId: panelId, panelIndex: panelIndex }) {
+    if (0, $aedbef154d609804$export$df77466336fe5355) {
+        const warnings = [];
+        const panelConstraints = panelConstraintsArray[panelIndex];
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelConstraints);
+        const { collapsedSize: collapsedSize = 0, defaultSize: defaultSize, maxSize: maxSize = 100, minSize: minSize = 0 } = panelConstraints;
+        if (minSize > maxSize) warnings.push(`min size (${minSize}%) should not be greater than max size (${maxSize}%)`);
+        if (defaultSize != null) {
+            if (defaultSize < 0) warnings.push("default size should not be less than 0");
+            else if (defaultSize < minSize) warnings.push("default size should not be less than min size");
+            if (defaultSize > 100) warnings.push("default size should not be greater than 100");
+            else if (defaultSize > maxSize) warnings.push("default size should not be greater than max size");
+        }
+        if (collapsedSize > minSize) warnings.push("collapsed size should not be greater than min size");
+        if (warnings.length > 0) {
+            const name = panelId != null ? `Panel "${panelId}"` : "Panel";
+            console.warn(`${name} has an invalid configuration:\n\n${warnings.join("\n")}`);
+            return false;
         }
-      }
     }
-  }
-  return nextLayout;
+    return true;
 }
 
-const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
-const defaultStorage = {
-  getItem: name => {
-    initializeDefaultStorage(defaultStorage);
-    return defaultStorage.getItem(name);
-  },
-  setItem: (name, value) => {
-    initializeDefaultStorage(defaultStorage);
-    defaultStorage.setItem(name, value);
-  }
-};
-const debounceMap = {};
-function PanelGroupWithForwardedRef({
-  autoSaveId = null,
-  children,
-  className: classNameFromProps = "",
-  dataAttributes,
-  direction,
-  forwardedRef,
-  id: idFromProps,
-  onLayout = null,
-  keyboardResizeByPercentage = null,
-  keyboardResizeByPixels = null,
-  storage = defaultStorage,
-  style: styleFromProps,
-  tagName: Type = "div"
-}) {
-  const groupId = useUniqueId(idFromProps);
-  const [dragState, setDragState] = useState(null);
-  const [layout, setLayout] = useState([]);
-  const panelIdToLastNotifiedMixedSizesMapRef = useRef({});
-  const panelSizeBeforeCollapseRef = useRef(new Map());
-  const prevDeltaRef = useRef(0);
-  const committedValuesRef = useRef({
-    autoSaveId,
-    direction,
-    dragState,
-    id: groupId,
-    keyboardResizeByPercentage,
-    keyboardResizeByPixels,
-    onLayout,
-    storage
-  });
-  const eagerValuesRef = useRef({
-    layout,
-    panelDataArray: []
-  });
-  useRef({
-    didLogIdAndOrderWarning: false,
-    didLogPanelConstraintsWarning: false,
-    prevPanelIds: []
-  });
-  useImperativeHandle(forwardedRef, () => ({
-    getId: () => committedValuesRef.current.id,
-    getLayout: () => {
-      const {
-        id: groupId
-      } = committedValuesRef.current;
-      const {
-        layout
-      } = eagerValuesRef.current;
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-      return layout.map(sizePercentage => {
-        return {
-          sizePercentage,
-          sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-        };
-      });
-    },
-    setLayout: mixedSizes => {
-      const {
-        id: groupId,
-        onLayout
-      } = committedValuesRef.current;
-      const {
-        layout: prevLayout,
-        panelDataArray
-      } = eagerValuesRef.current;
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-      const unsafeLayout = mixedSizes.map(mixedSize => getPercentageSizeFromMixedSizes(mixedSize, groupSizePixels));
-      const safeLayout = validatePanelGroupLayout({
-        groupSizePixels,
-        layout: unsafeLayout,
-        panelConstraints: panelDataArray.map(panelData => panelData.constraints)
-      });
-      if (!areEqual(prevLayout, safeLayout)) {
-        setLayout(safeLayout);
-        eagerValuesRef.current.layout = safeLayout;
-        if (onLayout) {
-          onLayout(safeLayout.map(sizePercentage => ({
-            sizePercentage,
-            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-          })));
-        }
-        callPanelCallbacks(groupId, panelDataArray, safeLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
-      }
-    }
-  }), []);
-  useIsomorphicLayoutEffect(() => {
-    committedValuesRef.current.autoSaveId = autoSaveId;
-    committedValuesRef.current.direction = direction;
-    committedValuesRef.current.dragState = dragState;
-    committedValuesRef.current.id = groupId;
-    committedValuesRef.current.onLayout = onLayout;
-    committedValuesRef.current.storage = storage;
-
-    // panelDataArray and layout are updated in-sync with scheduled state updates.
-    // TODO [217] Move these values into a separate ref
-  });
-
-  useWindowSplitterPanelGroupBehavior({
-    committedValuesRef,
-    eagerValuesRef,
-    groupId,
-    layout,
-    panelDataArray: eagerValuesRef.current.panelDataArray,
-    setLayout
-  });
-  useEffect(() => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-
-    // If this panel has been configured to persist sizing information, save sizes to local storage.
-    if (autoSaveId) {
-      if (layout.length === 0 || layout.length !== panelDataArray.length) {
-        return;
-      }
-
-      // Limit the frequency of localStorage updates.
-      if (!debounceMap[autoSaveId]) {
-        debounceMap[autoSaveId] = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
-      }
-      debounceMap[autoSaveId](autoSaveId, panelDataArray, layout, storage);
-    }
-  }, [autoSaveId, layout, storage]);
-  useIsomorphicLayoutEffect(() => {
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const constraints = panelDataArray.map(({
-      constraints
-    }) => constraints);
-    if (!shouldMonitorPixelBasedConstraints(constraints)) {
-      // Avoid the overhead of ResizeObserver if no pixel constraints require monitoring
-      return;
-    }
-    if (typeof ResizeObserver === "undefined") {
-      console.warn(`WARNING: Pixel based constraints require ResizeObserver but it is not supported by the current browser.`);
-    } else {
-      const resizeObserver = new ResizeObserver(() => {
-        const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-        const {
-          onLayout
-        } = committedValuesRef.current;
-        const nextLayout = validatePanelGroupLayout({
-          groupSizePixels,
-          layout: prevLayout,
-          panelConstraints: panelDataArray.map(panelData => panelData.constraints)
-        });
-        if (!areEqual(prevLayout, nextLayout)) {
-          setLayout(nextLayout);
-          eagerValuesRef.current.layout = nextLayout;
-          if (onLayout) {
-            onLayout(nextLayout.map(sizePercentage => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-            })));
-          }
-          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+
+
+
+
+
+function $6f1a05873bb6ec6f$export$64432a52a1035c18({ layout: prevLayout, panelConstraints: panelConstraints }) {
+    const nextLayout = [
+        ...prevLayout
+    ];
+    const nextLayoutTotalSize = nextLayout.reduce((accumulated, current)=>accumulated + current, 0);
+    // Validate layout expectations
+    if (nextLayout.length !== panelConstraints.length) throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size)=>`${size}%`).join(", ")}`);
+    else if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(nextLayoutTotalSize, 100)) {
+        // This is not ideal so we should warn about it, but it may be recoverable in some cases
+        // (especially if the amount is small)
+        if (0, $aedbef154d609804$export$df77466336fe5355) console.warn(`WARNING: Invalid layout total size: ${nextLayout.map((size)=>`${size}%`).join(", ")}. Layout normalization will be applied.`);
+        for(let index = 0; index < panelConstraints.length; index++){
+            const unsafeSize = nextLayout[index];
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(unsafeSize != null);
+            const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
+            nextLayout[index] = safeSize;
         }
-      });
-      resizeObserver.observe(getPanelGroupElement(groupId));
-      return () => {
-        resizeObserver.disconnect();
-      };
     }
-  }, [groupId]);
-
-  // DEV warnings
-  useEffect(() => {
-  });
-
-  // External APIs are safe to memoize via committed values ref
-  const collapsePanel = useCallback(panelData => {
-    const {
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    if (panelData.constraints.collapsible) {
-      const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-      const {
-        collapsedSizePercentage,
-        panelSizePercentage,
-        pivotIndices,
-        groupSizePixels
-      } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
-      if (panelSizePercentage !== collapsedSizePercentage) {
-        // Store size before collapse;
-        // This is the size that gets restored if the expand() API is used.
-        panelSizeBeforeCollapseRef.current.set(panelData.id, panelSizePercentage);
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSizePercentage - collapsedSizePercentage : collapsedSizePercentage - panelSizePercentage;
-        const nextLayout = adjustLayoutByDelta({
-          delta,
-          groupSizePixels,
-          layout: prevLayout,
-          panelConstraints: panelConstraintsArray,
-          pivotIndices,
-          trigger: "imperative-api"
+    let remainingSize = 0;
+    // First pass: Validate the proposed layout given each panel's constraints
+    for(let index = 0; index < panelConstraints.length; index++){
+        const unsafeSize = nextLayout[index];
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(unsafeSize != null);
+        const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
+            panelConstraints: panelConstraints,
+            panelIndex: index,
+            size: unsafeSize
         });
-        if (!compareLayouts(prevLayout, nextLayout)) {
-          setLayout(nextLayout);
-          eagerValuesRef.current.layout = nextLayout;
-          if (onLayout) {
-            onLayout(nextLayout.map(sizePercentage => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-            })));
-          }
-          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+        if (unsafeSize != safeSize) {
+            remainingSize += unsafeSize - safeSize;
+            nextLayout[index] = safeSize;
         }
-      }
     }
-  }, [groupId]);
-
-  // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback(panelData => {
-    const {
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    if (panelData.constraints.collapsible) {
-      const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-      const {
-        collapsedSizePercentage,
-        panelSizePercentage,
-        minSizePercentage,
-        pivotIndices,
-        groupSizePixels
-      } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
-      if (panelSizePercentage === collapsedSizePercentage) {
-        // Restore this panel to the size it was before it was collapsed, if possible.
-        const prevPanelSizePercentage = panelSizeBeforeCollapseRef.current.get(panelData.id);
-        const baseSizePercentage = prevPanelSizePercentage != null && prevPanelSizePercentage >= minSizePercentage ? prevPanelSizePercentage : minSizePercentage;
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSizePercentage - baseSizePercentage : baseSizePercentage - panelSizePercentage;
-        const nextLayout = adjustLayoutByDelta({
-          delta,
-          groupSizePixels,
-          layout: prevLayout,
-          panelConstraints: panelConstraintsArray,
-          pivotIndices,
-          trigger: "imperative-api"
+    // If there is additional, left over space, assign it to any panel(s) that permits it
+    // (It's not worth taking multiple additional passes to evenly distribute)
+    if (!(0, $ee71a189401d6914$export$db9c8bd2fae72e82)(remainingSize, 0)) for(let index = 0; index < panelConstraints.length; index++){
+        const prevSize = nextLayout[index];
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(prevSize != null);
+        const unsafeSize = prevSize + remainingSize;
+        const safeSize = (0, $40f29f7a20511409$export$2f98edcf4006376f)({
+            panelConstraints: panelConstraints,
+            panelIndex: index,
+            size: unsafeSize
         });
-        if (!compareLayouts(prevLayout, nextLayout)) {
-          setLayout(nextLayout);
-          eagerValuesRef.current.layout = nextLayout;
-          if (onLayout) {
-            onLayout(nextLayout.map(sizePercentage => ({
-              sizePercentage,
-              sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-            })));
-          }
-          callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+        if (prevSize !== safeSize) {
+            remainingSize -= safeSize - prevSize;
+            nextLayout[index] = safeSize;
+            // Once we've used up the remainder, bail
+            if ((0, $ee71a189401d6914$export$db9c8bd2fae72e82)(remainingSize, 0)) break;
         }
-      }
-    }
-  }, [groupId]);
-
-  // External APIs are safe to memoize via committed values ref
-  const getPanelSize = useCallback(panelData => {
-    const {
-      layout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const {
-      panelSizePercentage,
-      panelSizePixels
-    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
-    return {
-      sizePercentage: panelSizePercentage,
-      sizePixels: panelSizePixels
-    };
-  }, [groupId]);
-
-  // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback(panelData => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
-    return computePanelFlexBoxStyle({
-      dragState,
-      layout,
-      panelData: panelDataArray,
-      panelIndex
-    });
-  }, [dragState, layout]);
-
-  // External APIs are safe to memoize via committed values ref
-  const isPanelCollapsed = useCallback(panelData => {
-    const {
-      layout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const {
-      collapsedSizePercentage,
-      collapsible,
-      panelSizePercentage
-    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
-    return collapsible === true && panelSizePercentage === collapsedSizePercentage;
-  }, [groupId]);
-
-  // External APIs are safe to memoize via committed values ref
-  const isPanelExpanded = useCallback(panelData => {
-    const {
-      layout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const {
-      collapsedSizePercentage,
-      collapsible,
-      panelSizePercentage
-    } = panelDataHelper(groupId, panelDataArray, panelData, layout);
-    return !collapsible || panelSizePercentage > collapsedSizePercentage;
-  }, [groupId]);
-  const registerPanel = useCallback(panelData => {
-    const {
-      autoSaveId,
-      id: groupId,
-      onLayout,
-      storage
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    panelDataArray.push(panelData);
-    panelDataArray.sort((panelA, panelB) => {
-      const orderA = panelA.order;
-      const orderB = panelB.order;
-      if (orderA == null && orderB == null) {
-        return 0;
-      } else if (orderA == null) {
-        return -1;
-      } else if (orderB == null) {
-        return 1;
-      } else {
-        return orderA - orderB;
-      }
-    });
-
-    // Wait until all panels have registered before we try to compute layout;
-    // doing it earlier is both wasteful and may trigger misleading warnings in development mode.
-    const panelElements = getPanelElementsForGroup(groupId);
-    if (panelElements.length !== panelDataArray.length) {
-      return;
     }
+    return nextLayout;
+}
 
-    // If this panel has been configured to persist sizing information,
-    // default size should be restored from local storage if possible.
-    let unsafeLayout = null;
-    if (autoSaveId) {
-      unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
-    }
-    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-    if (groupSizePixels <= 0) {
-      if (shouldMonitorPixelBasedConstraints(panelDataArray.map(({
-        constraints
-      }) => constraints))) {
-        // Wait until the group has rendered a non-zero size before computing layout.
-        return;
-      }
-    }
-    if (unsafeLayout == null) {
-      unsafeLayout = calculateUnsafeDefaultLayout({
-        groupSizePixels,
-        panelDataArray
-      });
-    }
 
-    // Validate even saved layouts in case something has changed since last render
-    // e.g. for pixel groups, this could be the size of the window
-    const nextLayout = validatePanelGroupLayout({
-      groupSizePixels,
-      layout: unsafeLayout,
-      panelConstraints: panelDataArray.map(panelData => panelData.constraints)
-    });
 
-    // Offscreen mode makes this a bit weird;
-    // Panels unregister when hidden and re-register when shown again,
-    // but the overall layout doesn't change between these two cases.
-    setLayout(nextLayout);
-    eagerValuesRef.current.layout = nextLayout;
-    if (!areEqual(prevLayout, nextLayout)) {
-      if (onLayout) {
-        onLayout(nextLayout.map(sizePercentage => ({
-          sizePercentage,
-          sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-        })));
-      }
-      callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
+const $3daa5d4c086ea816$var$LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
+const $3daa5d4c086ea816$var$defaultStorage = {
+    getItem: (name)=>{
+        (0, $a7cb003aae329b18$export$cb0adc12c8406347)($3daa5d4c086ea816$var$defaultStorage);
+        return $3daa5d4c086ea816$var$defaultStorage.getItem(name);
+    },
+    setItem: (name, value)=>{
+        (0, $a7cb003aae329b18$export$cb0adc12c8406347)($3daa5d4c086ea816$var$defaultStorage);
+        $3daa5d4c086ea816$var$defaultStorage.setItem(name, value);
     }
-  }, []);
-  const registerResizeHandle = useCallback(dragHandleId => {
-    return function resizeHandler(event) {
-      event.preventDefault();
-      const {
-        direction,
-        dragState,
+};
+const $3daa5d4c086ea816$var$debounceMap = {};
+function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSaveId = null, children: children, className: classNameFromProps = "", direction: direction, forwardedRef: forwardedRef, id: idFromProps = null, onLayout: onLayout = null, keyboardResizeBy: keyboardResizeBy = null, storage: storage = $3daa5d4c086ea816$var$defaultStorage, style: styleFromProps, tagName: Type = "div", ...rest }) {
+    const groupId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
+    const [dragState, setDragState] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(null);
+    const [layout, setLayout] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)([]);
+    const panelIdToLastNotifiedSizeMapRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({});
+    const panelSizeBeforeCollapseRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(new Map());
+    const prevDeltaRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(0);
+    const committedValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        autoSaveId: autoSaveId,
+        direction: direction,
+        dragState: dragState,
         id: groupId,
-        keyboardResizeByPercentage,
-        keyboardResizeByPixels,
-        onLayout
-      } = committedValuesRef.current;
-      const {
-        layout: prevLayout,
-        panelDataArray
-      } = eagerValuesRef.current;
-      const {
-        initialLayout
-      } = dragState !== null && dragState !== void 0 ? dragState : {};
-      const pivotIndices = determinePivotIndices(groupId, dragHandleId);
-      let delta = calculateDeltaPercentage(event, groupId, dragHandleId, direction, dragState, {
-        percentage: keyboardResizeByPercentage,
-        pixels: keyboardResizeByPixels
-      });
-      if (delta === 0) {
-        return;
-      }
-
-      // Support RTL layouts
-      const isHorizontal = direction === "horizontal";
-      if (document.dir === "rtl" && isHorizontal) {
-        delta = -delta;
-      }
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-      const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
-      const nextLayout = adjustLayoutByDelta({
-        delta,
-        groupSizePixels,
-        layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
-        panelConstraints,
-        pivotIndices,
-        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
-      });
-      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
-
-      // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
-      // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-      if (isMouseEvent(event) || isTouchEvent(event)) {
-        // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
-        // In this case, Panel sizes might not change–
-        // but updating cursor in this scenario would cause a flicker.
-        if (prevDeltaRef.current != delta) {
-          prevDeltaRef.current = delta;
-          if (!layoutChanged) {
-            // If the pointer has moved too far to resize the panel any further,
-            // update the cursor style for a visual clue.
-            // This mimics VS Code behavior.
-
-            if (isHorizontal) {
-              setGlobalCursorStyle(delta < 0 ? "horizontal-min" : "horizontal-max");
-            } else {
-              setGlobalCursorStyle(delta < 0 ? "vertical-min" : "vertical-max");
+        keyboardResizeBy: keyboardResizeBy,
+        onLayout: onLayout,
+        storage: storage
+    });
+    const eagerValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        layout: layout,
+        panelDataArray: []
+    });
+    const devWarningsRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        didLogIdAndOrderWarning: false,
+        didLogPanelConstraintsWarning: false,
+        prevPanelIds: []
+    });
+    (0, $ef07efbe5fa7d87e$export$d5a552a76deda3c2)(forwardedRef, ()=>({
+            getId: ()=>committedValuesRef.current.id,
+            getLayout: ()=>{
+                const { layout: layout } = eagerValuesRef.current;
+                return layout;
+            },
+            setLayout: (unsafeLayout)=>{
+                const { onLayout: onLayout } = committedValuesRef.current;
+                const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+                const safeLayout = (0, $6f1a05873bb6ec6f$export$64432a52a1035c18)({
+                    layout: unsafeLayout,
+                    panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
+                });
+                if (!(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevLayout, safeLayout)) {
+                    setLayout(safeLayout);
+                    eagerValuesRef.current.layout = safeLayout;
+                    if (onLayout) onLayout(safeLayout);
+                    (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
+                }
+            }
+        }), []);
+    (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
+        committedValuesRef.current.autoSaveId = autoSaveId;
+        committedValuesRef.current.direction = direction;
+        committedValuesRef.current.dragState = dragState;
+        committedValuesRef.current.id = groupId;
+        committedValuesRef.current.onLayout = onLayout;
+        committedValuesRef.current.storage = storage;
+    });
+    (0, $20152a6c44989ce6$export$d9fcbe062527d159)({
+        committedValuesRef: committedValuesRef,
+        eagerValuesRef: eagerValuesRef,
+        groupId: groupId,
+        layout: layout,
+        panelDataArray: eagerValuesRef.current.panelDataArray,
+        setLayout: setLayout
+    });
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
+        const { panelDataArray: panelDataArray } = eagerValuesRef.current;
+        // If this panel has been configured to persist sizing information, save sizes to local storage.
+        if (autoSaveId) {
+            if (layout.length === 0 || layout.length !== panelDataArray.length) return;
+            let debouncedSave = $3daa5d4c086ea816$var$debounceMap[autoSaveId];
+            // Limit the frequency of localStorage updates.
+            if (debouncedSave == null) {
+                debouncedSave = (0, $f7d932e9304c1581$export$2e2bcd8739ae039)((0, $6889c3a3ed41cfd1$export$af183b313c61be4f), $3daa5d4c086ea816$var$LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+                $3daa5d4c086ea816$var$debounceMap[autoSaveId] = debouncedSave;
             }
-          } else {
-            // Reset the cursor style to the the normal resize cursor.
-            setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
-          }
+            debouncedSave(autoSaveId, panelDataArray, layout, storage);
         }
-      }
-      if (layoutChanged) {
-        setLayout(nextLayout);
-        eagerValuesRef.current.layout = nextLayout;
-        if (onLayout) {
-          onLayout(nextLayout.map(sizePercentage => ({
-            sizePercentage,
-            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-          })));
+    }, [
+        autoSaveId,
+        layout,
+        storage
+    ]);
+    // DEV warnings
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
+        if (0, $aedbef154d609804$export$df77466336fe5355) {
+            const { panelDataArray: panelDataArray } = eagerValuesRef.current;
+            const { didLogIdAndOrderWarning: didLogIdAndOrderWarning, didLogPanelConstraintsWarning: didLogPanelConstraintsWarning, prevPanelIds: prevPanelIds } = devWarningsRef.current;
+            if (!didLogIdAndOrderWarning) {
+                const panelIds = panelDataArray.map(({ id: id })=>id);
+                devWarningsRef.current.prevPanelIds = panelIds;
+                const panelsHaveChanged = prevPanelIds.length > 0 && !(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevPanelIds, panelIds);
+                if (panelsHaveChanged) {
+                    if (panelDataArray.find(({ idIsFromProps: idIsFromProps, order: order })=>!idIsFromProps || order == null)) {
+                        devWarningsRef.current.didLogIdAndOrderWarning = true;
+                        console.warn(`WARNING: Panel id and order props recommended when panels are dynamically rendered`);
+                    }
+                }
+            }
+            if (!didLogPanelConstraintsWarning) {
+                const panelConstraints = panelDataArray.map((panelData)=>panelData.constraints);
+                for(let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++){
+                    const panelData = panelDataArray[panelIndex];
+                    (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelData);
+                    const isValid = (0, $006440f9579d3b07$export$d00cfefa2c395b39)({
+                        panelConstraints: panelConstraints,
+                        panelId: panelData.id,
+                        panelIndex: panelIndex
+                    });
+                    if (!isValid) {
+                        devWarningsRef.current.didLogPanelConstraintsWarning = true;
+                        break;
+                    }
+                }
+            }
         }
-        callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
-      }
-    };
-  }, []);
-
-  // External APIs are safe to memoize via committed values ref
-  const resizePanel = useCallback((panelData, mixedSizes) => {
-    const {
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-    const {
-      groupSizePixels,
-      panelSizePercentage,
-      pivotIndices
-    } = panelDataHelper(groupId, panelDataArray, panelData, prevLayout);
-    const sizePercentage = getPercentageSizeFromMixedSizes(mixedSizes, groupSizePixels);
-    const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
-    const delta = isLastPanel ? panelSizePercentage - sizePercentage : sizePercentage - panelSizePercentage;
-    const nextLayout = adjustLayoutByDelta({
-      delta,
-      groupSizePixels,
-      layout: prevLayout,
-      panelConstraints: panelConstraintsArray,
-      pivotIndices,
-      trigger: "imperative-api"
-    });
-    if (!compareLayouts(prevLayout, nextLayout)) {
-      setLayout(nextLayout);
-      eagerValuesRef.current.layout = nextLayout;
-      if (onLayout) {
-        onLayout(nextLayout.map(sizePercentage => ({
-          sizePercentage,
-          sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-        })));
-      }
-      callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
-    }
-  }, [groupId]);
-  const startDragging = useCallback((dragHandleId, event) => {
-    const {
-      direction
-    } = committedValuesRef.current;
-    const {
-      layout
-    } = eagerValuesRef.current;
-    const handleElement = getResizeHandleElement(dragHandleId);
-    const initialCursorPosition = getResizeEventCursorPosition(direction, event);
-    setDragState({
-      dragHandleId,
-      dragHandleRect: handleElement.getBoundingClientRect(),
-      initialCursorPosition,
-      initialLayout: layout
     });
-  }, []);
-  const stopDragging = useCallback(() => {
-    resetGlobalCursorStyle();
-    setDragState(null);
-  }, []);
-  const unregisterPanelRef = useRef({
-    pendingPanelIds: new Set(),
-    timeout: null
-  });
-  const unregisterPanel = useCallback(panelData => {
-    const {
-      id: groupId,
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const index = panelDataArray.indexOf(panelData);
-    if (index >= 0) {
-      panelDataArray.splice(index, 1);
-      unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
-    }
-    if (unregisterPanelRef.current.timeout != null) {
-      clearTimeout(unregisterPanelRef.current.timeout);
-    }
-
-    // Batch panel unmounts so that we only calculate layout once;
-    // This is more efficient and avoids misleading warnings in development mode.
-    // We can't check the DOM to detect this because Panel elements have not yet been removed.
-    unregisterPanelRef.current.timeout = setTimeout(() => {
-      const {
-        pendingPanelIds
-      } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedMixedSizesMapRef.current;
-
-      // TRICKY
-      // Strict effects mode
-      let unmountDueToStrictMode = false;
-      pendingPanelIds.forEach(panelId => {
-        pendingPanelIds.delete(panelId);
-        if (panelDataArray.find(({
-          id
-        }) => id === panelId) == null) {
-          unmountDueToStrictMode = true;
-
-          // TRICKY
-          // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
-          // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
-          // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-          delete map[panelData.id];
+    // External APIs are safe to memoize via committed values ref
+    const collapsePanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
+        const { onLayout: onLayout } = committedValuesRef.current;
+        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+        if (panelData.constraints.collapsible) {
+            const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
+            const { collapsedSize: collapsedSize = 0, panelSize: panelSize, pivotIndices: pivotIndices } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, prevLayout);
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelSize != null);
+            if (panelSize !== collapsedSize) {
+                // Store size before collapse;
+                // This is the size that gets restored if the expand() API is used.
+                panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
+                const isLastPanel = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+                const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
+                const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
+                    delta: delta,
+                    layout: prevLayout,
+                    panelConstraints: panelConstraintsArray,
+                    pivotIndices: pivotIndices,
+                    trigger: "imperative-api"
+                });
+                if (!(0, $81d2449822663a2a$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
+                    setLayout(nextLayout);
+                    eagerValuesRef.current.layout = nextLayout;
+                    if (onLayout) onLayout(nextLayout);
+                    (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+                }
+            }
         }
-      });
-      if (!unmountDueToStrictMode) {
-        return;
-      }
-      if (panelDataArray.length === 0) {
-        // The group is unmounting; skip layout calculation.
-        return;
-      }
-      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-      let unsafeLayout = calculateUnsafeDefaultLayout({
-        groupSizePixels,
-        panelDataArray
-      });
-
-      // Validate even saved layouts in case something has changed since last render
-      // e.g. for pixel groups, this could be the size of the window
-      const nextLayout = validatePanelGroupLayout({
-        groupSizePixels,
-        layout: unsafeLayout,
-        panelConstraints: panelDataArray.map(panelData => panelData.constraints)
-      });
-      if (!areEqual(prevLayout, nextLayout)) {
+    }, []);
+    // External APIs are safe to memoize via committed values ref
+    const expandPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
+        const { onLayout: onLayout } = committedValuesRef.current;
+        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+        if (panelData.constraints.collapsible) {
+            const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
+            const { collapsedSize: collapsedSize = 0, panelSize: panelSize, minSize: minSize = 0, pivotIndices: pivotIndices } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, prevLayout);
+            if (panelSize === collapsedSize) {
+                // Restore this panel to the size it was before it was collapsed, if possible.
+                const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
+                const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
+                const isLastPanel = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+                const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
+                const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
+                    delta: delta,
+                    layout: prevLayout,
+                    panelConstraints: panelConstraintsArray,
+                    pivotIndices: pivotIndices,
+                    trigger: "imperative-api"
+                });
+                if (!(0, $81d2449822663a2a$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
+                    setLayout(nextLayout);
+                    eagerValuesRef.current.layout = nextLayout;
+                    if (onLayout) onLayout(nextLayout);
+                    (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+                }
+            }
+        }
+    }, []);
+    // External APIs are safe to memoize via committed values ref
+    const getPanelSize = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
+        const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+        const { panelSize: panelSize } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, layout);
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelSize != null);
+        return panelSize;
+    }, []);
+    // This API should never read from committedValuesRef
+    const getPanelStyle = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
+        const { panelDataArray: panelDataArray } = eagerValuesRef.current;
+        const panelIndex = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData);
+        return (0, $d4957558c333bad2$export$fc25f3248e61edf5)({
+            dragState: dragState,
+            layout: layout,
+            panelData: panelDataArray,
+            panelIndex: panelIndex
+        });
+    }, [
+        dragState,
+        layout
+    ]);
+    // External APIs are safe to memoize via committed values ref
+    const isPanelCollapsed = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
+        const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+        const { collapsedSize: collapsedSize, collapsible: collapsible, panelSize: panelSize } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, layout);
+        return collapsible === true && panelSize === collapsedSize;
+    }, []);
+    // External APIs are safe to memoize via committed values ref
+    const isPanelExpanded = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
+        const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+        const { collapsedSize: collapsedSize = 0, collapsible: collapsible, panelSize: panelSize } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, layout);
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelSize != null);
+        return !collapsible || panelSize > collapsedSize;
+    }, []);
+    const registerPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
+        const { autoSaveId: autoSaveId, id: groupId, onLayout: onLayout, storage: storage } = committedValuesRef.current;
+        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+        // HACK
+        // This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
+        // see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
+        const index = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData);
+        if (index >= 0) {
+            if (panelData.idIsFromProps) console.warn(`Panel with id "${panelData.id}" registered twice`);
+            else console.warn(`Panel registered twice`);
+            return;
+        }
+        panelDataArray.push(panelData);
+        panelDataArray.sort((panelA, panelB)=>{
+            const orderA = panelA.order;
+            const orderB = panelB.order;
+            if (orderA == null && orderB == null) return 0;
+            else if (orderA == null) return -1;
+            else if (orderB == null) return 1;
+            else return orderA - orderB;
+        });
+        // Wait until all panels have registered before we try to compute layout;
+        // doing it earlier is both wasteful and may trigger misleading warnings in development mode.
+        const panelElements = (0, $8b4e4613c531093d$export$80bbb698e7429afe)(groupId);
+        if (panelElements.length !== panelDataArray.length) return;
+        // If this panel has been configured to persist sizing information,
+        // default size should be restored from local storage if possible.
+        let unsafeLayout = null;
+        if (autoSaveId) unsafeLayout = (0, $6889c3a3ed41cfd1$export$9c80c6617f0386da)(autoSaveId, panelDataArray, storage);
+        if (unsafeLayout == null) unsafeLayout = (0, $457c46ca858cf2c6$export$47337a21c443778e)({
+            panelDataArray: panelDataArray
+        });
+        // Validate even saved layouts in case something has changed since last render
+        // e.g. for pixel groups, this could be the size of the window
+        const nextLayout = (0, $6f1a05873bb6ec6f$export$64432a52a1035c18)({
+            layout: unsafeLayout,
+            panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
+        });
+        // Offscreen mode makes this a bit weird;
+        // Panels unregister when hidden and re-register when shown again,
+        // but the overall layout doesn't change between these two cases.
         setLayout(nextLayout);
         eagerValuesRef.current.layout = nextLayout;
-        if (onLayout) {
-          onLayout(nextLayout.map(sizePercentage => ({
-            sizePercentage,
-            sizePixels: convertPercentageToPixels(sizePercentage, groupSizePixels)
-          })));
+        if (!(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevLayout, nextLayout)) {
+            if (onLayout) onLayout(nextLayout);
+            (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
         }
-        callPanelCallbacks(groupId, panelDataArray, nextLayout, panelIdToLastNotifiedMixedSizesMapRef.current);
-      }
-    }, 0);
-  }, []);
-  const context = useMemo(() => ({
-    collapsePanel,
-    direction,
-    dragState,
-    expandPanel,
-    getPanelSize,
-    getPanelStyle,
-    groupId,
-    isPanelCollapsed,
-    isPanelExpanded,
-    registerPanel,
-    registerResizeHandle,
-    resizePanel,
-    startDragging,
-    stopDragging,
-    unregisterPanel
-  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
-  const style = {
-    display: "flex",
-    flexDirection: direction === "horizontal" ? "row" : "column",
-    height: "100%",
-    overflow: "hidden",
-    width: "100%"
-  };
-  return createElement(PanelGroupContext.Provider, {
-    value: context
-  }, createElement(Type, {
-    children,
-    className: classNameFromProps,
-    style: {
-      ...style,
-      ...styleFromProps
-    },
-    ...dataAttributes,
-    // CSS selectors
-    "data-panel-group": "",
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId
-  }));
+    }, []);
+    const registerResizeHandle = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((dragHandleId)=>{
+        return function resizeHandler(event) {
+            event.preventDefault();
+            const { direction: direction, dragState: dragState, id: groupId, keyboardResizeBy: keyboardResizeBy, onLayout: onLayout } = committedValuesRef.current;
+            const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+            const { initialLayout: initialLayout } = dragState !== null && dragState !== void 0 ? dragState : {};
+            const pivotIndices = (0, $0a239c1e1cd1e940$export$cf92598869f99b8f)(groupId, dragHandleId);
+            let delta = (0, $c845d5a27273095d$export$b08134b65f9db46a)(event, dragHandleId, direction, dragState, keyboardResizeBy);
+            if (delta === 0) return;
+            // Support RTL layouts
+            const isHorizontal = direction === "horizontal";
+            if (document.dir === "rtl" && isHorizontal) delta = -delta;
+            const panelConstraints = panelDataArray.map((panelData)=>panelData.constraints);
+            const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
+                delta: delta,
+                layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
+                panelConstraints: panelConstraints,
+                pivotIndices: pivotIndices,
+                trigger: (0, $5bf95d6f4b7f490d$export$e7bf60a870f429b0)(event) ? "keyboard" : "mouse-or-touch"
+            });
+            const layoutChanged = !(0, $81d2449822663a2a$export$a10903e2e57656c1)(prevLayout, nextLayout);
+            // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
+            // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
+            if ((0, $5bf95d6f4b7f490d$export$764db16956f554f8)(event) || (0, $5bf95d6f4b7f490d$export$c4dfce035d43d1e0)(event)) // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
+            // In this case, Panel sizes might not change–
+            // but updating cursor in this scenario would cause a flicker.
+            {
+                if (prevDeltaRef.current != delta) {
+                    prevDeltaRef.current = delta;
+                    if (!layoutChanged) {
+                        // If the pointer has moved too far to resize the panel any further,
+                        // update the cursor style for a visual clue.
+                        // This mimics VS Code behavior.
+                        if (isHorizontal) (0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(delta < 0 ? "horizontal-min" : "horizontal-max");
+                        else (0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(delta < 0 ? "vertical-min" : "vertical-max");
+                    } else // Reset the cursor style to the the normal resize cursor.
+                    (0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
+                }
+            }
+            if (layoutChanged) {
+                setLayout(nextLayout);
+                eagerValuesRef.current.layout = nextLayout;
+                if (onLayout) onLayout(nextLayout);
+                (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+            }
+        };
+    }, []);
+    // External APIs are safe to memoize via committed values ref
+    const resizePanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData, unsafePanelSize)=>{
+        const { onLayout: onLayout } = committedValuesRef.current;
+        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+        const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
+        const { panelSize: panelSize, pivotIndices: pivotIndices } = $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, prevLayout);
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(panelSize != null);
+        const isLastPanel = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
+        const nextLayout = (0, $fe96098ae4f2a44d$export$7fead5cc734d205b)({
+            delta: delta,
+            layout: prevLayout,
+            panelConstraints: panelConstraintsArray,
+            pivotIndices: pivotIndices,
+            trigger: "imperative-api"
+        });
+        if (!(0, $81d2449822663a2a$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
+            setLayout(nextLayout);
+            eagerValuesRef.current.layout = nextLayout;
+            if (onLayout) onLayout(nextLayout);
+            (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+        }
+    }, []);
+    const startDragging = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((dragHandleId, event)=>{
+        const { direction: direction } = committedValuesRef.current;
+        const { layout: layout } = eagerValuesRef.current;
+        const handleElement = (0, $99b0d18e36332b26$export$4c5229c874a62620)(dragHandleId);
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(handleElement);
+        const initialCursorPosition = (0, $a568cbd9a3e686f5$export$ae0c59ca751ba81d)(direction, event);
+        setDragState({
+            dragHandleId: dragHandleId,
+            dragHandleRect: handleElement.getBoundingClientRect(),
+            initialCursorPosition: initialCursorPosition,
+            initialLayout: layout
+        });
+    }, []);
+    const stopDragging = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)(()=>{
+        (0, $8d9d88bebf1a8ace$export$b61932ee18f96e08)();
+        setDragState(null);
+    }, []);
+    const unregisterPanelRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        pendingPanelIds: new Set(),
+        timeout: null
+    });
+    const unregisterPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((panelData)=>{
+        const { onLayout: onLayout } = committedValuesRef.current;
+        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
+        const index = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData);
+        if (index >= 0) {
+            panelDataArray.splice(index, 1);
+            unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
+        }
+        if (unregisterPanelRef.current.timeout != null) clearTimeout(unregisterPanelRef.current.timeout);
+        // Batch panel unmounts so that we only calculate layout once;
+        // This is more efficient and avoids misleading warnings in development mode.
+        // We can't check the DOM to detect this because Panel elements have not yet been removed.
+        unregisterPanelRef.current.timeout = setTimeout(()=>{
+            const { pendingPanelIds: pendingPanelIds } = unregisterPanelRef.current;
+            const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+            // TRICKY
+            // Strict effects mode
+            let unmountDueToStrictMode = false;
+            pendingPanelIds.forEach((panelId)=>{
+                pendingPanelIds.delete(panelId);
+                if (panelDataArray.find(({ id: id })=>id === panelId) != null) unmountDueToStrictMode = true;
+                else // TRICKY
+                // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
+                // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
+                // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
+                delete panelIdToLastNotifiedSizeMap[panelId];
+            });
+            if (unmountDueToStrictMode) return;
+            if (panelDataArray.length === 0) // The group is unmounting; skip layout calculation.
+            return;
+            let unsafeLayout = (0, $457c46ca858cf2c6$export$47337a21c443778e)({
+                panelDataArray: panelDataArray
+            });
+            // Validate even saved layouts in case something has changed since last render
+            // e.g. for pixel groups, this could be the size of the window
+            const nextLayout = (0, $6f1a05873bb6ec6f$export$64432a52a1035c18)({
+                layout: unsafeLayout,
+                panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
+            });
+            if (!(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevLayout, nextLayout)) {
+                setLayout(nextLayout);
+                eagerValuesRef.current.layout = nextLayout;
+                if (onLayout) onLayout(nextLayout);
+                (0, $2743876c6469fb21$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+            }
+        }, 0);
+    }, []);
+    const context = (0, $ef07efbe5fa7d87e$export$1538c33de8887b59)(()=>({
+            collapsePanel: collapsePanel,
+            direction: direction,
+            dragState: dragState,
+            expandPanel: expandPanel,
+            getPanelSize: getPanelSize,
+            getPanelStyle: getPanelStyle,
+            groupId: groupId,
+            isPanelCollapsed: isPanelCollapsed,
+            isPanelExpanded: isPanelExpanded,
+            registerPanel: registerPanel,
+            registerResizeHandle: registerResizeHandle,
+            resizePanel: resizePanel,
+            startDragging: startDragging,
+            stopDragging: stopDragging,
+            unregisterPanel: unregisterPanel
+        }), [
+        collapsePanel,
+        dragState,
+        direction,
+        expandPanel,
+        getPanelSize,
+        getPanelStyle,
+        groupId,
+        isPanelCollapsed,
+        isPanelExpanded,
+        registerPanel,
+        registerResizeHandle,
+        resizePanel,
+        startDragging,
+        stopDragging,
+        unregisterPanel
+    ]);
+    const style = {
+        display: "flex",
+        flexDirection: direction === "horizontal" ? "row" : "column",
+        height: "100%",
+        overflow: "hidden",
+        width: "100%"
+    };
+    return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)((0, $e30963544e64b604$export$7d8c6d083caec74a).Provider, {
+        value: context
+    }, (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
+        ...rest,
+        children: children,
+        className: classNameFromProps,
+        style: {
+            ...style,
+            ...styleFromProps
+        },
+        // CSS selectors
+        "data-panel-group": "",
+        "data-panel-group-direction": direction,
+        "data-panel-group-id": groupId
+    }));
 }
-const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
-  ...props,
-  forwardedRef: ref
-}));
-PanelGroupWithForwardedRef.displayName = "PanelGroup";
-PanelGroup.displayName = "forwardRef(PanelGroup)";
-function panelDataHelper(groupId, panelDataArray, panelData, layout) {
-  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-  const panelIndex = panelDataArray.indexOf(panelData);
-  const panelConstraints = panelConstraintsArray[panelIndex];
-  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
-  const percentagePanelConstraints = computePercentagePanelConstraints(panelConstraintsArray, panelIndex, groupSizePixels);
-  const isLastPanel = panelIndex === panelDataArray.length - 1;
-  const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
-  const panelSizePercentage = layout[panelIndex];
-  const panelSizePixels = convertPercentageToPixels(panelSizePercentage, groupSizePixels);
-  return {
-    ...percentagePanelConstraints,
-    collapsible: panelConstraints.collapsible,
-    panelSizePercentage,
-    panelSizePixels,
-    groupSizePixels,
-    pivotIndices
-  };
+const $3daa5d4c086ea816$export$1d05749f6f573bb = (0, $ef07efbe5fa7d87e$export$257a8862b851cb5b)((props, ref)=>(0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)($3daa5d4c086ea816$var$PanelGroupWithForwardedRef, {
+        ...props,
+        forwardedRef: ref
+    }));
+$3daa5d4c086ea816$var$PanelGroupWithForwardedRef.displayName = "PanelGroup";
+$3daa5d4c086ea816$export$1d05749f6f573bb.displayName = "forwardRef(PanelGroup)";
+function $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData) {
+    return panelDataArray.findIndex((prevPanelData)=>prevPanelData === panelData || prevPanelData.id === panelData.id);
+}
+function $3daa5d4c086ea816$var$panelDataHelper(panelDataArray, panelData, layout) {
+    const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
+    const panelIndex = $3daa5d4c086ea816$var$findPanelDataIndex(panelDataArray, panelData);
+    const panelConstraints = panelConstraintsArray[panelIndex];
+    const isLastPanel = panelIndex === panelDataArray.length - 1;
+    const pivotIndices = isLastPanel ? [
+        panelIndex - 1,
+        panelIndex
+    ] : [
+        panelIndex,
+        panelIndex + 1
+    ];
+    const panelSize = layout[panelIndex];
+    return {
+        ...panelConstraints,
+        panelSize: panelSize,
+        pivotIndices: pivotIndices
+    };
 }
 
-// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
-function useWindowSplitterResizeHandlerBehavior({
-  disabled,
-  handleId,
-  resizeHandler
-}) {
-  useEffect(() => {
-    if (disabled || resizeHandler == null) {
-      return;
-    }
-    const handleElement = getResizeHandleElement(handleId);
-    if (handleElement == null) {
-      return;
-    }
-    const onKeyDown = event => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "ArrowUp":
-        case "End":
-        case "Home":
-          {
-            event.preventDefault();
-            resizeHandler(event);
-            break;
-          }
-        case "F6":
-          {
-            event.preventDefault();
-            const groupId = handleElement.getAttribute("data-panel-group-id");
-            const handles = getResizeHandleElementsForGroup(groupId);
-            const index = getResizeHandleElementIndex(groupId, handleId);
-            assert(index !== null);
-            const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
-            const nextHandle = handles[nextIndex];
-            nextHandle.focus();
-            break;
-          }
-      }
-    };
-    handleElement.addEventListener("keydown", onKeyDown);
-    return () => {
-      handleElement.removeEventListener("keydown", onKeyDown);
-    };
-  }, [disabled, handleId, resizeHandler]);
+
+
+
+
+
+
+
+function $4a90471e7083b52f$export$33b0bea6ac3ffb03({ disabled: disabled, handleId: handleId, resizeHandler: resizeHandler }) {
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
+        if (disabled || resizeHandler == null) return;
+        const handleElement = (0, $99b0d18e36332b26$export$4c5229c874a62620)(handleId);
+        if (handleElement == null) return;
+        const onKeyDown = (event)=>{
+            if (event.defaultPrevented) return;
+            switch(event.key){
+                case "ArrowDown":
+                case "ArrowLeft":
+                case "ArrowRight":
+                case "ArrowUp":
+                case "End":
+                case "Home":
+                    event.preventDefault();
+                    resizeHandler(event);
+                    break;
+                case "F6":
+                    {
+                        event.preventDefault();
+                        const groupId = handleElement.getAttribute("data-panel-group-id");
+                        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(groupId);
+                        const handles = (0, $9196ba7c0d09e3f3$export$63eb605e437b214f)(groupId);
+                        const index = (0, $a144d12e0d2017d1$export$4c92fedbbc2381ca)(groupId, handleId);
+                        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(index !== null);
+                        const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
+                        const nextHandle = handles[nextIndex];
+                        nextHandle.focus();
+                        break;
+                    }
+            }
+        };
+        handleElement.addEventListener("keydown", onKeyDown);
+        return ()=>{
+            handleElement.removeEventListener("keydown", onKeyDown);
+        };
+    }, [
+        disabled,
+        handleId,
+        resizeHandler
+    ]);
 }
 
-function PanelResizeHandle({
-  children = null,
-  className: classNameFromProps = "",
-  dataAttributes,
-  disabled = false,
-  id: idFromProps = null,
-  onDragging,
-  style: styleFromProps = {},
-  tagName: Type = "div"
-}) {
-  const divElementRef = useRef(null);
-
-  // Use a ref to guard against users passing inline props
-  const callbacksRef = useRef({
-    onDragging
-  });
-  useEffect(() => {
-    callbacksRef.current.onDragging = onDragging;
-  });
-  const panelGroupContext = useContext(PanelGroupContext);
-  if (panelGroupContext === null) {
-    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
-  }
-  const {
-    direction,
-    dragState,
-    groupId,
-    registerResizeHandle,
-    startDragging,
-    stopDragging
-  } = panelGroupContext;
-  const resizeHandleId = useUniqueId(idFromProps);
-  const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
-  const [isFocused, setIsFocused] = useState(false);
-  const [resizeHandler, setResizeHandler] = useState(null);
-  const stopDraggingAndBlur = useCallback(() => {
-    // Clicking on the drag handle shouldn't leave it focused;
-    // That would cause the PanelGroup to think it was still active.
-    const div = divElementRef.current;
-    div.blur();
-    stopDragging();
-    const {
-      onDragging
-    } = callbacksRef.current;
-    if (onDragging) {
-      onDragging(false);
-    }
-  }, [stopDragging]);
-  useEffect(() => {
-    if (disabled) {
-      setResizeHandler(null);
-    } else {
-      const resizeHandler = registerResizeHandle(resizeHandleId);
-      setResizeHandler(() => resizeHandler);
-    }
-  }, [disabled, resizeHandleId, registerResizeHandle]);
-  useEffect(() => {
-    if (disabled || resizeHandler == null || !isDragging) {
-      return;
-    }
-    const onMove = event => {
-      resizeHandler(event);
-    };
-    const onMouseLeave = event => {
-      resizeHandler(event);
-    };
-    const divElement = divElementRef.current;
-    const targetDocument = divElement.ownerDocument;
-    targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
-    targetDocument.body.addEventListener("mousemove", onMove);
-    targetDocument.body.addEventListener("touchmove", onMove);
-    targetDocument.body.addEventListener("mouseleave", onMouseLeave);
-    window.addEventListener("mouseup", stopDraggingAndBlur);
-    window.addEventListener("touchend", stopDraggingAndBlur);
-    return () => {
-      targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
-      targetDocument.body.removeEventListener("mousemove", onMove);
-      targetDocument.body.removeEventListener("touchmove", onMove);
-      targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
-      window.removeEventListener("mouseup", stopDraggingAndBlur);
-      window.removeEventListener("touchend", stopDraggingAndBlur);
+
+
+
+
+function $971f2c37f9d2b98e$export$8829ecf6b6b15484({ children: children = null, className: classNameFromProps = "", disabled: disabled = false, id: idFromProps, onDragging: onDragging, style: styleFromProps = {}, tabIndex: tabIndex = 0, tagName: Type = "div", ...rest }) {
+    const divElementRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(null);
+    // Use a ref to guard against users passing inline props
+    const callbacksRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        onDragging: onDragging
+    });
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
+        callbacksRef.current.onDragging = onDragging;
+    });
+    const panelGroupContext = (0, $ef07efbe5fa7d87e$export$fae74005e78b1a27)((0, $e30963544e64b604$export$7d8c6d083caec74a));
+    if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+    const { direction: direction, dragState: dragState, groupId: groupId, registerResizeHandle: registerResizeHandle, startDragging: startDragging, stopDragging: stopDragging } = panelGroupContext;
+    const resizeHandleId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
+    const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
+    const [isFocused, setIsFocused] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(false);
+    const [resizeHandler, setResizeHandler] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(null);
+    const stopDraggingAndBlur = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)(()=>{
+        // Clicking on the drag handle shouldn't leave it focused;
+        // That would cause the PanelGroup to think it was still active.
+        const divElement = divElementRef.current;
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(divElement);
+        divElement.blur();
+        stopDragging();
+        const { onDragging: onDragging } = callbacksRef.current;
+        if (onDragging) onDragging(false);
+    }, [
+        stopDragging
+    ]);
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
+        if (disabled) setResizeHandler(null);
+        else {
+            const resizeHandler = registerResizeHandle(resizeHandleId);
+            setResizeHandler(()=>resizeHandler);
+        }
+    }, [
+        disabled,
+        resizeHandleId,
+        registerResizeHandle
+    ]);
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
+        if (disabled || resizeHandler == null || !isDragging) return;
+        const onMove = (event)=>{
+            resizeHandler(event);
+        };
+        const onMouseLeave = (event)=>{
+            resizeHandler(event);
+        };
+        const divElement = divElementRef.current;
+        (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(divElement);
+        const targetDocument = divElement.ownerDocument;
+        targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
+        targetDocument.body.addEventListener("mousemove", onMove);
+        targetDocument.body.addEventListener("touchmove", onMove);
+        targetDocument.body.addEventListener("mouseleave", onMouseLeave);
+        window.addEventListener("mouseup", stopDraggingAndBlur);
+        window.addEventListener("touchend", stopDraggingAndBlur);
+        return ()=>{
+            targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
+            targetDocument.body.removeEventListener("mousemove", onMove);
+            targetDocument.body.removeEventListener("touchmove", onMove);
+            targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
+            window.removeEventListener("mouseup", stopDraggingAndBlur);
+            window.removeEventListener("touchend", stopDraggingAndBlur);
+        };
+    }, [
+        direction,
+        disabled,
+        isDragging,
+        resizeHandler,
+        stopDraggingAndBlur
+    ]);
+    (0, $4a90471e7083b52f$export$33b0bea6ac3ffb03)({
+        disabled: disabled,
+        handleId: resizeHandleId,
+        resizeHandler: resizeHandler
+    });
+    const style = {
+        cursor: (0, $8d9d88bebf1a8ace$export$fa35f3322c52262f)(direction),
+        touchAction: "none",
+        userSelect: "none"
     };
-  }, [direction, disabled, isDragging, resizeHandler, stopDraggingAndBlur]);
-  useWindowSplitterResizeHandlerBehavior({
-    disabled,
-    handleId: resizeHandleId,
-    resizeHandler
-  });
-  const style = {
-    cursor: getCursorStyle(direction),
-    touchAction: "none",
-    userSelect: "none"
-  };
-  return createElement(Type, {
-    children,
-    className: classNameFromProps,
-    onBlur: () => setIsFocused(false),
-    onFocus: () => setIsFocused(true),
-    onMouseDown: event => {
-      startDragging(resizeHandleId, event.nativeEvent);
-      const {
-        onDragging
-      } = callbacksRef.current;
-      if (onDragging) {
-        onDragging(true);
-      }
-    },
-    onMouseUp: stopDraggingAndBlur,
-    onTouchCancel: stopDraggingAndBlur,
-    onTouchEnd: stopDraggingAndBlur,
-    onTouchStart: event => {
-      startDragging(resizeHandleId, event.nativeEvent);
-      const {
-        onDragging
-      } = callbacksRef.current;
-      if (onDragging) {
-        onDragging(true);
-      }
-    },
-    ref: divElementRef,
-    role: "separator",
-    style: {
-      ...style,
-      ...styleFromProps
-    },
-    tabIndex: 0,
-    ...dataAttributes,
-    // CSS selectors
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId,
-    "data-resize-handle": "",
-    "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
-    "data-panel-resize-handle-enabled": !disabled,
-    "data-panel-resize-handle-id": resizeHandleId
-  });
+    return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
+        ...rest,
+        children: children,
+        className: classNameFromProps,
+        onBlur: ()=>setIsFocused(false),
+        onFocus: ()=>setIsFocused(true),
+        onMouseDown: (event)=>{
+            startDragging(resizeHandleId, event.nativeEvent);
+            const callbacks = callbacksRef.current;
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(callbacks);
+            const { onDragging: onDragging } = callbacks;
+            if (onDragging) onDragging(true);
+        },
+        onMouseUp: stopDraggingAndBlur,
+        onTouchCancel: stopDraggingAndBlur,
+        onTouchEnd: stopDraggingAndBlur,
+        onTouchStart: (event)=>{
+            startDragging(resizeHandleId, event.nativeEvent);
+            const callbacks = callbacksRef.current;
+            (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(callbacks);
+            const { onDragging: onDragging } = callbacks;
+            if (onDragging) onDragging(true);
+        },
+        ref: divElementRef,
+        role: "separator",
+        style: {
+            ...style,
+            ...styleFromProps
+        },
+        tabIndex: tabIndex,
+        // CSS selectors
+        "data-panel-group-direction": direction,
+        "data-panel-group-id": groupId,
+        "data-resize-handle": "",
+        "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
+        "data-panel-resize-handle-enabled": !disabled,
+        "data-panel-resize-handle-id": resizeHandleId
+    });
 }
-PanelResizeHandle.displayName = "PanelResizeHandle";
+$971f2c37f9d2b98e$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";
+
+
+
+
 
-export { Panel, PanelGroup, PanelResizeHandle };
+export {$5f33910cd46e8ae7$export$a7a9523472993e97 as assert, $c33df6d7c39fd3ee$export$2ddb90ad54e5f587 as Panel, $3daa5d4c086ea816$export$1d05749f6f573bb as PanelGroup, $971f2c37f9d2b98e$export$8829ecf6b6b15484 as PanelResizeHandle};
+//# sourceMappingURL=react-resizable-panels.esm.js.map