@veritone-ce/design-system 1.12.49 → 1.12.51

package/dist/cjs/components/Alert/index.js

@@ -39,7 +39,9 @@ var Alert = function Alert(props) {
         sx: {
           fontSize: "12px",
           fontWeight: "bold",
-          marginRight: "2px"
+          marginRight: "2px",
+          display: 'inline-block',
+          whiteSpace: 'pre'
         },
         children: props.label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
           children: [props.label, ': ']
@@ -48,7 +50,9 @@ var Alert = function Alert(props) {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
         sx: {
-          fontSize: "12px"
+          fontSize: "12px",
+          display: 'inline-block',
+          whiteSpace: 'pre'
         },
         children: props.text ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
           children: [props.text, " "]

package/dist/cjs/components/Autocomplete/index.js

@@ -18,7 +18,8 @@ function ComboBox(_ref) {
   var items = _ref.items,
     label = _ref.label,
     width = _ref.width,
-    onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    error = _ref.error;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
     disablePortal: true,
     options: items,
@@ -27,10 +28,14 @@ function ComboBox(_ref) {
     },
     renderInput: function renderInput(params) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
-        label: label
+        label: label,
+        error: error,
+        helperText: error ? "Please select a ".concat(label) : ''
       }));
     },
-    onChange: onChange
+    onChange: function onChange(event, value) {
+      return _onChange(event, value);
+    }
   });
 }
 var _default = ComboBox;

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DefaultErrorContainer = void 0;
 exports.createColumnHelper = createColumnHelper;
 exports.mapColumnDef = mapColumnDef;
 exports.mapColumnDefs = mapColumnDefs;
@@ -10,6 +11,9 @@ exports.useAutoTable = useAutoTable;
 var _reactTable = require("@tanstack/react-table");
 var _react = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
+var _material = require("@mui/material");
+var _index2 = _interopRequireDefault(require("../../../components/Typography/index.js"));
+var _iconsMaterial = require("@mui/icons-material");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -140,4 +144,38 @@ function makeCellMappingComponent(cell) {
       meta: props.table.options.meta
     });
   };
-}
+}
+var DefaultErrorContainer = function DefaultErrorContainer(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingTop: '10px',
+      paddingBottom: '10px'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ErrorOutline, {
+      sx: {
+        marginRight: '10px',
+        color: function color(theme) {
+          return theme.palette.error.main;
+        }
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2["default"], {
+      sx: {
+        color: function color(theme) {
+          return theme.palette.text.primary;
+        },
+        fontSize: function fontSize(theme) {
+          return theme.typography.subtitle1;
+        },
+        fontWeight: 'bold'
+      },
+      children: ["An error occurred", typeof props.error === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [": ", props.error, "."]
+      }) : '.', " Please try reloading the page."]
+    })]
+  });
+};
+exports.DefaultErrorContainer = DefaultErrorContainer;

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

@@ -12,7 +12,7 @@ var _material = require("@mui/material");
 var _utils = require("@mui/utils");
 var _common = require("./common.js");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "sx", "className"];
+var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "sx", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -27,6 +27,9 @@ function ControlledAutoTable(_ref) {
   var stickyHeader = _ref.stickyHeader,
     loading = _ref.loading,
     zeroStateMessage = _ref.zeroStateMessage,
+    error = _ref.error,
+    _ref$ErrorContainer = _ref.ErrorContainer,
+    ErrorContainer = _ref$ErrorContainer === void 0 ? _common.DefaultErrorContainer : _ref$ErrorContainer,
     sx = _ref.sx,
     className = _ref.className,
     options = _objectWithoutProperties(_ref, _excluded);
@@ -69,18 +72,35 @@ function ControlledAutoTable(_ref) {
             })
           }, headerGroup.id);
         })
-      }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
+      }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
             colSpan: table.getAllFlatColumns().length,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorContainer, {
+              error: error
+            })
+          })
+        })
+      }) : loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                paddingTop: '10px',
+                paddingBottom: '10px'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+            })
           })
         })
       }) : options.data.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
             colSpan: table.getAllFlatColumns().length,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableZeroState, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableMessage, {
               children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
             })
           })

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

@@ -85,6 +85,8 @@ function AutoTable(props) {
       stickyHeader: props.stickyHeader,
       loading: props.loading,
       zeroStateMessage: props.zeroStateMessage,
+      error: props.error,
+      ErrorContainer: props.ErrorContainer,
       sx: props.sx,
       className: props.className
     }));
