@huin-core/react-select 1.0.4 → 1.0.7

package/dist/index.mjs

@@ -12,7 +12,6 @@ import { createPopperScope } from "@huin-core/react-popper";
 import { useControllableState } from "@huin-core/react-use-controllable-state";
 import { usePrevious } from "@huin-core/react-use-previous";
 import { VisuallyHidden } from "@huin-core/react-visually-hidden";
-import { jsx, jsxs } from "react/jsx-runtime";
 var SELECT_NAME = "Select";
 var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME);
 var [createSelectContext, createSelectScope] = createContextScope(
@@ -63,7 +62,7 @@ var Select = (props) => {
     /* @__PURE__ */ new Set()
   );
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(PopperPrimitive.Root, { ...popperScope }, /* @__PURE__ */ React.createElement(
     SelectProvider,
     {
       required,
@@ -81,46 +80,42 @@ var Select = (props) => {
       onOpenChange: setOpen,
       dir: direction,
       triggerPointerDownPosRef,
-      disabled,
-      children: [
-        /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
-          SelectNativeOptionsProvider,
-          {
-            scope: props.__scopeSelect,
-            onNativeOptionAdd: React.useCallback((option) => {
-              setNativeOptionsSet((prev) => new Set(prev).add(option));
-            }, []),
-            onNativeOptionRemove: React.useCallback((option) => {
-              setNativeOptionsSet((prev) => {
-                const optionsSet = new Set(prev);
-                optionsSet.delete(option);
-                return optionsSet;
-              });
-            }, []),
-            children
-          }
-        ) }),
-        isFormControl ? /* @__PURE__ */ jsxs(
-          BubbleSelect,
-          {
-            "aria-hidden": true,
-            required,
-            tabIndex: -1,
-            name,
-            autoComplete,
-            value,
-            onChange: (event) => setValue(event.target.value),
-            disabled,
-            children: [
-              value === void 0 ? /* @__PURE__ */ jsx("option", { value: "" }) : null,
-              Array.from(nativeOptionsSet)
-            ]
-          },
-          nativeSelectKey
-        ) : null
-      ]
-    }
-  ) });
+      disabled
+    },
+    /* @__PURE__ */ React.createElement(Collection.Provider, { scope: __scopeSelect }, /* @__PURE__ */ React.createElement(
+      SelectNativeOptionsProvider,
+      {
+        scope: props.__scopeSelect,
+        onNativeOptionAdd: React.useCallback((option) => {
+          setNativeOptionsSet((prev) => new Set(prev).add(option));
+        }, []),
+        onNativeOptionRemove: React.useCallback((option) => {
+          setNativeOptionsSet((prev) => {
+            const optionsSet = new Set(prev);
+            optionsSet.delete(option);
+            return optionsSet;
+          });
+        }, [])
+      },
+      children
+    )),
+    isFormControl ? /* @__PURE__ */ React.createElement(
+      BubbleSelect,
+      {
+        key: nativeSelectKey,
+        "aria-hidden": true,
+        required,
+        tabIndex: -1,
+        name,
+        autoComplete,
+        value,
+        onChange: (event) => setValue(event.target.value),
+        disabled
+      },
+      value === void 0 ? /* @__PURE__ */ React.createElement("option", { value: "" }) : null,
+      Array.from(nativeOptionsSet)
+    ) : null
+  ));
 };
 Select.displayName = SELECT_NAME;
 var BubbleSelect = React.forwardRef((props, forwardedRef) => {
@@ -142,7 +137,7 @@ var BubbleSelect = React.forwardRef((props, forwardedRef) => {
       select.dispatchEvent(event);
     }
   }, [prevValue, value]);
-  return /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
+  return /* @__PURE__ */ React.createElement(VisuallyHidden, { asChild: true }, /* @__PURE__ */ React.createElement("select", { ...selectProps, ref: composedRefs, defaultValue: value }));
 });
 BubbleSelect.displayName = "BubbleSelect";
 var Root2 = Select;
@@ -163,7 +158,6 @@ import React2 from "react";
 import { Primitive } from "@huin-core/react-primitive";
 import { useComposedRefs as useComposedRefs2 } from "@huin-core/react-compose-refs";
 import { composeEventHandlers } from "@huin-core/primitive";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var CONTENT_NAME = "SelectContent";
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME, {});
 var VIEWPORT_NAME = "SelectViewport";
