@veritone-ce/design-system 2.3.13 → 2.4.0

package/dist/cjs/StatusChip/index.js

@@ -0,0 +1,65 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles_module = require('./styles.module.scss.js');
+require('@capsizecss/core');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('react');
+require('@mui/system');
+require('../Box/index.js');
+require('../styles/styled.js');
+require('@mui/utils');
+require('../Button/index.js');
+require('../IconButton/index.js');
+require('../Icon/internal.js');
+var index = require('../Typography/index.js');
+require('../Checkbox/index.js');
+require('../Chip/index.js');
+require('../DatePicker/index.js');
+require('../FormControl/index.js');
+require('../Dialog/components.js');
+require('../Drawer/components.js');
+require('../Icon/factory.js');
+require('../Input/index.js');
+require('../Menu/controlled.js');
+require('@mui/material/usePagination');
+require('../RadioButton/index.js');
+require('../Select/controlled.js');
+require('@mui/material');
+require('../Table/AutoTable/virtual.js');
+require('@tanstack/react-table');
+require('../Table/TableRow/index.js');
+require('../Table/TableCell/index.js');
+require('../Textarea/index.js');
+require('../Toast/hook.js');
+require('@floating-ui/react');
+
+const StatusChip = ({
+  children,
+  palette = defaultTheme.defaultThemeCssVariableUsages.palette.indicator.info,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": props["data-testid"],
+      style: {
+        // @ts-ignore
+        "--vt-ce-status-chip-base-surface": palette.base.surface,
+        "--vt-ce-status-chip-base-on": palette.base.on,
+        ...props.style
+      },
+      className: cx.cx(styles_module.default.statusChip, props.className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { variant: "statusChip", color: "inherit", leadingTrim: true, children })
+    }
+  );
+};
+
+exports.default = StatusChip;

package/dist/cjs/StatusChip/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"statusChip":"vt_ce_StatusChip_statusChip__6cf32317"};
+
+exports.default = css;

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

@@ -0,0 +1,144 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var React = require('react');
+var index = require('../TableCell/index.js');
+var material = require('@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.useMemo(
+    () => mapColumnDefs(columnsProp),
+    [columnsProp]
+  );
+  return reactTable.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__ */ jsxRuntime.jsx(index.default, { 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: reactTable.getCoreRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getPaginationRowModel: reactTable.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__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      sx: {
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingTop: "10px",
+        paddingBottom: "10px"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Some error message" })
+    }
+  );
+};
+
+exports.DefaultErrorContainer = DefaultErrorContainer;
+exports.createColumnHelper = createColumnHelper;
+exports.mapColumnDef = mapColumnDef;
+exports.mapColumnDefs = mapColumnDefs;
+exports.useAutoTable = useAutoTable;

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

@@ -0,0 +1,102 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var index = require('../index.js');
+var index$1 = require('../TableRow/index.js');
+var index$2 = require('../TableCell/index.js');
+var React = require('react');
+var utils = require('@mui/utils');
+var common = require('./common.js');
+var index$4 = require('../../TablePagination/index.js');
+var index$3 = require('../../CircularProgress/index.js');
+
+function ControlledAutoTable({
+  stickyHeader,
+  loading,
+  zeroStateMessage,
+  error,
+  ErrorContainer = common.DefaultErrorContainer,
+  className,
+  ...options
+}) {
+  const table = common.useAutoTable(options);
+  const rows = options.data;
+  const manualRowCount = options.manualRowCount ?? rows.length;
+  const showMessage = error || loading || rows.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    index.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__ */ jsxRuntime.jsx(index.TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: headerGroup.headers.map((header) => {
+          const isSorted = header.column.getIsSorted();
+          return /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { variant: "header", children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxRuntime.jsxs(
+            index.TableSortLabel,
+            {
+              active: isSorted !== false,
+              direction: isSorted !== false ? isSorted : "asc",
+              onClick: header.column.getToggleSortingHandler(),
+              children: [
+                reactTable.flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ),
+                isSorted !== false ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: utils.visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
+              ]
+            }
+          ) : reactTable.flexRender(
+            header.column.columnDef.header,
+            header.getContext()
+          ) }, header.id);
+        }) }, headerGroup.id)) }),
+        showMessage ? /* @__PURE__ */ jsxRuntime.jsx(index.TableBody, { children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { colSpan: table.getAllFlatColumns().length, children: error ? /* @__PURE__ */ jsxRuntime.jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              paddingTop: "10px",
+              paddingBottom: "10px"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(index$3.default, {})
+          }
+        ) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.TableMessage, { children: zeroStateMessage ?? "No data found" }) : null }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(index.TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: row.getAllCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) }),
+        options.enablePagination && (options.manualPagination ? manualRowCount : options.data.length) > table.initialState.pagination.pageSize && /* @__PURE__ */ jsxRuntime.jsx(index.TableFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: table.getAllFlatColumns().length, children: /* @__PURE__ */ jsxRuntime.jsx(
+          index$4.default,
+          {
+            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);
+            }
+          }
+        ) }) }) })
+      ]
+    }
+  ) });
+}
+
+exports.default = ControlledAutoTable;

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

