@veritone-ce/design-system 2.4.32 → 2.4.34

package/dist/cjs/Card/index.js

@@ -0,0 +1,34 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+require('@capsizecss/core');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../Box/index.js');
+require('../styles/styled.js');
+
+const Card = React.forwardRef(
+  ({ inset = "small", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cx.cx(styles_module.default["card"], props.className),
+        "data-testid": props["data-testid"],
+        "data-inset": inset,
+        style: props.style,
+        children: props.children
+      }
+    );
+  }
+);
+
+exports.default = Card;

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

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

package/dist/cjs/ErrorBoundary/index.js

@@ -0,0 +1,54 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var iconsMaterial = require('@mui/icons-material');
+var styles_module = require('./styles.module.scss.js');
+var index = require('../Box/index.js');
+var index$1 = require('../Typography/index.js');
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, info: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    this.setState({ hasError: true, error, info });
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "20px"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.customMessageContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              iconsMaterial.ErrorOutline,
+              {
+                fontSize: "large",
+                sx: {
+                  color: (theme) => theme.palette.error.main
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { variant: "h4", children: this.props.message ?? "Error" })
+          ] })
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+
+exports.default = ErrorBoundary;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"supportLink":"vt_ce_ErrorBoundary_supportLink__f7667f8c","description":"vt_ce_ErrorBoundary_description__77e0158e","customMessageContainer":"vt_ce_ErrorBoundary_customMessageContainer__97495086"};
+
+exports.default = styles;

package/dist/cjs/index.js

@@ -18,41 +18,43 @@ var index = require('./Alert/index.js');
 var index$1 = require('./Badge/index.js');
 var index$2 = require('./Box/index.js');
 var index$3 = require('./Button/index.js');
-var index$4 = require('./Checkbox/index.js');
-var index$5 = require('./Chip/index.js');
-var index$6 = require('./CircularProgress/index.js');
-var index$7 = require('./DatePicker/index.js');
-var index$8 = require('./DateRangePicker/index.js');
+var index$4 = require('./Card/index.js');
+var index$5 = require('./Checkbox/index.js');
+var index$6 = require('./Chip/index.js');
+var index$7 = require('./CircularProgress/index.js');
+var index$8 = require('./DatePicker/index.js');
+var index$9 = require('./DateRangePicker/index.js');
 var components = require('./Dialog/components.js');
 var factory = require('./Dialog/factory.js');
 var components$1 = require('./Drawer/components.js');
 var factory$1 = require('./Drawer/factory.js');
+var index$a = require('./ErrorBoundary/index.js');
 var components$2 = require('./FileUploader/components.js');
-var index$9 = require('./FormControl/index.js');
-var index$a = require('./GlobalStyles/index.js');
+var index$b = require('./FormControl/index.js');
+var index$c = require('./GlobalStyles/index.js');
 var wrappers = require('./Icon/wrappers.js');
 var factory$2 = require('./Icon/factory.js');
-var index$b = require('./IconButton/index.js');
-var index$c = require('./Input/index.js');
+var index$d = require('./IconButton/index.js');
+var index$e = require('./Input/index.js');
 var controlled = require('./Menu/controlled.js');
 var factory$3 = require('./Menu/factory.js');
-var index$d = require('./Pagination/index.js');
-var index$e = require('./RadioButton/index.js');
+var index$f = require('./Pagination/index.js');
+var index$g = require('./RadioButton/index.js');
 var controlled$1 = require('./Select/controlled.js');
 var uncontrolled = require('./Select/uncontrolled.js');
 var factory$4 = require('./Select/factory.js');
-var index$f = require('./StatusChip/index.js');
-var index$p = require('./Table/index.js');
-var index$g = require('./Table/AutoTable/index.js');
-var index$h = require('./Table/TableCell/index.js');
-var index$i = require('./Table/TableRow/index.js');
-var index$j = require('./TablePagination/index.js');
-var index$k = require('./Textarea/index.js');
-var index$l = require('./Toast/index.js');
+var index$h = require('./StatusChip/index.js');
+var index$r = require('./Table/index.js');
+var index$i = require('./Table/AutoTable/index.js');
+var index$j = require('./Table/TableCell/index.js');
+var index$k = require('./Table/TableRow/index.js');
+var index$l = require('./TablePagination/index.js');
+var index$m = require('./Textarea/index.js');
+var index$n = require('./Toast/index.js');
 var hook = require('./Toast/hook.js');
-var index$m = require('./Tooltip/index.js');
-var index$n = require('./Typography/index.js');
-var index$o = require('./ColorPicker/index.js');
+var index$o = require('./Tooltip/index.js');
+var index$p = require('./Typography/index.js');
+var index$q = require('./ColorPicker/index.js');
 var stepper = require('./Stepper/stepper.js');
 var auto = require('./Stepper/auto.js');
 var common = require('./Table/AutoTable/common.js');