@@ -179,64 +173,61 @@ var SelectViewport = React2.forwardRef((props, forwardedRef) => {
     contentContext.onViewportChange
   );
   const prevScrollTopRef = React2.useRef(0);
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
-      "style",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `[data-huin-core-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-huin-core-select-viewport]::-webkit-scrollbar{display:none}`
-        },
-        nonce
-      }
-    ),
-    /* @__PURE__ */ jsx2(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx2(
-      Primitive.div,
-      {
-        "data-huin-core-select-viewport": "",
-        role: "presentation",
-        ...viewportProps,
-        ref: composedRefs,
-        style: {
-          // we use position: 'relative' here on the `viewport` so that when we call
-          // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
-          // (independent of the scrollUpButton).
-          position: "relative",
-          flex: 1,
-          overflow: "auto",
-          ...viewportProps.style
-        },
-        onScroll: composeEventHandlers(viewportProps.onScroll, (event) => {
-          const viewport = event.currentTarget;
-          const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;
-          if (shouldExpandOnScrollRef?.current && contentWrapper) {
-            const scrolledBy = Math.abs(
-              prevScrollTopRef.current - viewport.scrollTop
-            );
-            if (scrolledBy > 0) {
-              const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
-              const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
-              const cssHeight = parseFloat(contentWrapper.style.height);
-              const prevHeight = Math.max(cssMinHeight, cssHeight);
-              if (prevHeight < availableHeight) {
-                const nextHeight = prevHeight + scrolledBy;
-                const clampedNextHeight = Math.min(
-                  availableHeight,
-                  nextHeight
-                );
-                const heightDiff = nextHeight - clampedNextHeight;
-                contentWrapper.style.height = clampedNextHeight + "px";
-                if (contentWrapper.style.bottom === "0px") {
-                  viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
-                  contentWrapper.style.justifyContent = "flex-end";
-                }
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `[data-huin-core-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-huin-core-select-viewport]::-webkit-scrollbar{display:none}`
+      },
+      nonce
+    }
+  ), /* @__PURE__ */ React2.createElement(Collection.Slot, { scope: __scopeSelect }, /* @__PURE__ */ React2.createElement(
+    Primitive.div,
+    {
+      "data-huin-core-select-viewport": "",
+      role: "presentation",
+      ...viewportProps,
+      ref: composedRefs,
+      style: {
+        // we use position: 'relative' here on the `viewport` so that when we call
+        // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
+        // (independent of the scrollUpButton).
+        position: "relative",
+        flex: 1,
+        overflow: "auto",
+        ...viewportProps.style
+      },
+      onScroll: composeEventHandlers(viewportProps.onScroll, (event) => {
+        const viewport = event.currentTarget;
+        const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;
+        if (shouldExpandOnScrollRef?.current && contentWrapper) {
+          const scrolledBy = Math.abs(
+            prevScrollTopRef.current - viewport.scrollTop
+          );
+          if (scrolledBy > 0) {
+            const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
+            const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
+            const cssHeight = parseFloat(contentWrapper.style.height);
+            const prevHeight = Math.max(cssMinHeight, cssHeight);
+            if (prevHeight < availableHeight) {
+              const nextHeight = prevHeight + scrolledBy;
+              const clampedNextHeight = Math.min(
+                availableHeight,
+                nextHeight
+              );
+              const heightDiff = nextHeight - clampedNextHeight;
+              contentWrapper.style.height = clampedNextHeight + "px";
+              if (contentWrapper.style.bottom === "0px") {
+                viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
+                contentWrapper.style.justifyContent = "flex-end";
               }
             }
           }
-          prevScrollTopRef.current = viewport.scrollTop;
-        })
-      }
-    ) })
-  ] });
+        }
+        prevScrollTopRef.current = viewport.scrollTop;
+      })
+    }
+  )));
 });
 SelectViewport.displayName = VIEWPORT_NAME;
 
@@ -252,7 +243,6 @@ import { composeEventHandlers as composeEventHandlers2 } from "@huin-core/primit
 import { clamp } from "@huin-core/number";
 import * as PopperPrimitive2 from "@huin-core/react-popper";
 import { useCallbackRef } from "@huin-core/react-use-callback-ref";