@@ -93,6 +95,8 @@ function AutoTable(props) {
     stickyHeader: props.stickyHeader,
     loading: props.loading,
     zeroStateMessage: props.zeroStateMessage,
+    error: props.error,
+    ErrorContainer: props.ErrorContainer,
     sx: props.sx,
     className: props.className
   }));

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

@@ -13,7 +13,7 @@ var _utils = require("@mui/utils");
 var _common = require("./common.js");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
+var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -33,6 +33,9 @@ function VirtualControlledAutoTable(_ref2) {
   var stickyHeader = _ref2.stickyHeader,
     loading = _ref2.loading,
     zeroStateMessage = _ref2.zeroStateMessage,
+    error = _ref2.error,
+    _ref2$ErrorContainer = _ref2.ErrorContainer,
+    ErrorContainer = _ref2$ErrorContainer === void 0 ? _common.DefaultErrorContainer : _ref2$ErrorContainer,
     scrollOffset = _ref2.scrollOffset,
     getScrollElement = _ref2.getScrollElement,
     renderWhenNotVisible = _ref2.renderWhenNotVisible,
@@ -109,18 +112,35 @@ function VirtualControlledAutoTable(_ref2) {
             })
           }, headerGroup.id);
         })
-      }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
+      }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
             colSpan: table.getAllFlatColumns().length,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorContainer, {
+              error: error
+            })
+          })
+        })
+      }) : loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                paddingTop: '10px',
+                paddingBottom: '10px'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+            })
           })
         })
       }) : options.data.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
             colSpan: table.getAllFlatColumns().length,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableZeroState, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableMessage, {
               children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
             })
           })

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

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableZeroState = exports.TableSortLabel = exports.TableRow = exports.TablePagination = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableBody = exports.Table = exports.SelectionTableCell = void 0;
+exports.TableSortLabel = exports.TableRow = exports.TablePagination = exports.TableMessage = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableBody = exports.Table = exports.SelectionTableCell = void 0;
 var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@mui/material/styles");
@@ -156,14 +156,16 @@ var TableSortLabel = function TableSortLabel(props) {
   });
 };
 exports.TableSortLabel = TableSortLabel;
-var StyledTableZeroStateBase = (0, _styles.styled)(_material.Box)({
+var StyledTableMessageBase = (0, _styles.styled)(_material.Box)({
   width: '100%',
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'center'
+  alignItems: 'center',
+  paddingTop: '10px',
+  paddingBottom: '10px'
 });
-var TableZeroState = function TableZeroState(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTableZeroStateBase, {
+var TableMessage = function TableMessage(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTableMessageBase, {
     sx: props.sx,
     className: props.className,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
@@ -178,4 +180,4 @@ var TableZeroState = function TableZeroState(props) {
     })
   });
 };
-exports.TableZeroState = TableZeroState;
+exports.TableMessage = TableMessage;

package/dist/cjs/components/Toast/content.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _index = _interopRequireDefault(require("../Alert/index.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["sx", "className", "onClose"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ToastContent = function ToastContent(_ref) {
+  var sx = _ref.sx,
+    className = _ref.className,
+    onClose = _ref.onClose,
+    alertProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread({
+    onClose: onClose,
+    sx: sx,
+    className: className
+  }, alertProps));
+};
+var _default = ToastContent;
+exports["default"] = _default;

package/dist/cjs/components/Toast/hook.js

@@ -0,0 +1,74 @@
+"use strict";
+'use client';
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastProvider = void 0;
+exports.useToast = useToast;
+var _react = _interopRequireDefault(require("react"));
+var _notistack = require("notistack");
+var _content = _interopRequireDefault(require("./content.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["id", "label", "text", "link", "severity"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var NotiToastOverride = /*#__PURE__*/_react["default"].forwardRef(function InnerNotiToastOverride(_ref, ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    text = _ref.text,
+    link = _ref.link,
+    severity = _ref.severity,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useSnackbar = (0, _notistack.useSnackbar)(),
+    closeSnackbar = _useSnackbar.closeSnackbar;
+  var handleDismiss = _react["default"].useCallback(function () {
+    closeSnackbar(id);
+  }, [id, closeSnackbar]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_notistack.SnackbarContent, {
+    ref: ref,
+    style: props.style,
+    className: props.className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], {
+      label: label,
+      text: text,
+      link: link,
+      severity: severity,
+      onClose: handleDismiss
+    })
+  });
+});
+var ToastProvider = function ToastProvider(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_notistack.SnackbarProvider, {
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    Components: {
+      veritone: NotiToastOverride
+    },
+    children: props.children
+  });
+};
+exports.ToastProvider = ToastProvider;
+function useToast() {
+  var snackbar = (0, _notistack.useSnackbar)();
+  return {
+    enqueueToast: function enqueueToast() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      snackbar.enqueueSnackbar(_objectSpread({
+        variant: 'veritone'
+      }, options));
+    },
+    closeToast: function closeToast() {
+      snackbar.closeSnackbar();
+    }
+  };
+}

