@veritone-ce/design-system 2.0.2 → 2.0.4

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

@@ -31,6 +31,7 @@ const Alert = ({ severity = "success", ...props }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-testid": props["data-testid"],
       style: {
         // @ts-ignore
         "--alert-color": color,

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"alert":"vt_ce_Alert_alert__34ce19c5","alert-stripe":"vt_ce_Alert_alertStripe__34ce19c5","alert-icon":"vt_ce_Alert_alertIcon__34ce19c5","alert-content":"vt_ce_Alert_alertContent__34ce19c5","alert-label":"vt_ce_Alert_alertLabel__34ce19c5","alert-text":"vt_ce_Alert_alertText__34ce19c5","spacer":"vt_ce_Alert_spacer__34ce19c5","alert-action":"vt_ce_Alert_alertAction__34ce19c5","alert-close":"vt_ce_Alert_alertClose__34ce19c5"};
+var modules_efc4e723 = {"alert":"vt_ce_Alert_alert__014c1660","alert-stripe":"vt_ce_Alert_alertStripe__014c1660","alert-icon":"vt_ce_Alert_alertIcon__014c1660","alert-content":"vt_ce_Alert_alertContent__014c1660","alert-label":"vt_ce_Alert_alertLabel__014c1660","alert-text":"vt_ce_Alert_alertText__014c1660","spacer":"vt_ce_Alert_spacer__014c1660","alert-action":"vt_ce_Alert_alertAction__014c1660","alert-close":"vt_ce_Alert_alertClose__014c1660"};
 
 export { modules_efc4e723 as default };

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

@@ -28,6 +28,7 @@ const Button = forwardRef(
         disabled: loading || disabled,
         "data-destructive": destructive,
         onClick: props.onClick,
+        "data-testid": props["data-testid"],
         style: props.style,
         className: cx(modules_efc4e723["button"], variantCn, props.className),
         children: [

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"button":"vt_ce_Button_button__259ca507","primary":"vt_ce_Button_primary__259ca507","secondary":"vt_ce_Button_secondary__259ca507","tertiary":"vt_ce_Button_tertiary__259ca507","inner-container":"vt_ce_Button_innerContainer__259ca507","loading-container":"vt_ce_Button_loadingContainer__259ca507","button-icon":"vt_ce_Button_buttonIcon__259ca507"};
+var modules_efc4e723 = {"button":"vt_ce_Button_button__0b5bf02c","primary":"vt_ce_Button_primary__0b5bf02c","secondary":"vt_ce_Button_secondary__0b5bf02c","tertiary":"vt_ce_Button_tertiary__0b5bf02c","inner-container":"vt_ce_Button_innerContainer__0b5bf02c","loading-container":"vt_ce_Button_loadingContainer__0b5bf02c","button-icon":"vt_ce_Button_buttonIcon__0b5bf02c"};
 
 export { modules_efc4e723 as default };

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

@@ -31,6 +31,7 @@ const Checkbox = forwardRef(
           e.stopPropagation();
           e.preventDefault();
         },
+        "data-testid": props["data-testid"],
         style: props.style,
         className: cx(modules_efc4e723["checkbox"], props.className),
         children: [

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"checkbox":"vt_ce_Checkbox_checkbox__504048e5","checkbox-svg-path":"vt_ce_Checkbox_checkboxSvgPath__504048e5","passthrough-label-container":"vt_ce_Checkbox_passthroughLabelContainer__504048e5","invisible-checkbox":"vt_ce_Checkbox_invisibleCheckbox__504048e5","visible-label":"vt_ce_Checkbox_visibleLabel__504048e5","icon-container":"vt_ce_Checkbox_iconContainer__504048e5"};
+var modules_efc4e723 = {"checkbox":"vt_ce_Checkbox_checkbox__b74b16bc","checkbox-svg-path":"vt_ce_Checkbox_checkboxSvgPath__b74b16bc","passthrough-label-container":"vt_ce_Checkbox_passthroughLabelContainer__b74b16bc","invisible-checkbox":"vt_ce_Checkbox_invisibleCheckbox__b74b16bc","visible-label":"vt_ce_Checkbox_visibleLabel__b74b16bc","icon-container":"vt_ce_Checkbox_iconContainer__b74b16bc"};
 
 export { modules_efc4e723 as default };

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

@@ -1,7 +1,6 @@
 'use strict';
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createTheme, ThemeProvider, CircularProgress as CircularProgress$1 } from '@mui/material';
 import modules_efc4e723 from './styles.module.scss.js';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
@@ -9,7 +8,8 @@ import 'react';
 import '@mui/system';
 import '../styles/styled.js';
 
-const muiDefaultTheme = createTheme();
+const SIZE = 44;
+const thickness = 3.6;
 function CircularProgress({
   size = 40,
   fillParentHeight = false,
@@ -20,19 +20,29 @@ function CircularProgress({
     {
       className: cx(modules_efc4e723["container"], props.className),
       "data-fill-parent-height": fillParentHeight,
+      "data-testid": props["data-testid"],
       style: {
         // @ts-ignore
         "--circular-progress-color": props.color ?? void 0,
+        "--circular-progress-size": `${size}px`,
         ...props.style
       },
-      children: /* @__PURE__ */ jsx(ThemeProvider, { theme: muiDefaultTheme, children: /* @__PURE__ */ jsx(
-        CircularProgress$1,
+      children: /* @__PURE__ */ jsx("span", { className: modules_efc4e723["progress-container"], children: /* @__PURE__ */ jsx(
+        "svg",
         {
-          color: "inherit",
-          style: {
-            width: !fillParentHeight ? size : "unset",
-            height: !fillParentHeight ? size : "100%"
-          }
+          viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+          className: modules_efc4e723["progress-svg"],
+          children: /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: SIZE,
+              cy: SIZE,
+              r: (SIZE - thickness) / 2,
+              fill: "none",
+              strokeWidth: thickness,
+              className: modules_efc4e723["progress-circle"]
+            }
+          )
         }
       ) })
     }

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"container":"vt_ce_CircularProgress_container__ea033e1c"};
+var modules_efc4e723 = {"container":"vt_ce_CircularProgress_container__4c2cfc25","progress-container":"vt_ce_CircularProgress_progressContainer__4c2cfc25","progress-svg":"vt_ce_CircularProgress_progressSvg__4c2cfc25","circularRotateKeyframe":"vt_ce_CircularProgress_circularRotateKeyframe__4c2cfc25","progress-circle":"vt_ce_CircularProgress_progressCircle__4c2cfc25","circularDashKeyframe":"vt_ce_CircularProgress_circularDashKeyframe__4c2cfc25"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/Dialog/components.js

@@ -11,6 +11,7 @@ import '@mui/system';
 import '../styles/styled.js';
 import Button from '../Button/index.js';
 import Typography from '../Typography/index.js';
+import IconButton from '../IconButton/index.js';
 
 const Dialog = React.forwardRef(function Dialog2({
   children,
@@ -19,6 +20,8 @@ const Dialog = React.forwardRef(function Dialog2({
   className,
   overlayStyle,
   overlayClassName,
+  lockScroll = true,
+  "data-testid": dataTestId,
   ...options
 }, propRef) {
   const dialog = useDialog(options);
@@ -30,7 +33,7 @@ const Dialog = React.forwardRef(function Dialog2({
       {
         style: overlayStyle,
         className: cx(modules_efc4e723["dialog-overlay"], overlayClassName),
-        lockScroll: true,
+        lockScroll,
         children: /* @__PURE__ */ jsx(FloatingFocusManager, { context: dialog.context, children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -38,6 +41,7 @@ const Dialog = React.forwardRef(function Dialog2({
             "aria-labelledby": dialog.labelId,
             "aria-describedby": dialog.descriptionId,
             ...dialog.getFloatingProps(),
+            "data-testid": dataTestId,
             style,
             className: cx(modules_efc4e723["dialog"], className),
             children
@@ -48,6 +52,19 @@ const Dialog = React.forwardRef(function Dialog2({
   }
   return /* @__PURE__ */ jsx(DialogContext.Provider, { value: dialog, children: content });
 });
+const DialogStart = React.forwardRef(
+  function DialogStart2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx(modules_efc4e723["dialog-start"], props.className),
+        children
+      }
+    );
+  }
+);
 const DialogContent = React.forwardRef(function DialogContent2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -59,29 +76,45 @@ const DialogContent = React.forwardRef(function DialogContent2({ children, ...pr
     }
   );
 });
-const DialogHeading = React.forwardRef(function DialogHeading2({ children, ...props }, ref) {
+const DialogEnd = React.forwardRef(
+  function DialogEnd2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx(modules_efc4e723["dialog-end"], props.className),
+        children
+      }
+    );
+  }
+);
+const DialogTitle = React.forwardRef(function DialogTitle2({ children, ...props }, ref) {
   const { setLabelId } = useDialogContext();
   const id = React.useId();
   React.useLayoutEffect(() => {
     setLabelId(id);
     return () => setLabelId(void 0);
   }, [id, setLabelId]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DialogStart, { children: /* @__PURE__ */ jsx(
     Typography,
     {
       variant: "h4",
+      color: "primary",
       ref,
       id,
-      className: cx(modules_efc4e723["dialog-heading"], props.className),
+      ...props,
+      className: cx(modules_efc4e723["dialog-title"], props.className),
       children
     }
-  );
+  ) });
 });
 const DialogTypography = React.forwardRef(function DialogTypography2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     Typography,
     {
       variant: "paragraph2",
+      color: "primary",
       ...props,
       ref,
       className: cx(modules_efc4e723["dialog-typography"], props.className),
@@ -96,10 +129,20 @@ const DialogDescription = React.forwardRef(function DialogDescription2({ childre
     setDescriptionId(id);
     return () => setDescriptionId(void 0);
   }, [id, setDescriptionId]);
-  return /* @__PURE__ */ jsx(DialogTypography, { ...props, ref, id, children });
+  return /* @__PURE__ */ jsx(
+    DialogTypography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      id,
+      children
+    }
+  );
 });
 const DialogActions = React.forwardRef(function DialogActions2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DialogEnd, { children: /* @__PURE__ */ jsx(
     "div",
     {
       ...props,
@@ -107,24 +150,36 @@ const DialogActions = React.forwardRef(function DialogActions2({ children, ...pr
       className: cx(modules_efc4e723["dialog-actions"], props.className),
       children
     }
+  ) });
+});
+const DialogCloseButton = React.forwardRef(function DialogCloseButton2(props, ref) {
+  const { dismiss } = useDialogContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "tertiary",
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
   );
 });
-const DialogClose = React.forwardRef(
-  function DialogClose2(props, ref) {
-    const { dismiss } = useDialogContext();
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "secondary",
-        ...props,
-        ref,
-        onClick: (e) => {
-          dismiss();
-          props.onClick?.(e);
-        }
+const DialogCloseIconButton = React.forwardRef(function DialogCloseIconButton2(props, ref) {
+  const { dismiss } = useDialogContext();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
       }
-    );
-  }
-);
+    }
+  );
+});
 
-export { DialogActions, DialogClose, DialogContent, DialogDescription, DialogHeading, DialogTypography, Dialog as default };
+export { DialogActions, DialogCloseButton, DialogCloseIconButton, DialogContent, DialogDescription, DialogEnd, DialogStart, DialogTitle, DialogTypography, Dialog as default };

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"dialog-overlay":"vt_ce_Dialog_dialogOverlay__4b764cfb","dialog":"vt_ce_Dialog_dialog__4b764cfb","dialog-heading":"vt_ce_Dialog_dialogHeading__4b764cfb","dialog-content":"vt_ce_Dialog_dialogContent__4b764cfb","dialog-typography":"vt_ce_Dialog_dialogTypography__4b764cfb","dialog-actions":"vt_ce_Dialog_dialogActions__4b764cfb"};
+var modules_efc4e723 = {"dialog-overlay":"vt_ce_Dialog_dialogOverlay__b0e50c90","dialog":"vt_ce_Dialog_dialog__b0e50c90","dialog-start":"vt_ce_Dialog_dialogStart__b0e50c90","dialog-end":"vt_ce_Dialog_dialogEnd__b0e50c90","dialog-content":"vt_ce_Dialog_dialogContent__b0e50c90","dialog-title":"vt_ce_Dialog_dialogTitle__b0e50c90","dialog-typography":"vt_ce_Dialog_dialogTypography__b0e50c90","dialog-actions":"vt_ce_Dialog_dialogActions__b0e50c90"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/Drawer/components.js

@@ -0,0 +1,185 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useMergeRefs, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import modules_efc4e723 from './styles.module.scss.js';
+import { useDrawer, DrawerContext, useDrawerContext } from './state.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultTheme.js';
+import '@mui/system';
+import '../styles/styled.js';
+import Button from '../Button/index.js';
+import Typography from '../Typography/index.js';
+import IconButton from '../IconButton/index.js';
+
+const Drawer = React.forwardRef(function Drawer2({
+  children,
+  portalEl,
+  style,
+  className,
+  overlayStyle,
+  overlayClassName,
+  lockScroll = true,
+  "data-testid": dataTestId,
+  ...options
+}, propRef) {
+  const drawer = useDrawer(options);
+  const ref = useMergeRefs([drawer.context.refs.setFloating, propRef]);
+  let content = null;
+  if (drawer.context.open) {
+    content = /* @__PURE__ */ jsx(FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsx(
+      FloatingOverlay,
+      {
+        style: overlayStyle,
+        className: cx(modules_efc4e723["drawer-overlay"], overlayClassName),
+        lockScroll,
+        children: /* @__PURE__ */ jsx(FloatingFocusManager, { context: drawer.context, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            "aria-labelledby": drawer.labelId,
+            "aria-describedby": drawer.descriptionId,
+            ...drawer.getFloatingProps(),
+            "data-testid": dataTestId,
+            style,
+            className: cx(modules_efc4e723["drawer"], className),
+            children
+          }
+        ) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: drawer, children: content });
+});
+const DrawerStart = React.forwardRef(
+  function DrawerStart2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx(modules_efc4e723["drawer-start"], props.className),
+        children
+      }
+    );
+  }
+);
+const DrawerContent = React.forwardRef(function DrawerContent2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx(modules_efc4e723["drawer-content"], props.className),
+      children
+    }
+  );
+});
+const DrawerEnd = React.forwardRef(
+  function DrawerEnd2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx(modules_efc4e723["drawer-end"], props.className),
+        children
+      }
+    );
+  }
+);
+const DrawerTitle = React.forwardRef(function DrawerTitle2({ children, ...props }, ref) {
+  const { setLabelId } = useDrawerContext();
+  const id = React.useId();
+  React.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(void 0);
+  }, [id, setLabelId]);
+  return /* @__PURE__ */ jsx(DrawerStart, { children: /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "title",
+      ref,
+      id,
+      color: "primary",
+      ...props,
+      className: cx(modules_efc4e723["drawer-title"], props.className),
+      children
+    }
+  ) });
+});
+const DrawerTypography = React.forwardRef(function DrawerTypography2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      className: cx(modules_efc4e723["drawer-typography"], props.className),
+      children
+    }
+  );
+});
+const DrawerDescription = React.forwardRef(function DrawerDescription2({ children, ...props }, ref) {
+  const { setDescriptionId } = useDrawerContext();
+  const id = React.useId();
+  React.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(void 0);
+  }, [id, setDescriptionId]);
+  return /* @__PURE__ */ jsx(
+    DrawerTypography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      id,
+      children
+    }
+  );
+});
+const DrawerActions = React.forwardRef(function DrawerActions2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DrawerEnd, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx(modules_efc4e723["drawer-actions"], props.className),
+      children
+    }
+  ) });
+});
+const DrawerCloseButton = React.forwardRef(function DrawerCloseButton2(props, ref) {
+  const { dismiss } = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "tertiary",
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+const DrawerCloseIconButton = React.forwardRef(function DrawerCloseIconButton2(props, ref) {
+  const { dismiss } = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+
+export { DrawerActions, DrawerCloseButton, DrawerCloseIconButton, DrawerContent, DrawerDescription, DrawerEnd, DrawerStart, DrawerTitle, DrawerTypography, Drawer as default };

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

@@ -0,0 +1,14 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import Drawer from './components.js';
+
+function createDrawerComponent({ portalEl }) {
+  return forwardRef(
+    function ScopedDrawer(props, ref) {
+      return /* @__PURE__ */ jsx(Drawer, { portalEl, ref, ...props });
+    }
+  );
+}
+
+export { createDrawerComponent };

package/dist/esm-next/Drawer/state.js

@@ -0,0 +1,40 @@
+'use strict';
+'use client';
+import * as React from 'react';
+import { useFloating, useDismiss, useRole, useInteractions } from '@floating-ui/react';
+
+function useDrawer({ open, onDismiss: dismissDrawer }) {
+  const [labelId, setLabelId] = React.useState();
+  const [descriptionId, setDescriptionId] = React.useState();
+  const data = useFloating({
+    open,
+    onOpenChange: (newOpen) => !newOpen && dismissDrawer()
+  });
+  const context = data.context;
+  const dismiss = useDismiss(context, { outsidePressEvent: "mousedown" });
+  const role = useRole(context);
+  const interactions = useInteractions([dismiss, role]);
+  return React.useMemo(
+    () => ({
+      open,
+      dismiss: dismissDrawer,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId
+    }),
+    [open, dismissDrawer, interactions, data, labelId, descriptionId]
+  );
+}
+const DrawerContext = React.createContext(null);
+const useDrawerContext = () => {
+  const context = React.useContext(DrawerContext);
+  if (context == null) {
+    throw new Error("Drawer components must be wrapped in <Drawer />");
+  }
+  return context;
+};
+
+export { DrawerContext, useDrawer, useDrawerContext };

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

@@ -0,0 +1,3 @@
+var modules_efc4e723 = {"drawer-overlay":"vt_ce_Drawer_drawerOverlay__02bed79d","drawer":"vt_ce_Drawer_drawer__02bed79d","drawer-start":"vt_ce_Drawer_drawerStart__02bed79d","drawer-end":"vt_ce_Drawer_drawerEnd__02bed79d","drawer-content":"vt_ce_Drawer_drawerContent__02bed79d","drawer-title":"vt_ce_Drawer_drawerTitle__02bed79d","drawer-typography":"vt_ce_Drawer_drawerTypography__02bed79d","drawer-actions":"vt_ce_Drawer_drawerActions__02bed79d"};
+
+export { modules_efc4e723 as default };

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

@@ -15,6 +15,7 @@ function adaptMuiSvgIcon(MuiIcon) {
         {
           ref,
           "data-size": size,
+          "data-testid": props["data-testid"],
           style: props.style,
           className: cx(modules_efc4e723["icon"], props.className),
           children: /* @__PURE__ */ jsx(MuiIcon, { color: "inherit" })
@@ -31,6 +32,7 @@ function adaptSvgIcon(svg) {
         {
           ref,
           "data-size": size,
+          "data-testid": props["data-testid"],
           style: props.style,
           className: cx(modules_efc4e723["icon"], props.className),
           children: svg

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

@@ -19,6 +19,7 @@ const IconButton = forwardRef(
         disabled: props.loading || props.disabled,
         "data-destructive": props.destructive ?? false,
         onClick: props.onClick,
+        "data-testid": props["data-testid"],
         style: props.style,
         className: cx(modules_efc4e723["button"], props.className),
         children: [

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

@@ -9,38 +9,46 @@ import '@mui/system';
 import '../styles/styled.js';
 
 const Input = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxs("span", { 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,
-              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 })
-    ] })
-  ] });
+  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,
+                  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",

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"input":"vt_ce_Input_input__4620481b","label":"vt_ce_Input_label__4620481b","inner-input-container":"vt_ce_Input_innerInputContainer__4620481b","inner-input":"vt_ce_Input_innerInput__4620481b","input-icon":"vt_ce_Input_inputIcon__4620481b","help-label":"vt_ce_Input_helpLabel__4620481b","error-label":"vt_ce_Input_errorLabel__4620481b"};
+var modules_efc4e723 = {"input":"vt_ce_Input_input__b1641fef","label":"vt_ce_Input_label__b1641fef","inner-input-container":"vt_ce_Input_innerInputContainer__b1641fef","inner-input":"vt_ce_Input_innerInput__b1641fef","input-icon":"vt_ce_Input_inputIcon__b1641fef","help-label":"vt_ce_Input_helpLabel__b1641fef","error-label":"vt_ce_Input_errorLabel__b1641fef"};
 
 export { modules_efc4e723 as default };

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

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