-import { jsx as jsx3 } from "react/jsx-runtime";
 var CONTENT_NAME2 = "SelectContent";
 var SelectContent = React3.forwardRef(
   (props, forwardedRef) => {
@@ -264,11 +254,11 @@ var SelectContent = React3.forwardRef(
     if (!context.open) {
       const frag = fragment;
       return frag ? ReactDOM.createPortal(
-        /* @__PURE__ */ jsx3(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx3(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx3("div", { children: props.children }) }) }),
+        /* @__PURE__ */ React3.createElement(SelectContentProvider, { scope: props.__scopeSelect }, /* @__PURE__ */ React3.createElement(Collection.Slot, { scope: props.__scopeSelect }, /* @__PURE__ */ React3.createElement("div", null, props.children))),
         frag
       ) : null;
     }
-    return /* @__PURE__ */ jsx3(SelectContentImpl, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ React3.createElement(SelectContentImpl, { ...props, ref: forwardedRef });
   }
 );
 SelectContent.displayName = CONTENT_NAME2;
@@ -439,7 +429,7 @@ var SelectContentImpl = React3.forwardRef((props, forwardedRef) => {
     hideWhenDetached,
     avoidCollisions
   } : {};
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ React3.createElement(
     SelectContentProvider,
     {
       scope: __scopeSelect,
@@ -454,81 +444,81 @@ var SelectContentImpl = React3.forwardRef((props, forwardedRef) => {
       selectedItemText,
       position,
       isPositioned,
-      searchRef,
-      children: /* @__PURE__ */ jsx3(RemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx3(
-        FocusScope,
+      searchRef
+    },
+    /* @__PURE__ */ React3.createElement(RemoveScroll, { as: Slot, allowPinchZoom: true }, /* @__PURE__ */ React3.createElement(
+      FocusScope,
+      {
+        asChild: true,
+        trapped: context.open,
+        onMountAutoFocus: (event) => {
+          event.preventDefault();
+        },
+        onUnmountAutoFocus: composeEventHandlers2(
+          onCloseAutoFocus,
+          (event) => {
+            context.trigger?.focus({ preventScroll: true });
+            event.preventDefault();
+          }
+        )
+      },
+      /* @__PURE__ */ React3.createElement(
+        DismissableLayer,
         {
           asChild: true,
-          trapped: context.open,
-          onMountAutoFocus: (event) => {
-            event.preventDefault();
-          },
-          onUnmountAutoFocus: composeEventHandlers2(
-            onCloseAutoFocus,
-            (event) => {
-              context.trigger?.focus({ preventScroll: true });
-              event.preventDefault();
-            }
-          ),
-          children: /* @__PURE__ */ jsx3(
-            DismissableLayer,
-            {
-              asChild: true,
-              disableOutsidePointerEvents: true,
-              onEscapeKeyDown,
-              onPointerDownOutside,
-              onFocusOutside: (event) => event.preventDefault(),
-              onDismiss: () => context.onOpenChange(false),
-              children: /* @__PURE__ */ jsx3(
-                SelectPosition,
-                {
-                  role: "listbox",
-                  id: context.contentId,
-                  "data-state": context.open ? "open" : "closed",
-                  dir: context.dir,
-                  onContextMenu: (event) => event.preventDefault(),
-                  ...contentProps,
-                  ...popperContentProps,
-                  onPlaced: () => setIsPositioned(true),
-                  ref: composedRefs,
-                  style: {
-                    // flex layout so we can place the scroll buttons properly
-                    display: "flex",
-                    flexDirection: "column",
-                    // reset the outline by default as the content MAY get focused
-                    outline: "none",
-                    ...contentProps.style
-                  },
-                  onKeyDown: composeEventHandlers2(
-                    contentProps.onKeyDown,
-                    (event) => {
-                      const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
-                      if (event.key === "Tab") event.preventDefault();
-                      if (!isModifierKey && event.key.length === 1)
-                        handleTypeaheadSearch(event.key);
-                      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
-                        const items = getItems().filter((item) => !item.disabled);
-                        let candidateNodes = items.map((item) => item.ref.current);
-                        if (["ArrowUp", "End"].includes(event.key)) {
-                          candidateNodes = candidateNodes.slice().reverse();
-                        }
-                        if (["ArrowUp", "ArrowDown"].includes(event.key)) {
-                          const currentElement = event.target;
-                          const currentIndex = candidateNodes.indexOf(currentElement);
-                          candidateNodes = candidateNodes.slice(currentIndex + 1);
-                        }
-                        setTimeout(() => focusFirst(candidateNodes));
-                        event.preventDefault();
-                      }
-                    }
-                  )
+          disableOutsidePointerEvents: true,
+          onEscapeKeyDown,
+          onPointerDownOutside,
+          onFocusOutside: (event) => event.preventDefault(),
+          onDismiss: () => context.onOpenChange(false)
+        },
+        /* @__PURE__ */ React3.createElement(
+          SelectPosition,
+          {
+            role: "listbox",
+            id: context.contentId,
+            "data-state": context.open ? "open" : "closed",
+            dir: context.dir,
+            onContextMenu: (event) => event.preventDefault(),
+            ...contentProps,
+            ...popperContentProps,
+            onPlaced: () => setIsPositioned(true),
+            ref: composedRefs,
+            style: {
+              // flex layout so we can place the scroll buttons properly
+              display: "flex",
+              flexDirection: "column",
+              // reset the outline by default as the content MAY get focused
+              outline: "none",
+              ...contentProps.style
+            },
+            onKeyDown: composeEventHandlers2(
+              contentProps.onKeyDown,
+              (event) => {
+                const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+                if (event.key === "Tab") event.preventDefault();
+                if (!isModifierKey && event.key.length === 1)
+                  handleTypeaheadSearch(event.key);
+                if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+                  const items = getItems().filter((item) => !item.disabled);
+                  let candidateNodes = items.map((item) => item.ref.current);
+                  if (["ArrowUp", "End"].includes(event.key)) {
+                    candidateNodes = candidateNodes.slice().reverse();
+                  }
+                  if (["ArrowUp", "ArrowDown"].includes(event.key)) {
+                    const currentElement = event.target;
+                    const currentIndex = candidateNodes.indexOf(currentElement);
+                    candidateNodes = candidateNodes.slice(currentIndex + 1);
+                  }
+                  setTimeout(() => focusFirst(candidateNodes));
+                  event.preventDefault();
                 }
-              )
-            }
-          )
-        }
-      ) })
-    }
+              }
+            )
+          }
+        )
+      )
+    ))
   );
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
@@ -662,41 +652,41 @@ var SelectItemAlignedPosition = React3.forwardRef((props, forwardedRef) => {
     },
     [position, focusSelectedItem]
   );
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ React3.createElement(
     SelectViewportProvider,
     {
       scope: __scopeSelect,
       contentWrapper,
       shouldExpandOnScrollRef,
-      onScrollButtonChange: handleScrollButtonChange,
-      children: /* @__PURE__ */ jsx3(
-        "div",
+      onScrollButtonChange: handleScrollButtonChange
+    },
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        ref: setContentWrapper,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          position: "fixed",
+          zIndex: contentZIndex
+        }
+      },
+      /* @__PURE__ */ React3.createElement(
+        Primitive2.div,
         {
-          ref: setContentWrapper,
+          ...popperProps,
+          ref: composedRefs,
           style: {
-            display: "flex",
-            flexDirection: "column",
-            position: "fixed",
-            zIndex: contentZIndex
-          },
-          children: /* @__PURE__ */ jsx3(
-            Primitive2.div,
-            {
-              ...popperProps,
-              ref: composedRefs,
-              style: {
-                // When we get the height of the content, it includes borders. If we were to set
-                // the height without having `boxSizing: 'border-box'` it would be too big.
-                boxSizing: "border-box",
-                // We need to ensure the content doesn't get taller than the wrapper
-                maxHeight: "100%",
-                ...popperProps.style
-              }
-            }
-          )
+            // When we get the height of the content, it includes borders. If we were to set
+            // the height without having `boxSizing: 'border-box'` it would be too big.
+            boxSizing: "border-box",
+            // We need to ensure the content doesn't get taller than the wrapper
+            maxHeight: "100%",
+            ...popperProps.style
+          }
         }
       )