package/dist/cjs/components/Toast/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
@@ -6,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _material = require("@mui/material");
-var _index = _interopRequireDefault(require("../Alert/index.js"));
+var _content = _interopRequireDefault(require("./content.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["open", "onClose", "sx", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -28,9 +29,11 @@ var Toast = function Toast(_ref) {
     onClose: onClose,
     sx: sx,
     className: className,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread({
-      onClose: onClose
-    }, alertProps))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_content["default"], _objectSpread({
+        onClose: onClose
+      }, alertProps))
+    })
   });
 };
 var _default = Toast;

package/dist/cjs/index.js

@@ -259,7 +259,7 @@ Object.defineProperty(exports, "TableSortLabel", {
 Object.defineProperty(exports, "TableZeroState", {
   enumerable: true,
   get: function get() {
-    return _index28.TableZeroState;
+    return _index28.TableMessage;
   }
 });
 Object.defineProperty(exports, "Tabs", {
@@ -280,6 +280,12 @@ Object.defineProperty(exports, "Toast", {
     return _index32["default"];
   }
 });
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function get() {
+    return _hook.ToastProvider;
+  }
+});
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
   get: function get() {
@@ -316,6 +322,12 @@ Object.defineProperty(exports, "useTheme", {
     return _theme.useTheme;
   }
 });
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function get() {
+    return _hook.useToast;
+  }
+});
 var _theme = require("./assets/theme.js");
 var _index = _interopRequireDefault(require("./components/Alert/index.js"));
 var _index2 = _interopRequireDefault(require("./components/AudioSlider/index.js"));
@@ -351,6 +363,7 @@ var _virtual = _interopRequireDefault(require("./components/Table/AutoTable/virt
 var _index30 = _interopRequireDefault(require("./components/Tabs/index.js"));
 var _index31 = _interopRequireDefault(require("./components/ThemeProvider/index.js"));
 var _index32 = _interopRequireDefault(require("./components/Toast/index.js"));
+var _hook = require("./components/Toast/hook.js");
 var _index33 = _interopRequireDefault(require("./components/Typography/index.js"));
 var _index34 = _interopRequireDefault(require("./components/icons/HomeOutlinedIcon/index.js"));
 var _index35 = _interopRequireDefault(require("./components/icons/IconGroups/index.js"));

package/dist/esm/components/Alert/index.js

@@ -33,7 +33,9 @@ var Alert = function Alert(props) {
         sx: {
           fontSize: "12px",
           fontWeight: "bold",
-          marginRight: "2px"
+          marginRight: "2px",
+          display: 'inline-block',
+          whiteSpace: 'pre'
         },
         children: props.label ? /*#__PURE__*/_jsxs("span", {
           children: [props.label, ': ']
@@ -42,7 +44,9 @@ var Alert = function Alert(props) {
         })
       }), /*#__PURE__*/_jsx(Typography, {
         sx: {
-          fontSize: "12px"
+          fontSize: "12px",
+          display: 'inline-block',
+          whiteSpace: 'pre'
         },
         children: props.text ? /*#__PURE__*/_jsxs("span", {
           children: [props.text, " "]

package/dist/esm/components/Autocomplete/index.js

@@ -11,7 +11,8 @@ function ComboBox(_ref) {
   var items = _ref.items,
     label = _ref.label,
     width = _ref.width,
-    onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    error = _ref.error;
   return /*#__PURE__*/_jsx(Autocomplete, {
     disablePortal: true,
     options: items,
@@ -20,10 +21,14 @@ function ComboBox(_ref) {
     },
     renderInput: function renderInput(params) {
       return /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({}, params), {}, {
-        label: label
+        label: label,
+        error: error,
+        helperText: error ? "Please select a ".concat(label) : ''
       }));
     },
-    onChange: onChange
+    onChange: function onChange(event, value) {
+      return _onChange(event, value);
+    }
   });
 }
 export default ComboBox;

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

@@ -7,7 +7,12 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import React from 'react';
 import { TableCell } from '../index.js';
+import { Box } from '@mui/material';
+import Typography from '../../../components/Typography/index.js';
+import { ErrorOutline } from '@mui/icons-material';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export function createColumnHelper() {
   return {
     accessor: function accessor(_accessor, column) {
@@ -130,4 +135,37 @@ function makeCellMappingComponent(cell) {
       meta: props.table.options.meta
     });
   };
-}
+}
+export var DefaultErrorContainer = function DefaultErrorContainer(props) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingTop: '10px',
+      paddingBottom: '10px'
+    },
+    children: [/*#__PURE__*/_jsx(ErrorOutline, {
+      sx: {
+        marginRight: '10px',
+        color: function color(theme) {
+          return theme.palette.error.main;
+        }
+      }
+    }), /*#__PURE__*/_jsxs(Typography, {
+      sx: {
+        color: function color(theme) {
+          return theme.palette.text.primary;
+        },
+        fontSize: function fontSize(theme) {
+          return theme.typography.subtitle1;
+        },
+        fontWeight: 'bold'
+      },
+      children: ["An error occurred", typeof props.error === 'string' ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [": ", props.error, "."]
+      }) : '.', " Please try reloading the page."]
+    })]
+  });
+};

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

