@ndlib/component-library 0.0.7-9.1

package/dist/components/elements/Pill/index.js

@@ -0,0 +1,117 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import React, { useState } from 'react';
+import { useTheme } from '../../../theme';
+import { COLOR, colors } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { Icon } from '../Icon';
+export var PILL_SIZE;
+(function (PILL_SIZE) {
+    PILL_SIZE["SM"] = "sm";
+    PILL_SIZE["LG"] = "lg";
+})(PILL_SIZE || (PILL_SIZE = {}));
+const typographyMap = {
+    [PILL_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_XSMALL,
+    [PILL_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+};
+const defaultPaddingX = {
+    [PILL_SIZE.SM]: 2,
+    [PILL_SIZE.LG]: 3,
+};
+const defaultHeight = {
+    [PILL_SIZE.SM]: '1.75rem',
+    [PILL_SIZE.LG]: '2rem',
+};
+const iconMargin = {
+    [PILL_SIZE.SM]: 1,
+    [PILL_SIZE.LG]: 1,
+};
+export var PILL_TYPE;
+(function (PILL_TYPE) {
+    PILL_TYPE["DEFAULT"] = "default";
+    PILL_TYPE["OUTLINE"] = "outline";
+})(PILL_TYPE || (PILL_TYPE = {}));
+export const Pill = React.forwardRef((_a, ref) => {
+    var { size: sizeParam, type: typeParam, color, icon, children, sx, onClick } = _a, rest = __rest(_a, ["size", "type", "color", "icon", "children", "sx", "onClick"]);
+    const theme = useTheme();
+    const [hover, setHover] = useState(false);
+    const clickable = onClick !== undefined;
+    let bg = COLOR.PRIMARY;
+    let hoverBg = COLOR.PRIMARY_HIGHLIGHT;
+    let textColor = COLOR.TEXT;
+    let hoverTextColor = undefined;
+    let borderColor = COLOR.TRANSPARENT;
+    const cursor = clickable ? 'pointer' : 'default';
+    const hoverShadow = theme.boxShadow.NORMAL;
+    const hoverDecoration = undefined;
+    const hoverTransform = 'scale(1.03)';
+    const type = typeParam || PILL_TYPE.DEFAULT;
+    const size = sizeParam || PILL_SIZE.SM;
+    const paddingX = defaultPaddingX[size];
+    const height = defaultHeight[size];
+    if (type === PILL_TYPE.DEFAULT) {
+        bg = color || COLOR.PRIMARY;
+        hoverBg =
+            bg === COLOR.PRIMARY
+                ? COLOR.PRIMARY_HIGHLIGHT
+                : bg === COLOR.SECONDARY
+                    ? COLOR.SECONDARY_HIGHLIGHT
+                    : bg;
+        textColor =
+            bg === COLOR.PRIMARY
+                ? COLOR.TEXT_ON_PRIMARY
+                : bg === COLOR.SECONDARY
+                    ? COLOR.TEXT_ON_SECONDARY
+                    : COLOR.TEXT;
+        hoverTextColor = textColor;
+    }
+    if (type === PILL_TYPE.OUTLINE) {
+        bg = COLOR.BACKGROUND;
+        hoverBg = COLOR.BACKGROUND;
+        textColor = color || COLOR.PRIMARY;
+        hoverTextColor = textColor;
+        borderColor = textColor;
+    }
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    const body = children;
+    return (_jsxs("button", Object.assign({ ref: ref, tabIndex: onClick ? -1 : 0, onClick: onClick, onMouseEnter: () => {
+            setHover(true);
+        }, onMouseLeave: () => {
+            setHover(false);
+        }, sx: Object.assign(Object.assign(Object.assign({}, typographyStyles), { cursor, borderRadius: '1000px', bg: bg || colors.primary, color: textColor, px: paddingX, height: height, border: 'solid 1px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': clickable
+                ? {
+                    bg: hoverBg,
+                    color: hoverTextColor,
+                    boxShadow: hoverShadow,
+                    transform: hoverTransform,
+                    textDecoration: hoverDecoration,
+                }
+                : undefined, ':focus': clickable
+                ? {
+                    bg: hoverBg,
+                    color: hoverTextColor,
+                    boxShadow: hoverShadow,
+                    cursor: 'pointer',
+                    transform: hoverTransform,
+                    textDecoration: hoverDecoration,
+                }
+                : undefined }), sx) }, rest, { children: [icon && (_jsx(Icon, { icon: icon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", Object.assign({ css: {
+                    flexGrow: 1,
+                    justifyContent: 'flex-start',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textAlign: 'start',
+                } }, { children: body }))] })));
+});

package/dist/components/elements/Spinner/Spinner.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from '.';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+export declare const Default: Story;
+export declare const CustomColor: Story;

package/dist/components/elements/Spinner/Spinner.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Column, Group, HEADING_SIZE, Heading } from '../../..';
+import { SPINNER_SIZE, Spinner } from '.';
+import { GROUP_TYPE } from '../Group';
+import { COLOR } from '../../../theme/colors';
+const meta = {
+    title: 'Elements/Spinner',
+    component: Spinner,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { size: SPINNER_SIZE.LG, label: 'Large' },
+    { size: SPINNER_SIZE.MD, label: 'Medium' },
+    { size: SPINNER_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, { children: size.label })), _jsx(Spinner, { size: size.size })] })))) })),
+    args: {},
+};
+export const CustomColor = {
+    render: () => (_jsx(Column, { children: _jsx(Spinner, { color: COLOR.SECONDARY }) })),
+    args: {
+        children: 'Heading',
+    },
+};

