@veritone-ce/design-system 2.2.5 → 2.3.0

package/dist/esm/Input/index.js

@@ -3,6 +3,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import modules_efc4e723 from './styles.module.scss.js';
+import { useFormControlContext } from '../FormControl/context.js';
 import 'color2k';
 import '../styles/css-vars.js';
 import { cx } from '../styles/cx.js';
@@ -11,58 +12,47 @@ import '@mui/system';
 import '../Box/index.js';
 import '../styles/styled.js';
 
-const Input = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      "data-testid": props["data-testid"],
-      className: cx(modules_efc4e723["input"], props.className),
-      style: props.style,
-      children: [
-        /* @__PURE__ */ jsx("label", { className: modules_efc4e723["label"], children: props.label }),
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            "data-disabled": props.disabled ?? false,
-            "data-error": props.error !== void 0,
-            className: modules_efc4e723["inner-input-container"],
-            children: [
-              props.startIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["input-icon"], children: props.startIcon }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref,
-                  type: props.type,
-                  name: props.name,
-                  placeholder: props.placeholder,
-                  value: props.value,
-                  disabled: props.disabled,
-                  onChange: props.onChange,
-                  className: modules_efc4e723["inner-input"]
-                }
-              ),
-              props.endIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["input-icon"], children: props.endIcon })
-            ]
-          }
-        ),
-        props.helpLabel && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["help-label"], children: props.helpLabel }),
-        props.error && /* @__PURE__ */ jsxs("span", { className: modules_efc4e723["error-label"], children: [
-          /* @__PURE__ */ jsx(IndicatorCircle, {}),
-          /* @__PURE__ */ jsx("span", { children: 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" })
+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(modules_efc4e723["input"], className),
+        children: [
+          startIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["input-icon"], children: startIcon }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              ...props,
+              placeholder,
+              value,
+              disabled,
+              className: modules_efc4e723["inner-input"]
+            }
+          ),
+          endIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["input-icon"], children: endIcon })
+        ]
+      }
+    );
   }
 );
 

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"input":"vt_ce_Input_input__f7983a21","label":"vt_ce_Input_label__f7983a21","inner-input-container":"vt_ce_Input_innerInputContainer__f7983a21","inner-input":"vt_ce_Input_innerInput__f7983a21","input-icon":"vt_ce_Input_inputIcon__f7983a21","help-label":"vt_ce_Input_helpLabel__f7983a21","error-label":"vt_ce_Input_errorLabel__f7983a21"};
+var modules_efc4e723 = {"input":"vt_ce_Input_input__a83b3209","inner-input":"vt_ce_Input_innerInput__a83b3209","input-icon":"vt_ce_Input_inputIcon__a83b3209"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Menu/controlled.js

@@ -23,6 +23,7 @@ function Menu({
   matchAnchorWidth = false,
   options,
   dismissEnabled = true,
+  disableAutoFocus = false,
   className,
   ...props
 }) {
@@ -89,6 +90,7 @@ function Menu({
     {
       context,
       modal: false,
+      disabled: disableAutoFocus,
       order: ["reference", "content"],
       children: /* @__PURE__ */ jsx(PortalThemeRelay, { children: /* @__PURE__ */ jsx(
         "div",

package/dist/esm/Select/controlled.js

@@ -14,6 +14,7 @@ import { ArrowDropDown, Close } from '@mui/icons-material';
 import Menu from '../Menu/controlled.js';
 import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
 import '../Icon/factory.js';
+import { useFormControlContext } from '../FormControl/context.js';
 
 const DefaultEndIcon = adaptMuiSvgIcon(ArrowDropDown);
 const DefaultUnsetIcon = adaptMuiSvgIcon(Close);
@@ -24,6 +25,9 @@ function ControlledSelect({
   clearable = true,
   ...props
 }) {
+  const ctx = useFormControlContext();
+  const error = props.error ?? ctx.error;
+  const disabled = props.disabled ?? ctx.disabled;
   const anchorId = useId();
   const anchorRef = useRef(null);
   const [open, setOpen] = useState(false);
@@ -44,58 +48,44 @@ function ControlledSelect({
       {
         id: anchorId,
         ref: anchorRef,
-        className: cx(modules_efc4e723["select"], props.className),
+        "data-focused": open,
+        "data-disabled": disabled,
+        "data-error": error,
+        onClick: () => setOpen(true),
         "data-testid": props["data-testid"],
         style: props.style,
-        onClick: () => setOpen(true),
+        className: cx(modules_efc4e723["select"], props.className),
         children: [
-          /* @__PURE__ */ jsx("label", { className: modules_efc4e723["label"], children: props.label }),
-          /* @__PURE__ */ jsxs(
+          props.startIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["select-icon"], children: props.startIcon }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              size: props.size,
+              "data-selected": Boolean(selectedOption),
+              placeholder: selectedOption?.label ?? placeholder,
+              value: props.inputValue,
+              disabled: props.disabled,
+              onChange: (e) => {
+                setOpen(true);
+                props.onInputChange(e, e.target.value);
+              },
+              className: modules_efc4e723["inner-input"]
+            }
+          ),
+          selectedOption && clearable && /* @__PURE__ */ jsx(
             "span",
             {
-              "data-focused": open,
-              "data-disabled": props.disabled ?? false,
-              "data-error": props.error !== void 0,
-              className: modules_efc4e723["inner-input-container"],
-              children: [
-                props.startIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["select-icon"], children: props.startIcon }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref,
-                    type: "text",
-                    size: props.size,
-                    "data-selected": Boolean(selectedOption),
-                    placeholder: selectedOption?.label ?? placeholder,
-                    value: props.inputValue,
-                    disabled: props.disabled,
-                    onChange: (e) => {
-                      setOpen(true);
-                      props.onInputChange(e, e.target.value);
-                    },
-                    className: modules_efc4e723["inner-input"]
-                  }
-                ),
-                selectedOption && clearable && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: modules_efc4e723["select-icon"],
-                    onClick: (e) => {
-                      props.onChange?.(e, null);
-                      props.onInputChange(e, "");
-                    },
-                    children: unsetIcon
-                  }
-                ),
-                endIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["select-icon"], children: endIcon })
-              ]
+              className: modules_efc4e723["select-icon"],
+              onClick: (e) => {
+                props.onChange?.(e, null);
+                props.onInputChange(e, "");
+              },
+              children: unsetIcon
             }
           ),
-          props.helpLabel && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["help-label"], children: props.helpLabel }),
-          props.error && /* @__PURE__ */ jsxs("span", { className: modules_efc4e723["error-label"], children: [
-            /* @__PURE__ */ jsx(IndicatorCircle, {}),
-            /* @__PURE__ */ jsx("span", { children: props.error })
-          ] })
+          endIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["select-icon"], children: endIcon })
         ]
       }
     ),
