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

package/dist/esm/FormControl/context.js

@@ -0,0 +1,13 @@
+'use strict';
+'use client';
+import React__default from 'react';
+
+const FormControlContext = React__default.createContext({
+  error: false,
+  disabled: false
+});
+function useFormControlContext() {
+  return React__default.useContext(FormControlContext);
+}
+
+export { FormControlContext, useFormControlContext };

package/dist/esm/FormControl/index.js

@@ -0,0 +1,60 @@
+'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 '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import { useFormControlContext, FormControlContext } from './context.js';
+
+const FormControl = forwardRef(
+  ({ placement = "block-start", ...props }, ref) => {
+    const parentCtx = useFormControlContext();
+    const context = {
+      error: Boolean(props.error) || parentCtx.error,
+      disabled: Boolean(props.disabled) || parentCtx.disabled
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-testid": props["data-testid"],
+        "data-error": context.error,
+        "data-disabled": context.disabled,
+        className: cx(
+          css["form-control"],
+          css[`placement-${placement}`],
+          props.className
+        ),
+        style: props.style,
+        children: [
+          props.label && /* @__PURE__ */ jsx("label", { className: css["label"], children: props.label }),
+          /* @__PURE__ */ jsx("span", { className: css["inner-control"], children: /* @__PURE__ */ jsx(FormControlContext.Provider, { value: context, children: props.children }) }),
+          props.helpLabel && /* @__PURE__ */ jsx("span", { className: css["help-label"], children: props.helpLabel }),
+          props.error && /* @__PURE__ */ jsxs("span", { className: css["error-container"], children: [
+            /* @__PURE__ */ jsx(IndicatorCircle, {}),
+            /* @__PURE__ */ jsx("span", { className: css["error-label"], children: props.error === true ? "An error has occurred." : props.error })
+          ] })
+        ]
+      }
+    );
+  }
+);
+const IndicatorCircle = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
+  }
+);
+
+export { FormControl as default };

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

@@ -0,0 +1,3 @@
+var css = {"form-control":"vt_ce_FormControl_form-control__f5c042d2","placement-block-start":"vt_ce_FormControl_placement-block-start__bb019f8a","label":"vt_ce_FormControl_label__e267d531","placement-inline-start":"vt_ce_FormControl_placement-inline-start__c6ebc6e8","placement-inline-end":"vt_ce_FormControl_placement-inline-end__578955ef","inner-control":"vt_ce_FormControl_inner-control__6e05c1a6","help-label":"vt_ce_FormControl_help-label__7c556775","error-container":"vt_ce_FormControl_error-container__f033abc3","error-label":"vt_ce_FormControl_error-label__6a15e7f6"};
+
+export { css as default };

package/dist/esm/Icon/factory.js

@@ -0,0 +1,21 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { forwardRef } from 'react';
+import { BrokenImageOutlined } from '@mui/icons-material';
+import { adaptMuiSvgIcon } from './wrappers.js';
+
+const DefaultIconFallback = adaptMuiSvgIcon(BrokenImageOutlined);
+function createIconComponent({
+  iconMap = {},
+  fallback = DefaultIconFallback
+}) {
+  return forwardRef(function Icon({ name, ...genericProps }, ref) {
+    const ResolvedIcon = React__default.useMemo(
+      () => iconMap[name] ?? fallback,
+      [name]
+    );
+    return /* @__PURE__ */ jsx(ResolvedIcon, { ref, name, ...genericProps });
+  });
+}
+
+export { DefaultIconFallback, createIconComponent };

package/dist/esm/Icon/internal.js

