@postgres.ai/shared 3.5.0-pr-1027 → 3.5.0-pr-1027.1

package/components/ResetCloneModal/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone';
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot';
+declare type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    clone: Clone;
+    onResetClone: (snapshotId: string) => void;
+    snapshots: Snapshot[] | null;
+    version: string | null | undefined;
+};
+export declare const ResetCloneModal: (props: Props) => JSX.Element;
+export {};

package/components/ResetCloneModal/index.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useEffect, useState } from 'react';
+import { makeStyles } from '@material-ui/core';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { Text } from '@postgres.ai/shared/components/Text';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { Select } from '@postgres.ai/shared/components/Select';
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls';
+import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot';
+const useStyles = makeStyles({
+    snapshots: {
+        margin: '16px 0 0 0',
+    },
+    snapshotTag: {
+        marginLeft: '4px',
+        fontWeight: 700,
+    },
+}, { index: 1 });
+export const ResetCloneModal = (props) => {
+    var _a;
+    const { isOpen, onClose, clone, onResetClone, snapshots } = props;
+    const classes = useStyles();
+    // `slice` here is the mobx requirement.
+    const sortedSnapshots = snapshots === null || snapshots === void 0 ? void 0 : snapshots.slice().sort(compareSnapshotsDesc);
+    const [selectedSnapshotId, setSelectedSnapshotId] = useState(null);
+    const selectCurrentSnapshot = () => {
+        if (!sortedSnapshots)
+            return;
+        const currentSnapshot = sortedSnapshots.find((snapshot) => { var _a; return snapshot.id === ((_a = clone.snapshot) === null || _a === void 0 ? void 0 : _a.id); });
+        if (!currentSnapshot)
+            return;
+        setSelectedSnapshotId(currentSnapshot.id);
+    };
+    useEffect(selectCurrentSnapshot, [Boolean(sortedSnapshots)]);
+    const handleClickReset = () => {
+        if (!selectedSnapshotId)
+            return;
+        onResetClone(selectedSnapshotId);
+        onClose();
+    };
+    const handleClickResetToLatest = () => {
+        if (!sortedSnapshots)
+            return;
+        const [latestSnapshot] = sortedSnapshots;
+        if (!latestSnapshot)
+            return;
+        onResetClone(latestSnapshot.id);
+        onClose();
+    };
+    const isSnapshotsSelectingSupported = Boolean(props.version);
+    const isSnapshotsSelectingDisabled = !sortedSnapshots || !isSnapshotsSelectingSupported;
+    return (_jsxs(Modal, { title: `Reset clone ${clone.id}`, isOpen: isOpen, onClose: onClose, titleRightContent: !sortedSnapshots && _jsx(Spinner, { size: "sm" }), children: [_jsxs(Text, { children: ["All changes to the clone ", _jsx(ImportantText, { children: clone.id }), " will be reset to chosen data state time."] }), _jsx(Select, { disabled: isSnapshotsSelectingDisabled, label: "Data state time", value: selectedSnapshotId, items: (_a = sortedSnapshots === null || sortedSnapshots === void 0 ? void 0 : sortedSnapshots.map((snapshot, i) => {
+                    var _a;
+                    const isLatest = i === 0;
+                    const isCurrent = snapshot.id === ((_a = clone.snapshot) === null || _a === void 0 ? void 0 : _a.id);
+                    return {
+                        value: snapshot.id,
+                        children: (_jsxs(_Fragment, { children: [snapshot.dataStateAt, " (", formatDistanceToNowStrict(snapshot.dataStateAtDate, {
+                                    addSuffix: true,
+                                }), ")", isLatest && (_jsx("span", { className: classes.snapshotTag, children: "Latest" })), isCurrent && (_jsx("span", { className: classes.snapshotTag, children: "Current" }))] })),
+                    };
+                })) !== null && _a !== void 0 ? _a : [], onChange: (e) => setSelectedSnapshotId(e.target.value), fullWidth: true, className: classes.snapshots }), _jsx(SimpleModalControls, { items: [
+                    {
+                        text: 'Cancel',
+                        onClick: onClose,
+                    },
+                    {
+                        text: 'Reset to latest',
+                        onClick: handleClickResetToLatest,
+                        isDisabled: isSnapshotsSelectingDisabled,
+                    },
+                    {
+                        text: 'Reset',
+                        isDisabled: !selectedSnapshotId,
+                        variant: 'primary',
+                        onClick: handleClickReset,
+                    },
+                ] })] }));
+};

