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

package/dist/esm/Textarea/index.js

@@ -0,0 +1,55 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import css from './styles.module.scss.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import { useFormControlContext } from '../FormControl/context.js';
+
+const Textarea = forwardRef(
+  ({
+    placeholder,
+    value,
+    disabled: propsDisabled,
+    error: propsError,
+    rows,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = useFormControlContext();
+    const error = propsError ?? ctx.error;
+    const disabled = propsDisabled ?? ctx.disabled;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-disabled": disabled,
+        "data-error": error,
+        "data-testid": dataTestId,
+        style,
+        className: cx(css["textarea"], className),
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref,
+            ...props,
+            placeholder,
+            value,
+            rows,
+            disabled,
+            className: css["inner-textarea"]
+          }
+        )
+      }
+    );
+  }
+);
+
+export { Textarea as default };

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

@@ -0,0 +1,3 @@
+var css = {"textarea":"vt_ce_Textarea_textarea__eaf89267","inner-textarea":"vt_ce_Textarea_inner-textarea__b35c4995"};
+
+export { css as default };

package/dist/esm/Toast/content.js

@@ -0,0 +1,14 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import Alert from '../Alert/index.js';
+
+const ToastContent = ({
+  className,
+  onClose,
+  ...alertProps
+}) => {
+  return /* @__PURE__ */ jsx(Alert, { onClose, className, ...alertProps });
+};
+
+export { ToastContent as default };

package/dist/esm/Toast/hook.js

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

package/dist/esm/Toast/index.js

@@ -0,0 +1,11 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Snackbar } from '@mui/material';
+import ToastContent from './content.js';
+
+const Toast = ({ open, onClose, className, ...alertProps }) => {
+  return /* @__PURE__ */ jsx(Snackbar, { open, onClose, className, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ToastContent, { onClose, ...alertProps }) }) });
+};
+
+export { Toast as default };

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

@@ -0,0 +1,3 @@
+var styles = {"snackbarContainer":"vt_ce_Toast_snackbarContainer__de9410f6"};
+
+export { styles as default };

package/dist/esm/Tooltip/index.js

