@veritone-ce/design-system 2.5.18 → 2.6.0-alpha.0

package/dist/esm/RadioButton/index.js

@@ -2,17 +2,15 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useId } from 'react';
-import { useForkRef } from '@mui/material';
+import useForkRef from '@mui/utils/useForkRef';
 import css from './styles.module.scss.js';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
 import 'color2k';
 import '../styles/defaultTheme.js';
-import '@mui/system';
+import '../styles/provider.client.js';
 import '../styles/css-vars.js';
-import '../Box/index.js';
-import '../styles/styled.js';
 
 const RadioButton = forwardRef(
   ({

package/dist/esm/Select/controlled.js

@@ -7,10 +7,8 @@ import '../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
 import 'color2k';
 import '../styles/defaultTheme.js';
-import '@mui/system';
+import '../styles/provider.client.js';
 import '../styles/css-vars.js';
-import '../Box/index.js';
-import '../styles/styled.js';
 import css from './styles.module.scss.js';
 import { ArrowDropDown, Close } from '@mui/icons-material';
 import Menu from '../Menu/controlled.js';

package/dist/esm/StatusChip/index.js

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

package/dist/esm/Stepper/stepper.js

@@ -6,11 +6,8 @@ import '../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
 import 'color2k';
 import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
-import 'react';
-import '@mui/system';
+import '../styles/provider.client.js';
 import '../styles/css-vars.js';
-import '../Box/index.js';
-import '../styles/styled.js';
 import styles from './styles.module.scss.js';
 
 const Stepper = ({

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

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useReactTable, getPaginationRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import React__default from 'react';
 import TableCell from '../TableCell/index.js';
-import { Box } from '@mui/material';
+import styles from './styles.module.scss.js';
 
 function createColumnHelper() {
   return {
@@ -119,20 +119,7 @@ function makeCellMappingComponent(cell) {
   });
 }
 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" })
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className: styles.errorContainer, children: /* @__PURE__ */ jsx("div", { children: "Some error message" }) });
 };
 
 export { DefaultErrorContainer, createColumnHelper, mapColumnDef, mapColumnDefs, useAutoTable };

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

@@ -10,6 +10,14 @@ import { visuallyHidden } from '@mui/utils';
 import { useAutoTable, DefaultErrorContainer } from './common.js';
 import TablePagination from '../../TablePagination/index.js';
 import CircularProgress from '../../CircularProgress/index.js';
+import { cx } from '../../styles/cx.js';
+import '../../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../../styles/defaultTheme.js';
+import '../../styles/provider.client.js';
+import '../../styles/css-vars.js';
+import styles from './styles.module.scss.js';
 
 function ControlledAutoTable({
   stickyHeader,
@@ -17,6 +25,7 @@ function ControlledAutoTable({
   zeroStateMessage,
   error,
   ErrorContainer = DefaultErrorContainer,
+  style,
   className,
   ...options
 }) {
@@ -24,19 +33,14 @@ function ControlledAutoTable({
   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(
+  return /* @__PURE__ */ jsx("div", { style, 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
-          }
-        } : {}
+      className: cx(styles.table, stickyHeader && styles.stickyHeader),
+      style: {
+        ...stickyHeader && typeof stickyHeader === "object" && {
+          "--vt-ce-auto-table-sticky-offset": stickyHeader.offset
+        }
       },
       children: [
         /* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
@@ -60,18 +64,7 @@ function ControlledAutoTable({
             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)) }),
+        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", { className: styles.loadingContainer, 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,
           {

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

@@ -6,7 +6,6 @@ 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;
@@ -68,7 +67,7 @@ function AutoTable(props) {
         zeroStateMessage: props.zeroStateMessage,
         error: props.error,
         ErrorContainer: props.ErrorContainer,
-        sx: props.sx,
+        style: props.style,
         className: props.className
       }
     );
@@ -82,6 +81,7 @@ function AutoTable(props) {
       zeroStateMessage: props.zeroStateMessage,
       error: props.error,
       ErrorContainer: props.ErrorContainer,
+      style: props.style,
       className: props.className
     }
   );

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

@@ -0,0 +1,3 @@
+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"};
+
+export { styles as default };

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

@@ -6,17 +6,19 @@ import { Table, TableHead, TableSortLabel, TableBody, TableMessage } from '../in
 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';
+import { cx } from '../../styles/cx.js';
+import '../../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../../styles/defaultTheme.js';
+import '../../styles/provider.client.js';
+import '../../styles/css-vars.js';
+import styles from './styles.module.scss.js';
+import CircularProgress from '../../CircularProgress/index.js';
 
 const TableMessageMaxHeight = 100;
-const TableContainer = styled(Box)(
-  ({ virtualizerTotalHeight }) => ({
-    height: `${virtualizerTotalHeight}px`
-  })
-);
 function VirtualControlledAutoTable({
   stickyHeader,
   loading,
@@ -30,7 +32,7 @@ function VirtualControlledAutoTable({
   headerSize = 50,
   overscan,
   debug,
-  sx,
+  style,
   className,
   ...options
 }) {
@@ -55,10 +57,12 @@ function VirtualControlledAutoTable({
   const tableIsVisible = renderWhenNotVisible || virtualizer.scrollOffset + virtualizer.scrollRect.height >= visibilityBounds.lower && virtualizer.scrollOffset <= visibilityBounds.upper;
   const virtualItems = virtualizer.getVirtualItems();
   return /* @__PURE__ */ jsxs(
-    TableContainer,
+    "div",
     {
-      virtualizerTotalHeight: totalHeight,
-      sx,
+      style: {
+        height: `${totalHeight}px`,
+        ...style
+      },
       className,
       children: [
         debug && /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxs(
@@ -84,19 +88,14 @@ function VirtualControlledAutoTable({
         /* @__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
-                }
-              } : {}
+            className: cx(styles.table, stickyHeader && styles.stickyHeader),
+            style: {
+              ...stickyHeader && typeof stickyHeader === "object" && {
+                "--vt-ce-auto-table-sticky-offset": stickyHeader.offset
+              }
             },
             children: [
-              /* @__PURE__ */ jsx(TableHead, { sx: { height: headerSize }, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+              /* @__PURE__ */ jsx(TableHead, { style: { 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,
@@ -109,7 +108,7 @@ function VirtualControlledAutoTable({
                         header.column.columnDef.header,
                         header.getContext()
                       ),
-                      isSorted !== false ? /* @__PURE__ */ jsx(Box, { component: "span", sx: visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
+                      isSorted !== false ? /* @__PURE__ */ jsx("span", { className: styles.visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
                     ]
                   }
                 ) : flexRender(
@@ -121,10 +120,10 @@ function VirtualControlledAutoTable({
                 TableCell,
                 {
                   colSpan: table.getAllFlatColumns().length,
-                  children: /* @__PURE__ */ jsx(Box, { children: error ? /* @__PURE__ */ jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsx(
-                    Box,
+                  children: /* @__PURE__ */ jsx("div", { children: error ? /* @__PURE__ */ jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsx(
+                    "div",
                     {
-                      sx: {
+                      style: {
                         display: "flex",
                         justifyContent: "center",
                         paddingTop: "10px",
@@ -137,12 +136,10 @@ function VirtualControlledAutoTable({
               ) }) }) : 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`
+                  className: styles.virtualTableBody,
+                  style: {
+                    ...{
+                      "--vt-ce-auto-table-virtual-table-body-height": `${(rows.length - virtualItems.length) * rowSize}px`
                     }
                   },
                   children: virtualItems.map((virtualRow) => {

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

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

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

@@ -8,10 +8,8 @@ import '../../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
 import 'color2k';
 import '../../styles/defaultTheme.js';
-import '@mui/system';
+import '../../styles/provider.client.js';
 import '../../styles/css-vars.js';
-import '../../Box/index.js';
-import '../../styles/styled.js';
 
 const TableRow = forwardRef(
   ({ children, "data-testid": dataTestId, className, ...props }, ref) => {

package/dist/esm/Table/index.js

@@ -10,7 +10,7 @@ const Table = (props) => {
     {
       "data-testid": props["data-testid"],
       stickyHeader: props.stickyHeader,
-      sx: props.sx,
+      style: props.style,
       className: props.className,
       children: props.children
     }
@@ -21,7 +21,7 @@ const TableBody = (props) => {
     TableBody$1,
     {
       "data-testid": props["data-testid"],
-      sx: props.sx,
+      style: props.style,
       className: props.className,
       children: props.children
     }
@@ -32,7 +32,7 @@ const TableFooter = (props) => {
     TableFooter$1,
     {
       "data-testid": props["data-testid"],
-      sx: props.sx,
+      style: props.style,
       className: props.className,
       children: props.children
     }
@@ -43,7 +43,7 @@ const TableHead = (props) => {
     TableHead$1,
     {
       "data-testid": props["data-testid"],
-      sx: props.sx,
+      style: props.style,
       className: props.className,
       children: props.children
     }

package/dist/esm/Textarea/index.js

@@ -8,10 +8,8 @@ import '../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
 import 'color2k';
 import '../styles/defaultTheme.js';
-import '@mui/system';
+import '../styles/provider.client.js';
 import '../styles/css-vars.js';
-import '../Box/index.js';
-import '../styles/styled.js';
 import { useFormControlContext } from '../FormControl/context.js';
 
 const Textarea = forwardRef(

package/dist/esm/Toast/index.js

@@ -1,11 +1,11 @@
 'use strict';
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Snackbar, Box } from '@mui/material';
+import { Snackbar } from '@mui/material';
 import ToastContent from './content.js';
 
 const Toast = ({ open, onClose, className, ...alertProps }) => {
-  return /* @__PURE__ */ jsx(Snackbar, { open, onClose, className, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(ToastContent, { onClose, ...alertProps }) }) });
+  return /* @__PURE__ */ jsx(Snackbar, { open, onClose, className, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ToastContent, { onClose, ...alertProps }) }) });
 };
 
 export { Toast as default };

package/dist/esm/Tooltip/index.js

@@ -9,10 +9,8 @@ import '../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
 import 'color2k';
 import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
-import '@mui/system';
+import '../styles/provider.client.js';
 import '../styles/css-vars.js';
-import '../Box/index.js';
-import '../styles/styled.js';
 import Typography from '../Typography/index.js';
 
 function Tooltip({

package/dist/esm/Typography/index.js

@@ -5,11 +5,9 @@ import '../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
 import 'color2k';
 import '../styles/defaultTheme.js';
-import '@mui/system';
+import '../styles/provider.client.js';
 import 'react/jsx-runtime';
 import '../styles/css-vars.js';
-import '../Box/index.js';
-import '../styles/styled.js';
 import styles from './variants.module.scss.js';
 
 const Typography = forwardRef(