@zendeskgarden/react-grid 8.57.1 → 8.58.0

package/dist/index.cjs.js

@@ -27,179 +27,41 @@ 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 ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  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'];
-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$6 = 'grid.col';
-var colorStyles$4 = function colorStyles(props) {
-  var backgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.1);
+const ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
+const ALIGN_SELF = ['auto', ...ALIGN_ITEMS];
+const DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
+const JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
+const TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
+const SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+const WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
+const ORIENTATION = ['top', 'bottom', 'start', 'end'];
+
+const COMPONENT_ID$6 = 'grid.col';
+const colorStyles$4 = props => {
+  const backgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.1);
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
-var flexStyles$1 = function flexStyles(size, alignSelf, textAlign, offset, order, props) {
-  var margin = offset && "".concat(polished.math("".concat(offset, " / ").concat(props.columns, " * 100")), "%");
-  var flexBasis;
-  var flexGrow;
-  var maxWidth;
-  var width;
+const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
+  const margin = offset && `${polished.math(`${offset} / ${props.columns} * 100`)}%`;
+  let flexBasis;
+  let flexGrow;
+  let maxWidth;
+  let width;
   if (typeof size === 'boolean') {
     flexBasis = 0;
     flexGrow = 1;
@@ -210,11 +72,11 @@ var flexStyles$1 = function flexStyles(size, alignSelf, textAlign, offset, order
     maxWidth = '100%';
     width = 'auto';
   } else if (size !== undefined) {
-    flexBasis = "".concat(polished.math("".concat(size, " / ").concat(props.columns, " * 100")), "%");
+    flexBasis = `${polished.math(`${size} / ${props.columns} * 100`)}%`;
     flexGrow = 0;
     maxWidth = flexBasis;
   }
-  var horizontalAlign;
+  let horizontalAlign;
   if (textAlign === 'start') {
     horizontalAlign = props.theme.rtl ? 'right' : 'left';
   } else if (textAlign === 'end') {
@@ -222,192 +84,144 @@ var flexStyles$1 = function flexStyles(size, alignSelf, textAlign, offset, order
   } else {
     horizontalAlign = textAlign;
   }
-  var flexOrder;
+  let flexOrder;
   if (order === 'first') {
     flexOrder = -1;
   } else if (order === 'last') {
-    flexOrder = polished.math("".concat(props.columns, " + 1"));
+    flexOrder = polished.math(`${props.columns} + 1`);
   } else {
     flexOrder = order;
   }
-  return styled.css(["flex-basis:", ";flex-grow:", ";flex-shrink:", ";align-self:", ";order:", ";margin-", ":", ";width:", ";max-width:", ";text-align:", ";"], flexBasis, flexGrow, size && 0, alignSelf === 'start' || alignSelf === 'end' ? "flex-".concat(alignSelf) : alignSelf, flexOrder, props.theme.rtl ? 'right' : 'left', margin, width, maxWidth, horizontalAlign);
+  return styled.css(["flex-basis:", ";flex-grow:", ";flex-shrink:", ";align-self:", ";order:", ";margin-", ":", ";width:", ";max-width:", ";text-align:", ";"], flexBasis, flexGrow, size && 0, alignSelf === 'start' || alignSelf === 'end' ? `flex-${alignSelf}` : alignSelf, flexOrder, props.theme.rtl ? 'right' : 'left', margin, width, maxWidth, horizontalAlign);
 };
-var mediaStyles$1 = function mediaStyles(minWidth, size, alignSelf, textAlign, offset, order, props) {
+const mediaStyles$1 = (minWidth, size, alignSelf, textAlign, offset, order, props) => {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles$1(size, alignSelf, textAlign, offset, order, props));
 };
-var sizeStyles$4 = function sizeStyles(props) {
-  var padding = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
+const sizeStyles$4 = props => {
+  const padding = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
-var StyledCol = styled__default["default"].div.attrs({
+const StyledCol = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.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$4(props);
-}, function (props) {
-  return props.debug && colorStyles$4(props);
-}, function (props) {
-  return mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props);
-}, function (props) {
-  return mediaStyles$1(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props);
-}, function (props) {
-  return mediaStyles$1(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props);
-}, function (props) {
-  return mediaStyles$1(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props);
-}, 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$6, props);
-});
+})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => 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), props => sizeStyles$4(props), props => props.debug && colorStyles$4(props), props => mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props), props => mediaStyles$1(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props), props => mediaStyles$1(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props), props => mediaStyles$1(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props), props => mediaStyles$1(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledCol.defaultProps = {
   columns: 12,
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'grid.grid';
-var colorStyles$3 = 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"));
+const COMPONENT_ID$5 = 'grid.grid';
+const colorStyles$3 = props => {
+  const borderColor = reactTheming.getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
+  const borderWidth = polished.math(`${props.theme.borderWidths.sm} * 2`);
   return styled.css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
-var sizeStyles$3 = function sizeStyles(props) {
-  var padding = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
+const sizeStyles$3 = props => {
+  const padding = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
-var StyledGrid = styled__default["default"].div.attrs({
+const StyledGrid = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.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$3(props);
-}, function (props) {
-  return props.debug && colorStyles$3(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => sizeStyles$3(props), props => props.debug && colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'grid.row';
-var colorStyles$2 = function colorStyles(props) {
-  var borderColor = reactTheming.getColor(props.theme.palette.mint, 600, props.theme, 0.5);
-  var borderWidth = props.theme.borderWidths.sm;
+const COMPONENT_ID$4 = 'grid.row';
+const colorStyles$2 = props => {
+  const borderColor = reactTheming.getColor(props.theme.palette.mint, 600, props.theme, 0.5);
+  const borderWidth = props.theme.borderWidths.sm;
   return styled.css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
-var flexStyles = function flexStyles(alignItems, justifyContent, wrap) {
-  var flexAlignItems;
-  var flexJustifyContent;
+const flexStyles = (alignItems, justifyContent, wrap) => {
+  let flexAlignItems;
+  let flexJustifyContent;
   if (alignItems === 'start' || alignItems === 'end') {
-    flexAlignItems = "flex-".concat(alignItems);
+    flexAlignItems = `flex-${alignItems}`;
   } else {
     flexAlignItems = alignItems;
   }
   if (justifyContent === 'start' || justifyContent === 'end') {
-    flexJustifyContent = "flex-".concat(justifyContent);
+    flexJustifyContent = `flex-${justifyContent}`;
   } else if (justifyContent === 'between' || justifyContent === 'around') {
-    flexJustifyContent = "space-".concat(justifyContent);
+    flexJustifyContent = `space-${justifyContent}`;
   } else {
     flexJustifyContent = justifyContent;
   }
   return styled.css(["flex-wrap:", ";align-items:", ";justify-content:", ";"], wrap, flexAlignItems, flexJustifyContent);
 };
-var mediaStyles = function mediaStyles(minWidth, alignItems, justifyContent, wrap) {
+const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-var sizeStyles$2 = function sizeStyles(props) {
-  var margin = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
+const sizeStyles$2 = props => {
+  const margin = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return styled.css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
-var StyledRow = styled__default["default"].div.attrs({
+const StyledRow = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.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$2(props);
-}, function (props) {
-  return props.debug && colorStyles$2(props);
-}, function (props) {
-  return mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs);
-}, function (props) {
-  return mediaStyles(props.theme.breakpoints.sm, props.alignItemsSm, props.justifyContentSm, props.wrapSm);
-}, function (props) {
-  return mediaStyles(props.theme.breakpoints.md, props.alignItemsMd, props.justifyContentMd, props.wrapMd);
-}, function (props) {
-  return mediaStyles(props.theme.breakpoints.lg, props.alignItemsLg, props.justifyContentLg, props.wrapLg);
-}, function (props) {
-  return mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), props => sizeStyles$2(props), props => props.debug && colorStyles$2(props), props => mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs), props => mediaStyles(props.theme.breakpoints.sm, props.alignItemsSm, props.justifyContentSm, props.wrapSm), props => mediaStyles(props.theme.breakpoints.md, props.alignItemsMd, props.justifyContentMd, props.wrapMd), props => mediaStyles(props.theme.breakpoints.lg, props.alignItemsLg, props.justifyContentLg, props.wrapLg), props => mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'pane';
-var StyledPane = styled__default["default"].div.attrs({
+const COMPONENT_ID$3 = 'pane';
+const StyledPane = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
-})(["position:relative;min-width:0;min-height:0;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["position:relative;min-width:0;min-height:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledPane.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'pane.content';
-var StyledPaneContent = styled__default["default"].div.attrs({
+const COMPONENT_ID$2 = 'pane.content';
+const StyledPaneContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["height:100%;overflow:auto;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledPaneContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'pane.splitter';
-var colorStyles$1 = 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));
+const COMPONENT_ID$1 = 'pane.splitter';
+const colorStyles$1 = props => {
+  const color = reactTheming.getColor('neutralHue', 300, props.theme);
+  const hoverColor = reactTheming.getColor('primaryHue', 600, props.theme);
+  const activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
+  const boxShadow = props.theme.shadows.md(polished.rgba(hoverColor, 0.35));
   return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";background-color:", ";}&:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, boxShadow, hoverColor, props.isHovered && activeColor);
 };
-var sizeStyles$1 = function sizeStyles(props) {
-  var size = polished.math("".concat(props.theme.shadowWidths.md, " * 2"));
-  var separatorSize = polished.math("".concat(props.theme.borderWidths.sm, " * 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;
+const sizeStyles$1 = props => {
+  const size = polished.math(`${props.theme.shadowWidths.md} * 2`);
+  const separatorSize = polished.math(`${props.theme.borderWidths.sm} * 2`);
+  const offset = polished.math(`-${size} / 2`);
+  let cursor;
+  let top;
+  let right;
+  let left;
+  let bottom;
+  let width;
+  let height;
+  let separatorWidth;
+  let separatorHeight;
   switch (props.orientation) {
     case 'top':
       cursor = 'row-resize';
@@ -453,25 +267,23 @@ var sizeStyles$1 = function sizeStyles(props) {
       }
       break;
   }
-  var dimensionProperty = width === '100%' ? 'height' : 'width';
+  const dimensionProperty = width === '100%' ? 'height' : 'width';
   return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{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, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
-var StyledPaneSplitter = styled__default["default"].div.attrs({
+const StyledPaneSplitter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";&:focus{outline:none;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, colorStyles$1, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";&:focus{outline:none;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledPaneSplitter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'pane.splitter_button';
-var transformStyles = function transformStyles(props) {
-  var degrees = 0;
+const COMPONENT_ID = 'pane.splitter_button';
+const transformStyles = props => {
+  let degrees = 0;
   if (props.isRotated) {
     degrees = props.theme.rtl ? -180 : 180;
   }
@@ -484,21 +296,23 @@ var transformStyles = function transformStyles(props) {
   }
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
-var colorStyles = function colorStyles(_ref) {
-  var theme = _ref.theme;
-  var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), reactTheming.getColor('chromeHue', 600, theme, 0.15));
-  var focusBoxShadow = theme.shadows.md(reactTheming.getColor('primaryHue', 600, theme, 0.35));
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
+  const focusBoxShadow = theme.shadows.md(reactTheming.getColor('primaryHue', 600, theme, 0.35));
   return styled.css(["box-shadow:", ";&[data-garden-focus-visible]{box-shadow:", ",", ";}"], boxShadow, focusBoxShadow, boxShadow);
 };
-var sizeStyles = function sizeStyles(props) {
-  var size = "".concat(props.theme.space.base * 6, "px");
-  var display = props.splitterSize <= polished.stripUnit(polished.math("".concat(props.theme.shadowWidths.md, " * 2 + ").concat(size))) && 'none';
-  var isVertical = props.orientation === 'start' || props.orientation === 'end';
-  var top;
-  var left;
-  var right;
-  var bottom;
-  if (props.splitterSize >= polished.stripUnit(polished.math("".concat(size, " * 3")))) {
+const sizeStyles = props => {
+  const size = `${props.theme.space.base * 6}px`;
+  const display = props.splitterSize <= polished.stripUnit(polished.math(`${props.theme.shadowWidths.md} * 2 + ${size}`)) && 'none';
+  const isVertical = props.orientation === 'start' || props.orientation === 'end';
+  let top;
+  let left;
+  let right;
+  let bottom;
+  if (props.splitterSize >= polished.stripUnit(polished.math(`${size} * 3`))) {
     if (props.placement === 'start') {
       if (isVertical) {
         top = size;
@@ -519,39 +333,37 @@ var sizeStyles = function sizeStyles(props) {
   }
   return styled.css(["display:", ";top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], display, top, right, bottom, left, size, size, size);
 };
-var StyledPaneSplitterButton = styled__default["default"](reactButtons.ChevronButton).attrs({
+const StyledPaneSplitterButton = styled__default["default"](reactButtons.ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["position:absolute;transition:background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;&[data-garden-focus-visible],", ":hover &,", "[data-garden-focus-visible] &{opacity:1;}", ";", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";"], StyledPaneSplitter, StyledPaneSplitter, sizeStyles, transformStyles, colorStyles, function (props) {
-  return props.theme.colors.background;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["position:absolute;transition:background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;&[data-garden-focus-visible],", ":hover &,", "[data-garden-focus-visible] &{opacity:1;}", ";", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";"], StyledPaneSplitter, StyledPaneSplitter, sizeStyles, transformStyles, colorStyles, props => props.theme.colors.background, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledPaneSplitterButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var GridContext = React.createContext({
+const GridContext = React.createContext({
   gutters: 'md'
 });
-var useGridContext = function useGridContext() {
+const useGridContext = () => {
   return React.useContext(GridContext);
 };
 
-var _excluded$4 = ["size"];
-var Col = React__default["default"].forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-  var _useGridContext = useGridContext(),
-      columns = _useGridContext.columns,
-      gutters = _useGridContext.gutters,
-      debug = _useGridContext.debug;
+const Col = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    size,
+    ...props
+  } = _ref;
+  const {
+    columns,
+    gutters,
+    debug
+  } = useGridContext();
   return React__default["default"].createElement(StyledCol, _extends({
     sizeAll: size,
     columns: columns,
@@ -594,18 +406,17 @@ Col.propTypes = {
   orderXl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
 };
 
-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$3);
-  var value = React.useMemo(function () {
-    return {
-      columns: columns,
-      gutters: props.gutters,
-      debug: debug
-    };
-  }, [columns, props.gutters, debug]);
+const Grid = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    columns,
+    debug,
+    ...props
+  } = _ref;
+  const value = React.useMemo(() => ({
+    columns,
+    gutters: props.gutters,
+    debug
+  }), [columns, props.gutters, debug]);
   return React__default["default"].createElement(GridContext.Provider, {
     value: value
   }, React__default["default"].createElement(StyledGrid, _extends({
@@ -624,13 +435,15 @@ Grid.defaultProps = {
   gutters: 'md'
 };
 
-var _excluded$2 = ["wrap"];
-var Row = React__default["default"].forwardRef(function (_ref, ref) {
-  var wrap = _ref.wrap,
-      props = _objectWithoutProperties(_ref, _excluded$2);
-  var _useGridContext = useGridContext(),
-      gutters = _useGridContext.gutters,
-      debug = _useGridContext.debug;
+const Row = React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    wrap,
+    ...props
+  } = _ref;
+  const {
+    gutters,
+    debug
+  } = useGridContext();
   return React__default["default"].createElement(StyledRow, _extends({
     gutters: gutters,
     debug: debug,
@@ -660,197 +473,184 @@ Row.propTypes = {
   wrapXl: PropTypes__default["default"].oneOf(WRAP)
 };
 
-var PaneProviderContext = React.createContext({});
-var usePaneProviderContextData = function usePaneProviderContextData(providerId) {
-  var context = React.useContext(PaneProviderContext);
-  var id = providerId || context.providerId;
+const PaneProviderContext = React.createContext({});
+const usePaneProviderContextData = providerId => {
+  const context = React.useContext(PaneProviderContext);
+  const id = providerId || context.providerId;
   return id && context.contextData ? context.contextData[id] : undefined;
 };
-var usePaneProviderContext = function usePaneProviderContext() {
-  return React.useContext(PaneProviderContext);
-};
+const usePaneProviderContext = () => React.useContext(PaneProviderContext);
 
-var getPixelsPerFr = function getPixelsPerFr(totalFrs, totalDimension) {
+const 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];
+const convertToPixels = (values, pixelsPerFr) => {
+  return Object.entries(values).reduce((prev, _ref) => {
+    let [key, value] = _ref;
     prev[key] = value * pixelsPerFr;
     return prev;
   }, {});
 };
-var PaneProvider = function PaneProvider(_ref3) {
-  var id = _ref3.id,
-      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) {
+const PaneProvider = _ref2 => {
+  let {
+    id,
+    totalPanesWidth,
+    totalPanesHeight,
+    defaultRowValues,
+    defaultColumnValues,
+    rowValues,
+    columnValues,
+    onChange,
+    children
+  } = _ref2;
+  const isControlled = rowValues !== undefined && rowValues !== null && columnValues !== undefined && columnValues !== null;
+  const [rowState, setRowState] = React.useState(defaultRowValues || {});
+  const [columnState, setColumnState] = React.useState(defaultColumnValues || {});
+  const rowsTrack = isControlled ? rowValues : rowState;
+  const columnsTrack = isControlled ? columnValues : columnState;
+  const setRowsTrack = React.useCallback(values => {
     if (isControlled && onChange) {
       return onChange(values(rowsTrack), columnsTrack);
     }
     return setRowState(values);
   }, [isControlled, onChange, setRowState, columnsTrack, rowsTrack]);
-  var setColumnsTrack = React.useCallback(function (values) {
+  const setColumnsTrack = React.useCallback(values => {
     if (isControlled && onChange) {
       return onChange(rowsTrack, values(columnsTrack));
     }
     return setColumnState(values);
   }, [isControlled, 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) {
+  const totalFractions = React.useMemo(() => ({
+    rows: Object.values(rowsTrack).reduce((prev, value) => value + prev, 0),
+    columns: Object.values(columnsTrack).reduce((prev, value) => value + prev, 0)
+  }), [rowsTrack, columnsTrack]);
+  const pixelsPerFr = React.useMemo(() => ({
+    rows: getPixelsPerFr(totalFractions.rows, totalPanesHeight),
+    columns: getPixelsPerFr(totalFractions.columns, totalPanesWidth)
+  }), [totalFractions, totalPanesHeight, totalPanesWidth]);
+  const layoutStateInPixels = React.useMemo(() => ({
+    rows: convertToPixels(rowsTrack, pixelsPerFr.rows),
+    columns: convertToPixels(columnsTrack, pixelsPerFr.columns)
+  }), [rowsTrack, columnsTrack, pixelsPerFr]);
+  const layoutIndices = React.useMemo(() => {
+    const rowArray = Object.keys(rowsTrack);
+    const columnArray = Object.keys(columnsTrack);
+    const rows = rowArray.reduce((prev, key, index) => {
       prev[key] = index;
       return prev;
     }, {});
-    var columns = columnArray.reduce(function (prev, key, index) {
+    const columns = columnArray.reduce((prev, key, index) => {
       prev[key] = index;
       return prev;
     }, {});
     return {
-      rows: rows,
-      columns: columns,
-      rowArray: rowArray,
-      columnArray: columnArray
+      rows,
+      columns,
+      rowArray,
+      columnArray
     };
   }, [rowsTrack, columnsTrack]);
-  var setRowValue = React.useCallback(function (isTop, splitterId, value) {
-    var rows = layoutIndices.rows,
-        rowArray = layoutIndices.rowArray;
-    var stealFromTraversal = isTop ? -1 : 1;
-    var addToTraversal = 0;
-    setRowsTrack(function (state) {
-      var oldValue = rowsTrack[splitterId];
-      var stealFromIndex = rows[splitterId] + stealFromTraversal;
-      var addToIndex = rows[splitterId] + addToTraversal;
-      var stealFromKey = rowArray[stealFromIndex];
-      var addToKey = rowArray[addToIndex];
-      var difference = oldValue - value;
-      var nextState = _objectSpread2({}, state);
+  const setRowValue = React.useCallback((isTop, splitterId, value) => {
+    const {
+      rows,
+      rowArray
+    } = layoutIndices;
+    const stealFromTraversal = isTop ? -1 : 1;
+    const addToTraversal = 0;
+    setRowsTrack(state => {
+      const oldValue = rowsTrack[splitterId];
+      const stealFromIndex = rows[splitterId] + stealFromTraversal;
+      const addToIndex = rows[splitterId] + addToTraversal;
+      const stealFromKey = rowArray[stealFromIndex];
+      const addToKey = rowArray[addToIndex];
+      const difference = oldValue - value;
+      const nextState = {
+        ...state
+      };
       nextState[addToKey] = rowsTrack[addToKey] - difference;
       nextState[stealFromKey] = rowsTrack[stealFromKey] + difference;
       return nextState;
     });
   }, [layoutIndices, rowsTrack, setRowsTrack]);
-  var setColumnValue = React.useCallback(function (isStart, splitterId, value) {
-    var columns = layoutIndices.columns,
-        columnArray = layoutIndices.columnArray;
-    var stealFromTraversal = isStart ? -1 : 1;
-    var addToTraversal = 0;
-    setColumnsTrack(function (state) {
-      var stealFromIndex = columns[splitterId] + stealFromTraversal;
-      var addToIndex = columns[splitterId] + addToTraversal;
-      var oldValue = columnsTrack[splitterId];
-      var stealFromKey = columnArray[stealFromIndex];
-      var addToKey = columnArray[addToIndex];
-      var difference = oldValue - value;
-      var nextState = _objectSpread2({}, state);
+  const setColumnValue = React.useCallback((isStart, splitterId, value) => {
+    const {
+      columns,
+      columnArray
+    } = layoutIndices;
+    const stealFromTraversal = isStart ? -1 : 1;
+    const addToTraversal = 0;
+    setColumnsTrack(state => {
+      const stealFromIndex = columns[splitterId] + stealFromTraversal;
+      const addToIndex = columns[splitterId] + addToTraversal;
+      const oldValue = columnsTrack[splitterId];
+      const stealFromKey = columnArray[stealFromIndex];
+      const addToKey = columnArray[addToIndex];
+      const difference = oldValue - value;
+      const nextState = {
+        ...state
+      };
       nextState[addToKey] = columnsTrack[addToKey] - difference;
       nextState[stealFromKey] = columnsTrack[stealFromKey] + difference;
       return nextState;
     });
   }, [layoutIndices, columnsTrack, setColumnsTrack]);
-  var getColumnValue = React.useCallback(function (splitterKey, isPixels) {
+  const getColumnValue = React.useCallback((splitterKey, isPixels) => {
     if (isPixels) {
       return layoutStateInPixels.columns[splitterKey];
     }
     return columnsTrack[splitterKey];
   }, [columnsTrack, layoutStateInPixels]);
-  var getRowValue = React.useCallback(function (splitterKey, isPixels) {
+  const getRowValue = React.useCallback((splitterKey, isPixels) => {
     if (isPixels) {
       return layoutStateInPixels.rows[splitterKey];
     }
     return rowsTrack[splitterKey];
   }, [rowsTrack, layoutStateInPixels]);
-  var getGridTemplateColumns = React.useCallback(function (isPixels) {
-    var columnArray = layoutIndices.columnArray;
+  const getGridTemplateColumns = React.useCallback(isPixels => {
+    const {
+      columnArray
+    } = layoutIndices;
     if (isPixels) {
-      return columnArray.map(function (col) {
-        return "".concat(layoutStateInPixels.columns[col], "px");
-      }).join(' ');
+      return columnArray.map(col => `${layoutStateInPixels.columns[col]}px`).join(' ');
     }
-    return columnArray.map(function (col) {
-      return "".concat(columnsTrack[col], "fr");
-    }).join(' ');
+    return columnArray.map(col => `${columnsTrack[col]}fr`).join(' ');
   }, [layoutIndices, columnsTrack, layoutStateInPixels]);
-  var getGridTemplateRows = React.useCallback(function (isPixels) {
-    var rowArray = layoutIndices.rowArray;
+  const getGridTemplateRows = React.useCallback(isPixels => {
+    const {
+      rowArray
+    } = layoutIndices;
     if (isPixels) {
-      return rowArray.map(function (row) {
-        return "".concat(layoutStateInPixels.rows[row], "px");
-      }).join(' ');
+      return rowArray.map(row => `${layoutStateInPixels.rows[row]}px`).join(' ');
     }
-    return rowArray.map(function (row) {
-      return "".concat(rowsTrack[row], "fr");
-    }).join(' ');
+    return rowArray.map(row => `${rowsTrack[row]}fr`).join(' ');
   }, [layoutIndices, rowsTrack, layoutStateInPixels]);
-  var providerId = containerUtilities.useId(id);
-  var parentPaneProviderContext = usePaneProviderContext();
-  var paneProviderContext = React.useMemo(function () {
-    return providerId ? {
-      providerId: providerId,
-      contextData: _objectSpread2(_objectSpread2({}, parentPaneProviderContext.contextData), {}, _defineProperty({}, providerId, {
-        columnState: columnState,
-        rowState: rowState,
-        setRowValue: setRowValue,
-        setColumnValue: setColumnValue,
-        getRowValue: getRowValue,
-        getColumnValue: getColumnValue,
-        totalPanesHeight: totalPanesHeight,
-        totalPanesWidth: totalPanesWidth,
-        pixelsPerFr: pixelsPerFr
-      }))
-    } : {};
-  }, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
+  const providerId = containerUtilities.useId(id);
+  const parentPaneProviderContext = usePaneProviderContext();
+  const paneProviderContext = React.useMemo(() => providerId ? {
+    providerId,
+    contextData: {
+      ...parentPaneProviderContext.contextData,
+      [providerId]: {
+        columnState,
+        rowState,
+        setRowValue,
+        setColumnValue,
+        getRowValue,
+        getColumnValue,
+        totalPanesHeight,
+        totalPanesWidth,
+        pixelsPerFr
+      }
+    }
+  } : {}, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
   return React__default["default"].createElement(PaneProviderContext.Provider, {
     value: paneProviderContext
   }, children === null || children === void 0 ? void 0 : children({
     id: providerId,
-    getRowValue: getRowValue,
-    getColumnValue: getColumnValue,
-    getGridTemplateColumns: getGridTemplateColumns,
-    getGridTemplateRows: getGridTemplateRows
+    getRowValue,
+    getColumnValue,
+    getGridTemplateColumns,
+    getGridTemplateRows
   }));
 };
 PaneProvider.displayName = 'PaneProvider';
@@ -866,16 +666,14 @@ PaneProvider.propTypes = {
   children: PropTypes__default["default"].func
 };
 
-var PaneContext = React.createContext({
-  setId: function setId() {
-    return undefined;
-  }
+const PaneContext = React.createContext({
+  setId: () => undefined
 });
-var usePaneContext = function usePaneContext() {
+const usePaneContext = () => {
   return React.useContext(PaneContext);
 };
 
-var PaneSplitterContext = React.createContext({
+const PaneSplitterContext = React.createContext({
   orientation: 'start',
   min: 0,
   max: 0,
@@ -884,91 +682,92 @@ var PaneSplitterContext = React.createContext({
   size: 0,
   isRow: false
 });
-var usePaneSplitterContext = function usePaneSplitterContext() {
+const usePaneSplitterContext = () => {
   return React.useContext(PaneSplitterContext);
 };
 
-var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
-var paneToSplitterOrientation = {
+const paneToSplitterOrientation = {
   start: 'vertical',
   end: 'vertical',
   top: 'horizontal',
   bottom: 'horizontal'
 };
-var orientationToDimension = {
+const orientationToDimension = {
   start: 'columns',
   end: 'columns',
   top: 'rows',
   bottom: 'rows'
 };
-var SplitterComponent = React.forwardRef(function (_ref, ref) {
+const SplitterComponent = React.forwardRef((_ref, ref) => {
   var _separatorRef$current, _separatorRef$current2;
-  var providerId = _ref.providerId,
-      layoutKey = _ref.layoutKey,
-      min = _ref.min,
-      max = _ref.max,
-      orientation = _ref.orientation,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-  var paneProviderContext = usePaneProviderContextData(providerId);
-  var paneContext = usePaneContext();
-  var themeContext = React.useContext(styled.ThemeContext);
-  var environment = reactTheming.useDocument(themeContext);
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-  var isRow = orientationToDimension[orientation] === 'rows';
-  var separatorRef = React.useRef(null);
-  var splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
-  var pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
-  var value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
-  var valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
-  var _useSplitter = containerSplitter.useSplitter({
+  let {
+    providerId,
+    layoutKey,
+    min,
+    max,
+    orientation,
+    onMouseDown,
+    onTouchStart,
+    onKeyDown,
+    onClick,
+    ...props
+  } = _ref;
+  const paneProviderContext = usePaneProviderContextData(providerId);
+  const paneContext = usePaneContext();
+  const themeContext = React.useContext(styled.ThemeContext);
+  const environment = reactTheming.useDocument(themeContext);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const isRow = orientationToDimension[orientation] === 'rows';
+  const separatorRef = React.useRef(null);
+  const splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
+  const pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
+  const value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
+  const valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
+  const {
+    getSeparatorProps,
+    getPrimaryPaneProps
+  } = containerSplitter.useSplitter({
     orientation: splitterOrientation,
     isLeading: orientation === 'start' || orientation === 'top',
     min: min * pixelsPerFr,
     max: max * pixelsPerFr,
     rtl: themeContext.rtl,
-    environment: environment,
-    onChange: function onChange(valueNow) {
+    environment,
+    onChange: valueNow => {
       if (isRow) {
         return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
       return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
     valueNow: value,
-    separatorRef: separatorRef
-  }),
-      getSeparatorProps = _useSplitter.getSeparatorProps,
-      getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;
-  React.useEffect(function () {
+    separatorRef
+  });
+  React.useEffect(() => {
     if (!paneContext.id) {
       paneContext.setId(getPrimaryPaneProps().id);
     }
   }, [paneContext, getPrimaryPaneProps]);
-  var ariaLabel = reactTheming.useText(SplitterComponent, props, 'aria-label', "".concat(splitterOrientation, " splitter"));
-  var separatorProps = getSeparatorProps({
+  const ariaLabel = reactTheming.useText(SplitterComponent, props, 'aria-label', `${splitterOrientation} splitter`);
+  const separatorProps = getSeparatorProps({
     'aria-controls': paneContext.id,
-    'aria-label': ariaLabel
+    'aria-label': ariaLabel,
+    onMouseDown,
+    onTouchStart,
+    onKeyDown,
+    onClick
   });
-  var size = isRow ? (_separatorRef$current = separatorRef.current) === null || _separatorRef$current === void 0 ? void 0 : _separatorRef$current.clientWidth : (_separatorRef$current2 = separatorRef.current) === null || _separatorRef$current2 === void 0 ? void 0 : _separatorRef$current2.clientHeight;
-  var onMouseOver = React.useMemo(function () {
-    return containerUtilities.composeEventHandlers(props.onMouseOver, function (event) {
-      return setIsHovered(event.target === separatorRef.current);
-    });
-  }, [props.onMouseOver, separatorRef]);
+  const size = isRow ? (_separatorRef$current = separatorRef.current) === null || _separatorRef$current === void 0 ? void 0 : _separatorRef$current.clientWidth : (_separatorRef$current2 = separatorRef.current) === null || _separatorRef$current2 === void 0 ? void 0 : _separatorRef$current2.clientHeight;
+  const onMouseOver = React.useMemo(() => containerUtilities.composeEventHandlers(props.onMouseOver, event => setIsHovered(event.target === separatorRef.current)), [props.onMouseOver, separatorRef]);
   return React__default["default"].createElement(PaneSplitterContext.Provider, {
-    value: React.useMemo(function () {
-      return {
-        orientation: orientation,
-        layoutKey: layoutKey,
-        min: min,
-        max: max,
-        valueNow: valueInFr,
-        size: size,
-        isRow: isRow
-      };
-    }, [orientation, layoutKey, min, max, valueInFr, size, isRow])
+    value: React.useMemo(() => ({
+      orientation,
+      layoutKey,
+      min,
+      max,
+      valueNow: valueInFr,
+      size,
+      isRow
+    }), [orientation, layoutKey, min, max, valueInFr, size, isRow])
   }, React__default["default"].createElement(StyledPaneSplitter, _extends({
     isHovered: isHovered,
     orientation: orientation
@@ -987,33 +786,36 @@ SplitterComponent.propTypes = {
 SplitterComponent.defaultProps = {
   orientation: 'end'
 };
-var Splitter = SplitterComponent;
+const Splitter = SplitterComponent;
 
-var ContentComponent = React.forwardRef(function (props, ref) {
+const ContentComponent = React.forwardRef((props, ref) => {
   return React__default["default"].createElement(StyledPaneContent, _extends({
     ref: ref
   }, props));
 });
 ContentComponent.displayName = 'Pane.Content';
-var Content = ContentComponent;
-
-var SplitterButtonComponent = React.forwardRef(function (props, ref) {
-  var label = props.label,
-      defaultPlacement = props.placement;
-  var _usePaneSplitterConte = usePaneSplitterContext(),
-      orientation = _usePaneSplitterConte.orientation,
-      layoutKey = _usePaneSplitterConte.layoutKey,
-      min = _usePaneSplitterConte.min,
-      max = _usePaneSplitterConte.max,
-      isRow = _usePaneSplitterConte.isRow,
-      valueNow = _usePaneSplitterConte.valueNow,
-      size = _usePaneSplitterConte.size,
-      providerId = _usePaneSplitterConte.providerId;
-  var paneProviderContext = usePaneProviderContextData(providerId);
-  var isTop = orientation === 'top';
-  var isStart = orientation === 'start';
-  var isMin = valueNow === min;
-  var placement = defaultPlacement;
+const Content = ContentComponent;
+
+const SplitterButtonComponent = React.forwardRef((props, ref) => {
+  const {
+    label,
+    placement: defaultPlacement
+  } = props;
+  const {
+    orientation,
+    layoutKey,
+    min,
+    max,
+    isRow,
+    valueNow,
+    size,
+    providerId
+  } = usePaneSplitterContext();
+  const paneProviderContext = usePaneProviderContextData(providerId);
+  const isTop = orientation === 'top';
+  const isStart = orientation === 'start';
+  const isMin = valueNow === min;
+  let placement = defaultPlacement;
   if (!defaultPlacement) {
     if (isRow) {
       placement = 'center';
@@ -1021,36 +823,30 @@ var SplitterButtonComponent = React.forwardRef(function (props, ref) {
       placement = 'start';
     }
   }
-  var setValue = React.useCallback(function (value) {
+  const setValue = React.useCallback(value => {
     if (isRow) {
       paneProviderContext.setRowValue(isTop, layoutKey, value);
     } else {
       paneProviderContext.setColumnValue(isStart, layoutKey, value);
     }
   }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
-  var onClick = containerUtilities.composeEventHandlers(props.onClick, function () {
+  const onClick = containerUtilities.composeEventHandlers(props.onClick, () => {
     if (isMin) {
       setValue(max);
     } else {
       setValue(min);
     }
   });
-  var onKeyDown = containerUtilities.composeEventHandlers(props.onKeyDown, function (event) {
-    return event.stopPropagation();
-  }
+  const onKeyDown = containerUtilities.composeEventHandlers(props.onKeyDown, event => event.stopPropagation()
   );
-  var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
-    return event.stopPropagation();
-  }
+  const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
   );
   return React__default["default"].createElement(reactTooltips.Tooltip, {
     content: label,
     style: {
       cursor: 'default'
     },
-    onMouseDown: function onMouseDown(e) {
-      return e.stopPropagation();
-    }
+    onMouseDown: e => e.stopPropagation()
   }, React__default["default"].createElement(StyledPaneSplitterButton, _extends({
     "aria-label": label
   }, props, {
@@ -1065,24 +861,18 @@ var SplitterButtonComponent = React.forwardRef(function (props, ref) {
   })));
 });
 SplitterButtonComponent.displayName = 'Pane.SplitterButton';
-var SplitterButton = SplitterButtonComponent;
-
-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]);
+const SplitterButton = SplitterButtonComponent;
+
+const PaneComponent = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const [paneId, setPaneId] = React.useState();
+  const paneContext = React.useMemo(() => ({
+    id: paneId,
+    setId: id => setPaneId(id)
+  }), [paneId]);
   return React__default["default"].createElement(PaneContext.Provider, {
     value: paneContext
   }, React__default["default"].createElement(StyledPane, _extends({
@@ -1091,7 +881,7 @@ var PaneComponent = React.forwardRef(function (_ref, ref) {
   }, props), children));
 });
 PaneComponent.displayName = 'Pane';
-var Pane = PaneComponent;
+const Pane = PaneComponent;
 Pane.Content = Content;
 Pane.Splitter = Splitter;
 Pane.SplitterButton = SplitterButton;