@@ -126,16 +116,5 @@ function ControlledSelect({
     )
   ] });
 }
-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 { ControlledSelect as default };

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"select":"vt_ce_Select_select__cb05e024","label":"vt_ce_Select_label__cb05e024","inner-input-container":"vt_ce_Select_innerInputContainer__cb05e024","inner-input":"vt_ce_Select_innerInput__cb05e024","select-icon":"vt_ce_Select_selectIcon__cb05e024","help-label":"vt_ce_Select_helpLabel__cb05e024","error-label":"vt_ce_Select_errorLabel__cb05e024"};
+var modules_efc4e723 = {"select":"vt_ce_Select_select__a4ea9d62","inner-input":"vt_ce_Select_innerInput__a4ea9d62","select-icon":"vt_ce_Select_selectIcon__a4ea9d62"};
 
 export { modules_efc4e723 as default };

package/dist/esm/TablePagination/index.js

@@ -7,6 +7,7 @@ import { DSIcon } from '../Icon/internal.js';
 import '../Select/controlled.js';
 import Select from '../Select/uncontrolled.js';
 import 'react';
+import FormControl from '../FormControl/index.js';
 
 function TablePagination({
   page,
@@ -19,23 +20,20 @@ function TablePagination({
   const showPrev = page !== 1;
   const showNext = page < count / rowsPerPage;
   return /* @__PURE__ */ jsxs("nav", { className: modules_efc4e723["container"], children: [
-    /* @__PURE__ */ jsxs("span", { className: modules_efc4e723["rows-per-page"], children: [
-      /* @__PURE__ */ jsx("label", { className: modules_efc4e723["rows-per-page-label"], children: rowsPerPageLabel }),
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          defaultValue: rowsPerPage,
-          clearable: false,
-          size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) : 3,
-          options: rowsPerPageOptions.map((option) => ({
-            label: option.toLocaleString(),
-            value: option
-          })),
-          onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
-          className: modules_efc4e723["rows-per-page-select"]
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx(FormControl, { label: rowsPerPageLabel, placement: "inline-start", children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        defaultValue: rowsPerPage,
+        clearable: false,
+        size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) + 1 : 3,
+        options: rowsPerPageOptions.map((option) => ({
+          label: option.toLocaleString(),
+          value: option
+        })),
+        onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
+        className: modules_efc4e723["rows-per-page-select"]
+      }
+    ) }),
     /* @__PURE__ */ jsxs("span", { className: modules_efc4e723["page-counts"], children: [
       (page - 1) * rowsPerPage + 1,
       "-",

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"container":"vt_ce_TablePagination_container__8da45ccd","rows-per-page":"vt_ce_TablePagination_rowsPerPage__8da45ccd","rows-per-page-label":"vt_ce_TablePagination_rowsPerPageLabel__8da45ccd","rows-per-page-select":"vt_ce_TablePagination_rowsPerPageSelect__8da45ccd","page-counts":"vt_ce_TablePagination_pageCounts__8da45ccd","btn-list":"vt_ce_TablePagination_btnList__8da45ccd","ellipsis":"vt_ce_TablePagination_ellipsis__8da45ccd"};
+var modules_efc4e723 = {"container":"vt_ce_TablePagination_container__b08ac6ea","rows-per-page-select":"vt_ce_TablePagination_rowsPerPageSelect__b08ac6ea","page-counts":"vt_ce_TablePagination_pageCounts__b08ac6ea","btn-list":"vt_ce_TablePagination_btnList__b08ac6ea","ellipsis":"vt_ce_TablePagination_ellipsis__b08ac6ea"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Textarea/index.js

@@ -1,6 +1,6 @@
 'use strict';
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import modules_efc4e723 from './styles.module.scss.js';
 import 'color2k';
@@ -10,57 +10,46 @@ import '../styles/defaultTheme.js';
 import '@mui/system';
 import '../Box/index.js';
 import '../styles/styled.js';
+import { useFormControlContext } from '../FormControl/context.js';
 
 const Textarea = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxs(
+  ({
+    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-testid": props["data-testid"],
-        style: props.style,
-        className: cx(modules_efc4e723["textarea"], props.className),
-        children: [
-          /* @__PURE__ */ jsx("label", { className: modules_efc4e723["label"], children: props.label }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "data-disabled": props.disabled ?? false,
-              "data-error": props.error !== void 0,
-              className: modules_efc4e723["inner-textarea-container"],
-              children: /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  ref,
-                  placeholder: props.placeholder,
-                  value: props.value,
-                  rows: props.rows,
-                  onChange: props.onChange,
-                  disabled: props.disabled,
-                  className: modules_efc4e723["inner-textarea"]
-                }
-              )
-            }
-          ),
-          props.helpLabel && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["help-label"], children: props.helpLabel }),
-          props.error && /* @__PURE__ */ jsxs("span", { className: modules_efc4e723["error-label"], children: [
-            /* @__PURE__ */ jsx(IndicatorCircle, {}),
-            /* @__PURE__ */ jsx("span", { children: props.error })
-          ] })
-        ]
+        "data-disabled": disabled,
+        "data-error": error,
+        "data-testid": dataTestId,
+        style,
+        className: cx(modules_efc4e723["textarea"], className),
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref,
+            ...props,
+            placeholder,
+            value,
+            rows,
+            disabled,
+            className: modules_efc4e723["inner-textarea"]
+          }
+        )
       }
     );
   }
 );
-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 { Textarea as default };

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__77e999b0","label":"vt_ce_Textarea_label__77e999b0","inner-textarea-container":"vt_ce_Textarea_innerTextareaContainer__77e999b0","inner-textarea":"vt_ce_Textarea_innerTextarea__77e999b0","help-label":"vt_ce_Textarea_helpLabel__77e999b0","error-label":"vt_ce_Textarea_errorLabel__77e999b0"};
+var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__bb23b4a3","inner-textarea":"vt_ce_Textarea_innerTextarea__bb23b4a3"};
 
 export { modules_efc4e723 as default };

package/dist/esm/Typography/index.js

@@ -33,7 +33,8 @@ const variantComponents = {
   paragraph2: "p",
   paragraph3: "p",
   button: "span",
-  buttonSmall: "span"
+  buttonSmall: "span",
+  input: "span"
 };
 
 export { Typography as default };

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

@@ -1,3 +1,3 @@
-var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__56e154f0","t-h1":"vt_ce_Typography_tH1__56e154f0","t-h2":"vt_ce_Typography_tH2__56e154f0","t-h3":"vt_ce_Typography_tH3__56e154f0","t-h4":"vt_ce_Typography_tH4__56e154f0","t-label":"vt_ce_Typography_tLabel__56e154f0","t-paragraph1":"vt_ce_Typography_tParagraph1__56e154f0","t-paragraph2":"vt_ce_Typography_tParagraph2__56e154f0","t-paragraph3":"vt_ce_Typography_tParagraph3__56e154f0","t-button":"vt_ce_Typography_tButton__56e154f0","t-buttonSmall":"vt_ce_Typography_tButtonSmall__56e154f0","c-primary":"vt_ce_Typography_cPrimary__56e154f0","c-secondary":"vt_ce_Typography_cSecondary__56e154f0","c-tertiary":"vt_ce_Typography_cTertiary__56e154f0","c-disabled":"vt_ce_Typography_cDisabled__56e154f0","c-inherit":"vt_ce_Typography_cInherit__56e154f0"};
+var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__c826af39","t-h1":"vt_ce_Typography_tH1__c826af39","t-h2":"vt_ce_Typography_tH2__c826af39","t-h3":"vt_ce_Typography_tH3__c826af39","t-h4":"vt_ce_Typography_tH4__c826af39","t-label":"vt_ce_Typography_tLabel__c826af39","t-paragraph1":"vt_ce_Typography_tParagraph1__c826af39","t-paragraph2":"vt_ce_Typography_tParagraph2__c826af39","t-paragraph3":"vt_ce_Typography_tParagraph3__c826af39","t-button":"vt_ce_Typography_tButton__c826af39","t-buttonSmall":"vt_ce_Typography_tButtonSmall__c826af39","t-input":"vt_ce_Typography_tInput__c826af39","c-primary":"vt_ce_Typography_cPrimary__c826af39","c-secondary":"vt_ce_Typography_cSecondary__c826af39","c-tertiary":"vt_ce_Typography_cTertiary__c826af39","c-disabled":"vt_ce_Typography_cDisabled__c826af39","c-inherit":"vt_ce_Typography_cInherit__c826af39"};
 
 export { modules_b5c3b63b as default };

package/dist/esm/styles/scss/theme.generated.scss

@@ -167,7 +167,14 @@ $default-theme: (
   "typography-buttonSmall-letterSpacing": (inherit),
   "typography-buttonSmall-textTransform": (inherit),
   "typography-buttonSmall-fontSize": (12px),
-  "typography-buttonSmall-lineHeight": (18px)
+  "typography-buttonSmall-lineHeight": (18px),
+  "typography-input-fontFamily": (Nunito Sans, Helvetica, sans-serif),
+  "typography-input-fontStyle": (normal),
+  "typography-input-fontWeight": (400),
+  "typography-input-letterSpacing": (inherit),
+  "typography-input-textTransform": (inherit),
+  "typography-input-fontSize": (14px),
+  "typography-input-lineHeight": (20px)
 );
 
 $theme-palette-brand-1-base-surface: var(--vt-ce-theme-palette-brand-1-base-surface, (#214167));
@@ -336,6 +343,13 @@ $theme-typography-buttonSmall-letterSpacing: var(--vt-ce-theme-typography-button
 $theme-typography-buttonSmall-textTransform: var(--vt-ce-theme-typography-buttonSmall-textTransform, (inherit));
 $theme-typography-buttonSmall-fontSize: var(--vt-ce-theme-typography-buttonSmall-fontSize, (12px));
 $theme-typography-buttonSmall-lineHeight: var(--vt-ce-theme-typography-buttonSmall-lineHeight, (18px));
+$theme-typography-input-fontFamily: var(--vt-ce-theme-typography-input-fontFamily, (Nunito Sans, Helvetica, sans-serif));
+$theme-typography-input-fontStyle: var(--vt-ce-theme-typography-input-fontStyle, (normal));
+$theme-typography-input-fontWeight: var(--vt-ce-theme-typography-input-fontWeight, (400));
+$theme-typography-input-letterSpacing: var(--vt-ce-theme-typography-input-letterSpacing, (inherit));
+$theme-typography-input-textTransform: var(--vt-ce-theme-typography-input-textTransform, (inherit));
+$theme-typography-input-fontSize: var(--vt-ce-theme-typography-input-fontSize, (14px));
+$theme-typography-input-lineHeight: var(--vt-ce-theme-typography-input-lineHeight, (20px));
 
 // unsafe - does not check for existence of variable
 @function _unsafe-theme-var($var) {
@@ -452,6 +466,16 @@ $theme-typography-buttonSmall-lineHeight: var(--vt-ce-theme-typography-buttonSma
   text-transform: $theme-typography-buttonSmall-textTransform;
 }
 
+@mixin theme-typography-input {
+  font-family: $theme-typography-input-fontFamily;
+  font-size: $theme-typography-input-fontSize;
+  font-style: $theme-typography-input-fontStyle;
+  font-weight: $theme-typography-input-fontWeight;
+  line-height: $theme-typography-input-lineHeight;
+  letter-spacing: $theme-typography-input-letterSpacing;
+  text-transform: $theme-typography-input-textTransform;
+}
+
 // unsafe - does not check for existence of variable
 @mixin _unsafe-theme-typography($variant) {
   font-family: _unsafe-theme-var(typography-#{$variant}-font-family);

package/dist/esm/styles/typography.js

@@ -10,7 +10,8 @@ const TypographyVariantKeys = [
   "paragraph2",
   "paragraph3",
   "button",
-  "buttonSmall"
+  "buttonSmall",
+  "input"
 ];
 function createTypography(typography = {}) {
   const base = {
@@ -107,6 +108,13 @@ function createTypography(typography = {}) {
       fontWeight: base.fontWeightMedium,
       lineHeight: "18px",
       ...typography.buttonSmall
+    },
+    input: {
+      ...inherit,
+      fontSize: "14px",
+      fontWeight: base.fontWeightRegular,
+      lineHeight: "20px",
+      ...typography.input
     }
   };
 }