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

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

@@ -0,0 +1,3 @@
+var styles = {"accordion-group":"vt_ce_Accordion_accordion-group__8bbf5326","accordion":"vt_ce_Accordion_accordion__dd9538a7","accordion-header":"vt_ce_Accordion_accordion-header__364b94af","accordion-title":"vt_ce_Accordion_accordion-title__5880129b","accordion-icon":"vt_ce_Accordion_accordion-icon__36646438","accordion-content":"vt_ce_Accordion_accordion-content__19b0322a"};
+
+export { styles as default };

package/dist/esm/Alert/index.js

@@ -0,0 +1,66 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 IconButton from '../IconButton/index.js';
+import { CloseIcon, ErrorIcon, WarningIcon, InfoIcon, SuccessIcon } from '../Icon/internal.js';
+
+const defaultMessageLabel = {
+  success: `Success`,
+  info: `Info`,
+  warning: `Alert`,
+  error: `Error`
+};
+const defaultMessageText = {
+  success: `Your action was completed. `,
+  info: `General information. `,
+  warning: `Your action is required. `,
+  error: `An error has occurred. `
+};
+const Alert = ({ severity = "success", ...props }) => {
+  const label = props.label ?? defaultMessageLabel[severity];
+  const text = props.text ?? defaultMessageText[severity];
+  const icon = iconVariants[severity];
+  const color = defaultThemeCssVariableUsages.palette.indicator[severity].base.surface;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": props["data-testid"],
+      style: {
+        // @ts-ignore
+        "--vt-ce-alert-color": color,
+        ...props.style
+      },
+      className: cx(css["alert"], props.className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: css["alert-stripe"] }),
+        /* @__PURE__ */ jsx("span", { className: css["alert-icon"], children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: css["alert-content"], children: [
+          /* @__PURE__ */ jsxs("span", { className: css["alert-label"], children: [
+            label,
+            ": "
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: css["alert-text"], children: text })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: css["spacer"] }),
+        props.action,
+        props.onClose && /* @__PURE__ */ jsx("span", { className: css["alert-close"], children: /* @__PURE__ */ jsx(IconButton, { onClick: props.onClose, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) })
+      ]
+    }
+  );
+};
+const iconVariants = {
+  success: /* @__PURE__ */ jsx(SuccessIcon, { size: "inherit" }),
+  info: /* @__PURE__ */ jsx(InfoIcon, { size: "inherit" }),
+  warning: /* @__PURE__ */ jsx(WarningIcon, { size: "inherit" }),
+  error: /* @__PURE__ */ jsx(ErrorIcon, { size: "inherit" })
+};
+
+export { Alert as default };

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

@@ -0,0 +1,3 @@
+var css = {"alert":"vt_ce_Alert_alert__fd77641d","alert-stripe":"vt_ce_Alert_alert-stripe__0f1f2061","alert-icon":"vt_ce_Alert_alert-icon__42ff172c","alert-content":"vt_ce_Alert_alert-content__2e0d6f7d","alert-label":"vt_ce_Alert_alert-label__b0f6391e","alert-text":"vt_ce_Alert_alert-text__d16ad6d1","spacer":"vt_ce_Alert_spacer__583746b0","alert-close":"vt_ce_Alert_alert-close__03480fbe"};
+
+export { css as default };

package/dist/esm/Badge/index.js

