How to use the @storybook/theming.styled.table function in @storybook/theming

return input;
  }
  const text = String(input);
  const arrayOfText = text.split(/\r?\n|\r/g);
  const isSingleLine = arrayOfText.length < 2;
  return isSingleLine
    ? text
    : arrayOfText.map((lineOfText, i) => (
        // eslint-disable-next-line react/no-array-index-key
        <span>
          {i &gt; 0 &amp;&amp; <br>} {lineOfText}
        </span>
      ));
};

const Table = styled.table({
  width: '100%',
  textAlign: 'left',
  borderCollapse: 'collapse',
  borderLeft: '0px',
  borderRight: '0px',
});
const Thead = styled.thead(({ theme }) =&gt; ({
  textTransform: 'capitalize',
  color: '#ffffff', // theme.color.textInverseColor,
  backgroundColor: theme.color.darkest,
}));
const Tbody = styled.tbody();
const Th = styled.th({
  paddingTop: '.5rem',
  paddingBottom: '.5rem',
});

import React from 'react';
import { styled } from '@storybook/theming';
import { opacify, transparentize } from 'polished';
import { PropRow } from './PropRow';
import { PropDef } from './PropDef';
import { EmptyBlock } from '../EmptyBlock';

export const Table = styled.table<{}>(({ theme }) => ({
  '&&': {
    // Resets for cascading/system styles
    borderCollapse: 'collapse',
    borderSpacing: 0,

    tr: {
      border: 'none',
      background: 'none',
    },

    'td, th': {
      padding: 0,
      border: 'none',
    },
    // End Resets

import React from 'react';
import { styled } from '@storybook/theming';
import { opacify, transparentize } from 'polished';
import { PropRow } from './PropRow';
import { PropDef } from './PropDef';
import { EmptyBlock } from '../EmptyBlock';

export const Table = styled.table(({ theme }) => ({
  '&&': {
    // Resets for cascading/system styles
    borderCollapse: 'collapse',
    borderSpacing: 0,

    tr: {
      border: 'none',
      background: 'none',
    },

    'td, th': {
      padding: 0,
      border: 'none',
    },
    // End Resets

import React from 'react';
import { styled } from '@storybook/theming';

export const Table = styled.table({
  width: '100%',
  textAlign: 'left',
  borderCollapse: 'collapse',
  borderLeft: '0px',
  borderRight: '0px',
});

export const Thead = styled.thead();

export const Tbody = styled.tbody();

export const Th = styled.th(({ theme }) => ({
  paddingTop: '.5rem',
  paddingBottom: '.5rem',
  textTransform: 'capitalize',
  color: theme.color.lightest,

import { styled } from '@storybook/theming';

const Table = styled.table({
  borderCollapse: 'collapse',
});

Table.displayName = 'Table';

export default Table;