@yamada-ui/autocomplete 1.5.4-next-20241005220055 → 1.6.0-dev-20241011151311

package/dist/multi-autocomplete.js

@@ -35,9 +35,9 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_utils = require("@yamada-ui/utils");
 var {
   DescendantsContextProvider: AutocompleteDescendantsContextProvider,
-  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendant: useAutocompleteDescendant,
   useDescendants: useAutocompleteDescendants,
-  useDescendant: useAutocompleteDescendant
+  useDescendantsContext: useAutocompleteDescendantsContext
 } = (0, import_use_descendant.createDescendant)();
 var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
   name: "AutocompleteContext",
@@ -59,27 +59,27 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
   ({ className, children, __css, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
     const css = {
-      position: "absolute",
-      top: "50%",
-      transform: "translateY(-50%)",
-      display: "inline-flex",
       alignItems: "center",
+      cursor: "pointer",
+      display: "inline-flex",
       justifyContent: "center",
       pointerEvents: "none",
-      cursor: "pointer",
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
       ...styles.icon,
       ...__css
     };
     const validChildren = (0, import_utils2.getValidChildren)(children);
     const cloneChildren = validChildren.map(
       (child) => (0, import_react.cloneElement)(child, {
-        focusable: false,
-        "aria-hidden": true,
         style: {
-          maxWidth: "1em",
+          color: "currentColor",
           maxHeight: "1em",
-          color: "currentColor"
-        }
+          maxWidth: "1em"
+        },
+        "aria-hidden": true,
+        focusable: false
       })
     );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -112,11 +112,11 @@ var AutocompleteClearIcon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     AutocompleteIcon,
     {
-      "aria-label": "Clear value",
       className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
+      "aria-label": "Clear value",
       __css: styles.clearIcon,
       ...rest,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { h: "0.5em", w: "0.5em" })
     }
   );
 };
@@ -125,11 +125,11 @@ AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
 var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useAutocompleteContext();
   const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
     alignItems: "center",
+    display: "inline-flex",
+    flexShrink: 0,
     fontSize: "0.85em",
