@zendeskgarden/react-grid 9.4.0 → 9.5.0

package/dist/esm/styled/StyledCol.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.col';
 const colorStyles = _ref => {
@@ -76,11 +76,11 @@ const sizeStyles = _ref2 => {
 };
 const StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
-})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(!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), sizeStyles, props => props.$debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.$xs, props.$alignSelfXs, props.$textAlignXs, props.$offsetXs, props.$orderXs, props), props => mediaStyles(props.theme.breakpoints.sm, props.$sm, props.$alignSelfSm, props.$textAlignSm, props.$offsetSm, props.$orderSm, props), props => mediaStyles(props.theme.breakpoints.md, props.$md, props.$alignSelfMd, props.$textAlignMd, props.$offsetMd, props.$orderMd, props), props => mediaStyles(props.theme.breakpoints.lg, props.$lg, props.$alignSelfLg, props.$textAlignLg, props.$offsetLg, props.$orderLg, props), props => mediaStyles(props.theme.breakpoints.xl, props.$xl, props.$alignSelfXl, props.$textAlignXl, props.$offsetXl, props.$orderXl, props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(!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), sizeStyles, props => props.$debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.$xs, props.$alignSelfXs, props.$textAlignXs, props.$offsetXs, props.$orderXs, props), props => mediaStyles(props.theme.breakpoints.sm, props.$sm, props.$alignSelfSm, props.$textAlignSm, props.$offsetSm, props.$orderSm, props), props => mediaStyles(props.theme.breakpoints.md, props.$md, props.$alignSelfMd, props.$textAlignMd, props.$offsetMd, props.$orderMd, props), props => mediaStyles(props.theme.breakpoints.lg, props.$lg, props.$alignSelfLg, props.$textAlignLg, props.$offsetLg, props.$orderLg, props), props => mediaStyles(props.theme.breakpoints.xl, props.$xl, props.$alignSelfXl, props.$textAlignXl, props.$offsetXl, props.$orderXl, props), componentStyles);
 StyledCol.defaultProps = {
   $columns: 12,
   theme: DEFAULT_THEME

package/dist/esm/styled/StyledGrid.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.grid';
 const colorStyles = _ref => {
@@ -36,11 +36,11 @@ const sizeStyles = _ref2 => {
 };
 const StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, componentStyles);
 StyledGrid.defaultProps = {
   $gutters: 'md',
   theme: DEFAULT_THEME

package/dist/esm/styled/StyledRow.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'grid.row';
 const colorStyles = _ref => {
@@ -52,11 +52,11 @@ const sizeStyles = _ref2 => {
 };
 const StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
-})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.$alignItems, props.$justifyContent, props.$wrapAll), sizeStyles, props => props.$debug && colorStyles(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, props));
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.$alignItems, props.$justifyContent, props.$wrapAll), sizeStyles, props => props.$debug && colorStyles(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), componentStyles);
 StyledRow.defaultProps = {
   $wrapAll: 'wrap',
   theme: DEFAULT_THEME

package/dist/esm/styled/pane/StyledPane.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
-})(["position:relative;min-width:0;min-height:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:relative;min-width:0;min-height:0;", ";"], componentStyles);
 
 export { StyledPane };

package/dist/esm/styled/pane/StyledPaneContent.js

@@ -5,15 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, componentStyles);
 
 export { StyledPaneContent };

package/dist/esm/styled/pane/StyledPaneSplitter.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pane.splitter';
 const colorStyles = _ref => {
@@ -107,10 +107,10 @@ const sizeStyles = _ref2 => {
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, 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, SELECTOR_FOCUS_VISIBLE, colorStyles, componentStyles);
 
 export { StyledPaneSplitter };

package/dist/esm/styled/pane/StyledPaneSplitterButton.js

@@ -5,6 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 
 const getSize = theme => theme.space.base * 6;
@@ -35,13 +36,13 @@ const transformStyles = _ref2 => {
   return css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["", ";", ";"], sizeStyles, transformStyles);
+})(["", ";", ";", ";"], sizeStyles, transformStyles, componentStyles);
 
 export { StyledPaneSplitterButton, getSize };