package/dist/components/elements/Spinner/Spinner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Spinner/Spinner.test.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { SPINNER_LABEL, Spinner } from '.';
+describe('Button', () => {
+    it('renders without throwing an error', () => {
+        const { getByLabelText } = render(_jsx(Spinner, {}));
+        expect(getByLabelText(SPINNER_LABEL)).toBeInTheDocument();
+    });
+});

package/dist/components/elements/Spinner/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { StyledElementProps } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+export declare enum SPINNER_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export type SpinnerProps = StyledElementProps<HTMLDivElement, {
+    size?: SPINNER_SIZE;
+    color?: COLOR;
+}>;
+export declare const SPINNER_LABEL = "Loading";
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/elements/Spinner/index.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { keyframes } from '@emotion/react';
+import { useTheme } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+export var SPINNER_SIZE;
+(function (SPINNER_SIZE) {
+    SPINNER_SIZE["SM"] = "sm";
+    SPINNER_SIZE["MD"] = "md";
+    SPINNER_SIZE["LG"] = "lg";
+})(SPINNER_SIZE || (SPINNER_SIZE = {}));
+const spin = keyframes({
+    from: {
+        transform: 'rotate(0deg)',
+    },
+    to: {
+        transform: 'rotate(360deg)',
+    },
+});
+const sizeLengthMap = {
+    [SPINNER_SIZE.SM]: '1.25rem',
+    [SPINNER_SIZE.MD]: '2rem',
+    [SPINNER_SIZE.LG]: '3rem',
+};
+export const SPINNER_LABEL = 'Loading';
+export const Spinner = (_a) => {
+    var { size: sizeParam, color: colorParam } = _a, rest = __rest(_a, ["size", "color"]);
+    const { colors } = useTheme();
+    const size = sizeParam || SPINNER_SIZE.MD;
+    const color = colors[colorParam || COLOR.PRIMARY];
+    return (_jsx("div", Object.assign({ "aria-label": SPINNER_LABEL, sx: {
+            animation: `${spin} 1.4s linear 0s infinite normal none running;`,
+            borderRadius: '50%',
+            height: sizeLengthMap[size],
+            width: sizeLengthMap[size],
+            border: size === SPINNER_SIZE.LG ? 'solid 6px' : 'solid 4px',
+            borderColor: `${color} ${color} transparent`,
+        } }, rest)));
+};