+    justifyContent: "center",
     ...styles.itemIcon
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -150,41 +150,50 @@ var import_utils3 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var isTargetOption = (target) => {
   var _a;
-  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
+  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
 };
 var useAutocompleteOption = (props) => {
   var _a, _b;
   const {
-    value,
+    closeOnSelect: generalCloseOnSelect,
+    focusedIndex,
+    inputRef,
     omitSelectedValues,
+    setFocusedIndex,
+    value,
+    optionProps,
     onChange,
     onChangeLabel,
-    focusedIndex,
-    setFocusedIndex,
     onClose,
-    closeOnSelect: generalCloseOnSelect,
-    optionProps,
-    inputRef,
     onFocusNext
   } = useAutocompleteContext();
   const id = (0, import_react2.useId)();
   let {
+    children,
+    closeOnSelect: customCloseOnSelect,
     icon: customIcon,
     isDisabled,
     isFocusable,
-    closeOnSelect: customCloseOnSelect,
-    children,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
   const trulyDisabled = !!isDisabled && !isFocusable;
   const itemRef = (0, import_react2.useRef)(null);
-  const { index, register, descendants } = useAutocompleteDescendant({
+  const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
   const values = descendants.values();
   const frontValues = values.slice(0, index);
   const isMulti = (0, import_utils3.isArray)(value);
+  if ((0, import_utils3.isUndefined)(optionValue)) {
+    if ((0, import_utils3.isString)(children) || (0, import_utils3.isNumber)(children)) {
+      optionValue = children.toString();
+    } else {
+      console.warn(
+        `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+      );
+    }
+  }
   const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
   const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
   const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
@@ -229,27 +238,27 @@ var useAutocompleteOption = (props) => {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
         height: "1px",
-        width: "1px",
         margin: "-1px",
-        padding: "0px",
         overflow: "hidden",
+        padding: "0px",
+        position: "absolute",
         whiteSpace: "nowrap",
-        position: "absolute"
+        width: "1px"
       };
       return {
-        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
         id,
+        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
         role: "option",
         ...computedProps,
         ...props2,
-        tabIndex: -1,
         style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
-        "data-target": (0, import_utils3.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
-        "data-focus": (0, import_utils3.dataAttr)(isFocused),
-        "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
         "aria-checked": isSelected,
         "aria-disabled": (0, import_utils3.ariaAttr)(isDisabled),
+        "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+        "data-focus": (0, import_utils3.dataAttr)(isFocused),
+        "data-target": (0, import_utils3.dataAttr)(true),
+        "data-value": optionValue != null ? optionValue : "",
+        tabIndex: -1,
         onClick: (0, import_utils3.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       };
     },
@@ -267,10 +276,10 @@ var useAutocompleteOption = (props) => {
     ]
   );
   return {
-    isSelected,
-    isFocused,
-    customIcon,
     children,
+    customIcon,
+    isFocused,
+    isSelected,
     getOptionProps
   };
 };
@@ -282,19 +291,19 @@ var useAutocompleteCreate = () => {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
         height: "1px",
-        width: "1px",
         margin: "-1px",
-        padding: "0px",
         overflow: "hidden",
+        padding: "0px",
+        position: "absolute",
         whiteSpace: "nowrap",
-        position: "absolute"
+        width: "1px"
       };
       return {
         ref,
         ...props,
-        tabIndex: -1,
         style: isHit ? style : void 0,
         "data-focus": (0, import_utils3.dataAttr)(!isHit),
+        tabIndex: -1,
         onClick: (0, import_utils3.handlerAll)(props.onClick, onCreate)
       };
     },
@@ -303,25 +312,25 @@ var useAutocompleteCreate = () => {
   return { getCreateProps };
 };
 var useAutocompleteEmpty = () => {
-  const { isHit, isEmpty } = useAutocompleteContext();
+  const { isEmpty, isHit } = useAutocompleteContext();
   const getEmptyProps = (0, import_react2.useCallback)(
     (props = {}, ref = null) => {
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
         height: "1px",
-        width: "1px",
         margin: "-1px",
-        padding: "0px",
         overflow: "hidden",
+        padding: "0px",
+        position: "absolute",
         whiteSpace: "nowrap",
-        position: "absolute"
+        width: "1px"
       };
       return {
         ref,
         ...props,
-        tabIndex: -1,
-        style: isHit && !isEmpty ? style : void 0
+        style: isHit && !isEmpty ? style : void 0,
+        tabIndex: -1
       };
     },
     [isHit, isEmpty]
@@ -332,21 +341,21 @@ var useAutocompleteEmpty = () => {
 // src/autocomplete-create.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AutocompleteCreate = (0, import_core2.forwardRef)(
-  ({ className, icon, children, ...rest }, ref) => {
+  ({ className, children, icon, ...rest }, ref) => {
     const { inputValue, styles } = useAutocompleteContext();
     const { getCreateProps } = useAutocompleteCreate();
     children != null ? children : children = inputValue;
     const css = {
-      textDecoration: "none",
+      alignItems: "center",
       color: "inherit",
-      userSelect: "none",
       display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
       flex: "0 0 auto",
-      outline: 0,
       gap: "0.75rem",
+      outline: 0,
+      textAlign: "start",
+      textDecoration: "none",
+      userSelect: "none",
+      width: "100%",
       ...styles.item
     };
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -357,7 +366,7 @@ var AutocompleteCreate = (0, import_core2.forwardRef)(
         ...getCreateProps(rest, ref),
         children: [
           icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompletePlusIcon, {}) }) : null,
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children: (0, import_utils4.runIfFunc)(children, inputValue) }) : (0, import_utils4.runIfFunc)(children, inputValue)
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1, pointerEvents: "none" }, lineClamp: 1, children: (0, import_utils4.runIfFunc)(children, inputValue) }) : (0, import_utils4.runIfFunc)(children, inputValue)
         ]
       }
     );
@@ -365,11 +374,11 @@ var AutocompleteCreate = (0, import_core2.forwardRef)(
 );
 AutocompleteCreate.displayName = "AutocompleteCreate";
 AutocompleteCreate.__ui__ = "AutocompleteCreate";
-var AutocompletePlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var AutocompletePlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { height: "1em", viewBox: "0 0 45.402 45.402", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "path",
   {
-    fill: "currentColor",
-    d: "M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141   c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27   c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435   c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z"
+    d: "M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141   c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27   c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435   c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z",
+    fill: "currentColor"
   }
 ) });
 AutocompletePlusIcon.displayName = "AutocompletePlusIcon";
@@ -380,22 +389,22 @@ var import_core3 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var AutocompleteEmpty = (0, import_core3.forwardRef)(
-  ({ className, icon, children, ...rest }, ref) => {
+  ({ className, children, icon, ...rest }, ref) => {
     const { emptyMessage, styles } = useAutocompleteContext();
     const { getEmptyProps } = useAutocompleteEmpty();
     children != null ? children : children = emptyMessage;
     const css = {
-      textDecoration: "none",
+      alignItems: "center",
       color: "inherit",
-      userSelect: "none",
       display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
       flex: "0 0 auto",
-      outline: 0,
       gap: "0.75rem",
+      outline: 0,
       pointerEvents: "none",
+      textAlign: "start",
+      textDecoration: "none",
+      userSelect: "none",
+      width: "100%",
       ...styles.item
     };
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -406,7 +415,7 @@ var AutocompleteEmpty = (0, import_core3.forwardRef)(
         ...getEmptyProps(rest, ref),
         children: [
           icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteMinusIcon, {}) }) : null,
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children }) : children
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { flex: 1, pointerEvents: "none" }, lineClamp: 1, children }) : children
         ]
       }
     );
@@ -414,11 +423,11 @@ var AutocompleteEmpty = (0, import_core3.forwardRef)(
 );
 AutocompleteEmpty.displayName = "AutocompleteEmpty";
 AutocompleteEmpty.__ui__ = "AutocompleteEmpty";
-var AutocompleteMinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var AutocompleteMinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { height: "1em", viewBox: "0 0 448 512", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "path",
   {
-    fill: "currentColor",
-    d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
+    d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z",
+    fill: "currentColor"
   }
 ) });
 AutocompleteMinusIcon.displayName = "AutocompleteMinusIcon";
@@ -474,20 +483,20 @@ var useAutocompleteList = () => {
     (props = {}, ref = null) => {
       var _a;
       return {
-        as: "ul",
+        id: (_a = props.id) != null ? _a : uuid,
         ref: (0, import_utils6.mergeRefs)(listRef, ref),
+        as: "ul",
+        position: "relative",
         role: "listbox",
         tabIndex: -1,
-        position: "relative",
-        id: (_a = props.id) != null ? _a : uuid,
         ...props
       };
     },
     [listRef, uuid]
   );
   return {
-    onAnimationComplete,
-    getListProps
+    getListProps,
+    onAnimationComplete
   };
 };
 
@@ -496,21 +505,21 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var AutocompleteList = (0, import_core4.forwardRef)(
   ({
     className,
-    w,
-    width,
-    minW,
-    minWidth,
+    children,
+    footer,
+    header,
     maxW,
     maxWidth,
+    minW,
+    minWidth,
+    w,
+    width,
     contentProps,
-    header,
-    footer,
-    children,
     ...rest
   }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const { styles } = useAutocompleteContext();
-    const { onAnimationComplete, getListProps } = useAutocompleteList();
+    const { getListProps, onAnimationComplete } = useAutocompleteList();
     width != null ? width : width = w;
     width != null ? width : width = (_c = (_a = styles.list) == null ? void 0 : _a.width) != null ? _c : (_b = styles.list) == null ? void 0 : _b.w;
     minWidth != null ? minWidth : minWidth = minW;
@@ -522,10 +531,10 @@ var AutocompleteList = (0, import_core4.forwardRef)(
       {
         as: "div",
         className: "ui-autocomplete__popover",
-        width,
-        minWidth,
         maxWidth,
-        __css: { ...styles.content, width, minWidth, maxWidth },
+        minWidth,
+        width,
+        __css: { ...styles.content, maxWidth, minWidth, width },
         ...contentProps,
         onAnimationComplete: (0, import_utils7.handlerAll)(
           contentProps == null ? void 0 : contentProps.onAnimationComplete,
@@ -581,19 +590,19 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var AutocompleteOption = (0, import_core5.forwardRef)(
   ({ className, icon, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
-    const { isSelected, customIcon, children, getOptionProps } = useAutocompleteOption(rest);
+    const { children, customIcon, isSelected, getOptionProps } = useAutocompleteOption(rest);
     icon != null ? icon : icon = customIcon;
     const css = {
-      textDecoration: "none",
+      alignItems: "center",
       color: "inherit",
-      userSelect: "none",
       display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
       flex: "0 0 auto",
-      outline: 0,
       gap: "0.75rem",
+      outline: 0,
+      textAlign: "start",
+      textDecoration: "none",
+      userSelect: "none",
+      width: "100%",
       ...styles.item
     };
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -612,7 +621,7 @@ var AutocompleteOption = (0, import_core5.forwardRef)(
 );
 AutocompleteOption.displayName = "AutocompleteOption";
 AutocompleteOption.__ui__ = "AutocompleteOption";
-var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   "polygon",
   {
     fill: "currentColor",
@@ -634,7 +643,7 @@ var useAutocompleteOptionGroup = ({
   label,
   ...rest
 }) => {
-  const { value, omitSelectedValues } = useAutocompleteContext();
+  const { omitSelectedValues, value } = useAutocompleteContext();
   const isMulti = (0, import_utils9.isArray)(value);
   const descendants = useAutocompleteDescendantsContext();
   const values = descendants.values();
@@ -646,7 +655,7 @@ var useAutocompleteOptionGroup = ({
   ) : [];
   const selectedIndexes = selectedValues.map(({ index }) => index);
   const childValues = values.filter(
-    ({ node, index }) => {
+    ({ index, node }) => {
       var _a;
       return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
     }
@@ -659,12 +668,12 @@ var useAutocompleteOptionGroup = ({
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
         height: "1px",
-        width: "1px",
         margin: "-1px",
-        padding: "0px",
         overflow: "hidden",
+        padding: "0px",
+        position: "absolute",
         whiteSpace: "nowrap",
-        position: "absolute"
+        width: "1px"
       };
       return {
         ref,
@@ -699,12 +708,12 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var AutocompleteOptionGroup = (0, import_core7.forwardRef)(
   ({
     className,
+    children,
     color,
     h,
     height,
     minH,
     minHeight,
-    children,
     labelProps,
     ...rest
   }, ref) => {
@@ -720,15 +729,15 @@ var AutocompleteOptionGroup = (0, import_core7.forwardRef)(
           "ui-autocomplete__item--group",
           className
         ),
-        __css: { w: "100%", h: "fit-content", color },
+        __css: { color, h: "fit-content", w: "100%" },
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_core7.ui.span,
             {
               className: "ui-autocomplete__item__group-label",
-              __css: styles.groupLabel,
               lineClamp: 1,
+              __css: styles.groupLabel,
               ...labelProps,
               children: label
             }
@@ -753,64 +762,79 @@ AutocompleteOptionGroup.__ui__ = "AutocompleteOptionGroup";
 // src/use-autocomplete.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var kanaMap = {
-  \uFF76\uFF9E: "\u30AC",
-  \uFF77\uFF9E: "\u30AE",
-  \uFF78\uFF9E: "\u30B0",
-  \uFF79\uFF9E: "\u30B2",
-  \uFF7A\uFF9E: "\u30B4",
-  \uFF7B\uFF9E: "\u30B6",
-  \uFF7C\uFF9E: "\u30B8",
-  \uFF7D\uFF9E: "\u30BA",
-  \uFF7E\uFF9E: "\u30BC",
-  \uFF7F\uFF9E: "\u30BE",
-  \uFF80\uFF9E: "\u30C0",
-  \uFF81\uFF9E: "\u30C2",
-  \uFF82\uFF9E: "\u30C5",
-  \uFF83\uFF9E: "\u30C7",
-  \uFF84\uFF9E: "\u30C9",
-  \uFF8A\uFF9E: "\u30D0",
-  \uFF8B\uFF9E: "\u30D3",
-  \uFF8C\uFF9E: "\u30D6",
-  \uFF8D\uFF9E: "\u30D9",
-  \uFF8E\uFF9E: "\u30DC",
-  \uFF8A\uFF9F: "\u30D1",
-  \uFF8B\uFF9F: "\u30D4",
-  \uFF8C\uFF9F: "\u30D7",
-  \uFF8D\uFF9F: "\u30DA",
-  \uFF8E\uFF9F: "\u30DD",
-  \uFF73\uFF9E: "\u30F4",
-  \uFF9C\uFF9E: "\u30F7",
+  "\uFF61": "\u3002",
+  "\uFF62": "\u300C",
+  "\uFF63": "\u300D",
+  "\uFF64": "\u3001",
+  "\uFF65": "\u30FB",
+  \uFF66: "\u30F2",
   \uFF66\uFF9E: "\u30FA",
+  \uFF67: "\u30A1",
+  \uFF68: "\u30A3",
+  \uFF69: "\u30A5",
+  \uFF6A: "\u30A7",
+  \uFF6B: "\u30A9",
+  \uFF6C: "\u30E3",
+  \uFF6D: "\u30E5",
+  \uFF6E: "\u30E7",
+  \uFF6F: "\u30C3",
+  \uFF70: "\u30FC",
   \uFF71: "\u30A2",
   \uFF72: "\u30A4",
   \uFF73: "\u30A6",
+  \uFF73\uFF9E: "\u30F4",
   \uFF74: "\u30A8",
   \uFF75: "\u30AA",
   \uFF76: "\u30AB",
+  \uFF76\uFF9E: "\u30AC",
   \uFF77: "\u30AD",
+  \uFF77\uFF9E: "\u30AE",
   \uFF78: "\u30AF",
+  \uFF78\uFF9E: "\u30B0",
   \uFF79: "\u30B1",
+  \uFF79\uFF9E: "\u30B2",
   \uFF7A: "\u30B3",
+  \uFF7A\uFF9E: "\u30B4",
   \uFF7B: "\u30B5",
+  \uFF7B\uFF9E: "\u30B6",
   \uFF7C: "\u30B7",
+  \uFF7C\uFF9E: "\u30B8",
   \uFF7D: "\u30B9",
+  \uFF7D\uFF9E: "\u30BA",
   \uFF7E: "\u30BB",
+  \uFF7E\uFF9E: "\u30BC",
   \uFF7F: "\u30BD",
+  \uFF7F\uFF9E: "\u30BE",
   \uFF80: "\u30BF",
+  \uFF80\uFF9E: "\u30C0",
   \uFF81: "\u30C1",
+  \uFF81\uFF9E: "\u30C2",
   \uFF82: "\u30C4",
+  \uFF82\uFF9E: "\u30C5",
   \uFF83: "\u30C6",
+  \uFF83\uFF9E: "\u30C7",
   \uFF84: "\u30C8",
+  \uFF84\uFF9E: "\u30C9",
   \uFF85: "\u30CA",
   \uFF86: "\u30CB",
   \uFF87: "\u30CC",
   \uFF88: "\u30CD",
   \uFF89: "\u30CE",
   \uFF8A: "\u30CF",
+  \uFF8A\uFF9E: "\u30D0",
+  \uFF8A\uFF9F: "\u30D1",
   \uFF8B: "\u30D2",
+  \uFF8B\uFF9E: "\u30D3",
+  \uFF8B\uFF9F: "\u30D4",
   \uFF8C: "\u30D5",
+  \uFF8C\uFF9E: "\u30D6",
+  \uFF8C\uFF9F: "\u30D7",
   \uFF8D: "\u30D8",
+  \uFF8D\uFF9E: "\u30D9",
+  \uFF8D\uFF9F: "\u30DA",
   \uFF8E: "\u30DB",
+  \uFF8E\uFF9E: "\u30DC",
+  \uFF8E\uFF9F: "\u30DD",
   \uFF8F: "\u30DE",
   \uFF90: "\u30DF",
   \uFF91: "\u30E0",
@@ -825,23 +849,8 @@ var kanaMap = {
   \uFF9A: "\u30EC",
   \uFF9B: "\u30ED",
   \uFF9C: "\u30EF",
-  \uFF66: "\u30F2",
-  \uFF9D: "\u30F3",
-  \uFF67: "\u30A1",
-  \uFF68: "\u30A3",
-  \uFF69: "\u30A5",
-  \uFF6A: "\u30A7",
-  \uFF6B: "\u30A9",
-  \uFF6F: "\u30C3",
-  \uFF6C: "\u30E3",
-  \uFF6D: "\u30E5",
-  \uFF6E: "\u30E7",
-  "\uFF61": "\u3002",
-  "\uFF64": "\u3001",
-  \uFF70: "\u30FC",
-  "\uFF62": "\u300C",
-  "\uFF63": "\u300D",
-  "\uFF65": "\u30FB"
+  \uFF9C\uFF9E: "\u30F7",
+  \uFF9D: "\u30F3"
 };
 var defaultFormat = (value) => {
   value = value.replace(
@@ -869,46 +878,46 @@ var flattenItems = (items) => {
 };
 var useAutocomplete = (props) => {
   const {
-    value: valueProp,
-    defaultValue,
-    onChange: onChangeProp,
-    onCreate: onCreateProp,
-    onSearch: onSearchProp,
-    closeOnSelect = true,
-    omitSelectedValues = false,
-    maxSelectValues,
     allowCreate = false,
     allowFree = false,
-    insertPositionItem = "first",
-    emptyMessage = "No results found",
-    format = defaultFormat,
-    optionProps,
-    placeholder,
-    onKeyDown: onKeyDownProp,
-    isOpen: isOpenProp,
-    defaultIsOpen,
-    onOpen: onOpenProp,
-    onClose: onCloseProp,
+    animation,
+    boundary,
+    children,
+    closeDelay,
     closeOnBlur = true,
     closeOnEsc = true,
-    openDelay,
-    closeDelay,
+    closeOnSelect = true,
+    defaultIsOpen,
+    defaultValue,
+    duration = 0.2,
+    emptyMessage = "No results found",
+    eventListeners,
+    flip,
+    format = defaultFormat,
+    gutter,
+    insertPositionItem = "first",
     isLazy,
+    isOpen: isOpenProp,
+    items,
     lazyBehavior,
-    animation,
-    duration = 0.2,
+    matchWidth = true,
+    maxSelectValues,
+    modifiers,
     offset,
-    gutter,
+    omitSelectedValues = false,
+    openDelay,
+    placeholder,
+    placement = "bottom-start",
     preventOverflow,
-    flip,
-    matchWidth = true,
-    boundary,
-    eventListeners,
     strategy,
-    placement = "bottom-start",
-    modifiers,
-    items,
-    children,
+    value: valueProp,
+    optionProps,
+    onChange: onChangeProp,
+    onClose: onCloseProp,
+    onCreate: onCreateProp,
+    onKeyDown: onKeyDownProp,
+    onOpen: onOpenProp,
+    onSearch: onSearchProp,
     ...rest
   } = (0, import_form_control.useFormControlProps)(props);
   const {
@@ -927,8 +936,8 @@ var useAutocomplete = (props) => {
   const prevValue = (0, import_react5.useRef)(void 0);
   const [resolvedItems, setResolvedItems] = (0, import_react5.useState)(items ? JSON.parse(JSON.stringify(items)) : void 0);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    value: valueProp,
     defaultValue,
+    value: valueProp,
     onChange: onChangeProp
   });
   const [label, setLabel] = (0, import_react5.useState)(void 0);
@@ -938,13 +947,13 @@ var useAutocomplete = (props) => {
   const [isHit, setIsHit] = (0, import_react5.useState)(true);
   const {
     isOpen,
-    onOpen: onInternalOpen,
-    onClose
+    onClose,
+    onOpen: onInternalOpen
   } = (0, import_use_disclosure.useDisclosure)({
-    isOpen: isOpenProp,
     defaultIsOpen,
-    onOpen: onOpenProp,
-    onClose: onCloseProp
+    isOpen: isOpenProp,
+    onClose: onCloseProp,
+    onOpen: onOpenProp
   });
   const isFocused = focusedIndex > -1;
   const isCreate = focusedIndex === -2 && allowCreate;
@@ -970,7 +979,7 @@ var useAutocomplete = (props) => {
   );
   const selectedIndexes = selectedValues.map(({ index }) => index);
   const enabledValues = descendants.enabledValues(
-    ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
+    ({ index, node }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils11.getValidChildren)(children);
   const computedChildren = (0, import_react5.useMemo)(
@@ -979,7 +988,7 @@ var useAutocomplete = (props) => {
         const { label: label2, value: value2, ...props2 } = item;
         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i);
       } else if ("items" in item) {
-        const { label: label2, items: items2 = [], ...props2 } = item;
+        const { items: items2 = [], label: label2, ...props2 } = item;
         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOptionGroup, { label: label2, ...props2, children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2)) }, i);
       }
     }),
@@ -994,6 +1003,7 @@ var useAutocomplete = (props) => {
   }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
   const onFocusFirst = (0, import_react5.useCallback)(() => {
     const id2 = setTimeout(() => {
+      var _a;
       if (isEmpty || isAllSelected) return;
       const first = descendants.enabledFirstValue(
         ({ node }) => "target" in node.dataset
@@ -1004,7 +1014,7 @@ var useAutocomplete = (props) => {
       } else {
         if (selectedIndexes.includes(first.index)) {
           const enabledFirst = enabledValues[0];
-          setFocusedIndex(enabledFirst.index);
+          setFocusedIndex((_a = enabledFirst == null ? void 0 : enabledFirst.index) != null ? _a : -1);
         } else {
           setFocusedIndex(first.index);
         }
@@ -1022,6 +1032,7 @@ var useAutocomplete = (props) => {
   ]);
   const onFocusLast = (0, import_react5.useCallback)(() => {
     const id2 = setTimeout(() => {
+      var _a;
       if (isEmpty || isAllSelected) return;
       const last = descendants.enabledLastValue(
         ({ node }) => "target" in node.dataset
@@ -1032,7 +1043,7 @@ var useAutocomplete = (props) => {
       } else {
         if (selectedIndexes.includes(last.index)) {
           const enabledLast = enabledValues.reverse()[0];
-          setFocusedIndex(enabledLast.index);
+          setFocusedIndex((_a = enabledLast == null ? void 0 : enabledLast.index) != null ? _a : -1);
         } else {
           setFocusedIndex(last.index);
         }
@@ -1064,7 +1075,7 @@ var useAutocomplete = (props) => {
   const onFocusNext = (0, import_react5.useCallback)(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
-        var _a;
+        var _a, _b;
         const next = descendants.enabledNextValue(
           index,
           ({ node }) => "target" in node.dataset
@@ -1075,7 +1086,7 @@ var useAutocomplete = (props) => {
         } else {
           if (selectedIndexes.includes(next.index)) {
             const enabledNext = (_a = enabledValues.find(({ index: index2 }) => next.index < index2)) != null ? _a : enabledValues[0];
-            setFocusedIndex(enabledNext.index);
+            setFocusedIndex((_b = enabledNext == null ? void 0 : enabledNext.index) != null ? _b : -1);
           } else {
             setFocusedIndex(next.index);
           }
@@ -1095,7 +1106,7 @@ var useAutocomplete = (props) => {
   const onFocusPrev = (0, import_react5.useCallback)(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
-        var _a;
+        var _a, _b;
         const prev = descendants.enabledPrevValue(
           index,
           ({ node }) => "target" in node.dataset
@@ -1106,7 +1117,7 @@ var useAutocomplete = (props) => {
         } else {
           if (selectedIndexes.includes(prev.index)) {
             const enabledPrev = (_a = enabledValues.reverse().find(({ index: index2 }) => index2 < prev.index)) != null ? _a : enabledValues[0];
-            setFocusedIndex(enabledPrev.index);
+            setFocusedIndex((_b = enabledPrev == null ? void 0 : enabledPrev.index) != null ? _b : -1);
           } else {
             setFocusedIndex(prev.index);
           }
@@ -1130,7 +1141,7 @@ var useAutocomplete = (props) => {
       const values = descendants.values();
       let isHit2 = false;
       let isFocused2 = false;
-      values.forEach(({ node, index }) => {
+      values.forEach(({ index, node }) => {
         var _a;
         if (format((_a = node.textContent) != null ? _a : "").includes(value2)) {
           isHit2 = true;
@@ -1188,7 +1199,7 @@ var useAutocomplete = (props) => {
           return selectedValues2[0];
         } else {
           selectedValues2.forEach((selectedValue) => {
-            const isSelected = (0, import_utils11.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
+            const isSelected = (0, import_utils11.isArray)(prev) && prev.includes(selectedValue);
             if (!isSelected) {
               prev = [...(0, import_utils11.isArray)(prev) ? prev : [], selectedValue];
             } else if (runOmit) {
@@ -1293,7 +1304,7 @@ var useAutocomplete = (props) => {
         ({ label: label2 }) => label2 === firstInsertPositionItem
       );
       const targetItem = newItems[i];
-      if (i !== -1 && "items" in targetItem) {
+      if (i !== -1 && targetItem && "items" in targetItem) {
         if (secondInsertPositionItem === "first") {
           targetItem.items = [newItem, ...(_a = targetItem.items) != null ? _a : []];
         } else {
@@ -1377,15 +1388,15 @@ var useAutocomplete = (props) => {
       const actions = {
         ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils11.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
         ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils11.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils11.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0,
+        End: isOpen ? onFocusLast : void 0,
         Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils11.funcAll)(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
           if (inputValue) onChange(inputValue);
           setFocusedIndex(0);
         } : void 0,
-        Home: isOpen ? onFocusFirst : void 0,
-        End: isOpen ? onFocusLast : void 0,
         Escape: closeOnEsc ? onClose : void 0,
-        Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
+        Home: isOpen ? onFocusFirst : void 0,
+        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils11.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
       };
       const action = actions[ev.key];
       if (!action) return;
@@ -1440,7 +1451,7 @@ var useAutocomplete = (props) => {
   (0, import_react5.useEffect)(() => {
     var _a;
     if (isMulti) {
-      if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value != null ? value : []))
+      if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value))
         return;
       const label2 = getSelectedValues(value);
       setLabel(label2);
@@ -1466,34 +1477,34 @@ var useAutocomplete = (props) => {
   });
   (0, import_use_outside_click.useOutsideClick)({
     ref: containerRef,
-    handler: onClose,
-    enabled: isOpen && (closeOnBlur || !isHit)
+    enabled: isOpen && (closeOnBlur || !isHit),
+    handler: onClose
   });
   const getPopoverProps = (0, import_react5.useCallback)(
     (props2) => ({
-      closeOnBlur,
-      openDelay,
+      animation,
+      boundary,
       closeDelay,
+      closeOnBlur,
+      duration,
+      eventListeners,
+      flip,
+      gutter,
       isLazy,
       lazyBehavior,
-      animation,
-      duration,
+      matchWidth,
+      modifiers,
       offset,
-      gutter,
+      openDelay,
+      placement,
       preventOverflow,
-      flip,
-      matchWidth,
-      boundary,
-      eventListeners,
       strategy,
-      placement,
-      modifiers,
       ...props2,
-      trigger: "never",
       closeOnButton: false,
       isOpen,
-      onOpen,
-      onClose
+      trigger: "never",
+      onClose,
+      onOpen
     }),
     [
       closeOnBlur,
@@ -1524,8 +1535,8 @@ var useAutocomplete = (props) => {
       ...containerProps,
       ...props2,
       ...formControlProps,
-      onClick: (0, import_utils11.handlerAll)(props2.onClick, rest.onClick, onClick),
-      onBlur: (0, import_utils11.handlerAll)(props2.onBlur, rest.onBlur, onBlur)
+      onBlur: (0, import_utils11.handlerAll)(props2.onBlur, rest.onBlur, onBlur),
+      onClick: (0, import_utils11.handlerAll)(props2.onClick, rest.onClick, onClick)
     }),
     [containerProps, formControlProps, onBlur, onClick, rest]
   );
@@ -1535,9 +1546,9 @@ var useAutocomplete = (props) => {
       tabIndex: -1,
       ...props2,
       ...formControlProps,
-      placeholder,
-      "data-active": (0, import_utils11.dataAttr)(isOpen),
       "aria-expanded": (0, import_utils11.dataAttr)(isOpen),
+      "data-active": (0, import_utils11.dataAttr)(isOpen),
+      placeholder,
       onFocus: (0, import_utils11.handlerAll)(props2.onFocus, onFocusProp, onFocus),
       onKeyDown: (0, import_utils11.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
     }),
@@ -1553,61 +1564,61 @@ var useAutocomplete = (props) => {
   );
   return {
     id,
-    descendants,
-    value,
-    label,
-    inputValue,
-    isHit,
-    isEmpty,
-    computedChildren,
-    focusedIndex,
-    omitSelectedValues,
-    closeOnSelect,
     allowCreate,
     allowFree,
+    closeOnSelect,
+    computedChildren,
+    descendants,
     emptyMessage,
-    isOpen,
+    focusedIndex,
+    inputRef,
+    inputValue,
     isAllSelected,
+    isEmpty,
+    isHit,
+    isOpen,
+    label,
     listRef,
-    inputRef,
-    optionProps,
-    formControlProps,
+    omitSelectedValues,
+    pickOptions,
+    rebirthOptions,
     setFocusedIndex,
-    onChangeLabel,
+    value,
+    formControlProps,
+    getContainerProps,
+    getFieldProps,
+    getPopoverProps,
+    inputProps,
+    optionProps,
     onChange,
-    onSearch,
-    onCreate,
+    onChangeLabel,
     onClear,
-    onCompositionStart,
-    onCompositionEnd,
-    pickOptions,
-    rebirthOptions,
-    onOpen,
     onClose,
+    onCompositionEnd,
+    onCompositionStart,
+    onCreate,
     onFocusFirst,
     onFocusLast,
-    onFocusSelected,
     onFocusNext,
     onFocusPrev,
-    getPopoverProps,
-    getContainerProps,
-    getFieldProps,
-    inputProps
+    onFocusSelected,
+    onOpen,
+    onSearch
   };
 };
 var useAutocompleteInput = () => {
   const {
     id,
+    focusedIndex,
     inputRef,
-    onSearch,
-    onCompositionStart,
-    onCompositionEnd,
     isAllSelected,
+    isOpen,
+    listRef,
     formControlProps,
     inputProps,
-    isOpen,
-    focusedIndex,
-    listRef
+    onCompositionEnd,
+    onCompositionStart,
+    onSearch
   } = useAutocompleteContext();
   const { value } = useAutocompleteDescendantsContext();
   (0, import_utils11.useUpdateEffect)(() => {
@@ -1619,14 +1630,14 @@ var useAutocompleteInput = () => {
       return {
         ref: (0, import_utils11.mergeRefs)(inputRef, ref),
         ...formControlProps,
-        role: "combobox",
-        "aria-haspopup": "listbox",
-        "aria-autocomplete": "list",
-        "aria-expanded": isOpen,
         "aria-activedescendant": (_a = value(focusedIndex)) == null ? void 0 : _a.node.id,
+        "aria-autocomplete": "list",
         "aria-controls": (_b = listRef.current) == null ? void 0 : _b.id,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
         autoCapitalize: "none",
         autoComplete: "off",
+        role: "combobox",
         spellCheck: "false",
         ...inputProps,
         ...props,
@@ -1635,15 +1646,15 @@ var useAutocompleteInput = () => {
         pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
         tabIndex: isAllSelected ? -1 : 0,
         onChange: (0, import_utils11.handlerAll)(props.onChange, onSearch),
-        onCompositionStart: (0, import_utils11.handlerAll)(
-          props.onCompositionStart,
-          inputProps.onCompositionStart,
-          onCompositionStart
-        ),
         onCompositionEnd: (0, import_utils11.handlerAll)(
           props.onCompositionEnd,
           inputProps.onCompositionEnd,
           onCompositionEnd
+        ),
+        onCompositionStart: (0, import_utils11.handlerAll)(
+          props.onCompositionStart,
+          inputProps.onCompositionStart,
+          onCompositionStart
         )
       };
     },
@@ -1677,58 +1688,58 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
     );
     let {
       className,
-      defaultValue = [],
-      component,
-      separator,
-      isClearable = true,
+      children,
+      closeOnSelect = false,
       color,
+      component,
+      defaultValue = [],
+      footer,
       h,
+      header,
       height,
+      isClearable = true,
+      keepPlaceholder = false,
       minH,
       minHeight,
-      closeOnSelect = false,
-      keepPlaceholder = false,
+      separator,
+      clearIconProps,
       containerProps,
       contentProps,
-      listProps,
+      createProps,
+      emptyProps,
       fieldProps,
-      inputProps,
       iconProps,
-      clearIconProps,
+      inputProps,
+      listProps,
       portalProps = { isDisabled: true },
-      createProps,
-      emptyProps,
-      header,
-      footer,
-      children,
       ...computedProps
     } = (0, import_core9.omitThemeProps)(mergedProps);
     const {
-      value,
-      onClose,
+      allowCreate,
+      computedChildren,
       descendants,
+      inputValue,
+      isEmpty,
+      value,
       formControlProps,
-      getPopoverProps,
       getContainerProps,
       getFieldProps,
-      allowCreate,
-      isEmpty,
-      inputValue,
-      computedChildren,
+      getPopoverProps,
       onClear,
+      onClose,
       ...rest
     } = useAutocomplete({
       ...computedProps,
-      defaultValue,
+      children,
       closeOnSelect,
-      children
+      defaultValue
     });
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     const css = {
-      w: "100%",
-      h: "fit-content",
       color,
+      h: "fit-content",
+      w: "100%",
       ...styles.container
     };
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1736,13 +1747,13 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
       {
         value: {
           ...rest,
-          value,
-          onClose,
-          formControlProps,
-          inputValue,
           allowCreate,
+          inputValue,
           isEmpty,
-          styles
+          styles,
+          value,
+          formControlProps,
+          onClose
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           import_core9.ui.div,
@@ -1761,10 +1772,10 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
                       MultiAutocompleteField,
                       {
                         component,
-                        separator,
-                        keepPlaceholder,
                         h,
+                        keepPlaceholder,
                         minH,
+                        separator,
                         inputProps,
                         ...getFieldProps(fieldProps, ref)
                       }
@@ -1783,8 +1794,8 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
               !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 AutocompleteList,
                 {
-                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
                   footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
+                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
                   contentProps,
                   ...listProps,
                   children: [
@@ -1795,8 +1806,8 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
               ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 AutocompleteList,
                 {
-                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
                   footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
+                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
                   contentProps,
                   ...listProps,
                   children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
@@ -1815,34 +1826,36 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
   ({
     className,
     component,
-    separator = ",",
-    keepPlaceholder,
     h,
+    keepPlaceholder,
     minH,
     placeholder,
+    separator = ",",
     inputProps,
     ...rest
   }, ref) => {
-    const { value, label, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
+    const { inputRef, inputValue, isOpen, label, styles, value, onChange } = useAutocompleteContext();
     const { getInputProps } = useAutocompleteInput();
     const cloneChildren = (0, import_react6.useMemo)(() => {
       if (!(label == null ? void 0 : label.length)) return null;
       if (component) {
         return label.map((label2, index) => {
+          if (!value[index]) return null;
           const onRemove = (ev) => {
+            if (!value[index]) return;
             ev.stopPropagation();
             onChange(value[index]);
             if (inputRef.current) inputRef.current.focus();
           };
           const el = component({
-            value: value[index],
-            label: label2,
             index,
+            label: label2,
+            value: value[index],
             onRemove
           });
           const style = {
-            marginBlockStart: "0.125rem",
             marginBlockEnd: "0.125rem",
+            marginBlockStart: "0.125rem",
             marginInlineEnd: "0.25rem"
           };
           return el ? (0, import_react6.cloneElement)(el, { key: index, style }) : null;
@@ -1858,12 +1871,12 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
       }
     }, [label, component, value, onChange, isOpen, inputRef, separator]);
     const css = {
-      pe: "2rem",
-      h,
-      minH,
+      alignItems: "center",
       display: "flex",
       flexWrap: "wrap",
-      alignItems: "center",
+      h,
+      minH,
+      pe: "2rem",
       ...styles.field,
       cursor: "text"
     };
@@ -1871,25 +1884,25 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
       import_core9.ui.div,
       {
         className: (0, import_utils12.cx)("ui-multi-autocomplete__field", className),
-        __css: css,
         py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
+        __css: css,
         ...rest,
         children: [
           cloneChildren,
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_core9.ui.input,
             {
-              "aria-label": "Input value",
               className: "ui-multi-autocomplete__field__input",
+              "aria-label": "Input value",
+              "aria-multiselectable": "true",
               display: "inline-block",
               flex: "1",
+              marginBlockEnd: "0.125rem",
+              marginBlockStart: "0.125rem",
               minW: "0px",
               overflow: "hidden",
-              marginBlockStart: "0.125rem",
-              marginBlockEnd: "0.125rem",
-              "aria-multiselectable": "true",
-              placeholder: !label || !(label == null ? void 0 : label.length) || keepPlaceholder && isOpen ? placeholder : void 0,
-              ...getInputProps({ ...inputProps, value: inputValue != null ? inputValue : "" }, ref)
+              placeholder: !(label == null ? void 0 : label.length) || keepPlaceholder && isOpen ? placeholder : void 0,
+              ...getInputProps({ ...inputProps, value: inputValue }, ref)
             }
           )
         ]