@zendeskgarden/react-grid 8.50.1 → 8.51.0

package/dist/index.cjs.js

@@ -14,12 +14,56 @@ var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var polished = require('polished');
 var reactTheming = require('@zendeskgarden/react-theming');
+var mergeRefs = require('react-merge-refs');
+var containerSplitter = require('@zendeskgarden/container-splitter');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+
+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) {
@@ -75,6 +119,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'];
@@ -82,9 +185,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 = reactTheming.getColor('primaryHue', 600, props.theme, 0.1);
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
@@ -129,22 +233,22 @@ var flexStyles$1 = function flexStyles(size, alignSelf, textAlign, offset, order
 var mediaStyles$1 = function mediaStyles(minWidth, size, alignSelf, textAlign, offset, order, props) {
   return styled.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 ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 var StyledCol = styled__default["default"].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) {
@@ -156,45 +260,45 @@ var StyledCol = styled__default["default"].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 reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
 });
 StyledCol.defaultProps = {
   columns: 12,
   theme: reactTheming.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 = reactTheming.getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
   var borderWidth = polished.math("".concat(props.theme.borderWidths.sm, " * 2"));
   return styled.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 ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 var StyledGrid = styled__default["default"].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 reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
 });
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: reactTheming.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 = reactTheming.getColor(props.theme.palette.mint, 600, props.theme, 0.5);
   var borderWidth = props.theme.borderWidths.sm;
   return styled.css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
@@ -219,22 +323,22 @@ var flexStyles = function flexStyles(alignItems, justifyContent, wrap) {
 var mediaStyles = function mediaStyles(minWidth, alignItems, justifyContent, wrap) {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-var sizeStyles = function sizeStyles(props) {
+var sizeStyles$1 = function sizeStyles(props) {
   var margin = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return styled.css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 var StyledRow = styled__default["default"].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) {
@@ -246,13 +350,120 @@ var StyledRow = styled__default["default"].div.attrs({
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
 });
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: reactTheming.DEFAULT_THEME
 };
 
+var COMPONENT_ID$2 = 'pane';
+var StyledPane = styled__default["default"].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 reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
+});
+StyledPane.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+var COMPONENT_ID$1 = 'pane.content';
+var StyledPaneContent = styled__default["default"].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 reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
+});
+StyledPaneContent.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+var COMPONENT_ID = 'pane.splitter';
+var colorStyles = function colorStyles(props) {
+  var color = reactTheming.getColor('neutralHue', 300, props.theme);
+  var hoverColor = reactTheming.getColor('primaryHue', 600, props.theme);
+  var activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
+  var boxShadow = props.theme.shadows.md(polished.rgba(hoverColor, 0.35));
+  return styled.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 = polished.math("".concat(props.theme.shadowWidths.md, " * 2"));
+  var offset = polished.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 styled.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', polished.math("".concat(props.theme.borderWidths.sm, " * 2")), props.theme.borderRadii.md);
+};
+var StyledPaneSplitter = styled__default["default"].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 reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
+});
+StyledPaneSplitter.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
 var GridContext = React.createContext({
   gutters: 'md'
 });
@@ -260,10 +471,10 @@ var useGridContext = function useGridContext() {
   return React.useContext(GridContext);
 };
 
-var _excluded$2 = ["size"];
+var _excluded$4 = ["size"];
 var Col = React__default["default"].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,
@@ -310,11 +521,11 @@ Col.propTypes = {
   orderXl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
 };
 