package/components/SectionTitle/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type Props = {
+    level: 1 | 2;
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    text: React.ReactNode;
+    className?: string;
+    rightContent?: React.ReactNode;
+    children?: React.ReactNode;
+    contentClassName?: string;
+};
+export declare const SectionTitle: (props: Props) => JSX.Element;
+export {};

package/components/SectionTitle/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
+import { colors } from '@postgres.ai/shared/styles/colors';
+const LEVEL_TO_FONT_SIZE = {
+    1: '16px',
+    2: '14px',
+};
+const LEVEL_TO_BOTTOM_PADDING = {
+    1: '16px',
+    2: '8px',
+};
+const useStyles = makeStyles({
+    root: {
+        borderBottom: `1px solid ${colors.consoleStroke}`,
+    },
+    content: (props) => ({
+        display: 'flex',
+        alignItems: 'center',
+        paddingBottom: LEVEL_TO_BOTTOM_PADDING[props.level],
+    }),
+    text: (props) => ({
+        margin: '0 10px 0 0',
+        fontSize: LEVEL_TO_FONT_SIZE[props.level],
+    }),
+}, { index: 1 });
+export const SectionTitle = (props) => {
+    const { text, tag: Tag, level, rightContent, children, className, contentClassName, } = props;
+    const classes = useStyles({ level });
+    return (_jsxs("div", { className: clsx(classes.root, className), children: [_jsxs("div", { className: clsx(classes.content, contentClassName), children: [_jsx(Tag, { className: classes.text, children: text }), rightContent] }), children] }));
+};

package/components/Select/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TextFieldProps } from '@postgres.ai/shared/components/TextField';
+declare type Value = string | number;
+declare type Props = {
+    items: {
+        value: Value;
+        children: React.ReactNode;
+    }[];
+    value: Value | null;
+    onChange: TextFieldProps['onChange'];
+    className?: TextFieldProps['className'];
+    label: TextFieldProps['label'];
+    fullWidth?: TextFieldProps['fullWidth'];
+    disabled?: TextFieldProps['disabled'];
+    error?: boolean;
+};
+export declare const Select: (props: Props) => JSX.Element;
+export {};

package/components/Select/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuItem } from '@material-ui/core';
+import { TextField } from '@postgres.ai/shared/components/TextField';
+export const Select = (props) => {
+    const { items, ...textFieldProps } = props;
+    return (_jsx(TextField, { select: true, ...textFieldProps, children: items.map((item, i) => {
+            return (_jsx(MenuItem, { value: item.value, children: item.children }, `${item.value}-${i}`));
+        }) }));
+};

package/components/SimpleModalControls/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type Props = {
+    items: {
+        text: string;
+        variant?: 'primary' | 'secondary';
+        onClick: () => void;
+        isDisabled?: boolean;
+    }[];
+};
+export declare const SimpleModalControls: (props: Props) => JSX.Element;
+export {};

package/components/SimpleModalControls/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { Button } from '@postgres.ai/shared/components/Button';
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        marginTop: '16px',
+    },
+    button: {
+        marginLeft: '8px',
+    },
+}, { index: 1 });
+export const SimpleModalControls = (props) => {
+    const classes = useStyles();
+    return (_jsx("div", { className: classes.root, children: props.items.map((item) => {
+            return (_jsx(Button, { className: classes.button, onClick: item.onClick, variant: item.variant, isDisabled: item.isDisabled, children: item.text }, item.text));
+        }) }));
+};

package/components/Spinner/icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SpinnerIcon: ({ className }: {
+    className: string;
+}) => JSX.Element;