@@ -0,0 +1,63 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+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 { isNil } from '../utils/isNil.js';
+import Typography from '../Typography/index.js';
+import styles from './styles.module.scss.js';
+
+function Badge({
+  palette = defaultThemeCssVariableUsages.palette.indicator.info.base,
+  variant = "primary",
+  disabled = false,
+  ...props
+}) {
+  const variantCn = styles[`variant-${variant}`];
+  const displayLabel = React__default.useMemo(() => {
+    if (typeof props.label === "number" && typeof props.max === "number") {
+      return props.label > props.max ? `${props.max}+` : props.label;
+    }
+    return props.label;
+  }, [props.label, props.max]);
+  const hasLabel = !isNil(displayLabel);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: props.style,
+      className: cx(styles["badge-anchor"], props.className),
+      children: [
+        props.children,
+        hasLabel && /* @__PURE__ */ jsx("div", { className: styles["badge-wrapper"], "data-disabled": disabled, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(styles["badge"], variantCn),
+            style: {
+              ...{
+                "--vt-ce-badge-palette-base-surface": palette.surface,
+                "--vt-ce-badge-palette-base-on": palette.on
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "paragraph3",
+                leadingTrim: true,
+                className: styles["badge-text"],
+                children: displayLabel
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export { Badge as default };

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

@@ -0,0 +1,3 @@
+var styles = {"badge-anchor":"vt_ce_Badge_badge-anchor__fa68a2f7","badge-wrapper":"vt_ce_Badge_badge-wrapper__df676f67","badge":"vt_ce_Badge_badge__1dfe8a54","badge-text":"vt_ce_Badge_badge-text__bf75dc5e","variant-primary":"vt_ce_Badge_variant-primary__bebb74dc","variant-secondary":"vt_ce_Badge_variant-secondary__ca2bdd1b"};
+
+export { styles as default };

package/dist/esm/Button/index.js

@@ -0,0 +1,67 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import CircularProgress from '../CircularProgress/index.js';
+import styles 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';
+
+const Button = forwardRef(
+  ({
+    variant = "primary",
+    palette = variant === "primary" ? defaultThemeCssVariableUsages.palette.action.primary : defaultThemeCssVariableUsages.palette.action.text,
+    size = "large",
+    disabled = false,
+    loading = false,
+    active = false,
+    startIcon,
+    endIcon,
+    children,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const variantCn = styles[variant];
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...props,
+        ref,
+        "data-size": size,
+        "data-loading": loading,
+        "data-active": active,
+        disabled: loading || disabled,
+        "data-testid": dataTestId,
+        style: {
+          ...{
+            "--vt-ce-button-palette-base-surface": palette.base.surface,
+            "--vt-ce-button-palette-base-on": palette.base.on,
+            "--vt-ce-button-palette-hover-surface": palette.hover.surface,
+            "--vt-ce-button-palette-hover-on": palette.hover.on,
+            "--vt-ce-button-palette-disabled-surface": palette.disabled.surface,
+            "--vt-ce-button-palette-disabled-on": palette.disabled.on
+          },
+          ...style
+        },
+        className: cx(styles["button"], variantCn, className),
+        children: [
+          loading && /* @__PURE__ */ jsx("span", { className: styles["loading-container"], children: /* @__PURE__ */ jsx(CircularProgress, { size: "1.4em" }) }),
+          /* @__PURE__ */ jsxs("span", { className: styles["inner-container"], children: [
+            startIcon && /* @__PURE__ */ jsx("span", { className: styles["button-icon"], children: startIcon }),
+            /* @__PURE__ */ jsx("span", { className: styles["button-text"], children }),
+            endIcon && /* @__PURE__ */ jsx("span", { className: styles["button-icon"], children: endIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export { Button as default };

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

@@ -0,0 +1,3 @@
+var styles = {"button":"vt_ce_Button_button__d8082ab3","button-text":"vt_ce_Button_button-text__effa80d8","primary":"vt_ce_Button_primary__4eddabe5","secondary":"vt_ce_Button_secondary__c899fe53","tertiary":"vt_ce_Button_tertiary__e00cd8aa","inner-container":"vt_ce_Button_inner-container__de9cfa40","loading-container":"vt_ce_Button_loading-container__3e1355d6","button-icon":"vt_ce_Button_button-icon__f0208651"};
+
+export { styles as default };

package/dist/esm/Checkbox/index.js

@@ -0,0 +1,160 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { forwardRef, useRef, useId } from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+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 css from './styles.module.scss.js';
+
+const Checkbox = forwardRef(
+  ({
+    defaultChecked,
+    checked,
+    label,
+    indeterminate = false,
+    disabled = false,
+    "data-testid": dataTestId,
+    style,
+    className,
+    onThumbnail = false,
+    ...props
+  }, ref) => {
+    const inputRef = useRef(null);
+    const forkedRef = useForkRef(inputRef, ref);
+    React__default.useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate ?? false;
+      }
+    }, [indeterminate]);
+    const labelId = useId();
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "checkbox",
+        "aria-labelledby": labelId,
+        "aria-checked": indeterminate ? "mixed" : checked ?? defaultChecked,
+        "aria-disabled": disabled,
+        onClick: (e) => {
+          if (e.target !== inputRef.current) {
+            inputRef.current?.click();
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        },
+        "data-testid": dataTestId,
+        style,
+        className: cx(css["checkbox"], className),
+        "data-pendo": props["data-pendo"],
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: css["passthrough-label-container"], children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...props,
+                type: "checkbox",
+                ref: forkedRef,
+                defaultChecked,
+                checked,
+                disabled,
+                className: css["invisible-checkbox"]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: css["icon-container"], children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, {}) : checked ? /* @__PURE__ */ jsx(CheckedIcon, {}) : /* @__PURE__ */ jsx(UncheckedIcon, { onThumbnail }) })
+          ] }),
+          label && /* @__PURE__ */ jsx("span", { className: css["visible-label"], id: labelId, children: label })
+        ]
+      }
+    );
+  }
+);
+const UncheckedIcon = ({ onThumbnail }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      fill: defaultThemeCssVariableUsages.palette.background.primary,
+      children: [
+        onThumbnail && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "4",
+            y: "4",
+            width: "15",
+            height: "15",
+            fill: defaultThemeCssVariableUsages.palette.thumbnailCheckbox.fill
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: css["checkbox-svg-path"],
+            d: "M19 5v14H5V5h14Zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z"
+          }
+        )
+      ]
+    }
+  );
+};
+const CheckedIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3Z",
+          className: css["checkbox-svg-path"]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10 17.0001L5 12.0001L6.41 10.5901L10 14.1701L17.59 6.58008L19 8.00008L10 17.0001Z",
+          fill: defaultThemeCssVariableUsages.palette.action.primary.base.on
+        }
+      )
+    ]
+  }
+);
+const IndeterminateIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3Z",
+          className: css["checkbox-svg-path"]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M17 13H7V11H17V13Z",
+          fill: defaultThemeCssVariableUsages.palette.action.primary.base.on
+        }
+      )
+    ]
+  }
+);
+
+export { Checkbox as default };

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

