@veritone-ce/design-system 2.0.0-next.0 → 2.0.0-next.2

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

@@ -2,9 +2,9 @@
 'use client';
 import React__default from 'react';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 import Button from '../Button/index.js';
 import IconButton from '../IconButton/index.js';

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"alert":"vt_ce_Alert_alert__2e7da7e9","alert-stripe":"vt_ce_Alert_alertStripe__2e7da7e9","alert-icon":"vt_ce_Alert_alertIcon__2e7da7e9","alert-content":"vt_ce_Alert_alertContent__2e7da7e9","alert-label":"vt_ce_Alert_alertLabel__2e7da7e9","alert-text":"vt_ce_Alert_alertText__2e7da7e9","spacer":"vt_ce_Alert_spacer__2e7da7e9","alert-action":"vt_ce_Alert_alertAction__2e7da7e9","alert-close":"vt_ce_Alert_alertClose__2e7da7e9"};
+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"};
 
 export { modules_efc4e723 as default };

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

@@ -3,9 +3,9 @@
 import React__default, { forwardRef } from 'react';
 import CircularProgress from '../CircularProgress/index.js';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 
 const Button = forwardRef((props, ref) => {

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"button":"vt_ce_Button_button__582c594f","primary":"vt_ce_Button_primary__582c594f","secondary":"vt_ce_Button_secondary__582c594f","tertiary":"vt_ce_Button_tertiary__582c594f","inner-container":"vt_ce_Button_innerContainer__582c594f","loading-container":"vt_ce_Button_loadingContainer__582c594f","button-icon":"vt_ce_Button_buttonIcon__582c594f"};
+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"};
 
 export { modules_efc4e723 as default };

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

@@ -3,9 +3,9 @@
 import React__default, { forwardRef, useRef, useId } from 'react';
 import { useForkRef } from '@mui/material';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 
 const Checkbox = forwardRef(

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"checkbox":"vt_ce_Checkbox_checkbox__54a9c9d4","checkbox-svg-path":"vt_ce_Checkbox_checkboxSvgPath__54a9c9d4","passthrough-label-container":"vt_ce_Checkbox_passthroughLabelContainer__54a9c9d4","invisible-checkbox":"vt_ce_Checkbox_invisibleCheckbox__54a9c9d4","visible-label":"vt_ce_Checkbox_visibleLabel__54a9c9d4","icon-container":"vt_ce_Checkbox_iconContainer__54a9c9d4"};
+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"};
 
 export { modules_efc4e723 as default };

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

@@ -1,10 +1,10 @@
 'use strict';
 import { createTheme, ThemeProvider, CircularProgress as CircularProgress$1 } from '@mui/material';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
 import 'react';
+import '@mui/system';
 import '../styles/styled.js';
 
 const muiDefaultTheme = createTheme();

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"container":"vt_ce_CircularProgress_container__784b3b1b"};
+var modules_efc4e723 = {"container":"vt_ce_CircularProgress_container__ea033e1c"};
 
 export { modules_efc4e723 as default };

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

@@ -0,0 +1,13 @@
+'use strict';
+import React__default, { forwardRef } from 'react';
+import Dialog from './components.js';
+
+function createDialogComponent({ portalEl }) {
+  return forwardRef(
+    function ScopedDialog(props, ref) {
+      return /* @__PURE__ */ React__default.createElement(Dialog, { portalEl, ref, ...props });
+    }
+  );
+}
+
+export { createDialogComponent };

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"dialog-overlay":"vt_ce_Dialog_dialogOverlay__3f485107","dialog":"vt_ce_Dialog_dialog__3f485107","dialog-heading":"vt_ce_Dialog_dialogHeading__3f485107","dialog-content":"vt_ce_Dialog_dialogContent__3f485107","dialog-typography":"vt_ce_Dialog_dialogTypography__3f485107","dialog-actions":"vt_ce_Dialog_dialogActions__3f485107"};
+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"};
 
 export { modules_efc4e723 as default };

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

