@zendeskgarden/react-tables 9.0.0-next.4 → 9.0.0-next.6

package/dist/index.cjs.js

@@ -56,7 +56,7 @@ function _extends$3() {
 const COMPONENT_ID$b = 'tables.body';
 const StyledBody = styled__default.default.tbody.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -68,7 +68,7 @@ StyledBody.defaultProps = {
 const COMPONENT_ID$a = 'tables.caption';
 const StyledCaption = styled__default.default.caption.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -83,11 +83,11 @@ const getLineHeight = props => {
 };
 const StyledTable = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).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:", ";", ";"], props => getLineHeight(props), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, 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 => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTable.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -126,7 +126,7 @@ const sizeStyling = props => {
 };
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-8hpncx-0"
@@ -138,17 +138,17 @@ StyledCell.defaultProps = {
 const COMPONENT_ID$7 = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const colorStyles$1 = props => {
-  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);
+  const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
+  const hoverForegroundColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
+  const activeBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
+  const activeForegroundColor = reactTheming.getColorV8('neutralHue', 800, props.theme);
   let foregroundColor;
   if (props.isHovered) {
     foregroundColor = hoverForegroundColor;
   } else if (props.isActive) {
     foregroundColor = activeForegroundColor;
   } else {
-    foregroundColor = reactTheming.getColor('neutralHue', 600, props.theme);
+    foregroundColor = reactTheming.getColorV8('neutralHue', 600, props.theme);
   }
   return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
     theme: props.theme,
@@ -157,7 +157,7 @@ const colorStyles$1 = props => {
 };
 const StyledOverflowButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.6',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
@@ -178,17 +178,17 @@ const COMPONENT_ID$6 = '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;"], props => `${props.theme.borders.sm} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => 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.getColorV8('neutralHue', 200, props.theme)}`, props => props.isStriped && reactTheming.getColorV8('neutralHue', 100, props.theme));
 StyledBaseRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 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);
