@zendeskgarden/react-grid 8.50.1 → 8.51.0

package/dist/index.esm.js

@@ -5,11 +5,54 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useMemo, useState, useCallback, forwardRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import { math } from 'polished';
+import styled, { css, ThemeContext } from 'styled-components';
+import { math, rgba } from 'polished';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import mergeRefs from 'react-merge-refs';
+import { SplitterPosition, SplitterOrientation, useSplitter, SplitterType } from '@zendeskgarden/container-splitter';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -65,6 +108,65 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
 var ALIGN_SELF = ['auto'].concat(ALIGN_ITEMS);
 var DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
@@ -72,9 +174,10 @@ var JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
 var TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
 var SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 var WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
+var ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
-var COMPONENT_ID$2 = 'grid.col';
-var colorStyles$2 = function colorStyles(props) {
+var COMPONENT_ID$5 = 'grid.col';
+var colorStyles$3 = function colorStyles(props) {
   var backgroundColor = getColor('primaryHue', 600, props.theme, 0.1);
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
@@ -119,22 +222,22 @@ var flexStyles$1 = function flexStyles(size, alignSelf, textAlign, offset, order
 var mediaStyles$1 = function mediaStyles(minWidth, size, alignSelf, textAlign, offset, order, props) {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles$1(size, alignSelf, textAlign, offset, order, props));
 };
-var sizeStyles$2 = function sizeStyles(props) {
+var sizeStyles$3 = function sizeStyles(props) {
   var padding = props.gutters ? math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 var StyledCol = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.50.1'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
 })(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], function (props) {
   return flexStyles$1(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props);
 }, function (props) {
-  return sizeStyles$2(props);
+  return sizeStyles$3(props);
 }, function (props) {
-  return props.debug && colorStyles$2(props);
+  return props.debug && colorStyles$3(props);
 }, function (props) {
   return mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props);
 }, function (props) {
@@ -146,45 +249,45 @@ var StyledCol = styled.div.attrs({
 }, function (props) {
   return mediaStyles$1(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
+  return retrieveComponentStyles(COMPONENT_ID$5, props);
 });
 StyledCol.defaultProps = {
   columns: 12,
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'grid.grid';
-var colorStyles$1 = function colorStyles(props) {
+var COMPONENT_ID$4 = 'grid.grid';
+var colorStyles$2 = function colorStyles(props) {
   var borderColor = getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
   var borderWidth = math("".concat(props.theme.borderWidths.sm, " * 2"));
   return css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
-var sizeStyles$1 = function sizeStyles(props) {
+var sizeStyles$2 = function sizeStyles(props) {
   var padding = props.gutters ? math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 var StyledGrid = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.50.1'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
 })(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
-  return sizeStyles$1(props);
+  return sizeStyles$2(props);
 }, function (props) {
-  return props.debug && colorStyles$1(props);
+  return props.debug && colorStyles$2(props);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
+  return retrieveComponentStyles(COMPONENT_ID$4, props);
 });
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'grid.row';
-var colorStyles = function colorStyles(props) {
+var COMPONENT_ID$3 = 'grid.row';
+var colorStyles$1 = function colorStyles(props) {
   var borderColor = getColor(props.theme.palette.mint, 600, props.theme, 0.5);
   var borderWidth = props.theme.borderWidths.sm;
   return css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
@@ -209,22 +312,22 @@ var flexStyles = function flexStyles(alignItems, justifyContent, wrap) {
 var mediaStyles = function mediaStyles(minWidth, alignItems, justifyContent, wrap) {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-var sizeStyles = function sizeStyles(props) {
+var sizeStyles$1 = function sizeStyles(props) {
   var margin = props.gutters ? math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 var StyledRow = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.50.1'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.51.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
 })(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], function (props) {
   return flexStyles(props.alignItems, props.justifyContent, props.wrapAll);
 }, function (props) {
-  return sizeStyles(props);
+  return sizeStyles$1(props);
 }, function (props) {
-  return props.debug && colorStyles(props);
+  return props.debug && colorStyles$1(props);
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs);
 }, function (props) {
@@ -236,13 +339,120 @@ var StyledRow = styled.div.attrs({
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
+  return retrieveComponentStyles(COMPONENT_ID$3, props);
 });
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: DEFAULT_THEME
 };
 
+var COMPONENT_ID$2 = 'pane';
+var StyledPane = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.51.0'
+}).withConfig({
+  displayName: "StyledPane",
+  componentId: "sc-1ltjst7-0"
+})(["position:relative;min-width:0;min-height:0;", ";"], function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$2, props);
+});
+StyledPane.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID$1 = 'pane.content';
+var StyledPaneContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.51.0'
+}).withConfig({
+  displayName: "StyledPaneContent",
+  componentId: "sc-1b38mbh-0"
+})(["height:100%;overflow:auto;", ";"], function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$1, props);
+});
+StyledPaneContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+var COMPONENT_ID = 'pane.splitter';
+var colorStyles = function colorStyles(props) {
+  var color = getColor('neutralHue', 300, props.theme);
+  var hoverColor = getColor('primaryHue', 600, props.theme);
+  var activeColor = getColor('primaryHue', 800, props.theme);
+  var boxShadow = props.theme.shadows.md(rgba(hoverColor, 0.35));
+  return css(["&::before{background-color:", ";}&:hover::before,&[data-garden-focus-visible]::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";}&:active::before{background-color:", ";}"], color, hoverColor, boxShadow, activeColor);
+};
+var sizeStyles = function sizeStyles(props) {
+  var size = math("".concat(props.theme.shadowWidths.md, " * 2"));
+  var offset = math("-".concat(size, " / 2"));
+  var cursor;
+  var top;
+  var right;
+  var left;
+  var bottom;
+  var width;
+  var height;
+  var separatorWidth;
+  var separatorHeight;
+  switch (props.orientation) {
+    case 'top':
+      cursor = 'row-resize';
+      top = offset;
+      width = '100%';
+      height = size;
+      separatorWidth = width;
+      separatorHeight = props.theme.borderWidths.sm;
+      break;
+    case 'end':
+      cursor = 'col-resize';
+      top = 0;
+      width = size;
+      height = '100%';
+      separatorWidth = props.theme.borderWidths.sm;
+      separatorHeight = height;
+      if (props.theme.rtl) {
+        left = offset;
+      } else {
+        right = offset;
+      }
+      break;
+    case 'bottom':
+      cursor = 'row-resize';
+      bottom = offset;
+      width = '100%';
+      height = size;
+      separatorWidth = width;
+      separatorHeight = props.theme.borderWidths.sm;
+      break;
+    case 'start':
+      cursor = 'col-resize';
+      top = 0;
+      width = size;
+      height = '100%';
+      separatorWidth = props.theme.borderWidths.sm;
+      separatorHeight = height;
+      if (props.theme.rtl) {
+        right = offset;
+      } else {
+        left = offset;
+      }
+      break;
+  }
+  return css(["display:flex;top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,width 0.25s ease-in-out,height 0.25s ease-in-out;margin:auto;width:", ";height:", ";}&:hover::before,&[data-garden-focus-visible]::before,&:focus::before{", ":", ";}&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, cursor, width, height, separatorWidth, separatorHeight, width === '100%' ? 'height' : 'width', math("".concat(props.theme.borderWidths.sm, " * 2")), props.theme.borderRadii.md);
+};
+var StyledPaneSplitter = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.51.0'
+}).withConfig({
+  displayName: "StyledPaneSplitter",
+  componentId: "sc-jylemn-0"
+})(["position:absolute;z-index:1;", ";&:hover,&[data-garden-focus-visible]{z-index:2;}&:focus{outline:none;}&::before{display:block;content:'';}", ";", ";"], sizeStyles, colorStyles, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID, props);
+});
+StyledPaneSplitter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
 var GridContext = createContext({
   gutters: 'md'
 });