package/dist/components/elements/TabList/TabList.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TabList } from './index';
+declare const meta: Meta<typeof TabList>;
+export default meta;
+type Story = StoryObj<typeof TabList>;
+export declare const Default: Story;

package/dist/components/elements/TabList/TabList.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TabList } from './index';
+import { ExampleTabs } from './example';
+const meta = {
+    title: 'Elements/TabList',
+    component: TabList,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(ExampleTabs, {}),
+};

package/dist/components/elements/TabList/TabList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/TabList/TabList.test.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { items, ExampleTabs } from './example';
+describe('TabList', () => {
+    it('renders interactive tabs', () => {
+        const { getByRole } = render(_jsx(ExampleTabs, {}));
+        expect(getByRole('tablist')).toBeInTheDocument();
+        for (const item of items) {
+            expect(getByRole('tab', { name: item.label })).toBeInTheDocument();
+        }
+        const firstTab = getByRole('tab', { name: items[0].label });
+        const secondTab = getByRole('tab', { name: items[1].label });
+        expect(firstTab).toHaveAttribute('aria-selected', 'true');
+        expect(secondTab).toHaveAttribute('aria-selected', 'false');
+        fireEvent.click(secondTab);
+        expect(firstTab).toHaveAttribute('aria-selected', 'false');
+        expect(secondTab).toHaveAttribute('aria-selected', 'true');
+    });
+});

package/dist/components/elements/TabList/example.d.ts

@@ -0,0 +1,7 @@
+type Item = {
+    id: string;
+    label: string;
+};
+export declare const items: Item[];
+export declare const ExampleTabs: () => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/elements/TabList/example.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { TabList, Tab } from '.';
+export const items = [
+    {
+        id: '1',
+        label: 'Items & Requests',
+    },
+    {
+        id: '2',
+        label: 'Courses',
+    },
+    {
+        id: '3',
+        label: 'Checkout',
+    },
+    {
+        id: '4',
+        label: 'History',
+    },
+    {
+        id: '5',
+        label: 'Preferences',
+    },
+    {
+        id: '6',
+        label: 'Reservations',
+    },
+];
+const StateManager = ({ children }) => {
+    const [selected, setSelected] = React.useState('1');
+    return _jsx(_Fragment, { children: children({ selected, setSelected }) });
+};
+export const ExampleTabs = () => (_jsx(StateManager, { children: ({ selected, setSelected }) => (_jsx(TabList, { children: items.map((item) => (_jsx(Tab, Object.assign({ onClick: () => {
+                setSelected(item.id);
+            }, selected: selected === item.id }, { children: item.label }), item.id))) })) }));

package/dist/components/elements/TabList/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type TabListProps = StyledElementProps<HTMLDivElement>;
+export declare const TabList: React.FC<TabListProps>;
+type TabProps = StyledElementProps<HTMLButtonElement, {
+    selected?: boolean;
+    children: string;
+}>;
+export declare const Tab: React.FC<TabProps>;
+export {};

package/dist/components/elements/TabList/index.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+import { useUniqueId } from '../../providers/uniqueIds';
+export const TabList = (_a) => {
+    var { children, sx } = _a, props = __rest(_a, ["children", "sx"]);
+    return (_jsx("div", Object.assign({ role: "tablist", sx: Object.assign({ flexDirection: 'row' }, sx) }, props, { children: children })));
+};
+export const Tab = (_a) => {
+    var { selected, children } = _a, rest = __rest(_a, ["selected", "children"]);
+    const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE);
+    const labelId = useUniqueId('tab-label');
+    return (_jsx("button", Object.assign({ role: "tab", sx: Object.assign({ height: '3.25rem', boxSizing: 'border-box', px: 4, bg: COLOR.WHITE, color: selected ? COLOR.DARK_GRAY : COLOR.GRAY, border: 'none', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? COLOR.ND_BLUE_BRIGHT : COLOR.LIGHT_GRAY, cursor: 'pointer' }, typographyStyles), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", Object.assign({ id: labelId, sx: {
+                transform: selected ? 'scale(1.1)' : undefined,
+                ':hover': {
+                    transform: selected ? 'scale(1.1)' : 'scale(1.05)',
+                },
+            } }, { children: children })) })));
+};