package/components/Spinner/icon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SpinnerIcon = ({ className }) => (_jsxs("svg", { width: "144px", height: "144px", viewBox: "0 0 144 144", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", className: className, children: [_jsx("title", { children: "Oval" }), _jsx("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", strokeDasharray: "100.5309677124023", strokeLinecap: "round", children: _jsx("path", { d: "M72,136 C107.346224,136 136,107.346224 136,72 C136,36.653776 107.346224,8 72,8 C36.653776,8 8,36.653776 8,72 C8,107.346224 36.653776,136 72,136 Z", id: "Oval", stroke: "currentColor", strokeWidth: "16" }) })] }));

package/components/Spinner/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type Size = 'sm' | 'md' | 'lg';
+export declare type Props = {
+    size?: Size;
+    className?: string;
+};
+export declare const Spinner: (props: Props) => JSX.Element;

package/components/Spinner/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { SpinnerIcon } from './icon';
+import styles from './styles.module.scss';
+export const Spinner = (props) => {
+    const { size = 'md' } = props;
+    return _jsx(SpinnerIcon, { className: cn(styles.root, styles[size], props.className) });
+};

package/components/Status/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type Type = 'ok' | 'warning' | 'error' | 'waiting' | 'unknown';
+export declare type Props = {
+    type?: Type;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+    classNameIcon?: string;
+    disableColor?: boolean;
+};
+export declare const Status: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Status/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import React from 'react';
+import clsx from 'clsx';
+import { WarningIcon } from '@postgres.ai/shared/icons/Warning';
+import { CircleIcon } from '@postgres.ai/shared/icons/Circle';
+import styles from './styles.module.scss';
+const TYPE_TO_ICON = {
+    ok: _jsx(CircleIcon, { className: styles.icon }),
+    warning: _jsx(WarningIcon, { className: styles.icon }),
+    error: _jsx(WarningIcon, { className: styles.icon }),
+    waiting: _jsx(CircleIcon, { className: styles.icon }),
+    unknown: _jsx(CircleIcon, { className: styles.icon }),
+};
+export const Status = React.forwardRef((props, ref) => {
+    const { type = 'ok', children = type, icon = TYPE_TO_ICON[type], className, classNameIcon, disableColor, ...hiddenProps } = props;
+    return (_jsxs("span", { ...hiddenProps, className: clsx(styles.root, !disableColor && styles[type], className), ref: ref, children: [icon && (_jsxs("span", { className: clsx(styles.iconContainer, classNameIcon), children: [icon, "\u2009"] })), children] }));
+});

package/components/StubContainer/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const StubContainer: (props: Props) => JSX.Element;
+export {};

package/components/StubContainer/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import clsx from 'clsx';
+const useStyles = makeStyles({
+    root: {
+        padding: '20px 0',
+        flex: '1 1 100%',
+    },
+}, { index: 1 });
+export const StubContainer = (props) => {
+    const classes = useStyles();
+    return (_jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", className: clsx(classes.root, props.className), children: props.children }));
+};

package/components/StubSpinner/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Props as SpinnerProps } from '@postgres.ai/shared/components/Spinner';
+declare type Props = {
+    className?: string;
+    size?: SpinnerProps['size'];
+};
+export declare const StubSpinner: (props: Props) => JSX.Element;
+export {};

package/components/StubSpinner/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import { Spinner, } from '@postgres.ai/shared/components/Spinner';
+import { colors } from '@postgres.ai/shared/styles/colors';
+const useStyles = makeStyles({
+    root: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: colors.white,
+    },
+}, { index: 1 });
+export const StubSpinner = (props) => {
+    const { className, size = 'lg' } = props;
+    const classes = useStyles();
+    return (_jsx("div", { className: clsx(classes.root, className), children: _jsx(Spinner, { size: size }) }));
+};

package/components/StubSpinnerFlex/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Size } from '@postgres.ai/shared/components/Spinner';
+declare type Props = {
+    mode?: 'absolute' | 'flex';
+    size?: Size;
+    className?: string;
+};
+export declare const StubSpinner: (props: Props) => JSX.Element;
+export {};

package/components/StubSpinnerFlex/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import styles from './styles.module.scss';
+export const StubSpinner = (props) => {
+    const { mode = 'flex', size = 'lg' } = props;
+    return (_jsx("div", { className: cn(styles.root, props.className, styles[mode]), children: _jsx(Spinner, { size: size }) }));
+};

package/components/SyntaxHighlight/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const SyntaxHighlight: ({ content, wrapLines, id, style, }: {
+    content: string;
+    wrapLines?: boolean | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+}) => JSX.Element;

package/components/SyntaxHighlight/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import copyToClipboard from 'copy-to-clipboard';
+import { makeStyles, IconButton } from '@material-ui/core';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+const useStyles = makeStyles({
+    copyFieldContainer: {
+        position: 'relative',
+        display: 'inline-flex',
+        maxWidth: '100%',
+        width: '100%',
+        margin: "12px 0",
+        backgroundColor: 'rgb(250, 250, 250)',
+        '& code': {
+            whiteSpace: 'inherit !important',
+        },
+    },
+    copyButton: {
+        top: 6,
+        position: 'sticky',
+        right: 6,
+        zIndex: 10,
+        width: 26,
+        height: 26,
+        padding: 8,
+        backgroundColor: 'rgba(128, 128, 128, 0.15)',
+        transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+        '&:hover': {
+            backgroundColor: 'rgba(128, 128, 128, 0.25)',
+        },
+    },
+}, { index: 1 });
+export const SyntaxHighlight = ({ content, wrapLines, id, style, }) => {
+    const classes = useStyles();
+    const copyContent = () => {
+        if (!content) {
+            const codeTag = document.getElementById(id);
+            if (codeTag) {
+                copyToClipboard(codeTag.innerText);
+            }
+            return;
+        }
+        copyToClipboard(content.replace(/^\s*[\r\n]/gm, ''));
+    };
+    const fontSize = style ? '12px' : '14px';
+    return (_jsxs("div", { className: classes.copyFieldContainer, style: style, children: [_jsx(SyntaxHighlighter, { id: id, language: "bash", wrapLines: wrapLines, style: oneLight, customStyle: {
+                    borderRadius: 4,
+                    fontSize: fontSize,
+                    margin: 0,
+                    border: 0,
+                    flexGrow: 1,
+                    height: '100%',
+                }, codeTagProps: {
+                    style: {
+                        fontSize: fontSize,
+                    },
+                }, lineProps: {
+                    style: {
+                        display: 'flex',
+                        fontSize: fontSize,
+                    },
+                }, children: content }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: copyContent, children: _jsx(Tooltip, { content: 'Copy', children: icons.copyIcon }) })] }));
+};

