@veritone-ce/design-system 2.8.14-next.2.0 → 2.8.14

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,
+      style: props.style,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableBody = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TableBody,
+    {
+      "data-testid": props["data-testid"],
+      style: props.style,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableFooter = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TableFooter,
+    {
+      "data-testid": props["data-testid"],
+      style: props.style,
+      className: props.className,
+      children: props.children
+    }
+  );
+};
+const TableHead = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TableHead,
+    {
+      "data-testid": props["data-testid"],
+      style: props.style,
+      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"};
+
+exports.default = styles;

package/dist/cjs/TablePagination/index.js

@@ -0,0 +1,118 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles_module = require('./styles.module.scss.js');
+var index$2 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
+require('../Select/controlled.js');
+var uncontrolled = require('../Select/uncontrolled.js');
+var React = require('react');
+var index$1 = require('../Input/index.js');
+var index = require('../FormControl/index.js');
+
+function TablePagination({
+  page,
+  count,
+  rowsPerPage = 10,
+  rowsPerPageOptions = [10, 50, 100],
+  rowsPerPageLabel = "Rows per page:",
+  rowsPerPageVariant = "normal",
+  showPageNumberInput = false,
+  ...props
+}) {
+  const showPrev = page !== 1;
+  const showNext = page < count / rowsPerPage;
+  const [inputPage, setInputPage] = React.useState(page.toString());
+  const handlePageInputChange = (e) => {
+    const value = e.target.value;
+    if (/^\d*$/.test(value)) {
+      setInputPage(value);
+    }
+  };
+  const handlePageInputBlur = () => {
+    const newPage = Math.max(
+      1,
+      Math.min(Math.ceil(count / rowsPerPage), Number(inputPage))
+    );
+    if (newPage !== page) {
+      props.onChangePage(newPage);
+    }
+    setInputPage(newPage.toString());
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === "NumpadEnter") {
+      handlePageInputBlur();
+    }
+  };
+  React.useEffect(() => {
+    setInputPage(page.toString());
+  }, [page]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles_module.default["container"], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { label: rowsPerPageLabel, placement: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      uncontrolled.default,
+      {
+        defaultValue: rowsPerPage,
+        clearable: false,
+        size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) + (rowsPerPageVariant === "tight" ? 0 : 1) : 3,
+        options: rowsPerPageOptions.map((option) => ({
+          label: option.toLocaleString(),
+          value: option
+        })),
+        onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
+        className: styles_module.default["rows-per-page-select"],
+        "data-pendo": props["data-pendo-select"],
+        tight: rowsPerPageVariant === "tight"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["page-counts"], children: [
+      ((page - 1) * rowsPerPage + 1).toLocaleString(),
+      "-",
+      Math.min(page * rowsPerPage, count).toLocaleString(),
+      " of",
+      " ",
+      count.toLocaleString()
+    ] }),
+    showPageNumberInput && /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.default,
+      {
+        className: styles_module.default["page-input"],
+        type: "number",
+        value: inputPage,
+        onChange: handlePageInputChange,
+        onBlur: handlePageInputBlur,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles_module.default["btn-list"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$2.default,
+        {
+          type: "button",
+          disabled: !showPrev,
+          onClick: () => props.onChangePage(page - 1),
+          "data-pendo": props["data-pendo-prev"],
+          children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateBeforeIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$2.default,
+        {
+          type: "button",
+          disabled: !showNext,
+          onClick: () => props.onChangePage(page + 1),
+          "data-pendo": props["data-pendo-next"],
+          children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateNextIcon, {})
+        }
+      ) })
+    ] })
+  ] });
+}
+const getDigits = (number) => {
+  return Math.max(Math.floor(Math.log10(Math.abs(number))), 0) + 1;
+};
+
+exports.default = TablePagination;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"container":"vt_ce_TablePagination_container__d07bacc1","rows-per-page-select":"vt_ce_TablePagination_rows-per-page-select__b32339ce","page-counts":"vt_ce_TablePagination_page-counts__30c1adb1","btn-list":"vt_ce_TablePagination_btn-list__3718fa45","page-input":"vt_ce_TablePagination_page-input__38c02d9e"};
+
+exports.default = css;

package/dist/cjs/Textarea/index.js

@@ -0,0 +1,59 @@
+'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');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var context = require('../FormControl/context.js');
+
+const Textarea = React.forwardRef(
+  ({
+    placeholder,
+    value,
+    disabled: propsDisabled,
+    error: propsError,
+    rows,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = context.useFormControlContext();
+    const error = propsError ?? ctx.error;
+    const disabled = propsDisabled ?? ctx.disabled;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-disabled": disabled,
+        "data-error": error,
+        "data-testid": dataTestId,
+        style,
+        className: cx.cx(styles_module.default["textarea"], className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref,
+            ...props,
+            placeholder,
+            value,
+            rows,
+            disabled,
+            className: styles_module.default["inner-textarea"]
+          }
+        )
+      }
+    );
+  }
+);
+
+exports.default = Textarea;

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

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