@@ -84,11 +86,12 @@ exports.Alert = index.default;
 exports.Badge = index$1.default;
 exports.Box = index$2.default;
 exports.Button = index$3.default;
-exports.Checkbox = index$4.default;
-exports.Chip = index$5.default;
-exports.CircularProgress = index$6.default;
-exports.DatePicker = index$7.default;
-exports.DateRangePicker = index$8.default;
+exports.Card = index$4.default;
+exports.Checkbox = index$5.default;
+exports.Chip = index$6.default;
+exports.CircularProgress = index$7.default;
+exports.DatePicker = index$8.default;
+exports.DateRangePicker = index$9.default;
 exports.Dialog = components.default;
 exports.DialogActions = components.DialogActions;
 exports.DialogCloseButton = components.DialogCloseButton;
@@ -111,46 +114,47 @@ exports.DrawerStart = components$1.DrawerStart;
 exports.DrawerTitle = components$1.DrawerTitle;
 exports.DrawerTypography = components$1.DrawerTypography;
 exports.createDrawerComponent = factory$1.createDrawerComponent;
+exports.ErrorBoundary = index$a.default;
 exports.UploadButton = components$2.UploadButton;
 exports.UploadDropzone = components$2.UploadDropzone;
 exports.UploadList = components$2.UploadList;
 exports.UploadListItem = components$2.UploadListItem;
-exports.FormControl = index$9.default;
-exports.GlobalStyles = index$a.default;
+exports.FormControl = index$b.default;
+exports.GlobalStyles = index$c.default;
 exports.adaptMuiSvgIcon = wrappers.adaptMuiSvgIcon;
 exports.adaptSvgIcon = wrappers.adaptSvgIcon;
 exports.DefaultIconFallback = factory$2.DefaultIconFallback;
 exports.createIconComponent = factory$2.createIconComponent;
-exports.IconButton = index$b.default;
-exports.Input = index$c.default;
+exports.IconButton = index$d.default;
+exports.Input = index$e.default;
 exports.Menu = controlled.default;
 exports.MenuItem = controlled.MenuItem;
 exports.createMenuComponent = factory$3.createMenuComponent;
-exports.Pagination = index$d.default;
-exports.RadioButton = index$e.default;
+exports.Pagination = index$f.default;
+exports.RadioButton = index$g.default;
 exports.ControlledSelect = controlled$1.default;
 exports.Select = uncontrolled.default;
 exports.createControlledSelectComponent = factory$4.createControlledSelectComponent;
 exports.createSelectComponent = factory$4.createSelectComponent;
-exports.StatusChip = index$f.default;
-exports.Table = index$p.Table;
-exports.TableBody = index$p.TableBody;
-exports.TableFooter = index$p.TableFooter;
-exports.TableHead = index$p.TableHead;
-exports.TableMessage = index$p.TableMessage;
-exports.TableSortLabel = index$p.TableSortLabel;
-exports.AutoTable = index$g.default;
-exports.TableCell = index$h.default;
-exports.TableRow = index$i.default;
-exports.TablePagination = index$j.default;
-exports.Textarea = index$k.default;
-exports.Toast = index$l.default;
+exports.StatusChip = index$h.default;
+exports.Table = index$r.Table;
+exports.TableBody = index$r.TableBody;
+exports.TableFooter = index$r.TableFooter;
+exports.TableHead = index$r.TableHead;
+exports.TableMessage = index$r.TableMessage;
+exports.TableSortLabel = index$r.TableSortLabel;
+exports.AutoTable = index$i.default;
+exports.TableCell = index$j.default;
+exports.TableRow = index$k.default;
+exports.TablePagination = index$l.default;
+exports.Textarea = index$m.default;
+exports.Toast = index$n.default;
 exports.ToastProvider = hook.ToastProvider;
 exports.useToast = hook.useToast;
-exports.Tooltip = index$m.default;
-exports.Typography = index$n.default;
-exports.ColorPicker = index$o.default;
-exports.validateHex = index$o.validateHex;
+exports.Tooltip = index$o.default;
+exports.Typography = index$p.default;
+exports.ColorPicker = index$q.default;
+exports.validateHex = index$q.validateHex;
 exports.Stepper = stepper.default;
 exports.AutoStepper = auto.default;
 exports.createColumnHelper = common.createColumnHelper;

package/dist/cjs/styles/createPalette.js

@@ -186,6 +186,19 @@ function createPaletteBackground(options) {
     };
   }
 }
+function createPaletteStroke(options) {
+  if (isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base
+    };
+  }
+}
 function createPalette(options = {}) {
   const disabled = options.disabled ? createPaletteSurfaceColors(options.disabled) : createPaletteSurfaceColors({
     surface: "#FAFAFA",
@@ -241,6 +254,11 @@ function createPalette(options = {}) {
         secondary: "#F8F7F7"
       }
     ),
+    stroke: createPaletteStroke(
+      options.stroke ?? {
+        primary: "#D8D8D8"
+      }
+    ),
     table: createPaletteTable(
       options.table ?? {
         base: {