@@ -0,0 +1,52 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { Close, NavigateBefore, NavigateNext } from '@mui/icons-material';
+import { adaptMuiSvgIcon, adaptSvgIcon } from './wrappers.js';
+
+const NavigateNextIcon = adaptMuiSvgIcon(NavigateNext);
+const NavigateBeforeIcon = adaptMuiSvgIcon(NavigateBefore);
+const CloseIcon = adaptMuiSvgIcon(Close);
+const SuccessIcon = adaptSvgIcon(
+  /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7 12.2656L10.5714 16.4642L17 8.90665L15.9929 7.71423L10.5714 14.0878L8.00714 11.0816L7 12.2656Z",
+      fill: "currentColor"
+    }
+  ) })
+);
+const InfoIcon = adaptSvgIcon(
+  /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM13.86 17.0623L14.0162 16.4231C13.9358 16.461 13.8055 16.5048 13.6256 16.5545C13.4457 16.6042 13.2847 16.6291 13.1427 16.6291C12.8396 16.6291 12.6266 16.5794 12.5035 16.4799C12.3804 16.3805 12.3188 16.1935 12.3188 15.9189C12.3188 15.81 12.3377 15.649 12.3756 15.4359C12.4135 15.2228 12.4561 15.0334 12.5035 14.8677L13.0859 12.801C13.1427 12.6116 13.1817 12.4032 13.203 12.176C13.2243 11.9487 13.235 11.7901 13.235 11.7001C13.235 11.2645 13.0823 10.9106 12.7769 10.6383C12.4715 10.3661 12.0371 10.2299 11.4736 10.2299C11.1611 10.2299 10.8297 10.2856 10.4793 10.3969C10.1289 10.5081 9.762 10.6419 9.37847 10.7981L9.22222 11.4373C9.33586 11.3947 9.47198 11.3497 9.6306 11.3024C9.78922 11.255 9.94428 11.2314 10.0958 11.2314C10.4036 11.2314 10.6119 11.2834 10.7208 11.3876C10.8297 11.4918 10.8842 11.6764 10.8842 11.9416C10.8842 12.0884 10.8664 12.2505 10.8309 12.4281C10.7954 12.6057 10.7516 12.7939 10.6995 12.9927L10.1171 15.0666C10.065 15.2844 10.0271 15.4797 10.0035 15.6525C9.9798 15.8253 9.96796 15.9946 9.96796 16.1603C9.96796 16.5865 10.1254 16.938 10.4403 17.215C10.7551 17.492 11.1966 17.6305 11.7648 17.6305C12.1341 17.6305 12.4585 17.582 12.7378 17.4849C13.0172 17.3878 13.3912 17.247 13.86 17.0623ZM13.757 8.671C14.0293 8.41769 14.1654 8.11111 14.1654 7.75126C14.1654 7.39141 14.0293 7.08365 13.757 6.82797C13.4848 6.57228 13.1569 6.44444 12.7734 6.44444C12.3898 6.44444 12.0608 6.57228 11.7861 6.82797C11.5115 7.08365 11.3742 7.39141 11.3742 7.75126C11.3742 8.11111 11.5115 8.41769 11.7861 8.671C12.0608 8.92432 12.3898 9.05097 12.7734 9.05097C13.1569 9.05097 13.4848 8.92432 13.757 8.671Z",
+      fill: "currentColor"
+    }
+  ) })
+);
+const WarningIcon = adaptSvgIcon(
+  /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M19.075 19.075C20.8848 17.2651 22 14.7605 22 12C22 9.23949 20.8848 6.73492 19.075 4.92505C17.2651 3.11517 14.7605 2 12 2C9.23949 2 6.73492 3.11517 4.92505 4.92505C3.11517 6.73492 2 9.23949 2 12C2 14.7605 3.11517 17.2651 4.92505 19.075C6.73492 20.8848 9.23949 22 12 22C14.7605 22 17.2651 20.8848 19.075 19.075ZM13.3528 15.8574C13.3528 15.1079 12.7495 14.5046 12 14.5046C11.2505 14.5046 10.6289 15.1079 10.6289 15.8574C10.6289 16.6069 11.2505 17.2285 12 17.2285C12.7495 17.2285 13.3528 16.6069 13.3528 15.8574ZM12 13.1335C11.5064 13.1335 11.1408 12.7313 11.0859 12.2194L10.6289 8.1426C10.5558 7.42962 11.3053 6.77148 12 6.77148C12.6947 6.77148 13.4442 7.42962 13.3528 8.1426L12.9141 12.2194C12.8592 12.7313 12.4936 13.1335 12 13.1335Z",
+      fill: "currentColor"
+    }
+  ) })
+);
+const ErrorIcon = adaptSvgIcon(
+  /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M19.0711 4.92898C15.1678 1.02575 8.83216 1.02575 4.92893 4.92898C1.0257 8.83221 1.0257 15.1679 4.92893 19.0711C8.83216 22.9743 15.1678 22.9743 19.0711 19.0711C22.9743 15.1679 22.9743 8.83221 19.0711 4.92898ZM14.8284 16.2427L12 13.4143L9.17157 16.2427L7.75736 14.8285L10.5858 12L7.75736 9.17162L9.17157 7.7574L12 10.5858L14.8284 7.7574L16.2426 9.17162L13.4142 12L16.2426 14.8285L14.8284 16.2427Z",
+      fill: "currentColor"
+    }
+  ) })
+);
+
+export { CloseIcon, ErrorIcon, InfoIcon, NavigateBeforeIcon, NavigateNextIcon, SuccessIcon, WarningIcon };

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

