@helpwave/hightide 0.1.37 → 0.1.39

package/dist/components/dialog/ThemeDialog.js

@@ -36,7 +36,6 @@ module.exports = __toCommonJS(ThemeDialog_exports);
 // src/components/dialog/Dialog.tsx
 var import_react7 = require("react");
 var import_react8 = require("react");
-var import_react9 = require("react");
 var import_clsx2 = __toESM(require("clsx"));
 var import_lucide_react = require("lucide-react");
 
@@ -701,15 +700,18 @@ var Dialog = ({
   description,
   isModal = true,
   onClose,
-  className,
   backgroundClassName,
   position = "center",
-  isAnimated = true
+  isAnimated = true,
+  containerClassName,
+  ...props
 }) => {
   const translation = useTranslation([formTranslation]);
   const [visible, setVisible] = (0, import_react8.useState)(isOpen);
-  const ref = (0, import_react9.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const generatedId = (0, import_react7.useId)();
+  const id = props.id ?? generatedId;
+  const ref = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     if (isOpen) {
       setVisible(true);
     } else {
@@ -734,14 +736,16 @@ var Dialog = ({
     none: ""
   };
   const positionStyle = positionMap[position];
+  if (!visible) return;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id: `dialog-container-${id}`, className: (0, import_clsx2.default)("fixed inset-0 h-screen w-screen", containerClassName), children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
+          id: `dialog-background-${id}`,
           hidden: !visible,
           className: (0, import_clsx2.default)(
-            "fixed inset-0 h-screen w-screen bg-overlay-shadow z-100",
+            "fixed inset-0 h-screen w-screen bg-overlay-shadow",
             {
               "motion-safe:animate-fade-in": isOpen,
               "motion-safe:animate-fade-out": !isOpen
@@ -760,6 +764,8 @@ var Dialog = ({
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
+          ...props,
+          id: `dialog-${id}`,
           ref,
           hidden: !visible,
           onKeyDown: (event) => {
@@ -773,13 +779,13 @@ var Dialog = ({
             }
           },
           className: (0, import_clsx2.default)(
-            "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)] z-100",
+            "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)]",
             {
               "motion-safe:animate-pop-in": isOpen,
               "motion-safe:animate-pop-out": !isOpen
             },
             positionStyle,
-            className
+            props.className
           ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "typography-title-lg mr-8", children: titleElement }),
@@ -818,7 +824,7 @@ var import_lucide_react4 = require("lucide-react");
 var import_clsx6 = __toESM(require("clsx"));
 
 // src/theming/useTheme.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
@@ -845,9 +851,9 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react10.createContext)(null);
+var ThemeContext = (0, import_react9.createContext)(null);
 var useTheme = () => {
-  const context = (0, import_react10.useContext)(ThemeContext);
+  const context = (0, import_react9.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
   }
@@ -855,19 +861,19 @@ var useTheme = () => {
 };
 
 // src/components/user-action/select/Select.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_clsx5 = __toESM(require("clsx"));
 
 // src/components/layout/Expandable.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_clsx3 = __toESM(require("clsx"));
 
 // src/hooks/useOverwritableState.ts
-var import_react11 = require("react");
+var import_react10 = require("react");
 var useOverwritableState = (initialValue, onChange) => {
-  const [state, setState] = (0, import_react11.useState)(initialValue);
-  (0, import_react11.useEffect)(() => {
+  const [state, setState] = (0, import_react10.useState)(initialValue);
+  (0, import_react10.useEffect)(() => {
     setState(initialValue);
   }, [initialValue]);
   const onChangeWrapper = (action) => {
@@ -893,7 +899,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
     }
   );
 };
-var Expandable = (0, import_react12.forwardRef)(function Expandable2({
+var Expandable = (0, import_react11.forwardRef)(function Expandable2({
   children,
   id: providedId,
   label,
@@ -907,9 +913,9 @@ var Expandable = (0, import_react12.forwardRef)(function Expandable2({
   contentClassName,
   contentExpandedClassName
 }, ref) {
-  const defaultIcon = (0, import_react12.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
+  const defaultIcon = (0, import_react11.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
-  const generatedId = (0, import_react12.useId)();
+  const generatedId = (0, import_react11.useId)();
   const id = providedId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
@@ -964,7 +970,7 @@ var Expandable = (0, import_react12.forwardRef)(function Expandable2({
     }
   );
 });
-var ExpandableUncontrolled = (0, import_react12.forwardRef)(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = (0, import_react11.forwardRef)(function ExpandableUncontrolled2({
   isExpanded,
   onChange,
   ...props
@@ -1053,7 +1059,7 @@ var Chip = ({
 };
 
 // src/hooks/useFloatingElement.ts
-var import_react13 = require("react");
+var import_react12 = require("react");
 
 // src/utils/math.ts
 var clamp = (value, range = [0, 1]) => {
@@ -1116,9 +1122,9 @@ function useFloatingElement({
   screenPadding = 16,
   gap = 4
 }) {
-  const [style, setStyle] = (0, import_react13.useState)();
+  const [style, setStyle] = (0, import_react12.useState)();
   const isMounted = useIsMounted();
-  const calculate = (0, import_react13.useCallback)(() => {
+  const calculate = (0, import_react12.useCallback)(() => {
     const containerRect = containerRef.current.getBoundingClientRect();
     const windowRect = windowRef?.current.getBoundingClientRect() ?? {
       top: 0,
@@ -1148,14 +1154,14 @@ function useFloatingElement({
   }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
   const height = containerRef.current?.getBoundingClientRect().height;
   const width = containerRef.current?.getBoundingClientRect().width;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (active && isMounted) {
       calculate();
     } else {
       setStyle(void 0);
     }
   }, [calculate, active, isMounted, height, width]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     window.addEventListener("resize", calculate);
     let timeout;
     if (isPolling) {
@@ -1175,11 +1181,11 @@ function useFloatingElement({
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var defaultToggleOpenOptions = {
-  highlightStartPosition: "first"
+  highlightStartPositionBehavior: "first"
 };
-var SelectContext = (0, import_react14.createContext)(null);
+var SelectContext = (0, import_react13.createContext)(null);
 function useSelectContext() {
-  const ctx = (0, import_react14.useContext)(SelectContext);
+  const ctx = (0, import_react13.useContext)(SelectContext);
   if (!ctx) {
     throw new Error("SelectContext must be used within a ListBoxPrimitive");
   }
@@ -1198,47 +1204,62 @@ var SelectRoot = ({
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
-  const [options, setOptions] = (0, import_react14.useState)([]);
-  const triggerRef = (0, import_react14.useRef)(null);
-  const generatedId = (0, import_react14.useId)();
+  const triggerRef = (0, import_react13.useRef)(null);
+  const generatedId = (0, import_react13.useId)();
   const usedId = id ?? generatedId;
-  const [internalState, setInternalState] = (0, import_react14.useState)({
-    isOpen
+  const [internalState, setInternalState] = (0, import_react13.useState)({
+    isOpen,
+    options: []
   });
-  const selectedValues = isMultiSelect ? values ?? [] : [value].filter(Boolean);
+  const selectedValues = (0, import_react13.useMemo)(
+    () => isMultiSelect ? values ?? [] : [value].filter(Boolean),
+    [isMultiSelect, value, values]
+  );
+  const selectedOptions = (0, import_react13.useMemo)(
+    () => selectedValues.map((value2) => internalState.options.find((option) => value2 === option.value)).filter(Boolean),
+    [selectedValues, internalState.options]
+  );
   const state = {
     ...internalState,
     id: usedId,
     disabled,
     invalid,
     value: selectedValues,
-    options,
-    selectedOptions: selectedValues.map((value2) => options.find((option) => value2 === option.value)).filter(Boolean)
+    selectedOptions
   };
   const config = {
     isMultiSelect,
     iconAppearance
   };
-  const registerItem = (0, import_react14.useCallback)((item) => {
-    setOptions((prev) => {
-      const updated = [...prev, item];
-      updated.sort((a, b) => {
+  const registerItem = (0, import_react13.useCallback)((item) => {
+    setInternalState((prev) => {
+      const updatedOptions = [...prev.options, item];
+      updatedOptions.sort((a, b) => {
         const aEl = a.ref.current;
         const bEl = b.ref.current;
         if (!aEl || !bEl) return 0;
         return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
       });
-      return updated;
+      return {
+        ...prev,
+        options: updatedOptions
+      };
     });
   }, []);
-  const unregisterItem = (0, import_react14.useCallback)((value2) => {
-    setOptions((prev) => prev.filter((i) => i.value !== value2));
+  const unregisterItem = (0, import_react13.useCallback)((value2) => {
+    setInternalState((prev) => {
+      const updatedOptions = prev.options.filter((i) => i.value !== value2);
+      return {
+        ...prev,
+        options: updatedOptions
+      };
+    });
   }, []);
   const toggleSelection = (value2, isSelected) => {
     if (disabled) {
       return;
     }
-    const option = options.find((i) => i.value === value2);
+    const option = state.options.find((i) => i.value === value2);
     if (!option) {
       console.error(`SelectOption with value: ${value2} not found`);
       return;
@@ -1274,42 +1295,47 @@ var SelectRoot = ({
       highlightedValue: value2
     }));
   };
-  const registerTrigger = (0, import_react14.useCallback)((ref) => {
+  const registerTrigger = (0, import_react13.useCallback)((ref) => {
     triggerRef.current = ref.current;
   }, []);
-  const unregisterTrigger = (0, import_react14.useCallback)(() => {
+  const unregisterTrigger = (0, import_react13.useCallback)(() => {
     triggerRef.current = null;
   }, []);
   const toggleOpen = (isOpen2, toggleOpenOptions) => {
-    const { highlightStartPosition } = { ...defaultToggleOpenOptions, ...toggleOpenOptions };
-    let highlightedIndex;
-    if (highlightStartPosition === "first") {
-      highlightedIndex = options.findIndex((option) => !option.disabled);
-    } else {
-      highlightedIndex = options.length - 1 - [...options].reverse().findIndex((option) => !option.disabled);
-    }
-    if (highlightedIndex === -1 || highlightedIndex === options.length) {
-      highlightedIndex = 0;
+    const { highlightStartPositionBehavior } = { ...defaultToggleOpenOptions, ...toggleOpenOptions };
+    let firstSelectedValue;
+    let firstEnabledValue;
+    for (let i = 0; i < state.options.length; i++) {
+      const currentOption = state.options[highlightStartPositionBehavior === "first" ? i : state.options.length - i - 1];
+      if (!currentOption.disabled) {
+        if (!firstEnabledValue) {
+          firstEnabledValue = currentOption.value;
+        }
+        if (selectedValues.includes(currentOption.value)) {
+          firstSelectedValue = currentOption.value;
+          break;
+        }
+      }
     }
     setInternalState((prevState) => ({
       ...prevState,
       isOpen: isOpen2 ?? !prevState.isOpen,
-      highlightedValue: options[highlightedIndex].value
+      highlightedValue: firstSelectedValue ?? firstEnabledValue
     }));
   };
   const moveHighlightedIndex = (delta) => {
-    let highlightedIndex = options.findIndex((value2) => value2.value === internalState.highlightedValue);
+    let highlightedIndex = state.options.findIndex((value2) => value2.value === internalState.highlightedValue);
     if (highlightedIndex === -1) {
       highlightedIndex = 0;
     }
-    const optionLength = options.length;
+    const optionLength = state.options.length;
     const startIndex = (highlightedIndex + delta % optionLength + optionLength) % optionLength;
     const isForward = delta >= 0;
-    let highlightedValue = options[startIndex].value;
-    for (let i = 0; i < options.length; i++) {
+    let highlightedValue = state.options[startIndex].value;
+    for (let i = 0; i < state.options.length; i++) {
       const index = (startIndex + (isForward ? i : -i) + optionLength) % optionLength;
-      if (!options[index].disabled) {
-        highlightedValue = options[index].value;
+      if (!state.options[index].disabled) {
+        highlightedValue = state.options[index].value;
         break;
       }
     }
@@ -1318,11 +1344,11 @@ var SelectRoot = ({
       highlightedValue
     }));
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!internalState.highlightedValue) return;
-    const highlighted = options.find((value2) => value2.value === internalState.highlightedValue);
+    const highlighted = internalState.options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
-      highlighted.ref.current.scrollIntoView({ behavior: "instant", block: "nearest" });
+      highlighted.ref.current?.scrollIntoView({ behavior: "instant", block: "nearest" });
     } else {
       console.error(`SelectRoot: Could not find highlighted value (${internalState.highlightedValue})`);
     }
@@ -1346,14 +1372,14 @@ var SelectRoot = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContext.Provider, { value: contextValue, children });
 };
-var SelectOption = (0, import_react14.forwardRef)(
+var SelectOption = (0, import_react13.forwardRef)(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
     const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
-    const itemRef = (0, import_react14.useRef)(null);
+    const itemRef = (0, import_react13.useRef)(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    (0, import_react14.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       register({
         value,
         label,
@@ -1431,13 +1457,13 @@ var defaultSelectButtonTranslation = {
     clickToSelect: "Zum ausw\xE4hlen dr\xFCcken"
   }
 };
-var SelectButton = (0, import_react14.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
+var SelectButton = (0, import_react13.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
   const translation = useTranslation([defaultSelectButtonTranslation]);
   const { state, trigger } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react14.useEffect)(() => {
+  const innerRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react13.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -1459,12 +1485,12 @@ var SelectButton = (0, import_react14.forwardRef)(function SelectButton2({ place
         props.onKeyDown?.(event);
         switch (event.key) {
           case "ArrowDown":
-            toggleOpen(true, { highlightStartPosition: "first" });
+            toggleOpen(true, { highlightStartPositionBehavior: "first" });
             event.preventDefault();
             event.stopPropagation();
             break;
           case "ArrowUp":
-            toggleOpen(true, { highlightStartPosition: "last" });
+            toggleOpen(true, { highlightStartPositionBehavior: "last" });
             event.preventDefault();
             event.stopPropagation();
             break;
@@ -1510,12 +1536,12 @@ var SelectButton = (0, import_react14.forwardRef)(function SelectButton2({ place
     }
   );
 });
-var SelectChipDisplay = (0, import_react14.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
+var SelectChipDisplay = (0, import_react13.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
   const { state, trigger, item } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react14.useEffect)(() => {
+  const innerRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react13.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -1558,10 +1584,10 @@ var SelectChipDisplay = (0, import_react14.forwardRef)(function SelectChipDispla
             onKeyDown: (event) => {
               switch (event.key) {
                 case "ArrowDown":
-                  toggleOpen(true, { highlightStartPosition: "first" });
+                  toggleOpen(true, { highlightStartPositionBehavior: "first" });
                   break;
                 case "ArrowUp":
-                  toggleOpen(true, { highlightStartPosition: "last" });
+                  toggleOpen(true, { highlightStartPositionBehavior: "last" });
               }
             },
             size: "small",
@@ -1578,14 +1604,15 @@ var SelectChipDisplay = (0, import_react14.forwardRef)(function SelectChipDispla
     }
   );
 });
-var SelectContent = (0, import_react14.forwardRef)(
+var SelectContent = (0, import_react13.forwardRef)(
   function SelectContent2({
     alignment,
     orientation = "vertical",
+    containerClassName,
     ...props
   }, ref) {
-    const innerRef = (0, import_react14.useRef)(null);
-    (0, import_react14.useImperativeHandle)(ref, () => innerRef.current);
+    const innerRef = (0, import_react13.useRef)(null);
+    (0, import_react13.useImperativeHandle)(ref, () => innerRef.current);
     const { trigger, state, config, item } = useSelectContext();
     const position = useFloatingElement({
       active: state.isOpen,
@@ -1598,81 +1625,88 @@ var SelectContent = (0, import_react14.forwardRef)(
       active: state.isOpen && !!position
     });
     return (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "div",
-          {
-            hidden: !state.isOpen,
-            onClick: () => trigger.toggleOpen(false),
-            className: (0, import_clsx5.default)("fixed w-screen h-screen inset-0")
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "ul",
-          {
-            ...props,
-            id: `${state.id}-listbox`,
-            ref: innerRef,
-            hidden: !state.isOpen,
-            onKeyDown: (event) => {
-              switch (event.key) {
-                case "Escape":
-                  trigger.toggleOpen(false);
-                  event.preventDefault();
-                  event.stopPropagation();
-                  break;
-                case match(orientation, {
-                  vertical: "ArrowDown",
-                  horizontal: "ArrowUp"
-                }):
-                  item.moveHighlightedIndex(1);
-                  event.preventDefault();
-                  break;
-                case match(orientation, {
-                  vertical: "ArrowUp",
-                  horizontal: "ArrowDown"
-                }):
-                  item.moveHighlightedIndex(-1);
-                  event.preventDefault();
-                  break;
-                case "Home":
-                  event.preventDefault();
-                  break;
-                case "End":
-                  event.preventDefault();
-                  break;
-                case "Enter":
-                // Fall through
-                case " ":
-                  if (state.highlightedValue) {
-                    item.toggleSelection(state.highlightedValue);
-                    if (!config.isMultiSelect) {
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          id: `select-container-${state.id}`,
+          className: (0, import_clsx5.default)("fixed inset-0 w-screen h-screen", containerClassName),
+          hidden: !state.isOpen,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                id: `select-background-${state.id}`,
+                onClick: () => trigger.toggleOpen(false),
+                className: (0, import_clsx5.default)("fixed inset-0 w-screen h-screen")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "ul",
+              {
+                ...props,
+                id: `${state.id}-listbox`,
+                ref: innerRef,
+                onKeyDown: (event) => {
+                  switch (event.key) {
+                    case "Escape":
                       trigger.toggleOpen(false);
-                    }
-                    event.preventDefault();
+                      event.preventDefault();
+                      event.stopPropagation();
+                      break;
+                    case match(orientation, {
+                      vertical: "ArrowDown",
+                      horizontal: "ArrowUp"
+                    }):
+                      item.moveHighlightedIndex(1);
+                      event.preventDefault();
+                      break;
+                    case match(orientation, {
+                      vertical: "ArrowUp",
+                      horizontal: "ArrowDown"
+                    }):
+                      item.moveHighlightedIndex(-1);
+                      event.preventDefault();
+                      break;
+                    case "Home":
+                      event.preventDefault();
+                      break;
+                    case "End":
+                      event.preventDefault();
+                      break;
+                    case "Enter":
+                    // Fall through
+                    case " ":
+                      if (state.highlightedValue) {
+                        item.toggleSelection(state.highlightedValue);
+                        if (!config.isMultiSelect) {
+                          trigger.toggleOpen(false);
+                        }
+                        event.preventDefault();
+                      }
+                      break;
                   }
-                  break;
+                },
+                className: (0, import_clsx5.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
+                style: {
+                  opacity: position ? void 0 : 0,
+                  position: "fixed",
+                  ...position
+                },
+                role: "listbox",
+                "aria-multiselectable": config.isMultiSelect,
+                "aria-orientation": orientation,
+                tabIndex: position ? 0 : void 0,
+                children: props.children
               }
-            },
-            className: (0, import_clsx5.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
-            style: {
-              opacity: position ? void 0 : 0,
-              position: "fixed",
-              ...position
-            },
-            role: "listbox",
-            "aria-multiselectable": config.isMultiSelect,
-            "aria-orientation": orientation,
-            tabIndex: position ? 0 : void 0,
-            children: props.children
-          }
-        )
-      ] }),
+            )
+          ]
+        }
+      ),
       document.body
     );
   }
 );
-var Select = (0, import_react14.forwardRef)(function Select2({
+var Select = (0, import_react13.forwardRef)(function Select2({
   children,
   contentPanelProps,
   buttonProps,
@@ -1694,7 +1728,7 @@ var Select = (0, import_react14.forwardRef)(function Select2({
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var SelectUncontrolled = (0, import_react14.forwardRef)(function SelectUncontrolled2({
+var SelectUncontrolled = (0, import_react13.forwardRef)(function SelectUncontrolled2({
   value: initialValue,
   onValueChanged,
   ...props
@@ -1710,7 +1744,7 @@ var SelectUncontrolled = (0, import_react14.forwardRef)(function SelectUncontrol
     }
   );
 });
-var MultiSelect = (0, import_react14.forwardRef)(function MultiSelect2({
+var MultiSelect = (0, import_react13.forwardRef)(function MultiSelect2({
   children,
   contentPanelProps,
   buttonProps,
@@ -1721,7 +1755,7 @@ var MultiSelect = (0, import_react14.forwardRef)(function MultiSelect2({
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectUncontrolled = (0, import_react14.forwardRef)(function MultiSelectUncontrolled2({
+var MultiSelectUncontrolled = (0, import_react13.forwardRef)(function MultiSelectUncontrolled2({
   values: initialValues,
   onValuesChanged,
   ...props
@@ -1737,7 +1771,7 @@ var MultiSelectUncontrolled = (0, import_react14.forwardRef)(function MultiSelec
     }
   );
 });
-var MultiSelectChipDisplay = (0, import_react14.forwardRef)(function MultiSelectChipDisplay2({
+var MultiSelectChipDisplay = (0, import_react13.forwardRef)(function MultiSelectChipDisplay2({
   children,
   contentPanelProps,
   chipDisplayProps,
@@ -1748,7 +1782,7 @@ var MultiSelectChipDisplay = (0, import_react14.forwardRef)(function MultiSelect
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectChipDisplayUncontrolled = (0, import_react14.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
+var MultiSelectChipDisplayUncontrolled = (0, import_react13.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
   values: initialValues,
   onValuesChanged,
   ...props