@zendeskgarden/react-tables 9.0.0-next.8 → 9.0.0

package/dist/esm/elements/Body.js

@@ -21,6 +21,6 @@ import '../styled/StyledRow.js';
 const Body = forwardRef((props, ref) => React__default.createElement(StyledBody, Object.assign({
   ref: ref
 }, props)));
-Body.displayName = 'Body';
+Body.displayName = 'Table.Body';
 
 export { Body };

package/dist/esm/elements/Caption.js

@@ -21,6 +21,6 @@ import '../styled/StyledRow.js';
 const Caption = forwardRef((props, ref) => React__default.createElement(StyledCaption, Object.assign({
   ref: ref
 }, props)));
-Caption.displayName = 'Caption';
+Caption.displayName = 'Table.Caption';
 
 export { Caption };

package/dist/esm/elements/Cell.js

@@ -23,6 +23,9 @@ import { useTableContext } from '../utils/useTableContext.js';
 const Cell = React__default.forwardRef((_ref, ref) => {
   let {
     hidden,
+    isMinimum,
+    isTruncated,
+    hasOverflow,
     ...props
   } = _ref;
   const {
@@ -30,10 +33,13 @@ const Cell = React__default.forwardRef((_ref, ref) => {
   } = useTableContext();
   return React__default.createElement(StyledCell, Object.assign({
     ref: ref,
-    size: size
+    $size: size,
+    $isMinimum: isMinimum,
+    $isTruncated: isTruncated,
+    $hasOverflow: hasOverflow
   }, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
 });
-Cell.displayName = 'Cell';
+Cell.displayName = 'Table.Cell';
 Cell.propTypes = {
   isMinimum: PropTypes.bool,
   isTruncated: PropTypes.bool,

package/dist/esm/elements/GroupRow.js

@@ -25,9 +25,9 @@ const GroupRow = forwardRef((props, ref) => {
   } = useTableContext();
   return React__default.createElement(StyledGroupRow, Object.assign({
     ref: ref,
-    size: size
+    $size: size
   }, props));
 });
-GroupRow.displayName = 'GroupRow';
+GroupRow.displayName = 'Table.GroupRow';
 
 export { GroupRow };

package/dist/esm/elements/Head.js

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

package/dist/esm/elements/HeaderCell.js

@@ -23,6 +23,9 @@ import { Cell } from './Cell.js';
 const HeaderCell = forwardRef((_ref, ref) => {
   let {
     hidden,
+    isMinimum,
+    isTruncated,
+    hasOverflow,
     ...props
   } = _ref;
   const {
@@ -30,10 +33,13 @@ const HeaderCell = forwardRef((_ref, ref) => {
   } = useTableContext();
   return React__default.createElement(StyledHeaderCell, Object.assign({
     ref: ref,
-    size: size
+    $size: size,
+    $isMinimum: isMinimum,
+    $isTruncated: isTruncated,
+    $hasOverflow: hasOverflow
   }, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
 });
-HeaderCell.displayName = 'HeaderCell';
+HeaderCell.displayName = 'Table.HeaderCell';
 HeaderCell.propTypes = Cell.propTypes;
 
 export { HeaderCell };

package/dist/esm/elements/HeaderRow.js

@@ -25,9 +25,9 @@ const HeaderRow = React__default.forwardRef((props, ref) => {
   } = useTableContext();
   return React__default.createElement(StyledHeaderRow, Object.assign({
     ref: ref,
-    size: size
+    $size: size
   }, props));
 });
-HeaderRow.displayName = 'HeaderRow';
+HeaderRow.displayName = 'Table.HeaderRow';
 
 export { HeaderRow };

package/dist/esm/elements/OverflowButton.js

@@ -4,10 +4,8 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import React__default, { forwardRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { composeEventHandlers } from '@zendeskgarden/container-utilities';
-import SvgOverflowStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/overflow-stroke.svg.js';
+import React__default, { forwardRef } from 'react';
+import SvgOverflowVerticalStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg.js';
 import '../styled/StyledBody.js';
 import '../styled/StyledCaption.js';
 import '../styled/StyledHeaderRow.js';
@@ -18,38 +16,22 @@ import '../styled/StyledTable.js';
 import '../styled/StyledHeaderCell.js';
 import '../styled/StyledHiddenCell.js';
 import '../styled/StyledSortableButton.js';
-import { StyledOverflowButton, StyledOverflowButtonIconWrapper } from '../styled/StyledOverflowButton.js';
+import { StyledOverflowButton } from '../styled/StyledOverflowButton.js';
 import '../styled/StyledRow.js';
 import { useTableContext } from '../utils/useTableContext.js';
 
-const OverflowButton = forwardRef((_ref, ref) => {
-  let {
-    onFocus,
-    onBlur,
-    isFocused: focused,
-    ...other
-  } = _ref;
-  const [isFocused, setIsFocused] = useState(false);
+const OverflowButton = forwardRef((props, ref) => {
   const {
     size
   } = useTableContext();
   return React__default.createElement(StyledOverflowButton, Object.assign({
-    onFocus: composeEventHandlers(onFocus, () => {
-      setIsFocused(true);
-    }),
-    onBlur: composeEventHandlers(onBlur, () => {
-      setIsFocused(false);
-    }),
-    size: size,
-    isFocused: typeof focused === 'undefined' ? isFocused : focused,
+    type: "button",
+    $size: size,
     ref: ref
-  }, other), React__default.createElement(StyledOverflowButtonIconWrapper, null, React__default.createElement(SvgOverflowStroke, null)));
+  }, props, {
+    focusInset: true
+  }), React__default.createElement(SvgOverflowVerticalStroke, null));
 });
-OverflowButton.displayName = 'OverflowButton';
-OverflowButton.propTypes = {
-  isHovered: PropTypes.bool,
-  isActive: PropTypes.bool,
-  isFocused: PropTypes.bool
-};
+OverflowButton.displayName = 'Table.OverflowButton';
 
 export { OverflowButton };

package/dist/esm/elements/Row.js

@@ -25,6 +25,9 @@ const Row = forwardRef((_ref, ref) => {
   let {
     onFocus,
     onBlur,
+    isSelected,
+    isStriped,
+    isHovered,
     isFocused: focused,
     ...otherProps
   } = _ref;
@@ -51,13 +54,18 @@ const Row = forwardRef((_ref, ref) => {
   return React__default.createElement(StyledRow, Object.assign({
     onFocus: onFocusCallback,
     onBlur: onBlurCallback,
-    size: size,
-    isReadOnly: isReadOnly,
-    isFocused: computedFocused,
-    ref: ref
-  }, otherProps));
+    ref: ref,
+    $size: size,
+    $isReadOnly: isReadOnly,
+    $isFocused: computedFocused,
+    $isHovered: isHovered,
+    $isStriped: isStriped,
+    $isSelected: isSelected
+  }, otherProps, {
+    tabIndex: isReadOnly ? undefined : -1
+  }));
 });
-Row.displayName = 'Row';
+Row.displayName = 'Table.Row';
 Row.propTypes = {
   isStriped: PropTypes.bool,
   isFocused: PropTypes.bool,

package/dist/esm/elements/SortableCell.js

@@ -25,11 +25,16 @@ import '../styled/StyledRow.js';
 const SortableCell = forwardRef((_ref, ref) => {
   let {
     sort,
-    cellProps,
+    cellProps = {},
     width,
     children,
-    ...otherProps
+    ...sortableButtonProps
   } = _ref;
+  const {
+    isMinimum,
+    isTruncated,
+    hasOverflow
+  } = cellProps;
   let ariaSortValue = 'none';
   if (sort === 'asc') {
     ariaSortValue = 'ascending';
@@ -39,13 +44,16 @@ const SortableCell = forwardRef((_ref, ref) => {
   const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
   return React__default.createElement(StyledHeaderCell, Object.assign({
     "aria-sort": ariaSortValue,
-    width: width
+    width: width,
+    $isMinimum: isMinimum,
+    $isTruncated: isTruncated,
+    $hasOverflow: hasOverflow
   }, cellProps), React__default.createElement(StyledSortableButton, Object.assign({
-    sort: sort,
+    $sort: sort,
     ref: ref
-  }, otherProps), children, React__default.createElement(StyledSortableStrokeIconWrapper, null, React__default.createElement(SortIcon, null)), React__default.createElement(StyledSortableFillIconWrapper, null, React__default.createElement(SvgSortFill, null))));
+  }, sortableButtonProps), children, React__default.createElement(StyledSortableStrokeIconWrapper, null, React__default.createElement(SortIcon, null)), React__default.createElement(StyledSortableFillIconWrapper, null, React__default.createElement(SvgSortFill, null))));
 });
-SortableCell.displayName = 'SortableCell';
+SortableCell.displayName = 'Table.SortableCell';
 SortableCell.propTypes = {
   sort: PropTypes.oneOf(SORT),
   cellProps: PropTypes.any,

package/dist/esm/elements/Table.js

@@ -31,11 +31,16 @@ import { OverflowButton } from './OverflowButton.js';
 import { Row } from './Row.js';
 import { SortableCell } from './SortableCell.js';
 
-const TableComponent = React__default.forwardRef((props, ref) => {
+const TableComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    isReadOnly,
+    size,
+    ...props
+  } = _ref;
   const tableContextValue = useMemo(() => ({
-    size: props.size,
-    isReadOnly: props.isReadOnly
-  }), [props.size, props.isReadOnly]);
+    size: size,
+    isReadOnly: isReadOnly
+  }), [size, isReadOnly]);
   return React__default.createElement(TableContext.Provider, {
     value: tableContextValue
   }, React__default.createElement(StyledTable, Object.assign({

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

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path, _path2;
-function _extends() { _extends = 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.apply(this, arguments); }
+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 SvgSortFill = function SvgSortFill(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = 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.apply(this, arguments); }
+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 SvgSortStroke = function SvgSortStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+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 SvgOverflowVerticalStroke = function SvgOverflowVerticalStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    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"
+  })));
+};
+
+export { SvgOverflowVerticalStroke as default };

package/dist/esm/styled/StyledBaseRow.js

@@ -0,0 +1,43 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { getColor } from '@zendeskgarden/react-theming';
+
+const sizeStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["border-bottom:", ";vertical-align:top;box-sizing:border-box;"], theme.borders.sm);
+};
+const colorStyles = _ref2 => {
+  let {
+    theme,
+    $isStriped
+  } = _ref2;
+  const borderColor = getColor({
+    variable: 'border.subtle',
+    theme
+  });
+  const backgroundColor = getColor({
+    variable: 'background.subtle',
+    transparency: theme.opacity[100],
+    light: {
+      offset: 300
+    },
+    dark: {
+      offset: -600
+    },
+    theme
+  });
+  return css(["border-bottom-color:", ";background-color:", ";"], borderColor, $isStriped && backgroundColor);
+};
+const StyledBaseRow = styled.tr.withConfig({
+  displayName: "StyledBaseRow",
+  componentId: "sc-1t4zqg4-0"
+})(["display:table-row;transition:background-color 0.1s ease-in-out;", " ", ""], sizeStyles, colorStyles);
+
+export { StyledBaseRow };

package/dist/esm/styled/StyledBody.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.body';
 const StyledBody = styled.tbody.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14ud6y-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledBody };

package/dist/esm/styled/StyledCaption.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.caption';
 const StyledCaption = styled.caption.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledCaption",
   componentId: "sc-113y327-0"
 })(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCaption.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCaption };

package/dist/esm/styled/StyledCell.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { getLineHeight } from './StyledTable.js';
 import { getRowHeight } from './style-utils.js';
 
@@ -17,7 +17,7 @@ const sizeStyling = props => {
   let padding;
   let width = props.width;
   let height;
-  if (props.hasOverflow) {
+  if (props.$hasOverflow) {
     boxSizing = 'content-box';
     width = '2em';
     height = 'inherit';
@@ -27,7 +27,7 @@ const sizeStyling = props => {
     const paddingHorizontal = `${props.theme.space.base * 3}px`;
     padding = `${paddingVertical} ${paddingHorizontal}`;
   }
-  if (props.isMinimum) {
+  if (props.$isMinimum) {
     boxSizing = 'content-box';
     width = '1em';
   }
@@ -35,13 +35,10 @@ const sizeStyling = props => {
 };
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.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;", ";", ";", ";"], props => sizeStyling(props), props => props.isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCell.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledCell };

package/dist/esm/styled/StyledGroupRow.js

@@ -6,12 +6,28 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { StyledBaseRow } from './StyledRow.js';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+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;
+  return css(["background-color:", ";"], getColor({
+    variable: 'background.subtle',
+    transparency: theme.opacity[100],
+    light: {
+      offset: 300
+    },
+    dark: {
+      offset: -600
+    },
+    theme
+  }));
+};
 const sizeStyles = props => {
   const height = `${props.theme.space.base * 8}px`;
   const lineHeight = getLineHeight(props);
@@ -19,13 +35,10 @@ const sizeStyles = props => {
 };
 const StyledGroupRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledGroupRow",
   componentId: "sc-mpd0r8-0"
-})(["background-color:", ";", " ", ";"], props => getColorV8('neutralHue', 100, props.theme), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledGroupRow.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledGroupRow };

package/dist/esm/styled/StyledHead.js

@@ -5,23 +5,33 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledHeaderRow } from './StyledHeaderRow.js';
 
 const COMPONENT_ID = 'tables.head';
-const stickyStyles = props => {
-  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 colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    variable: 'border.default',
+    theme
+  });
+  const backgroundColor = getColor({
+    variable: 'background.default',
+    theme
+  });
+  return css(["box-shadow:inset 0 -", " 0 ", ";background-color:", ";& > ", ":last-child{border-bottom-color:transparent;}"], theme.borderWidths.sm, borderColor, backgroundColor, StyledHeaderRow);
+};
+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.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledHead",
   componentId: "sc-spf23a-0"