package/dist/components/elements/Table/Table.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Table } from '.';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof Table>;
+export declare const Default: Story;
+export declare const OmitColumn: Story;
+export declare const ResponsiveColumn: Story;
+export declare const ColumnGroup: Story;
+export declare const Sortable: Story;

package/dist/components/elements/Table/Table.stories.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableColumn } from '.';
+import { SORT_DIRECTION, sortByKey } from '../../../utils/sortByKey';
+import { useState } from 'react';
+const meta = {
+    title: 'Elements/Table',
+    component: Table,
+    tags: ['autodocs'],
+};
+export default meta;
+const data = [
+    {
+        name: 'Steve Rogers',
+        age: 100,
+        position: 'Ethics Officer',
+    },
+    {
+        name: 'Natasha Romanoff',
+        age: 35,
+        position: 'Opposition Researcher',
+    },
+    {
+        name: 'Thor',
+        age: 1500,
+        position: 'VP of Thunder',
+    },
+    {
+        name: 'Peter Parker',
+        age: 18,
+        position: 'Web Crawling Expert',
+    },
+    {
+        name: 'Kate Bishop',
+        age: 22,
+        position: 'Trust Fund Recipient',
+    },
+];
+export const Default = {
+    render: () => (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                    width: '160px',
+                } }), _jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                    width: '100px',
+                } }, { children: (row) => row.age })), _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] }))),
+};
+export const OmitColumn = {
+    render: () => {
+        const someCondition = false;
+        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), someCondition ? (_jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                        width: '100px',
+                    } }, { children: (row) => row.age }))) : null, _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] })));
+    },
+};
+export const ResponsiveColumn = {
+    render: () => {
+        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), _jsx(TableColumn, Object.assign({ breakpoint: 2, header: "Age", sx: {
+                        width: '100px',
+                    } }, { children: (row) => row.age })), _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] })));
+    },
+};
+export const ColumnGroup = {
+    render: () => {
+        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), [
+                    _jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                            width: '100px',
+                        } }, { children: (row) => row.age })),
+                    _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position })),
+                ]] })));
+    },
+};
+const SortableStory = () => {
+    const [sortConfig, setSortConfig] = useState({
+        key: 'name',
+        direction: SORT_DIRECTION.ASC,
+    });
+    const sorted = sortByKey({
+        items: data,
+        config: sortConfig,
+    });
+    return (_jsxs(Table, Object.assign({ data: sorted, alternateRowColor: true, sortConfig: sortConfig, updateSort: setSortConfig }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sortable: true, sx: {
+                    width: '160px',
+                } }), [
+                _jsx(TableColumn, Object.assign({ header: "Age", sortKey: "age", sortable: true, sx: {
+                        width: '100px',
+                    } }, { children: (row) => row.age })),
+                _jsx(TableColumn, { header: "Occupation", sortable: true, dataKey: "position" }),
+            ]] })));
+};
+export const Sortable = {
+    render: SortableStory,
+};

package/dist/components/elements/Table/Table.test.d.ts

@@ -0,0 +1 @@
+export declare const testExample: import("react/jsx-runtime").JSX.Element;