-    }
+    )
   );
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
@@ -709,7 +699,7 @@ var SelectPopperPosition = React3.forwardRef((props, forwardedRef) => {
     ...popperProps
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ React3.createElement(
     PopperPrimitive2.Content,
     {
       ...popperScope,
@@ -785,7 +775,6 @@ import React4 from "react";
 import { Primitive as Primitive3 } from "@huin-core/react-primitive";
 import { useComposedRefs as useComposedRefs4 } from "@huin-core/react-compose-refs";
 import { useLayoutEffect as useLayoutEffect2 } from "@huin-core/react-use-layout-effect";
-import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
 var VALUE_NAME = "SelectValue";
 var SelectValue = React4.forwardRef(
   (props, forwardedRef) => {
@@ -800,14 +789,14 @@ var SelectValue = React4.forwardRef(
     useLayoutEffect2(() => {
       onValueNodeHasChildrenChange(hasChildren);
     }, [onValueNodeHasChildrenChange, hasChildren]);
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ React4.createElement(
       Primitive3.span,
       {
         ...valueProps,
         ref: composedRefs,
-        style: { pointerEvents: "none" },
-        children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx4(Fragment2, { children: placeholder }) : children
-      }
+        style: { pointerEvents: "none" }
+      },
+      shouldShowPlaceholder(context.value) ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, placeholder) : children
     );
   }
 );
@@ -818,7 +807,6 @@ function shouldShowPlaceholder(value) {
 
 // packages/react/select/src/SelectTrigger.tsx
 import { composeEventHandlers as composeEventHandlers3 } from "@huin-core/primitive";
-import { jsx as jsx5 } from "react/jsx-runtime";
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var TRIGGER_NAME = "SelectTrigger";
 var SelectTrigger = React5.forwardRef((props, forwardedRef) => {
@@ -853,7 +841,7 @@ var SelectTrigger = React5.forwardRef((props, forwardedRef) => {
       };
     }
   };
-  return /* @__PURE__ */ jsx5(PopperPrimitive3.Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ React5.createElement(PopperPrimitive3.Anchor, { asChild: true, ...popperScope }, /* @__PURE__ */ React5.createElement(
     Primitive4.button,
     {
       type: "button",
@@ -897,44 +885,42 @@ var SelectTrigger = React5.forwardRef((props, forwardedRef) => {
         }
       })
     }
-  ) });
+  ));
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 
 // packages/react/select/src/SelectIcon.tsx
 import React6 from "react";
 import { Primitive as Primitive5 } from "@huin-core/react-primitive";
-import { jsx as jsx6 } from "react/jsx-runtime";
 var ICON_NAME = "SelectIcon";
 var SelectIcon = React6.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, children, ...iconProps } = props;
-    return /* @__PURE__ */ jsx6(Primitive5.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "\u25BC" });
+    return /* @__PURE__ */ React6.createElement(Primitive5.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef }, children || "\u25BC");
   }
 );
 SelectIcon.displayName = ICON_NAME;
 
 // packages/react/select/src/SelectPortal.tsx