@@ -1,6 +1,6 @@
 'use client';
 
-var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "sx", "className"];
+var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "sx", "className"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -10,11 +10,11 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { flexRender } from '@tanstack/react-table';
-import { Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableZeroState } from '../index.js';
+import { Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableMessage } from '../index.js';
 import React from 'react';
 import { Box, CircularProgress } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
-import { useAutoTable } from './common.js';
+import { DefaultErrorContainer, useAutoTable } from './common.js';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function ControlledAutoTable(_ref) {
@@ -22,6 +22,9 @@ export default function ControlledAutoTable(_ref) {
   var stickyHeader = _ref.stickyHeader,
     loading = _ref.loading,
     zeroStateMessage = _ref.zeroStateMessage,
+    error = _ref.error,
+    _ref$ErrorContainer = _ref.ErrorContainer,
+    ErrorContainer = _ref$ErrorContainer === void 0 ? DefaultErrorContainer : _ref$ErrorContainer,
     sx = _ref.sx,
     className = _ref.className,
     options = _objectWithoutProperties(_ref, _excluded);
@@ -64,18 +67,35 @@ export default function ControlledAutoTable(_ref) {
             })
           }, headerGroup.id);
         })
-      }), loading ? /*#__PURE__*/_jsx(TableBody, {
+      }), error ? /*#__PURE__*/_jsx(TableBody, {
         children: /*#__PURE__*/_jsx(TableRow, {
           children: /*#__PURE__*/_jsx(TableCell, {
             colSpan: table.getAllFlatColumns().length,
-            children: /*#__PURE__*/_jsx(CircularProgress, {})
+            children: /*#__PURE__*/_jsx(ErrorContainer, {
+              error: error
+            })
+          })
+        })
+      }) : loading ? /*#__PURE__*/_jsx(TableBody, {
+        children: /*#__PURE__*/_jsx(TableRow, {
+          children: /*#__PURE__*/_jsx(TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/_jsx(Box, {
+              sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                paddingTop: '10px',
+                paddingBottom: '10px'
+              },
+              children: /*#__PURE__*/_jsx(CircularProgress, {})
+            })
           })
         })
       }) : options.data.length === 0 ? /*#__PURE__*/_jsx(TableBody, {
         children: /*#__PURE__*/_jsx(TableRow, {
           children: /*#__PURE__*/_jsx(TableCell, {
             colSpan: table.getAllFlatColumns().length,
-            children: /*#__PURE__*/_jsx(TableZeroState, {
+            children: /*#__PURE__*/_jsx(TableMessage, {
               children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
             })
           })

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

@@ -73,6 +73,8 @@ function AutoTable(props) {
       stickyHeader: props.stickyHeader,
       loading: props.loading,
       zeroStateMessage: props.zeroStateMessage,
+      error: props.error,
+      ErrorContainer: props.ErrorContainer,
       sx: props.sx,
       className: props.className
     }));
@@ -81,6 +83,8 @@ function AutoTable(props) {
     stickyHeader: props.stickyHeader,
     loading: props.loading,
     zeroStateMessage: props.zeroStateMessage,
+    error: props.error,
+    ErrorContainer: props.ErrorContainer,
     sx: props.sx,
     className: props.className
   }));

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

@@ -1,6 +1,6 @@
 'use client';
 
-var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
+var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -10,11 +10,11 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { flexRender } from '@tanstack/react-table';
-import { Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, TableZeroState } from '../index.js';
+import { Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, TableMessage } from '../index.js';
 import React from 'react';
 import { Box, CircularProgress, styled } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
-import { useAutoTable } from './common.js';
+import { DefaultErrorContainer, useAutoTable } from './common.js';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,6 +28,9 @@ export default function VirtualControlledAutoTable(_ref2) {
   var stickyHeader = _ref2.stickyHeader,
     loading = _ref2.loading,
     zeroStateMessage = _ref2.zeroStateMessage,
+    error = _ref2.error,
+    _ref2$ErrorContainer = _ref2.ErrorContainer,
+    ErrorContainer = _ref2$ErrorContainer === void 0 ? DefaultErrorContainer : _ref2$ErrorContainer,
     scrollOffset = _ref2.scrollOffset,
     getScrollElement = _ref2.getScrollElement,
     renderWhenNotVisible = _ref2.renderWhenNotVisible,
@@ -104,18 +107,35 @@ export default function VirtualControlledAutoTable(_ref2) {
             })
           }, headerGroup.id);
         })
