@veritone-ce/design-system 2.3.14 → 2.4.1

package/dist/esm/Table/AutoTable/common.js

@@ -0,0 +1,138 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel } from '@tanstack/react-table';
+import React__default from 'react';
+import TableCell from '../TableCell/index.js';
+import { Box } from '@mui/material';
+
+function createColumnHelper() {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === "function" ? {
+        ...column,
+        accessorFn: accessor
+      } : {
+        ...column,
+        accessorKey: accessor
+      };
+    },
+    display: (column) => column
+    // group: column => column
+  };
+}
+function useAutoTable(options) {
+  const columnsProp = options.columns;
+  const mappedColumns = React__default.useMemo(
+    () => mapColumnDefs(columnsProp),
+    [columnsProp]
+  );
+  return useReactTable({
+    data: options.data,
+    columns: mappedColumns,
+    manualSorting: options.manualSorting,
+    manualPagination: options.manualPagination,
+    enableSorting: options.enableSorting,
+    enableRowSelection: options.enableRowSelection,
+    meta: options.meta,
+    getRowId: options.getRowId,
+    defaultColumn: {
+      cell: (info) => /* @__PURE__ */ jsx(TableCell, { children: info.renderValue() })
+    },
+    initialState: {
+      pagination: {
+        pageSize: options.pagination.pageSize
+      }
+    },
+    state: {
+      pagination: options.pagination,
+      sorting: options.sorting,
+      rowSelection: options.rowSelection
+    },
+    onSortingChange: (updater) => {
+      const value = typeof updater === "function" ? updater(options.sorting) : updater;
+      options.onSortingChange(value);
+    },
+    onRowSelectionChange: (updater) => {
+      const value = typeof updater === "function" ? updater(options.rowSelection) : updater;
+      options.onRowSelectionChange(value);
+    },
+    onPaginationChange: () => {
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel()
+  });
+}
+function mapColumnDefs(columnDefs) {
+  return columnDefs.map(mapColumnDef);
+}
+function mapColumnDef(columnDef) {
+  const meta = {
+    noVerticalPadding: columnDef.noVerticalPadding
+  };
+  const mappedDef = {
+    id: columnDef.id,
+    accessorFn: columnDef.accessorFn,
+    accessorKey: columnDef.accessorKey,
+    meta,
+    getUniqueValues: columnDef.getUniqueValues,
+    header: columnDef.header !== void 0 ? makeHeaderMappingComponent(columnDef.header) : void 0,
+    cell: columnDef.cell !== void 0 ? makeCellMappingComponent(columnDef.cell) : void 0,
+    enableMultiSort: columnDef.enableMultiSort,
+    enableSorting: columnDef.enableSorting,
+    invertSorting: columnDef.invertSorting,
+    sortDescFirst: columnDef.sortDescFirst,
+    sortingFn: columnDef.sortingFn,
+    sortUndefined: columnDef.sortUndefined
+  };
+  Object.keys(mappedDef).forEach((key) => {
+    const k = key;
+    if (mappedDef[k] === void 0) {
+      delete mappedDef[k];
+    }
+  });
+  return mappedDef;
+}
+function makeHeaderMappingComponent(header) {
+  if (typeof header === "string") {
+    return header;
+  }
+  return (props) => header({
+    column: props.column,
+    header: props.header,
+    table: props.table,
+    meta: props.table.options.meta
+  });
+}
+function makeCellMappingComponent(cell) {
+  if (typeof cell === "string") {
+    return cell;
+  }
+  return (props) => cell({
+    cell: props.cell,
+    column: props.column,
+    getValue: props.getValue,
+    renderValue: props.renderValue,
+    row: props.row,
+    table: props.table,
+    meta: props.table.options.meta
+  });
+}
+const DefaultErrorContainer = () => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingTop: "10px",
+        paddingBottom: "10px"
+      },
+      children: /* @__PURE__ */ jsx("div", { children: "Some error message" })
+    }
+  );
+};
+
+export { DefaultErrorContainer, createColumnHelper, mapColumnDef, mapColumnDefs, useAutoTable };

package/dist/esm/Table/AutoTable/controlled.js

