xmlui 0.10.24 → 0.10.25

package/dist/lib/{index-DoIVkz5T.mjs → index-CCEPGw_x.mjs}

@@ -29,12 +29,10 @@ import { RenderPropSticky } from "react-sticky-el";
 import * as dropzone from "react-dropzone";
 import toast, { Toaster, ToastBar } from "react-hot-toast";
 import memoizeOne from "memoize-one";
-import { Popover, PopoverTrigger, Portal as Portal$1, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
-import { FocusScope } from "@radix-ui/react-focus-scope";
-import { Item as Item$1, ItemText, ItemIndicator, Root, Trigger, Portal, Content, ScrollUpButton, Viewport, ScrollDownButton, SelectItemText } from "@radix-ui/react-select";
+import { Popover, PopoverTrigger, Portal, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import { DayPicker } from "react-day-picker";
-import { Root as Root$1, Track, Range, Thumb } from "@radix-ui/react-slider";
+import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -44,7 +42,7 @@ import EmojiPicker, { EmojiStyle } from "emoji-picker-react";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import { useSpring, useInView, animated } from "@react-spring/web";
 import Papa from "papaparse";
-import { Root as Root$2, List, Trigger as Trigger$1, Content as Content$1 } from "@radix-ui/react-tabs";
+import { Root as Root$1, List, Trigger, Content } from "@radix-ui/react-tabs";
 import scrollIntoView from "scroll-into-view-if-needed";
 import * as RAccordion from "@radix-ui/react-accordion";
 import useEmblaCarousel from "embla-carousel-react";
@@ -751,18 +749,19 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 const themeVars$11 = `'{"textColor-FormItemLabel": "var(--xmlui-textColor-FormItemLabel)", "fontFamily-FormItemLabel": "var(--xmlui-fontFamily-FormItemLabel)", "fontSize-FormItemLabel": "var(--xmlui-fontSize-FormItemLabel)", "fontWeight-FormItemLabel": "var(--xmlui-fontWeight-FormItemLabel)", "fontStyle-FormItemLabel": "var(--xmlui-fontStyle-FormItemLabel)", "textTransform-FormItemLabel": "var(--xmlui-textTransform-FormItemLabel)", "textColor-FormItemLabel-required": "var(--xmlui-textColor-FormItemLabel-required)", "fontSize-FormItemLabel-required": "var(--xmlui-fontSize-FormItemLabel-required)", "fontWeight-FormItemLabel-required": "var(--xmlui-fontWeight-FormItemLabel-required)", "fontStyle-FormItemLabel-required": "var(--xmlui-fontStyle-FormItemLabel-required)", "textTransform-FormItemLabel-required": "var(--xmlui-textTransform-FormItemLabel-required)", "textColor-FormItemLabel-requiredMark": "var(--xmlui-textColor-FormItemLabel-requiredMark)"}'`;
-const container$3 = "_container_1pi4w_14";
-const top$1 = "_top_1pi4w_21";
-const end = "_end_1pi4w_26";
-const bottom$1 = "_bottom_1pi4w_32";
-const start = "_start_1pi4w_37";
-const shrinkToLabel = "_shrinkToLabel_1pi4w_43";
-const inputLabel = "_inputLabel_1pi4w_46";
-const disabled$c = "_disabled_1pi4w_59";
-const labelBreak = "_labelBreak_1pi4w_63";
-const required = "_required_1pi4w_68";
-const requiredMark = "_requiredMark_1pi4w_75";
-const itemWithLabel = "_itemWithLabel_1pi4w_79";
+const container$3 = "_container_1bx6o_14";
+const top$1 = "_top_1bx6o_21";
+const end = "_end_1bx6o_26";
+const bottom$1 = "_bottom_1bx6o_32";
+const start = "_start_1bx6o_37";
+const shrinkToLabel = "_shrinkToLabel_1bx6o_43";
+const inputLabel = "_inputLabel_1bx6o_46";
+const disabled$c = "_disabled_1bx6o_59";
+const labelBreak = "_labelBreak_1bx6o_63";
+const required = "_required_1bx6o_68";
+const requiredMark = "_requiredMark_1bx6o_75";
+const itemWithLabel = "_itemWithLabel_1bx6o_79";
+const helperTextContainer = "_helperTextContainer_1bx6o_85";
 const styles$1k = {
   themeVars: themeVars$11,
   container: container$3,
@@ -776,7 +775,8 @@ const styles$1k = {
   labelBreak,
   required,
   requiredMark,
-  itemWithLabel
+  itemWithLabel,
+  helperTextContainer
 };
 const themeVars$10 = `'{"size-Spinner": "var(--xmlui-size-Spinner)", "thickness-Spinner": "var(--xmlui-thickness-Spinner)", "borderColor-Spinner": "var(--xmlui-borderColor-Spinner)"}'`;
 const fullScreenSpinnerWrapper = "_fullScreenSpinnerWrapper_b1pgc_50";
@@ -4671,6 +4671,7 @@ const AppLayoutContext = createContext(null);
 function useAppLayoutContext() {
   return useContext(AppLayoutContext);
 }
+const PART_HAMBURGER = "hamburger";
 const defaultProps$1a = {
   showLogo: true,
   showNavPanelIf: true
@@ -4721,6 +4722,7 @@ const AppHeader = ({
         hasRegisteredNavPanel && showNavPanelIf && /* @__PURE__ */ jsx(
           Button,
           {
+            "data-part-id": PART_HAMBURGER,
             onClick: toggleDrawer,
             icon: /* @__PURE__ */ jsx(Icon, { name: "hamburger" }),
             variant: "ghost",
@@ -5555,13 +5557,18 @@ const ExpandableNavGroup = forwardRef(function ExpandableNavGroup2({
     ...style2,
     "--nav-link-level": layoutIsVertical ? level : 0
   };
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setExpanded((prev) => !prev);
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       NavLink,
       {
         ...rest,
         style: toggleStyle,
-        onClick: () => setExpanded((prev) => !prev),
+        onClick: handleClick,
         icon: icon2,
         to,
         disabled: disabled2,
@@ -6034,7 +6041,7 @@ const themeVars$N = `'{"backgroundColor-Tree-row--selected": "var(--xmlui-backgr
 const wrapper$j = "_wrapper_eyur1_14";
 const rowWrapper = "_rowWrapper_eyur1_22";
 const selected$2 = "_selected_eyur1_39";
-const focused$3 = "_focused_eyur1_46";
+const focused$2 = "_focused_eyur1_46";
 const gutter = "_gutter_eyur1_56";
 const toggleWrapper = "_toggleWrapper_eyur1_63";
 const hidden$2 = "_hidden_eyur1_72";
@@ -6046,7 +6053,7 @@ const styles$16 = {
   wrapper: wrapper$j,
   rowWrapper,
   selected: selected$2,
-  focused: focused$3,
+  focused: focused$2,
   gutter,
   toggleWrapper,
   hidden: hidden$2,
@@ -11740,7 +11747,7 @@ const showInHeader = "_showInHeader_1ylgd_138";
 const selected$1 = "_selected_1ylgd_142";
 const allSelected = "_allSelected_1ylgd_142";
 const cellContent = "_cellContent_1ylgd_173";
-const focused$2 = "_focused_1ylgd_200";
+const focused$1 = "_focused_1ylgd_200";
 const disabled$8 = "_disabled_1ylgd_212";
 const noBottomBorder = "_noBottomBorder_1ylgd_219";
 const noRows$1 = "_noRows_1ylgd_244";
@@ -11769,7 +11776,7 @@ const styles$12 = {
   selected: selected$1,
   allSelected,
   cellContent,
-  focused: focused$2,
+  focused: focused$1,
   disabled: disabled$8,
   noBottomBorder,
   noRows: noRows$1,
@@ -15709,6 +15716,7 @@ const modalViewComponentRenderer = createComponentRenderer(
   ModalDialogMd,
   ({
     node,
+    contextVars,
     extractValue,
     className,
     renderChild: renderChild2,
@@ -15732,7 +15740,11 @@ const modalViewComponentRenderer = createComponentRenderer(
                 node,
                 renderChild: renderChild2,
                 layoutContext: { _insideModalFrame: true },
-                contextVars: { $param: openParams == null ? void 0 : openParams[0], $params: openParams }
+                contextVars: {
+                  ...contextVars,
+                  $param: openParams == null ? void 0 : openParams[0],
+                  $params: openParams
+                }
               }
             );
           }
@@ -20533,72 +20545,48 @@ function useLongPress(elementRef, action2, delay2 = 500) {
     };
   }, [elementRef, action2, delay2]);
 }
-const SelectContext = createContext({
-  value: null,
-  onChange: (selectedValue) => {
-  },
-  setOpen: (open) => {
-  },
-  setSelectedIndex: (index) => {
-  },
-  options: /* @__PURE__ */ new Set(),
-  optionRenderer: void 0
-});
-function useSelect() {
-  return useContext(SelectContext);
-}
-const OptionContext = createContext({
-  onOptionAdd: () => {
-  },
-  onOptionRemove: () => {
-  }
-});
-function useOption() {
-  return useContext(OptionContext);
-}
 const themeVars$p = `'{"border-Select": "var(--xmlui-border-Select)", "borderHorizontal-Select": "var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select))", "borderVertical-Select": "var(--xmlui-borderVertical-Select, var(--xmlui-border-Select))", "borderLeft-Select": "var(--xmlui-borderLeft-Select, var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select)))", "borderRight-Select": "var(--xmlui-borderRight-Select, var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select)))", "borderTop-Select": "var(--xmlui-borderTop-Select, var(--xmlui-borderVertical-Select, var(--xmlui-border-Select)))", "borderBottom-Select": "var(--xmlui-borderBottom-Select, var(--xmlui-borderVertical-Select, var(--xmlui-border-Select)))", "borderWidth-Select": "var(--xmlui-borderWidth-Select)", "borderHorizontalWidth-Select": "var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select))", "borderLeftWidth-Select": "var(--xmlui-borderLeftWidth-Select, var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderRightWidth-Select": "var(--xmlui-borderRightWidth-Select, var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderVerticalWidth-Select": "var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select))", "borderTopWidth-Select": "var(--xmlui-borderTopWidth-Select, var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderBottomWidth-Select": "var(--xmlui-borderBottomWidth-Select, var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderStyle-Select": "var(--xmlui-borderStyle-Select)", "borderHorizontalStyle-Select": "var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select))", "borderLeftStyle-Select": "var(--xmlui-borderLeftStyle-Select, var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderRightStyle-Select": "var(--xmlui-borderRightStyle-Select, var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderVerticalStyle-Select": "var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select))", "borderTopStyle-Select": "var(--xmlui-borderTopStyle-Select, var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderBottomStyle-Select": "var(--xmlui-borderBottomStyle-Select, var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderColor-Select": "var(--xmlui-borderColor-Select)", "borderHorizontalColor-Select": "var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select))", "borderLeftColor-Select": "var(--xmlui-borderLeftColor-Select, var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select)))", "borderRightColor-Select": "var(--xmlui-borderRightColor-Select, var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select)))", "borderVerticalColor-Select": "var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select))", "borderTopColor-Select": "var(--xmlui-borderTopColor-Select, var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select)))", "borderBottomColor-Select": "var(--xmlui-borderBottomColor-Select, var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select)))", "borderStartStartRadius-Select": "var(--xmlui-borderStartStartRadius-Select, var(--xmlui-borderRadius-Select))", "borderStartEndRadius-Select": "var(--xmlui-borderStartEndRadius-Select, var(--xmlui-borderRadius-Select))", "borderEndStartRadius-Select": "var(--xmlui-borderEndStartRadius-Select, var(--xmlui-borderRadius-Select))", "borderEndEndRadius-Select": "var(--xmlui-borderEndEndRadius-Select, var(--xmlui-borderRadius-Select))", "padding-Select": "var(--xmlui-padding-Select)", "paddingHorizontal-Select": "var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select))", "paddingVertical-Select": "var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select))", "paddingLeft-Select": "var(--xmlui-paddingLeft-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingRight-Select": "var(--xmlui-paddingRight-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingTop-Select": "var(--xmlui-paddingTop-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "paddingBottom-Select": "var(--xmlui-paddingBottom-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "padding-item-Select": "var(--xmlui-padding-item-Select)", "paddingHorizontal-item-Select": "var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select))", "paddingVertical-item-Select": "var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select))", "paddingLeft-item-Select": "var(--xmlui-paddingLeft-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingRight-item-Select": "var(--xmlui-paddingRight-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingTop-item-Select": "var(--xmlui-paddingTop-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "paddingBottom-item-Select": "var(--xmlui-paddingBottom-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "Input:borderRadius-Select-default": "var(--xmlui-borderRadius-Select-default)", "Input:borderColor-Select-default": "var(--xmlui-borderColor-Select-default)", "Input:borderWidth-Select-default": "var(--xmlui-borderWidth-Select-default)", "Input:borderStyle-Select-default": "var(--xmlui-borderStyle-Select-default)", "Input:fontSize-Select-default": "var(--xmlui-fontSize-Select-default)", "Input:backgroundColor-Select-default": "var(--xmlui-backgroundColor-Select-default)", "Input:boxShadow-Select-default": "var(--xmlui-boxShadow-Select-default)", "Input:textColor-Select-default": "var(--xmlui-textColor-Select-default)", "Input:borderColor-Select-default--hover": "var(--xmlui-borderColor-Select-default--hover)", "Input:backgroundColor-Select-default--hover": "var(--xmlui-backgroundColor-Select-default--hover)", "Input:boxShadow-Select-default--hover": "var(--xmlui-boxShadow-Select-default--hover)", "Input:textColor-Select-default--hover": "var(--xmlui-textColor-Select-default--hover)", "Input:outlineWidth-Select-default--focus": "var(--xmlui-outlineWidth-Select-default--focus)", "Input:outlineColor-Select-default--focus": "var(--xmlui-outlineColor-Select-default--focus)", "Input:outlineStyle-Select-default--focus": "var(--xmlui-outlineStyle-Select-default--focus)", "Input:outlineOffset-Select-default--focus": "var(--xmlui-outlineOffset-Select-default--focus)", "Input:textColor-placeholder-Select-default": "var(--xmlui-textColor-placeholder-Select-default)", "Input:fontSize-placeholder-Select-default": "var(--xmlui-fontSize-placeholder-Select-default)", "Input:borderRadius-Select-error": "var(--xmlui-borderRadius-Select-error)", "Input:borderColor-Select-error": "var(--xmlui-borderColor-Select-error)", "Input:borderWidth-Select-error": "var(--xmlui-borderWidth-Select-error)", "Input:borderStyle-Select-error": "var(--xmlui-borderStyle-Select-error)", "Input:fontSize-Select-error": "var(--xmlui-fontSize-Select-error)", "Input:backgroundColor-Select-error": "var(--xmlui-backgroundColor-Select-error)", "Input:boxShadow-Select-error": "var(--xmlui-boxShadow-Select-error)", "Input:textColor-Select-error": "var(--xmlui-textColor-Select-error)", "Input:borderColor-Select-error--hover": "var(--xmlui-borderColor-Select-error--hover)", "Input:backgroundColor-Select-error--hover": "var(--xmlui-backgroundColor-Select-error--hover)", "Input:boxShadow-Select-error--hover": "var(--xmlui-boxShadow-Select-error--hover)", "Input:textColor-Select-error--hover": "var(--xmlui-textColor-Select-error--hover)", "Input:outlineWidth-Select-error--focus": "var(--xmlui-outlineWidth-Select-error--focus)", "Input:outlineColor-Select-error--focus": "var(--xmlui-outlineColor-Select-error--focus)", "Input:outlineStyle-Select-error--focus": "var(--xmlui-outlineStyle-Select-error--focus)", "Input:outlineOffset-Select-error--focus": "var(--xmlui-outlineOffset-Select-error--focus)", "Input:textColor-placeholder-Select-error": "var(--xmlui-textColor-placeholder-Select-error)", "Input:fontSize-placeholder-Select-error": "var(--xmlui-fontSize-placeholder-Select-error)", "Input:borderRadius-Select-warning": "var(--xmlui-borderRadius-Select-warning)", "Input:borderColor-Select-warning": "var(--xmlui-borderColor-Select-warning)", "Input:borderWidth-Select-warning": "var(--xmlui-borderWidth-Select-warning)", "Input:borderStyle-Select-warning": "var(--xmlui-borderStyle-Select-warning)", "Input:fontSize-Select-warning": "var(--xmlui-fontSize-Select-warning)", "Input:backgroundColor-Select-warning": "var(--xmlui-backgroundColor-Select-warning)", "Input:boxShadow-Select-warning": "var(--xmlui-boxShadow-Select-warning)", "Input:textColor-Select-warning": "var(--xmlui-textColor-Select-warning)", "Input:borderColor-Select-warning--hover": "var(--xmlui-borderColor-Select-warning--hover)", "Input:backgroundColor-Select-warning--hover": "var(--xmlui-backgroundColor-Select-warning--hover)", "Input:boxShadow-Select-warning--hover": "var(--xmlui-boxShadow-Select-warning--hover)", "Input:textColor-Select-warning--hover": "var(--xmlui-textColor-Select-warning--hover)", "Input:outlineWidth-Select-warning--focus": "var(--xmlui-outlineWidth-Select-warning--focus)", "Input:outlineColor-Select-warning--focus": "var(--xmlui-outlineColor-Select-warning--focus)", "Input:outlineStyle-Select-warning--focus": "var(--xmlui-outlineStyle-Select-warning--focus)", "Input:outlineOffset-Select-warning--focus": "var(--xmlui-outlineOffset-Select-warning--focus)", "Input:textColor-placeholder-Select-warning": "var(--xmlui-textColor-placeholder-Select-warning)", "Input:fontSize-placeholder-Select-warning": "var(--xmlui-fontSize-placeholder-Select-warning)", "Input:borderRadius-Select-success": "var(--xmlui-borderRadius-Select-success)", "Input:borderColor-Select-success": "var(--xmlui-borderColor-Select-success)", "Input:borderWidth-Select-success": "var(--xmlui-borderWidth-Select-success)", "Input:borderStyle-Select-success": "var(--xmlui-borderStyle-Select-success)", "Input:fontSize-Select-success": "var(--xmlui-fontSize-Select-success)", "Input:backgroundColor-Select-success": "var(--xmlui-backgroundColor-Select-success)", "Input:boxShadow-Select-success": "var(--xmlui-boxShadow-Select-success)", "Input:textColor-Select-success": "var(--xmlui-textColor-Select-success)", "Input:borderColor-Select-success--hover": "var(--xmlui-borderColor-Select-success--hover)", "Input:backgroundColor-Select-success--hover": "var(--xmlui-backgroundColor-Select-success--hover)", "Input:boxShadow-Select-success--hover": "var(--xmlui-boxShadow-Select-success--hover)", "Input:textColor-Select-success--hover": "var(--xmlui-textColor-Select-success--hover)", "Input:outlineWidth-Select-success--focus": "var(--xmlui-outlineWidth-Select-success--focus)", "Input:outlineColor-Select-success--focus": "var(--xmlui-outlineColor-Select-success--focus)", "Input:outlineStyle-Select-success--focus": "var(--xmlui-outlineStyle-Select-success--focus)", "Input:outlineOffset-Select-success--focus": "var(--xmlui-outlineOffset-Select-success--focus)", "Input:textColor-placeholder-Select-success": "var(--xmlui-textColor-placeholder-Select-success)", "Input:fontSize-placeholder-Select-success": "var(--xmlui-fontSize-placeholder-Select-success)", "Input:backgroundColor-Select--disabled": "var(--xmlui-backgroundColor-Select--disabled)", "Input:textColor-Select--disabled": "var(--xmlui-textColor-Select--disabled)", "Input:borderColor-Select--disabled": "var(--xmlui-borderColor-Select--disabled)", "Input:outlineWidth-Select--focus": "var(--xmlui-outlineWidth-Select--focus)", "Input:outlineColor-Select--focus": "var(--xmlui-outlineColor-Select--focus)", "Input:outlineStyle-Select--focus": "var(--xmlui-outlineStyle-Select--focus)", "Input:outlineOffset-Select--focus": "var(--xmlui-outlineOffset-Select--focus)", "Input:textColor-placeholder-Select": "var(--xmlui-textColor-placeholder-Select)", "paddingVertical-Select-badge": "var(--xmlui-paddingVertical-Select-badge)", "paddingHorizontal-Select-badge": "var(--xmlui-paddingHorizontal-Select-badge)", "borderRadius-Select-badge": "var(--xmlui-borderRadius-Select-badge)", "Input:fontSize-Select-badge": "var(--xmlui-fontSize-Select-badge)", "Input:backgroundColor-Select-badge": "var(--xmlui-backgroundColor-Select-badge)", "Input:textColor-Select-badge": "var(--xmlui-textColor-Select-badge)", "Input:backgroundColor-Select-badge--hover": "var(--xmlui-backgroundColor-Select-badge--hover)", "Input:textColor-Select-badge--hover": "var(--xmlui-textColor-Select-badge--hover)", "Input:backgroundColor-Select-badge--active": "var(--xmlui-backgroundColor-Select-badge--active)", "Input:textColor-Select-badge--active": "var(--xmlui-textColor-Select-badge--active)", "Input:backgroundColor-menu-Select": "var(--xmlui-backgroundColor-menu-Select)", "Input:borderRadius-menu-Select": "var(--xmlui-borderRadius-menu-Select)", "Input:boxShadow-menu-Select": "var(--xmlui-boxShadow-menu-Select)", "Input:borderWidth-menu-Select": "var(--xmlui-borderWidth-menu-Select)", "Input:borderColor-menu-Select": "var(--xmlui-borderColor-menu-Select)", "backgroundColor-item-Select": "var(--xmlui-backgroundColor-item-Select)", "backgroundColor-item-Select--active": "var(--xmlui-backgroundColor-item-Select--active)", "backgroundColor-item-Select--hover": "var(--xmlui-backgroundColor-item-Select--hover)", "textColor-item-Select--disabled": "var(--xmlui-textColor-item-Select--disabled)", "opacity-text-item-Select--disabled": "var(--xmlui-opacity-text-item-Select--disabled)", "textColor-indicator-Select": "var(--xmlui-textColor-indicator-Select)"}'`;
-const selectTrigger = "_selectTrigger_1v71t_17";
-const error$9 = "_error_1v71t_54";
-const warning$a = "_warning_1v71t_80";
-const valid$9 = "_valid_1v71t_106";
-const disabled$7 = "_disabled_1v71t_132";
-const focused$1 = "_focused_1v71t_139";
-const placeholder$1 = "_placeholder_1v71t_145";
-const actions$1 = "_actions_1v71t_162";
-const action$1 = "_action_1v71t_162";
-const emptyList = "_emptyList_1v71t_173";
-const badgeListContainer = "_badgeListContainer_1v71t_185";
-const badgeList$1 = "_badgeList_1v71t_185";
-const inputWrapper$1 = "_inputWrapper_1v71t_198";
-const badge$1 = "_badge_1v71t_185";
-const selectContent = "_selectContent_1v71t_233";
-const command$1 = "_command_1v71t_241";
-const commandInputContainer = "_commandInputContainer_1v71t_246";
-const commandInput$1 = "_commandInput_1v71t_246";
-const commandList$1 = "_commandList_1v71t_265";
-const multiSelectOption = "_multiSelectOption_1v71t_272";
-const multiSelectOptionContent = "_multiSelectOptionContent_1v71t_286";
-const highlighted$1 = "_highlighted_1v71t_295";
-const disabledOption$1 = "_disabledOption_1v71t_301";
-const selectValue = "_selectValue_1v71t_316";
-const selectDropdownContent = "_selectDropdownContent_1v71t_331";
-const fadeIn = "_fadeIn_1v71t_1";
-const zoomIn = "_zoomIn_1v71t_1";
-const fadeOut = "_fadeOut_1v71t_1";
-const zoomOut = "_zoomOut_1v71t_1";
-const slideInFromTop = "_slideInFromTop_1v71t_1";
-const slideInFromRight = "_slideInFromRight_1v71t_1";
-const slideInFromLeft = "_slideInFromLeft_1v71t_1";
-const slideInFromBottom = "_slideInFromBottom_1v71t_1";
-const selectViewport = "_selectViewport_1v71t_364";
-const selectScrollUpButton = "_selectScrollUpButton_1v71t_368";
-const selectScrollDownButton = "_selectScrollDownButton_1v71t_376";
-const selectEmpty = "_selectEmpty_1v71t_384";
-const selectOption = "_selectOption_1v71t_397";
-const selectOptionContent = "_selectOptionContent_1v71t_420";
-const selectOptionIndicator = "_selectOptionIndicator_1v71t_434";
-const loading = "_loading_1v71t_444";
-const srOnly = "_srOnly_1v71t_447";
+const selectTrigger = "_selectTrigger_1rbu9_17";
+const error$9 = "_error_1rbu9_54";
+const warning$a = "_warning_1rbu9_80";
+const valid$9 = "_valid_1rbu9_106";
+const disabled$7 = "_disabled_1rbu9_132";
+const placeholder$1 = "_placeholder_1rbu9_145";
+const actions$1 = "_actions_1rbu9_162";
+const action$1 = "_action_1rbu9_162";
+const emptyList = "_emptyList_1rbu9_173";
+const badgeListContainer = "_badgeListContainer_1rbu9_185";
+const badgeList$1 = "_badgeList_1rbu9_185";
+const inputWrapper$1 = "_inputWrapper_1rbu9_198";
+const badge$1 = "_badge_1rbu9_185";
+const selectContent = "_selectContent_1rbu9_233";
+const command$1 = "_command_1rbu9_242";
+const commandInputContainer = "_commandInputContainer_1rbu9_247";
+const commandInput$1 = "_commandInput_1rbu9_247";
+const commandList$1 = "_commandList_1rbu9_266";
+const multiSelectOption = "_multiSelectOption_1rbu9_273";
+const multiSelectOptionContent = "_multiSelectOptionContent_1rbu9_287";
+const highlighted$1 = "_highlighted_1rbu9_296";
+const disabledOption$1 = "_disabledOption_1rbu9_302";
+const selectValue = "_selectValue_1rbu9_317";
+const selectDropdownContent = "_selectDropdownContent_1rbu9_332";
+const fadeIn = "_fadeIn_1rbu9_1";
+const zoomIn = "_zoomIn_1rbu9_1";
+const fadeOut = "_fadeOut_1rbu9_1";
+const zoomOut = "_zoomOut_1rbu9_1";
+const slideInFromTop = "_slideInFromTop_1rbu9_1";
+const slideInFromRight = "_slideInFromRight_1rbu9_1";
+const slideInFromLeft = "_slideInFromLeft_1rbu9_1";
+const slideInFromBottom = "_slideInFromBottom_1rbu9_1";
+const selectViewport = "_selectViewport_1rbu9_365";
+const selectScrollUpButton = "_selectScrollUpButton_1rbu9_369";
+const selectScrollDownButton = "_selectScrollDownButton_1rbu9_377";
+const selectEmpty = "_selectEmpty_1rbu9_385";
+const selectOption = "_selectOption_1rbu9_398";
+const selectOptionContent = "_selectOptionContent_1rbu9_421";
+const selectOptionIndicator = "_selectOptionIndicator_1rbu9_435";
+const loading = "_loading_1rbu9_445";
+const srOnly = "_srOnly_1rbu9_448";
 const styles$J = {
   themeVars: themeVars$p,
   selectTrigger,
@@ -20606,7 +20594,6 @@ const styles$J = {
   warning: warning$a,
   valid: valid$9,
   disabled: disabled$7,
-  focused: focused$1,
   placeholder: placeholder$1,
   actions: actions$1,
   action: action$1,
@@ -20644,57 +20631,20 @@ const styles$J = {
   loading,
   srOnly
 };
-const SelectOption = forwardRef(
-  function SelectOption2(option, ref) {
-    const visibleContentRef = useRef(null);
-    const { value, label: label2, enabled: enabled2 = true, children, className } = option;
-    const { value: selectedValue, optionRenderer } = useSelect();
-    const { onOptionRemove, onOptionAdd } = useOption();
-    const opt = useMemo(() => {
-      return {
-        ...option,
-        label: label2 ?? "",
-        keywords: [label2 ?? ""]
-      };
-    }, [option, label2]);
-    useEffect(() => {
-      onOptionAdd(opt);
-      return () => onOptionRemove(opt);
-    }, [opt, onOptionAdd, onOptionRemove]);
-    return /* @__PURE__ */ jsxs(
-      Item$1,
-      {
-        ref,
-        className: classnames(className, styles$J.selectOption),
-        value,
-        textValue: label2,
-        disabled: !enabled2,
-        onClick: (event) => {
-          event.stopPropagation();
-        },
-        "data-state": selectedValue === value && "checked",
-        children: [
-          /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: /* @__PURE__ */ jsx(ItemText, { children: label2 }) }),
-          children ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles$J.selectOptionContent, ref: visibleContentRef, children }),
-            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$J.selectOptionIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) })
-          ] }) : optionRenderer ? /* @__PURE__ */ jsx("div", { className: styles$J.selectOptionContent, ref: visibleContentRef, children: optionRenderer(
-            {
-              label: label2,
-              value,
-              enabled: enabled2
-            },
-            selectedValue,
-            false
-          ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles$J.selectOptionContent, ref: visibleContentRef, children: label2 }),
-            selectedValue === value && /* @__PURE__ */ jsx(ItemIndicator, { className: styles$J.selectItemIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) })
-          ] })
-        ]
-      }
-    );
-  }
-);
+const SelectContext = createContext({
+  value: null,
+  onChange: (selectedValue) => {
+  },
+  setOpen: (open) => {
+  },
+  setSelectedIndex: (index) => {
+  },
+  options: /* @__PURE__ */ new Set(),
+  optionRenderer: void 0
+});
+function useSelect() {
+  return useContext(SelectContext);
+}
 const OptionTypeContext = React__default.createContext(null);
 function useOptionType() {
   return React__default.useContext(OptionTypeContext);
@@ -20705,9 +20655,18 @@ function OptionTypeProvider({
 }) {
   return /* @__PURE__ */ jsx(OptionTypeContext.Provider, { value: Component, children });
 }
+const OptionContext = createContext({
+  onOptionAdd: () => {
+  },
+  onOptionRemove: () => {
+  }
+});
+function useOption() {
+  return useContext(OptionContext);
+}
 function HiddenOption(option) {
   const { label: label2 } = option;
-  const { onOptionRemove, onOptionAdd } = useOption();
+  const { onOptionAdd } = useOption();
   const [node, setNode] = useState(null);
   const opt = useMemo(() => {
     return {
@@ -20719,165 +20678,10 @@ function HiddenOption(option) {
   }, [option, node, label2]);
   useEffect(() => {
     onOptionAdd(opt);
-    return () => onOptionRemove(opt);
-  }, [opt, onOptionAdd, onOptionRemove]);
+  }, [opt, onOptionAdd]);
   return /* @__PURE__ */ jsx("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.children });
 }
-const SimpleSelect = forwardRef(
-  function SimpleSelect2(props, forwardedRef) {
-    const { root: root2 } = useTheme();
-    const {
-      enabled: enabled2,
-      onBlur,
-      autoFocus,
-      onValueChange,
-      validationStatus,
-      value,
-      height,
-      style: style2,
-      placeholder: placeholder2,
-      id,
-      triggerRef,
-      onFocus,
-      width,
-      children,
-      readOnly: readOnly2,
-      emptyListNode,
-      className,
-      ...rest
-    } = props;
-    const { options: options2 } = useSelect();
-    const composedRef = forwardRef ? composeRefs(triggerRef, forwardedRef) : triggerRef;
-    const stringValue = useMemo(() => {
-      return value != void 0 ? String(value) : void 0;
-    }, [value]);
-    const handleValueChange = useCallback(
-      (val) => {
-        if (readOnly2) return;
-        onValueChange(val);
-      },
-      [onValueChange, readOnly2]
-    );
-    const optionsArray = useMemo(() => Array.from(options2), [options2]);
-    const selectedOption = useMemo(() => {
-      return optionsArray.find((option) => String(option.value) === String(value));
-    }, [optionsArray, value]);
-    return /* @__PURE__ */ jsxs(Root, { value: stringValue, onValueChange: handleValueChange, children: [
-      /* @__PURE__ */ jsxs(
-        Trigger,
-        {
-          ...rest,
-          id,
-          ref: composedRef,
-          "aria-haspopup": "listbox",
-          style: style2,
-          onFocus,
-          onBlur,
-          disabled: !enabled2,
-          className: classnames(className, styles$J.selectTrigger, {
-            [styles$J.error]: validationStatus === "error",
-            [styles$J.warning]: validationStatus === "warning",
-            [styles$J.valid]: validationStatus === "valid"
-          }),
-          onClick: (event) => {
-            event.stopPropagation();
-          },
-          autoFocus,
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: classnames(styles$J.selectValue, {
-                  [styles$J.placeholder]: value === void 0
-                }),
-                children: selectedOption ? selectedOption.label : readOnly2 ? "" : placeholder2
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: styles$J.action, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsxs(
-        Content,
-        {
-          className: styles$J.selectDropdownContent,
-          position: "popper",
-          style: { maxHeight: height, minWidth: width },
-          children: [
-            /* @__PURE__ */ jsx(ScrollUpButton, { className: styles$J.selectScrollUpButton, children: /* @__PURE__ */ jsx(Icon, { name: "chevronup" }) }),
-            /* @__PURE__ */ jsxs(Viewport, { className: styles$J.selectViewport, role: "listbox", children: [
-              children,
-              optionsArray.length === 0 && emptyListNode
-            ] }),
-            /* @__PURE__ */ jsx(ScrollDownButton, { className: styles$J.selectScrollDownButton, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
-          ]
-        }
-      ) })
-    ] });
-  }
-);
-const MultiSelectOption = forwardRef(function MultiSelectOption2(option, forwardedRef) {
-  const id = useId();
-  const {
-    label: label2,
-    value,
-    enabled: enabled2 = true,
-    keywords,
-    readOnly: readOnly2,
-    children,
-    isHighlighted = false,
-    itemIndex
-  } = option;
-  const {
-    value: selectedValue,
-    onChange,
-    multiSelect,
-    setOpen,
-    setSelectedIndex,
-    optionRenderer
-  } = useSelect();
-  const selected2 = useMemo(() => {
-    return Array.isArray(selectedValue) && multiSelect ? selectedValue.map((v) => String(v)).includes(value) : String(selectedValue) === String(value);
-  }, [selectedValue, value, multiSelect]);
-  const handleClick = () => {
-    if (readOnly2) {
-      setOpen(false);
-      return;
-    }
-    if (enabled2) {
-      onChange(value);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      id,
-      ref: forwardedRef,
-      role: "option",
-      "aria-disabled": !enabled2,
-      "aria-selected": selected2,
-      className: classnames(styles$J.multiSelectOption, {
-        [styles$J.disabledOption]: !enabled2,
-        [styles$J.highlighted]: isHighlighted
-      }),
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onMouseEnter: () => {
-        if (itemIndex !== void 0 && setSelectedIndex && enabled2) {
-          setSelectedIndex(itemIndex);
-        }
-      },
-      onClick: handleClick,
-      "data-state": selected2 ? "checked" : void 0,
-      children: /* @__PURE__ */ jsx("div", { className: styles$J.multiSelectOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        children || label2,
-        selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
-      ] }) })
-    }
-  );
-});
+const PART_LIST_WRAPPER$1 = "listWrapper";
 const defaultProps$F = {
   enabled: true,
   placeholder: "",
@@ -20999,7 +20803,6 @@ const Select = forwardRef(function Select2({
   const observer = useRef();
   const { root: root2 } = useTheme();
   const [options2, setOptions] = useState(/* @__PURE__ */ new Set());
-  const isInForm = useIsInsideForm();
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const filteredOptions = useMemo(() => {
@@ -21054,15 +20857,16 @@ const Select = forwardRef(function Select2({
   }, [multiSelect, updateState, onDidChange]);
   const findNextEnabledIndex = useCallback(
     (currentIndex) => {
+      if (filteredOptions.length === 0) return -1;
       for (let i = currentIndex + 1; i < filteredOptions.length; i++) {
         const item2 = filteredOptions[i];
-        if (item2.enabled !== false) {
+        if (item2 && item2.enabled !== false) {
           return i;
         }
       }
       for (let i = 0; i <= currentIndex; i++) {
         const item2 = filteredOptions[i];
-        if (item2.enabled !== false) {
+        if (item2 && item2.enabled !== false) {
           return i;
         }
       }
@@ -21072,15 +20876,16 @@ const Select = forwardRef(function Select2({
   );
   const findPreviousEnabledIndex = useCallback(
     (currentIndex) => {
+      if (filteredOptions.length === 0) return -1;
       for (let i = currentIndex - 1; i >= 0; i--) {
         const item2 = filteredOptions[i];
-        if (item2.enabled !== false) {
+        if (item2 && item2.enabled !== false) {
           return i;
         }
       }
       for (let i = filteredOptions.length - 1; i >= currentIndex; i--) {
         const item2 = filteredOptions[i];
-        if (item2.enabled !== false) {
+        if (item2 && item2.enabled !== false) {
           return i;
         }
       }
@@ -21110,8 +20915,11 @@ const Select = forwardRef(function Select2({
           event.preventDefault();
           if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
             const selectedItem = filteredOptions[selectedIndex];
-            if (selectedItem.enabled !== false) {
+            if (selectedItem && selectedItem.enabled !== false) {
               toggleOption(selectedItem.value);
+              if (!multiSelect) {
+                setOpen(false);
+              }
             }
           }
           break;
@@ -21126,6 +20934,7 @@ const Select = forwardRef(function Select2({
       selectedIndex,
       filteredOptions,
       toggleOption,
+      multiSelect,
       findNextEnabledIndex,
       findPreviousEnabledIndex
     ]
@@ -21159,7 +20968,15 @@ const Select = forwardRef(function Select2({
     [emptyListTemplate]
   );
   const onOptionAdd = useCallback((option) => {
-    setOptions((prev) => new Set(prev).add(option));
+    setOptions((prev) => {
+      const exists = Array.from(prev).some((opt) => opt.value === option.value);
+      if (exists) {
+        return prev;
+      }
+      const newSet = new Set(prev);
+      newSet.add(option);
+      return newSet;
+    });
   }, []);
   const onOptionRemove = useCallback((option) => {
     setOptions((prev) => {
@@ -21178,138 +20995,286 @@ const Select = forwardRef(function Select2({
   const selectContextValue = useMemo(
     () => ({
       multiSelect,
+      readOnly: readOnly2,
       value,
       onChange: toggleOption,
       setOpen,
       setSelectedIndex,
       options: options2,
+      highlightedValue: selectedIndex >= 0 && selectedIndex < filteredOptions.length && filteredOptions[selectedIndex] ? filteredOptions[selectedIndex].value : void 0,
       optionRenderer
     }),
-    [multiSelect, toggleOption, value, options2, optionRenderer]
+    [
+      multiSelect,
+      readOnly2,
+      value,
+      toggleOption,
+      options2,
+      selectedIndex,
+      filteredOptions,
+      optionRenderer
+    ]
   );
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: selectContextValue, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? /* @__PURE__ */ jsxs(OptionTypeProvider, { Component: HiddenOption, children: [
-    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsxs(
-        PopoverTrigger,
-        {
-          ...rest,
-          ref: composeRefs(setReferenceElement, forwardedRef),
-          id,
-          "aria-haspopup": "listbox",
-          style: style2,
-          onFocus,
-          onBlur,
-          disabled: !enabled2,
-          "aria-expanded": open,
-          onClick: (event) => {
-            event.stopPropagation();
-            setOpen((prev) => !prev);
-          },
-          className: classnames(
-            styles$J.selectTrigger,
-            styles$J[validationStatus],
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: selectContextValue, children: /* @__PURE__ */ jsxs(OptionContext.Provider, { value: optionContextValue, children: [
+    /* @__PURE__ */ jsx(OptionTypeProvider, { Component: VisibleSelectOption, children: /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open,
+        onOpenChange: (isOpen) => {
+          if (!enabled2) return;
+          setOpen(isOpen);
+          setSelectedIndex(-1);
+        },
+        modal: false,
+        children: [
+          /* @__PURE__ */ jsxs(
+            PopoverTrigger,
             {
-              [styles$J.disabled]: !enabled2,
-              [styles$J.multi]: multiSelect
-            },
-            className
-          ),
-          autoFocus,
-          children: [
-            /* @__PURE__ */ jsx(
-              SelectTriggerValue,
-              {
-                value,
-                placeholder: placeholder2,
-                readOnly: readOnly2,
-                multiSelect,
-                options: options2,
-                valueRenderer,
-                toggleOption
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              SelectTriggerActions,
-              {
-                value,
-                multiSelect,
-                enabled: enabled2,
-                readOnly: readOnly2,
-                clearValue
-              }
-            )
-          ]
-        }
-      ),
-      open && /* @__PURE__ */ jsx(Portal$1, { container: root2, children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, loop: true, trapped: true, children: /* @__PURE__ */ jsx(
-        PopoverContent,
-        {
-          style: { minWidth: width, height: dropdownHeight },
-          className: styles$J.selectContent,
-          onKeyDown: handleKeyDown,
-          children: /* @__PURE__ */ jsxs("div", { className: styles$J.command, children: [
-            searchable ? /* @__PURE__ */ jsxs("div", { className: styles$J.commandInputContainer, children: [
-              /* @__PURE__ */ jsx(Icon, { name: "search" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  role: "combobox",
-                  className: classnames(styles$J.commandInput),
-                  placeholder: "Search...",
-                  value: searchTerm,
-                  onChange: (e) => setSearchTerm(e.target.value),
-                  autoFocus: true
+              ...rest,
+              ref: composeRefs(setReferenceElement, forwardedRef),
+              id,
+              "aria-haspopup": "listbox",
+              style: style2,
+              onFocus,
+              onBlur,
+              disabled: !enabled2,
+              "aria-expanded": open,
+              "data-part-id": PART_LIST_WRAPPER$1,
+              className: classnames(className, styles$J.selectTrigger, styles$J[validationStatus], {
+                [styles$J.disabled]: !enabled2,
+                [styles$J.multi]: multiSelect
+              }),
+              role: "combobox",
+              onClick: (event) => {
+                if (!enabled2) return;
+                event.stopPropagation();
+                setOpen((prev) => !prev);
+              },
+              onKeyDown: (event) => {
+                if (!enabled2 || readOnly2) return;
+                if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === " " || event.key === "Enter")) {
+                  event.preventDefault();
+                  setOpen(true);
+                  if (filteredOptions.length > 0) {
+                    const firstEnabledIndex = findNextEnabledIndex(-1);
+                    setSelectedIndex(firstEnabledIndex !== -1 ? firstEnabledIndex : 0);
+                  }
+                  return;
                 }
-              )
-            ] }) : /* @__PURE__ */ jsx("button", { autoFocus: true, "aria-hidden": "true", className: styles$J.srOnly }),
-            /* @__PURE__ */ jsxs("div", { role: "listbox", className: styles$J.commandList, children: [
-              inProgress && /* @__PURE__ */ jsx("div", { className: styles$J.loading, children: inProgressNotificationMessage }),
-              filteredOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, index) => /* @__PURE__ */ jsx(
-                MultiSelectOption,
-                {
-                  readOnly: readOnly2,
-                  value: value2,
-                  label: label2,
-                  enabled: enabled22,
-                  keywords,
-                  isHighlighted: selectedIndex === index,
-                  itemIndex: index
-                },
-                value2
-              )),
-              !inProgress && filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", { children: emptyListNode })
-            ] })
-          ] })
-        }
-      ) }) })
-    ] }),
-    children
-  ] }) : /* @__PURE__ */ jsx(OptionTypeProvider, { Component: SelectOption, children: /* @__PURE__ */ createElement(
-    SimpleSelect,
-    {
-      ...rest,
-      readOnly: !!readOnly2,
-      ref: forwardedRef,
-      key: isInForm ? value ? `status-${value}` : "status-initial" : void 0,
-      value,
-      onValueChange: toggleOption,
-      id,
-      style: style2,
-      className,
-      onFocus,
-      onBlur,
-      enabled: enabled2,
-      validationStatus,
-      triggerRef: setReferenceElement,
-      autoFocus,
-      placeholder: placeholder2,
-      height: dropdownHeight,
-      width,
-      emptyListNode
-    },
-    children
-  ) }) }) });
+                if (open) {
+                  handleKeyDown(event);
+                }
+              },
+              autoFocus,
+              children: [
+                /* @__PURE__ */ jsx(
+                  SelectTriggerValue,
+                  {
+                    value,
+                    placeholder: placeholder2,
+                    readOnly: readOnly2,
+                    multiSelect,
+                    options: options2,
+                    valueRenderer,
+                    toggleOption
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SelectTriggerActions,
+                  {
+                    value,
+                    multiSelect,
+                    enabled: enabled2,
+                    readOnly: readOnly2,
+                    clearValue
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              style: { minWidth: width, height: dropdownHeight },
+              className: styles$J.selectContent,
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsxs("div", { className: styles$J.command, children: [
+                searchable ? /* @__PURE__ */ jsxs("div", { className: styles$J.commandInputContainer, children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "search" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      role: "searchbox",
+                      className: classnames(styles$J.commandInput),
+                      placeholder: "Search...",
+                      value: searchTerm,
+                      onChange: (e) => setSearchTerm(e.target.value)
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx("button", { "aria-hidden": "true", className: styles$J.srOnly }),
+                /* @__PURE__ */ jsx("div", { role: "listbox", className: styles$J.commandList, children: inProgress ? /* @__PURE__ */ jsx("div", { className: styles$J.loading, children: inProgressNotificationMessage }) : searchable && searchTerm ? (
+                  // When searching, show only filtered options
+                  filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { children: emptyListNode }) : filteredOptions.map(({ value: value2, label: label2, enabled: enabled22, keywords }, index) => /* @__PURE__ */ jsx(
+                    SelectOptionItem,
+                    {
+                      readOnly: readOnly2,
+                      value: value2,
+                      label: label2,
+                      enabled: enabled22,
+                      keywords,
+                      isHighlighted: selectedIndex === index,
+                      itemIndex: index
+                    },
+                    value2
+                  ))
+                ) : (
+                  // When not searching, show all children (includes Options and other components like Button)
+                  /* @__PURE__ */ jsxs(Fragment, { children: [
+                    children,
+                    options2.size === 0 && /* @__PURE__ */ jsx("div", { children: emptyListNode })
+                  ] })
+                ) })
+              ] })
+            }
+          ) })
+        ]
+      }
+    ) }),
+    !open && /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx(OptionTypeProvider, { Component: HiddenOption, children }) })
+  ] }) });
 });
+function VisibleSelectOption(option) {
+  const { value, label: label2, enabled: enabled2 = true, children } = option;
+  const { onOptionAdd } = useOption();
+  const {
+    value: selectedValue,
+    onChange,
+    multiSelect,
+    readOnly: readOnly2,
+    setOpen,
+    highlightedValue,
+    optionRenderer
+  } = useSelect();
+  const optionRef = useRef(null);
+  const opt = useMemo(() => {
+    return {
+      ...option,
+      label: label2 ?? "",
+      keywords: option.keywords || [label2 ?? ""]
+    };
+  }, [option, label2]);
+  useEffect(() => {
+    onOptionAdd(opt);
+  }, [opt, onOptionAdd]);
+  const selected2 = useMemo(() => {
+    return Array.isArray(selectedValue) && multiSelect ? selectedValue.map((v) => String(v)).includes(value) : String(selectedValue) === String(value);
+  }, [selectedValue, value, multiSelect]);
+  const isHighlighted = useMemo(() => {
+    return highlightedValue !== void 0 && String(highlightedValue) === String(value);
+  }, [highlightedValue, value]);
+  useEffect(() => {
+    if (isHighlighted && optionRef.current) {
+      optionRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [isHighlighted]);
+  const handleClick = () => {
+    if (readOnly2) {
+      setOpen(false);
+      return;
+    }
+    if (enabled2) {
+      onChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: optionRef,
+      role: "option",
+      "aria-disabled": !enabled2,
+      "aria-selected": selected2,
+      className: classnames(styles$J.multiSelectOption, {
+        [styles$J.disabledOption]: !enabled2,
+        [styles$J.highlighted]: isHighlighted
+      }),
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClick: handleClick,
+      "data-state": selected2 ? "checked" : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: styles$J.multiSelectOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2 }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children || label2,
+        selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
+      ] }) })
+    }
+  );
+}
+function SelectOptionItem(option) {
+  const {
+    value,
+    label: label2,
+    enabled: enabled2 = true,
+    readOnly: readOnly2,
+    children,
+    isHighlighted = false,
+    itemIndex
+  } = option;
+  const {
+    value: selectedValue,
+    onChange,
+    multiSelect,
+    setOpen,
+    setSelectedIndex,
+    optionRenderer
+  } = useSelect();
+  const optionRef = useRef(null);
+  const selected2 = useMemo(() => {
+    return Array.isArray(selectedValue) && multiSelect ? selectedValue.map((v) => String(v)).includes(value) : String(selectedValue) === String(value);
+  }, [selectedValue, value, multiSelect]);
+  useEffect(() => {
+    if (isHighlighted && optionRef.current) {
+      optionRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [isHighlighted]);
+  const handleClick = () => {
+    if (readOnly2) {
+      setOpen(false);
+      return;
+    }
+    if (enabled2) {
+      onChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: optionRef,
+      role: "option",
+      "aria-disabled": !enabled2,
+      "aria-selected": selected2,
+      className: classnames(styles$J.multiSelectOption, {
+        [styles$J.disabledOption]: !enabled2,
+        [styles$J.highlighted]: isHighlighted
+      }),
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onMouseEnter: () => {
+        if (itemIndex !== void 0 && setSelectedIndex && enabled2) {
+          setSelectedIndex(itemIndex);
+        }
+      },
+      onClick: handleClick,
+      "data-state": selected2 ? "checked" : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: styles$J.multiSelectOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2 }, selectedValue, false) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children || label2,
+        selected2 && /* @__PURE__ */ jsx(Icon, { name: "checkmark" })
+      ] }) })
+    }
+  );
+}
 const themeVars$o = `'{"gap-RadioGroupOption": "var(--xmlui-gap-RadioGroupOption)", "borderWidth-RadioGroupOption": "var(--xmlui-borderWidth-RadioGroupOption)", "borderWidth-RadioGroupOption-validation": "var(--xmlui-borderWidth-RadioGroupOption-validation)", "Input:borderColor-RadioGroupOption-default": "var(--xmlui-borderColor-RadioGroupOption-default)", "Input:borderColor-checked-RadioGroupOption": "var(--xmlui-borderColor-checked-RadioGroupOption)", "Input:borderColor-RadioGroupOption-default--hover": "var(--xmlui-borderColor-RadioGroupOption-default--hover)", "Input:borderColor-RadioGroupOption-default--active": "var(--xmlui-borderColor-RadioGroupOption-default--active)", "Input:borderColor-RadioGroupOption--disabled": "var(--xmlui-borderColor-RadioGroupOption--disabled)", "Input:borderColor-RadioGroupOption-error": "var(--xmlui-borderColor-RadioGroupOption-error)", "Input:borderColor-RadioGroupOption-warning": "var(--xmlui-borderColor-RadioGroupOption-warning)", "Input:borderColor-RadioGroupOption-success": "var(--xmlui-borderColor-RadioGroupOption-success)", "Input:backgroundColor-RadioGroupOption-default": "var(--xmlui-backgroundColor-RadioGroupOption-default)", "Input:backgroundColor-checked-RadioGroupOption": "var(--xmlui-backgroundColor-checked-RadioGroupOption)", "Input:backgroundColor-checked-RadioGroupOption--disabled": "var(--xmlui-backgroundColor-checked-RadioGroupOption--disabled)", "Input:color-RadioGroupOption--disabled": "var(--xmlui-color-RadioGroupOption--disabled)", "Input:fontSize-RadioGroupOption": "var(--xmlui-fontSize-RadioGroupOption)", "Input:fontWeight-RadioGroupOption": "var(--xmlui-fontWeight-RadioGroupOption)", "Input:textColor-RadioGroupOption-default": "var(--xmlui-textColor-RadioGroupOption-default)", "Input:textColor-RadioGroupOption-error": "var(--xmlui-textColor-RadioGroupOption-error)", "Input:textColor-RadioGroupOption-warning": "var(--xmlui-textColor-RadioGroupOption-warning)", "Input:textColor-RadioGroupOption-success": "var(--xmlui-textColor-RadioGroupOption-success)", "Input:outlineWidth-RadioGroupOption--focus": "var(--xmlui-outlineWidth-RadioGroupOption--focus)", "Input:outlineColor-RadioGroupOption--focus": "var(--xmlui-outlineColor-RadioGroupOption--focus)", "Input:outlineStyle-RadioGroupOption--focus": "var(--xmlui-outlineStyle-RadioGroupOption--focus)", "Input:outlineOffset-RadioGroupOption--focus": "var(--xmlui-outlineOffset-RadioGroupOption--focus)"}'`;
 const radioGroupContainer = "_radioGroupContainer_fn2iu_14";
 const radioOptionContainer = "_radioOptionContainer_fn2iu_20";
@@ -22117,32 +22082,24 @@ function ValidationSummary({
     });
     return ret;
   }, [fieldValidationResults, generalValidationResults]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: animateContainerRef,
-      className: styles$F.summaryContainer,
-      "data-validation-summary": true,
-      children: [
-        /* @__PURE__ */ jsx(
-          ValidationDisplay,
-          {
-            issues: groupedInvalidResults.warning,
-            severity: "warning",
-            heading: "Validation warnings"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ValidationDisplay,
-          {
-            issues: groupedInvalidResults.error,
-            severity: "error",
-            heading: "Validation errors"
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { ref: animateContainerRef, className: styles$F.summaryContainer, "data-validation-summary": true, children: [
+    /* @__PURE__ */ jsx(
+      ValidationDisplay,
+      {
+        issues: groupedInvalidResults.warning,
+        severity: "warning",
+        heading: "Validation warnings"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ValidationDisplay,
+      {
+        issues: groupedInvalidResults.error,
+        severity: "error",
+        heading: "Validation errors"
+      }
+    )
+  ] });
 }
 const ValidationDisplay = ({
   heading: heading2,
@@ -22893,7 +22850,15 @@ const AutoComplete = forwardRef(function AutoComplete2({
     onDidChange(newValue);
   }, [multi, updateState, onDidChange]);
   const onOptionAdd = useCallback((option) => {
-    setOptions((prev) => new Set(prev).add(option));
+    setOptions((prev) => {
+      const newSet = new Set(prev);
+      const existing = Array.from(prev).find((opt) => opt.value === option.value);
+      if (existing) {
+        newSet.delete(existing);
+      }
+      newSet.add(option);
+      return newSet;
+    });
   }, []);
   const onOptionRemove = useCallback((option) => {
     setOptions((prev) => {
@@ -23109,6 +23074,14 @@ const AutoComplete = forwardRef(function AutoComplete2({
                 }
               ),
               "aria-expanded": open,
+              onClick: (event) => {
+                if (readOnly2) return;
+                if (multi && open) {
+                  return;
+                }
+                event.stopPropagation();
+                setOpen((prev) => !prev);
+              },
               children: [
                 Array.isArray(selectedValue) && selectedValue.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$E.badgeList, children: selectedValue.map((v, index) => /* @__PURE__ */ jsxs("span", { className: styles$E.badge, children: [
                   v == null ? void 0 : v.label,
@@ -23206,7 +23179,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
               ]
             }
           ) }),
-          open && /* @__PURE__ */ jsx(Portal$1, { container: root2, children: /* @__PURE__ */ jsx(
+          open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
               style: { width, height: dropdownHeight },
@@ -23256,7 +23229,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
   ] }) }) });
 });
 function CreatableItem({ onNewItem, isHighlighted = false }) {
-  const { value, options: options2, searchTerm, onChange, setOpen, setSelectedIndex } = useAutoComplete();
+  const { value, options: options2, searchTerm, onChange, setOpen, setSelectedIndex, multi } = useAutoComplete();
   const { onOptionAdd } = useOption();
   if (isOptionsExist(options2, [{ value: searchTerm, label: searchTerm }]) || Array.isArray(value) && (value == null ? void 0 : value.find((s) => s === searchTerm)) || searchTerm === value) {
     return /* @__PURE__ */ jsx("span", { style: { display: "none" } });
@@ -23266,7 +23239,9 @@ function CreatableItem({ onNewItem, isHighlighted = false }) {
     onOptionAdd(newOption);
     onNewItem == null ? void 0 : onNewItem(searchTerm);
     onChange(searchTerm);
-    setOpen(false);
+    if (!multi) {
+      setOpen(false);
+    }
   };
   const Item2 = /* @__PURE__ */ jsx(
     "div",
@@ -23317,7 +23292,9 @@ function AutoCompleteOption(option) {
   const handleClick = () => {
     if (!readOnly2 && enabled2) {
       onChange(value);
-      setOpen(false);
+      if (!multi) {
+        setOpen(false);
+      }
     }
   };
   return /* @__PURE__ */ jsx(
@@ -24711,7 +24688,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-CSGEd746.mjs");
+      const { initMock } = await import("./initMock-DFcCR7ey.mjs");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -24728,7 +24705,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-QiltRtq1.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-CSGEd746.mjs")
+              import("./initMock-DFcCR7ey.mjs")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -24765,7 +24742,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-QiltRtq1.mjs"),
-            import("./initMock-CSGEd746.mjs")
+            import("./initMock-DFcCR7ey.mjs")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -26739,7 +26716,7 @@ const Slider = forwardRef(
       thumbsRef.current = thumbsRef.current.slice(0, displayValue.length);
     }, [displayValue.length]);
     return /* @__PURE__ */ jsx("div", { ...rest, ref, style: style2, className: classnames(styles$D.sliderContainer, className), "data-slider-container": true, children: /* @__PURE__ */ jsxs(
-      Root$1,
+      Root,
       {
         ref: inputRef,
         minStepsBetweenThumbs,
@@ -27415,7 +27392,7 @@ const FormItem = memo(function FormItem2({
       onBlur,
       style: style2,
       className,
-      validationResult: /* @__PURE__ */ jsx("div", { ref: animateContainerRef, children: isHelperTextShown && (validationResult == null ? void 0 : validationResult.validations.map((singleValidation, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      validationResult: /* @__PURE__ */ jsx("div", { ref: animateContainerRef, className: styles$1k.helperTextContainer, children: isHelperTextShown && (validationResult == null ? void 0 : validationResult.validations.map((singleValidation, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
         singleValidation.isValid && !!singleValidation.validMessage && /* @__PURE__ */ jsx(
           HelperText,
           {
@@ -30226,7 +30203,7 @@ const selectComponentRenderer = createComponentRenderer(
         updateState: isControlled ? void 0 : updateState,
         searchable,
         initialValue: extractValue(node.props.initialValue),
-        value: isControlled ? extractValue(node.props.value) : state == null ? void 0 : state.value,
+        value: state == null ? void 0 : state.value,
         autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus),
         enabled: extractValue.asOptionalBoolean(node.props.enabled),
         placeholder: extractValue.asOptionalString(node.props.placeholder),
@@ -30261,7 +30238,7 @@ const selectComponentRenderer = createComponentRenderer(
                 $selectedValue: val,
                 $inTrigger: inTrigger
               },
-              renderChild: (...args) => multiSelect || searchable ? renderChild2(...args) : /* @__PURE__ */ jsx(SelectItemText, { children: renderChild2(...args) })
+              renderChild: renderChild2
             }
           );
         } : void 0,
@@ -38030,7 +38007,7 @@ const Tabs = forwardRef(function Tabs2({
         className: classnames(className, styles$k.tabs, styles$k.accordionView),
         style: style2,
         children: /* @__PURE__ */ jsx(
-          Root$2,
+          Root$1,
           {
             value: `${currentTab}`,
             onValueChange: (tab) => {
@@ -38046,7 +38023,7 @@ const Tabs = forwardRef(function Tabs2({
             className: styles$k.accordionRoot,
             children: /* @__PURE__ */ jsxs("div", { className: styles$k.accordionInterleaved, children: [
               /* @__PURE__ */ jsx(List, { className: styles$k.accordionList, children: tabItems.map((tab, index) => /* @__PURE__ */ jsx(
-                Trigger$1,
+                Trigger,
                 {
                   value: tab.innerId,
                   asChild: true,
@@ -38081,7 +38058,7 @@ const Tabs = forwardRef(function Tabs2({
     ) });
   }
   return /* @__PURE__ */ jsx(TabContext.Provider, { value: tabContextValue, children: /* @__PURE__ */ jsxs(
-    Root$2,
+    Root$1,
     {
       ...rest,
       id: tabsId,
@@ -38113,7 +38090,7 @@ const Tabs = forwardRef(function Tabs2({
             children: [
               !distributeEvenly2 && !headerRenderer && tabAlignment === "end" && /* @__PURE__ */ jsx("div", { className: styles$k.filler, "data-orientation": orientation }),
               !distributeEvenly2 && !headerRenderer && tabAlignment === "center" && /* @__PURE__ */ jsx("div", { className: styles$k.filler, "data-orientation": orientation }),
-              tabItems.map((tab, index) => /* @__PURE__ */ jsx(Trigger$1, { value: tab.innerId, asChild: true, children: /* @__PURE__ */ jsx(
+              tabItems.map((tab, index) => /* @__PURE__ */ jsx(Trigger, { value: tab.innerId, asChild: true, children: /* @__PURE__ */ jsx(
                 "div",
                 {
                   role: "tab",
@@ -38932,7 +38909,7 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
   const tabIndex = (tabItems == null ? void 0 : tabItems.findIndex((item2) => item2.innerId === innerId)) ?? 0;
   const contentOrder = tabIndex * 2 + 1;
   return /* @__PURE__ */ createElement(
-    Content$1,
+    Content,
     {
       ...rest,
       key: innerId,
@@ -46660,7 +46637,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.24";
+const version = "0.10.25";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -46937,21 +46914,21 @@ function createContainerReducer(debugView) {
       case ContainerActionKind.EVENT_HANDLER_STARTED: {
         const { eventName } = action2.payload;
         const inProgressFlagName = `${eventName}InProgress`;
-        state[uid] = { ...state[uid], [inProgressFlagName]: true };
+        state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: true } : { [inProgressFlagName]: true };
         storeNextValue(state[uid]);
         break;
       }
       case ContainerActionKind.EVENT_HANDLER_COMPLETED: {
         const { eventName } = action2.payload;
         const inProgressFlagName = `${eventName}InProgress`;
-        state[uid] = { ...state[uid], [inProgressFlagName]: false };
+        state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: false } : { [inProgressFlagName]: false };
         storeNextValue(state[uid]);
         break;
       }
       case ContainerActionKind.EVENT_HANDLER_ERROR: {
         const { eventName } = action2.payload;
         const inProgressFlagName = `${eventName}InProgress`;
-        state[uid] = { ...state[uid], [inProgressFlagName]: false };
+        state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: false } : { [inProgressFlagName]: false };
         storeNextValue(state[uid]);
         break;
       }
@@ -48525,7 +48502,9 @@ const Container = memo(
     const runCodeAsync = useEvent(
       async (source, componentUid, options2, ...eventArgs) => {
         var _a3, _b, _c;
-        const canSignEventLifecycle = () => componentUid.description !== void 0 && (options2 == null ? void 0 : options2.eventName) !== void 0;
+        const canSignEventLifecycle = () => {
+          return componentUid.description !== void 0 && (options2 == null ? void 0 : options2.eventName) !== void 0;
+        };
         let changes = [];
         const getComponentStateClone = () => {
           changes.length = 0;
@@ -49043,7 +49022,9 @@ const StateContainer = memo(
     const routingParams = useRoutingParams();
     const memoedVars = useRef(/* @__PURE__ */ new Map());
     const stateFromOutside = useShallowCompareMemoize(
-      useMemo(() => extractScopedState(parentState, node.uses), [node.uses, parentState])
+      useMemo(() => {
+        return extractScopedState(parentState, node.uses);
+      }, [node.uses, parentState])
     );
     const debugView = useDebugView();
     const containerReducer = createContainerReducer(debugView);
@@ -49052,10 +49033,15 @@ const StateContainer = memo(
     const componentStateWithApis = useShallowCompareMemoize(
       useMemo(() => {
         const ret = { ...componentState };
+        const registeredApiKeys = new Set(
+          Object.getOwnPropertySymbols(componentApis).map((s) => s.description).filter((d2) => d2 !== void 0)
+        );
         for (const stateKey of Object.getOwnPropertySymbols(componentState)) {
           const value = componentState[stateKey];
           if (stateKey.description) {
-            ret[stateKey.description] = value;
+            if (registeredApiKeys.has(stateKey.description)) {
+              ret[stateKey.description] = value;
+            }
           }
         }
         if (Reflect.ownKeys(componentApis).length === 0) {
@@ -49119,8 +49105,11 @@ const StateContainer = memo(
     const mergedWithVars = useMergedState(resolvedLocalVars, componentStateWithApis);
     const combinedState = useCombinedState(
       stateFromOutside,
+      // Parent state (lower priority) - allows local vars to shadow
       node.contextVars,
+      // Context vars like $item
       mergedWithVars,
+      // Local vars and component state (higher priority) - enables shadowing
       routingParams
     );
     const registerComponentApi = useCallback((uid, api) => {
@@ -50004,9 +49993,19 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
   const stableLayoutCss = useShallowCompareMemoize(cssProps);
   const className = useComponentStyle(stableLayoutCss);
   const { inspectId, refreshInspection } = useInspector(safeNode, uid);
+  const contextVars = useMemo(() => {
+    const vars2 = {};
+    for (const key of Object.keys(state)) {
+      if (key.startsWith("$")) {
+        vars2[key] = state[key];
+      }
+    }
+    return vars2;
+  }, [state]);
   const rendererContext = {
     node: safeNode,
     state: state[uid] || EMPTY_OBJECT,
+    contextVars,
     updateState: memoedUpdateState,
     appContext,
     extractValue: valueExtractor,