+import React7 from "react";
 import { Portal as PortalPrimitive } from "@huin-core/react-portal";
-import { jsx as jsx7 } from "react/jsx-runtime";
 var PORTAL_NAME = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ jsx7(PortalPrimitive, { asChild: true, ...props });
+  return /* @__PURE__ */ React7.createElement(PortalPrimitive, { asChild: true, ...props });
 };
 SelectPortal.displayName = PORTAL_NAME;
 
 // packages/react/select/src/SelectGroup.tsx
-import React7 from "react";
+import React8 from "react";
 import { Primitive as Primitive6 } from "@huin-core/react-primitive";
 import { useId as useId2 } from "@huin-core/react-id";
-import { jsx as jsx8 } from "react/jsx-runtime";
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React7.forwardRef(
+var SelectGroup = React8.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...groupProps } = props;
     const groupId = useId2();
-    return /* @__PURE__ */ jsx8(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ React8.createElement(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId }, /* @__PURE__ */ React8.createElement(
       Primitive6.div,
       {
         role: "group",
@@ -942,36 +928,34 @@ var SelectGroup = React7.forwardRef(
         ...groupProps,
         ref: forwardedRef
       }
-    ) });
+    ));
   }
 );
 SelectGroup.displayName = GROUP_NAME;
 
 // packages/react/select/src/SelectLabel.tsx
-import React8 from "react";
+import React9 from "react";
 import { Primitive as Primitive7 } from "@huin-core/react-primitive";
-import { jsx as jsx9 } from "react/jsx-runtime";
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React8.forwardRef(
+var SelectLabel = React9.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...labelProps } = props;
     const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-    return /* @__PURE__ */ jsx9(Primitive7.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ React9.createElement(Primitive7.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
   }
 );
 SelectLabel.displayName = LABEL_NAME;
 
 // packages/react/select/src/SelectItem.tsx
-import React9 from "react";
+import React10 from "react";
 import { Primitive as Primitive8 } from "@huin-core/react-primitive";
 import { useComposedRefs as useComposedRefs6 } from "@huin-core/react-compose-refs";
 import { useId as useId3 } from "@huin-core/react-id";
 import { composeEventHandlers as composeEventHandlers4 } from "@huin-core/primitive";