package/components/Table/RowMenu/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+declare type Action = {
+    name: string;
+    onClick: () => void;
+    isDisabled?: boolean;
+};
+export declare type Props = {
+    actions: Action[];
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    direction?: 'left' | 'right';
+};
+export declare const RowMenu: (props: Props) => JSX.Element;
+export {};

package/components/Table/RowMenu/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useState } from 'react';
+import { Menu, MenuItem, IconButton, makeStyles } from '@material-ui/core';
+import { MoreVert } from '@material-ui/icons';
+import clsx from 'clsx';
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex';
+const DIRECTION_TO_ORIGIN = {
+    left: 'right',
+    right: 'left',
+};
+const useStyles = makeStyles({
+    button: {
+        '&:disabled': {
+            cursor: 'not-allowed',
+            pointerEvents: 'all',
+        },
+    },
+    spinner: {
+        background: 'transparent',
+    },
+    hiddenIcon: {
+        visibility: 'hidden',
+    },
+}, { index: 1 });
+export const RowMenu = (props) => {
+    const { actions, isDisabled = false, isLoading = false, direction = 'right', } = props;
+    const classes = useStyles();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isOpen = Boolean(anchorEl);
+    const openMenu = (e) => setAnchorEl(e.currentTarget);
+    const closeMenu = () => setAnchorEl(null);
+    return (_jsxs(_Fragment, { children: [_jsxs(IconButton, { onClick: openMenu, disabled: isDisabled || isLoading, className: classes.button, children: [_jsx(MoreVert, { className: clsx(isLoading && classes.hiddenIcon) }), isLoading && (_jsx(StubSpinner, { size: "sm", mode: "absolute", className: classes.spinner }))] }), _jsx(Menu, { anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: DIRECTION_TO_ORIGIN[direction],
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: DIRECTION_TO_ORIGIN[direction],
+                }, anchorEl: anchorEl, keepMounted: true, open: isOpen, onClose: closeMenu, children: actions.map((action, i) => {
+                    return (_jsx(MenuItem, { onClick: () => {
+                            closeMenu();
+                            action.onClick();
+                        }, disabled: action.isDisabled, children: action.name }, i));
+                }) })] }));
+};

package/components/Table/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TableProps as TableBaseProps, TableHead, TableRow, TableCellProps as TableCellBaseProps, TableBody } from '@material-ui/core';
+import { Props as RowMenuProps } from './RowMenu';
+declare type TableProps = TableBaseProps;
+declare const Table: (props: TableProps) => JSX.Element;
+declare type TableHeaderCellProps = TableCellBaseProps;
+declare const TableHeaderCell: (props: TableHeaderCellProps) => JSX.Element;
+declare type TableBodyCellProps = TableCellBaseProps;
+declare const TableBodyCell: (props: TableBodyCellProps) => JSX.Element;
+declare type TableBodyCellMenuProps = TableBodyCellProps & RowMenuProps;
+declare const TableBodyCellMenu: (props: TableBodyCellMenuProps) => JSX.Element;
+export { Table, TableHead, TableRow, TableBody, TableHeaderCell, TableBodyCell, TableBodyCellMenu, };

