@zendeskgarden/react-tables 8.57.1 → 8.58.0

package/dist/index.cjs.js

@@ -45,194 +45,81 @@ function _extends$3() {
   _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends$3.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var COMPONENT_ID$a = 'tables.body';
-var StyledBody = styled__default["default"].tbody.attrs({
+const COMPONENT_ID$a = 'tables.body';
+const StyledBody = styled__default["default"].tbody.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
-})(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props);
-});
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$9 = 'tables.caption';
-var StyledCaption = styled__default["default"].caption.attrs({
+const COMPONENT_ID$9 = 'tables.caption';
+const StyledCaption = styled__default["default"].caption.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
-})(["display:table-caption;text-align:", ";", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props);
-});
+})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledCaption.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$8 = 'tables.table';
-var getLineHeight = function getLineHeight(props) {
-  return "".concat(props.theme.space.base * 5, "px");
+const COMPONENT_ID$8 = 'tables.table';
+const getLineHeight = props => {
+  return `${props.theme.space.base * 5}px`;
 };
-var StyledTable = styled__default["default"].table.attrs({
+const StyledTable = styled__default["default"].table.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
-})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], function (props) {
-  return getLineHeight(props);
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return props.theme.rtl && 'rtl';
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], props => getLineHeight(props), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledTable.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var getRowHeight = function getRowHeight(props) {
+const getRowHeight = props => {
   if (props.size === 'large') {
-    return "".concat(props.theme.space.base * 16, "px");
+    return `${props.theme.space.base * 16}px`;
   } else if (props.size === 'small') {
-    return "".concat(props.theme.space.base * 8, "px");
+    return `${props.theme.space.base * 8}px`;
   }
-  return "".concat(props.theme.space.base * 10, "px");
+  return `${props.theme.space.base * 10}px`;
 };
 
-var COMPONENT_ID$7 = 'tables.cell';
-var truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
-var sizeStyling = function sizeStyling(props) {
-  var boxSizing = 'border-box';
-  var padding;
-  var width = props.width;
-  var height;
+const COMPONENT_ID$7 = 'tables.cell';
+const truncatedStyling$1 = styled.css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const sizeStyling = props => {
+  let boxSizing = 'border-box';
+  let padding;
+  let width = props.width;
+  let height;
   if (props.hasOverflow) {
     boxSizing = 'content-box';
     width = '2em';
     height = 'inherit';
-    padding = props.theme.rtl ? "0 0 0 ".concat(props.theme.space.base, "px") : "0 ".concat(props.theme.space.base, "px 0 0");
+    padding = props.theme.rtl ? `0 0 0 ${props.theme.space.base}px` : `0 ${props.theme.space.base}px 0 0`;
   } else {
-    var paddingVertical = polished.math("(".concat(getRowHeight(props), " - ").concat(getLineHeight(props), ") / 2"));
-    var paddingHorizontal = "".concat(props.theme.space.base * 3, "px");
-    padding = "".concat(paddingVertical, " ").concat(paddingHorizontal);
+    const paddingVertical = polished.math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
+    const paddingHorizontal = `${props.theme.space.base * 3}px`;
+    padding = `${paddingVertical} ${paddingHorizontal}`;
   }
   if (props.isMinimum) {
     boxSizing = 'content-box';
@@ -240,32 +127,26 @@ var sizeStyling = function sizeStyling(props) {
   }
   return styled.css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
 };
-var StyledCell = styled__default["default"].td.attrs({
+const StyledCell = styled__default["default"].td.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).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;", ";", ";", ";"], function (props) {
-  return sizeStyling(props);
-}, function (props) {
-  return props.isTruncated && truncatedStyling$1;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+})(["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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$6 = 'tables.overflow_button';
-var OVERFLOW_BUTTON_SIZE = '2em';
-var colorStyles$1 = function colorStyles(props) {
-  var boxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35));
-  var hoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
-  var hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
-  var activeBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
-  var activeForegroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
-  var foregroundColor;
+const COMPONENT_ID$6 = 'tables.overflow_button';
+const OVERFLOW_BUTTON_SIZE = '2em';
+const colorStyles$1 = props => {
+  const boxShadow = props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35));
+  const hoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
+  const hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
+  const activeBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
+  const activeForegroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
+  let foregroundColor;
   if (props.isHovered) {
     foregroundColor = hoverForegroundColor;
   } else if (props.isActive) {
@@ -275,28 +156,18 @@ var colorStyles$1 = function colorStyles(props) {
   }
   return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}&:active{background-color:", ";color:", ";}&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:inset ", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, activeBackgroundColor, activeForegroundColor, boxShadow);
 };
-var StyledOverflowButton = styled__default["default"].button.attrs({
+const StyledOverflowButton = styled__default["default"].button.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
   componentId: "sc-1eba2ml-0"
-})(["display:block;transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;opacity:", ";z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " &[aria-expanded='true']{opacity:1;}", ";"], function (props) {
-  return props.isHovered || props.isFocused || props.isActive ? '1' : '0';
-}, function (props) {
-  return props.isActive ? '1' : '0';
-}, function (props) {
-  return polished.math("".concat(getRowHeight(props), " / 2"));
-}, OVERFLOW_BUTTON_SIZE, function (props) {
-  return colorStyles$1(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["display:block;transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;opacity:", ";z-index:", ";margin-top:calc(", " - 1em);border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:100%;height:", ";text-decoration:none;font-size:inherit;", " &[aria-expanded='true']{opacity:1;}", ";"], props => props.isHovered || props.isFocused || props.isActive ? '1' : '0', props => props.isActive ? '1' : '0', props => polished.math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledOverflowButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledOverflowButtonIconWrapper = styled__default["default"].div.withConfig({
+const StyledOverflowButtonIconWrapper = styled__default["default"].div.withConfig({
   displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
   componentId: "sc-1eba2ml-1"
 })(["display:flex;align-items:center;justify-content:center;transform:rotate(90deg);transition:opacity 0.25s ease-in-out,background-color 0.1s ease-in-out;width:", ";height:", ";&:hover{opacity:1;}"], OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
@@ -304,29 +175,25 @@ StyledOverflowButtonIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'tables.row';
-var StyledBaseRow = styled__default["default"].tr.withConfig({
+const COMPONENT_ID$5 = 'tables.row';
+const StyledBaseRow = styled__default["default"].tr.withConfig({
   displayName: "StyledRow__StyledBaseRow",
   componentId: "sc-ek66ow-0"
-})(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], function (props) {
-  return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 200, props.theme));
-}, function (props) {
-  return props.isStriped && reactTheming.getColor('neutralHue', 100, props.theme);
-});
+})(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.isStriped && reactTheming.getColor('neutralHue', 100, props.theme));
 StyledBaseRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var colorStyles = function colorStyles(props) {
-  var boxShadow = "inset ".concat(props.theme.rtl ? '-' : '').concat(props.theme.shadowWidths.md, " 0 0 0 ").concat(reactTheming.getColor('primaryHue', 600, props.theme));
-  var hoveredBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
-  var hoveredBorderColor = reactTheming.getColor('primaryHue', 200, props.theme);
-  var selectedBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
-  var selectedBorderColor = reactTheming.getColor('primaryHue', 300, props.theme);
-  var hoveredSelectedBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.28);
-  var backgroundColor = undefined;
-  var borderColor = undefined;
-  var hoverBorderBottomColor = undefined;
-  var hoverBackgroundColor = undefined;
+const colorStyles = props => {
+  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${reactTheming.getColor('primaryHue', 600, props.theme)}`;
+  const hoveredBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
+  const hoveredBorderColor = reactTheming.getColor('primaryHue', 200, props.theme);
+  const selectedBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
+  const selectedBorderColor = reactTheming.getColor('primaryHue', 300, props.theme);
+  const hoveredSelectedBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.28);
+  let backgroundColor = undefined;
+  let borderColor = undefined;
+  let hoverBorderBottomColor = undefined;
+  let hoverBackgroundColor = undefined;
   if (props.isSelected) {
     if (props.isHovered) {
       backgroundColor = hoveredSelectedBackgroundColor;
@@ -345,180 +212,152 @@ var colorStyles = function colorStyles(props) {
   }
   return styled.css(["border-bottom-color:", ";background-color:", ";&:hover{border-bottom-color:", ";background-color:", ";", "{opacity:1;}}&:focus{outline:none;}", ":first-of-type{box-shadow:", ";&:focus{box-shadow:", ";}}"], borderColor, backgroundColor, hoverBorderBottomColor, hoverBackgroundColor, StyledOverflowButton, StyledCell, props.isFocused && boxShadow, boxShadow);
 };
-var StyledRow = styled__default["default"](StyledBaseRow).attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$5,
-    'data-garden-version': '8.57.1',
-    tabIndex: props.isReadOnly ? undefined : -1
-  };
-}).withConfig({
+const StyledRow = styled__default["default"](StyledBaseRow).attrs(props => ({
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.58.0',
+  tabIndex: props.isReadOnly ? undefined : -1
+})).withConfig({
   displayName: "StyledRow",
   componentId: "sc-ek66ow-1"
-})(["height:", ";", " ", ";"], getRowHeight, function (props) {
-  return colorStyles(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'tables.header_row';
-var getHeaderRowHeight = function getHeaderRowHeight(props) {
+const COMPONENT_ID$4 = 'tables.header_row';
+const getHeaderRowHeight = props => {
   if (props.size === 'large') {
-    return "".concat(props.theme.space.base * 18, "px");
+    return `${props.theme.space.base * 18}px`;
   } else if (props.size === 'small') {
-    return "".concat(props.theme.space.base * 10, "px");
+    return `${props.theme.space.base * 10}px`;
   }
-  return "".concat(props.theme.space.base * 12, "px");
+  return `${props.theme.space.base * 12}px`;
 };
-var StyledHeaderRow = styled__default["default"](StyledBaseRow).attrs({
+const StyledHeaderRow = styled__default["default"](StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHeaderRow",
   componentId: "sc-16ogvdx-0"
-})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], function (props) {
-  return reactTheming.getColor('neutralHue', 300, props.theme);
-}, getHeaderRowHeight, function (props) {
-  return props.theme.fontWeights.semibold;
-}, StyledOverflowButton, function (props) {
-  return polished.math("".concat(getHeaderRowHeight(props), " / 2"));
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => reactTheming.getColor('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => polished.math(`${getHeaderRowHeight(props)} / 2`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledHeaderRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'tables.head';
-var StyledHead = styled__default["default"].thead.attrs({
+const COMPONENT_ID$3 = 'tables.head';
+const StyledHead = styled__default["default"].thead.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
-})(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledHead.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'tables.group_row';
-var sizeStyles$1 = function sizeStyles(props) {
-  var height = "".concat(props.theme.space.base * 8, "px");
-  var lineHeight = getLineHeight(props);
-  return styled.css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, polished.math("(".concat(height, " - ").concat(lineHeight, ") / 2")), props.theme.space.base * 3);
+const COMPONENT_ID$2 = 'tables.group_row';
+const sizeStyles$1 = props => {
+  const height = `${props.theme.space.base * 8}px`;
+  const lineHeight = getLineHeight(props);
+  return styled.css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, polished.math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
 };
-var StyledGroupRow = styled__default["default"](StyledBaseRow).attrs({
+const StyledGroupRow = styled__default["default"](StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
-})(["background-color:", ";", " ", ";"], function (props) {
-  return reactTheming.getColor('neutralHue', 100, props.theme);
-}, function (props) {
-  return sizeStyles$1(props);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["background-color:", ";", " ", ";"], props => reactTheming.getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledGroupRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'tables.sortable';
-var StyledBaseIconWrapper = styled__default["default"].div.withConfig({
+const COMPONENT_ID$1 = 'tables.sortable';
+const StyledBaseIconWrapper = styled__default["default"].div.withConfig({
   displayName: "StyledSortableButton__StyledBaseIconWrapper",
   componentId: "sc-2s1dli-0"
-})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return props.theme.iconSizes.sm;
-});
+})(["display:flex;position:absolute;top:0;", ":0;align-items:center;justify-content:center;opacity:0;width:", ";height:100%;color:inherit;fill:inherit;"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.iconSizes.sm);
 StyledBaseIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledSortableStrokeIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
+const StyledSortableStrokeIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
   displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
   componentId: "sc-2s1dli-1"
 })([""]);
 StyledSortableStrokeIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledSortableFillIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
+const StyledSortableFillIconWrapper = styled__default["default"](StyledBaseIconWrapper).withConfig({
   displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
   componentId: "sc-2s1dli-2"
 })([""]);
 StyledSortableFillIconWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
-var StyledSortableButton = styled__default["default"].button.attrs({
+const StyledSortableButton = styled__default["default"].button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.57.1',
+  'data-garden-version': '8.58.0',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
   componentId: "sc-2s1dli-3"
-})(["position:relative;border:none;background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";color:", ";fill:", ";}&:hover,&[data-garden-focus-visible]{text-decoration:none;color:", ";", ";", " ", "}&:focus{outline:none;}", ";"], function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return polished.math("".concat(props.theme.space.base, " + ").concat(props.theme.iconSizes.sm));
-}, function (props) {
-  return props.width;
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, StyledSortableStrokeIconWrapper, function (props) {
-  return props.sort === undefined && 1;
-}, StyledSortableFillIconWrapper, function (props) {
-  return props.sort !== undefined && 1;
-}, function (props) {
+})(["position:relative;border:none;background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";color:", ";fill:", ";}&:hover,&[data-garden-focus-visible]{text-decoration:none;color:", ";", ";", " ", "}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', props => polished.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, props => {
   if (props.sort === 'asc') {
     return reactTheming.getColor('neutralHue', 600, props.theme);
   } else if (props.sort === 'desc') {
     return reactTheming.getColor('neutralHue', 400, props.theme);
   }
   return undefined;
-}, function (props) {
+}, props => {
   if (props.sort === 'asc') {
     return reactTheming.getColor('neutralHue', 400, props.theme);
   } else if (props.sort === 'desc') {
     return reactTheming.getColor('neutralHue', 600, props.theme);
   }
   return undefined;
-}, function (props) {
-  return reactTheming.getColor('primaryHue', 600, props.theme);
-}, function (props) {
-  return props.sort === undefined && "\n      ".concat(StyledSortableFillIconWrapper, " {\n        opacity: 1;\n        color: ").concat(reactTheming.getColor('primaryHue', 600, props.theme), ";\n        fill: ").concat(reactTheming.getColor('primaryHue', 600, props.theme), ";\n      }\n\n      ").concat(StyledSortableStrokeIconWrapper, " {\n        opacity: 0;\n      }\n    ");
-}, function (props) {
-  return props.sort === 'asc' && "\n      ".concat(StyledSortableFillIconWrapper, " {\n        color: ").concat(reactTheming.getColor('primaryHue', 600, props.theme), ";\n        fill: ").concat(reactTheming.getColor('primaryHue', 600, props.theme, 0.25), ";\n      }\n    ");
-}, function (props) {
-  return props.sort === 'desc' && "\n      ".concat(StyledSortableFillIconWrapper, " {\n        color: ").concat(reactTheming.getColor('primaryHue', 600, props.theme, 0.25), ";\n        fill: ").concat(reactTheming.getColor('primaryHue', 600, props.theme), ";\n      }\n    ");
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+}, props => reactTheming.getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
+      ${StyledSortableFillIconWrapper} {
+        opacity: 1;
+        color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
+        fill: ${reactTheming.getColor('primaryHue', 600, props.theme)};
+      }
+
+      ${StyledSortableStrokeIconWrapper} {
+        opacity: 0;
+      }
+    `, props => props.sort === 'asc' && `
+      ${StyledSortableFillIconWrapper} {
+        color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
+        fill: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
+      }
+    `, props => props.sort === 'desc' && `
+      ${StyledSortableFillIconWrapper} {
+        color: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
+        fill: ${reactTheming.getColor('primaryHue', 600, props.theme)};
+      }
+    `, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledSortableButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'tables.header_cell';
-var truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
-var sizeStyles = function sizeStyles(props) {
-  var paddingVertical = undefined;
+const COMPONENT_ID = 'tables.header_cell';
+const truncatedStyling = styled.css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
+const sizeStyles = props => {
+  let paddingVertical = undefined;
   if (!props.hasOverflow) {
-    paddingVertical = polished.math("(".concat(getRowHeight(props), " - ").concat(getLineHeight(props), ") / 2"));
+    paddingVertical = polished.math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
   }
   return styled.css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
 };
-var StyledHeaderCell = styled__default["default"](StyledCell).attrs({
+const StyledHeaderCell = styled__default["default"](StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
-})(["text-align:", ";font-weight:inherit;", " ", " ", ";"], function (props) {
+})(["text-align:", ";font-weight:inherit;", " ", " ", ";"], props => {
   if (!props.hasOverflow) {
     if (props.theme.rtl) {
       return 'right';
@@ -526,42 +365,33 @@ var StyledHeaderCell = styled__default["default"](StyledCell).attrs({
     return 'left';
   }
   return undefined;
-}, function (props) {
-  return sizeStyles(props);
-}, function (props) {
-  return props.isTruncated && truncatedStyling;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+}, props => sizeStyles(props), props => props.isTruncated && truncatedStyling, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderCell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var Body = React.forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledBody, _extends$3({
-    ref: ref
-  }, props));
-});
+const Body = React.forwardRef((props, ref) => React__default["default"].createElement(StyledBody, _extends$3({
+  ref: ref
+}, props)));
 Body.displayName = 'Body';
 
-var Caption = React.forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledCaption, _extends$3({
-    ref: ref
-  }, props));
-});
+const Caption = React.forwardRef((props, ref) => React__default["default"].createElement(StyledCaption, _extends$3({
+  ref: ref
+}, props)));
 Caption.displayName = 'Caption';
 
-var TableContext = React__default["default"].createContext({
+const TableContext = React__default["default"].createContext({
   size: 'medium',
   isReadOnly: false
 });
-var useTableContext = function useTableContext() {
+const useTableContext = () => {
   return React.useContext(TableContext);
 };
 
-var Cell = React__default["default"].forwardRef(function (props, ref) {
-  var _useTableContext = useTableContext(),
-      size = _useTableContext.size;
+const Cell = React__default["default"].forwardRef((props, ref) => {
+  const {
+    size
+  } = useTableContext();
   return React__default["default"].createElement(StyledCell, _extends$3({
     ref: ref,
     size: size
@@ -575,9 +405,10 @@ Cell.propTypes = {
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
 
-var GroupRow = React.forwardRef(function (props, ref) {
-  var _useTableContext = useTableContext(),
-      size = _useTableContext.size;
+const GroupRow = React.forwardRef((props, ref) => {
+  const {
+    size
+  } = useTableContext();
   return React__default["default"].createElement(StyledGroupRow, _extends$3({
     ref: ref,
     size: size
@@ -585,16 +416,15 @@ var GroupRow = React.forwardRef(function (props, ref) {
 });
 GroupRow.displayName = 'GroupRow';
 
-var Head = React.forwardRef(function (props, ref) {
-  return React__default["default"].createElement(StyledHead, _extends$3({
-    ref: ref
-  }, props));
-});
+const Head = React.forwardRef((props, ref) => React__default["default"].createElement(StyledHead, _extends$3({
+  ref: ref
+}, props)));
 Head.displayName = 'Head';
 
-var HeaderCell = React.forwardRef(function (props, ref) {
-  var _useTableContext = useTableContext(),
-      size = _useTableContext.size;
+const HeaderCell = React.forwardRef((props, ref) => {
+  const {
+    size
+  } = useTableContext();
   return React__default["default"].createElement(StyledHeaderCell, _extends$3({
     ref: ref,
     size: size
@@ -603,9 +433,10 @@ var HeaderCell = React.forwardRef(function (props, ref) {
 HeaderCell.displayName = 'HeaderCell';
 HeaderCell.propTypes = Cell.propTypes;
 
-var HeaderRow = React__default["default"].forwardRef(function (props, ref) {
-  var _useTableContext = useTableContext(),
-      size = _useTableContext.size;
+const HeaderRow = React__default["default"].forwardRef((props, ref) => {
+  const {
+    size
+  } = useTableContext();
   return React__default["default"].createElement(StyledHeaderRow, _extends$3({
     ref: ref,
     size: size
@@ -624,7 +455,8 @@ var SvgOverflowStroke = function SvgOverflowStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("circle", {
@@ -642,23 +474,22 @@ var SvgOverflowStroke = function SvgOverflowStroke(props) {
   }))));
 };
 
-var _excluded$2 = ["onFocus", "onBlur", "isFocused"];
-var OverflowButton = React.forwardRef(function (_ref, ref) {
-  var onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      focused = _ref.isFocused,
-      other = _objectWithoutProperties(_ref, _excluded$2);
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var _useTableContext = useTableContext(),
-      size = _useTableContext.size;
+const OverflowButton = React.forwardRef((_ref, ref) => {
+  let {
+    onFocus,
+    onBlur,
+    isFocused: focused,
+    ...other
+  } = _ref;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const {
+    size
+  } = useTableContext();
   return React__default["default"].createElement(StyledOverflowButton, _extends$3({
-    onFocus: containerUtilities.composeEventHandlers(onFocus, function () {
+    onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
       setIsFocused(true);
     }),
-    onBlur: containerUtilities.composeEventHandlers(onBlur, function () {
+    onBlur: containerUtilities.composeEventHandlers(onBlur, () => {
       setIsFocused(false);
     }),
     size: size,
@@ -673,20 +504,19 @@ OverflowButton.propTypes = {
   isFocused: PropTypes__default["default"].bool
 };
 
-var _excluded$1 = ["onFocus", "onBlur", "isFocused"];
-var Row = React.forwardRef(function (_ref, ref) {
-  var onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      focused = _ref.isFocused,
-      otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-  var _useTableContext = useTableContext(),
-      size = _useTableContext.size,
-      isReadOnly = _useTableContext.isReadOnly;
-  var computedFocused = React.useMemo(function () {
+const Row = React.forwardRef((_ref, ref) => {
+  let {
+    onFocus,
+    onBlur,
+    isFocused: focused,
+    ...otherProps
+  } = _ref;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const {
+    size,
+    isReadOnly
+  } = useTableContext();
+  const computedFocused = React.useMemo(() => {
     if (typeof focused !== 'undefined') {
       return focused;
     }
@@ -695,16 +525,12 @@ var Row = React.forwardRef(function (_ref, ref) {
     }
     return isFocused;
   }, [focused, isFocused, isReadOnly]);
-  var onFocusCallback = React.useMemo(function () {
-    return containerUtilities.composeEventHandlers(onFocus, function () {
-      setIsFocused(true);
-    });
-  }, [onFocus, setIsFocused]);
-  var onBlurCallback = React.useMemo(function () {
-    return containerUtilities.composeEventHandlers(onBlur, function () {
-      setIsFocused(false);
-    });
-  }, [onBlur, setIsFocused]);
+  const onFocusCallback = React.useMemo(() => containerUtilities.composeEventHandlers(onFocus, () => {
+    setIsFocused(true);
+  }), [onFocus, setIsFocused]);
+  const onBlurCallback = React.useMemo(() => containerUtilities.composeEventHandlers(onBlur, () => {
+    setIsFocused(false);
+  }), [onBlur, setIsFocused]);
   return React__default["default"].createElement(StyledRow, _extends$3({
     onFocus: onFocusCallback,
     onBlur: onBlurCallback,
@@ -733,7 +559,8 @@ var SvgSortStroke = function SvgSortStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -753,7 +580,8 @@ var SvgSortFill = function SvgSortFill(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
@@ -762,23 +590,24 @@ var SvgSortFill = function SvgSortFill(props) {
   })));
 };
 
-var SIZE = ['small', 'medium', 'large'];
-var SORT = ['asc', 'desc'];
+const SIZE = ['small', 'medium', 'large'];
+const SORT = ['asc', 'desc'];
 
-var _excluded = ["sort", "cellProps", "width", "children"];
-var SortableCell = React.forwardRef(function (_ref, ref) {
-  var sort = _ref.sort,
-      cellProps = _ref.cellProps,
-      width = _ref.width,
-      children = _ref.children,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-  var ariaSortValue = 'none';
+const SortableCell = React.forwardRef((_ref, ref) => {
+  let {
+    sort,
+    cellProps,
+    width,
+    children,
+    ...otherProps
+  } = _ref;
+  let ariaSortValue = 'none';
   if (sort === 'asc') {
     ariaSortValue = 'ascending';
   } else if (sort === 'desc') {
     ariaSortValue = 'descending';
   }
-  var SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
+  const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
   return React__default["default"].createElement(StyledHeaderCell, _extends$3({
     "aria-sort": ariaSortValue,
     width: width
@@ -794,13 +623,11 @@ SortableCell.propTypes = {
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
 
-var Table = React__default["default"].forwardRef(function (props, ref) {
-  var tableContextValue = React.useMemo(function () {
-    return {
-      size: props.size,
-      isReadOnly: props.isReadOnly
-    };
-  }, [props.size, props.isReadOnly]);
+const Table = React__default["default"].forwardRef((props, ref) => {
+  const tableContextValue = React.useMemo(() => ({
+    size: props.size,
+    isReadOnly: props.isReadOnly
+  }), [props.size, props.isReadOnly]);
   return React__default["default"].createElement(TableContext.Provider, {
     value: tableContextValue
   }, React__default["default"].createElement(StyledTable, _extends$3({