-import { jsx as jsx10 } from "react/jsx-runtime";
 var SELECTION_KEYS = [" ", "Enter"];
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React9.forwardRef(
+var SelectItem = React10.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeSelect,
@@ -983,14 +967,14 @@ var SelectItem = React9.forwardRef(
     const context = useSelectContext(ITEM_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
     const isSelected = context.value === value;
-    const [textValue, setTextValue] = React9.useState(textValueProp ?? "");
-    const [isFocused, setIsFocused] = React9.useState(false);
+    const [textValue, setTextValue] = React10.useState(textValueProp ?? "");
+    const [isFocused, setIsFocused] = React10.useState(false);
     const composedRefs = useComposedRefs6(
       forwardedRef,
       (node) => contentContext.itemRefCallback?.(node, value, disabled)
     );
     const textId = useId3();
-    const pointerTypeRef = React9.useRef("touch");
+    const pointerTypeRef = React10.useRef("touch");
     const handleSelect = () => {
       if (!disabled) {
         context.onValueChange(value);
@@ -1002,7 +986,7 @@ var SelectItem = React9.forwardRef(
         "A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
       );
     }
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ React10.createElement(
       SelectItemContextProvider,
       {
         scope: __scopeSelect,
@@ -1010,78 +994,77 @@ var SelectItem = React9.forwardRef(
         disabled,
         textId,
         isSelected,
-        onItemTextChange: React9.useCallback((node) => {
+        onItemTextChange: React10.useCallback((node) => {
           setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
-        }, []),
-        children: /* @__PURE__ */ jsx10(
-          Collection.ItemSlot,
+        }, [])
+      },
+      /* @__PURE__ */ React10.createElement(
+        Collection.ItemSlot,
+        {
+          scope: __scopeSelect,
+          value,
+          disabled,
+          textValue
+        },
+        /* @__PURE__ */ React10.createElement(
+          Primitive8.div,
           {
-            scope: __scopeSelect,
-            value,
-            disabled,
-            textValue,
-            children: /* @__PURE__ */ jsx10(
-              Primitive8.div,
-              {
-                role: "option",
-                "aria-labelledby": textId,
-                "data-highlighted": isFocused ? "" : void 0,
-                "aria-selected": isSelected && isFocused,
-                "data-state": isSelected ? "checked" : "unchecked",
-                "aria-disabled": disabled || void 0,
-                "data-disabled": disabled ? "" : void 0,
-                tabIndex: disabled ? void 0 : -1,
-                ...itemProps,
-                ref: composedRefs,
-                onFocus: composeEventHandlers4(itemProps.onFocus, () => setIsFocused(true)),
-                onBlur: composeEventHandlers4(itemProps.onBlur, () => setIsFocused(false)),
-                onClick: composeEventHandlers4(itemProps.onClick, () => {
-                  if (pointerTypeRef.current !== "mouse") handleSelect();
-                }),
-                onPointerUp: composeEventHandlers4(itemProps.onPointerUp, () => {
-                  if (pointerTypeRef.current === "mouse") handleSelect();
-                }),
-                onPointerDown: composeEventHandlers4(itemProps.onPointerDown, (event) => {
-                  pointerTypeRef.current = event.pointerType;
-                }),
-                onPointerMove: composeEventHandlers4(itemProps.onPointerMove, (event) => {
-                  pointerTypeRef.current = event.pointerType;
-                  if (disabled) {
-                    contentContext.onItemLeave?.();
-                  } else if (pointerTypeRef.current === "mouse") {
-                    event.currentTarget.focus({ preventScroll: true });
-                  }
-                }),
-                onPointerLeave: composeEventHandlers4(itemProps.onPointerLeave, (event) => {
-                  if (event.currentTarget === document.activeElement) {
-                    contentContext.onItemLeave?.();
-                  }
-                }),
-                onKeyDown: composeEventHandlers4(itemProps.onKeyDown, (event) => {
-                  const isTypingAhead = contentContext.searchRef?.current !== "";
-                  if (isTypingAhead && event.key === " ") return;
-                  if (SELECTION_KEYS.includes(event.key)) handleSelect();
-                  if (event.key === " ") event.preventDefault();
-                })
+            role: "option",
+            "aria-labelledby": textId,
+            "data-highlighted": isFocused ? "" : void 0,
+            "aria-selected": isSelected && isFocused,
+            "data-state": isSelected ? "checked" : "unchecked",
+            "aria-disabled": disabled || void 0,
+            "data-disabled": disabled ? "" : void 0,
+            tabIndex: disabled ? void 0 : -1,
+            ...itemProps,
+            ref: composedRefs,
+            onFocus: composeEventHandlers4(itemProps.onFocus, () => setIsFocused(true)),
+            onBlur: composeEventHandlers4(itemProps.onBlur, () => setIsFocused(false)),
+            onClick: composeEventHandlers4(itemProps.onClick, () => {
+              if (pointerTypeRef.current !== "mouse") handleSelect();
+            }),
+            onPointerUp: composeEventHandlers4(itemProps.onPointerUp, () => {
+              if (pointerTypeRef.current === "mouse") handleSelect();
+            }),
+            onPointerDown: composeEventHandlers4(itemProps.onPointerDown, (event) => {
+              pointerTypeRef.current = event.pointerType;
+            }),
+            onPointerMove: composeEventHandlers4(itemProps.onPointerMove, (event) => {
+              pointerTypeRef.current = event.pointerType;
+              if (disabled) {
+                contentContext.onItemLeave?.();
+              } else if (pointerTypeRef.current === "mouse") {
+                event.currentTarget.focus({ preventScroll: true });
               }
-            )
+            }),
+            onPointerLeave: composeEventHandlers4(itemProps.onPointerLeave, (event) => {
+              if (event.currentTarget === document.activeElement) {
+                contentContext.onItemLeave?.();
+              }
+            }),
+            onKeyDown: composeEventHandlers4(itemProps.onKeyDown, (event) => {
+              const isTypingAhead = contentContext.searchRef?.current !== "";
+              if (isTypingAhead && event.key === " ") return;
+              if (SELECTION_KEYS.includes(event.key)) handleSelect();
+              if (event.key === " ") event.preventDefault();
+            })
           }
         )
-      }
+      )
     );
   }
 );
 SelectItem.displayName = ITEM_NAME;
 
 // packages/react/select/src/SelectItemText.tsx
-import React10 from "react";
+import React11 from "react";
 import { Primitive as Primitive9 } from "@huin-core/react-primitive";
 import { useComposedRefs as useComposedRefs7 } from "@huin-core/react-compose-refs";
 import { useLayoutEffect as useLayoutEffect3 } from "@huin-core/react-use-layout-effect";
 import ReactDOM2 from "react-dom";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React10.forwardRef((props, forwardedRef) => {
+var SelectItemText = React11.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
@@ -1090,7 +1073,7 @@ var SelectItemText = React10.forwardRef((props, forwardedRef) => {
     ITEM_TEXT_NAME,
     __scopeSelect
   );
-  const [itemTextNode, setItemTextNode] = React10.useState(null);
+  const [itemTextNode, setItemTextNode] = React11.useState(null);
   const composedRefs = useComposedRefs7(
     forwardedRef,
     (node) => setItemTextNode(node),
@@ -1102,15 +1085,15 @@ var SelectItemText = React10.forwardRef((props, forwardedRef) => {
     )
   );
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React10.useMemo(
-    () => /* @__PURE__ */ jsx11(
+  const nativeOption = React11.useMemo(
+    () => /* @__PURE__ */ React11.createElement(
       "option",
       {
+        key: itemContext.value,
         value: itemContext.value,
-        disabled: itemContext.disabled,
-        children: textContent
+        disabled: itemContext.disabled
       },
-      itemContext.value
+      textContent
     ),
     [itemContext.disabled, itemContext.value, textContent]
   );
@@ -1119,37 +1102,32 @@ var SelectItemText = React10.forwardRef((props, forwardedRef) => {
     onNativeOptionAdd(nativeOption);
     return () => onNativeOptionRemove(nativeOption);
   }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx11(Primitive9.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
-    itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM2.createPortal(itemTextProps.children, context.valueNode) : null
-  ] });
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Primitive9.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM2.createPortal(itemTextProps.children, context.valueNode) : null);
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 
 // packages/react/select/src/SelectItemIndicator.tsx
-import React11 from "react";
+import React12 from "react";
 import { Primitive as Primitive10 } from "@huin-core/react-primitive";
-import { jsx as jsx12 } from "react/jsx-runtime";
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React11.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React12.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? /* @__PURE__ */ jsx12(Primitive10.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
+  return itemContext.isSelected ? /* @__PURE__ */ React12.createElement(Primitive10.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 
 // packages/react/select/src/SelectScrollUpButton.tsx
-import React13 from "react";
+import React14 from "react";
 
 // packages/react/select/src/SelectScrollDownButton.tsx
-import React12 from "react";
+import React13 from "react";
 import { useComposedRefs as useComposedRefs8 } from "@huin-core/react-compose-refs";
 import { useLayoutEffect as useLayoutEffect4 } from "@huin-core/react-use-layout-effect";
 import { Primitive as Primitive11 } from "@huin-core/react-primitive";
 import { composeEventHandlers as composeEventHandlers5 } from "@huin-core/primitive";
-import { jsx as jsx13 } from "react/jsx-runtime";
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React12.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React13.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(
     SCROLL_DOWN_BUTTON_NAME,
     props.__scopeSelect
@@ -1158,7 +1136,7 @@ var SelectScrollDownButton = React12.forwardRef((props, forwardedRef) => {
     SCROLL_DOWN_BUTTON_NAME,
     props.__scopeSelect
   );
-  const [canScrollDown, setCanScrollDown] = React12.useState(false);
+  const [canScrollDown, setCanScrollDown] = React13.useState(false);
   const composedRefs = useComposedRefs8(
     forwardedRef,
     viewportContext.onScrollButtonChange
@@ -1177,7 +1155,7 @@ var SelectScrollDownButton = React12.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll2);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollDown ? /* @__PURE__ */ jsx13(
+  return canScrollDown ? /* @__PURE__ */ React13.createElement(
     SelectScrollButtonImpl,
     {
       ...props,
@@ -1192,21 +1170,21 @@ var SelectScrollDownButton = React12.forwardRef((props, forwardedRef) => {
   ) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React12.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React13.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext(
     "SelectScrollButton",
     __scopeSelect
   );
-  const autoScrollTimerRef = React12.useRef(null);
+  const autoScrollTimerRef = React13.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React12.useCallback(() => {
+  const clearAutoScrollTimer = React13.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect4(() => {
@@ -1215,7 +1193,7 @@ var SelectScrollButtonImpl = React12.forwardRef((props, forwardedRef) => {
     );
     activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
   }, [getItems]);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ React13.createElement(
     Primitive11.div,
     {
       "aria-hidden": true,
@@ -1252,9 +1230,8 @@ var SelectScrollButtonImpl = React12.forwardRef((props, forwardedRef) => {
 // packages/react/select/src/SelectScrollUpButton.tsx
 import { useComposedRefs as useComposedRefs9 } from "@huin-core/react-compose-refs";
 import { useLayoutEffect as useLayoutEffect5 } from "@huin-core/react-use-layout-effect";
-import { jsx as jsx14 } from "react/jsx-runtime";
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React13.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React14.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(
     SCROLL_UP_BUTTON_NAME,
     props.__scopeSelect
@@ -1263,7 +1240,7 @@ var SelectScrollUpButton = React13.forwardRef((props, forwardedRef) => {
     SCROLL_UP_BUTTON_NAME,
     props.__scopeSelect
   );
-  const [canScrollUp, setCanScrollUp] = React13.useState(false);
+  const [canScrollUp, setCanScrollUp] = React14.useState(false);
   const composedRefs = useComposedRefs9(
     forwardedRef,
     viewportContext.onScrollButtonChange
@@ -1281,7 +1258,7 @@ var SelectScrollUpButton = React13.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll2);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollUp ? /* @__PURE__ */ jsx14(
+  return canScrollUp ? /* @__PURE__ */ React14.createElement(
     SelectScrollButtonImpl,
     {
       ...props,
@@ -1298,28 +1275,26 @@ var SelectScrollUpButton = React13.forwardRef((props, forwardedRef) => {
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 
 // packages/react/select/src/SelectSeparator.tsx
-import React14 from "react";
+import React15 from "react";
 import { Primitive as Primitive12 } from "@huin-core/react-primitive";
-import { jsx as jsx15 } from "react/jsx-runtime";
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React14.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React15.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
-  return /* @__PURE__ */ jsx15(Primitive12.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ React15.createElement(Primitive12.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 
 // packages/react/select/src/SelectArrow.tsx
 import * as PopperPrimitive4 from "@huin-core/react-popper";
-import React15 from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import React16 from "react";
 var ARROW_NAME = "SelectArrow";
-var SelectArrow = React15.forwardRef(
+var SelectArrow = React16.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
     const context = useSelectContext(ARROW_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
-    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx16(
+    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ React16.createElement(
       PopperPrimitive4.Arrow,
       {
         ...popperScope,