@@ -250,10 +460,10 @@ var useGridContext = function useGridContext() {
   return useContext(GridContext);
 };
 
-var _excluded$2 = ["size"];
+var _excluded$4 = ["size"];
 var Col = React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$4);
   var _useGridContext = useGridContext(),
       columns = _useGridContext.columns,
       gutters = _useGridContext.gutters,
@@ -300,11 +510,11 @@ Col.propTypes = {
   orderXl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
-var _excluded$1 = ["columns", "debug"];
+var _excluded$3 = ["columns", "debug"];
 var Grid = React.forwardRef(function (_ref, ref) {
   var columns = _ref.columns,
       debug = _ref.debug,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      props = _objectWithoutProperties(_ref, _excluded$3);
   var value = useMemo(function () {
     return {
       columns: columns,
@@ -330,10 +540,10 @@ Grid.defaultProps = {
   gutters: 'md'
 };
 
-var _excluded = ["wrap"];
+var _excluded$2 = ["wrap"];
 var Row = React.forwardRef(function (_ref, ref) {
   var wrap = _ref.wrap,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded$2);
   var _useGridContext = useGridContext(),
       gutters = _useGridContext.gutters,
       debug = _useGridContext.debug;
@@ -366,4 +576,339 @@ Row.propTypes = {
   wrapXl: PropTypes.oneOf(WRAP)
 };
 
-export { ALIGN_ITEMS as ARRAY_ALIGN_ITEMS, ALIGN_SELF as ARRAY_ALIGN_SELF, DIRECTION as ARRAY_DIRECTION, JUSTIFY_CONTENT as ARRAY_JUSTIFY_CONTENT, SPACE as ARRAY_SPACE, TEXT_ALIGN as ARRAY_TEXT_ALIGN, WRAP as ARRAY_WRAP, Col, Grid, Row };
+var SplitterContext = createContext({
+  setRowValue: function setRowValue() {
+    return undefined;
+  },
+  setColumnValue: function setColumnValue() {
+    return undefined;
+  },
+  getColumnValue: function getColumnValue() {
+    return 0;
+  },
+  getRowValue: function getRowValue() {
+    return 0;
+  },
+  rowState: {},
+  columnState: {},
+  totalPanesHeight: 1,
+  totalPanesWidth: 1,
+  pixelsPerFr: {
+    rows: 0,
+    columns: 0
+  }
+});
+var useSplitterContext = function useSplitterContext() {
+  return useContext(SplitterContext);
+};
+
+var getPixelsPerFr = function getPixelsPerFr(totalFrs, totalDimension) {
+  return totalDimension / totalFrs;
+};
+var convertToPixels = function convertToPixels(values, pixelsPerFr) {
+  return Object.entries(values).reduce(function (prev, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+    prev[key] = value * pixelsPerFr;
+    return prev;
+  }, {});
+};
+var PaneProvider = function PaneProvider(_ref3) {
+  var totalPanesWidth = _ref3.totalPanesWidth,
+      totalPanesHeight = _ref3.totalPanesHeight,
+      defaultRowValues = _ref3.defaultRowValues,
+      defaultColumnValues = _ref3.defaultColumnValues,
+      rowValues = _ref3.rowValues,
+      columnValues = _ref3.columnValues,
+      onChange = _ref3.onChange,
+      children = _ref3.children;
+  var isControlled = rowValues !== undefined && rowValues !== null && columnValues !== undefined && columnValues !== null;
+  var _useState = useState(defaultRowValues || {}),
+      _useState2 = _slicedToArray(_useState, 2),
+      rowState = _useState2[0],
+      setRowState = _useState2[1];
+  var _useState3 = useState(defaultColumnValues || {}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      columnState = _useState4[0],
+      setColumnState = _useState4[1];
+  var rowsTrack = isControlled ? rowValues : rowState;
+  var columnsTrack = isControlled ? columnValues : columnState;
+  var setRowsTrack = useCallback(function (values) {
+    if (onChange) {
+      return onChange(values(rowsTrack), columnsTrack);
+    }
+    return setRowState(values);
+  }, [onChange, setRowState, columnsTrack, rowsTrack]);
+  var setColumnsTrack = useCallback(function (values) {
+    if (onChange) {
+      return onChange(rowsTrack, values(columnsTrack));
+    }
+    return setColumnState(values);
+  }, [onChange, setColumnState, rowsTrack, columnsTrack]);
+  var totalFractions = useMemo(function () {
+    return {
+      rows: Object.values(rowsTrack).reduce(function (prev, value) {
+        return value + prev;
+      }, 0),
+      columns: Object.values(columnsTrack).reduce(function (prev, value) {
+        return value + prev;
+      }, 0)
+    };
+  }, [rowsTrack, columnsTrack]);
+  var pixelsPerFr = useMemo(function () {
+    return {
+      rows: getPixelsPerFr(totalFractions.rows, totalPanesHeight),
+      columns: getPixelsPerFr(totalFractions.columns, totalPanesWidth)
+    };
+  }, [totalFractions, totalPanesHeight, totalPanesWidth]);
+  var layoutStateInPixels = useMemo(function () {
+    return {
+      rows: convertToPixels(rowsTrack, pixelsPerFr.rows),
+      columns: convertToPixels(columnsTrack, pixelsPerFr.columns)
+    };
+  }, [rowsTrack, columnsTrack, pixelsPerFr]);
+  var layoutIndices = useMemo(function () {
+    var rowArray = Object.keys(rowsTrack);
+    var columnArray = Object.keys(columnsTrack);
+    var rows = rowArray.reduce(function (prev, key, index) {
+      prev[key] = index;
+      return prev;
+    }, {});
+    var columns = columnArray.reduce(function (prev, key, index) {
+      prev[key] = index;
+      return prev;
+    }, {});
+    return {
+      rows: rows,
+      columns: columns,
+      rowArray: rowArray,
+      columnArray: columnArray
+    };
+  }, [rowsTrack, columnsTrack]);
+  var setRowValue = useCallback(function (isTop, id, value) {
+    var rows = layoutIndices.rows,
+        rowArray = layoutIndices.rowArray;
+    var stealFromTraversal = isTop ? -1 : 1;
+    var addToTraversal = 0;
+    setRowsTrack(function (state) {
+      var oldValue = rowsTrack[id];
+      var stealFromIndex = rows[id] + stealFromTraversal;
+      var addToIndex = rows[id] + addToTraversal;
+      var stealFromKey = rowArray[stealFromIndex];
+      var addToKey = rowArray[addToIndex];
+      var difference = oldValue - value;
+      var nextState = _objectSpread2({}, state);
+      nextState[addToKey] = rowsTrack[addToKey] - difference;
+      nextState[stealFromKey] = rowsTrack[stealFromKey] + difference;
+      return nextState;
+    });
+  }, [layoutIndices, rowsTrack, setRowsTrack]);
+  var setColumnValue = useCallback(function (isStart, id, value) {
+    var columns = layoutIndices.columns,
+        columnArray = layoutIndices.columnArray;
+    var stealFromTraversal = isStart ? 0 : 1;
+    var addToTraversal = isStart ? -1 : 0;
+    setColumnsTrack(function (state) {
+      var stealFromIndex = columns[id] + stealFromTraversal;
+      var addToIndex = columns[id] + addToTraversal;
+      var oldValue = columnsTrack[id];
+      var stealFromKey = columnArray[stealFromIndex];
+      var addToKey = columnArray[addToIndex];
+      var difference = oldValue - value;
+      var nextState = _objectSpread2({}, state);
+      nextState[addToKey] = columnsTrack[addToKey] - difference;
+      nextState[stealFromKey] = columnsTrack[stealFromKey] + difference;
+      return nextState;
+    });
+  }, [layoutIndices, columnsTrack, setColumnsTrack]);
+  var getColumnValue = useCallback(function (splitterKey, isPixels) {
+    if (isPixels) {
+      return layoutStateInPixels.columns[splitterKey];
+    }
+    return columnsTrack[splitterKey];
+  }, [columnsTrack, layoutStateInPixels]);
+  var getRowValue = useCallback(function (splitterKey, isPixels) {
+    if (isPixels) {
+      return layoutStateInPixels.rows[splitterKey];
+    }
+    return rowsTrack[splitterKey];
+  }, [rowsTrack, layoutStateInPixels]);
+  var getGridTemplateColumns = useCallback(function (isPixels) {
+    var columnArray = layoutIndices.columnArray;
+    if (isPixels) {
+      return columnArray.map(function (col) {
+        return "".concat(layoutStateInPixels.columns[col], "px");
+      }).join(' ');
+    }
+    return columnArray.map(function (col) {
+      return "".concat(columnsTrack[col], "fr");
+    }).join(' ');
+  }, [layoutIndices, columnsTrack, layoutStateInPixels]);
+  var getGridTemplateRows = useCallback(function (isPixels) {
+    var rowArray = layoutIndices.rowArray;
+    if (isPixels) {
+      return rowArray.map(function (row) {
+        return "".concat(layoutStateInPixels.rows[row], "px");
+      }).join(' ');
+    }
+    return rowArray.map(function (row) {
+      return "".concat(rowsTrack[row], "fr");
+    }).join(' ');
+  }, [layoutIndices, rowsTrack, layoutStateInPixels]);
+  var splitterContext = useMemo(function () {
+    return {
+      columnState: columnState,
+      rowState: rowState,
+      setRowValue: setRowValue,
+      setColumnValue: setColumnValue,
+      getRowValue: getRowValue,
+      getColumnValue: getColumnValue,
+      totalPanesHeight: totalPanesHeight,
+      totalPanesWidth: totalPanesWidth,
+      pixelsPerFr: pixelsPerFr
+    };
+  }, [rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
+  return React.createElement(SplitterContext.Provider, {
+    value: splitterContext
+  }, children === null || children === void 0 ? void 0 : children({
+    getRowValue: getRowValue,
+    getColumnValue: getColumnValue,
+    getGridTemplateColumns: getGridTemplateColumns,
+    getGridTemplateRows: getGridTemplateRows
+  }));
+};
+PaneProvider.displayName = 'PaneProvider';
+PaneProvider.propTypes = {
+  totalPanesWidth: PropTypes.number.isRequired,
+  totalPanesHeight: PropTypes.number.isRequired,
+  defaultRowValues: PropTypes.object,
+  defaultColumnValues: PropTypes.object,
+  rowValues: PropTypes.object,
+  columnValues: PropTypes.object,
+  onChange: PropTypes.func,
+  children: PropTypes.func
+};
+
+var PaneContext = createContext({
+  setId: function setId() {
+    return undefined;
+  }
+});
+var usePaneContext = function usePaneContext() {
+  return useContext(PaneContext);
+};
+
+var _excluded$1 = ["layoutKey", "min", "max", "orientation"];
+var orientationToPosition = {
+  start: SplitterPosition.TRAILS,
+  end: SplitterPosition.TRAILS,
+  top: SplitterPosition.LEADS,
+  bottom: SplitterPosition.TRAILS
+};
+var paneToSplitterOrientation = {
+  start: SplitterOrientation.VERTICAL,
+  end: SplitterOrientation.VERTICAL,
+  top: SplitterOrientation.HORIZONTAL,
+  bottom: SplitterOrientation.HORIZONTAL
+};
+var orientationToDimension = {
+  start: 'columns',
+  end: 'columns',
+  top: 'rows',
+  bottom: 'rows'
+};
+var SplitterComponent = forwardRef(function (_ref, ref) {
+  var layoutKey = _ref.layoutKey,
+      min = _ref.min,
+      max = _ref.max,
+      orientation = _ref.orientation,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+  var splitterContext = useSplitterContext();
+  var paneContext = usePaneContext();
+  var themeContext = useContext(ThemeContext);
+  var position = orientationToPosition[orientation];
+  var isRow = orientationToDimension[orientation] === 'rows';
+  var splitterOrientation = paneToSplitterOrientation[orientation];
+  var pixelsPerFr = splitterContext.pixelsPerFr[orientationToDimension[orientation]];
+  var _useSplitter = useSplitter({
+    type: SplitterType.VARIABLE,
+    orientation: splitterOrientation,
+    position: position,
+    min: min * pixelsPerFr,
+    max: max * pixelsPerFr,
+    rtl: themeContext.rtl,
+    environment: window,
+    onChange: function onChange(valueNow) {
+      if (isRow) {
+        return splitterContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
+      }
+      return splitterContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
+    },
+    valueNow: isRow ? splitterContext.getRowValue(layoutKey, true) : splitterContext.getColumnValue(layoutKey, true)
+  }),
+      getSeparatorProps = _useSplitter.getSeparatorProps,
+      getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;
+  useEffect(function () {
+    if (!paneContext.id) {
+      paneContext.setId(getPrimaryPaneProps().id);
+    }
+  }, [paneContext, getPrimaryPaneProps]);
+  var separatorProps = getSeparatorProps({
+    'aria-controls': paneContext.id
+  });
+  return React.createElement(StyledPaneSplitter, _extends({
+    orientation: orientation
+  }, separatorProps, props, {
+    ref: mergeRefs([separatorProps.ref, ref])
+  }));
+});
+SplitterComponent.displayName = 'Pane.Splitter';
+SplitterComponent.propTypes = {
+  layoutKey: PropTypes.string.isRequired,
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  orientation: PropTypes.oneOf(ORIENTATION)
+};
+SplitterComponent.defaultProps = {
+  orientation: 'end'
+};
+var Splitter = SplitterComponent;
+
+var ContentComponent = forwardRef(function (props, ref) {
+  return React.createElement(StyledPaneContent, _extends({
+    ref: ref
+  }, props));
+});
+ContentComponent.displayName = 'Pane.Content';
+var Content = ContentComponent;
+
+var _excluded = ["children"];
+var PaneComponent = forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      paneId = _useState2[0],
+      setPaneId = _useState2[1];
+  var paneContext = useMemo(function () {
+    return {
+      id: paneId,
+      setId: function setId(id) {
+        return setPaneId(id);
+      }
+    };
+  }, [paneId]);
+  return React.createElement(PaneContext.Provider, {
+    value: paneContext
+  }, React.createElement(StyledPane, _extends({
+    id: paneId,
+    ref: ref
+  }, props), children));
+});
+PaneComponent.displayName = 'Pane';
+var Pane = PaneComponent;
+Pane.Content = Content;
+Pane.Splitter = Splitter;
+
+export { ALIGN_ITEMS as ARRAY_ALIGN_ITEMS, ALIGN_SELF as ARRAY_ALIGN_SELF, DIRECTION as ARRAY_DIRECTION, JUSTIFY_CONTENT as ARRAY_JUSTIFY_CONTENT, SPACE as ARRAY_SPACE, TEXT_ALIGN as ARRAY_TEXT_ALIGN, WRAP as ARRAY_WRAP, Col, Grid, Pane, PaneProvider, Row };