@zendeskgarden/react-tables 9.12.3 → 9.12.4

package/dist/esm/elements/Cell.js

@@ -20,14 +20,13 @@ import '../styled/StyledOverflowButton.js';
 import '../styled/StyledRow.js';
 import { useTableContext } from '../utils/useTableContext.js';
 
-const Cell = React__default.forwardRef((_ref, ref) => {
-  let {
-    hidden,
-    isMinimum,
-    isTruncated,
-    hasOverflow,
-    ...props
-  } = _ref;
+const Cell = React__default.forwardRef(({
+  hidden,
+  isMinimum,
+  isTruncated,
+  hasOverflow,
+  ...props
+}, ref) => {
   const {
     size
   } = useTableContext();

package/dist/esm/elements/Head.js

@@ -18,16 +18,13 @@ import '../styled/StyledSortableButton.js';
 import '../styled/StyledOverflowButton.js';
 import '../styled/StyledRow.js';
 
-const Head = forwardRef((_ref, ref) => {
-  let {
-    isSticky,
-    ...props
-  } = _ref;
-  return React__default.createElement(StyledHead, Object.assign({
-    ref: ref,
-    $isSticky: isSticky
-  }, props));
-});
+const Head = forwardRef(({
+  isSticky,
+  ...props
+}, ref) => React__default.createElement(StyledHead, Object.assign({
+  ref: ref,
+  $isSticky: isSticky
+}, props)));
 Head.displayName = 'Table.Head';
 
 export { Head };

package/dist/esm/elements/HeaderCell.js

@@ -20,14 +20,13 @@ import '../styled/StyledRow.js';
 import { useTableContext } from '../utils/useTableContext.js';
 import { Cell } from './Cell.js';
 
-const HeaderCell = forwardRef((_ref, ref) => {
-  let {
-    hidden,
-    isMinimum,
-    isTruncated,
-    hasOverflow,
-    ...props
-  } = _ref;
+const HeaderCell = forwardRef(({
+  hidden,
+  isMinimum,
+  isTruncated,
+  hasOverflow,
+  ...props
+}, ref) => {
   const {
     size
   } = useTableContext();

package/dist/esm/elements/Row.js

@@ -21,16 +21,15 @@ import '../styled/StyledOverflowButton.js';
 import { StyledRow } from '../styled/StyledRow.js';
 import { useTableContext } from '../utils/useTableContext.js';
 
-const Row = forwardRef((_ref, ref) => {
-  let {
-    onFocus,
-    onBlur,
-    isSelected,
-    isStriped,
-    isHovered,
-    isFocused: focused,
-    ...otherProps
-  } = _ref;
+const Row = forwardRef(({
+  onFocus,
+  onBlur,
+  isSelected,
+  isStriped,
+  isHovered,
+  isFocused: focused,
+  ...otherProps
+}, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const {
     size,

package/dist/esm/elements/SortableCell.js

@@ -22,14 +22,13 @@ import { StyledSortableButton, StyledSortableStrokeIconWrapper, StyledSortableFi
 import '../styled/StyledOverflowButton.js';
 import '../styled/StyledRow.js';
 
-const SortableCell = forwardRef((_ref, ref) => {
-  let {
-    sort,
-    cellProps = {},
-    width,
-    children,
-    ...sortableButtonProps
-  } = _ref;
+const SortableCell = forwardRef(({
+  sort,
+  cellProps = {},
+  width,
+  children,
+  ...sortableButtonProps
+}, ref) => {
   const {
     isMinimum,
     isTruncated,

package/dist/esm/elements/Table.js

@@ -31,12 +31,11 @@ import { OverflowButton } from './OverflowButton.js';
 import { Row } from './Row.js';
 import { SortableCell } from './SortableCell.js';
 
-const TableComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    isReadOnly,
-    size = 'medium',
-    ...props
-  } = _ref;
+const TableComponent = React__default.forwardRef(({
+  isReadOnly,
+  size = 'medium',
+  ...props
+}, ref) => {
   const tableContextValue = useMemo(() => ({
     size: size,
     isReadOnly: isReadOnly

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgSortStroke = function SvgSortStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _path$2;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgOverflowVerticalStroke = function SvgOverflowVerticalStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M9.5 2.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0 5.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm0 5.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
   })));

package/dist/esm/styled/StyledBaseRow.js

@@ -7,17 +7,15 @@
 import styled, { css } from 'styled-components';
 import { getColor } from '@zendeskgarden/react-theming';
 
-const sizeStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const sizeStyles$4 = ({
+  theme
+}) => {
   return css(["border-bottom:", ";vertical-align:top;box-sizing:border-box;"], theme.borders.sm);
 };
-const colorStyles = _ref2 => {
-  let {
-    theme,
-    $isStriped
-  } = _ref2;
+const colorStyles$5 = ({
+  theme,
+  $isStriped
+}) => {
   const borderColor = getColor({
     variable: 'border.subtle',
     theme
@@ -38,6 +36,6 @@ const colorStyles = _ref2 => {
 const StyledBaseRow = styled.tr.withConfig({
   displayName: "StyledBaseRow",
   componentId: "sc-1t4zqg4-0"
-})(["display:table-row;transition:background-color 0.1s ease-in-out;", " ", ""], sizeStyles, colorStyles);
+})(["display:table-row;transition:background-color 0.1s ease-in-out;", " ", ""], sizeStyles$4, colorStyles$5);
 
 export { StyledBaseRow };

package/dist/esm/styled/StyledBody.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'tables.body';
+const COMPONENT_ID$b = 'tables.body';
 const StyledBody = styled.tbody.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"

package/dist/esm/styled/StyledCaption.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'tables.caption';
+const COMPONENT_ID$a = 'tables.caption';
 const StyledCaption = styled.caption.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"

package/dist/esm/styled/StyledCell.js

@@ -10,8 +10,8 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 import { getLineHeight } from './StyledTable.js';
 import { getRowHeight } from './style-utils.js';
 
-const COMPONENT_ID = 'tables.cell';
-const truncatedStyling = css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const COMPONENT_ID$6 = 'tables.cell';
+const truncatedStyling$1 = css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 const sizeStyling = props => {
   let boxSizing = 'border-box';
   let padding;
@@ -34,11 +34,11 @@ const sizeStyling = props => {
   return css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
 };
 const StyledCell = styled.td.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-8hpncx-0"
-})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], props => sizeStyling(props), props => props.$isTruncated && truncatedStyling, componentStyles);
+})(["display:table-cell;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;", ";", ";", ";"], props => sizeStyling(props), props => props.$isTruncated && truncatedStyling$1, componentStyles);
 
 export { StyledCell };

package/dist/esm/styled/StyledGroupRow.js

@@ -11,11 +11,10 @@ import { StyledBaseRow } from './StyledBaseRow.js';
 import { StyledCell } from './StyledCell.js';
 import { getLineHeight } from './StyledTable.js';
 
-const COMPONENT_ID = 'tables.group_row';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$2 = 'tables.group_row';
+const colorStyles$1 = ({
+  theme
+}) => {
   return css(["background-color:", ";"], getColor({
     variable: 'background.subtle',
     transparency: theme.opacity[100],
@@ -28,17 +27,17 @@ const colorStyles = _ref => {
     theme
   }));
 };
-const sizeStyles = props => {
+const sizeStyles$1 = props => {
   const height = `${props.theme.space.base * 8}px`;
   const lineHeight = getLineHeight(props);
   return css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
 };
 const StyledGroupRow = styled(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
-})(["", " ", " ", ";"], sizeStyles, colorStyles, componentStyles);
+})(["", " ", " ", ";"], sizeStyles$1, colorStyles$1, componentStyles);
 
 export { StyledGroupRow };

package/dist/esm/styled/StyledHead.js

@@ -9,11 +9,10 @@ import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledHeaderRow } from './StyledHeaderRow.js';
 import { StyledHeaderCell } from './StyledHeaderCell.js';
 
-const COMPONENT_ID = 'tables.head';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const COMPONENT_ID$3 = 'tables.head';
+const colorStyles$2 = ({
+  theme
+}) => {
   const borderColor = getColor({
     variable: 'border.default',
     theme
@@ -28,11 +27,11 @@ const stickyStyles = () => {
   return css(["position:sticky;top:0;z-index:1;"]);
 };
 const StyledHead = styled.thead.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
-})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles, componentStyles);
+})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles$2, componentStyles);
 
 export { StyledHead };

package/dist/esm/styled/StyledHeaderCell.js

@@ -12,9 +12,9 @@ import { StyledSortableButton } from './StyledSortableButton.js';
 import { getLineHeight } from './StyledTable.js';
 import { getRowHeight } from './style-utils.js';
 
-const COMPONENT_ID = 'tables.header_cell';
+const COMPONENT_ID$4 = 'tables.header_cell';
 const truncatedStyling = css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
-const sizeStyles = props => {
+const sizeStyles$2 = props => {
   let paddingVertical = undefined;
   if (!props.$hasOverflow) {
     paddingVertical = math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
@@ -23,8 +23,8 @@ const sizeStyles = props => {
 };
 const StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -36,6 +36,6 @@ const StyledHeaderCell = styled(StyledCell).attrs({
     return 'left';
   }
   return undefined;
-}, props => sizeStyles(props), props => props.$isTruncated && truncatedStyling, componentStyles);
+}, props => sizeStyles$2(props), props => props.$isTruncated && truncatedStyling, componentStyles);
 
 export { StyledHeaderCell };

package/dist/esm/styled/StyledHeaderRow.js

@@ -10,7 +10,7 @@ import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledBaseRow } from './StyledBaseRow.js';
 import { StyledOverflowButton } from './StyledOverflowButton.js';
 
-const COMPONENT_ID = 'tables.header_row';
+const COMPONENT_ID$8 = 'tables.header_row';
 const getHeaderRowHeight = props => {
   if (props.$size === 'large') {
     return `${props.theme.space.base * 18}px`;
@@ -19,25 +19,24 @@ const getHeaderRowHeight = props => {
   }
   return `${props.theme.space.base * 12}px`;
 };
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$4 = ({
+  theme
+}) => {
   return css(["border-bottom-color:", ";"], getColor({
     variable: 'border.default',
     theme
   }));
 };
-const sizeStyles = props => {
+const sizeStyles$3 = props => {
   const rowHeight = getHeaderRowHeight(props);
   return css(["height:", ";vertical-align:bottom;", "{margin-top:0;margin-bottom:calc(", " - 1em);}"], rowHeight, StyledOverflowButton, math(`${rowHeight} / 2`));
 };
 const StyledHeaderRow = styled(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
-})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles, colorStyles, StyledOverflowButton, componentStyles);
+})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles$3, colorStyles$4, StyledOverflowButton, componentStyles);
 
 export { StyledHeaderRow };

package/dist/esm/styled/StyledHiddenCell.js

@@ -8,10 +8,10 @@ import styled from 'styled-components';
 import { hideVisually } from 'polished';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'tables.hidden_cell';
+const COMPONENT_ID$1 = 'tables.hidden_cell';
 const StyledHiddenCell = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"

package/dist/esm/styled/StyledOverflowButton.js

@@ -10,11 +10,11 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 import { getRowHeight } from './style-utils.js';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
-const COMPONENT_ID = 'tables.overflow_button';
+const COMPONENT_ID$9 = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const StyledOverflowButton = styled(IconButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledOverflowButton",
   componentId: "sc-1eba2ml-0"

package/dist/esm/styled/StyledRow.js

@@ -12,14 +12,13 @@ import { StyledOverflowButton } from './StyledOverflowButton.js';
 import { getRowHeight } from './style-utils.js';
 
 const COMPONENT_ID = 'tables.row';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isFocused,
-    $isSelected,
-    $isHovered,
-    $isReadOnly
-  } = _ref;
+const colorStyles = ({
+  theme,
+  $isFocused,
+  $isSelected,
+  $isHovered,
+  $isReadOnly
+}) => {
   const hoveredBackgroundColor = getColor({
     variable: 'background.primaryEmphasis',
     transparency: theme.opacity[100],
@@ -94,7 +93,7 @@ const sizeStyles = props => {
 };
 const StyledRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-ek66ow-0"

package/dist/esm/styled/StyledSortableButton.js

@@ -8,7 +8,7 @@ import styled, { css } from 'styled-components';
 import { math } from 'polished';
 import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'tables.sortable';
+const COMPONENT_ID$5 = 'tables.sortable';
 const StyledBaseIconWrapper = styled.div.withConfig({
   displayName: "StyledSortableButton__StyledBaseIconWrapper",
   componentId: "sc-2s1dli-0"
@@ -21,11 +21,10 @@ const StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
   displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
   componentId: "sc-2s1dli-2"
 })([""]);
-const colorStyles = _ref => {
-  let {
-    theme,
-    $sort
-  } = _ref;
+const colorStyles$3 = ({
+  theme,
+  $sort
+}) => {
   const fgInactive = getColor({
     variable: 'foreground.subtle',
     transparency: theme.opacity[200],
@@ -81,12 +80,12 @@ const colorStyles = _ref => {
   }));
 };
 const StyledSortableButton = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3',
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.12.4',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
   componentId: "sc-2s1dli-3"
-})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.$sort === undefined && 1, StyledSortableFillIconWrapper, props => props.$sort !== undefined && 1, SELECTOR_FOCUS_VISIBLE, colorStyles, componentStyles);
+})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.$sort === undefined && 1, StyledSortableFillIconWrapper, props => props.$sort !== undefined && 1, SELECTOR_FOCUS_VISIBLE, colorStyles$3, componentStyles);
 
 export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper };

package/dist/esm/styled/StyledTable.js

@@ -7,13 +7,13 @@
 import styled from 'styled-components';
 import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'tables.table';
+const COMPONENT_ID$7 = 'tables.table';
 const getLineHeight = props => {
   return `${props.theme.space.base * 5}px`;
 };
 const StyledTable = styled.table.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 const COMPONENT_ID$b = 'tables.body';
 const StyledBody = styled__default.default.tbody.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -50,23 +50,21 @@ const StyledBody = styled__default.default.tbody.attrs({
 const COMPONENT_ID$a = 'tables.caption';
 const StyledCaption = styled__default.default.caption.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
 })(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', reactTheming.componentStyles);
 
-const sizeStyles$4 = _ref => {
-  let {
-    theme
-  } = _ref;
+const sizeStyles$4 = ({
+  theme
+}) => {
   return styled.css(["border-bottom:", ";vertical-align:top;box-sizing:border-box;"], theme.borders.sm);
 };
-const colorStyles$5 = _ref2 => {
-  let {
-    theme,
-    $isStriped
-  } = _ref2;
+const colorStyles$5 = ({
+  theme,
+  $isStriped
+}) => {
   const borderColor = reactTheming.getColor({
     variable: 'border.subtle',
     theme
@@ -102,7 +100,7 @@ const COMPONENT_ID$9 = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const StyledOverflowButton = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledOverflowButton",
   componentId: "sc-1eba2ml-0"
@@ -117,10 +115,9 @@ const getHeaderRowHeight = props => {
   }
   return `${props.theme.space.base * 12}px`;
 };
-const colorStyles$4 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$4 = ({
+  theme
+}) => {
   return styled.css(["border-bottom-color:", ";"], reactTheming.getColor({
     variable: 'border.default',
     theme
@@ -132,7 +129,7 @@ const sizeStyles$3 = props => {
 };
 const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
@@ -144,7 +141,7 @@ const getLineHeight = props => {
 };
 const StyledTable = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
@@ -178,7 +175,7 @@ const sizeStyling = props => {
 };
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-8hpncx-0"
@@ -197,11 +194,10 @@ const StyledSortableFillIconWrapper = styled__default.default(StyledBaseIconWrap
   displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
   componentId: "sc-2s1dli-2"
 })([""]);
-const colorStyles$3 = _ref => {
-  let {
-    theme,
-    $sort
-  } = _ref;
+const colorStyles$3 = ({
+  theme,
+  $sort
+}) => {
   const fgInactive = reactTheming.getColor({
     variable: 'foreground.subtle',
     transparency: theme.opacity[200],
@@ -258,7 +254,7 @@ const colorStyles$3 = _ref => {
 };
 const StyledSortableButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.12.3',
+  'data-garden-version': '9.12.4',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
@@ -277,7 +273,7 @@ const sizeStyles$2 = props => {
 const StyledHeaderCell = styled__default.default(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -292,10 +288,9 @@ const StyledHeaderCell = styled__default.default(StyledCell).attrs({
 }, props => sizeStyles$2(props), props => props.$isTruncated && truncatedStyling, reactTheming.componentStyles);
 
 const COMPONENT_ID$3 = 'tables.head';
-const colorStyles$2 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$2 = ({
+  theme
+}) => {
   const borderColor = reactTheming.getColor({
     variable: 'border.default',
     theme
@@ -311,17 +306,16 @@ const stickyStyles = () => {
 };
 const StyledHead = styled__default.default.thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
 })(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles$2, reactTheming.componentStyles);
 
 const COMPONENT_ID$2 = 'tables.group_row';
-const colorStyles$1 = _ref => {
-  let {
-    theme
-  } = _ref;
+const colorStyles$1 = ({
+  theme
+}) => {
   return styled.css(["background-color:", ";"], reactTheming.getColor({
     variable: 'background.subtle',
     transparency: theme.opacity[100],
@@ -341,7 +335,7 @@ const sizeStyles$1 = props => {
 };
 const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
@@ -350,21 +344,20 @@ const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
 const COMPONENT_ID$1 = 'tables.hidden_cell';
 const StyledHiddenCell = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"
 })(["", " ", ";"], polished.hideVisually(), reactTheming.componentStyles);
 
 const COMPONENT_ID = 'tables.row';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isFocused,
-    $isSelected,
-    $isHovered,
-    $isReadOnly
-  } = _ref;
+const colorStyles = ({
+  theme,
+  $isFocused,
+  $isSelected,
+  $isHovered,
+  $isReadOnly
+}) => {
   const hoveredBackgroundColor = reactTheming.getColor({
     variable: 'background.primaryEmphasis',
     transparency: theme.opacity[100],
@@ -439,7 +432,7 @@ const sizeStyles = props => {
 };
 const StyledRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.3'
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-ek66ow-0"
@@ -463,14 +456,13 @@ const useTableContext = () => {
   return React.useContext(TableContext);
 };
 
-const Cell = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    hidden,
-    isMinimum,
-    isTruncated,
-    hasOverflow,
-    ...props
-  } = _ref;
+const Cell = React__namespace.default.forwardRef(({
+  hidden,
+  isMinimum,
+  isTruncated,
+  hasOverflow,
+  ...props
+}, ref) => {
   const {
     size
   } = useTableContext();
@@ -501,26 +493,22 @@ const GroupRow = React.forwardRef((props, ref) => {
 });
 GroupRow.displayName = 'Table.GroupRow';
 
-const Head = React.forwardRef((_ref, ref) => {
-  let {
-    isSticky,
-    ...props
-  } = _ref;
-  return React__namespace.default.createElement(StyledHead, Object.assign({
-    ref: ref,
-    $isSticky: isSticky
-  }, props));
-});
+const Head = React.forwardRef(({
+  isSticky,
+  ...props
+}, ref) => React__namespace.default.createElement(StyledHead, Object.assign({
+  ref: ref,
+  $isSticky: isSticky
+}, props)));
 Head.displayName = 'Table.Head';
 
-const HeaderCell = React.forwardRef((_ref, ref) => {
-  let {
-    hidden,
-    isMinimum,
-    isTruncated,
-    hasOverflow,
-    ...props
-  } = _ref;
+const HeaderCell = React.forwardRef(({
+  hidden,
+  isMinimum,
+  isTruncated,
+  hasOverflow,
+  ...props
+}, ref) => {
   const {
     size
   } = useTableContext();
@@ -576,16 +564,15 @@ const OverflowButton = React.forwardRef((props, ref) => {
 });
 OverflowButton.displayName = 'Table.OverflowButton';
 
-const Row = React.forwardRef((_ref, ref) => {
-  let {
-    onFocus,
-    onBlur,
-    isSelected,
-    isStriped,
-    isHovered,
-    isFocused: focused,
-    ...otherProps
-  } = _ref;
+const Row = React.forwardRef(({
+  onFocus,
+  onBlur,
+  isSelected,
+  isStriped,
+  isHovered,
+  isFocused: focused,
+  ...otherProps
+}, ref) => {
   const [isFocused, setIsFocused] = React.useState(false);
   const {
     size,
@@ -667,14 +654,13 @@ var SvgSortFill = function SvgSortFill(props) {
 const SIZE = ['small', 'medium', 'large'];
 const SORT = ['asc', 'desc'];
 
-const SortableCell = React.forwardRef((_ref, ref) => {
-  let {
-    sort,
-    cellProps = {},
-    width,
-    children,
-    ...sortableButtonProps
-  } = _ref;
+const SortableCell = React.forwardRef(({
+  sort,
+  cellProps = {},
+  width,
+  children,
+  ...sortableButtonProps
+}, ref) => {
   const {
     isMinimum,
     isTruncated,
@@ -706,12 +692,11 @@ SortableCell.propTypes = {
   width: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
 };
 
-const TableComponent = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    isReadOnly,
-    size = 'medium',
-    ...props
-  } = _ref;
+const TableComponent = React__namespace.default.forwardRef(({
+  isReadOnly,
+  size = 'medium',
+  ...props
+}, ref) => {
   const tableContextValue = React.useMemo(() => ({
     size: size,
     isReadOnly: isReadOnly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tables",
-  "version": "9.12.3",
+  "version": "9.12.4",
   "description": "Components relating to tables in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-utilities": "^2.0.4",
-    "@zendeskgarden/react-buttons": "^9.12.3",
+    "@zendeskgarden/react-buttons": "^9.12.4",
     "dom-helpers": "^5.1.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7"
@@ -34,8 +34,8 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.12.3",
-    "@zendeskgarden/svg-icons": "7.5.0"
+    "@zendeskgarden/react-theming": "^9.12.4",
+    "@zendeskgarden/svg-icons": "7.6.0"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "2780bf3aea7009ed84ef10d85e290947d7d8f97e"
+  "gitHead": "e79e9687e6bcbd097c059add2938cdae59a5173b"
 }