package/dist/components/elements/Table/Table.test.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { Table, TableColumn } from '.';
+const data = [
+    {
+        col1: 'Cell 1-1',
+        col2: 'Cell 1-2',
+        col3: 'Cell 1-3',
+    },
+    {
+        col1: 'Cell 2-1',
+        col2: 'Cell 2-2',
+        col3: 'Cell 2-3',
+    },
+];
+export const testExample = (_jsxs(Table, Object.assign({ data: data }, { children: [_jsx(TableColumn, { header: "Column 1", dataKey: "col1" }), _jsx(TableColumn, Object.assign({ header: "Column 2" }, { children: (row) => row.col2 })), _jsx(TableColumn, { dataKey: "col3", header: "Column 3" })] })));
+describe('Table', () => {
+    it('renders all headers and cells', () => {
+        const { getByText } = render(testExample);
+        const headers = ['Column 1', 'Column 2', 'Column 3'];
+        const cells = [
+            'Cell 1-1',
+            'Cell 1-2',
+            'Cell 1-3',
+            'Cell 2-1',
+            'Cell 2-2',
+            'Cell 2-3',
+        ];
+        headers.forEach((header) => {
+            expect(getByText(header)).toBeInTheDocument();
+        });
+        cells.forEach((cell) => {
+            expect(getByText(cell)).toBeInTheDocument();
+        });
+    });
+});

package/dist/components/elements/Table/index.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { StyledElementProps, StylesProp } from '../../../theme';
+import { SortConfig } from '../../../utils/sortByKey';
+type ColumnRenderFn<RowData> = (data: RowData) => React.ReactNode;
+type ColumnProps<RowData extends object> = {
+    header: string;
+    sortable?: boolean;
+    sortKey?: keyof RowData;
+    dataKey?: keyof RowData;
+    headerStyles?: StylesProp;
+    align?: 'left' | 'center' | 'right';
+    alignHeader?: 'left' | 'center' | 'right';
+    children?: ColumnRenderFn<RowData>;
+    breakpoint?: number;
+    sx?: StylesProp;
+};
+type ChildList = ChildList[] | JSX.Element | null | undefined;
+type TableProps<RowData> = StyledElementProps<HTMLTableElement, {
+    data: RowData[];
+    sortConfig?: SortConfig<RowData>;
+    updateSort?: (sortConfig: SortConfig<RowData>) => void;
+    children: ChildList[];
+    cellStyles?: StylesProp;
+    alternateRowColor?: boolean;
+    showRowDividers?: boolean;
+    showColumnDividers?: boolean;
+}>;
+export declare function TableColumn<RowData extends object>(props: ColumnProps<RowData>): null;
+export declare function Table<RowData extends object>(props: TableProps<RowData>): import("react").JSX.Element;
+export {};