+  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${reactTheming.getColorV8('primaryHue', 600, props.theme)}`;
+  const hoveredBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
+  const hoveredBorderColor = reactTheming.getColorV8('primaryHue', 200, props.theme);
+  const selectedBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
+  const selectedBorderColor = reactTheming.getColorV8('primaryHue', 300, props.theme);
+  const hoveredSelectedBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.28);
   let backgroundColor = undefined;
   let borderColor = undefined;
   let hoverBorderBottomColor = undefined;
@@ -213,7 +213,7 @@ const colorStyles = props => {
 };
 const StyledRow = styled__default.default(StyledBaseRow).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.6',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
@@ -234,23 +234,23 @@ const getHeaderRowHeight = props => {
 };
 const StyledHeaderRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).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);}", ";"], 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$5, props));
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => reactTheming.getColorV8('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => polished.math(`${getHeaderRowHeight(props)} / 2`), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledHeaderRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$4 = 'tables.head';
 const stickyStyles = props => {
-  const borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
-  return styled.css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, props.theme.colors.background, StyledHeaderRow);
+  const borderColor = reactTheming.getColorV8('neutralHue', 300, props.theme);
+  return styled.css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, reactTheming.getColorV8('background', 600 , props.theme), StyledHeaderRow);
 };
 const StyledHead = styled__default.default.thead.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
@@ -267,11 +267,11 @@ const sizeStyles$1 = props => {
 };
 const StyledGroupRow = styled__default.default(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
-})(["background-color:", ";", " ", ";"], props => reactTheming.getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["background-color:", ";", " ", ";"], props => reactTheming.getColorV8('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledGroupRow.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -300,30 +300,30 @@ StyledSortableFillIconWrapper.defaultProps = {
 };
 const StyledSortableButton = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.6',
   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:", ";color:", ";fill:", ";}&:hover,", "{text-decoration:none;color:", ";", ";", " ", "}", " ", ";"], props => props.theme.borderRadii.sm, 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);
+    return reactTheming.getColorV8('neutralHue', 600, props.theme);
   } else if (props.sort === 'desc') {
-    return reactTheming.getColor('neutralHue', 400, props.theme);
+    return reactTheming.getColorV8('neutralHue', 400, props.theme);
   }
   return undefined;
 }, props => {
   if (props.sort === 'asc') {
-    return reactTheming.getColor('neutralHue', 400, props.theme);
+    return reactTheming.getColorV8('neutralHue', 400, props.theme);
   } else if (props.sort === 'desc') {
-    return reactTheming.getColor('neutralHue', 600, props.theme);
+    return reactTheming.getColorV8('neutralHue', 600, props.theme);
   }
   return undefined;
-}, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
+}, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.getColorV8('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)};
+        color: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
+        fill: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
       }
 
       ${StyledSortableStrokeIconWrapper} {
@@ -331,13 +331,13 @@ const StyledSortableButton = styled__default.default.button.attrs({
       }
     `, props => props.sort === 'asc' && `
       ${StyledSortableFillIconWrapper} {
-        color: ${reactTheming.getColor('primaryHue', 600, props.theme)};
-        fill: ${reactTheming.getColor('primaryHue', 600, props.theme, 0.25)};
+        color: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
+        fill: ${reactTheming.getColorV8('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)};
+        color: ${reactTheming.getColorV8('primaryHue', 600, props.theme, 0.25)};
+        fill: ${reactTheming.getColorV8('primaryHue', 600, props.theme)};
       }
     `, props => reactTheming.focusStyles({
   theme: props.theme
@@ -358,7 +358,7 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled__default.default(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -378,7 +378,7 @@ StyledHeaderCell.defaultProps = {
 const COMPONENT_ID = 'tables.hidden_cell';
 const StyledHiddenCell = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"

package/dist/index.esm.js

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import React__default, { forwardRef, useContext, useState, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming';
 import { math, hideVisually } from 'polished';
 import PropTypes from 'prop-types';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
@@ -31,7 +31,7 @@ function _extends$3() {
 const COMPONENT_ID$b = 'tables.body';
 const StyledBody = styled.tbody.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
@@ -43,7 +43,7 @@ StyledBody.defaultProps = {
 const COMPONENT_ID$a = 'tables.caption';
 const StyledCaption = styled.caption.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
@@ -58,11 +58,11 @@ const getLineHeight = props => {
 };
 const StyledTable = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).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:", ";", ";"], props => getLineHeight(props), props => props.theme.colors.foreground, props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$9, 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 => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTable.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -101,7 +101,7 @@ const sizeStyling = props => {
 };
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-8hpncx-0"
@@ -113,17 +113,17 @@ StyledCell.defaultProps = {
 const COMPONENT_ID$7 = 'tables.overflow_button';
 const OVERFLOW_BUTTON_SIZE = '2em';
 const colorStyles$1 = props => {
-  const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
-  const hoverForegroundColor = getColor('neutralHue', 700, props.theme);
-  const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
-  const activeForegroundColor = getColor('neutralHue', 800, props.theme);
+  const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
+  const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
+  const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
+  const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
   let foregroundColor;
   if (props.isHovered) {
     foregroundColor = hoverForegroundColor;
   } else if (props.isActive) {
     foregroundColor = activeForegroundColor;
   } else {
-    foregroundColor = getColor('neutralHue', 600, props.theme);
+    foregroundColor = getColorV8('neutralHue', 600, props.theme);
   }
   return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
     theme: props.theme,
@@ -132,7 +132,7 @@ const colorStyles$1 = props => {
 };
 const StyledOverflowButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.6',
   type: 'button'
 }).withConfig({
   displayName: "StyledOverflowButton",
@@ -153,17 +153,17 @@ const COMPONENT_ID$6 = 'tables.row';
 const StyledBaseRow = styled.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;"], props => `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => props.isStriped && 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} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.isStriped && getColorV8('neutralHue', 100, props.theme));
 StyledBaseRow.defaultProps = {
   theme: DEFAULT_THEME
 };
 const colorStyles = props => {
-  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${getColor('primaryHue', 600, props.theme)}`;
-  const hoveredBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
-  const hoveredBorderColor = getColor('primaryHue', 200, props.theme);
-  const selectedBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
-  const selectedBorderColor = getColor('primaryHue', 300, props.theme);
-  const hoveredSelectedBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28);
+  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${getColorV8('primaryHue', 600, props.theme)}`;
+  const hoveredBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
+  const hoveredBorderColor = getColorV8('primaryHue', 200, props.theme);
+  const selectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
+  const selectedBorderColor = getColorV8('primaryHue', 300, props.theme);
+  const hoveredSelectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
   let backgroundColor = undefined;
   let borderColor = undefined;
   let hoverBorderBottomColor = undefined;
@@ -188,7 +188,7 @@ const colorStyles = props => {
 };
 const StyledRow = styled(StyledBaseRow).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.6',
   tabIndex: props.isReadOnly ? undefined : -1
 })).withConfig({
   displayName: "StyledRow",
@@ -209,23 +209,23 @@ const getHeaderRowHeight = props => {
 };
 const StyledHeaderRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).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);}", ";"], props => getColor('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["border-bottom-color:", ";height:", ";vertical-align:bottom;font-weight:", ";", "{opacity:1;margin-top:0;margin-bottom:calc(", " - 1em);}", ";"], props => getColorV8('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledHeaderRow.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 const COMPONENT_ID$4 = 'tables.head';
 const stickyStyles = props => {
-  const borderColor = getColor('neutralHue', 300, props.theme);
-  return css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, props.theme.colors.background, StyledHeaderRow);
+  const borderColor = getColorV8('neutralHue', 300, props.theme);
+  return css(["position:sticky;top:0;z-index:1;box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], props.theme.borderWidths.sm, borderColor, getColorV8('background', 600 , props.theme), StyledHeaderRow);
 };
 const StyledHead = styled.thead.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
@@ -242,11 +242,11 @@ const sizeStyles$1 = props => {
 };
 const StyledGroupRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
-})(["background-color:", ";", " ", ";"], props => getColor('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["background-color:", ";", " ", ";"], props => getColorV8('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledGroupRow.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -275,30 +275,30 @@ StyledSortableFillIconWrapper.defaultProps = {
 };
 const StyledSortableButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.6',
   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:", ";color:", ";fill:", ";}&:hover,", "{text-decoration:none;color:", ";", ";", " ", "}", " ", ";"], 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, props => {
   if (props.sort === 'asc') {
-    return getColor('neutralHue', 600, props.theme);
+    return getColorV8('neutralHue', 600, props.theme);
   } else if (props.sort === 'desc') {
-    return getColor('neutralHue', 400, props.theme);
+    return getColorV8('neutralHue', 400, props.theme);
   }
   return undefined;
 }, props => {
   if (props.sort === 'asc') {
-    return getColor('neutralHue', 400, props.theme);
+    return getColorV8('neutralHue', 400, props.theme);
   } else if (props.sort === 'desc') {
-    return getColor('neutralHue', 600, props.theme);
+    return getColorV8('neutralHue', 600, props.theme);
   }
   return undefined;
-}, SELECTOR_FOCUS_VISIBLE, props => getColor('primaryHue', 600, props.theme), props => props.sort === undefined && `
+}, SELECTOR_FOCUS_VISIBLE, props => getColorV8('primaryHue', 600, props.theme), props => props.sort === undefined && `
       ${StyledSortableFillIconWrapper} {
         opacity: 1;
-        color: ${getColor('primaryHue', 600, props.theme)};
-        fill: ${getColor('primaryHue', 600, props.theme)};
+        color: ${getColorV8('primaryHue', 600, props.theme)};
+        fill: ${getColorV8('primaryHue', 600, props.theme)};
       }
 
       ${StyledSortableStrokeIconWrapper} {
@@ -306,13 +306,13 @@ const StyledSortableButton = styled.button.attrs({
       }
     `, props => props.sort === 'asc' && `
       ${StyledSortableFillIconWrapper} {
-        color: ${getColor('primaryHue', 600, props.theme)};
-        fill: ${getColor('primaryHue', 600, props.theme, 0.25)};
+        color: ${getColorV8('primaryHue', 600, props.theme)};
+        fill: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
       }
     `, props => props.sort === 'desc' && `
       ${StyledSortableFillIconWrapper} {
-        color: ${getColor('primaryHue', 600, props.theme, 0.25)};
-        fill: ${getColor('primaryHue', 600, props.theme)};
+        color: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
+        fill: ${getColorV8('primaryHue', 600, props.theme)};
       }
     `, props => focusStyles({
   theme: props.theme
@@ -333,7 +333,7 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
@@ -353,7 +353,7 @@ StyledHeaderCell.defaultProps = {
 const COMPONENT_ID = 'tables.hidden_cell';
 const StyledHiddenCell = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.6'
 }).withConfig({
   displayName: "StyledHiddenCell",
   componentId: "sc-1x454xw-0"

package/dist/typings/elements/Body.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Table.Body` instead
+ *
  * @extends HTMLAttributes<HTMLTableSectionElement>
  */
 export declare const Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/typings/elements/Caption.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Table.Caption` instead
+ *
  * @extends HTMLAttributes<HTMLTableCaptionElement>
  */
 export declare const Caption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;

package/dist/typings/elements/Cell.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ICellProps } from '../types';
 /**
+ * @deprecated use `Table.Cell` instead
+ *
  * @extends TdHTMLAttributes<HTMLTableCellElement>
  */
 export declare const Cell: React.ForwardRefExoticComponent<ICellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/typings/elements/GroupRow.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Table.GroupRow` instead
+ *
  * @extends HTMLAttributes<HTMLTableRowElement>
  */
 export declare const GroupRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/typings/elements/Head.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeadProps } from '../types';
 /**
+ * @deprecated use `Table.Head` instead
+ *
  * @extends HTMLAttributes<HTMLTableSectionElement>
  */
 export declare const Head: React.ForwardRefExoticComponent<IHeadProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/typings/elements/HeaderCell.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IHeaderCellProps } from '../types';
 /**
+ * @deprecated use `Table.HeaderCell` instead
+ *
  * @extends ThHTMLAttributes<HTMLTableCellElement>
  */
 export declare const HeaderCell: React.ForwardRefExoticComponent<IHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/typings/elements/HeaderRow.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Table.HeaderRow` instead
+ *
  * @extends HTMLAttributes<HTMLTableRowElement>
  */
 export declare const HeaderRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/typings/elements/OverflowButton.d.ts

@@ -14,6 +14,8 @@ export interface IOverflowButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
     isFocused?: boolean;
 }
 /**
+ * @deprecated use `Table.OverflowButton` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const OverflowButton: React.ForwardRefExoticComponent<IOverflowButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/Row.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { IRowProps } from '../types';
 /**
+ * @deprecated use `Table.Row` instead
+ *
  * @extends HTMLAttributes<HTMLTableRowElement>
  */
 export declare const Row: React.ForwardRefExoticComponent<IRowProps & React.RefAttributes<HTMLTableRowElement>>;

package/dist/typings/elements/SortableCell.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ISortableCellProps } from '../types';
 /**
+ * @deprecated use `Table.SortableCell` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const SortableCell: React.ForwardRefExoticComponent<ISortableCellProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/index.d.ts

@@ -4,25 +4,15 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/** @deprecated use `Table.Body` intead */
 export { Body } from './elements/Body';
-/** @deprecated use `Table.Caption` intead */
 export { Caption } from './elements/Caption';
-/** @deprecated use `Table.Cell` intead */
 export { Cell } from './elements/Cell';
-/** @deprecated use `Table.GroupRow` intead */
 export { GroupRow } from './elements/GroupRow';
-/** @deprecated use `Table.Head` intead */
 export { Head } from './elements/Head';
-/** @deprecated use `Table.HeaderCell` intead */
 export { HeaderCell } from './elements/HeaderCell';
-/** @deprecated use `Table.HeaderRow` intead */
 export { HeaderRow } from './elements/HeaderRow';
-/** @deprecated use `Table.OverflowButton` intead */
 export { OverflowButton } from './elements/OverflowButton';
-/** @deprecated use `Table.Row` intead */
 export { Row } from './elements/Row';
-/** @deprecated use `Table.SortableCell` intead */
 export { SortableCell } from './elements/SortableCell';
 export { Table } from './elements/Table';
 export type { ITableProps, IRowProps, ICellProps, IHeadProps, IHeaderCellProps, ISortableCellProps } from './types';

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

@@ -10,4 +10,4 @@ export declare const StyledHeaderCell: import("styled-components").StyledCompone
     as: string;
     'data-garden-id': string;
     'data-garden-version': string;
-}, "data-garden-id" | "data-garden-version" | "as">;
+}, "as" | "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tables",
-  "version": "9.0.0-next.4",
+  "version": "9.0.0-next.6",
   "description": "Components relating to tables in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -30,12 +30,12 @@
     "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-window": "1.8.8",
-    "@zendeskgarden/react-theming": "^9.0.0-next.4",
+    "@zendeskgarden/react-theming": "^9.0.0-next.6",
     "@zendeskgarden/svg-icons": "7.0.0",
     "react-beautiful-dnd": "13.1.1",
     "react-window": "1.8.10"
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
+  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
 }