var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { Box } from '@workday/canvas-kit-react/layout';
import { Text } from '@workday/canvas-kit-react/text';
import styled from '@emotion/styled';
import { type } from '@workday/canvas-kit-react/tokens';
var TableHead = createComponent('thead')({
    Component: function (props, ref, Element) {
        return React.createElement(Box, __assign({ as: Element, ref: ref }, props));
    },
});
var TableBody = createComponent('tbody')({
    Component: function (props, ref, Element) {
        return React.createElement(Box, __assign({ as: Element, ref: ref }, props));
    },
});
var TableRow = createComponent('tr')({
    Component: function (props, ref, Element) {
        return (React.createElement(Box, __assign({ as: Element, ref: ref, borderBottom: "solid 1px", borderBottomColor: "soap400" }, props)));
    },
});
var TableHeader = createComponent('th')({
    Component: function (props, ref, Element) {
        return (React.createElement(Text, __assign({ as: Element, ref: ref, fontWeight: "medium", paddingX: "xxs", paddingY: "s", textAlign: "start", typeLevel: "subtext.large" }, props)));
    },
});
var StyledText = styled(Text)({
    code: {
        fontFamily: type.properties.fontFamilies.monospace,
    },
});
var TableData = createComponent('td')({
    Component: function (props, ref, Element) {
        return (React.createElement(StyledText, __assign({ as: Element, ref: ref, paddingX: "xxs", paddingY: "s", textAlign: "start", typeLevel: "subtext.large" }, props)));
    },
});
export var Table = createComponent('table')({
    displayName: 'Table',
    Component: function (props, ref, Element) {
        return (React.createElement(Box, __assign({ as: Element, ref: ref, borderCollapse: "collapse", width: "100%" }, props, { marginBottom: "s" })));
    },
    subComponents: {
        Head: TableHead,
        Body: TableBody,
        Row: TableRow,
        Header: TableHeader,
        Data: TableData,
    },
});
