import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';
import { tableAnatomy } from '@chakra-ui/anatomy';

var _a = createMultiStyleConfigHelpers(tableAnatomy.keys), defineMultiStyleConfig = _a.defineMultiStyleConfig, definePartsStyle = _a.definePartsStyle;
var baseStyle = definePartsStyle({
    table: {
        fontVariantNumeric: 'lining-nums tabular-nums',
        borderCollapse: 'collapse',
        width: 'full',
    },
    th: {
        fontWeight: 'bold',
        textTransform: 'uppercase',
        letterSpacing: 'wider',
        textAlign: 'start',
    },
    td: {
        textAlign: 'start',
    },
    caption: {
        textAlign: 'center',
        fontWeight: 'medium',
    },
});
var numericStyles = defineStyle({
    '&[data-is-numeric=true]': {
        textAlign: 'end',
    },
});
var variantSimple = definePartsStyle(function (props) {
    var c = props.colorScheme;
    return {
        th: __assign({ color: 'gray.700', borderBottom: '1px', borderColor: "".concat(c, ".200") }, numericStyles),
        td: __assign({ borderBottom: '1px', color: 'gray.900', borderColor: "".concat(c, ".200") }, numericStyles),
        caption: {
            color: 'gray.700',
        },
        tfoot: {
            tr: {
                '&:last-of-type': {
                    th: { borderBottomWidth: 0 },
                },
            },
        },
    };
});
var variantStripe = definePartsStyle(function (props) {
    var c = props.colorScheme;
    return {
        th: __assign({ color: 'gray.600', borderBottom: '1px', borderColor: "".concat(c, ".200") }, numericStyles),
        td: __assign({ borderBottom: '1px', borderColor: "".concat(c, ".50") }, numericStyles),
        caption: {
            color: 'gray.600',
        },
        tbody: {
            tr: {
                _odd: {
                    'th, td': {
                        borderBottomWidth: '1px',
                        borderColor: "".concat(c, ".50"),
                        background: "".concat(c, ".50"),
                    },
                },
                _hover: {
                    'th, td': {
                        background: "".concat(c, ".100"),
                    },
                },
                _last: {
                    'th, td': {
                        borderBottomWidth: '1px',
                        borderColor: "".concat(c, ".200"),
                    },
                },
            },
        },
        tfoot: {
            tr: {
                _last: {
                    'th, td': { borderBottomWidth: 0 },
                },
            },
        },
    };
});
var variants = {
    simple: variantSimple,
    striped: variantStripe,
    unstyled: definePartsStyle({}),
};
var sizes = {
    sm: definePartsStyle({
        th: {
            px: 'xs',
            py: 'xs',
            textStyle: 'heading5',
        },
        td: {
            px: 'xs',
            py: 'xs',
            textStyle: 'body',
        },
        caption: {
            px: 'xs',
            py: 'xs',
            textStyle: 'body',
            fontSize: 'sm',
        },
    }),
    md: definePartsStyle({
        th: {
            px: 'md',
            py: 'sm',
            textStyle: 'heading4',
            fontSize: 'sm',
        },
        td: {
            px: 'md',
            py: 'sm',
            textStyle: 'body',
        },
        caption: {
            px: 'md',
            py: 'sm',
            textStyle: 'body',
        },
    }),
};
var Table = defineMultiStyleConfig({
    baseStyle: baseStyle,
    variants: variants,
    sizes: sizes,
    defaultProps: {
        variant: 'simple',
        size: 'md',
        colorScheme: 'gray',
    },
});

export { Table as default };
//# sourceMappingURL=table.js.map