-})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHead.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledHead };

package/dist/esm/styled/StyledHeaderCell.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledCell } from './StyledCell.js';
 import { StyledSortableButton } from './StyledSortableButton.js';
 import { getLineHeight } from './StyledTable.js';
@@ -16,7 +16,7 @@ const COMPONENT_ID = 'tables.header_cell';
 const truncatedStyling = css(["", "{max-width:100%;overflow:hidden;text-overflow:ellipsis;}"], StyledSortableButton);
 const sizeStyles = props => {
   let paddingVertical = undefined;
-  if (!props.hasOverflow) {
+  if (!props.$hasOverflow) {
     paddingVertical = math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
   }
   return css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
@@ -24,21 +24,18 @@ const sizeStyles = props => {
 const StyledHeaderCell = styled(StyledCell).attrs({
   as: 'th',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledHeaderCell",
   componentId: "sc-fzagoe-0"
 })(["text-align:", ";font-weight:inherit;", " ", " ", ";"], props => {
-  if (!props.hasOverflow) {
+  if (!props.$hasOverflow) {
     if (props.theme.rtl) {
       return 'right';
     }
     return 'left';
   }
   return undefined;
-}, props => sizeStyles(props), props => props.isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHeaderCell.defaultProps = {
-  theme: DEFAULT_THEME
-};
+}, props => sizeStyles(props), props => props.$isTruncated && truncatedStyling, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledHeaderCell };

package/dist/esm/styled/StyledHeaderRow.js

@@ -4,30 +4,40 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { StyledBaseRow } from './StyledRow.js';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { StyledBaseRow } from './StyledBaseRow.js';
 import { StyledOverflowButton } from './StyledOverflowButton.js';
 
 const COMPONENT_ID = 'tables.header_row';
 const getHeaderRowHeight = props => {
-  if (props.size === 'large') {
+  if (props.$size === 'large') {
     return `${props.theme.space.base * 18}px`;
-  } else if (props.size === 'small') {
+  } else if (props.$size === 'small') {
     return `${props.theme.space.base * 10}px`;
   }
   return `${props.theme.space.base * 12}px`;
 };
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["border-bottom-color:", ";"], getColor({
+    variable: 'border.default',
+    theme
+  }));
+};
+const sizeStyles = 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.0.0-next.8'
+  'data-garden-version': '9.0.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);}", ";"], props => getColorV8('neutralHue', 300, props.theme), getHeaderRowHeight, props => props.theme.fontWeights.semibold, StyledOverflowButton, props => math(`${getHeaderRowHeight(props)} / 2`), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHeaderRow.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles, colorStyles, StyledOverflowButton, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledHeaderRow };