import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled, useStyleConfig, vui } from '../core';
import T from '../t';
import { cs } from '../utils';
import { useTableContext } from './context';
export const TdBase = styled.tdBox `
  transition-duration: fast;
`;
/** Displays a cell inside Table row. */
export const Td = vui((props, ref) => {
    const { className, level = 0, children, ...rest } = props;
    const styles = useStyleConfig('Table', useTableContext());
    return (_jsxs(TdBase, { className: cs('vui-td', className), px: 2, ref: ref, ...styles.td, ...rest, children: [!!level && (_jsx(T, { mr: 1, children: Array.from({ length: level }).map((_i, key) => (_jsx(T, { children: "\u2014" }, key))) })), children] }));
});
Td.displayName = 'Td';
export default Td;
//# sourceMappingURL=td.js.map