@veritone-ce/design-system 2.3.13 → 2.4.0

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

@@ -0,0 +1,34 @@
+'use strict';
+'use client';
+'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 TableRow = React.forwardRef(
+  ({ children, "data-testid": dataTestId, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        ref,
+        ...props,
+        "data-testid": dataTestId,
+        className: cx.cx(styles_module.default.tableRow, className),
+        children
+      }
+    );
+  }
+);
+
+exports.default = TableRow;

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

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

package/dist/cjs/Table/index.js

@@ -0,0 +1,76 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var index = require('../Typography/index.js');
+var styles_module = require('./styles.module.scss.js');
+
+const Table = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Table,
+    {
+      "data-testid": props["data-testid"],
+      stickyHeader: props.stickyHeader,
+      sx: props.sx,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableBody = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TableBody,
+    {
+      "data-testid": props["data-testid"],
+      sx: props.sx,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableFooter = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TableFooter,
+    {
+      "data-testid": props["data-testid"],
+      sx: props.sx,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableHead = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TableHead,
+    {
+      "data-testid": props["data-testid"],
+      sx: props.sx,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableSortLabel = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TableSortLabel,
+    {
+      active: props.active,
+      direction: props.direction,
+      hideSortIcon: props.hideSortIcon,
+      onClick: props.onClick,
+      disabled: props.disabled,
+      children: props.children
+    }
+  );
+};
+const TableMessage = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.tableMessageWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { className: styles_module.default.tableMessage, children: props.children }) });
+};
+
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableMessage = TableMessage;
+exports.TableSortLabel = TableSortLabel;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"tableMessageWrapper":"vt_ce_Table_tableMessageWrapper__bd25fe47","tableMessage":"vt_ce_Table_tableMessage__f6316814","checkbox":"vt_ce_Table_checkbox__fcf60b18","selectionTableCell":"vt_ce_Table_selectionTableCell__1edf8bad"};
+
+exports.default = styles;

package/dist/cjs/Tooltip/index.js

@@ -52,7 +52,11 @@ function Tooltip({
   });
   const role = react.useRole(context, { role: "tooltip" });
   const hover = react.useHover(context, {
-    handleClose: react.safePolygon()
+    handleClose: react.safePolygon(),
+    restMs: 300,
+    // If their cursor never rests, open it after 1000ms as a
+    // fallback.
+    delay: { open: 1e3 }
   });
   const focus = react.useFocus(context);
   const dismiss = react.useDismiss(context, {
@@ -83,7 +87,7 @@ function Tooltip({
       }
     ),
     isMounted && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      "span",
       {
         ref: refs.setFloating,
         "data-testid": dataTestId,
@@ -92,30 +96,38 @@ function Tooltip({
         },
         className: styles_module.default["tooltip-float"],
         ...getFloatingProps(),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...transitionStyles }, children: [
-          showArrow && /* @__PURE__ */ jsxRuntime.jsx(
-            react.FloatingArrow,
-            {
-              ref: arrowRef,
-              context,
-              fill: defaultTheme.defaultThemeCssVariableUsages.palette.tooltip.surface,
-              stroke: defaultTheme.defaultThemeCssVariableUsages.palette.tooltip.surface,
-              strokeWidth: 1,
-              style: { margin: "-1px" }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default["tooltip-body"], children: /* @__PURE__ */ jsxRuntime.jsx(
-            index.default,
-            {
-              variant: "label",
-              color: "inherit",
-              leadingTrim,
-              style,
-              className: cx.cx(styles_module.default["tooltip-text"], className),
-              children: tooltip
-            }
-          ) })
-        ] })
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            style: { ...transitionStyles },
+            className: styles_module.default["tooltip-transition"],
+            children: [
+              showArrow && /* @__PURE__ */ jsxRuntime.jsx(
+                react.FloatingArrow,
+                {
+                  ref: arrowRef,
+                  context,
+                  fill: defaultTheme.defaultThemeCssVariableUsages.palette.tooltip.surface,
+                  stroke: defaultTheme.defaultThemeCssVariableUsages.palette.tooltip.surface,
+                  strokeWidth: 1,
+                  style: { margin: "-1px" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["tooltip-body"], children: /* @__PURE__ */ jsxRuntime.jsx(
+                index.default,
+                {
+                  as: "span",
+                  variant: "label",
+                  color: "inherit",
+                  leadingTrim,
+                  style,
+                  className: cx.cx(styles_module.default["tooltip-text"], className),
+                  children: tooltip
+                }
+              ) })
+            ]
+          }
+        )
       }
     )
   ] });

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css = {"tooltip-anchor":"vt_ce_Tooltip_tooltip-anchor__a4700bfb","tooltip-float":"vt_ce_Tooltip_tooltip-float__ff012681","tooltip-body":"vt_ce_Tooltip_tooltip-body__19e91c15","tooltip-text":"vt_ce_Tooltip_tooltip-text__7d962fae"};
+var css = {"tooltip-anchor":"vt_ce_Tooltip_tooltip-anchor__a4700bfb","tooltip-float":"vt_ce_Tooltip_tooltip-float__ff012681","tooltip-transition":"vt_ce_Tooltip_tooltip-transition__4ac21924","tooltip-body":"vt_ce_Tooltip_tooltip-body__19e91c15","tooltip-text":"vt_ce_Tooltip_tooltip-text__7d962fae"};
 
 exports.default = css;

