@veritone-ce/design-system 2.6.1 → 2.7.0

package/dist/cjs/Alert/index.js

@@ -11,11 +11,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('react');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var index = require('../IconButton/index.js');
 var internal = require('../Icon/internal.js');
 

package/dist/cjs/Badge/index.js

@@ -10,11 +10,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('react');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var styles_module = require('./styles.module.scss.js');
 var index = require('../Typography/index.js');
 

package/dist/cjs/Button/index.js

@@ -13,10 +13,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 
 const Button = React.forwardRef(
   ({

package/dist/cjs/Checkbox/index.js

@@ -6,16 +6,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var material = require('@mui/material');
+var useForkRef = require('@mui/utils/useForkRef');
 var cx = require('../styles/cx.js');
 require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var styles_module = require('./styles.module.scss.js');
 
 const Checkbox = React.forwardRef(
@@ -32,7 +30,7 @@ const Checkbox = React.forwardRef(
     ...props
   }, ref) => {
     const inputRef = React.useRef(null);
-    const forkedRef = material.useForkRef(inputRef, ref);
+    const forkedRef = useForkRef(inputRef, ref);
     React.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = indeterminate ?? false;
@@ -80,7 +78,6 @@ const Checkbox = React.forwardRef(
   }
 );
 const UncheckedIcon = ({ onThumbnail }) => {
-  console.log("onThumbnail", onThumbnail);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {

package/dist/cjs/Chip/index.js

@@ -11,10 +11,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var index = require('../IconButton/index.js');
 var internal = require('../Icon/internal.js');
 

package/dist/cjs/CircularProgress/index.js

@@ -11,11 +11,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('react');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 
 const SIZE = 44;
 const thickness = 3.6;

package/dist/cjs/ColorPicker/index.js

@@ -12,10 +12,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 
 const ColorPicker = ({
   onChange,

package/dist/cjs/DatePicker/Calendar.js

@@ -19,10 +19,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 
 const ArrowUpDownIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ArrowDropUp);
 const ArrowBackIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ArrowBackIosNew);

package/dist/cjs/Dialog/components.js

@@ -14,11 +14,9 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 var portal = require('../styles/portal.js');
-require('../styles/styled.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
 var index$1 = require('../Button/index.js');
 var index = require('../Typography/index.js');
 var index$2 = require('../IconButton/index.js');

package/dist/cjs/Drawer/components.js

@@ -15,10 +15,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var index$1 = require('../Button/index.js');
 var index = require('../Typography/index.js');
 var index$2 = require('../IconButton/index.js');

package/dist/cjs/ErrorBoundary/index.js

@@ -7,8 +7,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var iconsMaterial = require('@mui/icons-material');
 var styles_module = require('./styles.module.scss.js');
-var index = require('../Box/index.js');
-var index$1 = require('../Typography/index.js');
+var index = require('../Typography/index.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -24,16 +30,10 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.hasError || this.props.error) {
       return this.props.fallback ?? /* @__PURE__ */ jsxRuntime.jsx(
-        index.default,
+        "div",
         {
-          sx: {
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            padding: "20px"
-          },
           style: this.props.style,
-          className: this.props.className,
+          className: cx.cx(styles_module.default.fallbackContainer, this.props.className),
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.customMessageContainer, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               iconsMaterial.ErrorOutline,
@@ -44,7 +44,7 @@ class ErrorBoundary extends React.Component {
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { variant: "h4", children: this.props.message ?? "Error" })
+            /* @__PURE__ */ jsxRuntime.jsx(index.default, { variant: "h4", children: this.props.message ?? "Error" })
           ] })
         }
       );

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"customMessageContainer":"vt_ce_ErrorBoundary_customMessageContainer__97495086"};
+var styles = {"fallbackContainer":"vt_ce_ErrorBoundary_fallbackContainer__bafaad44","customMessageContainer":"vt_ce_ErrorBoundary_customMessageContainer__97495086"};
 
 exports.default = styles;

package/dist/cjs/FileUploader/components.js

@@ -11,10 +11,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var index$1 = require('../Typography/index.js');
 var material = require('@mui/material');
 var index$2 = require('../IconButton/index.js');

package/dist/cjs/FormControl/index.js

@@ -12,10 +12,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var context = require('./context.js');
 
 const FormControl = React.forwardRef(

package/dist/cjs/Icon/wrappers.js

@@ -9,10 +9,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 
 function adaptMuiSvgIcon(MuiIcon) {
   return React.forwardRef(

package/dist/cjs/IconButton/index.js

@@ -13,10 +13,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 
 const IconButton = React.forwardRef(
   ({

package/dist/cjs/Input/index.js

@@ -13,10 +13,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 
 const Input = React.forwardRef(
   ({

package/dist/cjs/Menu/controlled.js

@@ -11,11 +11,9 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 var portal = require('../styles/portal.js');
-require('../styles/styled.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
 var react = require('@floating-ui/react');
 var utils = require('../popover/utils.js');
 var index = require('../Typography/index.js');

package/dist/cjs/Pagination/index.js

@@ -5,13 +5,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var usePaginationUntyped = require('@mui/material/usePagination');
 var styles_module = require('./styles.module.scss.js');
 var index = require('../Button/index.js');
 var index$1 = require('../IconButton/index.js');
 var internal = require('../Icon/internal.js');
+var usePagination$1 = require('../bundled_modules/@mui/material/usePagination/usePagination.js');
 
-const usePagination = usePaginationUntyped;
+const usePagination = usePagination$1.default;
 function Pagination(props) {
   const { items } = usePagination({
     count: props.numPages,

package/dist/cjs/RadioButton/index.js

@@ -6,17 +6,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var material = require('@mui/material');
+var useForkRef = require('@mui/utils/useForkRef');
 var styles_module = require('./styles.module.scss.js');
 var cx = require('../styles/cx.js');
 require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 
 const RadioButton = React.forwardRef(
   ({
@@ -30,7 +28,7 @@ const RadioButton = React.forwardRef(
     ...props
   }, ref) => {
     const inputRef = React.useRef(null);
-    const forkedRef = material.useForkRef(inputRef, ref);
+    const forkedRef = useForkRef(inputRef, ref);
     const labelId = React.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",

package/dist/cjs/Select/controlled.js

@@ -11,10 +11,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var styles_module = require('./styles.module.scss.js');
 var iconsMaterial = require('@mui/icons-material');
 var controlled = require('../Menu/controlled.js');

package/dist/cjs/StatusChip/index.js

@@ -11,11 +11,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('react');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var index = require('../Typography/index.js');
 
 const StatusChip = ({

package/dist/cjs/Stepper/stepper.js

@@ -10,11 +10,8 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('react');
-require('@mui/system');
+require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-require('../Box/index.js');
-require('../styles/styled.js');
 var styles_module = require('./styles.module.scss.js');
 
 const Stepper = ({

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

@@ -5,7 +5,7 @@ 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');
+var styles_module = require('./styles.module.scss.js');
 
 function createColumnHelper() {
   return {
@@ -121,20 +121,7 @@ function makeCellMappingComponent(cell) {
   });
 }
 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" })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.errorContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Some error message" }) });
 };
 
 exports.DefaultErrorContainer = DefaultErrorContainer;

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

@@ -14,6 +14,14 @@ var utils = require('@mui/utils');
 var common = require('./common.js');
 var index$4 = require('../../TablePagination/index.js');
 var index$3 = require('../../CircularProgress/index.js');
+var cx = require('../../styles/cx.js');
+require('../../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../../styles/defaultTheme.js');
+require('../../styles/provider.client.js');
+require('../../styles/css-vars.js');
+var styles_module = require('./styles.module.scss.js');
 
 function ControlledAutoTable({
   stickyHeader,
@@ -21,6 +29,7 @@ function ControlledAutoTable({
   zeroStateMessage,
   error,
   ErrorContainer = common.DefaultErrorContainer,
+  style,
   className,
   ...options
 }) {
@@ -28,19 +37,14 @@ function ControlledAutoTable({
   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(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, 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
-          }
-        } : {}
+      className: cx.cx(styles_module.default.table, stickyHeader && styles_module.default.stickyHeader),
+      style: {
+        ...stickyHeader && typeof stickyHeader === "object" && {
+          "--vt-ce-auto-table-sticky-offset": stickyHeader.offset
+        }
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(index.TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: headerGroup.headers.map((header) => {
@@ -64,18 +68,7 @@ function ControlledAutoTable({
             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)) }),
+        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", { className: styles_module.default.loadingContainer, 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,
           {

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

@@ -10,7 +10,6 @@ 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;
@@ -72,7 +71,7 @@ function AutoTable(props) {
         zeroStateMessage: props.zeroStateMessage,
         error: props.error,
         ErrorContainer: props.ErrorContainer,
-        sx: props.sx,
+        style: props.style,
         className: props.className
       }
     );
@@ -86,6 +85,7 @@ function AutoTable(props) {
       zeroStateMessage: props.zeroStateMessage,
       error: props.error,
       ErrorContainer: props.ErrorContainer,
+      style: props.style,
       className: props.className
     }
   );

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"visuallyHidden":"vt_ce_AutoTable_visuallyHidden__d42457bf","errorContainer":"vt_ce_AutoTable_errorContainer__22629d1a","loadingContainer":"vt_ce_AutoTable_loadingContainer__800e1c5c","table":"vt_ce_AutoTable_table__abdcf037","stickyHeader":"vt_ce_AutoTable_stickyHeader__1fdfff7b","virtualTableBody":"vt_ce_AutoTable_virtualTableBody__1264b0bb"};
+
+exports.default = styles;

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

@@ -10,17 +10,19 @@ 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 cx = require('../../styles/cx.js');
+require('../../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../../styles/defaultTheme.js');
+require('../../styles/provider.client.js');
+require('../../styles/css-vars.js');
+var styles_module = require('./styles.module.scss.js');
+var index$3 = require('../../CircularProgress/index.js');
 
 const TableMessageMaxHeight = 100;
-const TableContainer = material.styled(material.Box)(
-  ({ virtualizerTotalHeight }) => ({
-    height: `${virtualizerTotalHeight}px`
-  })
-);
 function VirtualControlledAutoTable({
   stickyHeader,
   loading,
@@ -34,7 +36,7 @@ function VirtualControlledAutoTable({
   headerSize = 50,
   overscan,
   debug,
-  sx,
+  style,
   className,
   ...options
 }) {
@@ -59,10 +61,12 @@ function VirtualControlledAutoTable({
   const tableIsVisible = renderWhenNotVisible || virtualizer.scrollOffset + virtualizer.scrollRect.height >= visibilityBounds.lower && virtualizer.scrollOffset <= visibilityBounds.upper;
   const virtualItems = virtualizer.getVirtualItems();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    TableContainer,
+    "div",
     {
-      virtualizerTotalHeight: totalHeight,
-      sx,
+      style: {
+        height: `${totalHeight}px`,
+        ...style
+      },
       className,
       children: [
         debug && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -88,19 +92,14 @@ function VirtualControlledAutoTable({
         /* @__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
-                }
-              } : {}
+            className: cx.cx(styles_module.default.table, stickyHeader && styles_module.default.stickyHeader),
+            style: {
+              ...stickyHeader && typeof stickyHeader === "object" && {
+                "--vt-ce-auto-table-sticky-offset": stickyHeader.offset
+              }
             },
             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) => {
+              /* @__PURE__ */ jsxRuntime.jsx(index.TableHead, { style: { 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,
@@ -113,7 +112,7 @@ function VirtualControlledAutoTable({
                         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
+                      isSorted !== false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
                     ]
                   }
                 ) : reactTable.flexRender(
@@ -125,28 +124,26 @@ function VirtualControlledAutoTable({
                 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,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: error ? /* @__PURE__ */ jsxRuntime.jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                      sx: {
+                      style: {
                         display: "flex",
                         justifyContent: "center",
                         paddingTop: "10px",
                         paddingBottom: "10px"
                       },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, {})
+                      children: /* @__PURE__ */ jsxRuntime.jsx(index$3.default, {})
                     }
                   ) : 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`
+                  className: styles_module.default.virtualTableBody,
+                  style: {
+                    ...{
+                      "--vt-ce-auto-table-virtual-table-body-height": `${(rows.length - virtualItems.length) * rowSize}px`
                     }
                   },
                   children: virtualItems.map((virtualRow) => {