@@ -0,0 +1,98 @@
+'use strict';
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { flexRender } from '@tanstack/react-table';
+import { Table, TableHead, TableSortLabel, TableBody, TableMessage, TableFooter } from '../index.js';
+import TableRow from '../TableRow/index.js';
+import TableCell from '../TableCell/index.js';
+import React__default from 'react';
+import { visuallyHidden } from '@mui/utils';
+import { useAutoTable, DefaultErrorContainer } from './common.js';
+import TablePagination from '../../TablePagination/index.js';
+import CircularProgress from '../../CircularProgress/index.js';
+
+function ControlledAutoTable({
+  stickyHeader,
+  loading,
+  zeroStateMessage,
+  error,
+  ErrorContainer = DefaultErrorContainer,
+  className,
+  ...options
+}) {
+  const table = useAutoTable(options);
+  const rows = options.data;
+  const manualRowCount = options.manualRowCount ?? rows.length;
+  const showMessage = error || loading || rows.length === 0;
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(
+    Table,
+    {
+      sx: {
+        borderCollapse: "separate",
+        ...stickyHeader ? {
+          "& th": {
+            position: "sticky",
+            top: typeof stickyHeader === "object" ? stickyHeader.offset : 0,
+            zIndex: 2,
+            backgroundColor: (theme) => theme.palette.background.default
+          }
+        } : {}
+      },
+      children: [
+        /* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+          const isSorted = header.column.getIsSorted();
+          return /* @__PURE__ */ jsx(TableCell, { variant: "header", children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+            TableSortLabel,
+            {
+              active: isSorted !== false,
+              direction: isSorted !== false ? isSorted : "asc",
+              onClick: header.column.getToggleSortingHandler(),
+              children: [
+                flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ),
+                isSorted !== false ? /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
+              ]
+            }
+          ) : flexRender(
+            header.column.columnDef.header,
+            header.getContext()
+          ) }, header.id);
+        }) }, headerGroup.id)) }),
+        showMessage ? /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: table.getAllFlatColumns().length, children: error ? /* @__PURE__ */ jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              paddingTop: "10px",
+              paddingBottom: "10px"
+            },
+            children: /* @__PURE__ */ jsx(CircularProgress, {})
+          }
+        ) : rows.length === 0 ? /* @__PURE__ */ jsx(TableMessage, { children: zeroStateMessage ?? "No data found" }) : null }) }) }) : /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getAllCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) }),
+        options.enablePagination && (options.manualPagination ? manualRowCount : options.data.length) > table.initialState.pagination.pageSize && /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllFlatColumns().length, children: /* @__PURE__ */ jsx(
+          TablePagination,
+          {
+            count: options.manualPagination ? manualRowCount : table.getFilteredRowModel().rows.length,
+            rowsPerPage: table.getState().pagination.pageSize,
+            page: table.getState().pagination.pageIndex + 1,
+            onChangePage: (newPage) => {
+              table.setPageIndex(newPage - 1);
+              options.onPageChange(newPage - 1);
+            },
+            rowsPerPageOptions: [10, 25, 50, 100],
+            onRowsPerPageChange: (rowsPerPage) => {
+              const size = rowsPerPage ?? 10;
+              table.setPageSize(size);
+              options.onRowsPerPageChange(size);
+            }
+          }
+        ) }) }) })
+      ]
+    }
+  ) });
+}
+
+export { ControlledAutoTable as default };

package/dist/esm/Table/AutoTable/index.js

@@ -0,0 +1,106 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import VirtualControlledAutoTable from './virtual.js';
+import ControlledAutoTable from './controlled.js';
+import '@tanstack/react-table';
+import '../TableCell/index.js';
+import '@mui/material';
+
+function AutoTable(props) {
+  const enableSorting = props.enableSorting ?? true;
+  const [managedSorting, setManagedSorting] = useManagedStateSwitch(
+    props.sorting,
+    props.onSortingChange,
+    props.defaultSorting ?? []
+  );
+  const enableRowSelection = props.enableRowSelection ?? props.rowSelection !== void 0;
+  const [managedRowSelection, setManagedRowSelection] = useManagedStateSwitch(
+    props.rowSelection,
+    props.onRowSelectionChange,
+    {}
+  );
+  const enablePagination = props.enablePagination ?? true;
+  const [managedPage, setManagedPage] = useManagedStateSwitch(
+    props.page,
+    props.onPageChange,
+    0
+  );
+  const [managedRowsPerPage, setManagedRowsPerPage] = useManagedStateSwitch(
+    props.rowsPerPage,
+    props.onRowsPerPageChange,
+    10
+  );
+  const options = {
+    data: props.data,
+    columns: props.columns,
+    meta: props.meta,
+    getRowId: props.getRowId,
+    // sorting
+    sorting: managedSorting,
+    enableSorting,
+    onSortingChange: setManagedSorting,
+    manualSorting: props.manualSorting,
+    // selection
+    rowSelection: managedRowSelection,
+    enableRowSelection,
+    onRowSelectionChange: setManagedRowSelection,
+    // pagination
+    pagination: {
+      pageIndex: managedPage,
+      pageSize: enablePagination ? managedRowsPerPage : props.data.length
+    },
+    enablePagination,
+    onPageChange: setManagedPage,
+    onRowsPerPageChange: setManagedRowsPerPage,
+    manualPagination: props.manualRowCount !== void 0,
+    manualRowCount: props.manualRowCount
+  };
+  if (props.virtualizer) {
+    return /* @__PURE__ */ jsx(
+      VirtualControlledAutoTable,
+      {
+        ...options,
+        ...props.virtualizer,
+        stickyHeader: props.stickyHeader,
+        loading: props.loading,
+        zeroStateMessage: props.zeroStateMessage,
+        error: props.error,
+        ErrorContainer: props.ErrorContainer,
+        sx: props.sx,
+        className: props.className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ControlledAutoTable,
+    {
+      ...options,
+      stickyHeader: props.stickyHeader,
+      loading: props.loading,
+      zeroStateMessage: props.zeroStateMessage,
+      error: props.error,
+      ErrorContainer: props.ErrorContainer,
+      className: props.className
+    }
+  );
+}
+function useManagedStateSwitch(controlled, setControlled, uncontrolledDefault) {
+  const [uncontrolled, setUncontrolled] = React__default.useState(uncontrolledDefault);
+  const [managed, setManaged] = controlled !== void 0 ? [
+    controlled,
+    (u) => {
+      setControlled?.(u);
+    }
+  ] : [
+    uncontrolled,
+    (u) => {
+      setUncontrolled(u);
+      setControlled?.(u);
+    }
+  ];
+  return [managed, setManaged];
+}
+
+export { AutoTable as default };

package/dist/esm/Table/AutoTable/virtual.js

@@ -0,0 +1,171 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { flexRender } from '@tanstack/react-table';
+import { Table, TableHead, TableSortLabel, TableBody, TableMessage } from '../index.js';
+import TableRow from '../TableRow/index.js';
+import TableCell from '../TableCell/index.js';
+import React__default from 'react';
+import { styled, Box, CircularProgress } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+import { useAutoTable, DefaultErrorContainer } from './common.js';
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+const TableMessageMaxHeight = 100;
+const TableContainer = styled(Box)(
+  ({ virtualizerTotalHeight }) => ({
+    height: `${virtualizerTotalHeight}px`
+  })
+);
+function VirtualControlledAutoTable({
+  stickyHeader,
+  loading,
+  zeroStateMessage,
+  error,
+  ErrorContainer = DefaultErrorContainer,
+  scrollOffset,
+  getScrollElement,
+  renderWhenNotVisible = true,
+  rowSize,
+  headerSize = 50,
+  overscan,
+  debug,
+  sx,
+  className,
+  ...options
+}) {
+  const table = useAutoTable(options);
+  const { rows } = table.getRowModel();
+  const offsetFromScrollEl = scrollOffset ?? 0;
+  const virtualizer = useVirtualizer({
+    getScrollElement,
+    scrollMargin: offsetFromScrollEl,
+    count: rows.length,
+    overscan: overscan ?? 10,
+    estimateSize: () => rowSize
+  });
+  const showMessage = error || loading || rows.length === 0;
+  const rowsHeight = rows.length * rowSize;
+  const totalHeight = headerSize + (showMessage ? TableMessageMaxHeight : rowsHeight);
+  const visibilityOverscan = virtualizer.options.overscan * rowSize;
+  const visibilityBounds = {
+    lower: offsetFromScrollEl - visibilityOverscan,
+    upper: offsetFromScrollEl + totalHeight + visibilityOverscan
+  };
+  const tableIsVisible = renderWhenNotVisible || virtualizer.scrollOffset + virtualizer.scrollRect.height >= visibilityBounds.lower && virtualizer.scrollOffset <= visibilityBounds.upper;
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ jsxs(
+    TableContainer,
+    {
+      virtualizerTotalHeight: totalHeight,
+      sx,
+      className,
+      children: [
+        debug && /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              color: "red",
+              zIndex: 100,
+              fontSize: 10
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { marginRight: 5 }, children: virtualizer.scrollOffset }),
+              /* @__PURE__ */ jsx("span", { style: { marginRight: 5 }, children: virtualizer.scrollOffset + virtualizer.scrollRect.height }),
+              /* @__PURE__ */ jsx("span", { style: { marginRight: 5 }, children: offsetFromScrollEl }),
+              /* @__PURE__ */ jsx("span", { style: { marginRight: 5 }, children: visibilityBounds.lower }),
+              /* @__PURE__ */ jsx("span", { style: { marginRight: 5 }, children: visibilityBounds.upper })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          Table,
+          {
+            sx: {
+              borderCollapse: "separate",
+              ...stickyHeader ? {
+                "& th": {
+                  position: "sticky",
+                  top: typeof stickyHeader === "object" ? stickyHeader.offset : 0,
+                  zIndex: 2,
+                  backgroundColor: (theme) => theme.palette.background.default
+                }
+              } : {}
+            },
+            children: [
+              /* @__PURE__ */ jsx(TableHead, { sx: { height: headerSize }, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                const isSorted = header.column.getIsSorted();
+                return /* @__PURE__ */ jsx(TableCell, { variant: "header", children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+                  TableSortLabel,
+                  {
+                    active: isSorted !== false,
+                    direction: isSorted !== false ? isSorted : "asc",
+                    onClick: header.column.getToggleSortingHandler(),
+                    children: [
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      ),
+                      isSorted !== false ? /* @__PURE__ */ jsx(Box, { component: "span", sx: visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
+                    ]
+                  }
+                ) : flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }, header.id);
+              }) }, headerGroup.id)) }),
+              showMessage ? /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  colSpan: table.getAllFlatColumns().length,
+                  children: /* @__PURE__ */ jsx(Box, { children: error ? /* @__PURE__ */ jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "center",
+                        paddingTop: "10px",
+                        paddingBottom: "10px"
+                      },
+                      children: /* @__PURE__ */ jsx(CircularProgress, {})
+                    }
+                  ) : rows.length === 0 ? /* @__PURE__ */ jsx(TableMessage, { children: zeroStateMessage ?? "No data found" }) : null })
+                }
+              ) }) }) : tableIsVisible && /* @__PURE__ */ jsx(
+                TableBody,
+                {
+                  sx: {
+                    "&::after": {
+                      display: "block",
+                      content: "''",
+                      // this ensures the table takes up as much size as the total elements by adding padding to the end
+                      height: `${(rows.length - virtualItems.length) * rowSize}px`
+                    }
+                  },
+                  children: virtualItems.map((virtualRow) => {
+                    const row = rows[virtualRow.index];
+                    return /* @__PURE__ */ jsx(
+                      TableRow,
+                      {
+                        children: row.getAllCells().map((cell) => /* @__PURE__ */ jsx(React__default.Fragment, { children: flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        ) }, cell.id))
+                      },
+                      row.id
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { TableMessageMaxHeight, VirtualControlledAutoTable as default };

package/dist/esm/Table/TableCell/index.js

@@ -0,0 +1,46 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { forwardRef } from 'react';
+import styles from './styles.module.scss.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../../styles/css-vars.js';
+import { cx } from '../../styles/cx.js';
+import '../../styles/defaultTheme.js';
+import '@mui/system';
+import '../../Box/index.js';
+import '../../styles/styled.js';
+
+const TableCell = forwardRef(
+  ({
+    children,
+    "data-testid": dataTestId,
+    noVerticalPadding,
+    variant = "data",
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const Tag = React__default.useMemo(
+      () => variant === "header" ? "th" : "td",
+      [variant]
+    );
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        ...props,
+        "data-testid": dataTestId,
+        className: cx(styles.tableCell, className),
+        style: {
+          padding: `${noVerticalPadding ? "0px" : "14.25px"} ${"16px"}`,
+          ...style
+        },
+        children
+      }
+    );
+  }
+);
+
+export { TableCell as default };

package/dist/esm/Table/TableCell/styles.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"tableCell":"vt_ce_TableCell_tableCell__a1247ad8"};
+
+export { styles as default };

package/dist/esm/Table/TableRow/index.js

@@ -0,0 +1,30 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styles from './styles.module.scss.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../../styles/css-vars.js';
+import { cx } from '../../styles/cx.js';
+import '../../styles/defaultTheme.js';
+import '@mui/system';
+import '../../Box/index.js';
+import '../../styles/styled.js';
+
+const TableRow = forwardRef(
+  ({ children, "data-testid": dataTestId, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ref,
+        ...props,
+        "data-testid": dataTestId,
+        className: cx(styles.tableRow, className),
+        children
+      }
+    );
+  }
+);
+
+export { TableRow as default };

package/dist/esm/Table/TableRow/styles.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"tableRow":"vt_ce_TableRow_tableRow__20cdba2f"};
+
+export { styles as default };