package/dist/esm/styled/pane/StyledPaneSplitterButtonContainer.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { stripUnit, math } from 'polished';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledPaneSplitter } from './StyledPaneSplitter.js';
 import { getSize } from './StyledPaneSplitterButton.js';
 
@@ -117,9 +117,12 @@ const sizeStyles = _ref3 => {
   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({
+const StyledPaneSplitterButtonContainer = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.5.0'
+}).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));
+})(["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, componentStyles);
 
 export { StyledPaneSplitterButtonContainer };

package/dist/index.cjs.js

@@ -102,11 +102,11 @@ const sizeStyles$5 = _ref2 => {
 };
 const StyledCol = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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), sizeStyles$5, 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), sizeStyles$5, 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), reactTheming.componentStyles);
 StyledCol.defaultProps = {
   $columns: 12,
   theme: reactTheming.DEFAULT_THEME
@@ -140,11 +140,11 @@ const sizeStyles$4 = _ref2 => {
 };
 const StyledGrid = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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', sizeStyles$4, colorStyles$3, 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', sizeStyles$4, colorStyles$3, reactTheming.componentStyles);
 StyledGrid.defaultProps = {
   $gutters: 'md',
   theme: reactTheming.DEFAULT_THEME
@@ -194,11 +194,11 @@ const sizeStyles$3 = _ref2 => {
 };
 const StyledRow = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
-})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.$alignItems, props.$justifyContent, props.$wrapAll), sizeStyles$3, 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), sizeStyles$3, 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), reactTheming.componentStyles);
 StyledRow.defaultProps = {
   $wrapAll: 'wrap',
   theme: reactTheming.DEFAULT_THEME
@@ -207,20 +207,20 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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;", ";"], reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, reactTheming.componentStyles);
 
 const COMPONENT_ID$1 = 'pane.splitter';
 const colorStyles$1 = _ref => {
@@ -321,11 +321,11 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.4.0'
+  'data-garden-version': '9.5.0'
 }).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$2, 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, reactTheming.componentStyles);
 
 const getSize = theme => theme.space.base * 6;
 const sizeStyles$1 = _ref => {
@@ -355,14 +355,14 @@ const transformStyles = _ref2 => {
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
-  'data-garden-version': '9.4.0',
+  'data-garden-version': '9.5.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["", ";", ";"], sizeStyles$1, transformStyles);
+})(["", ";", ";", ";"], sizeStyles$1, transformStyles, reactTheming.componentStyles);
 
 const COMPONENT_ID = 'pane.splitter_button_container';
 const colorStyles = _ref => {
@@ -471,10 +471,13 @@ const sizeStyles = _ref3 => {
   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({
+const StyledPaneSplitterButtonContainer = styled__default.default.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.5.0'
+}).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));
+})(["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, reactTheming.componentStyles);
 
 const GridContext = React.createContext({
   gutters: 'md'

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

@@ -13,5 +13,7 @@ interface IStyledSplitterButtonContainerProps {
 /**
  * 1. Match focused `Splitter` z-index
  */
-export declare const StyledPaneSplitterButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStyledSplitterButtonContainerProps>> & string;
+export declare const StyledPaneSplitterButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, IStyledSplitterButtonContainerProps>> & string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@zendeskgarden/container-splitter": "^2.0.17",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.4.0",
-    "@zendeskgarden/react-tooltips": "^9.4.0",
+    "@zendeskgarden/react-buttons": "^9.5.0",
+    "@zendeskgarden/react-tooltips": "^9.5.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0",
@@ -37,7 +37,7 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.4.0"
+    "@zendeskgarden/react-theming": "^9.5.0"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "02e3f240b6f0c776fdae785254d6fe90cbfc37e4"
+  "gitHead": "43546784a9aa985332ddcc6dd09209a11e2c03ff"
 }