-var _excluded$1 = ["columns", "debug"];
+var _excluded$3 = ["columns", "debug"];
 var Grid = React__default["default"].forwardRef(function (_ref, ref) {
   var columns = _ref.columns,
       debug = _ref.debug,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      props = _objectWithoutProperties(_ref, _excluded$3);
   var value = React.useMemo(function () {
     return {
       columns: columns,
@@ -340,10 +551,10 @@ Grid.defaultProps = {
   gutters: 'md'
 };
 
-var _excluded = ["wrap"];
+var _excluded$2 = ["wrap"];
 var Row = React__default["default"].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;
@@ -376,6 +587,341 @@ Row.propTypes = {
   wrapXl: PropTypes__default["default"].oneOf(WRAP)
 };
 
+var SplitterContext = React.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 React.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 = React.useState(defaultRowValues || {}),
+      _useState2 = _slicedToArray(_useState, 2),
+      rowState = _useState2[0],
+      setRowState = _useState2[1];
+  var _useState3 = React.useState(defaultColumnValues || {}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      columnState = _useState4[0],
+      setColumnState = _useState4[1];
+  var rowsTrack = isControlled ? rowValues : rowState;
+  var columnsTrack = isControlled ? columnValues : columnState;
+  var setRowsTrack = React.useCallback(function (values) {
+    if (onChange) {
+      return onChange(values(rowsTrack), columnsTrack);
+    }
+    return setRowState(values);
+  }, [onChange, setRowState, columnsTrack, rowsTrack]);
+  var setColumnsTrack = React.useCallback(function (values) {
+    if (onChange) {
+      return onChange(rowsTrack, values(columnsTrack));
+    }
+    return setColumnState(values);
+  }, [onChange, setColumnState, rowsTrack, columnsTrack]);
+  var totalFractions = React.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 = React.useMemo(function () {
+    return {
+      rows: getPixelsPerFr(totalFractions.rows, totalPanesHeight),
+      columns: getPixelsPerFr(totalFractions.columns, totalPanesWidth)
+    };
+  }, [totalFractions, totalPanesHeight, totalPanesWidth]);
+  var layoutStateInPixels = React.useMemo(function () {
+    return {
+      rows: convertToPixels(rowsTrack, pixelsPerFr.rows),
+      columns: convertToPixels(columnsTrack, pixelsPerFr.columns)
+    };
+  }, [rowsTrack, columnsTrack, pixelsPerFr]);
+  var layoutIndices = React.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 = React.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 = React.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 = React.useCallback(function (splitterKey, isPixels) {
+    if (isPixels) {
+      return layoutStateInPixels.columns[splitterKey];
+    }
+    return columnsTrack[splitterKey];
+  }, [columnsTrack, layoutStateInPixels]);
+  var getRowValue = React.useCallback(function (splitterKey, isPixels) {
+    if (isPixels) {
+      return layoutStateInPixels.rows[splitterKey];
+    }
+    return rowsTrack[splitterKey];
+  }, [rowsTrack, layoutStateInPixels]);
+  var getGridTemplateColumns = React.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 = React.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 = React.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__default["default"].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__default["default"].number.isRequired,
+  totalPanesHeight: PropTypes__default["default"].number.isRequired,
+  defaultRowValues: PropTypes__default["default"].object,
+  defaultColumnValues: PropTypes__default["default"].object,
+  rowValues: PropTypes__default["default"].object,
+  columnValues: PropTypes__default["default"].object,
+  onChange: PropTypes__default["default"].func,
+  children: PropTypes__default["default"].func
+};
+
+var PaneContext = React.createContext({
+  setId: function setId() {
+    return undefined;
+  }
+});
+var usePaneContext = function usePaneContext() {
+  return React.useContext(PaneContext);
+};
+
+var _excluded$1 = ["layoutKey", "min", "max", "orientation"];
+var orientationToPosition = {
+  start: containerSplitter.SplitterPosition.TRAILS,
+  end: containerSplitter.SplitterPosition.TRAILS,
+  top: containerSplitter.SplitterPosition.LEADS,
+  bottom: containerSplitter.SplitterPosition.TRAILS
+};
+var paneToSplitterOrientation = {
+  start: containerSplitter.SplitterOrientation.VERTICAL,
+  end: containerSplitter.SplitterOrientation.VERTICAL,
+  top: containerSplitter.SplitterOrientation.HORIZONTAL,
+  bottom: containerSplitter.SplitterOrientation.HORIZONTAL
+};
+var orientationToDimension = {
+  start: 'columns',
+  end: 'columns',
+  top: 'rows',
+  bottom: 'rows'
+};
+var SplitterComponent = React.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 = React.useContext(styled.ThemeContext);
+  var position = orientationToPosition[orientation];
+  var isRow = orientationToDimension[orientation] === 'rows';
+  var splitterOrientation = paneToSplitterOrientation[orientation];
+  var pixelsPerFr = splitterContext.pixelsPerFr[orientationToDimension[orientation]];
+  var _useSplitter = containerSplitter.useSplitter({
+    type: containerSplitter.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;
+  React.useEffect(function () {
+    if (!paneContext.id) {
+      paneContext.setId(getPrimaryPaneProps().id);
+    }
+  }, [paneContext, getPrimaryPaneProps]);
+  var separatorProps = getSeparatorProps({
+    'aria-controls': paneContext.id
+  });
+  return React__default["default"].createElement(StyledPaneSplitter, _extends({
+    orientation: orientation
+  }, separatorProps, props, {
+    ref: mergeRefs__default["default"]([separatorProps.ref, ref])
+  }));
+});
+SplitterComponent.displayName = 'Pane.Splitter';
+SplitterComponent.propTypes = {
+  layoutKey: PropTypes__default["default"].string.isRequired,
+  min: PropTypes__default["default"].number.isRequired,
+  max: PropTypes__default["default"].number.isRequired,
+  orientation: PropTypes__default["default"].oneOf(ORIENTATION)
+};
+SplitterComponent.defaultProps = {
+  orientation: 'end'
+};
+var Splitter = SplitterComponent;
+
+var ContentComponent = React.forwardRef(function (props, ref) {
+  return React__default["default"].createElement(StyledPaneContent, _extends({
+    ref: ref
+  }, props));
+});
+ContentComponent.displayName = 'Pane.Content';
+var Content = ContentComponent;
+
+var _excluded = ["children"];
+var PaneComponent = React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      paneId = _useState2[0],
+      setPaneId = _useState2[1];
+  var paneContext = React.useMemo(function () {
+    return {
+      id: paneId,
+      setId: function setId(id) {
+        return setPaneId(id);
+      }
+    };
+  }, [paneId]);
+  return React__default["default"].createElement(PaneContext.Provider, {
+    value: paneContext
+  }, React__default["default"].createElement(StyledPane, _extends({
+    id: paneId,
+    ref: ref
+  }, props), children));
+});
+PaneComponent.displayName = 'Pane';
+var Pane = PaneComponent;
+Pane.Content = Content;
+Pane.Splitter = Splitter;
+
 exports.ARRAY_ALIGN_ITEMS = ALIGN_ITEMS;
 exports.ARRAY_ALIGN_SELF = ALIGN_SELF;
 exports.ARRAY_DIRECTION = DIRECTION;
@@ -385,4 +931,6 @@ exports.ARRAY_TEXT_ALIGN = TEXT_ALIGN;
 exports.ARRAY_WRAP = WRAP;
 exports.Col = Col;
 exports.Grid = Grid;
+exports.Pane = Pane;
+exports.PaneProvider = PaneProvider;
 exports.Row = Row;