@@ -3,10 +3,10 @@ import React__default, { forwardRef } from 'react';
 import { BrokenImageOutlined } from '@mui/icons-material';
 import { adaptMuiSvgIcon } from './wrappers.js';
 
-const DefaultFallback = adaptMuiSvgIcon(BrokenImageOutlined);
+const DefaultIconFallback = adaptMuiSvgIcon(BrokenImageOutlined);
 function createIconComponent({
   iconMap = {},
-  fallback = DefaultFallback
+  fallback = DefaultIconFallback
 }) {
   return forwardRef(function Icon({ name, ...genericProps }, ref) {
     const ResolvedIcon = React__default.useMemo(() => iconMap[name] ?? fallback, [name]);
@@ -14,4 +14,4 @@ function createIconComponent({
   });
 }
 
-export { createIconComponent };
+export { DefaultIconFallback, createIconComponent };

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

@@ -1,9 +1,9 @@
 'use strict';
 import React__default from 'react';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 
 function adaptMuiSvgIcon(MuiIcon) {

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

@@ -3,9 +3,9 @@
 import React__default, { forwardRef } from 'react';
 import CircularProgress from '../CircularProgress/index.js';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 
 const IconButton = forwardRef(

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"button":"vt_ce_IconButton_button__b21b4335","inner-icon":"vt_ce_IconButton_innerIcon__b21b4335","loading-container":"vt_ce_IconButton_loadingContainer__b21b4335"};
+var modules_efc4e723 = {"button":"vt_ce_IconButton_button__cb009384","inner-icon":"vt_ce_IconButton_innerIcon__cb009384","loading-container":"vt_ce_IconButton_loadingContainer__cb009384"};
 
 export { modules_efc4e723 as default };

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

@@ -2,9 +2,9 @@
 'use client';
 import React__default, { forwardRef } from 'react';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 
 const Input = forwardRef((props, ref) => {

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"input":"vt_ce_Input_input__a0b6a844","label":"vt_ce_Input_label__a0b6a844","inner-input-container":"vt_ce_Input_innerInputContainer__a0b6a844","inner-input":"vt_ce_Input_innerInput__a0b6a844","input-icon":"vt_ce_Input_inputIcon__a0b6a844","help-label":"vt_ce_Input_helpLabel__a0b6a844","error-label":"vt_ce_Input_errorLabel__a0b6a844"};
+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"};
 
 export { modules_efc4e723 as default };

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

@@ -0,0 +1,138 @@
+'use strict';
+'use client';
+import React__default from 'react';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultTheme.js';
+import '@mui/system';
+import '../styles/styled.js';
+import { useListItem, useMergeRefs, useFloating, offset, flip, shift, size, autoUpdate, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingList, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import modules_efc4e723 from './styles.module.scss.js';
+import { resolvePopoverAnchor } from '../popover/utils.js';
+
+function Menu({
+  open: isOpen,
+  role: assumeRole = "menu",
+  placement = "bottom-start",
+  strategy = "absolute",
+  enableTypeahead = true,
+  matchAnchorWidth = false,
+  options,
+  dismissEnabled = true,
+  className,
+  ...props
+}) {
+  const anchor = resolvePopoverAnchor(props.anchor);
+  const [activeIndex, setActiveIndex] = React__default.useState(null);
+  const elementsRef = React__default.useRef([]);
+  const labelsRef = React__default.useRef([]);
+  const { floatingStyles, refs, context } = useFloating({
+    open: isOpen,
+    onOpenChange(newOpen) {
+      if (!newOpen && dismissEnabled) {
+        props.onDismiss?.();
+      }
+    },
+    elements: {
+      reference: anchor
+    },
+    placement,
+    strategy,
+    middleware: [
+      offset({
+        mainAxis: 4,
+        alignmentAxis: 0
+      }),
+      flip(),
+      shift(),
+      size({
+        apply({ rects, elements }) {
+          if (matchAnchorWidth) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`
+            });
+          }
+        }
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  });
+  const role = useRole(context, { role: assumeRole });
+  const dismiss = useDismiss(context, {
+    enabled: dismissEnabled,
+    bubbles: false
+  });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    nested: false,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = useTypeahead(context, {
+    enabled: enableTypeahead,
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : void 0,
+    activeIndex
+  });
+  const { getFloatingProps, getItemProps } = useInteractions([
+    role,
+    dismiss,
+    listNavigation,
+    typeahead
+  ]);
+  return /* @__PURE__ */ React__default.createElement(FloatingList, { elementsRef, labelsRef }, isOpen && /* @__PURE__ */ React__default.createElement(FloatingPortal, { root: props.portalEl }, /* @__PURE__ */ React__default.createElement(
+    FloatingFocusManager,
+    {
+      context,
+      modal: false,
+      order: ["reference", "content"]
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref: refs.setFloating,
+        tabIndex: 0,
+        "aria-labelledby": anchor?.id || props.anchorId,
+        style: {
+          ...floatingStyles,
+          ...props.style
+        },
+        ...getFloatingProps(),
+        className: cx(modules_efc4e723["menu"], className)
+      },
+      options.map((option, i) => /* @__PURE__ */ React__default.createElement(
+        MenuItem,
+        {
+          key: i,
+          role: "menuitem",
+          isActive: i === activeIndex,
+          ...getItemProps({
+            onClick(event) {
+              option.onSelect(event);
+            }
+          }),
+          label: option.label,
+          icon: option.icon
+        }
+      ))
+    )
+  )));
+}
+const MenuItem = React__default.forwardRef(({ label, disabled, isActive, ...props }, forwardedRef) => {
+  const item = useListItem({ label: disabled ? null : label });
+  return /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      ...props,
+      ref: useMergeRefs([item.ref, forwardedRef]),
+      type: "button",
+      role: "menuitem",
+      className: modules_efc4e723["option"],
+      tabIndex: isActive ? 0 : -1,
+      disabled
+    },
+    props.icon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["option-icon"] }, props.icon),
+    /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["option-label"] }, label)
+  );
+});
+
+export { MenuItem, Menu as default };

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

@@ -0,0 +1,11 @@
+'use strict';
+import React__default from 'react';
+import Menu from './controlled.js';
+
+function createMenuComponent({ portalEl }) {
+  return function ScopedMenu(props) {
+    return /* @__PURE__ */ React__default.createElement(Menu, { portalEl, ...props });
+  };
+}
+
+export { createMenuComponent };

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"menu":"vt_ce_Menu_menu__d4a8c606","option":"vt_ce_Menu_option__d4a8c606","option-icon":"vt_ce_Menu_optionIcon__d4a8c606"};
+var modules_efc4e723 = {"menu":"vt_ce_Menu_menu__bd4e93dd","option":"vt_ce_Menu_option__bd4e93dd","option-icon":"vt_ce_Menu_optionIcon__bd4e93dd","option-label":"vt_ce_Menu_optionLabel__bd4e93dd"};
 
 export { modules_efc4e723 as default };

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

@@ -3,9 +3,9 @@
 import React__default, { forwardRef, useRef, useId } from 'react';
 import { useForkRef } from '@mui/material';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 
 const RadioButton = forwardRef(

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"radio":"vt_ce_RadioButton_radio__c46ae03e","radio-circle-outer":"vt_ce_RadioButton_radioCircleOuter__c46ae03e","radio-circle-inner":"vt_ce_RadioButton_radioCircleInner__c46ae03e","passthrough-label-container":"vt_ce_RadioButton_passthroughLabelContainer__c46ae03e","invisible-radio":"vt_ce_RadioButton_invisibleRadio__c46ae03e","visible-label":"vt_ce_RadioButton_visibleLabel__c46ae03e","icon-container":"vt_ce_RadioButton_iconContainer__c46ae03e"};
+var modules_efc4e723 = {"radio":"vt_ce_RadioButton_radio__16b9e3d4","radio-circle-outer":"vt_ce_RadioButton_radioCircleOuter__16b9e3d4","radio-circle-inner":"vt_ce_RadioButton_radioCircleInner__16b9e3d4","passthrough-label-container":"vt_ce_RadioButton_passthroughLabelContainer__16b9e3d4","invisible-radio":"vt_ce_RadioButton_invisibleRadio__16b9e3d4","visible-label":"vt_ce_RadioButton_visibleLabel__16b9e3d4","icon-container":"vt_ce_RadioButton_iconContainer__16b9e3d4"};
 
 export { modules_efc4e723 as default };

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

@@ -1,102 +1,110 @@
 'use strict';
 'use client';
-import React__default, { forwardRef, useId, useRef, useState } from 'react';
-import '@mui/system';
+import React__default, { useId, useRef, useState } from 'react';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 import modules_efc4e723 from './styles.module.scss.js';
 import { ArrowDropDown, Close } from '@mui/icons-material';
-import Menu from '../Menu/index.js';
+import Menu from '../Menu/controlled.js';
 import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
 import '../Icon/factory.js';
 
 const DefaultEndIcon = adaptMuiSvgIcon(ArrowDropDown);
 const DefaultUnsetIcon = adaptMuiSvgIcon(Close);
-const ControlledSelect = forwardRef(
-  ({ endIcon = /* @__PURE__ */ React__default.createElement(DefaultEndIcon, null), placeholder = "Select...", ...props }, ref) => {
-    const anchorId = useId();
-    const anchorRef = useRef(null);
-    const [activeAnchor, setActiveAnchor] = useState(null);
-    const open = Boolean(activeAnchor);
-    const unsetIcon = /* @__PURE__ */ React__default.createElement(DefaultUnsetIcon, null);
-    const selectedOption = props.options.find(
-      (option) => option.value === props.value
-    );
-    let filteredOptions = props.options;
-    if (props.filterOptions) {
-      filteredOptions = props.filterOptions(filteredOptions);
-    }
-    filteredOptions = filteredOptions.filter(
-      (option) => option.label.toLowerCase().includes(props.inputValue.toLowerCase())
-    );
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+function ControlledSelect({
+  ref,
+  endIcon = /* @__PURE__ */ React__default.createElement(DefaultEndIcon, null),
+  placeholder = "Select...",
+  ...props
+}) {
+  const anchorId = useId();
+  const anchorRef = useRef(null);
+  const [activeAnchor, setActiveAnchor] = useState(null);
+  const open = Boolean(activeAnchor);
+  const unsetIcon = /* @__PURE__ */ React__default.createElement(DefaultUnsetIcon, null);
+  const selectedOption = props.options.find(
+    (option) => option.value === props.value
+  );
+  let filteredOptions = props.options;
+  if (props.filterOptions) {
+    filteredOptions = props.filterOptions(filteredOptions);
+  }
+  filteredOptions = filteredOptions.filter(
+    (option) => option.label.toLowerCase().includes(props.inputValue.toLowerCase())
+  );
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    "span",
+    {
+      id: anchorId,
+      ref: anchorRef,
+      className: cx(modules_efc4e723["select"], props.className),
+      style: props.style,
+      onClick: () => setActiveAnchor(anchorRef.current)
+    },
+    /* @__PURE__ */ React__default.createElement("label", { className: modules_efc4e723["label"] }, props.label),
+    /* @__PURE__ */ React__default.createElement(
       "span",
       {
-        id: anchorId,
-        ref: anchorRef,
-        className: cx(modules_efc4e723["select"], props.className),
-        style: props.style,
-        onClick: () => setActiveAnchor(anchorRef.current)
+        "data-disabled": props.disabled ?? false,
+        "data-error": props.error !== void 0,
+        className: modules_efc4e723["inner-input-container"]
       },
-      /* @__PURE__ */ React__default.createElement("label", { className: modules_efc4e723["label"] }, props.label),
+      props.startIcon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["select-icon"] }, props.startIcon),
       /* @__PURE__ */ React__default.createElement(
+        "input",
+        {
+          ref,
+          type: "text",
+          placeholder,
+          value: selectedOption?.label ?? props.inputValue,
+          disabled: props.disabled,
+          onChange: (e) => props.onInputChange(e, e.target.value),
+          className: modules_efc4e723["inner-input"]
+        }
+      ),
+      selectedOption && /* @__PURE__ */ React__default.createElement(
         "span",
         {
-          "data-disabled": props.disabled ?? false,
-          "data-error": props.error !== void 0,
-          className: modules_efc4e723["inner-input-container"]
-        },
-        props.startIcon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["select-icon"] }, props.startIcon),
-        /* @__PURE__ */ React__default.createElement(
-          "input",
-          {
-            ref,
-            type: "text",
-            placeholder,
-            value: selectedOption?.label ?? props.inputValue,
-            disabled: props.disabled,
-            onChange: (e) => props.onInputChange(e.target.value),
-            className: modules_efc4e723["inner-input"]
+          className: modules_efc4e723["select-icon"],
+          onClick: (e) => {
+            props.onChange?.(e, null);
+            props.onInputChange(e, "");
           }
-        ),
-        selectedOption && /* @__PURE__ */ React__default.createElement(
-          "span",
-          {
-            className: modules_efc4e723["select-icon"],
-            onClick: () => {
-              props.onChange?.("");
-              props.onInputChange("");
-            }
-          },
-          unsetIcon
-        ),
-        endIcon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["select-icon"] }, endIcon)
+        },
+        unsetIcon
       ),
-      props.helpLabel && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["help-label"] }, props.helpLabel),
-      props.error && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["error-label"] }, /* @__PURE__ */ React__default.createElement(IndicatorCircle, null), /* @__PURE__ */ React__default.createElement("span", null, props.error))
-    ), /* @__PURE__ */ React__default.createElement(
-      Menu,
-      {
-        anchorId,
-        anchor: activeAnchor,
-        open,
-        onDismiss: () => {
+      endIcon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["select-icon"] }, endIcon)
+    ),
+    props.helpLabel && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["help-label"] }, props.helpLabel),
+    props.error && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["error-label"] }, /* @__PURE__ */ React__default.createElement(IndicatorCircle, null), /* @__PURE__ */ React__default.createElement("span", null, props.error))
+  ), /* @__PURE__ */ React__default.createElement(
+    Menu,
+    {
+      role: "select",
+      anchorId,
+      anchor: activeAnchor,
+      portalEl: props.portalEl,
+      strategy: props.dropdownStrategy,
+      enableTypeahead: false,
+      matchAnchorWidth: true,
+      open,
+      onDismiss: () => {
+        setActiveAnchor(null);
+      },
+      options: filteredOptions.map((option) => ({
+        label: option.label,
+        icon: option.icon,
+        onSelect(e) {
+          props.onChange(e, option.value);
+          props.onInputChange(e, option.label);
           setActiveAnchor(null);
-        },
-        options: filteredOptions.map((option) => ({
-          label: option.label,
-          icon: option.icon,
-          onSelect() {
-            props.onChange(option.value);
-            props.onInputChange(option.label);
-            setActiveAnchor(null);
-          }
-        }))
-      }
-    ));
-  }
-);
+        }
+      }))
+    }
+  ));
+}
 const IndicatorCircle = () => /* @__PURE__ */ React__default.createElement(
   "svg",
   {

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

@@ -0,0 +1,19 @@
+'use strict';
+import React__default, { forwardRef } from 'react';
+import Select from './uncontrolled.js';
+import ControlledSelect from './controlled.js';
+
+function createSelectComponent({ portalEl }) {
+  return forwardRef(function ScopedSelect(props, ref) {
+    return /* @__PURE__ */ React__default.createElement(Select, { portalEl, ref, ...props });
+  });
+}
+function createControlledSelectComponent({
+  portalEl
+}) {
+  return forwardRef(function ScopedControlledSelect(props, ref) {
+    return /* @__PURE__ */ React__default.createElement(ControlledSelect, { portalEl, ref, ...props });
+  });
+}
+
+export { createControlledSelectComponent, createSelectComponent };

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"select":"vt_ce_Select_select__f0a62729","label":"vt_ce_Select_label__f0a62729","inner-input-container":"vt_ce_Select_innerInputContainer__f0a62729","inner-input":"vt_ce_Select_innerInput__f0a62729","select-icon":"vt_ce_Select_selectIcon__f0a62729","help-label":"vt_ce_Select_helpLabel__f0a62729","error-label":"vt_ce_Select_errorLabel__f0a62729"};
+var modules_efc4e723 = {"select":"vt_ce_Select_select__b9f77002","label":"vt_ce_Select_label__b9f77002","inner-input-container":"vt_ce_Select_innerInputContainer__b9f77002","inner-input":"vt_ce_Select_innerInput__b9f77002","select-icon":"vt_ce_Select_selectIcon__b9f77002","help-label":"vt_ce_Select_helpLabel__b9f77002","error-label":"vt_ce_Select_errorLabel__b9f77002"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/Select/uncontrolled.js

@@ -0,0 +1,54 @@
+'use strict';
+'use client';
+import React__default, { useState } from 'react';
+import ControlledSelect from './controlled.js';
+
+function Select({
+  ref,
+  defaultValue = null,
+  value: propsValue,
+  inputValue: propsInputValue,
+  onChange: propsOnChange,
+  onInputChange: propsOnInputChange,
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const [value, onChange] = propsValue !== void 0 ? [
+    propsValue,
+    (e, newValue) => {
+      propsOnChange?.(e, newValue);
+    }
+  ] : [
+    uncontrolled,
+    (e, newValue) => {
+      setUncontrolled(newValue);
+      propsOnChange?.(e, newValue);
+    }
+  ];
+  const [uncontrolledInputValue, setUncontrolledInputValue] = useState("");
+  const [inputValue, onInputChange] = propsInputValue !== void 0 ? [
+    propsInputValue,
+    (e, newValue) => {
+      propsOnInputChange?.(e, newValue);
+    }
+  ] : [
+    uncontrolledInputValue,
+    (e, newValue) => {
+      setUncontrolledInputValue(newValue);
+      propsOnInputChange?.(e, newValue);
+    }
+  ];
+  return /* @__PURE__ */ React__default.createElement(
+    ControlledSelect,
+    {
+      ref,
+      ...props,
+      value,
+      onChange,
+      inputValue,
+      onInputChange
+    }
+  );
+}
+
+export { Select as default };

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

@@ -2,9 +2,9 @@
 'use client';
 import React__default, { forwardRef } from 'react';
 import modules_efc4e723 from './styles.module.scss.js';
-import '@mui/system';
 import { cx } from '../styles/cx.js';
 import '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 
 const Textarea = forwardRef(

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

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__904749ad","label":"vt_ce_Textarea_label__904749ad","inner-textarea-container":"vt_ce_Textarea_innerTextareaContainer__904749ad","inner-textarea":"vt_ce_Textarea_innerTextarea__904749ad","help-label":"vt_ce_Textarea_helpLabel__904749ad","error-label":"vt_ce_Textarea_errorLabel__904749ad"};
+var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__c4cfba0d","label":"vt_ce_Textarea_label__c4cfba0d","inner-textarea-container":"vt_ce_Textarea_innerTextareaContainer__c4cfba0d","inner-textarea":"vt_ce_Textarea_innerTextarea__c4cfba0d","help-label":"vt_ce_Textarea_helpLabel__c4cfba0d","error-label":"vt_ce_Textarea_errorLabel__c4cfba0d"};
 
 export { modules_efc4e723 as default };

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

@@ -3,8 +3,8 @@
 import { useFloating, shift, flip, arrow, 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 '@mui/system';
 import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '@mui/system';
 import '../styles/styled.js';
 
 function Tooltip(props) {