@@ -0,0 +1,3 @@
+var css = {"icon":"vt_ce_Icon_icon__60fc84a5"};
+
+export { css as default };

package/dist/esm/Icon/wrappers.js

@@ -0,0 +1,48 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+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 '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+
+function adaptMuiSvgIcon(MuiIcon) {
+  return React__default.forwardRef(
+    function MuiIconWrapper({ size, ...props }, ref) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          "data-size": size,
+          "data-testid": props["data-testid"],
+          style: props.style,
+          className: cx(css["icon"], props.className),
+          children: /* @__PURE__ */ jsx(MuiIcon, { color: "inherit" })
+        }
+      );
+    }
+  );
+}
+function adaptSvgIcon(svg) {
+  return React__default.forwardRef(
+    function SVGIconWrapper({ size, ...props }, ref) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          "data-size": size,
+          "data-testid": props["data-testid"],
+          style: props.style,
+          className: cx(css["icon"], props.className),
+          children: svg
+        }
+      );
+    }
+  );
+}
+
+export { adaptMuiSvgIcon, adaptSvgIcon };

package/dist/esm/IconButton/index.js

@@ -0,0 +1,55 @@
+'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 IconButton = forwardRef(
+  ({
+    variant = "primary",
+    palette = defaultThemeCssVariableUsages.palette.action.text,
+    loading = false,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const variantCn = styles[variant];
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...props,
+        ref,
+        type: props.type,
+        "data-loading": loading,
+        disabled: loading || disabled,
+        onClick: props.onClick,
+        "data-testid": props["data-testid"],
+        style: {
+          ...{
+            "--vt-ce-icon-button-palette-base-surface": palette.base.surface,
+            "--vt-ce-icon-button-palette-base-on": palette.base.on,
+            "--vt-ce-icon-button-palette-hover-surface": palette.hover.surface,
+            "--vt-ce-icon-button-palette-hover-on": palette.hover.on,
+            "--vt-ce-icon-button-palette-disabled-surface": palette.disabled.surface,
+            "--vt-ce-icon-button-palette-disabled-on": palette.disabled.on
+          },
+          ...props.style
+        },
+        className: cx(styles["button"], variantCn, props.className),
+        children: [
+          loading && /* @__PURE__ */ jsx("span", { className: styles["loading-container"], children: /* @__PURE__ */ jsx(CircularProgress, { fillParentHeight: true }) }),
+          /* @__PURE__ */ jsx("span", { className: styles["inner-icon"], children: props.children })
+        ]
+      }
+    );
+  }
+);
+
+export { IconButton as default };

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

@@ -0,0 +1,3 @@
+var styles = {"button":"vt_ce_IconButton_button__c53546bc","primary":"vt_ce_IconButton_primary__11aa1cdd","secondary":"vt_ce_IconButton_secondary__3caaccf7","inner-icon":"vt_ce_IconButton_inner-icon__ad7792b9","loading-container":"vt_ce_IconButton_loading-container__145031e7"};
+
+export { styles as default };

package/dist/esm/Input/index.js

@@ -0,0 +1,59 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import css from './styles.module.scss.js';
+import { useFormControlContext } from '../FormControl/context.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 Input = forwardRef(
+  ({
+    placeholder,
+    value,
+    error: propsError,
+    disabled: propsDisabled,
+    startIcon,
+    endIcon,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = useFormControlContext();
+    const error = propsError ?? ctx.error;
+    const disabled = propsDisabled ?? ctx.disabled;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-disabled": disabled,
+        "data-error": error,
+        "data-testid": dataTestId,
+        style,
+        className: cx(css["input"], className),
+        children: [
+          startIcon && /* @__PURE__ */ jsx("span", { className: css["input-icon"], children: startIcon }),
+          /* @__PURE__ */ jsx("span", { className: css["inner-input-container"], children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              ...props,
+              placeholder,
+              value,
+              disabled,
+              className: css["inner-input"]
+            }
+          ) }),
+          endIcon && /* @__PURE__ */ jsx("span", { className: css["input-icon"], children: endIcon })
+        ]
+      }
+    );
+  }
+);
+
+export { Input as default };

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

@@ -0,0 +1,3 @@
+var css = {"input":"vt_ce_Input_input__f153ee87","inner-input-container":"vt_ce_Input_inner-input-container__66aa5203","inner-input":"vt_ce_Input_inner-input__7219c4b4","input-icon":"vt_ce_Input_input-icon__998ff0e7"};
+
+export { css as default };