package/dist/cjs/Typography/index.js

@@ -17,13 +17,14 @@ var variants_module = require('./variants.module.scss.js');
 
 const Typography = React.forwardRef(
   ({
+    as,
     variant = "paragraph1",
     color = "primary",
     leadingTrim = false,
     ...props
   }, ref) => {
     const variantCn = !leadingTrim ? variants_module.default[`t-${variant}`] : variants_module.default[`t-${variant}-trim`];
-    const VariantComponent = props.as ?? variantComponents[variant];
+    const VariantComponent = as ?? variantComponents[variant];
     const colorCn = variants_module.default[`c-${color}`];
     return React.createElement(VariantComponent, {
       ...props,
@@ -45,7 +46,8 @@ const variantComponents = {
   paragraph3: "p",
   button: "span",
   buttonSmall: "span",
-  input: "span"
+  input: "span",
+  statusChip: "span"
 };
 
 exports.default = Typography;

package/dist/cjs/Typography/variants.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"t-title":"vt_ce_Typography_t-title__3cbea11b","t-title-trim":"vt_ce_Typography_t-title-trim__28bcad4d","t-h1":"vt_ce_Typography_t-h1__8953782d","t-h1-trim":"vt_ce_Typography_t-h1-trim__c62483c9","t-h2":"vt_ce_Typography_t-h2__f2534173","t-h2-trim":"vt_ce_Typography_t-h2-trim__5563b7ae","t-h3":"vt_ce_Typography_t-h3__cdff4f67","t-h3-trim":"vt_ce_Typography_t-h3-trim__0017200e","t-h4":"vt_ce_Typography_t-h4__0acb0595","t-h4-trim":"vt_ce_Typography_t-h4-trim__289878da","t-label":"vt_ce_Typography_t-label__0e84833e","t-label-trim":"vt_ce_Typography_t-label-trim__8e002adc","t-paragraph1":"vt_ce_Typography_t-paragraph1__4a6ca0f2","t-paragraph1-trim":"vt_ce_Typography_t-paragraph1-trim__1d97d797","t-paragraph2":"vt_ce_Typography_t-paragraph2__114e0304","t-paragraph2-trim":"vt_ce_Typography_t-paragraph2-trim__8ca4dfc5","t-paragraph3":"vt_ce_Typography_t-paragraph3__9ce2d2b8","t-paragraph3-trim":"vt_ce_Typography_t-paragraph3-trim__e1fbe9a5","t-button":"vt_ce_Typography_t-button__de9ce92c","t-button-trim":"vt_ce_Typography_t-button-trim__2c6a3dfb","t-buttonSmall":"vt_ce_Typography_t-buttonSmall__48799340","t-buttonSmall-trim":"vt_ce_Typography_t-buttonSmall-trim__af5b6ddb","t-input":"vt_ce_Typography_t-input__3c546dd2","t-input-trim":"vt_ce_Typography_t-input-trim__16e63d90","c-primary":"vt_ce_Typography_c-primary__9abbeb28","c-secondary":"vt_ce_Typography_c-secondary__54db5189","c-tertiary":"vt_ce_Typography_c-tertiary__580276de","c-disabled":"vt_ce_Typography_c-disabled__01eb87d1","c-inherit":"vt_ce_Typography_c-inherit__d9a71622"};
+var styles = {"t-title":"vt_ce_Typography_t-title__3cbea11b","t-title-trim":"vt_ce_Typography_t-title-trim__28bcad4d","t-h1":"vt_ce_Typography_t-h1__8953782d","t-h1-trim":"vt_ce_Typography_t-h1-trim__c62483c9","t-h2":"vt_ce_Typography_t-h2__f2534173","t-h2-trim":"vt_ce_Typography_t-h2-trim__5563b7ae","t-h3":"vt_ce_Typography_t-h3__cdff4f67","t-h3-trim":"vt_ce_Typography_t-h3-trim__0017200e","t-h4":"vt_ce_Typography_t-h4__0acb0595","t-h4-trim":"vt_ce_Typography_t-h4-trim__289878da","t-label":"vt_ce_Typography_t-label__0e84833e","t-label-trim":"vt_ce_Typography_t-label-trim__8e002adc","t-paragraph1":"vt_ce_Typography_t-paragraph1__4a6ca0f2","t-paragraph1-trim":"vt_ce_Typography_t-paragraph1-trim__1d97d797","t-paragraph2":"vt_ce_Typography_t-paragraph2__114e0304","t-paragraph2-trim":"vt_ce_Typography_t-paragraph2-trim__8ca4dfc5","t-paragraph3":"vt_ce_Typography_t-paragraph3__9ce2d2b8","t-paragraph3-trim":"vt_ce_Typography_t-paragraph3-trim__e1fbe9a5","t-button":"vt_ce_Typography_t-button__de9ce92c","t-button-trim":"vt_ce_Typography_t-button-trim__2c6a3dfb","t-buttonSmall":"vt_ce_Typography_t-buttonSmall__48799340","t-buttonSmall-trim":"vt_ce_Typography_t-buttonSmall-trim__af5b6ddb","t-input":"vt_ce_Typography_t-input__3c546dd2","t-input-trim":"vt_ce_Typography_t-input-trim__16e63d90","t-statusChip":"vt_ce_Typography_t-statusChip__35634fde","t-statusChip-trim":"vt_ce_Typography_t-statusChip-trim__adcb5a29","c-primary":"vt_ce_Typography_c-primary__9abbeb28","c-secondary":"vt_ce_Typography_c-secondary__54db5189","c-tertiary":"vt_ce_Typography_c-tertiary__580276de","c-disabled":"vt_ce_Typography_c-disabled__01eb87d1","c-inherit":"vt_ce_Typography_c-inherit__d9a71622"};
 
 exports.default = styles;

package/dist/cjs/index.js

@@ -40,12 +40,18 @@ var index$e = 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('./TablePagination/index.js');
-var index$g = require('./Textarea/index.js');
-var index$h = require('./Toast/index.js');
+var index$f = require('./StatusChip/index.js');
+var index$o = 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 hook = require('./Toast/hook.js');
-var index$i = require('./Tooltip/index.js');
-var index$j = require('./Typography/index.js');
+var index$m = require('./Tooltip/index.js');
+var index$n = require('./Typography/index.js');
+var common = require('./Table/AutoTable/common.js');
 
 
 
@@ -118,10 +124,21 @@ exports.ControlledSelect = controlled$1.default;
 exports.Select = uncontrolled.default;
 exports.createControlledSelectComponent = factory$4.createControlledSelectComponent;
 exports.createSelectComponent = factory$4.createSelectComponent;
-exports.TablePagination = index$f.default;
-exports.Textarea = index$g.default;
-exports.Toast = index$h.default;
+exports.StatusChip = index$f.default;
+exports.Table = index$o.Table;
+exports.TableBody = index$o.TableBody;
+exports.TableFooter = index$o.TableFooter;
+exports.TableHead = index$o.TableHead;
+exports.TableMessage = index$o.TableMessage;
+exports.TableSortLabel = index$o.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.ToastProvider = hook.ToastProvider;
 exports.useToast = hook.useToast;
-exports.Tooltip = index$i.default;
-exports.Typography = index$j.default;
+exports.Tooltip = index$m.default;
+exports.Typography = index$n.default;
+exports.createColumnHelper = common.createColumnHelper;

package/dist/cjs/styles/createPalette.js

@@ -131,10 +131,30 @@ function createPaletteAction(options, disabled, text) {
 }
 function createPaletteIndicator(options, disabled) {
   return {
-    success: options.success ? createPaletteActionVariantsColors(options.success, disabled) : createPaletteActionVariantsColors("#28BA3F", disabled),
-    info: options.info ? createPaletteActionVariantsColors(options.info, disabled) : createPaletteActionVariantsColors("#335B89", disabled),
-    warning: options.warning ? createPaletteActionVariantsColors(options.warning, disabled) : createPaletteActionVariantsColors("#FFBB0A", disabled),
-    error: options.error ? createPaletteActionVariantsColors(options.error, disabled) : createPaletteActionVariantsColors("#EB0000", disabled)
+    success: options.success ? createPaletteActionVariantsColors(options.success, disabled) : createPaletteActionVariantsColors(
+      { surface: "#28BA3F", on: "#FFFFFF" },
+      disabled
+    ),
+    info: options.info ? createPaletteActionVariantsColors(options.info, disabled) : createPaletteActionVariantsColors(
+      { surface: "#335B89", on: "#FFFFFF" },
+      disabled
+    ),
+    warning: options.warning ? createPaletteActionVariantsColors(options.warning, disabled) : createPaletteActionVariantsColors(
+      { surface: "#FFBB0A", on: "#FFFFFF" },
+      disabled
+    ),
+    error: options.error ? createPaletteActionVariantsColors(options.error, disabled) : createPaletteActionVariantsColors(
+      { surface: "#EB0000", on: "#FFFFFF" },
+      disabled
+    ),
+    pending: options.pending ? createPaletteActionVariantsColors(options.pending, disabled) : createPaletteActionVariantsColors(
+      { surface: "#7C848D", on: "#FFFFFF" },
+      disabled
+    ),
+    processing: options.processing ? createPaletteActionVariantsColors(options.processing, disabled) : createPaletteActionVariantsColors(
+      { surface: "#FFBB0A", on: "#FFFFFF" },
+      disabled
+    )
   };
 }
 function createPaletteTable(options, disabled) {

package/dist/cjs/styles/typography.js

@@ -16,7 +16,8 @@ const TypographyVariantKeys = [
   "paragraph3",
   "button",
   "buttonSmall",
-  "input"
+  "input",
+  "statusChip"
 ];
 function createTypographyStyle({
   fontSize,
@@ -142,6 +143,13 @@ function createTypography(typography = {}) {
       fontWeight: base.fontWeightRegular,
       // leading: 20,
       ...typography.input
+    }),
+    statusChip: createTypographyStyle({
+      ...inherit,
+      fontSize: 9,
+      fontWeight: base.fontWeightBold,
+      leading: 12.28,
+      ...typography.statusChip
     })
   };
 }