@@ -0,0 +1,3 @@
+var css = {"checkbox":"vt_ce_Checkbox_checkbox__475ae3ca","checkbox-svg-path":"vt_ce_Checkbox_checkbox-svg-path__5458fee1","passthrough-label-container":"vt_ce_Checkbox_passthrough-label-container__f6e112d8","invisible-checkbox":"vt_ce_Checkbox_invisible-checkbox__8d2156f3","visible-label":"vt_ce_Checkbox_visible-label__04b8f13e","icon-container":"vt_ce_Checkbox_icon-container__2c923936"};
+
+export { css as default };

package/dist/esm/Chip/index.js

@@ -0,0 +1,47 @@
+'use strict';
+'use client';
+import { jsxs, 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 { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import IconButton from '../IconButton/index.js';
+import { CloseIcon } from '../Icon/internal.js';
+
+const Chip = forwardRef(
+  ({ clearable = true, icon, variant = "outlined", ...props }, ref) => {
+    const clearButtonPalette = defaultThemeCssVariableUsages.palette.action.text;
+    const clearButtonVariant = "primary";
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cx(css["chip"], css[`variant-${variant}`], props.className),
+        "data-testid": props["data-testid"],
+        style: props.style,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: css["chip-icon"], children: icon }),
+          /* @__PURE__ */ jsx("span", { className: css["chip-text"], children: /* @__PURE__ */ jsx("span", { className: css["chip-text-inner"], children: props.children }) }),
+          clearable && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: css["button-icon"],
+              palette: clearButtonPalette,
+              variant: clearButtonVariant,
+              style: { padding: "0px" },
+              onClick: props.onClear,
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { Chip as default };

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

@@ -0,0 +1,3 @@
+var css = {"chip":"vt_ce_Chip_chip__ae0a56a7","variant-outlined":"vt_ce_Chip_variant-outlined__408ce4cf","variant-filled":"vt_ce_Chip_variant-filled__0936f9b0","chip-text":"vt_ce_Chip_chip-text__f1581ea1","chip-text-inner":"vt_ce_Chip_chip-text-inner__90adadbe","chip-icon":"vt_ce_Chip_chip-icon__b390b6ab","button-icon":"vt_ce_Chip_button-icon__746d1ac3"};
+
+export { css as default };

package/dist/esm/CircularProgress/index.js

@@ -0,0 +1,55 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+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';
+
+const SIZE = 44;
+const thickness = 3.6;
+function CircularProgress({
+  size = 40,
+  fillParentHeight = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(css["container"], props.className),
+      "data-fill-parent-height": fillParentHeight,
+      "data-testid": props["data-testid"],
+      style: {
+        // @ts-ignore
+        "--vt-ce-circular-progress-color": props.color ?? void 0,
+        "--vt-ce-circular-progress-size": typeof size === "string" ? size : `${size}px`,
+        ...props.style
+      },
+      children: /* @__PURE__ */ jsx("span", { className: css["progress-container"], children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+          className: css["progress-svg"],
+          "data-chromatic": "ignore",
+          children: /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: SIZE,
+              cy: SIZE,
+              r: (SIZE - thickness) / 2,
+              fill: "none",
+              strokeWidth: thickness,
+              className: css["progress-circle"]
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+
+export { CircularProgress as default };

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

@@ -0,0 +1,3 @@
+var css = {"container":"vt_ce_CircularProgress_container__77d464af","progress-container":"vt_ce_CircularProgress_progress-container__fcbcd6a2","progress-svg":"vt_ce_CircularProgress_progress-svg__a7131fa3","progress-circle":"vt_ce_CircularProgress_progress-circle__5829963e"};
+
+export { css as default };

package/dist/esm/ColorPicker/index.js

@@ -0,0 +1,59 @@
+'use strict';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Input from '../Input/index.js';
+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';
+
+const ColorPicker = ({
+  onChange,
+  value,
+  defaultValue,
+  style,
+  className,
+  ...props
+}) => {
+  const [hex, setHex] = useState(value ?? defaultValue ?? "");
+  const [isValid, setIsValid] = useState(true);
+  const handleHexChange = (event) => {
+    const newHex = event.target.value;
+    setHex(newHex);
+    const isValidHex = validateHex(newHex);
+    setIsValid(isValidHex);
+    onChange?.(newHex, isValidHex);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx(css["color-picker"], className), style, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...props,
+        type: "text",
+        value: hex,
+        onChange: handleHexChange,
+        className: isValid ? cx(css["input"]) : cx(css["inputError"])
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "color-square",
+        className: cx(css["color-square"], {
+          [cx(css["color-square-error"])]: !isValid
+        }),
+        style: { backgroundColor: hex }
+      }
+    )
+  ] });
+};
+const validateHex = (hex) => {
+  const hexRegex = /^#([0-9A-F]{3}){1,2}$/i;
+  return hexRegex.test(hex);
+};
+
+export { ColorPicker as default, validateHex };

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

@@ -0,0 +1,3 @@
+var css = {"input":"vt_ce_ColorPicker_input__4f43dadb","inputError":"vt_ce_ColorPicker_inputError__a3cd6c47","color-picker":"vt_ce_ColorPicker_color-picker__ae1f8e92","color-square":"vt_ce_ColorPicker_color-square__85914e52","color-square-error":"vt_ce_ColorPicker_color-square-error__3edb1567"};
+
+export { css as default };