package/dist/components/elements/Table/index.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import { useMemo } from 'react';
+import { COLOR } from '../../../theme/colors';
+import { useEnvironment } from '../../providers/env';
+import { FONT_SIZE, TYPOGRAPHY_TYPE, typographyStyleMap, } from '../../../theme/typography';
+import { useMediaQuery } from '../../providers/media';
+import { Row } from '../layout/Row';
+import _ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import _ArrowDropUp from '@mui/icons-material/ArrowDropUp';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { Icon } from '../Icon';
+import { SORT_DIRECTION } from '../../../utils/sortByKey';
+const ArrowDropDown = importedDefaultComponentShim(_ArrowDropDown);
+const ArrowDropUp = importedDefaultComponentShim(_ArrowDropUp);
+const useColumnSpec = (children) => {
+    const headerList = [];
+    const parseHeaders = (children) => {
+        children.forEach((child) => {
+            if (Array.isArray(child)) {
+                parseHeaders(child);
+            }
+            else if (child) {
+                headerList.push(child.props.header);
+            }
+        });
+    };
+    parseHeaders(children);
+    const columnList = JSON.stringify(headerList);
+    return useMemo(() => {
+        const columnProps = [];
+        const parseColumnProps = (children) => {
+            children.forEach((child) => {
+                if (Array.isArray(child)) {
+                    parseColumnProps(child);
+                }
+                else if (child) {
+                    columnProps.push(child.props);
+                }
+            });
+        };
+        parseColumnProps(children);
+        return columnProps;
+    }, [columnList]);
+};
+export function TableColumn(props) {
+    const { flagInDevelopment } = useEnvironment();
+    flagInDevelopment('TableColumn should not be used outside of Table component');
+    console.log('We offer this log to you in reverence, oh compiler gods', props);
+    return null;
+}
+export function Table(props) {
+    const { role, data, alternateRowColor = true, cellStyles, sx, children, showRowDividers = true, showColumnDividers = false, sortConfig, updateSort, } = props;
+    const cellTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM];
+    const headerTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONTROL_MEDIUM];
+    const { breakpoint } = useMediaQuery();
+    const columnSpec = useColumnSpec(children);
+    const getCellStyles = (params) => {
+        const { columnProps, rowIndex, columnIndex } = params;
+        const isLastColumn = columnIndex === columnSpec.length - 1;
+        const isLastRow = rowIndex === data.length - 1;
+        const cellAlign = columnProps.align || 'left';
+        const styles = Object.assign({ bg: alternateRowColor && rowIndex % 2 === 1
+                ? COLOR.EXTRA_EXTRA_LIGHT_GRAY
+                : COLOR.WHITE, p: 3, borderBottom: showRowDividers && !isLastRow ? '1px solid' : 'none', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, textAlign: cellAlign }, cellTypographyStyles);
+        return Object.assign(Object.assign(Object.assign({}, styles), cellStyles), columnProps.sx);
+    };
+    return (_jsxs("table", Object.assign({ role: role, sx: sx }, { children: [_jsx("thead", Object.assign({ role: "rowgroup" }, { children: _jsx("tr", { children: columnSpec.map((column, i) => {
+                        const isLastColumn = i === columnSpec.length - 1;
+                        if (column.breakpoint && breakpoint < column.breakpoint) {
+                            return null;
+                        }
+                        const canSort = sortConfig && column.sortable;
+                        const sortKey = column.sortKey || column.dataKey;
+                        const onSort = () => {
+                            if (canSort) {
+                                const direction = sortConfig.direction === SORT_DIRECTION.ASC
+                                    ? SORT_DIRECTION.DESC
+                                    : SORT_DIRECTION.ASC;
+                                updateSort &&
+                                    updateSort({ key: sortKey, direction });
+                            }
+                        };
+                        return (_jsx("th", Object.assign({ role: "columnheader", sx: Object.assign(Object.assign({ textAlign: column.alignHeader || column.align || 'left', borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles) }, { children: _jsxs(Row, Object.assign({ onClick: onSort, tabIndex: canSort ? 0 : undefined, sx: { cursor: canSort ? 'pointer' : 'default' } }, { children: [column.header, canSort &&
+                                        sortConfig.key === sortKey &&
+                                        (sortConfig.direction === SORT_DIRECTION.ASC ? (_jsx(Icon, { icon: ArrowDropUp, sx: { ml: 1 }, size: FONT_SIZE.MD })) : (_jsx(Icon, { icon: ArrowDropDown, sx: { ml: 1 }, size: FONT_SIZE.MD })))] })) }), i));
+                    }) }) })), _jsx("tbody", Object.assign({ role: "rowgroup" }, { children: data.map((rowData, rowIndex) => {
+                    return (_jsx("tr", Object.assign({ role: "row" }, { children: columnSpec.map((column, columnIndex) => {
+                            if (column.breakpoint && breakpoint < column.breakpoint) {
+                                return null;
+                            }
+                            const { children, dataKey } = column;
+                            const cellStyles = getCellStyles({
+                                columnProps: column,
+                                rowIndex,
+                                columnIndex,
+                            });
+                            return (_jsx("td", Object.assign({ sx: cellStyles }, { children: _jsxs(_Fragment, { children: [dataKey ? rowData[dataKey] : null, !dataKey && children && children(rowData)] }) }), columnIndex));
+                        }) }), rowIndex));
+                }) }))] })));
+}

package/dist/components/elements/layout/Box.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+export type BoxProps = StyledElementProps<HTMLDivElement>;
+export declare const Box: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & object & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;