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

package/dist/cjs/Alert/index.js

@@ -11,8 +11,11 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('react');
+require('@mui/system');
 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,8 +10,11 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('react');
+require('@mui/system');
 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/Box/index.js

@@ -0,0 +1,16 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var system = require('@mui/system');
+var identifier = require('../styles/identifier.js');
+var defaultTheme = require('../styles/defaultTheme.js');
+
+const Box = system.createBox({
+  themeId: identifier.default,
+  defaultTheme: defaultTheme.default
+});
+
+exports.default = Box;

package/dist/cjs/Button/index.js

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

package/dist/cjs/Checkbox/index.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var useForkRef = require('@mui/utils/useForkRef');
+var material = require('@mui/material');
 var cx = require('../styles/cx.js');
 require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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(
@@ -30,7 +32,7 @@ const Checkbox = React.forwardRef(
     ...props
   }, ref) => {
     const inputRef = React.useRef(null);
-    const forkedRef = useForkRef(inputRef, ref);
+    const forkedRef = material.useForkRef(inputRef, ref);
     React.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = indeterminate ?? false;

package/dist/cjs/Chip/index.js

@@ -11,8 +11,10 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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,8 +11,11 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('react');
+require('@mui/system');
 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,8 +12,10 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 require('../styles/css-vars.js');
+require('../Box/index.js');
+require('../styles/styled.js');
 
 const ColorPicker = ({
   onChange,

package/dist/cjs/DatePicker/Calendar.js

@@ -19,8 +19,10 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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,9 +14,11 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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,8 +15,10 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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,14 +7,8 @@ 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('../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');
+var index = require('../Box/index.js');
+var index$1 = require('../Typography/index.js');
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -30,10 +24,16 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.hasError || this.props.error) {
       return this.props.fallback ?? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        index.default,
         {
+          sx: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "20px"
+          },
           style: this.props.style,
-          className: cx.cx(styles_module.default.fallbackContainer, this.props.className),
+          className: 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.default, { variant: "h4", children: this.props.message ?? "Error" })
+            /* @__PURE__ */ jsxRuntime.jsx(index$1.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 = {"fallbackContainer":"vt_ce_ErrorBoundary_fallbackContainer__bafaad44","customMessageContainer":"vt_ce_ErrorBoundary_customMessageContainer__97495086"};
+var styles = {"customMessageContainer":"vt_ce_ErrorBoundary_customMessageContainer__97495086"};
 
 exports.default = styles;

package/dist/cjs/FileUploader/components.js

@@ -11,8 +11,10 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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,8 +12,10 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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/GlobalStyles/index.js

@@ -0,0 +1,23 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var system = require('@mui/system');
+var defaultTheme = require('../styles/defaultTheme.js');
+var identifier = require('../styles/identifier.js');
+
+function GlobalStyles(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    system.GlobalStyles,
+    {
+      ...props,
+      defaultTheme: defaultTheme.default,
+      themeId: identifier.default
+    }
+  );
+}
+
+exports.default = GlobalStyles;

package/dist/cjs/Icon/wrappers.js

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

package/dist/cjs/Input/index.js

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

package/dist/cjs/Menu/controlled.js

@@ -11,9 +11,11 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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('../node_modules/@mui/material/usePagination/usePagination.js');
 
-const usePagination = usePagination$1.default;
+const usePagination = usePaginationUntyped;
 function Pagination(props) {
   const { items } = usePagination({
     count: props.numPages,

package/dist/cjs/RadioButton/index.js

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

package/dist/cjs/Select/controlled.js

@@ -11,8 +11,10 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('@mui/system');
 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,8 +11,11 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('react');
+require('@mui/system');
 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,8 +10,11 @@ require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
 require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
-require('../styles/provider.client.js');
+require('react');
+require('@mui/system');
 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 styles_module = require('./styles.module.scss.js');
+var material = require('@mui/material');
 
 function createColumnHelper() {
   return {
@@ -121,7 +121,20 @@ function makeCellMappingComponent(cell) {
   });
 }
 const DefaultErrorContainer = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.errorContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Some error message" }) });
+  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;

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

@@ -14,14 +14,6 @@ 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,
@@ -29,7 +21,6 @@ function ControlledAutoTable({
   zeroStateMessage,
   error,
   ErrorContainer = common.DefaultErrorContainer,
-  style,
   className,
   ...options
 }) {
@@ -37,14 +28,19 @@ function ControlledAutoTable({
   const rows = options.data;
   const manualRowCount = options.manualRowCount ?? rows.length;
   const showMessage = error || loading || rows.length === 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, className, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs(
     index.Table,
     {
-      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
-        }
+      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) => {
@@ -68,7 +64,18 @@ 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", { 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)) }),
+        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,
           {

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

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