-      }), loading ? /*#__PURE__*/_jsx(TableBody, {
+      }), error ? /*#__PURE__*/_jsx(TableBody, {
         children: /*#__PURE__*/_jsx(TableRow, {
           children: /*#__PURE__*/_jsx(TableCell, {
             colSpan: table.getAllFlatColumns().length,
-            children: /*#__PURE__*/_jsx(CircularProgress, {})
+            children: /*#__PURE__*/_jsx(ErrorContainer, {
+              error: error
+            })
+          })
+        })
+      }) : loading ? /*#__PURE__*/_jsx(TableBody, {
+        children: /*#__PURE__*/_jsx(TableRow, {
+          children: /*#__PURE__*/_jsx(TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/_jsx(Box, {
+              sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                paddingTop: '10px',
+                paddingBottom: '10px'
+              },
+              children: /*#__PURE__*/_jsx(CircularProgress, {})
+            })
           })
         })
       }) : options.data.length === 0 ? /*#__PURE__*/_jsx(TableBody, {
         children: /*#__PURE__*/_jsx(TableRow, {
           children: /*#__PURE__*/_jsx(TableCell, {
             colSpan: table.getAllFlatColumns().length,
-            children: /*#__PURE__*/_jsx(TableZeroState, {
+            children: /*#__PURE__*/_jsx(TableMessage, {
               children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
             })
           })

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

@@ -140,14 +140,16 @@ export var TableSortLabel = function TableSortLabel(props) {
     children: props.children
   });
 };
-var StyledTableZeroStateBase = styled(Box)({
+var StyledTableMessageBase = styled(Box)({
   width: '100%',
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'center'
+  alignItems: 'center',
+  paddingTop: '10px',
+  paddingBottom: '10px'
 });
-export var TableZeroState = function TableZeroState(props) {
-  return /*#__PURE__*/_jsx(StyledTableZeroStateBase, {
+export var TableMessage = function TableMessage(props) {
+  return /*#__PURE__*/_jsx(StyledTableMessageBase, {
     sx: props.sx,
     className: props.className,
     children: /*#__PURE__*/_jsx(Typography, {

package/dist/esm/components/Toast/content.js

@@ -0,0 +1,25 @@
+'use client';
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["sx", "className", "onClose"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import Alert from '../Alert/index.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ToastContent = function ToastContent(_ref) {
+  var sx = _ref.sx,
+    className = _ref.className,
+    onClose = _ref.onClose,
+    alertProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Alert, _objectSpread({
+    onClose: onClose,
+    sx: sx,
+    className: className
+  }, alertProps));
+};
+export default ToastContent;

package/dist/esm/components/Toast/hook.js

@@ -0,0 +1,66 @@
+'use client';
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["id", "label", "text", "link", "severity"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { SnackbarProvider, useSnackbar, SnackbarContent } from 'notistack';
+import ToastContent from './content.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+var NotiToastOverride = /*#__PURE__*/React.forwardRef(function InnerNotiToastOverride(_ref, ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    text = _ref.text,
+    link = _ref.link,
+    severity = _ref.severity,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useSnackbar = useSnackbar(),
+    closeSnackbar = _useSnackbar.closeSnackbar;
+  var handleDismiss = React.useCallback(function () {
+    closeSnackbar(id);
+  }, [id, closeSnackbar]);
+  return /*#__PURE__*/_jsx(SnackbarContent, {
+    ref: ref,
+    style: props.style,
+    className: props.className,
+    children: /*#__PURE__*/_jsx(ToastContent, {
+      label: label,
+      text: text,
+      link: link,
+      severity: severity,
+      onClose: handleDismiss
+    })
+  });
+});
+export var ToastProvider = function ToastProvider(props) {
+  return /*#__PURE__*/_jsx(SnackbarProvider, {
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    Components: {
+      veritone: NotiToastOverride
+    },
+    children: props.children
+  });
+};
+export function useToast() {
+  var snackbar = useSnackbar();
+  return {
+    enqueueToast: function enqueueToast() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      snackbar.enqueueSnackbar(_objectSpread({
+        variant: 'veritone'
+      }, options));
+    },
+    closeToast: function closeToast() {
+      snackbar.closeSnackbar();
+    }
+  };
+}

package/dist/esm/components/Toast/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["open", "onClose", "sx", "className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -7,8 +9,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Snackbar as MuiSnackbar } from '@mui/material';
-import Alert from '../Alert/index.js';
+import { Box, Snackbar as MuiSnackbar } from '@mui/material';
+import ToastContent from './content.js';
 import { jsx as _jsx } from "react/jsx-runtime";
 var Toast = function Toast(_ref) {
   var open = _ref.open,
@@ -21,9 +23,11 @@ var Toast = function Toast(_ref) {
     onClose: onClose,
     sx: sx,
     className: className,
-    children: /*#__PURE__*/_jsx(Alert, _objectSpread({
-      onClose: onClose
-    }, alertProps))
+    children: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(ToastContent, _objectSpread({
+        onClose: onClose
+      }, alertProps))
+    })
   });
 };
 export default Toast;

package/dist/esm/index.js

@@ -28,13 +28,14 @@ export { default as StatusChip } from './components/StatusChip/index.js';
 export { default as Step } from './components/Step/index.js';
 export { default as StepLabel } from './components/StepLabel/index.js';
 export { default as Stepper } from './components/Stepper/index.js';
-export { Table, TableBody, TableCell, SelectionTableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableZeroState } from './components/Table/index.js';
+export { Table, TableBody, TableCell, SelectionTableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableMessage as TableZeroState } from './components/Table/index.js';
 export { default as AutoTable, createColumnHelper } from './components/Table/AutoTable/index.js';
 export { default as ControlledAutoTable } from './components/Table/AutoTable/controlled.js';
 export { default as VirtualControlledAutoTable } from './components/Table/AutoTable/virtual.js';
 export { default as Tabs } from './components/Tabs/index.js';
 export { default as ThemeProvider } from './components/ThemeProvider/index.js';
 export { default as Toast } from './components/Toast/index.js';
+export { ToastProvider, useToast } from './components/Toast/hook.js';
 export { default as Typography } from './components/Typography/index.js';
 export { default as HomeOutlinedIcon } from './components/icons/HomeOutlinedIcon/index.js';
 export { default as IconGroups } from './components/icons/IconGroups/index.js';

package/dist/types/components/Alert/index.d.ts

@@ -1,19 +1,15 @@
-import { AlertColor } from '@mui/material';
 import React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
+export type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
 export type AlertProps = {
     'data-testid'?: string;
     label?: React.ReactNode;
-    text?: string;
-    /**
-     * - Use can pass messageLabel or messageText
-     * - If these props are not passed in, the default label and text will be set based on severity
-     **/
+    text?: React.ReactNode;
     link?: {
         href: string;
         content: React.ReactNode;
     };
-    severity?: AlertColor;
+    severity?: AlertSeverity;
     onClose?(): void;
     sx?: SxProps<Theme>;
     className?: string;

package/dist/types/components/Autocomplete/index.d.ts

@@ -8,6 +8,7 @@ export type AutocompleteProps = {
     label: string;
     width: number;
     onChange: (event: React.SyntheticEvent, value: Item | null) => void;
+    error?: boolean;
 };
-declare function ComboBox({ items, label, width, onChange }: AutocompleteProps): React.JSX.Element;
+declare function ComboBox({ items, label, width, onChange, error }: AutocompleteProps): React.JSX.Element;
 export default ComboBox;

package/dist/types/components/Table/AutoTable/common.d.ts

@@ -1,5 +1,6 @@
 import { ColumnDef as RTColumnDef, PaginationState, Row, RowSelectionState, SortingState, RowData } from '@tanstack/react-table';
 import type { ColumnDef, ColumnHelper } from './types.js';
+import React from 'react';
 export declare function createColumnHelper<TData extends RowData, TMeta = unknown>(): ColumnHelper<TData, TMeta>;
 export type AutoTableHookOptions<TData, TMeta = unknown> = {
     data: TData[];
@@ -23,3 +24,8 @@ export type AutoTableHookOptions<TData, TMeta = unknown> = {
 export declare function useAutoTable<TData, TMeta = unknown>(options: AutoTableHookOptions<TData, TMeta>): import("@tanstack/react-table").Table<TData>;
 export declare function mapColumnDefs<TData, TMeta>(columnDefs: ColumnDef<TData, TMeta>[]): RTColumnDef<TData>[];
 export declare function mapColumnDef<TData, TMeta, VData = unknown>(columnDef: ColumnDef<TData, TMeta, VData>): RTColumnDef<TData, VData>;
+export type ErrorContainerProps = {
+    error: boolean | string;
+};
+export type ErrorContainer = React.ComponentType<ErrorContainerProps>;
+export declare const DefaultErrorContainer: ErrorContainer;

package/dist/types/components/Table/AutoTable/controlled.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
 import type { SxProps, Theme } from '@mui/material/styles';
-import { AutoTableHookOptions } from './common.js';
+import { AutoTableHookOptions, type ErrorContainer as ErrorContainerType } from './common.js';
 export type ControlledAutoTableProps<TData, TMeta = unknown> = AutoTableHookOptions<TData, TMeta> & {
     stickyHeader?: boolean | {
         offset: number;
     };
     loading?: boolean;
     zeroStateMessage?: React.ReactNode;
+    error?: boolean | string;
+    ErrorContainer?: ErrorContainerType;
     sx?: SxProps<Theme>;
     className?: string;
 };
-export default function ControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, sx, className, ...options }: ControlledAutoTableProps<TData, TMeta>): React.JSX.Element;
+export default function ControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, error, ErrorContainer, sx, className, ...options }: ControlledAutoTableProps<TData, TMeta>): React.JSX.Element;

package/dist/types/components/Table/AutoTable/index.d.ts

@@ -2,6 +2,7 @@ import { SortingState, RowSelectionState, Row } from '@tanstack/react-table';
 import React from 'react';
 import type { SxProps, Theme } from '@mui/material/styles';
 import type { ColumnDef } from './types.js';
+import { type ErrorContainer as ErrorContainerType } from './common.js';
 export { createColumnHelper } from './common.js';
 export type AutoTableProps<TData, TMeta = unknown> = {
     data: TData[];
@@ -37,6 +38,8 @@ export type AutoTableProps<TData, TMeta = unknown> = {
     };
     loading?: boolean;
     zeroStateMessage?: React.ReactNode;
+    error?: boolean | string;
+    ErrorContainer?: ErrorContainerType;
     sx?: SxProps<Theme>;
     className?: string;
 };

package/dist/types/components/Table/AutoTable/virtual.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 import type { SxProps, Theme } from '@mui/material/styles';
-import { AutoTableHookOptions } from './common.js';
+import { AutoTableHookOptions, type ErrorContainer as ErrorContainerType } from './common.js';
 export type VirtualControlledAutoTableProps<TData, TMeta = unknown> = AutoTableHookOptions<TData, TMeta> & {
     stickyHeader?: boolean | {
         offset: number;
     };
     loading?: boolean;
     zeroStateMessage?: React.ReactNode;
+    error?: boolean | string;
+    ErrorContainer?: ErrorContainerType;
     scrollOffset?: number;
     getScrollElement: () => Element | null;
     renderWhenNotVisible?: boolean;
@@ -16,4 +18,4 @@ export type VirtualControlledAutoTableProps<TData, TMeta = unknown> = AutoTableH
     sx?: SxProps<Theme>;
     className?: string;
 };
-export default function VirtualControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, scrollOffset, getScrollElement, renderWhenNotVisible, rowSize, headerSize, overscan, sx, className, ...options }: VirtualControlledAutoTableProps<TData, TMeta>): React.JSX.Element;
+export default function VirtualControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, error, ErrorContainer, scrollOffset, getScrollElement, renderWhenNotVisible, rowSize, headerSize, overscan, sx, className, ...options }: VirtualControlledAutoTableProps<TData, TMeta>): React.JSX.Element;

package/dist/types/components/Table/index.d.ts

@@ -146,5 +146,5 @@ export type TableZeroStateProps = {
     sx?: SxProps<Theme>;
     className?: string;
 };
-export declare const TableZeroState: (props: TableZeroStateProps) => React.JSX.Element;
+export declare const TableMessage: (props: TableZeroStateProps) => React.JSX.Element;
 export {};

package/dist/types/components/Toast/content.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AlertProps } from '../Alert/index.js';
+export type ToastContentProps = AlertProps;
+declare const ToastContent: ({ sx, className, onClose, ...alertProps }: ToastContentProps) => import("react").JSX.Element;
+export default ToastContent;

package/dist/types/components/Toast/hook.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { AlertSeverity } from '../Alert/index.js';
+export type ToastOptions = {
+    label?: React.ReactNode;
+    text?: React.ReactNode;
+    link?: {
+        href: string;
+        content: React.ReactNode;
+    };
+    severity?: AlertSeverity;
+};
+declare module 'notistack' {
+    interface VariantOverrides {
+        veritone: ToastOptions;
+    }
+}
+export type ToastProviderProps = {
+    children?: React.ReactNode;
+};
+export declare const ToastProvider: (props: ToastProviderProps) => React.JSX.Element;
+export declare function useToast(): {
+    enqueueToast(options?: ToastOptions): void;
+    closeToast(): void;
+};

package/dist/types/components/Toast/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { AlertProps } from '../Alert/index.js';
-export type ToastProps = AlertProps & {
-    open?: boolean;
+import { ToastContentProps } from './content.js';
+export type ToastProps = Omit<ToastContentProps, 'onClose'> & {
+    open: boolean;
     onClose?(): void;
 };
 declare const Toast: ({ open, onClose, sx, className, ...alertProps }: ToastProps) => import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -54,7 +54,7 @@ export { default as StepLabel } from './components/StepLabel/index.js';
 export type { StepLabelProps } from './components/StepLabel/index.js';
 export { default as Stepper } from './components/Stepper/index.js';
 export type { StepperProps } from './components/Stepper/index.js';
-export { Table, TableBody, TableCell, SelectionTableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableZeroState } from './components/Table/index.js';
+export { Table, TableBody, TableCell, SelectionTableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableMessage as TableZeroState } from './components/Table/index.js';
 export type { TableProps, TableBodyProps, TableCellProps, SelectionTableCellProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableRowProps, TableSortLabelProps, TableZeroStateProps } from './components/Table/index.js';
 export { default as AutoTable, createColumnHelper } from './components/Table/AutoTable/index.js';
 export type { AutoTableProps } from './components/Table/AutoTable/index.js';
@@ -69,6 +69,8 @@ export { default as ThemeProvider } from './components/ThemeProvider/index.js';
 export type { ThemeProviderProps } from './components/ThemeProvider/index.js';
 export { default as Toast } from './components/Toast/index.js';
 export type { ToastProps } from './components/Toast/index.js';
+export { ToastProvider, useToast } from './components/Toast/hook.js';
+export type { ToastProviderProps, ToastOptions } from './components/Toast/hook.js';
 export { default as Typography } from './components/Typography/index.js';
 export type { TypographyProps } from './components/Typography/index.js';
 export { default as HomeOutlinedIcon } from './components/icons/HomeOutlinedIcon/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.49",
+  "version": "1.12.51",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [
@@ -63,6 +63,7 @@
     "@tanstack/react-table": "^8.10.7",
     "@tanstack/react-virtual": "^v3.0.0-beta.68",
     "deepmerge": "^4.3.1",
+    "notistack": "^3.0.1",
     "react-dropzone": "^14.2.3"
   },
   "devDependencies": {