@veritone-ce/design-system 2.0.0 → 2.0.2

package/dist/esm-next/Alert/index.js

@@ -23,8 +23,7 @@ const defaultMessageText = {
   warning: `Your action is required. `,
   error: `An error has occurred. `
 };
-const Alert = (props) => {
-  const severity = props.severity ?? "success";
+const Alert = ({ severity = "success", ...props }) => {
   const label = props.label ?? defaultMessageLabel[severity];
   const text = props.text ?? defaultMessageText[severity];
   const icon = iconVariants[severity];

package/dist/esm-next/Button/index.js

@@ -9,31 +9,38 @@ import '../styles/defaultTheme.js';
 import '@mui/system';
 import '../styles/styled.js';
 
-const Button = forwardRef((props, ref) => {
-  const variant = props.variant ?? "primary";
-  const variantCn = modules_efc4e723[variant];
-  const size = props.size ?? "large";
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      "data-size": size,
-      "data-loading": props.loading ?? false,
-      disabled: props.loading || props.disabled,
-      "data-destructive": props.destructive ?? false,
-      onClick: props.onClick,
-      style: props.style,
-      className: cx(modules_efc4e723["button"], variantCn, props.className),
-      children: [
-        props.loading && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["loading-container"], children: /* @__PURE__ */ jsx(CircularProgress, { size: "1.4em", color: "inherit" }) }),
-        /* @__PURE__ */ jsxs("span", { className: modules_efc4e723["inner-container"], children: [
-          props.startIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["button-icon"], children: props.startIcon }),
-          /* @__PURE__ */ jsx("span", { children: props.children }),
-          props.endIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["button-icon"], children: props.endIcon })
-        ] })
-      ]
-    }
-  );
-});
+const Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "large",
+    disabled = false,
+    loading = false,
+    destructive = false,
+    ...props
+  }, ref) => {
+    const variantCn = modules_efc4e723[variant];
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        "data-size": size,
+        "data-loading": loading,
+        disabled: loading || disabled,
+        "data-destructive": destructive,
+        onClick: props.onClick,
+        style: props.style,
+        className: cx(modules_efc4e723["button"], variantCn, props.className),
+        children: [
+          loading && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["loading-container"], children: /* @__PURE__ */ jsx(CircularProgress, { size: "1.4em", color: "inherit" }) }),
+          /* @__PURE__ */ jsxs("span", { className: modules_efc4e723["inner-container"], children: [
+            props.startIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["button-icon"], children: props.startIcon }),
+            /* @__PURE__ */ jsx("span", { children: props.children }),
+            props.endIcon && /* @__PURE__ */ jsx("span", { className: modules_efc4e723["button-icon"], children: props.endIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
 
 export { Button as default };

package/dist/esm-next/Icon/factory.js

@@ -10,7 +10,10 @@ function createIconComponent({
   fallback = DefaultIconFallback
 }) {
   return forwardRef(function Icon({ name, ...genericProps }, ref) {
-    const ResolvedIcon = React__default.useMemo(() => iconMap[name] ?? fallback, [name]);
+    const ResolvedIcon = React__default.useMemo(
+      () => iconMap[name] ?? fallback,
+      [name]
+    );
     return /* @__PURE__ */ jsx(ResolvedIcon, { ref, name, ...genericProps });
   });
 }

package/dist/esm-next/Menu/controlled.js

@@ -89,6 +89,7 @@ function Menu({
       children: /* @__PURE__ */ jsx(
         "div",
         {
+          "data-testid": "menu",
           ref: refs.setFloating,
           tabIndex: 0,
           "aria-labelledby": anchor?.id || props.anchorId,

package/dist/esm-next/Textarea/index.js

@@ -30,6 +30,7 @@ const Textarea = forwardRef(
                   placeholder: props.placeholder,
                   value: props.value,
                   rows: props.rows,
+                  onChange: props.onChange,
                   disabled: props.disabled,
                   className: modules_efc4e723["inner-textarea"]
                 }

package/dist/esm-next/Tooltip/index.js

@@ -1,27 +1,31 @@
 'use strict';
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useFloating, shift, flip, arrow, useRole, useHover, safePolygon, useFocus, useDismiss, useInteractions, FloatingArrow } from '@floating-ui/react';
+import { useFloating, offset, inline, flip, shift, arrow, autoUpdate, useRole, useHover, safePolygon, useFocus, useDismiss, useInteractions, FloatingArrow } from '@floating-ui/react';
 import React__default from 'react';
 import modules_efc4e723 from './styles.module.scss.js';
 import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
 import '@mui/system';
 import '../styles/styled.js';
 
-function Tooltip(props) {
+function Tooltip({ placement = "bottom", ...props }) {
   const [_isOpen, setIsOpen] = React__default.useState(false);
   const isOpen = props.isOpen ?? _isOpen;
   const arrowRef = React__default.useRef(null);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
+    placement,
     middleware: [
-      shift(),
+      offset(10),
+      inline(),
       flip(),
+      shift(),
       arrow({
         element: arrowRef
       })
-    ]
+    ],
+    whileElementsMounted: autoUpdate
   });
   const role = useRole(context, { role: "tooltip" });
   const hover = useHover(context, {
@@ -38,7 +42,16 @@ function Tooltip(props) {
     dismiss
   ]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { role: "tooltip", ref: refs.setReference, ...getReferenceProps(), children: props.children }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "tooltip",
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        className: modules_efc4e723["tooltip-anchor"],
+        children: props.children
+      }
+    ),
     isOpen && /* @__PURE__ */ jsxs(
       "div",
       {

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"tooltip-body":"vt_ce_Tooltip_tooltipBody__0dd82f81"};
+var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__3658bd43","tooltip-body":"vt_ce_Tooltip_tooltipBody__3658bd43"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/styles.css

@@ -7,7 +7,7 @@
 .vt_ce_CircularProgress_container__ea033e1c{--circular-progress-color:var(--vt-ce-theme-palette-action-primary,#1871e8);align-items:baseline;color:var(--circular-progress-color);display:inline-flex;justify-content:center}.vt_ce_CircularProgress_container__ea033e1c[data-fill-parent-height=true],.vt_ce_CircularProgress_container__ea033e1c[data-fill-parent-height=true] svg{height:100%}
 .vt_ce_Button_button__259ca507{align-items:center;border:1px solid transparent;border-radius:4px;cursor:pointer;display:inline-flex;gap:5px;justify-content:center;position:relative}.vt_ce_Button_button__259ca507[data-size=large]{font-family:var(--vt-ce-theme-typography-button-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-button-font-size,14px);font-style:var(--vt-ce-theme-typography-button-font-style,normal);font-weight:var(--vt-ce-theme-typography-button-font-weight,600);line-height:var(--vt-ce-theme-typography-button-line-height,20px);min-height:36px;padding:7px 15px}.vt_ce_Button_button__259ca507[data-size=small]{font-family:var(--vt-ce-theme-typography-buttonSmall-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-buttonSmall-font-size,12px);font-style:var(--vt-ce-theme-typography-buttonSmall-font-style,normal);font-weight:var(--vt-ce-theme-typography-buttonSmall-font-weight,600);line-height:var(--vt-ce-theme-typography-buttonSmall-line-height,18px);min-height:26px;padding:3px 15px}.vt_ce_Button_button__259ca507.vt_ce_Button_primary__259ca507{background-color:var(--vt-ce-theme-palette-action-primary,#1871e8);color:var(--vt-ce-theme-palette-action-on,#fff)}.vt_ce_Button_button__259ca507.vt_ce_Button_primary__259ca507:hover{background-color:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_Button_button__259ca507.vt_ce_Button_primary__259ca507:disabled{background-color:var(--vt-ce-theme-palette-disabledBackground,#fafafa);border-color:var(--vt-ce-theme-palette-backgroundAlt,#e0e8f0);color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Button_button__259ca507.vt_ce_Button_primary__259ca507[data-destructive=true]{background-color:var(--vt-ce-theme-palette-action-destructive,#eb0000)}.vt_ce_Button_button__259ca507.vt_ce_Button_primary__259ca507[data-destructive=true]:hover{background-color:var(--vt-ce-theme-palette-action-destructiveHover,#a63737)}.vt_ce_Button_button__259ca507.vt_ce_Button_primary__259ca507[data-loading=true]:disabled{color:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_Button_button__259ca507.vt_ce_Button_secondary__259ca507{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-text-secondary,#5c6269);color:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Button_button__259ca507.vt_ce_Button_secondary__259ca507:hover{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-action-hover,#335b89);color:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_Button_button__259ca507.vt_ce_Button_secondary__259ca507:disabled{background-color:var(--vt-ce-theme-palette-disabledBackground,#fafafa);border-color:var(--vt-ce-theme-palette-backgroundAlt,#e0e8f0);color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Button_button__259ca507.vt_ce_Button_secondary__259ca507[data-destructive=true]{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-action-destructive,#eb0000);color:var(--vt-ce-theme-palette-action-destructive,#eb0000)}.vt_ce_Button_button__259ca507.vt_ce_Button_secondary__259ca507[data-destructive=true]:hover{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-action-destructiveHover,#a63737);color:var(--vt-ce-theme-palette-action-destructiveHover,#a63737)}.vt_ce_Button_button__259ca507.vt_ce_Button_secondary__259ca507[data-loading=true]:disabled{color:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_Button_button__259ca507.vt_ce_Button_tertiary__259ca507{background-color:transparent;color:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_Button_button__259ca507.vt_ce_Button_tertiary__259ca507:hover{color:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_Button_button__259ca507.vt_ce_Button_tertiary__259ca507:disabled{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Button_button__259ca507.vt_ce_Button_tertiary__259ca507[data-destructive=true]{color:var(--vt-ce-theme-palette-action-destructive,#eb0000)}.vt_ce_Button_button__259ca507.vt_ce_Button_tertiary__259ca507[data-destructive=true]:hover{color:var(--vt-ce-theme-palette-action-destructiveHover,#a63737)}.vt_ce_Button_button__259ca507.vt_ce_Button_tertiary__259ca507[data-loading=true]:disabled{color:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_Button_button__259ca507[data-loading=true] .vt_ce_Button_innerContainer__259ca507{visibility:hidden}.vt_ce_Button_loadingContainer__259ca507{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.vt_ce_Button_innerContainer__259ca507{align-items:center;display:inline-flex;gap:5px;justify-content:center;visibility:visible}.vt_ce_Button_buttonIcon__259ca507{align-items:center;display:inline-flex;justify-content:center;--vt-ce-icon-size:18px}
 .vt_ce_IconButton_button__cb009384{background-color:transparent;border-style:none;color:var(--vt-ce-theme-palette-text-tertiary,#465364);cursor:pointer;display:inline-block;font-size:0;padding:7px;position:relative}.vt_ce_IconButton_button__cb009384:hover{color:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_IconButton_button__cb009384:disabled{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_IconButton_button__cb009384[data-destructive=true]{color:var(--vt-ce-theme-palette-action-destructive,#eb0000)}.vt_ce_IconButton_button__cb009384[data-destructive=true]:hover{color:var(--vt-ce-theme-palette-action-destructiveHover,#a63737)}.vt_ce_IconButton_button__cb009384[data-loading=true]:disabled{color:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_IconButton_button__cb009384[data-loading=true] .vt_ce_IconButton_innerIcon__cb009384{visibility:hidden}.vt_ce_IconButton_loadingContainer__cb009384{bottom:7px;left:7px;position:absolute;right:7px;top:7px}
-.vt_ce_Tooltip_tooltipBody__0dd82f81{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-backgroundAlt,#e0e8f0);border-radius:4px;border-style:solid;border-width:1px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);font-family:var(--vt-ce-theme-typography-label-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-font-size,14px);font-style:var(--vt-ce-theme-typography-label-font-style,normal);font-weight:var(--vt-ce-theme-typography-label-font-weight,600);line-height:var(--vt-ce-theme-typography-label-line-height,17px);margin:10px;padding:4px 10px}
+.vt_ce_Tooltip_tooltipAnchor__3658bd43{display:inline}.vt_ce_Tooltip_tooltipBody__3658bd43{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-backgroundAlt,#e0e8f0);border-radius:4px;border-style:solid;border-width:1px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);font-family:var(--vt-ce-theme-typography-label-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-font-size,14px);font-style:var(--vt-ce-theme-typography-label-font-style,normal);font-weight:var(--vt-ce-theme-typography-label-font-weight,600);line-height:var(--vt-ce-theme-typography-label-line-height,17px);padding:4px 10px}
 .vt_ce_Typography_tH4__b98e9794{font-family:var(--vt-ce-theme-typography-h4-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-h4-font-size,18px);font-style:var(--vt-ce-theme-typography-h4-font-style,normal);font-weight:var(--vt-ce-theme-typography-h4-font-weight,600);line-height:var(--vt-ce-theme-typography-h4-line-height,24px)}.vt_ce_Typography_tLabel__b98e9794{font-family:var(--vt-ce-theme-typography-label-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-font-size,14px);font-style:var(--vt-ce-theme-typography-label-font-style,normal);font-weight:var(--vt-ce-theme-typography-label-font-weight,600);line-height:var(--vt-ce-theme-typography-label-line-height,17px)}.vt_ce_Typography_tParagraph1__b98e9794{font-family:var(--vt-ce-theme-typography-paragraph1-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph1-font-size,16px);font-style:var(--vt-ce-theme-typography-paragraph1-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph1-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph1-line-height,24px)}.vt_ce_Typography_tParagraph2__b98e9794{font-family:var(--vt-ce-theme-typography-paragraph2-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph2-font-size,14px);font-style:var(--vt-ce-theme-typography-paragraph2-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph2-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph2-line-height,20px)}.vt_ce_Typography_tParagraph3__b98e9794{font-family:var(--vt-ce-theme-typography-paragraph3-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph3-font-size,12px);font-style:var(--vt-ce-theme-typography-paragraph3-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph3-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph3-line-height,18px)}.vt_ce_Typography_tButton__b98e9794{font-family:var(--vt-ce-theme-typography-button-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-button-font-size,14px);font-style:var(--vt-ce-theme-typography-button-font-style,normal);font-weight:var(--vt-ce-theme-typography-button-font-weight,600);line-height:var(--vt-ce-theme-typography-button-line-height,20px)}.vt_ce_Typography_tButtonSmall__b98e9794{font-family:var(--vt-ce-theme-typography-buttonSmall-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-buttonSmall-font-size,12px);font-style:var(--vt-ce-theme-typography-buttonSmall-font-style,normal);font-weight:var(--vt-ce-theme-typography-buttonSmall-font-weight,600);line-height:var(--vt-ce-theme-typography-buttonSmall-line-height,18px)}.vt_ce_Typography_cPrimary__b98e9794{color:var(--vt-ce-theme-palette-text-primary,#2a323c)}.vt_ce_Typography_cSecondary__b98e9794{color:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Typography_cTertiary__b98e9794{color:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_Typography_cDisabled__b98e9794{color:var(--vt-ce-theme-palette-disabled,#7c848d)}
 .vt_ce_Dialog_dialogOverlay__4b764cfb{background:rgba(0,0,0,.54);display:grid;place-items:center}.vt_ce_Dialog_dialog__4b764cfb{background-color:var(--vt-ce-theme-palette-background,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;flex-direction:column;margin:15px;max-height:calc(100% - 64px);max-width:calc(100% - 64px);padding:15px 0}.vt_ce_Dialog_dialogHeading__4b764cfb{flex:0 0 auto;font-size:18px;line-height:24px;margin:15px 0 0;padding:0 30px}.vt_ce_Dialog_dialogContent__4b764cfb{flex:1 1 auto;--webkit-overflow-scrolling:touch;overflow-y:auto;padding:0 30px}.vt_ce_Dialog_dialogTypography__4b764cfb{margin:15px 0}.vt_ce_Dialog_dialogActions__4b764cfb{align-items:center;display:flex;flex:0 0 auto;gap:10px;justify-content:flex-end;margin:15px 0;padding:0 30px}
 .vt_ce_Icon_icon__5881e2e1{display:inline-block;height:var(--vt-ce-icon-size,18px);width:var(--vt-ce-icon-size,18px)}.vt_ce_Icon_icon__5881e2e1 svg{height:var(--vt-ce-icon-size,18px);vertical-align:baseline;width:var(--vt-ce-icon-size,18px)}.vt_ce_Icon_icon__5881e2e1[data-size=large],.vt_ce_Icon_icon__5881e2e1[data-size=large] svg{height:24px;width:24px}.vt_ce_Icon_icon__5881e2e1[data-size=medium],.vt_ce_Icon_icon__5881e2e1[data-size=medium] svg{height:18px;width:18px}.vt_ce_Icon_icon__5881e2e1[data-size=small],.vt_ce_Icon_icon__5881e2e1[data-size=small] svg{height:14px;width:14px}.vt_ce_Icon_icon__5881e2e1[data-size=inherit],.vt_ce_Icon_icon__5881e2e1[data-size=inherit] svg{font-size:1em;height:1em;width:1em}

package/dist/types/src/components/icons/IconListItem/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+/// <reference types="react" resolution-mode="require"/>
 export type IconListItemProps = {
     'data-testid'?: string;
     children?: React.ReactNode;

package/dist/types/src-next/Alert/index.d.ts

@@ -12,5 +12,5 @@ export type AlertProps = {
     style?: React.CSSProperties;
     className?: string;
 };
-declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+declare const Alert: ({ severity, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
 export default Alert;

package/dist/types/src-next/CircularProgress/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+/// <reference types="react" resolution-mode="require"/>
 export type CircularProgressProps = {
     size?: number | string;
     color?: string;

package/dist/types/src-next/Icon/factory.d.ts

@@ -1,16 +1,14 @@
 import React from 'react';
 import type { CommonIconProps, GenericIconComponent } from './shared.js';
-export type IconMap = {
-    [key: string]: GenericIconComponent;
+export type IconMap<ExtraProps extends object = {}> = {
+    [key: string]: GenericIconComponent<ExtraProps>;
 };
 export declare const DefaultIconFallback: GenericIconComponent;
-export type IconProps = CommonIconProps & {
+export type IconProps<ExtraProps extends object = {}> = CommonIconProps<ExtraProps> & {
     name: string;
 };
-export type IconFactoryOptions = {
-    iconMap?: IconMap;
-    fallback?: GenericIconComponent;
+export type IconFactoryOptions<ExtraProps extends object = {}> = {
+    iconMap?: IconMap<ExtraProps>;
+    fallback?: GenericIconComponent<ExtraProps>;
 };
-export declare function createIconComponent({ iconMap, fallback }: IconFactoryOptions): React.ForwardRefExoticComponent<CommonIconProps & {
-    name: string;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare function createIconComponent<ExtraProps extends object = {}>({ iconMap, fallback }: IconFactoryOptions<ExtraProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<IconProps<ExtraProps>> & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/src-next/Icon/internal.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
-export declare const DSIcon: React.ForwardRefExoticComponent<import("./shared.js").CommonIconProps & {
+export declare const DSIcon: React.ForwardRefExoticComponent<{
+    name?: string | undefined;
+    size?: import("./wrappers.js").IconSize | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & {
     name: string;
 } & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/src-next/Icon/shared.d.ts

@@ -1,9 +1,9 @@
 import React, { type ForwardRefExoticComponent } from 'react';
 import type { IconSize } from './wrappers.js';
-export type CommonIconProps = {
+export type CommonIconProps<ExtraProps extends object = {}> = {
     name?: string;
     size?: IconSize;
     style?: React.CSSProperties;
     className?: string;
-};
-export type GenericIconComponent = ForwardRefExoticComponent<CommonIconProps & React.RefAttributes<HTMLSpanElement>>;
+} & ExtraProps;
+export type GenericIconComponent<ExtraProps extends object = {}> = ForwardRefExoticComponent<CommonIconProps<ExtraProps> & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/src-next/Icon/wrappers.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import SVGIcon from '@mui/material/SvgIcon';
 import type { GenericIconComponent } from './shared.js';
+import type { SvgIconProps } from '@mui/material';
 export type IconSize = 'large' | 'medium' | 'small' | 'inherit';
-export declare function adaptMuiSvgIcon(MuiIcon: typeof SVGIcon): GenericIconComponent;
+export declare function adaptMuiSvgIcon(MuiIcon: React.ComponentType<SvgIconProps>): GenericIconComponent;
 export declare function adaptSvgIcon(svg: React.JSX.Element): GenericIconComponent;

package/dist/types/src-next/Textarea/index.d.ts

@@ -7,6 +7,7 @@ export type TextareaProps = {
     helpLabel?: React.ReactNode;
     error?: React.ReactNode;
     rows?: number;
+    onChange?: React.InputHTMLAttributes<HTMLTextAreaElement>['onChange'];
     style?: React.CSSProperties;
     className?: string;
 };

package/dist/types/src-next/Tooltip/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import type { PopoverPlacement } from '../popover/index.js';
 export type TooltipProps = {
     isOpen?: boolean;
     children?: React.ReactNode;
     tooltip?: React.ReactNode;
+    placement?: PopoverPlacement;
     style?: React.CSSProperties;
     className?: string;
 };
-declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ placement, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/types/src-next/popover/types.d.ts

@@ -1,6 +1,7 @@
 import { VirtualElement as PopoverVirtualElement } from '@floating-ui/react';
 import React from 'react';
 export type { PopoverVirtualElement };
+export declare const PopoverPlacementValues: readonly PopoverPlacement[];
 export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
 export type PopoverAnchor = PopoverVirtualElement | (() => PopoverVirtualElement | null) | HTMLElement | (() => HTMLElement | null) | null | undefined;
 export type PopoverStrategy = 'absolute' | 'fixed';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [
@@ -19,6 +19,7 @@
   "author": {
     "name": "Veritone"
   },
+  "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/src/index.d.ts",
@@ -122,7 +123,7 @@
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
@@ -138,6 +139,7 @@
     "cssnano": "^6.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "esbuild": "^0.19.11",
+    "esbuild-jest": "^0.5.0",
     "esbuild-runner": "^2.2.2",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
@@ -147,6 +149,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.13",
     "husky": "8.0.2",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^14.0.1",
@@ -159,6 +162,7 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-esbuild": "^6.1.0",
+    "rollup-plugin-jsx-remove-attributes": "^1.0.1",
     "rollup-plugin-preserve-directives": "^0.3.0",
     "rollup-plugin-styles": "^4.0.0",
     "sass": "^1.70.0",