@zendeskgarden/react-grid 9.12.2 → 9.12.4

package/dist/esm/elements/Col.js

@@ -6,7 +6,7 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ALIGN_SELF, TEXT_ALIGN } from '../types/index.js';
+import { TEXT_ALIGN, ALIGN_SELF } from '../types/index.js';
 import { StyledCol } from '../styled/StyledCol.js';
 import '../styled/StyledGrid.js';
 import '../styled/StyledRow.js';
@@ -17,40 +17,39 @@ import '../styled/pane/StyledPaneSplitterButton.js';
 import '../styled/pane/StyledPaneSplitterButtonContainer.js';
 import useGridContext from '../utils/useGridContext.js';
 
-const Col = React.forwardRef((_ref, ref) => {
-  let {
-    alignSelf,
-    alignSelfLg,
-    alignSelfMd,
-    alignSelfSm,
-    alignSelfXl,
-    alignSelfXs,
-    lg,
-    md,
-    offset,
-    offsetLg,
-    offsetMd,
-    offsetSm,
-    offsetXl,
-    offsetXs,
-    order,
-    orderLg,
-    orderMd,
-    orderSm,
-    orderXl,
-    orderXs,
-    size,
-    sm,
-    textAlign,
-    textAlignLg,
-    textAlignMd,
-    textAlignSm,
-    textAlignXl,
-    textAlignXs,
-    xl,
-    xs,
-    ...other
-  } = _ref;
+const Col = React.forwardRef(({
+  alignSelf,
+  alignSelfLg,
+  alignSelfMd,
+  alignSelfSm,
+  alignSelfXl,
+  alignSelfXs,
+  lg,
+  md,
+  offset,
+  offsetLg,
+  offsetMd,
+  offsetSm,
+  offsetXl,
+  offsetXs,
+  order,
+  orderLg,
+  orderMd,
+  orderSm,
+  orderXl,
+  orderXs,
+  size,
+  sm,
+  textAlign,
+  textAlignLg,
+  textAlignMd,
+  textAlignSm,
+  textAlignXl,
+  textAlignXs,
+  xl,
+  xs,
+  ...other
+}, ref) => {
   const {
     columns,
     gutters,

package/dist/esm/elements/Grid.js

@@ -19,13 +19,12 @@ import '../styled/pane/StyledPaneSplitterButtonContainer.js';
 import { Row } from './Row.js';
 import { Col } from './Col.js';
 
-const GridComponent = React.forwardRef((_ref, ref) => {
-  let {
-    columns = 12,
-    gutters = 'md',
-    debug,
-    ...other
-  } = _ref;
+const GridComponent = React.forwardRef(({
+  columns = 12,
+  gutters = 'md',
+  debug,
+  ...other
+}, ref) => {
   const value = useMemo(() => ({
     columns,
     gutters: gutters,

package/dist/esm/elements/Row.js

@@ -6,7 +6,7 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ALIGN_ITEMS, JUSTIFY_CONTENT, WRAP } from '../types/index.js';
+import { WRAP, JUSTIFY_CONTENT, ALIGN_ITEMS } from '../types/index.js';
 import useGridContext from '../utils/useGridContext.js';
 import '../styled/StyledCol.js';
 import '../styled/StyledGrid.js';
@@ -17,28 +17,27 @@ import '../styled/pane/StyledPaneSplitter.js';
 import '../styled/pane/StyledPaneSplitterButton.js';
 import '../styled/pane/StyledPaneSplitterButtonContainer.js';
 
-const Row = React.forwardRef((_ref, ref) => {
-  let {
-    alignItems,
-    alignItemsXs,
-    alignItemsSm,
-    alignItemsMd,
-    alignItemsLg,
-    alignItemsXl,
-    justifyContent,
-    justifyContentXs,
-    justifyContentSm,
-    justifyContentMd,
-    justifyContentLg,
-    justifyContentXl,
-    wrap,
-    wrapXs,
-    wrapSm,
-    wrapMd,
-    wrapLg,
-    wrapXl,
-    ...props
-  } = _ref;
+const Row = React.forwardRef(({
+  alignItems,
+  alignItemsXs,
+  alignItemsSm,
+  alignItemsMd,
+  alignItemsLg,
+  alignItemsXl,
+  justifyContent,
+  justifyContentXs,
+  justifyContentSm,
+  justifyContentMd,
+  justifyContentLg,
+  justifyContentXl,
+  wrap,
+  wrapXs,
+  wrapSm,
+  wrapMd,
+  wrapLg,
+  wrapXl,
+  ...props
+}, ref) => {
   const {
     gutters,
     debug

package/dist/esm/elements/pane/Pane.js

@@ -20,11 +20,10 @@ import '../../styled/pane/StyledPaneSplitterButton.js';
 import '../../styled/pane/StyledPaneSplitterButtonContainer.js';
 import { PaneContext } from '../../utils/usePaneContext.js';
 
-const PaneComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
+const PaneComponent = forwardRef(({
+  children,
+  ...props
+}, ref) => {
   const [paneId, setPaneId] = useState();
   const observerRef = useRef(null);
   const {

package/dist/esm/elements/pane/PaneProvider.js

@@ -13,24 +13,22 @@ const getPixelsPerFr = (totalFrs, totalDimension) => {
   return totalDimension / totalFrs;
 };
 const convertToPixels = (values, pixelsPerFr) => {
-  return Object.entries(values).reduce((prev, _ref) => {
-    let [key, value] = _ref;
+  return Object.entries(values).reduce((prev, [key, value]) => {
     prev[key] = value * pixelsPerFr;
     return prev;
   }, {});
 };
-const PaneProvider = _ref2 => {
-  let {
-    id,
-    totalPanesWidth,
-    totalPanesHeight,
-    defaultRowValues,
-    defaultColumnValues,
-    rowValues,
-    columnValues,
-    onChange,
-    children
-  } = _ref2;
+const PaneProvider = ({
+  id,
+  totalPanesWidth,
+  totalPanesHeight,
+  defaultRowValues,
+  defaultColumnValues,
+  rowValues,
+  columnValues,
+  onChange,
+  children
+}) => {
   const isControlled = rowValues !== undefined && rowValues !== null && columnValues !== undefined && columnValues !== null;
   const [rowState, setRowState] = useState(defaultRowValues || {});
   const [columnState, setColumnState] = useState(defaultColumnValues || {});

package/dist/esm/elements/pane/components/Splitter.js

@@ -35,21 +35,20 @@ const orientationToDimension = {
   top: 'rows',
   bottom: 'rows'
 };
-const SplitterComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    providerId,
-    layoutKey,
-    min,
-    max,
-    orientation = 'end',
-    isFixed,
-    onMouseDown,
-    onTouchStart,
-    onKeyDown,
-    onClick,
-    ...props
-  } = _ref;
+const SplitterComponent = forwardRef(({
+  children,
+  providerId,
+  layoutKey,
+  min,
+  max,
+  orientation = 'end',
+  isFixed,
+  onMouseDown,
+  onTouchStart,
+  onKeyDown,
+  onClick,
+  ...props
+}, ref) => {
   const paneProviderContext = usePaneProviderContextData(providerId);
   const paneContext = usePaneContext();
   const themeContext = useContext(ThemeContext);

package/dist/esm/elements/pane/components/SplitterButton.js

@@ -18,12 +18,11 @@ import { StyledPaneSplitterButtonContainer } from '../../../styled/pane/StyledPa
 import usePaneSplitterContext from '../../../utils/usePaneSplitterContext.js';
 import { usePaneProviderContextData } from '../../../utils/usePaneProviderContext.js';
 
-const SplitterButtonComponent = forwardRef((_ref, ref) => {
-  let {
-    label,
-    placement: defaultPlacement,
-    ...other
-  } = _ref;
+const SplitterButtonComponent = forwardRef(({
+  label,
+  placement: defaultPlacement,
+  ...other
+}, ref) => {
   const {
     orientation,
     layoutKey,

package/dist/esm/styled/StyledCol.js

@@ -8,11 +8,10 @@ import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'grid.col';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$6 = 'grid.col';
+const colorStyles$4 = ({
+  theme
+}) => {
   const backgroundColor = getColor({
     theme,
     variable: 'background.primaryEmphasis',
@@ -25,7 +24,7 @@ const colorStyles = _ref => {
   });
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
-const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
+const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
   const margin = offset && `${math(`${offset} / ${props.$columns} * 100`)}%`;
   let flexBasis;
   let flexGrow;
@@ -63,24 +62,23 @@ const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
   }
   return 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);
 };
-const mediaStyles = (minWidth, size, alignSelf, textAlign, offset, order, props) => {
-  return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(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 = _ref2 => {
-  let {
-    theme,
-    $gutters
-  } = _ref2;
+const sizeStyles$5 = ({
+  theme,
+  $gutters
+}) => {
   const padding = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledCol = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.12.4',
   $columns: props.$columns ?? 12
 })).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), componentStyles);
+})(["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), componentStyles);
 
 export { StyledCol };

package/dist/esm/styled/StyledGrid.js

@@ -8,12 +8,11 @@ import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'grid.grid';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $debug
-  } = _ref;
+const COMPONENT_ID$5 = 'grid.grid';
+const colorStyles$3 = ({
+  theme,
+  $debug
+}) => {
   const borderColor = $debug && getColor({
     theme,
     hue: 'crimson',
@@ -26,21 +25,20 @@ const colorStyles = _ref => {
       ${borderWidth} 0 0 0 ${borderColor}
     `);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $gutters
-  } = _ref2;
+const sizeStyles$4 = ({
+  theme,
+  $gutters
+}) => {
   const padding = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledGrid = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4',
   $gutters: props.$gutters ?? 'md'
 })).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, componentStyles);
+})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles$4, colorStyles$3, componentStyles);
 
 export { StyledGrid };

package/dist/esm/styled/StyledRow.js

@@ -8,11 +8,10 @@ import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'grid.row';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$4 = 'grid.row';
+const colorStyles$2 = ({
+  theme
+}) => {
   const borderColor = getColor({
     theme,
     hue: 'mint',
@@ -42,21 +41,20 @@ const flexStyles = (alignItems, justifyContent, wrap) => {
 const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $gutters
-  } = _ref2;
+const sizeStyles$3 = ({
+  theme,
+  $gutters
+}) => {
   const margin = $gutters ? math(`${theme.space[$gutters]} / 2`) : 0;
   return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 const StyledRow = styled.div.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2',
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.12.4',
   $wrapAll: props.$wrapAll ?? 'wrap'
 })).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), componentStyles);
+})(["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), componentStyles);
 
 export { StyledRow };

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'pane';
+const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"

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

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'pane.content';
+const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"

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

@@ -8,11 +8,10 @@ import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'pane.splitter';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$1 = 'pane.splitter';
+const colorStyles$1 = ({
+  theme
+}) => {
   const color = getColor({
     theme,
     variable: 'border.default'
@@ -39,12 +38,11 @@ const colorStyles = _ref => {
     selector: '&:focus-visible::before'
   }), activeColor);
 };
-const sizeStyles = _ref2 => {
-  let {
-    theme,
-    $orientation,
-    $isFixed
-  } = _ref2;
+const sizeStyles$2 = ({
+  theme,
+  $orientation,
+  $isFixed
+}) => {
   const size = math(`${theme.shadowWidths.md} * 2`);
   const separatorSize = math(`${theme.borderWidths.sm} * 2`);
   const offset = math(`-${size} / 2`);
@@ -106,11 +104,11 @@ const sizeStyles = _ref2 => {
   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, $isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, theme.borderRadii.md);
 };
 const StyledPaneSplitter = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.12.4'
 }).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, componentStyles);
+})(["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, componentStyles);
 
 export { StyledPaneSplitter };

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

@@ -9,19 +9,17 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 
 const getSize = theme => theme.space.base * 6;
-const sizeStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const sizeStyles$1 = ({
+  theme
+}) => {
   const size = `${getSize(theme)}px`;
   return css(["width:", ";min-width:", ";height:", ";"], size, size, size);
 };
-const transformStyles = _ref2 => {
-  let {
-    $isRotated,
-    $orientation,
-    theme
-  } = _ref2;
+const transformStyles = ({
+  $isRotated,
+  $orientation,
+  theme
+}) => {
   let degrees = 0;
   if ($isRotated) {
     degrees = theme.rtl ? -180 : 180;
@@ -36,13 +34,13 @@ const transformStyles = _ref2 => {
   return css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["", ";", ";", ";"], sizeStyles, transformStyles, componentStyles);
+})(["", ";", ";", ";"], sizeStyles$1, transformStyles, componentStyles);
 
 export { StyledPaneSplitterButton, getSize };

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

@@ -11,10 +11,9 @@ import { StyledPaneSplitter } from './StyledPaneSplitter.js';
 import { getSize } from './StyledPaneSplitterButton.js';
 
 const COMPONENT_ID = 'pane.splitter_button_container';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles = ({
+  theme
+}) => {
   const backgroundColor = getColor({
     theme,
     variable: 'background.raised'
@@ -25,13 +24,12 @@ const colorStyles = _ref => {
   }));
   return css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
 };
-const positionStyles = _ref2 => {
-  let {
-    theme,
-    $orientation,
-    $placement,
-    $splitterSize
-  } = _ref2;
+const positionStyles = ({
+  theme,
+  $orientation,
+  $placement,
+  $splitterSize
+}) => {
   let top;
   let left;
   let right;
@@ -109,17 +107,16 @@ const positionStyles = _ref2 => {
   }
   return css(["top:", ";right:", ";bottom:", ";left:", ";"], top, right, bottom, left);
 };
-const sizeStyles = _ref3 => {
-  let {
-    theme
-  } = _ref3;
+const sizeStyles = ({
+  theme
+}) => {
   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.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledPaneSplitterButtonContainer",
   componentId: "sc-1w84y62-0"

package/dist/index.cjs.js

@@ -35,10 +35,9 @@ const WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 const ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
 const COMPONENT_ID$6 = 'grid.col';
-const colorStyles$4 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$4 = ({
+  theme
+}) => {
   const backgroundColor = reactTheming.getColor({
     theme,
     variable: 'background.primaryEmphasis',
@@ -92,17 +91,16 @@ 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$5 = _ref2 => {
-  let {
-    theme,
-    $gutters
-  } = _ref2;
+const sizeStyles$5 = ({
+  theme,
+  $gutters
+}) => {
   const padding = $gutters ? polished.math(`${theme.space[$gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledCol = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   $columns: props.$columns ?? 12
 })).withConfig({
   displayName: "StyledCol",
@@ -110,11 +108,10 @@ const StyledCol = styled__default.default.div.attrs(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);
 
 const COMPONENT_ID$5 = 'grid.grid';
-const colorStyles$3 = _ref => {
-  let {
-    theme,
-    $debug
-  } = _ref;
+const colorStyles$3 = ({
+  theme,
+  $debug
+}) => {
   const borderColor = $debug && reactTheming.getColor({
     theme,
     hue: 'crimson',
@@ -127,17 +124,16 @@ const colorStyles$3 = _ref => {
       ${borderWidth} 0 0 0 ${borderColor}
     `);
 };
-const sizeStyles$4 = _ref2 => {
-  let {
-    theme,
-    $gutters
-  } = _ref2;
+const sizeStyles$4 = ({
+  theme,
+  $gutters
+}) => {
   const padding = $gutters ? polished.math(`${theme.space[$gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 const StyledGrid = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   $gutters: props.$gutters ?? 'md'
 })).withConfig({
   displayName: "StyledGrid",
@@ -145,10 +141,9 @@ const StyledGrid = styled__default.default.div.attrs(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);
 
 const COMPONENT_ID$4 = 'grid.row';
-const colorStyles$2 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$2 = ({
+  theme
+}) => {
   const borderColor = reactTheming.getColor({
     theme,
     hue: 'mint',
@@ -178,17 +173,16 @@ const flexStyles = (alignItems, justifyContent, wrap) => {
 const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-const sizeStyles$3 = _ref2 => {
-  let {
-    theme,
-    $gutters
-  } = _ref2;
+const sizeStyles$3 = ({
+  theme,
+  $gutters
+}) => {
   const margin = $gutters ? polished.math(`${theme.space[$gutters]} / 2`) : 0;
   return styled.css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 const StyledRow = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   $wrapAll: props.$wrapAll ?? 'wrap'
 })).withConfig({
   displayName: "StyledRow",
@@ -198,7 +192,7 @@ const StyledRow = styled__default.default.div.attrs(props => ({
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -207,17 +201,16 @@ const StyledPane = 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': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
 })(["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 => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$1 = ({
+  theme
+}) => {
   const color = reactTheming.getColor({
     theme,
     variable: 'border.default'
@@ -244,12 +237,11 @@ const colorStyles$1 = _ref => {
     selector: '&:focus-visible::before'
   }), activeColor);
 };
-const sizeStyles$2 = _ref2 => {
-  let {
-    theme,
-    $orientation,
-    $isFixed
-  } = _ref2;
+const sizeStyles$2 = ({
+  theme,
+  $orientation,
+  $isFixed
+}) => {
   const size = polished.math(`${theme.shadowWidths.md} * 2`);
   const separatorSize = polished.math(`${theme.borderWidths.sm} * 2`);
   const offset = polished.math(`-${size} / 2`);
@@ -312,26 +304,24 @@ const sizeStyles$2 = _ref2 => {
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).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, reactTheming.componentStyles);
 
 const getSize = theme => theme.space.base * 6;
-const sizeStyles$1 = _ref => {
-  let {
-    theme
-  } = _ref;
+const sizeStyles$1 = ({
+  theme
+}) => {
   const size = `${getSize(theme)}px`;
   return styled.css(["width:", ";min-width:", ";height:", ";"], size, size, size);
 };
-const transformStyles = _ref2 => {
-  let {
-    $isRotated,
-    $orientation,
-    theme
-  } = _ref2;
+const transformStyles = ({
+  $isRotated,
+  $orientation,
+  theme
+}) => {
   let degrees = 0;
   if ($isRotated) {
     degrees = theme.rtl ? -180 : 180;
@@ -346,7 +336,7 @@ const transformStyles = _ref2 => {
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
-  'data-garden-version': '9.12.2',
+  'data-garden-version': '9.12.4',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -356,10 +346,9 @@ const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronBut
 })(["", ";", ";", ";"], sizeStyles$1, transformStyles, reactTheming.componentStyles);
 
 const COMPONENT_ID = 'pane.splitter_button_container';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles = ({
+  theme
+}) => {
   const backgroundColor = reactTheming.getColor({
     theme,
     variable: 'background.raised'
@@ -370,13 +359,12 @@ const colorStyles = _ref => {
   }));
   return styled.css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
 };
-const positionStyles = _ref2 => {
-  let {
-    theme,
-    $orientation,
-    $placement,
-    $splitterSize
-  } = _ref2;
+const positionStyles = ({
+  theme,
+  $orientation,
+  $placement,
+  $splitterSize
+}) => {
   let top;
   let left;
   let right;
@@ -454,17 +442,16 @@ const positionStyles = _ref2 => {
   }
   return styled.css(["top:", ";right:", ";bottom:", ";left:", ";"], top, right, bottom, left);
 };
-const sizeStyles = _ref3 => {
-  let {
-    theme
-  } = _ref3;
+const sizeStyles = ({
+  theme
+}) => {
   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.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledPaneSplitterButtonContainer",
   componentId: "sc-1w84y62-0"
@@ -477,40 +464,39 @@ const useGridContext = () => {
   return React.useContext(GridContext);
 };
 
-const Col = React__default.default.forwardRef((_ref, ref) => {
-  let {
-    alignSelf,
-    alignSelfLg,
-    alignSelfMd,
-    alignSelfSm,
-    alignSelfXl,
-    alignSelfXs,
-    lg,
-    md,
-    offset,
-    offsetLg,
-    offsetMd,
-    offsetSm,
-    offsetXl,
-    offsetXs,
-    order,
-    orderLg,
-    orderMd,
-    orderSm,
-    orderXl,
-    orderXs,
-    size,
-    sm,
-    textAlign,
-    textAlignLg,
-    textAlignMd,
-    textAlignSm,
-    textAlignXl,
-    textAlignXs,
-    xl,
-    xs,
-    ...other
-  } = _ref;
+const Col = React__default.default.forwardRef(({
+  alignSelf,
+  alignSelfLg,
+  alignSelfMd,
+  alignSelfSm,
+  alignSelfXl,
+  alignSelfXs,
+  lg,
+  md,
+  offset,
+  offsetLg,
+  offsetMd,
+  offsetSm,
+  offsetXl,
+  offsetXs,
+  order,
+  orderLg,
+  orderMd,
+  orderSm,
+  orderXl,
+  orderXs,
+  size,
+  sm,
+  textAlign,
+  textAlignLg,
+  textAlignMd,
+  textAlignSm,
+  textAlignXl,
+  textAlignXs,
+  xl,
+  xs,
+  ...other
+}, ref) => {
   const {
     columns,
     gutters,
@@ -587,28 +573,27 @@ Col.propTypes = {
   orderXl: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string])
 };
 
-const Row = React__default.default.forwardRef((_ref, ref) => {
-  let {
-    alignItems,
-    alignItemsXs,
-    alignItemsSm,
-    alignItemsMd,
-    alignItemsLg,
-    alignItemsXl,
-    justifyContent,
-    justifyContentXs,
-    justifyContentSm,
-    justifyContentMd,
-    justifyContentLg,
-    justifyContentXl,
-    wrap,
-    wrapXs,
-    wrapSm,
-    wrapMd,
-    wrapLg,
-    wrapXl,
-    ...props
-  } = _ref;
+const Row = React__default.default.forwardRef(({
+  alignItems,
+  alignItemsXs,
+  alignItemsSm,
+  alignItemsMd,
+  alignItemsLg,
+  alignItemsXl,
+  justifyContent,
+  justifyContentXs,
+  justifyContentSm,
+  justifyContentMd,
+  justifyContentLg,
+  justifyContentXl,
+  wrap,
+  wrapXs,
+  wrapSm,
+  wrapMd,
+  wrapLg,
+  wrapXl,
+  ...props
+}, ref) => {
   const {
     gutters,
     debug
@@ -659,13 +644,12 @@ Row.propTypes = {
   wrapXl: PropTypes__default.default.oneOf(WRAP)
 };
 
-const GridComponent = React__default.default.forwardRef((_ref, ref) => {
-  let {
-    columns = 12,
-    gutters = 'md',
-    debug,
-    ...other
-  } = _ref;
+const GridComponent = React__default.default.forwardRef(({
+  columns = 12,
+  gutters = 'md',
+  debug,
+  ...other
+}, ref) => {
   const value = React.useMemo(() => ({
     columns,
     gutters: gutters,
@@ -701,24 +685,22 @@ const getPixelsPerFr = (totalFrs, totalDimension) => {
   return totalDimension / totalFrs;
 };
 const convertToPixels = (values, pixelsPerFr) => {
-  return Object.entries(values).reduce((prev, _ref) => {
-    let [key, value] = _ref;
+  return Object.entries(values).reduce((prev, [key, value]) => {
     prev[key] = value * pixelsPerFr;
     return prev;
   }, {});
 };
-const PaneProvider = _ref2 => {
-  let {
-    id,
-    totalPanesWidth,
-    totalPanesHeight,
-    defaultRowValues,
-    defaultColumnValues,
-    rowValues,
-    columnValues,
-    onChange,
-    children
-  } = _ref2;
+const PaneProvider = ({
+  id,
+  totalPanesWidth,
+  totalPanesHeight,
+  defaultRowValues,
+  defaultColumnValues,
+  rowValues,
+  columnValues,
+  onChange,
+  children
+}) => {
   const isControlled = rowValues !== undefined && rowValues !== null && columnValues !== undefined && columnValues !== null;
   const [rowState, setRowState] = React.useState(defaultRowValues || {});
   const [columnState, setColumnState] = React.useState(defaultColumnValues || {});
@@ -914,21 +896,20 @@ const orientationToDimension = {
   top: 'rows',
   bottom: 'rows'
 };
-const SplitterComponent = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    providerId,
-    layoutKey,
-    min,
-    max,
-    orientation = 'end',
-    isFixed,
-    onMouseDown,
-    onTouchStart,
-    onKeyDown,
-    onClick,
-    ...props
-  } = _ref;
+const SplitterComponent = React.forwardRef(({
+  children,
+  providerId,
+  layoutKey,
+  min,
+  max,
+  orientation = 'end',
+  isFixed,
+  onMouseDown,
+  onTouchStart,
+  onKeyDown,
+  onClick,
+  ...props
+}, ref) => {
   const paneProviderContext = usePaneProviderContextData(providerId);
   const paneContext = usePaneContext();
   const themeContext = React.useContext(styled.ThemeContext);
@@ -1013,12 +994,11 @@ const ContentComponent = React.forwardRef((props, ref) => {
 ContentComponent.displayName = 'Pane.Content';
 const Content = ContentComponent;
 
-const SplitterButtonComponent = React.forwardRef((_ref, ref) => {
-  let {
-    label,
-    placement: defaultPlacement,
-    ...other
-  } = _ref;
+const SplitterButtonComponent = React.forwardRef(({
+  label,
+  placement: defaultPlacement,
+  ...other
+}, ref) => {
   const {
     orientation,
     layoutKey,
@@ -1085,11 +1065,10 @@ const SplitterButtonComponent = React.forwardRef((_ref, ref) => {
 SplitterButtonComponent.displayName = 'Pane.SplitterButton';
 const SplitterButton = SplitterButtonComponent;
 
-const PaneComponent = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
+const PaneComponent = React.forwardRef(({
+  children,
+  ...props
+}, ref) => {
   const [paneId, setPaneId] = React.useState();
   const observerRef = React.useRef(null);
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "9.12.2",
+  "version": "9.12.4",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,10 +21,10 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-splitter": "^2.0.17",
-    "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^9.12.2",
-    "@zendeskgarden/react-tooltips": "^9.12.2",
+    "@zendeskgarden/container-splitter": "^2.0.22",
+    "@zendeskgarden/container-utilities": "^2.0.4",
+    "@zendeskgarden/react-buttons": "^9.12.4",
+    "@zendeskgarden/react-tooltips": "^9.12.4",
     "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.12.2"
+    "@zendeskgarden/react-theming": "^9.12.4"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9b6f34bf0eda4bee3b47f97a437aa9b7f3008af4"
+  "gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
 }