@@ -0,0 +1,131 @@
+'use strict';
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useRole, useHover, safePolygon, useFocus, useDismiss, useInteractions, useTransitionStyles, FloatingArrow } from '@floating-ui/react';
+import React__default from 'react';
+import css from './styles.module.scss.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import Typography from '../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__default.useState(false);
+  const open = !disabled && (propsOpen ?? _open);
+  const arrowRef = React__default.useRef(null);
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    strategy,
+    middleware: [
+      offset(10),
+      // inline(),
+      flip(),
+      shift(),
+      showArrow && arrow({
+        element: arrowRef
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+  const role = useRole(context, { role: "tooltip" });
+  const hover = useHover(context, {
+    handleClose: safePolygon(),
+    restMs: 300,
+    // If their cursor never rests, open it after 1000ms as a
+    // fallback.
+    delay: { open: 1e3 }
+  });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context, {
+    outsidePress: false
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    role,
+    focus,
+    hover,
+    dismiss
+  ]);
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: 112,
+    initial: {
+      opacity: 0,
+      transform: `scale(95%)`
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "tooltip",
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        className: css["tooltip-anchor"],
+        children
+      }
+    ),
+    isMounted && /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: refs.setFloating,
+        "data-testid": dataTestId,
+        style: {
+          ...floatingStyles
+        },
+        className: css["tooltip-float"],
+        ...getFloatingProps(),
+        children: /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: { ...transitionStyles },
+            className: css["tooltip-transition"],
+            children: [
+              showArrow && /* @__PURE__ */ jsx(
+                FloatingArrow,
+                {
+                  ref: arrowRef,
+                  context,
+                  fill: defaultThemeCssVariableUsages.palette.tooltip.surface,
+                  stroke: defaultThemeCssVariableUsages.palette.tooltip.surface,
+                  strokeWidth: 1,
+                  style: { margin: "-1px" }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: css["tooltip-body"], children: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  as: "span",
+                  variant: "label",
+                  color: "inherit",
+                  leadingTrim,
+                  style,
+                  className: cx(css["tooltip-text"], className),
+                  children: tooltip
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { Tooltip as default };

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

@@ -0,0 +1,3 @@
+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"};
+
+export { css as default };

package/dist/esm/Typography/index.js

@@ -0,0 +1,48 @@
+'use strict';
+import React__default, { forwardRef } from 'react';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import 'react/jsx-runtime';
+import '../styles/css-vars.js';
+import styles from './variants.module.scss.js';
+
+const Typography = forwardRef(
+  ({
+    as,
+    variant = "paragraph1",
+    color = "primary",
+    leadingTrim = false,
+    ...props
+  }, ref) => {
+    const variantCn = !leadingTrim ? styles[`t-${variant}`] : styles[`t-${variant}-trim`];
+    const VariantComponent = as ?? variantComponents[variant];
+    const colorCn = styles[`c-${color}`];
+    return React__default.createElement(VariantComponent, {
+      ...props,
+      ref,
+      // style: style,
+      className: 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"
+};
+
+export { Typography as default };

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

@@ -0,0 +1,3 @@
+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"};
+
+export { styles as default };

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

@@ -0,0 +1,16 @@
+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);
+}
+
+export { _extends as default };

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

@@ -0,0 +1,14 @@
+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;
+}
+
+export { _objectWithoutPropertiesLoose as default };

package/dist/esm/bundled_modules/@mui/material/usePagination/usePagination.js

@@ -0,0 +1,117 @@
+'use client';
+import _extends from '../../../@babel/runtime/helpers/esm/extends.js';
+import _objectWithoutPropertiesLoose from '../../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js';
+import { unstable_useControlled } from '@mui/utils';
+
+const _excluded = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
+function usePagination(props = {}) {
+  // keep default values in sync with @default tags in Pagination.propTypes
+  const {
+      boundaryCount = 1,
+      componentName = 'usePagination',
+      count = 1,
+      defaultPage = 1,
+      disabled = false,
+      hideNextButton = false,
+      hidePrevButton = false,
+      onChange: handleChange,
+      page: pageProp,
+      showFirstButton = false,
+      showLastButton = false,
+      siblingCount = 1
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [page, setPageState] = unstable_useControlled({
+    controlled: pageProp,
+    default: defaultPage,
+    name: componentName,
+    state: 'page'
+  });
+  const handleClick = (event, value) => {
+    if (!pageProp) {
+      setPageState(value);
+    }
+    if (handleChange) {
+      handleChange(event, value);
+    }
+  };
+
+  // https://dev.to/namirsab/comment/2050
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({
+      length
+    }, (_, i) => start + i);
+  };
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+  const siblingsStart = Math.max(Math.min(
+  // Natural start
+  page - siblingCount,
+  // Lower boundary when page is high
+  count - boundaryCount - siblingCount * 2 - 1),
+  // Greater than startPages
+  boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(
+  // Natural end
+  page + siblingCount,
+  // Upper boundary when page is low
+  boundaryCount + siblingCount * 2 + 2),
+  // Less than endPages
+  endPages.length > 0 ? endPages[0] - 2 : count - 1);
+
+  // Basic list of items to render
+  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+  const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
+  // Start ellipsis
+  // eslint-disable-next-line no-nested-ternary
+  ...(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []),
+  // Sibling pages
+  ...range(siblingsStart, siblingsEnd),
+  // End ellipsis
+  // eslint-disable-next-line no-nested-ternary
+  ...(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
+
+  // Map the button type to its page number
+  const buttonPage = type => {
+    switch (type) {
+      case 'first':
+        return 1;
+      case 'previous':
+        return page - 1;
+      case 'next':
+        return page + 1;
+      case 'last':
+        return count;
+      default:
+        return null;
+    }
+  };
+
+  // Convert the basic item list to PaginationItem props objects
+  const items = itemList.map(item => {
+    return typeof item === 'number' ? {
+      onClick: event => {
+        handleClick(event, item);
+      },
+      type: 'page',
+      page: item,
+      selected: item === page,
+      disabled,
+      'aria-current': item === page ? 'true' : undefined
+    } : {
+      onClick: event => {
+        handleClick(event, buttonPage(item));
+      },
+      type: item,
+      page: buttonPage(item),
+      selected: false,
+      disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
+    };
+  });
+  return _extends({
+    items
+  }, other);
+}
+
+export { usePagination as default };