@zendeskgarden/react-tables 9.0.0-next.2 → 9.0.0-next.21

package/dist/esm/styled/StyledBaseRow.js

@@ -0,0 +1,46 @@
+/**
+* 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 { DEFAULT_THEME, 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);
+StyledBaseRow.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBaseRow };

package/dist/esm/styled/StyledBody.js

@@ -0,0 +1,22 @@
+/**
+* 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 from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.21'
+}).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

@@ -0,0 +1,22 @@
+/**
+* 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 from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.21'
+}).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

@@ -0,0 +1,47 @@
+/**
+* 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 { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight } from './StyledTable.js';
+import { getRowHeight } from './style-utils.js';
+
+const COMPONENT_ID = 'tables.cell';
+const truncatedStyling = css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const 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 ${props.theme.space.base}px` : `0 ${props.theme.space.base}px 0 0`;
+  } else {
+    const paddingVertical = math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
+    const paddingHorizontal = `${props.theme.space.base * 3}px`;
+    padding = `${paddingVertical} ${paddingHorizontal}`;
+  }
+  if (props.$isMinimum) {
+    boxSizing = 'content-box';
+    width = '1em';
+  }
+  return css(["box-sizing:", ";padding:", ";width:", ";height:", ";"], boxSizing, padding, width, height);
+};
+const StyledCell = styled.td.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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
+};
+
+export { StyledCell };

package/dist/esm/styled/StyledGroupRow.js

@@ -0,0 +1,47 @@
+/**
+* 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 { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, 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);
+  return css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
+};
+const StyledGroupRow = styled(StyledBaseRow).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledGroupRow",
+  componentId: "sc-mpd0r8-0"
+})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGroupRow.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGroupRow };

package/dist/esm/styled/StyledHead.js

@@ -0,0 +1,40 @@
+/**
+* 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 { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledHeaderRow } from './StyledHeaderRow.js';
+
+const COMPONENT_ID = 'tables.head';
+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.21'
+}).withConfig({
+  displayName: "StyledHead",
+  componentId: "sc-spf23a-0"
+})(["", " ", " ", ";"], props => props.$isSticky && stickyStyles(), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHead.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHead };

package/dist/esm/styled/StyledHeaderCell.js

@@ -0,0 +1,44 @@
+/**
+* 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 { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledCell } from './StyledCell.js';
+import { StyledSortableButton } from './StyledSortableButton.js';
+import { getLineHeight } from './StyledTable.js';
+import { getRowHeight } from './style-utils.js';
+
+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) {
+    paddingVertical = math(`(${getRowHeight(props)} - ${getLineHeight(props)}) / 2`);
+  }
+  return css(["padding-top:", ";padding-bottom:", ";"], paddingVertical, paddingVertical);
+};
+const StyledHeaderCell = styled(StyledCell).attrs({
+  as: 'th',
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledHeaderCell",
+  componentId: "sc-fzagoe-0"
+})(["text-align:", ";font-weight:inherit;", " ", " ", ";"], props => {
+  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
+};
+
+export { StyledHeaderCell };

package/dist/esm/styled/StyledHeaderRow.js

@@ -0,0 +1,46 @@
+/**
+* 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 { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, 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') {
+    return `${props.theme.space.base * 18}px`;
+  } 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.21'
+}).withConfig({
+  displayName: "StyledHeaderRow",
+  componentId: "sc-16ogvdx-0"
+})(["font-weight:", ";", " ", " ", "{opacity:1;}", ";"], props => props.theme.fontWeights.semibold, sizeStyles, colorStyles, StyledOverflowButton, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderRow.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderRow };

package/dist/esm/styled/StyledHiddenCell.js

@@ -0,0 +1,23 @@
+/**
+* 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 from 'styled-components';
+import { hideVisually } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tables.hidden_cell';
+const StyledHiddenCell = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledHiddenCell",
+  componentId: "sc-1x454xw-0"
+})(["", " ", ";"], hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHiddenCell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHiddenCell };

package/dist/esm/styled/StyledOverflowButton.js

@@ -0,0 +1,26 @@
+/**
+* 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 from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getRowHeight } from './style-utils.js';
+import { IconButton } from '@zendeskgarden/react-buttons';
+
+const COMPONENT_ID = 'tables.overflow_button';
+const OVERFLOW_BUTTON_SIZE = '2em';
+const StyledOverflowButton = styled(IconButton).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledOverflowButton",
+  componentId: "sc-1eba2ml-0"
+})(["margin-top:calc(", " - 1em);width:100%;min-width:unset;height:", ";font-size:inherit;", ";"], props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledOverflowButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledOverflowButton };

package/dist/esm/styled/StyledRow.js

@@ -0,0 +1,106 @@
+/**
+* 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 { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledCell } from './StyledCell.js';
+import { StyledBaseRow } from './StyledBaseRow.js';
+import { StyledOverflowButton } from './StyledOverflowButton.js';
+import { getRowHeight } from './style-utils.js';
+
+const COMPONENT_ID = 'tables.row';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isFocused,
+    $isSelected,
+    $isHovered,
+    $isReadOnly
+  } = _ref;
+  const hoveredBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const hoveredBorderColor = getColor({
+    variable: 'border.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const selectedBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const selectedBorderColor = getColor({
+    variable: 'border.primaryEmphasis',
+    light: {
+      offset: -400
+    },
+    dark: {
+      offset: 300
+    },
+    theme
+  });
+  const hoveredSelectedBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[300],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const boxShadowColor = getColor({
+    variable: 'border.primaryEmphasis',
+    theme
+  });
+  const boxShadow = `inset ${theme.rtl ? '-' : ''}${theme.shadowWidths.md} 0 0 0 ${boxShadowColor}`;
+  let backgroundColor = undefined;
+  let borderColor = undefined;
+  let hoverBorderBottomColor = undefined;
+  let hoverBackgroundColor = undefined;
+  if ($isSelected) {
+    if ($isHovered) {
+      backgroundColor = hoveredSelectedBackgroundColor;
+    } else {
+      backgroundColor = selectedBackgroundColor;
+    }
+    borderColor = selectedBorderColor;
+    hoverBorderBottomColor = selectedBorderColor;
+    hoverBackgroundColor = hoveredSelectedBackgroundColor;
+  } else if ($isHovered) {
+    backgroundColor = hoveredBackgroundColor;
+    borderColor = hoveredBorderColor;
+  } else if (!$isReadOnly) {
+    hoverBorderBottomColor = hoveredBorderColor;
+    hoverBackgroundColor = hoveredBackgroundColor;
+  }
+  return 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, $isFocused && boxShadow, boxShadow);
+};
+const sizeStyles = props => {
+  return css(["height:", ";"], getRowHeight(props));
+};
+const StyledRow = styled(StyledBaseRow).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledRow",
+  componentId: "sc-ek66ow-0"
+})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRow.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRow };

package/dist/esm/styled/StyledSortableButton.js

@@ -0,0 +1,104 @@
+/**
+* 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 { math } from 'polished';
+import { DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tables.sortable';
+const StyledBaseIconWrapper = styled.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;"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.iconSizes.sm);
+StyledBaseIconWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledSortableStrokeIconWrapper = styled(StyledBaseIconWrapper).withConfig({
+  displayName: "StyledSortableButton__StyledSortableStrokeIconWrapper",
+  componentId: "sc-2s1dli-1"
+})([""]);
+StyledSortableStrokeIconWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
+  displayName: "StyledSortableButton__StyledSortableFillIconWrapper",
+  componentId: "sc-2s1dli-2"
+})([""]);
+StyledSortableFillIconWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const colorStyles = _ref => {
+  let {
+    theme,
+    $sort
+  } = _ref;
+  const fgInactive = getColor({
+    variable: 'foreground.subtle',
+    transparency: theme.opacity[200],
+    theme
+  });
+  const fgActive = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const fgPrimaryActive = getColor({
+    variable: 'foreground.primary',
+    theme
+  });
+  const fgPrimaryInactive = getColor({
+    variable: 'foreground.primary',
+    theme,
+    dark: {
+      offset: -100
+    },
+    transparency: theme.opacity[200]
+  });
+  let color = fgActive;
+  let fill = fgActive;
+  if ($sort === 'asc') {
+    color = fgActive;
+    fill = fgInactive;
+  } else if ($sort === 'desc') {
+    color = fgInactive;
+    fill = fgActive;
+  }
+  return css(["", "{color:", ";fill:", ";}", "{color:", ";fill:", ";}&:hover,", "{color:", ";", ";", " ", "}", ""], StyledSortableStrokeIconWrapper, fgActive, fgActive, StyledSortableFillIconWrapper, color, fill, SELECTOR_FOCUS_VISIBLE, fgPrimaryActive, $sort === undefined && `
+        ${StyledSortableFillIconWrapper} {
+          opacity: 1;
+          color: ${fgPrimaryActive};
+          fill: ${fgPrimaryActive};
+        }
+
+        ${StyledSortableStrokeIconWrapper} {
+          opacity: 0;
+        }
+      `, $sort === 'asc' && `
+        ${StyledSortableFillIconWrapper} {
+          color: ${fgPrimaryActive};
+          fill: ${fgPrimaryInactive};
+        }
+      `, $sort === 'desc' && `
+        ${StyledSortableFillIconWrapper} {
+          color: ${fgPrimaryInactive};
+          fill: ${fgPrimaryActive};
+        }
+      `, focusStyles({
+    theme
+  }));
+};
+const StyledSortableButton = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  type: 'button'
+}).withConfig({
+  displayName: "StyledSortableButton",
+  componentId: "sc-2s1dli-3"
+})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.$sort === undefined && 1, StyledSortableFillIconWrapper, props => props.$sort !== undefined && 1, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSortableButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSortableButton, StyledSortableFillIconWrapper, StyledSortableStrokeIconWrapper };

package/dist/esm/styled/StyledTable.js

@@ -0,0 +1,28 @@
+/**
+* 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 from 'styled-components';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tables.table';
+const getLineHeight = props => {
+  return `${props.theme.space.base * 5}px`;
+};
+const StyledTable = styled.table.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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 => getColor({
+  variable: 'foreground.default',
+  theme: props.theme
+}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTable.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTable, getLineHeight };

package/dist/esm/styled/style-utils.js

@@ -0,0 +1,16 @@
+/**
+* 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.
+*/
+const getRowHeight = props => {
+  if (props.$size === 'large') {
+    return `${props.theme.space.base * 16}px`;
+  } else if (props.$size === 'small') {
+    return `${props.theme.space.base * 8}px`;
+  }
+  return `${props.theme.space.base * 10}px`;
+};
+
+export { getRowHeight };

package/dist/esm/types/index.js

@@ -0,0 +1,10 @@
+/**
+* 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.
+*/
+const SIZE = ['small', 'medium', 'large'];
+const SORT = ['asc', 'desc'];
+
+export { SIZE, SORT };

package/dist/esm/utils/useTableContext.js

@@ -0,0 +1,17 @@
+/**
+* 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 React__default, { useContext } from 'react';
+
+const TableContext = React__default.createContext({
+  size: 'medium',
+  isReadOnly: false
+});
+const useTableContext = () => {
+  return useContext(TableContext);
+};
+
+export { TableContext, useTableContext };