package/dist/esm/Table/index.js

@@ -0,0 +1,69 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { Table as Table$1, TableBody as TableBody$1, TableFooter as TableFooter$1, TableHead as TableHead$1, TableSortLabel as TableSortLabel$1 } from '@mui/material';
+import Typography from '../Typography/index.js';
+import styles from './styles.module.scss.js';
+
+const Table = (props) => {
+  return /* @__PURE__ */ jsx(
+    Table$1,
+    {
+      "data-testid": props["data-testid"],
+      stickyHeader: props.stickyHeader,
+      sx: props.sx,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableBody = (props) => {
+  return /* @__PURE__ */ jsx(
+    TableBody$1,
+    {
+      "data-testid": props["data-testid"],
+      sx: props.sx,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableFooter = (props) => {
+  return /* @__PURE__ */ jsx(
+    TableFooter$1,
+    {
+      "data-testid": props["data-testid"],
+      sx: props.sx,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableHead = (props) => {
+  return /* @__PURE__ */ jsx(
+    TableHead$1,
+    {
+      "data-testid": props["data-testid"],
+      sx: props.sx,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableSortLabel = (props) => {
+  return /* @__PURE__ */ jsx(
+    TableSortLabel$1,
+    {
+      active: props.active,
+      direction: props.direction,
+      hideSortIcon: props.hideSortIcon,
+      onClick: props.onClick,
+      disabled: props.disabled,
+      children: props.children
+    }
+  );
+};
+const TableMessage = (props) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.tableMessageWrapper, children: /* @__PURE__ */ jsx(Typography, { className: styles.tableMessage, children: props.children }) });
+};
+
+export { Table, TableBody, TableFooter, TableHead, TableMessage, TableSortLabel };

package/dist/esm/Table/styles.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"tableMessageWrapper":"vt_ce_Table_tableMessageWrapper__bd25fe47","tableMessage":"vt_ce_Table_tableMessage__f6316814","checkbox":"vt_ce_Table_checkbox__fcf60b18","selectionTableCell":"vt_ce_Table_selectionTableCell__1edf8bad"};
+
+export { styles as default };

package/dist/esm/Typography/index.js

@@ -42,7 +42,8 @@ const variantComponents = {
   paragraph3: "p",
   button: "span",
   buttonSmall: "span",
-  input: "span"
+  input: "span",
+  statusChip: "span"
 };
 
 export { Typography as default };