@veritone-ce/design-system 2.8.12 → 2.8.13-next.0

package/dist/cjs/Dialog/components.js

@@ -17,10 +17,10 @@ require('../styles/defaultTheme.js');
 require('../styles/provider.client.js');
 var portal = require('../styles/portal.js');
 require('../styles/css-vars.js');
-var index$1 = require('../Button/index.js');
-var index = require('../Typography/index.js');
-var index$2 = require('../IconButton/index.js');
+var index = require('../Button/index.js');
+var index$1 = require('../IconButton/index.js');
 var internal = require('../Icon/internal.js');
+var components = require('../unstable/Card/components.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -50,9 +50,18 @@ const Dialog = React__namespace.forwardRef(function Dialog2({
   overlayClassName,
   lockScroll = true,
   disableAutoFocus = false,
-  "data-testid": dataTestId,
-  ...options
+  open,
+  onDismiss,
+  preventOutsideDismiss,
+  preventEscapeDismiss,
+  ...props
 }, propRef) {
+  const options = {
+    open,
+    onDismiss,
+    preventOutsideDismiss,
+    preventEscapeDismiss
+  };
   const dialog = state.useDialog(options);
   const { isMounted: overlayIsMounted, styles: overlayTransitionStyles } = react.useTransitionStyles(dialog.context, {
     duration: 225,
@@ -84,13 +93,11 @@ const Dialog = React__namespace.forwardRef(function Dialog2({
             context: dialog.context,
             disabled: disableAutoFocus,
             children: /* @__PURE__ */ jsxRuntime.jsx(portal.PortalThemeRelay, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              components.default,
               {
                 ref,
-                "aria-labelledby": dialog.labelId,
-                "aria-describedby": dialog.descriptionId,
                 ...dialog.getFloatingProps(),
-                "data-testid": dataTestId,
+                ...props,
                 style: {
                   ...innerTransitionStyles,
                   ...style
@@ -108,109 +115,41 @@ const Dialog = React__namespace.forwardRef(function Dialog2({
 });
 const DialogStart = React__namespace.forwardRef(
   function DialogStart2({ children, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        ...props,
-        className: cx.cx(styles_module.default["dialog-start"], props.className),
-        children
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(components.CardStart, { ref, ...props, children });
   }
 );
 const DialogContent = React__namespace.forwardRef(function DialogContent2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      ref,
-      className: cx.cx(styles_module.default["dialog-content"], props.className),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { ref, ...props, children });
 });
 const DialogEnd = React__namespace.forwardRef(
   function DialogEnd2({ children, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        ...props,
-        className: cx.cx(styles_module.default["dialog-end"], props.className),
-        children
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(components.CardEnd, { ref, ...props, children });
   }
 );
-const DialogTitle = React__namespace.forwardRef(function DialogTitle2({ children, ...props }, ref) {
-  const { setLabelId } = state.useDialogContext();
-  const id = React__namespace.useId();
-  React__namespace.useLayoutEffect(() => {
-    setLabelId(id);
-    return () => setLabelId(void 0);
-  }, [id, setLabelId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogStart, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    index.default,
+const DialogTitle = React__namespace.forwardRef(function DialogTitle2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.CardTitle,
     {
-      variant: "h4",
-      color: "primary",
       ref,
-      id,
-      leadingTrim: true,
+      className: cx.cx(className, styles_module.default["dialog-title"]),
       ...props,
-      className: cx.cx(styles_module.default["dialog-title"], props.className),
       children
     }
-  ) });
+  );
 });
 const DialogTypography = React__namespace.forwardRef(function DialogTypography2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    index.default,
-    {
-      variant: "paragraph2",
-      color: "primary",
-      ...props,
-      ref,
-      className: cx.cx(styles_module.default["dialog-typography"], props.className),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(components.CardTypography, { ref, ...props, children });
 });
 const DialogDescription = React__namespace.forwardRef(function DialogDescription2({ children, ...props }, ref) {
-  const { setDescriptionId } = state.useDialogContext();
-  const id = React__namespace.useId();
-  React__namespace.useLayoutEffect(() => {
-    setDescriptionId(id);
-    return () => setDescriptionId(void 0);
-  }, [id, setDescriptionId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogTypography,
-    {
-      variant: "paragraph2",
-      color: "primary",
-      ...props,
-      ref,
-      id,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(components.CardDescription, { ref, ...props, children });
 });
 const DialogActions = React__namespace.forwardRef(function DialogActions2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogEnd, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      ref,
-      className: cx.cx(styles_module.default["dialog-actions"], props.className),
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(components.CardActions, { ref, ...props, children });
 });
 const DialogCloseButton = React__namespace.forwardRef(function DialogCloseButton2(props, ref) {
   const { dismiss } = state.useDialogContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    index$1.default,
+    index.default,
     {
       variant: "tertiary",
       ...props,
@@ -225,7 +164,7 @@ const DialogCloseButton = React__namespace.forwardRef(function DialogCloseButton
 const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIconButton2({ children = /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}), ...props }, ref) {
   const { dismiss } = state.useDialogContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    index$2.default,
+    index$1.default,
     {
       ...props,
       ref,

package/dist/cjs/Dialog/state.js

@@ -30,8 +30,6 @@ function useDialog({
   preventOutsideDismiss,
   preventEscapeDismiss
 }) {
-  const [labelId, setLabelId] = React__namespace.useState();
-  const [descriptionId, setDescriptionId] = React__namespace.useState();
   const data = react.useFloating({
     open,
     onOpenChange: (newOpen) => !newOpen && typeof dismissDialog === "function" && dismissDialog()
@@ -49,13 +47,9 @@ function useDialog({
       open,
       dismiss: dismissDialog,
       ...interactions,
-      ...data,
-      labelId,
-      descriptionId,
-      setLabelId,
-      setDescriptionId
+      ...data
     }),
-    [open, dismissDialog, interactions, data, labelId, descriptionId]
+    [open, dismissDialog, interactions, data]
   );
 }
 const DialogContext = React__namespace.createContext(null);

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css = {"dialog-overlay":"vt_ce_Dialog_dialog-overlay__9285b892","dialog":"vt_ce_Dialog_dialog__6471c2e3","dialog-start":"vt_ce_Dialog_dialog-start__3d0c37c9","dialog-end":"vt_ce_Dialog_dialog-end__d33601cf","dialog-content":"vt_ce_Dialog_dialog-content__237fe65e","dialog-title":"vt_ce_Dialog_dialog-title__d88ef551","dialog-typography":"vt_ce_Dialog_dialog-typography__94d06942","dialog-actions":"vt_ce_Dialog_dialog-actions__e259c208"};
+var styles = {"dialog-overlay":"vt_ce_Dialog_dialog-overlay__9285b892","dialog":"vt_ce_Dialog_dialog__6471c2e3","dialog-title":"vt_ce_Dialog_dialog-title__d88ef551"};
 
-exports.default = css;
+exports.default = styles;

package/dist/cjs/FileUploader/controlled.js

@@ -18,7 +18,14 @@ var index$2 = require('../IconButton/index.js');
 var wrappers = require('../Icon/wrappers.js');
 require('../Icon/factory.js');
 var styles_module = require('./styles.module.scss.js');
+require('../unstable/Breadcrumbs/index.js');
+require('../unstable/Card/components.js');
 var index$1 = require('../unstable/LinearProgress/index.js');
+require('@mui/material');
+require('../FormControl/index.js');
+require('../ErrorBoundary/index.js');
+require('../Button/index.js');
+require('../unstable/Tabs/index.js');
 
 const CloudUploadOutlinedIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.CloudUploadOutlined);
 const DeleteOutlineIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.DeleteOutline);

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

@@ -84,7 +84,8 @@ function ControlledAutoTable({
               const size = rowsPerPage ?? 10;
               table.setPageSize(size);
               options.onRowsPerPageChange(size);
-            }
+            },
+            className: styles_module.default.pagination
           }
         ) }) }) })
       ]

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"visuallyHidden":"vt_ce_AutoTable_visuallyHidden__d42457bf","errorContainer":"vt_ce_AutoTable_errorContainer__22629d1a","loadingContainer":"vt_ce_AutoTable_loadingContainer__800e1c5c","table":"vt_ce_AutoTable_table__abdcf037","stickyHeader":"vt_ce_AutoTable_stickyHeader__1fdfff7b","virtualTableBody":"vt_ce_AutoTable_virtualTableBody__1264b0bb"};
+var styles = {"visuallyHidden":"vt_ce_AutoTable_visuallyHidden__d42457bf","errorContainer":"vt_ce_AutoTable_errorContainer__22629d1a","loadingContainer":"vt_ce_AutoTable_loadingContainer__800e1c5c","table":"vt_ce_AutoTable_table__abdcf037","stickyHeader":"vt_ce_AutoTable_stickyHeader__1fdfff7b","virtualTableBody":"vt_ce_AutoTable_virtualTableBody__1264b0bb","pagination":"vt_ce_AutoTable_pagination__1b911403"};
 
 exports.default = styles;

package/dist/cjs/TablePagination/index.js

@@ -13,6 +13,13 @@ var uncontrolled = require('../Select/uncontrolled.js');
 var React = require('react');
 var index$1 = require('../Input/index.js');
 var index = require('../FormControl/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');
 
 function TablePagination({
   page,
@@ -22,6 +29,12 @@ function TablePagination({
   rowsPerPageLabel = "Rows per page:",
   rowsPerPageVariant = "normal",
   showPageNumberInput = false,
+  onChangePage,
+  onRowsPerPageChange,
+  "data-pendo-prev": dataPendoPrev,
+  "data-pendo-next": dataPendoNext,
+  "data-pendo-select": dataPendoSelect,
+  className,
   ...props
 }) {
   const showPrev = page !== 1;
@@ -39,7 +52,7 @@ function TablePagination({
       Math.min(Math.ceil(count / rowsPerPage), Number(inputPage))
     );
     if (newPage !== page) {
-      props.onChangePage(newPage);
+      onChangePage(newPage);
     }
     setInputPage(newPage.toString());
   };
@@ -51,7 +64,7 @@ function TablePagination({
   React.useEffect(() => {
     setInputPage(page.toString());
   }, [page]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles_module.default["container"], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ...props, className: cx.cx(styles_module.default["container"], className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(index.default, { label: rowsPerPageLabel, placement: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(
       uncontrolled.default,
       {
@@ -62,9 +75,9 @@ function TablePagination({
           label: option.toLocaleString(),
           value: option
         })),
-        onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
+        onChange: (_, newRowsPerPage) => onRowsPerPageChange?.(newRowsPerPage),
         className: styles_module.default["rows-per-page-select"],
-        "data-pendo": props["data-pendo-select"],
+        "data-pendo": dataPendoSelect,
         tight: rowsPerPageVariant === "tight"
       }
     ) }),
@@ -93,8 +106,8 @@ function TablePagination({
         {
           type: "button",
           disabled: !showPrev,
-          onClick: () => props.onChangePage(page - 1),
-          "data-pendo": props["data-pendo-prev"],
+          onClick: () => onChangePage(page - 1),
+          "data-pendo": dataPendoPrev,
           children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateBeforeIcon, {})
         }
       ) }),
@@ -103,8 +116,8 @@ function TablePagination({
         {
           type: "button",
           disabled: !showNext,
-          onClick: () => props.onChangePage(page + 1),
-          "data-pendo": props["data-pendo-next"],
+          onClick: () => onChangePage(page + 1),
+          "data-pendo": dataPendoNext,
           children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateNextIcon, {})
         }
       ) })

package/dist/cjs/index.js

@@ -71,6 +71,17 @@ exports.useTheme = useTheme.default;
 exports.TypographyVariantKeys = typography.TypographyVariantKeys;
 exports.PortalThemeRelay = portal.PortalThemeRelay;
 exports.createPalette = createPalette.createPalette;
+exports.createPaletteAction = createPalette.createPaletteAction;
+exports.createPaletteActionVariantsColors = createPalette.createPaletteActionVariantsColors;
+exports.createPaletteBackground = createPalette.createPaletteBackground;
+exports.createPaletteBrand = createPalette.createPaletteBrand;
+exports.createPaletteColor = createPalette.createPaletteColor;
+exports.createPaletteIndicator = createPalette.createPaletteIndicator;
+exports.createPaletteStroke = createPalette.createPaletteStroke;
+exports.createPaletteSurfaceColors = createPalette.createPaletteSurfaceColors;
+exports.createPaletteTable = createPalette.createPaletteTable;
+exports.createPaletteText = createPalette.createPaletteText;
+exports.createPaletteTooltip = createPalette.createPaletteTooltip;
 exports.createTypography = createTypography.createTypography;
 exports.ThemeContext = provider_client.ThemeContext;
 exports.ThemeContextProvider = provider_client.ThemeContextProvider;

package/dist/cjs/styles/createPalette.js

@@ -225,3 +225,14 @@ function createPalette(options = {}) {
 }
 
 exports.createPalette = createPalette;
+exports.createPaletteAction = createPaletteAction;
+exports.createPaletteActionVariantsColors = createPaletteActionVariantsColors;
+exports.createPaletteBackground = createPaletteBackground;
+exports.createPaletteBrand = createPaletteBrand;
+exports.createPaletteColor = createPaletteColor;
+exports.createPaletteIndicator = createPaletteIndicator;
+exports.createPaletteStroke = createPaletteStroke;
+exports.createPaletteSurfaceColors = createPaletteSurfaceColors;
+exports.createPaletteTable = createPaletteTable;
+exports.createPaletteText = createPaletteText;
+exports.createPaletteTooltip = createPaletteTooltip;

package/dist/cjs/styles/entrypoint.scss.js

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