package/components/Table/index.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table as TableBase, TableHead, TableRow, TableCell as TableCellBase, TableBody, makeStyles, } from '@material-ui/core';
+import clsx from 'clsx';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { RowMenu } from './RowMenu';
+const cellStyles = {
+    paddingLeft: '8px',
+    paddingRight: '8px',
+    borderColor: colors.consoleStroke,
+};
+const useTableStyles = makeStyles({
+    root: {
+        whiteSpace: 'nowrap',
+        '& .MuiTableCell-root': {
+            lineHeight: 'normal',
+        },
+    },
+}, { index: 1 });
+const Table = (props) => {
+    const classes = useTableStyles();
+    return (_jsx(TableBase, { ...props, className: clsx(props.className, classes.root) }));
+};
+const useTableHeaderCellStyles = makeStyles({
+    root: {
+        ...cellStyles,
+        color: colors.pgaiDarkGray,
+        paddingTop: '12px',
+        paddingBottom: '12px',
+    },
+}, { index: 1 });
+const TableHeaderCell = (props) => {
+    const classes = useTableHeaderCellStyles();
+    return (_jsx(TableCellBase, { ...props, className: clsx(props.className, classes.root) }));
+};
+const useTableBodyCellStyles = makeStyles({
+    root: {
+        ...cellStyles,
+        fontSize: '12px',
+        paddingTop: '8px',
+        paddingBottom: '8px',
+    },
+}, { index: 1 });
+const TableBodyCell = (props) => {
+    const classes = useTableBodyCellStyles();
+    return (_jsx(TableCellBase, { ...props, className: clsx(props.className, classes.root) }));
+};
+const useTableBodyCellMenuStyles = makeStyles({
+    root: {
+        padding: 0,
+    },
+}, { index: 1 });
+const TableBodyCellMenu = (props) => {
+    const classes = useTableBodyCellMenuStyles();
+    const { isLoading, isDisabled, children, ...hiddenProps } = props;
+    const handleClick = (e) => e.stopPropagation();
+    return (_jsxs(TableBodyCell, { ...hiddenProps, className: classes.root, onClick: handleClick, children: [_jsx(RowMenu, { ...hiddenProps, isLoading: isLoading, isDisabled: isDisabled }), children] }));
+};
+export { Table, TableHead, TableRow, TableBody, TableHeaderCell, TableBodyCell, TableBodyCellMenu, };

package/components/Text/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+};
+export declare const Text: (props: Props) => JSX.Element;
+export {};

package/components/Text/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+const useStyles = makeStyles({
+    root: {
+        margin: 0,
+    },
+}, { index: 1 });
+export const Text = (props) => {
+    const classes = useStyles();
+    return _jsx("p", { className: classes.root, children: props.children });
+};

package/components/TextField/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { InputProps, TextFieldProps as TextFieldPropsBase } from '@material-ui/core';
+export declare type TextFieldProps = {
+    label?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: TextFieldPropsBase['value'];
+    className?: string;
+    fullWidth?: boolean;
+    autoFocus?: boolean;
+    id?: TextFieldPropsBase['id'];
+    multiline?: TextFieldPropsBase['multiline'];
+    onKeyDown?: TextFieldPropsBase['onKeyDown'];
+    onChange?: TextFieldPropsBase['onChange'];
+    InputProps?: InputProps;
+    InputLabelProps?: TextFieldPropsBase['InputLabelProps'];
+    children?: TextFieldPropsBase['children'];
+    select?: TextFieldPropsBase['select'];
+    type?: 'text' | 'password';
+    error?: boolean;
+    placeholder?: string;
+    onBlur?: TextFieldPropsBase['onBlur'];
+    onFocus?: TextFieldPropsBase['onFocus'];
+    name?: TextFieldPropsBase['name'];
+    helperText?: TextFieldPropsBase['helperText'];
+};
+export declare const TextField: (props: TextFieldProps) => JSX.Element;