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

package/dist/index.esm.js

@@ -1,648 +0,0 @@
-/**
- * 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';
-import React__default, { forwardRef, useContext, useState, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-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';
-
-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);
-}
-
-const COMPONENT_ID$b = 'tables.body';
-const StyledBody = styled.tbody.attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledBody",
-  componentId: "sc-14ud6y-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$a = 'tables.caption';
-const StyledCaption = styled.caption.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledCaption",
-  componentId: "sc-113y327-0"
-})(["display:table-caption;text-align:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledCaption.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$9 = 'tables.table';
-const getLineHeight = props => {
-  return `${props.theme.space.base * 5}px`;
-};
-const StyledTable = styled.table.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  '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 => 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
-};
-
-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`;
-};
-
-const COMPONENT_ID$8 = 'tables.cell';
-const truncatedStyling$1 = 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$8,
-  'data-garden-version': '9.0.0-next.6'
-}).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$1, props => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledCell.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$7 = 'tables.overflow_button';
-const OVERFLOW_BUTTON_SIZE = '2em';
-const colorStyles$1 = props => {
-  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 = getColorV8('neutralHue', 600, props.theme);
-  }
-  return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], foregroundColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
-    theme: props.theme,
-    inset: true
-  }), activeBackgroundColor, activeForegroundColor);
-};
-const StyledOverflowButton = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.6',
-  type: 'button'
-}).withConfig({
-  displayName: "StyledOverflowButton",
-  componentId: "sc-1eba2ml-0"
-})(["display:block;transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;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;", " ", ";"], props => props.isActive ? '1' : '0', props => math(`${getRowHeight(props)} / 2`), OVERFLOW_BUTTON_SIZE, props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledOverflowButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-const StyledOverflowButtonIconWrapper = styled.div.withConfig({
-  displayName: "StyledOverflowButton__StyledOverflowButtonIconWrapper",
-  componentId: "sc-1eba2ml-1"
-})(["display:flex;align-items:center;justify-content:center;transform:rotate(90deg);transition:background-color 0.1s ease-in-out;width:", ";height:", ";"], OVERFLOW_BUTTON_SIZE, OVERFLOW_BUTTON_SIZE);
-StyledOverflowButtonIconWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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} ${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 ${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;
-  let hoverBackgroundColor = undefined;
-  if (props.isSelected) {
-    if (props.isHovered) {
-      backgroundColor = hoveredSelectedBackgroundColor;
-    } else {
-      backgroundColor = selectedBackgroundColor;
-    }
-    borderColor = selectedBorderColor;
-    hoverBorderBottomColor = selectedBorderColor;
-    hoverBackgroundColor = hoveredSelectedBackgroundColor;
-  } else if (props.isHovered) {
-    backgroundColor = hoveredBackgroundColor;
-    borderColor = hoveredBorderColor;
-  } else if (!props.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, props.isFocused && boxShadow, boxShadow);
-};
-const StyledRow = styled(StyledBaseRow).attrs(props => ({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.6',
-  tabIndex: props.isReadOnly ? undefined : -1
-})).withConfig({
-  displayName: "StyledRow",
-  componentId: "sc-ek66ow-1"
-})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledRow.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = '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 StyledHeaderRow = styled(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  '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 => 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 = 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.6'
-}).withConfig({
-  displayName: "StyledHead",
-  componentId: "sc-spf23a-0"
-})(["", " ", ";"], props => props.isSticky && stickyStyles(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledHead.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'tables.group_row';
-const sizeStyles$1 = props => {
-  const height = `${props.theme.space.base * 8}px`;
-  const lineHeight = getLineHeight(props);
-  return css(["height:", ";line-height:", ";font-size:", ";", "{padding:", " ", "px;}"], height, lineHeight, props.theme.fontSizes.sm, StyledCell, math(`(${height} - ${lineHeight}) / 2`), props.theme.space.base * 3);
-};
-const StyledGroupRow = styled(StyledBaseRow).attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledGroupRow",
-  componentId: "sc-mpd0r8-0"
-})(["background-color:", ";", " ", ";"], props => getColorV8('neutralHue', 100, props.theme), props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledGroupRow.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = '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 StyledSortableButton = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  '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 getColorV8('neutralHue', 600, props.theme);
-  } else if (props.sort === 'desc') {
-    return getColorV8('neutralHue', 400, props.theme);
-  }
-  return undefined;
-}, props => {
-  if (props.sort === 'asc') {
-    return getColorV8('neutralHue', 400, props.theme);
-  } else if (props.sort === 'desc') {
-    return getColorV8('neutralHue', 600, props.theme);
-  }
-  return undefined;
-}, SELECTOR_FOCUS_VISIBLE, props => getColorV8('primaryHue', 600, props.theme), props => props.sort === undefined && `
-      ${StyledSortableFillIconWrapper} {
-        opacity: 1;
-        color: ${getColorV8('primaryHue', 600, props.theme)};
-        fill: ${getColorV8('primaryHue', 600, props.theme)};
-      }
-
-      ${StyledSortableStrokeIconWrapper} {
-        opacity: 0;
-      }
-    `, props => props.sort === 'asc' && `
-      ${StyledSortableFillIconWrapper} {
-        color: ${getColorV8('primaryHue', 600, props.theme)};
-        fill: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
-      }
-    `, props => props.sort === 'desc' && `
-      ${StyledSortableFillIconWrapper} {
-        color: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
-        fill: ${getColorV8('primaryHue', 600, props.theme)};
-      }
-    `, props => focusStyles({
-  theme: props.theme
-}), props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledSortableButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = '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$1,
-  'data-garden-version': '9.0.0-next.6'
-}).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$1, props));
-StyledHeaderCell.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'tables.hidden_cell';
-const StyledHiddenCell = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledHiddenCell",
-  componentId: "sc-1x454xw-0"
-})(["", " ", ";"], hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHiddenCell.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const Body = forwardRef((props, ref) => React__default.createElement(StyledBody, _extends$3({
-  ref: ref
-}, props)));
-Body.displayName = 'Body';
-
-const Caption = forwardRef((props, ref) => React__default.createElement(StyledCaption, _extends$3({
-  ref: ref
-}, props)));
-Caption.displayName = 'Caption';
-
-const TableContext = React__default.createContext({
-  size: 'medium',
-  isReadOnly: false
-});
-const useTableContext = () => {
-  return useContext(TableContext);
-};
-
-const Cell = React__default.forwardRef((_ref, ref) => {
-  let {
-    hidden,
-    ...props
-  } = _ref;
-  const {
-    size
-  } = useTableContext();
-  return React__default.createElement(StyledCell, _extends$3({
-    ref: ref,
-    size: size
-  }, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
-});
-Cell.displayName = 'Cell';
-Cell.propTypes = {
-  isMinimum: PropTypes.bool,
-  isTruncated: PropTypes.bool,
-  hasOverflow: PropTypes.bool,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-
-const GroupRow = forwardRef((props, ref) => {
-  const {
-    size
-  } = useTableContext();
-  return React__default.createElement(StyledGroupRow, _extends$3({
-    ref: ref,
-    size: size
-  }, props));
-});
-GroupRow.displayName = 'GroupRow';
-
-const Head = forwardRef((props, ref) => React__default.createElement(StyledHead, _extends$3({
-  ref: ref
-}, props)));
-Head.displayName = 'Head';
-
-const HeaderCell = forwardRef((_ref, ref) => {
-  let {
-    hidden,
-    ...props
-  } = _ref;
-  const {
-    size
-  } = useTableContext();
-  return React__default.createElement(StyledHeaderCell, _extends$3({
-    ref: ref,
-    size: size
-  }, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
-});
-HeaderCell.displayName = 'HeaderCell';
-HeaderCell.propTypes = Cell.propTypes;
-
-const HeaderRow = React__default.forwardRef((props, ref) => {
-  const {
-    size
-  } = useTableContext();
-  return React__default.createElement(StyledHeaderRow, _extends$3({
-    ref: ref,
-    size: size
-  }, props));
-});
-HeaderRow.displayName = 'HeaderRow';
-
-var _g;
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
-var SvgOverflowStroke = function SvgOverflowStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    fill: "currentColor"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: 2.5,
-    cy: 8,
-    r: 1.5
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 8,
-    cy: 8,
-    r: 1.5
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 13.5,
-    cy: 8,
-    r: 1.5
-  }))));
-};
-
-const OverflowButton = forwardRef((_ref, ref) => {
-  let {
-    onFocus,
-    onBlur,
-    isFocused: focused,
-    ...other
-  } = _ref;
-  const [isFocused, setIsFocused] = useState(false);
-  const {
-    size
-  } = useTableContext();
-  return React__default.createElement(StyledOverflowButton, _extends$3({
-    onFocus: composeEventHandlers(onFocus, () => {
-      setIsFocused(true);
-    }),
-    onBlur: composeEventHandlers(onBlur, () => {
-      setIsFocused(false);
-    }),
-    size: size,
-    isFocused: typeof focused === 'undefined' ? isFocused : focused,
-    ref: ref
-  }, other), React__default.createElement(StyledOverflowButtonIconWrapper, null, React__default.createElement(SvgOverflowStroke, null)));
-});
-OverflowButton.displayName = 'OverflowButton';
-OverflowButton.propTypes = {
-  isHovered: PropTypes.bool,
-  isActive: PropTypes.bool,
-  isFocused: PropTypes.bool
-};
-
-const Row = forwardRef((_ref, ref) => {
-  let {
-    onFocus,
-    onBlur,
-    isFocused: focused,
-    ...otherProps
-  } = _ref;
-  const [isFocused, setIsFocused] = useState(false);
-  const {
-    size,
-    isReadOnly
-  } = useTableContext();
-  const computedFocused = useMemo(() => {
-    if (typeof focused !== 'undefined') {
-      return focused;
-    }
-    if (isReadOnly) {
-      return false;
-    }
-    return isFocused;
-  }, [focused, isFocused, isReadOnly]);
-  const onFocusCallback = useMemo(() => composeEventHandlers(onFocus, () => {
-    setIsFocused(true);
-  }), [onFocus, setIsFocused]);
-  const onBlurCallback = useMemo(() => composeEventHandlers(onBlur, () => {
-    setIsFocused(false);
-  }), [onBlur, setIsFocused]);
-  return React__default.createElement(StyledRow, _extends$3({
-    onFocus: onFocusCallback,
-    onBlur: onBlurCallback,
-    size: size,
-    isReadOnly: isReadOnly,
-    isFocused: computedFocused,
-    ref: ref
-  }, otherProps));
-});
-Row.displayName = 'Row';
-Row.propTypes = {
-  isStriped: PropTypes.bool,
-  isFocused: PropTypes.bool,
-  isHovered: PropTypes.bool,
-  isSelected: PropTypes.bool
-};
-
-var _path$1;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-var SvgSortStroke = function SvgSortStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
-  })));
-};
-
-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); }
-var SvgSortFill = function SvgSortFill(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    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"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
-  })));
-};
-
-const SIZE = ['small', 'medium', 'large'];
-const SORT = ['asc', 'desc'];
-
-const SortableCell = forwardRef((_ref, ref) => {
-  let {
-    sort,
-    cellProps,
-    width,
-    children,
-    ...otherProps
-  } = _ref;
-  let ariaSortValue = 'none';
-  if (sort === 'asc') {
-    ariaSortValue = 'ascending';
-  } else if (sort === 'desc') {
-    ariaSortValue = 'descending';
-  }
-  const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
-  return React__default.createElement(StyledHeaderCell, _extends$3({
-    "aria-sort": ariaSortValue,
-    width: width
-  }, cellProps), React__default.createElement(StyledSortableButton, _extends$3({
-    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))));
-});
-SortableCell.displayName = 'SortableCell';
-SortableCell.propTypes = {
-  sort: PropTypes.oneOf(SORT),
-  cellProps: PropTypes.any,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-
-const TableComponent = React__default.forwardRef((props, ref) => {
-  const tableContextValue = useMemo(() => ({
-    size: props.size,
-    isReadOnly: props.isReadOnly
-  }), [props.size, props.isReadOnly]);
-  return React__default.createElement(TableContext.Provider, {
-    value: tableContextValue
-  }, React__default.createElement(StyledTable, _extends$3({
-    ref: ref
-  }, props)));
-});
-TableComponent.displayName = 'Table';
-TableComponent.defaultProps = {
-  size: 'medium'
-};
-TableComponent.propTypes = {
-  size: PropTypes.oneOf(SIZE),
-  isReadOnly: PropTypes.bool
-};
-const Table = TableComponent;
-Table.Body = Body;
-Table.Caption = Caption;
-Table.Cell = Cell;
-Table.GroupRow = GroupRow;
-Table.Head = Head;
-Table.HeaderCell = HeaderCell;
-Table.HeaderRow = HeaderRow;
-Table.OverflowButton = OverflowButton;
-Table.Row = Row;
-Table.SortableCell = SortableCell;
-
-export { Body, Caption, Cell, GroupRow, Head, HeaderCell, HeaderRow, OverflowButton, Row, SortableCell, Table };