@zendeskgarden/react-grid 9.0.0-next.6 → 9.0.0-next.7

package/dist/index.cjs.js

@@ -50,7 +50,7 @@ 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 COMPONENT_ID$7 = 'grid.col';
 const colorStyles$4 = props => {
   const backgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.1);
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
@@ -96,45 +96,45 @@ const flexStyles$1 = (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));
 };
-const sizeStyles$4 = props => {
+const sizeStyles$5 = props => {
   const padding = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledCol = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
-})(["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));
+})(["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$5(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$7, props));
 StyledCol.defaultProps = {
   columns: 12,
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'grid.grid';
+const COMPONENT_ID$6 = 'grid.grid';
 const colorStyles$3 = props => {
   const borderColor = reactTheming.getColorV8(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);
 };
-const sizeStyles$3 = props => {
+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);
 };
 const StyledGrid = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
-})(["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));
+})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => sizeStyles$4(props), props => props.debug && colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'grid.row';
+const COMPONENT_ID$5 = 'grid.row';
 const colorStyles$2 = props => {
   const borderColor = reactTheming.getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
   const borderWidth = props.theme.borderWidths.sm;
@@ -160,61 +160,61 @@ const flexStyles = (alignItems, justifyContent, wrap) => {
 const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-const sizeStyles$2 = props => {
+const sizeStyles$3 = props => {
   const margin = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return styled.css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 const StyledRow = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
-})(["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));
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), props => sizeStyles$3(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$5, props));
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'pane';
+const COMPONENT_ID$4 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
-})(["position:relative;min-width:0;min-height:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["position:relative;min-width:0;min-height:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledPane.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'pane.content';
+const COMPONENT_ID$3 = 'pane.content';
 const StyledPaneContent = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledPaneContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'pane.splitter';
+const COMPONENT_ID$2 = 'pane.splitter';
 const colorStyles$1 = props => {
   const color = reactTheming.getColorV8('neutralHue', 300, props.theme);
   const hoverColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
   const activeColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
-  return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, reactTheming.focusStyles({
+  return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, reactTheming.focusStyles({
     theme: props.theme,
     hue: hoverColor,
     styles: {
       backgroundColor: hoverColor
     },
-    selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before'
-  }), props.isHovered && activeColor);
+    selector: '&:focus-visible::before'
+  }), activeColor);
 };
-const sizeStyles$1 = props => {
+const sizeStyles$2 = 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`);
@@ -273,20 +273,28 @@ const sizeStyles$1 = props => {
       break;
   }
   const dimensionProperty = width === '100%' ? 'height' : 'width';
-  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before,&[data-garden-focus-visible]::before{", ":", ";}&:focus-visible::before,&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
+  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before{", ":", ";}&:focus-visible::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$2, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledPaneSplitter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'pane.splitter_button';
+const COMPONENT_ID$1 = 'pane.splitter_button';
+const getSize = theme => theme.space.base * 6;
+const sizeStyles$1 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const size = `${getSize(theme)}px`;
+  return styled.css(["width:", ";min-width:", ";height:", ";"], size, size, size);
+};
 const transformStyles = props => {
   let degrees = 0;
   if (props.isRotated) {
@@ -301,56 +309,120 @@ const transformStyles = props => {
   }
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
+const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0-next.7',
+  isBasic: true,
+  isPill: true,
+  size: 'small'
+}).withConfig({
+  displayName: "StyledPaneSplitterButton",
+  componentId: "sc-zh032e-0"
+})(["", ";", ";", ";"], sizeStyles$1, transformStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+StyledPaneSplitterButton.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
+const COMPONENT_ID = 'pane.splitter_button_container';
 const colorStyles = _ref => {
   let {
     theme
   } = _ref;
+  const backgroundColor = reactTheming.getColorV8('background', 600 , theme);
   const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
-  return styled.css(["box-shadow:", ";", ""], boxShadow, reactTheming.focusStyles({
-    theme,
-    boxShadow
-  }));
+  return styled.css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
 };
-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';
+const positionStyles = props => {
   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;
-      } else if (props.theme.rtl) {
-        right = size;
-      } else {
-        left = size;
-      }
-    } else if (props.placement === 'end') {
-      if (isVertical) {
-        bottom = size;
-      } else if (props.theme.rtl) {
-        left = size;
-      } else {
-        right = size;
-      }
+  const size = getSize(props.theme);
+  const inset = `-${size / 2}px`;
+  if (props.placement === 'center' || props.splitterSize < size * 3) {
+    const center = `${props.splitterSize / 2 - size / 2}px`;
+    switch (`${props.orientation}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+      case 'top-ltr':
+      case 'top-rtl':
+        top = inset;
+        left = center;
+        break;
+      case 'start-ltr':
+      case 'end-rtl':
+        top = center;
+        left = inset;
+        break;
+      case 'end-ltr':
+      case 'start-rtl':
+        top = center;
+        right = inset;
+        break;
+      case 'bottom-ltr':
+      case 'bottom-rtl':
+        bottom = inset;
+        right = center;
+        break;
+    }
+  } else {
+    const offset = `${size}px`;
+    switch (`${props.orientation}-${props.placement}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+      case 'top-end-ltr':
+      case 'top-end-rtl':
+      case 'top-start-rtl':
+        top = inset;
+        right = offset;
+        break;
+      case 'bottom-end-ltr':
+      case 'bottom-end-rtl':
+      case 'bottom-start-rtl':
+        bottom = inset;
+        right = offset;
+        break;
+      case 'start-start-ltr':
+      case 'end-start-rtl':
+        top = offset;
+        left = inset;
+        break;
+      case 'start-end-ltr':
+      case 'end-end-rtl':
+        bottom = offset;
+        left = inset;
+        break;
+      case 'end-start-ltr':
+      case 'start-start-rtl':
+        top = offset;
+        right = inset;
+        break;
+      case 'end-end-ltr':
+      case 'start-end-rtl':
+        bottom = offset;
+        right = inset;
+        break;
+      case 'top-start-ltr':
+        top = inset;
+        left = offset;
+        break;
+      case 'bottom-start-ltr':
+        bottom = inset;
+        left = offset;
+        break;
     }
   }
-  return styled.css(["display:", ";top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], display, top, right, bottom, left, size, size, size);
+  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";"], top, right, bottom, left);
 };
-const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6',
-  isBasic: true,
-  isPill: true,
-  size: 'small'
-}).withConfig({
-  displayName: "StyledPaneSplitterButton",
-  componentId: "sc-zh032e-0"
-})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";", ":hover &,", ":focus-visible &,", "[data-garden-focus-visible] &,", "{opacity:1;}", ";"], sizeStyles, transformStyles, props => reactTheming.getColorV8('background', 600 , props.theme), colorStyles, StyledPaneSplitter, StyledPaneSplitter, StyledPaneSplitter, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledPaneSplitterButton.defaultProps = {
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const size = getSize(theme);
+  return styled.css(["border-radius:", "px;width:", "px;height:", "px;"], size, size, size);
+};
+const minimumSplitterSize = theme => polished.stripUnit(polished.math(`${theme.shadowWidths.md} * 2 + ${getSize(theme)}`));
+const StyledPaneSplitterButtonContainer = styled__default.default.div.withConfig({
+  displayName: "StyledPaneSplitterButtonContainer",
+  componentId: "sc-1w84y62-0"
+})(["display:", ";position:absolute;transition:box-shadow 0.1s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;z-index:2;", ";", ";", ";&:hover,&:focus-within,", ":hover ~ &,", ":focus-visible ~ &{opacity:1;}", ";"], props => props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined, positionStyles, sizeStyles, colorStyles, StyledPaneSplitter, StyledPaneSplitter, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneSplitterButtonContainer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -710,6 +782,7 @@ const orientationToDimension = {
 };
 const SplitterComponent = React.forwardRef((_ref, ref) => {
   let {
+    children,
     providerId,
     layoutKey,
     min,
@@ -726,7 +799,6 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
   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'];
@@ -768,7 +840,6 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
     onClick
   });
   const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.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(() => ({
       orientation,
@@ -780,13 +851,11 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
       isRow
     }), [orientation, layoutKey, min, max, valueInFr, size, isRow])
   }, React__default.default.createElement(StyledPaneSplitter, _extends({
-    isHovered: isHovered,
     isFixed: isFixed,
     orientation: orientation
   }, separatorProps, props, {
-    onMouseOver: onMouseOver,
     ref: reactMergeRefs.mergeRefs([separatorRef, ref])
-  })));
+  })), children );
 });
 SplitterComponent.displayName = 'Pane.Splitter';
 SplitterComponent.propTypes = {
@@ -858,8 +927,13 @@ const SplitterButtonComponent = React.forwardRef((props, ref) => {
   );
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
   );
-  return React__default.default.createElement(reactTooltips.Tooltip, {
+  return React__default.default.createElement(StyledPaneSplitterButtonContainer, {
+    orientation: orientation,
+    placement: placement,
+    splitterSize: size || 0
+  }, React__default.default.createElement(reactTooltips.Tooltip, {
     content: label,
+    zIndex: 2,
     style: {
       cursor: 'default'
     },
@@ -867,15 +941,13 @@ const SplitterButtonComponent = React.forwardRef((props, ref) => {
   }, React__default.default.createElement(StyledPaneSplitterButton, _extends({
     "aria-label": label
   }, props, {
-    placement: placement,
     orientation: orientation,
     isRotated: isMin,
-    splitterSize: size || 0,
     ref: ref,
     onClick: onClick,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown
-  })));
+  }))));
 });
 SplitterButtonComponent.displayName = 'Pane.SplitterButton';
 const SplitterButton = SplitterButtonComponent;

package/dist/index.esm.js

@@ -41,7 +41,7 @@ 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 COMPONENT_ID$7 = 'grid.col';
 const colorStyles$4 = props => {
   const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1);
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
@@ -87,45 +87,45 @@ const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
 const mediaStyles$1 = (minWidth, size, alignSelf, textAlign, offset, order, props) => {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles$1(size, alignSelf, textAlign, offset, order, props));
 };
-const sizeStyles$4 = props => {
+const sizeStyles$5 = props => {
   const padding = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledCol = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
-})(["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 => 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$5(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 => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledCol.defaultProps = {
   columns: 12,
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'grid.grid';
+const COMPONENT_ID$6 = 'grid.grid';
 const colorStyles$3 = props => {
   const borderColor = getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
   const borderWidth = math(`${props.theme.borderWidths.sm} * 2`);
   return css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
-const sizeStyles$3 = props => {
+const sizeStyles$4 = props => {
   const padding = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledGrid = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
-})(["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 => 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$4(props), props => props.debug && colorStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'grid.row';
+const COMPONENT_ID$5 = 'grid.row';
 const colorStyles$2 = props => {
   const borderColor = getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
   const borderWidth = props.theme.borderWidths.sm;
@@ -151,61 +151,61 @@ const flexStyles = (alignItems, justifyContent, wrap) => {
 const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-const sizeStyles$2 = props => {
+const sizeStyles$3 = props => {
   const margin = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 const StyledRow = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
-})(["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 => retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), props => sizeStyles$3(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 => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'pane';
+const COMPONENT_ID$4 = 'pane';
 const StyledPane = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
-})(["position:relative;min-width:0;min-height:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["position:relative;min-width:0;min-height:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledPane.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'pane.content';
+const COMPONENT_ID$3 = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledPaneContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'pane.splitter';
+const COMPONENT_ID$2 = 'pane.splitter';
 const colorStyles$1 = props => {
   const color = getColorV8('neutralHue', 300, props.theme);
   const hoverColor = getColorV8('primaryHue', 600, props.theme);
   const activeColor = getColorV8('primaryHue', 800, props.theme);
-  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, focusStyles({
+  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, focusStyles({
     theme: props.theme,
     hue: hoverColor,
     styles: {
       backgroundColor: hoverColor
     },
-    selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before'
-  }), props.isHovered && activeColor);
+    selector: '&:focus-visible::before'
+  }), activeColor);
 };
-const sizeStyles$1 = props => {
+const sizeStyles$2 = props => {
   const size = math(`${props.theme.shadowWidths.md} * 2`);
   const separatorSize = math(`${props.theme.borderWidths.sm} * 2`);
   const offset = math(`-${size} / 2`);
@@ -264,20 +264,28 @@ const sizeStyles$1 = props => {
       break;
   }
   const dimensionProperty = width === '100%' ? 'height' : 'width';
-  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before,&[data-garden-focus-visible]::before{", ":", ";}&:focus-visible::before,&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
+  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before{", ":", ";}&:focus-visible::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
 const StyledPaneSplitter = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.7'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$2, SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledPaneSplitter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'pane.splitter_button';
+const COMPONENT_ID$1 = 'pane.splitter_button';
+const getSize = theme => theme.space.base * 6;
+const sizeStyles$1 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const size = `${getSize(theme)}px`;
+  return css(["width:", ";min-width:", ";height:", ";"], size, size, size);
+};
 const transformStyles = props => {
   let degrees = 0;
   if (props.isRotated) {
@@ -292,56 +300,120 @@ const transformStyles = props => {
   }
   return css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
+const StyledPaneSplitterButton = styled(ChevronButton).attrs({
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0-next.7',
+  isBasic: true,
+  isPill: true,
+  size: 'small'
+}).withConfig({
+  displayName: "StyledPaneSplitterButton",
+  componentId: "sc-zh032e-0"
+})(["", ";", ";", ";"], sizeStyles$1, transformStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
+StyledPaneSplitterButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID = 'pane.splitter_button_container';
 const colorStyles = _ref => {
   let {
     theme
   } = _ref;
+  const backgroundColor = getColorV8('background', 600 , theme);
   const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
-  return css(["box-shadow:", ";", ""], boxShadow, focusStyles({
-    theme,
-    boxShadow
-  }));
+  return css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
 };
-const sizeStyles = props => {
-  const size = `${props.theme.space.base * 6}px`;
-  const display = props.splitterSize <= stripUnit(math(`${props.theme.shadowWidths.md} * 2 + ${size}`)) && 'none';
-  const isVertical = props.orientation === 'start' || props.orientation === 'end';
+const positionStyles = props => {
   let top;
   let left;
   let right;
   let bottom;
-  if (props.splitterSize >= stripUnit(math(`${size} * 3`))) {
-    if (props.placement === 'start') {
-      if (isVertical) {
-        top = size;
-      } else if (props.theme.rtl) {
-        right = size;
-      } else {
-        left = size;
-      }
-    } else if (props.placement === 'end') {
-      if (isVertical) {
-        bottom = size;
-      } else if (props.theme.rtl) {
-        left = size;
-      } else {
-        right = size;
-      }
+  const size = getSize(props.theme);
+  const inset = `-${size / 2}px`;
+  if (props.placement === 'center' || props.splitterSize < size * 3) {
+    const center = `${props.splitterSize / 2 - size / 2}px`;
+    switch (`${props.orientation}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+      case 'top-ltr':
+      case 'top-rtl':
+        top = inset;
+        left = center;
+        break;
+      case 'start-ltr':
+      case 'end-rtl':
+        top = center;
+        left = inset;
+        break;
+      case 'end-ltr':
+      case 'start-rtl':
+        top = center;
+        right = inset;
+        break;
+      case 'bottom-ltr':
+      case 'bottom-rtl':
+        bottom = inset;
+        right = center;
+        break;
+    }
+  } else {
+    const offset = `${size}px`;
+    switch (`${props.orientation}-${props.placement}-${props.theme.rtl ? 'rtl' : 'ltr'}`) {
+      case 'top-end-ltr':
+      case 'top-end-rtl':
+      case 'top-start-rtl':
+        top = inset;
+        right = offset;
+        break;
+      case 'bottom-end-ltr':
+      case 'bottom-end-rtl':
+      case 'bottom-start-rtl':
+        bottom = inset;
+        right = offset;
+        break;
+      case 'start-start-ltr':
+      case 'end-start-rtl':
+        top = offset;
+        left = inset;
+        break;
+      case 'start-end-ltr':
+      case 'end-end-rtl':
+        bottom = offset;
+        left = inset;
+        break;
+      case 'end-start-ltr':
+      case 'start-start-rtl':
+        top = offset;
+        right = inset;
+        break;
+      case 'end-end-ltr':
+      case 'start-end-rtl':
+        bottom = offset;
+        right = inset;
+        break;
+      case 'top-start-ltr':
+        top = inset;
+        left = offset;
+        break;
+      case 'bottom-start-ltr':
+        bottom = inset;
+        left = offset;
+        break;
     }
   }
