@festo-ui/react 9.0.1-dev.772 → 9.0.1-dev.776

package/dist/forms/combobox/ComboBox.css

@@ -106,57 +106,18 @@
   display: none;
 }
 
-.fr-combobox-options-container {
-  background-color: var(--fwe-white);
-  border: 1px solid var(--fwe-gray-200);
-  border-radius: 4px;
-  max-width: 100%;
-  margin: 0;
-  padding: 8px;
-  list-style: none;
-  box-shadow: 0 1px 4px #00000029;
-}
-
-.fr-combobox-option {
-  cursor: pointer;
-  min-height: 24px;
-  padding: 12px 8px;
-  line-height: 24px;
-  position: relative;
-}
-
-.fr-combobox-option:hover, .fr-combobox-option.fr-focus, .fr-combobox-option.fr-selected {
-  background-color: var(--fwe-gray-100);
-  outline: none;
-}
-
-.fr-combobox-option:last-child {
-  border-bottom: none;
-}
-
-.fr-combobox-option.fr-disabled {
-  color: var(--fwe-text-disabled);
-  cursor: default;
-}
-
-.fr-combobox-option.fr-disabled:hover, .fr-combobox-option.fr-disabled:focus, .fr-combobox-option.fr-disabled.fr-focus {
-  background-color: #0000;
-}
-
-.fr-combobox-option-content {
+.fwe-combobox-option-content {
   white-space: nowrap;
   text-overflow: ellipsis;
-  min-height: 24px;
-  line-height: 24px;
   display: block;
   overflow: hidden;
 }
 
-.fr-combobox-highlight {
+.fwe-combobox-highlight {
   color: var(--fwe-hero);
 }
 
-.fr-combobox-empty {
+.fwe-combobox-empty {
   cursor: default;
   color: var(--fwe-text-disabled);
 }

package/dist/forms/combobox/ComboBox.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "./ComboBox.css";
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
 import classnames from "classnames";
-import { forwardRef, useMemo, useRef, useState } from "react";
+import { forwardRef, useMemo, useState } from "react";
 import { useControlled } from "../../utils/useControlled.js";
 import { useId } from "../../utils/useId.js";
 function getHighlightedLabel(label, query) {
@@ -39,7 +39,6 @@ function getHighlightedLabel(label, query) {
 }
 function ComboBoxComponent({ defaultValue = '', value: controlled, label, options = [], onChange, required = false, disabled, name, id: idProp, hint, error, placeholder, onInputChange, emptyMessage = 'No results found', className, ...props }, ref) {
     const id = useId(idProp);
-    const controlRef = useRef(null);
     const [value, setValue] = useControlled({
         controlled,
         default: defaultValue,
@@ -88,13 +87,12 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
             ...props,
             children: [
                 /*#__PURE__*/ jsx("label", {
-                    className: classnames('fr-combobox-label'),
+                    className: "fr-combobox-label",
                     htmlFor: id,
                     children: label || ''
                 }),
                 /*#__PURE__*/ jsxs("div", {
                     className: "fr-combobox-control",
-                    ref: controlRef,
                     children: [
                         /*#__PURE__*/ jsx(ComboboxInput, {
                             className: inputClasses,
@@ -115,19 +113,22 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                     ]
                 }),
                 /*#__PURE__*/ jsxs(ComboboxOptions, {
-                    className: "fr-combobox-options-container",
+                    className: "fwe-options-container",
                     as: "ul",
                     portal: false,
+                    style: {
+                        minWidth: 'var(--input-width)'
+                    },
                     anchor: {
                         to: 'bottom start',
-                        gap: 20,
+                        gap: 12,
                         padding: 8
                     },
                     children: [
                         0 === filteredOptions.length && /*#__PURE__*/ jsx("li", {
-                            className: "fr-combobox-option fr-combobox-empty",
+                            className: "fwe-combobox-option fwe-combobox-empty",
                             children: /*#__PURE__*/ jsx("span", {
-                                className: "fr-combobox-option-content",
+                                className: "fwe-combobox-option-content",
                                 children: emptyMessage
                             })
                         }),
@@ -135,17 +136,17 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                                 value: option,
                                 disabled: option.disabled,
                                 as: "li",
-                                className: ({ focus, selected, disabled: isDisabled })=>classnames('fr-combobox-option', {
-                                        'fr-selected': selected,
-                                        'fr-focus': focus,
-                                        'fr-disabled': isDisabled
+                                className: ({ focus, selected, disabled: isDisabled })=>classnames('fwe-combobox-option', {
+                                        'fwe-selected': selected,
+                                        'fwe-focus': focus,
+                                        'fwe-disabled': isDisabled
                                     }),
                                 children: /*#__PURE__*/ jsx("span", {
-                                    className: "fr-combobox-option-content",
-                                    "data-testid": "fr-combobox-option-content",
+                                    className: "fwe-combobox-option-content",
+                                    "data-testid": "fwe-combobox-option-content",
                                     children: getHighlightedLabel(option.label, query).map((part, index)=>/*#__PURE__*/ jsx("span", {
                                             className: classnames({
-                                                'fr-combobox-highlight': part.highlighted
+                                                'fwe-combobox-highlight': part.highlighted
                                             }),
                                             children: part.text
                                         }, `${part.text}-${index}`))

package/dist/forms/multi-select/MultiSelect.d.ts

@@ -0,0 +1,20 @@
+import type { Ref } from 'react';
+import type { ComponentBase } from '../../utils/types';
+import type { SelectOption } from '../select/Select';
+export interface MultiSelectProps<T> extends ComponentBase {
+    readonly defaultValue?: T[];
+    readonly value?: T[];
+    readonly label?: string;
+    readonly options?: SelectOption<T>[];
+    readonly onChange?: (value: T[]) => void;
+    readonly disabled?: boolean;
+    readonly name?: string;
+    readonly hint?: string;
+    readonly error?: string;
+    readonly placeholder?: string;
+}
+declare function MultiSelectComponent<T>({ defaultValue, value: controlled, label, options, onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }: MultiSelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: <T>(props: MultiSelectProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReturnType<typeof MultiSelectComponent>;
+export {};

package/dist/forms/multi-select/MultiSelect.js

@@ -0,0 +1,186 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+import { useId } from "../../utils/useId.js";
+import MultiSelect_module from "./MultiSelect.module.js";
+function MultiSelectComponent({ defaultValue = [], value: controlled, label, options = [], onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }, ref) {
+    const id = useId(idProp);
+    const labelId = `${id}-label`;
+    const [value, setValue] = useControlled({
+        controlled,
+        default: defaultValue,
+        onChange
+    });
+    const selectedOptions = useMemo(()=>options.filter((option)=>!option.disabled && (value ?? []).includes(option.data)), [
+        options,
+        value
+    ]);
+    function handleChange(nextOptions) {
+        setValue(nextOptions.map((option)=>option.data));
+    }
+    const chipsRef = useRef(null);
+    const [overflowCount, setOverflowCount] = useState(0);
+    const measureOverflow = useCallback((optionCount)=>{
+        const container = chipsRef.current;
+        if (!container) return void setOverflowCount(0);
+        const allChildren = Array.from(container.children);
+        const optionChildren = allChildren.filter((child)=>'true' === child.dataset.optionChip);
+        for (const child of optionChildren)child.style.display = '';
+        const containerRect = container.getBoundingClientRect();
+        const isOverflow = optionChildren.some((child)=>{
+            const childRect = child.getBoundingClientRect();
+            return childRect.right > containerRect.right;
+        });
+        if (isOverflow && optionCount > 1) {
+            let remainingWidth = containerRect.width - 64;
+            let count = 0;
+            for (const child of optionChildren){
+                const width = child.getBoundingClientRect().width + 8;
+                if (width <= remainingWidth) {
+                    remainingWidth -= width;
+                    child.style.display = '';
+                } else {
+                    count++;
+                    child.style.display = 'none';
+                }
+            }
+            setOverflowCount(count);
+        } else setOverflowCount(0);
+    }, []);
+    useLayoutEffect(()=>{
+        measureOverflow(selectedOptions.length);
+        const container = chipsRef.current;
+        if (!container) return;
+        const observer = new ResizeObserver(()=>{
+            measureOverflow(selectedOptions.length);
+        });
+        observer.observe(container);
+        return ()=>observer.disconnect();
+    }, [
+        selectedOptions,
+        measureOverflow
+    ]);
+    return /*#__PURE__*/ jsx(Listbox, {
+        value: selectedOptions,
+        onChange: handleChange,
+        disabled: disabled,
+        name: name,
+        multiple: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames(className, 'fwe-select-wrapper', {
+                'fwe-disabled': disabled
+            }),
+            ref: ref,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(ListboxButton, {
+                    className: classnames('fwe-select', {
+                        'fwe-invalid': error
+                    }),
+                    id: id,
+                    "aria-labelledby": label ? labelId : void 0,
+                    disabled: disabled,
+                    children: selectedOptions.length > 0 ? /*#__PURE__*/ jsxs("span", {
+                        ref: chipsRef,
+                        className: MultiSelect_module["chip-container"],
+                        children: [
+                            selectedOptions.map((o)=>/*#__PURE__*/ jsx("span", {
+                                    "data-option-chip": "true",
+                                    className: classnames('fwe-chip', {
+                                        'fwe-disabled': disabled
+                                    }),
+                                    style: {
+                                        minWidth: 0,
+                                        flexShrink: 1 === selectedOptions.length ? 1 : 0
+                                    },
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        className: MultiSelect_module["chip-ellipsis"],
+                                        children: o.label
+                                    })
+                                }, String(o.data))),
+                            overflowCount > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: "..."
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "fwe-chip",
+                                        children: overflowCount
+                                    })
+                                ]
+                            })
+                        ]
+                    }) : placeholder ?? ''
+                }),
+                /*#__PURE__*/ jsx("label", {
+                    className: "fwe-select-label",
+                    id: labelId,
+                    htmlFor: id,
+                    children: label || ''
+                }),
+                /*#__PURE__*/ jsx(ListboxOptions, {
+                    className: "fwe-options-container fwe-options-container--multi-select",
+                    as: "ul",
+                    portal: false,
+                    style: {
+                        minWidth: 'var(--button-width)'
+                    },
+                    anchor: {
+                        to: 'bottom start',
+                        gap: 12,
+                        padding: 8
+                    },
+                    children: options.map((option)=>/*#__PURE__*/ jsx(ListboxOption, {
+                            value: option,
+                            disabled: option.disabled,
+                            as: "li",
+                            style: {
+                                cursor: option.disabled ? 'default' : 'pointer'
+                            },
+                            children: ({ selected })=>/*#__PURE__*/ jsxs("label", {
+                                    className: classnames('fwe-checkbox', {
+                                        'fwe-disabled': option.disabled
+                                    }),
+                                    style: {
+                                        pointerEvents: 'none',
+                                        cursor: 'pointer'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx("input", {
+                                            type: "checkbox",
+                                            checked: selected,
+                                            disabled: option.disabled,
+                                            readOnly: true,
+                                            tabIndex: -1,
+                                            style: {
+                                                pointerEvents: 'none',
+                                                cursor: 'pointer'
+                                            }
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "fwe-checkbox-checkmark"
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "fwe-checkbox-label-content",
+                                            children: option.label
+                                        })
+                                    ]
+                                })
+                        }, String(option.data)))
+                }),
+                hint && !error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-description",
+                    children: hint
+                }),
+                error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-invalid",
+                    children: error
+                })
+            ]
+        })
+    });
+}
+const MultiSelect = /*#__PURE__*/ forwardRef(MultiSelectComponent);
+export { MultiSelect };

package/dist/forms/multi-select/MultiSelect.module.js

@@ -0,0 +1,8 @@
+import "./MultiSelect_module.css";
+const MultiSelect_module = {
+    "chip-container": "chip-container-VYPHrz",
+    chipContainer: "chip-container-VYPHrz",
+    "chip-ellipsis": "chip-ellipsis-AW26fc",
+    chipEllipsis: "chip-ellipsis-AW26fc"
+};
+export { MultiSelect_module as default };

package/dist/forms/multi-select/MultiSelect_module.css

@@ -0,0 +1,13 @@
+.chip-container-VYPHrz {
+  flex-wrap: nowrap;
+  gap: 8px;
+  display: flex;
+  overflow: hidden;
+}
+
+.chip-ellipsis-AW26fc {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+

package/dist/forms/select/Select.d.ts

@@ -1,25 +1,24 @@
-import './Select.scss';
-import { type ComponentPropsWithoutRef, type Ref } from 'react';
-import type { SelectConfiguration } from '../../utils/types';
-import type { SelectOptionType } from './select-option/SelectOption';
-export interface SelectProps<T> extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+import type { ReactNode } from 'react';
+import { type Ref } from 'react';
+import type { ComponentBase } from '../../utils/types';
+export interface SelectOption<T> {
+    readonly data: T;
+    readonly label: ReactNode;
+    readonly disabled?: boolean;
+}
+export interface SelectProps<T> extends ComponentBase {
     readonly defaultValue?: T;
-    readonly defaultOpen?: boolean;
-    readonly open?: boolean;
     readonly value?: T;
     readonly label?: string;
-    readonly options?: SelectOptionType<T>[];
-    readonly required?: boolean;
+    readonly options?: SelectOption<T>[];
     readonly onChange?: (value: T) => void;
-    readonly config?: SelectConfiguration;
     readonly disabled?: boolean;
     readonly name?: string;
     readonly hint?: string;
     readonly error?: string;
-    readonly onOpenChange?: (value: boolean) => void;
-    readonly renderLabelContent?: (label?: string | string[]) => JSX.Element;
+    readonly placeholder?: string;
 }
-declare function SelectComponent<T>({ defaultValue, open, defaultOpen, value: controlled, label, options, onChange, required, config, disabled, name, id, children, hint, error, onOpenChange, renderLabelContent, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function SelectComponent<T>({ defaultValue, value: controlled, label, options, onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare const Select: <T>(props: SelectProps<T> & {
     ref?: Ref<HTMLDivElement>;
 }) => ReturnType<typeof SelectComponent>;

package/dist/forms/select/Select.js

@@ -1,94 +1,86 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import "./Select.css";
-import { forwardRef, useRef } from "react";
-import react_dom from "react-dom";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef, useMemo } from "react";
 import { useControlled } from "../../utils/useControlled.js";
-import { useForkRef } from "../../utils/useForkRef.js";
-import { SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper } from "./internal/index.js";
-import { HiddenInput } from "./internal/HiddenInput.js";
-import { getChildren } from "./internal/utils.js";
-function SelectComponent({ defaultValue = '', open, defaultOpen = false, value: controlled, label, options, onChange, required = false, config, disabled, name, id, children, hint, error, onOpenChange, renderLabelContent, ...props }, ref) {
+import { useId } from "../../utils/useId.js";
+function SelectComponent({ defaultValue = '', value: controlled, label, options = [], onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }, ref) {
+    const id = useId(idProp);
+    const labelId = `${id}-label`;
     const [value, setValue] = useControlled({
         controlled,
         default: defaultValue,
         onChange
     });
-    const [focused, setFocused] = useControlled({
-        controlled: open,
-        default: defaultOpen,
-        onChange: onOpenChange
-    });
-    const buttonEl = useRef(null);
-    const usedOptions = options ?? getChildren(children).childrenList.map((child)=>child.props.option);
-    const innerRef = useRef(null);
-    const combinedRef = useForkRef(ref, innerRef);
-    const multiple = Array.isArray(value);
-    const refocusButton = ()=>{
-        setFocused(false);
-        buttonEl?.current?.focus();
-    };
-    const handleOptionChange = (newOption)=>{
-        let newValue = newOption.data;
-        if (Array.isArray(value)) newValue = value.includes(newValue) ? value.filter((item)=>item !== newValue) : [
-            ...value,
-            newValue
-        ];
-        setValue(newValue);
-        if (!multiple) refocusButton();
-    };
-    const removeChip = (chipLabel)=>{
-        const chipOption = usedOptions.find((option)=>option.label === chipLabel);
-        if (chipOption) handleOptionChange(chipOption);
-    };
-    const selectedLabel = multiple ? usedOptions.filter((option)=>value.includes(option.data))?.map((option)=>option.label) : usedOptions.find((option)=>option.data === value)?.label;
-    return /*#__PURE__*/ jsxs(SelectWrapper, {
+    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
+        options,
+        value
+    ]);
+    function handleChange(option) {
+        if (!option || option.disabled) return;
+        setValue(option.data);
+    }
+    return /*#__PURE__*/ jsx(Listbox, {
+        value: selectedOption ?? null,
+        onChange: handleChange,
         disabled: disabled,
-        ref: combinedRef,
-        ...props,
-        children: [
-            /*#__PURE__*/ jsx(HiddenInput, {
-                onChange: handleOptionChange,
-                options: usedOptions,
-                value: value
-            }),
-            /*#__PURE__*/ jsx(SelectButton, {
-                ref: buttonEl,
-                onToggle: ()=>setFocused((prev)=>!prev),
-                error: error,
-                disabled: disabled,
-                focused: focused,
-                required: required,
-                onChipClick: removeChip,
-                label: selectedLabel,
-                renderLabelContent: renderLabelContent
-            }),
-            /*#__PURE__*/ jsx(SelectLabel, {
-                hideLabel: config?.hideLabel,
-                label: label,
-                id: id
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-select-underline"
-            }),
-            hint && !error && /*#__PURE__*/ jsx("div", {
-                className: "fwe-select-description",
-                children: hint
-            }),
-            error && /*#__PURE__*/ jsx("div", {
-                className: "fwe-select-invalid",
-                children: error
+        name: name,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames(className, 'fwe-select-wrapper', {
+                'fwe-disabled': disabled
             }),
-            focused && /*#__PURE__*/ react_dom.createPortal(/*#__PURE__*/ jsx(SelectOptionsContainer, {
-                multiple: multiple,
-                ref: innerRef,
-                config: config,
-                onClose: refocusButton,
-                onOptionChange: handleOptionChange,
-                options: options,
-                label: selectedLabel,
-                children: children
-            }), document.body)
-        ]
+            ref: ref,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(ListboxButton, {
+                    className: classnames('fwe-select', {
+                        'fwe-invalid': error
+                    }),
+                    id: id,
+                    "aria-labelledby": label ? labelId : void 0,
+                    disabled: disabled,
+                    children: selectedOption ? selectedOption.label : placeholder ?? ''
+                }),
+                /*#__PURE__*/ jsx("label", {
+                    className: "fwe-select-label",
+                    id: labelId,
+                    htmlFor: id,
+                    children: label || ''
+                }),
+                /*#__PURE__*/ jsx(ListboxOptions, {
+                    className: "fwe-options-container",
+                    as: "ul",
+                    portal: false,
+                    style: {
+                        minWidth: 'var(--button-width)'
+                    },
+                    anchor: {
+                        to: 'bottom start',
+                        gap: 12,
+                        padding: 8
+                    },
+                    children: options.map((option)=>/*#__PURE__*/ jsx(ListboxOption, {
+                            value: option,
+                            disabled: option.disabled,
+                            as: "li",
+                            className: ({ focus, selected, disabled: isDisabled })=>classnames('fwe-combobox-option', {
+                                    'fwe-selected': selected,
+                                    'fwe-focus': focus,
+                                    'fwe-disabled': isDisabled
+                                }),
+                            children: option.label
+                        }, String(option.data)))
+                }),
+                hint && !error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-description",
+                    children: hint
+                }),
+                error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-invalid",
+                    children: error
+                })
+            ]
+        })
     });
 }
 const Select = /*#__PURE__*/ forwardRef(SelectComponent);

package/dist/index.d.ts

@@ -46,12 +46,12 @@ export { TabPane, type TabPaneProps } from './components/tab/tab-pane/TabPane';
 export { TableHeaderCell, type TableHeaderCellProps, } from './components/table-header-cell/TableHeaderCell';
 export { Checkbox, type CheckboxProps } from './forms/checkbox/Checkbox';
 export { ComboBox, type ComboBoxOption, type ComboBoxProps, } from './forms/combobox/ComboBox';
+export { MultiSelect, type MultiSelectProps, } from './forms/multi-select/MultiSelect';
 export { RadioButton, type RadioButtonProps, } from './forms/radio/RadioButton';
 export { RadioGroup, type RadioGroupProps } from './forms/radio/RadioGroup';
 export { Segment, type SegmentConfiguration, type SegmentProps, } from './forms/segment/Segment';
 export { SegmentControl, type SegmentControlProps, } from './forms/segment/segment-control/SegmentControl';
-export { Select, type SelectProps } from './forms/select/Select';
-export { SelectOption, type SelectOptionProps, type SelectOptionType, } from './forms/select/select-option/SelectOption';
+export { Select, type SelectOption, type SelectProps, } from './forms/select/Select';
 export { Slider, type SliderProps } from './forms/slider/Slider';
 export { Switch, type SwitchProps } from './forms/switch/Switch';
 export { TextArea, type TextAreaProps } from './forms/text-area/TextArea';

package/dist/index.js

@@ -46,15 +46,15 @@ import { TabPane } from "./components/tab/tab-pane/TabPane.js";
 import { TableHeaderCell } from "./components/table-header-cell/TableHeaderCell.js";
 import { Checkbox } from "./forms/checkbox/Checkbox.js";
 import { ComboBox } from "./forms/combobox/ComboBox.js";
+import { MultiSelect } from "./forms/multi-select/MultiSelect.js";
 import { RadioButton } from "./forms/radio/RadioButton.js";
 import { RadioGroup } from "./forms/radio/RadioGroup.js";
 import { Segment } from "./forms/segment/Segment.js";
 import { SegmentControl } from "./forms/segment/segment-control/SegmentControl.js";
 import { Select } from "./forms/select/Select.js";
-import { SelectOption } from "./forms/select/select-option/SelectOption.js";
 import { Slider } from "./forms/slider/Slider.js";
 import { Switch } from "./forms/switch/Switch.js";
 import { TextArea } from "./forms/text-area/TextArea.js";
 import { TextInput } from "./forms/text-input/TextInput.js";
 import { TimePicker } from "./forms/time-picker/TimePicker.js";
-export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, AlertModal, BottomSheet, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ComboBox, ConfirmModal, CustomModal, ImageGallery, ImageGalleryContent, ImageGallerySwiper, ImageGalleryThumbsSwiper, Legend, LoadingIndicator, MobileFlyout, MobileFlyoutItem, MobileFlyoutPage, Pagination, Popover, PopoverMenu, PopoverMenuContext, PopoverMenuItem, Progress, Prompt, RadioButton, RadioGroup, SearchInput, SearchSuggestion, Segment, SegmentControl, Select, SelectOption, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };
+export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, AlertModal, BottomSheet, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ComboBox, ConfirmModal, CustomModal, ImageGallery, ImageGalleryContent, ImageGallerySwiper, ImageGalleryThumbsSwiper, Legend, LoadingIndicator, MobileFlyout, MobileFlyoutItem, MobileFlyoutPage, MultiSelect, Pagination, Popover, PopoverMenu, PopoverMenuContext, PopoverMenuItem, Progress, Prompt, RadioButton, RadioGroup, SearchInput, SearchSuggestion, Segment, SegmentControl, Select, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "9.0.1-dev.772",
+  "version": "9.0.1-dev.776",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",