package/dist/cjs/Toast/content.js

@@ -0,0 +1,18 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../Alert/index.js');
+
+const ToastContent = ({
+  className,
+  onClose,
+  ...alertProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { onClose, className, ...alertProps });
+};
+
+exports.default = ToastContent;

package/dist/cjs/Toast/hook.js

@@ -0,0 +1,69 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var notistack = require('notistack');
+var content = require('./content.js');
+var styles_module = require('./styles.module.scss.js');
+
+const NotiToastOverride = React.forwardRef(function InnerNotiToastOverride({
+  id,
+  // veritone toast options start
+  label,
+  text,
+  // link, FIXME
+  severity,
+  action,
+  // veritone toast options end
+  ...props
+}, ref) {
+  const { closeSnackbar } = notistack.useSnackbar();
+  const handleDismiss = React.useCallback(() => {
+    closeSnackbar(id);
+  }, [id, closeSnackbar]);
+  return /* @__PURE__ */ jsxRuntime.jsx(notistack.SnackbarContent, { ref, style: props.style, className: props.className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    content.default,
+    {
+      label,
+      text,
+      severity,
+      action,
+      onClose: handleDismiss
+    }
+  ) });
+});
+const ToastProvider = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    notistack.SnackbarProvider,
+    {
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      classes: {
+        containerAnchorOriginTopRight: styles_module.default.snackbarContainer
+      },
+      Components: { veritone: NotiToastOverride },
+      children: props.children
+    }
+  );
+};
+function useToast() {
+  const snackbar = notistack.useSnackbar();
+  return {
+    enqueueToast(options = {}) {
+      return snackbar.enqueueSnackbar({
+        variant: "veritone",
+        ...options
+      });
+    },
+    closeToast(key) {
+      snackbar.closeSnackbar(key);
+    }
+  };
+}
+
+exports.ToastProvider = ToastProvider;
+exports.useToast = useToast;

package/dist/cjs/Toast/index.js

@@ -0,0 +1,15 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var content = require('./content.js');
+
+const Toast = ({ open, onClose, className, ...alertProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Snackbar, { open, onClose, className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(content.default, { onClose, ...alertProps }) }) });
+};
+
+exports.default = Toast;

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

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

package/dist/cjs/Tooltip/index.js

@@ -0,0 +1,135 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var index = require('../Typography/index.js');
+
+function Tooltip({
+  placement = "bottom",
+  showArrow = true,
+  strategy = "absolute",
+  disabled = false,
+  leadingTrim = true,
+  open: propsOpen,
+  children,
+  tooltip,
+  "data-testid": dataTestId,
+  style,
+  className
+}) {
+  const [_open, setOpen] = React.useState(false);
+  const open = !disabled && (propsOpen ?? _open);
+  const arrowRef = React.useRef(null);
+  const { refs, floatingStyles, context } = react.useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    strategy,
+    middleware: [
+      react.offset(10),
+      // inline(),
+      react.flip(),
+      react.shift(),
+      showArrow && react.arrow({
+        element: arrowRef
+      })
+    ],
+    whileElementsMounted: react.autoUpdate
+  });
+  const role = react.useRole(context, { role: "tooltip" });
+  const hover = react.useHover(context, {
+    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, {
+    outsidePress: false
+  });
+  const { getReferenceProps, getFloatingProps } = react.useInteractions([
+    role,
+    focus,
+    hover,
+    dismiss
+  ]);
+  const { isMounted, styles: transitionStyles } = react.useTransitionStyles(context, {
+    duration: 112,
+    initial: {
+      opacity: 0,
+      transform: `scale(95%)`
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "tooltip",
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        className: styles_module.default["tooltip-anchor"],
+        children
+      }
+    ),
+    isMounted && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref: refs.setFloating,
+        "data-testid": dataTestId,
+        style: {
+          ...floatingStyles
+        },
+        className: styles_module.default["tooltip-float"],
+        ...getFloatingProps(),
+        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
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.default = Tooltip;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+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-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

@@ -0,0 +1,52 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+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('react/jsx-runtime');
+require('../styles/css-vars.js');
+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 = as ?? variantComponents[variant];
+    const colorCn = variants_module.default[`c-${color}`];
+    return React.createElement(VariantComponent, {
+      ...props,
+      ref,
+      // style: style,
+      className: cx.cx(variantCn, colorCn, props.className)
+    });
+  }
+);
+const variantComponents = {
+  title: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  label: "span",
+  paragraph1: "p",
+  paragraph2: "p",
+  paragraph3: "p",
+  button: "span",
+  buttonSmall: "span",
+  input: "span",
+  statusChip: "span"
+};
+
+exports.default = Typography;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+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","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"};
+
+exports.default = styles;

package/dist/cjs/bundled_modules/@babel/runtime/helpers/esm/extends.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+exports.default = _extends;

package/dist/cjs/bundled_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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;
+}
+
+exports.default = _objectWithoutPropertiesLoose;