@@ -0,0 +1,110 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var virtual = require('./virtual.js');
+var controlled = require('./controlled.js');
+require('@tanstack/react-table');
+require('../TableCell/index.js');
+require('@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__ */ jsxRuntime.jsx(
+      virtual.default,
+      {
+        ...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__ */ jsxRuntime.jsx(
+    controlled.default,
+    {
+      ...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.useState(uncontrolledDefault);
+  const [managed, setManaged] = controlled !== void 0 ? [
+    controlled,
+    (u) => {
+      setControlled?.(u);
+    }
+  ] : [
+    uncontrolled,
+    (u) => {
+      setUncontrolled(u);
+      setControlled?.(u);
+    }
+  ];
+  return [managed, setManaged];
+}
+
+exports.default = AutoTable;

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

@@ -0,0 +1,177 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var index = require('../index.js');
+var index$1 = require('../TableRow/index.js');
+var index$2 = require('../TableCell/index.js');
+var React = require('react');
+var material = require('@mui/material');
+var utils = require('@mui/utils');
+var common = require('./common.js');
+var reactVirtual = require('@tanstack/react-virtual');
+var isPropValid = require('@emotion/is-prop-valid');
+
+const TableMessageMaxHeight = 100;
+const TableContainer = material.styled(material.Box, {
+  shouldForwardProp: (prop) => isPropValid(prop)
+})(({ virtualizerTotalHeight }) => ({
+  height: `${virtualizerTotalHeight}px`
+}));
+function VirtualControlledAutoTable({
+  stickyHeader,
+  loading,
+  zeroStateMessage,
+  error,
+  ErrorContainer = common.DefaultErrorContainer,
+  scrollOffset,
+  getScrollElement,
+  renderWhenNotVisible = true,
+  rowSize,
+  headerSize = 50,
+  overscan,
+  debug,
+  sx,
+  className,
+  ...options
+}) {
+  const table = common.useAutoTable(options);
+  const { rows } = table.getRowModel();
+  const offsetFromScrollEl = scrollOffset ?? 0;
+  const virtualizer = reactVirtual.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__ */ jsxRuntime.jsxs(
+    TableContainer,
+    {
+      virtualizerTotalHeight: totalHeight,
+      sx,
+      className,
+      children: [
+        debug && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              color: "red",
+              zIndex: 100,
+              fontSize: 10
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: virtualizer.scrollOffset }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: virtualizer.scrollOffset + virtualizer.scrollRect.height }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: offsetFromScrollEl }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: visibilityBounds.lower }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: visibilityBounds.upper })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          index.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__ */ jsxRuntime.jsx(index.TableHead, { sx: { height: headerSize }, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: headerGroup.headers.map((header) => {
+                const isSorted = header.column.getIsSorted();
+                return /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { variant: "header", children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  index.TableSortLabel,
+                  {
+                    active: isSorted !== false,
+                    direction: isSorted !== false ? isSorted : "asc",
+                    onClick: header.column.getToggleSortingHandler(),
+                    children: [
+                      reactTable.flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      ),
+                      isSorted !== false ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: utils.visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
+                    ]
+                  }
+                ) : reactTable.flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }, header.id);
+              }) }, headerGroup.id)) }),
+              showMessage ? /* @__PURE__ */ jsxRuntime.jsx(index.TableBody, { children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                index$2.default,
+                {
+                  colSpan: table.getAllFlatColumns().length,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: error ? /* @__PURE__ */ jsxRuntime.jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "center",
+                        paddingTop: "10px",
+                        paddingBottom: "10px"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, {})
+                    }
+                  ) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.TableMessage, { children: zeroStateMessage ?? "No data found" }) : null })
+                }
+              ) }) }) : tableIsVisible && /* @__PURE__ */ jsxRuntime.jsx(
+                index.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__ */ jsxRuntime.jsx(
+                      index$1.default,
+                      {
+                        children: row.getAllCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        ) }, cell.id))
+                      },
+                      row.id
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.TableMessageMaxHeight = TableMessageMaxHeight;
+exports.default = VirtualControlledAutoTable;

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

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

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"tableCell":"vt_ce_TableCell_tableCell__a1247ad8"};
+
+exports.default = styles;