-  return css(["display:", ";top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], display, top, right, bottom, left, size, size, size);
+  return css(["top:", ";right:", ";bottom:", ";left:", ";"], top, right, bottom, left);
 };
-const StyledPaneSplitterButton = styled(ChevronButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6',
-  isBasic: true,
-  isPill: true,
-  size: 'small'
-}).withConfig({
-  displayName: "StyledPaneSplitterButton",
-  componentId: "sc-zh032e-0"
-})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";", ":hover &,", ":focus-visible &,", "[data-garden-focus-visible] &,", "{opacity:1;}", ";"], sizeStyles, transformStyles, props => getColorV8('background', 600 , props.theme), colorStyles, StyledPaneSplitter, StyledPaneSplitter, StyledPaneSplitter, SELECTOR_FOCUS_VISIBLE, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPaneSplitterButton.defaultProps = {
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const size = getSize(theme);
+  return css(["border-radius:", "px;width:", "px;height:", "px;"], size, size, size);
+};
+const minimumSplitterSize = theme => stripUnit(math(`${theme.shadowWidths.md} * 2 + ${getSize(theme)}`));
+const StyledPaneSplitterButtonContainer = styled.div.withConfig({
+  displayName: "StyledPaneSplitterButtonContainer",
+  componentId: "sc-1w84y62-0"
+})(["display:", ";position:absolute;transition:box-shadow 0.1s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;z-index:2;", ";", ";", ";&:hover,&:focus-within,", ":hover ~ &,", ":focus-visible ~ &{opacity:1;}", ";"], props => props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined, positionStyles, sizeStyles, colorStyles, StyledPaneSplitter, StyledPaneSplitter, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneSplitterButtonContainer.defaultProps = {
   theme: DEFAULT_THEME
 };
 
@@ -701,6 +773,7 @@ const orientationToDimension = {
 };
 const SplitterComponent = forwardRef((_ref, ref) => {
   let {
+    children,
     providerId,
     layoutKey,
     min,
@@ -717,7 +790,6 @@ const SplitterComponent = forwardRef((_ref, ref) => {
   const paneContext = usePaneContext();
   const themeContext = useContext(ThemeContext);
   const environment = useDocument(themeContext);
-  const [isHovered, setIsHovered] = useState(false);
   const isRow = orientationToDimension[orientation] === 'rows';
   const separatorRef = useRef(null);
   const splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
@@ -759,7 +831,6 @@ const SplitterComponent = forwardRef((_ref, ref) => {
     onClick
   });
   const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
-  const onMouseOver = useMemo(() => composeEventHandlers(props.onMouseOver, event => setIsHovered(event.target === separatorRef.current)), [props.onMouseOver, separatorRef]);
   return React.createElement(PaneSplitterContext.Provider, {
     value: useMemo(() => ({
       orientation,
@@ -771,13 +842,11 @@ const SplitterComponent = forwardRef((_ref, ref) => {
       isRow
     }), [orientation, layoutKey, min, max, valueInFr, size, isRow])
   }, React.createElement(StyledPaneSplitter, _extends({
-    isHovered: isHovered,
     isFixed: isFixed,
     orientation: orientation
   }, separatorProps, props, {
-    onMouseOver: onMouseOver,
     ref: mergeRefs([separatorRef, ref])
-  })));
+  })), children );
 });
 SplitterComponent.displayName = 'Pane.Splitter';
 SplitterComponent.propTypes = {
@@ -849,8 +918,13 @@ const SplitterButtonComponent = forwardRef((props, ref) => {
   );
   const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
   );
-  return React.createElement(Tooltip, {
+  return React.createElement(StyledPaneSplitterButtonContainer, {
+    orientation: orientation,
+    placement: placement,
+    splitterSize: size || 0
+  }, React.createElement(Tooltip, {
     content: label,
+    zIndex: 2,
     style: {
       cursor: 'default'
     },
@@ -858,15 +932,13 @@ const SplitterButtonComponent = forwardRef((props, ref) => {
   }, React.createElement(StyledPaneSplitterButton, _extends({
     "aria-label": label
   }, props, {
-    placement: placement,
     orientation: orientation,
     isRotated: isMin,
-    splitterSize: size || 0,
     ref: ref,
     onClick: onClick,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown
-  })));
+  }))));
 });
 SplitterButtonComponent.displayName = 'Pane.SplitterButton';
 const SplitterButton = SplitterButtonComponent;

package/dist/typings/styled/index.d.ts

@@ -11,3 +11,4 @@ export * from './pane/StyledPane';
 export * from './pane/StyledPaneContent';
 export * from './pane/StyledPaneSplitter';
 export * from './pane/StyledPaneSplitterButton';
+export * from './pane/StyledPaneSplitterButtonContainer';

package/dist/typings/styled/pane/StyledPaneSplitter.d.ts

@@ -7,7 +7,6 @@
 import { DefaultTheme } from 'styled-components';
 import { Orientation } from '../../types';
 interface IStyledPaneSplitterProps {
-    isHovered: boolean;
     orientation?: Orientation;
     isFixed?: boolean;
 }

package/dist/typings/styled/pane/StyledPaneSplitterButton.d.ts

@@ -6,15 +6,11 @@
  */
 /// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
-import { ISplitterButtonProps, Orientation, PLACEMENT } from '../../types';
-interface IStyledSplitterButtonProps extends ISplitterButtonProps {
+import { Orientation } from '../../types';
+interface IStyledSplitterButtonProps {
     orientation: Orientation;
-    placement: (typeof PLACEMENT)[number];
     isRotated: boolean;
-    splitterSize: number;
 }
-/**
- * 1. Opaque "dish" behind transparent button
- */
+export declare const getSize: (theme: DefaultTheme) => number;
 export declare const StyledPaneSplitterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, DefaultTheme, IStyledSplitterButtonProps, never>;
 export {};

package/dist/typings/styled/pane/StyledPaneSplitterButtonContainer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { DefaultTheme } from 'styled-components';
+import { Orientation, PLACEMENT } from '../../types';
+interface IStyledSplitterButtonContainerProps {
+    orientation: Orientation;
+    placement: (typeof PLACEMENT)[number];
+    splitterSize: number;
+}
+/**
+ * 1. Match focused `Splitter` z-index
+ */
+export declare const StyledPaneSplitterButtonContainer: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledSplitterButtonContainerProps, never>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.0.0-next.6",
+  "version": "9.0.0-next.7",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,21 +23,21 @@
   "dependencies": {
     "@zendeskgarden/container-splitter": "^2.0.3",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.0.0-next.6",
-    "@zendeskgarden/react-tooltips": "^9.0.0-next.6",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.7",
+    "@zendeskgarden/react-tooltips": "^9.0.0-next.7",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^9.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.6"
+    "@zendeskgarden/react-theming": "^9.0.0-next.7"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
+  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
 }